/* Classivo Coding — Playground layout */

.playground {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  background: var(--bg-sunken);
}

/* ---------- Toolbar ---------- */

.playground__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  z-index: 5;
}

.playground__title-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-end: auto;
  min-width: 0;
}

.playground__toolbar h1 {
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playground__status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-success);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(31, 157, 107, 0.15);
  transition: transform var(--duration-fast) var(--ease);
}

.playground__status.is-running {
  animation: playground-pulse 550ms var(--ease);
}

@keyframes playground-pulse {
  0% { transform: scale(1); background: var(--accent-success); }
  40% { transform: scale(1.6); background: var(--brand); box-shadow: 0 0 0 5px rgba(61, 139, 240, 0.18); }
  100% { transform: scale(1); background: var(--accent-success); box-shadow: 0 0 0 3px rgba(31, 157, 107, 0.15); }
}

.playground__toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.playground__toolbar .btn--icon svg {
  width: 17px;
  height: 17px;
}

/* ---------- Body / editors ---------- */

.playground__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

/* Editors get more room than the preview since three stacked code panels
   need it — grid-template-columns: 1fr 1fr 1fr with only 2 grid children
   (editors, preview) would leave a whole empty third column, so this is
   deliberately a 2-column ratio, not 3 equal tracks. */
.playground__body.layout-3 { grid-template-columns: 3fr 2fr; }

.playground__editors {
  display: grid;
  grid-template-rows: repeat(var(--editor-count, 1), 1fr);
  min-height: 0;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--bg-code);
}

.editor-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.editor-pane:last-child { border-bottom: none; }

.editor-pane::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--pane-accent, transparent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
  z-index: 1;
}

.editor-pane:focus-within::before {
  opacity: 1;
}

.editor-pane__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
  background: color-mix(in srgb, var(--bg-code) 60%, black 8%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--duration-fast) var(--ease);
}

.editor-pane:focus-within .editor-pane__label {
  color: var(--slate-100);
}

.editor-pane__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.editor-pane__lines {
  margin-inline-start: auto;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.editor-pane textarea {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: none;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  background: transparent;
  color: var(--text-code);
  caret-color: var(--brand-400);
  tab-size: 2;
  /* Code is always written LTR, regardless of the page's own direction. */
  direction: ltr;
  text-align: left;
}

.editor-pane textarea::selection {
  background: color-mix(in srgb, var(--brand-500) 35%, transparent);
}

.editor-pane textarea::placeholder {
  color: var(--slate-600);
}

.editor-pane textarea:focus-visible { box-shadow: none; outline: none; }

/* Monaco Editor host — replaces <textarea> in playgrounds migrated to the
   shared editor (see assets/js/playground/core/editor.js). Monaco manages
   its own internal scrolling/rendering; it just needs a sized flex child. */
.editor-pane .monaco-host,
.monaco-host {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* ---------- Project mode (multi-file exercises in the JS playground) ---------- */
.playground__project {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  min-height: 0;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--bg-code);
}
.playground__project[hidden],
.playground__editors[hidden] { display: none; }
.playground__project .editor-pane { min-width: 0; }
.playground__project-tree {
  overflow-y: auto;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  /* File and folder names are paths — keep them LTR in Arabic too. */
  direction: ltr;
}
/* Lab file sets are fixed: no folder add/delete buttons. */
.playground__project-tree .njp-tree__folder-actions { display: none; }
@media (max-width: 900px) {
  /* The stacked mobile layout gives each pane a 240px row; the tree and the
     editor need two of them, or the tree is squeezed to nothing. */
  .playground__project { grid-row: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: 140px minmax(0, 1fr); }
  .playground__project-tree { border-inline-end: 0; border-bottom: 1px solid var(--border-subtle); }
}

/* ---------- Exercise panel (Phase 4: lesson-aware Playground) ---------- */
.exercise-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: var(--space-4);
  margin-block: var(--space-4);
}
/* Inside the fixed-height flex column of the HTML/CSS/JS playground: keep
   the panel from squeezing the editors — cap it and let it scroll. */
