/* =====================================================================
   Kvill — Inspector Panel (Phase 2, v2 redesign)
   Apple/Linear premium properties panel. Drop-in replacement for
   public/css/mobile/inspector.css — all IDs/API preserved.
   Spec: research/16-inspector-redesign-v2.md (supersedes spec 11)
   ===================================================================== */

/* ─── Local tokens (inspector-only namespace) ─────────────────────────── */

:root {
  --insp-width: 360px;                    /* +40 vs spec 11 for RU labels */
  --insp-pad-section: 14px 16px 16px;
  --insp-pad-section-first: 16px 16px;    /* first section flush with header */
  --insp-gap-fields: 12px;
  --insp-gap-row: 10px;
  --insp-pad-input: 0 11px;
  --insp-h-input: 32px;
  --insp-h-control: 28px;                 /* swatch, segmented btn, close btn */
  --insp-radius-input: 7px;               /* sits between --radius-xs and --radius-sm */
  --insp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --insp-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.28);
  /* Surface tokens — panel sits on empty shell padding, needs clear lift from canvas */
  --insp-surface-light: #ffffff;
  --insp-surface-light-top: #ffffff;
  --insp-surface-dark: #1c1c20;
  --insp-surface-dark-top: #1e1e22;
  --insp-top-highlight-light: rgba(255, 255, 255, 0.6);
  --insp-top-highlight-dark: rgba(255, 255, 255, 0.06);
}

/* Local accent override — mobile.css forces --accent-blue:#36363e (graphite)
   globally. Inspector+FAB use this token 12×; graphite reads as disabled for
   active-states. Scoped override restores true blue without touching brand tokens. */
.m-inspector-panel,
.m-fab-btn.m-fab-inspector {
  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
}

[data-theme="dark"] .m-inspector-panel,
[data-theme="dark"] .m-fab-btn.m-fab-inspector {
  --accent-blue: #60a5fa;
  --accent-blue-hover: #3b82f6;
}


/* ─── Surface ─────────────────────────────────────────────────────────── */

.m-inspector-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--insp-width);
  isolation: isolate;
  background: transparent;
  border-left: 1px solid var(--border);
  /* Directional edge-light shadow — panel floats against void, not glued to wall */
  box-shadow:
    inset 0 1px 0 var(--insp-top-highlight-light),
    -12px 0 32px -8px rgba(0, 0, 0, 0.06),
    -2px 0 0 0 rgba(0, 0, 0, 0.02);
  z-index: 99;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text-1);
  transform: translateX(100%);
  opacity: 0;
  /* Close path: 260ms — dismissal slightly quicker than arrival (Material/Apple) */
  transition:
    transform 260ms var(--ease-spring),
    opacity 160ms var(--ease);
  will-change: transform, opacity;
  pointer-events: none;
}

[data-theme="dark"] .m-inspector-panel {
  box-shadow:
    inset 0 1px 0 var(--insp-top-highlight-dark),
    -16px 0 40px -8px rgba(0, 0, 0, 0.5),
    -2px 0 0 0 rgba(0, 0, 0, 0.25);
}

/* Solid surface with subtle top-lit vertical gradient (Linear-tier detail) */
.m-inspector-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--insp-surface-light-top) 0%,
    var(--insp-surface-light) 100%
  );
  z-index: -1;
}

[data-theme="dark"] .m-inspector-panel::before {
  background: linear-gradient(
    180deg,
    var(--insp-surface-dark-top) 0%,
    var(--insp-surface-dark) 100%
  );
}

/* Hairline on leading edge — DARK on light theme (shadow-like), WHITE on dark (highlight) */
.m-inspector-panel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 10%,
    rgba(0, 0, 0, 0.06) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

[data-theme="dark"] .m-inspector-panel::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 10%,
    rgba(255, 255, 255, 0.08) 90%,
    transparent 100%
  );
}

/* Open path: panel waits 80ms (shell makes room first), then rides 300ms spring */
.m-inspector-panel.is-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition:
    transform 300ms var(--ease-spring) 80ms,
    opacity 200ms var(--ease) 80ms;
}


/* ─── Header (sticky, transparent — tint is on panel::before) ─────────── */

.m-inspector-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 14px 0 16px;
  background: transparent;
  /* edge-fade separator below (Apple Finder/Mail sidebar vocabulary) */
}

.m-inspector-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 8%,
    var(--border) 92%,
    transparent 100%
  );
  pointer-events: none;
}

.m-inspector-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;               /* tighter than spec — Apple-tier 14/600 */
  color: var(--text-0);
  margin: 0;
}

.m-inspector-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--insp-h-control);
  height: var(--insp-h-control);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.m-inspector-close:hover {
  background: var(--bg-input);
  color: var(--text-0);
}

