/* SysCAD Staging — design tokens and component styles.
   Token names and values come from docs/superpowers/specs/2026-05-24-staging-dashboard-redesign-design.md. */

/* Responsive breakpoints (use ONLY these — see 2026-07-02 consistency/responsive spec):
   <=1024px  compact desktop / tablet landscape — relax wide tables + centred max-widths
   <=768px   MAIN desktop<->mobile switch — sidebar drawer, nav wrap, tables->cards, stacked grids
   <=480px   small phone — tighter spacing, full-screen modal sheets */

:root {
  --sc-blue: #2396d3;
  --sc-blue-dark: #086f99;
  --sc-text: #4B4F52;
  --sc-text-muted: #8b949e;
  --sc-text-dim: #b6bdc4;
  --sc-bg: #ffffff;
  --sc-bg-soft: #fafbfc;
  --sc-bg-softer: #f5f7f9;
  --sc-bg-hover: #f0f4f8;
  --sc-border: #eee;
  --sc-border-strong: #d0d7de;
  --sc-ok: #1f883d;
  --sc-warn: #bf8700;
  --sc-fail: #ed1c24;
  --sc-radius: 6px;
  --sc-radius-card: 8px;
  --sc-font: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --sc-mono: ui-monospace, Consolas, monospace;
  --sc-sidebar-width: 280px;
  --sc-topbar-height: 56px;
  /* spacing scale (values already used raw across the sheet) */
  --sc-space-xs: 4px;
  --sc-space-sm: 8px;
  --sc-space-md: 12px;
  --sc-space-lg: 16px;
  --sc-space-xl: 24px;
  --sc-space-2xl: 32px;
  /* type scale */
  --sc-fs-tiny: 11px;
  --sc-fs-small: 12px;
  --sc-fs-body: 13px;
  --sc-fs-h2: 18px;
  --sc-fs-h1: 26px;
  /* radius + shadow + soft state fills + touch */
  --sc-radius-pill: 999px;
  --sc-shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --sc-shadow-modal: 0 12px 32px rgba(0,0,0,0.18);
  --sc-blue-soft: rgba(35,150,211,0.12);
  --sc-fail-soft: rgba(237,28,36,0.10);
  --sc-ok-soft: rgba(31,136,61,0.12);
  --sc-warn-soft: rgba(191,135,0,0.12);
  --sc-cf-orange: #f6821f; /* semantic: "proxied through Cloudflare" (icon's bright orange) */
  --sc-cf-orange-dark: #b4560a; /* readable ink drawn from the Cloudflare logo's darker orange */
  --sc-cf-orange-soft: rgba(246,130,31,0.12);
  /* S3 browser provider accents — AWS amber, Linode green (chosen to avoid the app's blue) */
  --s3-aws: #ff9900;    --s3-aws-soft: rgba(255,153,0,0.13);  --s3-aws-ink: #a15c00;
  --s3-linode: #00a95c; --s3-linode-soft: rgba(0,169,92,0.14); --s3-linode-ink: #00794a;
  --s3-vultr: #007bfc;  --s3-vultr-soft: rgba(0,123,252,0.13); --s3-vultr-ink: #005fc4;
  --s3-wasabi: #7c3aed; --s3-wasabi-soft: rgba(124,58,237,0.13); --s3-wasabi-ink: #5b21b6; /* violet: Wasabi's own green would clash with Linode */
  --sc-touch: 44px;
}

* { box-sizing: border-box; }

/* ----- Utilities ----- */
.sc-spacer { flex: 1 1 auto; }
.sc-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease;
}
.sc-empty { padding: var(--sc-space-xl); font-size: var(--sc-fs-body); color: var(--sc-text-muted); }
.sc-alert--error {
  border: 1px solid var(--sc-fail);
  background: var(--sc-fail-soft);
  color: var(--sc-text);
  border-radius: var(--sc-radius);
  padding: var(--sc-space-md) var(--sc-space-lg);
}
.sc-text-fail { color: var(--sc-fail); }
.sc-clickable { cursor: pointer; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--sc-font);
  font-size: 13px;
  line-height: 1.5;
}

a { color: var(--sc-blue); text-decoration: none; }
a:hover { color: var(--sc-blue-dark); text-decoration: underline; }

h1 { font-size: 26px; font-weight: 300; color: var(--sc-blue-dark); margin: 0 0 12px; }
h2 { font-size: 18px; font-weight: 500; color: var(--sc-text); margin: 0 0 8px; }
h3 { font-size: 11px; font-weight: 600; color: var(--sc-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }

/* ----- Layout ----- */

.sc-app {
  display: grid;
  grid-template-rows: var(--sc-topbar-height) 1fr;
  height: 100vh;
}

.sc-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg);
  flex-shrink: 0;
}

.sc-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--sc-blue-dark);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.sc-topbar-brand-text { line-height: 1; }

.sc-topbar-nav { display: flex; gap: 4px; }
.sc-topbar-nav a {
  padding: 6px 10px;
  border-radius: var(--sc-radius);
  color: var(--sc-text);
  font-weight: 500;
}
.sc-topbar-nav a.active { background: var(--sc-bg-hover); color: var(--sc-blue-dark); }
.sc-topbar-nav a:hover { background: var(--sc-bg-hover); text-decoration: none; }
.sc-topbar-spacer { margin-left: auto; }

.sc-topbar-watcher {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  color: var(--sc-text);
  font-size: 12px;
  cursor: pointer;
}
.sc-topbar-watcher:hover { background: var(--sc-bg-hover); border-color: var(--sc-blue-dark); color: var(--sc-blue-dark); }
.sc-topbar-watcher.is-paused { color: var(--sc-warn); border-color: rgba(191,135,0,0.5); background: rgba(191,135,0,0.08); }

/* ----- User menu ----- */
.sc-user-menu { position: relative; }
.sc-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  background: var(--sc-bg);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  cursor: pointer;
  font: 12px/1 var(--sc-font);
  color: var(--sc-text);
}
.sc-user-trigger:hover { background: var(--sc-bg-hover); border-color: var(--sc-blue-dark); }
.sc-user-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sc-blue), var(--sc-blue-dark));
  color: #fff;
  font: 600 12px/24px var(--sc-font);
  text-align: center;
  text-transform: uppercase;
}
.sc-user-email {
  font: 12px/1 var(--sc-mono);
  color: var(--sc-text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-user-caret { font-size: 9px; color: var(--sc-text-muted); }
.sc-user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--sc-bg);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  z-index: 50;
  display: none;
  padding: 6px;
}
.sc-user-menu.is-open .sc-user-dropdown { display: block; }
.sc-user-dropdown-id { padding: 8px 10px 10px; border-bottom: 1px solid var(--sc-border); margin-bottom: 6px; }
.sc-user-dropdown-email { font: 12px/1.4 var(--sc-mono); color: var(--sc-text); word-break: break-all; }
.sc-user-dropdown-action {
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--sc-radius);
  cursor: pointer;
  font: 13px/1 var(--sc-font);
  color: var(--sc-text);
}
.sc-user-dropdown-action:hover { background: var(--sc-bg-hover); color: var(--sc-fail); }

.sc-body {
  display: grid;
  grid-template-columns: var(--sc-sidebar-width) 1fr;
  overflow: hidden;
  transition: grid-template-columns 0.18s ease;
  position: relative;
}
/* ----- Sidebar ----- */

.sc-sidebar {
  border-right: 1px solid var(--sc-border);
  background: var(--sc-bg-soft);
  overflow-y: auto;
  padding: 12px 0;
}

.sc-sidebar-header { padding: 0 14px 10px; display: flex; align-items: center; gap: 6px; }
.sc-sidebar-header h3 { margin: 0; flex: 1; }
.sc-sidebar-refresh {
  background: none;
  border: 1px solid transparent;
  color: var(--sc-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--sc-radius);
  font-size: 12px;
}
.sc-sidebar-refresh:hover { background: var(--sc-bg-hover); color: var(--sc-blue-dark); }

.sc-sidebar-filter {
  margin: 0 12px 10px;
  width: calc(100% - 24px);
  padding: 5px 9px;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  font-family: inherit;
  font-size: 12px;
  background: var(--sc-bg);
}
.sc-sidebar-filter:focus { outline: none; border-color: var(--sc-blue); }

.sc-sidebar-group { margin-bottom: 12px; }
.sc-sidebar-group-header {
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-left: 2px solid transparent;
}
.sc-sidebar-group.is-active-group .sc-sidebar-group-header {
  color: var(--sc-blue-dark);
  border-left-color: var(--sc-blue);
  background: rgba(35,150,211,0.06);
}

.sc-sidebar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
}
.sc-sidebar-row:hover { background: var(--sc-bg-hover); }
.sc-sidebar-row.is-active { background: var(--sc-bg-hover); border-left-color: var(--sc-blue); color: var(--sc-blue-dark); font-weight: 500; }
.sc-sidebar-row-branch-key { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sidebar-row-age { font-size: 11px; color: var(--sc-text-muted); font-family: var(--sc-mono); }
.sc-sidebar-row-chip { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }

.sc-sidebar-empty { padding: 10px 14px; color: var(--sc-text-muted); font-size: 12px; font-style: italic; }

.sc-sidebar-hidden-note {
  margin: 6px 12px 14px;
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px dashed var(--sc-border-strong);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  color: var(--sc-text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  cursor: help;
}
.sc-sidebar-hidden-num {
  font: 600 13px/1 var(--sc-mono);
  color: var(--sc-text);
  font-variant-numeric: tabular-nums;
}
.sc-sidebar-hidden-text { text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }

/* ----- Status chips ----- */

.sc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.sc-chip-running { background: rgba(31,136,61,0.10); color: var(--sc-ok); }
.sc-chip-building { background: rgba(191,135,0,0.14); color: var(--sc-warn); }
.sc-chip-failed { background: rgba(237,28,36,0.12); color: var(--sc-fail); }
.sc-chip-pending { background: rgba(35,150,211,0.10); color: var(--sc-blue-dark); }
.sc-chip-idle { background: rgba(139,148,158,0.10); color: var(--sc-text-muted); }
.sc-chip-manual { background: rgba(139,148,158,0.10); color: var(--sc-text-muted); border: 1px dashed var(--sc-border-strong); }

/* ----- Detail pane ----- */

.sc-detail { overflow-y: auto; padding: 20px 28px; background: var(--sc-bg); }
.sc-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--sc-text-muted);
  font-size: 14px;
}

.sc-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sc-border);
  margin-bottom: 18px;
}
.sc-detail-header h1 { font-size: 24px; margin: 0 0 4px; }
.sc-detail-header-meta {
  flex: 1;
  font-size: 12px;
  color: var(--sc-text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-detail-header-meta-line { font-family: var(--sc-mono); }
.sc-detail-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ----- Buttons ----- */

.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--sc-radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--sc-bg);
  color: var(--sc-text);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease, color 0.08s ease, border-color 0.08s ease;
}

.sc-btn-primary {
  background: var(--sc-blue);
  border-color: var(--sc-blue);
  color: #fff;
  box-shadow: 0 1px 0 rgba(8,111,153,0.18);
}
.sc-btn-primary:hover { background: var(--sc-blue-dark); border-color: var(--sc-blue-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 0 rgba(8,111,153,0.22); }
/* A button can be an <a> (e.g. the S3 Download link), so the global a:hover rule
   would recolour the label to blue-dark — the same as the hovered background —
   and underline it. Keep the label the button's own colour and drop the underline. */
a.sc-btn:hover { text-decoration: none; }

.sc-btn-secondary { background: var(--sc-bg); border-color: var(--sc-border-strong); color: var(--sc-text); }
.sc-btn-secondary:hover { border-color: var(--sc-blue-dark); color: var(--sc-blue-dark); background: var(--sc-bg-hover); }

.sc-btn-danger { background: var(--sc-bg); border-color: rgba(237,28,36,0.35); color: var(--sc-fail); }
.sc-btn-danger:hover { background: var(--sc-fail); border-color: var(--sc-fail); color: #fff; }

.sc-btn-ghost { background: transparent; border-color: transparent; color: var(--sc-text-muted); padding: 3px 8px; }
.sc-btn-ghost:hover { background: var(--sc-bg-hover); color: var(--sc-blue-dark); }

/* Live-build button — solid fill coloured by the branch's live build state:
   blue when serving, amber while building, red when failed, neutral when idle. */
.sc-btn-live { color: #fff; font-weight: 600; position: relative; isolation: isolate; }
/* The button is an <a>, so the global a:hover colour would tint the label —
   keep it white on hover for every variant. */
.sc-btn-live:hover { transform: translateY(-1px); color: #fff; text-decoration: none; }
.sc-btn-live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.sc-btn-live-running { background: var(--sc-blue); border-color: var(--sc-blue); box-shadow: 0 1px 0 rgba(8,111,153,0.18); }
.sc-btn-live-running:hover { background: var(--sc-blue-dark); border-color: var(--sc-blue-dark); box-shadow: 0 3px 0 rgba(8,111,153,0.22); }
.sc-btn-live-building { background: var(--sc-warn); border-color: var(--sc-warn); box-shadow: 0 1px 0 rgba(191,135,0,0.20); }
.sc-btn-live-building:hover { filter: brightness(.94); }
.sc-btn-live-building .sc-btn-live-dot { animation: sc-build-spin 1.1s linear infinite; box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.sc-btn-live-failed { background: var(--sc-fail); border-color: var(--sc-fail); box-shadow: 0 1px 0 rgba(237,28,36,0.20); }
.sc-btn-live-failed:hover { filter: brightness(.94); }
.sc-btn-live-idle { background: var(--sc-text-muted); border-color: var(--sc-text-muted); }
.sc-btn-live-idle:hover { filter: brightness(.94); }

/* An active (running/building) button breathes a soft coloured glow that fades
   in and out. The glow is a pseudo-element halo whose opacity is animated —
   opacity is compositor-driven, so the pulse stays smooth and obviously moving
   (animating box-shadow directly repaints on the main thread and reads static). */
.sc-btn-live-running::after,
.sc-btn-live-building::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: sc-live-pulse 1.6s ease-in-out infinite;
}
.sc-btn-live-running::after { box-shadow: 0 0 18px 4px rgba(35,150,211,0.85); }
.sc-btn-live-building::after { box-shadow: 0 0 18px 4px rgba(191,135,0,0.85); }
@keyframes sc-live-pulse { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sc-btn-live-building .sc-btn-live-dot { animation: none; }
  .sc-btn-live-running::after, .sc-btn-live-building::after { animation: none; opacity: 0.6; }
}

.sc-btn-sm { padding: 3px 8px; font-size: 11px; gap: 4px; }
.sc-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.sc-pipe-kill { margin-left: auto; }

/* ----- Card chrome (shared by pipe / overview / db / host cards) ----- */

.sc-card-header { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.sc-card-title { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); }
.sc-card-spacer { margin-left: auto; }
.sc-card-meta { font-size: 11px; font-family: var(--sc-mono); color: var(--sc-text-muted); }

/* ----- Pipeline: flat indented step tree + persistent log pane ----- */

.sc-pipe { border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card); background: var(--sc-bg); margin-bottom: 18px; overflow: hidden; }

/* When the build succeeded, the pipeline card collapses behind a summary row.
   summary already provides cursor:pointer; we hide the default disclosure
   triangle and use our own chevron so the row stays flush with the card grid. */
.sc-pipe.is-collapsible > summary { list-style: none; cursor: pointer; user-select: none; }
.sc-pipe.is-collapsible > summary::-webkit-details-marker { display: none; }
.sc-pipe.is-collapsible:not([open]) { border-color: rgba(31,136,61,0.45); background: rgba(31,136,61,0.04); }
.sc-pipe.is-collapsible:not([open]) > summary { border-bottom: 0; }
.sc-pipe-summary-chevron {
  display: inline-block;
  width: 12px;
  color: var(--sc-text-muted);
  font-size: 10px;
  transform: rotate(0deg);
  transition: transform 0.18s ease;
}
.sc-pipe[open] > summary .sc-pipe-summary-chevron { transform: rotate(90deg); }
.sc-pipe-summary-ok {
  font: 600 10.5px/1 var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(31,136,61,0.12);
  color: var(--sc-ok);
}
.sc-pipe.is-collapsible:not([open]) > summary .pipeline-job-status {
  color: var(--sc-text-muted);
  font-style: italic;
  font-size: 11px;
}

@keyframes sc-pipe-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.sc-pipe-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 380px;
}

.sc-pipe-tree-wrap {
  border-right: 1px solid var(--sc-border);
  background: var(--sc-bg);
  overflow-y: auto;
  max-height: 560px;
  padding: 6px 0 10px;
}

.sc-pipe-tree {
  display: flex;
  flex-direction: column;
}

.sc-pipe-node {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .1s ease, border-color .1s ease;
}
.sc-pipe-node:hover { background: var(--sc-bg-hover); }
.sc-pipe-node.is-selected { background: rgba(35,150,211,0.10); border-left-color: var(--sc-blue); }

.sc-pipe-node-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sc-pipe-node.is-ok      .sc-pipe-node-dot { background: var(--sc-ok); }
.sc-pipe-node.is-running .sc-pipe-node-dot { background: var(--sc-warn); animation: sc-pipe-pulse 1.4s ease-in-out infinite; }
.sc-pipe-node.is-fail    .sc-pipe-node-dot { background: var(--sc-fail); }
.sc-pipe-node.is-pending .sc-pipe-node-dot { background: var(--sc-border-strong); color: var(--sc-text-muted); }
.sc-pipe-node.is-skipped .sc-pipe-node-dot { background: transparent; border: 1px dashed var(--sc-border-strong); color: var(--sc-text-muted); }

.sc-pipe-node-title {
  color: var(--sc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sc-pipe-node[data-depth="0"] .sc-pipe-node-title { font-weight: 600; }
.sc-pipe-node.is-pending .sc-pipe-node-title { color: var(--sc-text-muted); }
.sc-pipe-node.is-skipped .sc-pipe-node-title { color: var(--sc-text-muted); font-style: italic; }
.sc-pipe-node.is-fail .sc-pipe-node-title { color: var(--sc-fail); }

.sc-pipe-node-dur {
  font-family: var(--sc-mono);
  font-size: 10.5px;
  color: var(--sc-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.sc-pipe-expand {
  background: #0d1117;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sc-pipe-expand-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: #161b22;
  color: #c9d1d9;
  font-family: var(--sc-mono);
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.sc-pipe-expand-head .sc-pipe-expand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; border-radius: 50%;
  font-size: 8px; font-weight: 700; color: #fff;
  background: #2f3640;
}
.sc-pipe-expand[data-section-id=""] .sc-pipe-expand-icon { background: #2f3640; }
.sc-pipe-expand-head .sc-pipe-expand-name { color: #c9d1d9; font-weight: 500; }
.sc-pipe-expand-head .sc-pipe-expand-dur { margin-left: auto; color: #6e7681; font-size: 11px; }
.sc-pipe-expand-log {
  margin: 0;
  padding: 12px 16px 16px;
  font-family: var(--sc-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: #c9d1d9;
  background: #0d1117;
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 520px;
}
.sc-pipe-expand-log:empty::before {
  content: "Waiting for step output…";
  color: #6e7681;
  font-style: italic;
}

/* Routes block now lives inside .sc-overview (see .sc-overview-routes below). */

/* ----- Build history table ----- */

.sc-history { padding: 12px 14px; border-top: 1px solid var(--sc-border); }
.sc-history-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--sc-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sc-history-build { border-top: 1px solid var(--sc-border); cursor: pointer; }
.sc-history-build:first-child { border-top: none; }
.sc-history-build > tr > td { padding: 6px 8px; vertical-align: middle; }
.sc-history-build:hover > tr > td { background: var(--sc-bg-hover); }
.sc-history-build.is-active > tr > td { background: var(--sc-bg-hover); }
.sc-history-build.is-active { box-shadow: inset 3px 0 0 var(--sc-blue); }
.sc-history-row-primary > td { padding-top: 8px; padding-bottom: 2px; }
.sc-history-row-secondary > td { padding-top: 0; padding-bottom: 8px; }
.sc-history-status { width: 56px; text-align: center; font-family: var(--sc-mono); }
.sc-history-status-spacer { width: 56px; }
.sc-history-build-num { width: 48px; font-family: var(--sc-mono); color: var(--sc-text-muted); }
.sc-history-hash { width: 72px; font-family: var(--sc-mono); }
.sc-history-hash code { background: var(--sc-bg-subtle, rgba(0,0,0,0.04)); padding: 1px 5px; border-radius: 3px; color: var(--sc-text); }
.sc-history-time { width: 88px; text-align: right; color: var(--sc-text-muted); white-space: nowrap; }
.sc-history-msg { color: var(--sc-text); line-height: 1.35; word-break: break-word; }
.sc-history-empty { color: var(--sc-text-muted); font-style: italic; }
.sc-history-actions { width: 32px; text-align: right; }
.sc-history-actions-spacer { width: 32px; }
.sc-history-delete {
  background: transparent;
  border: none;
  color: var(--sc-text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.sc-history-build:hover .sc-history-delete { opacity: 0.65; }
.sc-history-delete:hover { opacity: 1; color: var(--sc-fail); background: rgba(237,28,36,0.08); }
.sc-status-icon { display: inline-block; font-size: 14px; line-height: 1; font-weight: 700; }
.sc-status-ok { color: var(--sc-ok); }
.sc-status-failed { color: var(--sc-fail); }
.sc-status-progress {
  display: inline-block;
  font-family: var(--sc-mono);
  font-size: 11px;
  color: var(--sc-warn);
  animation: sc-progress-pulse 1.6s ease-in-out infinite;
}
@keyframes sc-progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ----- Logs pane (kept for live container logs) ----- */

.log-pane {
  background: #0d1117;
  color: #c9d1d9;
  font-family: var(--sc-mono);
  font-size: 12px;
  padding: 10px 12px;
  margin: 12px 0 0;
  max-height: 18rem;
  overflow: auto;
  border-radius: var(--sc-radius);
  white-space: pre-wrap;
}
/* connectBranchLogs only appends once the SSE stream delivers a line, so in the
   running state with no active build the pane stays empty. Hide it until it has
   content rather than showing a stray black bar below the pipeline; it reappears
   the moment build/app output starts streaming in. */
.log-pane:empty { display: none; }

/* ----- Failure card ----- */

.sc-failure {
  border: 1px solid rgba(237,28,36,0.45);
  border-left: 4px solid var(--sc-fail);
  border-radius: var(--sc-radius-card);
  background: rgba(237,28,36,0.04);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.sc-failure-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-fail);
  margin-bottom: 4px;
}
.sc-failure-title .sc-failure-step { font-weight: 600; }
.sc-failure-title .sc-failure-duration { margin-left: auto; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text-muted); }
.sc-failure-err {
  margin: 8px 0 12px;
  padding: 8px 10px;
  font-family: var(--sc-mono);
  font-size: 12px;
  background: rgba(237,28,36,0.06);
  border: 1px solid rgba(237,28,36,0.25);
  border-radius: var(--sc-radius);
  color: var(--sc-fail);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
}
.sc-failure-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.sc-failure-context-cell {
  background: var(--sc-bg);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  padding: 8px 10px;
}
.sc-failure-context-cell h5 {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sc-failure-context-cell .commit { font-family: var(--sc-mono); font-size: 12px; color: var(--sc-text); }
.sc-failure-context-cell .subject { font-size: 12px; color: var(--sc-text-muted); margin-top: 2px; word-break: break-word; }
.sc-failure-context-cell .none { color: var(--sc-text-muted); font-style: italic; font-size: 12px; }
.sc-failure-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Unsubscribed CTA ----- */

.sc-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border: 1px dashed var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  padding: 24px;
  background: var(--sc-bg-soft);
}
.sc-cta h2 { margin: 0; font-size: 18px; font-weight: 500; }
.sc-cta-meta { font-size: 12px; color: var(--sc-text-muted); font-family: var(--sc-mono); }
.sc-cta-actions { display: flex; gap: 10px; }

/* ----- Settings panel (legacy compact variant) ----- */

.sc-settings { padding: 4px 0 14px; border-top: 1px solid var(--sc-border); }
.sc-settings label { display: block; font-size: 12px; color: var(--sc-text-muted); margin: 8px 0 4px; }
.sc-settings input[type="number"] {
  padding: 5px 9px;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  font-family: inherit;
  font-size: 13px;
  width: 100px;
}

/* ----- Settings page content (shell + header come from .sc-cfg) ----- */

.sc-setting-section {
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  overflow: hidden;
}
.sc-setting-section-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-soft);
}
.sc-setting-section-head h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--sc-text); }
.sc-setting-section-head p { margin: 2px 0 0; font-size: 12px; color: var(--sc-text-muted); }

.sc-setting-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--sc-border);
}
.sc-setting-row:first-of-type { border-top: none; }
.sc-setting-row .sc-setting-label h3 {
  margin: 0; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 600; color: var(--sc-text);
}
.sc-setting-row .sc-setting-label p { margin: 4px 0 0; font-size: 12px; color: var(--sc-text-muted); line-height: 1.4; }
.sc-setting-row .sc-setting-input { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sc-setting-row .sc-setting-input-row { display: flex; gap: 8px; align-items: center; }
.sc-setting-row input[type="number"],
.sc-setting-row input[type="text"] {
  padding: 6px 10px;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  font: inherit; font-size: 13px;
  width: 100px;
  font-family: var(--sc-mono);
}
.sc-setting-row input[type="number"]:focus,
.sc-setting-row input[type="text"]:focus { outline: none; border-color: var(--sc-blue); }
.sc-setting-row .sc-input-suffix { color: var(--sc-text-muted); font-size: 12px; }

.sc-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.sc-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sc-toggle .sc-toggle-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cfd6dd; transition: background .16s ease; flex-shrink: 0; }
.sc-toggle .sc-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,32,.35); transition: transform .16s ease; }
.sc-toggle input:checked + .sc-toggle-track { background: var(--sc-ok); }
.sc-toggle input:checked + .sc-toggle-track .sc-toggle-thumb { transform: translateX(16px); }
.sc-toggle input:focus-visible + .sc-toggle-track { outline: 2px solid var(--sc-blue); outline-offset: 2px; }
.sc-toggle .sc-toggle-text { font-size: 12px; font-weight: 600; color: var(--sc-text-muted); min-width: 58px; }
.sc-toggle input:checked ~ .sc-toggle-text { color: var(--sc-ok); }
.sc-toggle.is-watcher input:not(:checked) ~ .sc-toggle-text { color: var(--sc-warn); }
@media (prefers-reduced-motion: reduce) { .sc-toggle .sc-toggle-track, .sc-toggle .sc-toggle-thumb { transition: none; } }

.sc-settings-footer { display: flex; justify-content: flex-end; gap: 10px; }
.sc-settings-saved { font-size: 12px; color: var(--sc-ok); align-self: center; display: none; }
.sc-settings-saved.is-visible { display: block; }

/* ----- Staging environment / EMS form (extends the settings section) ----- */
.sc-setting-section-head--row { display: flex; align-items: center; gap: 10px; }
/* Live "generated YAML" preview shown above a section's input fields */
.sc-yamlpreview-wrap { padding: 12px 16px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-softer); }
.sc-yamlpreview-cap { font: 600 10px/1 var(--sc-font); text-transform: uppercase; letter-spacing: 0.05em; color: var(--sc-text-muted); margin-bottom: 8px; }
.sc-yamlpreview { margin: 0; font: 12px/1.6 var(--sc-mono); color: var(--sc-text); overflow-x: auto; white-space: pre; }
.sc-yamlpreview .yp-k { color: var(--sc-blue-dark); }
.sc-yamlpreview .yp-v { color: var(--sc-ok); }
.sc-shared-tag {
  font: 600 9px/1 var(--sc-font); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--sc-warn); background: var(--sc-warn-soft); padding: 4px 7px; border-radius: var(--sc-radius-pill);
}
.sc-setting-updated { margin-left: auto; font-size: 11.5px; color: var(--sc-text-muted); }
.sc-setting-updated b { color: var(--sc-text); font-weight: 600; }
.sc-secret-badge {
  font: 600 9px/1 var(--sc-font); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--sc-warn); background: var(--sc-warn-soft); padding: 3px 6px; border-radius: var(--sc-radius-pill);
  vertical-align: middle; margin-left: 4px;
}
/* wide text inputs for URL/credentials (the base .sc-setting-row input is 100px, sized for numbers) */
.sc-setting-input--wide { align-self: stretch; }
.sc-setting-input--wide input[type="text"],
.sc-setting-input--wide input[type="password"] { width: 100%; font-family: var(--sc-mono); }
.sc-secret-field { display: flex; width: 100%; }
.sc-secret-field input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.sc-secret-eye {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border: 1px solid var(--sc-border-strong); border-left: 0;
  border-top-right-radius: var(--sc-radius); border-bottom-right-radius: var(--sc-radius);
  background: var(--sc-bg-soft); color: var(--sc-text-muted); cursor: pointer;
}
.sc-secret-eye:hover { background: var(--sc-bg-hover); color: var(--sc-blue-dark); }
.sc-secret-eye svg { width: 15px; height: 15px; }

