/*
 * Right-hand inspector column: collapsible panels, labelled rows, the layer
 * tree, colour swatches and the colour/gradient pickers.
 */

.panels {
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
}

.panel {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel.grow { flex: 1; min-height: 160px; }
.panel.collapsed > .panel-body { display: none; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 var(--sp-3);
  height: 32px;
  background: var(--bg-panel-alt);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: default;
  flex: none;
}
.panel-header:hover { color: var(--fg); }
.panel-header .chev { width: 12px; display: inline-flex; color: var(--fg-dim); }
.panel-header .spacer { flex: 1; }
.panel-header .count {
  font-weight: 500;
  color: var(--fg-dim);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.panel-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); overflow: auto; min-height: 0; }
.panel.grow .panel-body { flex: 1; padding: 0; }

/* ---- labelled rows --------------------------------------------------- */
.row { display: flex; align-items: center; gap: var(--sp-2); margin: 6px 0; min-width: 0; }
.row > label, .row > .lbl { color: var(--fg-muted); font-size: var(--fs-sm); min-width: 56px; flex: none; }
.row .grow { flex: 1; min-width: 0; }
.row .section-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: var(--sp-3) 0 var(--sp-1);
}

.field { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
.field > span { color: var(--fg-dim); font-size: var(--fs-xs); width: auto; min-width: 14px; text-align: right; flex: none; }
.field input { width: 100%; min-width: 56px; }
.field input.num-input { width: 100%; min-width: 68px; }
input.num-input { text-align: right; font-family: var(--font-mono); font-size: var(--fs-sm); flex: 0 1 auto; width: 56px; min-width: 44px; padding: 3px 6px; }

.btn-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.btn-row button { padding: 3px 8px; height: 24px; display: inline-flex; align-items: center; gap: 5px; }

/* A connected segmented control: one logical choice, visually one widget. */
.btn-row.seg { gap: 0; flex-wrap: nowrap; }
.btn-row.seg button {
  width: 24px; padding: 0; justify-content: center;
  border-radius: 0; margin-left: -1px;
}
.btn-row.seg button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-row.seg button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-row.seg button.active { position: relative; z-index: 1; }

/* ---- layer tree ------------------------------------------------------ */
.tree { font-size: var(--fs-sm); position: relative; padding: var(--sp-1) 0; }
.tree-row {
  display: flex;
  align-items: center;
  height: 26px;
  gap: 5px;
  padding-right: var(--sp-2);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  margin: 0 var(--sp-1);
  color: var(--fg);
}
.tree-row:hover { background: var(--bg-hover); }
.tree-row.selected { background: var(--accent-soft); color: var(--accent); }
.tree-row.selected .icon, .tree-row.selected .tog { color: var(--accent); }
.tree-row.active-layer { box-shadow: inset 2px 0 0 var(--accent); }
.tree-row.hidden-node { opacity: 0.45; }
.tree-row .chev { width: 14px; display: inline-flex; justify-content: center; color: var(--fg-dim); cursor: pointer; flex: none; }
.tree-row .chev:hover { color: var(--fg); }
/* Chevrons always render pointing down; collapsed state rotates them. */
.tree-row .chev svg { transition: transform 120ms ease; }
.tree-row.collapsed .chev svg, .panel.collapsed .panel-header .chev svg { transform: rotate(-90deg); }
.tree-row .icon { width: 16px; display: inline-flex; justify-content: center; color: var(--fg-muted); flex: none; }
.tree-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tree-row .name input { width: 100%; padding: 0 4px; height: 20px; }
.tree-row .tog {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-dim); cursor: pointer; border-radius: var(--radius-sm); flex: none;
}
.tree-row .tog:hover { background: var(--bg-active); color: var(--fg); }
.tree-row .tog.on { color: var(--fg-muted); }
.tree-row .tog svg { width: 14px; height: 14px; }
.tree-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tree-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.tree-row.drop-into { outline: 1.5px dashed var(--accent); outline-offset: -1px; }

.layers-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex: none;
}
.layers-toolbar button { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); }
.layers-toolbar button:hover { color: var(--fg); background: var(--bg-hover); }
.layers-toolbar .spacer { flex: 1; }

/* ---- colour ---------------------------------------------------------- */
.swatch {
  width: 24px; height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  background:
    linear-gradient(45deg, #c9ccd2 25%, transparent 25%, transparent 75%, #c9ccd2 75%),
    linear-gradient(45deg, #c9ccd2 25%, #ffffff 25%, #ffffff 75%, #c9ccd2 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex: none;
}
.swatch > span { position: absolute; inset: 0; }
.swatch.none::before { content: ''; position: absolute; inset: 0; background: #fff; }
.swatch.mixed > span { background: repeating-linear-gradient(45deg, var(--fg-muted) 0 4px, var(--bg-panel) 4px 8px) !important; }
.swatch.none::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px;
  background: var(--danger); transform: rotate(-45deg);
}

.color-popover {
  position: absolute;
  z-index: 120;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--sp-3);
  width: 244px;
  animation: pop-in var(--speed) ease;
}
.color-popover canvas { display: block; border-radius: var(--radius-sm); }
.color-popover .hue, .color-popover .alpha { height: 12px; margin-top: var(--sp-2); border-radius: var(--radius-pill); }
.color-popover .row { margin: var(--sp-2) 0 0; }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: var(--sp-2); }
.palette div { aspect-ratio: 1; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.14); cursor: pointer; }
.palette div:hover { transform: scale(1.12); }

.grad-stops {
  position: relative; height: 26px; margin: var(--sp-2) 0;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
}
.grad-stop {
  position: absolute; top: 100%; transform: translate(-50%, -6px);
  width: 12px; height: 12px; border: 2px solid #fff; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); cursor: pointer;
}
.grad-stop.selected { border-color: var(--accent); }

/* ---- align / transform grids ---------------------------------------- */
.align-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.align-grid button { padding: 0; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.align-grid button svg { width: 16px; height: 16px; }

.ref-grid { display: grid; grid-template-columns: repeat(3, 14px); gap: 3px; }
.ref-grid div {
  width: 14px; height: 14px;
  border: 1px solid var(--border-strong); border-radius: 3px; cursor: pointer;
  position: relative;
}
.ref-grid div:hover { border-color: var(--fg-dim); }
.ref-grid div.on { background: var(--accent); border-color: var(--accent); }
.ref-grid div.on::after {
  content: ''; position: absolute; inset: 3px; background: var(--fg-on-accent); border-radius: 1px;
}

/* ---- history --------------------------------------------------------- */
.history-list { font-size: var(--fs-sm); max-height: 220px; overflow: auto; padding: var(--sp-1); }
.history-entry {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-entry:hover { background: var(--bg-hover); color: var(--fg); }
.history-entry.current { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.history-entry.future { opacity: 0.5; }