/*
 * Image Tools app: layout + components. Tokens live in tokens.css.
 * Breakpoints (min-width, documented once, used everywhere):
 *   phone  < 768     switcher bar, stacked stage + inspector, fixed action bar
 *   tablet 768-959   icon rail, stacked stage + inspector, fixed action bar
 *   tablet 768-1023  top tool switcher (icon + name, opens the grouped sheet); stacked below 960
 *   small laptop 1024-1279  compact labelled rail (188px), stage, 304px inspector
 *   laptop 1280-1399  compact labelled rail (188px), stage >= 60%, 304px inspector
 *   No unlabelled icon-only navigation at any width.
 *   desktop >= 1400  labelled rail, stage, 320/340px inspector
 * Selector convention: .it-<block>[-<element>][--<modifier>], all under body.imagestack-page
 * where a site rule (index1.css) could otherwise win.
 */

/* =========================================================================
   0. Shared site chrome on this page (nav, footer). Ported from the old
      imagestack.css so the nav and footer look exactly as they did: Manrope,
      a dark nav glass, and the teal primary button. Scoped to the chrome only.
   ========================================================================= */
body.imagestack-page {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: #EDF5FB;
}

body.imagestack-page .nav-container,
body.imagestack-page .footer-v2 {
  background: rgba(7, 17, 24, 0.9);
  backdrop-filter: blur(18px);
}

/* The old stylesheet styled every site .button on this page (nav auth buttons, the mobile menu).
   Reproduced exactly so the shared chrome is pixel-identical to before. */
body.imagestack-page .button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border: none;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  color: #EDF5FB;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body.imagestack-page .button-primary {
  appearance: none;
  border-radius: 1rem;
  background: linear-gradient(135deg, #8DF6C7 0%, #6BC7FF 100%);
  color: #04131C;
  font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  box-shadow: 0 16px 32px rgba(107, 199, 255, 0.22);
}

body.imagestack-page .button-secondary {
  padding: 0.85rem 1rem;
}

body.imagestack-page .nav-container .auth-buttons .button,
body.imagestack-page .nav-container .auth-buttons-mobile .button {
  width: auto;
  min-width: max-content;
  padding: 0.9rem 1.25rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

body.imagestack-page .button-primary:hover,
body.imagestack-page .button-secondary:hover {
  transform: translateY(-1px);
}

body.imagestack-page .button-primary:hover {
  color: #04131C;
  filter: brightness(1.03);
  box-shadow: 0 20px 40px rgba(107, 199, 255, 0.28);
}

body.imagestack-page .button-secondary:hover {
  border-color: rgba(141, 246, 199, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   1. Workspace shell
   ========================================================================= */
body.imagestack-page .it-app {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100dvh - var(--it-nav-h));
  min-height: 480px;
  background:
    radial-gradient(60% 50% at 50% 42%, var(--accent-wash), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--border);
}

body.imagestack-page .it-main {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--inspector-w);
  min-height: 0;
  min-width: 0;
}

/* Column widths per breakpoint. The stage column keeps >= 60% of the viewport at every desktop
   and laptop width (compact labelled rail + 304px inspector at 1280-1399, icon rail below 1280);
   toasts and the tablet rail read the same variables. */
body.imagestack-page { --rail-w: 216px; --inspector-w: 320px; --stagecol-pad: var(--sp-4); }
@media (min-width: 1600px) { body.imagestack-page { --rail-w: 232px; --inspector-w: 340px; } }
@media (max-width: 1439px) { body.imagestack-page { --rail-w: 196px; --inspector-w: 320px; --stagecol-pad: var(--sp-3); } }
@media (max-width: 1399px) { body.imagestack-page { --rail-w: 188px; --inspector-w: 304px; } }
@media (max-width: 1279px) { body.imagestack-page { --rail-w: 188px; --inspector-w: 304px; } }
@media (max-width: 1023px) { body.imagestack-page { --rail-w: 0px; --inspector-w: 320px; } }

/* =========================================================================
   2. Tool rail (and the shared tool list used by the phone sheet)
   ========================================================================= */
body.imagestack-page .it-rail {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
}

.it-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.it-toolgroup + .it-toolgroup {
  margin-top: var(--sp-4);
}

.it-toolgroup--library {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

body.imagestack-page .it-toolgroup-label {
  margin: 0 0 var(--sp-1);
  padding: 0 var(--sp-3);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

body.imagestack-page .it-toollist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

body.imagestack-page .it-toollink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-toollink:hover {
  background: var(--surface-2);
  color: var(--text);
}

body.imagestack-page .it-toollink[aria-current="page"] {
  background: var(--surface-3);
  color: var(--text);
}

body.imagestack-page .it-toollink[aria-current="page"]::before {
  /* inside the pill, not detached at the rail edge */
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent);
}

.it-toollink-icon {
  flex: 0 0 16px;
  width: 16px;
  font-size: 14px;
  text-align: center;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-toollink:hover .it-toollink-icon,
body.imagestack-page .it-toollink[aria-current="page"] .it-toollink-icon {
  color: var(--accent);
}

.it-toollink-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.it-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: calc(-1 * var(--sp-1));
  padding: 0 5px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.it-tag--free {
  color: var(--accent);
  background: var(--accent-tint);
}

/* Rail footer: the one place usage is explained in words. */
.it-rail-foot {
  flex: 0 0 auto;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
}

body.imagestack-page .it-rail-foot-title {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  color: var(--text);
}

.it-rail-foot-title i {
  margin-top: 3px;
  font-size: 12px;
  color: var(--warning);
}

body.imagestack-page .it-rail-foot-copy {
  margin: var(--sp-1) 0 0;
  padding-left: 20px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}

body.imagestack-page .it-rail-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-2) 0 0 20px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

body.imagestack-page .it-rail-foot-link i { font-size: 10px; transition: transform var(--t-fast) var(--ease-out); }
body.imagestack-page .it-rail-foot-link:hover { color: var(--accent-hover); }
body.imagestack-page .it-rail-foot-link:hover i { transform: translateX(2px); }
body.imagestack-page .it-rail-foot-link--pro { color: var(--pro); }
body.imagestack-page .it-rail-foot-link--pro:hover { color: #DDD6FE; }

/* Phone switcher (hidden until < 768) */
.it-switcherbar { display: none; }

/* =========================================================================
   3. Stage column
   ========================================================================= */
.it-stagecol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 0;
  padding: var(--sp-4) var(--stagecol-pad);
}

.it-stagebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 36px;
}

.it-app[data-state="empty"] .it-stagebar { display: none; }

.it-stagebar-start {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

body.imagestack-page .it-stagebar-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
}

.it-stagebar-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text);
}

.it-stagebar-dims {
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}

.it-stagebar-end {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.it-importchip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  max-width: 320px;
  padding: 0 var(--sp-1) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

.it-importchip > i { color: var(--info); font-size: 11px; }
.it-importchip > span { overflow: hidden; text-overflow: ellipsis; }

body.imagestack-page .it-importchip-close {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
body.imagestack-page .it-importchip-close:hover { background: var(--surface-3); color: var(--text); }

/* Mini segmented group (zoom, preview background) */
.it-segmini {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border);
}

body.imagestack-page .it-segmini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-segmini-btn:hover { color: var(--text); }
body.imagestack-page .it-segmini-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
body.imagestack-page .it-segmini-btn .it-swatch { width: 14px; height: 14px; }

/* ---- The stage ---- */
.it-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--r-xl);
  background: var(--stage);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}

.it-app[data-state="empty"] .it-stage {
  border: 1.5px dashed var(--border-control);
  background: rgba(10, 18, 24, .6);
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.it-app[data-state="empty"] .it-stage:hover { border-color: #6B8599; }

.it-app.is-dragover .it-stage {
  border: 1.5px solid var(--accent);
  background: var(--accent-wash);
}

/* ---- Dropzone (empty state) ---- */
.it-dropzone {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  overflow: auto;
  cursor: pointer;
}

.it-app:not([data-state="empty"]) .it-dropzone { display: none; }
.it-dropzone.is-static { cursor: default; }
.it-app[data-state="empty"] .it-stage:has(.it-dropzone.is-static) { border: 1px solid var(--border); background: var(--stage); }

.it-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(440px, 100%);
  text-align: center;
  cursor: default;
}

.it-dropzone-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 22px;
}

body.imagestack-page .it-dropzone-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}

body.imagestack-page .it-dropzone-sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
  text-wrap: balance;
}

body.imagestack-page .it-dropzone-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--danger);
}

body.imagestack-page .it-dropzone .it-dropzone-btn { margin-top: var(--sp-6); }

.it-kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-2);
  vertical-align: 1px;
}

.it-samples {
  margin-top: var(--sp-8);
}

body.imagestack-page .it-samples-label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--text-3);
}

body.imagestack-page .it-samples-list {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.imagestack-page .it-sample {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--e-1);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-sample img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-med) var(--ease-out);
}

body.imagestack-page .it-sample:hover { border-color: var(--border-control); transform: translateY(-1px); }
body.imagestack-page .it-sample:hover img { transform: scale(1.05); }
body.imagestack-page .it-sample:active { transform: scale(.98); }

body.imagestack-page .it-trust {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
.it-trust i { font-size: 10px; }

.it-dropzone-over {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  pointer-events: none;
}

.it-dropzone-over span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 600;
  color: var(--accent);
}

