/* Modal lock + file protocol helpers (no layout overflow). */
body.modal-open { overflow: hidden; }
body.file-mode .login-view { align-items: start; }

/* Ensure no horizontal document scroll from long unbroken strings. */
.code-block, .audit-diff, .kv-list dd, pre, .phase-card p, #phaseCardDesc, #scopeBandText {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Keep bottom nav fully visible on short phones — single stable row. */
@media (max-width: 700px) {
  .main-nav .nav-item .nav-label {
    line-height: 1.1;
    white-space: nowrap;
    writing-mode: horizontal-tb;
  }

  #adminsTableWrap.table-wrap {
    max-width: 100%;
  }

  #accountSettingsCard {
    display: block;
  }
}

/* Phase B: sites / publish responsive helpers */
.publish-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.publish-toolbar .field-label.inline {
  min-width: 10rem;
  flex: 1 1 10rem;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  word-break: break-all;
}
.mobile-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
}
.mobile-card strong { display: block; margin-bottom: 0.35rem; }
.mobile-card p {
  margin: 0.2rem 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.mobile-card .ghost-button { margin-top: 0.5rem; }
@media (max-width: 390px) {
  .publish-toolbar { flex-direction: column; align-items: stretch; }
}

/* Bottom bar: exactly one 5-col row; More sheet is position:fixed so it is not clipped. */
@media (max-width: 700px) {
  .sidebar {
    padding-bottom: 0;
    overflow: visible;
  }
  .main-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: column;
    flex-wrap: nowrap !important;
    overflow: visible;
    gap: 0;
    align-items: stretch;
    max-height: none;
    width: 100%;
  }
  .main-nav > .nav-primary.nav-desktop-only {
    display: none !important;
  }
  .main-nav > .nav-item:not([hidden]),
  .main-nav > .nav-more-wrap {
    min-width: 0;
    max-width: none;
  }
  .main-nav > .nav-item {
    padding: 0.25rem 0.1rem;
    white-space: nowrap;
    writing-mode: horizontal-tb;
  }
  .main-nav > .nav-item .nav-label {
    font-size: 0.72rem;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    overflow: hidden;
  }
  .nav-more-wrap {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: stretch;
  }
  .nav-more-menu {
    position: fixed;
    left: auto;
    right: 0.35rem;
    /* Sit above bottom nav. Parent .sidebar is z-index 110 so this beats toast (90). */
    bottom: calc(var(--nav-h, 3.65rem) + env(safe-area-inset-bottom, 0px) + 0.45rem);
    min-width: 10.5rem;
    max-width: min(16rem, calc(100vw - 0.7rem));
    max-height: min(55vh, 18rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sidebar-bg);
    border: 1px solid #2a323c;
    border-radius: 8px;
    padding: 0.35rem;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-shadow: 0 -8px 24px rgba(17, 24, 32, 0.28);
    color: var(--sidebar-text);
    pointer-events: auto;
  }
  .nav-more-menu[hidden] {
    display: none !important;
  }
  .nav-more-menu .nav-item {
    max-width: none;
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    color: var(--sidebar-text);
    white-space: nowrap;
    writing-mode: horizontal-tb;
  }
  .nav-more-menu .nav-item .nav-label {
    font-size: 0.9rem;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    overflow: visible;
  }
  .nav-more-menu .nav-logout-item {
    border-top: 1px solid #2a323c;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    color: #f0c4c4;
  }
  .nav-more-menu .nav-item:focus-visible {
    outline: 2px solid rgba(15, 143, 159, 0.85);
    outline-offset: 1px;
  }
  .workspace {
    padding-bottom: calc(var(--nav-h, 3.65rem) + env(safe-area-inset-bottom, 0px) + 1rem);
  }
  /* Mobile: logout lives in More sheet only (not top actions / sidebar account). */
  .header-logout {
    display: none !important;
  }
  #settingsLogout {
    display: none !important;
  }
  .header-actions .icon-button,
  .header-actions .primary-button {
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }
}

@media (max-width: 390px) {
  .nav-more-menu {
    right: 0.25rem;
    bottom: calc(var(--nav-h, 3.65rem) + env(safe-area-inset-bottom, 0px) + 0.25rem);
    min-width: 10rem;
    max-width: calc(100vw - 0.5rem);
  }
}

