/* b.nito sneak sliders — on-canvas transform box.
   Paired with /assets/sneak-transformbox.js. All classes gn-tb* prefixed so they cannot
   collide with either slider's own styles. Lime to match the existing edit-mode outlines. */

/* The box itself never takes hits. Only the handles do, so a drag started inside the
   box still reaches the artwork underneath and moves it, exactly as before. */
.gn-tb {
  position: fixed; z-index: 240; pointer-events: none;
  display: none; box-sizing: border-box;
  border: 1.5px solid var(--gn-lime, #d4ff3a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35);
  will-change: transform, width, height;
}
.gn-tb.gn-tb-on { display: block; }

/* The slider already draws its own thick lime outline on .is-selected. With the box on
   top that reads as two mismatched rectangles, and the lime-on-lime hid the handles
   completely. The box replaces that outline, so suppress it wherever the box is
   installed. gn-tb-installed is set by the JS, so Dillon's keeps its outline until the
   box is ported there.

   The selectors below are verbose on purpose. The slider sets this outline with
   !important at dist/sneak/mike/index.html:553 on a 3-class selector, so a short rule
   loses on specificity no matter how late it loads. Adding .gn-tb-installed to the body
   part outranks it. .fan-flavour is deliberately NOT included: flavour swatches are not
   transformable, so they keep the outline as their only selection feedback. */
body.gn-tb-installed.edit-mode .fruits-deep-mikes img.is-selected,
body.gn-tb-installed.edit-mode .fruits-layer-mikes img.is-selected,
body.gn-tb-installed.edit-mode .fruits-mid-mikes img.is-selected,
body.gn-tb-installed.edit-mode .fruits-foreground-mikes img.is-selected,
body.gn-tb-installed.edit-mode .fruits-foreground-mikes .mikes-companion.is-selected,
body.gn-tb-installed.edit-mode .mikes-companion.is-selected,
body.gn-tb-installed.edit-mode .mikes-splash.is-selected {
  outline: none !important;
}

/* Handles sit ON the border, centred, so the grab point matches what the eye sees.
   White fill with a dark edge, not lime: these have to read against whatever artwork is
   underneath, and on Mike's yellow ground lime handles on a lime box vanished. */
.gn-tb-h {
  position: absolute; width: 13px; height: 13px; margin: -7px 0 0 -7px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, .8); border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  pointer-events: auto;
}
.gn-tb-h:hover { background: var(--gn-lime, #d4ff3a); transform: scale(1.15); }
.gn-tb-h[data-h="nw"] { left: 0;    top: 0;    cursor: nwse-resize; }
.gn-tb-h[data-h="n"]  { left: 50%;  top: 0;    cursor: ns-resize; }
.gn-tb-h[data-h="ne"] { left: 100%; top: 0;    cursor: nesw-resize; }
.gn-tb-h[data-h="e"]  { left: 100%; top: 50%;  cursor: ew-resize; }
.gn-tb-h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.gn-tb-h[data-h="s"]  { left: 50%;  top: 100%; cursor: ns-resize; }
.gn-tb-h[data-h="sw"] { left: 0;    top: 100%; cursor: nesw-resize; }
.gn-tb-h[data-h="w"]  { left: 0;    top: 50%;  cursor: ew-resize; }

/* Rotate handle: diamond on a stalk above the top edge, Photoshop style. */
.gn-tb-rot {
  position: absolute; left: 50%; top: -32px; width: 15px; height: 15px;
  margin: -7px 0 0 -7px;
  background: #fff; border: 1.5px solid rgba(0, 0, 0, .8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transform: rotate(45deg); border-radius: 2px;
  pointer-events: auto; cursor: grab;
}
.gn-tb-rot:hover { background: var(--gn-lime, #d4ff3a); }
.gn-tb-rot:active { cursor: grabbing; }
.gn-tb-stalk {
  position: absolute; left: 50%; top: -24px; width: 1.5px; height: 24px;
  margin-left: -0.75px; background: var(--gn-lime, #d4ff3a); pointer-events: none;
}

/* Live readout while scaling or rotating, so the number is visible without looking
   away to the panel. */
.gn-tb-readout {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 12px);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(6, 16, 12, .92); color: var(--gn-lime, #d4ff3a);
  font: 600 11px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .04em;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.gn-tb.gn-tb-active .gn-tb-readout { opacity: 1; }

@media (pointer: coarse) { .gn-tb { display: none !important; } }

/* Pivot toggle injected into the panel's action row. Inherits the panel's button
   styling; this only marks the lit state. */
.gn-tb-pivot.gn-tb-pivot-on {
  background: var(--gn-lime, #d4ff3a) !important;
  color: #06100c !important;
  border-color: var(--gn-lime, #d4ff3a) !important;
}

/* Dillon's equivalent of the outline suppression above. Its rule is
   `body.edit-mode .frag.frag-selected` with !important and it adds a box-shadow glow as
   well as the outline, so both have to be cancelled or the box sits inside a lime halo. */
body.gn-tb-installed.edit-mode .frag.frag-selected {
  outline: none !important;
  box-shadow: none !important;
}