.it-app.is-dragover .it-dropzone-over { display: grid; }
.it-app.is-dragover .it-dropzone-inner { visibility: hidden; }

/* ---- Preparing an image (decode, orient, fit) or loading an Image Prompts arrival ---- */
.it-stage-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: calc(var(--z-stage-ui) + 2);
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: var(--e-2);
  transform: translate(-50%, -50%);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.it-app.is-loading-source .it-stage-loading,
.it-app.is-importing .it-stage-loading { display: inline-flex; }
.it-app.is-loading-source .it-dropzone-inner,
.it-app.is-importing .it-dropzone-inner { visibility: hidden; }

.it-spinner {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(94, 234, 212, .25);
  border-top-color: var(--accent);
  animation: it-spin .8s linear infinite;
}

@keyframes it-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .it-spinner { animation: none; border-color: var(--accent); border-right-color: transparent; }
}

/* ---- Image viewport, canvas and compare ---- */
.it-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.it-viewport.is-pannable { cursor: grab; }
.it-viewport.is-panning { cursor: grabbing; }

.it-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* The box is scaled with transform, so its chrome is divided by the scale to stay constant on screen. */
  border-radius: calc(6px / var(--it-s, 1));
  overflow: hidden;
  box-shadow:
    0 0 0 calc(1px / var(--it-s, 1)) rgba(255, 255, 255, .04),
    0 calc(8px / var(--it-s, 1)) calc(24px / var(--it-s, 1)) rgba(0, 0, 0, .45);
}

.it-canvas.is-crossfade { transition: opacity var(--t-slow) var(--ease-out); }

.it-canvas[data-bg="checker"],
.it-swatch--checker {
  background-color: var(--checker-a);
  background-image: conic-gradient(var(--checker-b) 25%, transparent 0 50%, var(--checker-b) 0 75%, transparent 0);
  background-size: 24px 24px;
}
.it-canvas[data-bg="light"] { background: #FFFFFF; }
.it-canvas[data-bg="dark"] { background: #000000; }
.it-canvas[data-bg="colour"] { background: var(--it-preview-colour, #FFFFFF); }
.it-canvas[data-bg="none"] { background: var(--surface-2); }

.it-canvas-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  image-rendering: auto;
  -webkit-user-drag: none;
  pointer-events: none;
}


.it-before,
.it-after {
  position: absolute;
  inset: 0;
}

/* Before is clipped to the left of the divider and after to the right, so transparent results
   show the chosen background, never the original leaking through. */
.it-canvas.is-compare .it-before { clip-path: inset(0 calc(100% - var(--clip-left, 50%)) 0 0); }
.it-canvas.is-compare .it-after { clip-path: inset(0 0 0 var(--clip-left, 50%)); }

.it-canvas.is-revealing .it-before,
.it-canvas.is-revealing .it-after {
  transition: clip-path var(--t-slow) var(--ease-in-out);
}

.it-canvas.show-before .it-after { visibility: hidden; }
.it-canvas.show-before .it-before { clip-path: none; }
.it-viewport:has(.it-canvas.show-before) .it-badge--after,
.it-viewport:has(.it-canvas.show-before) .it-compare,
.it-viewport:has(.it-canvas.show-before) .it-stagehint { visibility: hidden; }

.it-overlay-layer {
  position: absolute;
  inset: 0;
}

.it-compare {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: var(--z-stage-ui);
  transform: translateX(var(--divider-x, 50%));
  pointer-events: none;
}

.it-compare[hidden] { display: none; }

.it-compare-line {
  position: absolute;
  top: var(--img-t, 0);
  height: var(--img-h, 100%);
  left: -1px;
  width: 2px;
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

body.imagestack-page .it-compare-handle {
  position: absolute;
  top: 50%;
  left: -18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-control);
  background: var(--surface-1);
  color: var(--text);
  font-size: 10px;
  box-shadow: var(--e-2);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-compare-handle:hover { transform: scale(1.06); border-color: var(--accent); }
body.imagestack-page .it-compare-handle:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--e-2); }
.it-compare-handle i + i { margin-left: -2px; }
.it-compare-handle span { display: inline-flex; gap: 3px; }

.it-badge {
  position: absolute;
  top: var(--sp-3);
  z-index: var(--z-stage-ui);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--badge-ground);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}
.it-badge { left: 0; }
.it-badge.is-faded { opacity: 0; }

.it-stagehint {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: var(--z-stage-ui);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--badge-ground);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-2);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Overlays on the stage: progress, error, locked ---- */
.it-overlay {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-stage-ui) + 1);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}

.it-overlay--progress {
  background: transparent;
  overflow: hidden;
}

/* Dim + scan are confined to the image rectangle (vars set by stage.js), never the letterbox. */
.it-scan {
  position: absolute;
  left: var(--img-l, 0);
  top: var(--img-t, 0);
  width: var(--img-w, 100%);
  height: var(--img-h, 100%);
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--stage-dim);
  pointer-events: none;
}

.it-scan::after {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(94, 234, 212, .10) 70%, rgba(94, 234, 212, .22) 96%, transparent);
  animation: it-scan var(--t-shimmer) linear infinite;
}

@keyframes it-scan {
  from { transform: translateY(0); }
  to { transform: translateY(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .it-scan::after { display: none; }
}

.it-overlay--error {
  /* Docked to the bottom so the subject stays visible; a light scrim on the image only. */
  place-items: end center;
  padding-bottom: var(--sp-5);
  background: transparent;
}
.it-overlay--error::before {
  content: "";
  position: absolute;
  left: var(--img-l, 0);
  top: var(--img-t, 0);
  width: var(--img-w, 100%);
  height: var(--img-h, 100%);
  border-radius: var(--r-sm);
  background: rgba(7, 14, 20, .35);
  pointer-events: none;
}
.it-overlay--error > * { position: relative; }

.it-statuscard {
  position: relative;
  width: min(340px, 100%);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--e-2);
  animation: it-rise var(--t-med) var(--ease-out);
}

.it-statuscard-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

body.imagestack-page .it-statuscard-elapsed {
  margin-left: auto;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--accent);
}

body.imagestack-page .it-statuscard-cancel { height: 32px; padding: 0 var(--sp-2); margin-right: calc(-1 * var(--sp-1)); }

@keyframes it-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

body.imagestack-page .it-statuscard-title {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 700;
  color: var(--text);
}

body.imagestack-page .it-statuscard-meta {
  margin: 2px 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}

.it-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-1);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.it-steps li {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  position: relative;
}

.it-steps li.is-done { background: var(--accent); }
.it-steps li > span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  transition: transform 900ms linear;
}
.it-steps li.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: it-sheen 1.6s var(--ease-in-out) infinite;
}

@keyframes it-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .it-steps li.is-active::after { display: none; }
  .it-steps li > span { transition: none; }
}

body.imagestack-page .it-statuscard-slow {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--warning);
}
.it-statuscard-slow i { margin-top: 2px; }

.it-overlay--error { container-type: inline-size; }

.it-errorcard {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-areas: "icon copy" ". actions";
  gap: var(--sp-2) var(--sp-3);
  width: min(440px, calc(100% - 32px));
  padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--danger-line);
  box-shadow: var(--e-2);
  animation: it-rise var(--t-med) var(--ease-out);
}

@container (min-width: 620px) {
  .it-errorcard {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: "icon copy actions";
    align-items: center;
    width: min(640px, calc(100% - 32px));
  }
}

.it-errorcard-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: rgba(252, 165, 165, .12);
  color: var(--danger);
  font-size: 14px;
}

.it-errorcard-copy { grid-area: copy; min-width: 0; }

body.imagestack-page .it-errorcard-title {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 700;
  color: var(--text);
}

body.imagestack-page .it-errorcard-body {
  margin: 2px 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--text-2);
}

body.imagestack-page .it-errorcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}

.it-errorcard-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

body.imagestack-page .it-errorcard .it-errorcard-dismiss { position: absolute; top: 8px; right: 8px; margin: 0; }

.it-details {
  margin-top: var(--sp-4);
  padding: var(--sp-3) 0 0 44px;
  border-top: 1px solid var(--border);
}

body.imagestack-page .it-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
}
.it-details summary::-webkit-details-marker { display: none; }
.it-details summary i { font-size: 9px; transition: transform var(--t-fast) var(--ease-out); }
.it-details[open] summary i { transform: rotate(90deg); }

body.imagestack-page .it-details pre {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  font: 500 var(--fs-meta)/var(--lh-meta) ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow: auto;
}

/* ---- Result toolbar: one 40px row, slot reserved while an image is on the stage ---- */
.it-resultbar { display: none; }

.it-app[data-state="image"] .it-resultbar {
  flex: 0 0 40px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  height: 40px;
  min-width: 0;
  container-type: inline-size;
}

.it-app[data-state="image"] .it-resultbar:not(.is-idle) > * { animation: it-rise var(--t-med) var(--ease-out); }
.it-resultbar.is-idle { visibility: hidden; }

.it-resultbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.it-resultbar-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 20px;
  background: var(--border);
}

