/* design-system.css — styles for the Design System panel (design-system-app.js).
 * Per spec §6 the showcase contains ZERO hardcoded colours; every colour below
 * is a token reference. Layout-only helpers carry no colour.
 *
 * Two class families:
 *   .demo-*  — the style-guide tabs (Components / Patterns / Kanban)
 *   .ds-*    — the live theme editor (Tokens tab)
 */

/* ── Style-guide tabs (Components / Patterns / Kanban) ─────────────────────── */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  padding: 0 var(--space-4) var(--space-2);
}
.demo-row-center { align-items: center; }

.demo-note {
  padding: var(--space-1) var(--space-4) var(--space-2);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.demo-bulk-host { padding: 0 var(--space-4); }
.demo-activity-desc {
  color: var(--text-dim);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.demo-activity-value {
  color: var(--text);
  font-weight: 600;
  margin-left: var(--space-1);
}
.demo-activity-time {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ── Live theme editor (Tokens tab) ───────────────────────────────────────── */

/* Manager control bar — never wraps, scrolls horizontally (CLAUDE.md canon). */
.ds-toolbar {
  overflow-x: auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ds-toolbar .ou-form-group-inline { margin: 0; }
.ds-mode-toggle { display: inline-flex; gap: 2px; flex: 0 0 auto; }

/* Built-in guard banner */
.ds-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--warning-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-sm);
}
.ds-banner .ou-btn { margin-left: auto; }

/* Live WCAG contrast summary strip */
.ds-contrast-summary {
  display: block;
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--danger-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-sm);
}
.ds-contrast-summary.ds-contrast-ok {
  background: var(--success-tint);
  color: var(--text-dim);
}
.ds-contrast-summary strong { color: var(--danger); }
.ds-warn-glyph { margin-right: 6px; }
.ds-contrast-list { margin-top: var(--space-1); display: flex; flex-direction: column; gap: 2px; }
.ds-contrast-item {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  word-break: break-word;
}

/* Editable token rows */
.ds-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
}
.ds-token-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}
.ds-row-locked { opacity: 0.75; }
.ds-row-locked .ds-value-input,
.ds-row-locked .ds-color-picker { cursor: not-allowed; }

.ds-token-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  /* checkerboard backing so alpha tokens (tints/overlays) read against it */
  background-image:
    linear-gradient(45deg, var(--text-faint) 25%, transparent 25%),
    linear-gradient(-45deg, var(--text-faint) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--text-faint) 75%),
    linear-gradient(-45deg, transparent 75%, var(--text-faint) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
.ds-token-swatch-fill { position: absolute; inset: 0; }

.ds-token-namecol { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ds-token-name {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  white-space: nowrap;
}
.ds-scale-row .ds-token-name { flex: 1 1 auto; }
.ds-alpha-badge {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  line-height: 1.4;
}

.ds-token-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.ds-color-picker {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.ds-value-input {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  min-width: 0;
  flex: 1 1 80px;
  max-width: 170px;
}
.ds-reset-btn { flex: 0 0 auto; }
.ds-token-warn {
  color: var(--danger);
  display: none;
  flex: 0 0 auto;
  font-size: var(--fs-md);
}
.ds-token-warn.show { display: inline; }