/* App preview — renders slide regions as mm-frame iframes */
.app-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

.app-preview-page { min-width: 0; }

/* Accordion */
.accordion { border-top: 1px solid var(--border-subtle); }
.accordion:first-child { border-top: none; }
.accordion-label { padding: 6px 12px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-surface); cursor: pointer; list-style: none; }
.accordion-label::-webkit-details-marker { display: none; }
.accordion-label::before { content: "▸ "; }
.accordion[open] > .accordion-label::before { content: "▾ "; }

/* Panel label */
.panel-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }

/* Empty region placeholder — layout via .row in markup for non-empty states */
.app-preview--empty { padding: 8px; min-height: 40px; text-align: center; }
.app-preview--empty .empty-state { font-size: 10px; }

/* Command panel — layout via .row.row--6 in markup */
.slide-command-panel {
  padding: 4px 12px 6px;
  background: var(--bg-surface);
}

.slide-cmd-input {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  width: 160px;
}

.slide-cmd-input--sm { width: 80px; }

.slide-cmd-select {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  min-width: 160px;
}

.slide-cmd-select--sm { min-width: 100px; }
.slide-cmd-select:disabled, .slide-cmd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.slide-cmd-select optgroup { font-weight: 600; font-style: normal; color: var(--text-muted); }
.slide-cmd-select option { font-weight: 400; color: var(--text-primary); }

.slide-cmd-btn {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.slide-cmd-btn:hover { background: var(--border); }
.slide-cmd-btn--muted { color: var(--text-muted); }

/* Event log */
.slide-event-log {
  max-height: 150px;
  overflow-y: auto;
  padding: 6px 12px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-deep);
}

/* Event rows — layout via .row in markup */
.event-header {
  padding: 2px 0 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-entry {
  padding: 2px 0;
  color: var(--text-secondary);
}

.event-time   { color: var(--text-muted); min-width: 60px; }
.event-region { color: var(--accent-purple); min-width: 50px; }
.event-action { color: var(--accent-blue); min-width: 60px; }
.event-target { color: var(--accent-green); min-width: 100px; }
.event-text   { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }