/* Pulsar67 shared component layer (Phase 1 of the frontend overhaul).
   Token-driven, theme-aware primitives shared by the marketing site, client
   area, and admin console. New class names (p67-button, p67-card, p67-badge,
   p67-page-header, p67-data-list, p67-empty, p67-pager, p67-filter-bar) sit
   alongside the legacy CSS so pages can migrate incrementally. Legacy
   .p67-btn (marketing) is intentionally left untouched. */

/* ---------- Buttons ---------- */
.p67-button {
  --_bg: var(--p67-brand);
  --_fg: var(--p67-on-brand);
  --_bd: var(--p67-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p67-space-2);
  padding: var(--p67-space-2) var(--p67-space-4);
  border: 1px solid var(--_bd);
  border-radius: var(--p67-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--p67-font-body);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--p67-transition), background var(--p67-transition), border-color var(--p67-transition);
}
.p67-button:hover { filter: brightness(1.05); }
.p67-button:focus-visible {
  outline: 2px solid var(--p67-brand);
  outline-offset: 2px;
}
.p67-button:disabled,
.p67-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
.p67-button--secondary {
  --_bg: transparent;
  --_fg: var(--p67-ink);
  --_bd: var(--p67-border-strong);
}
.p67-button--ghost {
  --_bg: transparent;
  --_fg: var(--p67-ink-soft);
  --_bd: transparent;
}
.p67-button--danger {
  --_bg: var(--p67-danger);
  --_fg: #ffffff;
  --_bd: var(--p67-danger);
}
.p67-button--sm {
  padding: var(--p67-space-1) var(--p67-space-3);
  font-size: var(--p67-text-xs);
}
.p67-button--block {
  width: 100%;
}

/* ---------- Card ---------- */
.p67-card {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  box-shadow: var(--p67-shadow-sm);
  color: var(--p67-ink);
}
.p67-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p67-space-3);
  padding: var(--p67-space-4) var(--p67-space-5);
  border-bottom: 1px solid var(--p67-border);
}
.p67-card__title {
  margin: 0;
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
}
.p67-card__subtitle {
  margin: 2px 0 0;
  font-size: var(--p67-text-sm);
  color: var(--p67-ink-muted);
}
.p67-card__body { padding: var(--p67-space-5); }

/* ---------- Badge / status pill ---------- */
.p67-badge {
  --_c: var(--p67-ink-muted);
  --_b: var(--p67-surface-3);
  display: inline-flex;
  align-items: center;
  gap: var(--p67-space-1);
  padding: 2px 10px;
  border-radius: var(--p67-radius-pill);
  background: var(--_b);
  color: var(--_c);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.p67-badge--ok      { --_c: var(--p67-ok);     --_b: var(--p67-ok-soft); }
.p67-badge--warn    { --_c: var(--p67-warn);   --_b: var(--p67-warn-soft); }
.p67-badge--danger  { --_c: var(--p67-danger); --_b: var(--p67-danger-soft); }
.p67-badge--info    { --_c: var(--p67-info);   --_b: var(--p67-info-soft); }
.p67-badge--brand   { --_c: var(--p67-brand);  --_b: var(--p67-brand-soft); }

/* ---------- Page header ---------- */
/* The console header used to eat ~140px before a single row of data: a 12px
   eyebrow with a brand rule, a 24px title, a subtitle, then a 24px margin over
   a divider. On a list page that is a third of the fold spent restating the
   nav. Everything here is one step tighter and the eyebrow lost its brand rule
   — with a title directly beneath it, the bar only added weight. */
.p67-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--p67-space-3);
  margin-bottom: var(--p67-space-4);
  border-bottom: 1px solid var(--p67-border);
  padding-bottom: var(--p67-space-3);
}
.p67-page-header__eyebrow {
  display: block;
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p67-ink-muted);
}
.p67-page-header__title {
  margin: 2px 0 0;
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-xl);
  font-weight: var(--p67-fw-bold);
  letter-spacing: -0.01em;
  color: var(--p67-ink);
}
.p67-page-header__desc {
  margin: 2px 0 0;
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-dense);
  max-width: 70ch;
}
.p67-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p67-space-2);
}

/* ---------- Data list (row-based list) ---------- */
.p67-data-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  overflow: hidden;
  background: var(--p67-surface-1);
}
.p67-data-list--flush {
  border: 0;
  border-radius: 0;
}
.p67-data-row {
  display: flex;
  align-items: center;
  gap: var(--p67-space-4);
  padding: var(--p67-space-3) var(--p67-space-4);
  border-bottom: 1px solid var(--p67-border);
  color: var(--p67-ink);
  text-decoration: none;
  transition: background var(--p67-transition);
}
.p67-data-row:last-child { border-bottom: 0; }
a.p67-data-row:hover { background: var(--p67-surface-2); }
.p67-data-row__main { flex: 1 1 auto; min-width: 0; }
.p67-data-row__main strong {
  display: block;
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
}
.p67-data-row__main > span {
  display: block;
  font-size: var(--p67-text-sm);
  color: var(--p67-ink-muted);
}

/* ---------- Stat grid ---------- */
.p67-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--p67-space-2);
  margin-bottom: var(--p67-space-4);
}
.p67-stat {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  box-shadow: var(--p67-shadow-sm);
  /* v3: matches .p67-stat-strip__item density so cards and strips read as one
     system on pages that still use the grid (mostly record detail views). */
  padding: var(--p67-space-3) var(--p67-space-4);
}
.p67-stat__label {
  align-items: center;
  display: flex;
  gap: var(--p67-space-2);
  font-size: var(--p67-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink-muted);
}
.p67-stat__value {
  margin-top: 2px;
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-2xl);
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
  line-height: 1.15;
}
.p67-stat__meta {
  margin: 2px 0 0;
  font-size: var(--p67-text-xs);
  color: var(--p67-ink-muted);
}
a.p67-stat {
  display: block;
  text-decoration: none;
  transition: border-color var(--p67-transition), box-shadow var(--p67-transition), transform var(--p67-transition);
}
a.p67-stat:hover {
  border-color: var(--p67-brand-border);
  box-shadow: var(--p67-shadow-md);
}
.p67-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p67-space-3);
}

.p67-stat--inline {
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-stat__value--lg {
  font-size: var(--p67-text-lg);
}

.p67-stat__value--compact {
  font-size: var(--p67-text-xl);
}

.p67-stat__value--code {
  font-size: var(--p67-text-sm);
  overflow-wrap: anywhere;
}

/* ---------- Empty state ---------- */
.p67-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p67-space-2);
  padding: var(--p67-space-7) var(--p67-space-5);
  text-align: center;
  color: var(--p67-ink-muted);
}
.p67-empty__icon {
  color: var(--p67-ink-muted);
  opacity: 0.8;
}
.p67-empty__title {
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
}
.p67-empty__desc {
  font-size: var(--p67-text-sm);
  max-width: 42ch;
}

/* ---------- Pager ---------- */
.p67-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p67-space-3);
  margin-top: var(--p67-space-4);
  font-size: var(--p67-text-sm);
  color: var(--p67-ink-muted);
}
.p67-pager a {
  color: var(--p67-brand);
  text-decoration: none;
  font-weight: var(--p67-fw-semibold);
}
.p67-pager a:hover { text-decoration: underline; }

