/* Airbrx Deploy, styled as an Airbrx console page (signal/website/styleguide, "Product").
   Tokens are the console's (airbrx-admin/lib/style.css). Status colors are the brand guide's
   tokens; warn has none in the guide, so it's an amber kept well away from brand orange, because
   orange never means warning. Inter is named first but not loaded, the same as on the website and
   in the console (an open decision in the guide); the CSP also keeps every asset same-origin. */

:root {
  --accent: #fd6c1d;
  --accent-hover: #ff8c42;
  --accent-gradient: linear-gradient(135deg, #fd6c1d 0%, #ff8c42 100%);
  --accent-shadow: rgba(253, 108, 29, .25);
  --accent-shadow-strong: rgba(253, 108, 29, .35);
  --text: #505050;
  --text-strong: #1a1a1a;
  --muted: #8a8a8a;
  --bg: #f6f6f7;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --code-bg: #f1f1f2;
  --border: rgba(0, 0, 0, .09);
  --border-strong: rgba(0, 0, 0, .16);
  --shadow: rgba(0, 0, 0, .06);
  --shadow-strong: rgba(0, 0, 0, .10);
  --hover-bg: rgba(253, 108, 29, .08);
  --ok: #1f7d5c;
  --ok-soft: rgba(31, 125, 92, .11);
  --stop: #a33b2a;
  --stop-soft: rgba(163, 59, 42, .10);
  --warn: #8a6100;
  --warn-soft: rgba(184, 134, 11, .13);
  --idle-soft: rgba(0, 0, 0, .05);
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --motion: 200ms var(--ease);
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}

html.dark-mode {
  --text: #e0e0e0;
  --text-strong: #ffffff;
  --muted: #a0a0a0;
  --bg: #1a1a1a;
  --card-bg: #242424;
  --input-bg: #2a2a2a;
  --code-bg: #2a2a2a;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .15);
  --shadow: rgba(0, 0, 0, .3);
  --shadow-strong: rgba(0, 0, 0, .4);
  --hover-bg: rgba(253, 108, 29, .15);
  --ok: #4fbf94;
  --ok-soft: rgba(79, 191, 148, .13);
  --stop: #e2735c;
  --stop-soft: rgba(226, 115, 92, .13);
  --warn: #e3b341;
  --warn-soft: rgba(227, 179, 65, .13);
  --idle-soft: rgba(255, 255, 255, .07);
  color-scheme: dark;
}

/* No-JS fallback: theme.js always sets a class, so this only applies without it. */
@media (prefers-color-scheme: dark) {
  html:not(.light-mode):not(.dark-mode) {
    --text: #e0e0e0; --text-strong: #ffffff; --muted: #a0a0a0; --bg: #1a1a1a; --card-bg: #242424;
    --input-bg: #2a2a2a; --code-bg: #2a2a2a; --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .15); --shadow: rgba(0, 0, 0, .3); --hover-bg: rgba(253, 108, 29, .15);
    --ok: #4fbf94; --ok-soft: rgba(79, 191, 148, .13); --stop: #e2735c; --stop-soft: rgba(226, 115, 92, .13);
    --warn: #e3b341; --warn-soft: rgba(227, 179, 65, .13); --idle-soft: rgba(255, 255, 255, .07);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono, .hash { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--code-bg); border-radius: 4px; padding: 1px 5px; color: var(--text-strong); }
.muted { color: var(--muted); }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }

/* ===== Header: white bar, logo left, nav pills, utilities right ===== */
.app-header { background: var(--card-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.app-header-inner { display: flex; align-items: center; gap: 16px; padding: 14px 24px; max-width: 1400px; margin: 0 auto; flex-wrap: wrap; }
.app-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--text-strong); }
.app-brand:hover { text-decoration: none; }
.app-brand-logo { height: 32px; width: auto; }
.logo-dark { display: none; }
html.dark-mode .logo-light { display: none; }
html.dark-mode .logo-dark { display: block; }
/* The product name is part of the logo, not a menu item: the eyebrow style, not the nav's. */
.app-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.app-nav-link { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: 14px; transition: var(--motion); }
.app-nav-link:hover { background: var(--hover-bg); color: var(--accent); text-decoration: none; }
.app-nav-link.active { color: var(--text-strong); background: var(--hover-bg); }
/* A display rule outranks the hidden attribute: these say it again. */
.app-nav-link[hidden], .wz-group[hidden], .field[hidden], #add-client[hidden], [data-supplied-on][hidden], [data-supplied-off][hidden] { display: none; }
.supplied-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 8px; display: grid; gap: 8px; }
.supplied-row.off { background: var(--code-bg); }
.supplied-row.off .field-label.mono { text-decoration: line-through; opacity: .7; }
.supplied-row .card-row { flex-wrap: wrap; gap: 8px; }
.needs-attention { outline: 2px solid var(--warn); outline-offset: 2px; border-radius: 6px; }
.modal.modal-wide { width: min(780px, calc(100vw - 32px)); }
.app-utility { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.source { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* The theme toggle: a 32px round outline button with a half-circle icon. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 999px;
  background: transparent; border: 1px solid var(--border-strong); color: var(--muted);
  cursor: pointer; transition: var(--motion);
}
.theme-toggle:hover { color: var(--text-strong); background: var(--hover-bg); border-color: var(--accent); }

/* ===== Page ===== */
.page { padding: 32px 24px 64px; max-width: 1400px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head > div:first-child { flex: 1; min-width: 260px; }
.page-title { margin: 0 0 4px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.2; }
.page-subtitle { margin: 0; color: var(--muted); font-size: 16px; }
.label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 32px 0 10px; }
.back { display: inline-block; margin-bottom: 12px; font-weight: 600; font-size: 14px; }

/* ===== Controls ===== */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar label { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 14px; }
.spacer { flex: 1; }
select, input[type=search] { font: inherit; font-size: 14px; color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; max-width: 100%; }
select:focus, input:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=checkbox] { accent-color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; transition: var(--motion); white-space: nowrap; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 2px 8px var(--accent-shadow); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 16px var(--accent-shadow-strong); }
.btn-secondary { border-color: var(--border-strong); color: var(--text-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--accent); color: var(--accent); }
/* Leads to removing something: a warning, not the page's main action. */
.btn-warn { border-color: var(--stop); color: var(--stop); background: var(--stop-soft); }
.btn-warn:hover:not(:disabled) { background: var(--stop); border-color: var(--stop); color: #fff; }
/* A row action: an orange link that does something. */
.link-action { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; }
.link-action:hover:not(:disabled) { text-decoration: underline; }
.link-action:disabled { color: var(--muted); cursor: default; }

/* ===== Cards and tables ===== */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 2px 8px var(--shadow); }
.card-pad { padding: 20px 24px; }
.table-card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 14px; }
th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; background: var(--code-bg); }
thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
thead tr:first-child th:last-child { border-top-right-radius: var(--radius-lg); }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--text-strong); font-weight: 600; }
tr.clickable { cursor: pointer; transition: background var(--motion); }
tr.clickable:hover td { background: var(--hover-bg); }
.nowrap { white-space: nowrap; }
td.num, th.num { text-align: right; }
.branch { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot { margin: 12px 4px 0; font-size: 13px; color: var(--muted); }

/* ===== Pills: status is always a soft tinted pill with a word; tags are the orange tint ===== */
.pill, .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill { background: var(--idle-soft); color: var(--muted); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.stop { background: var(--stop-soft); color: var(--stop); }
.tag { background: var(--hover-bg); color: var(--accent); }
.tag.off { background: var(--idle-soft); color: var(--muted); text-decoration: line-through; }
.pills { display: flex; gap: 4px; flex-wrap: wrap; }

/* ===== Entry page ===== */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; font-size: 14px; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; color: var(--text-strong); }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.card-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.findings { list-style: none; margin: 0; padding: 0; }
.findings li { display: flex; gap: 12px; padding: 4px 0; align-items: flex-start; font-size: 14px; }
.findings .lvl { flex: none; width: 40px; padding-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lvl.ok { color: var(--ok); }
.lvl.warn { color: var(--warn); }
.lvl.error { color: var(--stop); }
.verify-artifact { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.verify-artifact-head { margin-bottom: 4px; font-size: 14px; }

.notice { padding: 12px 16px; border-radius: var(--radius); margin: 0 0 16px; font-size: 14px; }
.notice.stop { background: var(--stop-soft); color: var(--stop); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.empty { padding: 32px 24px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--text-strong); font-size: 16px; margin-bottom: 4px; }

details > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
pre { margin: 12px 0 0; padding: 16px; overflow: auto; background: var(--code-bg); border-radius: var(--radius); font: 12px/1.55 var(--mono); color: var(--text-strong); max-height: 560px; }

/* ===== Components tabs, new environment ===== */
.subtabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.subtabs a { padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; }
.subtabs a:hover { color: var(--accent); text-decoration: none; }
.subtabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.new-env { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.new-env[hidden] { display: none; }
.new-env .problem { flex-basis: 100%; }

/* ===== Plan a deploy ===== */
.btn-sm { padding: 4px 10px; font-size: 13px; }
.file-btn { cursor: pointer; }
.small { font-size: 12.5px; }
input[type=text] { font: inherit; font-size: 14px; color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; width: 100%; min-width: 0; }
input[type=text]::placeholder { color: var(--muted); }
.plan-env { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.plan-status-field { margin-left: auto; }
.label-row { display: flex; align-items: baseline; gap: 12px; }
.label-row .label { flex: 1; }
.value-cell { min-width: 280px; }
.value-cell .link-action { margin-top: 4px; }
.problem { color: var(--stop); margin-top: 2px; }
tr.excluded td { opacity: .5; }
tr.excluded td:first-child { opacity: 1; }
td .findings { margin-top: 6px; }
td .pill + .pills, td > div > .pill { margin-top: 6px; }
details.resolved { margin-top: 12px; }
details.resolved > summary { color: var(--text-strong); }
details.resolved .table-card { margin-top: 12px; }

/* Segmented toggle: the active option takes the nav's orange tint, not the gradient (one per screen). */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input-bg); }
.seg button { font: inherit; font-size: 14px; font-weight: 600; padding: 6px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; transition: var(--motion); white-space: nowrap; }
.seg button:hover:not(:disabled):not(.on) { color: var(--accent); }
.seg button.on { background: var(--hover-bg); color: var(--text-strong); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.seg-sm button { font-size: 13px; padding: 4px 10px; }

/* ===== Plan diagram ===== */
.diagram-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-top: 20px; }
.diagram-card { padding: 8px; }
.diagram-scroll { overflow: auto; }
.diagram-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 16px 12px; }
.diagram-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 22px; border-top: 2px solid var(--muted); }
.lg-wiring { border-top-style: dashed; }
.lg-access { border-top-width: 1px; }
.diagram-panel { position: sticky; top: 84px; }
.diagram-panel h2 { margin: 0 0 8px; font-size: 18px; color: var(--text-strong); }
.diagram-panel .meta { margin: 12px 0; }
.panel-sub { margin: 0 0 12px; }
.panel-foot { margin: 16px 0 0; }
.diagram-panel .missing-group h3 { margin-top: 0; }
/* The sidebar is narrow: each finding takes the full width, Accept sits under its text, and the
   row itself is the Resolve affordance (no hidden label taking up width). */
.diagram-panel .finding-item { flex-direction: column; align-items: stretch; gap: 2px; }
.diagram-panel .finding-item > .finding-btn { flex: none; width: 100%; }
.diagram-panel .resolve-cta { display: none; }
.diagram-panel .accept-btn { align-self: flex-start; margin: 0 0 8px 62px; }
.eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.panel-actions a.btn:hover { text-decoration: none; }

.plan-diagram { display: block; font-family: var(--sans); max-width: 100%; height: auto; margin: 0 auto; }
.plan-diagram .node { cursor: pointer; outline: none; }
.plan-diagram .node rect { fill: var(--card-bg); stroke: var(--border-strong); stroke-width: 1; transition: stroke var(--motion), opacity var(--motion); }
.plan-diagram .node .lid { fill: none; stroke: var(--border-strong); }
.plan-diagram .node-users rect { fill: var(--code-bg); }
.plan-diagram .node-ingress rect { fill: var(--code-bg); stroke-dasharray: 4 3; }
.plan-diagram .node-bucket rect { fill: var(--ok-soft); }
.plan-diagram .node-label { font-size: 14px; font-weight: 700; fill: var(--text-strong); }
.plan-diagram .node-sub { font-size: 12px; fill: var(--muted); }
.plan-diagram .node-mark { font-size: 11px; font-style: italic; fill: var(--muted); }
.plan-diagram .gateway rect { fill: url(#gateway-fill); stroke: #e25a10; }
.plan-diagram .gateway .node-label, .plan-diagram .gateway .node-sub { fill: #ffffff; }
.plan-diagram .node:hover rect, .plan-diagram .node:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.plan-diagram .node.selected rect { stroke: var(--accent); stroke-width: 2.5; }
.plan-diagram .node.excluded rect { fill: none; stroke-dasharray: 4 3; }
.plan-diagram .node.excluded text { opacity: .6; }
.plan-diagram .dot-error { fill: var(--stop); }
.plan-diagram .dot-warn { fill: var(--warn); }
.plan-diagram .edge path { fill: none; stroke: var(--muted); stroke-width: 1.5; transition: stroke var(--motion), opacity var(--motion); }
.plan-diagram .edge-wiring path { stroke-dasharray: 5 4; }
.plan-diagram .edge-access path { stroke-width: 1; }
.plan-diagram .edge text { font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: var(--card-bg); stroke-width: 4px; stroke-linejoin: round; }
.plan-diagram .edge.on path { stroke: var(--accent); stroke-width: 2; }
.plan-diagram .edge.on text { fill: var(--accent); font-weight: 600; }
.plan-diagram .arrow { fill: var(--muted); }
.plan-diagram .arrow-on { fill: var(--accent); }
.plan-diagram .dim { opacity: .3; }
tr.flash td { background: var(--hover-bg); transition: background 1.2s var(--ease); }
.plan-diagram .count circle { stroke: var(--card-bg); stroke-width: 2; }
.plan-diagram .count-error circle { fill: var(--stop); }
.plan-diagram .count-warn circle { fill: var(--warn); }
.plan-diagram .count text { font-size: 11px; font-weight: 700; fill: #ffffff; }
html.dark-mode .plan-diagram .count text { fill: #1a1a1a; }

/* ===== Import ===== */
.import-panel { margin-top: 20px; }
.card-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.import-panel .toolbar { margin: 12px 0 0; }
.import-panel .notice { margin: 12px 0 0; }
.notice.ok-note { background: var(--ok-soft); color: var(--ok); }
.source-note { margin-top: 4px; color: var(--muted); }
.omit { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); cursor: pointer; }
.secret-editor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.secret-editor[hidden] { display: none; }
.secret-editor input { flex: 1; min-width: 200px; font: inherit; font-size: 14px; color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; }

/* ===== Issues tab and resolving ===== */
.issues { margin-top: 20px; }
.issues-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tab-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: #ffffff; }
.tab-count.stop { background: var(--stop); }
.tab-count.warn { background: var(--warn); }
html.dark-mode .tab-count { color: #1a1a1a; }

.findings li:has(> .finding-btn) { padding: 0; }
.finding-item { display: flex; align-items: flex-start; gap: 8px; }
.finding-item > .finding-btn { flex: 1; min-width: 0; margin: 0; }
.accept-btn { flex: none; margin-top: 6px; }
.decision { padding: 6px 0; align-items: baseline; }
.decision .lvl { flex: none; width: 40px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.decision .finding-body { display: block; flex: 1; min-width: 0; }
.decision .fix { display: block; }
.decisions { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--border); }
.accept-rows .omit { margin-top: 2px; color: var(--text); }
.finding-btn { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 8px 10px; margin: 0 -10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; color: inherit; text-align: left; cursor: pointer; transition: background var(--motion); }
.finding-btn:hover, .finding-btn:focus-visible { background: var(--hover-bg); }
.finding-btn .lvl { flex: none; width: 48px; white-space: nowrap; padding-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.finding-btn .finding-body, .modal-findings .finding-body { display: block; flex: 1; min-width: 0; }
.finding-msg { display: block; color: var(--text-strong); }
.finding-names { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.finding-btn .fix, .modal-findings .fix { display: block; }
.resolve-cta { flex: none; font-size: 13px; font-weight: 600; color: var(--accent); opacity: 0; transition: opacity var(--motion); }
.finding-btn:hover .resolve-cta, .finding-btn:focus-visible .resolve-cta { opacity: 1; }

.modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, .25); }
.modal::backdrop { background: rgba(20, 20, 20, .45); }
.modal-inner { display: flex; flex-direction: column; max-height: calc(100vh - 66px); }
.modal-head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 8px; }
.modal-head > div { flex: 1; min-width: 0; }
.modal-head h2 { margin: 0; font-size: 18px; line-height: 1.35; color: var(--text-strong); overflow-wrap: anywhere; }
.modal-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.modal-x:hover { background: var(--hover-bg); color: var(--text-strong); }
.modal-body { padding: 8px 24px 4px; overflow: auto; }
.modal-error { margin: 8px 24px 0; }
.modal-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 16px 24px 20px; border-top: 1px solid var(--border); margin-top: 16px; }
.modal-findings { margin-bottom: 12px; }
.resolve-row { padding: 12px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.resolve-row:first-child { border-top: 0; }
.resolve-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text-strong); }
.resolve-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.resolve-tools .omit { margin-top: 0; }
.modal input[type=text], .modal input[type=password], .modal select { width: 100%; font: inherit; font-size: 14px; color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; }
.modal input:disabled { opacity: .5; }

/* ===== What's missing ===== */
.missing-group { margin-top: 16px; }
.missing-group h3, .panel-h { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.panel-h { margin-top: 16px; }
.finding-body { flex: 1; min-width: 0; }
.fix { margin-top: 2px; font-size: 13px; color: var(--muted); }
.fix::before { content: 'Fix: '; font-weight: 600; color: var(--text); }
.findings .link-action { flex: none; }

@media (max-width: 1100px) {
  .diagram-layout { grid-template-columns: 1fr; }
  .diagram-panel { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .btn:hover:not(:disabled) { transform: none; }
}

@media (max-width: 720px) {
  .app-header-inner { padding: 12px 16px; gap: 10px; }
  .app-utility { margin-left: 0; width: 100%; justify-content: space-between; }
  .page { padding: 20px 16px 48px; }
  .page-title { font-size: 26px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* Docker host ports in the component dialog */
.port-field { display: inline-flex; align-items: center; gap: 8px; margin: 4px 16px 4px 0; font-family: var(--mono); font-size: 13px; }
.port-field input { width: 7.5em; }

/* Sign-in and people */
/* Sign-in and waiting cards: the console's sign-in layout (airbrx-admin .login-view). */
.signin { max-width: 420px; margin: 64px auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; box-shadow: 0 24px 48px var(--shadow-strong); }
.signin-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.signin-head .eyebrow { margin: 4px 0 0; }
.signin-logo { height: 64px; width: auto; }
.signin-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-strong); }
.signin-text { margin: 0; color: var(--muted); font-size: 14px; max-width: 320px; }
.signin-foot { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.signin-foot:empty { display: none; }
.google-button { display: flex; justify-content: center; min-height: 44px; }
/* Google's frame declares no color-scheme, so under the page's dark scheme the browser paints it an
   opaque white backdrop, hiding the dark button's white text. Light here keeps the frame transparent. */
.google-button iframe { color-scheme: light; }
/* Google's placeholder until its frame loads, in case its stylesheet doesn't arrive: an icon, not a poster. */
.google-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.google-button [role=button] { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.account { display: inline-flex; align-items: center; gap: 10px; }
.account-email { font-size: 13px; color: var(--muted); }
tr.row-warn td { background: var(--warn-soft); }
td input[data-u-envs] { width: 100%; min-width: 180px; }

/* While a change is saving: the page says so (the Save button reads "Saving…"). */
#view[aria-busy="true"], #view[aria-busy="true"] button, #view[aria-busy="true"] select { cursor: progress; }

/* Before/after of a rename: compact, and long values wrap rather than widen the dialog. */
.changes th, .changes td { padding: 6px 8px; font-size: 13px; }
.changes td { overflow-wrap: anywhere; }

/* Environments, releases and targets */
.card-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.card-row .card-title { margin: 0; }
.card-row .field.grow { flex: 1; min-width: 220px; }
.card .card-title + p { margin-top: 0; }
.stack-gap { margin-top: 20px; }
input[type=number] { font: inherit; font-size: 14px; color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; width: 9em; }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
.inherit-add { margin-top: 12px; }
.override { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.override .field { flex: 1; min-width: 260px; }
.override .problem { flex-basis: 100%; }
.location-card { margin-bottom: 16px; }
.location-card .meta { margin-top: 12px; }
.connect-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.connect-panel p { margin: 0; }
.connect-step pre { max-height: 240px; white-space: pre-wrap; overflow-wrap: anywhere; }
.connect-panel a.btn:hover, .toolbar a.btn:hover { text-decoration: none; }
.target-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; }
.target-form .panel-h { margin-top: 24px; }
.loc-row { padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.loc-row .link-action { margin-top: 8px; }
.form-actions { margin: 20px 0 0; }
td .fix { display: block; }

/* Setting up a target (#/targets/new): steps across the top, one card per step, Back and Next under it. */
.wz-steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0 0 16px; padding: 0; }
.wz-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--idle-soft); }
.wz-steps .wz-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-size: 12px; background: var(--card-bg); color: var(--muted); }
.wz-steps li.done { color: var(--text-strong); }
.wz-steps li.done .wz-n { background: var(--ok-soft); color: var(--ok); }
.wz-steps li.on { color: var(--text-strong); background: var(--hover-bg); }
.wz-steps li.on .wz-n { background: var(--accent); color: #fff; }
.wz-card { display: flex; flex-direction: column; gap: 12px; }
.wz-card p { margin: 0; }
.wz-actions { margin-top: 16px; }
.wz-actions a.btn:hover { text-decoration: none; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.choice { display: flex; flex-direction: column; gap: 4px; padding: 16px; text-align: left; font: inherit; color: var(--text); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; transition: var(--motion); }
.choice strong { color: var(--text-strong); font-size: 15px; }
.choice:hover:not(:disabled) { border-color: var(--accent); background: var(--hover-bg); }
.choice.on { border-color: var(--accent); background: var(--hover-bg); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice:disabled { opacity: .45; cursor: not-allowed; }
.wz-regions { gap: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--hover-bg); color: var(--text-strong); font-size: 13px; }
.chip-x { width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.chip-x:hover, .chip-x:focus-visible { background: var(--card-bg); color: var(--stop); }
.wz-region-add { margin-top: 0; align-items: center; }
.wz-region-add input { flex: 1; min-width: 220px; max-width: 360px; }
.wz-script { max-height: 360px; white-space: pre; }
.wz-pick { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
.wz-pick input { flex: none; }
.wz-group { display: flex; flex-direction: column; gap: 6px; }
#wz-paste { min-height: 160px; }
.wz-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border); }
.wz-row input, .wz-row textarea { max-width: 560px; }
.wz-card textarea { font: 12.5px/1.5 var(--mono); color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; width: 100%; resize: vertical; }
.wz-card .seg { flex-wrap: wrap; }

/* The plan's "Create and apply default values": one big action for every missing value with a default. */
.plan-defaults { display: flex; align-items: center; gap: 24px; margin: 0 0 24px; border-left: 4px solid var(--accent); }
.plan-defaults-text { flex: 1; min-width: 0; }
.plan-defaults-text p { margin: 6px 0 0; }
.btn-lg { padding: 14px 24px; font-size: 16px; white-space: nowrap; }
@media (max-width: 720px) { .plan-defaults { flex-direction: column; align-items: stretch; } }

/* Provisioning, in a diagram panel: what has to exist in AWS, and what's there. Quiet: not a blocker. */
.provision-list { list-style: none; margin: 0 0 12px; padding: 0; }
.provision-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border, rgba(0,0,0,.08)); }
.provision-list li:first-child { border-top: 0; }
.provision-list .pv-what { flex: 1; min-width: 0; }
.provision-list .pv-what .muted { display: block; overflow-wrap: anywhere; }
.provision-list .pill { white-space: nowrap; }

/* ===== A deployment's steps ===== */
.steps { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.steps li { line-height: 1.5; }
.step-detail { margin: 2px 0 0; overflow-wrap: anywhere; }
.steps-details summary { cursor: pointer; color: var(--accent); margin-top: 4px; }
.plain-list { margin: 8px 0; padding-left: 18px; }
.log { max-height: 60vh; overflow: auto; margin: 0; padding: 12px; border-radius: 8px; background: var(--hover-bg); font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The plan's Infrastructure view: where it goes, what lands where, and each resource checked. */
.infra-where { margin-bottom: 18px; }
.infra-list { padding: 0; }
.infra-row { border-top: 1px solid var(--border, rgba(0,0,0,.08)); }
.infra-row:first-child { border-top: 0; }
.infra-row > summary { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) minmax(0, 140px) auto; gap: 4px 12px; align-items: baseline; padding: 10px 16px; cursor: pointer; list-style: none; }
.infra-row > summary::-webkit-details-marker { display: none; }
.infra-row > summary:hover { background: var(--idle-soft); }
.infra-name { overflow-wrap: anywhere; }
.infra-status { justify-self: end; }
.infra-detail { grid-column: 2 / -1; overflow-wrap: anywhere; }
.infra-more { padding: 0 16px 14px; }
.infra-more p { margin: 4px 0 8px; }
.infra-spec { width: 100%; border-collapse: collapse; font-size: 13px; }
.infra-spec th, .infra-spec td { text-align: left; padding: 4px 8px 4px 0; vertical-align: top; border-top: 1px solid var(--border, rgba(0,0,0,.06)); }
.infra-spec th { font-weight: 600; color: var(--muted); }
td.wrap, .wrap { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 720px) {
  .infra-row > summary { grid-template-columns: 1fr auto; }
  .infra-kind, .infra-app { grid-column: 1 / -1; }
  .infra-detail { grid-column: 1 / -1; }
}

/* The environment's readiness tile: release, plan and target side by side, then Deploy. */
.rd-tile { margin-bottom: 18px; }
.rd-head { margin-bottom: 12px; }
.rd-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rd-part { border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 10px; padding: 12px 14px; border-top: 3px solid var(--idle-soft); }
.rd-part.ready { border-top-color: var(--ok); }
.rd-part.blocked { border-top-color: var(--stop); }
.rd-part-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-summary { margin: 6px 0 8px; font-weight: 600; }
.rd-items { list-style: none; margin: 0; padding: 0; }
.rd-items li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; overflow-wrap: anywhere; }
.rd-items li.ok, .rd-items li.info { color: var(--muted); }
.rd-fix { display: block; }
.rd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; transform: translateY(-1px); }
.rd-dot.ok { background: var(--ok); }
.rd-dot.warn { background: var(--warn); }
.rd-dot.stop { background: var(--stop); }
.rd-deploy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
/* Grey, not a faded orange, while the environment isn't ready. */
.btn-deploy:disabled { background: var(--idle-soft); color: var(--muted); box-shadow: none; opacity: 1; }
@media (max-width: 900px) { .rd-parts { grid-template-columns: 1fr; } }
.rd-title { color: inherit; }
.rd-title:hover { color: var(--accent); }
.rd-manage { display: inline-block; margin-top: 8px; font-weight: 600; }
.infra-build { margin-bottom: 18px; }

/* The deployment monitor: progress, steps and log, as a window or a page. */
.monitor-dialog { width: min(1100px, calc(100vw - 32px)); }
.monitor-dialog .modal-body { overflow: auto; }
.monitor-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.monitor-status { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pbar { height: 10px; border-radius: 999px; background: var(--idle-soft); overflow: hidden; margin: 6px 0 12px; }
.pbar-fill { height: 100%; border-radius: 999px; background: var(--accent-gradient); transition: width .6s ease; }
.pbar.ok .pbar-fill { background: var(--ok); }
.pbar.stop .pbar-fill { background: var(--stop); }
.pbar.run:not([aria-valuenow]) .pbar-fill { width: 30% !important; animation: pbar-slide 1.4s ease-in-out infinite; }
@keyframes pbar-slide { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
.mstep .pbar { height: 6px; margin: 6px 0 4px; }
.monitor-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.msteps { list-style: none; margin: 0; padding: 0; }
.mstep { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border, rgba(0,0,0,.08)); }
.mstep:first-child { border-top: 0; }
.mstep.todo, .mstep.skipped { opacity: .55; }
.mstep-body { flex: 1; min-width: 0; }
.mstep-head { display: flex; justify-content: space-between; gap: 8px; }
.mstep-detail { overflow-wrap: anywhere; margin-top: 2px; }
.mstep-icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.mstep-icon.ok { background: var(--ok-soft); color: var(--ok); }
.mstep-icon.stop { background: var(--stop-soft); color: var(--stop); }
.mstep-icon.todo { border: 2px solid var(--idle-soft); }
.mstep-icon.run { border: 2px solid var(--accent); border-right-color: transparent; animation: mstep-spin 0.9s linear infinite; }
@keyframes mstep-spin { to { transform: rotate(360deg); } }
.monitor-log .label { margin: 0 0 6px; }
.monitor-log pre.log { max-height: 460px; overflow: auto; margin: 0; }
.monitor-page .monitor-log pre.log { max-height: 70vh; }
.running-strip { margin-bottom: 18px; border-left: 4px solid var(--accent); }
.running-strip .pbar { margin-bottom: 0; }
@media (max-width: 900px) { .monitor-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pbar-fill, .mstep-icon.run, .pbar.run .pbar-fill { animation: none; transition: none; } }

/* A table cell still waiting on its own read. */
.cell-loading { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--idle-soft); border-top-color: var(--accent); animation: mstep-spin .9s linear infinite; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .cell-loading { animation: none; } }
.rd-release-ctl { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, rgba(0,0,0,.08)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rd-release-ctl .field { width: 100%; margin: 0; }
.rd-release-ctl select { width: 100%; }

/* Addresses open in a new tab, rather than being copied out of wrapped text. */
.host-link { overflow-wrap: anywhere; }
.host-open { margin-left: 6px; white-space: nowrap; }
.addresses { margin-bottom: 18px; }
.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 18px; margin: 0; }
.address-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rel-basis { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cleanup-depths { border: 0; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.cleanup-depth { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cleanup-depth input { margin-top: 3px; }
.cleanup-impact { display: block; margin-top: 2px; }
.secret-shown { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.secret-value { word-break: break-all; background: var(--hover-bg); padding: 2px 6px; border-radius: 4px; }
.client-blocking { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
#signin-problem[hidden] { display: none; }