/* ----- App configuration modal (read-only per-branch YAML) ----- */
.sc-appcfg-modal { width: 860px; max-width: 94vw; }
.sc-appcfg-modal .sc-modal-head { align-items: center; }
.sc-appcfg-bk { font: 600 13px/1 var(--sc-mono); color: var(--sc-blue-dark); }
.sc-appcfg-dot { color: var(--sc-text-dim); }
.sc-appcfg-reveal {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; cursor: pointer; font-size: 12px; color: var(--sc-text-muted);
}
.sc-appcfg-reveal-badge {
  font: 600 9px/1 var(--sc-font); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--sc-warn); background: var(--sc-warn-soft); padding: 3px 6px; border-radius: var(--sc-radius-pill);
}
.sc-appcfg-reveal-track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: var(--sc-border-strong); transition: background .15s ease; flex-shrink: 0; }
.sc-appcfg-reveal-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s ease; }
.sc-appcfg-reveal.on .sc-appcfg-reveal-track { background: var(--sc-blue); }
.sc-appcfg-reveal.on .sc-appcfg-reveal-track::after { transform: translateX(16px); }
.sc-appcfg-reveal.on { color: var(--sc-blue-dark); }
.sc-appcfg-reveal + .sc-modal-close { margin-left: 12px; }

.sc-appcfg-body { padding: 14px 18px 18px; overflow: auto; max-height: 72vh; }
.sc-appcfg-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 11.5px; color: var(--sc-text-muted); }
.sc-appcfg-legend b { color: var(--sc-text); font-weight: 600; }
.sc-appcfg-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.sc-appcfg-legend .sw-branch { background: var(--sc-blue); }
.sc-appcfg-legend .sw-shared { background: var(--sc-warn); }

.sc-appcfg-svc { border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card); margin-bottom: 12px; overflow: hidden; }
.sc-appcfg-svc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sc-bg-soft); }
.sc-appcfg-svc[open] summary { border-bottom: 1px solid var(--sc-border); }
.sc-appcfg-svc summary::-webkit-details-marker { display: none; }
.sc-appcfg-svc .chev { color: var(--sc-text-dim); font-size: 10px; transition: transform .12s ease; }
.sc-appcfg-svc[open] .chev { transform: rotate(90deg); }
.sc-appcfg-name { font: 600 12px/1 var(--sc-font); color: var(--sc-text); }
.sc-appcfg-file { font: 12px/1 var(--sc-mono); color: var(--sc-text-muted); }
.sc-appcfg-copy {
  margin-left: auto; font: 600 11px/1 var(--sc-font); color: var(--sc-text-muted);
  background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius); padding: 5px 9px; cursor: pointer;
}
.sc-appcfg-copy:hover { border-color: var(--sc-blue-dark); color: var(--sc-blue-dark); }
.sc-appcfg-yml { margin: 0; padding: 14px 16px; font: 12px/1.6 var(--sc-mono); color: var(--sc-text); overflow-x: auto; background: var(--sc-bg); }

.sc-yml-k { color: var(--sc-blue-dark); }
.sc-yml-c { color: var(--sc-text-dim); font-style: italic; }
.sc-yml-d { color: var(--sc-text-muted); }
.sc-yml-secret { background: var(--sc-warn-soft); color: var(--sc-warn); border-radius: 3px; padding: 0 3px; }
.sc-yml-secret.masked { letter-spacing: 1px; }
.sc-yml-newblock { display: block; background: linear-gradient(90deg, var(--sc-blue-soft), transparent 70%); border-left: 3px solid var(--sc-blue); margin: 4px -16px; padding: 2px 16px 2px 13px; }
.sc-yml-setnote { font: italic 500 11px/1 var(--sc-font); color: var(--sc-blue-dark); margin-left: 10px; vertical-align: middle; white-space: nowrap; }
.sc-yml-setnote:hover { text-decoration: underline; }

/* ----- Build options modal — loading placeholder ----- */

/* ----- Modal base — shared surface for the form dialogs (build-options, linode-create,
   dns-create). Docker/htmx-loading modals keep their own .sc-modal-placeholder base.
   Each form modal sets its own --sc-modal-max and internal layout. ----- */
.sc-modal {
  padding: 0;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  color: var(--sc-text);
  box-shadow: var(--sc-shadow-modal);
  font-family: var(--sc-font);
  width: min(var(--sc-modal-max, 640px), calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
}
.sc-modal::backdrop { background: rgba(0,0,0,0.32); }

.sc-modal-placeholder {
  width: 480px;
  max-width: 90vw;
  border: none;
  border-radius: 12px;
  padding: 0;
  background: var(--sc-bg);
  color: var(--sc-text);
  box-shadow: 0 18px 50px rgba(13,17,23,0.30), 0 2px 6px rgba(13,17,23,0.10);
  font-family: var(--sc-font);
}
.sc-modal-placeholder::backdrop {
  background: rgba(13,17,23,0.35);
  backdrop-filter: blur(2px);
}
.sc-modal-placeholder .sc-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sc-border);
}
.sc-modal-placeholder .sc-modal-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-text);
}
.sc-modal-placeholder .sc-modal-close {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--sc-text-muted);
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 4px;
}
.sc-modal-placeholder .sc-modal-close:hover {
  background: var(--sc-bg-hover);
  color: var(--sc-text);
}
.sc-modal-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 18px;
  gap: 14px;
}
.sc-spinner {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2.5px solid rgba(35,150,211,0.15);
  border-top-color: var(--sc-blue);
  border-right-color: var(--sc-blue);
  animation: sc-spin 0.9s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-modal-loading-text {
  font-size: 13px; font-weight: 500; color: var(--sc-text);
}
.sc-modal-loading-sub {
  font-size: 11px; color: var(--sc-text-muted); font-family: var(--sc-mono);
}
.sc-modal-loading-progress {
  width: 240px; height: 3px;
  background: var(--sc-bg-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.sc-modal-loading-progress::after {
  content: "";
  position: absolute; inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--sc-blue), transparent);
  animation: sc-progress-glide 1.4s ease-in-out infinite;
}
@keyframes sc-progress-glide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(280%); }
}
.sc-settings input[type="number"]:focus { outline: none; border-color: var(--sc-blue); }

/* ============================================================
   Host resources strip — compact CPU / Mem / Disk / Builds in
   the top nav. Live-patched by host-card.js via data-host-*;
   each metric tones amber/red as the resource saturates.
   ============================================================ */
.sc-hostbar {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  background: var(--sc-bg-soft);
  overflow: hidden;
}
.sc-hostbar-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 12px;
  border-left: 1px solid var(--sc-border);
}
.sc-hostbar-metric:first-child { border-left: 0; }
.sc-hostbar-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sc-text-muted); }
.sc-hostbar-value { font-family: var(--sc-mono); font-size: 12.5px; font-weight: 500; color: var(--sc-text); font-variant-numeric: tabular-nums; line-height: 32px; }
.sc-hostbar-value .u { color: var(--sc-text-dim); margin: 0 1px; }
.sc-hostbar-value small { font-size: 10.5px; color: var(--sc-text-muted); font-weight: 400; }
/* Reserve a fixed 3-char box for the CPU number so the label and % don't shift
   as it ranges 0–100 ("CPU   0%" / "CPU 100%"). */
.sc-hostbar-value [data-host-cpu-pct] { display: inline-block; min-width: 3ch; text-align: right; }
.sc-hostbar-metric.is-warn .sc-hostbar-value { color: var(--sc-warn); }
.sc-hostbar-metric.is-fail .sc-hostbar-value { color: var(--sc-fail); }
.sc-hostbar-metric.is-active .sc-hostbar-value { color: var(--sc-blue-dark); }

@keyframes sc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ============================================================
   Overview card with build status flow
   ============================================================ */
.sc-overview {
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-card);
}

/* Flow stepper — compact: smaller disc, condensed labels, tight padding. */
/* Overview stepper — Direction A: glyph discs with labels below, the duration
   of each transition seated on a chip on the connector between nodes. Done
   reads in SysCAD blue; active amber; fail a slightly darker red. Node columns
   are zero-width and centred so a disc and its label always share one column. */
.sc-flow {
  --flow-done: var(--sc-blue-dark);
  --flow-done-soft: rgba(8,111,153,0.10);
  --flow-done-line: rgba(8,111,153,0.45);
  --flow-fail: #c2171d;
  --flow-fail-soft: rgba(194,23,29,0.12);
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: start;
  padding: 18px 40px 14px;
  gap: 0;
}
.sc-flow-stage { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 0; overflow: visible; }
.sc-flow-disc {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  background: var(--sc-bg); color: var(--sc-text-dim);
  border: 2px solid var(--sc-border-strong);
  position: relative; z-index: 1;
}
.sc-flow-text { text-align: center; white-space: nowrap; }
.sc-flow-label { font-size: 12px; font-weight: 600; color: var(--sc-text); line-height: 1.2; }
.sc-flow-sub { font-size: 10px; color: var(--sc-text-muted); font-family: var(--sc-mono); line-height: 1.3; }