/* ---------- Filter bar ---------- */
.p67-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--p67-space-3);
  padding: var(--p67-space-3) var(--p67-space-4);
  background: var(--p67-surface-2);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  margin-bottom: var(--p67-space-4);
}
.p67-filter-bar--compact {
  margin: 0;
  padding: var(--p67-space-1) var(--p67-space-2);
}
.p67-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-1);
}
.p67-filter-bar__field--grow {
  flex: 1 1 280px;
}
.p67-filter-bar__field > span {
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--p67-ink-muted);
}
.p67-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.p67-filter-bar select {
  padding: var(--p67-space-2) var(--p67-space-3);
  border: 1px solid var(--p67-border-strong);
  border-radius: var(--p67-radius-sm);
  background: var(--p67-surface-1);
  color: var(--p67-ink);
  font-size: var(--p67-text-sm);
}

/* ---------- Bootstrap brand bridge ----------
   The client area and marketing site render on stock Bootstrap (loaded from the
   CDN with its default blue primary). This bridge points Bootstrap's brand
   variables at the Pulsar67 tokens so every .btn-primary, badge, link, and
   subtle surface across those surfaces adopts the unified purple in light and
   dark mode — without touching individual templates. Loaded last, so it wins
   over the CDN defaults. */
:root {
  --bs-primary: var(--p67-brand);
  --bs-primary-rgb: 90, 82, 184;
  --bs-primary-bg-subtle: var(--p67-brand-soft);
  --bs-primary-border-subtle: var(--p67-brand-border);
  --bs-primary-text-emphasis: var(--p67-brand-strong);
  --bs-link-color: var(--p67-brand);
  --bs-link-color-rgb: 90, 82, 184;
  --bs-link-hover-color: var(--p67-brand-strong);
  --bs-border-radius: var(--p67-radius-md);
  --bs-border-radius-sm: var(--p67-radius-sm);
}
[data-p67-theme="dark"] {
  --bs-primary: var(--p67-brand);
  --bs-primary-rgb: 139, 92, 246;
  --bs-primary-bg-subtle: var(--p67-brand-soft);
  --bs-primary-border-subtle: var(--p67-brand-border);
  --bs-primary-text-emphasis: var(--p67-brand-strong);
  --bs-link-color: var(--p67-brand-strong);
  --bs-link-color-rgb: 167, 139, 250;
  --bs-link-hover-color: var(--p67-brand-contrast);
}
/* Bootstrap solid/outline primary buttons hardcode their compiled colors via
   per-component --bs-btn-* vars, so map those to the brand too. */
.btn-primary {
  --bs-btn-bg: var(--p67-brand);
  --bs-btn-border-color: var(--p67-brand);
  --bs-btn-hover-bg: var(--p67-brand-strong);
  --bs-btn-hover-border-color: var(--p67-brand-strong);
  --bs-btn-active-bg: var(--p67-brand-strong);
  --bs-btn-active-border-color: var(--p67-brand-strong);
  --bs-btn-disabled-bg: var(--p67-brand);
  --bs-btn-disabled-border-color: var(--p67-brand);
  --bs-btn-color: var(--p67-on-brand);
  --bs-btn-hover-color: var(--p67-on-brand);
  --bs-btn-active-color: var(--p67-on-brand);
  --bs-btn-disabled-color: var(--p67-on-brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--p67-brand);
  --bs-btn-border-color: var(--p67-brand);
  --bs-btn-hover-bg: var(--p67-brand);
  --bs-btn-hover-border-color: var(--p67-brand);
  --bs-btn-hover-color: var(--p67-on-brand);
  --bs-btn-active-bg: var(--p67-brand);
  --bs-btn-active-border-color: var(--p67-brand);
  --bs-btn-active-color: var(--p67-on-brand);
}

/* ---------- Form choice controls (portal + console) ----------
   Bootstrap .form-check-input strips native appearance; without explicit
   borders it blends into white cards in light mode and dark surfaces in dark
   mode. Native checkboxes in settings toggles and legacy .checkbox-row forms
   get accent-color and a stable hit target. */
:is(.p67-console-body, .p67-client-portal-body) .form-check-input {
  background-color: var(--p67-surface-1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid var(--p67-border-strong);
  box-shadow: none;
  flex-shrink: 0;
  height: 1rem;
  margin-top: 0;
  width: 1rem;
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input[type="checkbox"]:checked {
  background-color: var(--p67-brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: var(--p67-brand);
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--p67-brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  border-color: var(--p67-brand);
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input[type="radio"]:checked {
  background-color: var(--p67-brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
  border-color: var(--p67-brand);
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input:focus {
  border-color: var(--p67-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p67-brand) 14%, transparent);
  outline: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:is(.p67-console-body, .p67-client-portal-body) :is(
  input[type="checkbox"]:not(.form-check-input),
  input[type="radio"]:not(.form-check-input)
) {
  accent-color: var(--p67-brand);
  flex-shrink: 0;
  height: 1rem;
  margin: 0;
  min-height: 1rem;
  min-width: 1rem;
  width: 1rem;
}

:is(.p67-console-body, .p67-client-portal-body) .checkbox-row input[type="checkbox"],
:is(.p67-console-body, .p67-client-portal-body) .checkbox-row input[type="radio"] {
  accent-color: var(--p67-brand);
  margin-top: 0.15rem;
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-label {
  color: var(--p67-ink-soft);
}

:is(.p67-console-body, .p67-client-portal-body) :is(.form-control, .form-select) {
  background-color: var(--p67-surface-1);
  border-color: var(--p67-border-strong);
  color: var(--p67-ink);
}

html[data-p67-theme="dark"] :is(.p67-console-body, .p67-client-portal-body) .form-check-input {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

html[data-p67-theme="dark"] :is(.p67-console-body, .p67-client-portal-body) .form-check-input:checked,
html[data-p67-theme="dark"] :is(.p67-console-body, .p67-client-portal-body) .form-check-input:indeterminate {
  background-color: var(--p67-brand);
  border-color: var(--p67-brand);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .p67-data-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--p67-space-2);
  }
  .p67-page-header { align-items: flex-start; }

  .p67-client-portal-body .p67-page-header__actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .p67-client-portal-body .p67-page-header__actions .p67-button,
  .p67-client-portal-body .p67-page-header__actions .p67-stat--inline {
    width: 100%;
  }

  .p67-client-portal-body .p67-card__header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--p67-space-3);
  }

  .p67-client-portal-body .p67-card__header > .d-flex,
  .p67-client-portal-body .p67-card__header > form,
  .p67-client-portal-body .p67-card__header > .p67-button {
    width: 100%;
  }

  .p67-client-portal-body .p67-card__header .p67-button,
  .p67-client-portal-body .p67-card__header .form-select {
    width: 100%;
  }

  .p67-client-portal-body .p67-data-row .p67-button {
    width: 100%;
  }

  .p67-client-portal-body .p67-service-detail-actions .p67-button {
    flex: 1 1 calc(50% - var(--p67-space-2));
    min-width: 9rem;
  }
}

.p67-service-meta {
  display: grid;
  gap: .2rem;
}

.p67-service-meta__line {
  display: block;
  line-height: 1.35;
  word-break: break-word;
}

/* Client sidebar menu button only belongs in the portal shell. */
.p67-client-sidebar-toggle {
  display: none;
}

@media (max-width: 991.98px) {
  .p67-client-portal-body .p67-client-sidebar-toggle {
    display: inline-flex;
  }
}

/* Stack wide billing tables into labeled cards on narrow screens. */
@media (max-width: 767.98px) {
  .p67-responsive-table table {
    border: 0;
  }

  .p67-responsive-table table thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .p67-responsive-table table tbody tr {
    border: 1px solid var(--p67-border);
    border-radius: var(--p67-radius-md);
    display: block;
    margin-bottom: var(--p67-space-3);
    padding: var(--p67-space-3);
  }

  .p67-responsive-table table tbody tr:last-child {
    margin-bottom: 0;
  }

  .p67-responsive-table table tbody td {
    border: 0;
    display: block;
    padding: .35rem 0;
    text-align: left !important;
    white-space: normal;
  }

  .p67-responsive-table table tbody td::before {
    color: var(--p67-ink-muted);
    content: attr(data-label);
    display: block;
    font-size: var(--p67-text-xs);
    font-weight: var(--p67-fw-semibold);
    letter-spacing: .03em;
    margin-bottom: .2rem;
    text-transform: uppercase;
  }

  .p67-responsive-table table tbody td[data-label=""]::before,
  .p67-responsive-table table tbody td:not([data-label])::before {
    content: none;
  }
}

/* ---------- Console & client area layout polish ----------
   Loaded after app.css so these spacing and surface rules win over the
   legacy compact console bridge without touching every template. */
.p67-console-body {
  --p67-console-section-gap: 1.75rem;
  --p67-console-block-gap: 1.25rem;
}

.p67-console-main-pane {
  min-width: 0;
  position: relative;
}

.p67-console-body #p67-console-content {
  outline: none;
  transition: opacity 140ms ease;
}

.p67-console-body #p67-console-content.htmx-request {
  cursor: progress;
  opacity: .58;
  pointer-events: none;
}

.p67-console-body #p67-console-content.htmx-request::before {
  animation: p67-console-loading 1s ease-in-out infinite;
  background: linear-gradient(90deg, var(--p67-brand), var(--p67-info));
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform-origin: left center;
  width: 40vw;
  z-index: 2000;
}

.p67-client-portal-body #p67-console-content.htmx-request {
  cursor: progress;
  opacity: 1;
  pointer-events: none;
}

