/* planning.css — Planning phase: create-mode toggle, split-screen editor,
   inline-SVG charts, sign-off chips, dashboard card. Light/dark via tokens. */

:root {
  --prep-color: var(--warning);
  --test-color: var(--info);
}

/* ---- Create POC: mode toggle ---- */
.create-poc-mode-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
/* Explicit fallbacks so the toggle stays readable even if a token is missing or a stale
   stylesheet is cached — never let it render as black-on-black. */
.create-poc-mode-btn {
  background: var(--bg-card, #1c1917);
  color: var(--fg-muted, #a8a29e);
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.create-poc-mode-btn + .create-poc-mode-btn { border-left: 1px solid var(--border-subtle, #44403c); }
.create-poc-mode-btn--active { background: var(--accent, #FA582D); color: #fff; }

/* ---- Editor shell ---- */
.pl-editor { max-width: 1200px; margin: 0 auto; padding: 8px 4px 64px; }
.pl-loading, .pl-error, .pl-converted { padding: 40px; text-align: center; color: var(--fg-muted); }
.pl-head { margin-bottom: 16px; }
.pl-back { color: var(--accent-text); text-decoration: none; font-size: 13px; font-weight: 600; }
.pl-headline { margin: 8px 0 2px; font-size: 22px; color: var(--fg); }
.pl-sub { color: var(--fg-muted); font-size: 14px; }

/* ---- Value driver block ---- */
.pl-value-block {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.pl-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pl-field label { font-size: 13px; font-weight: 600; color: var(--fg); }
.pl-eg { font-weight: 400; color: var(--fg-muted); font-style: italic; }
.pl-input {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  box-sizing: border-box;
}
textarea.pl-input { resize: vertical; }
.pl-date-row { display: flex; gap: 16px; flex-wrap: wrap; }
.pl-date-row .pl-field { flex: 1; min-width: 180px; margin-bottom: 0; }
.pl-date-pill {
  align-self: flex-start;
  background: var(--bg-hover);
  border: 1px dashed var(--border-subtle);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}
.pl-tbd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
}
.pl-tbd input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.pl-tbd input:disabled,
.pl-tbd:has(input:disabled) {
  cursor: default;
  opacity: 0.6;
}

/* ---- Split screen ---- */
.pl-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; }
.pl-left, .pl-right {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.pl-col-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); margin: 0 0 10px; }
.pl-right .pl-col-title { margin-top: 18px; }
.pl-right .pl-col-title:first-child { margin-top: 0; }

/* template + add row */
.pl-template-row { display: flex; gap: 8px; margin-bottom: 12px; }
.pl-template-row .pl-input { flex: 1; }
.pl-add-uc { margin-top: 12px; }

/* ---- Use case rows + importance colour cue ---- */
.pl-uc-list { display: flex; flex-direction: column; gap: 8px; }
.pl-uc-empty { color: var(--fg-muted); font-size: 13px; padding: 12px; text-align: center; }
.pl-uc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
}
.pl-imp-nice_to_have { border-left-color: var(--success); }
.pl-imp-important { border-left-color: var(--warning); }
.pl-imp-show_stopper { border-left-color: var(--danger); }
.pl-uc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-uc-title { font-size: 14px; color: var(--fg); font-weight: 500; }
.pl-uc-meta { font-size: 12px; color: var(--fg-muted); }
.pl-uc-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pl-imp-select { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 4px 6px; font-size: 12px; }
.pl-uc-remove { background: transparent; border: none; color: var(--fg-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pl-uc-remove:hover { color: var(--danger); }

/* ---- Charts ---- */
.pl-chart-empty { color: var(--fg-muted); font-size: 13px; padding: 8px 0; }
.pl-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pl-pie-svg { width: 140px; height: 140px; flex-shrink: 0; }
.pl-pie-track { fill: none; stroke: var(--bg-hover); stroke-width: 16; }
.pl-pie-test { fill: none; stroke: var(--test-color); stroke-width: 16; }
.pl-pie-prep { fill: none; stroke: var(--prep-color); stroke-width: 16; }
.pl-pie-total { fill: var(--fg); font-size: 20px; font-weight: 700; text-anchor: middle; }
.pl-pie-total-sub { fill: var(--fg-muted); font-size: 10px; text-anchor: middle; text-transform: uppercase; }
.pl-pie-legend { font-size: 13px; color: var(--fg); }
.pl-legend-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pl-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pl-swatch-prep { background: var(--prep-color); }
.pl-swatch-test { background: var(--test-color); }
.pl-pie-caption { color: var(--fg-muted); font-size: 12px; margin-top: 6px; max-width: 220px; }

.pl-weeks { display: flex; flex-direction: column; gap: 6px; }
.pl-week-row { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 8px; }
.pl-week-label { font-size: 12px; color: var(--fg-muted); }
.pl-week-bar-track { background: var(--bg-hover); border-radius: 6px; height: 14px; overflow: hidden; }
.pl-week-bar { display: block; height: 100%; border-radius: 6px; }
.pl-week-bar-prep { background: var(--prep-color); }
.pl-week-bar-test { background: var(--test-color); }
.pl-week-hours { font-size: 12px; color: var(--fg); text-align: right; }

.pl-timeline { margin-top: 4px; }
.pl-tl-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-muted); margin-bottom: 4px; }
.pl-tl-date { color: var(--fg); font-weight: 600; }
.pl-tbd-pill { background: var(--bg-hover); color: var(--fg-muted); border-radius: 999px; padding: 1px 10px; font-weight: 700; font-size: 11px; }
.pl-tl-track { position: relative; display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--bg-hover); }
.pl-tl-band { height: 100%; }
.pl-tl-band-prep { background: var(--prep-color); }
.pl-tl-band-test { background: var(--test-color); }
.pl-tl-band-empty { background: var(--bg-hover); }
.pl-tl-handoff { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fg); opacity: 0.5; }
.pl-tl-meta { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }

/* ---- Sign-off strip + footer ---- */
.pl-signoff-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.pl-chip { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--fg); }
.pl-chip-signed { background: var(--success-soft); border-color: var(--success); }
.pl-chip-changes { background: var(--warning-soft); border-color: var(--warning); }
.pl-chip-pending { background: var(--bg-hover); }
/* Signed, but before the plan was reopened for replanning — the buyer must re-sign. */
.pl-chip-stale { background: var(--warning-soft); border-color: var(--warning); border-style: dashed; }

.pl-footer { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-btn {
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.pl-btn:hover { background: var(--bg-hover); }
.pl-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.pl-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.pl-btn-primary:hover { background: var(--accent-hover); }

/* ---- Dashboard: planning card + badge + tab ---- */
.poc-type-badge.poc-type-planning { background: var(--info-soft); color: var(--info); border: 1px solid var(--info); }
.poc-card-planning { border-left: 4px solid var(--info); }
.pl-card-body { padding: 12px 16px 16px; }
.pl-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-settings-panel { margin-top: 14px; border-top: 1px solid var(--border, #8882); padding-top: 12px; }
.pl-card-signoffs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.pl-card-signoffs .pl-chip { font-size: 11px; padding: 3px 8px; }
/* Post-kickoff cards (active / in review / closed) reuse the same strip. */
.poc-card-active .pl-card-signoffs,
.poc-card-in-review .pl-card-signoffs,
.poc-card-closed .pl-card-signoffs { margin: 8px 0 0; }
.pl-scope-change { background: transparent; border: 1px solid var(--border-subtle); color: var(--accent-text, var(--accent)); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 3px 10px; border-radius: 999px; }
.pl-scope-change:hover { border-color: var(--accent); background: var(--accent-soft); }
.pl-warn-tag { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
.view-tab-planning.active { box-shadow: inset 0 -2px 0 var(--info); }

/* Compact dates row on the planning card (Start / End / In production). */
.pl-card-dates { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--fg-muted); margin: 4px 0 12px; }
.pl-card-dates .pl-cd b { color: var(--fg); font-weight: 600; margin-right: 5px; }

/* Economic-buyer note as a slim chip (collapsed from the old full-width box). */
.pl-eco-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--info, #0090b0); background: var(--info-soft, #e9f6fb); border: 1px solid var(--info, #00c0e8); border-radius: 10px; padding: 5px 10px; margin: 0 0 12px; max-width: 100%; }
:root[data-theme="dark"] .pl-eco-chip { background: rgba(0,192,232,0.10); }

/* Economic-buyer note surfaced to the SE before kickoff (internal-only comment). */
.pl-eco-comment { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--info-soft, #e9f6fb); border: 1px solid var(--info, #00c0e8); }
:root[data-theme="dark"] .pl-eco-comment { background: rgba(0,192,232,0.10); }
.pl-eco-comment-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--info, #0090b0); }
.pl-eco-comment p { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; }
/* "Changes requested" recap on the card — amber, shows what a buyer asked us to revise. */
.pl-changereq { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--warning-soft, #fff3e0); border: 1px solid var(--warning, #ffb74d); }
.pl-changereq-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warning, #b25b00); }
.pl-changereq p { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; font-style: italic; }

/* ---- Add use case: search results ---- */
.pl-add-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pl-add-result {
  text-align: left; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border-subtle); border-radius: 6px; padding: 6px 10px;
  font: inherit; cursor: pointer;
}
.pl-add-result:hover { background: var(--bg-hover); border-color: var(--accent); }
.pl-add-empty { color: var(--fg-muted); font-size: 12px; padding: 6px; }

/* ---- Sign-off chip remove + lock note ---- */
.pl-chip-remove {
  background: transparent; border: none; color: var(--fg-muted);
  cursor: pointer; font-size: 12px; padding: 0 2px; margin-left: 2px;
}
.pl-chip-remove:hover { color: var(--danger); }
.pl-lock-note {
  font-size: 12px; color: var(--fg-muted); background: var(--warning-soft);
  border: 1px solid var(--warning); border-radius: 8px; padding: 6px 10px; margin: 0 0 10px;
}

/* ---- Teams & contacts ---- */
.pl-contacts-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow-card);
}
.pl-contact-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.pl-contact-row:last-child { border-bottom: none; }
.pl-contact-side { background: var(--bg-hover); border-radius: 999px; padding: 2px 8px; font-size: 11px; color: var(--fg-muted); }
.pl-contact-name { font-weight: 600; color: var(--fg); }
.pl-contact-role, .pl-contact-email { color: var(--fg-muted); }
.pl-contact-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pl-contact-add .pl-input { flex: 1; min-width: 100px; }

/* ---- Responsive: stack the split screen ---- */
@media (max-width: 768px) {
  .pl-split { grid-template-columns: 1fr; }
  .pl-week-row { grid-template-columns: 110px 1fr 40px; }
}

/* ---- Launch environment (planning card chip/button + modal + detail line) ----
   Token-based colours only, so [data-theme="dark"] variable overrides handle
   dark mode automatically. */

/* Environment status chip (shares .pl-chip base; also used in POC detail header) */
.pl-env-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pl-chip-env-creating { background: var(--info-soft); border-color: var(--info); }
.pl-chip-env-ready { background: var(--success-soft); border-color: var(--success); }
.pl-chip-env-failed { background: var(--danger-soft); border-color: var(--danger); }
.pl-chip-env-gone { background: var(--bg-hover); color: var(--fg-muted); }

/* Modal (reuses the create-poc-modal-* shell from vendor.css) */
.le-modal-content { max-width: 620px; }
.le-body { overflow-y: auto; }
.le-section { margin-bottom: 16px; }
.le-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-muted);
}
.le-stack-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.le-stack-name { font-weight: 600; color: var(--fg); font-size: 14px; }
.le-product-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--fg-muted); background: var(--bg-hover);
  border: 1px solid var(--border-subtle); border-radius: 6px; padding: 2px 8px;
}
.le-input {
  width: 100%; padding: 7px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg-card); color: var(--fg);
}
.le-kv-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 6px; }
.le-kv-key {
  background: var(--bg-hover); color: var(--fg-muted); cursor: default;
  overflow: hidden; text-overflow: ellipsis;
}
.le-kv-key:focus { outline: none; }
.le-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.le-uc-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--info-soft); border: 1px solid var(--info); color: var(--fg);
}
.le-note { font-size: 12px; color: var(--fg-muted); margin: 6px 0 0; }
.le-expiry { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg); }
.le-inline-msg {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px; font-size: 13px; color: var(--fg);
  background: var(--warning-soft); border: 1px solid var(--warning); border-radius: 8px;
}
.le-footer { flex-wrap: wrap; }
.le-footer .le-error { flex: 1 1 100%; font-size: 13px; color: var(--danger); margin-bottom: 4px; }