.sc-flow-stage.is-done .sc-flow-disc { background: var(--flow-done); color: #fff; border-color: var(--flow-done); }
.sc-flow-stage.is-active .sc-flow-disc { background: var(--sc-warn); color: #fff; border-color: var(--sc-warn); box-shadow: 0 0 0 3px rgba(191,135,0,0.18); animation: sc-pulse 1.6s ease-in-out infinite; }
.sc-flow-stage.is-fail .sc-flow-disc { background: var(--flow-fail); color: #fff; border-color: var(--flow-fail); }
.sc-flow-stage.is-active .sc-flow-label { color: var(--sc-warn); }
.sc-flow-stage.is-fail .sc-flow-label { color: var(--flow-fail); }
.sc-flow-stage.is-pending .sc-flow-label { color: var(--sc-text-muted); }

/* Connector: a thin rail with an optional duration chip seated on it. */
.sc-flow-seg { display: flex; flex-direction: column; align-items: center; padding-top: 11px; min-width: 18px; }
.sc-flow-rail { height: 3px; width: 100%; border-radius: 2px; background: var(--sc-border-strong); }
.sc-flow-dur {
  margin-top: 9px; font: 500 10px/1 var(--sc-mono); color: var(--sc-text-muted);
  padding: 2px 6px; border-radius: 4px; background: var(--sc-bg-softer); border: 1px solid var(--sc-border);
}
.sc-flow-seg.is-done .sc-flow-rail { background: var(--flow-done); opacity: 0.55; }
.sc-flow-seg.is-done .sc-flow-dur { color: var(--flow-done); background: var(--flow-done-soft); border-color: var(--flow-done-line); }
.sc-flow-seg.is-active .sc-flow-rail {
  background: repeating-linear-gradient(90deg, var(--sc-warn) 0 7px, transparent 7px 14px);
  background-size: 14px 3px;
  animation: sc-flow-march 0.9s linear infinite;
}
.sc-flow-seg.is-active .sc-flow-dur { color: var(--sc-warn); background: rgba(191,135,0,0.14); border-color: rgba(191,135,0,0.35); }
.sc-flow-seg.is-fail .sc-flow-rail { background: var(--flow-fail); opacity: 0.55; }
@keyframes sc-flow-march { from { background-position: 0 0; } to { background-position: 14px 0; } }
@media (prefers-reduced-motion: reduce) {
  .sc-flow-seg.is-active .sc-flow-rail,
  .sc-flow-stage.is-active .sc-flow-disc { animation: none; }
}

/* Frontends + APIs strip below the stepper — stacked. */
.sc-overview-routes {
  border-top: 1px solid var(--sc-border);
  background: var(--sc-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sc-overview-routes-col { background: var(--sc-bg); padding: 10px 16px 12px; min-width: 0; }
.sc-overview-routes h4 {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sc-text-muted);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sc-overview-routes h4 small { color: var(--sc-text-muted, var(--sc-text-dim)); font-weight: 400; font-size: 10px; text-transform: none; letter-spacing: 0; margin-left: auto; }
.sc-overview-routes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* Each endpoint is a stacked block: a status dot spans the protocol label (top)
   and the host → target line (below). Stacking keeps the descriptive labels
   ("Backend HTTPS API") readable and lets host-less gRPC rows align cleanly. */
.sc-route {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-areas: "dot kind" "dot endpoint";
  column-gap: 9px;
  row-gap: 1px;
  padding: 5px 0;
  font: 11.5px/1.5 var(--sc-mono);
}
.sc-route .route-dot { grid-area: dot; align-self: start; margin-top: 5px; width: 8px; height: 8px; border-radius: 999px; background: var(--sc-ok); }
.sc-route.is-pending .route-dot { background: var(--sc-border-strong); }
/* gRPC is an internal, non-public endpoint — a hollow ring sets it apart from
   the proxy-served HTTPS routes without inventing a new colour. */
.sc-route-grpc .route-dot { background: transparent; border: 1.5px solid var(--sc-blue); }
.sc-route-grpc.is-pending .route-dot { border-color: var(--sc-border-strong); }
.sc-route .route-kind { grid-area: kind; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: var(--sc-text); white-space: nowrap; }
.sc-route.is-pending .route-kind { color: var(--sc-text-muted); }
.sc-route .route-endpoint { grid-area: endpoint; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sc-route .route-host { color: var(--sc-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.sc-route a.route-host:hover { color: var(--sc-blue-dark); text-decoration: underline; }
.sc-route .route-arrow { color: var(--sc-border-strong); flex-shrink: 0; }
.sc-route .route-target { color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-overview-routes.is-pending .route-host,
.sc-overview-routes.is-pending .route-target { color: var(--sc-text-muted); }
.sc-overview-routes.is-pending .route-arrow { color: var(--sc-border); }

/* ============================================================
   Container logs viewer (tabs per compose service)
   ============================================================ */
.sc-svclogs {
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  margin-bottom: 18px;
  overflow: hidden;
}
.sc-svclogs-header { border-bottom: 1px solid var(--sc-border); }
.sc-svclogs-hint { font-size: 11px; color: var(--sc-text-muted); font-style: italic; }

.sc-svclogs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 6px;
  background: var(--sc-bg-soft);
  border-bottom: 1px solid var(--sc-border);
}
.sc-svclogs-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 14px 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  font: 500 12px/1.2 var(--sc-font);
  color: var(--sc-text-muted);
  letter-spacing: 0.01em;
}
.sc-svclogs-tab:hover { color: var(--sc-text); background: var(--sc-bg); }
.sc-svclogs-tab.is-active {
  color: var(--sc-blue-dark);
  background: var(--sc-bg);
  border-bottom-color: var(--sc-blue);
}
.sc-svclogs-tab-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; }
.sc-svclogs-tab-key { font: 11px/1 var(--sc-mono); color: inherit; opacity: 0.7; }

/* Terminal-style streaming viewer. Background is the same near-black as the
   pipeline log pane so the two viewers feel like the same surface. */
.sc-svclogs-term {
  background: #0f1419;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.sc-svclogs-term-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sc-svclogs-term-spacer { margin-left: auto; }
.sc-svclogs-term-service { font: 600 11px/1 var(--sc-mono); color: #82d4f7; }
.sc-svclogs-term-meta {
  font: 600 10px/1 var(--sc-font);
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* State dot pulses while connecting, glows green while live, red on error. */
.sc-svclogs-term-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #6e7681;
  box-shadow: 0 0 0 2px rgba(110,118,129,0.18);
}
.sc-svclogs-term-dot[data-svclogs-state="connecting"] {
  background: #f0b740;
  box-shadow: 0 0 0 2px rgba(240,183,64,0.25);
  animation: sc-svclogs-pulse 1.2s ease-in-out infinite;
}
.sc-svclogs-term-dot[data-svclogs-state="live"] {
  background: #3fb950;
  box-shadow: 0 0 0 2px rgba(63,185,80,0.25);
}
.sc-svclogs-term-dot[data-svclogs-state="error"] {
  background: #ef5a5f;
  box-shadow: 0 0 0 2px rgba(239,90,95,0.25);
}
@keyframes sc-svclogs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.sc-svclogs-term-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font: 11px/1 var(--sc-font);
  color: #cdd9e5;
  cursor: pointer;
  user-select: none;
}
.sc-svclogs-term-toggle input { accent-color: #3fb950; }
.sc-svclogs-term-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #cdd9e5;
  border-radius: var(--sc-radius);
  padding: 3px 10px;
  font: 11px/1 var(--sc-font);
  cursor: pointer;
}
.sc-svclogs-term-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.32); }
.sc-svclogs-term-btn.is-on { background: rgba(240,183,64,0.18); color: #f0b740; border-color: rgba(240,183,64,0.4); }

.sc-svclogs-term-body {
  margin: 0;
  padding: 8px 12px 14px;
  color: #cdd9e5;
  font: 11.5px/1.55 var(--sc-mono);
  background: transparent;
  max-height: 480px;
  min-height: 240px;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: auto; /* instant jump-to-bottom; smooth would lag tail */
}
.sc-svclogs-line {
  white-space: pre;
  word-break: normal;
}
.sc-svclogs-line-sys {
  color: #6e7681;
  font-style: italic;
  white-space: normal;
  text-align: center;
  padding: 6px 0;
}
.sc-svclogs-line-err { color: #ef5a5f; }
.sc-svclogs-line-end { color: #f0b740; }
.sc-svclogs-empty {
  padding: 14px 16px;
  color: #8b949e;
  font: italic 12px/1.4 var(--sc-font);
}

/* ============================================================
   Database card
   ============================================================ */
.sc-db {
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-card);
}
.sc-db-list { list-style: none; margin: 0; padding: 0; }
.sc-db-item { padding: 10px 16px 12px; border-top: 1px solid var(--sc-border); }
.sc-db-item:first-child { border-top: 0; }
.sc-db-item.is-postgres {
  background: linear-gradient(180deg, rgba(35,150,211,0.04), transparent 60%);
}
.sc-db-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sc-db-spacer { flex: 1; }
.sc-db-service-label {
  font: 600 10px/1 var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sc-text-muted);
}
.sc-db-container {
  font: 600 12.5px/1 var(--sc-mono);
  color: var(--sc-text);
  background: rgba(0,0,0,0.04);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sc-db-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 10px/1 var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.sc-db-badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.sc-db-badge-running     { background: rgba(31,136,61,0.12);  color: var(--sc-ok); }
.sc-db-badge-running::before { animation: sc-pulse 1.8s ease-in-out infinite; }
.sc-db-badge-restarting  { background: rgba(191,135,0,0.16);  color: var(--sc-warn); }
.sc-db-badge-restarting::before { animation: sc-pulse 1.2s ease-in-out infinite; }
.sc-db-badge-created     { background: rgba(139,148,158,0.16); color: var(--sc-text-muted); }
.sc-db-badge-paused      { background: rgba(139,148,158,0.16); color: var(--sc-text-muted); }
.sc-db-badge-exited      { background: rgba(237,28,36,0.10);  color: var(--sc-fail); }
.sc-db-badge-dead        { background: rgba(237,28,36,0.16);  color: var(--sc-fail); }
.sc-db-badge-absent      { background: var(--sc-bg-hover);    color: var(--sc-text-muted); border: 1px dashed var(--sc-border-strong); padding: 2px 7px; }

.sc-db-item-backup {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  padding-left: 2px;
  min-width: 0;
}
.sc-db-service {
  font: 600 10.5px/1.4 var(--sc-mono);
  color: var(--sc-blue-dark);
  text-transform: lowercase;
  min-width: 40px;
}
.sc-db-sep { color: var(--sc-border-strong); font-family: var(--sc-mono); }
.sc-db-backup-path {
  font: 11.5px/1.4 var(--sc-mono);
  color: var(--sc-text);
  background: rgba(0,0,0,0.03);
  padding: 2px 7px;
  border-radius: 3px;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.sc-db-backup-path.is-pending { color: var(--sc-warn); background: rgba(191,135,0,0.08); }
.sc-db-backup-path.is-empty { color: var(--sc-text-muted); background: transparent; font-style: italic; padding-left: 0; }
.sc-db-backup-hint { font-size: 10.5px; color: var(--sc-text-muted); font-style: italic; }

.sc-db-actions { display: flex; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.sc-db-actions .sc-db-note { color: var(--sc-text-muted); font-size: 11px; margin-right: auto; align-self: center; }

@media (max-width: 768px) {
  .sc-db-item-head { flex-wrap: wrap; }
  .sc-db-container { max-width: 100%; }
  .sc-db-item-backup { flex-wrap: wrap; }
}

/* ============================================================
   Docker card — compose file path + live container inventory
   ============================================================ */
.sc-docker {
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-card);
}
.sc-docker-compose {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sc-border);
  min-width: 0;
}
.sc-docker-compose-label {
  font: 600 10px/1 var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sc-text-muted);
  flex-shrink: 0;
}
.sc-docker-compose-path {
  font: 11.5px/1.4 var(--sc-mono);
  color: var(--sc-text);
  background: rgba(0,0,0,0.03);
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sc-docker-list { list-style: none; margin: 0; padding: 4px 0; }
.sc-docker-item {
  display: grid;
  grid-template-columns: 9px minmax(0, auto) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
}
.sc-docker-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sc-border-strong); }
.sc-docker-item.is-running .sc-docker-dot { background: var(--sc-ok); animation: sc-pulse 1.8s ease-in-out infinite; }
.sc-docker-item.is-restarting .sc-docker-dot { background: var(--sc-warn); animation: sc-pulse 1.2s ease-in-out infinite; }
.sc-docker-item.is-exited .sc-docker-dot,
.sc-docker-item.is-dead .sc-docker-dot { background: var(--sc-fail); }
.sc-docker-name {
  font: 600 12.5px/1 var(--sc-mono);
  color: var(--sc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-docker-badge {
  justify-self: start;
  font: 600 10px/1 var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--sc-bg-hover);
  color: var(--sc-text-muted);
  white-space: nowrap;
}
.sc-docker-item.is-running .sc-docker-badge { background: rgba(31,136,61,0.12); color: var(--sc-ok); }
.sc-docker-item.is-restarting .sc-docker-badge { background: rgba(191,135,0,0.16); color: var(--sc-warn); }
.sc-docker-item.is-exited .sc-docker-badge,
.sc-docker-item.is-dead .sc-docker-badge { background: rgba(237,28,36,0.10); color: var(--sc-fail); }
.sc-docker-image {
  justify-self: end;
  max-width: 100%;
  font: 11px/1.4 var(--sc-mono);
  color: var(--sc-text-muted);
  background: rgba(0,0,0,0.03);
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sc-docker-empty { margin: 0; padding: 14px 16px; font-size: 12px; color: var(--sc-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .sc-docker-item .sc-docker-dot { animation: none; }
}
@media (max-width: 768px) {
  .sc-docker-item { grid-template-columns: 9px 1fr auto; }
  .sc-docker-image { grid-column: 2 / -1; justify-self: start; margin-top: 2px; }
}

/* ============================================================
   Commit history + build pills (rail removed)
   ============================================================ */
.sc-commits { border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card); background: var(--sc-bg); overflow: hidden; box-shadow: var(--sc-shadow-card); }
.sc-commits-body { padding: 0; }
.sc-commit { position: relative; padding: 13px 18px; border-top: 1px solid var(--sc-border); transition: background .12s ease; }
.sc-commit:first-child { border-top: none; }
.sc-commit:hover { background: var(--sc-bg-hover); }
.sc-commit.is-serving { background: rgba(31,136,61,.045); }
.sc-commit.is-serving:hover { background: rgba(31,136,61,.075); }
.sc-branch-commits { display: flex; flex-direction: column; gap: 18px; }
.sc-commit-subject { font-size: 13px; font-weight: 500; color: var(--sc-text); margin: 0; word-break: break-word; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-commit-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--sc-text-muted); margin-top: 4px; }
.sc-commit-meta code { background: var(--sc-bg-subtle); padding: 1px 6px; border-radius: 3px; color: var(--sc-text); font-size: 11px; }
.sc-commit-meta .author { font-weight: 500; color: var(--sc-text); }
.sc-commit-meta .diff-stat .added { color: var(--sc-ok); font-weight: 600; }
.sc-commit-meta .diff-stat .removed { color: var(--sc-fail); font-weight: 600; }
.sc-commit-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sc-commit-badge.head { background: var(--sc-blue); color: #fff; }
.sc-commit-badge.serving { background: rgba(31,136,61,.14); color: var(--sc-ok); }

/* ----- build pills ----- */
.sc-builds { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sc-build { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px;
  border: 1px solid var(--sc-border-strong); background: var(--sc-bg); font-size: 11px; line-height: 1;
  cursor: pointer; transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease; text-decoration: none; }
.sc-build:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(13,27,36,.10); text-decoration: none; }
.sc-build:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: 2px; }
.sc-build-glyph { font-size: 12px; font-weight: 700; line-height: 1; display: inline-flex; }
.sc-build-num { font-family: var(--sc-mono); font-weight: 600; color: var(--sc-text); }
.sc-build-dur { font-family: var(--sc-mono); color: var(--sc-text-muted); font-size: 10.5px; }
.sc-build-flags { display: inline-flex; gap: 5px; align-items: center; color: var(--sc-text-dim); font-size: 11px; padding-left: 2px; border-left: 1px solid var(--sc-border); margin-left: 1px; }
.sc-build-flags span { display: inline-flex; }
.sc-build[data-status="ok"] { background: rgba(31,136,61,.07); border-color: rgba(31,136,61,.30); }
.sc-build[data-status="ok"] .sc-build-glyph { color: var(--sc-ok); }
.sc-build[data-status="failed"] { background: rgba(237,28,36,.06); border-color: rgba(237,28,36,.32); }
.sc-build[data-status="failed"] .sc-build-glyph { color: var(--sc-fail); }
.sc-build[data-status="running"] { background: rgba(191,135,0,.10); border-color: rgba(191,135,0,.38); }
.sc-build[data-status="running"] .sc-build-glyph { color: var(--sc-warn); }
.sc-build.is-serving { box-shadow: 0 0 0 2px rgba(31,136,61,.22); border-color: rgba(31,136,61,.5); }
/* The live (currently serving) build links to the live panel — flag it blue, overriding the green serving/ok styles. */
.sc-build.is-live, .sc-build.is-live[data-status="ok"] { background: rgba(35,150,211,.10); border-color: var(--sc-blue); box-shadow: 0 0 0 2px rgba(35,150,211,.24); }
.sc-build.is-live .sc-build-serving-tag { color: var(--sc-blue); }
.sc-build-serving-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sc-ok); }
/* A faint neutral track under a solid amber arc: same-hue rings (track + arc both
   amber) read as a static circle at this size, so the rotation was invisible on
   the amber "Building" pill. The dark low-alpha track makes the sweeping arc pop
   on any background — white refresh buttons and the tinted pill alike. */
.sc-build-spin { display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(16,24,32,.16); border-top-color: var(--sc-warn); border-radius: 50%; animation: sc-build-spin .7s linear infinite; }
@keyframes sc-build-spin { to { transform: rotate(360deg); } }
.sc-builds-empty { margin-top: 8px; font-size: 11px; color: var(--sc-text-dim); font-style: italic; }

/* ----- build history table — shares the sc-table signature (cf. cf-dns-table / s3-table) ----- */
.sc-buildtable { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px;
  border: 1px solid var(--sc-border-strong); border-radius: 8px; overflow: hidden; }
.sc-buildtable thead th { text-align: left; font-size: 12px; font-weight: 600;
  color: var(--sc-text-muted); background: var(--sc-bg-soft); padding: 10px 12px; border-bottom: 1px solid var(--sc-border-strong); white-space: nowrap; }
.sc-buildtable tbody td { padding: 10px 12px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; }
.sc-buildtable tbody tr:last-child td { border-bottom: none; }
.sc-buildtable tbody tr:hover { background: var(--sc-bg-soft); }
.bt-build { white-space: nowrap; font-family: var(--sc-mono); font-weight: 600; color: var(--sc-text); }
.bt-glyph { font-weight: 700; margin-right: 5px; }
.sc-buildtable tr[data-status="ok"] .bt-glyph { color: var(--sc-ok); }
.sc-buildtable tr[data-status="failed"] .bt-glyph { color: var(--sc-fail); }
.sc-buildtable tr[data-status="running"] .bt-glyph { color: var(--sc-warn); }
.bt-dur { color: var(--sc-text-muted); font-size: 11px; font-weight: 400; }
.bt-time { white-space: nowrap; color: var(--sc-text-muted); }
.bt-trigger { color: var(--sc-text); word-break: break-all; }
.bt-trigger.auto { color: var(--sc-text-muted); font-style: italic; }
.bt-dbs { font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text); }
.bt-dbs.na { color: var(--sc-text-dim); font-style: italic; font-family: inherit; }
.bt-dbkey { display: inline-block; background: var(--sc-bg-softer); border-radius: 3px; padding: 1px 6px; margin: 1px 3px 1px 0; }
.sc-buildtable tr.is-serving { background: rgba(35,150,211,.06); }
.sc-buildtable tbody tr.is-serving:hover { background: rgba(35,150,211,.10); }
.bt-live { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sc-blue); border: 1px solid var(--sc-blue); border-radius: 999px; padding: 0 5px; margin-left: 6px; }
.bt-reset { font-size: 11px; font-weight: 600; color: var(--sc-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-buildtable tr td.bt-build.is-reset .bt-glyph { color: var(--sc-text-muted); }
/* Mobile: the table carries sc-table--cards, so the shared reflow (thead hidden,
   rows -> labelled cards) applies. Two build-specific touches below. */
@media (max-width: 768px) {
  .sc-buildtable tr.is-serving { border-color: rgba(35,150,211,.4); }
  /* the build cell holds several values (glyph, number, duration, live tag) — keep
     them grouped at the right like every other card row, not spread edge-to-edge */
  .sc-buildtable.sc-table--cards td.bt-build { justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
  .sc-buildtable.sc-table--cards td.bt-build::before { margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-build-spin { animation: none; }
  .sc-build:hover { transform: none; }
}

/* ============================================================
   Mobile summary view
   ------------------------------------------------------------
   On phones, the branch panel collapses to "what can I do right
   now": overview (incl. links to staged sites) + database card
   (reset / rebuild). The pipeline tree, build history, host
   stats and log pane are hidden because they're not actionable
   on a small screen.
   ============================================================ */
@media (max-width: 768px) {
  .sc-detail .sc-pipeline,
  .sc-detail .sc-pipe,
  .sc-detail .sc-history,
  .sc-detail .log-pane {
    display: none !important;
  }
  /* The top-nav host strip would overflow the cramped phone topbar; hide it
     (host stats aren't actionable on a small screen). */
  .sc-hostbar { display: none; }
  /* Stack the overview routes columns since two narrow columns
     unreadable on a phone. */
  .sc-overview-routes { grid-template-columns: 1fr; }
  /* Compress the topbar's chrome to fit a phone. */
  .sc-topbar { gap: 10px; padding: 0 10px; }
  .sc-topbar-counters { display: none; }
  .sc-topbar-watcher .sc-watcher-label { display: none; }
  .sc-topbar-brand-text { display: none; }
  /* Stack the database action row vertically so buttons don't squash. */
  .sc-db-actions { flex-wrap: wrap; }
  .sc-db-actions .sc-db-note { width: 100%; margin: 0 0 6px; }
}

/* ============================================================
   Accounts page content (shell + header come from .sc-cfg)
   ============================================================ */
.sc-page-alert {
  padding: 10px 14px;
  border-radius: var(--sc-radius);
  font-size: 13px;
  margin-bottom: 16px;
}
.sc-page-alert-ok    { background: rgba(31,136,61,0.08); border: 1px solid rgba(31,136,61,0.28); color: var(--sc-ok); }
.sc-page-alert-error { background: rgba(237,28,36,0.08); border: 1px solid rgba(237,28,36,0.30); color: var(--sc-fail); }

.sc-accounts-add, .sc-accounts-list {
  background: var(--sc-bg);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  padding: 18px 22px 22px;
}
.sc-accounts-add h2, .sc-accounts-list h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}
.sc-accounts-add-form { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr auto; gap: 12px; align-items: end; }
.sc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-field label { font: 600 11px/1 var(--sc-font); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); }
.sc-field input, .sc-field select {
  padding: 8px 10px;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  font: 13px/1.3 var(--sc-font);
  color: var(--sc-text);
  background: var(--sc-bg);
}
.sc-field input:focus, .sc-field select:focus { outline: none; border-color: var(--sc-blue); box-shadow: 0 0 0 3px rgba(35,150,211,0.15); }

.sc-accounts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-accounts-table th {
  text-align: left;
  font: 600 10.5px/1 var(--sc-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-text-muted);
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--sc-border-strong);
}
.sc-accounts-table td { padding: 10px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; }
.sc-accounts-table tr:last-child td { border-bottom: 0; }
.sc-accounts-table tr.is-self { background: rgba(35,150,211,0.04); }
.sc-accounts-cell-username { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.sc-accounts-self-tag {
  font: 600 9.5px/1 var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--sc-bg-hover);
  color: var(--sc-text-muted);
}
.sc-accounts-cell-email { font-family: var(--sc-mono); font-size: 12px; color: var(--sc-text); }
.sc-accounts-cell-date  { color: var(--sc-text-muted); font-size: 12px; white-space: nowrap; }
.sc-accounts-cell-action { width: 80px; text-align: right; }
.sc-accounts-empty { color: var(--sc-text-muted); font-style: italic; }
.sc-accounts-table select { padding: 4px 8px; border-radius: 4px; border: 1px solid var(--sc-border-strong); background: var(--sc-bg); font: 12px var(--sc-font); }

@media (max-width: 768px) {
  .sc-accounts-add-form { grid-template-columns: 1fr; }
}

/* ============================================================
   Build history page — dedicated detail view with branch
   artefacts strip on top, builds table, then a per-build detail
   panel swapped in below.
   ============================================================ */
.sc-history-page { display: flex; flex-direction: column; gap: 18px; }
.sc-history-back {
  display: inline-block;
  margin-right: 8px;
  color: var(--sc-text-muted);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}
.sc-history-back:hover { color: var(--sc-blue-dark); text-decoration: none; }

.sc-artifacts {
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  box-shadow: var(--sc-shadow-card);
  overflow: hidden;
  margin-top: 18px;
}
.sc-artifacts > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--sc-bg-soft);
}
.sc-artifacts > summary::-webkit-details-marker { display: none; }
.sc-artifacts > summary .chev { transition: transform .15s ease; color: var(--sc-text-muted); }
.sc-artifacts[open] > summary .chev { transform: rotate(90deg); }
.sc-artifacts > summary h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sc-artifacts > summary .sub { margin-left: auto; font-size: 11px; color: var(--sc-text-muted); font-style: italic; }
.sc-artifacts-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-soft);
}
.sc-artifacts-head h3 { margin: 0; }
.sc-artifacts-sub { font-size: 11px; color: var(--sc-text-muted); font-style: italic; }
.sc-artifacts-list { list-style: none; margin: 0; padding: 0; }
.sc-artifacts-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--sc-border);
}
.sc-artifacts-row:first-child { border-top: 0; }
.sc-artifacts-row.is-missing { opacity: 0.55; }
.sc-artifacts-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
}
.sc-artifacts-kind.image          { background: rgba(31,136,61,.10);   color: var(--sc-ok); }
.sc-artifacts-kind.workspace      { background: rgba(139,148,158,.14); color: var(--sc-text-muted); }
.sc-artifacts-kind.frontends      { background: rgba(35,150,211,.10);  color: var(--sc-blue-dark); }
.sc-artifacts-kind.compose        { background: rgba(35,150,211,.10);  color: var(--sc-blue-dark); }
.sc-artifacts-kind.postgres-image { background: rgba(35,150,211,.10);  color: var(--sc-blue-dark); }
.sc-artifacts-kind.orphan         { background: rgba(237,28,36,.10);   color: var(--sc-fail); }
.sc-artifacts-kind-logs      { background: rgba(35,150,211,0.10);  color: var(--sc-blue-dark); }
.sc-artifacts-kind-image     { background: rgba(31,136,61,0.10);   color: var(--sc-ok); }
.sc-artifacts-kind-workspace { background: rgba(139,148,158,0.14); color: var(--sc-text-muted); }
.sc-artifacts-kind-frontends { background: rgba(35,150,211,0.10);  color: var(--sc-blue-dark); }
.sc-artifacts-kind-compose   { background: rgba(139,148,158,0.14); color: var(--sc-text-muted); }
.sc-artifacts-kind-postgres-image { background: rgba(35,150,211,0.10); color: var(--sc-blue-dark); }
.sc-artifacts-kind-orphan,
.sc-artifacts-kind-image-orphan { background: rgba(237,28,36,0.10); color: var(--sc-fail); }
.sc-artifacts-label { font-weight: 500; color: var(--sc-text); }
.sc-artifacts-path {
  font-family: var(--sc-mono);
  font-size: 11.5px;
  color: var(--sc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-artifacts-size {
  font-family: var(--sc-mono);
  font-size: 11px;
  color: var(--sc-text-muted);
}
.sc-artifacts-row.is-missing .sc-artifacts-size { color: var(--sc-text-muted); font-weight: 400; }
.sc-artifacts-note { font-size: 11px; color: var(--sc-text-muted); font-style: italic; min-width: 0; }
.sc-artifacts-clean { font-size: 11px; padding: 3px 10px; }
.sc-artifacts-clean:hover { background: rgba(237,28,36,0.10); color: var(--sc-fail); border-color: rgba(237,28,36,0.30); }
.sc-artifacts-empty { padding: 14px 16px; color: var(--sc-text-muted); font-style: italic; font-size: 12px; margin: 0; }

.sc-history-table-wrap {
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg);
  overflow: hidden;
}
.sc-history-table-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-soft);
}
.sc-history-table-head h3 { margin: 0; }
.sc-history-table-sub { font-size: 11px; color: var(--sc-text-muted); font-style: italic; }
.sc-history-table-page { width: 100%; border-collapse: collapse; }
.sc-history-table-page thead th {
  text-align: left;
  font: 600 10px/1 var(--sc-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-text-muted);
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--sc-border);
  white-space: nowrap;
}
.sc-history-table-page tbody tr { cursor: pointer; transition: background .08s ease; }
.sc-history-table-page tbody tr:hover { background: var(--sc-bg-hover); }
.sc-history-table-page tbody tr.is-active { background: rgba(35,150,211,0.08); box-shadow: inset 3px 0 0 var(--sc-blue); }
.sc-history-table-page tbody td { padding: 8px 10px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; font-size: 12px; }
.sc-history-table-page tbody tr:last-child td { border-bottom: 0; }
.sc-history-table-page .sc-history-msg {
  color: var(--sc-text);
  max-width: 380px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sc-history-build-detail {
  border: 1px dashed var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  background: var(--sc-bg-soft);
  min-height: 80px;
  padding: 4px;
}
.sc-history-build-detail-hint {
  margin: 0;
  padding: 22px 18px;
  text-align: center;
  color: var(--sc-text-muted);
  font-size: 12px;
  font-style: italic;
}
.sc-history-detail { background: var(--sc-bg); border-radius: calc(var(--sc-radius-card) - 2px); padding: 0; }
.sc-history-detail-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-soft);
  border-top-left-radius: calc(var(--sc-radius-card) - 2px);
  border-top-right-radius: calc(var(--sc-radius-card) - 2px);
}
.sc-history-detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1; }
.sc-history-detail-num { font: 600 14px/1 var(--sc-mono); color: var(--sc-blue-dark); }
.sc-history-detail-state {
  font: 600 10px/1 var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
}
.sc-history-detail-state.is-ok      { background: rgba(31,136,61,0.12);  color: var(--sc-ok); }
.sc-history-detail-state.is-failed  { background: rgba(237,28,36,0.12);  color: var(--sc-fail); }
.sc-history-detail-state.is-running { background: rgba(191,135,0,0.14);  color: var(--sc-warn); animation: sc-pulse 1.6s ease-in-out infinite; }
.sc-history-detail-sha { font: 600 12px/1 var(--sc-mono); color: var(--sc-text); background: rgba(0,0,0,0.04); padding: 3px 7px; border-radius: 3px; }
.sc-history-detail-subject {
  font-size: 13px; color: var(--sc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
.sc-history-detail-meta { font: 11px/1.4 var(--sc-mono); color: var(--sc-text-muted); }
.sc-history-detail-tag code { background: rgba(0,0,0,0.04); padding: 1px 6px; border-radius: 3px; color: var(--sc-text); }
.sc-history-fulllog { color: var(--sc-blue); }
.sc-history-fulllog:hover { color: var(--sc-blue-dark); }
.sc-history-detail .sc-pipe { margin: 12px 16px; }
.sc-history-detail .sc-artifacts { margin: 12px 16px 16px; }

@media (max-width: 768px) {
  .sc-artifacts-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "kind label size"
      "path path path"
      "note note action";
    gap: 6px 10px;
  }
  .sc-artifacts-kind { grid-area: kind; }
  .sc-artifacts-label { grid-area: label; }
  .sc-artifacts-size { grid-area: size; }
  .sc-artifacts-path { grid-area: path; }
  .sc-artifacts-note { grid-area: note; }
  .sc-artifacts-clean { grid-area: action; justify-self: end; }
  .sc-history-table-page thead th:nth-child(5),
  .sc-history-table-page tbody td:nth-child(5),
  .sc-history-table-page thead th:nth-child(6),
  .sc-history-table-page tbody td:nth-child(6),
  .sc-history-table-page thead th:nth-child(7),
  .sc-history-table-page tbody td:nth-child(7),
  .sc-history-table-page thead th:nth-child(8),
  .sc-history-table-page tbody td:nth-child(8) { display: none; }
}

/* ----- Build history: trigger + database columns ----- */
.sc-history-trigger { width: 86px; }
.sc-trigger-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font: 600 11px/1 var(--sc-font); }
.sc-trigger-badge .glyph { font-size: 10px; line-height: 1; }
.sc-trigger-auto { background: rgba(35,150,211,.10); color: var(--sc-blue-dark); }
.sc-trigger-manual { background: rgba(139,148,158,.10); color: var(--sc-text-muted); border: 1px dashed var(--sc-border-strong); }