.p67-client-portal-body #p67-console-content.htmx-request::before {
  content: none;
}

.p67-client-nav-loader {
  align-items: flex-start;
  background: color-mix(in srgb, var(--p67-shell-bg) 82%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding-top: 18vh;
  pointer-events: none;
  position: absolute;
  transition: opacity 120ms ease;
  z-index: 12;
}

.p67-client-nav-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.p67-client-nav-loader__spinner {
  animation: p67-client-nav-spin .75s linear infinite;
  border: 2px solid color-mix(in srgb, var(--p67-brand) 22%, transparent);
  border-radius: 50%;
  border-top-color: var(--p67-brand);
  height: 28px;
  width: 28px;
}

.p67-client-portal-body #p67-console-content.p67-content-enter {
  opacity: 0;
}

.p67-client-portal-body #p67-console-content.p67-content-enter.p67-content-enter-active {
  opacity: 1;
  transition: opacity 150ms ease;
}

@keyframes p67-console-loading {
  from { transform: translateX(-45vw); }
  to { transform: translateX(105vw); }
}

@keyframes p67-client-nav-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .p67-console-body #p67-console-content {
    transition: none;
  }

  .p67-console-body #p67-console-content.htmx-request::before {
    animation: none;
    width: 100vw;
  }

  .p67-client-nav-loader,
  .p67-client-portal-body #p67-console-content.p67-content-enter.p67-content-enter-active {
    transition: none;
  }

  .p67-client-nav-loader__spinner {
    animation: none;
    border-top-color: var(--p67-brand);
  }
}

.p67-console-body .p67-console-content > .messages {
  gap: var(--p67-space-3);
  margin-bottom: var(--p67-console-section-gap);
}

.p67-console-body .messages .message {
  border-radius: var(--p67-radius-md);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-console-body .p67-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap);
}

.p67-console-body .p67-client-area-page > .container-fluid {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap);
}

.p67-console-body .p67-page-stack > .section-gap {
  margin-top: 0;
}

/* This block used to scale the header UP inside the console — a 30px title, a
   16px description and 24px under the rule — which is why an operations page
   opened with a banner rather than with data. The console is the densest
   surface in the product and should not carry the product's largest page
   title. Size now comes from the base component; only the divider geometry is
   console-specific. */
.p67-console-body .p67-page-header {
  margin-bottom: 0;
  padding-bottom: var(--p67-space-3);
  border-bottom: 1px solid var(--p67-border);
}

.p67-console-body .p67-page-header__actions {
  gap: var(--p67-space-3);
}

.p67-console-body .p67-stat-grid {
  gap: var(--p67-console-block-gap);
  margin-bottom: 0;
}

.p67-console-body .p67-stat {
  padding: var(--p67-space-5);
  border-radius: var(--p67-radius-lg);
  transition: border-color var(--p67-transition), box-shadow var(--p67-transition), transform var(--p67-transition);
}

.p67-console-body .p67-stat.p67-stat--inline {
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-console-body a.p67-stat:hover {
  border-color: var(--p67-brand-border);
  box-shadow: var(--p67-shadow-md);
  transform: translateY(-1px);
}

.p67-console-body .p67-stat__value {
  margin-top: var(--p67-space-2);
}

.p67-console-body .p67-card {
  border-radius: var(--p67-radius-lg);
  box-shadow: var(--p67-shadow-sm);
  overflow: hidden;
}

.p67-console-body .p67-card__header {
  padding: var(--p67-space-5) var(--p67-space-6);
  background: linear-gradient(180deg, var(--p67-surface-2) 0%, var(--p67-surface-1) 100%);
}

.p67-console-body .p67-card__body {
  padding: var(--p67-space-5) var(--p67-space-6);
}

.p67-console-body .p67-card__title {
  font-size: var(--p67-text-xl);
}

.p67-console-body .p67-data-list {
  border-radius: var(--p67-radius-md);
}

.p67-console-body .p67-data-list--flush {
  border: 0;
  border-radius: 0;
}

.p67-console-body .p67-data-row {
  padding: var(--p67-space-4) var(--p67-space-5);
  gap: var(--p67-space-4);
}

.p67-console-body a.p67-data-row:hover {
  background: var(--p67-surface-2);
}

.p67-console-body .p67-data-row__main > span {
  margin-top: 2px;
  line-height: 1.45;
}

.p67-console-body .p67-filter-bar {
  gap: var(--p67-space-4);
  margin-bottom: var(--p67-console-block-gap);
  padding: var(--p67-space-4) var(--p67-space-5);
  border-radius: var(--p67-radius-lg);
}

.p67-console-body .p67-filter-bar--compact {
  gap: var(--p67-space-2);
  margin: 0;
  padding: var(--p67-space-1) var(--p67-space-2);
}

.p67-console-body .p67-empty {
  padding: var(--p67-space-8) var(--p67-space-6);
}

.p67-console-body .p67-pager {
  margin-top: var(--p67-space-5);
  padding-top: var(--p67-space-4);
  border-top: 1px solid var(--p67-border);
}

.p67-console-body .stat-panel,
.p67-console-body .p67-console-stat,
.p67-client-portal-body .p67-client-kpi-card {
  border-radius: var(--p67-radius-lg) !important;
  box-shadow: var(--p67-shadow-sm) !important;
  padding: 1.125rem 1.25rem !important;
}

.p67-console-body .stat-panel .metric {
  margin-top: var(--p67-space-2);
}

.p67-console-body .p67-console-content .alert {
  border-radius: var(--p67-radius-md);
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-console-body .topbar.content-header.card {
  border-radius: var(--p67-radius-lg) !important;
  box-shadow: var(--p67-shadow-sm) !important;
  margin-bottom: 0 !important;
}

.p67-console-body .topbar.content-header.card .card-body {
  padding: var(--p67-space-5) var(--p67-space-6) !important;
}

.p67-console-body .p67-overview-tile {
  gap: var(--p67-space-4);
  min-height: 5.75rem;
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-console-body .queue-health-grid {
  gap: var(--p67-console-block-gap);
}

/* ---------- Business snapshot ---------- */
.p67-business-snapshot {
  display: grid;
  gap: var(--p67-space-4);
}

.p67-business-snapshot__header {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-4);
  justify-content: space-between;
}

.p67-business-snapshot__header h2 {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-xl);
  margin: var(--p67-space-1) 0 0;
}

.p67-business-snapshot__header p {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-sm);
  margin: var(--p67-space-1) 0 0;
}

