/* ── Color-order panel (Photoshop-style, right-docked, mesh only) ───────────── */
.gs-layer-panel {
  font-family: var(--font-secondary); /* also correct while it is a phone sheet on <body> */
  position: absolute;
  right: var(--gs-edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  width: 12rem;
  max-height: 60svh;
  overflow-y: auto;
  padding: 0.6rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 22, 0.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, 0.6);
}
.gs-layer-panel[hidden] { display: none; }
body.gs-focus .gs-layer-panel { opacity: 0; pointer-events: none; transition: opacity 320ms ease; }

.gs-layer-panel__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.1rem 0.3rem 0.5rem;
  cursor: move;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Grip affordance (Fluent re-order-dots) so the header reads as draggable */
.gs-layer-panel__grip {
  flex-shrink: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.32);
}
.gs-layer-panel.is-dragging { cursor: grabbing; }
.gs-layer-panel__head-text { flex: 1; min-width: 0; }
/* Collapse / expand toggle (overrides the global button chrome) */
.gs-layer-panel .gs-layer-panel__toggle {
  margin-left: auto;
  width: 1.3rem;
  height: 1.3rem;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.gs-layer-panel .gs-layer-panel__toggle:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ── In-panel HSV colour picker ──────────────────────────────────────────── */
.gs-hsv {
  position: fixed;
  z-index: 10020; /* on <body>: above the header, the floating dock and the phone sheet */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  width: 13rem;
  padding: 0.6rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 22, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 1rem 3rem -0.5rem rgba(0, 0, 0, 0.6);
}
.gs-hsv[hidden] { display: none; }
.gs-hsv__sv {
  position: relative;
  height: 9rem;
  border-radius: 0.4rem;
  cursor: crosshair;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.gs-hsv__sv-thumb {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gs-hsv__hue {
  position: relative;
  width: 0.9rem;
  height: 9rem;
  border-radius: 0.4rem;
  cursor: ns-resize;
  touch-action: none;
  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.gs-hsv__hue-thumb {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 0.35rem;
  border: 2px solid #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translateY(-50%);
  pointer-events: none;
}
.gs-hsv .gs-hsv__hex {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.3rem 0.45rem;
  font-family: var(--mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 0.75rem;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.4rem;
}
.gs-hsv .gs-hsv__hex:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); }

.gs-layer-panel__list { display: flex; flex-direction: column; gap: 0.25rem; }

/* ── Collapsed: a thin rail of just the colour swatches (still reorder/recolor) ── */
.gs-layer-panel.is-collapsed {
  width: auto;
  padding: 0.45rem;
}
.gs-layer-panel.is-collapsed .gs-layer-panel__head { padding: 0 0 0.4rem; }
.gs-layer-panel.is-collapsed .gs-layer-panel__head-text,
.gs-layer-panel.is-collapsed .gs-layer-row__hex,
.gs-layer-panel.is-collapsed .gs-layer-row__del,
.gs-layer-panel.is-collapsed .gs-layer-panel__add,
.gs-layer-panel.is-collapsed .gs-layer-panel__hint,
.gs-layer-panel.is-collapsed .gs-layer-panel__subhead { display: none; }
.gs-layer-panel.is-collapsed .gs-layer-row { padding: 0.25rem; justify-content: center; gap: 0; }
.gs-layer-panel.is-collapsed .gs-layer-row__swatch { width: 1.7rem; height: 1.7rem; }

.gs-layer-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: grab;
  touch-action: none;
  /* transform transitions drive the smooth reorder slide; the dragged row turns
     it off so it tracks the pointer 1:1 (see .is-dragging). */
  transition: transform 160ms ease, background 140ms ease, border-color 140ms ease;
}
.gs-layer-row:hover { background: rgba(255, 255, 255, 0.06); }
.gs-layer-row.is-active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.gs-layer-row.is-dragging {
  transition: none;
  position: relative;
  z-index: 3;
  opacity: 0.97;
  cursor: grabbing;
  box-shadow: 0 0.6rem 1.4rem -0.3rem rgba(0, 0, 0, 0.55);
}

/* Swatch = the colour-picker grip. A tap opens the (hidden) native picker; a drag
   reorders. The real <input type=color> is kept in the DOM for its value/events
   but visually hidden and opened programmatically. */
.gs-layer-row__swatch {
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  /* Eyedropper cursor (Fluent-style, filled for contrast on any colour) → reads
     as "click to pick a colour"; falls back to pointer. */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%203.4a2.3%202.3%200%200%201%203.3%203.3l-2.1%202.1.7.7-1.4%201.4-.7-.7-6.9%206.9-3.3.9.9-3.3%206.9-6.9-.7-.7%201.4-1.4.7.7%202.1-2.1z'%20fill='rgb(255,255,255)'%20stroke='rgb(0,0,0)'%20stroke-width='1'%20stroke-linejoin='round'%20stroke-opacity='0.55'/%3E%3C/svg%3E") 5 19, pointer;
  overflow: hidden;
}
/* While actually dragging a row, force the grabbing cursor everywhere */
body.gs-reordering, body.gs-reordering * { cursor: grabbing !important; }
.gs-layer-row__color {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Inline-editable hex: clean text by default, input affordance on hover/focus.
   Scoped to .gs-layer-panel so it out-specifies the global input[type=text] chrome
   (dark fill, border, 44px min-height) — the panel lives on <body>, outside
   .gradient-studio, so it inherits the site-wide form styles otherwise. */
.gs-layer-panel .gs-layer-row__hex {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 0;
  font-family: var(--mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 0.72rem;
  color: rgba(232, 240, 255, 0.9);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  padding: 0.15rem 0.35rem;
  cursor: text;
  transition: background 140ms ease, border-color 140ms ease;
}
.gs-layer-panel .gs-layer-row__hex:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}
.gs-layer-panel .gs-layer-row__hex:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.35);
}

.gs-layer-panel .gs-layer-panel__add {
  min-height: 0;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.4rem;
  border-radius: 0.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
.gs-layer-panel .gs-layer-panel__add:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }
.gs-layer-panel .gs-layer-panel__add:disabled { opacity: 0.35; cursor: default; }
.gs-layer-panel .gs-layer-row__del {
  min-width: 0;
  min-height: 0;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.gs-layer-panel .gs-layer-row__del:hover:not(:disabled) { background: rgba(255, 120, 120, 0.2); color: #fff; }
.gs-layer-panel .gs-layer-row__del:disabled { opacity: 0.3; cursor: default; }

.gs-layer-panel__hint {
  margin: 0.5rem 0 0;
  padding: 0 0.3rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.4);
}
.gs-layer-panel__subhead {
  margin: 0.7rem 0 0.35rem;
  padding: 0 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.gs-layer-row--edge { cursor: pointer; }
.gs-layer-row--edgebg { cursor: default; }
/* Unset background = transparent: show a checker so the swatch reads as "none". */
.gs-layer-row--edgebg.is-transparent .gs-layer-row__swatch {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.28) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.28) 75%) 0 0 / 0.6rem 0.6rem,
    linear-gradient(45deg, rgba(255, 255, 255, 0.28) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.28) 75%) 0.3rem 0.3rem / 0.6rem 0.6rem,
    rgba(0, 0, 0, 0.25);
}
body.gs-reordering { cursor: grabbing; }