.sc-history-db { width: 118px; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text); }
.sc-history-db .db-date { color: var(--sc-text); }
.sc-history-db .db-sub { color: var(--sc-text-muted); }
.sc-history-db .db-reused { color: var(--sc-text-muted); font-style: italic; }

/* Database-restored block in the build detail panel */
.sc-dbrestore { margin: 12px 16px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-card); overflow: hidden; }
.sc-dbrestore-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 13px; background: var(--sc-bg-soft); border-bottom: 1px solid var(--sc-border); }
.sc-dbrestore-head h4 { margin: 0; font-size: 11px; font-weight: 600; color: var(--sc-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.sc-dbrestore-total { font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); }
.sc-dbrestore-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 7px 13px; border-bottom: 1px solid var(--sc-border); font-size: 12px; }
.sc-dbrestore-row:last-child { border-bottom: 0; }
.sc-dbrestore-svc { font: 600 11px/1 var(--sc-mono); color: var(--sc-blue-dark); }
.sc-dbrestore-key { font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- Maintenance page content (shell + header come from .sc-cfg) ----- */
.sc-maint-sweeper, .sc-maint-cat { border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card); background: var(--sc-bg); }
.sc-maint-head, .sc-maint-cat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.sc-maint-head h3, .sc-maint-cat-head h4 { margin: 0; }
.sc-maint-head .sc-btn { margin-left: auto; }
.sc-maint-count { font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); }
.sc-maint-cat-head .sc-maint-clean { margin-left: auto; }
.sc-maint-sweeper-body { padding: 12px 16px; font-size: 13px; }
.sc-maint-sweeper-body p { margin: 0 0 6px; }
.sc-maint-muted { color: var(--sc-text-muted); font-style: italic; }
/* The "Nothing to reclaim." message sits directly in the category card (no
   items list to supply padding), so pad it to match .sc-maint-items. */
.sc-maint-cat > .sc-maint-muted { margin: 0; padding: 10px 16px; }
.sc-maint-scan { display: flex; flex-direction: column; gap: 14px; }
.sc-maint-age { color: var(--sc-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.sc-maint-items li .sc-maint-size { margin-left: 0; }
.sc-maint-cmd { display: block; padding: 7px 16px 0; font: 11px/1.4 var(--sc-mono); color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-maint-cmd-cleanup { padding-top: 2px; padding-bottom: 7px; color: var(--sc-text); }
.sc-maint-scan-note { margin: 8px 2px 0; font-size: 12px; color: var(--sc-text-muted); }
.sc-maint-items { list-style: none; margin: 0; padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.sc-maint-items li { display: flex; justify-content: space-between; gap: 12px; font: 11px/1.5 var(--sc-mono); }
.sc-maint-items code { color: var(--sc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-maint-size { color: var(--sc-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-maint-rules { margin: 0; padding: 10px 16px 10px 32px; display: flex; flex-direction: column; gap: 4px; }
.sc-maint-scan-controls { display: flex; align-items: center; gap: 10px; }
.sc-maint-spinner { width: 14px; height: 14px; border: 2px solid var(--sc-border-strong); border-top-color: transparent; border-radius: 50%; animation: sc-spin 0.7s linear infinite; }
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-maint-terminal { margin: 4px 16px 16px; }
.sc-maint-terminal-head { font: 600 11px/1 var(--sc-font); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); margin-bottom: 6px; }
.sc-dbrestore-empty { padding: 12px 13px; color: var(--sc-text-muted); font-style: italic; font-size: 12px; margin: 0; }

/* ----- Configuration sub-tabs ----- */
/* Configuration + Deployment both use the shared .sc-subpage shell (see below). */

/* ===== Configuration page shell — shared by Settings, Accounts, Maintenance =====
   One wrapper + one header so every sub-tab sits on the same white canvas with the
   same heading and vertical rhythm. Page-specific content (setting rows, account
   table, maintenance cards) keeps its own styles; only the shell and header live
   here, so a new sub-tab gets the look for free. */
.sc-cfg {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* The settings form is a structural wrapper, not a visual block: dissolve its box
   so the sections inside it share the shell's flex rhythm with everything else. */
.sc-cfg > form { display: contents; }
.sc-cfg-header { margin: 0; }
.sc-cfg-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--sc-blue-dark);
  letter-spacing: -0.01em;
}
.sc-cfg-header p { margin: 4px 0 0; font-size: 13px; color: var(--sc-text-muted); max-width: 70ch; }

/* ----- Per-build detail: live vs historical ----- */
.sc-detail-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sc-text-muted); margin-bottom: 12px; }
.sc-detail-back:hover { color: var(--sc-blue-dark); text-decoration: none; }
.sc-banner { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--sc-radius); font-size: 12px; margin-bottom: 16px; }
.sc-banner.live { background: rgba(31,136,61,.08); border: 1px solid rgba(31,136,61,.28); color: #14622c; }
.sc-banner.historical { background: var(--sc-bg-soft); border: 1px solid var(--sc-border-strong); color: var(--sc-text-muted); }
.sc-banner .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-banner.live .dot { background: var(--sc-ok); box-shadow: 0 0 0 3px rgba(31,136,61,.18); }
.sc-detail-head2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sc-detail-head2 .num { font-family: var(--sc-mono); font-weight: 700; font-size: 16px; color: var(--sc-text); }
.sc-detail-head2 .state { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.sc-detail-head2 .state.ok { background: rgba(31,136,61,.12); color: var(--sc-ok); }
.sc-detail-head2 .state.fail { background: rgba(237,28,36,.12); color: var(--sc-fail); }
.sc-detail-head2 code { background: rgba(0,0,0,.04); padding: 1px 6px; border-radius: 3px; font-size: 12px; color: var(--sc-text); }
.sc-detail-submeta { font-size: 11.5px; color: var(--sc-text-muted); font-family: var(--sc-mono); margin-bottom: 16px; }

/* Production build button + Builds page — panel + toolbar + the shared table
   signature, matching the DNS (.cf-dns) and S3 (.s3) pages. */
.sc-prod-build { margin-left: 8px; display: inline-flex; align-items: center; gap: 5px;
  color: var(--sc-blue-dark); border-color: rgba(35,150,211,0.4); background: var(--sc-blue-soft); }
.sc-prod-build .bld-ic { width: 13px; height: 13px; }
/* Delete action mirrors the Build button's icon+label layout (danger palette from .sc-btn-danger) */
.sc-prod-delete .bld-ic { width: 13px; height: 13px; }
.sc-prod-build[disabled] { color: var(--sc-text-muted); background: var(--sc-bg-soft); border-color: var(--sc-border); }
/* The build POST is in flight only briefly; hx-disabled-elt="this" blocks a
   double-submit. Keep the button blue (not greyed) during that window so it
   doesn't flicker — the row swaps to the Building pill on response. */
.sc-prod-build.htmx-request { color: var(--sc-blue-dark); background: var(--sc-blue-soft); border-color: rgba(35,150,211,0.4); }
.sc-releases { background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: 10px; overflow: hidden; }
.sc-releases-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); flex-wrap: wrap; row-gap: 8px; }
.sc-releases-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); }
.sc-releases-title .bld-ic { color: var(--sc-blue-dark); }
.bld-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.sc-chip-buildonly { background: rgba(139,148,158,0.10); color: var(--sc-text-muted); }
.sc-releases-count { font-size: 12.5px; color: var(--sc-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-releases-filter input { width: 240px; max-width: 44vw; padding: 7px 10px; border: 1px solid var(--sc-border-strong); border-radius: 8px; font: 13px/1 var(--sc-font); background: var(--sc-bg); outline: none; }
.sc-releases-filter input:focus { border-color: var(--sc-blue); box-shadow: 0 0 0 3px var(--sc-blue-soft); }
.sc-rel-deployonly { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sc-text); white-space: nowrap; cursor: pointer; user-select: none; }
.sc-rel-deployonly input { width: 15px; height: 15px; margin: 0; accent-color: var(--sc-blue); cursor: pointer; }
.sc-releases-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sc-releases-table thead th { text-align: left; font-size: 12px; color: var(--sc-text-muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--sc-border-strong); background: var(--sc-bg-soft); white-space: nowrap; }
.sc-releases-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; }
.sc-releases-table tbody tr:hover { background: var(--sc-bg-soft); }
.sc-rel-hidden { display: none; }
.sc-releases-foot { padding: 12px 14px 2px; font-size: 11.5px; color: var(--sc-text-muted); }
.sc-rel-commit-msg { font-size: 13px; color: var(--sc-text); font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-rel-commit-meta { font-size: 11.5px; color: var(--sc-text-muted); margin-top: 3px; font-family: var(--sc-mono); }
.sc-rel-commit-meta .auth { font-family: var(--sc-font); }
.sc-rel-built { font-size: 11px; color: var(--sc-text-muted); font-family: var(--sc-mono); margin-top: 5px; }
.sc-rel-none { font-size: 12px; color: var(--sc-text-dim); font-style: italic; }
.sc-rel-badge { font: 700 9.5px/1 var(--sc-font); letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; }
.sc-rel-badge.head { background: rgba(139,148,158,.14); color: var(--sc-text-muted); }
.sc-rel-badge.live { background: rgba(31,136,61,.12); color: var(--sc-ok); }
.sc-rel-badge.live .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-ok); box-shadow: 0 0 0 3px rgba(31,136,61,.18); }
.sc-releases-table th.sc-col-actions, .sc-releases-table td.sc-col-actions { text-align: right; white-space: nowrap; width: 1%; vertical-align: middle; }
tr.is-live-prod { background: rgba(31,136,61,.045); }
tr.is-live-prod:hover { background: rgba(31,136,61,.07); }

/* ---- published-to-prod tag badges (from <service>-<type>/…-prod git tags) ----
   Colour reports STATE only: green = live in prod, faded green = previously
   published (superseded), ghost = not shipped from this commit. Service identity
   stays neutral monospace so it never collides with the page's status palette. */
.sc-rel-pub { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sc-rel-pubgrp { display: inline-flex; align-items: stretch; border: 1px solid var(--sc-border-strong); border-radius: 6px; font-family: var(--sc-mono); }
.sc-rel-pubgrp.dim { opacity: .6; }
.sc-rel-pubname { padding: 4px 8px; background: rgba(139,148,158,.15); color: #3f4448; font-weight: 700; font-size: 10.5px; display: flex; align-items: center; border-radius: 6px 0 0 6px; }
.sc-rel-pubslots { display: flex; }
.sc-rel-pubslot { padding: 4px 7px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-left: 1px solid var(--sc-border-strong); display: flex; align-items: center; gap: 4px; position: relative; cursor: default; }
.sc-rel-pubslot:last-child { border-radius: 0 6px 6px 0; }
.sc-rel-pubslot.live { background: rgba(31,136,61,.16); color: #146530; }
.sc-rel-pubslot.prev { background: rgba(31,136,61,.07); color: #3d6b49; }
.sc-rel-pubslot.off  { background: #fff; color: #a2a9b0; }
.sc-rel-tick { width: 12px; height: 12px; flex: 0 0 auto; color: var(--sc-ok); animation: sc-tickglow 2.1s ease-in-out infinite; }
.sc-rel-hic  { width: 10px; height: 10px; flex: 0 0 auto; opacity: .9; }
@keyframes sc-tickglow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(31,136,61,0)); }
  50%      { filter: drop-shadow(0 0 3.5px rgba(31,136,61,.9)); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-rel-tick { animation: none; filter: drop-shadow(0 0 2px rgba(31,136,61,.55)); }
}
/* hover a slot → the underlying git tag (or a note for not-shipped slots) */
.sc-rel-pubslot[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: #1f2428; color: #fff; font: 600 10.5px/1.35 var(--sc-mono); text-transform: none; letter-spacing: 0;
  padding: 6px 9px; border-radius: 6px; white-space: nowrap; z-index: 60; box-shadow: 0 6px 18px rgba(13,17,23,.28);
}
.sc-rel-pubslot[data-tip]:hover::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1f2428; z-index: 60;
}
.sc-rel-pubslot.off[data-tip]:hover::after  { background: #4a5157; }
.sc-rel-pubslot.off[data-tip]:hover::before { border-top-color: #4a5157; }
/* legend in its own card above the builds block; matches the .sc-releases card */
.sc-rel-legend-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: 10px;
  padding: 11px 16px; margin-bottom: 12px;
}
.sc-rel-legend-title { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-text-muted); flex: 0 0 auto; }
.sc-rel-legend-items { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.sc-rel-legend-items li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sc-text); }
.sc-rel-legend-hint { margin-left: auto; font-size: 11.5px; color: var(--sc-text-dim); font-style: italic; }
.sc-rel-legchip { display: inline-flex; align-items: center; gap: 4px; font: 800 9px/1 var(--sc-mono); text-transform: uppercase; border-radius: 5px; padding: 4px 6px; border: 1px solid var(--sc-border-strong); }
.sc-rel-legchip.live { background: rgba(31,136,61,.16); color: #146530; border-color: rgba(31,136,61,.5); }
.sc-rel-legchip.prev { background: rgba(31,136,61,.07); color: #3d6b49; border-color: rgba(31,136,61,.22); }
.sc-rel-legchip.off  { background: #fff; color: #a2a9b0; border-style: dashed; }
@media (max-width: 768px) {
  .sc-rel-legend-hint { margin-left: 0; flex-basis: 100%; }
}
/* clickable build-status control on the Releases page (opens the build's pipeline) */
.sc-rel-buildbtn { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--sc-font); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: filter .12s, box-shadow .12s; }
.sc-rel-buildbtn:hover { filter: brightness(.97); box-shadow: 0 1px 2px rgba(16,24,32,.10); }
.sc-rel-buildbtn:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: 2px; }
.sc-rel-buildbtn-ok { background: rgba(31,136,61,.10); color: var(--sc-ok); border-color: rgba(31,136,61,.25); }
.sc-rel-buildbtn-running { background: rgba(191,135,0,.12); color: var(--sc-warn); border-color: rgba(191,135,0,.30); }
.sc-rel-buildbtn-failed { background: rgba(237,28,36,.10); color: var(--sc-fail); border-color: rgba(237,28,36,.30); }
/* the build pipeline shown in a focused modal (reuses #build-options-modal) */
.prod-pipe-modal { border: none; border-radius: 12px; padding: 0; background: var(--sc-bg); color: var(--sc-text); width: min(1080px, 96vw); max-width: 96vw; max-height: 88vh; box-shadow: 0 18px 50px rgba(13,17,23,.30), 0 2px 6px rgba(13,17,23,.10); font-family: var(--sc-font); overflow: hidden; }
.prod-pipe-modal::backdrop { background: rgba(13,17,23,.35); backdrop-filter: blur(2px); }
.prod-pipe-inner { display: flex; flex-direction: column; max-height: 88vh; }
.prod-pipe-modal .bo-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sc-border); flex-shrink: 0; }
.prod-pipe-modal .bo-title { font-weight: 600; font-size: 14.5px; color: var(--sc-blue-dark); }
.prod-pipe-modal .bo-title small { font: 12px/1 var(--sc-mono); color: var(--sc-text-muted); font-weight: 400; }
.prod-pipe-modal .pipeline-job-status { font-size: 11px; font-family: var(--sc-mono); color: var(--sc-text-muted); }
.prod-pipe-modal .bo-close { margin-left: auto; background: none; border: 1px solid transparent; border-radius: var(--sc-radius); color: var(--sc-text-muted); font-size: 18px; line-height: 1; padding: 4px 9px; cursor: pointer; }
.prod-pipe-modal .bo-close:hover { color: var(--sc-text); background: var(--sc-bg-hover); }
.prod-pipe-modal .prod-pipe-body { min-height: 0; flex: 1; }
.prod-pipe-modal .sc-pipe-tree-wrap { max-height: none; }

/* ===== merged commits page: Actions bar (one segmented control) ===== */
.sc-actions { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--sc-bg);
  border: 1px solid var(--sc-border); border-radius: var(--sc-radius-card); margin-bottom: 12px; }
.sc-actions-label { font: 600 10.5px/1 var(--sc-font); text-transform: uppercase; letter-spacing: .07em;
  color: var(--sc-text-muted); }

/* segmented action control — rebuild / reset / docker logs / unsubscribe at one
   compact size; neutral surfaces with semantic-coloured icons, destructive last */
.sc-seg { display: inline-flex; border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-bg); }
.sc-segbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  font: 600 12px/1 var(--sc-font); white-space: nowrap; cursor: pointer;
  border: 0; border-left: 1px solid var(--sc-border); background: transparent;
  color: var(--sc-text); transition: background .12s ease; }
