/* OpenCD — Demo page chrome (not framework component CSS)
   Shared by jewel-case.html, back-tray.html, leaflet.html
   All --cd-* tokens defined in opencd.css */


/* ── Shared demo layout ── */

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  background: oklch(92% .012 85);
  font-family: var(--cd-font-label);
}

.demo-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: .875rem;
}

.demo-controls label {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}

.demo-controls input[type="checkbox"] {
  accent-color: var(--cd-advisory-red);
}

.demo-controls select {
  padding: .25rem .5rem;
  border: 1px solid var(--cd-text-muted);
  border-radius: var(--cd-jewel-radius);
  font-family: inherit;
}

.demo-footnote {
  font-size: .75rem;
  color: var(--cd-text-muted);
  text-align: center;
  max-width: 480px;
  line-height: 1.5;
}


/* ── Back-tray demo wrapper ── */

.demo-tray-container {
  width: var(--cd-jewel-width);
  max-height: var(--cd-tray-height);
  border-radius: var(--cd-jewel-radius);
  box-shadow: var(--cd-jewel-shadow);
  overflow-y: auto;
}


/* ── Leaflet-specific demo overrides ── */

.demo-controls {
  flex-wrap: wrap;
}

.demo-controls button {
  padding: .5rem 1rem;
  border: 1px solid var(--cd-text-muted);
  border-radius: var(--cd-jewel-radius);
  background: var(--cd-surface-0);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--cd-transition-duration);
}

.demo-controls button:hover {
  background: var(--cd-grid-color);
}

.demo-controls button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.demo-controls .page-indicator {
  font-family: var(--cd-font-mono);
  font-size: .875rem;
  color: var(--cd-text-muted);
  min-width: 8ch;
  text-align: center;
}

.leaflet-content--multi {
  max-width: calc(var(--cd-leaflet-size) + var(--cd-space-inset) * 2);
}

.leaflet-pages {
  display: flex;
  gap: var(--cd-space-stack);
  flex-direction: column;
  position: relative;
}

.leaflet-pages .leaflet-page {
  display: none;
}

.leaflet-pages .leaflet-page[data-leaflet-active="true"] {
  display: flex;
}