/*
 * @mikestools/panel - panel chrome.
 * Theme by setting the --mt-panel-* custom properties on the panel element or
 * any ancestor; the values below are var() FALLBACKS, not declarations, so
 * consumer overrides win no matter which stylesheet loads last.
 * Default fallbacks are light-dark() pairs; they follow the page's
 * color-scheme, so declare `color-scheme: light dark` (or a fixed scheme)
 * on the page for the intended side to apply.
 */

.mt-panel {
  position: fixed;
  box-sizing: border-box;
  background: var(--mt-panel-bg, light-dark(#ffffff, #1c2230));
  color: var(--mt-panel-fg, light-dark(#1f2430, #e3e7f1));
  border: var(--mt-panel-border-width, 1px) solid var(--mt-panel-border, light-dark(#c4c9d4, #3a4356));
  border-radius: var(--mt-panel-radius, 8px);
  box-shadow: var(--mt-panel-shadow, 0 8px 28px rgba(0, 0, 0, 0.25));
  overflow: hidden;
}

/* The hidden attribute must always win, including over consumer display rules
   (e.g. a panel styled with display:flex). Without this, close() has no effect. */
.mt-panel[hidden] {
  display: none !important;
}

.mt-panel:focus {
  outline: none;
}

.mt-panel-handle {
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: var(--mt-panel-handle-bg, light-dark(#eef0f4, #252c3b));
}

.mt-panel-handle:focus-visible {
  outline: 2px solid #4c7dff;
  outline-offset: -2px;
}

/* Resize grips - invisible hit areas along edges/corners. */
.mt-resize {
  --mt-rs: var(--mt-resize-size, 8px);
  position: absolute;
  touch-action: none;
  user-select: none;
}

.mt-resize-n  { top: 0; left: var(--mt-rs); right: var(--mt-rs); height: var(--mt-rs); cursor: n-resize; }
.mt-resize-s  { bottom: 0; left: var(--mt-rs); right: var(--mt-rs); height: var(--mt-rs); cursor: s-resize; }
.mt-resize-e  { right: 0; top: var(--mt-rs); bottom: var(--mt-rs); width: var(--mt-rs); cursor: e-resize; }
.mt-resize-w  { left: 0; top: var(--mt-rs); bottom: var(--mt-rs); width: var(--mt-rs); cursor: w-resize; }
.mt-resize-ne { top: 0; right: 0; width: var(--mt-rs); height: var(--mt-rs); cursor: ne-resize; }
.mt-resize-nw { top: 0; left: 0; width: var(--mt-rs); height: var(--mt-rs); cursor: nw-resize; }
.mt-resize-se { bottom: 0; right: 0; width: var(--mt-rs); height: var(--mt-rs); cursor: se-resize; }
.mt-resize-sw { bottom: 0; left: 0; width: var(--mt-rs); height: var(--mt-rs); cursor: sw-resize; }

/* Edge-docked (snapped) panel - full-height sidebar. */
.mt-panel-snapped {
  border-radius: 0;
}

.mt-panel-snapped .mt-resize {
  display: none; /* docked panels resize via the splitter only */
}

/* Splitter - width-resize hit area on the docked panel's inner edge. */
.mt-snap-splitter {
  display: none;
  position: absolute;
  top: 0;
  width: var(--mt-snap-splitter-size, 6px);
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  z-index: 1;
}

.mt-panel-snapped-left .mt-snap-splitter { display: block; right: 0; }
.mt-panel-snapped-right .mt-snap-splitter { display: block; left: 0; }

.mt-snap-splitter:hover {
  background: var(--mt-snap-splitter-hover-bg, rgba(76, 125, 255, 0.35));
}

/* Dashed drop-zone preview shown while dragging near an enabled edge. */
.mt-snap-preview {
  position: fixed;
  top: 0;
  height: 100vh;
  pointer-events: none;
  background: var(--mt-snap-preview-bg, rgba(76, 125, 255, 0.15));
  border: 2px dashed var(--mt-snap-preview-border, #4c7dff);
  box-sizing: border-box;
}

/* Modal backdrop - covers the viewport and blocks pointer interaction with
   the page behind. Sits one z-stack step below its panel. */
.mt-panel-backdrop {
  position: fixed;
  inset: 0;
}

.mt-panel-backdrop-dim {
  background: var(--mt-panel-backdrop-bg, rgba(0, 0, 0, 0.5));
}

/* backdrop-filter fallback (no blurTarget): correct everywhere, but re-renders
   the blur every frame during drag - pass blurTarget for the fast path. */
.mt-panel-backdrop-blur {
  background: var(--mt-panel-backdrop-bg, rgba(0, 0, 0, 0.15));
  -webkit-backdrop-filter: blur(var(--mt-panel-backdrop-blur, 4px));
  backdrop-filter: blur(var(--mt-panel-backdrop-blur, 4px));
}

/* Fast blur path: the page container gets the (cached, static) filter.
   Deliberately NO will-change here: promoting the layer forces the blur to
   re-run at composite time every frame; paint-time filtering caches. */
.mt-panel-blur-target {
  filter: blur(var(--mt-panel-backdrop-blur, 4px));
}

/* ...and the backdrop only dims lightly and blocks pointer input. */
.mt-panel-backdrop-blur-target {
  background: var(--mt-panel-backdrop-bg, rgba(0, 0, 0, 0.15));
}

@media (prefers-reduced-motion: no-preference) {
  .mt-panel {
    transition: box-shadow 120ms ease;
  }
}