/* Paint-it-in: one device on every plot card, wearing the room's light.
   A brush pill. Off, it is bare canvas with a dry brush; on, the room's
   accent floods it and the brush is loaded. The word is set in the room's
   display face so it reads as part of the card, not a form control. */
.pm { display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  margin-top: 14px; position: relative; padding: 9px 18px 9px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pm-accent) 42%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22));
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .2s ease; }
.pm:hover { border-color: color-mix(in srgb, var(--pm-accent) 75%, transparent); transform: translateY(-1px); }
.pm-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* the brush: a loaded tip on a short handle, drawn in css */
.pm-track { flex: none; width: 46px; height: 26px; border-radius: 999px; position: relative;
  border: 1px solid color-mix(in srgb, var(--pm-accent) 45%, transparent);
  background: rgba(0,0,0,.35); transition: background .3s, border-color .3s; overflow: hidden; }
.pm-track::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px;
  background: color-mix(in srgb, var(--pm-dim) 60%, transparent); border-radius: 2px; }
.pm-dab { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pm-dim) 70%, #fff), var(--pm-dim) 70%);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s; }
.pm-check:checked + .pm-track { background: color-mix(in srgb, var(--pm-accent) 28%, rgba(0,0,0,.35)); border-color: var(--pm-accent); }
.pm-check:checked + .pm-track .pm-dab { transform: translateX(20px);
  background: radial-gradient(circle at 35% 30%, #fff8e8, var(--pm-accent) 65%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pm-accent) 80%, transparent), 0 0 22px color-mix(in srgb, var(--pm-accent) 45%, transparent); }
.pm-check:focus-visible + .pm-track { outline: 2px solid var(--pm-accent); outline-offset: 3px; }
.pm-copy { display: flex; flex-direction: column; gap: 2px; }
.pm-word { font-family: var(--font-display, Georgia, serif); font-style: italic; font-weight: 500; font-size: 17px;
  letter-spacing: -.005em; line-height: 1; color: var(--pm-fg); transition: color .3s; }
.pm-hint { font-family: var(--font-body, system-ui, sans-serif); font-size: 12px; line-height: 1.2; color: var(--pm-dim); opacity: .85; }
.pm:has(.pm-check:checked) { border-color: var(--pm-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pm-accent) 16%, transparent), color-mix(in srgb, var(--pm-accent) 8%, rgba(0,0,0,.22)));
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--pm-accent) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--pm-accent) 25%, transparent); }
.pm-check:checked ~ .pm-copy .pm-word { color: var(--pm-accent); }
/* while the switch is on, the size chips show they start a drawn wall */
[data-plot-card].pm-on form button { border-style: dashed; }
/* signed out, the same device stands on the card and walks to signup */
.pm-signin { text-decoration: none; }
.pm-signin:hover .pm-word, .pm-signin:focus-visible .pm-word { color: var(--pm-accent); }
.pm-signin:hover .pm-track { border-color: var(--pm-accent); }
.pm-signin:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pm, .pm-track, .pm-dab, .pm-word { transition: none; } }