/* POC detail header: environment status line under the meta line */
.poc-detail-env-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; font-size: 13px;
}
.poc-detail-env-status .pl-env-chip { font-size: 11px; padding: 3px 8px; }
.poc-detail-env-meta { color: var(--fg-muted); }

@media (max-width: 640px) {
  .le-kv-row { grid-template-columns: 1fr; gap: 4px; }
}

/* =================================================================
   Launch modal — guided parameter form (parameters_spec)
   le-gf-* classes; token-based so light/dark both work.
   ================================================================= */
.le-gf-field { margin-bottom: 14px; }
.le-gf-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--fg);
}
.le-gf-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--fg-muted); background: var(--bg-hover);
  border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 5px;
}
.le-gf-req { color: var(--danger); font-weight: 700; }
.le-gf-help { font-size: 12px; color: var(--fg-muted); margin: 4px 0 0; }

/* Checkbox-type parameter: label sits next to the box */
.le-gf-checkbox {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer;
}
.le-gf-checkbox-input { accent-color: var(--accent); }

/* Invalid (missing required) highlight */
.le-gf-field--invalid .le-input { border-color: var(--danger); }
.le-gf-field--invalid .le-gf-label span:first-child,
.le-gf-field--invalid .le-gf-checkbox-text { color: var(--danger); }

