/* Dev Hub layout & visual hierarchy (dev/index.html) */

.main-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.demo-mode-btn {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(168, 85, 247, 0.15);
  color: var(--purple);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 8px;
  cursor: pointer;
}

.demo-mode-btn[aria-pressed="true"] {
  background: var(--purple);
  color: #fff;
}

.demo-mode-btn:hover {
  opacity: 0.92;
}

.subtitle-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.85rem;
}

.subtitle-links a {
  color: #7dd3fc;
  text-decoration: none;
}

.subtitle-links a:hover {
  text-decoration: underline;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.quick-actions-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.quick-actions-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  width: 100%;
  margin-bottom: 2px;
}

@media (min-width: 640px) {
  .quick-actions-label {
    width: auto;
    margin-bottom: 0;
    margin-right: 4px;
  }
}

/* Sandbox avatars band */
.sandbox-avatars-band {
  margin-bottom: 24px;
}

.sandbox-avatars-band > .section-header-band {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple);
  margin-bottom: 12px;
}

.avatar-panels-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 960px) {
  .avatar-panels-row {
    grid-template-columns: 1fr 1fr;
  }
}

.avatar-panels-row .section {
  margin-bottom: 0;
}

.demo-student-hero.is-empty,
.demo-teacher-hero.is-empty {
  border-style: dashed;
  opacity: 1;
  background: rgba(255, 255, 255, 0.02);
}

body.light .demo-student-hero.is-empty,
body.light .demo-teacher-hero.is-empty {
  background: rgba(0, 0, 0, 0.02);
}

.hero-empty-cta {
  margin-top: 8px;
}

/* Teacher avatar panel — teal accents */
.teacher-avatar-controls-section .active-student-bar {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.35);
}

.teacher-avatar-controls-section .active-student-bar .active-student-emoji {
  border-color: rgba(20, 184, 166, 0.45);
}

.teacher-avatar-controls-section .pick-btn:hover {
  background: var(--teal);
  color: #fff;
}

.teacher-avatar-controls-section .card.teacher.active-pick {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35);
}

.teacher-avatar-controls-section .avatar-preview {
  border-color: rgba(20, 184, 166, 0.5);
}

.teacher-avatar-controls-section .emoji-chip:hover {
  background: rgba(20, 184, 166, 0.25);
}

/* Unified primary buttons in main content */
.main .form-btn.primary {
  background: var(--purple);
  color: #fff;
}

.main .form-btn.primary:hover {
  opacity: 0.9;
}

/* Section chevrons */
.section-header[data-toggle] {
  user-select: none;
}

.section-header[data-toggle]::after {
  content: "▾";
  font-size: 0.85rem;
  opacity: 0.6;
  margin-left: auto;
  flex-shrink: 0;
}

.section-header[data-toggle].is-collapsed::after {
  content: "▸";
}

.section-header[data-toggle] + .section-desc + .section-body.collapsed,
.section-header[data-toggle] + .section-body.collapsed {
  /* sibling collapsed handled in JS */
}

/* Calmer section accents — role colors only on avatars + warnings */
.add-controls-section .section-header,
.ai-dash-section .section-header,
.behavior-intervention-section .section-header {
  color: var(--text-dim);
}

.add-controls-section,
.ai-dash-section,
.behavior-intervention-section {
  border-color: var(--border);
}

.demo-launcher-section {
  border-color: rgba(168, 85, 247, 0.35);
}

.dev-frame-section {
  border-color: var(--border);
}

.dev-frame-section > .section-header {
  color: var(--text-dim);
}

/* Preview compact / expanded */
.dev-frame-section.is-preview-compact .dev-frame-wrap {
  max-height: 360px;
}

.dev-frame-section.is-preview-compact #devFrame {
  height: 360px;
  min-height: 280px;
}

.dev-frame-section.is-preview-expanded #devFrame {
  height: min(78vh, 720px);
  min-height: 420px;
}

.dev-frame-section.is-preview-collapsed .dev-frame-wrap,
.dev-frame-section.is-preview-collapsed .dev-frame-note,
.dev-frame-section.is-preview-collapsed .dev-frame-toolbar {
  display: none;
}

.dev-frame-section.is-preview-collapsed .section-header {
  border-bottom: none;
}

.preview-toggle-btn {
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--border);
  color: var(--text);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
}

.preview-toggle-btn:hover {
  background: rgba(168, 85, 247, 0.2);
}

/* Emoji picker compact */
.emoji-picker-compact .emoji-chip-more {
  font-size: 0.75rem;
  padding: 6px 10px;
  background: var(--border);
  color: var(--text-dim);
}

.emoji-picker-row.is-expanded {
  max-height: none;
}

/* Demo mode hides operator chrome */
body.demo-mode .operator-only {
  display: none !important;
}

body.demo-mode .sandbox-callout,
body.demo-mode #instructionsSection,
body.demo-mode .teacher-workflow-callout {
  display: none !important;
}

/* Scroll targets */
.sandbox-avatars-band,
#demoLauncher,
#devFramePanel,
#addAssignmentSupportBody {
  scroll-margin-top: 16px;
}

.nav-link.is-section-active {
  background: rgba(168, 85, 247, 0.12);
  color: var(--text);
  border-left: 2px solid var(--purple);
}

/* Light mode panel cards */
body.light .hub-panel-card,
body.light .demo-roster-card {
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.06) 0%, rgba(0, 0, 0, 0.02) 50%) !important;
}

body.light .hub-panel-card.tone-green {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.08) 0%, rgba(0, 0, 0, 0.02) 50%) !important;
}

body.light .hub-panel-btn,
body.light .demo-roster-btn {
  background: rgba(0, 0, 0, 0.04) !important;
}

.hub-panel-title,
.demo-roster-name {
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}
.demo-launcher-section > .section-header,
.dev-frame-section > .section-header,
.sandbox-avatars-band .section-header {
  cursor: default;
}

.demo-launcher-section > .section-header:hover,
.dev-frame-section > .section-header:hover {
  background: transparent;
}

.growth-pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.growth-review-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.growth-review-text {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}