body.imagestack-page .it-resultbar-label {
  margin: 0 var(--sp-1) 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.it-resultbar > .it-resultbar-group:first-child { flex: 0 0 auto; }
.it-resultbar-continue { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
.it-resultbar-continue > * { flex: 0 0 auto; }
.it-resultbar-continue .it-chip { height: 32px; padding: 0 10px; gap: 6px; }
.it-resultbar-more { margin-left: auto; flex: 0 0 auto; }

@container (max-width: 800px) {
  body.imagestack-page .it-resultbar-continue .it-chip--rank3 { display: none; }
}

@container (max-width: 660px) {
  body.imagestack-page .it-resultbar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@container (max-width: 470px) {
  body.imagestack-page .it-resultbar-continue .it-chip--rank2 { display: none; }
}

/* ---- Version strip ---- */
.it-versions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 80px;
  margin-block: -4px;
}

body.imagestack-page .it-versions-list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 0 -8px;
  padding: 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  min-width: 0;
}
.it-versions-list::-webkit-scrollbar { display: none; }
/* Overflow affordance: soft edges only on the side that has more. */
.it-versions-list.is-overflowing:not(.at-start):not(.at-end) { mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.it-versions-list.is-overflowing.at-start:not(.at-end) { mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.it-versions-list.is-overflowing.at-end:not(.at-start) { mask-image: linear-gradient(90deg, transparent, #000 32px); }
.it-versions-new { flex: 0 0 auto; padding: 8px 8px 8px 0; }

body.imagestack-page .it-version {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.it-version.is-new { animation: it-tile-in var(--t-slow) var(--ease-out); }

@keyframes it-tile-in {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: none; }
}

body.imagestack-page .it-version:hover { border-color: var(--border-control); }
/* Selection = accent ring + dot. Keyboard focus = a white outline further out. Never the same. */
body.imagestack-page .it-version[aria-current="true"] {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent);
}
.it-version-dot { display: none; }
.it-version[aria-current="true"] .it-version-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--badge-ground);
}
body.imagestack-page .it-version:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.it-version img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.it-version.has-alpha {
  background-color: var(--checker-a);
  background-image: conic-gradient(var(--checker-b) 25%, transparent 0 50%, var(--checker-b) 0 75%, transparent 0);
  background-size: 12px 12px;
}
.it-version.has-alpha img { object-fit: contain; }

.it-version-glyph {
  position: absolute;
  left: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-sm);
  background: var(--badge-ground);
  color: var(--text);
  font-size: 9px;
}

body.imagestack-page .it-version--new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-style: dashed;
  border-color: var(--border-control);
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
}
body.imagestack-page .it-version--new:hover { color: var(--text); border-color: var(--text-3); }

.it-versions-end {
  margin-left: auto;
  flex: 0 0 auto;
}

body.imagestack-page .it-version-caption { font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; color: inherit; }

/* =========================================================================
   4. Inspector
   ========================================================================= */
body.imagestack-page .it-inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
}

.it-inspector-scroll {
  /* The body scrolls on its own; Run is pinned below it and never moves between states.
     Soft edges (mask) show there is more above or below. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--sp-6);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.it-inspector-head {
  padding-bottom: var(--sp-5);
}

body.imagestack-page .it-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
}

body.imagestack-page .it-desc {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
  text-wrap: pretty;
}

.it-inspector-body.is-swapping { animation: it-fade var(--t-med) var(--ease-out); }

@keyframes it-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.imagestack-page .it-section {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
}

body.imagestack-page .it-section:last-child { padding-bottom: 0; }

.it-section > .it-field + .it-field,
.it-section > .it-field + .it-note,
.it-section > .it-colour-row + .it-field { margin-top: var(--sp-5); }

body.imagestack-page .it-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.imagestack-page .it-label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 var(--sp-2);
  padding: 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text);
}

body.imagestack-page .it-help {
  display: block;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}

body.imagestack-page .it-note {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
body.imagestack-page .it-section > .it-note:first-child { margin-top: 0; }
.it-note i { margin-top: 2px; font-size: 11px; }

/* Readout */
body.imagestack-page .it-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sp-2);
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--text);
}
body.imagestack-page .it-readout.is-empty { font-weight: 500; color: var(--text-3); }
.it-readout-from { color: var(--text-2); }
.it-readout-arrow { color: var(--accent); font-size: 12px; }
.it-readout-to { color: var(--text); }
.it-readout-unit { color: var(--text-3); font-weight: 500; font-size: var(--fs-meta); }

/* Segmented control */
.it-seg {
  display: grid;
  grid-template-columns: repeat(var(--it-seg-count, 3), minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border-control);
}

.it-seg-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

body.imagestack-page .it-seg-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.it-seg-option > span:last-child { overflow: hidden; text-overflow: ellipsis; }

body.imagestack-page .it-seg-option:hover { color: var(--text); background: var(--surface-2); }

body.imagestack-page .it-seg-input:checked + .it-seg-option {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--e-1), inset 0 0 0 1px rgba(94, 234, 212, .45);
}

body.imagestack-page .it-seg-input:focus-visible + .it-seg-option {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.it-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: var(--r-sm);
  background: var(--swatch, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
body.imagestack-page .it-swatch--checker {
  background-color: #F1F5F9;
  background-image: conic-gradient(#94A3B8 25%, transparent 0 50%, #94A3B8 0 75%, transparent 0);
  background-size: 8px 8px;
}

/* Segmented with swatches: visual tiles (swatch above label) so long labels never truncate. */
.it-seg--tiles { padding: 4px; gap: 4px; }
body.imagestack-page .it-seg--tiles .it-seg-option {
  flex-direction: column;
  gap: 6px;
  height: 64px;
  padding: 0 4px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.it-seg--tiles .it-swatch { width: 24px; height: 24px; }
.it-seg--tiles body.imagestack-page .it-swatch--checker {
  background-color: #F1F5F9;
  background-image: conic-gradient(#94A3B8 25%, transparent 0 50%, #94A3B8 0 75%, transparent 0);
  background-size: 8px 8px;
}

/* Colour row (background remover) */
.it-colour-row { margin-top: var(--sp-3); }

.it-colour-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

body.imagestack-page .it-colour-preset,
body.imagestack-page .it-colour-custom {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--swatch, var(--surface-2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-colour-preset:hover,
body.imagestack-page .it-colour-custom:hover { transform: scale(1.08); }

body.imagestack-page .it-colour-preset[aria-checked="true"],
body.imagestack-page .it-colour-custom.is-selected {
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);
}

body.imagestack-page .it-colour-custom {
  background: conic-gradient(from 180deg, #F87171, #FBBF24, #34D399, #60A5FA, #A78BFA, #F472B6, #F87171);
  color: #0B1217;
  font-size: 11px;
  overflow: hidden;
}
.it-colour-custom i { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-pill); background: rgba(255,255,255,.85); pointer-events: none; }
.it-colour-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.it-colour-custom:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Switch */
body.imagestack-page .it-switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0;
  cursor: pointer;
}

.it-switch-copy { min-width: 0; }
.it-switch-copy .it-label { margin-bottom: 0; }
.it-switch-copy .it-help { margin-top: 2px; }

body.imagestack-page .it-switch {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-control);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.it-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--text-3);
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-switch:checked { background: var(--accent); box-shadow: none; }
.it-switch:checked::after { transform: translateX(16px); background: var(--on-accent); }

/* Prompt */
.it-prompt {
  position: relative;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-control);
  transition: box-shadow var(--t-fast) var(--ease-out);
}

.it-prompt:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px var(--surface-1), 0 0 0 4px rgba(94, 234, 212, .55); }

body.imagestack-page .it-textarea {
  display: block;
  width: 100%;
  min-height: calc(3 * var(--lh-body) + 24px);
  max-height: calc(8 * var(--lh-body) + 24px);
  margin: 0;
  padding: var(--sp-3) var(--sp-3) 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: 500 var(--fs-body)/var(--lh-body) var(--font-ui);
  resize: none;
  outline: none;
}
body.imagestack-page .it-textarea::placeholder { color: var(--text-3); opacity: 1; }
body.imagestack-page .it-textarea:focus-visible { outline: none; }

.it-prompt-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3) var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
.it-kbd-hint kbd { font: inherit; }
.it-counter.is-near { color: var(--warning); }

/* Chips */
.it-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

body.imagestack-page .it-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-chip:hover {
  background: var(--surface-3);
  border-color: var(--border-control);
  color: var(--text);
}

body.imagestack-page .it-chip:active { transform: scale(.98); }
body.imagestack-page .it-chip[aria-pressed="true"] { background: var(--surface-3); border-color: var(--accent); color: var(--text); }
.it-chip > i { font-size: 12px; color: var(--accent); }

/* Advanced disclosure */
body.imagestack-page .it-advanced-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
  cursor: pointer;
}
.it-advanced-summary::-webkit-details-marker { display: none; }
.it-advanced-chevron { font-size: 10px; transition: transform var(--t-med) var(--ease-out); }
.it-advanced[open] .it-advanced-chevron { transform: rotate(180deg); }
.it-advanced-body { padding-top: var(--sp-4); }

/* Rebuild placeholder */
.it-placeholder {
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--border);
}

.it-placeholder-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--warning);
  font-size: 15px;
}

body.imagestack-page .it-placeholder-title {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 700;
  color: var(--text);
}

body.imagestack-page .it-placeholder-copy {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}

.it-placeholder-next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ---- Run zone: directly under the controls; pinned at the bottom only when they overflow ---- */
.it-runzone {
  flex: 0 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}

