/* Production adoption of UI kit 1.1. Preserve the original control, sidebar,
   typography and terminal dimensions. Demo CSS/JS must never be loaded here. */
:root,
[data-theme] {
  --bg: var(--b-canvas);
  --bg-sidebar: var(--b-sidebar);
  --bg-inspector: var(--b-surface);
  --field: var(--b-recessed);
  --fill-quiet: var(--b-quiet);
  --fill-hover: var(--b-hover);
  --fill-select: var(--b-selected);
  --hairline: var(--b-line);
  --hairline-strong: var(--b-line-strong);
  --fg: var(--b-text);
  --fg-2: var(--b-secondary);
  --fg-inverse: var(--b-on-primary);
  --accent: var(--b-accent);
  --accent-fill: var(--b-accent-fill);
  --shadow-pop: var(--b-shadow);
}
.content {
  background: var(--b-canvas);
}
.toolbar {
  border-bottom-color: var(--b-line);
}
/* Existing compact navigation and button metrics are deliberately inherited. */
.th,
.field > label,
.prow-meta,
.prow-note,
.choice-detail,
.sheet-foot-note,
.us-l {
  color: var(--b-muted);
}
.country-flag {
  border-radius: 3px;
}
.cell-mark[data-tone="ok"] .dot {
  background: var(--b-success);
}

/* One continuous table surface; the scroll parent still owns sticky headers. */
#view-machines.table-wrap,
#view-usage.table-wrap {
  padding: 0;
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius-lg);
}
#view-machines .thead,
#view-usage .thead {
  background: var(--b-raised);
  border-radius: 9px 9px 0 0;
  padding-inline: 16px;
}
#view-machines .row,
#view-usage .row {
  border-radius: 0;
  padding-inline: 16px;
}
#view-machines .thead::after,
#view-machines .row::after,
#view-usage .thead::after,
#view-usage .row::after {
  left: 0;
  right: 0;
}
#view-machines .row:last-child,
#view-usage .row:last-child {
  border-radius: 0 0 9px 9px;
}
#view-usage .row {
  min-height: 40px;
}
#view-usage .row:hover {
  background: var(--b-hover);
}
#view-usage .cell {
  overflow-wrap: anywhere;
}
#view-machines .cell-lead > .mono.trunc {
  font-family: var(--font);
}

/* Cards and actions use the kit's consistent spacing, not larger controls. */
#view-profiles {
  background: transparent;
}
#prof-body {
  gap: 16px;
}
.prow {
  background: var(--b-raised);
}
.prow-head {
  padding: 16px;
}
.prow-body {
  padding: 16px;
}
.profile-actions {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--b-line);
}
.sheet,
.machine-dialog,
.menu,
.choice-popup {
  background: var(--b-raised);
}
.sheet {
  border: 1px solid var(--b-line);
}
.machine-dialog {
  border-color: var(--b-line);
  border-radius: var(--b-radius-xl);
}
.machine-dialog input {
  border-radius: var(--b-radius-md);
}
.field input,
.field textarea {
  background: var(--b-field);
}
.choice-trigger {
  background: var(--b-field);
}
.login-card {
  background: var(--b-raised);
  border: 1px solid var(--b-line);
}

/* The original desktop column minima need room at intermediate widths. */
@media (min-width: 901px) and (max-width: 1200px) {
  #view-machines {
    --grid: minmax(90px, 1fr) 84px minmax(80px, 1.4fr) 86px 112px 64px 24px;
  }
  #view-usage {
    --grid: 112px minmax(80px, 1fr) 64px 50px 100px 64px minmax(78px, 1fr);
  }
  #view-machines .row,
  #view-machines .thead,
  #view-usage .row,
  #view-usage .thead {
    column-gap: 6px;
  }
}
@media (max-width: 900px) {
  #view-machines .row:first-of-type {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
  }
}

/* Form fills follow vm-fleet: a quiet alpha layer on the form surface. */
.prow-body textarea, .machine-dialog input { background: var(--b-field); }
.country-option:hover:not(:disabled), .country-option:focus-visible,
.region-change:hover:not(:disabled), .region-change:focus-visible { background: var(--b-hover); }
.country-vps-badge { background: var(--b-quiet); }