@media (min-width: 701px) {
  .nav-more-wrap {
    position: relative;
    display: grid;
    gap: 0.25rem;
    min-width: 0;
  }
  .nav-more-menu {
    position: static;
    display: grid;
    gap: 0.2rem;
    padding: 0.35rem;
    border: 1px solid #323c47;
    border-radius: 0.55rem;
    background: #202730;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  }
  .nav-more-menu[hidden] {
    display: none !important;
  }
  .nav-more-menu .nav-item {
    width: 100%;
    min-width: 0;
    max-width: none;
    color: var(--sidebar-text);
  }
  #navMoreBtn {
    display: grid;
  }
  /* moreLogout is mobile-only; on desktop logout is the sidebar account control */
  #moreLogout {
    display: none !important;
  }
  /* Optional compact header logout is unused; sidebar account row is the desktop control */
  .header-logout {
    display: none !important;
  }
}

@media (max-width: 700px) {
  #sitesTableWrap.table-wrap,
  #versionsTableWrap.table-wrap,
  #nodesTableWrap.table-wrap {
    display: none !important;
  }
  .mobile-node-list[hidden] { display: none !important; }
  .mobile-node-list:not([hidden]) { display: block; }
  #adminsTableWrap.table-wrap,
  #adminsView .table-wrap {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #adminsTableWrap .admins-table,
  #adminsView table {
    min-width: 560px;
  }
}
@media (min-width: 701px) {
  .mobile-node-list { display: none !important; }

  /* Desktop app shell stays inside the viewport; only the right workspace scrolls. */
  .app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .sidebar {
    position: relative;
    top: auto;
    height: 100%;
    min-height: 0;
  }
  .workspace {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Security v1 protection editor: bounded structured controls, never editable JSON. */
.protection-editor { min-width: 0; }
.protection-custom { margin-top: 16px; min-width: 0; }
.protection-custom h4 { margin: 0 0 6px; }
.protection-rule-list { display: grid; gap: 10px; min-width: 0; }
.protection-rule-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(320px, 1.8fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line, #d8dee8);
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc);
  min-width: 0;
}
.protection-rule-heading { display: grid; gap: 4px; min-width: 0; }
.protection-rule-heading code,
.site-config-diagnostics { overflow-wrap: anywhere; white-space: pre-wrap; word-break: break-word; }
.protection-rule-fields { display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 8px; min-width: 0; }
.protection-rule-fields .field-label { min-width: 0; }
.protection-rule-fields input,
.protection-rule-fields select { width: 100%; min-width: 0; }
.protection-runtime {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #f0b4a8;
  border-radius: 12px;
  background: #fff7f5;
  overflow-wrap: anywhere;
}
.protection-runtime > div:first-child { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.protection-runtime-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.site-config-diagnostics {
  max-height: 280px;
  overflow: auto;
  padding: 12px;
  border-radius: 10px;
  background: #101827;
  color: #e8eef7;
  font-size: 12px;
}

@media (max-width: 900px) {
  .protection-rule-row { grid-template-columns: 1fr; }
  .protection-rule-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .protection-rule-fields { grid-template-columns: 1fr; }
  .protection-runtime-actions > button { width: 100%; }
}

/* Beginner-first site wizard; original configuration is read-only diagnostics. */
.site-modal {
  width: min(880px, calc(100vw - 1.5rem));
  max-width: min(880px, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
}
.site-modal .modal-card {
  width: 100%;
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
}
.modal-intro {
  margin: 0.35rem 0 0.8rem;
  color: var(--muted);
  line-height: 1.55;
}
.site-config-section {
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(15, 143, 159, 0.025);
}
.site-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.15rem;
}
.site-section-heading > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
}
.site-section-heading h3 {
  margin: 0.05rem 0 0;
  color: var(--text);
  font-size: 0.98rem;
}
.site-section-heading p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.field-span-all {
  grid-column: 1 / -1;
}
.field-label small,
.site-group-fieldset > small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}
.site-group-fieldset {
  min-width: 0;
  margin: 0.65rem 0;
  padding: 0;
  border: 0;
}
.site-group-fieldset legend {
  margin-bottom: 0.4rem;
  color: var(--muted);
}
.site-group-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.site-group-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.site-group-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.site-group-option input {
  flex: 0 0 auto;
  width: auto;
  min-height: auto;
  margin-top: 0.18rem;
}
.site-group-option span {
  display: grid;
  min-width: 0;
}
.site-group-option strong {
  color: var(--text);
  overflow-wrap: anywhere;
}
.site-group-option small {
  margin-top: 0.15rem;
}
.site-inline-options {
  align-items: center;
}
.site-advanced-options,
.site-raw-config {
  margin: 0.85rem 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.site-advanced-options > summary,
.site-raw-config > summary {
  padding: 0.75rem 0.9rem;
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
}
.site-advanced-options[open] > summary,
.site-raw-config[open] > summary {
  border-bottom: 1px solid var(--line);
}
.site-advanced-options > .form-grid,
.site-raw-config > :not(summary) {
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}
.site-raw-config textarea[readonly] {
  background: rgba(17, 24, 32, 0.035);
  color: var(--muted);
}
.site-raw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.form-warning {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(196, 123, 20, 0.35);
  border-radius: 8px;
  background: rgba(196, 123, 20, 0.08);
  color: var(--warn);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.site-safety-note {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: rgba(15, 143, 159, 0.06);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Beginner migration guide: educational progress only, never a DNS mutation surface. */
.migration-guide-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(15, 143, 159, 0.24);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(15, 143, 159, 0.09), rgba(15, 143, 159, 0.025));
}
.migration-guide-banner-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
}
.migration-guide-banner-copy > span {
  flex: 0 0 auto;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.migration-guide-banner strong {
  display: block;
  color: var(--text);
}
.migration-guide-banner p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.migration-guide-modal {
  width: min(980px, calc(100vw - 1.5rem));
  max-width: min(980px, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
}
.migration-guide-modal > .modal-card {
  width: 100%;
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
}
.migration-guide-safety {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid rgba(15, 143, 159, 0.3);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: rgba(15, 143, 159, 0.06);
}
.migration-guide-safety strong { color: var(--text); }
.migration-guide-safety span {
  color: var(--muted);
  line-height: 1.45;
}
.migration-guide-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.8fr);
  gap: 0.9rem;
  min-height: 30rem;
}
.migration-guide-steps {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
}
.migration-guide-steps button {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.05rem 0.55rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
.migration-guide-steps button > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-weight: 700;
}
.migration-guide-steps button strong,
.migration-guide-steps button small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.migration-guide-steps button small {
  color: var(--muted);
  font-size: 0.72rem;
}
.migration-guide-steps button:hover,
.migration-guide-steps button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.migration-guide-steps button.is-active > span {
  background: var(--accent);
  color: #fff;
}
.migration-guide-content {
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.migration-guide-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.8fr);
  gap: 0.75rem;
  align-items: center;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.migration-guide-progress-row strong { overflow-wrap: anywhere; }