.p67-business-metrics {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-lg);
  box-shadow: var(--p67-shadow-sm);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.p67-business-metric {
  min-width: 0;
  padding: var(--p67-space-5);
}

.p67-business-metric + .p67-business-metric {
  border-left: 1px solid var(--p67-border);
}

.p67-business-metric span,
.p67-business-metric strong,
.p67-business-metric small {
  display: block;
}

.p67-business-metric span {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.p67-business-metric strong {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: var(--p67-space-2);
}

.p67-business-metric small {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  line-height: 1.45;
  margin-top: var(--p67-space-2);
}

.p67-business-metric--brand strong { color: var(--p67-brand); }
.p67-business-metric--success strong { color: var(--p67-ok); }
.p67-business-metric--warning strong { color: var(--p67-warn); }

/* ---------- Flatter nested surfaces ---------- */
:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card, .p67-card)
  > :is(.form-card.card, .table-list, .p67-data-list, .list-group) {
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card, .p67-card)
  > .form-card.card {
  border: 0 !important;
  padding: 0;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card, .p67-card)
  > :is(.table-list, .list-group)
  > :is(.table-row, .list-group-item) {
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--p67-border) !important;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card, .p67-card)
  > :is(.table-list, .list-group)
  > :is(.table-row, .list-group-item):first-child {
  border-top: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card, .p67-card)
  .queue-health-card {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--p67-border-strong);
  border-radius: 0;
  box-shadow: none;
  padding: var(--p67-space-2) var(--p67-space-4);
}

.p67-thread-list {
  display: grid;
  gap: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--p67-border) !important;
  border-radius: 0 !important;
  padding: var(--p67-space-4) 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message:first-child {
  padding-top: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message--internal {
  background: var(--p67-warn-soft) !important;
  padding: var(--p67-space-4) !important;
}

@media (max-width: 960px) {
  .p67-business-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p67-business-metric:nth-child(odd) {
    border-left: 0;
  }

  .p67-business-metric:nth-child(n + 3) {
    border-top: 1px solid var(--p67-border);
  }
}

@media (max-width: 600px) {
  .p67-business-metrics {
    grid-template-columns: 1fr;
  }

  .p67-business-metric + .p67-business-metric {
    border-left: 0;
    border-top: 1px solid var(--p67-border);
  }
}

@media (max-width: 980px) {
  .p67-console-body .p67-console-content,
  .p67-client-portal-body .main {
    padding: 1.125rem 1rem 2rem;
  }

}

/* ---------- Ambient canvas (portal, console, auth) ---------- */
/* The tinted glow belongs on marketing-flavoured canvases. Console and client
   shells stay flat — a gradient behind dense data reads as a rendering bug. */
.p67-canvas,
.auth-body {
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--p67-brand) 8%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--p67-accent) 6%, transparent), transparent 24rem),
    var(--p67-surface-2);
}

.p67-console-body,
.p67-client-portal-body {
  background: var(--p67-surface-2);
}

/* ---------- Marketing button bridge ---------- */
.p67-btn.btn-primary,
.p67-btn-primary.btn-primary {
  background: var(--p67-brand);
  border-color: var(--p67-brand);
  border-radius: var(--p67-radius-pill);
  color: var(--p67-on-brand);
  font-weight: var(--p67-fw-semibold);
}

.p67-btn.btn-primary:hover,
.p67-btn-primary.btn-primary:hover {
  background: var(--p67-brand-strong);
  border-color: var(--p67-brand-strong);
  color: var(--p67-on-brand);
}

/* ---------- Callout card (replaces Bootstrap alerts in portal) ---------- */
/* Neutral by default. This was washed in --p67-info (#1d4ed8) with a 4px bar,
   so an ordinary nudge like "add a payment method" arrived with the same
   visual force as a real alert. Colour here should mean something: the warning
   variant below still tints, and it now stands out precisely because the
   informational case no longer does. */
.p67-callout {
  align-items: center;
  background: var(--p67-surface-2);
  border: 1px solid var(--p67-border);
  border-left: 3px solid var(--p67-border-strong);
  border-radius: var(--p67-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-3);
  justify-content: space-between;
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-callout--warning {
  background: var(--p67-warn-soft);
  border-color: color-mix(in srgb, var(--p67-warn) 25%, transparent);
  border-left-color: var(--p67-warn);
}

/* ---------- Checkout workspace (configuration + review panel) ---------- */
/* .p67-order-workspace existed only as a marker for a few app.css !important
   tweaks; the actual two-column layout was a Bootstrap `row g-3
   align-items-start` with `col-12 col-xl-8` / `col-12 col-xl-4` wrappers and a
   `sticky-xl-top` utility, repeated across the checkout templates. It owns the
   layout now, so the cards are direct grid children and the wrapper divs go.
   The 1200px breakpoint is Bootstrap's xl, so the stacking point is unchanged. */
.p67-order-workspace {
  align-items: start;
  display: grid;
  gap: var(--p67-space-3);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.p67-order-workspace > * {
  min-width: 0;
}

.p67-order-workspace__panel {
  position: sticky;
  top: calc(var(--p67-topbar-h) + var(--p67-space-3));
}

.p67-order-workspace__full {
  grid-column: 1 / -1;
}

/* Two equal panels that collapse to one column. Replaces `row g-3` + a pair of
   `col-lg-6` wrappers; auto-fit means no breakpoint to keep in sync. */
.p67-panel-pair {
  display: grid;
  gap: var(--p67-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

@media (max-width: 1200px) {
  .p67-order-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .p67-order-workspace__panel {
    position: static;
  }
}

/* ---------- Choice row (single-select list: checkout cadence, etc.) ---------- */
/* Replaces `list-group-item list-group-item-action d-flex flex-column
   flex-md-row align-items-md-center justify-content-between gap-3` per row.

   The selected state deliberately does not wash the row in brand colour with
   brand-coloured text. That was the loudest thing on the checkout pages, and it
   was self-inflicted: because the fill was a light lavender, site.js had to
   swap Bootstrap's text-white-50 on and off to keep the sub-label legible, and
   only an `!important` colour: inherit in app.css stopped it rendering as
   near-white text on near-white. Selection is now marked the way the sidebar
   marks the current page — a 2px brand edge — so the accent means one thing
   and the text needs no compensating override. */
.p67-choice-list {
  display: grid;
  gap: var(--p67-space-2);
}

.p67-choice {
  align-items: center;
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  color: var(--p67-ink);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-3);
  justify-content: space-between;
  padding: var(--p67-space-3) var(--p67-space-4);
  text-align: left;
  text-decoration: none;
  transition: border-color var(--p67-transition), background var(--p67-transition);
  width: 100%;
}

.p67-choice:hover {
  border-color: var(--p67-border-strong);
}

.p67-choice.is-selected {
  border-color: var(--p67-border-strong);
  box-shadow: inset 2px 0 0 var(--p67-brand);
}

.p67-choice__label {
  display: block;
  font-weight: var(--p67-fw-semibold);
}

.p67-choice__detail {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-dense);
}

.p67-choice__aside {
  color: var(--p67-ink-muted);
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-dense);
  white-space: nowrap;
}

.p67-choice.is-selected .p67-choice__aside {
  color: var(--p67-ink);
  font-weight: var(--p67-fw-semibold);
}

.p67-callout__copy strong {
  display: block;
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-base);
}