/* Read-only "from POC" resolved rows */
.le-gf-resolved {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; font-size: 13px; color: var(--fg);
}
.le-gf-resolved-val { font-weight: 600; overflow-wrap: anywhere; }
.le-gf-from { font-size: 12px; color: var(--fg-muted); }

/* Fixed/template-default rows — rendered inline in template order (same shape
   as the "from POC" resolved rows, slightly muted). */
.le-gf-resolved--fixed { color: var(--fg-muted); }
.le-gf-resolved--fixed .le-gf-resolved-val { font-weight: 500; }

/* "From another stack's output" rows — read-only like poc_field rows; the
   value shows muted "waiting for <stack>" until the source stack resolves. */
.le-gf-waiting { font-weight: 500; font-style: italic; color: var(--fg-muted); }

/* "Use case on the POC?" rows — read-only; the value follows the POC's scope. */
.le-gf-resolved--use-case .le-gf-resolved-val { font-weight: 600; }

/* Prefilled from the SE's own launch defaults (users.launch_param_defaults) */
.le-gf-personal { font-style: italic; }

/* Section heading from the template's ParameterGroups, e.g.
   "--- No Need To Change Anything Below This Line ---". A heading whose label is
   pure decoration renders as a plain rule. */
.le-gf-group {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted);
}
.le-gf-group::before,
.le-gf-group::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--border-subtle);
}
.le-gf-group--divider::after { display: none; }
.le-gf-group-text { flex: 0 1 auto; }
.le-gf-group:first-child { margin-top: 4px; }