.it-inspector-scroll.fade-bottom { mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent); }
.it-inspector-scroll.fade-top { mask-image: linear-gradient(180deg, transparent, #000 32px); }
.it-inspector-scroll.fade-top.fade-bottom { mask-image: linear-gradient(180deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* ---- Result facts (under Run) ---- */
.it-facts {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  animation: it-fade var(--t-med) var(--ease-out);
}

body.imagestack-page .it-facts-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text);
}

body.imagestack-page .it-facts-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
}

.it-fact {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-3);
}

body.imagestack-page .it-fact dt {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--text-3);
}

body.imagestack-page .it-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sp-3);
  margin: 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text);
}

.it-fact-ok, .it-fact-warn, .it-fact-muted { display: inline-flex; align-items: baseline; gap: 6px; }
.it-fact-ok i { color: var(--success); font-size: 11px; }
.it-fact-warn { color: var(--warning); }
.it-fact-warn i { font-size: 11px; }
body.imagestack-page .it-fact-muted { color: var(--text-3); font-weight: 500; }
body.imagestack-page .it-fact-link { color: var(--accent); font-weight: 600; text-decoration: none; }
body.imagestack-page .it-fact-link:hover { color: var(--accent-hover); text-decoration: underline; }

body.imagestack-page .it-run-helper {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--lh-meta);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--text-3);
}
body.imagestack-page .it-run-helper:empty::before { content: "\00a0"; }

body.imagestack-page .it-run {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 var(--sp-3) 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-gradient);
  color: var(--on-accent);
  font: 700 var(--fs-body)/1 var(--font-ui);
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--e-1);
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-run:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.06) saturate(1.05); }
body.imagestack-page .it-run:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
body.imagestack-page .it-run[aria-disabled="true"] { cursor: progress; }

.it-run-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.it-run-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: rgba(4, 33, 29, .12);
  font-size: var(--fs-meta);
  font-weight: 700;
  white-space: nowrap;
}
.it-run-tag:empty { display: none; }

.it-run-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  opacity: 0;
}

body.imagestack-page .it-run:disabled {
  background: var(--surface-3);
  color: var(--text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}
body.imagestack-page .it-run:disabled .it-run-tag { background: rgba(255, 255, 255, .04); }

body.imagestack-page .it-run.is-running,
body.imagestack-page .it-run.is-running:disabled {
  background: var(--surface-3);
  color: var(--text);
  cursor: progress;
}
body.imagestack-page .it-run.is-running .it-run-tag { background: rgba(255, 255, 255, .06); color: var(--text-2); }
.it-run.is-running .it-run-line { opacity: 1; }
.it-run.is-running .it-run-line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--brand-gradient);
  animation: it-line 1.2s var(--ease-in-out) infinite;
}

@keyframes it-line {
  from { left: -40%; }
  to { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .it-run.is-running .it-run-line::after { left: 0; width: 100%; opacity: .6; }
}

body.imagestack-page .it-run.is-outline,
body.imagestack-page .it-run.is-outline:hover {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-control);
  filter: none;
}
body.imagestack-page .it-run.is-outline .it-run-tag { background: var(--surface-3); color: var(--text-2); }
body.imagestack-page .it-run.is-outline:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
body.imagestack-page .it-run.is-outline.is-pro .it-run-tag { background: rgba(196, 181, 253, .14); color: var(--pro); }

body.imagestack-page .it-run-meta {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
  text-align: center;
}

.it-actionbar { display: none; }

/* =========================================================================
   5. Buttons, icon buttons, menus, tooltip
   ========================================================================= */
body.imagestack-page .it-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

body.imagestack-page .it-btn:active:not(:disabled) { transform: scale(.98); }
body.imagestack-page .it-btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
body.imagestack-page .it-btn > i { font-size: 13px; }
body.imagestack-page .it-btn .it-btn-caret { font-size: 9px; margin-left: -2px; opacity: .8; }

body.imagestack-page .it-btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

body.imagestack-page .it-btn--secondary {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--e-1), inset 0 0 0 1px var(--border);
}
body.imagestack-page .it-btn--secondary:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

body.imagestack-page .it-btn--primary-outline {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .55);
  background: rgba(94, 234, 212, .04);
}
body.imagestack-page .it-btn--primary-outline:hover:not(:disabled) { color: var(--text); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }

body.imagestack-page .it-btn--accent {
  background: var(--brand-gradient);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: var(--e-1);
}
body.imagestack-page .it-btn--accent:hover:not(:disabled) { color: var(--on-accent); filter: brightness(1.06); }

body.imagestack-page .it-btn--pro {
  background: var(--pro-fill);
  color: #FFFFFF;
  font-weight: 700;
}
body.imagestack-page .it-btn--pro:hover:not(:disabled) { background: var(--pro-fill-hover); color: #FFFFFF; }

body.imagestack-page .it-btn--lg { height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-body); }
body.imagestack-page .it-btn--block { width: 100%; }

body.imagestack-page .it-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
body.imagestack-page .it-iconbtn:hover { background: var(--surface-2); color: var(--text); }

.it-menu {
  position: fixed;
  z-index: 2147483600; /* above the Prompt Keeper widget (2147483000) */
  min-width: 200px;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--sp-1);
  border-radius: var(--r-lg);
  background: var(--surface-3);
  border: 1px solid #25394A;
  box-shadow: var(--e-2);
  animation: it-pop var(--t-med) var(--ease-out);
}

@keyframes it-pop {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

body.imagestack-page .it-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.imagestack-page .it-menu-item:hover,
body.imagestack-page .it-menu-item:focus-visible { background: rgba(255, 255, 255, .06); color: var(--text); outline: none; }
.it-menu-item > i { width: 16px; font-size: 13px; text-align: center; color: var(--text-3); }
.it-menu-item-meta { margin-left: auto; font-size: var(--fs-meta); font-weight: 500; color: var(--text-3); }
.it-menu-sep { height: 1px; margin: var(--sp-1) var(--sp-2); background: rgba(255, 255, 255, .06); }
body.imagestack-page .it-menu-label { margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--text-3); }

body.imagestack-page .it-tooltip {
  position: fixed;
  z-index: 2147483601;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  background: #22384A;
  color: var(--text);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  white-space: nowrap;
  box-shadow: var(--e-2);
  pointer-events: none;
  animation: it-fade var(--t-fast) var(--ease-out);
}

/* =========================================================================
   6. Toasts
   ========================================================================= */
/* Desktop: centred at the top of the stage column, so a toast never lands on Run, the result
   toolbar or the version strip. Phones: above the action bar (see responsive section). */
body.imagestack-page .it-toasts {
  position: fixed;
  top: calc(var(--it-nav-h) + 84px);
  left: calc(var(--rail-w) + (100vw - var(--rail-w) - var(--inspector-w)) / 2);
  z-index: 2147483600;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - var(--rail-w) - var(--inspector-w) - 32px);
  gap: var(--sp-2);
  pointer-events: none;
}

.it-toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(420px, calc(100vw - 32px));
  min-height: 44px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid #25394A;
  box-shadow: var(--e-2);
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  pointer-events: auto;
  animation: it-toast-in var(--t-med) var(--ease-out);
}
.it-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.it-toast > i { font-size: 15px; }
.it-toast--success > i { color: var(--success); }
.it-toast--info > i { color: var(--info); }
.it-toast--warning > i { color: var(--warning); }
.it-toast-text { padding: 2px 0; }
.it-toast-text:last-child { padding-right: var(--sp-2); }

@keyframes it-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================================
   7. Dialogs and sheets (native <dialog>: focus trap, inert page, Esc, top layer)
   ========================================================================= */
body.imagestack-page dialog.it-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

body.imagestack-page dialog.it-dialog::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.imagestack-page dialog.it-dialog[open] { animation: it-dialog-in var(--t-med) var(--ease-out); }
body.imagestack-page dialog.it-dialog[open]::backdrop { animation: it-fade var(--t-med) var(--ease-out); }

@keyframes it-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.it-dialog-panel {
  position: relative;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--e-3);
}

.it-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.it-dialog-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
}