.p67-callout__copy span {
  color: var(--p67-ink-muted);
  display: block;
  font-size: var(--p67-text-sm);
}

/* ---------- Stat accent modifiers (admin dashboards) ---------- */
.p67-stat--accent-brand {
  border-color: var(--p67-brand-border);
}

.p67-stat--accent-ok {
  border-color: color-mix(in srgb, var(--p67-ok) 35%, transparent);
}

.p67-stat--accent-warn {
  border-color: color-mix(in srgb, var(--p67-warn) 35%, transparent);
}

.p67-stat--accent-danger {
  border-color: color-mix(in srgb, var(--p67-danger) 35%, transparent);
}

.p67-stat:hover {
  box-shadow: var(--p67-shadow-md);
  transition: box-shadow var(--p67-transition), transform var(--p67-transition);
}

@media (prefers-reduced-motion: reduce) {
  .p67-stat:hover {
    transform: none;
  }
}

/* ---------- Client billing overview ---------- */
.p67-billing-credit-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p67-space-4);
  padding: var(--p67-space-5);
}

.p67-billing-credit-card__label {
  color: var(--p67-text-muted);
  font-size: var(--p67-text-sm);
  margin: 0 0 var(--p67-space-1);
}

.p67-billing-credit-card__value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--p67-fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.p67-billing-credit-card__meta {
  color: var(--p67-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-3);
  font-size: var(--p67-text-sm);
  margin-top: var(--p67-space-3);
}

.p67-billing-credit-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-2);
}

.p67-billing-overview {
  display: grid;
  gap: var(--p67-console-section-gap);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.p67-empty--compact {
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-billing-panel .p67-empty--compact {
  padding: var(--p67-space-4) var(--p67-space-5) var(--p67-space-5);
}

.p67-billing-method-list .p67-data-row,
.p67-billing-receipt-list .p67-data-row {
  padding-inline: var(--p67-space-5);
}

.p67-billing-month-picker {
  min-width: 10rem;
}

.p67-billing-usage-summary {
  align-items: end;
  display: grid;
  gap: var(--p67-space-4);
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  margin-bottom: var(--p67-space-4);
}

.p67-billing-usage-summary__total {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-1);
}

.p67-billing-usage-summary__total strong {
  font-size: var(--p67-text-2xl);
}

.p67-billing-usage-chart {
  align-items: end;
  display: flex;
  gap: 2px;
  height: 5.5rem;
}

.p67-billing-usage-chart__bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: 100%;
  justify-content: end;
}

.p67-billing-usage-chart__bar span {
  background: var(--p67-brand-soft);
  border: 1px solid var(--p67-brand-border);
  border-radius: 3px 3px 0 0;
  display: block;
  min-height: 0;
  width: 100%;
}

.p67-billing-resource-list {
  border-top: 1px solid var(--p67-border);
}

.p67-billing-resource-row {
  align-items: center;
  color: inherit;
  display: flex;
  gap: var(--p67-space-3);
  justify-content: space-between;
  padding: var(--p67-space-4) var(--p67-space-5);
  text-decoration: none;
  transition: background-color var(--p67-transition);
}

.p67-billing-resource-row + .p67-billing-resource-row {
  border-top: 1px solid var(--p67-border);
}

.p67-billing-resource-row:hover {
  background: var(--p67-surface-muted, #f8fafc);
}

.p67-billing-resource-row__main {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.p67-billing-resource-row__main span {
  color: var(--p67-text-muted);
  font-size: var(--p67-text-sm);
}

.p67-billing-resource-row__amount {
  align-items: end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--p67-space-1);
}

.p67-billing-resource-row__cta {
  color: var(--p67-brand);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
}

@media (max-width: 991.98px) {
  .p67-billing-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .p67-billing-usage-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .p67-billing-credit-card__actions {
    width: 100%;
  }

  .p67-billing-credit-card__actions .p67-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 575.98px) {
  .p67-billing-resource-row {
    align-items: start;
    flex-direction: column;
  }

  .p67-billing-resource-row__amount {
    align-items: start;
    flex-direction: row;
    gap: var(--p67-space-2);
  }
}

/* ---------- Legacy → Phase 1 visual bridges ----------
   Pages still using .panel/.button/.topbar/.empty-state/.btn should
   visually match .p67-card/.p67-button/.p67-page-header/.p67-empty so
   console and client chrome stay consistent during the migration. */

:is(.p67-console-body, .p67-client-portal-body) .topbar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-4);
  justify-content: space-between;
  margin: 0 0 var(--p67-space-5);
  padding: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .topbar .eyebrow,
:is(.p67-console-body, .p67-client-portal-body) .p67-console-page > .eyebrow {
  color: var(--p67-ink-muted);
  display: block;
  font-family: var(--p67-font-body);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.04em;
  margin: 0 0 var(--p67-space-1);
  text-transform: uppercase;
}

:is(.p67-console-body, .p67-client-portal-body) .topbar h1 {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-2xl);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.2;
  margin: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .panel.card,
:is(.p67-console-body, .p67-client-portal-body) .panel {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  box-shadow: var(--p67-shadow-sm);
  color: var(--p67-ink);
}

:is(.p67-console-body, .p67-client-portal-body) .panel h2,
:is(.p67-console-body, .p67-client-portal-body) .panel-heading h2 {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .button,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-primary {
  background: var(--p67-brand);
  border-color: var(--p67-brand);
  border-radius: var(--p67-radius-sm);
  color: var(--p67-on-brand);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  min-height: 38px;
}

:is(.p67-console-body, .p67-client-portal-body) .button:hover,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-primary:hover {
  background: var(--p67-brand-strong);
  border-color: var(--p67-brand-strong);
  color: var(--p67-on-brand);
  filter: brightness(1.03);
}

:is(.p67-console-body, .p67-client-portal-body) .button-secondary,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-secondary {
  background: transparent;
  border-color: var(--p67-border-strong);
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .button-secondary:hover,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-secondary:hover {
  background: var(--p67-surface-2);
  border-color: var(--p67-border-strong);
  color: var(--p67-ink);
}

:is(.p67-console-body, .p67-client-portal-body) .button-danger,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-danger,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-danger {
  border-radius: var(--p67-radius-sm);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-danger {
  background: transparent;
  border-color: var(--p67-danger);
  color: var(--p67-danger);
}

:is(.p67-console-body, .p67-client-portal-body) .btn.btn-sm {
  font-size: var(--p67-text-xs);
  min-height: 30px;
  padding: var(--p67-space-1) var(--p67-space-3);
}

:is(.p67-console-body, .p67-client-portal-body) .empty-state,
:is(.p67-console-body, .p67-client-portal-body) .empty-state.alert {
  align-items: flex-start;
  background: var(--p67-surface-2);
  border: 0;
  border-radius: 0;
  color: var(--p67-ink-muted);
  display: grid;
  gap: var(--p67-space-1);
  justify-content: start;
  margin: 0;
  padding: var(--p67-space-6) var(--p67-space-5);
  text-align: left;
}

:is(.p67-console-body, .p67-client-portal-body) .empty-state strong {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-base);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .empty-state span {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-sm);
  margin-top: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .status-pill,
:is(.p67-console-body, .p67-client-portal-body) .neutral-pill,
:is(.p67-console-body, .p67-client-portal-body) .danger-pill {
  border-radius: var(--p67-radius-pill);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.6;
  padding: 2px 10px;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-console-page:not(.p67-page-stack),
:is(.p67-console-body, .p67-client-portal-body) .p67-client-area-page:not(.p67-page-stack) {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap, var(--p67-space-5));
}

:is(.p67-console-body, .p67-client-portal-body) .p67-client-area-page.p67-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap, var(--p67-space-5));
}

:is(.p67-console-body, .p67-client-portal-body) .section-gap {
  margin-top: 0;
}

/* ==========================================================================
   v3 console layer — dense application UI
   --------------------------------------------------------------------------
   Added as part of the v3 consolidation. These components replace equivalents
   in app.css / v2-corporate.css; as each page migrates, the superseded rules
   are deleted rather than left to accumulate. Everything here is token-driven
   and scoped to the console/client shells.
   ========================================================================== */

/* ---------- Top bar ---------- */
.p67-topbar {
  align-items: center;
  background: var(--p67-surface-1);
  border-bottom: 1px solid var(--p67-border);
  display: flex;
  gap: var(--p67-space-3);
  height: var(--p67-topbar-h);
  padding-inline: var(--p67-space-4);
  position: sticky;
  top: 0;
  z-index: 40;
}

.p67-topbar__brand {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: var(--p67-space-2);
  text-decoration: none;
}

.p67-topbar__brand img {
  display: block;
  width: auto;
}

.p67-topbar__context {
  background: var(--p67-brand-soft);
  border-radius: var(--p67-radius-sm);
  color: var(--p67-brand-strong);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.04em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.p67-topbar__spacer {
  flex: 1 1 auto;
}

.p67-topbar__actions {
  align-items: center;
  display: flex;
  gap: var(--p67-space-1);
}

.p67-topbar__link {
  align-items: center;
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink-muted);
  display: inline-flex;
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-medium);
  gap: var(--p67-space-2);
  height: var(--p67-control-h-md);
  padding-inline: var(--p67-control-pad-x);
  text-decoration: none;
  transition: background var(--p67-transition), color var(--p67-transition);
}