/* =================================================================
   Launch modal — multi-stack layout (preview.stacks contract)
   One .le-stack-section per stack, in backend-given order. The modal body
   (.create-poc-modal-body via .le-body) already scrolls; sections stack
   inside it. Token-based colours only → dark mode via variable overrides.
   ================================================================= */
.le-stacks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.le-stack-section {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  padding: 12px 14px; background: var(--bg-card);
}
.le-stack-section-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.le-role-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border-subtle); color: var(--fg-muted); background: var(--bg-hover);
}
.le-role-badge--template { background: var(--info-soft); border-color: var(--info); color: var(--fg); }
.le-role-badge--usecase { background: var(--warning-soft); border-color: var(--warning); color: var(--fg); }
/* A stack neither the template nor a use case named: another required stack reads
   its outputs, so it has to exist for that one to launch. Deliberately the
   quietest of the three — the SE did not pick it, and it is not the row they came
   to the tab for. Keeps the base badge's tokens, so light and dark both follow
   tokens.css. */
.le-role-badge--dependency { background: var(--bg-hover); border-color: var(--border-subtle); color: var(--fg-muted); }
.le-stack-section .pl-stack-chip { margin-left: auto; font-size: 11px; padding: 3px 8px; }
.le-stack-section-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.le-stack-section-actions:empty { display: none; }
.le-stack-error {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}