.sc-segbtn:first-child { border-left: 0; }
.sc-segbtn:hover { background: var(--sc-bg-hover); }
.sc-segbtn:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: -2px; }
.sc-segbtn svg { width: 15px; height: 15px; flex-shrink: 0; }
.sc-segbtn-rebuild svg { color: var(--sc-blue); }
.sc-segbtn-reset svg { color: var(--sc-warn); }
.sc-segbtn-docker svg { color: #2496ED; }
.sc-segbtn-danger { color: var(--sc-fail); border-left: 1px solid var(--sc-border-strong); }
.sc-segbtn-danger svg { color: var(--sc-fail); }
.sc-segbtn-danger:hover { background: var(--sc-fail); color: #fff; }
.sc-segbtn-danger:hover svg { color: #fff; }
@media (prefers-reduced-motion: reduce) { .sc-segbtn { transition: none; } }

/* Database subsection merged inside the Overview card */
.sc-overview-dbsec { border-top: 1px solid var(--sc-border); margin-top: 2px; }
.sc-overview-dbsec .sc-subhead { display: flex; align-items: center; gap: 8px; padding: 9px 16px 4px; }
.sc-overview-dbsec .sc-subhead-title { font: 600 11px/1 var(--sc-font); text-transform: uppercase;
  letter-spacing: .06em; color: var(--sc-text-muted); }
.sc-overview-dbsec .sc-subhead-meta { margin-left: auto; font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); }

/* Docker modal takes ~90% of the screen */
.sc-docker-modal[open] { display: flex; flex-direction: column; width: 90vw; max-width: 90vw; height: 90vh; max-height: 90vh; }
.sc-docker-modal .docker-modal-body { flex: 1; overflow-y: auto; }
.sc-docker-modal .sc-svclogs-term-body { min-height: 42vh; }

/* ----- VPS page (Deployment > VPS) — full-width shell matching the DNS/S3 pages ----- */
.sc-vps { min-height: 100%; }
.sc-vps > .sc-dash-seg { margin-bottom: var(--sc-space-md); }

/* ----- Linode + Vultr panels (Deployment > VPS page) — same card chrome for both providers ----- */
.sc-linode, .sc-vultr { border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card); overflow: hidden; margin: 0; background: var(--sc-bg); }
.lin-title { display: inline-flex; align-items: center; gap: 7px; }
.lin-title .lin-ic { width: 16px; height: 16px; color: var(--s3-linode); }
.lin-title .vultr-ic { color: var(--s3-vultr); }
.lin-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sc-text-muted); }
.lin-tag { font-family: var(--sc-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--sc-text-muted); background: var(--sc-bg-softer); border: 1px solid var(--sc-border-strong); border-radius: 999px; padding: 1px 8px; }
.lin-tag.is-cloud { color: var(--sc-blue-dark); background: rgba(35,150,211,0.08); border-color: rgba(35,150,211,0.3); }
.lin-error { padding: 7px 14px; font-size: 12px; color: var(--sc-fail); background: rgba(237,28,36,0.06); border-bottom: 1px solid var(--sc-border); }

.sc-lin-table { width: 100%; border-collapse: collapse; }
.sc-lin-table th, .sc-lin-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--sc-border); vertical-align: top; }
.sc-lin-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sc-text-muted); font-weight: 600; background: var(--sc-bg-soft); }
.sc-lin-table tr:last-child td { border-bottom: 0; }
.sc-lin-table tr:hover td { background: var(--sc-bg-softer); }
.lin-label { font-weight: 600; color: var(--sc-text); }
.lin-spec { font-variant-numeric: tabular-nums; }
.lin-spec b { color: var(--sc-text); font-weight: 600; }
.lin-spec .muted, .lin-store .muted { color: var(--sc-text-muted); }
.lin-region { font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text-muted); margin-top: 2px; }

/* Machine-type reveal — the plan / type id (e.g. g6-standard-6) is hidden from
   the row and surfaced as a tooltip on hover (desktop) or tap-focus (touch) of
   the vCPU/RAM spec. */
.lin-typehint { position: relative; cursor: help; outline: none; }
.lin-spec .lin-typehint { border-bottom: 1px dotted var(--sc-border-strong); }
.lin-typehint[data-type=""] { cursor: default; border-bottom: 0; }
.lin-typehint::after {
  content: attr(data-type);
  position: absolute; left: 0; top: calc(100% + 5px); z-index: 20;
  font-family: var(--sc-mono); font-size: 11px; line-height: 1; white-space: nowrap;
  color: var(--sc-text); background: var(--sc-bg);
  border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius);
  padding: 5px 8px; box-shadow: var(--sc-shadow-modal);
  opacity: 0; visibility: hidden; transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none;
}
.lin-typehint:hover::after, .lin-typehint:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }
.lin-typehint[data-type=""]::after { content: none; }
.lin-store .base { color: var(--sc-text); display: block; }
.lin-store .vol-list { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--sc-border-strong); }
.lin-store .vol-list li { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; color: var(--sc-blue-dark); font-size: 12px; }
.lin-store .vol-list li::before { content: "\2192"; color: var(--sc-text-muted); font-size: 11px; }
.lin-store .vol-list code { font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text-muted); }
.lin-ips { font-family: var(--sc-mono); font-size: 12px; color: var(--sc-text); }
.lin-ips div { padding: 1px 0; }
.pip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pip.running { background: var(--sc-ok); box-shadow: 0 0 0 3px rgba(31,136,61,0.14); }
.pip.offline { background: var(--sc-text-dim); }

.sc-lin-table tr.is-other td { background: var(--sc-bg-soft); color: var(--sc-text-dim); }
.sc-lin-table tr.is-other:hover td { background: var(--sc-bg-softer); }
.sc-lin-table tr.is-other .lin-label { color: var(--sc-text-muted); font-weight: 500; }
.sc-lin-table tr.is-other .lin-spec b { color: var(--sc-text-muted); font-weight: 500; }
.sc-lin-table tr.is-other .lin-ips, .sc-lin-table tr.is-other .lin-store .base { color: var(--sc-text-dim); }
.sc-lin-table tr.is-other .pip.running { background: var(--sc-text-dim); box-shadow: none; }
.sc-lin-table tr.lin-divider td { padding: 5px 14px; background: var(--sc-bg-softer); border-bottom: 1px solid var(--sc-border-strong); }
.lin-divider span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sc-text-muted); font-weight: 600; }
.sc-lin-table tr.lin-empty-cloud td { text-align: center; padding: 14px; color: var(--sc-text-muted); font-size: 12px; background: var(--sc-bg); }
.sc-lin-table tr.lin-empty-cloud code { font-family: var(--sc-mono); color: var(--sc-text); }

/* DNS routing enrichment — the Machine cell's "→ IP forwarding" line and the
   Public IP cell's per-IP A-record pills (Option C, routing statement). */
.lin-route { margin-top: 4px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: var(--sc-mono); font-size: 11.5px; }
.lin-route-arrow { color: var(--sc-text-dim); }
.lin-route-ip { color: var(--sc-blue-dark); }
.lin-route-verdict { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sc-font); font-size: 11px; font-weight: 600; }
.lin-route-verdict .dns-ic { width: 12px; height: 12px; flex-shrink: 0; }
.lin-route-verdict.is-ok { color: var(--sc-ok); }
.lin-route-verdict.is-missing { color: var(--sc-warn); }
.lin-route-note { margin-top: 3px; font-size: 11px; color: var(--sc-text-muted); }
.lin-route-note code { font-family: var(--sc-mono); }
.lin-ip-group { padding: 1px 0 3px; }
.lin-ip-group + .lin-ip-group { margin-top: 8px; }
.lin-ip { display: block; }
.lin-dns-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.lin-dns-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sc-mono); font-size: 10.5px; line-height: 1; background: var(--sc-bg-softer); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-pill); padding: 3px 9px; white-space: nowrap; }
.lin-dns-pill .dns-ic { width: 12px; height: 12px; flex-shrink: 0; }
.lin-dns-pill .host { color: var(--sc-text); font-weight: 600; }
.lin-dns-pill .zone { color: var(--sc-text-muted); }
/* The label pill (A-record matching the machine label, e.g. 01.cloud.syscad.net):
   a soft Cloudflare-orange wash with orange ink + cloud glyph when it forwards,
   a quiet red tint with a warning glyph when the record is missing — aliases stay neutral
   so only the proxied host carries colour */
.lin-dns-pill.is-match { background: var(--sc-cf-orange-soft); border-color: transparent; }
.lin-dns-pill.is-match .dns-ic { color: var(--sc-cf-orange); }
.lin-dns-pill.is-match .host { color: var(--sc-cf-orange-dark); }
.lin-dns-pill.is-missing { background: var(--sc-fail-soft); border-color: transparent; }
.lin-dns-pill.is-missing .dns-ic { color: var(--sc-fail); }
.lin-dns-pill.is-missing .host { color: var(--sc-fail); font-weight: 600; }
.lin-dns-pill.is-missing .miss { color: var(--sc-fail); font-weight: 600; letter-spacing: 0.02em; }
.lin-ip-nodns { display: block; margin-top: 5px; font-family: var(--sc-font); font-size: 11px; color: var(--sc-text-muted); font-style: italic; }

/* Deprioritised (non-cloud) rows: dim the verdict/pills so they don't shout. */
.sc-lin-table tr.is-other .lin-route-verdict.is-ok,
.sc-lin-table tr.is-other .lin-route-verdict.is-missing,
.sc-lin-table tr.is-other .lin-route-ip { color: var(--sc-text-dim); }
.sc-lin-table tr.is-other .lin-dns-pill:not(.is-match):not(.is-missing) { background: var(--sc-bg-soft); border-color: var(--sc-border); }
.sc-lin-table tr.is-other .lin-dns-pill:not(.is-match):not(.is-missing) .host { color: var(--sc-text-muted); }

/* Deployment > Dashboard — Linode/Vultr panel mobile cards (spec-bar). Desktop uses .sc-lin-table above; swapped in <=768px. */
.sc-lin-cards { display: none; }
@media (max-width: 768px) {
  .sc-linode .sc-lin-table, .sc-vultr .sc-lin-table { display: none; }
  .sc-lin-cards { display: block; padding: var(--sc-space-sm) 0 var(--sc-space-xs); }
  .sc-lin-cards-divider { padding: 8px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sc-text-muted); font-weight: 600; }
  .sc-lin-cards-divider code { font-family: var(--sc-mono); font-size: 10px; }
  .sc-lin-empty-cloud { margin: 0 12px 10px; padding: 14px; text-align: center; color: var(--sc-text-muted); font-size: 12px; border: 1px dashed var(--sc-border-strong); border-radius: var(--sc-radius-card); }
  .sc-lin-empty-cloud code { font-family: var(--sc-mono); color: var(--sc-text); }
  .sc-lin-card { border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card); margin: 0 12px 10px; padding: 11px 13px; }
  .sc-lin-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
  .sc-lin-card-name { font-family: var(--sc-mono); font-size: 13px; font-weight: 600; color: var(--sc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-lin-card-status { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 600; text-transform: capitalize; }
  .sc-lin-card-status.running { color: var(--sc-ok); }
  .sc-lin-card-status.offline { color: var(--sc-text-muted); }
  .sc-lin-card-bar { display: flex; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; }
  .sc-lin-metric { flex: 1; padding: 6px 8px; text-align: center; border-right: 1px solid var(--sc-border); }
  .sc-lin-metric:last-child { border-right: 0; }
  .sc-lin-metric .n { display: block; font-family: var(--sc-mono); font-weight: 600; font-size: 13px; color: var(--sc-text); font-variant-numeric: tabular-nums; }
  .sc-lin-metric .l { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-text-muted); margin-top: 1px; }
  .sc-lin-card-sub { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--sc-mono); font-size: 11.5px; color: var(--sc-text-muted); }
  .sc-lin-card-region { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-lin-card-ips { color: var(--sc-text); text-align: right; flex-shrink: 0; }
  .sc-lin-card-ips > span { display: block; }
  .sc-lin-card-route { margin-top: 7px; }
  .sc-lin-card-route .lin-route-ip { font-family: var(--sc-mono); }
  .sc-lin-card-ipgroup { display: block; }
  .sc-lin-card-ipgroup + .sc-lin-card-ipgroup { margin-top: 6px; }
  .sc-lin-card-ipgroup .lin-dns-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; justify-content: flex-end; }
  .sc-lin-card.is-other .lin-route-verdict.is-ok,
  .sc-lin-card.is-other .lin-route-verdict.is-missing { color: var(--sc-text-dim); }
  .sc-lin-card-vols { margin-top: 6px; font-family: var(--sc-mono); font-size: 11.5px; color: var(--sc-blue-dark); }
  .sc-lin-card-vol { display: block; }
  .sc-lin-card-vol::before { content: "\2192 "; color: var(--sc-text-muted); }
  .sc-lin-card-actions { margin-top: 9px; display: flex; justify-content: flex-end; }
  .sc-lin-card.is-other { opacity: 0.72; }
  .sc-lin-card.is-other .sc-lin-card-name { color: var(--sc-text-muted); font-weight: 500; }
}

/* Releases sub-navigation: a full-width tab bar under the topbar. The wrapper
   holds the fixed sub-nav above the scrollable .sc-detail inside the sc-app
   1fr row, so the global grid and other pages are untouched. */
/* .sc-subpage — shared shell for the Deployment + Configuration sections: a fixed
   sub-nav above a scrolling .sc-detail pane, filling the sc-app grid's 1fr row. */
.sc-subpage { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sc-subpage > .sc-detail { flex: 1; min-height: 0; }
.sc-subnav { display: flex; gap: 2px; padding: 0 20px; background: var(--sc-bg); border-bottom: 1px solid var(--sc-border); flex-shrink: 0; }
.sc-subnav a { padding: 10px 14px; font: 500 13px/1 var(--sc-font); color: var(--sc-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sc-subnav a:hover { color: var(--sc-blue-dark); text-decoration: none; }
.sc-subnav a.active { color: var(--sc-blue-dark); border-bottom-color: var(--sc-blue); }

/* ----- DNS (Cloudflare) — folded from cloudflare-dns.css onto shared --sc- tokens ----- */
.cf-dns {
  background: var(--sc-bg);
  border: 1px solid var(--sc-border-strong);
  border-radius: 10px;
  overflow: hidden;
}
.cf-toolbar { display: flex; align-items: center; gap: 12px; }
.cf-zone-name {
  font-size: 12px;
  color: var(--sc-text-muted);
  background: var(--sc-bg-soft);
  border-radius: 6px;
  padding: 2px 8px;
}
.cf-count { font-size: 12.5px; color: var(--sc-text-muted); white-space: nowrap; }
.cf-typefilter select {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 8px;
  font-size: 13px;
  color: var(--sc-text);
  background-color: var(--sc-bg);
  /* Native chevron replaced by an inline SVG so the control matches the filter input. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.cf-typefilter select:focus {
  border-color: var(--sc-blue);
  box-shadow: 0 0 0 3px var(--sc-blue-soft);
}
.cf-filter input {
  width: 280px;
  padding: 7px 10px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
.cf-filter input:focus {
  border-color: var(--sc-blue);
  box-shadow: 0 0 0 3px var(--sc-blue-soft);
}
.cf-dns-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cf-dns-table thead th {
  text-align: left;
  font-size: 12px;
  color: var(--sc-text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sc-border-strong);
  background: var(--sc-bg-soft);
  white-space: nowrap;
}
.cf-dns-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--sc-border);
  vertical-align: middle;
}
.cf-dns-table tbody tr.cf-rec:hover { background: var(--sc-bg-soft); }
.cf-hidden { display: none; }
.cf-name { font-weight: 500; }
.cf-zone { color: var(--sc-text-muted); }
.cf-content {
  font-variant-numeric: tabular-nums;
  max-width: 320px;
}
.cf-content-val {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Pills under an A record whose IP is a live VPS public address, coloured by
   provider to match the Deployment > VPS panel icons: dark green for Linode,
   Vultr blue for Vultr. */
.cf-vps-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.cf-vps-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sc-mono); font-size: 10.5px; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--sc-radius-pill); padding: 3px 8px;
}
.cf-vps-pill .lin-ic { width: 11px; height: 11px; flex: 0 0 auto; }
.cf-vps-prov { font-weight: 700; }
.cf-vps-host { opacity: 0.85; letter-spacing: -0.01em; }
.cf-vps-pill--linode {
  color: var(--s3-linode-ink); background: var(--s3-linode-soft); border-color: rgba(0,169,92,0.3);
}
.cf-vps-pill--linode .lin-ic { color: var(--s3-linode); }
.cf-vps-pill--vultr {
  color: var(--s3-vultr-ink); background: var(--s3-vultr-soft); border-color: rgba(0,123,252,0.3);
}
.cf-vps-pill--vultr .vultr-ic { color: var(--s3-vultr); }
.cf-ttl { white-space: nowrap; }
.cf-dash { color: var(--sc-text-dim); }
.cf-col-actions, .cf-actions { text-align: right; white-space: nowrap; width: 1%; }
.cf-edit { color: var(--sc-blue-dark); cursor: pointer; font-weight: 500; }
.cf-edit:hover { text-decoration: underline; }
.cf-proxy { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cf-proxy.dns .cf-cloud { color: var(--sc-text-dim); }
.cf-proxy.proxied .cf-cloud { color: var(--sc-cf-orange); }
.cf-title { display: inline-flex; align-items: center; gap: 7px; }
.cf-title .cf-cloud { width: 16px; height: 16px; color: var(--sc-cf-orange); }
.cf-error {
  margin: 10px 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--sc-warn-soft);
  border: 1px solid rgba(191,135,0,0.35);
  color: var(--sc-warn);
  font-size: 13px;
}
/* inline edit row */
.cf-editrow > td {
  background: var(--sc-bg-soft);
  border-left: 3px solid var(--sc-blue);
  padding: 0;
}
.cf-editform { padding: 18px 16px; }
.cf-fields {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 70px minmax(220px, 1.4fr) auto 130px;
  gap: 16px;
  align-items: end;
}
.cf-field label {
  display: block;
  font-size: 12px;
  color: var(--sc-text-muted);
  margin-bottom: 5px;
  font-weight: 600;
}
.cf-field input[type="text"],
.cf-field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 7px;
  font-size: 13px;
  background: var(--sc-bg);
}
.cf-field .cf-static { padding: 9px 2px; font-weight: 500; }
.cf-field-comment { max-width: 640px; margin-top: 6px; }
.cf-toggle-wrap { display: flex; align-items: center; gap: 9px; }
.cf-switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; }
.cf-switch input { opacity: 0; width: 0; height: 0; }
.cf-slider {
  position: absolute; inset: 0; background: var(--sc-border-strong); border-radius: 22px;
  transition: .15s; cursor: pointer;
}
.cf-slider:before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: var(--sc-bg); border-radius: 50%; transition: .15s;
}
.cf-switch input:checked + .cf-slider { background: var(--sc-cf-orange); }
.cf-switch input:checked + .cf-slider:before { transform: translateX(16px); }
.cf-attrs {
  margin: 18px 0 10px;
  color: var(--sc-text-muted);
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid var(--sc-border);
  padding-top: 14px;
}
.cf-apierr {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--sc-fail-soft);
  color: var(--sc-fail);
  font-size: 13px;
  border: 1px solid rgba(237,28,36,0.30);
}
.cf-editactions { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
.cf-editactions .cf-delete { margin-left: auto; }
/* blue create button */
.cf-create-btn {
  background: var(--sc-blue);
  border: 1px solid var(--sc-blue);
  color: #fff;
}
.cf-create-btn:hover { background: var(--sc-blue-dark); border-color: var(--sc-blue-dark); }
/* create-record modal (surface inherited from .sc-modal) */
.cf-modal { --sc-modal-max: 820px; padding: 26px 28px 22px; }
.cf-modal-head { display: flex; align-items: center; margin-bottom: 8px; }
.cf-modal-head h2 { font-size: 22px; font-weight: 700; margin: 0; }
.cf-modal-x {
  margin-left: auto;
  width: 34px; height: 34px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 8px;
  background: var(--sc-bg);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--sc-text);
}
.cf-modal-x:hover { background: var(--sc-bg-soft); }
.cf-sentence { color: var(--sc-text-muted); font-size: 15px; margin: 6px 0 20px; }
.cf-create-row { display: grid; gap: 16px; margin-bottom: 16px; align-items: end; }
.cf-create-row-1 { grid-template-columns: 110px 1fr; }
.cf-create-row-2 { grid-template-columns: minmax(240px, 1fr) auto 130px; }
.cf-modal .cf-field select { width: 100%; }
.cf-attrs-note { color: var(--sc-text-muted); font-size: 13px; margin: 0 0 14px; }
.cf-opt { color: var(--sc-text-muted); font-weight: 400; }
.cf-field-comment label { display: block; }
.cf-modal-actions { margin-top: 20px; }
#cf-create-error:empty { display: none; }
#cf-create-error .cf-apierr { margin-top: 4px; }

