/* CLAUDE 11-03: the desktop editor's layout (edlayout.js): resize handles on the borders between the areas, a grip at
   the top of each panel to move it, the ghost that shows where a moved panel lands, and the header's Layout button.
   Graphite: nothing shows until it is pointed at; a handle is a thin neutral line, never a box; no green (nothing
   here is a state). Desktop only: the editor's grid starts at 1100 px, and the phone (body.pe-on) keeps its sheets. */
.ed-split,
.ed-grip,
header #layoutBtn {
  display: none;
}

@media (min-width: 1100px) {
  /* ----- the layouts ----- */
  main.ed-swap {
    grid-template-columns:
      var(--ed-insp-w, clamp(280px, 22vw, 360px)) minmax(0, 1fr)
      var(--ed-lib-w, clamp(360px, 30vw, 520px));
    grid-template-areas: 'insp player lib' 'insp transport lib' 'insp seq lib' 'bar bar bar' 'tl tl tl';
  }
  main.ed-tl-center {
    grid-template-areas: 'lib player insp' 'lib transport insp' 'lib seq insp' 'lib bar insp' 'lib tl insp';
  }
  main.ed-swap.ed-tl-center {
    grid-template-areas: 'insp player lib' 'insp transport lib' 'insp seq lib' 'insp bar lib' 'insp tl lib';
  }
  body:not(.at-home):not(.pe-on) header #layoutBtn {
    display: inline-grid;
  }

  /* ----- resize handles: a 10 px hit strip over the 8 px gap, a 2 px line inside it on hover ----- */
  body:not(.pe-on) main > .ed-split {
    display: block;
    position: relative;
    z-index: 5;
    touch-action: none;
    outline: none;
  }
  main > .ed-split-left,
  main > .ed-split-right {
    grid-column: player;
    grid-row: lib; /* the side panels' rows: down to the timeline, or to the bottom when it sits under the preview */
    width: 10px;
    cursor: col-resize;
  }
  main > .ed-split-left {
    justify-self: start;
    margin-left: -9px;
  }
  main > .ed-split-right {
    justify-self: end;
    margin-right: -9px;
  }
  main > .ed-split-tl {
    grid-area: tl;
    align-self: start;
    height: 10px;
    margin-top: -9px;
    cursor: row-resize;
  }
  .ed-split::after {
    content: '';
    position: absolute;
    inset: 12px 4px;
    border-radius: var(--r-pill);
    background: var(--c-fg-3);
    opacity: 0;
    transition: opacity var(--d-exit) var(--ease-soft);
  }
  .ed-split-tl::after {
    inset: 4px 12px;
  }
  .ed-split:hover::after {
    opacity: 0.6;
    transition-delay: 120ms; /* passing over a border does not flash it */
  }
  /* focus is the bright line itself, never a box around the strip */
  body main > .ed-split:focus-visible {
    outline: none;
  }
  .ed-split:focus-visible::after,
  .ed-split.on::after {
    opacity: 1;
    background: var(--c-fg-2);
    transition-delay: 0s;
  }
  body.ed-resizing-x,
  body.ed-resizing-x * {
    cursor: col-resize !important;
    user-select: none;
  }
  body.ed-resizing-y,
  body.ed-resizing-y * {
    cursor: row-resize !important;
    user-select: none;
  }

  /* ----- grips: a short bar at the top centre of a panel, shown while the panel is pointed at ----- */
  body:not(.pe-on) main > .ed-grip {
    display: block;
    position: relative;
    z-index: 6;
    align-self: start;
    justify-self: center;
    width: 48px;
    height: 10px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    cursor: grab;
    touch-action: none;
    opacity: 0;
    transition: opacity var(--d-exit) var(--ease-soft);
  }
  main > .ed-grip::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    top: 4px;
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--c-fg-3);
  }
  main > .ed-grip-lib {
    grid-area: lib;
  }
  main > .ed-grip-insp {
    grid-area: insp;
  }
  main > .ed-grip-tl {
    grid-area: tl;
  }
  main > .library:hover ~ .ed-grip-lib,
  main > .inspector:hover ~ .ed-grip-insp,
  main > .ed-grip:hover,
  main > .ed-grip:focus-visible {
    opacity: 1;
  }
  /* (its own rule: a browser without :has() drops only this one) */
  main:has(#editTimeline:hover) > .ed-grip-tl {
    opacity: 1;
  }
  main > .ed-grip:hover::before,
  main > .ed-grip:focus-visible::before {
    background: var(--c-fg-2);
  }
  main > .ed-grip:focus-visible {
    outline: 2px solid var(--c-fg-2);
    outline-offset: 2px;
  }
  body.ed-moving,
  body.ed-moving * {
    cursor: grabbing !important;
    user-select: none;
  }
  body.photo-mode main > .ed-split-tl,
  body.photo-mode main > .ed-grip-tl {
    display: none;
  }

  /* ----- moving: the lifted panel dims; the ghost is where it will land ----- */
  main .ed-lifted {
    opacity: 0.45;
    transition: opacity var(--d-exit) var(--ease-soft);
  }
  main > .ed-ghost {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    transition:
      left var(--d-exit) var(--ease-soft),
      top var(--d-exit) var(--ease-soft),
      width var(--d-exit) var(--ease-soft),
      height var(--d-exit) var(--ease-soft),
      opacity var(--d-exit) var(--ease-soft);
  }
  main > .ed-ghost.same {
    opacity: 0.35; /* dropping here changes nothing */
  }
}

/* the Layout menu: the media bin's ⋯ menu (mediabin.css .mb-menu), placed under the header button */
.ed-menu {
  min-width: 220px;
}
.ed-menu button:disabled {
  color: var(--c-fg-3);
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  main > .ed-ghost,
  .ed-split::after,
  main > .ed-grip {
    transition: none;
  }
}