/* ═══════════════════════════════════════════════
    LAB WORKSPACE — Scoped for #lab-workspace
 
    Roman/Antiquity Theme — colours match the
    game-wide palette defined in variables.css.
    Layout is isolated under #lab-workspace so it
    cannot leak into the rest of the game shell.
 ═══════════════════════════════════════════════ */

#lab-workspace *,
#lab-workspace *::before,
#lab-workspace *::after {
  box-sizing: border-box;
}

#lab-workspace {
  --lw-bg: var(--bg, #1a1208);
  --lw-surface: var(--panel-bg, rgba(28, 18, 8, 0.94));
  --lw-surface2: rgba(35, 22, 10, 0.94);
  --lw-surface3: rgba(50, 35, 15, 0.94);
  --lw-border: var(--border-subtle, rgba(200, 150, 90, 0.18));
  --lw-border2: var(--border-accent, rgba(200, 150, 90, 0.45));
  --lw-text: var(--text, #e9edef);
  --lw-text-muted: var(--text-muted, #9a8870);
  --lw-text-dim: var(--dim, #7a6a52);
  --lw-gold: var(--gold, #e8c56a);
  --lw-blue: var(--accent-blue, #7aa8c0);
  --lw-green: var(--accent-success, #8fbf6a);
  --lw-red: var(--accent-error, #c94040);
  --lw-radius: var(--radius, 2px);
  --lw-radius-sm: var(--radius, 2px);
  font-family: 'Cinzel', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  background: transparent;
  color: var(--lw-text);
  padding: 8px;
  padding-bottom: 16px;
}

#lab-workspace .lw-header {
  margin-bottom: 10px;
  text-align: center;
}

#lab-workspace .lw-header h1 {
  font-size: 1.1rem;
  color: var(--lw-gold);
  margin: 0 0 2px;
}

#lab-workspace .lw-subtitle {
  font-size: 0.72rem;
  color: var(--lw-text-muted);
  margin: 0 0 8px;
}

#lab-workspace .lw-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: var(--lw-surface2);
  border: 1px solid var(--lw-border2);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--lw-gold);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#lab-workspace .lw-score-badge.bump-plus {
  border-color: var(--lw-green);
  background: rgba(61, 214, 140, 0.12);
  color: var(--lw-green);
  transform: scale(1.08);
}

#lab-workspace .lw-score-badge.bump-minus {
  border-color: var(--lw-red);
  background: rgba(244, 96, 96, 0.12);
  color: var(--lw-red);
  transform: scale(1.08);
}

#lab-workspace .lw-nav-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
  border-bottom: 1px solid var(--lw-border);
  padding-bottom: 6px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#lab-workspace .lw-nav-tabs::-webkit-scrollbar {
  display: none;
}

#lab-workspace .lab-btn {
  appearance: none;
  background: var(--lw-surface2);
  color: var(--lw-text-muted);
  border: 1px solid var(--lw-border2);
  padding: 7px 10px;
  border-radius: var(--lw-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.72rem;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

#lab-workspace .lab-btn:active {
  transform: scale(0.97);
}

#lab-workspace .lab-btn.active {
  background: var(--lw-gold);
  color: #080c14;
  border-color: var(--lw-gold);
}

#lab-workspace .lab-btn.active .lab-btn-label,
#lab-workspace .lab-btn.active .lab-btn-icon {
  color: var(--lw-text);
}

#lab-workspace .lab-btn.active:hover .lab-btn-label, 
#lab-workspace .lab-btn.active:hover .lab-btn-icon  {
  color: var(--gold-text);
}



#lab-workspace .lw-feedback {
  min-height: 32px;
  background: var(--lw-surface2);
  border-left: 3px solid var(--lw-blue);
  padding: 7px 10px;
  border-radius: var(--lw-radius-sm);
  margin-bottom: 10px;
  font-size: 0.72rem;
  line-height: 1.35;
}

#lab-workspace .lw-feedback.success {
  border-left-color: var(--lw-green);
  background: rgba(61, 214, 140, 0.08);
  color: var(--lw-green);
}

#lab-workspace .lw-feedback.error {
  border-left-color: var(--lw-red);
  background: rgba(244, 96, 96, 0.08);
  color: var(--lw-red);
}

