/* =====================================================
   CAPSaaS Components · CSS
   v1.0 · May 2026
   Requires tokens.css
   ===================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--capsaas-font-sans);
  font-size: var(--capsaas-text-base);
  line-height: var(--capsaas-leading-base);
  color: var(--capsaas-ink);
  background: var(--capsaas-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--capsaas-space-10) var(--capsaas-space-8);
}

section { margin-bottom: var(--capsaas-space-12); }

h2 {
  font-size: var(--capsaas-text-xl);
  font-weight: var(--capsaas-weight-medium);
  letter-spacing: var(--capsaas-tracking-base);
  margin-bottom: var(--capsaas-space-5);
}

.example-row {
  display: flex;
  gap: var(--capsaas-space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--capsaas-space-4);
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--capsaas-space-4);
}

/* =====================================================
   LOGO
   ===================================================== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--capsaas-space-3);
}
.logo-mark {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 36px;
  height: 36px;
}
.logo-mark span {
  border-radius: 50%;
  display: block;
}
.logo-mark span:nth-child(1) { background: var(--capsaas-forest); }
.logo-mark span:nth-child(2) { background: var(--capsaas-saffron); }
.logo-mark span:nth-child(3) { background: var(--capsaas-ember); }
.logo-mark span:nth-child(4) { background: var(--capsaas-coral); }
.logo-wordmark {
  font-size: 22px;
  font-weight: var(--capsaas-weight-semibold);
  letter-spacing: var(--capsaas-tracking-snug);
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  font-family: inherit;
  font-size: var(--capsaas-text-base);
  font-weight: var(--capsaas-weight-medium);
  padding: 10px 18px;
  border-radius: var(--capsaas-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--capsaas-duration-fast) var(--capsaas-ease-out);
  display: inline-flex;
  align-items: center;
  gap: var(--capsaas-space-2);
  letter-spacing: -0.005em;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--capsaas-glow-ember);
}

.btn-primary {
  background: var(--capsaas-ember);
  color: var(--capsaas-snow);
}
.btn-primary:hover {
  background: var(--capsaas-primary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--capsaas-ink);
  color: var(--capsaas-paper);
}
.btn-secondary:hover { background: #2A2722; }

.btn-ghost {
  background: transparent;
  color: var(--capsaas-ink);
  border: 1px solid var(--capsaas-rule);
}
.btn-ghost:hover {
  border-color: var(--capsaas-ink);
  background: var(--capsaas-saffron-wash);
}

.btn-danger {
  background: var(--capsaas-coral);
  color: white;
}
.btn-danger:hover { background: #C41E4D; }

.btn-link {
  background: transparent;
  color: var(--capsaas-ember);
  padding: 10px 4px;
}
.btn-link:hover { color: var(--capsaas-primary-hover); }

.btn-sm { padding: 7px 14px; font-size: var(--capsaas-text-sm); border-radius: 8px; }
.btn-lg { padding: 14px 24px; font-size: var(--capsaas-text-md); }

/* =====================================================
   BADGES
   ===================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--capsaas-radius-full);
  font-size: var(--capsaas-text-xs);
  font-weight: var(--capsaas-weight-medium);
  letter-spacing: 0.02em;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.badge-live { background: var(--capsaas-forest-wash); color: var(--capsaas-forest-deep); }
.badge-live .badge-dot { background: var(--capsaas-forest); }

.badge-warning { background: var(--capsaas-saffron-wash); color: var(--capsaas-saffron-deep); }
.badge-warning .badge-dot { background: var(--capsaas-saffron); }

.badge-action { background: var(--capsaas-ember-wash); color: var(--capsaas-ember-deep); }
.badge-action .badge-dot { background: var(--capsaas-ember); }

.badge-danger { background: var(--capsaas-coral-wash); color: var(--capsaas-coral-deep); }
.badge-danger .badge-dot { background: var(--capsaas-coral); }

.badge-neutral { background: var(--capsaas-rule); color: var(--capsaas-slate); }
.badge-neutral .badge-dot { background: var(--capsaas-stone); }

/* =====================================================
   INPUTS
   ===================================================== */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-label {
  font-size: var(--capsaas-text-xs);
  font-weight: var(--capsaas-weight-medium);
  color: var(--capsaas-slate);
}
.input {
  font-family: inherit;
  font-size: var(--capsaas-text-base);
  padding: 10px 14px;
  border: 1px solid var(--capsaas-rule);
  border-radius: var(--capsaas-radius-md);
  background: var(--capsaas-snow);
  color: var(--capsaas-ink);
  transition: all var(--capsaas-duration-fast) var(--capsaas-ease-out);
  outline: none;
}
.input:focus {
  border-color: var(--capsaas-ember);
  box-shadow: var(--capsaas-glow-ember);
}
.input.success { border-color: var(--capsaas-forest); background: #F5FAF6; }
.input.error   { border-color: var(--capsaas-coral); background: #FEF7F9; }

.input-helper {
  font-size: var(--capsaas-text-xs);
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-helper.success { color: var(--capsaas-forest-deep); }
.input-helper.error   { color: var(--capsaas-coral-deep); }
.input-helper.neutral { color: var(--capsaas-stone); }

/* =====================================================
   ALERTS
   ===================================================== */
.alert {
  display: flex;
  gap: var(--capsaas-space-3);
  padding: 14px 18px;
  border-radius: var(--capsaas-radius-md);
  font-size: var(--capsaas-text-base);
  margin-bottom: var(--capsaas-space-2);
}
.alert-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--capsaas-text-xs);
  font-weight: 700;
}

.alert-success { background: var(--capsaas-forest-wash); color: var(--capsaas-forest-deep); }
.alert-success .alert-icon { background: var(--capsaas-forest); }

.alert-warning { background: var(--capsaas-saffron-wash); color: var(--capsaas-saffron-deep); }
.alert-warning .alert-icon { background: var(--capsaas-saffron); color: var(--capsaas-ink); }

.alert-info { background: var(--capsaas-ember-wash); color: var(--capsaas-ember-deep); }
.alert-info .alert-icon { background: var(--capsaas-ember); }

.alert-error { background: var(--capsaas-coral-wash); color: var(--capsaas-coral-deep); }
.alert-error .alert-icon { background: var(--capsaas-coral); }

/* =====================================================
   CARDS
   ===================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--capsaas-space-4);
}
.card {
  background: var(--capsaas-snow);
  border: 1px solid var(--capsaas-rule);
  border-radius: var(--capsaas-radius-lg);
  padding: var(--capsaas-space-6);
  transition: all var(--capsaas-duration-base) var(--capsaas-ease-out);
}
.card:hover {
  border-color: var(--capsaas-ember);
  transform: translateY(-2px);
  box-shadow: var(--capsaas-shadow-md);
}
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--capsaas-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--capsaas-snow);
  font-size: var(--capsaas-text-lg);
  font-weight: var(--capsaas-weight-semibold);
  margin-bottom: var(--capsaas-space-4);
}
.card-eyebrow {
  font-size: 10px;
  font-weight: var(--capsaas-weight-medium);
  letter-spacing: var(--capsaas-tracking-widest);
  text-transform: uppercase;
  color: var(--capsaas-ember);
  margin-bottom: 6px;
}
.card-title {
  font-size: var(--capsaas-text-lg);
  font-weight: var(--capsaas-weight-medium);
  letter-spacing: var(--capsaas-tracking-base);
  margin-bottom: var(--capsaas-space-2);
}
.card-desc {
  font-size: var(--capsaas-text-sm);
  color: var(--capsaas-slate);
  line-height: 1.55;
}

/* =====================================================
   STATS
   ===================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--capsaas-space-3);
}
.stat {
  background: var(--capsaas-snow);
  border: 1px solid var(--capsaas-rule);
  border-radius: var(--capsaas-radius-md);
  padding: var(--capsaas-space-5);
}
.stat-label {
  font-size: var(--capsaas-text-xs);
  color: var(--capsaas-stone);
  letter-spacing: var(--capsaas-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--capsaas-weight-medium);
  margin-bottom: var(--capsaas-space-2);
}
.stat-value {
  font-size: var(--capsaas-text-2xl);
  font-weight: var(--capsaas-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-delta {
  font-size: var(--capsaas-text-xs);
  color: var(--capsaas-forest);
  margin-top: 6px;
  font-weight: var(--capsaas-weight-medium);
}

/* =====================================================
   CODE
   ===================================================== */
code {
  font-family: var(--capsaas-font-mono);
  font-size: 0.9em;
  background: var(--capsaas-saffron-wash);
  color: var(--capsaas-saffron-deep);
  padding: 1px 6px;
  border-radius: var(--capsaas-radius-sm);
}

/* =====================================================
   TOGGLE PILLS · multi-state on/off pills, e.g. mode picker
   ===================================================== */
.toggle-group { display: inline-flex; gap: 4px; }

.toggle-pill {
  font-family: var(--capsaas-font-mono);
  font-size: var(--capsaas-text-xs);
  font-weight: var(--capsaas-weight-medium);
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: var(--capsaas-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--capsaas-duration-fast) var(--capsaas-ease-out);
  background: transparent;
  color: var(--capsaas-stone);
}
.toggle-pill.off { opacity: 0.55; border-color: var(--capsaas-rule); }
.toggle-pill.off:hover { opacity: 1; border-color: var(--capsaas-stone); }
.toggle-pill:disabled { opacity: 0.5; cursor: wait; }

.toggle-pill.toggle-ember.on   { background: var(--capsaas-ember-wash);   color: var(--capsaas-ember-deep);   border-color: var(--capsaas-ember); }
.toggle-pill.toggle-saffron.on { background: var(--capsaas-saffron-wash); color: var(--capsaas-saffron-deep); border-color: var(--capsaas-saffron); }
.toggle-pill.toggle-forest.on  { background: var(--capsaas-forest-wash);  color: var(--capsaas-forest-deep);  border-color: var(--capsaas-forest); }
.toggle-pill.toggle-coral.on   { background: var(--capsaas-coral-wash);   color: var(--capsaas-coral-deep);   border-color: var(--capsaas-coral); }

/* =====================================================
   PILL SELECT · <select> styled as a colour-coded pill,
   used for inline-editable role/plan/mode/status cells.
   ===================================================== */
.pill-select {
  font-family: inherit;
  font-size: var(--capsaas-text-sm);
  font-weight: var(--capsaas-weight-medium);
  letter-spacing: 0.02em;
  padding: 4px 24px 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--capsaas-radius-full);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% - 1px), calc(100% - 8px) calc(50% - 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  background-color: var(--capsaas-snow);
  color: var(--capsaas-ink);
}
.pill-select:focus { outline: none; border-color: var(--capsaas-ember); box-shadow: var(--capsaas-glow-ember); }
.pill-select:disabled { opacity: 0.6; cursor: wait; }