.it-dialog-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 16px;
}
.it-dialog-icon--pro { background: rgba(196, 181, 253, .14); color: var(--pro); }
.it-dialog-icon--warning { background: rgba(252, 211, 77, .12); color: var(--warning); }
.it-dialog-icon--image { width: 64px; height: 64px; padding: 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.it-dialog-icon--image img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.imagestack-page .it-dialog-title {
  margin: 0;
  padding-right: var(--sp-8);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

body.imagestack-page .it-dialog-body {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
  text-wrap: pretty;
}

.it-dialog-extra { margin-top: var(--sp-5); }

body.imagestack-page .it-dialog-extra-label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  color: var(--text);
}

.it-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.it-dialog-actions--row { flex-direction: row; justify-content: flex-end; }

body.imagestack-page .it-dialog-fine {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
  text-align: center;
}

/* Tool sheet list */
.it-sheet-handle { display: none; }

.it-sheet-tools { margin-top: var(--sp-4); }
body.imagestack-page .it-sheet-tools .it-toollink { height: 48px; font-size: var(--fs-body); }
body.imagestack-page .it-sheet-tools .it-toollink[aria-current="page"]::before { left: 0; top: 12px; bottom: 12px; }
.it-sheet-tools .it-toolgroup-label { padding-left: var(--sp-3); }

/* =========================================================================
   8. Prompt Keeper launcher: page-scoped placement so it never covers the
      switcher, Run or the action bar (06 §9). The shared widget is untouched.
   ========================================================================= */
/* The floating launcher is hidden on this page at every size (it covered the rail foot's upgrade
   link at laptop heights and controls on phones). "Ask Keeper" lives in the rail and the tool sheet;
   the panel still opens from the bottom-left corner. */
body.imagestack-page .pk-root { left: 16px; right: auto; bottom: 16px; }
body.imagestack-page .pk-root:not(.pk-is-open) .pk-launcher { display: none; }
body.imagestack-page .pk-root .pk-panel { left: 0; right: auto; }

/* =========================================================================
   9. Responsive
   ========================================================================= */
@media (max-width: 1279px) {
  .it-stagecol { padding: var(--sp-3) var(--sp-3); }
  .it-inspector-scroll { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
  .it-runzone { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  body.imagestack-page .pk-root { left: 8px; bottom: 12px; }
}

/* Tablet 768-1023: no rail. The phone-style switcher (current tool icon + name, opening the grouped
   sheet) sits on top of the workspace, so the tool is always named above the stage. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.imagestack-page .it-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.imagestack-page .it-rail { display: none; }
  body.imagestack-page .it-main { grid-column: 1; grid-row: 2; }
  body.imagestack-page .it-switcherbar {
    grid-column: 1; grid-row: 1;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    height: 56px; padding: 0 var(--sp-4);
    background: var(--surface-1); border-bottom: 1px solid var(--border);
  }
  body.imagestack-page .it-switcher {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; height: 44px;
    margin: 0 0 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-3) 0 var(--sp-2);
    border: 0; border-radius: var(--r-md); background: transparent; color: var(--text);
    font: 700 var(--fs-body)/var(--lh-body) var(--font-ui); cursor: pointer;
  }
  body.imagestack-page .it-switcher:hover, body.imagestack-page .it-switcher:active { background: var(--surface-2); }
  .it-switcher-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent); font-size: 13px; }
  .it-switcher-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .it-switcher-chevron { font-size: 11px; color: var(--text-3); }
  .it-switcher-usage { flex: 0 0 auto; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--text-3); }
}

/* Stacked layouts: the inspector flows under the stage and Run moves to a fixed bar.
   (A drawer would hide the prompt, which is the main input of half the tools.) */
@media (max-width: 959px) {
  body.imagestack-page .it-app {
    height: auto;
    min-height: calc(100dvh - var(--it-nav-h));
    align-items: start;
    padding-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px));
  }
  body.imagestack-page .it-rail { align-self: stretch; }
  body.imagestack-page .it-main { display: block; }
  .it-stagecol { padding: var(--sp-4) var(--sp-4) 0; }
  .it-stage {
    flex: 0 0 auto;
    /* Fit the stage to the image (no letterbox bands), capped so the tool name and controls
       start in the first viewport. */
    height: clamp(320px, calc((100vw - 88px) / var(--it-img-aspect, 1.5) + 48px), 52dvh);
  }
  .it-app[data-state="empty"] .it-stage { height: 420px; }
  body.imagestack-page .it-inspector { border-left: 0; background: transparent; }
  .it-inspector-scroll { overflow: visible; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
  .it-runzone { display: none; }

  body.imagestack-page .it-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-actionbar);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--actionbar-h);
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    background: rgba(12, 22, 30, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: var(--e-2);
  }
  .it-actionbar[hidden] { display: none !important; }
  .it-actionbar-run, .it-actionbar-result { flex: 1 1 auto; display: flex; gap: var(--sp-2); }
  .it-actionbar-result > .it-btn { flex: 1 1 0; }
  body.imagestack-page .it-run--bar { height: 56px; font-size: var(--fs-body); }
  .it-actionbar.is-pulse { animation: it-pulse var(--t-slow) var(--ease-out); }
  body.imagestack-page .it-app[data-state] .it-resultbar { display: none; }

  body.imagestack-page .pk-root { left: auto; right: 12px; bottom: calc(var(--actionbar-h) + 12px + env(safe-area-inset-bottom, 0px)); }
  body.imagestack-page .pk-root .pk-panel { left: auto; right: 0; }

  body.imagestack-page .it-toasts {
    top: auto;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--actionbar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
    align-items: center;
    width: auto;
    max-width: none;
    transform: none;
  }
}

@keyframes it-pulse {
  0% { box-shadow: var(--e-2), inset 0 1px 0 rgba(94, 234, 212, 0); }
  40% { box-shadow: var(--e-2), inset 0 1px 0 rgba(94, 234, 212, .9); }
  100% { box-shadow: var(--e-2), inset 0 1px 0 rgba(94, 234, 212, 0); }
}

@media (max-width: 767px) {
  body.imagestack-page .it-app { display: block; }
  body.imagestack-page .it-rail { display: none; }

  body.imagestack-page .it-switcherbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: 56px;
    padding: 0 var(--sp-4);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
  }

  body.imagestack-page .it-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    height: 40px;
    margin: 0 0 0 calc(-1 * var(--sp-2));
    padding: 0 var(--sp-3) 0 var(--sp-2);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    font: 700 var(--fs-body)/var(--lh-body) var(--font-ui);
    cursor: pointer;
  }
  body.imagestack-page .it-switcher:hover, body.imagestack-page .it-switcher:active { background: var(--surface-2); }
  .it-switcher-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 13px;
  }
  .it-switcher-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .it-switcher-chevron { font-size: 11px; color: var(--text-3); }
  .it-switcher-usage {
    flex: 0 0 auto;
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    font-weight: 600;
    color: var(--text-3);
  }

  .it-stagecol { padding: var(--sp-3) var(--sp-4) 0; gap: var(--sp-2); }
  .it-stage { height: auto; aspect-ratio: var(--it-stage-aspect, 4 / 5); max-height: calc(100svh - var(--it-nav-h) - 56px - var(--actionbar-h) - 32px); min-height: 300px; }
  .it-app[data-state="empty"] .it-stage { aspect-ratio: auto; height: clamp(340px, calc(100svh - var(--it-nav-h) - 56px - var(--actionbar-h) - 28px), 520px); max-height: none; }
  .it-dropzone { padding: var(--sp-4); }
  .it-dropzone-icon { width: 48px; height: 48px; font-size: 18px; margin-bottom: var(--sp-3); }
  body.imagestack-page .it-dropzone .it-dropzone-btn { margin-top: var(--sp-5); }
  .it-samples { margin-top: var(--sp-5); }
  body.imagestack-page .it-sample { width: 64px; height: 64px; }
  body.imagestack-page .it-trust { margin-top: var(--sp-4); }
  .it-paste-hint { display: none; }
  body.imagestack-page .it-dropzone .it-dropzone-btn { height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-body); }
  .it-versions-end { display: none; }

  .it-stagebar { min-height: 32px; }
  .it-stagebar-dims { display: none; }
  .it-segmini-zoom { display: none; }
  .it-importchip { max-width: none; }
  .it-stagebar-start { flex: 1 1 auto; }

  .it-inspector-scroll { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .it-inspector-head { padding-bottom: var(--sp-4); }
  body.imagestack-page .it-toasts { left: var(--sp-4); right: var(--sp-4); }

  /* Dialogs become bottom sheets */
  body.imagestack-page dialog.it-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
  }
  body.imagestack-page dialog.it-dialog[open] { animation: it-sheet-in var(--t-slow) var(--ease-out); }
  .it-dialog-panel {
    max-height: 92dvh;
    padding: var(--sp-3) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
  }
  .it-sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--surface-3);
  }
  .it-dialog-close { top: var(--sp-5); }
}

@keyframes it-sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.imagestack-page dialog.it-dialog[open] { animation: it-fade 120ms linear; }
}

@media (hover: none) {
  .it-kbd-hint, .it-paste-hint { display: none; }
}

/* =========================================================================
   10. Round 2 refinements (critic round 1): auth sheet, Google button
   ========================================================================= */
.it-auth-extra { display: grid; gap: var(--sp-4); }
.it-dialog-extra:has(.it-auth-extra) + .it-dialog-actions { margin-top: var(--sp-2); }

body.imagestack-page .it-btn--google {
  background: #FFFFFF;
  color: #1F1F1F;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #DADCE0;
}
body.imagestack-page .it-btn--google:hover:not(:disabled) { background: #F8FAFD; color: #1F1F1F; }
.it-btn--google svg { flex: 0 0 auto; }

.it-gsi-host { display: flex; justify-content: center; min-height: 44px; align-items: center; color-scheme: light; }
body.imagestack-page .it-gsi-error {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--danger);
  text-align: center;
}

/* Zoomed compare: edge chevron that recentres an off-screen divider, and a one-time pan hint. */
body.imagestack-page .it-divider-edge {
  position: absolute;
  top: 50%;
  z-index: var(--z-stage-ui);
  display: grid;
  place-items: center;
  width: 28px;
  height: 56px;
  margin-top: -28px;
  padding: 0;
  border: 1px solid var(--border-control);
  background: var(--surface-1);
  color: var(--text);
  font-size: 11px;
  box-shadow: var(--e-2);
  cursor: pointer;
}
body.imagestack-page .it-divider-edge[data-side="left"] { left: 0; border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
body.imagestack-page .it-divider-edge[data-side="right"] { right: 0; border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); }
body.imagestack-page .it-divider-edge:hover { color: var(--accent); }
.it-stagehint--pan { display: inline-flex; align-items: center; gap: 6px; top: var(--sp-3) !important; left: 50% !important; transform: translateX(-50%); }