.playground > .exercise-panel {
  flex-shrink: 0;
  margin: var(--space-3) var(--space-5) 0;
  max-height: 38vh;
  overflow-y: auto;
}
.exercise-panel__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.exercise-panel__switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.exercise-panel__switcher select {
  flex: 1;
  min-width: 0;
  max-width: 36rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
}
.exercise-panel__mode { font-size: var(--text-xs); text-transform: uppercase; }
.exercise-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.exercise-panel__result {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg-surface-alt);
}
.exercise-panel__result.is-success { color: #067647; background: color-mix(in srgb, #067647 12%, transparent); }
.exercise-panel__result.is-error { color: #b42318; background: color-mix(in srgb, #b42318 12%, transparent); }
.exercise-panel__pane {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-code);
  color: var(--text-code);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  max-height: 260px;
  overflow-y: auto;
}

/* ---------- Preview ---------- */

.playground__preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-surface);
}

.playground__preview-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.playground__preview-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.playground__device-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
  padding: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.playground__device-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border-radius: 6px;
  color: var(--text-muted);
}

.playground__device-btn svg { width: 14px; height: 14px; }

.playground__device-btn:hover { color: var(--text-primary); background: var(--bg-surface-alt); }

.playground__device-btn.is-active {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.playground__preview-frame-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: auto;
  background: repeating-conic-gradient(var(--bg-sunken) 0% 25%, var(--bg-surface) 0% 50%) 0 0 / 16px 16px;
}

.playground__preview iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  transition: max-width var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}

.playground__preview-frame-wrap[data-device="tablet"] iframe {
  max-width: 768px;
  box-shadow: var(--shadow-lg);
  margin-block: var(--space-4);
}

.playground__preview-frame-wrap[data-device="mobile"] iframe {
  max-width: 375px;
  box-shadow: var(--shadow-lg);
  margin-block: var(--space-4);
}

/* ---------- Console ---------- */

.playground__console {
  height: 180px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-code);
  color: var(--text-code);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  direction: ltr;
  text-align: left;
}

.playground__console-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--slate-400);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  flex-shrink: 0;
}

.playground__console-count[hidden] {
  display: none;
}

.playground__console-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--slate-300);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.playground__console-header .btn--icon {
  margin-inline-start: auto;
  color: var(--slate-400);
}
.playground__console-header .btn--icon:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

#console-output {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#console-output:empty::after {
  content: "Console output will appear here — try a console.log() in your JS.";
  display: block;
  padding: var(--space-4);
  color: var(--slate-600);
  font-style: italic;
}

.console-log {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: pre-wrap;
  word-break: break-word;
  border-inline-start: 2px solid transparent;
  animation: console-log-in 120ms var(--ease);
}

@keyframes console-log-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

.console-log::before {
  flex-shrink: 0;
  opacity: 0.8;
}

.console-log--log::before { content: "›"; color: var(--slate-500); }
.console-log--info::before { content: "ℹ"; color: #7ec4f5; }
.console-log--warn::before { content: "▲"; color: #f5c26e; font-size: 0.7em; margin-top: 0.3em; }
.console-log--error::before { content: "✕"; color: #ff8d8d; }

.console-log--error { color: #ff8d8d; border-inline-start-color: rgba(255, 141, 141, 0.5); background: rgba(255, 141, 141, 0.06); }
.console-log--warn { color: #f5c26e; border-inline-start-color: rgba(245, 194, 110, 0.4); background: rgba(245, 194, 110, 0.05); }
.console-log--info { color: #7ec4f5; }

@media (max-width: 900px) {
  .playground__body, .playground__body.layout-3 { grid-template-columns: 1fr; grid-auto-rows: minmax(240px, 1fr); overflow-y: auto; }
  .playground__editors { grid-template-rows: none; border-inline-end: none; }
  .playground__device-group { display: none; }
}