/* ==========================================================================
   Smash Balloon — Component State Library
   Extends tokens.css + shared.css (link both BEFORE this file).
   Everything here is library chrome + state variants; the components
   themselves reuse the converged prototype's classes (.card, .row, .btn…).
   Browsing model: component first, spec text collapsed, sticky scrollspy nav.
   ========================================================================== */

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

/* ---------- Library chrome: slim header ---------- */

.lib-topbar {
  position: sticky;
  top: 0;
  z-index: var(--sb-z-30);
  background: var(--sb-color-bg-surface);
  border-bottom: 1px solid var(--sb-color-border-subtle);
  box-shadow: var(--sb-shadow-sm);
}
.lib-topbar-in {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sb-space-3) var(--sb-space-6);
}
.lib-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-1-5);
  font-size: var(--sb-font-size-xs);
  font-weight: var(--sb-font-weight-medium);
  color: var(--sb-color-fg-subtle);
  text-decoration: none;
  padding: var(--sb-space-1-5) var(--sb-space-2);
  margin-left: calc(-1 * var(--sb-space-2));
  border-radius: var(--sb-radius-md);
  white-space: nowrap;
  transition: background var(--sb-duration-150) var(--sb-ease-out), color var(--sb-duration-150) var(--sb-ease-out);
}
.lib-back:hover { background: var(--sb-color-gray-100); color: var(--sb-color-fg-default); }
.lib-back svg { width: 13px; height: 13px; }

.lib-topbar .lib-crumbs {
  display: flex;
  align-items: center;
  gap: var(--sb-space-2);
  min-width: 0;
  font-size: var(--sb-font-size-sm);
}
.lib-crumbs .lib-name { font-weight: var(--sb-font-weight-bold); letter-spacing: -0.01em; white-space: nowrap; }
.lib-crumbs .crumb-sep { color: var(--sb-color-border-default); }
.lib-crumbs .crumb { color: var(--sb-color-fg-subtle); font-weight: var(--sb-font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-topbar .spacer { flex: 1; }
.lib-topbar .lib-tag {
  flex: none;
  font-size: 10px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-color-wp-blue-700);
  background: var(--sb-color-wp-blue-50);
  border: 1px solid var(--sb-color-wp-blue-200);
  border-radius: var(--sb-radius-full);
  padding: 2px var(--sb-space-2-5);
}

/* ---------- Layout: sticky nav rail + content column ---------- */

.lib-layout {
  display: grid;
  grid-template-columns: 192px minmax(0, 1fr);
  gap: var(--sb-space-10);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sb-space-6);
}

.lib-main {
  min-width: 0;
  max-width: 880px;
  padding: var(--sb-space-8) 0 var(--sb-space-20);
}

/* Standalone (index) variant — no rail */
.lib-main.is-solo { max-width: 1060px; margin: 0 auto; padding: var(--sb-space-10) var(--sb-space-6) var(--sb-space-20); }

.page-nav {
  position: sticky;
  top: 57px;
  align-self: start;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: var(--sb-space-8) 0 var(--sb-space-6);
  font-size: var(--sb-font-size-2xs);
}
.page-nav .nav-title,
.page-nav .nav-group {
  margin: 0 0 var(--sb-space-1-5);
  padding: 0 var(--sb-space-2-5);
  font-size: 9.5px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-color-gray-400);
}
.page-nav .nav-group { margin-top: var(--sb-space-4); }
.page-nav a {
  display: flex;
  align-items: center;
  gap: var(--sb-space-2);
  padding: var(--sb-space-1) var(--sb-space-2-5);
  border-radius: var(--sb-radius-md);
  color: var(--sb-color-fg-subtle);
  font-weight: var(--sb-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--sb-duration-100) var(--sb-ease-out), color var(--sb-duration-100) var(--sb-ease-out);
}
.page-nav a i { width: 7px; height: 7px; flex: none; border-radius: var(--sb-radius-full); background: var(--sb-color-gray-300); }
.page-nav a.tone-info i { background: var(--sb-color-wp-blue-400); }
.page-nav a.tone-progress i { background: var(--sb-color-wp-light-blue-400); }
.page-nav a.tone-success i { background: var(--sb-color-emerald-500); }
.page-nav a.tone-warning i { background: var(--sb-color-yellow-500); }
.page-nav a.tone-error i { background: var(--sb-color-red-400); }
.page-nav a.tone-pro i { background: var(--sb-color-peach-500); }
.page-nav a.tone-legacy i { background: var(--sb-color-yellow-500); outline: 1px dashed var(--sb-color-yellow-600); outline-offset: 1px; }
.page-nav a:hover { background: var(--sb-color-gray-100); color: var(--sb-color-fg-default); }
.page-nav a.is-active { background: var(--sb-color-wp-blue-50); color: var(--sb-color-wp-blue-700); font-weight: var(--sb-font-weight-semibold); }
.page-nav .num { font-family: var(--sb-font-mono); font-size: 0.9em; opacity: 0.6; }