.it-sheet-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
body.imagestack-page .it-sheet-keeper { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
body.imagestack-page .it-sheet-keeper-meta { margin-left: auto; font-size: var(--fs-meta); font-weight: 500; color: var(--text-3); }

/* Phone menus as sheets */
.it-menusheet-list { display: grid; margin-top: var(--sp-3); }
body.imagestack-page .it-menusheet .it-menu-item { min-height: 48px; font-size: var(--fs-body); border-radius: var(--r-md); }
body.imagestack-page .it-menusheet .it-menu-sep { background: var(--border); margin: var(--sp-1) 0; }

/* Touch: every interactive target is at least 44px (WCAG 2.5.5). Visual sizes stay; hit areas grow. */
@media (pointer: coarse) {
  body.imagestack-page .it-switcher { min-height: 44px; }
  body.imagestack-page .it-iconbtn { min-width: 44px; min-height: 44px; }
  body.imagestack-page .it-chip { min-height: 44px; }
  body.imagestack-page .it-menu-item { min-height: 48px; }
  body.imagestack-page .it-seg-option { min-height: 44px; }
  body.imagestack-page .it-segmini { height: 44px; }
  body.imagestack-page .it-segmini-btn { min-width: 44px; height: 38px; }
  body.imagestack-page .it-colour-preset,
  body.imagestack-page .it-colour-custom { width: 44px; height: 44px; }
  body.imagestack-page .it-compare-handle::before { content: ""; position: absolute; inset: -6px; border-radius: var(--r-pill); }
  body.imagestack-page .it-importchip-close { position: relative; }
  body.imagestack-page .it-importchip-close::before { content: ""; position: absolute; inset: -11px; }
  body.imagestack-page .it-dropzone-title .it-title-fine { display: none; }
}

/* Error card details: one reference line, raw codes only in the copied payload. */
body.imagestack-page .it-errorcard-ref {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 auto;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
body.imagestack-page .it-errorcard-ref-copy {
  padding: 2px 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  cursor: pointer;
}
body.imagestack-page .it-errorcard-ref-copy:hover { background: var(--surface-2); }

/* Running Run button: visibly alive, not disabled-looking. */
body.imagestack-page .it-run.is-running,
body.imagestack-page .it-run.is-running:disabled {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .28);
}
body.imagestack-page .it-run.is-running .it-run-tag { background: rgba(94, 234, 212, .14); color: var(--accent); }
.it-run.is-running .it-run-line { left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: var(--r-pill); background: rgba(94, 234, 212, .15); }

/* Rail: tools still being rebuilt */
.it-tag--soon { color: var(--text-3); background: var(--surface-2); }
@media (max-width: 1599px) and (min-width: 1024px) {
  body.imagestack-page .it-rail .it-tag--soon { display: none; }
  body.imagestack-page .it-rail .it-toollink:has(.it-tag--soon) .it-toollink-label { color: var(--text-3); }
}
@media (max-width: 1279px) {
  body.imagestack-page .it-rail .it-tag--soon { display: none; }
}

/* Stage bar: preview background group, labelled */
.it-previewon { display: inline-flex; align-items: center; gap: var(--sp-2); }
.it-previewon[hidden] { display: none; }
body.imagestack-page .it-previewon-label { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--text-3); white-space: nowrap; }

/* Skip link */
body.imagestack-page .it-skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 2147483602;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 14px/20px var(--font-ui);
  text-decoration: none;
}
body.imagestack-page .it-skip:focus { top: 12px; outline: 2px solid var(--text); outline-offset: 2px; }

/* Wraps: no orphans in short copy */
.it-trust, .it-errorcard-body, .it-dialog-panel p, .it-rail-foot-copy, .it-help, .it-note span, .it-desc, .it-dropzone-sub, .it-placeholder-copy, .it-statuscard-slow { text-wrap: pretty; }

/* Column heads share one top line (rail group label, stage bar, H1 at 16px). */
.it-inspector-head { min-height: 36px; }