.p67-topbar__link:hover {
  background: var(--p67-surface-3);
  color: var(--p67-ink);
}

.p67-topbar__link i {
  height: 15px;
  width: 15px;
}

.p67-topbar__icon-button,
.p67-topbar__menu-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink-muted);
  display: inline-flex;
  height: var(--p67-control-h-md);
  justify-content: center;
  transition: background var(--p67-transition), color var(--p67-transition);
  width: var(--p67-control-h-md);
}

.p67-topbar__icon-button:hover,
.p67-topbar__menu-toggle:hover {
  background: var(--p67-surface-3);
  color: var(--p67-ink);
}

.p67-topbar__icon-button i,
.p67-topbar__menu-toggle i {
  height: 16px;
  width: 16px;
}

/* The sidebar is permanent from md up; the toggle is a small-screen affordance. */
.p67-topbar__menu-toggle {
  display: none;
}

.p67-topbar__avatar-button {
  background: transparent;
  border: 0;
  border-radius: var(--p67-radius-pill);
  display: inline-flex;
  margin-inline-start: var(--p67-space-1);
  padding: 0;
}

.p67-topbar__avatar {
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-pill);
  display: block;
}

.p67-topbar__menu {
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  box-shadow: var(--p67-shadow-md);
  font-size: var(--p67-text-sm);
  min-width: 224px;
  padding: var(--p67-space-1);
}

.p67-topbar__menu-identity {
  display: grid;
  gap: 1px;
  padding: var(--p67-space-2) var(--p67-space-3);
}

.p67-topbar__menu-identity strong {
  font-size: var(--p67-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}

.p67-topbar__menu-identity small {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
}

.p67-topbar__menu .dropdown-item {
  align-items: center;
  border-radius: var(--p67-radius-sm);
  display: flex;
  gap: var(--p67-space-2);
  padding: var(--p67-space-2) var(--p67-space-3);
}

.p67-topbar__menu .dropdown-item i {
  height: 15px;
  width: 15px;
}

.p67-topbar__menu form {
  margin: 0;
}

.p67-topbar__signout {
  color: var(--p67-danger);
  width: 100%;
}

/* ---------- Stat strip (replaces oversized stat cards) ---------- */
.p67-stat-strip {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: hidden;
}

.p67-stat-strip__item {
  border-inline-start: 1px solid var(--p67-border);
  display: grid;
  gap: 1px;
  padding: var(--p67-space-2) var(--p67-space-4);
}

.p67-stat-strip__item:first-child {
  border-inline-start: 0;
}

.p67-stat-strip__label {
  align-items: center;
  color: var(--p67-ink-muted);
  display: flex;
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  gap: var(--p67-space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 24px figures made a four-count strip as loud as the page title and as tall as
   three table rows. These are reference counts scanned in passing, not the
   subject of the page — 18px keeps them legible without competing. */
.p67-stat-strip__value {
  color: var(--p67-ink);
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.2;
}

.p67-stat-strip__value[data-tone="ok"] { color: var(--p67-ok); }
.p67-stat-strip__value[data-tone="warn"] { color: var(--p67-warn); }
.p67-stat-strip__value[data-tone="danger"] { color: var(--p67-danger); }

.p67-stat-strip__hint {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
}

/* ---------- Data table ---------- */
.p67-table-wrap {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  overflow: auto;
}

.p67-table-scroll {
  overflow-x: auto;
}

.p67-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--p67-text-dense);
  width: 100%;
}

.p67-table thead th {
  background: var(--p67-surface-2);
  border-bottom: 1px solid var(--p67-border);
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  height: var(--p67-table-head-h);
  letter-spacing: 0.04em;
  padding: 0 var(--p67-cell-pad-x);
  position: sticky;
  text-align: start;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}

.p67-table tbody td {
  border-bottom: 1px solid var(--p67-border);
  color: var(--p67-ink-soft);
  height: var(--p67-row-h);
  line-height: 1.35;
  padding: var(--p67-cell-pad-y) var(--p67-cell-pad-x);
  vertical-align: middle;
}

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

.p67-table tbody tr:hover td {
  background: var(--p67-surface-2);
}

.p67-table__primary {
  color: var(--p67-ink);
  font-weight: var(--p67-fw-medium);
}

.p67-table__primary a {
  color: inherit;
  text-decoration: none;
}

.p67-table__primary a:hover {
  color: var(--p67-brand-strong);
  text-decoration: underline;
}

/* Identifiers, counts and money align on the digit, not the glyph. */
.p67-table__data {
  font-family: var(--p67-font-data);
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-xs);
}

.p67-table__num {
  font-feature-settings: var(--p67-font-feature-tabular);
  text-align: end;
}

.p67-table__muted {
  color: var(--p67-ink-muted);
}

.p67-table__nowrap {
  white-space: nowrap;
}

.p67-table__actions {
  text-align: end;
  white-space: nowrap;
}

.p67-table__select {
  padding-inline-end: 0;
  width: 40px;
}

/* ---------- Status dot ---------- */
.p67-status {
  align-items: center;
  display: inline-flex;
  gap: var(--p67-space-2);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-medium);
  white-space: nowrap;
}

.p67-status::before {
  background: var(--p67-ink-muted);
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}

.p67-status[data-tone="ok"]::before { background: var(--p67-ok); }
.p67-status[data-tone="warn"]::before { background: var(--p67-warn); }
.p67-status[data-tone="danger"]::before { background: var(--p67-danger); }
.p67-status[data-tone="info"]::before { background: var(--p67-info); }
.p67-status[data-tone="busy"]::before {
  background: var(--p67-info);
  animation: p67-pulse 1.6s ease-in-out infinite;
}

@keyframes p67-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .p67-status[data-tone="busy"]::before { animation: none; }
}