@media (max-width: 1023px) {
  .lib-layout { display: block; }
  .page-nav { display: none; }
}

/* ---------- Intro ---------- */

.lib-intro { max-width: 62em; margin-bottom: var(--sb-space-2); }
.lib-intro .kicker {
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-color-peach-600);
  margin: 0 0 var(--sb-space-2);
}
.lib-intro h1 {
  margin: 0 0 var(--sb-space-2);
  font-size: var(--sb-font-size-3xl);
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: -0.025em;
  line-height: var(--sb-line-height-tight);
}
.lib-intro .sub { margin: 0; color: var(--sb-color-fg-subtle); font-size: var(--sb-font-size-sm); max-width: 56em; }
.lib-intro .sub code,
.spec-body code, .lib-section-note code {
  font-family: var(--sb-font-mono);
  font-size: 0.9em;
  background: var(--sb-color-gray-100);
  border-radius: var(--sb-radius-base);
  padding: 1px var(--sb-space-1);
}

/* ---------- Overview: all states at a glance ---------- */

.overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--sb-space-2);
  margin: var(--sb-space-6) 0 var(--sb-space-4);
}
.ov-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sb-space-2-5);
  margin: var(--sb-space-2) 0 0;
  font-size: 9.5px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-color-gray-400);
}
.ov-group::after { content: ""; flex: 1; border-top: 1px dashed var(--sb-color-border-subtle); }
.ov-item {
  display: flex;
  align-items: center;
  gap: var(--sb-space-2);
  background: var(--sb-color-bg-surface);
  border: 1px solid var(--sb-color-border-subtle);
  border-radius: var(--sb-radius-lg);
  padding: var(--sb-space-2) var(--sb-space-2-5);
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-semibold);
  color: var(--sb-color-fg-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: transform var(--sb-duration-100) var(--sb-ease-out), box-shadow var(--sb-duration-100) var(--sb-ease-out), border-color var(--sb-duration-100) var(--sb-ease-out);
}
.ov-item:hover { transform: translateY(-1px); box-shadow: var(--sb-shadow-sm); border-color: var(--sb-color-border-default); color: var(--sb-color-fg-default); }
.ov-item i { width: 8px; height: 8px; flex: none; border-radius: var(--sb-radius-full); background: var(--sb-color-gray-300); }
.ov-item.tone-info i { background: var(--sb-color-wp-blue-400); }
.ov-item.tone-progress i { background: var(--sb-color-wp-light-blue-400); }
.ov-item.tone-success i { background: var(--sb-color-emerald-500); }
.ov-item.tone-warning i { background: var(--sb-color-yellow-500); }
.ov-item.tone-error i { background: var(--sb-color-red-400); }
.ov-item.tone-pro i { background: var(--sb-color-peach-500); }
.ov-item.tone-legacy i { background: var(--sb-color-yellow-500); outline: 1px dashed var(--sb-color-yellow-600); outline-offset: 1px; }
.ov-item .n { font-family: var(--sb-font-mono); font-weight: var(--sb-font-weight-medium); font-size: 0.9em; color: var(--sb-color-gray-400); }
.ov-item .t { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Section markers ---------- */

.lib-marker {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
  margin: var(--sb-space-12) 0 var(--sb-space-2);
  color: var(--sb-color-fg-subtle);
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lib-marker .dot { width: 7px; height: 7px; flex: none; border-radius: var(--sb-radius-full); background: var(--accent); }
.lib-marker.warn .dot { background: var(--sb-color-yellow-500); }
.lib-marker::after { content: ""; flex: 1; border-top: 1px dashed var(--sb-color-border-default); }

.lib-section-note {
  margin: 0 0 var(--sb-space-5);
  font-size: var(--sb-font-size-2xs);
  color: var(--sb-color-fg-subtle);
  max-width: 58em;
}

/* ---------- Spec block: chip bar → component → collapsed spec ---------- */

.spec { margin: 0 0 var(--sb-space-8); }

.spec-bar {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
  margin-bottom: var(--sb-space-2-5);
  min-width: 0;
}
.spec-bar .gist {
  font-size: var(--sb-font-size-2xs);
  color: var(--sb-color-fg-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.spec-stage > .card { margin-bottom: 0; }

/* Progressive disclosure — spec text collapsed by default */
.spec-info { margin-top: var(--sb-space-1-5); }
.spec-info > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-1-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-semibold);
  color: var(--sb-color-fg-subtle);
  padding: var(--sb-space-1) var(--sb-space-2);
  margin-left: calc(-1 * var(--sb-space-2));
  border-radius: var(--sb-radius-md);
  user-select: none;
  transition: background var(--sb-duration-100) var(--sb-ease-out), color var(--sb-duration-100) var(--sb-ease-out);
}
.spec-info > summary::-webkit-details-marker { display: none; }
.spec-info > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  opacity: 0.6;
  transition: transform var(--sb-duration-150) var(--sb-ease-out);
}
.spec-info[open] > summary::before { transform: rotate(90deg); }
.spec-info > summary:hover { background: var(--sb-color-gray-100); color: var(--sb-color-fg-default); }
.spec-body {
  display: grid;
  gap: var(--sb-space-2);
  padding: var(--sb-space-2) 0 0 var(--sb-space-3);
  border-left: 2px solid var(--sb-color-border-subtle);
  margin: var(--sb-space-1) 0 0 var(--sb-space-1);
}

.spec-note {
  margin: 0;
  font-size: var(--sb-font-size-2xs);
  color: var(--sb-color-fg-subtle);
  max-width: 56em;
  line-height: var(--sb-line-height-relaxed);
}
.spec-note b { color: var(--sb-color-fg-muted); font-weight: var(--sb-font-weight-semibold); }

.plugin-note {
  display: block;
  margin: 0;
  font-size: var(--sb-font-size-2xs);
  line-height: var(--sb-line-height-relaxed);
  color: var(--sb-color-fg-subtle);
  max-width: 56em;
}
.plugin-note::before {
  content: "Grounding";
  display: inline-block;
  margin-right: var(--sb-space-2);
  font-size: 9.5px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sb-color-fg-subtle);
  background: var(--sb-color-gray-100);
  border: 1px solid var(--sb-color-border-subtle);
  border-radius: var(--sb-radius-base);
  padding: 1px var(--sb-space-1-5);
  position: relative;
  top: -1px;
}
.plugin-note code {
  font-family: var(--sb-font-mono);
  font-size: 0.92em;
  background: var(--sb-color-gray-100);
  border-radius: var(--sb-radius-base);
  padding: 0 var(--sb-space-1);
}