#lab-workspace .lab-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

#lab-workspace .section-title {
  font-size: 1rem;
  color: var(--lw-gold);
  margin: 0 0 2px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
}

#lab-workspace .lab-view-toggle {
  appearance: none;
  background: var(--lw-surface2);
  border: 1px solid var(--lw-border2);
  color: var(--lw-text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--lw-radius-sm);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

#lab-workspace .lab-view-toggle:hover {
  background: var(--lw-surface3);
  color: var(--lw-text);
  border-color: var(--lw-gold);
}

#lab-workspace .lab-view-toggle:active {
  transform: scale(0.95);
}

#lab-workspace .tab-panel {
  display: none;
}

#lab-workspace .tab-panel.active {
  display: block;
}

#lab-workspace.lab-list-view .tab-panel.active .listgrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


#lab-workspace.lab-grid-view .desk-stage {
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr;
}

#lab-workspace.lab-grid-view .tab-panel.active .listgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  grid-auto-flow: column;
}

#lab-workspace.lab-grid-view .tab-panel.active .listgrid>* {
  grid-column: 1;
}

#lab-workspace.lab-grid-view .tab-panel.active .listgrid>.card-pool-grid,
#lab-workspace.lab-grid-view .tab-panel.active .listgrid>.trash-archive-box.card-pool-grid {
  grid-column: 2;
}

#lab-workspace.lab-grid-view .tab-panel.active .listgrid .comparator-slots {
  grid-template-columns: 1fr;
}

/* Comparator */
#lab-workspace .comparator-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

#lab-workspace .comparator-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#lab-workspace .comparator-slot {
  background: var(--lw-surface2);
  border: 1.5px dashed var(--lw-border2);
  border-radius: var(--lw-radius-sm);
  padding: 10px;
  text-align: center;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#lab-workspace .comparator-slot.filled {
  border-style: solid;
  border-color: var(--lw-blue);
  background: rgba(79, 163, 232, 0.08);
}

#lab-workspace .comparator-slot.correct {
  border-color: var(--lw-green);
  background: rgba(61, 214, 140, 0.12);
}

#lab-workspace .comparator-slot.wrong {
  border-color: var(--lw-red);
  background: rgba(244, 96, 96, 0.12);
}

#lab-workspace .slot-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--lw-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#lab-workspace .slot-emoji {
  font-size: 1.4rem;
}

#lab-workspace .slot-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--lw-text);
}

#lab-workspace .card-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}

@media (max-width: 420px) {
  #lab-workspace .card-pool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

#lab-workspace .ev-card {
  background: var(--lw-surface2);
  border: 1.5px solid var(--lw-border2);
  border-radius: var(--lw-radius-sm);
  padding: 8px;
  cursor: pointer;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  user-select: none;
}

#lab-workspace .ev-card:active {
  transform: scale(0.94);
  background: var(--lw-surface3);
}

#lab-workspace .ev-card.dragging {
  opacity: 0.35;
  border-style: dashed;
  border-color: var(--lw-gold);
}

#lab-workspace .ev-card.selected {
  border-color: var(--lw-blue);
  background: rgba(79, 163, 232, 0.12);
}

#lab-workspace .ev-card.correct-flash {
  border-color: var(--lw-green);
  background: rgba(61, 214, 140, 0.18);
}

#lab-workspace .ev-card.wrong-flash {
  border-color: var(--lw-red);
  background: rgba(244, 96, 96, 0.18);
}

#lab-workspace .card-icon {
  font-size: 1.25rem;
}

#lab-workspace .card-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--lw-text);
  text-align: center;
}

#lab-workspace .actions-bar {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

#lab-workspace .btn-secondary {
  appearance: none;
  background: var(--lw-surface2);
  color: var(--lw-text-muted);
  border: 1px solid var(--lw-border2);
  border-radius: var(--lw-radius-sm);
  padding: 9px 12px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  flex: 1;
  transition: background 0.15s ease, transform 0.12s ease;
}

#lab-workspace .btn-secondary:active {
  transform: scale(0.97);
  background: var(--lw-surface3);
}