/* ---------- Priority marker ---------- */
.p67-priority {
  align-items: center;
  border-radius: var(--p67-radius-sm);
  display: inline-flex;
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.03em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.p67-priority[data-level="urgent"] {
  background: var(--p67-danger-soft);
  color: var(--p67-danger);
}

.p67-priority[data-level="high"] {
  background: var(--p67-warn-soft);
  color: var(--p67-warn);
}

.p67-priority[data-level="normal"] {
  background: var(--p67-surface-3);
  color: var(--p67-ink-muted);
}

.p67-priority[data-level="low"] {
  background: transparent;
  color: var(--p67-ink-muted);
}

/* ---------- Row actions ---------- */
.p67-row-actions {
  display: inline-flex;
  gap: var(--p67-space-1);
  justify-content: flex-end;
}

.p67-row-action {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink-muted);
  display: inline-flex;
  gap: var(--p67-space-2);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-medium);
  height: var(--p67-control-h-sm);
  padding-inline: var(--p67-space-2);
  text-decoration: none;
  transition: background var(--p67-transition), color var(--p67-transition), border-color var(--p67-transition);
}

.p67-row-action:hover {
  background: var(--p67-surface-3);
  border-color: var(--p67-border);
  color: var(--p67-ink);
}

.p67-row-action i {
  height: 14px;
  width: 14px;
}

/* Destructive actions stay quiet until intent is shown. A red button repeated
   down every row trains people to ignore it. */
.p67-row-action[data-tone="danger"] {
  color: var(--p67-ink-muted);
}

.p67-row-action[data-tone="danger"]:hover {
  background: var(--p67-danger-soft);
  border-color: transparent;
  color: var(--p67-danger);
}

/* ---------- Toolbar above a table ---------- */
.p67-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--p67-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-2);
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-toolbar__spacer {
  flex: 1 1 auto;
}

.p67-toolbar__count {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
}

/* Bulk bar only asserts itself once a row is selected. */
.p67-toolbar[data-selection="none"] .p67-toolbar__bulk {
  display: none;
}

/* ---------- Focus ---------- */
:is(.p67-console-body, .p67-client-portal-body) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: var(--p67-focus-ring);
  outline: none;
}

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .p67-topbar__menu-toggle {
    display: inline-flex;
  }

  .p67-topbar__link span {
    display: none;
  }

  .p67-stat-strip {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .p67-stat-strip__item:nth-child(n) {
    border-inline-start: 0;
    border-top: 1px solid var(--p67-border);
  }

  .p67-stat-strip__item:first-child {
    border-top: 0;
  }
}

/* Long free-text cells truncate rather than forcing the table wider than the
   viewport — horizontal scrolling to reach row actions is a usability trap. */