.migration-guide-progress-row progress {
  width: 100%;
  height: 0.55rem;
  accent-color: var(--accent);
}
.migration-guide-panel {
  padding-top: 1rem;
  color: var(--muted);
  line-height: 1.58;
}
.migration-guide-panel h3 {
  margin: 0.55rem 0 0.3rem;
  color: var(--text);
  font-size: 1.1rem;
}
.migration-guide-panel p { margin: 0.35rem 0 0.75rem; }
.migration-guide-panel ul,
.migration-guide-panel ol {
  margin: 0.55rem 0 0.85rem;
  padding-left: 1.35rem;
}
.migration-guide-panel li + li { margin-top: 0.3rem; }
.migration-guide-panel code {
  padding: 0.08rem 0.25rem;
  border-radius: 4px;
  background: var(--surface-muted);
  color: var(--text);
  overflow-wrap: anywhere;
}
.guide-capability {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.guide-capability.is-ready {
  background: rgba(25, 135, 84, 0.1);
  color: #18764c;
}
.guide-capability.is-manual {
  background: rgba(196, 123, 20, 0.12);
  color: var(--warn);
}
.guide-capability.is-limited {
  background: var(--surface-muted);
  color: var(--muted);
}
.migration-guide-checklist {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0;
}
.migration-guide-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text);
}
.migration-guide-checklist input {
  flex: 0 0 auto;
  width: auto;
  min-height: auto;
  margin-top: 0.22rem;
}
.guide-callout {
  margin: 0.8rem 0;
  padding: 0.68rem 0.75rem;
  border-radius: 8px;
  line-height: 1.5;
}
.guide-callout.is-warning {
  border: 1px solid rgba(196, 123, 20, 0.3);
  background: rgba(196, 123, 20, 0.08);
  color: var(--warn);
}
.guide-callout.is-limited {
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--muted);
}
.guide-finish-note {
  font-weight: 650;
  color: var(--text);
}
.migration-guide-actions-spacer { flex: 1 1 auto; }

