/* Theme Builder — list + editor + live gallery inside the xlarge modal shell. */

.builder {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  min-width: 0;
}

/* ── Left: saved-theme list (mirrors the Datasets manager list pane) ───── */

.listPane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: var(--border-width) solid var(--border);
}

/* A shared primary Button (lg); locally just pinned with a margin. */
.newButton {
  flex: 0 0 auto;
  margin: var(--space-4);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-top: var(--border-width) solid var(--border);
}

.empty {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  padding: var(--space-5) var(--space-4);
}

.item {
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease);
}

.item + .item {
  border-top: var(--border-width) solid var(--border);
}

.item:hover {
  background: var(--layer-01);
}

.itemActive {
  background: var(--layer-01);
  border-left-color: var(--accent);
}

.itemButton {
  display: block;
  width: 100%;
  appearance: none;
  border: none;
  background: none;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Right: the editor surface ──────────────────────────────────────────── */

.detailEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: var(--space-5);
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}

.nameField {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 200px;
}

.label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.input {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-3);
  font-size: 13px;
}

.toolbarEnd {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
}

/* Actions are shared Buttons (danger-outline / primary). */

.errorMessage {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  font-size: 13px;
  color: var(--support-error);
  border-bottom: var(--border-width) solid var(--border);
}

/* ── Structured-control tabs (vertical rail | panel) ───────────────────── */

/* The rail of panel names beside the active panel; the divider above the JSON
   section spans both, so it sits on the vsplit, not the panel. */
.vsplit {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  border-bottom: var(--border-width) solid var(--border);
}

/* Vertical tab list — a tinted strip, distinct from the (untinted) themes list
   pane on the far left. */
.tabs {
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
  background: var(--layer-01);
  border-right: var(--border-width) solid var(--border);
}

.tab {
  appearance: none;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.tab:hover {
  color: var(--text);
}

.tabActive {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--bg);
  font-weight: 600;
}

/* The active panel scrolls within its grid cell; the JSON section is docked
   below the whole vsplit. */
.tabpanel {
  overflow: auto;
  min-height: 0;
  min-width: 0;
}

.controlsDisabled {
  margin: 0;
  padding: var(--space-5);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── Controls + JSON (left) | gallery rail (right) ─────────────────────── */

/* The gallery takes the whole right side, full height; the controls column —
   tabs, the active panel, and the JSON editor stacked — sits on the left,
   capped so the previews get the room. */
.body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: clamp(420px, 38%, 600px) 1fr;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

.controlsCol {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-right: var(--border-width) solid var(--border);
}

/* Collapsible raw-JSON disclosure, docked at the bottom of the controls column. */
.jsonSection {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid var(--border);
}

.jsonToggle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}

.jsonToggle:hover {
  color: var(--text);
}

.jsonCaret {
  font-size: 10px;
}

.editorPane {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-5) var(--space-4);
  min-width: 0;
}

.configText {
  width: 100%;
  height: clamp(180px, 34vh, 340px);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  resize: none;
}

/* The gallery wraps fixed-size swatch cards; scrolls when they overflow. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  overflow: auto;
  min-height: 0;
  min-width: 0;
}

.card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
}

/* Reserve the card's box so the grid doesn't reflow while charts render. */
.cardHost {
  min-width: 260px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardCaption {
  font-size: 11px;
  color: var(--text-secondary);
}

/* A render failure shows its message in place of the chart (fail-loud, arch 02),
   sized to the reserved card box so the gallery doesn't reflow. */
.cardError {
  min-width: 260px;
  min-height: 180px;
  margin: 0;
  padding: var(--space-3);
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--support-error);
  white-space: pre-wrap;
  overflow: auto;
}
