/* backend/src/main/resources/static/modules_styles/pikiner_sites/components/dev-panel.css */

/* ==============================================
   DEV TUNING PANELS — chrome shared by all three

   The DOM these classes dress exists only when the dev bundle finds a dev
   server behind the panel's own endpoint; production pages load this file
   and never build a panel. Contract variables only, so a panel sits
   correctly on either print.

   One stylesheet rather than one per panel. The first two panels carried
   near-identical copies of this chrome, and a third would have made the
   duplication a pattern; what differs between panels is which controls
   they hold and where they sit, not how a panel looks.

   They stack up the bottom-left corner — DevSync owns bottom-right — and
   each declares its own offset, so a panel added later moves nothing that
   already works.
   ============================================== */

.dev-panel {
  position: fixed;
  left: var(--gb-spacing-md);
  bottom: calc(var(--gb-spacing-md) + var(--dev-panel-offset, 0rem));
  z-index: var(--gb-z-overlay);
  font-size: var(--gb-type-caption-size);
  line-height: var(--gb-type-caption-leading);
}

.dev-panel--grid {
  --dev-panel-offset: 0rem;
}

.dev-panel--type {
  --dev-panel-offset: 2.5rem;
}

.dev-panel--rhythm {
  --dev-panel-offset: 5rem;
}

.dev-panel__toggle {
  font: inherit;
  color: var(--gb-text-primary);
  background: var(--gb-bg-elevated);
  border: 1px solid var(--gb-border-strong);
  padding: var(--gb-spacing-xs) var(--gb-spacing-sm);
  cursor: pointer;
}

.dev-panel__body {
  width: 17rem;
  margin-top: var(--gb-spacing-sm);
  background: var(--gb-bg-elevated);
  border: 1px solid var(--gb-border-strong);
  padding: var(--gb-spacing-md);
  box-shadow: var(--gb-shadow-lg);
}

.dev-panel__title,
.dev-panel__subtitle {
  font-size: var(--gb-type-caption-size);
  line-height: var(--gb-type-caption-leading);
  letter-spacing: var(--gb-type-overline-tracking);
  text-transform: uppercase;
  color: var(--gb-text-secondary);
  margin: 0 0 var(--gb-spacing-sm);
}

.dev-panel__subtitle {
  margin-top: var(--gb-spacing-md);
}

.dev-panel__field {
  display: flex;
  align-items: center;
  gap: var(--gb-spacing-sm);
  margin-bottom: var(--gb-spacing-xs);
}

.dev-panel__name {
  flex: 0 0 5.75rem;
  color: var(--gb-text-secondary);
}

.dev-panel__name--short {
  flex-basis: 3rem;
}

.dev-panel__field input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--gb-accent-primary);
}

.dev-panel__field input[type="color"] {
  inline-size: 3rem;
  block-size: 1.5rem;
  padding: 0;
  border: 1px solid var(--gb-border-default);
  background: none;
}

.dev-panel__field select {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--gb-text-primary);
  background: var(--gb-bg-surface);
  border: 1px solid var(--gb-border-default);
  padding: 2px var(--gb-spacing-xs);
}

.dev-panel__out {
  flex: 0 0 4.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--gb-text-primary);
}

/* A specimen is set in the thing being chosen — the menus say a name,
   this says what the name looks like. The page behind the panel stays
   the real specimen. */
.dev-panel__specimen {
  font-size: var(--gb-type-body-size);
  line-height: var(--gb-type-body-leading);
  color: var(--gb-text-heading);
  margin: var(--gb-spacing-md) 0 var(--gb-spacing-xs);
}

.dev-panel__specimen-mono {
  font-size: var(--gb-type-secondary-size);
  line-height: var(--gb-type-secondary-leading);
  color: var(--gb-text-secondary);
  margin: 0 0 var(--gb-spacing-md);
}

.dev-panel__hint {
  margin: var(--gb-spacing-sm) 0;
  color: var(--gb-text-tertiary);
}

.dev-panel__hint[data-live="true"] {
  color: var(--gb-text-secondary);
}

.dev-panel__actions {
  display: flex;
  gap: var(--gb-spacing-sm);
}

.dev-panel__save,
.dev-panel__revert,
.dev-panel__defaults {
  font: inherit;
  cursor: pointer;
}

.dev-panel__save {
  color: var(--gb-text-on-accent);
  background: var(--gb-accent-surface);
  border: 1px solid var(--gb-accent-surface);
  padding: var(--gb-spacing-xs) var(--gb-spacing-md);
}

.dev-panel__save:hover {
  background: var(--gb-accent-surface-hover);
}

.dev-panel__revert,
.dev-panel__defaults {
  color: var(--gb-text-primary);
  background: none;
  border: 1px solid var(--gb-border-strong);
  padding: var(--gb-spacing-xs) var(--gb-spacing-md);
}

.dev-panel__status {
  margin: var(--gb-spacing-sm) 0 0;
  min-height: 1.2em;
  color: var(--gb-text-secondary);
}