/* =================================================================
   Lab-firewall (prospect IP allowlist) applied-vs-desired line.
   Rendered by allowlistLineHtml() in BOTH the launch modal (inside a
   .le-section) and the POC card Environment tab (inside .env-stack-row), so
   the styling must not depend on either parent. Token-based colours only →
   dark mode comes from the [data-theme="dark"] overrides in tokens.css.
   ================================================================= */
.le-allow-line {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--fg); margin-top: 6px;
}
.le-allow-key {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-muted); flex-shrink: 0;
}
.le-allow-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
  border: 1px solid var(--border-subtle); color: var(--fg); background: var(--bg-hover);
}
.le-allow--ok    { background: var(--success-soft); border-color: var(--success); }
.le-allow--warn  { background: var(--warning-soft); border-color: var(--warning); }
.le-allow--err   { background: var(--danger-soft);  border-color: var(--danger); }
.le-allow--muted { background: var(--bg-hover); border-color: var(--border-subtle); color: var(--fg-muted); }
/* The text is a full sentence — let it wrap in place rather than ellipsing, or
   the state the SE opened this panel for is the part that gets cut. */
.le-allow-text { color: var(--fg-muted); min-width: 0; overflow-wrap: anywhere; }
.le-allow-err {
  margin-top: 4px; font-size: 12px; color: var(--danger);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* In the Environment tab the line sits under a flex row of chips/buttons and
   must start on its own line, not squeeze in beside the actions. */
.env-stack-row .le-allow-line { width: 100%; }

/* Waiting-status chip (multi-stack: queued behind another stack) */
.pl-chip-env-waiting { background: var(--bg-hover); border-color: var(--border-subtle); color: var(--fg-muted); }

/* Aggregate env chip as the card-top "tag" (header status row) */
.poc-customer-status-row .pl-env-chip { font-size: 11px; padding: 3px 8px; }

/* =================================================================
   Environment tab (POC card expansion) — per-stack status + actions.
   Token-based colours only → dark mode via variable overrides.
   ================================================================= */
.env-tab-loading, .env-tab-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 4px; font-size: 13px; color: var(--fg-muted);
}
/* Horizontal scroll containment: wide rows scroll inside the tab, never the page */
.env-tab { overflow-x: auto; }
.env-stack-list { display: flex; flex-direction: column; min-width: 0; }
.env-stack-row {
  padding: 10px 4px; border-bottom: 1px solid var(--border-subtle);
}
.env-stack-row:last-child { border-bottom: none; }
.env-stack-main {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg);
}
.env-stack-name { font-weight: 600; color: var(--fg); }
/* The CF catalog slug, secondary to the use-case title it now follows. Monospace
   because that is the identifier the launcher and CloudFormation use. */
