/* Softlight — study-specific interface details. Base system is ../shared/lab.css */

body { background: #e9dfd0; }

#btn-pause[aria-pressed="false"] .pause-off { display: none; }
#btn-pause[aria-pressed="true"] .pause-on { display: none; }

.lab-overlay {
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(255, 248, 236, .5), transparent 70%),
    rgba(58, 44, 30, .42);
}

.lab-card {
  background: #fffcf7;
  border-color: rgba(60, 44, 28, .14);
}

/* material chips read as a single control, not five separate buttons */
.variant-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--lab-line);
  background: var(--lab-panel);
  backdrop-filter: blur(12px);
}

.variant-group .lab-btn {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  min-height: 32px;
  padding: 6px 12px;
}

.variant-group .lab-btn:hover { background: var(--lab-hover); }

.variant-group .lab-btn[aria-pressed="true"] {
  background: var(--lab-panel-solid);
  border-color: var(--lab-line);
  color: var(--lab-ink);
  box-shadow: 0 1px 3px rgba(60, 44, 28, .12);
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

.lab-canvas { cursor: grab; }
#stage[data-grabbing="true"] .lab-canvas { cursor: grabbing; }

.lab-help kbd { min-width: 20px; }

@media (max-width: 860px) {
  .variant-group .lab-btn .lab-btn-text { display: none; }
  .variant-group .lab-btn { padding: 6px 8px; }
}