#lab-workspace .btn-submit {
  appearance: none;
  background: var(--lw-gold);
  color: #080c14;
  border: none;
  border-radius: var(--lw-radius-sm);
  padding: 9px 12px;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  flex: 1;
  transition: transform 0.12s ease, opacity 0.15s ease;
}

#lab-workspace .btn-submit:active {
  transform: scale(0.97);
  opacity: 0.92;
}

/* Folders */
#lab-workspace .folder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 520px) {
  #lab-workspace .folder-grid {
    grid-template-columns: 1fr;
  }
}

#lab-workspace .folder-tray {
  background: var(--lw-surface2);
  border: 1px solid var(--lw-border2);
  border-radius: var(--lw-radius-sm);
  padding: 8px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#lab-workspace .folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#lab-workspace .folder-header-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--lw-text);
}

#lab-workspace .ev-info-btn {
  appearance: none;
  background: var(--lw-surface3);
  color: var(--lw-text-muted);
  border: 1px solid var(--lw-border2);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

#lab-workspace .folder-content {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Timeline */
#lab-workspace .timeline-vertical-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

#lab-workspace .timeline-step {
  background: var(--lw-surface2);
  border: 1.5px dashed var(--lw-border2);
  border-radius: var(--lw-radius-sm);
  padding: 10px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#lab-workspace .timeline-step.filled {
  border-style: solid;
  border-color: var(--lw-blue);
  background: rgba(79, 163, 232, 0.08);
}

#lab-workspace .timeline-step.correct {
  border-color: var(--lw-green);
  background: rgba(61, 214, 140, 0.12);
}

#lab-workspace .timeline-step.wrong {
  border-color: var(--lw-red);
  background: rgba(244, 96, 96, 0.12);
}

#lab-workspace .step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#lab-workspace .step-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--lw-text);
}

#lab-workspace .step-hint {
  font-size: 0.68rem;
  color: var(--lw-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

#lab-workspace .step-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Candle / Shredder */
#lab-workspace .desk-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 520px) {
  #lab-workspace .desk-stage {
    grid-template-columns: 1fr;
  }
}

#lab-workspace .desk-station {
  background: var(--lw-surface2);
  border: 1.5px dashed var(--lw-border2);
  border-radius: var(--lw-radius-sm);
  padding: 10px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#lab-workspace .desk-station.accept-candle {
  border-style: solid;
  border-color: var(--lw-gold);
  background: rgba(245, 200, 66, 0.08);
}

#lab-workspace .desk-station.accept-shredder {
  border-style: solid;
  border-color: var(--lw-red);
  background: rgba(244, 96, 96, 0.08);
}

#lab-workspace .station-emoji {
  font-size: 1.4rem;
}

#lab-workspace .station-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--lw-text);
}

#lab-workspace .candle-viewer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

#lab-workspace .trash-archive-box {
  background: rgba(244, 96, 96, 0.08);
  border: 1px dashed rgba(244, 96, 96, 0.35);
  border-radius: var(--lw-radius-sm);
  padding: 8px;
  margin-top: 6px;
}

/* Modal */
#lab-workspace .modal-mask {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.65);
}

#lab-workspace .modal-mask.open {
  display: flex;
}

#lab-workspace .modal-card {
  background: var(--lw-surface2);
  border: 1px solid var(--lw-border2);
  border-radius: var(--lw-radius);
  padding: 16px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

#lab-workspace .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#lab-workspace .modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lw-text);
}

#lab-workspace .modal-close {
  appearance: none;
  background: transparent;
  color: var(--lw-text-muted);
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}

#lab-workspace .modal-body {
  font-size: 0.82rem;
  color: var(--lw-text-muted);
  line-height: 1.55;
}

#lab-workspace .detail-row {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--lw-border);
}

#lab-workspace .detail-row:first-child {
  border-top: none;
  padding-top: 0;
}

#lab-workspace .detail-row strong {
  font-size: 0.68rem;
  color: var(--lw-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#lab-workspace .detail-row span {
  font-size: 0.76rem;
  color: var(--lw-text-muted);
  line-height: 1.45;
}

#lab-workspace .detail-section-label {
  font-size: 0.66rem;
  color: var(--lw-gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

#lab-workspace .hint {
  font-style: italic;
}