.p67-table__truncate {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon-only row actions keep the action column narrow enough that it stays
   on screen at laptop widths. Each carries an aria-label + title. */
.p67-row-action--icon {
  justify-content: center;
  padding-inline: 0;
  width: var(--p67-control-h-sm);
}

/* Secondary detail lines inside the primary cell. */
.p67-table__sub {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  margin-top: 1px;
}

/* Columns that earn their place on wide screens but are droppable when space
   is tight. The data stays reachable on the record's own page. */
@media (max-width: 1250px) {
  .p67-table [data-col="optional"] {
    display: none;
  }
}

/* The primary column absorbs leftover width so titles get room to breathe
   instead of wrapping to three lines in a narrow column. */
.p67-table__col-grow {
  width: 100%;
}

.p67-table__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline metadata row: discrete chips instead of a hyphen-separated run. */
.p67-meta-row {
  align-items: center;
  color: var(--p67-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--p67-text-xs);
  gap: var(--p67-space-2);
}

/* ---------- Scrollbars ----------
   Default UA scrollbars stay light in dark mode and glare against the console
   surfaces. color-scheme handles Firefox and modern Chromium; the -webkit
   rules cover older WebKit that ignores it. */
:is(.p67-console-body, .p67-client-portal-body) {
  scrollbar-color: var(--p67-border-strong) transparent;
  scrollbar-width: thin;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-track {
  background: transparent;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-thumb {
  background: var(--p67-border-strong);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: var(--p67-radius-pill);
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-thumb:hover {
  background: var(--p67-ink-muted);
  background-clip: content-box;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-corner {
  background: transparent;
}

/* Inline error text inside a table cell. */
.p67-table__error {
  color: var(--p67-danger);
}

/* ---------- v3 chrome restraint ----------
   The console and client shells use the brand colour for actions and links,
   not for chrome. Neutral surfaces keep dense pages professional and stop the
   accent from competing with status colours. */
.p67-topbar__context {
  background: var(--p67-surface-3);
  color: var(--p67-ink-muted);
}

:is(.p67-console-body, .p67-client-portal-body) .sidebar-label {
  color: var(--p67-ink-muted);
}

/* Secondary buttons read as neutral controls, not tinted ones. */
:is(.p67-console-body, .p67-client-portal-body) .p67-button--secondary {
  --_bg: var(--p67-surface-1);
  --_fg: var(--p67-ink-soft);
  --_bd: var(--p67-border-strong);
}

:is(.p67-console-body, .p67-client-portal-body) .p67-button--secondary:hover {
  --_bg: var(--p67-surface-3);
  --_fg: var(--p67-ink);
}

/* Page eyebrow was a saturated brand line above every title. */
:is(.p67-console-body, .p67-client-portal-body) .p67-page-header__eyebrow {
  color: var(--p67-ink-muted);
}

/* ---------- Hooks the design audit found unstyled ----------
   Each of these classes was live in markup with no rule behind it. Found by
   apps/core/design_audit.py, which flags any p67-* class a page uses but none
   of its linked stylesheets define. */

/* Dropdown anchor for the top-bar account menu. */
.p67-topbar__account {
  position: relative;
}

/* The theme toggle is styled by the marketing bundle, which console pages do
   not load — so the console needs its own rule. Sizing comes from
   .p67-topbar__icon-button; this only guarantees the icon swap works. */
.p67-console-body .p67-theme-toggle [data-p67-theme-icon][hidden] {
  display: none;
}

/* Filter bar sub-elements (audit log). */
.p67-filter-bar__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
}

.p67-filter-bar__actions {
  align-items: center;
  display: flex;
  gap: var(--p67-space-2);
}

/* Two-column layout for the admin overview's orders/failures cards. */
.p67-admin-queues {
  display: grid;
  gap: var(--p67-console-section-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Failure feed on the admin overview. */
.p67-failure-feed {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-2);
}

/* Settings cards that span more of the grid. */
.p67-settings-card-wide {
  grid-column: 1 / -1;
}

.p67-settings-card-wideish {
  grid-column: span 2;
}

/* Primary line inside the client credit summary card. */
.p67-billing-credit-card__main {
  display: flex;
  align-items: baseline;
  gap: var(--p67-space-2);
}

/* ---------- Client dashboard: balance + pooled bandwidth ----------
   Bandwidth is an account-level pool, so the dashboard shows one meter for the
   whole account rather than a figure per server. There is no "pending charges"
   tile: usage is charged as it accrues, so nothing is ever pending. */
.p67-dashboard-summary {
  display: grid;
  gap: var(--p67-console-section-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

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

.p67-balance-figure {
  font-family: 'Space Grotesk', var(--p67-font-sans, sans-serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--p67-ink);
  margin-bottom: .35rem;
}

/* align-content: start is load-bearing. These are siblings in a grid row, so
   the shorter card stretches to the taller one's height; as a plain grid it
   then distributed that slack *between* its header and its figure, opening an
   empty band across the middle of the balance card that read as a rendering
   fault. Packing the rows to the top keeps the figure under its own heading. */
.p67-balance-card,
.p67-bandwidth-card {
  align-content: start;
  display: grid;
  gap: var(--p67-space-3, 0.75rem);
}

.p67-bandwidth-meter {
  display: grid;
  gap: var(--p67-space-2, 0.5rem);
}

.p67-link-arrow {
  color: var(--p67-brand);
  font-weight: var(--p67-fw-semibold, 600);
  text-decoration: none;
}

.p67-link-arrow:hover {
  color: var(--p67-brand);
  text-decoration: underline;
}

.p67-bandwidth-meter__track {
  background: var(--p67-surface-3);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  position: relative;
}

.p67-bandwidth-meter__fill {
  background: var(--p67-brand);
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: width .3s ease;
}

.p67-bandwidth-meter__fill.is-over {
  background: var(--p67-danger, #dc2626);
}

.p67-bandwidth-meter__scale {
  color: var(--p67-ink-muted);
  display: flex;
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  justify-content: space-between;
  margin-top: .5rem;
}

.p67-bandwidth-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.1rem;
}

.p67-bandwidth-facts > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.p67-bandwidth-facts__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.p67-bandwidth-facts__over {
  color: var(--p67-danger, #dc2626);
}

/* ---------- Client dashboard: pooled bandwidth Pool/Usage chart ----------
   Two rows on one shared scale (not a progress meter): a meter clips at 100%,
   so it cannot show usage overshooting the pool, which is exactly the state a
   customer most needs to see. */
.p67-bw-chart {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.p67-bw-chart__row {
  align-items: center;
  display: grid;
  gap: .85rem;
  grid-template-columns: 4.25rem minmax(0, 1fr) 5.5rem;
}

.p67-bw-chart__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.p67-bw-chart__track {
  background: var(--p67-surface-3);
  border-radius: 4px;
  height: 22px;
  overflow: hidden;
}

.p67-bw-chart__bar {
  border-radius: 4px;
  display: block;
  height: 100%;
  min-width: 2px;
  transition: width .3s ease;
}

.p67-bw-chart__bar--pool {
  background: color-mix(in srgb, var(--p67-brand) 28%, transparent);
}

.p67-bw-chart__bar--usage {
  background: var(--p67-brand);
}

.p67-bw-chart__bar--usage.is-over {
  background: var(--p67-danger, #dc2626);
}

.p67-bw-chart__value {
  color: var(--p67-ink);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  text-align: right;
}

@media (max-width: 560px) {
  .p67-bw-chart__row {
    grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem;
    gap: .5rem;
  }
}

/* ---------- Vultr-style detail surfaces ----------
   Detail pages were a stack of equal-weight cards. These primitives give a
   single overview composition (hero + 3-col facts) and quieter secondary
   sections so power actions, access credentials, and specs read first. */

.p67-detail {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-4);
}

.p67-detail-hero {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-4);
  justify-content: space-between;
}

.p67-detail-hero__meta {
  align-items: center;
  color: var(--p67-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--p67-text-dense);
  gap: .3rem .75rem;
  margin-top: 3px;
}

.p67-detail-hero__meta .p67-status,
.p67-detail-hero__meta .p67-badge {
  flex: 0 0 auto;
}

.p67-detail-hero__crumb {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}

.p67-detail-hero__crumb:hover {
  color: var(--p67-brand);
}

/* Kept in step with .p67-page-header__title — the console renders both header
   components depending on the page, and a 28px title on one page next to a 20px
   title on the next made the two look like different products. */
.p67-detail-hero__title {
  font-family: var(--p67-font-head);
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  font-weight: var(--p67-fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 2px 0 0;
}

.p67-detail-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-2);
}

.p67-detail-actions--spaced {
  margin-top: var(--p67-space-3);
}

.p67-detail-actions form {
  margin: 0;
}

/* One overview panel, three equal columns — Access / Specs / Server. */
.p67-overview {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.p67-overview__col {
  min-width: 0;
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-overview__col + .p67-overview__col {
  border-left: 1px solid var(--p67-border);
}

.p67-overview__heading {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .04em;
  margin: 0 0 var(--p67-space-3);
  text-transform: uppercase;
}

/* Dense label/value pairs (Vultr server info rows). */
.p67-kv {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.p67-kv__row {
  align-items: baseline;
  display: grid;
  gap: var(--p67-space-3);
  grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr);
}

.p67-kv__row dt {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-medium);
  margin: 0;
}

.p67-kv__row dd {
  color: var(--p67-ink);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  margin: 0;
  overflow-wrap: anywhere;
}

.p67-kv__row dd.p67-kv__mono,
.p67-kv__mono {
  font-family: var(--p67-font-data);
  font-feature-settings: var(--p67-font-feature-tabular);
  font-weight: var(--p67-fw-medium);
}

.p67-kv__reveal {
  display: inline;
}

.p67-kv__reveal > summary {
  cursor: pointer;
  list-style: none;
}

.p67-kv__reveal > summary::-webkit-details-marker {
  display: none;
}

.p67-kv__secret {
  background: var(--p67-surface-2);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-sm);
  display: inline-block;
  font-family: var(--p67-font-data);
  font-size: var(--p67-text-dense);
  margin-top: .35rem;
  padding: .2rem .5rem;
  user-select: all;
}

/* Secondary blocks under the overview — quieter than a full card stack. */
.p67-detail-section {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
}

.p67-detail-section__header {
  align-items: center;
  border-bottom: 1px solid var(--p67-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-3);
  justify-content: space-between;
  padding: .85rem var(--p67-space-5);
}

.p67-detail-section__title {
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  margin: 0;
}

.p67-detail-section__subtitle {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  margin: .15rem 0 0;
}

.p67-detail-section__body {
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-detail-section__copy {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-sm);
  margin: 0;
}

.p67-detail-section--danger .p67-detail-section__header {
  background: color-mix(in srgb, var(--p67-danger-soft) 55%, transparent);
}

.p67-detail-section--danger .p67-detail-section__title {
  color: var(--p67-danger);
}

.p67-detail-grid {
  display: grid;
  gap: var(--p67-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Compact fact strip under admin detail heroes. */
.p67-fact-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--p67-border);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  overflow: hidden;
}

.p67-fact-strip__item {
  background: var(--p67-surface-1);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-fact-strip__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.p67-fact-strip__value {
  color: var(--p67-ink);
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.p67-fact-strip__meta {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  line-height: 1.35;
}

/* Instance list closer to Vultr's Products table. */
.p67-instance-table .p67-table__title a {
  color: var(--p67-ink);
  font-weight: var(--p67-fw-semibold);
  text-decoration: none;
}

.p67-instance-table .p67-table__title a:hover {
  color: var(--p67-brand);
  text-decoration: underline;
}

.p67-instance-table__select {
  width: 1rem;
}

.p67-toolbar-bulk {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-2);
}

@media (max-width: 960px) {
  .p67-overview {
    grid-template-columns: 1fr;
  }

  .p67-overview__col + .p67-overview__col {
    border-left: 0;
    border-top: 1px solid var(--p67-border);
  }

  .p67-detail-grid {
    grid-template-columns: 1fr;
  }

  .p67-fact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .p67-fact-strip {
    grid-template-columns: 1fr;
  }

  .p67-kv__row {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
}

/* ---------- Client billing: buy bandwidth ---------- */
.p67-bw-buy {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.p67-bw-buy__field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 9rem;
}

.p67-bw-buy__renew {
  align-items: center;
  display: flex;
  gap: .4rem;
  font-size: var(--p67-text-sm);
  color: var(--p67-ink-soft);
}

.p67-bw-buy__hint {
  color: var(--p67-ink-muted);
  flex: 1 1 100%;
  font-size: var(--p67-text-xs);
  margin: 0;
}