/* Inference flag — states not grounded in plugin source */
.inference-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-1);
  font-size: 9.5px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sb-color-cyan-800);
  background: var(--sb-color-cyan-50);
  border: 1px dashed var(--sb-color-cyan-300);
  border-radius: var(--sb-radius-base);
  padding: 1px var(--sb-space-1-5);
}

/* ---------- State chips ---------- */

.state-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-1-5);
  flex: none;
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.01em;
  border-radius: var(--sb-radius-full);
  border: 1px solid;
  padding: var(--sb-space-1) var(--sb-space-2-5);
  white-space: nowrap;
}
.state-chip .num {
  font-family: var(--sb-font-mono);
  font-weight: var(--sb-font-weight-medium);
  font-size: 0.92em;
  opacity: 0.6;
}
.state-chip::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: var(--sb-radius-full); background: currentColor; opacity: 0.75; }

.state-chip.tone-neutral { color: var(--sb-color-fg-muted); background: var(--sb-color-gray-100); border-color: var(--sb-color-border-default); }
.state-chip.tone-info { color: var(--sb-color-wp-blue-700); background: var(--sb-color-wp-blue-50); border-color: var(--sb-color-wp-blue-200); }
.state-chip.tone-progress { color: var(--sb-color-wp-light-blue-700); background: var(--sb-color-wp-light-blue-50); border-color: var(--sb-color-wp-light-blue-200); }
.state-chip.tone-success { color: var(--sb-color-feedback-success-fg); background: var(--sb-color-feedback-success-bg); border-color: var(--sb-color-emerald-200); }
.state-chip.tone-warning { color: var(--sb-color-feedback-warning-fg); background: var(--sb-color-feedback-warning-bg); border-color: var(--sb-color-yellow-200); }
.state-chip.tone-error { color: var(--sb-color-feedback-error-fg); background: var(--sb-color-feedback-error-bg); border-color: var(--sb-color-red-200); }
.state-chip.tone-pro { color: var(--sb-color-peach-800); background: var(--sb-color-peach-50); border-color: var(--sb-color-peach-200); }
.state-chip.tone-legacy { color: var(--sb-color-feedback-warning-fg); background: var(--sb-color-feedback-warning-bg); border-color: var(--sb-color-yellow-400); border-style: dashed; }

