/* capacity-editor.css — modal to set a system's live plant count */
.ipm-cap-modal { position: fixed; inset: 0; z-index: 2147483300; display: grid; place-items: center;
  opacity: 0; transition: opacity .18s ease; }
.ipm-cap-modal.is-on { opacity: 1; }
.ipm-cap-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 16, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ipm-cap-card { position: relative; width: min(360px, 92vw); padding: 18px; border-radius: 18px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--col-indigo, #0f1535) 94%, #fff 2%), var(--col-navy, #0a0f24));
  border: 1px solid var(--glass-border-2, rgba(255,255,255,.15)); box-shadow: 0 30px 70px rgba(2,4,14,.6);
  transform: translateY(8px) scale(.98); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.ipm-cap-modal.is-on .ipm-cap-card { transform: none; }
@media (prefers-reduced-motion: reduce) { .ipm-cap-modal, .ipm-cap-card { transition: none; } }

.ipm-cap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ipm-cap-eyebrow { font: 700 10.5px/1 var(--font-body, 'Inter', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-cyan, #38bdf8); margin-bottom: 5px; }
.ipm-cap-title { font: 800 18px/1.1 var(--font-display, 'Space Grotesk', sans-serif); color: var(--text-primary, #e8ecf6); }
.ipm-cap-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  color: var(--text-secondary, #cbd5e1); background: var(--glass-1, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.ipm-cap-x:hover { color: var(--text-primary, #e8ecf6); background: var(--glass-2, rgba(255,255,255,.09)); }

.ipm-cap-stepper { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.ipm-cap-step { width: 46px; flex: none; display: grid; place-items: center; cursor: pointer; border-radius: 12px;
  font: 700 22px/1 var(--font-display, sans-serif); color: var(--text-primary, #e8ecf6);
  background: var(--glass-1, rgba(255,255,255,.05)); border: 1px solid var(--glass-border-2, rgba(255,255,255,.14)); user-select: none; }
.ipm-cap-step:hover { background: var(--glass-2, rgba(255,255,255,.1)); border-color: var(--accent-cyan, #38bdf8); }
.ipm-cap-step:active { transform: scale(.95); }
.ipm-cap-input { flex: 1; min-width: 0; text-align: center; border-radius: 12px; padding: 10px;
  font: 800 30px/1 var(--font-display, 'Space Grotesk', sans-serif); color: var(--text-primary, #e8ecf6);
  background: rgba(4,8,20,.55); border: 1px solid var(--glass-border-2, rgba(255,255,255,.16)); }
.ipm-cap-input:focus { outline: none; border-color: var(--accent-cyan, #38bdf8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan,#38bdf8) 22%, transparent); }
.ipm-cap-input::-webkit-outer-spin-button, .ipm-cap-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ipm-cap-meter { height: 8px; border-radius: 100px; background: rgba(148,163,184,.16); overflow: hidden; margin-bottom: 8px; }
.ipm-cap-meter-fill { height: 100%; width: 0; border-radius: 100px; transition: width .18s ease, background .18s ease; }
.ipm-cap-hint { font: 600 12px/1.3 var(--font-body, 'Inter', sans-serif); color: var(--text-secondary, #cbd5e1); margin-bottom: 14px; }

.ipm-cap-quick { display: flex; gap: 7px; margin-bottom: 16px; }
.ipm-cap-chip { flex: 1; cursor: pointer; padding: 8px 6px; border-radius: 10px; font: 700 12px/1 var(--font-body, sans-serif);
  color: var(--text-secondary, #cbd5e1); background: var(--glass-1, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.ipm-cap-chip:hover { color: var(--text-primary, #e8ecf6); border-color: var(--glass-border-2, rgba(255,255,255,.2)); }

.ipm-cap-actions { display: flex; gap: 9px; }
.ipm-cap-btn { flex: 1; cursor: pointer; padding: 11px; border-radius: 12px; font: 700 13px/1 var(--font-body, sans-serif); border: 1px solid transparent; }
.ipm-cap-btn.ghost { color: var(--text-secondary, #cbd5e1); background: var(--glass-1, rgba(255,255,255,.05)); border-color: var(--glass-border, rgba(255,255,255,.1)); }
.ipm-cap-btn.ghost:hover { color: var(--text-primary, #e8ecf6); background: var(--glass-2, rgba(255,255,255,.09)); }
.ipm-cap-btn.primary { color: #04050f; background: linear-gradient(100deg, var(--accent-cyan, #38bdf8), var(--accent-teal, #2dd4bf)); }
.ipm-cap-btn.primary:hover { filter: brightness(1.06); }

/* ── light theme ─────────────────────────────────────────────────────────── */
html[data-theme="light"] .ipm-cap-card {
  background: var(--glass-4, rgba(255,255,255,.92));
  border-color: var(--glass-border-2, rgba(130,100,200,.32));
  box-shadow: 0 30px 70px rgba(80,90,160,.20);
}
html[data-theme="light"] .ipm-cap-input {
  background: var(--glass-2, rgba(255,255,255,.68));
  color: var(--text-primary, #13103a);
  border-color: var(--glass-border-2, rgba(130,100,200,.32));
}
html[data-theme="light"] .ipm-cap-meter { background: rgba(19,16,58,.10); }
html[data-theme="light"] .ipm-cap-btn.primary { color: #fff; }