/* fresh.dev design language — console layer.
   Loaded after every other console stylesheet. It restates the shell, type,
   and core components in the October 2026 design: a top navigation bar,
   large tight headings ending in a green cursor, mono labels, white cards on
   outlined panels on a white page, ink primary actions, and pill status badges. */

:root {
  /* The page behind the cards: white in light mode, like the rest of the site. Cards and
     panels on it are outlined with --page-line rather than told apart by colour. */
  --bg: var(--brand-canvas);
  --page-line: var(--brand-border-soft);
  --surface: var(--brand-surface);
  --surface-raised: var(--brand-surface-raised);
  --surface-muted: var(--brand-surface-muted);
  --surface-hover: var(--brand-surface-hover);
  --text: var(--brand-text);
  --text-strong: var(--brand-text);
  --text-muted: var(--brand-text-muted);
  --border: var(--brand-border-soft);
  --border-strong: var(--brand-border);
  --accent: var(--brand-accent);
  --accent-hover: var(--brand-accent-strong);
  --accent-soft: var(--brand-accent-soft);
  --primary: var(--brand-action);
  --primary-hover: var(--brand-action-hover);
  --link: var(--brand-link);
  --link-hover: var(--brand-link-hover);
  --shadow-sm: var(--brand-shadow-small);
  --shadow-md: var(--brand-shadow);
  --radius-sm: var(--brand-radius-small);
  --radius: var(--brand-radius);
  --radius-lg: var(--brand-radius);
  --mono: var(--brand-font-mono);
  --header-height: 4.25rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --page-max: 82rem;
}

/* Base ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--brand-canvas);
    --page-line: var(--brand-divider);
  }
}

:root[data-theme="dark"] {
  --bg: var(--brand-canvas);
  --page-line: var(--brand-divider);
}

body {
  background: var(--bg);
  color: var(--brand-text);
  font-family: var(--brand-font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

code,
kbd,
pre,
samp,
.mono,
.subtle.mono {
  font-family: var(--mono);
}

::selection {
  background: var(--brand-accent-wash);
}

:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

/* Shell ----------------------------------------------------------------- */

.console-shell {
  display: block;
  min-height: 100vh;
  padding-top: 0 !important;
}

/* Dark on both themes (tokens in brand.css), and nearly opaque so a light page beneath does not
   wash it grey. */
.console-header {
  backdrop-filter: blur(12px);
  background: rgb(20 20 18 / 0.96);
  border-bottom: 1px solid var(--brand-divider);
  position: sticky;
  top: 0;
  z-index: 60;
}

.console-header-inner {
  align-items: center;
  display: flex;
  gap: 2rem;
  margin: 0 auto;
  max-width: var(--page-max);
  min-height: var(--header-height);
  padding-inline: var(--page-gutter);
}

.console-brand {
  align-items: center;
  color: var(--brand-text);
  display: inline-flex;
  text-decoration: none;
}

.console-nav {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 0.25rem;
  min-width: 0;
}

.console-nav a {
  align-items: center;
  border-radius: 0.45rem;
  color: var(--brand-text-muted);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  text-decoration: none;
  white-space: nowrap;
}

.console-nav a .icon {
  display: none;
}

.console-nav a:hover {
  background: var(--brand-surface-hover);
  color: var(--brand-text);
}

.console-nav a.is-current {
  color: var(--brand-text);
  font-weight: 600;
}

.console-nav-mobile-only {
  display: none !important;
}

.console-meta {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.console-meta .icon-button,
.console-meta .theme-toggle {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--brand-text-muted);
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
}

.console-meta .icon-button:hover {
  background: var(--brand-surface-hover);
  border-color: transparent;
  color: var(--brand-text);
}

.console-subnav {
  align-items: center;
  border-top: 1px solid var(--brand-divider);
  display: flex;
  gap: 0.25rem;
  margin: 0 auto;
  max-width: var(--page-max);
  overflow-x: auto;
  padding: 0.35rem var(--page-gutter);
}

.console-subnav-label {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin-right: 0.5rem;
  text-transform: uppercase;
}

.console-subnav a {
  border-radius: 0.4rem;
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  padding: 0.35rem 0.55rem;
  text-decoration: none;
  white-space: nowrap;
}

.console-subnav a:hover {
  background: var(--brand-surface-hover);
  color: var(--brand-text);
}

.console-subnav a.is-current {
  background: var(--brand-surface);
  box-shadow: inset 0 0 0 1px var(--brand-border-soft);
  color: var(--brand-text);
  font-weight: 600;
}

.mobile-menu-button {
  display: none !important;
}

.sidebar-scrim {
  display: none;
}

.main-content {
  background: none;
  margin: 0 auto;
  max-width: var(--page-max);
  padding: clamp(1.75rem, 4vw, 3rem) var(--page-gutter) 3.25rem;
}

.main-content::before {
  content: none;
}

.content-frame {
  max-width: none;
}

/* Page headings ----------------------------------------------------------- */

.page-header {
  align-items: flex-end;
  margin-bottom: 2rem;
  min-height: 0;
}

.page-header::after {
  content: none;
}

.page-header h1 {
  color: var(--brand-text);
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0.6rem 0 0;
}

.page-header h1::after {
  color: var(--brand-accent);
  content: "_";
}

.page-header > div > .eyebrow:first-child + h1,
.page-header > .eyebrow + h1 {
  margin-top: 0.6rem;
}