/* ---------- Status pills (sit inside components, match .pill-active) ---------- */

.pill-warn, .pill-error, .pill-muted, .pill-progress, .pill-legacy {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-1-5);
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-semibold);
  border-radius: var(--sb-radius-full);
  border: 1px solid;
  padding: var(--sb-space-1) var(--sb-space-2-5);
  white-space: nowrap;
}
.pill-warn { color: var(--sb-color-feedback-warning-fg); background: var(--sb-color-feedback-warning-bg); border-color: var(--sb-color-yellow-200); }
.pill-error { color: var(--sb-color-feedback-error-fg); background: var(--sb-color-feedback-error-bg); border-color: var(--sb-color-red-200); }
.pill-muted { color: var(--sb-color-fg-subtle); background: var(--sb-color-gray-100); border-color: var(--sb-color-border-subtle); }
.pill-progress { color: var(--sb-color-wp-light-blue-700); background: var(--sb-color-wp-light-blue-50); border-color: var(--sb-color-wp-light-blue-200); }
.pill-legacy { color: var(--sb-color-feedback-warning-fg); background: var(--sb-color-feedback-warning-bg); border-color: var(--sb-color-yellow-400); border-style: dashed; }

.pill-warn::before, .pill-error::before, .pill-muted::before, .pill-progress::before, .pill-legacy::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--sb-radius-full);
}
.pill-warn::before, .pill-legacy::before { background: var(--sb-color-yellow-500); }
.pill-error::before { background: var(--sb-color-red-500); }
.pill-muted::before { background: var(--sb-color-gray-400); }
.pill-progress::before { background: var(--sb-color-wp-light-blue-500); animation: lib-pulse 1.2s var(--sb-ease-in-out) infinite; }

@keyframes lib-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Spinner (in-flight button / row states) ---------- */

.spinner {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: var(--sb-radius-full);
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  animation: lib-spin 0.7s linear infinite;
}
.spinner.on-light {
  border-color: var(--sb-color-gray-300);
  border-top-color: var(--sb-color-gray-600);
}
@keyframes lib-spin { to { transform: rotate(360deg); } }

