/* system/apps/test-room/styles.css
 *
 * Sept 2026 -- the first Durable Object room's test UI. Nothing
 * fancy: a room-name field, connect/disconnect, a swatch that updates
 * live, and a row of buttons to change it. See app.js for the point.
 */

.test-room-view { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; }

.test-room-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--slate);
}

.test-room-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.test-room-buttons button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.test-room-state {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--slate);
}

.test-room-swatch {
  width: 100%;
  height: 96px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #e6e6e6;
  transition: background 150ms ease;
}

.test-room-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.test-room-color-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
}