.env-stack-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--fg-muted);
  background: var(--bg-hover); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 1px 6px;
}
.env-stack-nostatus {
  font-size: 11px; color: var(--fg-muted);
  border: 1px dashed var(--border-subtle); border-radius: 999px; padding: 2px 8px;
}
.env-stack-meta { font-size: 12px; color: var(--fg-muted); }
.env-stack-actions { display: inline-flex; gap: 6px; margin-left: auto; }
/* .env-config-btn shares the look but NOT the .env-btn class: that class is the
   Environment tab's action-dispatch selector and its "disable everything while a
   request is in flight" sweep, neither of which should reach a read-only viewer. */
.env-btn, .env-config-btn {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--border-subtle); background: var(--bg-card);
  color: var(--fg); cursor: pointer;
}
.env-btn:hover:not(:disabled), .env-config-btn:hover:not(:disabled) { background: var(--bg-hover); }
.env-btn:disabled, .env-config-btn:disabled { opacity: 0.55; cursor: default; }
.env-btn--create { background: var(--accent); border-color: var(--accent); color: #fff; }
.env-btn--create:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }
.env-btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.env-btn--danger:hover:not(:disabled) { background: var(--danger-soft); }
/* The CloudFormation stack name: its own line under the row, because it is ~60
   characters and the main line has to stay scannable. Tokens only, so dark mode
   comes from the variable overrides like the rest of this block. */
.env-stack-cfn {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; min-width: 0;
}
.env-stack-cfn-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-muted); flex-shrink: 0;
}
.env-stack-cfn-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--fg); text-align: left;
  background: var(--bg-hover); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 2px 7px; cursor: pointer;
  /* Wraps rather than truncating: half a stack name is not an identifier, and
     this is the line an SE pastes into the CloudFormation console. */
  word-break: break-all; max-width: 100%;
}
.env-stack-cfn-name:hover { background: var(--bg-card); border-color: var(--accent); }
.env-stack-error {
  margin-top: 6px; font-size: 12px; color: var(--danger);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* The same line under a "waiting" row is not a failure — it says what the row is
   waiting for. Muted, so the tab does not read as broken while a producer stack is
   still building. */
.env-stack-error--waiting { color: var(--fg-muted); }

/* The Environment tab's banner rows. Three of them share this style: the
   delete-only note (In Review / Completed / Deleted POCs) explaining why there is
   no Create / Re-create, and the two bulk actions — Create all and Delete all —
   which appear on a live POC whenever more than one row can take them. */
.env-tab-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--fg-muted);
  background: var(--bg-hover); border: 1px solid var(--border-subtle);
}
.env-tab-note .env-delete-all,
.env-tab-note .env-create-all { margin-left: auto; }

/* Region + expiry, hoisted out of the rows: one environment, one region, one
   expiry date (see renderEnvironmentTab). Quiet by design — it is context, not
   status. */
.env-tab-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 12px; color: var(--fg-muted);
}
.env-tab-meta i { color: var(--fg-muted); }

/* Prominent teardown block on the In Review card — the point of it is that the
   SE cannot miss it while finalizing the outcome, so it is a banner, not a chip. */
.poc-env-teardown {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
}
.poc-env-teardown-text {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.45; color: var(--fg); min-width: 0; flex: 1 1 320px;
}
.poc-env-teardown-text b { color: var(--fg); }
.poc-env-teardown-btn {
  flex-shrink: 0; font-size: 14px; font-weight: 700; padding: 10px 18px;
  border-radius: 9px; cursor: pointer;
  background: var(--danger); border: 1px solid var(--danger); color: #fff;
}
.poc-env-teardown-btn:hover:not(:disabled) { filter: brightness(1.08); }
.poc-env-teardown-btn:disabled { opacity: 0.6; cursor: default; }

/* =================================================================
   Environment status banner on the card header — every card state.
   Sits directly under the customer/status row so "the lab is still being
   created" is the first thing read after the prospect name. Token-based only,
   so dark mode comes from the [data-theme="dark"] overrides in tokens.css.
   ================================================================= */