@media (max-width: 700px) {
  .migration-guide-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .migration-guide-banner-copy { align-items: flex-start; }
  .migration-guide-banner .primary-button { width: 100%; }
  .migration-guide-modal {
    width: calc(100vw - 0.7rem);
    max-width: calc(100vw - 0.7rem);
    max-height: calc(100dvh - 0.7rem);
  }
  .migration-guide-modal > .modal-card {
    max-height: calc(100dvh - 0.7rem);
    padding: 0.85rem;
  }
  .migration-guide-safety { grid-template-columns: 1fr; }
  .migration-guide-layout {
    display: block;
    min-height: 0;
  }
  .migration-guide-steps {
    display: grid;
    grid-template-columns: repeat(7, minmax(8rem, 1fr));
    overflow-x: auto;
    margin-bottom: 0.65rem;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;
  }
  .migration-guide-steps button { scroll-snap-align: start; }
  .migration-guide-content { padding: 0.75rem; }
  .migration-guide-progress-row { grid-template-columns: 1fr; }
  .migration-guide-actions {
    align-items: stretch;
  }
  .migration-guide-actions .migration-guide-actions-spacer { display: none; }
  .migration-guide-actions button:not(.link-button) { flex: 1 1 8rem; }
}

/* Node groups are managed with names and checkboxes; IDs remain an internal detail. */
.node-group-modal {
  width: min(920px, calc(100vw - 1.5rem));
  max-width: min(920px, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
}
.node-group-modal .modal-card {
  width: 100%;
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
}
.node-group-manager {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.45fr);
  gap: 0.85rem;
  min-height: 22rem;
}
.node-group-list-panel,
.node-group-editor {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.node-group-list-panel {
  padding: 0.75rem;
}
.node-group-panel-heading,
.node-group-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}
.node-group-panel-heading h3,
.node-group-editor h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
}
.node-group-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.node-group-list-item {
  display: grid;
  gap: 0.12rem;
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  text-align: left;
}
.node-group-list-item:hover,
.node-group-list-item.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.node-group-list-item strong,
.node-group-list-item small {
  overflow-wrap: anywhere;
}
.node-group-list-item small {
  color: var(--muted);
}
.node-group-editor {
  padding: 0.85rem;
}
.node-group-editor-empty {
  display: grid;
  place-items: center;
  min-height: 18rem;
  color: var(--muted);
  text-align: center;
}
.node-group-members-fieldset {
  min-width: 0;
  margin: 0.7rem 0 0;
  padding: 0;
  border: 0;
}
.node-group-members-fieldset legend {
  margin-bottom: 0.4rem;
  color: var(--muted);
}
.node-group-member-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  max-height: 16rem;
  overflow-y: auto;
}
.node-group-member-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}
.node-group-member-option input {
  flex: 0 0 auto;
  width: auto;
  min-height: auto;
  margin-top: 0.18rem;
}
.node-group-member-option span {
  display: grid;
  min-width: 0;
}
.node-group-member-option strong,
.node-group-member-option small {
  overflow-wrap: anywhere;
}
.node-group-member-option small {
  color: var(--muted);
}
.node-group-editor-actions {
  margin-top: 0.7rem;
}
.danger-button {
  color: var(--danger);
  border-color: rgba(194, 59, 59, 0.35);
}

