/* ═══════════════════════════════════════════════════════════════════════════
   inspect.css — Inspect mode hover affordances
   Vanilla port of the "Inspect mode" block in
   apps/studio-demo/src/app/globals.css (lines 197–274), copied verbatim.
   The popover itself (InspectPopover) is styled entirely inline by inspect.js,
   exactly like the original component.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Inspect mode ───────────────────────────────────────────────────────────*/
/* CanvasView.tsx:201 sets the container's inline cursor to 'crosshair' while
   inspect mode is on — mirrored here as a class rule since the container is
   rendered by chrome.js. */
.inspect-mode { cursor: crosshair !important; }
.inspect-mode * { cursor: crosshair !important; }

/* Chrome UI (zoom bar, popover) keeps normal cursor */
.inspect-mode [data-canvas-chrome],
.inspect-mode [data-canvas-chrome] * { cursor: auto !important; }

/* Inspectable elements signal clickability */
.inspect-mode [data-inspect] { cursor: pointer !important; }

/* Positioning context required for ::before chip and ::after frame */
.inspect-mode [data-hover],
.inspect-mode [data-inspect] { position: relative; }

/* Suppress ALL pointer/hover effects inside the preview root so screen elements
   cannot trigger native hover states (button darkening, cursor changes, etc.).
   Re-enable only elements explicitly annotated for inspection.                */
.inspect-mode #studio-preview-root * {
  pointer-events: none !important;
}
.inspect-mode #studio-preview-root [data-hover],
.inspect-mode #studio-preview-root [data-inspect] {
  pointer-events: auto !important;
}

/* ── Hover highlight frame (::after) ────────────────────────────────────── */
/* ::after with inset:-8px creates equal 8px padding on all four sides.      */
/* border-radius:8px keeps corners rounded regardless of the element shape.  */
/* z-index:2 layers it above element content; pointer-events:none is passive. */

/* View-only — gray border + subtle gray fill */
.inspect-mode [data-hover]:hover::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid #A3A8B8;
  background: rgba(163, 168, 184, 0.08);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}

/* Inspectable — brand-500 border + brand-50 fill (higher specificity wins) */
.inspect-mode [data-inspect][data-hover]:hover::after,
.inspect-mode [data-inspect]:hover::after {
  border-color: #006AFF;
  background: rgba(229, 240, 255, 0.55);
}

/* ── Label chip (::before) ───────────────────────────────────────────────── */
/* Figma spec: padding 4px 8px, h=24px, rx=8px, DM Sans 400 12px/16px white  */

/* Gray chip — view-only elements */
.inspect-mode [data-hover]:hover::before {
  content: attr(data-hover);
  position: absolute;
  /* Clear the 8px ::after frame + 4px breathing gap = 12px above element top */
  bottom: calc(100% + 12px);
  left: 0;
  background: #A3A8B8;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  letter-spacing: 0;
}

/* Blue chip — inspectable elements (2-attribute selector beats 1-attribute) */
.inspect-mode [data-inspect][data-hover]:hover::before {
  background: #006AFF;
}