.poc-env-status-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 2px; padding: 7px 11px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.4; color: var(--fg);
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--info) 45%, transparent);
}
.poc-env-status-banner--failed {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}
.poc-env-status-banner--deleting {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 50%, transparent);
}
.poc-env-status-banner i { color: var(--fg-muted); }
.poc-env-status-banner--failed i { color: var(--danger); }
/* The spinner is the "something is happening" signal the SE was missing; keep it
   subtle, and honour reduced-motion. */
.poc-env-status-banner--building i {
  color: var(--info);
  animation: poc-env-spin 1.6s linear infinite;
}
@keyframes poc-env-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .poc-env-status-banner--building i { animation: none; }
}
.poc-env-status-text { min-width: 0; overflow-wrap: anywhere; }

/* "Delete or keep the environment?" question at completion time. Three actions,
   so the footer wraps instead of squeezing on narrow screens. */
.env-close-modal { max-width: 520px; }
.env-close-text { font-size: 13.5px; line-height: 1.55; color: var(--fg); margin: 0; }
.env-close-footer { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.env-close-keep { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--fg); }
.env-close-keep:hover { background: var(--bg-hover); }
.env-close-delete { background: var(--danger); border-color: var(--danger); color: #fff; }

/* =================================================================
   Stack config panel (Environment tab → Config). Modal, because the tab
   re-renders itself out from under any inline panel. Reuses the
   create-poc-modal-* shell; token-based colours only → dark mode comes from the
   [data-theme="dark"] overrides in tokens.css.
   ================================================================= */
.env-cfg-modal { max-width: 760px; }
.env-cfg-body { overflow-y: auto; }
.env-cfg-title-name { font-weight: 600; }
.env-cfg-loading { padding: 14px 2px; font-size: 13px; color: var(--fg-muted); }

.env-cfg-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px; color: var(--fg);
}
.env-cfg-head-name { font-weight: 600; }
.env-cfg-head .pl-stack-chip { font-size: 11px; padding: 3px 8px; }
.env-cfg-head-meta { font-size: 12px; color: var(--fg-muted); overflow-wrap: anywhere; }

.env-cfg-section { margin-bottom: 20px; }
.env-cfg-section:last-child { margin-bottom: 4px; }
.env-cfg-section-head {
  margin-bottom: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted);
}
.env-cfg-hint { font-size: 12px; color: var(--fg-muted); margin: 0 0 8px; line-height: 1.5; }
/* The "applies on the next create" line is the one sentence that keeps an SE from
   thinking a save reconfigured a running stack — it gets a box, not fine print. */
.env-cfg-hint--semantics {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 8px; color: var(--fg);
  background: var(--info-soft); border: 1px solid var(--info);
}
.env-cfg-empty { font-size: 12.5px; color: var(--fg-muted); margin: 0; }
.env-cfg-warn {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--fg);
  background: var(--warning-soft); border: 1px solid var(--warning);
}
.env-cfg-warn code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
}
.env-cfg-banner {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px; border-radius: 8px;
  font-size: 13px; color: var(--fg);
  background: var(--bg-hover); border: 1px solid var(--border-subtle);
}
.env-cfg-banner--err { background: var(--danger-soft); border-color: var(--danger); }

