@protolabsai/ui 0.6.0 → 0.8.0

package/src/styles.css

@@ -1,1322 +1,12 @@
-/* @protolabsai/ui — component styles, built entirely on @protolabsai/design
- * tokens (the --pl-* custom properties). Import once at your app root:
- *   import "@protolabsai/ui/styles.css";
- * Requires @protolabsai/design/css to be imported too (for the tokens). */
-
-.pl-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 0.9rem;
-  font-family: var(--pl-font-sans);
-  font-size: 13px;
-  font-weight: 400;
-  color: var(--pl-color-fg);
-  background: transparent;
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: var(--pl-radius);
-  cursor: pointer;
-  text-decoration: none;
-  transition:
-    border-color var(--pl-motion-fast) var(--pl-motion-ease),
-    color var(--pl-motion-fast) var(--pl-motion-ease),
-    background var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-btn:hover {
-  border-color: var(--pl-color-fg);
-}
-/* Primary ships as a stronger border, not a lavender fill — brand restraint. */
-.pl-btn--primary {
-  border-color: var(--pl-color-fg);
-}
-.pl-btn--primary:hover {
-  background: var(--pl-color-fg);
-  color: var(--pl-color-bg);
-}
-.pl-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.pl-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.15rem 0.5rem;
-  font-family: var(--pl-font-mono);
-  font-size: 11px;
-  line-height: 1.4;
-  text-transform: lowercase;
-  letter-spacing: 0.02em;
-  color: var(--pl-color-fg-muted);
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-radius: var(--pl-radius);
-}
-.pl-badge--success {
-  color: var(--pl-color-status-success);
-  border-color: color-mix(in oklch, var(--pl-color-status-success) 35%, transparent);
-}
-.pl-badge--warning {
-  color: var(--pl-color-status-warning);
-  border-color: color-mix(in oklch, var(--pl-color-status-warning) 35%, transparent);
-}
-.pl-badge--error {
-  color: var(--pl-color-status-error);
-  border-color: color-mix(in oklch, var(--pl-color-status-error) 35%, transparent);
-}
-.pl-badge--info {
-  color: var(--pl-color-status-info);
-  border-color: color-mix(in oklch, var(--pl-color-status-info) 35%, transparent);
-}
-
-.pl-card {
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-radius: var(--pl-radius);
-  padding: var(--pl-space-4);
-}
-
-.pl-eyebrow {
-  font-family: var(--pl-font-mono);
-  font-size: 11px;
-  font-weight: var(--pl-font-weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--pl-color-fg-muted);
-}
-
-.pl-stat__num {
-  font-family: var(--pl-font-mono);
-  font-size: 1.1rem;
-  color: var(--pl-color-fg);
-}
-.pl-stat__label {
-  margin-top: 0.15rem;
-  font-size: 12px;
-  color: var(--pl-color-fg-muted);
-}
-
-/* ── layout ── */
-.pl-container {
-  max-width: 880px;
-  margin: 0 auto;
-  padding: 0 1.5rem;
-}
-.pl-section {
-  padding: 4rem 0;
-}
-
-/* ── stats grid (wraps Stat) ── */
-.pl-stats {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem 2rem;
-  padding: 1.5rem 0;
-  border-top: var(--pl-border-width) solid var(--pl-color-border);
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-@media (min-width: 640px) {
-  .pl-stats {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-/* ── row (label | body [| status]) ── */
-.pl-row {
-  display: grid;
-  grid-template-columns: 9rem 1fr;
-  gap: 1.25rem;
-  padding: 1rem 0;
-  border-top: var(--pl-border-width) solid var(--pl-color-border);
-  text-decoration: none;
-  color: var(--pl-color-fg);
-  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-row:last-of-type {
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-a.pl-row:hover {
-  opacity: 0.7;
-}
-.pl-row--wide {
-  grid-template-columns: 9rem 1fr auto;
-}
-.pl-row__label {
-  font-family: var(--pl-font-mono);
-  font-size: 12px;
-  color: var(--pl-color-fg-muted);
-}
-.pl-row__name {
-  font-family: var(--pl-font-mono);
-  font-size: 13px;
-  color: var(--pl-color-fg);
-  margin-bottom: 0.25rem;
-}
-.pl-row__desc {
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--pl-color-fg-muted);
-}
-.pl-row__status {
-  font-family: var(--pl-font-mono);
-  font-size: 11px;
-  text-transform: lowercase;
-  color: var(--pl-color-fg-muted);
-}
-@media (max-width: 640px) {
-  .pl-row,
-  .pl-row--wide {
-    grid-template-columns: 1fr;
-    gap: 0.25rem;
-  }
-}
-
-/* ── gradient text (the one gradient — tagline word only) ── */
-.pl-gradient-text {
-  background: var(--pl-gradient-brand);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-
-/* ── hero ── */
-.pl-hero {
-  display: block;
-  padding: 5rem 0 3rem;
-}
-.pl-hero h1 {
-  margin: 0 0 1.25rem;
-  font-size: clamp(2rem, 4vw, 2.75rem);
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -0.025em;
-}
-.pl-hero__cta {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-/* ── lead + section heading/intro ── */
-.pl-lead {
-  margin: 0 0 1.5rem;
-  font-size: 1.05rem;
-  line-height: 1.6;
-  color: var(--pl-color-fg-muted);
-  max-width: 60ch;
-}
-.pl-heading {
-  margin: 0 0 1rem;
-  font-size: 1.4rem;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -0.01em;
-  color: var(--pl-color-fg);
-}
-.pl-section-intro {
-  margin: 0 0 2rem;
-  color: var(--pl-color-fg-muted);
-  max-width: 60ch;
-  line-height: 1.6;
-}
-
-/* ── steps (numbered process) ── */
-.pl-steps {
-  display: grid;
-  gap: 1.5rem;
-}
-.pl-step {
-  display: grid;
-  grid-template-columns: 2rem 1fr;
-  gap: 0.5rem;
-  align-items: baseline;
-}
-.pl-step__num {
-  font-family: var(--pl-font-mono);
-  font-size: 13px;
-  color: var(--pl-color-fg-muted);
-}
-.pl-step__title {
-  font-family: var(--pl-font-mono);
-  font-size: 13px;
-  margin-bottom: 0.4rem;
-  color: var(--pl-color-fg);
-}
-.pl-step__body {
-  color: var(--pl-color-fg-muted);
-  font-size: 14px;
-  line-height: 1.55;
-}
-
-/* ── checks (checklist) ── */
-.pl-checks {
-  display: grid;
-  gap: 0.5rem;
-}
-.pl-check {
-  display: grid;
-  grid-template-columns: 1.2rem 1fr;
-  gap: 0.5rem;
-  align-items: baseline;
-  font-size: 14px;
-  color: var(--pl-color-fg-muted);
-}
-.pl-check__mark {
-  color: var(--pl-color-fg);
-  font-family: var(--pl-font-mono);
-}
-.pl-check strong {
-  color: var(--pl-color-fg);
-  font-weight: 500;
-}
-
-/* ── deliverables (two-col, left-border cards) ── */
-.pl-deliverables {
-  display: grid;
-  gap: 1.5rem;
-}
-@media (min-width: 640px) {
-  .pl-deliverables {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-.pl-deliverable {
-  border-left: var(--pl-border-width) solid var(--pl-color-border-strong);
-  padding-left: 1rem;
-}
-.pl-deliverable__title {
-  font-family: var(--pl-font-mono);
-  font-size: 13px;
-  margin-bottom: 0.4rem;
-  color: var(--pl-color-fg);
-}
-.pl-deliverable__body {
-  color: var(--pl-color-fg-muted);
-  font-size: 14px;
-  line-height: 1.55;
-}
-
-/* ── post list (blog index) ── */
-.pl-post-list {
-  display: grid;
-  gap: 0;
-}
-.pl-post-item {
-  display: block;
-  padding: 1.25rem 0;
-  border-top: var(--pl-border-width) solid var(--pl-color-border);
-  text-decoration: none;
-  color: var(--pl-color-fg);
-  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-post-item:last-of-type {
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-post-item:hover {
-  opacity: 0.7;
-}
-.pl-post-item__meta {
-  font-family: var(--pl-font-mono);
-  font-size: 11px;
-  color: var(--pl-color-fg-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.4rem;
-}
-.pl-post-item__title {
-  font-size: 1.05rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-}
-.pl-post-item__excerpt {
-  color: var(--pl-color-fg-muted);
-  font-size: 14px;
-  line-height: 1.55;
-}
-
-/* ── empty state ── */
-.pl-empty {
-  color: var(--pl-color-fg-muted);
-  font-family: var(--pl-font-mono);
-  font-size: 13px;
-  padding: 1rem 0;
-}
-
-/* ── prose (long-form rich text) ── */
-.pl-prose {
-  font-size: 1rem;
-  line-height: 1.7;
-  color: var(--pl-color-fg);
-}
-.pl-prose h2 {
-  font-size: 1.3rem;
-  margin-top: 2rem;
-  margin-bottom: 0.75rem;
-}
-.pl-prose h3 {
-  font-size: 1.1rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-.pl-prose p {
-  margin: 1rem 0;
-}
-.pl-prose ul,
-.pl-prose ol {
-  margin: 1rem 0;
-  padding-left: 1.25rem;
-}
-.pl-prose li {
-  margin: 0.3rem 0;
-}
-.pl-prose code {
-  background: var(--pl-color-bg-raised);
-  padding: 0.1rem 0.35rem;
-  border-radius: var(--pl-radius);
-  color: var(--pl-color-fg);
-  font-size: 0.88em;
-}
-.pl-prose pre {
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  padding: 1rem;
-  border-radius: var(--pl-radius);
-  overflow-x: auto;
-  margin: 1rem 0;
-}
-.pl-prose pre code {
-  background: transparent;
-  padding: 0;
-}
-.pl-prose blockquote {
-  border-left: 2px solid var(--pl-color-border-strong);
-  padding-left: 1rem;
-  margin: 1.5rem 0;
-  color: var(--pl-color-fg-muted);
-}
-
-/* ── divider ── */
-.pl-divider {
-  border: 0;
-  border-top: var(--pl-border-width) solid var(--pl-color-border);
-  margin: 2rem 0;
-}
-
-/* ── callout (note block) ── */
-.pl-callout {
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-left-width: 2px;
-  border-radius: var(--pl-radius);
-  padding: 0.85rem 1rem;
-}
-.pl-callout__title {
-  font-family: var(--pl-font-mono);
-  font-size: 12px;
-  text-transform: lowercase;
-  letter-spacing: 0.02em;
-  color: var(--pl-color-fg);
-  margin-bottom: 0.35rem;
-}
-.pl-callout__body {
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--pl-color-fg-muted);
-}
-.pl-callout--success {
-  border-left-color: var(--pl-color-status-success);
-}
-.pl-callout--warning {
-  border-left-color: var(--pl-color-status-warning);
-}
-.pl-callout--error {
-  border-left-color: var(--pl-color-status-error);
-}
-.pl-callout--info {
-  border-left-color: var(--pl-color-status-info);
-}
-
-/* ── kbd / inline token ── */
-.pl-kbd {
-  font-family: var(--pl-font-mono);
-  font-size: 0.82em;
-  padding: 0.1rem 0.4rem;
-  color: var(--pl-color-fg);
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-bottom-width: 2px;
-  border-radius: var(--pl-radius);
-}
-
-/* ── standalone link ── */
-.pl-link {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-color: var(--pl-color-border-strong);
-  transition:
-    text-decoration-color var(--pl-motion-fast) var(--pl-motion-ease),
-    color var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-link:hover {
-  text-decoration-color: var(--pl-color-fg);
-}
-
-/* ── Tabs ──────────────────────────────────────────────────────────────────── */
-.pl-tabs {
-  display: flex;
-  gap: 2px;
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--pl-color-fg-muted);
-  font: inherit;
-  font-family: var(--pl-font-sans);
-  padding: 8px 14px;
-  cursor: pointer;
-  border-radius: var(--pl-radius) var(--pl-radius) 0 0;
-}
-.pl-tab__icon {
-  display: inline-flex;
-  align-items: center;
-}
-.pl-tab__icon svg {
-  width: 15px;
-  height: 15px;
-}
-.pl-tab__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 5px;
-  font-family: var(--pl-font-mono);
-  font-size: 10px;
-  line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: var(--pl-color-bg-subtle);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-radius: 999px;
-}
-.pl-tab--active .pl-tab__badge {
-  color: var(--pl-color-fg);
-}
-.pl-tab:hover:not(:disabled) {
-  color: var(--pl-color-fg);
-}
-.pl-tab--active {
-  color: var(--pl-color-fg);
-  border-bottom-color: var(--pl-color-fg);
-}
-.pl-tab:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-.pl-tab__lock {
-  margin-left: 5px;
-  opacity: 0.6;
-}
-
-/* ── Board (kanban) ────────────────────────────────────────────────────────── */
-.pl-board {
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
-  align-items: flex-start;
-}
-.pl-board-col {
-  flex: 1 0 200px;
-  min-width: 200px;
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-radius: var(--pl-radius);
-  display: flex;
-  flex-direction: column;
-}
-.pl-board-col__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-board-col__count {
-  color: var(--pl-color-fg-muted);
-  font-family: var(--pl-font-mono);
-}
-.pl-board-col__body {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 40px;
-}
-.pl-board-card {
-  text-align: left;
-  background: var(--pl-color-bg);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-radius: var(--pl-radius);
-  color: var(--pl-color-fg);
-  padding: 10px 12px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font: inherit;
-}
-.pl-board-card:hover {
-  border-color: var(--pl-color-fg);
-}
-
-/* ── Field ─────────────────────────────────────────────────────────────────── */
-.pl-field {
-  display: block;
-}
-.pl-field__label {
-  display: block;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--pl-color-fg-muted);
-  margin-bottom: 6px;
-}
-.pl-field__input {
-  width: 100%;
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  color: var(--pl-color-fg);
-  border-radius: var(--pl-radius);
-  padding: 9px 11px;
-  font: inherit;
-  font-family: var(--pl-font-sans);
-  resize: vertical;
-}
-.pl-field__input:focus {
-  outline: none;
-  border-color: var(--pl-color-fg);
-}
-
-/* ── PanelHeader (console panel header) ──────────────────────────────────────── */
-.pl-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--pl-space-3);
-  padding: var(--pl-space-3) var(--pl-space-4);
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-panel-header__kicker {
-  font-family: var(--pl-font-mono);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--pl-color-fg-muted);
-  margin-bottom: 2px;
-}
-.pl-panel-header__title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: var(--pl-font-weight-medium);
-  line-height: 1.2;
-  color: var(--pl-color-fg);
-}
-.pl-panel-header__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--pl-space-2);
-  flex-shrink: 0;
-}
-.pl-panel-header--compact {
-  padding: var(--pl-space-2) var(--pl-space-3);
-}
-.pl-panel-header--compact .pl-panel-header__title {
-  font-size: 13px;
-}
-
-/* ── Overlay scrim (Dialog + Drawer) ─────────────────────────────────────────── */
-.pl-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--pl-space-4);
-  background: var(--pl-color-overlay);
-}
-.pl-overlay--drawer {
-  padding: 0;
-}
-
-/* ── Dialog / Modal ──────────────────────────────────────────────────────────── */
-.pl-dialog {
-  display: flex;
-  flex-direction: column;
-  width: 480px;
-  max-width: 100%;
-  max-height: calc(100vh - 2 * var(--pl-space-4));
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: var(--pl-radius);
-  box-shadow: var(--pl-shadow-popover);
-}
-.pl-dialog:focus {
-  outline: none;
-}
-.pl-dialog__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--pl-space-3);
-  padding: var(--pl-space-3) var(--pl-space-4);
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-dialog__title {
-  font-size: 14px;
-  font-weight: var(--pl-font-weight-medium);
-  color: var(--pl-color-fg);
-}
-.pl-dialog__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  font-size: 18px;
-  line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: transparent;
-  border: none;
-  border-radius: var(--pl-radius);
-  cursor: pointer;
-  transition:
-    color var(--pl-motion-fast) var(--pl-motion-ease),
-    background var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-dialog__close:hover {
-  color: var(--pl-color-fg);
-  background: var(--pl-color-bg-hover);
-}
-.pl-dialog__body {
-  padding: var(--pl-space-4);
-  overflow-y: auto;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--pl-color-fg-muted);
-}
-.pl-dialog__foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--pl-space-2);
-  padding: var(--pl-space-3) var(--pl-space-4);
-  border-top: var(--pl-border-width) solid var(--pl-color-border);
-}
-
-/* Destructive confirm — error-toned border, fills error on hover. */
-.pl-btn--danger {
-  border-color: color-mix(in oklch, var(--pl-color-status-error) 60%, transparent);
-  color: var(--pl-color-status-error);
-}
-.pl-btn--danger:hover {
-  background: var(--pl-color-status-error);
-  border-color: var(--pl-color-status-error);
-  color: var(--pl-color-bg);
-}
-/* Ghost — transparent until hover, for toolbars / inline actions. */
-.pl-btn--ghost {
-  border-color: transparent;
-}
-.pl-btn--ghost:hover {
-  border-color: var(--pl-color-border-strong);
-  background: var(--pl-color-bg-hover);
-}
-.pl-btn--sm {
-  padding: 0.3rem 0.6rem;
-  font-size: 12px;
-}
-/* Icon-only — square, centered glyph. */
-.pl-btn--icon {
-  padding: 0;
-  width: 30px;
-  height: 30px;
-  justify-content: center;
-}
-.pl-btn--icon.pl-btn--sm {
-  width: 26px;
-  height: 26px;
-}
-.pl-btn--icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-/* ── Drawer (slide-in sheet) ─────────────────────────────────────────────────── */
-.pl-drawer {
-  display: flex;
-  flex-direction: column;
-  width: 420px;
-  max-width: 100%;
-  height: 100%;
-  background: var(--pl-color-bg-raised);
-  box-shadow: var(--pl-shadow-popover);
-  animation: pl-drawer-in var(--pl-motion-base) var(--pl-motion-ease);
-}
-.pl-drawer:focus {
-  outline: none;
-}
-.pl-drawer--right {
-  margin-left: auto;
-  border-left: var(--pl-border-width) solid var(--pl-color-border-strong);
-}
-.pl-drawer--left {
-  margin-right: auto;
-  border-right: var(--pl-border-width) solid var(--pl-color-border-strong);
-  animation-name: pl-drawer-in-left;
-}
-.pl-overlay--drawer:has(.pl-drawer--left) {
-  justify-content: flex-start;
-}
-@keyframes pl-drawer-in {
-  from {
-    transform: translateX(100%);
-  }
-}
-@keyframes pl-drawer-in-left {
-  from {
-    transform: translateX(-100%);
-  }
-}
-.pl-drawer__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--pl-space-3);
-  padding: var(--pl-space-3) var(--pl-space-4);
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-drawer__title {
-  font-size: 14px;
-  font-weight: var(--pl-font-weight-medium);
-  color: var(--pl-color-fg);
-}
-.pl-drawer__body {
-  flex: 1;
-  padding: var(--pl-space-4);
-  overflow-y: auto;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--pl-color-fg-muted);
-}
-.pl-drawer__foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--pl-space-2);
-  padding: var(--pl-space-3) var(--pl-space-4);
-  border-top: var(--pl-border-width) solid var(--pl-color-border);
-}
-
-/* ── Toast ───────────────────────────────────────────────────────────────────── */
-.pl-toast-stack {
-  position: fixed;
-  bottom: var(--pl-space-4);
-  right: var(--pl-space-4);
-  z-index: 1100;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pl-space-2);
-  max-width: min(360px, calc(100vw - 2 * var(--pl-space-4)));
-}
-.pl-toast {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--pl-space-3);
-  padding: var(--pl-space-3);
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-left-width: 2px;
-  border-radius: var(--pl-radius);
-  box-shadow: var(--pl-shadow-popover);
-  animation: pl-toast-in var(--pl-motion-base) var(--pl-motion-ease);
-}
-@keyframes pl-toast-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-}
-.pl-toast--success {
-  border-left-color: var(--pl-color-status-success);
-}
-.pl-toast--warning {
-  border-left-color: var(--pl-color-status-warning);
-}
-.pl-toast--error {
-  border-left-color: var(--pl-color-status-error);
-}
-.pl-toast--info {
-  border-left-color: var(--pl-color-status-info);
-}
-.pl-toast__body {
-  flex: 1;
-  min-width: 0;
-}
-.pl-toast__title {
-  font-family: var(--pl-font-mono);
-  font-size: 12px;
-  color: var(--pl-color-fg);
-  margin-bottom: 0.2rem;
-}
-.pl-toast__msg {
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--pl-color-fg-muted);
-}
-.pl-toast__close {
-  flex-shrink: 0;
-  font-size: 16px;
-  line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-}
-.pl-toast__close:hover {
-  color: var(--pl-color-fg);
-}
-
-/* ── Tooltip (CSS-only) ──────────────────────────────────────────────────────── */
-.pl-tip-wrap {
-  position: relative;
-  display: inline-flex;
-}
-.pl-tip {
-  position: absolute;
-  z-index: 1200;
-  pointer-events: none;
-  white-space: nowrap;
-  padding: 0.25rem 0.5rem;
-  font-family: var(--pl-font-mono);
-  font-size: 11px;
-  color: var(--pl-color-fg);
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: var(--pl-radius);
-  box-shadow: var(--pl-shadow-popover);
-  opacity: 0;
-  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-tip-wrap:hover .pl-tip,
-.pl-tip-wrap:focus-within .pl-tip {
-  opacity: 1;
-}
-.pl-tip--top {
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-.pl-tip--bottom {
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-.pl-tip--left {
-  right: calc(100% + 6px);
-  top: 50%;
-  transform: translateY(-50%);
-}
-.pl-tip--right {
-  left: calc(100% + 6px);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* ── Table (dense data) ──────────────────────────────────────────────────────── */
-.pl-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-.pl-table th {
-  text-align: left;
-  font-family: var(--pl-font-mono);
-  font-size: 11px;
-  font-weight: var(--pl-font-weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--pl-color-fg-muted);
-  padding: var(--pl-space-2) var(--pl-space-3);
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-table td {
-  padding: var(--pl-space-2) var(--pl-space-3);
-  color: var(--pl-color-fg);
-  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
-}
-.pl-table tbody tr.pl-tr--interactive {
-  cursor: pointer;
-  transition: background var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-table tbody tr.pl-tr--interactive:hover {
-  background: var(--pl-color-bg-hover);
-}
-.pl-table tbody tr.pl-tr--selected {
-  background: var(--pl-color-bg-subtle);
-}
-
-/* ── Status dot ──────────────────────────────────────────────────────────────── */
-.pl-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--pl-color-fg-muted);
-}
-.pl-dot--success {
-  background: var(--pl-color-status-success);
-}
-.pl-dot--warning {
-  background: var(--pl-color-status-warning);
-}
-.pl-dot--error {
-  background: var(--pl-color-status-error);
-}
-.pl-dot--info {
-  background: var(--pl-color-status-info);
-}
-.pl-dot--pulse {
-  animation: pl-dot-pulse var(--pl-motion-status) var(--pl-motion-ease-in-out) infinite;
-}
-@keyframes pl-dot-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.35;
-  }
-}
-.pl-dot-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-.pl-dot-row__label {
-  font-size: 12px;
-  color: var(--pl-color-fg-muted);
-}
-
-/* ── Spinner ─────────────────────────────────────────────────────────────────── */
-.pl-spinner {
-  display: inline-block;
-  border: 2px solid var(--pl-color-border-strong);
-  border-top-color: var(--pl-color-fg);
-  border-radius: 50%;
-  animation: pl-spin var(--pl-motion-loading) var(--pl-motion-linear) infinite;
-}
-@keyframes pl-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ── ScrollArea (thin brand scrollbars) ──────────────────────────────────────── */
-.pl-scroll {
-  overflow: auto;
-  /* min-height:0 lets the region actually scroll inside a flex/grid parent
-     (the classic min-size trap) instead of overflowing it. */
-  min-height: 0;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: var(--pl-color-border-strong) transparent;
-}
-.pl-scroll:focus-visible {
-  outline: 1px solid var(--pl-color-fg);
-  outline-offset: -2px;
-}
-.pl-scroll::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.pl-scroll::-webkit-scrollbar-thumb {
-  background: var(--pl-color-border-strong);
-  border-radius: var(--pl-radius);
-}
-.pl-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* ── Form controls ───────────────────────────────────────────────────────────── */
-.pl-input {
-  width: 100%;
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  color: var(--pl-color-fg);
-  border-radius: var(--pl-radius);
-  padding: 9px 11px;
-  font: inherit;
-  font-family: var(--pl-font-sans);
-  font-size: 13px;
-}
-.pl-input::placeholder {
-  color: var(--pl-color-fg-muted);
-}
-.pl-input:focus {
-  outline: none;
-  border-color: var(--pl-color-border-strong);
-}
-.pl-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.pl-textarea {
-  resize: vertical;
-  min-height: 72px;
-  line-height: 1.5;
-}
-.pl-select {
-  cursor: pointer;
-}
-
-/* Switch */
-.pl-switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-.pl-switch--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.pl-switch__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.pl-switch__track {
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 18px;
-  background: var(--pl-color-bg-subtle);
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: 999px;
-  transition: background var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-switch__thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 12px;
-  height: 12px;
-  background: var(--pl-color-fg-muted);
-  border-radius: 50%;
-  transition:
-    transform var(--pl-motion-fast) var(--pl-motion-ease),
-    background var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-switch__input:checked + .pl-switch__track {
-  background: var(--pl-color-fg);
-  border-color: var(--pl-color-fg);
-}
-.pl-switch__input:checked + .pl-switch__track .pl-switch__thumb {
-  transform: translateX(14px);
-  background: var(--pl-color-bg);
-}
-.pl-switch__input:focus-visible + .pl-switch__track {
-  outline: 2px solid var(--pl-color-border-strong);
-  outline-offset: 2px;
-}
-.pl-switch__label {
-  font-size: 13px;
-  color: var(--pl-color-fg);
-}
-
-/* Checkbox */
-.pl-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-.pl-checkbox--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.pl-checkbox__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.pl-checkbox__box {
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: var(--pl-radius);
-  transition:
-    background var(--pl-motion-fast) var(--pl-motion-ease),
-    border-color var(--pl-motion-fast) var(--pl-motion-ease);
-}
-.pl-checkbox__input:checked + .pl-checkbox__box {
-  background: var(--pl-color-fg);
-  border-color: var(--pl-color-fg);
-}
-.pl-checkbox__input:checked + .pl-checkbox__box::after {
-  content: "";
-  position: absolute;
-  left: 5px;
-  top: 2px;
-  width: 4px;
-  height: 8px;
-  border: solid var(--pl-color-bg);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-.pl-checkbox__input:focus-visible + .pl-checkbox__box {
-  outline: 2px solid var(--pl-color-border-strong);
-  outline-offset: 2px;
-}
-.pl-checkbox__label {
-  font-size: 13px;
-  color: var(--pl-color-fg);
-}
-
-/* ── Menu / DropdownMenu (Radix-backed) ──────────────────────────────────────── */
-.pl-menu__anchor {
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-.pl-menu {
-  min-width: 180px;
-  padding: 4px;
-  background: var(--pl-color-bg-raised);
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: var(--pl-radius);
-  box-shadow: var(--pl-shadow-popover);
-  z-index: 1200;
-}
-.pl-menu__item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  font-size: 13px;
-  color: var(--pl-color-fg);
-  border-radius: calc(var(--pl-radius) - 1px);
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-}
-/* Radix sets data-highlighted on the keyboard/pointer-focused item. */
-.pl-menu__item[data-highlighted] {
-  background: var(--pl-color-bg-hover);
-}
-.pl-menu__item[data-disabled] {
-  color: var(--pl-color-fg-muted);
-  opacity: 0.5;
-  pointer-events: none;
-}
-.pl-menu__item--destructive {
-  color: var(--pl-color-status-error);
-}
-.pl-menu__item--destructive[data-highlighted] {
-  background: color-mix(in oklch, var(--pl-color-status-error) 16%, transparent);
-}
-.pl-menu__icon {
-  display: inline-flex;
-  align-items: center;
-  color: var(--pl-color-fg-muted);
-}
-.pl-menu__icon svg {
-  width: 15px;
-  height: 15px;
-}
-.pl-menu__item--destructive .pl-menu__icon {
-  color: var(--pl-color-status-error);
-}
-.pl-menu__label {
-  flex: 1;
-}
-.pl-menu__subarrow {
-  color: var(--pl-color-fg-muted);
-  font-size: 14px;
-  line-height: 1;
-}
-.pl-menu__sep {
-  height: 1px;
-  margin: 4px 0;
-  background: var(--pl-color-border);
-}
-.pl-menu__group-label {
-  padding: 4px 8px;
-  font-family: var(--pl-font-mono);
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--pl-color-fg-muted);
-}
-
-/* ── Skeleton (loading placeholder) ──────────────────────────────────────────── */
-.pl-skel {
-  display: block;
-  border-radius: var(--pl-radius);
-  background-color: var(--pl-color-bg-subtle);
-  background-image: linear-gradient(
-    90deg,
-    var(--pl-color-bg-subtle) 25%,
-    var(--pl-color-bg-hover) 50%,
-    var(--pl-color-bg-subtle) 75%
-  );
-  background-size: 200% 100%;
-  animation: pl-skel-shimmer 1.4s var(--pl-motion-ease-in-out) infinite;
-}
-@keyframes pl-skel-shimmer {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
-}
-.pl-skel-lines {
-  display: grid;
-  gap: 8px;
-}
-.pl-skel-group {
-  display: grid;
-  gap: var(--pl-space-3);
-}
-
-/* Respect reduced-motion for every animation this package introduces. */
-@media (prefers-reduced-motion: reduce) {
-  .pl-drawer,
-  .pl-toast,
-  .pl-dot--pulse,
-  .pl-spinner {
-    animation: none;
-  }
-  /* Skeletons go static (solid fill, no shimmer). */
-  .pl-skel {
-    animation: none;
-    background-image: none;
-  }
-}
+/* @protolabsai/ui — style barrel. Import once: `import "@protolabsai/ui/styles.css"`.
+ * Requires @protolabsai/design/css for the --pl-* tokens. Partials live in ./styles/. */
+
+@import "./styles/primitives.css";
+@import "./styles/layout.css";
+@import "./styles/marketing.css";
+@import "./styles/navigation.css";
+@import "./styles/forms.css";
+@import "./styles/overlays.css";
+@import "./styles/data.css";
+@import "./styles/menu.css";
+@import "./styles/app-shell.css";