.eyebrow,
.modal-kicker,
.landing-kicker {
  color: var(--brand-text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: none;
}

.page-description,
.page-subtitle {
  color: var(--brand-text-muted);
  font-size: 0.9375rem;
  margin-top: 0.4rem;
  max-width: 44rem;
}

.content-section h2,
.section-heading h2 {
  color: var(--brand-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-heading .eyebrow {
  margin-bottom: 0.3rem;
}

.breadcrumbs {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.breadcrumbs a {
  color: var(--brand-text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--brand-text);
}

.breadcrumbs [aria-current="page"] {
  color: var(--brand-text);
  font-weight: 600;
}

.text-link,
.breadcrumbs a.text-link {
  color: var(--brand-text);
  text-decoration-color: var(--brand-border);
  text-underline-offset: 0.2em;
}

.text-link:hover {
  color: var(--brand-accent-strong);
  text-decoration-color: currentColor;
}

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

button,
.button-link,
.link-button {
  background: var(--brand-action);
  border: 1px solid var(--brand-action);
  border-radius: var(--brand-control-radius);
  box-shadow: none;
  color: var(--brand-action-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
}

button:hover,
.button-link:hover,
.link-button:hover {
  background: var(--brand-action-hover);
  border-color: var(--brand-action-hover);
  box-shadow: none;
  color: var(--brand-action-text);
  transform: none;
}

button.secondary,
.button-link.secondary,
.secondary {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
  font-weight: 500;
}

button.secondary:hover,
.button-link.secondary:hover,
.secondary:hover {
  background: var(--brand-surface-hover);
  border-color: var(--brand-border);
  color: var(--brand-text);
}

button.danger,
.button-link.danger,
.danger-button {
  background: var(--brand-danger);
  border-color: var(--brand-danger);
  color: #fff;
}

button.danger:hover,
.button-link.danger:hover {
  background: var(--brand-danger-hover);
  border-color: var(--brand-danger-hover);
}

.link-button.text-danger,
button.link-button.text-danger {
  background: transparent;
  border-color: transparent;
  color: var(--brand-danger);
  min-height: 0;
  padding: 0;
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.icon-button {
  border-radius: var(--brand-control-radius);
}

/* Surfaces ------------------------------------------------------------- */

.content-section,
.summary-card,
.resource-card,
.table-section {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius);
  box-shadow: none;
}

.content-section {
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.content-section + .content-section {
  margin-top: 1.25rem;
}

/* Dashboard cards sit in grids, which space them. */

.summary-card {
  background: var(--brand-surface);
  min-height: 0;
}

.summary-card strong,
.summary-value {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Stat strips: one bordered row of cells, as in the machines overview. */
.summary-grid,
.billing-summary {
  background: var(--brand-border-soft);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius);
  gap: 1px;
  overflow: hidden;
}

.summary-grid > .summary-card,
.billing-summary-item {
  border: 0;
  border-radius: 0;
  margin: 0;
}

.billing-summary-item,
.billing-summary-item:first-child {
  background: var(--brand-surface);
  padding: 1.1rem 1.25rem;
}

.billing-summary-item + .billing-summary-item {
  border: 0;
}

.billing-summary-label,
.summary-label {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.billing-summary-item > strong {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Tables --------------------------------------------------------------- */

.table-wrap {
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius);
  background: var(--brand-surface);
}

.content-section .table-wrap {
  border-radius: 0.6rem;
}

.data-table {
  font-size: 0.875rem;
}

.data-table th {
  background: transparent;
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 0.8rem 1.25rem;
  text-transform: uppercase;
}

.data-table td {
  border-top: 1px solid var(--brand-divider);
  border-bottom: 0;
  padding: 1rem 1.25rem;
  vertical-align: middle;
}

.data-table tbody tr:first-child td {
  border-top: 0;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-surface-hover) 55%, transparent);
}

.data-table td > a,
.vm-name {
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: none;
}

.data-table td > a:hover,
.vm-name:hover {
  color: var(--brand-accent-strong);
}

.data-table code {
  background: transparent;
  color: var(--brand-text-secondary);
  font-size: 0.8rem;
  padding: 0;
}

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

.status-badge {
  align-items: center;
  background: var(--brand-surface-muted);
  border: 0;
  border-radius: 999px;
  color: var(--brand-text-muted);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 0.4rem;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0.3rem 0.65rem;
  text-transform: none;
}

.status-badge::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex: none;
  height: 0.45rem;
  width: 0.45rem;
}

.status-success,
.status-running,
.status-badge.status-success {
  background: var(--brand-success-soft);
  color: var(--brand-success);
}

.status-warning,
.status-badge.status-warning {
  background: var(--brand-warning-soft);
  color: var(--brand-warning);
}

.status-danger,
.status-error,
.status-badge.status-danger {
  background: var(--brand-danger-soft);
  color: var(--brand-danger);
}

.status-info,
.status-neutral,
.status-badge.status-info,
.status-badge.status-neutral {
  background: var(--brand-surface-muted);
  color: var(--brand-text-muted);
}

/* Forms ---------------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-control-radius);
  box-shadow: none;
  color: var(--brand-text);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-ink);
}

label > span:first-child,
.field-label {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Notices, toasts, modals ----------------------------------------------- */

.notice {
  border-radius: var(--brand-radius);
  font-size: 0.875rem;
}

.notice-info {
  background: var(--brand-surface);
  border-color: var(--brand-border-soft);
}

.notice-success {
  background: var(--brand-success-soft);
  border-color: color-mix(in srgb, var(--brand-success) 25%, transparent);
}

.modal-panel {
  border: 1px solid var(--brand-border-soft);
  border-radius: 1rem;
  box-shadow: var(--brand-shadow);
}

.modal-header h2 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Settings tabs: underline the current tab, as on machine detail. */
.settings-navigation,
.detail-tabs {
  border-bottom: 1px solid var(--brand-border-soft);
}

/* Code and connection strings are dark blocks, as in the mockups. */
.ssh-command,
.copy-field code,
.code-block {
  background: var(--brand-ink);
  border-radius: 0.5rem;
  color: var(--brand-ink-text);
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* App footer ------------------------------------------------------------- */

.app-support {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--brand-border-soft);
  border-radius: 0;
  box-shadow: none;
  margin-top: 3rem;
  padding: 1.75rem 0 0;
}

.app-support h2 {
  font-size: 1.125rem;
  font-weight: 600;
}

.support-link-list a {
  color: var(--brand-text);
}

/* Page structure refinements ------------------------------------------- */

.page-header {
  border-bottom: 0;
  padding-bottom: 0;
}

.vm-hero {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.content-section {
  --section-pad: clamp(1.1rem, 2vw, 1.5rem);
  padding: var(--section-pad);
}

/* Tables inside a card run edge to edge, so each list reads as one card. */
.content-section .table-wrap {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--brand-divider);
  margin: 1rem calc(-1 * var(--section-pad)) calc(-1 * var(--section-pad));
  width: auto;
}

.content-section.table-section .table-wrap {
  border-top: 0;
  margin-top: calc(-1 * var(--section-pad));
}

.content-section .data-table th:first-child,
.content-section .data-table td:first-child {
  padding-left: var(--section-pad);
}

.content-section .data-table th:last-child,
.content-section .data-table td:last-child {
  padding-right: var(--section-pad);
}

/* Filters read as a toolbar above the list, not a separate card. */

/* Tabs: ink underline on the current tab, as on machine detail. */
.detail-tabs,
.settings-tabs {
  border-bottom: 1px solid var(--brand-border-soft);
  gap: 1.75rem;
  margin-bottom: 1.5rem;
}

.detail-tabs button,
.settings-tabs a {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 -1px;
  min-height: 0;
  padding: 0.25rem 0 0.75rem;
}

.detail-tabs button:hover,
.settings-tabs a:hover {
  background: transparent;
  border-color: transparent;
  color: var(--brand-text);
}

.detail-tabs button.is-selected,
.detail-tabs button.is-selected:hover,
.settings-tabs a[aria-current="page"] {
  background: transparent;
  border-bottom-color: var(--brand-text);
  color: var(--brand-text);
  font-weight: 600;
}

@media (max-width: 960px) {
  .mobile-menu-button {
    display: inline-flex !important;
  }

  .console-nav {
    align-items: stretch;
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border-soft);
    box-shadow: var(--brand-shadow);
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    left: 0;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 0.5rem var(--page-gutter) 1rem;
    position: absolute;
    right: 0;
    top: 100%;
  }

  .console-nav[data-open="true"] {
    display: flex;
  }

  .console-nav a {
    font-size: 1rem;
    padding: 0.7rem 0.6rem;
  }

  .console-nav a .icon {
    display: inline-block;
  }

  .console-nav-mobile-only {
    display: inline-flex !important;
  }

  body.nav-open .sidebar-scrim {
    background: rgb(26 26 24 / 0.25);
    border: 0;
    display: block;
    inset: var(--header-height) 0 0;
    position: fixed;
    z-index: 50;
  }
}

/* Machine detail: quiet labels, mono identifiers, dark connection fields. */
.vm-hero .page-description {
  color: var(--brand-text-muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.vm-hero .title-row h1 {
  margin-top: 0;
}

.notice + .detail-tabs,
.page-header + .notice {
  margin-top: 1.25rem;
}

.vm-health-grid {
  background: var(--brand-surface);
  border-block: 1px solid var(--brand-divider);
}

.vm-health-item {
  border-color: var(--brand-divider);
}

.vm-overview-label,
.vm-overview-list dt,
.detail-list dt,
dl.key-value dt {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.subtle.mono,
code.mono,
.vm-overview-list code {
  background: transparent;
  border: 0;
  color: var(--brand-text-muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0;
}

.vm-copy-field input,
.vm-copy-field code,
.copy-field input {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--brand-ink-text);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.vm-desired-state {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.vm-copy-field {
  align-items: center;
  background: var(--brand-ink);
  border-radius: 0.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.55rem 0.55rem 0.55rem 0.85rem;
}

.vm-copy-field code {
  background: transparent;
  color: var(--brand-ink-text);
  overflow-wrap: anywhere;
}

.vm-copy-field .vm-copy-button {
  background: transparent;
  border-color: transparent;
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.75rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.5rem;
}

.vm-copy-field .vm-copy-button:hover {
  background: color-mix(in srgb, var(--brand-ink-text) 12%, transparent);
  border-color: transparent;
  color: var(--brand-ink-text);
}

/* Phones: each table row becomes its own card, so drop the wrapping card. */
@media (max-width: 720px) {
  .content-section.table-section {
    background: transparent;
    border: 0;
    padding: 0;
  }

  .content-section .table-wrap,
  .content-section.table-section .table-wrap {
    background: transparent;
    border: 0;
    margin: 0;
  }

  .data-table tr {
    border: 1px solid var(--brand-border-soft);
    border-radius: var(--brand-radius);
    box-shadow: none;
    margin-bottom: 0.75rem;
    padding: 0.35rem 1rem;
  }

  .data-table td,
  .content-section .data-table td:first-child,
  .content-section .data-table td:last-child {
    border-bottom: 0;
    border-top: 1px solid var(--brand-divider);
    padding: 0.65rem 0;
  }

  .data-table tbody tr td:first-child,
  .content-section .data-table tbody tr td:first-child {
    border-top: 0;
  }

  .data-table td::before {
    color: var(--brand-text-faint);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
  }

}

.admin-console .summary-grid,
.summary-grid {
  gap: 1px;
}

.summary-grid .summary-card {
  background: var(--brand-surface);
}

.summary-grid .summary-card .summary-card-icon {
  background: var(--brand-surface-muted);
  color: var(--brand-text-muted);
}

.summary-grid .summary-card.tone-danger .summary-card-icon {
  background: var(--brand-danger-soft);
  color: var(--brand-danger);
}

/* Administration shares the customer console's headings and tables. */
.admin-console .page-header {
  align-items: flex-end;
  border-bottom: 0;
  margin-bottom: 2rem;
  padding-bottom: 0;
}

.admin-console .page-header h1 {
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.admin-console .data-table th {
  background: transparent;
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-console .data-table th,
.admin-console .data-table td {
  border-bottom: 0;
  border-top: 1px solid var(--brand-divider);
}

.admin-console .data-table thead th {
  border-top: 0;
}

.admin-console .data-table th:first-child,
.admin-console .data-table td:first-child {
  padding-left: 1.25rem;
}

/* Admin cards set their own padding, so their tables keep normal margins. */
.admin-console .content-section .table-wrap {
  border-top: 1px solid var(--brand-divider);
  margin: 1rem 0 0;
}

.admin-console .content-section .data-table th:first-child,
.admin-console .content-section .data-table td:first-child {
  padding-left: 1.1rem;
}

.admin-console .data-table th.actions-column,
.admin-console .admin-catalog-table .actions-column {
  background: var(--brand-surface);
}

/* Managed apps */
.input-with-suffix {
  align-items: stretch;
  display: flex;
}

.input-with-suffix input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.input-suffix {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-left: 0;
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  color: var(--brand-text-muted);
  display: flex;
  padding: 0 0.75rem;
  white-space: nowrap;
}

.field-ok {
  color: var(--brand-success, inherit);
  font-size: 0.875rem;
}

.app-catalog-grid .app-catalog-card {
  color: inherit;
  text-decoration: none;
}

.detail-list {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 1rem 0;
}

.detail-list dd {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}

.credential-secret {
  font-size: 1rem;
  user-select: all;
}

.danger-zone {
  border-color: var(--brand-danger);
}

.domain-row {
  border-top: 1px solid var(--brand-divider);
  padding: 0.75rem 0;
}

.domain-row-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.domain-add-form {
  margin-top: 1rem;
}

/* Dashboard icons */

/* Activity markers carry the event's icon, tinted by outcome. */
.dashboard-activity-marker {
  align-items: center;
  background: var(--info-soft);
  border-radius: 999px;
  color: var(--info);
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.dashboard-activity-marker .icon {
  font-size: 0.85rem;
}

.dashboard-activity-marker.status-success {
  background: var(--success-soft);
  color: var(--success);
}

.dashboard-activity-marker.status-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.dashboard-activity-marker.status-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.dashboard-activity-marker.status-neutral {
  background: var(--surface-muted);
  color: var(--text-muted);
}

/* Control panel icons -------------------------------------------------- */

/* Desktop navigation shows its glyphs too (the mobile drawer always has). */
@media (min-width: 961px) {
  .console-nav a .icon {
    display: inline-block;
    font-size: 0.9rem;
  }

  .console-nav a {
    gap: 0.35rem;
    padding-inline: 0.5rem;
  }
}

.console-nav a:not(.is-current) .icon {
  color: var(--brand-text-faint);
}

/* Headings and legends lead with a muted glyph. */
.content-section h2 > .icon:first-child,
.section-heading h2 > .icon:first-child,
.form-section h2 > .icon:first-child,
legend > .icon:first-child {
  color: var(--brand-text-muted);
  font-size: 0.95em;
  margin-right: 0.45rem;
}

.settings-tabs a {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.settings-tabs a .icon,
.detail-tabs button .icon {
  font-size: 0.9rem;
}

.app-name-link {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.app-name-link .icon {
  color: var(--brand-text-muted);
}

.app-catalog-card {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
}

.app-catalog-icon {
  align-items: center;
  background: var(--brand-accent-soft);
  border-radius: 0.5rem;
  box-sizing: content-box;
  color: var(--brand-accent-strong);
  display: inline-flex;
  font-size: 1.125rem;
  justify-content: center;
  padding: 0.5rem;
}

.notice > .icon:first-child {
  margin-right: 0.25rem;
}

.domain-add-form button,
.danger-zone .stacked-form button {
  justify-self: start;
}

.content-section h2 + form {
  margin-top: 0.75rem;
}

/* Dashboard: apps alongside machines ------------------------------------ */

.page-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Five tiles, or six once the tenant has an app. */

.metric-card .metric-card-small {
  font-size: 1rem;
  font-weight: 500;
}

.empty-state-actions .button-link {
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
}

/* Reachability labels size to their text, so "Guest" is never clipped. */

/* Header: six primary pages in the bar; the rest in the account menu. */
.console-nav {
  flex-wrap: nowrap;
  overflow: hidden;
}

.console-meta {
  flex: none;
  margin-left: auto;
}

/* Phones: the header stacks and stays left-aligned (app.css centres it later on). */
@media (max-width: 720px) {
  .page-header {
    align-items: stretch;
  }

  .page-header-actions {
    align-self: flex-start;
  }
}

/* Operating-system logos beside image names. */
.os-logo {
  border-radius: 0.2rem;
  flex: none;
  height: 1.15em;
  object-fit: contain;
  width: 1.15em;
}

.os-labelled {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.option-row > .os-logo {
  align-self: center;
  height: 1.75rem;
  width: 1.75rem;
}

/* App email (SMTP) settings form. */
.form-grid-2 {
  display: grid;
  gap: 0.9rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.email-form .form-actions-row {
  margin-top: 0.25rem;
}

.email-form .form-actions-row button {
  justify-self: start;
}

/* App logos (assets/apps), with the generic grid icon when a logo isn't shown. */
.app-logo {
  border-radius: 0.25rem;
  flex: none;
  height: 1.2em;
  object-fit: contain;
  width: 1.2em;
}

/* Many app marks are black; on the dark theme they sit on a light tile so they stay legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-logo {
    background: var(--brand-ink);
    box-sizing: border-box;
    padding: 0.1em;
  }
}

:root[data-theme="dark"] .app-logo {
  background: var(--brand-ink);
  box-sizing: border-box;
  padding: 0.1em;
}

.app-catalog-icon .app-logo,
.app-catalog-icon .app-logo-fallback {
  height: 1.5rem;
  width: 1.5rem;
}

.app-detail-eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.app-choice-grid,
.app-catalog-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.app-choice {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
}

.plan-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}

/* App catalogue (launch step 1 and the Apps page): toolbar, chips, groups and cards. ---------- */

.catalog-browse {
  display: grid;
  gap: 1.25rem;
}

.catalog-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.catalog-search {
  align-items: center;
  display: flex;
  flex: 1 1 18rem;
  gap: 0;
  max-width: 28rem;
  position: relative;
}

.catalog-search > .icon {
  color: var(--brand-text-muted);
  font-size: 0.95rem;
  left: 0.85rem;
  pointer-events: none;
  position: absolute;
}

.catalog-search input[type="search"] {
  padding-left: 2.4rem;
  width: 100%;
}

.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.catalog-chips a {
  align-items: center;
  background: var(--brand-surface-raised);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 500;
  gap: 0.4rem;
  line-height: 1;
  min-height: 2rem;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.catalog-chips a:hover {
  border-color: var(--brand-text-muted);
  color: var(--brand-text);
}

.catalog-chips a[aria-current="true"] {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--brand-ink-text);
}

.catalog-chip-count {
  color: var(--brand-text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.catalog-chips a[aria-current="true"] .catalog-chip-count {
  color: inherit;
  opacity: 0.75;
}

.catalog-count {
  font-size: 0.82rem;
  margin: -0.5rem 0 0;
}

.catalog-group {
  display: grid;
  gap: 0.75rem;
}

.catalog-group-heading {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
}

.catalog-group-heading h2 {
  align-items: center;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 650;
  gap: 0.5rem;
  margin: 0;
}

.catalog-group-heading h2 .icon {
  color: var(--brand-accent-strong);
}

.catalog-group-count {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.app-catalog-card[hidden],
.catalog-group[hidden],
[data-catalog-empty][hidden] {
  display: none !important;
}

.app-catalog-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.app-catalog-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.catalog-badge {
  background: var(--brand-accent-soft);
  border-radius: 999px;
  color: var(--brand-accent-strong);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  text-transform: uppercase;
}

.app-catalog-meta {
  align-items: center;
  color: var(--brand-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 0.35rem 0.75rem;
  margin-top: 0.15rem;
}

.app-catalog-price {
  color: var(--brand-text);
  font-weight: 600;
}

.app-catalog-needs {
  color: var(--brand-text-muted);
}

.app-catalog-meta .mono {
  font-size: 0.72rem;
}

.catalog-suggest {
  margin: 0;
}

.catalog-intro {
  font-size: 0.875rem;
  margin: 0 0 0.9rem;
}

/* Launch step 2: the chosen app, with a way back to the catalogue. */

@media (max-width: 720px) {
  .catalog-search {
    max-width: none;
  }

}

/* Hosted DNS ------------------------------------------------------------ */

.dns-record-value {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* A records table under its own heading sits below it, not pulled up over it. */
#records.content-section.table-section > h2 + .table-wrap {
  border-top: 1px solid var(--brand-divider);
  margin-top: 1rem;
}

.data-table td.mono {
  background: none;
  border-width: 1px 0 0;
  border-color: var(--brand-divider);
  border-radius: 0;
}

.dns-record-edit summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.35rem;
}

.dns-record-edit[open] {
  display: grid;
  gap: 0.75rem;
  min-width: min(22rem, 80vw);
}

.dns-record-edit .stacked-form button,
.dns-record-form button {
  justify-self: start;
}

.dns-record-form {
  margin-top: 0.75rem;
}

@media (min-width: 900px) {
  .dns-record-form {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 8rem minmax(8rem, 1fr) minmax(12rem, 2fr) 8rem auto;
  }
}

.vm-firewall-panel h3 {
  margin-top: 1.5rem;
}

.firewall-rule-form {
  margin-top: 0.75rem;
}

.firewall-rule-form button {
  justify-self: start;
}

@media (min-width: 900px) {
  .firewall-rule-form {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 9rem minmax(7rem, 1fr) minmax(12rem, 2fr) minmax(8rem, 1.5fr) auto;
  }
}

.firewall-presets {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.firewall-presets form {
  display: inline;
}

.content-section .inline-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Dashboard banner until a payment method is saved ---------------------- */

.payment-banner {
  align-items: center;
  background: var(--brand-success-soft);
  border: 1px solid color-mix(in srgb, var(--brand-success) 25%, transparent);
  border-radius: var(--brand-radius);
  display: flex;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
}

.payment-banner-icon {
  color: var(--brand-success);
  flex: none;
}

.payment-banner-copy {
  flex: 1;
  min-width: 0;
}

.payment-banner-copy h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
}

.payment-banner-copy p {
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.payment-banner-action {
  flex: none;
}

@media (max-width: 640px) {
  .payment-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .payment-banner-action,
  .payment-banner-action button {
    width: 100%;
  }
}

/* Console header (October 2026 dashboard design) ------------------------ */

.console-header {
  background: rgb(15 15 14 / 0.97);
}

.console-nav a.is-current {
  background: var(--brand-surface);
}

.console-side-nav {
  align-items: center;
  display: flex;
  gap: 0.125rem;
}

.console-side-nav a {
  border-radius: 6px;
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 0.6rem;
  text-decoration: none;
  white-space: nowrap;
}

.console-side-nav a:hover {
  background: var(--brand-surface-hover);
  color: var(--brand-text);
}

.console-side-nav a.is-current {
  background: var(--brand-surface);
  color: var(--brand-text);
  font-weight: 600;
}

.console-meta {
  gap: 0.5rem;
}

.console-jump {
  position: relative;
}

.console-jump-box {
  align-items: center;
  background: var(--brand-canvas);
  border: 1px solid var(--brand-divider);
  border-radius: 8px;
  color: var(--brand-text-faint);
  cursor: text;
  display: flex;
  font-size: 0.8125rem;
  gap: 0.5rem;
  height: 2.125rem;
  padding: 0 0.625rem;
  width: 15rem;
}

.console-jump-box:focus-within {
  border-color: var(--brand-border);
}

.console-jump-box .icon {
  font-size: 0.8125rem;
}

/* Specific enough to beat the console's global input:not(...) rule. */
.console-jump .console-jump-box input[type="search"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--brand-text);
  flex: 1;
  font: inherit;
  min-height: 0;
  min-width: 0;
  outline: 0;
  padding: 0;
}

.console-jump-box input::-webkit-search-cancel-button {
  display: none;
}

.console-jump-box kbd {
  border: 1px solid var(--brand-divider);
  border-radius: 4px;
  font-size: 0.625rem;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

.console-jump-results {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  box-shadow: var(--brand-shadow);
  display: grid;
  max-height: min(24rem, 70vh);
  overflow-y: auto;
  padding: 0.375rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 20rem;
  z-index: 80;
}

.console-jump-results[hidden] {
  display: none;
}

.console-jump-results a {
  align-items: baseline;
  border-radius: 6px;
  color: var(--brand-text);
  display: flex;
  font-size: 0.875rem;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.5rem 0.625rem;
  text-decoration: none;
}

.console-jump-results a:hover,
.console-jump-results a[aria-selected="true"] {
  background: var(--brand-surface-hover);
}

.console-jump-results small {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.console-jump-empty {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  margin: 0;
  padding: 0.625rem;
}

/* The bar's own focus ring, not the input's inside it. */
.console-jump .console-jump-box input[type="search"]:focus,
.console-jump .console-jump-box input[type="search"]:focus-visible {
  border: 0;
  box-shadow: none;
  outline: none;
}

.console-jump-box:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent);
}

.console-jump-box kbd {
  background: transparent;
  box-shadow: none;
  color: inherit;
}

/* The design's bar is text only; the icons stay in the phone drawer. */
@media (min-width: 961px) {
  .console-nav a .icon {
    display: none;
  }
}

/* Too narrow for the full box beside the nav: a search button that opens over the bar. */
@media (max-width: 1239px) {
  .console-jump-box {
    cursor: pointer;
    justify-content: center;
    padding: 0;
    width: 2.25rem;
  }

  .console-jump-box input {
    flex: 0 0 0;
    opacity: 0;
    width: 0;
  }

  .console-jump-box kbd {
    display: none;
  }

  .console-jump-box:focus-within {
    background: var(--brand-canvas);
    justify-content: flex-start;
    padding: 0 0.625rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16rem;
    z-index: 85;
  }

  .console-jump-box:focus-within input {
    flex: 1;
    opacity: 1;
    width: auto;
  }

  .console-jump {
    height: 2.125rem;
    width: 2.25rem;
  }
}

.account-menu-panel > a.account-menu-narrow-only {
  display: none;
}

/* Below this the bar cannot hold Billing and Activity beside the nav (measured): they move into
   the account menu until the phone drawer takes over at 960px. */
@media (max-width: 1039px) {
  .console-side-nav {
    display: none;
  }

  .account-menu-panel > a.account-menu-narrow-only {
    display: inline-flex;
  }
}

@media (max-width: 960px) {
  .console-jump {
    display: none;
  }
}

/* Dashboard ---------------------------------------------------------------- */

.dashboard-board {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard-panel,
.dashboard-stats {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
}

/* Four tiles in one panel, divided by hairlines. */
.dashboard-stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: hidden;
}

.dashboard-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.125rem 1.25rem;
}

.dashboard-stat + .dashboard-stat {
  border-left: 1px solid var(--brand-divider);
}

.dashboard-stat-label,
.dashboard-resource-table th {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-stat-value {
  color: var(--brand-text);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0.375rem;
  text-decoration: none;
  width: fit-content;
}

.dashboard-stat.is-empty .dashboard-stat-value {
  color: var(--brand-text-faint);
}

.dashboard-stat-detail {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  line-height: 1.45;
  margin-top: 0.5rem;
}

.dashboard-stat-detail b {
  color: var(--brand-text);
  font-weight: 600;
}

.dashboard-stat-cta {
  align-items: center;
  color: var(--brand-accent-strong);
  display: inline-flex;
  font-weight: 600;
  gap: 0.25rem;
  text-decoration: none;
}

.dashboard-live,
.dashboard-state {
  align-items: center;
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.6875rem;
  gap: 0.375rem;
  white-space: nowrap;
}

.dashboard-live,
.dashboard-state.is-live {
  color: var(--brand-accent-strong);
}

.dashboard-live::before,
.dashboard-state::before,
.dashboard-dot {
  border-radius: 50%;
  content: "";
  display: inline-block;
  flex: none;
  height: 6px;
  width: 6px;
}

.dashboard-live::before,
.dashboard-state.is-live::before,
.dashboard-dot.is-live {
  background: var(--brand-accent);
  box-shadow: 0 0 6px var(--brand-accent);
}

.dashboard-state.is-pending {
  color: var(--brand-warning-text);
}

.dashboard-state.is-pending::before,
.dashboard-dot.is-warning {
  border: 1.5px solid var(--brand-warning-text);
}

.dashboard-state.is-danger {
  color: var(--brand-danger);
}

.dashboard-state.is-danger::before {
  background: var(--brand-danger);
}

.dashboard-state.is-idle {
  color: var(--brand-text-muted);
}

.dashboard-state.is-idle::before {
  background: var(--brand-text-faint);
}

/* Running now | side column. */
.dashboard-grid {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
}

.dashboard-resources {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.dashboard-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.dashboard-panel-head {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
}

.dashboard-panel-head h2 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

.dashboard-panel-count {
  color: var(--brand-text-faint);
  font-weight: 400;
  margin-left: 0.375rem;
}

.dashboard-panel-head a,
.dashboard-panel-aside {
  align-items: center;
  color: var(--brand-text-faint);
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.25rem;
  text-decoration: none;
}

.dashboard-panel-head a:hover {
  color: var(--brand-text);
}

.dashboard-panel-foot {
  align-items: center;
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  padding: 0.625rem 1.125rem;
}

.dashboard-panel-links a {
  color: var(--brand-text-faint);
  text-decoration: none;
}

.dashboard-panel-links a:hover {
  color: var(--brand-text);
}

.dashboard-panel-note {
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.625rem 1.125rem;
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-resource-table {
  border-collapse: collapse;
  font-size: 0.8125rem;
  width: 100%;
}

.dashboard-resource-table th {
  border-bottom: 1px solid var(--brand-divider);
  padding: 0.625rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}

.dashboard-resource-table td {
  border-bottom: 1px solid var(--brand-divider);
  padding: 0.8rem 0.75rem;
  vertical-align: middle;
}

.dashboard-resource-table th:first-child,
.dashboard-resource-table td:first-child {
  padding-left: 1.125rem;
}

.dashboard-resource-table th:last-child,
.dashboard-resource-table td:last-child {
  padding-right: 1.125rem;
}

.dashboard-resource-table tbody tr:last-child td {
  border-bottom: 0;
}

.dashboard-num {
  font-family: var(--mono);
  text-align: right !important;
  white-space: nowrap;
}

.dashboard-resource-name {
  align-items: center;
  color: var(--brand-text);
  display: flex;
  gap: 0.625rem;
  min-width: 0;
  text-decoration: none;
}

.dashboard-resource-name strong {
  display: block;
  font-weight: 600;
}

.dashboard-resource-name small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.6875rem;
  margin-top: 0.125rem;
}

.dashboard-resource-name:hover strong {
  color: var(--brand-accent-strong);
}

.dashboard-kind {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 6px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  flex: none;
  font-size: 0.8125rem;
  height: 1.625rem;
  justify-content: center;
  width: 1.625rem;
}

.dashboard-kind.is-empty {
  background: transparent;
  border: 1px dashed var(--brand-border);
  color: var(--brand-text-faint);
}

.dashboard-address {
  color: var(--brand-text-secondary);
  font-family: var(--mono);
  display: block;
  font-size: 0.6875rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-go {
  text-align: right;
  white-space: nowrap;
}

.dashboard-go a {
  align-items: center;
  color: var(--brand-text-faint);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.25rem;
  text-decoration: none;
}

.dashboard-go a:hover {
  color: var(--brand-text);
}

.dashboard-empty-kind {
  align-items: center;
  border-top: 1px dashed var(--brand-border-soft);
  color: var(--brand-text-faint);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.75rem;
  line-height: 1.45;
  padding: 0.75rem 1.125rem;
}

.dashboard-running .dashboard-panel-head + .dashboard-empty-kind {
  border-top: 0;
}

.dashboard-empty-kind a {
  align-items: center;
  color: var(--brand-accent-strong);
  display: inline-flex;
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.25rem;
  margin-left: auto;
  text-decoration: none;
}

/* Set-up checklist: the one green panel. */
.dashboard-setup {
  background: var(--band-accent);
  border-color: var(--band-accent-line);
}

.dashboard-setup .dashboard-panel-head {
  border-bottom-color: var(--band-accent-line);
}

.dashboard-setup .dashboard-panel-count {
  color: var(--brand-accent-strong);
}

.dashboard-setup-hide {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--brand-accent-strong);
  cursor: pointer;
  font-size: 0.8125rem;
  min-height: 0;
  padding: 0;
}

.dashboard-setup-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0.375rem 1.125rem 0.625rem;
}

.dashboard-setup-list li {
  align-items: center;
  color: var(--brand-text);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.625rem;
  padding: 0.5rem 0;
}

.dashboard-setup-list li.is-done {
  color: var(--brand-text-faint);
  text-decoration: line-through;
}

.dashboard-setup-list li.is-next {
  font-weight: 600;
}

.dashboard-setup-mark {
  align-items: center;
  border: 1.5px solid var(--brand-border);
  border-radius: 50%;
  color: var(--brand-accent-strong);
  display: inline-flex;
  flex: none;
  height: 1.125rem;
  justify-content: center;
  padding: 0.2rem;
  width: 1.125rem;
}

.dashboard-setup-list li.is-done .dashboard-setup-mark {
  background: var(--brand-accent-soft);
  border-color: transparent;
}

.dashboard-setup-list li.is-next .dashboard-setup-mark {
  border-color: var(--brand-accent);
}

.dashboard-setup-mark svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.dashboard-setup-go {
  align-items: center;
  color: var(--brand-accent-strong);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.25rem;
  margin-left: auto;
  text-decoration: none;
}

/* Billing. */
.dashboard-kv {
  margin: 0;
  padding: 0.375rem 1.125rem 0.625rem;
}

.dashboard-kv > div {
  align-items: baseline;
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-muted);
  display: flex;
  font-size: 0.8125rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.55rem 0;
}

.dashboard-kv > div:last-child {
  border-bottom: 0;
}

.dashboard-kv dd {
  color: var(--brand-text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin: 0;
  text-align: right;
}

.dashboard-kv dd small {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-sans);
  font-size: 0.6875rem;
}

.dashboard-kv dd a {
  color: var(--brand-accent-strong);
  font-family: var(--brand-font-sans);
  font-weight: 600;
}

/* Credit is money in the customer's favour: brand green, as on the homepage. */
.dashboard-credit {
  color: var(--brand-accent-strong);
}

.dashboard-green {
  color: var(--brand-accent-strong);
}

/* Activity. */
.dashboard-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-activity-list li {
  align-items: start;
  border-bottom: 1px solid var(--brand-divider);
  display: grid;
  font-size: 0.8125rem;
  gap: 0.75rem;
  grid-template-columns: 1.375rem minmax(0, 1fr) auto;
  padding: 0.75rem 1.125rem;
}

.dashboard-activity-list li:last-child {
  border-bottom: 0;
}

.dashboard-activity-marker {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 50%;
  color: var(--brand-text-muted);
  display: inline-flex;
  font-size: 0.6875rem;
  height: 1.375rem;
  justify-content: center;
  width: 1.375rem;
}

.dashboard-activity-marker.status-success {
  background: var(--brand-accent-soft);
  color: var(--brand-accent-strong);
}

.dashboard-activity-marker.status-warning {
  background: var(--brand-warning-soft);
  color: var(--brand-warning-text);
}

.dashboard-activity-marker.status-danger {
  background: var(--brand-danger-soft);
  color: var(--brand-danger);
}

.dashboard-activity-main {
  min-width: 0;
}

.dashboard-activity-main strong {
  display: block;
  font-weight: 600;
}

.dashboard-activity-main > span {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.6875rem;
  margin-top: 0.125rem;
}

.dashboard-activity-main a {
  color: inherit;
}

.dashboard-activity-list time {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.625rem;
  padding-top: 0.15rem;
  white-space: nowrap;
}

.dashboard-activity-empty {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  margin: 0;
  padding: 1rem 1.125rem;
}

/* Service status. */
.dashboard-status {
  align-items: center;
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  color: var(--brand-text-muted);
  display: flex;
  font-size: 0.8125rem;
  gap: 1rem;
  justify-content: space-between;
  margin: 0;
  padding: 0.875rem 1.125rem;
}

.dashboard-status-line {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.dashboard-status-links,
.dashboard-status-links a {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  text-decoration: none;
}

.dashboard-status-links a:hover {
  color: var(--brand-text);
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .dashboard-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-stat + .dashboard-stat {
    border-left: 0;
  }

  .dashboard-stat:nth-child(even) {
    border-left: 1px solid var(--brand-divider);
  }

  .dashboard-stat:nth-child(n + 3) {
    border-top: 1px solid var(--brand-divider);
  }

  /* One card per resource: the table's cells stack under the name. */
  .dashboard-panel-aside {
    display: none;
  }

  .dashboard-resource-table thead {
    display: none;
  }

  .dashboard-resource-table,
  .dashboard-resource-table tbody,
  .dashboard-resource-table tr,
  .dashboard-resource-table td {
    display: block;
  }

  .dashboard-resource-table tr {
    border-bottom: 1px solid var(--brand-divider);
    display: grid;
    gap: 0.375rem 0.75rem;
    grid-template-areas: "name name" "status cost" "address address";
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.875rem 1.125rem;
  }

  .dashboard-resource-table td[data-label="Status"] { grid-area: status; }
  .dashboard-resource-table td[data-label="This month"] { grid-area: cost; }
  .dashboard-resource-table td[data-label="Address"] { grid-area: address; }

  .dashboard-resource-table tbody tr:last-child {
    border-bottom: 0;
  }

  .dashboard-resource-table td,
  .dashboard-resource-table td:first-child,
  .dashboard-resource-table td:last-child {
    border: 0;
    padding: 0;
  }

  .dashboard-resource-table td[data-label="Name"] {
    grid-area: name;
  }

  .dashboard-resource-table td[data-label="Plan"],
  .dashboard-go {
    display: none !important;
  }

  .dashboard-address {
    max-width: none;
  }
}

/* Machines list (October 2026 design) -------------------------------------- */

.vms-summary {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  margin-right: 0.5rem;
}

.vms-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.vms-search,
.vms-chip {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 7px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.5rem;
  height: 1.875rem;
  padding: 0 0.625rem;
}

.vms-search {
  border-color: var(--brand-border);
  color: var(--brand-text-faint);
  width: 17.5rem;
}

.vms-search:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent);
}

.vms-toolbar .vms-search input[type="search"],
.dbx-toolbar .vms-search input[type="search"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--brand-text);
  flex: 1;
  font: inherit;
  min-height: 0;
  min-width: 0;
  outline: none;
  padding: 0;
}

.vms-chips,
.vms-sort {
  align-items: center;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.vms-chip {
  cursor: pointer;
  white-space: nowrap;
}

.vms-chip input,
.vms-sort-option input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.vms-chip:has(input:checked) {
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.vms-chip:has(input:focus-visible),
.vms-sort-option:has(input:focus-visible) {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

.vms-chip.is-danger {
  color: var(--brand-danger);
}

.vms-sort {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  gap: 0.25rem;
  margin-left: auto;
}

.vms-sort legend {
  float: left;
  margin-right: 0.375rem;
  padding: 0;
}

.vms-sort-option {
  border-radius: 5px;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
}

.vms-sort-option:has(input:checked) {
  background: var(--brand-surface);
  color: var(--brand-text);
}

.vms-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  position: relative;
}

.vms-table-wrap {
  overflow-x: auto;
}

.vms-table {
  border-collapse: collapse;
  font-size: 0.8125rem;
  width: 100%;
}

.vms-table th {
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 0.625rem 0.75rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.vms-table td {
  border-bottom: 1px solid var(--brand-divider);
  padding: 0.75rem;
  vertical-align: middle;
}

.vms-table th:first-child,
.vms-table td:first-child {
  padding-left: 1.125rem;
}

.vms-table th:last-child,
.vms-table td:last-child {
  padding-right: 1.125rem;
}

.vms-table tbody tr:last-child td {
  border-bottom: 0;
}

.vms-table tr.is-stopped td {
  background: color-mix(in srgb, var(--brand-canvas) 45%, var(--brand-surface));
}

.vms-num {
  font-family: var(--mono);
  text-align: right !important;
  white-space: nowrap;
}

.vms-name {
  align-items: center;
  color: var(--brand-text);
  display: flex;
  gap: 0.625rem;
  min-width: 0;
  text-decoration: none;
}

.vms-name .os-logo,
.vms-os-fallback {
  flex: none;
  height: 1.25rem;
  width: 1.25rem;
}

.vms-os-fallback {
  color: var(--brand-text-faint);
}

.vms-name strong {
  display: block;
  font-weight: 600;
}

.is-stopped .vms-name strong {
  color: var(--brand-text-secondary);
}

.vms-name small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.6875rem;
  margin-top: 0.125rem;
}

.vms-name:hover strong {
  color: var(--brand-accent-strong);
}

.vms-state {
  align-items: center;
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.6875rem;
  gap: 0.375rem;
  text-transform: capitalize;
  white-space: nowrap;
}

.vms-state::before {
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
}

.vms-state.is-live {
  color: var(--brand-accent-strong);
}

.vms-state.is-live::before {
  background: var(--brand-accent);
  box-shadow: 0 0 6px var(--brand-accent);
}

.vms-state.is-idle {
  color: var(--brand-text-muted);
}

.vms-state.is-idle::before {
  background: var(--brand-border);
}

.vms-state.is-pending {
  color: var(--brand-warning-text);
}

.vms-state.is-pending::before {
  border: 1.5px solid var(--brand-warning-text);
}

.vms-state.is-danger {
  color: var(--brand-danger);
}

.vms-state.is-danger::before {
  background: var(--brand-danger);
}

.vms-desired,
.vms-muted {
  color: var(--brand-text-faint);
}

.vms-desired {
  display: block;
  font-size: 0.6875rem;
  margin-top: 0.125rem;
}

.vms-ip {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  white-space: nowrap;
}

.vms-ip .mono {
  background: none;
  border: 0;
  color: var(--brand-text-secondary);
  font-size: 0.75rem;
  padding: 0;
}

.vms-usage {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 7rem;
}

.vms-usage-label {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
}

.vms-bar {
  background: var(--brand-surface-muted);
  border-radius: 2px;
  display: block;
  height: 4px;
  overflow: hidden;
}

.vms-bar i {
  background: var(--brand-accent);
  display: block;
  height: 4px;
}

.vms-billed-note {
  color: var(--brand-warning-text);
  display: block;
  font-size: 0.6875rem;
  line-height: 1.4;
  max-width: 14rem;
}

.vms-actions {
  text-align: right;
  white-space: nowrap;
}

.vms-table .vms-icon-button,
.vms-ip .vms-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  color: var(--brand-text-faint);
  cursor: pointer;
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  min-height: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: middle;
  width: 1.75rem;
}

.vms-ip .vms-icon-button {
  height: 1.5rem;
  width: 1.5rem;
}

.vms-table .vms-icon-button:hover {
  background: transparent;
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.vms-table .vms-icon-button.is-danger:hover {
  border-color: var(--brand-danger);
  color: var(--brand-danger);
}

.vms-table .vms-icon-button .icon {
  font-size: 0.8125rem;
}

.vms-panel-foot {
  align-items: center;
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  padding: 0.625rem 1.125rem;
}

.vms-pager {
  align-items: center;
  display: inline-flex;
  gap: 0.875rem;
}

.vms-pager a {
  align-items: center;
  color: var(--brand-text-secondary);
  display: inline-flex;
  gap: 0.2rem;
  text-decoration: none;
}

.vms-notes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.25rem;
}

.vms-note {
  align-items: center;
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  color: var(--brand-text-faint);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.75rem;
  line-height: 1.45;
  margin: 0;
  padding: 0.875rem 1rem;
}

.vms-note a {
  align-items: center;
  color: var(--brand-text-secondary);
  display: inline-flex;
  gap: 0.2rem;
  text-decoration: none;
}

.vms-note-icon {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 50%;
  color: var(--brand-text-muted);
  display: inline-flex;
  flex: none;
  font-size: 0.6875rem;
  height: 1.375rem;
  justify-content: center;
  padding: 0.3rem;
  width: 1.375rem;
}

.vms-note-icon svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.vms-note-icon.is-ok {
  background: var(--brand-accent-soft);
  color: var(--brand-accent-strong);
}

.vms-note-icon.is-warning {
  background: var(--brand-warning-soft);
  color: var(--brand-warning-text);
}

@media (max-width: 960px) {
  .vms-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .vms-search {
    width: 100%;
  }

  .vms-sort {
    margin-left: 0;
  }

  /* One card per machine. */
  .vms-table thead {
    display: none;
  }

  .vms-table,
  .vms-table tbody,
  .vms-table tr,
  .vms-table td {
    display: block;
  }

  .vms-table tr {
    border-bottom: 1px solid var(--brand-divider);
    display: grid;
    gap: 0.5rem 0.75rem;
    grid-template-areas: "name name" "state cost" "ip usage" "actions actions";
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.875rem 1.125rem;
  }

  .vms-table td,
  .vms-table td:first-child,
  .vms-table td:last-child {
    background: none !important;
    border: 0;
    padding: 0;
  }

  .vms-table td[data-label="Machine"] { grid-area: name; }
  .vms-table td[data-label="State"] { grid-area: state; }
  .vms-table td[data-label="This month"] { grid-area: cost; }
  .vms-table td[data-label="Public IPv4"] { grid-area: ip; }
  .vms-table td[data-label="Usage"] { grid-area: usage; }
  .vms-table td[data-label="Plan"] { display: none; }
  .vms-table td.vms-actions { grid-area: actions; text-align: left; }
}

/* Create VM (October 2026 design) ----------------------------------------- */

.vmc-header .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.vmc-header .eyebrow a:hover {
  color: var(--brand-text);
}

.vmc-header {
  align-items: flex-end;
}

.vmc-stepper {
  margin: 0;
}

.create-vm-section {
  margin-top: 0.5rem;
}

.vmc-layout {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) 20rem;
}

.vmc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Each section: what it is on the left, the choice on the right. */
.vmc-section {
  border: 0;
  border-top: 1px solid var(--brand-divider);
  display: grid;
  gap: 2rem;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  margin: 0;
  min-width: 0;
  padding: 1.75rem 0;
}

.vmc-section:first-child {
  border-top: 0;
  padding-top: 0.5rem;
}

/* A fieldset's legend does not take part in grid layout; float it into the first column. */
fieldset.vmc-section {
  display: block;
}

fieldset.vmc-section > .vmc-section-head {
  float: left;
  padding: 0;
  width: 12.5rem;
}

fieldset.vmc-section > .vmc-section-body {
  margin-left: 14.5rem;
}

.vmc-section-head {
  display: block;
}

.vmc-section-head h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.vmc-section-head .hint {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.375rem;
}

.vmc-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.vmc-note {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin: 0;
}

.vmc-hostname {
  align-items: center;
  background: var(--brand-canvas);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  display: flex;
  font-family: var(--mono);
  font-size: 0.8125rem;
  gap: 0.5rem;
  height: 2.375rem;
  max-width: 23.75rem;
  padding: 0 0.75rem;
}

.vmc-hostname:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent);
}

.vmc-prompt {
  color: var(--brand-accent-strong);
}

/* Specific enough to beat the console's global input:not(...) rule. */
.vmc-main .vmc-hostname input[type="text"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--brand-text);
  flex: 1;
  font: inherit;
  min-height: 0;
  min-width: 0;
  outline: none;
  padding: 0;
}

.vmc-hostname:has(input[aria-invalid="true"]) {
  border-color: var(--brand-danger);
}

/* The console styles a label's first span as a small muted caption; not inside this form. */
.vmc-section label > span:first-child {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.vmc-main input[type="radio"],
.vmc-main input[type="checkbox"] {
  accent-color: var(--brand-accent);
  flex: none;
  height: 1rem;
  margin: 0;
  min-height: 0;
  width: 1rem;
}

/* Console labels default to a secondary colour; choices here read as content. */
.vmc-main label {
  color: var(--brand-text);
}

/* Console labels are bold; their descriptions are not. */
.vmc-os-name small,
.vmc-toggle small,
.vmc-key small,
.vmc-plan-specs,
.vmc-plan-hourly {
  font-weight: 400;
}

.vmc-key small.mono {
  background: none;
  border: 0;
  padding: 0;
}

/* Operating systems: one card per distribution, its versions as choices. */
.vmc-os-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vmc-os {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 9px;
  display: grid;
  gap: 0.375rem 0.625rem;
  grid-template-areas: "mark name" "mark versions";
  grid-template-columns: 1.75rem minmax(0, 1fr);
  padding: 0.625rem 0.75rem;
}

.vmc-os.is-selected,
.vmc-os:has(input:checked) {
  border-color: var(--brand-accent);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.vmc-os .os-logo,
.vmc-os-mark {
  grid-area: mark;
  height: 1.75rem;
  width: 1.75rem;
}

.vmc-os-mark {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 7px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  justify-content: center;
}

.vmc-os-mark.is-iso {
  background: transparent;
  border: 1px dashed var(--brand-border);
}

.vmc-os-name {
  font-size: 0.8125rem;
  grid-area: name;
  min-width: 0;
}

.vmc-os-name strong {
  font-weight: 600;
}

.vmc-os-name small {
  color: var(--brand-text-faint);
  margin-left: 0.25rem;
}

.vmc-os-name code {
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.vmc-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  grid-area: versions;
}

.vmc-os label.vmc-version {
  align-items: center;
  background: transparent;
  border: 1px solid var(--brand-border-soft);
  border-radius: 6px;
  color: var(--brand-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.6875rem;
  gap: 0;
  min-height: 0;
  padding: 0.15rem 0.45rem;
}

.vmc-main .vmc-os label.vmc-version input,
.vmc-main .vmc-os-iso input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.vmc-os label.vmc-version:has(input:checked) {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
  color: var(--brand-accent-strong);
}

.vmc-os label.vmc-version:has(input:focus-visible),
.vmc-os-iso:has(input:focus-visible),
.vmc-plan:has(input:focus-visible),
.vmc-key:has(input:focus-visible),
.vmc-toggle:has(input:focus-visible) {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

.vmc-os.vmc-os-iso {
  border-style: dashed;
  cursor: pointer;
  grid-column: 1 / -1;
  grid-template-areas: "mark name";
}

.vmc-os-iso .vmc-os-name small {
  display: block;
  margin: 0.125rem 0 0;
}

/* Plans. */
.vmc-plan-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vmc-plan {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
}

.vmc-plan:has(input:checked) {
  border-color: var(--brand-accent);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.vmc-plan-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.vmc-plan-top input {
  accent-color: var(--brand-accent);
  margin: 0;
}

.vmc-plan-price {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.vmc-plan-hourly {
  color: var(--brand-accent-strong);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.vmc-plan-specs {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* SSH keys. */
.vmc-key-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vmc-section label.vmc-key {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  font-size: 0.8125rem;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
}

.vmc-section label.vmc-key:has(input:checked) {
  border-color: var(--brand-accent);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.vmc-key input {
  accent-color: var(--brand-accent);
  margin: 0;
}

.vmc-key small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.6875rem;
  margin-top: 0.125rem;
}

.vmc-add-link {
  align-items: center;
  color: var(--brand-accent-strong);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 0.3rem;
  text-decoration: none;
  width: fit-content;
}

/* Networking: switches over real checkboxes. */
.vmc-toggles {
  gap: 0.625rem;
}

.vmc-section label.vmc-toggle {
  align-items: flex-start;
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-size: 0.8125rem;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
}

.vmc-main .vmc-toggle input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.vmc-switch {
  background: var(--brand-border);
  border-radius: 10px;
  flex: none;
  height: 1.25rem;
  position: relative;
  transition: background-color 140ms ease;
  width: 2.125rem;
}

.vmc-switch::after {
  background: var(--brand-surface);
  border-radius: 50%;
  content: "";
  height: 1rem;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 140ms ease;
  width: 1rem;
}

.vmc-toggle:has(input:checked) .vmc-switch {
  background: var(--brand-accent);
}

.vmc-toggle:has(input:checked) .vmc-switch::after {
  transform: translateX(0.875rem);
}

.vmc-toggle small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  margin-top: 0.125rem;
}

.vmc-actions {
  align-items: center;
  border-top: 1px solid var(--brand-divider);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.5rem;
}

.vmc-actions-end {
  align-items: center;
  display: flex;
  gap: 0.875rem;
}

/* Summary. */
.vmc-summary {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-height) + 1.25rem);
}

.vmc-summary h2 {
  border-bottom: 1px solid var(--brand-divider);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  padding: 0.875rem 1.125rem;
}

.vmc-summary-list {
  margin: 0;
  padding: 0.375rem 1.125rem 0.625rem;
}

.vmc-summary-list > div {
  align-items: baseline;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  font-size: 0.8125rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.55rem 0;
}

.vmc-summary-list > div:last-child {
  border-bottom: 0;
}

.vmc-summary-list dt {
  color: var(--brand-text-muted);
}

.vmc-summary-list dd {
  font-family: var(--mono);
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

/* Always dark (tokens in brand.css), so the credit amount takes the dark theme's green. */
.vmc-summary-cost {
  --brand-accent-strong: #73ce95;
  background: var(--brand-canvas-strong);
  border-radius: 0 0 11px 11px;
  color: var(--brand-text);
  border-top: 1px solid var(--brand-divider);
  padding: 1rem 1.125rem;
}

.vmc-summary-price {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.vmc-summary-price span {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
}

.vmc-summary-price strong {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.vmc-summary-rate {
  color: var(--brand-accent-strong);
  font-family: var(--mono);
  font-size: 0.6875rem;
  margin: 0.125rem 0 0;
  text-align: right;
}

.vmc-summary-credit {
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
}

.vmc-summary-credit b {
  color: var(--brand-text);
  font-weight: 600;
}

.vmc-summary-credit b:first-child {
  color: var(--brand-accent-strong);
}

/* Apps and databases: the one fixed choice (engine, chosen app) as a selected card. */
.vmc-engine,
.vmc-app {
  grid-template-areas: "mark name";
  max-width: 32rem;
}

.vmc-app {
  grid-template-areas: "mark name change";
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  max-width: none;
}

.vmc-os-mark.icon svg {
  height: 1rem;
  width: 1rem;
}

.vmc-os-name small {
  display: inline;
}

.vmc-engine .vmc-os-name small {
  display: block;
  margin: 0.125rem 0 0;
}

.vmc-app-summary {
  color: var(--brand-text-muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 0.25rem;
}

.vmc-app-change {
  align-items: center;
  align-self: center;
  color: var(--brand-accent-strong);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 0.3rem;
  grid-area: change;
  text-decoration: none;
  white-space: nowrap;
}

.vmc-toggle.is-fixed {
  align-items: flex-start;
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 10px;
  display: flex;
  font-size: 0.8125rem;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
}

.vmc-switch.is-on {
  background: var(--brand-accent);
  opacity: 0.6;
}

.vmc-switch.is-on::after {
  transform: translateX(0.875rem);
}

.vmc-dependent {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-left: 3rem;
  transition: opacity 160ms ease;
}

.vmc-toggles:has(input[name="public_access"]:not(:checked)) .vmc-dependent {
  opacity: 0.55;
}

.vmc-main .vmc-field-label {
  color: var(--brand-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.vmc-dependent textarea {
  font-family: var(--mono);
  font-size: 0.8125rem;
  max-width: 23.75rem;
}

.vmc-lede {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
}

.vmc-stepper .stepper-link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: inherit;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .vmc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vmc-summary {
    position: static;
  }
}

@media (max-width: 760px) {
  /* Still floated: a legend that is not floated sits on the fieldset's border and hides it. */
  fieldset.vmc-section > .vmc-section-head {
    margin-bottom: 0.875rem;
    width: 100%;
  }

  fieldset.vmc-section > .vmc-section-body {
    clear: both;
    margin-left: 0;
  }

  .vmc-section {
    gap: 0.875rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .vmc-os-grid,
  .vmc-plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vmc-actions,
  .vmc-actions-end {
    align-items: stretch;
    flex-direction: column;
  }

  .vmc-header {
    align-items: flex-start;
  }

  .vmc-app {
    grid-template-areas: "mark name" "mark change";
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .vmc-app-change {
    justify-self: start;
  }

  .vmc-dependent {
    padding-left: 0;
  }
}

/* Database header, tabs and extensions (October 2026 design) -------------- */

.dbx-header {
  align-items: end;
  border-bottom: 1px solid var(--brand-divider);
  column-gap: 1.5rem;
  display: grid;
  grid-template-areas: "main actions" "tabs tabs";
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 0 1.75rem;
  padding-top: 0.25rem;
}

.dbx-header-main {
  grid-area: main;
  min-width: 0;
}

.dbx-header .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.dbx-header .eyebrow a:hover {
  color: var(--brand-text);
}

.dbx-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
}

.dbx-title h1,
.dbx-ext-title h1 {
  color: var(--brand-text);
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0.6rem 0 0;
}

.dbx-title h1::after {
  color: var(--brand-accent);
  content: "_";
}

.dbx-state {
  align-items: center;
  background: none;
  border: 0;
  color: var(--brand-text-muted);
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.75rem;
  gap: 0.375rem;
  padding: 0;
}

.dbx-state::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 0.4375rem;
  width: 0.4375rem;
}

.dbx-state.status-success {
  color: var(--brand-accent-strong);
}

.dbx-state.status-warning {
  color: var(--brand-warning-text);
}

.dbx-state.status-danger {
  color: var(--brand-danger);
}

.dbx-meta {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.dbx-header-actions {
  grid-area: actions;
  padding-bottom: 0.75rem;
}

.dbx-tabs {
  display: flex;
  gap: 0.25rem;
  grid-area: tabs;
  margin-top: 1.25rem;
  overflow-x: auto;
}

.dbx-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  padding: 0.5rem 0.25rem 0.625rem;
  margin-right: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

.dbx-tabs a:hover {
  color: var(--brand-text);
}

.dbx-tabs a[aria-current="page"] {
  border-bottom-color: var(--brand-accent);
  color: var(--brand-text);
  font-weight: 500;
}

.dbx-tab-count {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  margin-left: 0.25rem;
}

/* The Extensions tab. */
.dbx-layout {
  align-items: start;
  display: grid;
  gap: 2rem;
  grid-template-columns: 13.75rem minmax(0, 1fr);
}

.dbx-side {
  position: sticky;
  top: calc(var(--header-height) + 1.25rem);
}

.dbx-side-list {
  border-bottom: 1px solid var(--brand-divider);
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0 0 0.75rem;
}

.dbx-side-list a {
  align-items: center;
  border-radius: 6px;
  color: var(--brand-text-secondary);
  display: flex;
  font-size: 0.875rem;
  justify-content: space-between;
  padding: 0.4rem 0.625rem;
  text-decoration: none;
}

.dbx-side-list a:hover {
  background: var(--brand-surface);
  color: var(--brand-text);
}

.dbx-side-list a[aria-current="page"] {
  background: var(--brand-surface-muted);
  color: var(--brand-text);
  font-weight: 600;
}

.dbx-side-list a.has-updates {
  color: var(--brand-warning-text);
}

.dbx-count {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
}

.dbx-side-note {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  line-height: 1.55;
  margin: 1rem 0 0;
  padding: 0 0.625rem;
}

.dbx-side-note a {
  color: var(--brand-accent-strong);
  text-decoration: none;
}

.dbx-main {
  min-width: 0;
}

.dbx-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.dbx-toolbar form {
  flex: 0 1 23rem;
}

.dbx-search {
  height: 2.25rem;
  width: 100%;
}

.dbx-code,
.dbx-guide code,
.dbx-table .dbx-mono,
.dbx-field .dbx-mono {
  font-variant-ligatures: none;
}

.dbx-mono {
  font-family: var(--mono);
}

.dbx-toolbar-note {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin: 0;
}

.dbx-toolbar-note code,
.dbx-guide code,
.dbx-lede code,
.dbx-pair code {
  background: var(--brand-surface-muted);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.05rem 0.3rem;
}

.dbx-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dbx-content > .notice,
.dbx-content > .form-errors {
  margin: 0;
}

.dbx-pending {
  align-items: center;
  display: flex;
  gap: 0.625rem;
}

.dbx-spinner {
  animation: dbx-spin 0.9s linear infinite;
  border: 2px solid var(--brand-border);
  border-radius: 50%;
  border-top-color: var(--brand-accent);
  flex: none;
  height: 0.875rem;
  width: 0.875rem;
}

@keyframes dbx-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dbx-spinner {
    animation: none;
  }
}

.dbx-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  overflow: hidden;
}

.dbx-panel-head {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
}

.dbx-panel-head h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.dbx-panel-aside {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.dbx-empty {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  margin: 0;
  padding: 1.25rem 1.125rem;
}

.dbx-table-wrap {
  overflow-x: auto;
}

.dbx-table {
  border-collapse: collapse;
  font-size: 0.8125rem;
  width: 100%;
}

.dbx-table th {
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 0.625rem 1.125rem;
  text-align: left;
  text-transform: uppercase;
}

.dbx-table td {
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-secondary);
  padding: 0.875rem 1.125rem;
  vertical-align: middle;
}

.dbx-table tr:last-child td {
  border-bottom: 0;
}

.dbx-table td:first-child {
  max-width: 17rem;
}

.dbx-table td small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 0.125rem;
}

.dbx-table .dbx-mono {
  color: var(--brand-text);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.dbx-table td[data-label="Enabled"] {
  white-space: nowrap;
}

.dbx-table .dbx-tag {
  display: table;
  margin-top: 0.25rem;
}

.dbx-ext-link {
  color: var(--brand-text);
  text-decoration: none;
}

.dbx-ext-link:hover {
  text-decoration: underline;
}

.dbx-row-actions {
  text-align: right;
  white-space: nowrap;
}

.dbx-row-actions form {
  display: inline;
}

.dbx-text-button {
  background: none;
  border: 0;
  color: var(--brand-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  margin-left: 0.875rem;
  min-height: 0;
  padding: 0;
}

.dbx-text-button:hover {
  color: var(--brand-text);
}

.dbx-text-button.is-accent {
  color: var(--brand-accent-strong);
  font-weight: 600;
}

.dbx-panel-foot {
  align-items: flex-start;
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.5rem;
  line-height: 1.55;
  margin: 0;
  padding: 0.75rem 1.125rem;
}

.dbx-panel-foot .icon {
  color: var(--brand-warning-text);
  flex: none;
  margin-top: 0.1rem;
}

.dbx-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.dbx-tag {
  border: 1px solid var(--brand-border-soft);
  border-radius: 4px;
  color: var(--brand-text-muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 0.4rem;
  white-space: nowrap;
}

.dbx-tag.is-ok {
  background: var(--brand-accent-soft);
  border-color: transparent;
  color: var(--brand-accent-strong);
}

.dbx-tag.is-warning {
  background: var(--brand-warning-soft);
  border-color: transparent;
  color: var(--brand-warning-text);
}

.dbx-suggested {
  background: var(--brand-accent-wash);
  border-color: color-mix(in srgb, var(--brand-accent) 45%, transparent);
}

.dbx-suggested .dbx-panel-head {
  border-bottom-color: color-mix(in srgb, var(--brand-accent) 30%, transparent);
}

.dbx-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.dbx-suggestions p {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  padding: 0.875rem 1.125rem;
}

.dbx-suggestions p + p {
  border-left: 1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent);
}

.dbx-suggestions a,
.dbx-enable-foot a {
  color: var(--brand-accent-strong);
  font-weight: 600;
  text-decoration: none;
}

.dbx-sort {
  display: flex;
  gap: 0.875rem;
}

.dbx-sort a {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  text-decoration: none;
}

.dbx-sort a[aria-current="true"] {
  color: var(--brand-text);
  font-weight: 600;
}

.dbx-ext-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dbx-ext {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: grid;
  gap: 1rem 1.125rem;
  grid-template-columns: 2.5rem minmax(0, 1fr) 9rem 7.5rem;
  padding: 1rem 1.125rem;
}

.dbx-ext:last-child {
  border-bottom: 0;
}

.dbx-ext-icon {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 9px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.dbx-ext-icon svg {
  height: 1.125rem;
  width: 1.125rem;
}

.dbx-ext-icon.is-large {
  border-radius: 11px;
  height: 3rem;
  width: 3rem;
}

.dbx-ext-name {
  color: var(--brand-text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.dbx-ext-name:hover {
  text-decoration: underline;
}

.dbx-ext-body p {
  color: var(--brand-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0.2rem 0 0.4rem;
}

.dbx-ext-category {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.dbx-ext-action {
  justify-content: center;
}

/* One extension's page. */
.dbx-ext-header {
  grid-template-areas: "main actions";
  padding-bottom: 1.25rem;
}

.dbx-ext-title {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.dbx-ext-title h1 {
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  margin: 0 0 0.5rem;
}

.dbx-alias {
  color: var(--brand-text-faint);
  font-weight: 400;
}

.dbx-ext-links {
  grid-area: actions;
  padding-bottom: 0.5rem;
}

.dbx-ext-links a {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}

.dbx-ext-links a:hover {
  color: var(--brand-text);
}

.dbx-detail-layout {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
}

.dbx-guide {
  max-width: 47.5rem;
  min-width: 0;
}

.dbx-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
}

.dbx-guide h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}

.dbx-guide ul {
  margin: 0;
  padding-left: 1.125rem;
}

.dbx-guide li {
  color: var(--brand-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: 0.375rem;
}

.dbx-guide li strong {
  color: var(--brand-text);
}

.dbx-not-for,
.dbx-example-intro {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

.dbx-code {
  background: var(--brand-canvas-strong);
  border: 1px solid var(--brand-divider);
  border-radius: 10px;
  color: var(--brand-text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  margin: 0.875rem 0 0;
  overflow-x: auto;
  padding: 1rem 1.125rem;
  white-space: pre;
}

.dbx-code code {
  background: none;
  font-size: inherit;
  padding: 0;
}

.dbx-code.is-small {
  font-size: 0.75rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  white-space: pre-wrap;
}

.dbx-pairs {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.dbx-pair {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 10px;
  color: var(--brand-text);
  display: block;
  font-size: 0.875rem;
  padding: 0.875rem 1rem;
  text-decoration: none;
}

.dbx-pair:hover {
  border-color: var(--brand-border);
}

.dbx-pair > span:last-child {
  color: var(--brand-text-muted);
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 0.375rem;
}

.dbx-guide-foot {
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  margin: 2.25rem 0 0;
  padding-top: 1rem;
}

.dbx-enable {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-height) + 1.25rem);
}

.dbx-enable-head {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
}

.dbx-enable-head h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.dbx-enable-head .dbx-mono {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
}

.dbx-enable-body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem 1.125rem;
}

.dbx-enable-body > .notice,
.dbx-enable-body > .form-errors {
  margin: 0;
}

.dbx-fields,
.dbx-facts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.dbx-fields dt,
.dbx-facts dt {
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  margin-bottom: 0.3rem;
}

.dbx-fields dd,
.dbx-facts dd {
  margin: 0;
}

.dbx-field {
  align-items: center;
  border: 1px solid var(--brand-border-soft);
  border-radius: 7px;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 0.25rem 0.5rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
}

.dbx-field small {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.dbx-dot {
  background: var(--brand-text-faint);
  border-radius: 50%;
  height: 0.4375rem;
  width: 0.4375rem;
}

.dbx-dot.is-ok {
  background: var(--brand-accent);
}

.dbx-dot.is-warning {
  background: var(--brand-warning);
}

.dbx-field .dbx-mono {
  font-size: 0.75rem;
}

.dbx-facts > div {
  border-bottom: 1px solid var(--brand-divider);
  padding-bottom: 0.625rem;
}

.dbx-facts dd {
  font-size: 0.875rem;
}

.dbx-dependents {
  color: var(--brand-text-faint);
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  margin-top: 0.25rem;
  white-space: pre-line;
}

.dbx-enable-button {
  justify-content: center;
  width: 100%;
}

.dbx-enable-actions {
  display: flex;
  gap: 0.5rem;
}

.dbx-enable-note {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.dbx-enable-foot {
  border-top: 1px solid var(--brand-divider);
  padding: 0.875rem 1.125rem 1rem;
}

.dbx-enable-foot h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
}

.dbx-enable-foot ul {
  font-size: 0.8125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dbx-enable-foot li {
  padding: 0.15rem 0;
}

@media (max-width: 1100px) {
  .dbx-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dbx-enable {
    position: static;
  }
}

@media (max-width: 960px) {
  .dbx-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dbx-side {
    position: static;
  }

  .dbx-side-list {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
  }

  .dbx-side-list a {
    gap: 0.5rem;
    white-space: nowrap;
  }

  .dbx-side-note {
    display: none;
  }

  .dbx-ext {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .dbx-ext-category {
    display: none;
  }

  .dbx-ext-action {
    grid-column: 2;
    justify-self: start;
  }

  .dbx-table thead {
    display: none;
  }

  .dbx-table tr {
    border-bottom: 1px solid var(--brand-divider);
    display: grid;
    gap: 0.25rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.875rem 1.125rem;
  }

  .dbx-table td {
    border: 0;
    padding: 0;
  }

  .dbx-table td:first-child,
  .dbx-row-actions {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
  }

  .dbx-table td[data-label]:not(:first-child)::before {
    color: var(--brand-text-faint);
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
  }

  .dbx-text-button {
    margin: 0 0.875rem 0 0;
  }

  .dbx-header {
    grid-template-areas: "main" "actions" "tabs";
    grid-template-columns: minmax(0, 1fr);
  }

  .dbx-header-actions {
    padding: 0.75rem 0 0;
  }
}

/* SQL editor (database Query tab) ------------------------------------------ */

.dbx-tab-icon {
  font-family: var(--mono);
  font-size: 0.75rem;
  margin-right: 0.15rem;
}

.dbx-header-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.dbx-psql {
  position: relative;
}

.dbx-psql summary {
  list-style: none;
}

.dbx-psql summary::-webkit-details-marker {
  display: none;
}

.dbx-psql-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 10px;
  box-shadow: var(--brand-shadow);
  display: grid;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(34rem, 90vw);
  z-index: 30;
}

.dbx-psql-panel p {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  margin: 0;
}

.dbx-psql-panel code {
  background: var(--brand-canvas-strong);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.625rem;
}

.dbx-psql-panel button {
  justify-self: start;
}

/* Wider than the page column so three panes fit, but inset from the window with a gutter. */
.sqlx {
  --sqlx-line: 1.375rem;
  --sqlx-gutter: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  box-shadow: var(--brand-shadow-small);
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 17.5rem;
  height: max(36rem, calc(100vh - var(--header-height) - 4rem));
  margin: 0 calc(50% - 50vw + var(--sqlx-gutter)) 1rem;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.sqlx-muted {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin: 0;
}

.sqlx-count {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
}

.sqlx-link {
  background: none;
  border: 0;
  color: var(--brand-text-muted);
  cursor: pointer;
  font: inherit;
  min-height: 0;
  padding: 0;
}

.sqlx-link:hover {
  color: var(--brand-text);
}

.sqlx kbd {
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.625rem;
  margin-left: 0.25rem;
  opacity: 0.7;
  padding: 0 0.25rem;
}

/* Schema tree. */
.sqlx-schema {
  border-right: 1px solid var(--brand-divider);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sqlx-schema-pickers {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: 1fr 1fr;
  padding: 0.625rem 0.625rem 0.5rem;
}

.sqlx-schema-pickers select {
  font-size: 0.8125rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
}

.sqlx-filter {
  height: 2rem;
  margin: 0 0.625rem 0.5rem;
  width: auto;
}

.sqlx .sqlx-filter input[type="search"],
.sqlx .sqlx-filter input[type="search"]:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--brand-text);
  flex: 1;
  font: inherit;
  min-height: 0;
  min-width: 0;
  outline: none;
  padding: 0;
}

.sqlx-tree {
  flex: 1;
  font-size: 0.8125rem;
  min-height: 0;
  overflow: auto;
  padding: 0 0.375rem 0.75rem;
}

.sqlx-tree > .sqlx-muted {
  padding: 0.5rem;
}

.sqlx-group summary,
.sqlx-group-line {
  align-items: center;
  color: var(--brand-text-faint);
  cursor: pointer;
  display: flex;
  font-family: var(--mono);
  font-size: 0.6875rem;
  justify-content: space-between;
  letter-spacing: 0.06em;
  list-style: none;
  padding: 0.5rem 0.375rem 0.375rem;
}

.sqlx-group-line {
  cursor: default;
  gap: 1rem;
}

.sqlx-group-line .sqlx-count {
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqlx-group summary::-webkit-details-marker {
  display: none;
}

.sqlx-group summary::before {
  content: "▸";
  margin-right: 0.375rem;
}

.sqlx-group[open] summary::before {
  content: "▾";
}

.sqlx-group summary > span:first-child {
  flex: 1;
}

.sqlx-tree-row {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 5px;
  color: var(--brand-text-secondary);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.375rem;
  min-height: 0;
  padding: 0.2rem 0.375rem;
  text-align: left;
  width: 100%;
}

.sqlx-tree-row:hover,
.sqlx-table.is-open > .sqlx-tree-row {
  background: var(--brand-surface-muted);
  color: var(--brand-text);
}

.sqlx-tree-row .sqlx-count {
  margin-left: auto;
}

.sqlx-tree-toggle,
.sqlx-tree-name {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 0;
  padding: 0;
}

.sqlx-tree-toggle {
  color: var(--brand-text-faint);
  font-size: 0.625rem;
  width: 0.75rem;
}

.sqlx-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqlx-tree-icon {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.sqlx-column,
.sqlx-indent {
  padding-left: 2rem;
}

.sqlx-column .sqlx-count {
  font-size: 0.625rem;
}

.sqlx-badge {
  color: var(--brand-accent-strong);
  font-family: var(--mono);
  font-size: 0.5625rem;
  width: 1.125rem;
}

.sqlx-tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqlx-schema-foot {
  align-items: center;
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  display: flex;
  font-size: 0.6875rem;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}

/* Centre: tabs, toolbar, editor, results, status. */
.sqlx-center {
  display: grid;
  grid-template-rows: auto auto minmax(8rem, 1fr) minmax(10rem, 1.1fr) auto;
  min-height: 0;
  min-width: 0;
}

.sqlx-tabs {
  align-items: stretch;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  min-width: 0;
}

.sqlx-tablist {
  display: flex;
  min-width: 0;
  overflow-x: auto;
}

.sqlx-tab {
  align-items: center;
  border-right: 1px solid var(--brand-divider);
  color: var(--brand-text-muted);
  display: flex;
  font-family: var(--mono);
  font-size: 0.75rem;
  gap: 0.375rem;
  padding: 0 0.5rem 0 0.875rem;
  white-space: nowrap;
}

.sqlx-tab.is-active {
  background: var(--brand-surface);
  box-shadow: inset 0 2px 0 var(--brand-accent);
  color: var(--brand-text);
}

.sqlx-tab-name,
.sqlx-tab-close,
.sqlx-tab-add {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 0;
  padding: 0.625rem 0;
}

.sqlx-tab-close {
  color: var(--brand-text-faint);
  padding: 0 0.25rem;
}

.sqlx-dirty {
  color: var(--brand-warning-text);
  font-size: 0.625rem;
}

.sqlx-tab-add {
  color: var(--brand-text-muted);
  padding: 0 0.875rem;
}

.sqlx-mode {
  align-items: center;
  align-self: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 7px;
  color: var(--brand-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8125rem;
  gap: 0.375rem;
  margin-left: auto;
  margin-right: 0.625rem;
  min-height: 0;
  padding: 0.3rem 0.625rem;
}

.sqlx-mode.is-read-only {
  background: var(--brand-warning-soft);
  border-color: color-mix(in srgb, var(--brand-warning) 55%, transparent);
  color: var(--brand-warning-text);
}

.sqlx-mode.is-writing {
  background: var(--brand-danger-soft);
  border-color: color-mix(in srgb, var(--brand-danger) 55%, transparent);
  color: var(--brand-danger);
}

.sqlx-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
}

.sqlx-run,
.sqlx-tool {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 6px;
  color: var(--brand-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8125rem;
  gap: 0.25rem;
  min-height: 0;
  padding: 0.3rem 0.625rem;
  white-space: nowrap;
}

.sqlx-tool:hover {
  color: var(--brand-text);
}

.sqlx-run {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #08140d;
  font-weight: 600;
}

.sqlx-run:disabled,
.sqlx-tool:disabled {
  cursor: default;
  opacity: 0.55;
}

.sqlx-menu {
  position: relative;
}

.sqlx-menu summary {
  list-style: none;
}

.sqlx-menu summary::-webkit-details-marker {
  display: none;
}

.sqlx-menu-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  box-shadow: var(--brand-shadow);
  display: grid;
  left: 0;
  padding: 0.25rem;
  position: absolute;
  top: calc(100% + 0.25rem);
  width: 15rem;
  z-index: 25;
}

.sqlx-menu-panel button {
  background: none;
  border: 0;
  border-radius: 5px;
  color: var(--brand-text);
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  font: inherit;
  font-size: 0.8125rem;
  min-height: 0;
  padding: 0.4rem 0.5rem;
  text-align: left;
}

.sqlx-menu-panel button:hover {
  background: var(--brand-surface-muted);
}

.sqlx-menu-panel small {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
}

.sqlx-settings {
  align-items: center;
  color: var(--brand-text-faint);
  display: flex;
  font-size: 0.75rem;
  gap: 0.875rem;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 1440px) {
  .sqlx-wrap-note {
    display: none;
  }
}

.sqlx-settings label {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
}

.sqlx-settings select {
  background: transparent;
  border: 0;
  color: var(--brand-text);
  font: inherit;
  font-weight: 600;
  min-height: 0;
  padding: 0;
}

.sqlx-settings b {
  color: var(--brand-text);
}

.sqlx-editor {
  background: var(--brand-canvas-strong);
  display: flex;
  min-height: 0;
  position: relative;
}

.sqlx-gutter {
  color: var(--brand-text-faint);
  display: flex;
  flex-direction: column;
  flex: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: var(--sqlx-line);
  overflow: hidden;
  padding: 0.75rem 0.625rem 0.75rem 0.75rem;
  text-align: right;
  user-select: none;
  width: 3.25rem;
}

.sqlx-code {
  flex: 1;
  min-width: 0;
  position: relative;
}

.sqlx-highlight,
.sqlx-input {
  border: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
  inset: 0;
  letter-spacing: 0;
  line-height: var(--sqlx-line);
  margin: 0;
  overflow: auto;
  padding: 0.75rem 1rem 0.75rem 0.25rem;
  position: absolute;
  tab-size: 2;
  white-space: pre;
}

.sqlx-highlight {
  color: var(--brand-text);
  pointer-events: none;
  scrollbar-width: none;
}

.sqlx-highlight::-webkit-scrollbar {
  display: none;
}

.sqlx-input,
.sqlx-input:focus {
  background: transparent;
  box-shadow: none;
  caret-color: var(--brand-accent-strong);
  color: transparent;
  height: 100%;
  outline: none;
  resize: none;
  width: 100%;
}

.sqlx-input::selection {
  background: color-mix(in srgb, var(--brand-accent) 30%, transparent);
  color: transparent;
}

.sqlx-t-k {
  color: var(--brand-accent-strong);
}

.sqlx-t-s {
  color: #e0a56a;
}

.sqlx-t-m {
  color: #e7c27d;
}

.sqlx-t-c {
  color: var(--brand-text-faint);
  font-style: italic;
}

.sqlx-t-n,
.sqlx-t-p {
  color: #9ab8e8;
}

:root:not([data-theme="dark"]) .sqlx-t-s {
  color: #a4501a;
}

:root:not([data-theme="dark"]) .sqlx-t-m {
  color: #8a5a00;
}

:root:not([data-theme="dark"]) .sqlx-t-n,
:root:not([data-theme="dark"]) .sqlx-t-p {
  color: #2f5ea8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sqlx-t-s {
    color: #e0a56a;
  }

  :root:not([data-theme="light"]) .sqlx-t-m {
    color: #e7c27d;
  }

  :root:not([data-theme="light"]) .sqlx-t-n,
  :root:not([data-theme="light"]) .sqlx-t-p {
    color: #9ab8e8;
  }
}

.sqlx-error-mark {
  background: none;
  color: inherit;
  text-decoration: underline wavy var(--brand-danger);
  text-underline-offset: 3px;
}

.sqlx-complete {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  box-shadow: var(--brand-shadow);
  font-size: 0.8125rem;
  list-style: none;
  margin: 0;
  min-width: 18rem;
  overflow: hidden;
  padding: 0;
  position: absolute;
  z-index: 20;
}

.sqlx-complete li {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.625rem;
  padding: 0.35rem 0.625rem;
}

.sqlx-complete li.is-selected {
  background: var(--brand-surface-muted);
}

.sqlx-complete-kind {
  color: var(--brand-accent-strong);
  font-family: var(--mono);
  font-size: 0.625rem;
  width: 1.75rem;
}

.sqlx-complete-label {
  color: var(--brand-text-secondary);
  flex: 1;
  font-family: var(--mono);
}

.sqlx-complete-label b {
  color: var(--brand-text);
}

.sqlx-complete-detail {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.sqlx-complete .sqlx-complete-hint {
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  cursor: default;
  font-size: 0.6875rem;
}

.sqlx-results {
  border-top: 1px solid var(--brand-divider);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sqlx-results-bar {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  gap: 0.75rem;
  padding-right: 0.625rem;
}

.sqlx-results-tabs {
  display: flex;
}

.sqlx-results-tabs button,
.sqlx-side-tabs button {
  background: none;
  border: 0;
  border-right: 1px solid var(--brand-divider);
  color: var(--brand-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  min-height: 0;
  padding: 0.6rem 0.875rem;
}

.sqlx-results-tabs button[aria-selected="true"],
.sqlx-side-tabs button[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--brand-accent);
  color: var(--brand-text);
}

.sqlx-statement-nav {
  align-items: center;
  color: var(--brand-text-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.375rem;
}

.sqlx-statement-nav button {
  background: none;
  border: 1px solid var(--brand-border-soft);
  border-radius: 5px;
  color: inherit;
  cursor: pointer;
  min-height: 0;
  padding: 0 0.4rem;
}

.sqlx-statement-nav[hidden] {
  display: none;
}

.sqlx-export {
  display: flex;
  gap: 0.375rem;
  margin-left: auto;
}

.sqlx-pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.sqlx-empty {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  margin: 0;
  padding: 1rem;
}

.sqlx-grid-wrap {
  min-width: 100%;
}

.sqlx-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
}

.sqlx-grid th {
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-divider);
  border-right: 1px solid var(--brand-divider);
  position: sticky;
  text-align: left;
  top: 0;
  z-index: 1;
}

.sqlx-grid th button {
  background: none;
  border: 0;
  color: var(--brand-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  min-height: 0;
  padding: 0.45rem 0.75rem;
  text-align: inherit;
  white-space: nowrap;
  width: 100%;
}

.sqlx-grid th small {
  color: var(--brand-text-faint);
  font-size: 0.625rem;
}

.sqlx-grid td {
  border-bottom: 1px solid var(--brand-divider);
  border-right: 1px solid var(--brand-divider);
  color: var(--brand-text);
  max-width: 28rem;
  overflow: hidden;
  padding: 0.4rem 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqlx-grid .is-number {
  text-align: right;
}

.sqlx-grid .is-null {
  color: var(--brand-text-faint);
  font-style: italic;
}

.sqlx-grid .sqlx-rownum {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
  min-width: 2.5rem;
  text-align: right;
}

.sqlx-truncated {
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
}

.sqlx-plan {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0;
  padding: 0.875rem 1rem;
  white-space: pre;
}

.sqlx-messages {
  font-family: var(--mono);
  font-size: 0.8125rem;
  list-style: none;
  margin: 0;
  padding: 0.625rem 1rem;
}

.sqlx-messages li {
  border-bottom: 1px solid var(--brand-divider);
  padding: 0.35rem 0;
  white-space: pre-wrap;
}

.sqlx-messages .is-error {
  color: var(--brand-danger);
}

.sqlx-messages .is-notice {
  color: var(--brand-warning-text);
}

.sqlx-error {
  border-left: 3px solid var(--brand-danger);
  margin: 1rem;
  padding: 0.25rem 0 0.25rem 0.875rem;
}

.sqlx-error strong {
  color: var(--brand-danger);
  font-size: 0.8125rem;
}

.sqlx-error p {
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

.sqlx-chart-wrap {
  padding: 0.875rem 1rem;
}

.sqlx-chart {
  height: auto;
  max-height: 18rem;
  width: 100%;
}

.sqlx-chart rect {
  fill: var(--brand-accent);
}

.sqlx-chart text {
  fill: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.sqlx-status {
  align-items: center;
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 1.25rem;
  padding: 0.45rem 0.75rem;
}

.sqlx-status b {
  color: var(--brand-text);
}

.sqlx-state {
  align-items: center;
  display: inline-flex;
  font-family: var(--mono);
  gap: 0.375rem;
}

.sqlx-state::before {
  background: var(--brand-text-faint);
  border-radius: 50%;
  content: "";
  height: 0.4375rem;
  width: 0.4375rem;
}

.sqlx-state.is-done {
  color: var(--brand-accent-strong);
}

.sqlx-state.is-done::before {
  background: var(--brand-accent);
}

.sqlx-state.is-running::before {
  animation: dbx-spin 0.9s linear infinite;
  background: none;
  border: 2px solid var(--brand-border);
  border-top-color: var(--brand-accent);
  height: 0.5rem;
  width: 0.5rem;
}

.sqlx-state.is-error {
  color: var(--brand-danger);
}

.sqlx-state.is-error::before {
  background: var(--brand-danger);
}

.sqlx-status-end {
  margin-left: auto;
}

/* History and saved. */
.sqlx-side {
  border-left: 1px solid var(--brand-divider);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sqlx-side-tabs {
  border-bottom: 1px solid var(--brand-divider);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sqlx-side-list {
  flex: 1;
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow: auto;
  padding: 0.25rem 0.875rem;
}

.sqlx-side-list > .sqlx-muted {
  padding: 0.75rem 0;
}

.sqlx-side-item {
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  gap: 0.25rem;
}

.sqlx-side-item > button:first-child {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  flex: 1;
  font: inherit;
  gap: 0.125rem;
  /* A grid button centres content narrower than itself; pin it to one full-width column. */
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  min-height: 0;
  min-width: 0;
  padding: 0.625rem 0;
  text-align: left;
}

.sqlx-side-item strong {
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqlx-side-item code {
  color: var(--brand-text-muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqlx-side-item small {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
}

.sqlx-side-item.sqlx-item-error strong {
  color: var(--brand-danger);
}

.sqlx-side-item.sqlx-item-write strong {
  color: var(--brand-warning-text);
}

.sqlx-side-remove {
  align-self: center;
  background: none;
  border: 0;
  color: var(--brand-text-faint);
  cursor: pointer;
  min-height: 0;
  padding: 0.25rem;
}

.sqlx-side-foot {
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.75rem 0.875rem;
}

@media (max-width: 1200px) {
  .sqlx {
    grid-template-columns: 14rem minmax(0, 1fr);
  }

  .sqlx-side {
    border-left: 0;
    border-top: 1px solid var(--brand-divider);
    grid-column: 1 / -1;
    max-height: 20rem;
  }

  .sqlx {
    height: auto;
  }

  .sqlx-center {
    height: max(36rem, calc(100vh - var(--header-height) - 1rem));
  }
}

@media (max-width: 760px) {
  .sqlx {
    grid-template-columns: minmax(0, 1fr);
  }

  .sqlx-schema {
    border-right: 0;
    max-height: 16rem;
  }

  .sqlx-settings {
    margin-left: 0;
  }

  .sqlx-status span:not(.sqlx-state):not([data-sql-summary]) {
    display: none;
  }
}

/* Selected tabs and section links ------------------------------------------
   No frames, pills, underlines or bars: the current one is in full-strength text and ends in
   the logo's green cursor. Applies to every tab strip and section list in the console. */

.dbx-tabs a,
.detail-tabs button,
.settings-tabs a,
.sqlx-results-tabs button,
.sqlx-side-tabs button {
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

.dbx-tabs a[aria-current="page"],
.detail-tabs button.is-selected,
.detail-tabs button.is-selected:hover,
.settings-tabs a[aria-current="page"],
.sqlx-results-tabs button[aria-selected="true"],
.sqlx-side-tabs button[aria-selected="true"],
.sqlx-tab.is-active,
.dbx-side-list a[aria-current="page"],
.dbx-sort a[aria-current="true"] {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--brand-text);
  font-weight: 600;
}

.dbx-tabs a[aria-current="page"]::after,
.detail-tabs button.is-selected::after,
.settings-tabs a[aria-current="page"]::after,
.sqlx-results-tabs button[aria-selected="true"]::after,
.sqlx-side-tabs button[aria-selected="true"]::after,
.sqlx-tab.is-active .sqlx-tab-name::after,
.dbx-side-list a[aria-current="page"] > span:first-child::after,
.dbx-sort a[aria-current="true"]::after {
  color: var(--brand-accent);
  content: "_";
  font-weight: 700;
  margin-left: 0.05em;
}

/* The cursor sits right after the name; a count stays after the cursor. */
.dbx-tabs a,
.sqlx-results-tabs button,
.sqlx-side-tabs button {
  align-items: baseline;
  display: inline-flex;
  gap: 0;
  justify-content: center;
}

.dbx-tabs a[aria-current="page"]::after,
.sqlx-results-tabs button[aria-selected="true"]::after,
.sqlx-side-tabs button[aria-selected="true"]::after {
  order: 1;
}

.dbx-tab-count,
.sqlx-results-tabs .sqlx-count,
.sqlx-side-tabs .sqlx-count {
  margin-left: 0.4rem;
  order: 2;
}

.sqlx-tab,
.sqlx-tab-name {
  gap: 0;
}

.sqlx-tab-name {
  display: inline;
}

.sqlx-tab .sqlx-dirty,
.sqlx-tab .sqlx-tab-close {
  margin-left: 0.375rem;
}

/* SQL editor: New menu, table actions, table designer ---------------------- */

.sqlx-schema-tools {
  align-items: center;
  display: flex;
  gap: 0.375rem;
  margin: 0 0.625rem 0.5rem;
}

.sqlx-schema-tools .sqlx-filter {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.sqlx-new > summary {
  height: 2rem;
}

.sqlx-menu-right {
  left: auto;
  right: 0;
}

.sqlx-menu[open] > summary,
.sqlx-new[open] > summary {
  color: var(--brand-text);
}

.sqlx-tree-more {
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--brand-text-faint);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  min-height: 0;
  opacity: 0;
  padding: 0.125rem 0.25rem;
}

.sqlx-tree-row:hover .sqlx-tree-more,
.sqlx-tree-more:focus-visible,
.sqlx-tree-more[aria-expanded="true"] {
  opacity: 1;
}

.sqlx-tree-more:hover {
  background: var(--brand-surface-hover);
  color: var(--brand-text);
}

.sqlx-tree-row .sqlx-count + .sqlx-tree-more {
  margin-left: 0.125rem;
}

.sqlx-popup {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  box-shadow: var(--brand-shadow);
  display: grid;
  min-width: 13rem;
  padding: 0.25rem;
  position: absolute;
  z-index: 40;
}

.sqlx-popup[hidden] {
  display: none;
}

.sqlx-popup-title {
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  margin: 0 0 0.25rem;
  overflow: hidden;
  padding: 0.375rem 0.5rem 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqlx-popup button {
  background: none;
  border: 0;
  border-radius: 5px;
  color: var(--brand-text);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 0.8125rem;
  min-height: 0;
  padding: 0.4rem 0.5rem;
  text-align: left;
  width: 100%;
}

.sqlx-popup button:hover,
.sqlx-popup button:focus-visible {
  background: var(--brand-surface-muted);
  outline: none;
}

.sqlx-popup button.is-danger {
  color: var(--brand-danger);
}

.sqlx-retry {
  margin-top: 0.75rem;
}

.sqlx-dialog {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 14px;
  box-shadow: var(--brand-shadow);
  color: var(--brand-text);
  max-height: calc(100vh - 4rem);
  max-width: min(52rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}

.sqlx-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
}

.sqlx-dialog form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.375rem 1.5rem 1.25rem;
}

.sqlx-dialog h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.sqlx-dialog h2::after {
  color: var(--brand-accent);
  content: "_";
}

.sqlx-dialog-row {
  display: flex;
  gap: 0.75rem;
}

.sqlx-dialog-row label {
  color: var(--brand-text-muted);
  display: grid;
  font-size: 0.75rem;
  gap: 0.3rem;
}

.sqlx-dialog-row .sqlx-grow {
  flex: 1;
}

.sqlx-dialog input[type="text"],
.sqlx-dialog select {
  font-size: 0.8125rem;
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
}

.sqlx-designer {
  border-collapse: collapse;
  font-size: 0.8125rem;
  width: 100%;
}

.sqlx-designer th {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0 0.375rem 0.375rem 0;
  text-align: left;
}

.sqlx-designer td {
  padding: 0.2rem 0.375rem 0.2rem 0;
}

.sqlx-designer td:nth-child(3),
.sqlx-designer td:nth-child(4),
.sqlx-designer th:nth-child(3),
.sqlx-designer th:nth-child(4) {
  text-align: center;
}

.sqlx-designer input[type="text"],
.sqlx-designer select {
  font-family: var(--mono);
  width: 100%;
}

.sqlx-designer th:nth-child(1) {
  width: 26%;
}

.sqlx-designer th:nth-child(2) {
  width: 36%;
}

.sqlx-dialog input[type="checkbox"] {
  accent-color: var(--brand-accent);
  height: 1rem;
  margin: 0;
  min-height: 0;
  width: 1rem;
}

.sqlx-dialog-tools {
  display: flex;
  gap: 0.5rem;
}

.sqlx-dialog-label {
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  margin: 0 0 -0.5rem;
}

.sqlx-designer-sql {
  max-height: 12rem;
  overflow: auto;
}

.sqlx-dialog footer {
  align-items: center;
  border-top: 1px solid var(--brand-divider);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.875rem;
}

.sqlx-dialog footer .sqlx-muted {
  margin-right: auto;
}

/* Tabs with icons: space the icon, not the cursor. */
.detail-tabs button,
.settings-tabs a {
  gap: 0;
}

.detail-tabs button .icon,
.settings-tabs a .icon {
  margin-right: 0.45rem;
}

/* Usage (October 2026 design) --------------------------------------------- */

.ux-header {
  align-items: flex-end;
}

.ux-header .page-description {
  max-width: 44rem;
}

.ux-periods {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.ux-period {
  align-items: center;
  border: 1px solid var(--brand-border-soft);
  border-radius: 7px;
  color: var(--brand-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.25rem;
  list-style: none;
  min-height: 2rem;
  padding: 0 0.75rem;
  text-decoration: none;
}

.ux-period::-webkit-details-marker {
  display: none;
}

.ux-period:hover {
  color: var(--brand-text);
}

.ux-period.is-current {
  border-color: var(--brand-border);
  color: var(--brand-text);
  font-weight: 600;
}

.ux-month .sqlx-menu-panel a {
  border-radius: 5px;
  color: var(--brand-text);
  display: block;
  font-size: 0.8125rem;
  padding: 0.4rem 0.5rem;
  text-decoration: none;
}

.ux-month .sqlx-menu-panel a:hover {
  background: var(--brand-surface-muted);
}

.ux-month .sqlx-menu-panel a[aria-current="true"] {
  font-weight: 600;
}

.ux-month .sqlx-menu-panel a[aria-current="true"]::after {
  color: var(--brand-accent);
  content: "_";
}

.ux-export {
  margin-left: 0.25rem;
}

.ux-tiles {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.ux-tile {
  border-left: 1px solid var(--brand-divider);
  padding: 1rem 1.25rem 1.125rem;
}

.ux-tile:first-child {
  border-left: 0;
}

.ux-tile-label {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.ux-tile-value {
  align-items: baseline;
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 0 0.375rem;
}

.ux-tile-value strong {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ux-tile-value span {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
}

.ux-tile-value span.is-tight {
  margin-left: -0.2rem;
}

.ux-tile-detail {
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
}

.ux-key {
  border-radius: 2px;
  display: inline-block;
  height: 0.5625rem;
  margin: 0 0.3rem 0 0.4rem;
  vertical-align: baseline;
  width: 0.5625rem;
}

.ux-tile-detail .ux-key:first-child {
  margin-left: 0;
}

.ux-key.is-out {
  background: var(--ux-out);
}

.ux-key.is-in {
  background: var(--ux-in);
}

.ux-warn {
  color: var(--brand-warning-text);
}

.ux-charts {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1.25rem;
}

.ux-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-divider);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.ux-panel-head {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
}

.ux-panel-head h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.ux-panel-head h2 span {
  color: var(--brand-text-faint);
  font-weight: 400;
  margin-left: 0.375rem;
}

.ux-legend {
  color: var(--brand-text-secondary);
  display: flex;
  font-size: 0.75rem;
  gap: 0.875rem;
}

.ux-panel-link {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
}

.ux-panel-link:hover {
  color: var(--brand-text);
}

.ux-chart-wrap {
  padding: 1rem 1rem 0.25rem;
}

.ux-panel-foot {
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  line-height: 1.55;
  margin: auto 0 0;
  padding: 0.5rem 1.125rem 1rem;
}

/* Charts. Colours come from the theme; hover details are CSS only. */
:root {
  --ux-out: #2f9e5d;
  --ux-in: #4a7fd4;
  --ux-line: #2f9e5d;
}

:root[data-theme="dark"] {
  --ux-out: #4ebe7d;
  --ux-in: #5b8def;
  --ux-line: #4ebe7d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ux-out: #4ebe7d;
    --ux-in: #5b8def;
    --ux-line: #4ebe7d;
  }
}

.ux-chart {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.ux-chart .ux-grid {
  stroke: var(--brand-divider);
  stroke-width: 1;
}

.ux-chart .ux-axis {
  fill: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 9.5px;
}

.ux-chart .ux-out {
  fill: var(--ux-out);
}

.ux-chart .ux-in {
  fill: var(--ux-in);
}

.ux-chart .ux-hit {
  fill: transparent;
}

.ux-chart .ux-slot:hover .ux-out,
.ux-chart .ux-slot:hover .ux-in {
  opacity: 0.85;
}

.ux-chart .ux-burst {
  fill: color-mix(in srgb, var(--brand-warning) 9%, transparent);
}

.ux-chart .ux-guarantee,
.ux-chart .ux-ceiling {
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.ux-chart .ux-guarantee {
  stroke: var(--ux-out);
}

.ux-chart .ux-ceiling {
  stroke: var(--brand-text-faint);
}

.ux-chart .ux-line-label {
  font-family: var(--mono);
  font-size: 9.5px;
}

.ux-chart .ux-guarantee-label {
  fill: var(--brand-accent-strong);
}

.ux-chart .ux-ceiling-label {
  fill: var(--brand-warning-text);
}

.ux-chart .ux-line {
  fill: none;
  stroke: var(--ux-line);
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.ux-chart .ux-area {
  fill: color-mix(in srgb, var(--ux-line) 12%, transparent);
}

.ux-chart .ux-point circle {
  fill: var(--ux-line);
  opacity: 0;
  stroke: var(--brand-surface);
  stroke-width: 2;
}

.ux-chart .ux-point:hover circle {
  opacity: 1;
}

.ux-chart .ux-tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
}

.ux-chart .ux-slot:hover .ux-tip,
.ux-chart .ux-slot:focus .ux-tip,
.ux-chart .ux-point:hover .ux-tip {
  opacity: 1;
}

.ux-chart .ux-tip rect {
  fill: var(--brand-canvas-strong);
  stroke: var(--brand-border-soft);
}

.ux-chart .ux-tip text {
  fill: var(--brand-text-muted);
  font-family: var(--mono);
  font-size: 9.5px;
}

.ux-chart .ux-tip .ux-tip-strong {
  fill: var(--brand-text);
}

.ux-resources {
  margin-bottom: 1.25rem;
}

.ux-table td {
  vertical-align: middle;
}

.ux-table tr.is-stopped td {
  color: var(--brand-text-muted);
}

.ux-disk-cell {
  min-width: 11rem;
}

.ux-disk-line {
  color: var(--brand-text-muted);
  display: flex;
  font-size: 0.6875rem;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.ux-meter {
  background: var(--brand-surface-muted);
  border-radius: 2px;
  display: block;
  height: 0.3125rem;
  overflow: hidden;
}

.ux-meter i {
  background: var(--ux-out);
  border-radius: 2px;
  display: block;
  height: 100%;
}

.ux-meter.is-warning i {
  background: var(--brand-warning);
}

.ux-meter .ux-w0 {
  width: 0%;
}

.ux-meter .ux-w5 {
  width: 5%;
}

.ux-meter .ux-w10 {
  width: 10%;
}

.ux-meter .ux-w15 {
  width: 15%;
}

.ux-meter .ux-w20 {
  width: 20%;
}

.ux-meter .ux-w25 {
  width: 25%;
}

.ux-meter .ux-w30 {
  width: 30%;
}

.ux-meter .ux-w35 {
  width: 35%;
}

.ux-meter .ux-w40 {
  width: 40%;
}

.ux-meter .ux-w45 {
  width: 45%;
}

.ux-meter .ux-w50 {
  width: 50%;
}

.ux-meter .ux-w55 {
  width: 55%;
}

.ux-meter .ux-w60 {
  width: 60%;
}

.ux-meter .ux-w65 {
  width: 65%;
}

.ux-meter .ux-w70 {
  width: 70%;
}

.ux-meter .ux-w75 {
  width: 75%;
}

.ux-meter .ux-w80 {
  width: 80%;
}

.ux-meter .ux-w85 {
  width: 85%;
}

.ux-meter .ux-w90 {
  width: 90%;
}

.ux-meter .ux-w95 {
  width: 95%;
}

.ux-meter .ux-w100 {
  width: 100%;
}

.ux-note-cell {
  color: var(--brand-text-muted);
  font-size: 0.75rem;
  max-width: 14rem;
}

.ux-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ux-cards .vms-note strong {
  color: var(--brand-text);
}

@media (max-width: 1100px) {
  .ux-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-tile:nth-child(3) {
    border-left: 0;
  }

  .ux-tile:nth-child(n + 3) {
    border-top: 1px solid var(--brand-divider);
  }

  .ux-charts,
  .ux-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .ux-disk-cell {
    min-width: 0;
  }

  .ux-note-cell:empty {
    display: none;
  }
}

@media (max-width: 760px) {
  .ux-header {
    align-items: flex-start;
  }

  .ux-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .ux-tile {
    border-left: 0;
    border-top: 1px solid var(--brand-divider);
  }

  .ux-tile:first-child {
    border-top: 0;
  }
}

/* Settings pages -------------------------------------------------------------------------
   A sidebar (account, workspace, who is signed in) beside a column of panels. The current
   page in the sidebar reads like every other selected tab: full-strength text and the green
   cursor, no frame or bar. */

.set-layout {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 12.5rem minmax(0, 1fr);
}

.set-nav {
  font-size: 0.875rem;
  position: sticky;
  top: 5rem;
}

.set-nav ul {
  display: grid;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.set-nav-title,
.set-nav-group {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  padding: 0 0.75rem;
}

.set-nav-title {
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.set-nav-group {
  margin-top: 1.25rem;
}

.set-nav-title + .set-nav-group {
  margin-top: 0;
}

.set-nav a {
  border-radius: 7px;
  color: var(--brand-text-secondary);
  display: block;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
}

.set-nav a:hover {
  background: var(--brand-surface-hover);
  color: var(--brand-text);
}

.set-nav a[aria-current="page"] {
  background: transparent;
  color: var(--brand-text);
  font-weight: 600;
}

.set-nav a[aria-current="page"]::after {
  color: var(--brand-accent);
  content: "_";
  font-weight: 700;
  margin-left: 0.05em;
}

.set-nav-who {
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 1.5rem 0.75rem 0;
  padding-top: 1rem;
}

.set-nav-who strong {
  color: var(--brand-text);
  display: block;
  font-weight: 600;
}

.set-nav-who span {
  display: block;
}

.set-main {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.set-main > .page-header {
  margin-bottom: 0.25rem;
}

.set-flash {
  margin: 0;
}

.set-count {
  color: var(--brand-text-faint);
  font-weight: 400;
  margin-left: 0.35rem;
}

.set-row {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: grid;
  font-size: 0.84375rem;
  gap: 0.75rem 1.5rem;
  grid-template-columns: 13.75rem minmax(0, 1fr) auto;
  padding: 1rem 1.125rem;
}

.set-row:last-child {
  border-bottom: 0;
}

.set-row-label {
  color: var(--brand-text-secondary);
}

.set-row-label b {
  color: var(--brand-text);
  display: block;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.set-row-value {
  color: var(--brand-text);
  min-width: 0;
}

.set-row-value small,
.set-person small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

.set-row-value small.set-inline {
  display: inline;
  margin-left: 0.5rem;
}

.set-strong {
  color: var(--brand-text);
}

.set-muted {
  color: var(--brand-text-secondary);
  line-height: 1.55;
}

.set-dots {
  letter-spacing: 0.1em;
}

.set-person {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.set-avatar {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 50%;
  color: var(--brand-text);
  display: inline-flex;
  flex: none;
  font-size: 0.625rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.set-avatar.is-pending {
  background: transparent;
  border: 1px dashed var(--brand-border);
  color: var(--brand-text-muted);
}

.set-accent {
  color: var(--brand-accent-strong) !important;
}

/* An "Edit" that opens its form in place, under the row. */
.set-edit {
  justify-self: end;
}

.set-edit > summary {
  cursor: pointer;
  list-style: none;
}

.set-edit > summary::-webkit-details-marker {
  display: none;
}

.set-edit[open] {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.set-edit[open] > summary {
  display: none;
}

.set-edit-form {
  background: var(--brand-surface-muted);
  border-radius: 10px;
  display: grid;
  gap: 0.75rem;
  max-width: 28rem;
  padding: 1rem;
  text-align: left;
  white-space: normal;
}

.set-edit-form p {
  color: var(--brand-text-secondary);
  font-size: 0.8125rem;
  margin: 0;
}

.set-edit-form label,
.set-add-form label,
.set-invite-form label {
  display: grid;
  font-size: 0.8125rem;
  gap: 0.35rem;
}

.set-edit-form label > span,
.set-add-form label > span,
.set-invite-form label > span {
  color: var(--brand-text-secondary);
}

.set-edit-form button,
.set-add-form button {
  justify-self: start;
}

.dbx-row-actions .set-edit {
  display: inline-block;
}

.dbx-row-actions .set-edit[open] {
  display: block;
  margin-top: 0.5rem;
}

.dbx-row-actions .set-edit-form {
  margin-left: auto;
}

.set-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.set-choice,
.set-choice:hover {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 7px;
  color: var(--brand-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  min-height: 1.875rem;
  padding: 0 0.75rem;
}

.set-choice:hover {
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.set-choice[aria-pressed="true"] {
  border-color: var(--brand-border);
  color: var(--brand-text);
  font-weight: 600;
}

.set-choice[aria-pressed="true"]::after {
  color: var(--brand-accent);
  content: "_";
  font-weight: 700;
}

.set-select {
  background: var(--brand-canvas);
  border: 1px solid var(--brand-border-soft);
  border-radius: 7px;
  color: var(--brand-text);
  font: inherit;
  font-size: 0.8125rem;
  min-height: 2rem;
  padding: 0 0.5rem;
}

.set-inline-form {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
}

.set-inline-form .dbx-text-button {
  margin-left: 0.5rem;
}

.dbx-text-button.is-danger {
  color: var(--brand-danger);
}

/* A toggle that submits its form. */
.set-switch,
.set-switch:hover {
  background: var(--brand-border);
  border: 0;
  border-radius: 999px;
  height: 1.25rem;
  min-height: 0;
  padding: 0;
  position: relative;
  width: 2.25rem;
}

.set-switch span {
  background: var(--brand-surface);
  border-radius: 50%;
  height: 0.875rem;
  left: 0.1875rem;
  position: absolute;
  top: 0.1875rem;
  transition: transform 0.15s ease;
  width: 0.875rem;
}

.set-switch[aria-checked="true"] {
  background: var(--brand-accent);
}

.set-switch[aria-checked="true"] span {
  transform: translateX(1rem);
}

.set-table td:first-child {
  max-width: none;
}

.set-table td small {
  max-width: 18rem;
}

.set-invited td {
  color: var(--brand-text-muted);
}

.set-fingerprint {
  max-width: 20rem;
  white-space: nowrap;
}

.set-fingerprint code {
  color: var(--brand-text);
  display: inline-block;
  font-size: 0.75rem;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.set-fingerprint .set-copy {
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.set-split {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding: 1.125rem;
}

.set-add-form {
  display: grid;
  gap: 0.875rem;
}

.set-add-form textarea {
  font-family: var(--mono);
  font-size: 0.8125rem;
  resize: vertical;
}

.set-hint {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin: -0.25rem 0 0;
}

.set-actions {
  display: flex;
  gap: 0.5rem;
}

.set-aside {
  border: 1px solid var(--brand-divider);
  border-radius: 10px;
  font-size: 0.8125rem;
  padding: 1rem;
}

.set-aside h3 {
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

.set-aside p {
  color: var(--brand-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Commands stay dark on both themes, like every terminal block in the console. */
.set-terminal {
  background: #141412;
  border: 1px solid #2a2a26;
  border-radius: 8px;
  color: #f0eee6;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  margin: 0 0 0.875rem;
  overflow-x: auto;
  padding: 0.625rem 0.875rem;
}

.set-terminal span {
  color: #73ce95;
}

.set-invite-form {
  align-items: end;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  padding: 1.125rem;
}

.set-grid {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.set-roles th[scope="row"] {
  color: var(--brand-text);
  font-family: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

.set-roles td,
.set-roles thead th:not(:first-child) {
  text-align: left;
  white-space: nowrap;
}

.set-no {
  color: var(--brand-text-faint);
}

.set-plain-foot {
  display: block;
}

.set-row-compact {
  gap: 0.5rem 1rem;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
}

.set-checks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.set-checks li {
  border-bottom: 1px solid var(--brand-divider);
}

.set-check {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
}

.set-check b {
  display: block;
  font-size: 0.84375rem;
  font-weight: 600;
}

.set-check small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

.set-check input {
  accent-color: var(--brand-accent);
  flex: none;
  height: 1rem;
  margin: 0;
  width: 1rem;
}

.set-form-foot {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
}

.set-form-foot p {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin: 0;
}

.set-events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.set-events li {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: grid;
  font-size: 0.84375rem;
  gap: 1rem;
  grid-template-columns: 13.75rem minmax(0, 1fr) auto;
  padding: 0.875rem 1.125rem;
}

.set-events li:last-child {
  border-bottom: 0;
}

.set-events small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

.set-event-time {
  color: var(--brand-text);
}

.set-panel-copy {
  color: var(--brand-text-secondary);
  font-size: 0.8125rem;
  margin: 0;
  padding: 1rem 1.125rem 0;
}

.set-code-list {
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 1rem 1.125rem 1.125rem;
}

.set-code-list code {
  font-size: 0.875rem;
}

.set-danger {
  border-color: color-mix(in srgb, var(--brand-danger) 35%, var(--brand-divider));
}

.set-danger .dbx-panel-head {
  border-bottom-color: color-mix(in srgb, var(--brand-danger) 35%, var(--brand-divider));
}

.set-danger h2 {
  color: var(--brand-danger);
}

@media (max-width: 1000px) {
  .set-grid,
  .set-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .set-layout {
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
  }

  /* The sidebar becomes one scrolling row of links. */
  .set-nav {
    position: static;
  }

  .set-nav-title,
  .set-nav-group,
  .set-nav-who {
    display: none;
  }

  .set-nav {
    display: flex;
    gap: 0.25rem;
    margin: 0 -1rem;
    overflow-x: auto;
    padding: 0 1rem;
    scrollbar-width: none;
  }

  .set-nav ul {
    display: flex;
    gap: 0.25rem;
  }

  .set-nav a {
    white-space: nowrap;
  }

  .set-row,
  .set-row-compact,
  .set-events li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .set-row-label {
    grid-column: 1 / -1;
  }

  .set-events li {
    gap: 0.25rem 1rem;
  }

  .set-event-time {
    grid-column: 1 / -1;
    color: var(--brand-text-faint);
    font-size: 0.75rem;
  }

  .set-invite-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .set-form-foot {
    align-items: stretch;
    flex-direction: column;
  }
}

/* The role table stays a table on narrow screens: its columns are the point. */
@media (max-width: 960px) {
  .set-roles thead {
    display: table-header-group;
  }

  .set-roles tr {
    display: table-row;
    padding: 0;
  }

  .set-roles th,
  .set-roles td {
    border-bottom: 1px solid var(--brand-divider);
    display: table-cell;
    padding: 0.625rem 0.5rem;
  }

  .set-roles td[data-label]::before {
    content: none;
  }

}

@media (max-width: 560px) {
  .set-roles .vms-state {
    font-size: 0;
  }
}

/* Billing ------------------------------------------------------------------------------- */

.bil-tiles {
  margin-bottom: 0;
}

.bil-credit {
  color: var(--brand-accent-strong);
}

.bil-alert {
  font-size: 1.375rem !important;
}

.bil-alert-edit {
  display: block;
}

.bil-alert-edit > summary {
  margin-top: 0.5rem;
}

.bil-alert-edit[open] > summary {
  display: none;
}

.bil-alert-edit .set-edit-form {
  margin-top: 0.5rem;
  padding: 0.75rem;
}

.bil-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.bil-grid > .set-main {
  gap: 1.25rem;
}

.dbx-panel-link,
.bil-portal {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}

.dbx-panel-link:hover,
.bil-portal:hover {
  color: var(--brand-text);
}

.bil-portal {
  margin-left: 0;
}

.bil-plan {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.bil-right {
  text-align: right !important;
}

.bil-total {
  align-items: center;
  justify-content: space-between;
}

.bil-total strong {
  color: var(--brand-text);
  font-size: 0.8125rem;
}

.bil-details-edit {
  display: block;
}

.bil-details-edit > summary {
  border-top: 1px solid var(--brand-divider);
  cursor: pointer;
  font-size: 0.8125rem;
}

.bil-details-edit[open] {
  padding: 0 1.125rem 1.125rem;
}

.bil-details-edit[open] > summary {
  display: none;
}

.bil-details-form {
  max-width: none;
}

.bil-pair {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bil-credit-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bil-onboard {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.125rem;
}

.bil-onboard h2 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.bil-onboard p {
  color: var(--brand-text-secondary);
  font-size: 0.8125rem;
  margin: 0;
  max-width: 40rem;
}

@media (max-width: 1100px) {
  .bil-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bil-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .bil-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .bil-onboard {
    align-items: stretch;
    flex-direction: column;
  }
}

.set-name {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.set-name .dbx-tag {
  font-size: 0.625rem;
}

.set-table th {
  white-space: nowrap;
}

.set-roles th[scope="row"] {
  width: 38%;
}

.bil-more td {
  color: var(--brand-text-faint);
}

.set-check b {
  color: var(--brand-text);
}

.set-choice {
  gap: 0;
}

/* Activity ------------------------------------------------------------------------------- */

.act-header {
  align-items: flex-end;
}

.act-header-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.act-times,
.act-times:hover {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  color: var(--brand-text-secondary);
  font-size: 0.84375rem;
  font-weight: 400;
  min-height: 2.25rem;
  padding: 0 0.75rem;
}

.act-times strong {
  color: var(--brand-text);
  margin-left: 0.25rem;
}

.act-tiles {
  margin-bottom: 1.25rem;
}

.act-tiles .act-name {
  font-size: 1.375rem !important;
}

.act-warn {
  color: var(--brand-warning-text);
}

.act-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
}

.act-search {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  display: flex;
  flex: 1 1 16rem;
  gap: 0.5rem;
  max-width: 17.5rem;
  min-height: 2.125rem;
  padding: 0 0.625rem;
}

.act-search .icon {
  color: var(--brand-text-faint);
  height: 0.875rem;
  width: 0.875rem;
}

.act-search input,
.act-search input:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--brand-text);
  flex: 1;
  font: inherit;
  font-size: 0.84375rem;
  min-height: 0;
  min-width: 0;
  outline: none;
  padding: 0;
}

.act-search:focus-within {
  border-color: var(--brand-border);
}

.act-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.act-chips-who {
  border-left: 1px solid var(--brand-divider);
  padding-left: 0.75rem;
}

.act-chips-period {
  margin-left: auto;
}

.act-chip,
.act-chips summary.act-chip {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 7px;
  color: var(--brand-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.84375rem;
  gap: 0.35rem;
  list-style: none;
  min-height: 1.875rem;
  padding: 0 0.625rem;
  text-decoration: none;
  white-space: nowrap;
}

.act-chips summary.act-chip::-webkit-details-marker {
  display: none;
}

.act-chip:hover {
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.act-chip[aria-current="true"] {
  border-color: var(--brand-border);
  color: var(--brand-text);
  font-weight: 600;
}

.act-chip[aria-current="true"]::after {
  color: var(--brand-accent);
  content: "_";
  font-weight: 700;
  margin-left: -0.3rem;
}

.act-custom-form {
  display: grid;
  gap: 0.625rem;
  min-width: 14rem;
  padding: 0.75rem;
  right: 0;
}

.act-custom-form label {
  display: grid;
  font-size: 0.8125rem;
  gap: 0.25rem;
}

.act-results-head {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  display: flex;
  font-size: 0.75rem;
  justify-content: space-between;
  padding: 0.75rem 1.125rem;
}

.act-live {
  color: var(--brand-accent-strong);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.act-live .vms-state {
  display: inline-flex;
}

.act-truncated {
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-warning-text);
  font-size: 0.8125rem;
  margin: 0;
  padding: 0.625rem 1.125rem;
}

.act-day {
  background: var(--brand-surface-muted);
  border-bottom: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  display: flex;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  justify-content: space-between;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0.625rem 1.125rem;
  text-transform: uppercase;
}

.act-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.act-list > li {
  border-bottom: 1px solid var(--brand-divider);
}

.act-row > summary {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1.75rem minmax(0, 1fr) 11.5rem 10rem 9rem 1rem;
  list-style: none;
  padding: 0.875rem 1.125rem;
}

.act-row > summary::-webkit-details-marker {
  display: none;
}

.act-row > summary:hover {
  background: var(--brand-surface-hover);
}

.act-row.is-single > summary {
  cursor: default;
}

.act-icon {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 7px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.act-icon .icon,
.act-icon svg {
  height: 0.875rem;
  width: 0.875rem;
}

.act-icon.is-warning {
  background: var(--brand-warning-soft);
  color: var(--brand-warning-text);
}

.act-icon.is-danger {
  background: var(--brand-danger-soft);
  color: var(--brand-danger);
}

.act-what strong {
  color: var(--brand-text);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.act-what strong a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brand-border);
  text-underline-offset: 3px;
}

.act-what strong s {
  color: var(--brand-text-faint);
}

.act-what small {
  color: var(--brand-text-muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 0.125rem;
}

.act-who {
  align-items: center;
  color: var(--brand-text-secondary);
  display: flex;
  font-size: 0.84375rem;
  gap: 0.5rem;
  min-width: 0;
}

.act-avatar {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 50%;
  color: var(--brand-text);
  display: inline-flex;
  flex: none;
  font-size: 0.5625rem;
  font-weight: 700;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

.act-avatar.is-fresh {
  background: var(--brand-accent-soft);
  color: var(--brand-accent-strong);
}

.act-avatar.is-unknown {
  background: transparent;
  border: 1px dashed var(--brand-border);
}

.act-when {
  color: var(--brand-text);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.act-when small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.6875rem;
}

.act-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-start;
}

.dbx-tag.is-danger {
  background: var(--brand-danger-soft);
  border-color: transparent;
  color: var(--brand-danger);
}

.act-chevron {
  color: var(--brand-text-faint);
  transition: transform 0.15s ease;
}

.act-row[open] .act-chevron {
  transform: rotate(90deg);
}

.act-row.is-single .act-chevron {
  visibility: hidden;
}

.act-detail {
  border: 1px solid var(--brand-divider);
  border-radius: 10px;
  margin: 0 1.125rem 1rem 3.75rem;
}

.act-steps {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem 0.5rem;
}

.act-steps li {
  display: grid;
  font-size: 0.8125rem;
  gap: 1rem;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
  padding: 0.3rem 0;
}

.act-step-time {
  color: var(--brand-text);
  padding-left: 1.1rem;
  position: relative;
}

.act-step-time::before {
  background: var(--brand-accent);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  top: 0.45em;
  width: 7px;
}

.act-steps li.is-failed .act-step-time::before {
  background: var(--brand-danger);
}

.act-step-detail {
  color: var(--brand-text-secondary);
}

.act-step-took {
  color: var(--brand-text-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.act-detail-foot {
  border-top: 1px solid var(--brand-divider);
  color: var(--brand-text-faint);
  display: flex;
  font-size: 0.6875rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.act-detail-foot span:first-child {
  font-family: var(--mono);
}

.act-detail-foot a {
  color: var(--brand-text-muted);
}

.act-older {
  color: var(--brand-text-muted);
  display: block;
  font-size: 0.8125rem;
  padding: 0.75rem;
  text-align: center;
  text-decoration: none;
}

.act-older:hover {
  color: var(--brand-text);
}

@media (max-width: 1100px) {
  .act-chips-period {
    margin-left: 0;
  }

  .act-row > summary {
    grid-template-columns: 1.75rem minmax(0, 1fr) 9rem 1rem;
  }

  .act-who {
    grid-column: 2;
    grid-row: 2;
  }

  .act-when {
    grid-column: 3;
    grid-row: 1;
  }

  .act-tags {
    grid-column: 3;
    grid-row: 2;
  }

  .act-chevron {
    grid-column: 4;
    grid-row: 1;
  }
}

@media (max-width: 640px) {
  .act-header {
    align-items: stretch;
    flex-direction: column;
  }

  .act-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .act-search {
    max-width: none;
  }

  .act-chips-who {
    border-left: 0;
    padding-left: 0;
  }

  .act-row > summary {
    gap: 0.25rem 0.75rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) 1rem;
  }

  .act-who,
  .act-when,
  .act-tags {
    grid-column: 2;
    grid-row: auto;
  }

  .act-when small {
    display: none;
  }

  .act-chevron {
    grid-column: 3;
    grid-row: 1;
  }

  .act-detail {
    margin-left: 1.125rem;
  }

  .act-steps li {
    gap: 0.25rem;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .act-step-detail {
    grid-column: 1;
    padding-left: 1.1rem;
  }
}

.act-search input[type="search"],
.act-search input[type="search"]:focus {
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  box-shadow: none !important;
  height: auto;
}

/* Select boxes (Tom Select) ---------------------------------------------- */
/* app.js draws every console <select> with Tom Select; these rules make the control match the
   native fields and mark the chosen option with the logo's cursor, as the tabs do. */

.ts-wrapper {
  position: relative;
  width: 100%;
}

.ts-wrapper .ts-control,
.ts-wrapper.single.input-active .ts-control {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-control-radius);
  color: var(--brand-text);
  cursor: pointer;
  flex-wrap: nowrap;
  font: inherit;
  font-weight: 400;
  min-height: 2.7rem;
  padding: 0.5rem 2.1rem 0.5rem 0.65rem;
}

.ts-wrapper .ts-control > .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chevron, drawn with borders so it follows the text colour. */
.ts-wrapper .ts-control::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: var(--brand-text-muted);
  content: "";
  height: 0.42rem;
  margin-top: -0.3rem;
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: rotate(45deg);
  transition: transform 150ms ease;
  width: 0.42rem;
}

.ts-wrapper.dropdown-active .ts-control::after {
  margin-top: -0.05rem;
  transform: rotate(225deg);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.ts-wrapper.disabled .ts-control {
  color: var(--brand-text-faint);
  opacity: 0.7;
}

/* Tom Select marks an empty required select invalid from the start; only show it once the
   browser has refused to submit the form (app.js adds `was-invalid`). */
.ts-wrapper.was-invalid .ts-control {
  border-color: var(--brand-danger);
}

.ts-dropdown {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-control-radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
  color: var(--brand-text);
  /* The dropdown sits inside its <label>; options keep body weight. */
  font-weight: 400;
  margin-top: 0.3rem;
  overflow: hidden;
  z-index: 40;
}

.ts-dropdown .ts-dropdown-content {
  max-height: 18rem;
  padding: 0.3rem;
}

.ts-dropdown .option,
.ts-dropdown .no-results {
  border-radius: calc(var(--brand-control-radius) - 2px);
  font-size: 0.875rem;
  padding: 0.5rem 0.6rem;
}

.ts-dropdown .no-results {
  color: var(--brand-text-faint);
}

.ts-dropdown .option.active {
  background: var(--brand-surface-muted);
  color: var(--brand-text);
}

.ts-dropdown .option.selected {
  font-weight: 600;
}

.ts-dropdown .option.selected::after {
  color: var(--brand-accent);
  content: "_";
  font-weight: 700;
  margin-left: 0.1em;
}

.ts-dropdown .option.disabled,
.ts-dropdown .option[aria-disabled="true"] {
  color: var(--brand-text-faint);
  cursor: default;
}

.ts-dropdown [data-selectable] .highlight {
  background: none;
  color: var(--brand-accent-strong);
  font-weight: 600;
}

/* While the search box is open the control shows the current choice, dimmed. */
.ts-wrapper .ts-control .items-placeholder {
  background: none;
  color: var(--brand-text-muted);
}

.ts-dropdown .dropdown-input-wrap {
  border-bottom: 1px solid var(--brand-divider);
  padding: 0.4rem;
}

.ts-dropdown .dropdown-input {
  font-size: 0.875rem;
  min-height: 2.2rem !important;
  padding: 0.35rem 0.6rem;
  width: 100%;
}

/* Compact selects (settings role pickers) keep their size. The wrapper copies the select's
   classes, so the box styles move from the wrapper to its control. */
.ts-wrapper.set-select {
  background: none;
  border: 0;
  display: inline-block;
  min-height: 0;
  padding: 0;
  width: auto;
}

.ts-wrapper.set-select .ts-control {
  background: var(--brand-canvas);
  border-color: var(--brand-border-soft);
  border-radius: 7px;
  font-size: 0.8125rem;
  min-height: 2rem;
  padding: 0.2rem 1.8rem 0.2rem 0.5rem;
}

.ts-wrapper.set-select .ts-control::after {
  right: 0.7rem;
}

.ts-dropdown.set-select-dropdown,
.ts-wrapper.set-select .ts-dropdown {
  min-width: 11rem;
}

/* Panels and strips that sit straight on the page take the page line, not the in-card divider
   (which is lighter than the page and would draw a pale halo). */
.dashboard-stats,
.dashboard-panel:not(.dashboard-setup),
.dashboard-status,
.vms-panel,
.ux-tiles,
.ux-panel,
.dbx-panel,
.vms-note,
.act-chips-who,
.set-nav-who {
  border-color: var(--page-line);
}