/* SD Forest shell tokens for the Cubeflow subpage. */
:root {
  --bg: #07070b;
  --surface: #0f0f15;
  --border: rgba(255, 255, 255, 0.08);
  --text-primary: #f3f4f6;
  --text-muted: #9ca3af;
  --accent: #4f46e5;
  --accent-green: #22c55e;
  --radius: 8px;
}

html.forest-skin,
html.forest-skin body,
html.forest-skin #root {
  background: var(--bg);
}

html.forest-skin .project-context {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24);
}

html.forest-skin .project-context-kicker {
  color: var(--accent-green);
}

html.forest-skin .app-screen {
  color: var(--text-primary);
  background: var(--bg);
}

html.forest-skin .capture-screen,
html.forest-skin .review-screen,
html.forest-skin .lesson-screen,
html.forest-skin .complete-screen,
html.forest-skin .face-progress {
  background: var(--bg) !important;
}

html.forest-skin .face-progress-item {
  background: var(--bg);
  border-color: var(--border);
}

html.forest-skin .brand,
html.forest-skin .desktop-screen-title,
html.forest-skin .face-progress-copy strong,
html.forest-skin .face-progress-label {
  color: var(--text-primary);
}

html.forest-skin .brand-mark {
  background: var(--accent);
}

html.forest-skin .app-screen h1,
html.forest-skin .app-screen h2,
html.forest-skin .app-screen h3,
html.forest-skin .app-screen strong,
html.forest-skin .app-screen .review-intro p,
html.forest-skin .app-screen .manual-cube-instructions,
html.forest-skin .app-screen .manual-face-count,
html.forest-skin .app-screen .face-tour-nav button,
html.forest-skin .app-screen .color-swatch strong,
html.forest-skin .app-screen .color-count strong,
html.forest-skin .app-screen .validation-summary strong {
  color: var(--text-primary);
}

html.forest-skin .app-screen p,
html.forest-skin .app-screen small,
html.forest-skin .app-screen .face-tour-nav button small,
html.forest-skin .app-screen .capture-review-palette p,
html.forest-skin .app-screen .color-count,
html.forest-skin .app-screen .validation-summary,
html.forest-skin .app-screen .review-promise {
  color: var(--text-muted);
}

html.forest-skin .app-screen .review-intro,
html.forest-skin .app-screen .manual-panel-heading,
html.forest-skin .app-screen .manual-editor-panel,
html.forest-skin .app-screen .manual-cube-panel,
html.forest-skin .app-screen .review-header,
html.forest-skin .app-screen .lesson-header {
  color: var(--text-primary);
}

html.forest-skin .app-screen button[role="tab"],
html.forest-skin .app-screen .face-tour-nav button {
  border-color: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
}

html.forest-skin .app-screen button[role="tab"][aria-selected="true"],
html.forest-skin .app-screen .face-tour-nav button[aria-selected="true"] {
  border-color: var(--accent);
  background: rgba(79, 70, 229, 0.18);
  color: var(--text-primary);
}

html.forest-skin .face-progress-item[data-state="current"] {
  border-color: var(--accent);
  background: rgba(79, 70, 229, 0.12);
}

html.forest-skin .face-progress-item[data-state="current"] .face-progress-label,
html.forest-skin .face-progress-item[data-state="current"] .face-progress-copy strong {
  color: var(--text-primary);
}

html.forest-skin .face-progress-item[data-state="done"] .face-progress-node {
  border-color: var(--accent-green);
  background: var(--accent-green);
}

html.forest-skin .capture-header,
html.forest-skin .orientation-strip,
html.forest-skin .camera-message,
html.forest-skin .capture-review-card,
html.forest-skin .capture-cube-preview,
html.forest-skin .manual-cube-panel,
html.forest-skin .manual-editor-panel,
html.forest-skin .lesson-footer {
  border-color: var(--border);
  background: var(--surface);
}

html.forest-skin .orientation-strip h1,
html.forest-skin .capture-review-card h2,
html.forest-skin .manual-panel-heading h2,
html.forest-skin .face-count,
html.forest-skin .capture-review-card > header p,
html.forest-skin .capture-review-card > header > span,
html.forest-skin .face-progress-label,
html.forest-skin .face-progress-copy strong {
  color: var(--text-primary);
}

html.forest-skin .orientation-strip p,
html.forest-skin .capture-review-card p,
html.forest-skin .capture-review-card > header > span,
html.forest-skin .manual-panel-heading p,
html.forest-skin .camera-message,
html.forest-skin .face-progress-copy small {
  color: var(--text-muted);
}

html.forest-skin .camera-stage {
  background: #11131a !important;
}

html.forest-skin .primary-button,
html.forest-skin .primary-button--green {
  border-color: var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--text-primary);
}

html.forest-skin .secondary-button,
html.forest-skin .text-button,
html.forest-skin .icon-text-button {
  border-color: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
}

html.forest-skin .primary-button:focus-visible,
html.forest-skin .secondary-button:focus-visible,
html.forest-skin .text-button:focus-visible,
html.forest-skin .icon-text-button:focus-visible,
html.forest-skin .alignment-cell:focus-visible {
  outline: 3px solid var(--accent-green);
  outline-offset: 3px;
}

html.forest-skin .capture-review-card--unread {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 1px var(--accent-green);
}

html.forest-skin .capture-review-card--unread .capture-review-card > header p,
html.forest-skin .capture-review-card--unread .capture-unread-status {
  color: var(--accent-green);
}

html.forest-skin .capture-unread-status {
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius);
  background: rgba(34, 197, 94, 0.1);
  padding: 10px 12px;
  color: var(--text-primary);
  font-weight: 600;
}

html.forest-skin .capture-review-card--unread .alignment-cell[data-vision-state="UNREAD"] {
  border: 1px dashed var(--accent-green);
  background: var(--surface) !important;
  color: var(--text-muted);
}

html.forest-skin .capture-review-card--unread .alignment-color-code {
  width: auto;
  min-width: 30px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 9px;
}

html.forest-skin .sdforest-return {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

/* The shared project context sits above the embedded app.  Cubeflow's own
 * mobile shell assumes it owns a 100dvh document and the old integration left
 * body overflow hidden, clipping the manual-entry controls below the camera.
 * Let the page, not an invisible nested viewport, carry the phone scroll. */
@media (max-width: 1099px) {
  html.forest-skin,
  html.forest-skin body,
  html.forest-skin #root {
    height: auto !important;
    min-height: 100dvh;
  }

  html.forest-skin body {
    overflow: auto !important;
  }

  html.forest-skin #root,
  html.forest-skin .phone-stage,
  html.forest-skin .phone-scale-box,
  html.forest-skin .phone-device,
  html.forest-skin .device-screen,
  html.forest-skin .mobile-app-viewport,
  html.forest-skin .app-screen,
  html.forest-skin .mobile-page,
  html.forest-skin .mobile-scroll {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html.forest-skin .phone-stage {
    display: block !important;
    padding: 0 !important;
  }

  html.forest-skin .phone-bezel,
  html.forest-skin .device-menu-bar,
  html.forest-skin .status-bar,
  html.forest-skin .home-indicator-svg,
  html.forest-skin .keyboard-dock,
  html.forest-skin .mobile-cursor {
    display: none !important;
  }

  html.forest-skin .mobile-scroll {
    overflow: visible !important;
  }
}