.btn.is-busy { pointer-events: none; opacity: 0.9; }
.btn[disabled] { pointer-events: none; opacity: var(--sb-opacity-disabled); cursor: default; }
.input.is-disabled { background: var(--sb-color-gray-50); color: var(--sb-color-fg-subtle); pointer-events: none; }

/* ---------- Input error state ---------- */

.input.is-error {
  border-color: var(--sb-color-red-400);
  background: var(--sb-color-red-50);
}
.input.is-error:focus { border-color: var(--sb-color-red-500); box-shadow: 0 0 0 3px var(--sb-color-red-100); }

.field-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--sb-space-1-5);
  margin: var(--sb-space-2) 0 0;
  font-size: var(--sb-font-size-2xs);
  max-width: 52em;
}
.field-msg svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.field-msg.is-error { color: var(--sb-color-feedback-error-fg-muted); }
.field-msg.is-warning { color: var(--sb-color-feedback-warning-fg-muted); }
.field-msg.is-success { color: var(--sb-color-feedback-success-fg-muted); }
.field-msg a { color: inherit; font-weight: var(--sb-font-weight-medium); }

/* ---------- Inline alerts (feedback tokens, used inside row-control) ---------- */

.inline-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sb-space-2-5);
  font-size: var(--sb-font-size-2xs);
  line-height: var(--sb-line-height-normal);
  border: 1px solid;
  border-radius: var(--sb-radius-md);
  padding: var(--sb-space-3) var(--sb-space-3-5);
  margin-top: var(--sb-space-3);
  max-width: 560px;
}
.inline-alert svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.inline-alert p { margin: 0; }
.inline-alert p + p { margin-top: var(--sb-space-1-5); }
.inline-alert b { font-weight: var(--sb-font-weight-semibold); }
.inline-alert .alert-actions { display: flex; gap: var(--sb-space-2); flex-wrap: wrap; margin-top: var(--sb-space-2-5); }
.inline-alert a { color: inherit; font-weight: var(--sb-font-weight-medium); }

.inline-alert.is-success { color: var(--sb-color-feedback-success-fg); background: var(--sb-color-feedback-success-bg); border-color: var(--sb-color-emerald-200); }
.inline-alert.is-warning { color: var(--sb-color-feedback-warning-fg); background: var(--sb-color-feedback-warning-bg); border-color: var(--sb-color-yellow-200); }
.inline-alert.is-error { color: var(--sb-color-feedback-error-fg); background: var(--sb-color-feedback-error-bg); border-color: var(--sb-color-red-200); }
.inline-alert.is-info { color: var(--sb-color-wp-blue-800); background: var(--sb-color-wp-blue-50); border-color: var(--sb-color-wp-blue-200); }
.inline-alert.is-pro { color: var(--sb-color-peach-800); background: var(--sb-color-peach-50); border-color: var(--sb-color-peach-200); }
.inline-alert.is-legacy { color: var(--sb-color-feedback-warning-fg); background: var(--sb-color-feedback-warning-bg); border-color: var(--sb-color-yellow-400); border-style: dashed; }

/* Small ghost buttons that inherit alert tone */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-1-5);
  font-family: inherit;
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-semibold);
  line-height: 1;
  color: inherit;
  background: rgb(255 255 255 / 0.6);
  border: 1px solid currentColor;
  border-radius: var(--sb-radius-md);
  padding: var(--sb-space-1-5) var(--sb-space-2-5);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-ghost:hover { background: rgb(255 255 255 / 0.9); }

/* ---------- Countdown chip (7-day data-deletion window etc.) ---------- */

.countdown-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-1-5);
  font-size: var(--sb-font-size-2xs);
  font-weight: var(--sb-font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--sb-color-feedback-error-fg);
  background: var(--sb-color-bg-surface);
  border: 1px solid var(--sb-color-red-200);
  border-radius: var(--sb-radius-full);
  padding: var(--sb-space-1) var(--sb-space-2-5);
  white-space: nowrap;
}
.countdown-chip svg { width: 12px; height: 12px; }
.countdown-chip.is-warning { color: var(--sb-color-feedback-warning-fg); border-color: var(--sb-color-yellow-300); }