.m-inspector-close:focus-visible {
  outline: none;
  box-shadow: var(--insp-focus-ring);
}

.m-inspector-close svg {
  width: 15px;
  height: 15px;
}


/* ─── Empty state (Linear-way, replaces 3 squares) ────────────────────── */

.m-inspector-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;            /* optical-center via padding-top */
  padding: 28% 28px 32px;
  text-align: center;
}

.m-inspector-empty[hidden] {
  display: none;
}

.m-inspector-empty-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 14px;
  color: var(--text-3);
  opacity: 0.55;
}

.m-inspector-empty-title {
  margin: 0 0 6px 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-1);
}

.m-inspector-empty-hint {
  margin: 0;
  max-width: 240px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-2);
}


/* ─── Scrollable content ──────────────────────────────────────────────── */

.m-inspector-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.m-inspector-content[hidden] {
  display: none;
}


/* ─── Section ─────────────────────────────────────────────────────────── */

.m-inspector-section {
  position: relative;
  padding: var(--insp-pad-section);
}

.m-inspector-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 10%,
    var(--border) 90%,
    transparent 100%
  );
  pointer-events: none;
}

.m-inspector-section:first-child {
  padding-top: 16px;
}

.m-inspector-section:last-child {
  padding-bottom: 24px;
}

.m-inspector-section:last-child::after {
  display: none;
}

.m-inspector-section-header {
  display: block;
  margin: 0 0 12px 0;
  font-family: var(--font-display);
  font-size: 10px;                        /* slightly smaller vs spec 11 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;                 /* wider tracking — editorial feel */
  color: var(--text-2);
}


/* ─── Field (label + control) ─────────────────────────────────────────── */

.m-inspector-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--insp-gap-fields);
}

.m-inspector-field:last-child {
  margin-bottom: 0;
}

.m-inspector-field-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-2);                   /* muted label; input text is primary */
  line-height: 1.2;
}

.m-inspector-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--insp-gap-row);
}


/* ─── Generic input / select ──────────────────────────────────────────── */

.m-inspector-input,
.m-inspector-select {
  width: 100%;
  height: var(--insp-h-input);
  padding: var(--insp-pad-input);
  background: var(--sm-input-bg);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px var(--sm-input-border);   /* inner border — softer than outer */
  border-radius: var(--insp-radius-input);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-0);
  transition:
    background 140ms var(--ease),
    box-shadow 140ms var(--ease),
    color 140ms var(--ease);
  -webkit-appearance: none;
          appearance: none;
  line-height: calc(var(--insp-h-input) - 2px);         /* visual centering */
}

.m-inspector-input:hover:not([disabled]):not([readonly]),
.m-inspector-select:hover:not([disabled]) {
  background: var(--bg-input-hover);
  box-shadow: inset 0 0 0 1px var(--border-hover);
}

.m-inspector-input:focus,
.m-inspector-select:focus {
  outline: none;
  background: var(--sm-input-bg);
  box-shadow:
    inset 0 0 0 1px var(--accent-blue),
    var(--insp-focus-ring);
}