/* ----- Build options modal (surface inherited from .sc-modal) ----- */
.build-options-modal { --sc-modal-max: 720px; display: flex; flex-direction: column; }
.bo-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sc-border); }
.bo-title { font-weight: 600; font-size: 14.5px; color: var(--sc-blue-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-title small { font: 12px/1 var(--sc-mono); color: var(--sc-text-muted); font-weight: 400; }
.bo-close { margin-left: auto; background: none; border: 1px solid transparent; border-radius: var(--sc-radius); color: var(--sc-text-muted); font-size: 16px; line-height: 1; padding: 4px 7px; cursor: pointer; }
.bo-close:hover { color: var(--sc-text); background: var(--sc-bg-hover); }
.bo-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.bo-seg { display: inline-flex; border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius); overflow: hidden; }
.bo-seg button { appearance: none; border: 0; border-left: 1px solid var(--sc-border-strong); background: var(--sc-bg); color: var(--sc-text); font: 600 11.5px/1 var(--sc-mono); padding: 6px 13px; cursor: pointer; }
.bo-seg button:first-child { border-left: 0; }
.bo-seg button[data-active] { background: var(--sc-blue); color: #fff; }
.bo-seg button[disabled] { color: var(--sc-border-strong); cursor: not-allowed; background: var(--sc-bg-soft); }
.bo-fresh { display: inline-flex; align-items: center; gap: 6px; font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); }
.bo-fresh .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--sc-ok); box-shadow: 0 0 0 2px rgba(31,136,61,.18); }
.bo-fresh b { color: var(--sc-text); font-weight: 600; }
.bo-fresh.stale { color: var(--sc-warn); }
.bo-refresh { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font: 500 12px/1 var(--sc-font); border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius); background: var(--sc-bg); color: var(--sc-text); cursor: pointer; }
.bo-refresh:hover { border-color: var(--sc-blue-dark); color: var(--sc-blue-dark); background: var(--sc-bg-hover); }
.bo-body { overflow-y: auto; max-height: 52vh; min-height: 280px; }
.bo-body--error { padding: 16px; }
.bo-latest { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--sc-border); cursor: pointer; background: rgba(35,150,211,.045); }
.bo-latest:has(input:checked) { background: rgba(35,150,211,.09); box-shadow: inset 3px 0 0 var(--sc-blue); }
.bo-latest input { accent-color: var(--sc-blue); margin: 0; }
.bo-latest .l-main { display: block; font: 600 13px/1.1 var(--sc-font); color: var(--sc-text); }
.bo-latest .l-sub { display: block; font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); margin-top: 3px; }
.bo-month { border-bottom: 1px solid var(--sc-border); }
.bo-month > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 8px 16px; user-select: none; }
.bo-month > summary::-webkit-details-marker { display: none; }
.bo-month > summary:hover { background: var(--sc-bg-hover); }
.bo-month > summary:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: -2px; }
.bo-chev { width: 9px; color: var(--sc-text-muted); font-size: 9px; transition: transform .15s ease; }
.bo-month[open] .bo-chev { transform: rotate(90deg); }
.bo-mname { font: 600 12px/1 var(--sc-font); color: var(--sc-text); }
.bo-mmeta { margin-left: auto; font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); font-variant-numeric: tabular-nums; }
.bo-month-loading { padding: 8px 16px; color: var(--sc-text-muted); font: 12px/1 var(--sc-mono); }
.bo-tbl { width: 100%; border-collapse: collapse; font: 12px/1 var(--sc-mono); }
.bo-tbl tr { cursor: pointer; }
.bo-tbl tr:hover td { background: var(--sc-bg-hover); }
.bo-tbl tr:has(input:checked) td { background: rgba(35,150,211,.08); }
.bo-tbl tr:has(input:checked) td:first-child { box-shadow: inset 3px 0 0 var(--sc-blue); }
.bo-tbl td { padding: 6px 8px; border-top: 1px solid var(--sc-border); vertical-align: middle; }
.bo-tbl td.radio { width: 16px; padding-left: 30px; }
.bo-tbl td.when { color: var(--sc-text); white-space: nowrap; }
.bo-tbl td.state { width: 1%; white-space: nowrap; }
.bo-tbl td.size { text-align: right; color: var(--sc-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 16px; }
.bo-tbl input { accent-color: var(--sc-blue); margin: 0; }
.bo-inline-msg { padding: 12px 16px; font: 12px/1.5 var(--sc-font); }
.bo-inline-err { color: var(--sc-fail); background: rgba(237,28,36,.05); border-bottom: 1px solid var(--sc-border); }
.bo-inline-empty { color: var(--sc-text-muted); }
.bo-pane { display: none; }
.bo-pane[data-active] { display: block; }
.bo-pane-fresh { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); }
.bo-pane-fresh .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--sc-ok); box-shadow: 0 0 0 2px rgba(31,136,61,.18); flex-shrink: 0; }
.bo-pane-fresh b { color: var(--sc-text); font-weight: 600; }
.bo-pane-fresh .bo-refresh { margin-left: auto; }
.bo-pane-fresh.stale { color: var(--sc-warn); }
.bo-actions { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-top: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.tag { font: 600 9.5px/1 var(--sc-mono); text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 999px; }
.tag-latest { color: var(--sc-ok); background: rgba(31,136,61,.10); }
.tag-pinned { color: var(--sc-blue-dark); background: rgba(35,150,211,.12); }
.tag-missing { color: var(--sc-warn); background: rgba(191,135,0,.14); }
@media (prefers-reduced-motion: reduce) { .bo-chev { transition: none; } }

/* ----- Linode create modal (surface inherited from .sc-modal) ----- */
.lin-modal { --sc-modal-max: 620px; }
.lin-modal [hidden] { display: none !important; }
.lin-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--sc-border); }
.lin-modal-title { font: 600 15px/1.2 var(--sc-font); color: var(--sc-text); margin: 0; }
.lin-modal-sub { font: 11px/1.4 var(--sc-font); color: var(--sc-text-muted); margin: 3px 0 0; }
.lin-modal-sub code { font-family: var(--sc-mono); }
.lin-modal-x { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--sc-text-muted); font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.lin-modal-x:hover { background: var(--sc-bg-hover); color: var(--sc-text); }
.lin-modal-stages { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 12px 18px 0; }
.lin-stage { display: inline-flex; align-items: center; gap: 7px; font: 11px/1 var(--sc-font); color: var(--sc-text-muted); background: var(--sc-bg-soft); border: 1px solid var(--sc-border-strong); border-radius: 999px; padding: 5px 11px 5px 7px; }
.lin-stage .n { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font: 600 10px/1 var(--sc-mono); background: var(--sc-bg-hover); color: var(--sc-text-muted); }
.lin-stage b { color: var(--sc-text); font-weight: 600; }
.lin-stage-arrow { color: var(--sc-text-dim); font-size: 12px; }
.lin-modal-body { padding: 16px 18px 4px; display: grid; gap: 14px; }
.lin-modal-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lin-modal-body .sc-field select, .lin-modal-body .sc-field input { width: 100%; }
.lin-field-hint { font: 11px/1.4 var(--sc-font); color: var(--sc-text-muted); margin-top: 3px; }
.lin-field-hint code { font-family: var(--sc-mono); font-size: 10.5px; }
/* Hostname prefix input with a fixed .syscad.net suffix badge. The input keeps
   its own left corners; the suffix badge caps the right side so the two read as
   a single control. */
.lin-host-group { display: flex; align-items: stretch; }
.lin-modal-body .sc-field .lin-host-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lin-host-suffix {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0 11px; font: 12px/1 var(--sc-mono); color: var(--sc-text-muted);
  background: var(--sc-bg-soft); border: 1px solid var(--sc-border-strong); border-left: 0;
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
}
.lin-host-group.is-dup input { border-color: var(--sc-fail); }
.lin-field-warn { font: 11px/1.4 var(--sc-font); color: var(--sc-fail); margin-top: 4px; }
.sc-checkbox-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Each key/tag is a selectable pill. The compound selector outranks the
   descendant `.sc-field label` heading rule, so these labels render normal-case
   (not the uppercased/muted field-heading style) without touching that shared rule. */
.sc-checkbox-list .sc-checkbox-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--sc-border-strong); border-radius: 999px;
  font: 400 13px/1 var(--sc-font); color: var(--sc-text);
  text-transform: none; letter-spacing: normal;
  background: var(--sc-bg); cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.sc-checkbox-list .sc-checkbox-item:hover { border-color: var(--sc-blue); }
.sc-checkbox-list .sc-checkbox-item:has(input:checked) { border-color: var(--sc-blue); background: rgba(35, 150, 211, 0.08); }
.sc-checkbox-list .sc-checkbox-item input { width: auto; margin: 0; cursor: pointer; accent-color: var(--sc-blue); }
.lin-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 18px; margin-top: 12px; border-top: 1px solid var(--sc-border); }
.lin-spin { display: inline-block; width: 22px; height: 22px; border: 2.5px solid rgba(35,150,211,0.25); border-top-color: var(--sc-blue); border-radius: 50%; animation: sc-spin .7s linear infinite; }
.lin-modal-status { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 18px; text-align: center; }
.lin-status-title { font: 600 13px/1.3 var(--sc-font); color: var(--sc-text); margin: 0; }
.lin-status-title code { font-family: var(--sc-mono); color: var(--sc-blue-dark); }
.lin-status-sub { font: 12px/1.4 var(--sc-font); color: var(--sc-text-muted); margin: 0; }
.lin-status-note { font: 11px/1.4 var(--sc-font); color: var(--sc-warn); margin: 0; }
.lin-prov-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; min-width: 280px; }
.lin-prov-steps li { display: flex; align-items: center; gap: 9px; font: 12px/1.3 var(--sc-font); color: var(--sc-text-muted); }
.lin-prov-steps li b { color: var(--sc-text); font-weight: 600; }
.lin-prov-mark { width: 16px; height: 16px; flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; }
.lin-prov-mark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-border-strong); }
.lin-prov-spin { width: 14px; height: 14px; border: 2px solid rgba(35,150,211,0.25); border-top-color: var(--sc-blue); border-radius: 50%; animation: sc-spin .7s linear infinite; }
.sc-label-note { text-transform: none; font-weight: 400; color: var(--sc-text-dim); }
/* In-button loading spinner for the Create / Delete actions: hidden until the
   button carries .is-loading (JS-driven fetch, e.g. delete) or sits inside an
   element htmx has marked .htmx-request (the create POST). Drawn in the button's
   own text colour (currentColor) so it reads on every variant — white on the
   filled primary, red on the outline-danger Delete. */
.sc-btn-spin {
  display: none; width: 13px; height: 13px; box-sizing: border-box; flex: 0 0 auto;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: sc-spin .6s linear infinite;
}
.sc-btn.is-loading .sc-btn-spin,
.htmx-request .sc-btn-spin { display: inline-block; }
/* Loading/status spinners convey essential progress, so under reduced motion
   keep them turning — just slower and gentler — rather than freezing them. */
@media (prefers-reduced-motion: reduce) { .lin-spin, .lin-prov-spin, .sc-btn-spin { animation-duration: 1.5s; } }
@media (max-width: 768px) { .lin-modal-row2 { grid-template-columns: 1fr; } }

/* ----- Login page ----- */
.sc-login { background: var(--sc-bg-soft); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: min(420px, 100%);
  background: var(--sc-bg);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-card);
  padding: 32px 32px 28px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.login-brand { display: flex; align-items: center; margin-bottom: 18px; }
.login-brand h1 { margin: 0; font-size: 18px; font-weight: 300; color: var(--sc-blue-dark); }
.login-hint { font-size: 12.5px; color: var(--sc-text-muted); margin: 0 0 18px; line-height: 1.5; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); margin-bottom: 5px; }
.login-field input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  font: 13px/1.4 var(--sc-font);
  color: var(--sc-text);
  background: var(--sc-bg);
}
.login-field input:focus { outline: none; border-color: var(--sc-blue); box-shadow: 0 0 0 3px var(--sc-blue-soft); }
.login-field.code input {
  font: 600 22px/1 var(--sc-mono);
  letter-spacing: 0.4em;
  text-align: center;
}
.login-actions { display: flex; gap: 10px; align-items: center; }
.login-submit {
  flex: 1;
  padding: 10px 14px;
  background: var(--sc-blue);
  color: #fff;
  border: 0;
  border-radius: var(--sc-radius);
  font: 600 13px/1 var(--sc-font);
  cursor: pointer;
}
.login-submit:hover { background: var(--sc-blue-dark); }
.login-back { font-size: 12px; color: var(--sc-text-muted); text-decoration: none; }
.login-back:hover { color: var(--sc-blue-dark); text-decoration: underline; }
.login-error {
  padding: 8px 12px;
  background: var(--sc-fail-soft);
  border: 1px solid rgba(237,28,36,0.3);
  border-radius: var(--sc-radius);
  color: var(--sc-fail);
  font-size: 12.5px;
  margin-bottom: 4px;
}
.login-email-readout {
  font: 12.5px/1 var(--sc-mono);
  color: var(--sc-text);
  background: var(--sc-bg-soft);
  padding: 6px 10px;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-border);
  display: inline-block;
}

/* ----- Inline-style sweep helpers (2026-07-02) ----- */
.sc-inline-form { display: inline-flex; align-items: center; gap: 6px; }
.sc-text-muted { color: var(--sc-text-muted); }
.sc-cta--error { border-color: rgba(237,28,36,0.4); background: rgba(237,28,36,0.05); }
.sc-dot--dim { background: var(--sc-text-dim); }
.sc-trigger-subject { color: var(--sc-text); font-weight: 500; }
.sc-branch-loglink { margin-top: 10px; }
.sc-col-shrink { width: 1%; }
.sc-detail-empty--pad { padding: 24px 18px; font-size: 13px; }

/* ----- Responsive: app shell + sidebar drawer (<=768px) ----- */
.sc-topbar-hamburger {
  display: none; border: none; background: none; padding: 0;
  font-size: 20px; line-height: 1; color: var(--sc-text);
  min-width: var(--sc-touch); min-height: var(--sc-touch);
  cursor: pointer; border-radius: var(--sc-radius);
}
.sc-topbar-hamburger:hover { background: var(--sc-bg-hover); }

@media (max-width: 768px) {
  .sc-topbar-hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .sc-body { grid-template-columns: 1fr; }
  .sc-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(var(--sc-sidebar-width), 86vw); z-index: 50;
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: var(--sc-shadow-modal);
  }
  .sc-drawer-open .sc-sidebar { transform: none; }
  .sc-drawer-open .sc-scrim { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .sc-sidebar { transition: none; } }

/* ----- Responsive: topbar wraps section-nav to a 2nd row; subnav wraps (<=768px) ----- */
@media (max-width: 768px) {
  .sc-app { grid-template-rows: auto 1fr; }
  .sc-topbar { flex-wrap: wrap; row-gap: var(--sc-space-sm); padding-top: var(--sc-space-sm); padding-bottom: var(--sc-space-sm); }
  .sc-user-menu { margin-left: auto; }
  .sc-topbar-nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 2px; }
  .sc-topbar-nav a { flex: 1; text-align: center; min-height: var(--sc-touch); display: inline-flex; align-items: center; justify-content: center; }
  .sc-subnav { flex-wrap: wrap; }
  .sc-subnav a { min-height: var(--sc-touch); display: inline-flex; align-items: center; }
}

/* ----- Responsive: data tables reflow to labelled cards (<=768px) ----- */
@media (max-width: 768px) {
  .sc-table--cards { display: block; }
  .sc-table--cards thead { display: none; }
  .sc-table--cards tbody { display: block; }
  .sc-table--cards tr {
    display: block; margin-bottom: var(--sc-space-md);
    border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card);
    padding: var(--sc-space-sm) var(--sc-space-md); background: var(--sc-bg);
  }
  .sc-table--cards td {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-space-lg);
    border: none; padding: var(--sc-space-xs) 0; text-align: right; white-space: normal;
  }
  .sc-table--cards td::before {
    content: attr(data-label); text-align: left; flex-shrink: 0;
    color: var(--sc-text-muted); font-weight: 600; font-size: var(--sc-fs-tiny);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .sc-table--cards td[data-label=""]::before,
  .sc-table--cards td:not([data-label])::before { content: none; }
  .sc-table--cards td:empty { display: none; }
  /* DNS inline-edit row is a full-width form, not a labelled card */
  .sc-table--cards tr.cf-editrow { padding: 0; border: none; margin-bottom: var(--sc-space-sm); }
  .sc-table--cards tr.cf-editrow td { display: block; text-align: left; padding: 0; }
  .sc-table--cards tr.cf-editrow td::before { content: none; }
}

/* ----- Responsive: filters, toolbars, modal grids, touch targets (<=768px) ----- */
@media (max-width: 768px) {
  /* toolbars wrap; filter inputs go full-width instead of a fixed 280px */
  .cf-toolbar { flex-wrap: wrap; row-gap: var(--sc-space-sm); }
  .cf-typefilter { flex: 0 0 auto; }
  .cf-typefilter select { width: 100%; }
  .cf-filter { flex: 1 1 100%; }
  .cf-filter input { width: 100%; }
  .sc-releases-filter { flex: 1 1 100%; }
  .sc-releases-filter input { width: 100%; max-width: none; }
  .sc-card-header { flex-wrap: wrap; row-gap: var(--sc-space-sm); }
  /* modal + form grids collapse to one column */
  .cf-fields { grid-template-columns: 1fr; }
  .cf-create-row-1, .cf-create-row-2 { grid-template-columns: 1fr; }
  /* touch-sized interactive controls */
  .sc-btn { min-height: var(--sc-touch); }
  .sc-btn-sm { min-height: 38px; }
}

/* ----- Responsive: small-phone polish — full-screen modal sheets (<=480px) ----- */
@media (max-width: 480px) {
  .sc-modal {
    width: 100vw; max-width: 100vw;
    height: 100vh; max-height: 100vh;
    border: none; border-radius: 0;
  }
  .sc-detail { padding: var(--sc-space-lg) var(--sc-space-md); }
  .cf-editform { padding: var(--sc-space-lg) var(--sc-space-md); }
  h1 { font-size: 22px; }
}

/* ============================================================
   S3 browser (Deployment > S3) — spec 2026-07-04-s3-bucket-browser
   Tables carry .sc-table--cards, so the shared mobile card reflow applies.
   ============================================================ */
/* .s3 fills the full width of .sc-detail, matching the DNS page's .cf-dns (no max-width). */
.s3-panel { background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: 10px; overflow: hidden; }
.s3-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); flex-wrap: wrap; row-gap: 8px; }
.s3-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); }
.s3-title .s3-ic { color: var(--sc-blue-dark); }
.s3-count { font-size: 12.5px; color: var(--sc-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s3-filter input { width: 240px; max-width: 44vw; padding: 7px 10px; border: 1px solid var(--sc-border-strong); border-radius: 8px; font: 13px/1 var(--sc-font); background: var(--sc-bg); outline: none; }
.s3-filter input:focus { border-color: var(--sc-blue); box-shadow: 0 0 0 3px var(--sc-blue-soft); }
.s3-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.sc-btn .s3-ic { width: 13px; height: 13px; }

.s3-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.s3-crumbs .seg { display: inline-flex; align-items: center; font: 12.5px/1 var(--sc-mono); color: var(--sc-blue-dark); }
.s3-crumbs a.seg:hover { text-decoration: underline; }
.s3-crumbs .seg.root { font-family: var(--sc-font); }
.s3-crumbs .seg.current { color: var(--sc-text); font-weight: 600; }
.s3-crumbs .sep { color: var(--sc-text-dim); font-size: 12px; }

.s3-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.s3-table thead th { text-align: left; font-size: 12px; color: var(--sc-text-muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--sc-border-strong); background: var(--sc-bg-soft); white-space: nowrap; }
.s3-table th.num, .s3-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.s3-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; }
.s3-row.s3-clickable { cursor: pointer; }
.s3-row:hover { background: var(--sc-bg-soft); }
.s3-row:hover .s3-chevron { transform: translateX(2px); color: var(--sc-blue-dark); }
.s3-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.s3-name .s3-ic { color: var(--sc-text-muted); }
.s3-name--folder .s3-ic { color: var(--sc-blue); }
.s3-name .label { overflow-wrap: anywhere; font: 12.5px/1.35 var(--sc-mono); color: var(--sc-text); }
.s3-name--folder .label { font-family: var(--sc-font); font-weight: 600; color: var(--sc-blue-dark); }
.s3-mono { font: 12px/1.3 var(--sc-mono); color: var(--sc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s3-muted { color: var(--sc-text-muted); }
.s3-dash { color: var(--sc-text-dim); }
.s3-class { font: 11px/1 var(--sc-mono); color: var(--sc-text-muted); letter-spacing: 0.02em; }
.s3-chevron { display: inline-flex; color: var(--sc-text-dim); transition: transform 0.15s ease, color 0.15s ease; }
.s3-chevron .s3-ic { width: 15px; height: 15px; }
.s3-col-chev { width: 1%; text-align: right; }
.s3-foot { padding: 12px 14px 2px; font-size: 11.5px; color: var(--sc-text-muted); }

.sc-chip-ro { background: rgba(139,148,158,0.10); color: var(--sc-text-muted); }
.sc-chip-ro .s3-ic { width: 12px; height: 12px; }
.sc-chip-sensitive { background: rgba(139,148,158,0.10); color: var(--sc-text-muted); border: 1px dashed var(--sc-border-strong); }
.sc-chip-sensitive .s3-ic { width: 11px; height: 11px; }

/* provider badge — unified bucket list, breadcrumb, and object drawer */
.s3-col-prov { width: 1%; }
.sc-chip-prov { border: 1px solid transparent; }
.sc-chip-prov .pdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.sc-chip-aws { background: var(--s3-aws-soft); color: var(--s3-aws-ink); }
.sc-chip-aws .pdot { background: var(--s3-aws); }
.sc-chip-linode { background: var(--s3-linode-soft); color: var(--s3-linode-ink); }
.sc-chip-linode .pdot { background: var(--s3-linode); }
.sc-chip-wasabi { background: var(--s3-wasabi-soft); color: var(--s3-wasabi-ink); }
.sc-chip-wasabi .pdot { background: var(--s3-wasabi); }

.s3-note { display: flex; align-items: flex-start; gap: 9px; margin: 12px 14px 0; padding: 10px 13px; border: 1px solid var(--sc-border-strong); background: var(--sc-bg-soft); border-radius: var(--sc-radius); font-size: 12.5px; color: var(--sc-text); }
.s3-note .s3-ic { color: var(--sc-text-muted); margin-top: 1px; }
.s3-note.warn { border-color: rgba(191,135,0,0.35); background: var(--sc-warn-soft); }
.s3-note.warn .s3-ic { color: var(--sc-warn); }

.s3-drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.20); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; }
.s3-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.s3-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 92vw); z-index: 45; background: var(--sc-bg); border-left: 1px solid var(--sc-border-strong); box-shadow: -8px 0 28px rgba(0,0,0,0.10); transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; }
.s3-drawer.is-open { transform: translateX(0); }
.s3-drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--sc-border); }
.s3-drawer-head .s3-ic { width: 18px; height: 18px; color: var(--sc-text-muted); }
.s3-drawer-title { flex: 1; font: 600 13px/1.3 var(--sc-mono); color: var(--sc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-drawer-x { margin-left: auto; background: none; border: 0; color: var(--sc-text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: var(--sc-radius); }
.s3-drawer-x:hover { background: var(--sc-bg-hover); color: var(--sc-text); }
.s3-drawer-body { padding: 16px 18px; overflow-y: auto; }
.s3-drawer-body .s3-note { margin: 0 0 14px; }
.s3-meta { display: grid; grid-template-columns: 90px 1fr; gap: 9px 14px; align-items: baseline; margin: 0 0 18px; }
.s3-meta dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sc-text-muted); }
.s3-meta dd { margin: 0; font: 12.5px/1.4 var(--sc-mono); color: var(--sc-text); word-break: break-all; }
.s3-drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--sc-border); }
.s3-drawer-hint { font-size: 11.5px; color: var(--sc-text-muted); margin: 10px 0 0; line-height: 1.45; }