.pill-select.pill-ember   { background-color: var(--capsaas-ember-wash);   color: var(--capsaas-ember-deep);   border-color: var(--capsaas-ember); }
.pill-select.pill-saffron { background-color: var(--capsaas-saffron-wash); color: var(--capsaas-saffron-deep); border-color: var(--capsaas-saffron); }
.pill-select.pill-forest  { background-color: var(--capsaas-forest-wash);  color: var(--capsaas-forest-deep);  border-color: var(--capsaas-forest); }
.pill-select.pill-coral   { background-color: var(--capsaas-coral-wash);   color: var(--capsaas-coral-deep);   border-color: var(--capsaas-coral); }
.pill-select.pill-neutral { background-color: var(--capsaas-rule);          color: var(--capsaas-slate); }

/* small-size variant — same scale as .btn-sm */
.pill-select-sm { font-size: var(--capsaas-text-xs); padding: 3px 22px 3px 8px; letter-spacing: 0.04em; }

/* =====================================================
   TOGGLE SWITCH · on/off slider (iOS-style)
   Renders as a button (so it's keyboard accessible). Use `aria-pressed`
   to drive `.on` state from JS; CSS handles the visual transition.
   ===================================================== */
.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--capsaas-rule);
  border: none;
  border-radius: var(--capsaas-radius-full);
  cursor: pointer;
  transition: background var(--capsaas-duration-fast) var(--capsaas-ease-out);
  flex-shrink: 0;
  padding: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--capsaas-snow);
  border-radius: 50%;
  transition: transform var(--capsaas-duration-fast) var(--capsaas-ease-out);
  box-shadow: var(--capsaas-shadow-sm);
}
.toggle.on { background: var(--capsaas-ember); }
.toggle.on::after { transform: translateX(16px); }
.toggle:disabled { opacity: 0.55; cursor: wait; }
.toggle:focus-visible { outline: none; box-shadow: var(--capsaas-glow-ember); }