.m-inspector-input[disabled],
.m-inspector-select[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Numeric inputs — mono for column alignment */
.m-inspector-input[type="number"],
.m-inspector-input.m-insp-numeric {
  font-family: var(--insp-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.m-inspector-input[type="number"]::-webkit-inner-spin-button,
.m-inspector-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Select caret — custom inline SVG, theme-aware */
.m-inspector-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%236e7278' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='2 3.8 5 6.6 8 3.8'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px;
  padding-right: 28px;
}

[data-theme="dark"] .m-inspector-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%238a8f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='2 3.8 5 6.6 8 3.8'/%3e%3c/svg%3e");
}


/* ─── Input suffix adornment (px, %) ──────────────────────────────────── */

.m-inspector-input-wrap {
  position: relative;
  display: block;
}

.m-inspector-input-wrap .m-inspector-input {
  padding-right: 28px;
}

.m-inspector-suffix {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-family: var(--insp-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-3);
  pointer-events: none;
  user-select: none;
}


/* ─── Mixed state placeholder ─────────────────────────────────────────── */

.m-inspector-input.m-inspector-mixed,
.m-inspector-select.m-inspector-mixed {
  font-style: italic;
  color: var(--text-3);
}

.m-inspector-input.m-inspector-mixed::placeholder {
  font-style: italic;
  color: var(--text-3);
  opacity: 1;
}


/* ─── Color picker (swatch + hex + native picker) ─────────────────────── */

.m-inspector-color {
  display: grid;
  grid-template-columns: var(--insp-h-control) 1fr;
  gap: 8px;
  align-items: center;
}

.m-inspector-color-swatch {
  position: relative;
  width: var(--insp-h-control);
  height: var(--insp-h-control);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px var(--border),
    inset 0 0 0 2px rgba(255, 255, 255, 0.3);           /* subtle inner highlight */
  cursor: pointer;
  transition: box-shadow 140ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.m-inspector-color-swatch:hover {
  box-shadow:
    inset 0 0 0 1px var(--border-hover),
    inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.m-inspector-color-swatch:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--accent-blue),
    var(--insp-focus-ring);
}

/* Empty-fill fallback checkerboard (shown when JS sets swatch.style.background = 'transparent').
   CSS background-color is transparent; background-image checkerboard comes through. */
.m-inspector-color-swatch {
  background-image:
    linear-gradient(45deg, var(--border) 25%, transparent 25%),
    linear-gradient(-45deg, var(--border) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--border) 75%),
    linear-gradient(-45deg, transparent 75%, var(--border) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

/* Hex input — mono, uppercase */
.m-inspector-color-hex {
  width: 100%;
  height: var(--insp-h-input);
  padding: var(--insp-pad-input);
  background: var(--sm-input-bg);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px var(--sm-input-border);
  border-radius: var(--insp-radius-input);
  font-family: var(--insp-font-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-0);
  text-transform: uppercase;
  cursor: text;
  transition:
    background 140ms var(--ease),
    box-shadow 140ms var(--ease);
  line-height: calc(var(--insp-h-input) - 2px);
}

.m-inspector-color-hex:hover {
  background: var(--bg-input-hover);
  box-shadow: inset 0 0 0 1px var(--border-hover);
}

.m-inspector-color-hex:focus {
  outline: none;
  background: var(--sm-input-bg);
  box-shadow:
    inset 0 0 0 1px var(--accent-blue),
    var(--insp-focus-ring);
}


/* ─── Toggle (transparent fill switch) ────────────────────────────────── */

.m-inspector-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 4px 6px 4px 4px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms var(--ease);
}

.m-inspector-toggle:hover { color: var(--text-0); }

.m-inspector-toggle:focus-visible {
  outline: none;
  box-shadow: var(--insp-focus-ring);
}

.m-inspector-toggle-track {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--sm-input-bg);
  box-shadow: inset 0 0 0 1px var(--sm-input-border);
  transition: background 140ms var(--ease), box-shadow 140ms var(--ease);
}

/* Invisible hit-area pad — WCAG 2.1 AA target 24×24 without changing visual height */
.m-inspector-toggle-track::before {
  content: "";
  position: absolute;
  inset: -4px 0;
  pointer-events: none;
}

.m-inspector-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 180ms var(--ease-spring);
}

/* Current JS (mobile-inspector.js:189-200, 531, 621, 626) drives state via
   the .is-active class. aria-pressed listed for forward-compat / a11y polish. */
.m-inspector-toggle.is-active .m-inspector-toggle-track,
.m-inspector-toggle[aria-pressed="true"] .m-inspector-toggle-track {
  background: var(--accent-blue);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.m-inspector-toggle.is-active .m-inspector-toggle-thumb,
.m-inspector-toggle[aria-pressed="true"] .m-inspector-toggle-thumb {
  transform: translateX(12px);
}

.m-inspector-toggle-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: inherit;
}


/* ─── Segmented (alignment) ───────────────────────────────────────────── */

.m-inspector-segmented {
  display: inline-flex;
  width: 100%;
  padding: 3px;
  gap: 2px;
  background: var(--sm-input-bg);
  box-shadow: inset 0 0 0 1px var(--sm-input-border);
  border-radius: 9px;
}

.m-inspector-segmented-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--insp-h-control);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition:
    background 140ms var(--ease),
    color 140ms var(--ease),
    box-shadow 140ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.m-inspector-segmented-btn svg {
  width: 14px;
  height: 14px;
}

.m-inspector-segmented-btn:hover:not(.is-active):not([disabled]) {
  background: var(--bg-input);
  color: var(--text-1);
}

.m-inspector-segmented-btn:focus-visible {
  outline: none;
  box-shadow: var(--insp-focus-ring);
}

.m-inspector-segmented-btn.is-active {
  background: var(--accent-blue);
  color: #fff;
  /* Inner highlight instead of outer shadow — looks bolted-in, not floating */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.m-inspector-segmented-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ─── Range (opacity slider) ──────────────────────────────────────────── */

.m-inspector-range-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.m-inspector-range {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.m-inspector-range:focus { outline: none; }

.m-inspector-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent-blue) 0%,
    var(--accent-blue) var(--insp-range-fill, 100%),
    var(--sm-input-bg) var(--insp-range-fill, 100%),
    var(--sm-input-bg) 100%
  );
  box-shadow: inset 0 0 0 1px var(--sm-input-border);
}