.s3-modal { width: min(540px, calc(100vw - 32px)); }
.s3-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--sc-border); }
.s3-modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.s3-modal-head .s3-ic { color: var(--sc-text-muted); }
.s3-modal-x { margin-left: auto; background: none; border: 0; color: var(--sc-text-muted); cursor: pointer; font-size: 22px; line-height: 1; padding: 0 4px; }
.s3-modal-x:hover { color: var(--sc-text); }
.s3-modal-body { padding: 16px 18px 18px; }
.s3-modal-intro { font-size: 12.5px; color: var(--sc-text-muted); margin: 0 0 14px; line-height: 1.5; }
.s3-dl-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.s3-dl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-bg-soft); }
.s3-dl-pattern { flex: 1; font: 12.5px/1.3 var(--sc-mono); color: var(--sc-text); }
.s3-dl-hits { font-size: 11px; color: var(--sc-text-muted); white-space: nowrap; }
.s3-dl-empty { font-size: 12.5px; color: var(--sc-text-muted); font-style: italic; padding: 8px 2px; }
.s3-dl-add { display: flex; gap: 8px; margin-top: 4px; }
.s3-dl-add input { flex: 1; padding: 8px 10px; border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius); font: 13px/1 var(--sc-mono); outline: none; }
.s3-dl-add input:focus { border-color: var(--sc-blue); box-shadow: 0 0 0 3px var(--sc-blue-soft); }
.s3-dl-note { font-size: 11.5px; color: var(--sc-text-muted); margin: 12px 0 0; line-height: 1.45; }
.s3-dl-note code, .s3-modal-intro code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; font-family: var(--sc-mono); }

@media (max-width: 768px) {
  .s3-table.sc-table--cards tbody td { padding: var(--sc-space-xs) 0; }
  .s3-filter { flex: 1 1 100%; }
  .s3-filter input { width: 100%; max-width: none; }
  /* Object listing: filename on its own line (wraps), a compact meta line
     below (size · modified), no per-field labels, no class, no chevron. */
  .s3-table--obj tbody td { display: block; text-align: left; padding: 1px 0; }
  .s3-table--obj tbody td::before { content: none; }
  .s3-table--obj tbody td[data-label="Name"] { padding: 2px 0 3px; }
  .s3-obj td[data-label="Size"], .s3-obj td[data-label="Modified"] { display: inline-block; font-size: 11px; color: var(--sc-text-muted); }
  .s3-obj td[data-label="Size"] { margin-right: 14px; }
  .s3-dir td[data-label="Size"], .s3-dir td[data-label="Modified"] { display: none; }
  .s3-table--obj td.s3-col-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-drawer, .s3-drawer-backdrop, .s3-chevron { transition: none; }
}

/* ============================================================
   Deployment > Dashboard (backends) — spec 2026-07-05-deployment-dashboard
   Live read-only host panels. Service + frontends tables carry .sc-table--cards
   so the shared mobile card reflow applies.
   ============================================================ */
.sc-dash { min-height: 100%; }
.is-hidden { display: none; }
.sc-dash-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-dash-title { font-size: 20px; font-weight: 700; color: #2f3438; margin: 0; }
.sc-dash-seg { display: inline-flex; background: var(--sc-bg-softer); border: 1px solid var(--sc-border-strong); border-radius: 8px; padding: 3px; }
.sc-dash-seg button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 13px; color: var(--sc-text-muted); padding: 5px 14px; border-radius: 6px; cursor: pointer; min-height: 32px; }
.sc-dash-seg button.on { background: var(--sc-bg); color: var(--sc-blue-dark); box-shadow: var(--sc-shadow-card); }

.sc-dash-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; row-gap: 8px; }
.sc-dash-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--sc-text-muted); }
.sc-dash-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.sc-dash-probed { font-size: 12px; color: var(--sc-text-muted); white-space: nowrap; }

.sc-dash-hosts { display: flex; flex-direction: column; gap: 14px; }
.sc-dash-host { background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-card); box-shadow: var(--sc-shadow-card); overflow: hidden; }
.sc-dash-host-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sc-border); }
.sc-dash-hostid { display: inline-flex; align-items: baseline; gap: 9px; }
.sc-dash-hostdot { width: 8px; height: 8px; border-radius: 50%; background: var(--s3-linode); box-shadow: 0 0 0 3px var(--s3-linode-soft); align-self: center; flex: 0 0 auto; }
.sc-dash-hostid .label { font-size: 15px; font-weight: 400; color: var(--sc-text); }
.sc-dash-hostip { font-family: var(--sc-mono); font-size: 12px; color: var(--sc-text-muted); }
.sc-dash-hostsum { font-size: 12px; color: var(--sc-text-muted); white-space: nowrap; }
.sc-dash-hostsum b { color: var(--sc-text); font-weight: 700; }
.sc-dash-hostsum.err { color: var(--sc-fail); font-weight: 600; }

.sc-dash-dns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.sc-dash-dns .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-text-muted); }
.sc-dash-dnschip { font-family: var(--sc-mono); font-size: 11px; background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-pill); padding: 2px 9px; color: var(--sc-text); }
.sc-dash-dnschip .k { color: var(--sc-blue-dark); font-weight: 700; }

table.sc-dash-svc { width: 100%; border-collapse: collapse; }
.sc-dash-svc thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-text-muted); font-weight: 700; padding: 8px 16px; border-bottom: 1px solid var(--sc-border); }
.sc-dash-svc tbody td { padding: 10px 16px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; }
.sc-dash-svc tbody tr:last-child td { border-bottom: 0; }
.sc-dash-svc td:last-child { text-align: right; }
.sc-dash-svc tr.notinst td { background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(0,0,0,0.012) 7px, rgba(0,0,0,0.012) 14px); }
.sc-dash-unit { font-family: var(--sc-mono); font-weight: 700; color: #2f3438; }
.sc-dash-role { display: block; font-size: 11px; color: var(--sc-text-muted); margin-top: 1px; }
.sc-dash-build { font-family: var(--sc-mono); font-size: 11.5px; color: var(--sc-text); }
.sc-dash-build .sz { color: var(--sc-text-muted); }
.sc-dash-build.muted { color: var(--sc-text-dim); }

.sc-dash-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.sc-dash-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--sc-text-dim); }
.sc-dash-st.run { color: var(--sc-ok); }
.sc-dash-st.run .sc-dash-dot { background: var(--sc-ok); box-shadow: 0 0 0 3px var(--sc-ok-soft); }
.sc-dash-st.stop { color: var(--sc-text); }
.sc-dash-st.stop .sc-dash-dot { background: var(--sc-text-muted); }
.sc-dash-st.warn { color: var(--sc-warn); }
.sc-dash-st.warn .sc-dash-dot { background: var(--sc-warn); box-shadow: 0 0 0 3px var(--sc-warn-soft); animation: sc-dash-pulse 1.3s ease-in-out infinite; }
.sc-dash-st.fail { color: var(--sc-fail); }
.sc-dash-st.fail .sc-dash-dot { background: var(--sc-fail); box-shadow: 0 0 0 3px var(--sc-fail-soft); }
.sc-dash-st.off { color: var(--sc-text-muted); }
.sc-dash-st.off .sc-dash-dot { background: transparent; border: 1.5px solid var(--sc-text-dim); }
@keyframes sc-dash-pulse { 50% { opacity: 0.35; } }
.sc-dash-boot { font-size: 11px; font-weight: 600; color: var(--sc-text-muted); }
.sc-dash-boot.en { color: #5a8f6b; }
.sc-dash-boot.dis { color: #b08900; }
.sc-dash-acts { display: inline-flex; gap: 6px; justify-content: flex-end; }

.sc-dash-draft { display: flex; align-items: flex-start; gap: 8px; background: rgba(246,130,31,0.10); border: 1px dashed var(--sc-cf-orange); color: #b4560a; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }
.sc-dash-draft b { color: #b4560a; }
table.sc-dash-fe { width: 100%; border-collapse: collapse; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-card); overflow: hidden; box-shadow: var(--sc-shadow-card); }
.sc-dash-fe thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-text-muted); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.sc-dash-fe tbody td { padding: 11px 14px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; }
.sc-dash-fe tbody tr:last-child td { border-bottom: 0; }
.sc-dash-fe td:last-child { text-align: right; }
.sc-dash-fe-name { font-weight: 700; color: #2f3438; }
.sc-dash-fe-sub { display: block; font-size: 11px; color: var(--sc-text-muted); }
.sc-dash-aws { display: inline-flex; align-items: center; font-family: var(--sc-mono); font-size: 11px; font-weight: 600; color: var(--s3-aws-ink); background: var(--s3-aws-soft); border: 1px solid rgba(255,153,0,0.5); border-radius: var(--sc-radius-pill); padding: 2px 9px; }
.sc-dash-cf { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sc-mono); font-size: 11px; font-weight: 600; color: #b4560a; background: rgba(246,130,31,0.13); border: 1px solid var(--sc-cf-orange); border-radius: var(--sc-radius-pill); padding: 2px 9px; }

/* --- Frontends section (Deployment > Dashboard) : panel per SPA frontend --- */
.sc-fe-list { display: flex; flex-direction: column; gap: 14px; }
.sc-fe-panel { border: 1px solid var(--sc-border); border-radius: var(--sc-radius-card); background: var(--sc-bg); box-shadow: var(--sc-shadow-card); overflow: hidden; }
.sc-fe-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sc-border); }
.sc-fe-name { font-weight: 700; font-size: 15px; color: #2f3438; }
.sc-fe-sub { font-size: 11px; color: var(--sc-text-muted); }
.sc-fe-edge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; background: var(--sc-bg-soft); border-bottom: 1px solid var(--sc-border); }
.sc-fe-edge .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-text-muted); }
.sc-fe-hash { font-family: var(--sc-mono); font-size: 11.5px; font-weight: 600; color: var(--sc-blue-dark); }
.sc-fe-hash.muted { color: var(--sc-text-muted); }
.sc-dash-aws { gap: 5px; }
.sc-dash-aws .s3-ic { width: 13px; height: 13px; stroke: var(--s3-aws-ink); }
.sc-fe-cf { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; font-family: var(--sc-mono); font-size: 11px; font-weight: 600; color: var(--sc-cf-orange-dark); background: var(--sc-cf-orange-soft); border: 1px solid var(--sc-cf-orange); border-radius: var(--sc-radius-pill); padding: 2px 9px; }
.sc-fe-cf .dns-ic { width: 13px; height: 13px; flex: none; }
.sc-fe-cf .prx { font-weight: 700; }
.sc-fe-cf .tgt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-fe-cf.dnsonly { color: var(--sc-warn); background: var(--sc-warn-soft); border-color: rgba(191,135,0,0.5); }

/* live-state chips */
.sc-fe-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: var(--sc-radius-pill); padding: 2px 10px; border: 1px solid transparent; }
.sc-fe-st .sc-dash-dot { width: 7px; height: 7px; border-radius: 50%; }
.sc-fe-st.ok { color: var(--sc-ok); background: var(--sc-ok-soft); border-color: rgba(31,136,61,0.35); }
.sc-fe-st.ok .sc-dash-dot { background: var(--sc-ok); box-shadow: 0 0 0 3px rgba(31,136,61,0.18); }
.sc-fe-st.upd { color: var(--sc-blue-dark); background: var(--sc-blue-soft); border-color: rgba(35,150,211,0.35); }
.sc-fe-st.upd .sc-dash-dot { background: var(--sc-blue); }
.sc-fe-st.warn { color: var(--sc-warn); background: var(--sc-warn-soft); border-color: rgba(191,135,0,0.4); }
.sc-fe-st.warn .sc-dash-dot { background: var(--sc-warn); }
.sc-fe-st.off { color: var(--sc-text-muted); background: var(--sc-bg-hover); border-color: var(--sc-border-strong); }
.sc-fe-st.off .sc-dash-dot { background: var(--sc-text-muted); }

/* Deploy / History tabs */
.sc-fe-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--sc-border); }
.sc-fe-tabs button { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--sc-text-muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; cursor: pointer; }
.sc-fe-tabs button.on { color: var(--sc-blue-dark); border-bottom-color: var(--sc-blue); }
.sc-fe-tabpane { display: none; padding: 14px 16px; }
.sc-fe-tabpane.on { display: block; }

/* build picker */
.sc-fe-picker { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; }
.sc-fe-ph { padding: 8px 12px; background: var(--sc-bg-soft); border-bottom: 1px solid var(--sc-border); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-text-muted); }
.sc-fe-ph .cnt { font-weight: 600; }
.sc-fe-builds { max-height: 300px; overflow: auto; }
.sc-fe-brow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--sc-border); cursor: pointer; }
.sc-fe-brow:last-child { border-bottom: 0; }
.sc-fe-brow:hover { background: var(--sc-bg-hover); }
.sc-fe-brow.sel { background: var(--sc-blue-soft); box-shadow: inset 3px 0 0 var(--sc-blue); }
.sc-fe-brow.live { background: rgba(31,136,61,0.05); }
.sc-fe-brow.live.sel { background: linear-gradient(90deg, rgba(31,136,61,0.09), var(--sc-blue-soft)); }
.sc-fe-brow.nobuild { cursor: default; opacity: 0.72; }
.sc-fe-brow.nobuild:hover { background: transparent; }
.sc-fe-brow input { accent-color: var(--sc-blue); margin-top: 2px; }
.sc-fe-brow .nodot { width: 13px; height: 13px; margin-top: 2px; border: 1.5px dashed var(--sc-border-strong); border-radius: 50%; flex: none; }
.sc-fe-bmain { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sc-fe-bsubj { font-size: 12.5px; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-fe-brow.nobuild .sc-fe-bsubj { color: var(--sc-text-muted); }
.sc-fe-bmeta { font-size: 11px; color: var(--sc-text-muted); margin-top: 1px; }
.sc-fe-bmeta .auth { color: var(--sc-text); }
.sc-fe-bmeta .sha { font-family: var(--sc-mono); font-size: 10.5px; color: var(--sc-blue-dark); font-weight: 600; }
.sc-fe-marks { display: flex; gap: 5px; align-items: center; flex: none; padding-top: 1px; }
.sc-fe-livetag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--sc-ok); border-radius: var(--sc-radius-pill); padding: 1px 7px 1px 6px; }
.sc-fe-livetag .fe-ic { width: 10px; height: 10px; }
.sc-fe-latest { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-blue-dark); background: var(--sc-blue-soft); border: 1px solid rgba(35,150,211,0.3); border-radius: var(--sc-radius-pill); padding: 1px 7px; }
.sc-fe-buildbtn { display: inline-flex; align-items: center; gap: 5px; color: var(--sc-blue-dark); border-color: rgba(35,150,211,0.4); background: var(--sc-blue-soft); }
.sc-fe-buildbtn .fe-ic { width: 13px; height: 13px; }
.sc-fe-pfoot { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--sc-bg-soft); border-top: 1px solid var(--sc-border); }
.sc-fe-publish { display: inline-flex; align-items: center; gap: 6px; }
.sc-fe-publish .fe-ic { width: 14px; height: 14px; }

/* inert publish confirm overlay */
.sc-fe-ov { position: fixed; inset: 0; background: rgba(20,24,28,0.42); display: none; align-items: center; justify-content: center; z-index: var(--sc-z-modal, 1000); }
.sc-fe-ov.on { display: flex; }
.sc-fe-modal { width: 460px; max-width: calc(100vw - 32px); background: var(--sc-bg); border-radius: 10px; box-shadow: var(--sc-shadow-modal); overflow: hidden; }
.sc-fe-modal-h { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--sc-border); font-size: 15px; font-weight: 600; color: var(--sc-text); }
.sc-fe-modal-h .fe-ic { width: 17px; height: 17px; }
.sc-fe-modal-b { padding: 16px 18px; font-size: 13px; }
.sc-fe-cmeta { margin-top: 10px; padding: 9px 12px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-bg-soft); }
.sc-fe-cmeta .meta { font-size: 11.5px; color: var(--sc-text-muted); margin-top: 2px; }
.sc-fe-pub-note { margin: 12px 0 0; font-size: 11.5px; color: var(--sc-warn); }
.sc-fe-modal-f { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.sc-fe-modal-f .fe-ic { width: 14px; height: 14px; }

/* Artifact files modal (Deployment > Builds) */
.sc-rel-artsbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Fixed width sized for the icon + "100 artifacts" (3 digits) so the button
     reads as a button and the column never jiggles as the count changes. */
  width: 128px;
  background: var(--sc-bg-soft);
  border: 1px solid var(--sc-border-strong);
  color: var(--sc-text);
  border-radius: var(--sc-radius);
  padding: 5px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.08s ease, border-color 0.08s ease, color 0.08s ease;
}
.sc-rel-artsbtn .s3-ic { width: 13px; height: 13px; color: var(--sc-blue); flex: 0 0 auto; }
.sc-rel-artsbtn:hover { border-color: var(--sc-blue); color: var(--sc-blue-dark); background: var(--sc-bg); }
.sc-rel-artsbtn:hover .s3-ic { color: var(--sc-blue-dark); }
/* surface inherited from .sc-modal */
.af-modal { --sc-modal-max: 780px; display: flex; flex-direction: column; padding: 0; }
.af-header {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm);
  padding: 14px 18px;
  border-bottom: 1px solid var(--sc-border);
}
.af-title { font-weight: 600; }
.af-title small { color: var(--sc-text-dim); font-weight: 400; }
.af-total { color: var(--sc-text-dim); font-size: 12px; }
.af-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--sc-text-dim);
  font-size: 16px;
  cursor: pointer;
}
.af-bucket {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-bottom: 1px solid var(--sc-border);
  color: var(--sc-text-dim); font-size: 12px;
}
.af-bucket .s3-ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--sc-text-muted); }
.af-bucket code { color: var(--sc-text); font-size: 11px; }
.af-body { padding: var(--sc-space-sm) 18px; max-height: 60vh; overflow-y: auto; }
.af-group { margin: 14px 0; }
.af-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-space-sm); margin-bottom: 6px; }
.af-group-label { font-weight: 600; font-size: 13px; }
.af-group-ref { color: var(--sc-text-dim); font-size: 11px; word-break: break-all; }
.af-group-meta { color: var(--sc-text-dim); font-size: 11px; margin-left: auto; }
/* Fixed layout with shared column widths so Size/Modified/Download line up
   across every group's separate table; Path takes the remaining width */