/* Wide parameter tables scroll inside the modal, never widen it */
.env-cfg-tablewrap { overflow-x: auto; }
.env-cfg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.env-cfg-table th {
  text-align: left; padding: 4px 8px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.env-cfg-table td {
  padding: 7px 8px; vertical-align: top; color: var(--fg);
  border-bottom: 1px solid var(--border-subtle);
}
.env-cfg-table tr:last-child td { border-bottom: none; }
.env-cfg-row--overridden { background: var(--bg-hover); }
.env-cfg-param { min-width: 150px; }
.env-cfg-plabel { display: block; font-weight: 600; color: var(--fg); }
.env-cfg-key, .env-cfg-kv-key code {
  display: inline-block; margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--fg-muted); background: var(--bg-hover);
  border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 5px;
}
.env-cfg-req { color: var(--danger); font-weight: 700; margin-left: 3px; }
.env-cfg-type {
  margin-left: 4px; font-size: 10.5px; color: var(--fg-muted);
  border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 4px;
}
.env-cfg-srccell { white-space: nowrap; }
.env-cfg-src {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border-subtle); background: var(--bg-hover); color: var(--fg-muted);
}
.env-cfg-src--se_input { background: var(--info-soft); border-color: var(--info); color: var(--fg); }
.env-cfg-src--poc_field { background: var(--success-soft); border-color: var(--success); color: var(--fg); }
.env-cfg-src--stack_output { background: var(--warning-soft); border-color: var(--warning); color: var(--fg); }
.env-cfg-valcell { width: 46%; }
.env-cfg-val { color: var(--fg); overflow-wrap: anywhere; }
.env-cfg-empty-val, .env-cfg-unresolved { color: var(--fg-muted); font-style: italic; }
.env-cfg-edit { display: flex; align-items: center; gap: 6px; }
.env-cfg-input {
  flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--border-subtle); border-radius: 6px;
  background: var(--bg-card); color: var(--fg);
}
.env-cfg-clear {
  flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: var(--bg-card); color: var(--fg-muted); cursor: pointer;
  border: 1px solid var(--border-subtle);
}
.env-cfg-clear:hover { background: var(--bg-hover); color: var(--fg); }
.env-cfg-marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.env-cfg-flag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; margin-top: 4px;
  background: var(--info-soft); border: 1px solid var(--info); color: var(--fg);
}
.env-cfg-flag--locked {
  background: var(--bg-hover); border-color: var(--border-subtle); color: var(--fg-muted);
}
/* No reveal control by design: the value is not in the payload to reveal. */
.env-cfg-hidden { font-size: 11px; color: var(--fg-muted); font-style: italic; margin-top: 4px; }
.env-cfg-note { margin-top: 4px; font-size: 11.5px; color: var(--fg-muted); overflow-wrap: anywhere; }
.env-cfg-kv-key { width: 40%; }
.env-cfg-kv-val { overflow-wrap: anywhere; }
.env-cfg-footer { flex-wrap: wrap; }
.env-cfg-footer .env-cfg-error { flex: 1 1 100%; font-size: 12.5px; color: var(--danger); margin-bottom: 4px; }

@media (max-width: 640px) {
  .env-stack-actions { margin-left: 0; width: 100%; }
  .env-tab-note .env-delete-all,
  .env-tab-note .env-create-all { margin-left: 0; }
  .poc-env-teardown-btn { width: 100%; }
  .env-close-footer > .create-poc-btn { flex: 1 1 100%; }
  /* Three columns do not fit a phone: the source badge joins the parameter cell
     and each row becomes a two-line block instead of scrolling sideways. */
  .env-cfg-table thead { display: none; }
  .env-cfg-table, .env-cfg-table tbody, .env-cfg-table tr, .env-cfg-table td { display: block; width: auto; }
  .env-cfg-table tr {
    padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
  }
  .env-cfg-table tr:last-child { border-bottom: none; }
  .env-cfg-table td { border-bottom: none; padding: 2px 0; }
  .env-cfg-valcell, .env-cfg-kv-key { width: auto; }
  .env-cfg-srccell { white-space: normal; }
  .env-cfg-footer > .create-poc-btn { flex: 1 1 100%; }
}

/* POC detail header: per-stack environment status list (poc_stacks rows) */
.poc-detail-env-stacks { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.poc-detail-env-stack-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px;
}
.poc-detail-env-stack-name { font-weight: 600; color: var(--fg); }
.poc-detail-env-stack-row .pl-stack-chip { font-size: 11px; padding: 3px 8px; }
.poc-detail-env-error {
  font-size: 12px; color: var(--danger);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}