@media (max-width: 700px) {
  .site-modal,
  .site-modal .modal-card {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .site-config-section {
    padding: 0.75rem;
  }
  .site-group-choices {
    grid-template-columns: 1fr;
  }
  .site-group-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .site-section-heading p {
    line-height: 1.4;
  }
  .node-group-modal,
  .node-group-modal .modal-card {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .node-group-manager {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .node-group-member-choices {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .node-group-editor-empty {
    min-height: 7rem;
  }
}

/* Site HTTPS status: compact, no layout overflow on desktop table / mobile cards. */
.col-https {
  white-space: nowrap;
  max-width: 9rem;
  vertical-align: top;
}
.col-https .https-badge {
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: var(--surface);
}
.col-https .https-badge.is-on {
  color: #0b6b57;
  border-color: rgba(15, 143, 119, 0.35);
  background: rgba(15, 143, 119, 0.08);
}
.col-https .https-cert {
  display: block;
  margin-top: 0.2rem;
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--muted);
}
.mobile-card .https-line {
  overflow-wrap: anywhere;
  word-break: break-word;
}
#siteCertificateId {
  max-width: 100%;
}
.field-label.check input[type="checkbox"] {
  width: auto;
  min-height: auto;
  margin: 0;
}

/* 1024: prevent long feature flag literals from overflowing sidebar/panels */
@media (max-width: 1024px) {
  .phase-card,
  .scope-band,
  #phaseCardDesc,
  #scopeBandText,
  .kv-list dd {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
  .sidebar {
    overflow-x: hidden;
  }
}

/* Structured Agent release + canary rollout console. No raw manifest editor. */
.settings-agent-section {
  grid-column: 1 / -1;
}
.settings-dns-section {
  grid-column: 1 / -1;
}
.dns-scheduling-list,
.dns-scheduling-card {
  display: grid;
  gap: 0.85rem;
}
.dns-scheduling-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.dns-scheduling-heading strong,
.dns-scheduling-heading small {
  display: block;
}
.dns-scheduling-heading small {
  margin-top: 0.25rem;
  color: var(--muted);
}
.dns-scheduling-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .dns-scheduling-controls {
    grid-template-columns: 1fr;
  }
}
.settings-card.agent-update-card {
  grid-column: 1 / -1;
}
.system-diagnostics {
  margin-top: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}
.system-diagnostics > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
}
.system-diagnostics .kv-list { margin-top: 0.85rem; }
.agent-update-heading,
.agent-update-section-title,
.agent-release-card header,
.agent-rollout-card header,
.agent-rollout-target {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
.agent-update-heading p,
.agent-update-section-title small {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}
.agent-update-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 1rem;
}
.agent-upgrade-simple {
  margin-top: 1rem;
  background: var(--surface-soft, #f7f8fa);
}
.agent-upgrade-simple .agent-rollout-form {
  display: grid;
  gap: 0.75rem;
}
.agent-upgrade-simple .primary-button { justify-self: start; }
.agent-upgrade-advanced { margin-top: 1rem; box-shadow: none; }
.agent-upgrade-advanced .settings-advanced-content { padding-top: 1rem; }
.agent-upgrade-summary { margin-top: 1rem; }
.agent-upgrade-summary-card {
  border-top: 1px solid var(--line);
  padding-top: 0.85rem;
}
.agent-upgrade-summary-card p { margin: 0.35rem 0 0; color: var(--muted); }
.agent-update-form,
.agent-update-pane {
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 1rem;
  background: var(--surface, #fff);
}
.agent-rollout-history { grid-column: 1 / -1; }
.agent-release-grid { margin-top: 0.9rem; }
.agent-release-grid .full { grid-column: 1 / -1; }
.agent-capabilities {
  margin: 0.9rem 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  display: grid;
  gap: 0.45rem;
}
.agent-capabilities label,
.agent-node-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.agent-capabilities input,
.agent-node-choice input { width: auto; min-height: auto; margin-top: 0.18rem; }
.field-label-static { display: block; font-weight: 600; margin-bottom: 0.45rem; }
.agent-release-list,
.agent-rollout-list,
.agent-rollout-nodes {
  display: grid;
  gap: 0.65rem;
  margin: 0.8rem 0;
}
.agent-release-card,
.agent-rollout-card,
.agent-node-choice {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.75rem;
}
.agent-release-card.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.agent-release-meta,
.agent-rollout-summary,
.agent-node-detail {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.agent-release-digest { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.agent-node-choice.is-ineligible { opacity: 0.72; background: var(--surface-soft, #f7f8fa); }
.agent-node-choice.bootstrap-required { border-color: rgba(181, 129, 10, 0.35); background: var(--warn-soft); }
.agent-rollout-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.agent-rollout-targets { display: grid; gap: 0.4rem; margin-top: 0.7rem; }
.agent-rollout-target { padding-top: 0.4rem; border-top: 1px solid var(--line); }
.agent-rollout-target small { color: var(--muted); }

@media (max-width: 900px) {
  .agent-update-layout { grid-template-columns: 1fr; }
  .agent-rollout-history { grid-column: auto; }
}

@media (max-width: 700px) {
  .settings-grid { gap: 1rem; }
  .settings-primary-grid { grid-template-columns: 1fr; }
  .settings-grid .settings-card { padding: 1rem; }
  .settings-section-heading { padding: 0; }
  .settings-section-heading h2 { font-size: 1.08rem; }
  .settings-advanced > summary,
  .settings-advanced-content { padding-left: 1rem; padding-right: 1rem; }
  .agent-update-heading { flex-direction: column; }
}