/* ---------- Source rows: state variants on top of .source-chip ---------- */

.source-chip.is-warn { background: var(--sb-color-yellow-50); border-color: var(--sb-color-yellow-200); }
.source-chip.is-error { background: var(--sb-color-red-50); border-color: var(--sb-color-red-200); }
.source-chip.is-legacy { background: var(--sb-color-yellow-50); border: 1px dashed var(--sb-color-yellow-400); }
.source-chip.is-muted { opacity: 0.75; }
.source-chip.is-busy { background: var(--sb-color-wp-light-blue-50); border-color: var(--sb-color-wp-light-blue-200); }

.source-chip .who .sub-warn { color: var(--sb-color-feedback-warning-fg-muted); }
.source-chip .who .sub-error { color: var(--sb-color-feedback-error-fg-muted); }
.source-chip .who .sub-busy { color: var(--sb-color-wp-light-blue-700); }

.source-chip .avatar.is-plain { background: var(--sb-color-gray-200); color: var(--sb-color-fg-muted); }
.source-chip .avatar svg { width: 18px; height: 18px; }
.source-chip .actions { display: flex; align-items: center; gap: var(--sb-space-2); flex: none; flex-wrap: wrap; justify-content: flex-end; }

/* Source type tag (Personal / Business / Page / Group / Place ID…) */
.src-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sb-color-fg-subtle);
  background: var(--sb-color-bg-surface);
  border: 1px solid var(--sb-color-border-default);
  border-radius: var(--sb-radius-base);
  padding: 1px var(--sb-space-1-5);
  margin-left: var(--sb-space-1-5);
  vertical-align: 1px;
}
.src-tag.is-warn { color: var(--sb-color-feedback-warning-fg); border-color: var(--sb-color-yellow-300); background: var(--sb-color-yellow-50); }
.src-tag.is-error { color: var(--sb-color-feedback-error-fg); border-color: var(--sb-color-red-200); background: var(--sb-color-red-50); }

/* Stack of source rows inside one card row */
.source-stack { display: grid; gap: var(--sb-space-2-5); }
.source-stack .source-chip { max-width: 560px; }

/* ---------- Save bar ---------- */

.save-bar {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
  max-width: 620px;
  background: var(--sb-color-bg-surface);
  border: 1px solid var(--sb-color-border-subtle);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-lg);
  padding: var(--sb-space-3) var(--sb-space-3) var(--sb-space-3) var(--sb-space-4);
}
.save-bar .msg { flex: 1; min-width: 0; font-size: var(--sb-font-size-xs); display: flex; align-items: center; gap: var(--sb-space-2); }
.save-bar .msg svg { width: 14px; height: 14px; flex: none; }
.save-bar .msg .sub { color: var(--sb-color-fg-subtle); font-size: var(--sb-font-size-2xs); }
.save-bar.is-dirty { border-color: var(--sb-color-yellow-300); }
.save-bar.is-dirty .msg { color: var(--sb-color-feedback-warning-fg); font-weight: var(--sb-font-weight-medium); }
.save-bar.is-saved { border-color: var(--sb-color-emerald-200); }
.save-bar.is-saved .msg { color: var(--sb-color-feedback-success-fg); font-weight: var(--sb-font-weight-medium); }
.save-bar.is-error { border-color: var(--sb-color-red-200); }
.save-bar.is-error .msg { color: var(--sb-color-feedback-error-fg); font-weight: var(--sb-font-weight-medium); }

