/* lab sheet (#151): built by js/tools/lab-sheet.js, docked left of
   the canvas so the canvas narrows beside it. Classic tokens; Edison's look
   (the Lab HUD's black sheet, #194) is edison-hud-lab.css. */

#lab-sheet {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  font: 400 13px/1.45 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  overflow: hidden;
}

.lab-sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
}
.lab-sheet-code  { font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-sheet-week  { color: var(--text-muted); font-size: 12px; }
.lab-sheet-title { flex-basis: 100%; font-size: 15px; font-weight: 600; line-height: 1.3; }
.lab-sheet-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.lab-sheet-close:hover { color: var(--text-primary); }

.lab-steps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  padding: 6px 0;
}

.lab-step {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 4px 8px;
  align-items: start;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.lab-step-manual { cursor: pointer; }
.lab-step-manual:hover { background: #f5f2ed; }
.lab-step-n      { font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lab-step-hint   { grid-column: 2 / -1; color: var(--danger); font-size: 12px; }

/* The status pill: only its colour moves, and only when a step changes. */
.lab-step-status {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: #ece8e1;
  color: #5f5a53;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.lab-step[data-status="passed"] .lab-step-status { background: #dcfce7; color: #166534; }
.lab-step[data-status="failed"] .lab-step-status { background: #fee2e2; color: #991b1b; }

.lab-sheet-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.lab-stepper { display: flex; gap: 4px; }
.lab-stepper-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-dark);
  transition: background-color 150ms ease-out;
}
.lab-stepper-dot[data-status="passed"] { background: #16a34a; }
.lab-stepper-dot[data-status="failed"] { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .lab-step-status, .lab-stepper-dot { transition: none; }
}

/* Stacked layout (style.css): the sheet sits under the canvas, full width. */
@media (max-width: 1024px) and (min-height: 600px) {
  #lab-sheet {
    width: 100%;
    max-height: 28vh;
    border-right: none;
    border-top: 1px solid var(--border);
  }
}