.af-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.af-table th, .af-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--sc-border); }
.af-table th { color: var(--sc-text-dim); font-weight: 500; }
.af-table .af-col-path { overflow: hidden; text-overflow: ellipsis; }
.af-col-path code { word-break: break-all; }
.af-table .af-col-size { width: 84px; text-align: right; }
.af-table .af-col-mod { width: 116px; text-align: right; }
/* The filename itself is the download link (no separate Download column) */
.af-dl { text-decoration: none; color: var(--sc-blue); }
.af-dl code { color: inherit; }
.af-dl:hover { text-decoration: underline; }
/* File-type chip derived from the object's extension (backend binaries: "exe") */
.af-ext {
  display: inline-block; min-width: 30px; margin-right: 8px; padding: 1px 5px;
  border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; text-align: center; vertical-align: middle;
  color: #fff; background: var(--sc-text-dim);
}
.af-ext[data-ext="exe"] { background: #64748b; }
.af-ext[data-ext="css"] { background: #2563eb; }
.af-ext[data-ext="js"] { background: #d97706; }
.af-ext[data-ext="html"], .af-ext[data-ext="htm"] { background: #ea580c; }
.af-ext[data-ext="json"] { background: #7c3aed; }
.af-ext[data-ext="map"] { background: #0891b2; }
.af-ext[data-ext="ico"], .af-ext[data-ext="png"], .af-ext[data-ext="jpg"],
.af-ext[data-ext="jpeg"], .af-ext[data-ext="gif"], .af-ext[data-ext="svg"],
.af-ext[data-ext="webp"], .af-ext[data-ext="avif"] { background: #059669; }
.af-ext[data-ext="woff"], .af-ext[data-ext="woff2"], .af-ext[data-ext="ttf"],
.af-ext[data-ext="eot"] { background: #db2777; }
.af-ext[data-ext="txt"], .af-ext[data-ext="md"] { background: #475569; }
.af-empty { color: var(--sc-text-dim); font-size: 12px; padding: 4px 0; }
.af-actions { display: flex; justify-content: flex-end; padding: var(--sc-space-md) 18px; border-top: 1px solid var(--sc-border); }
/* In the mobile card reflow, drop the fixed column widths so each row is a
   full-width card again (the shared .sc-table--cards rules handle the rest) */
@media (max-width: 768px) {
  .af-table { table-layout: auto; }
  .af-table .af-col-path, .af-table .af-col-size,
  .af-table .af-col-mod { width: auto; }
}

/* ===== Deployment > Dashboard 2 — service-driven read-only view =====
   Each service is a closed card whose header and table borrow the Deployment >
   VPS treatment (.sc-lin-table): 9px 14px rows, a soft header band, hover
   bg-softer. Buttons reuse .sc-btn*; status pills reuse .sc-dash-st. */
.d2-legend-note { color: var(--sc-text-muted); }

.d2-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.d2-card { background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-card); box-shadow: 0 3px 8px rgba(9,30,44,0.08); overflow: hidden; }

.d2-card-header { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.d2-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); }
.d2-ico { display: inline-flex; flex: 0 0 auto; }
.d2-ico svg { width: 16px; height: 16px; display: block; }
.d2-ico--auth { color: #7c3aed; }
.d2-ico--upm { color: #0f766e; }
.d2-ico--portal { color: #c026d3; }
.d2-ico--exports { color: #b45309; }
.d2-ico--lm { color: #be123c; }
.d2-hdr-acts { display: inline-flex; align-items: center; gap: 6px; }
.d2-b-swap { min-width: 90px; justify-content: center; }
.d2-b-logs { min-width: 88px; justify-content: center; }
.d2-b-swap svg, .d2-b-logs svg { width: 13px; height: 13px; }

.d2-table-wrap { overflow-x: auto; }
.d2-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; min-width: 860px; }
.d2-c-role { width: 158px; } .d2-c-loc { width: 236px; } .d2-c-status { width: 120px; } .d2-c-act { width: 216px; }
.d2-table td { padding: 9px 14px; border-bottom: 1px solid var(--sc-border); vertical-align: top; }
.d2-table tr:last-child td { border-bottom: 0; }
.d2-table tr.d2-row:hover td { background: var(--sc-bg-softer); }

.d2-role { display: inline-flex; align-items: center; gap: 9px; }
.d2-role .ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--sc-bg-softer); border: 1px solid var(--sc-border); color: var(--sc-text-muted); flex: 0 0 auto; }
.d2-role .ic svg { width: 15px; height: 15px; }
.d2-role .lbl { font-size: 12.5px; font-weight: 700; color: var(--sc-text); }
.d2-role .lbl small { display: block; font-size: 10px; font-weight: 600; color: var(--sc-text-dim); margin-top: 1px; }

.d2-loc-s3, .d2-loc-host { display: inline-flex; align-items: center; gap: 7px; line-height: 1; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text); background: var(--sc-bg-softer); border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-pill); padding: 5px 11px; white-space: nowrap; }
.d2-loc-s3 .s3-ic { width: 14px; height: 14px; display: block; flex: 0 0 auto; color: var(--s3-aws); }
.d2-loc-host .lin-ic { width: 14px; height: 14px; display: block; flex: 0 0 auto; color: var(--s3-linode); }
.d2-loc-host b { font-weight: 700; color: var(--sc-text); }
.d2-loc-host .dom { color: var(--sc-text-muted); }
.d2-loc-host .hn { display: inline-flex; }

.d2-build-subj { font-size: 13px; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d2-build-subj.muted { color: var(--sc-text-muted); }
.d2-build-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sc-text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.d2-build-meta .sep { color: var(--sc-text-dim); }
.d2-sha { font-family: var(--sc-mono); font-size: 11.5px; font-weight: 700; color: var(--sc-blue-dark); }
/* the live-bundle asset filename shown in the frontend status cell (what liveness is checked against) */
.d2-live-file { font-family: var(--sc-mono); font-size: 11px; color: inherit; }

.d2-acts { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; width: 100%; }

@media (max-width: 768px) {
  .d2-card-header { flex-wrap: wrap; row-gap: 8px; }
}

/* Dashboard 2 journald log modal — dark terminal; host colour-chips for the
   merged (All logs) view. Snapshot of the tail with an in-modal Refresh. */
.d2-logs-modal { border: 0; background: transparent; padding: 0; margin: auto; max-width: none; max-height: none; }
.d2-logs-modal::backdrop { background: rgba(9,30,44,0.45); }
.d2-logs-modal[open] { animation: d2-logs-pop .16s cubic-bezier(.22,1,.36,1); }
@keyframes d2-logs-pop { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
.d2-logs-card { width: min(820px, 95vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--sc-bg); border-radius: 12px; box-shadow: var(--sc-shadow-modal); overflow: hidden; }
.d2-logs-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sc-border); }
.d2-logs-title { font-size: 13.5px; color: var(--sc-text); display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.d2-logs-title b { font-family: var(--sc-mono); font-weight: 700; color: var(--sc-blue-dark); }
.d2-logs-hostset { display: inline-flex; gap: 4px; }
.d2-logs-x { border: 0; background: transparent; color: var(--sc-text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.d2-logs-x:hover { background: var(--sc-bg-hover); color: var(--sc-text); }
/* the body flex-fills the card to the bottom — there is no footer any more */
.d2-logs-body { flex: 1 1 auto; min-height: 0; background: #12161c; padding: 12px 14px; overflow: auto; font-family: var(--sc-mono); font-size: 11.5px; line-height: 1.6; }
.d2-log-ln { white-space: pre-wrap; word-break: break-word; padding: 0.5px 0; }
.d2-log-ln .ts { color: #6a737d; }
.d2-log-ln .msg { color: #c9d1d9; }
.d2-logs-note { color: #8b949e; padding: 4px 2px; }
.d2-logs-note.err { color: #ffa198; }
/* the exact journalctl command(s) being run, in their own pane below the range row */
.d2-logs-cmds { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 7px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.d2-logs-cmds code { font-family: var(--sc-mono); font-size: 10.5px; color: var(--sc-text-muted); white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
/* host colour chips: subdued on the light title, brighter inside the dark body */
.d2-hh { font-family: var(--sc-mono); font-weight: 700; font-size: 10.5px; border-radius: 3px; padding: 0 5px; color: var(--sc-text-muted); background: var(--sc-bg-softer); }
.d2-hh-01 { color: #1f6feb; background: rgba(31,111,235,0.12); }
.d2-hh-02 { color: #1a7f37; background: rgba(26,127,55,0.12); }
.d2-hh-03 { color: #bc4c00; background: rgba(188,76,0,0.12); }
.d2-logs-body .d2-hh { background: rgba(139,148,158,0.16); }
.d2-logs-body .d2-hh-01 { color: #79c0ff; background: rgba(121,192,255,0.15); }
.d2-logs-body .d2-hh-02 { color: #7ee787; background: rgba(126,231,135,0.15); }
.d2-logs-body .d2-hh-03 { color: #ffa657; background: rgba(255,166,87,0.15); }
/* live tail toggle */
.d2-live-btn .d2-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-text-dim); display: inline-block; }
.d2-live-btn.on { border-color: var(--sc-ok); color: var(--sc-ok); }
.d2-live-btn.on:hover { border-color: var(--sc-ok); color: var(--sc-ok); }
.d2-live-btn.on .d2-live-dot { background: var(--sc-ok); animation: d2-live-pulse 1.3s ease-in-out infinite; }
@keyframes d2-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,136,61,0.45); } 50% { box-shadow: 0 0 0 4px rgba(31,136,61,0); } }

/* category filter chips — show/hide log lines by parsed level/type */
.d2-logs-filter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.d2-cat-chip { cursor: pointer; font: 700 11px/1 var(--sc-font); padding: 4px 10px; border-radius: var(--sc-radius-pill); border: 1px solid transparent; color: #fff; background: var(--sc-text-dim); display: inline-flex; gap: 5px; align-items: center; transition: background .12s, color .12s, border-color .12s; }
.d2-cat-chip .n { font-variant-numeric: tabular-nums; opacity: 0.85; }
/* selected (default) = bright filled pill so it is obvious which categories show */
.d2-cat-error { background: #ef4444; }
.d2-cat-warn { background: #f59e0b; color: #3d2a00; }
.d2-cat-warn .n { opacity: 0.75; }
.d2-cat-request { background: var(--sc-blue); }
.d2-cat-info { background: #64748b; }
/* per-server (host) toggle chips — bright per-host colours matching the line chips */
.d2-host-chip.d2-host-01 { background: #1f6feb; }
.d2-host-chip.d2-host-02 { background: #1a7f37; }
.d2-host-chip.d2-host-03 { background: #bc4c00; }
.d2-filter-div { width: 1px; align-self: stretch; min-height: 15px; background: var(--sc-border-strong); margin: 0 3px; }
.d2-filter-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sc-text-muted); }
.d2-host-chip svg, .d2-host-chip .lin-ic { width: 11px; height: 11px; color: currentColor; display: block; }
.d2-text-filter { font: 12px var(--sc-font); padding: 3px 10px; border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius); background: var(--sc-bg); color: var(--sc-text); min-width: 150px; }
.d2-text-filter:focus { outline: none; border-color: var(--sc-blue); }
/* date-range row */
.d2-logs-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 14px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.d2-range-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sc-text-muted); }
.d2-range-lbl .utc { font-weight: 600; color: var(--sc-text-dim); }
.d2-range-in { font: 11.5px/1 var(--sc-mono); padding: 4px 6px; border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius); background: var(--sc-bg); color: var(--sc-text); }
.d2-range-sep { color: var(--sc-text-dim); }
/* deselected = muted outline with a struck-through count */
.d2-cat-chip.off { background: var(--sc-bg); color: var(--sc-text-muted); border-color: var(--sc-border-strong); }
.d2-cat-chip.off .n { text-decoration: line-through; opacity: 0.6; }
/* level tag inside the dark body (shown only for warn/error/debug) */
.d2-lvl { font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.d2-lvl-warn { color: #d29922; }
.d2-lvl-error { color: #ff7b72; }
.d2-lvl-debug { color: #8b949e; }
.d2-log-ln[data-cat="error"] .msg { color: #ffb4ac; }
.d2-log-ln[data-cat="warn"] .msg { color: #e3c07b; }
/* hide a category when its chip is toggled off (class set on the body) */
.d2-logs-body.d2-hide-error [data-cat="error"],
.d2-logs-body.d2-hide-warn [data-cat="warn"],
.d2-logs-body.d2-hide-request [data-cat="request"],
.d2-logs-body.d2-hide-info [data-cat="info"],
.d2-logs-body.d2-hide-host-01 [data-host="01"],
.d2-logs-body.d2-hide-host-02 [data-host="02"],
.d2-logs-body.d2-hide-host-03 [data-host="03"] { display: none; }
/* text filter hides non-matching lines (combines with the category/host hides) */
.d2-log-ln.d2-text-hidden { display: none; }

/* ===== frontend swap: picker + ETag diff =====
   Two <dialog class="svc-modal"> fragments (frontend-swap-picker, frontend-swap-diff
   in templates/releases.html) share one modal shell. Base shell ported from
   docs/superpowers/specs/2026-07-21-deployment-service-dashboard-mockup.html;
   picker/diff-specific pieces ported from
   .superpowers/brainstorm/54938-1784779889/content/swap-flow-v8.html. */
.svc-modal { border: 0; background: transparent; padding: 0; margin: auto; max-width: none; max-height: none; overflow: visible; }
.svc-modal::backdrop { background: rgba(9,30,44,0.45); backdrop-filter: blur(1.5px); }
.svc-modal[open] { animation: sm-pop .18s cubic-bezier(.22,1,.36,1); }
@keyframes sm-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
/* position:relative added (not in the base-shell mockup) so the picker's .nb-warn
   overlay and the diff's .confirm-pop popover — both position:absolute — anchor to
   the card instead of escaping to the page */
.svc-modal-card { position: relative; width: min(580px, 94vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--sc-bg); border-radius: 12px; box-shadow: var(--sc-shadow-modal); overflow: hidden; }
.svc-modal-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--sc-border); }
.svc-modal-title { font-size: 15px; font-weight: 600; color: #2f3438; }
.svc-modal-title b { font-weight: 700; }
.svc-modal-title .sep { color: var(--sc-text-dim); }
.svc-modal-x { margin-left: auto; border: 0; background: transparent; color: var(--sc-text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.svc-modal-x:hover { background: var(--sc-bg-hover); color: var(--sc-text); }
.svc-modal-body { padding: 12px 14px 6px; overflow-y: auto; }
/* foot also gets position:relative (v8), needed for the diff's .confirm-pop */
.svc-modal-foot { position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.svc-modal-foot .sel { font-size: 12px; color: var(--sc-text-muted); }
.svc-modal-foot .sel code { font-family: var(--sc-mono); color: var(--sc-blue-dark); font-weight: 700; }
.svc-modal-foot .sel .sep { color: var(--sc-text-dim); }

/* header icon chip (Publish <icon> <service> frontend/<sha>) */
.svc-ico { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.svc-ico svg { width: 14px; height: 14px; }
/* colours mirror the .d2-ico--* accents already used on the Dashboard 2 cards,
   as soft background chips (rgba(colour,.12) — same formula as --sc-*-soft) */
.svc-ico--auth { background: rgba(124,58,237,.12); color: #7c3aed; }
.svc-ico--upm { background: rgba(15,118,110,.12); color: #0f766e; }
.svc-ico--portal { background: rgba(192,38,211,.12); color: #c026d3; }

/* commit/tag pills shared by the picker list and (via .svc-modal-title) the diff header */
.svc-tags { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.svc-tag { font-size: 10px; font-weight: 700; letter-spacing: .02em; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.svc-tag.live { color: var(--sc-ok); background: var(--sc-ok-soft); text-transform: uppercase; }
.svc-tag.latest { color: var(--sc-blue-dark); background: var(--sc-blue-soft); }
.svc-tag.released { color: #0a7d3b; background: rgba(1,196,84,.14); }
.svc-tag.notbuilt { color: var(--sc-warn); background: var(--sc-warn-soft); display: inline-flex; align-items: center; gap: 3px; }

/* picker: current-target strip */
.svc-target { display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: var(--sc-bg-soft); border-bottom: 1px solid var(--sc-border); font-size: 11.5px; }
.svc-target .lbl { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-text-muted); }
.svc-target .cur { margin-left: auto; color: var(--sc-text-muted); }
.svc-target .br { display: inline-flex; align-items: center; gap: 4px; color: var(--sc-text-muted); }
/* distinct from .d2-loc-s3 (Dashboard 2 table cell) — same look, used inside the modal target strip */
.svc-loc-s3 { display: inline-flex; align-items: center; gap: 7px; line-height: 1; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text); background: var(--sc-bg-softer); border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-pill); padding: 5px 11px; white-space: nowrap; }
/* icon markup uses stroke="currentColor" on an .s3-ic svg, so colour (not stroke) drives it — matches the existing .d2-loc-s3 .s3-ic rule */
.svc-loc-s3 .s3-ic { width: 14px; height: 14px; display: block; flex: 0 0 auto; color: var(--s3-aws); }

/* picker: search + All/Prior-releases filter */
.picker-filter { display: flex; align-items: center; gap: 8px; padding: 11px 14px 6px; flex-wrap: wrap; }
.picker-search { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius); background: var(--sc-bg); }
.picker-search input { border: 0; outline: 0; font: 12.5px var(--sc-font); flex: 1; background: transparent; color: var(--sc-text); }
.picker-search svg { width: 13px; height: 13px; stroke: var(--sc-text-muted); flex: 0 0 auto; }
.fpill { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: var(--sc-radius-pill); border: 1px solid var(--sc-border-strong); background: var(--sc-bg); color: var(--sc-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.fpill.on { background: var(--sc-blue-soft); border-color: rgba(35,150,211,.4); color: var(--sc-blue-dark); }
/* d2-glyph-swap has no intrinsic size (no width/height/viewBox-derived default) — size it same as the mockup's inline 11x11 icon */
.fpill svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* picker: commit list + empty state */
.picker-list { padding: 2px 12px 8px; overflow-y: auto; }
.picker-empty { display: none; padding: 16px 12px; text-align: center; color: var(--sc-text-muted); font-size: 12px; line-height: 1.5; }
.picker-empty.show { display: block; }
/* row visibility toggled by the search box + All/Prior-releases pills (frontend-swap.js) */
.svc-commit.fe-hide { display: none; }

.svc-commit { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--sc-radius); cursor: pointer; border: 1px solid transparent; }
.svc-commit:hover { background: var(--sc-bg-hover); }
.svc-commit.sel { background: var(--sc-blue-soft); border-color: rgba(35,150,211,0.35); }
.svc-commit input { accent-color: var(--sc-blue); width: 15px; height: 15px; flex: 0 0 auto; }
.svc-commit-main { min-width: 0; flex: 1; }
.svc-commit-subj { display: block; font-size: 12.5px; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-commit-meta { display: block; font-size: 11px; color: var(--sc-text-muted); font-family: var(--sc-mono); margin-top: 1px; }
.svc-commit-meta .sep { color: var(--sc-text-dim); }
/* not-built row — can't publish; click routes to Builds */
.svc-commit.notbuilt { opacity: .92; }
.svc-commit.notbuilt .svc-commit-subj { color: var(--sc-text-muted); }
.svc-commit .nb-ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--sc-warn); display: grid; place-items: center; }
/* mockup omitted this size rule for the row-level warning triangle; inferred from the wrapper's own 15x15 box */
.svc-commit .nb-ic svg { width: 15px; height: 15px; display: block; }
.svc-commit .go { font-size: 11px; font-weight: 700; color: var(--sc-blue-dark); display: inline-flex; align-items: center; gap: 3px; }

/* picker: not-built warning overlay */
.nb-warn { position: absolute; inset: 0; background: rgba(255,255,255,.9); display: none; align-items: center; justify-content: center; padding: 22px; z-index: 6; }
.nb-warn.show { display: flex; }
.nb-warn .box { background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: 12px; box-shadow: var(--sc-shadow-modal); padding: 20px; max-width: 360px; text-align: center; }
.nb-warn .wic { width: 42px; height: 42px; border-radius: 50%; background: var(--sc-warn-soft); color: var(--sc-warn); display: inline-grid; place-items: center; margin-bottom: 10px; }
.nb-warn .wic svg { width: 22px; height: 22px; }
.nb-warn h4 { margin: 0 0 6px; font-size: 14px; color: var(--sc-text); }
.nb-warn p { margin: 0 0 14px; font-size: 12.5px; color: var(--sc-text-muted); line-height: 1.5; }
.nb-warn code { font-family: var(--sc-mono); color: var(--sc-blue-dark); font-weight: 700; }
.nb-warn .r { display: flex; gap: 8px; justify-content: center; }

/* diff: source/target ETag comparison table */
.swapdiff { margin: 14px 16px; border: 1px solid var(--sc-border-strong); border-radius: 8px; overflow: hidden; }
.swapdiff-head, .swapdiff-row { display: grid; grid-template-columns: 1fr 40px 1fr; }
.swapdiff .cell { padding: 9px 14px; min-width: 0; }
.swapdiff .op { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; border-left: 1px solid var(--sc-border); border-right: 1px solid var(--sc-border); background: var(--sc-bg-soft); }
.swapdiff-head { background: var(--sc-bg-soft); border-bottom: 1px solid var(--sc-border-strong); }
.swapdiff-head .cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.side-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-text-dim); }
.prov-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: var(--sc-radius-pill); }
.prov-pill svg { width: 12px; height: 12px; flex: 0 0 auto; }
.prov-pill.wasabi { background: rgba(1,196,84,.13); color: #0a7d3b; }
.prov-pill.aws { background: rgba(255,153,0,.15); color: #a15c00; }
.bkt { font-family: var(--sc-mono); font-size: 11px; color: var(--sc-text); word-break: break-all; }
.bkt .b { font-weight: 700; }
.swapdiff-row { border-top: 1px solid var(--sc-border); align-items: stretch; }
.swapdiff-row .fnrow { display: flex; align-items: center; gap: 7px; }
.swapdiff-row .name { font-family: var(--sc-mono); font-size: 11.5px; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swapdiff-row .etagp { display: inline-block; margin-top: 5px; font-family: var(--sc-mono); font-size: 9.5px; color: var(--sc-text-muted); background: var(--sc-bg-softer); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-pill); padding: 1px 8px; }
.swapdiff-row .chip { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: var(--sc-radius-pill); flex: 0 0 auto; }
.swapdiff-row.equal { background: var(--sc-bg-soft); }
.swapdiff-row.equal .name { color: var(--sc-text-muted); }
.swapdiff-row.equal .op { color: var(--sc-text-dim); }
.swapdiff-row.equal .chip { background: var(--sc-bg-softer); color: var(--sc-text-muted); }
.swapdiff-row.changed .op { color: var(--sc-warn); }
.swapdiff-row.changed .chip { background: var(--sc-warn-soft); color: var(--sc-warn); }
.swapdiff-row.new .op { color: var(--sc-ok); }
.swapdiff-row.new .chip { background: var(--sc-ok-soft); color: var(--sc-ok); }
.swapdiff-row.new .cell.dest .etagp { color: var(--sc-text-dim); }
/* in-flight copy state (set by the publish JS while a file is being copied) */
.swapdiff-row.doing, .swapdiff-row.doing .op { background: var(--sc-blue-soft); }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(35,150,211,.25); border-top-color: var(--sc-blue); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.done-ic { color: var(--sc-ok); }

/* diff: "this changes production" confirm popover, anchored to .svc-modal-foot */
.confirm-pop { position: absolute; bottom: 52px; right: 16px; width: 250px; background: var(--sc-bg); border: 1px solid var(--sc-border-strong); border-radius: 10px; box-shadow: var(--sc-shadow-modal); padding: 13px 14px; display: none; z-index: 5; }
.confirm-pop.show { display: block; }
.confirm-pop p { margin: 0 0 11px; font-size: 12px; color: var(--sc-text); line-height: 1.5; }
.confirm-pop p b { color: var(--sc-fail); }
.confirm-pop .r { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-pop::after { content: ""; position: absolute; bottom: -7px; right: 44px; width: 12px; height: 12px; background: var(--sc-bg); border-right: 1px solid var(--sc-border-strong); border-bottom: 1px solid var(--sc-border-strong); transform: rotate(45deg); }

/* the not-built warning's "Go to Builds" action needs a warning-solid button variant not covered by the existing .sc-btn-* set */
.sc-btn-warn { background: var(--sc-warn); border-color: var(--sc-warn); color: #fff; }
.sc-btn-warn:hover { filter: brightness(.94); }