/* Phones: the run status is a compact card docked to the bottom of the stage. */
@media (max-width: 767px) {
  .it-overlay--progress { place-items: end stretch; padding: var(--sp-3); }
  .it-statuscard { width: 100%; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
  body.imagestack-page .it-statuscard-title { font-size: var(--fs-body); line-height: var(--lh-body); }
  body.imagestack-page .it-statuscard-meta { display: none; }
  .it-steps { margin-top: var(--sp-2); }
  body.imagestack-page .it-statuscard-slow { margin-top: var(--sp-2); }
  .it-overlay--error { padding: var(--sp-3); place-items: end center; }
}

/* Very wide screens: the nav spans the full workspace, so the logo lines up with the rail inset
   instead of floating in a centred 1280px container above a full-bleed tool. */
@media (min-width: 1600px) {
  body.imagestack-page .nav-content { max-width: none; padding-left: 20px; padding-right: 20px; }
}
body.imagestack-page .it-sheet-foot .it-toollink { height: 48px; font-size: var(--fs-body); }
@media (pointer: coarse) {
  body.imagestack-page .it-fact-link { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; padding: 0 8px; }
}
.it-overlay--error.is-top { place-items: start center; padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
@media (max-width: 767px) {
  body.imagestack-page .it-previewon-label { display: none; }
  .it-stagebar:has(.it-previewon:not([hidden])) .it-stagebar-title { display: none; }
  .it-stagebar:has(.it-previewon:not([hidden])) .it-stagebar-end { margin-left: auto; }
}


/* =========================================================================
   11. Round 3: laptop heights, Keeper entry, toolbar preview, guide, focus
   ========================================================================= */
body.imagestack-page button.it-toollink { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--font-ui); }
body.imagestack-page button.it-toollink:hover { background: var(--surface-2); color: var(--text); }
.it-toollist--keeper { margin-top: 2px !important; }
body.imagestack-page .it-main:focus { outline: none; }

/* The stage can shrink on short laptop viewports; Run is pinned in the inspector, so it never leaves the fold. */
.it-stage { min-height: 280px; }

.it-rail-scroll.fade-bottom { mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.it-rail-scroll.fade-top { mask-image: linear-gradient(180deg, transparent, #000 28px); }
.it-rail-scroll.fade-top.fade-bottom { mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

@media (min-width: 960px) and (max-height: 780px) {
  .it-stagecol { padding-block: var(--sp-3); gap: var(--sp-2); }
  .it-stagebar { min-height: 32px; }
  .it-app[data-state="image"] .it-resultbar { flex-basis: 36px; height: 36px; }
  body.imagestack-page .it-resultbar .it-btn { height: 32px; }
  .it-versions { min-height: 64px; margin-block: -6px; }
  body.imagestack-page .it-versions-list { padding: 6px 8px; }
  body.imagestack-page .it-version { width: 52px; height: 52px; }
  .it-versions-new { padding: 6px 8px 6px 0; }
  .it-version-caption { display: none; }
  .it-inspector-scroll { padding-top: var(--sp-3); }
  body.imagestack-page .it-h1 { font-size: 1.5rem; line-height: 1.875rem; }
  .it-inspector-head { padding-bottom: var(--sp-3); min-height: 0; }
  body.imagestack-page .it-section { padding: var(--sp-4) 0; }
  .it-runzone { padding: var(--sp-3) var(--sp-5) var(--sp-4); }
  body.imagestack-page .it-run:not(.it-run--bar) { height: 44px; }
  .it-rail-scroll { padding-block: var(--sp-3); }
  body.imagestack-page .it-rail .it-toollink { height: 32px; }
  .it-toolgroup + .it-toolgroup { margin-top: var(--sp-2); }
  .it-toolgroup--library { padding-top: var(--sp-2); }
}
@media (min-width: 1024px) and (max-height: 780px) {
  /* Labelled rail at short heights: the foot is one line ("1 free run per tool · Upgrade for more ›").
     The icon rail never shows the text foot (it has the bolt button instead). */
  .it-rail-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  body.imagestack-page .it-rail-foot-copy { display: none; }
  body.imagestack-page .it-rail-foot-link { margin: 0; }
}

/* Google: one reserved 44px slot. Fallback and Google's own button overlap; the swap moves nothing. */
.it-google-slot { position: relative; height: 44px; }
.it-google-slot .it-btn--google { position: absolute; inset: 0; }
.it-gsi-host { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; visibility: hidden; min-height: 0; }
.it-google-slot.is-gsi .it-gsi-host { visibility: visible; }
.it-google-slot.is-gsi .it-btn--google { visibility: hidden; }
/* Brand exception (documented): the fallback mirrors Google's own "large outline" button exactly
   (40px, 4px radius, #DADCE0 hairline) so revealing the real one changes nothing visually. */
body.imagestack-page .it-google-slot .it-btn--google {
  inset: 2px 0;
  height: 40px;
  border-radius: 4px;
  font: 500 14px/20px "Google Sans", Roboto, var(--font-ui);
  letter-spacing: .01em;
}

/* How it works */
.it-guide { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
body.imagestack-page .it-guide-summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 32px;
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; color: var(--text-2);
  list-style: none; cursor: pointer; border-radius: var(--r-sm);
}
.it-guide-summary::-webkit-details-marker { display: none; }
body.imagestack-page .it-guide-summary:hover { color: var(--text); }
.it-guide-chevron { font-size: 10px; color: var(--text-3); transition: transform var(--t-med) var(--ease-out); }
.it-guide[open] .it-guide-chevron { transform: rotate(180deg); }
body.imagestack-page .it-guide-steps { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: 0; list-style: none; counter-reset: it-step; }
body.imagestack-page .it-guide-steps li {
  position: relative; padding-left: 28px; counter-increment: it-step;
  font-size: var(--fs-meta); line-height: 20px; color: var(--text-3); text-wrap: pretty;
}
.it-guide-steps li::before {
  content: counter(it-step); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  font: 700 var(--fs-micro)/1 var(--font-ui); color: var(--text-2);
}
@media (pointer: coarse) { body.imagestack-page .it-guide-summary { min-height: 44px; } }

/* Result toolbar preview (before the first result): the same row, inert and greyed, with a hint. */
.it-resultbar.is-idle { visibility: hidden; }
.it-resultbar.is-idle.is-preview { visibility: visible; }
/* Round 4: the pre-run row is one quiet line, left-aligned under the stage. Hidden while a toast uses the row. */
body.imagestack-page .it-resultbar-hint {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3);
}
body.imagestack-page .it-resultbar-hint i { font-size: 11px; opacity: .7; }
body.imagestack-page .it-resultbar-hint span { overflow: hidden; text-overflow: ellipsis; }
body.it-toast-in-row .it-resultbar.is-idle .it-resultbar-hint { visibility: hidden; }

/* Round 3: coarse-pointer remainders, focused control never under the fade, phone stage bar, limit title */
@media (pointer: coarse) {
  body.imagestack-page .it-segmini-btn { min-height: 44px; height: 44px; }
  body.imagestack-page .it-segmini { height: auto; }
  body.imagestack-page .it-versions-end .it-btn { min-height: 44px; }
  body.imagestack-page .it-statuscard-cancel { min-height: 44px; }
}
.it-inspector-scroll { scroll-padding-block: 48px; }
@media (max-width: 767px) {
  .it-stagebar:has(.it-previewon:not([hidden])) .it-stagebar-start { display: none; }
  .it-stagebar:has(.it-previewon:not([hidden])) .it-stagebar-end { margin-left: 0; width: 100%; }
  .it-stagebar:has(.it-previewon:not([hidden])) [data-replace-image] { margin-left: auto; }
}
body.imagestack-page #itDialogTitle { text-wrap: pretty; }
@media (min-width: 1600px) {
  body.imagestack-page .nav-content { padding-left: 8px; }
}
/* Round 4 error card. Desktop: the charge line and the reference each on their own line (no dangling "·").
   Phones: one 44px row ("That didn't work" · Details · Try again), everything else behind Details. */
body.imagestack-page .it-errorcard-meta + .it-errorcard-meta { margin-top: 0; }
body.imagestack-page .it-errorcard-refline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
body.imagestack-page .it-errorcard .it-errorcard-detailsbtn, body.imagestack-page .it-errorcard-panel, body.imagestack-page .it-errorcard-reason { display: none; }
@media (max-width: 767px) {
  .it-overlay--error { padding: var(--sp-2); }
  .it-errorcard {
    width: 100%;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: "icon copy actions" "panel panel panel";
    align-items: center;
    gap: 0 var(--sp-2);
    padding: 4px 4px 4px var(--sp-3);
  }
  .it-errorcard-icon { width: 20px; height: 20px; background: none; font-size: 13px; }
  /* The row names the reason, not a generic title (the title stays for aria-labelledby). */
  body.imagestack-page .it-errorcard-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.imagestack-page .it-errorcard .it-errorcard-reason {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin: 0; font-size: var(--fs-meta); line-height: 17px; font-weight: 600; color: var(--text);
  }
  body.imagestack-page .it-errorcard-copy .it-errorcard-body,
  body.imagestack-page .it-errorcard-copy .it-errorcard-meta,
  body.imagestack-page .it-errorcard .it-errorcard-dismiss,
  body.imagestack-page .it-errorcard-actions > .it-btn:not([data-error-retry]):not(.it-errorcard-detailsbtn) { display: none; }
  .it-errorcard-actions { flex-wrap: nowrap; gap: 4px; }
  body.imagestack-page .it-errorcard .it-btn { height: 44px; min-height: 44px; padding: 0 var(--sp-3); }
  body.imagestack-page .it-errorcard .it-errorcard-detailsbtn { display: inline-flex; justify-content: center; width: 44px; padding: 0; color: var(--text-2); }
  .it-errorcard-detailsbtn i { font-size: 13px; transition: transform var(--t-fast) var(--ease-out); }
  .it-errorcard.is-details-open .it-errorcard-detailsbtn i { transform: rotate(180deg); }
  body.imagestack-page .it-errorcard-panel:not([hidden]) {
    grid-area: panel;
    display: block;
    margin-top: 4px;
    padding: var(--sp-2) var(--sp-2) var(--sp-1) 0;
    border-top: 1px solid var(--border);
  }
  body.imagestack-page .it-errorcard-panel-body { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
  body.imagestack-page .it-errorcard-panel .it-errorcard-meta { margin-top: var(--sp-1); }
  body.imagestack-page .it-errorcard-refline--full .it-num { word-break: break-all; }
  body.imagestack-page .it-errorcard-panel .it-errorcard-ref-copy { min-height: 44px; min-width: 44px; padding: 0 var(--sp-3); }
  .it-errorcard-panel-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
}
@media (pointer: coarse) {
  body.imagestack-page .it-errorcard .it-errorcard-ref-copy { min-height: 44px; min-width: 44px; padding: 0 var(--sp-3); }
  body.imagestack-page .it-dropzone-btn { min-height: 44px; }
}
/* Coarse pointers: the mini segmented groups are exactly 44px tall (no padding/border growth), so the
   stage bar keeps one height whether or not "Preview on" is showing. */
@media (pointer: coarse) {
  body.imagestack-page .it-segmini { height: 44px; padding: 0; border: 0; gap: 2px; }
  body.imagestack-page .it-segmini-btn { height: 44px; min-height: 44px; }
  .it-stagebar { min-height: 44px; }
}

/* =========================================================================
   Round 4: icon rail usage button + popover (the text foot never renders in the icon rail)
   ========================================================================= */
.it-rail-usage { display: none; }
@media (min-width: 768px) and (max-width: 767px) { /* retired: no icon rail any more */
  .it-rail-usage {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    padding: var(--sp-2) 0 var(--sp-3);
    border-top: 1px solid var(--border);
  }
  body.imagestack-page .it-rail .it-rail-usagebtn { color: var(--warning); }
  body.imagestack-page .it-rail .it-rail-usagebtn[aria-expanded="true"] { background: var(--surface-3); }
  body.imagestack-page .it-rail .it-rail-usagebtn .it-toollink-icon { color: var(--warning); }
}
.it-usagepop {
  position: fixed;
  display: flex;
  gap: var(--sp-2);
  width: 248px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-3);
  border: 1px solid #25394A;
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  z-index: 2147483600;
  animation: it-pop var(--t-med) var(--ease-out);
}
.it-usagepop:focus { outline: none; }
.it-usagepop-icon { margin-top: 3px; font-size: 12px; color: var(--warning); }
.it-usagepop-text { min-width: 0; }
body.imagestack-page .it-usagepop-title { margin: 0; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; color: var(--text); }
body.imagestack-page .it-usagepop-copy { margin: var(--sp-1) 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
body.imagestack-page .it-usagepop-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: var(--sp-1);
  font-size: var(--fs-label); font-weight: 700; color: var(--accent); text-decoration: none;
}
body.imagestack-page .it-usagepop-link i { font-size: 10px; }
body.imagestack-page .it-usagepop-link:hover { color: var(--accent-hover); }
body.imagestack-page .it-usagepop-link--pro { color: var(--pro); }

/* Round 4: a stopped run is still finishing server-side. Run is inert (aria-disabled, tooltip explains). */
body.imagestack-page .it-run.is-pending,
body.imagestack-page .it-run.is-pending[aria-disabled="true"] {
  background: var(--surface-3);
  color: var(--text-2);
  box-shadow: none;
  cursor: not-allowed;
}
body.imagestack-page .it-run.is-pending .it-run-tag:empty { display: none; }

/* =========================================================================
   Round 5: compact labelled rail at 1280-1399 (188px): names always visible, 34px rows,
   group labels kept (dividers alone below 700px tall), guest pitch as text in the foot.
   ========================================================================= */
@media (min-width: 1024px) and (max-width: 1399px) {
  .it-rail-scroll { padding: var(--sp-3) var(--sp-2); }
  body.imagestack-page .it-rail .it-toollink { height: 34px; gap: 8px; padding: 0 var(--sp-2) 0 10px; }
  .it-rail .it-toollink-icon { flex-basis: 16px; width: 16px; }
  body.imagestack-page .it-rail .it-toollink-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.imagestack-page .it-rail .it-toolgroup-label { padding: 0 10px; }
  .it-toolgroup + .it-toolgroup { margin-top: var(--sp-3); }
  .it-rail-foot { padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
  body.imagestack-page .it-rail-foot-copy { padding-left: 20px; }
  body.imagestack-page .it-rail-foot-link { margin-left: 20px; }
  /* The 304px inspector: a little less side padding keeps 272px of content. */
  .it-inspector-scroll { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .it-runzone { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (min-width: 1024px) and (max-width: 1399px) and (max-height: 780px) {
  body.imagestack-page .it-rail .it-toollink { height: 32px; }
  .it-rail-foot { padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); }
  body.imagestack-page .it-rail-foot-link { margin-left: 0; }
}
@media (min-width: 1024px) and (max-width: 1399px) and (max-height: 700px) {
  body.imagestack-page .it-rail .it-toolgroup-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .it-toolgroup + .it-toolgroup { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
}
/* (retired) icon-rail bolt caption */
@media (min-width: 768px) and (max-width: 767px) {
  body.imagestack-page .it-rail .it-rail-usagebtn { flex-direction: column; justify-content: center; gap: 1px; height: 44px; }
  body.imagestack-page .it-rail .it-rail-usagebtn .it-toollink-icon { font-size: 13px; }
  body.imagestack-page .it-rail-usagecap { display: block; font-size: 10px; line-height: 12px; font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
}
.it-rail-usagecap { display: none; }
body.imagestack-page .it-toasts .it-toast { max-width: min(420px, 100%); }
@media (pointer: coarse) { body.imagestack-page .it-switch-row { min-height: 44px; align-items: center; } }
@media (min-width: 1024px) and (max-width: 1399px) {
  body.imagestack-page .it-rail .it-toollink-label { flex: 0 1 auto; min-width: 0; }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  /* 272px of inspector content: a slightly smaller H1 keeps "Replace part of an image" on one line. */
  body.imagestack-page .it-inspector .it-h1 { font-size: 1.375rem; line-height: 1.75rem; }
}

/* =========================================================================
   Integration polish
   ========================================================================= */
body.imagestack-page .it-stagehint.is-suppressed { display: none; }

/* Integration polish: inspector density at short laptop heights (<= 700px tall). Same order and controls,
   tighter rhythm: sections 12px, fields 12px apart, labels 6px, 30px chips in one scrollable row. */
@media (min-width: 960px) and (max-height: 700px) {
  body.imagestack-page .it-section { padding: var(--sp-3) 0; }
  .it-section > .it-field + .it-field,
  .it-section > .it-field + .it-note,
  .it-section > .it-colour-row + .it-field { margin-top: var(--sp-3); }
  body.imagestack-page .it-inspector .it-label { margin-bottom: 6px; }
  .it-inspector-head { padding-bottom: var(--sp-2); }
  body.imagestack-page .it-inspector .it-desc { font-size: var(--fs-label); line-height: var(--lh-label); }
  body.imagestack-page .it-inspector .it-help { margin-top: 4px; }
  .it-inspector .it-chips { gap: 6px; }
  body.imagestack-page .it-inspector .it-chip { height: 30px; padding: 0 10px; }
  /* Idea chips: one row that scrolls sideways (a soft edge shows there's more). */
  body.imagestack-page .it-inspector .it-pt-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  body.imagestack-page .it-inspector .it-pt-chips::-webkit-scrollbar { display: none; }
  body.imagestack-page .it-inspector .it-pt-chips .it-chip { flex: 0 0 auto; }
}

/* Integration polish: phone stage height follows the displayed image (stage.js sets --it-phone-stage-ideal),
   clamped so a wide result isn't letterboxed and a tall one never pushes the tool off the first screen. */
@media (max-width: 767px) {
  body.imagestack-page .it-app[data-state="image"] .it-stage.is-adaptive-h {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    height: clamp(max(200px, 26dvh), var(--it-phone-stage-ideal, 60dvh), 70dvh);
    transition: height 240ms var(--ease-out);
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.imagestack-page .it-app[data-state="image"] .it-stage.is-adaptive-h { transition: none; }
}

/* Final product: 1024-1279 compact labelled rail (now 188px, critic r2 N1). Names are never hidden. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .it-rail-scroll { padding: var(--sp-3) 4px; }
  body.imagestack-page .it-rail .it-toolgroup-label { padding: 0 8px; }
  .it-rail-foot { padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3); }
  body.imagestack-page .it-rail-foot-title { font-size: 12.5px; }
  body.imagestack-page .it-rail .it-toollink { gap: 6px; padding: 0 0 0 6px; font-size: 12px; }
}

/* Final product #6: the Image Prompts chip shares one row with the stage-bar buttons and ellipsizes;
   it never runs under Replace image (16px gutter kept by the stage bar's own gap). */
.it-stagebar-start:has(.it-importchip:not([hidden])) { flex: 1 1 auto; }
body.imagestack-page .it-importchip { min-width: 0; flex: 0 1 auto; overflow: hidden; }
body.imagestack-page .it-importchip > span { min-width: 0; white-space: nowrap; }
body.imagestack-page .it-importchip > i, body.imagestack-page .it-importchip-close { flex: 0 0 auto; }
@media (max-width: 767px) {
  .it-stagebar-start { flex: 1 1 auto; min-width: 0; }
  body.imagestack-page .it-importchip { max-width: 100%; }
  .it-stagebar-end { flex: 0 0 auto; }
}
body.imagestack-page .it-inspector-scroll > .it-alpha-note { margin: 0 0 var(--sp-4); color: var(--text-2); }
body.imagestack-page .it-inspector-scroll > .it-alpha-note i { color: var(--info); }
/* Final product #14: no keyboard hints on touch-first devices. */
@media (hover: none), (pointer: coarse) {
  body.imagestack-page .it-kbd-hint { display: none; }
}

/* Final product #20: short laptops (<= 720px tall) give the image more room: 44px version tiles, a 32px
   result row and a slimmer stage bar. The row stays reserved, so the stage never jumps at the reveal. */
@media (min-width: 960px) and (max-height: 720px) {
  .it-stagecol { gap: 6px; }
  .it-stagebar { min-height: 30px; }
  .it-app[data-state="image"] .it-resultbar { flex-basis: 32px; height: 32px; }
  body.imagestack-page .it-resultbar .it-btn { height: 30px; }
  body.imagestack-page .it-resultbar .it-chip { height: 28px; }
  .it-versions { min-height: 52px; }
  body.imagestack-page .it-versions-list { padding: 4px 6px; gap: 6px; }
  body.imagestack-page .it-version { width: 44px; height: 44px; }
  .it-versions-new { padding: 4px 6px 4px 0; }
}
@media (max-width: 767px) { .it-stagebar:has(.it-importchip:not([hidden])) { gap: var(--sp-4); } }

/* =========================================================================
   Product critic r2
   ========================================================================= */
/* N5: the phone and tablet bar as a way forward ("Add an image ↑", "Describe your image ↓"): enabled, clearly not Run.
   One style for every tool. */
body.imagestack-page .it-run.is-nav-action {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-control);
}
body.imagestack-page .it-run.is-nav-action:hover:not(:disabled) { background: var(--surface-3); filter: none; }
body.imagestack-page .it-run.is-nav-action .it-run-tag { display: none; }

/* N1: the guest "Free" tag is a small pill inline after the name at every labelled-rail width, and every row
   keeps one height. The pill sits 4px after the name (its negative margin cancels most of the flex gap); a compact
   pill and tighter insets below 1440 keep "Remove background" whole in the 188px rail. */
body.imagestack-page .it-rail .it-toollink-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.imagestack-page .it-rail .it-tag--free { flex: 0 0 auto; margin-left: -6px; }
@media (max-width: 1599px) {
  body.imagestack-page .it-rail .it-tag--free { height: 15px; margin-left: -4px; padding: 0 4px; font-size: 9px; letter-spacing: .02em; }
  .it-rail-scroll { padding-left: 6px; padding-right: 6px; }
  body.imagestack-page .it-rail .it-toollink { gap: 8px; padding: 0 4px 0 12px; }
  body.imagestack-page .it-rail .it-toolgroup-label { padding: 0 12px; } /* icons line up with the group labels */
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .it-rail-scroll { padding-left: 4px; padding-right: 4px; }
  body.imagestack-page .it-rail .it-toollink { gap: 6px; padding: 0 0 0 6px; font-size: 12px; }
  body.imagestack-page .it-rail .it-tag--free { margin-left: -2px; }
  body.imagestack-page .it-rail .it-toolgroup-label { padding: 0 6px; }
}
/* P2: below 1180px the stage bar shows only the result size, so the result name is never cut. */
@media (max-width: 1179px) { body.imagestack-page .it-dims-from { display: none; } }
/* Empty-state pixel pass: on phones the drop area hugs its content (no dead band under the samples), so the
   tool name and first control start on the first screen. */
@media (max-width: 767px) {
  body.imagestack-page .it-app[data-state="empty"] .it-stage { height: clamp(340px, calc(100svh - var(--it-nav-h) - 56px - var(--actionbar-h) - 28px), 440px); }
}
/* Final freeze: the phone bar never overflows the viewport; a long guidance label ellipsizes, its tag stays whole. */
.it-actionbar-run, .it-actionbar-result { min-width: 0; }
body.imagestack-page .it-run--bar { min-width: 0; }