.m-inspector-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--sm-input-bg);
  box-shadow: inset 0 0 0 1px var(--sm-input-border);
}

.m-inspector-range::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accent-blue);
}

.m-inspector-range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px var(--border),
    0 1px 2px rgba(0, 0, 0, 0.16);
  margin-top: -5px;
  cursor: grab;
  transition:
    transform 120ms var(--ease),
    box-shadow 140ms var(--ease);
}

.m-inspector-range:hover::-webkit-slider-thumb {
  transform: scale(1.08);
}

.m-inspector-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.12);
}

.m-inspector-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px var(--accent-blue),
    var(--insp-focus-ring),
    0 1px 2px rgba(0, 0, 0, 0.16);
}

.m-inspector-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  cursor: grab;
}

.m-inspector-range-value {
  min-width: 36px;
  font-family: var(--insp-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: 0.01em;
}


/* ─── Size readout (W × H displayed by JS as "NNN×MMM") ──────────────── */

.m-inspector-info-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--insp-radius-input);
}

.m-inspector-info-label {
  color: var(--text-2);
  font-weight: 400;
  font-family: var(--font-body);
  font-size: 12px;
}

.m-inspector-info-value {
  font-family: var(--insp-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.m-inspector-info-suffix {
  font-family: var(--insp-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.02em;
  user-select: none;
}


/* ─── FAB toggle ──────────────────────────────────────────────────────── */

.m-fab-btn.m-fab-inspector svg {
  width: 18px;
  height: 18px;
  color: var(--text-0);
}

.m-fab-btn.m-fab-inspector.is-active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(59, 130, 246, 0.22);
}

.m-fab-btn.m-fab-inspector.is-active svg {
  color: #fff;
}

[data-theme="dark"] .m-fab-btn.m-fab-inspector.is-active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(59, 130, 246, 0.28);
}

.m-fab-btn.m-fab-inspector.is-active:hover {
  background: var(--accent-blue-hover);
  border-color: var(--accent-blue-hover);
}

.m-fab-btn.m-fab-inspector.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ─── Layout — push mode (Inspector pushes slide feed left) ───────────── */

/* Stagger-exit-enter choreography:
   - OPEN:  shell contracts at t=0, panel arrives at t=80ms (see .is-visible rule)
   - CLOSE: panel leaves at t=0, shell reclaims at t=80ms (via base-rule delay)
   Specificity trick: base rule = CLOSE path (80ms delay),
   scoped body.inspector-visible = OPEN path (wins, delay 0ms). */
@media (min-width: 768px) {
  .m-app {
    transition: padding-right 280ms var(--ease-spring) 80ms;
  }

  .m-fab-group {
    transition: right 280ms var(--ease-spring) 80ms;
  }

  body.inspector-visible .m-app {
    padding-right: var(--insp-width);
    transition: padding-right 280ms var(--ease-spring) 0ms;
  }

  body.inspector-visible .m-fab-group {
    right: calc(16px + var(--insp-width));
    transition: right 280ms var(--ease-spring) 0ms;
  }

  /* Scoped sidebar timing — unify 280ms spring when inspector drives collapse.
     User-toggle flow uses base rule (mobile.css:1501, 300ms --ease) — untouched. */
  body.inspector-visible .m-sidebar-drawer {
    transition:
      width 280ms var(--ease-spring),
      min-width 280ms var(--ease-spring);
  }

  body.inspector-visible .m-sidebar-drawer .m-sidebar-content {
    transition: opacity 180ms var(--ease);
  }

  /* Chat panel: when both inspector and chat are open, offset chat left of inspector. */
  body.inspector-visible .m-chat-panel.open {
    right: var(--insp-width);
  }
}

/* <767px (iPhone): inspector disabled — Phase 2 scope excludes mobile. */
@media (max-width: 767px) {
  .m-inspector-panel,
  .m-fab-inspector-wrap {
    display: none !important;
  }
}


/* ─── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .m-inspector-panel,
  .m-inspector-input,
  .m-inspector-select,
  .m-inspector-close,
  .m-inspector-color-swatch,
  .m-inspector-segmented-btn,
  .m-inspector-toggle,
  .m-inspector-toggle-thumb,
  .m-inspector-range::-webkit-slider-thumb,
  .m-fab-btn.m-fab-inspector,
  /* push-layout elements — added in wave 2 */
  .m-app,
  .m-sidebar-drawer,
  .m-sidebar-drawer .m-sidebar-content,
  .m-fab-group {
    transition: none !important;
  }
}