/* =============================================================================
 * Seed-modal allocation section — Phase B Wave 5B Sub-wave 4 commit 3b.
 * Consumes only --v2-* tokens per CLAUDE.md Canopy v2 hard rule #1.
 * Mockup: .tmp/seed-modal-allocations-mockup.html (approved 2026-05-06).
 * ============================================================================= */

.alloc-section {
  background: var(--v2-bg-card);
  /* Horizontal alignment: .seed-modal-body provides 22px L/R padding, so
     this section sits flush with sibling stat-cards / stage rail. Only
     vertical margin needed. */
  margin: 0 0 var(--v2-space-md);
  border-radius: var(--v2-radius-md);
  border: 1px solid var(--v2-border-soft);
  overflow: hidden;
}
.alloc-section[open] {
  box-shadow: var(--v2-shadow-warm);
}

.alloc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-md);
  min-height: var(--v2-space-touch);
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
  list-style: none;
}
.alloc-toggle::-webkit-details-marker { display: none; }

.alloc-toggle-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.alloc-title {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 500;
}
.alloc-summary {
  font-size: 12px;
  color: var(--v2-text-secondary);
}
.alloc-chevron {
  width: 16px;
  height: 16px;
  color: var(--v2-text-tertiary);
  transform: rotate(180deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.alloc-section[open] .alloc-chevron { transform: rotate(0deg); }

.alloc-body {
  padding: 0 var(--v2-space-md) var(--v2-space-md);
  border-top: 1px solid var(--v2-border-soft);
}

.alloc-invariant-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: oklch(95% 0.04 162);
  color: var(--v2-accent-botanical-dark);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--v2-radius-xs);
  margin: var(--v2-space-md) 0 var(--v2-space-sm);
}
.alloc-invariant-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-accent-botanical);
}
.alloc-invariant-pill.warn {
  background: oklch(93% 0.06 75);
  color: oklch(35% 0.09 75);
}
.alloc-invariant-pill.warn::before { background: oklch(60% 0.14 75); }

.alloc-stage-group { margin-bottom: var(--v2-space-md); }
.alloc-stage-group:last-child { margin-bottom: 0; }
.alloc-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-sm) 0 var(--v2-space-xs);
}
.alloc-stage-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-text-stone);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.alloc-stage-total {
  font-family: var(--v2-font-display);
  font-size: 13px;
  color: var(--v2-text-secondary);
}

.alloc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-sm) 12px;
  background: var(--v2-bg-secondary);
  border-radius: var(--v2-radius-sm);
  margin-bottom: 6px;
  min-height: var(--v2-space-touch);
}
.alloc-row:last-child { margin-bottom: 0; }
.alloc-zone-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--v2-text-primary);
}
.alloc-zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v2-accent-botanical);
  flex-shrink: 0;
}
.alloc-zone-dot.unassigned { background: var(--v2-text-muted); }
.alloc-zone-dot.failed { background: oklch(55% 0.13 30); }
.alloc-count {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--v2-text-primary);
}

.alloc-actions {
  display: flex;
  gap: var(--v2-space-sm);
  margin-top: var(--v2-space-md);
}
.alloc-btn-secondary {
  flex: 1;
  min-height: var(--v2-space-touch);
  padding: 0 var(--v2-space-md);
  background: transparent;
  color: var(--v2-accent-botanical-dark);
  border: 1px solid var(--v2-accent-botanical);
  border-radius: var(--v2-radius-sm);
  font-family: var(--v2-font-body);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.alloc-btn-secondary svg { width: 14px; height: 14px; }
.alloc-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.alloc-loading,
.alloc-empty,
.alloc-error {
  padding: var(--v2-space-md) 0 0;
  font-size: 13px;
  color: var(--v2-text-secondary);
  text-align: center;
}
.alloc-error { color: oklch(45% 0.15 30); }

/* ============= Move sheet ============= */
.alloc-sheet-scrim {
  position: fixed;
  inset: 0;
  background: var(--v2-bg-overlay);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
}
.alloc-sheet {
  width: 100%;
  background: var(--v2-bg-panel);
  border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0;
  padding: 12px var(--v2-space-md) calc(var(--v2-space-xl) + env(safe-area-inset-bottom, 0));
  box-shadow: var(--v2-shadow-warm-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.alloc-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--v2-border-strong);
  border-radius: 2px;
  margin: 0 auto var(--v2-space-md);
}
.alloc-sheet-title {
  font-family: var(--v2-font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 var(--v2-space-md);
  color: var(--v2-text-primary);
}
.alloc-field-group { margin-bottom: var(--v2-space-md); }
.alloc-field-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-text-stone);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.alloc-field-input {
  width: 100%;
  min-height: var(--v2-space-touch);
  padding: 0 var(--v2-space-md);
  background: var(--v2-bg-secondary);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-sm);
  font-family: var(--v2-font-body);
  font-size: 14px;
  color: var(--v2-text-primary);
  box-sizing: border-box;
}
.alloc-stepper {
  display: flex;
  align-items: center;
  gap: var(--v2-space-sm);
}
.alloc-stepper-btn {
  width: var(--v2-space-touch);
  height: var(--v2-space-touch);
  background: var(--v2-bg-secondary);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-sm);
  font-size: 18px;
  color: var(--v2-text-primary);
  font-weight: 500;
  cursor: pointer;
}
.alloc-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.alloc-stepper-value {
  flex: 1;
  text-align: center;
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--v2-text-primary);
}
.alloc-stepper-cap {
  font-size: 11px;
  color: var(--v2-text-tertiary);
  margin-top: 4px;
}
.alloc-btn-primary {
  width: 100%;
  min-height: var(--v2-space-touch);
  background: var(--v2-accent-botanical);
  color: var(--v2-text-on-dark);
  border: 0;
  border-radius: var(--v2-radius-sm);
  font-family: var(--v2-font-body);
  font-size: 14px;
  font-weight: 500;
  margin-top: var(--v2-space-sm);
  cursor: pointer;
}
.alloc-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}