@layer components {

/* The Signal Studio workspace preview, built in HTML and CSS rather than
   pictured. Shared by the home hero and the /design console; the outer
   .pv-app box is positioned by whichever page it stands on.
   The four states live in previews.mjs — see CONSOLE_STATES. */

.pv-app-rail { padding: var(--s4) var(--s3); border-right: 1px solid var(--rule-soft);
  background: var(--paper-2); display: grid; gap: 2px; align-content: start; }
.pv-mark { width: 16px; height: 16px; border-radius: 5px; background: var(--accent);
  margin: 0 0 var(--s4) var(--s2); }
.pv-rail-item { display: flex; align-items: center; gap: var(--s2);
  padding: 5px var(--s2); border-radius: var(--r-sm); color: var(--graphite); }
.pv-rail-item svg { width: 13px; height: 13px; flex: none; }
.pv-rail-item b { font-weight: 500; }
.pv-rail-item.is-on { background: var(--accent-soft); color: var(--accent); }

.pv-app-body { padding: var(--s4) var(--s4) 0; min-width: 0; }
.pv-app-head { display: flex; align-items: baseline; gap: var(--s4); }
.pv-app-head strong { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.pv-tabs { display: flex; gap: var(--s3); margin-left: auto; }
.pv-tabs b { font-weight: 500; color: var(--graphite); }
.pv-tabs b.is-on { color: var(--ink); }

.pv-task-list { margin-top: var(--s3); display: grid; }
.pv-task-list li { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto auto;
  gap: var(--s3); align-items: center; padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.pv-tick { width: 15px; height: 15px; border-radius: 50%;
  border: 1.4px solid var(--rule-strong); display: grid; place-items: center; color: #fff; }
.pv-tick svg { width: 9px; height: 9px; }
.is-done .pv-tick { background: var(--accent); border-color: var(--accent); }
.is-done .pv-task-title { color: var(--graphite); }
.pv-task-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-task-when { color: var(--graphite); font-size: 10px; }
.pv-faces { display: flex; }
.pv-faces i { width: 15px; height: 15px; border-radius: 50%; background: var(--paper-3);
  color: var(--ink-2); font-size: 8px; font-style: normal; display: grid; place-items: center;
  border: 1.5px solid var(--paper); margin-left: -5px; }

/* ── the four states ─────────────────────────────────────────────── */
/* All four are in the page. The console shows one; with no JavaScript
   the first is the one that stands. */
.pv-state { display: none; }

/* With no console around it — and so with no JavaScript — the first state
   is the one that stands. */
.pv-state[data-state="ready"] { display: block; }

/* The console owns the choice. Scoped to it, and by descendant rather
   than child: the states sit four levels down inside the workspace, and
   each one carries a data-state of its own. */
.pv-console:not([data-state="ready"]) .pv-state[data-state="ready"] { display: none; }
.pv-console[data-state="loading"] .pv-state[data-state="loading"],
.pv-console[data-state="empty"] .pv-state[data-state="empty"],
.pv-console[data-state="error"] .pv-state[data-state="error"] { display: block; }

/* Loading is a shaped skeleton: the rows are already the height they will
   be, so the arriving list never shifts what is under the pointer. */
.pv-skeleton li { grid-template-columns: 15px minmax(0, 1fr) auto; }
.pv-skeleton .pv-tick { border-color: var(--rule); }
.pv-bone { height: 7px; border-radius: var(--r-pill); background: var(--rule-soft);
  box-shadow: inset 0 0 0 1px var(--rule-soft); }
.pv-bone-sm { width: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .pv-bone { animation: pv-breathe 1.6s var(--ease-in-out) infinite; }
  .pv-skeleton li:nth-child(2) .pv-bone { animation-delay: 90ms; }
  .pv-skeleton li:nth-child(3) .pv-bone { animation-delay: 180ms; }
  .pv-skeleton li:nth-child(4) .pv-bone { animation-delay: 270ms; }
  .pv-skeleton li:nth-child(5) .pv-bone { animation-delay: 360ms; }
  .pv-skeleton li:nth-child(6) .pv-bone { animation-delay: 450ms; }
}
@keyframes pv-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Empty and error share a shape: a mark, a name for what is missing, one
   sentence of plain cause, and the single action that resolves it. */
.pv-blank { display: grid; justify-items: center; text-align: center; gap: 5px;
  padding: var(--s8) var(--s5) var(--s9); }
.pv-blank-mark { width: 26px; height: 26px; color: var(--graphite); }
.pv-blank-mark svg { width: 100%; height: 100%; }
.pv-blank strong { margin-top: var(--s2); font-size: 13px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink); }
.pv-blank span:not(.pv-blank-mark):not(.pv-blank-act) { color: var(--graphite); max-width: 34ch; line-height: 1.5; }
.pv-blank-act { margin-top: var(--s4); padding: 6px var(--s4); border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.pv-blank-error .pv-blank-mark { color: var(--ink-2); }
.pv-blank-error .pv-blank-act { background: var(--paper-3); color: var(--ink); }

}