/* ---------- Landing page cards ---------- */

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sb-space-4);
  margin-top: var(--sb-space-8);
}
.lib-card {
  display: block;
  background: var(--sb-color-bg-surface);
  border: 1px solid var(--sb-color-border-subtle);
  border-radius: var(--sb-radius-xl);
  box-shadow: var(--sb-shadow-sm);
  padding: var(--sb-space-5);
  color: inherit;
  transition: box-shadow var(--sb-duration-150) var(--sb-ease-out), border-color var(--sb-duration-150) var(--sb-ease-out);
}
.lib-card:hover { box-shadow: var(--sb-shadow-md); border-color: var(--sb-color-border-default); }
.lib-card .card-head { display: flex; align-items: center; gap: var(--sb-space-3); margin-bottom: var(--sb-space-3); }
.lib-card .card-ico {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--sb-radius-lg);
  background: var(--sb-color-wp-blue-500);
  color: #fff;
  box-shadow: var(--sb-shadow-sm);
}
.lib-card .card-ico svg { width: 20px; height: 20px; }
.lib-card .card-ico.is-pro { background: var(--sb-color-peach-500); }
.lib-card .card-ico.is-neutral { background: var(--sb-color-gray-700); }
.lib-card h2 { margin: 0; font-size: var(--sb-font-size-base); letter-spacing: -0.01em; flex: 1; }
.lib-card h2 a { color: inherit; text-decoration: none; }
.lib-card h2 a:hover { color: var(--sb-color-wp-blue-600); }
.lib-card .count {
  flex: none;
  font-size: 10px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--sb-color-fg-subtle);
  background: var(--sb-color-gray-100);
  border: 1px solid var(--sb-color-border-subtle);
  border-radius: var(--sb-radius-full);
  padding: 2px var(--sb-space-2);
}
.lib-card p { margin: 0 0 var(--sb-space-3); font-size: var(--sb-font-size-2xs); color: var(--sb-color-fg-subtle); }
.lib-card .chip-strip { display: flex; flex-wrap: wrap; gap: var(--sb-space-1); }
.lib-card .chip-strip a {
  font-size: 10px;
  font-weight: var(--sb-font-weight-medium);
  border-radius: var(--sb-radius-full);
  padding: 2px var(--sb-space-2);
  background: var(--sb-color-gray-100);
  color: var(--sb-color-fg-subtle);
  text-decoration: none;
  transition: background var(--sb-duration-100) var(--sb-ease-out), color var(--sb-duration-100) var(--sb-ease-out);
}
.lib-card .chip-strip a:hover { background: var(--sb-color-wp-blue-50); color: var(--sb-color-wp-blue-700); }
.lib-card .chip-strip a.ok { background: var(--sb-color-feedback-success-bg); color: var(--sb-color-feedback-success-fg); }
.lib-card .chip-strip a.warn { background: var(--sb-color-feedback-warning-bg); color: var(--sb-color-feedback-warning-fg); }
.lib-card .chip-strip a.err { background: var(--sb-color-feedback-error-bg); color: var(--sb-color-feedback-error-fg); }
.lib-card .chip-strip a.ok:hover, .lib-card .chip-strip a.warn:hover, .lib-card .chip-strip a.err:hover { filter: brightness(0.96); }
.lib-card .chip-strip .strip-label {
  flex-basis: 100%;
  font-size: 9.5px;
  font-weight: var(--sb-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-color-gray-400);
  margin-top: var(--sb-space-1-5);
}

/* ---------- Per-plugin family tabs (sources page) ---------- */

.sb-tabs.family-tabs { margin-bottom: var(--sb-space-4); }
.family-tabs .sb-tab { padding: var(--sb-space-2) var(--sb-space-3); font-size: var(--sb-font-size-xs); }

/* ---------- Footer ---------- */

.lib-foot {
  text-align: center;
  color: var(--sb-color-fg-subtle);
  font-size: var(--sb-font-size-2xs);
  padding: var(--sb-space-8) var(--sb-space-6) var(--sb-space-12);
}
.lib-foot a { color: inherit; }

@media (max-width: 640px) {
  .lib-layout { padding-left: var(--sb-space-4); padding-right: var(--sb-space-4); }
  .spec-bar { flex-wrap: wrap; gap: var(--sb-space-2); }
  .spec-bar .gist { white-space: normal; }
}