/* Shared design system for every studio page (Stitch "Broadcast Cinema Reference", see
   core/knowledge/features/review-workspace-design-system.md). Depth comes from tone and hairlines, not shadow. */
:root {
  color-scheme: dark;
  --bg: #0d1117;          /* level 0: the monitor surround */
  --panel: #13171f;       /* level 1: docked panels */
  --panel-2: #1a202c;     /* level 2: headers, wells, buttons */
  --control: #222938;     /* level 3: active controls */
  --line: #2e3646;        /* hairline divider */
  --line-strong: #3b4455;
  --text: #f0ede6;        /* high emphasis: warm off-white */
  --dim: #c5c2ba;         /* medium emphasis: labels, metadata */
  --faint: #8a8f98;       /* low emphasis: inactive, hints */
  --accent: #f59e0b;      /* selection, focus and the primary action only */
  --accent-hover: #d97706;
  --ok: #10b981;
  --flag: #f97316;
  --changed: #59a7ff;
  --critic: #b08cff;
  --radius: 3px;          /* near-sharp: an instrument, not a card */
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  /* names the older home page uses, mapped onto the tokens above */
  --border: var(--line);
  --text-dim: var(--faint);
  --accent-2: var(--accent);
  --done: var(--ok);
  --done-bg: rgba(16, 185, 129, 0.10);
  --pending-bg: rgba(255, 255, 255, 0.03);
  --error: var(--flag);
}

/* status pill: state is a word and a colour, never colour alone */
.pill { display: inline-flex; align-items: center; gap: .35rem; font: 500 15px/1 var(--mono); letter-spacing: .02em;
  padding: .28rem .5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--dim); background: transparent; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.pill.done { color: var(--ok); border-color: rgba(16, 185, 129, .45); }
.pill.done::before { background: var(--ok); }
.pill.needs_you { color: var(--accent); border-color: rgba(245, 158, 11, .55); }
.pill.needs_you::before { background: var(--accent); }
.pill.running { color: var(--changed); border-color: rgba(89, 167, 255, .45); }
.pill.running::before { background: var(--changed); animation: pulse 1.1s ease-in-out infinite; }
.pill.blocked, .pill.unavailable, .pill.idle { color: var(--faint); }
.pill.blocked::before { background: var(--flag); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* toasts replace alert(): visible, non-blocking, dismissable */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--panel-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--changed); border-radius: var(--radius);
  padding: .65rem .8rem; font-size: 17.5px; color: var(--text); display: flex; gap: .7rem; align-items: flex-start; }
.toast.error { border-left-color: var(--flag); }
.toast.ok { border-left-color: var(--ok); }
.toast button { margin-left: auto; background: transparent; border: 0; color: var(--faint); cursor: pointer; font-size: 18.5px; line-height: 1; padding: 0; }