/* LayerOne shared component layer (Phase 1 of the frontend overhaul).
   Token-driven, theme-aware primitives shared by the marketing site, client
   area, and admin console. Live names include l1-pager, l1-filter-bar,
   l1-topbar, l1-priority, l1-row-action, and l1-dialog. Legacy .l1-btn
   (marketing) is intentionally left untouched. */

/* Page header: .l1-page-header is gone — .ui-page__head in assets/tailwind.css
   owns the console page header now. */

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

/* ---------- Filter bar ---------- */
.l1-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--l1-space-3);
  padding: var(--l1-space-3) var(--l1-space-4);
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  margin-bottom: var(--l1-space-4);
}

/* Inside a panel the outer hairline already groups the section. */
.ui-panel .l1-filter-bar {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--l1-border);
  border-radius: 0;
}
.l1-filter-bar--compact {
  margin: 0;
  padding: var(--l1-space-1) var(--l1-space-2);
}
.l1-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-1);
}
.l1-filter-bar__field--grow {
  flex: 1 1 280px;
}
.l1-filter-bar__field > span {
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--l1-ink-muted);
}
.l1-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.l1-filter-bar select {
  padding: var(--l1-space-2) var(--l1-space-3);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-sm);
  background: var(--l1-surface-1);
  color: var(--l1-ink);
  font-size: var(--l1-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 LayerOne tokens so every .btn-primary, badge, link, and
   subtle surface across those surfaces adopts the unified brand blue in light
   and dark mode — without touching individual templates. Loaded last, so it wins
   over the CDN defaults.

   The -rgb triples must be kept numerically equal to --l1-brand: Bootstrap
   builds its own alpha colours with rgba(var(--bs-primary-rgb), …), so a var()
   cannot be used here. There is no way to make the compiler check this, so when
   a brand token changes, these change in the same edit — they have silently
   drifted from the token twice already, and the symptom is subtle: solid fills
   look right and only the alpha tints (table hovers, focus washes, .bg-primary
   bg-opacity utilities) keep the old hue. */
:root {
  --bs-primary: var(--l1-brand);
  --bs-primary-rgb: 37, 99, 235;         /* #2563eb — --l1-brand */
  --bs-primary-bg-subtle: var(--l1-brand-soft);
  --bs-primary-border-subtle: var(--l1-brand-border);
  --bs-primary-text-emphasis: var(--l1-brand-strong);
  --bs-link-color: var(--l1-brand);
  --bs-link-color-rgb: 37, 99, 235;      /* #2563eb — --l1-brand */
  --bs-link-hover-color: var(--l1-brand-strong);
  --bs-border-radius: var(--l1-radius-md);
  --bs-border-radius-sm: var(--l1-radius-sm);
}
[data-l1-theme="dark"] {
  --bs-primary: var(--l1-brand);
  --bs-primary-rgb: 96, 165, 250;        /* #60a5fa — dark --l1-brand */
  --bs-primary-bg-subtle: var(--l1-brand-soft);
  --bs-primary-border-subtle: var(--l1-brand-border);
  --bs-primary-text-emphasis: var(--l1-brand-strong);
  --bs-link-color: var(--l1-brand-strong);
  --bs-link-color-rgb: 147, 197, 253;    /* #93c5fd — dark --l1-brand-strong */
  --bs-link-hover-color: var(--l1-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(--l1-brand);
  --bs-btn-border-color: var(--l1-brand);
  --bs-btn-hover-bg: var(--l1-brand-strong);
  --bs-btn-hover-border-color: var(--l1-brand-strong);
  --bs-btn-active-bg: var(--l1-brand-strong);
  --bs-btn-active-border-color: var(--l1-brand-strong);
  --bs-btn-disabled-bg: var(--l1-brand);
  --bs-btn-disabled-border-color: var(--l1-brand);
  --bs-btn-color: var(--l1-on-brand);
  --bs-btn-hover-color: var(--l1-on-brand);
  --bs-btn-active-color: var(--l1-on-brand);
  --bs-btn-disabled-color: var(--l1-on-brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--l1-brand);
  --bs-btn-border-color: var(--l1-brand);
  --bs-btn-hover-bg: var(--l1-brand);
  --bs-btn-hover-border-color: var(--l1-brand);
  --bs-btn-hover-color: var(--l1-on-brand);
  --bs-btn-active-bg: var(--l1-brand);
  --bs-btn-active-border-color: var(--l1-brand);
  --bs-btn-active-color: var(--l1-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(.l1-console-body, .l1-client-portal-body) .form-check-input {
  background-color: var(--l1-surface-1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid var(--l1-border-strong);
  box-shadow: none;
  flex-shrink: 0;
  height: 1rem;
  margin-top: 0;
  width: 1rem;
}

:is(.l1-console-body, .l1-client-portal-body) .form-check-input[type="checkbox"]:checked {
  background-color: var(--l1-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(--l1-brand);
}

:is(.l1-console-body, .l1-client-portal-body) .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--l1-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(--l1-brand);
}

:is(.l1-console-body, .l1-client-portal-body) .form-check-input[type="radio"]:checked {
  background-color: var(--l1-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(--l1-brand);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .l1-responsive-table table tbody td[data-label=""]::before,
  .l1-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. */
.l1-console-body {
  --l1-console-section-gap: 1.75rem;
  --l1-console-block-gap: 1.25rem;
}

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

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

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

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

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

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

.l1-client-nav-loader {
  align-items: flex-start;
  background: color-mix(in srgb, var(--l1-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.l1-console-body .l1-stat {
  padding: var(--l1-space-5);
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  transition: border-color var(--l1-transition);
}

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

.l1-console-body a.l1-stat:hover {
  border-color: var(--l1-brand-border);
  box-shadow: none;
  transform: none;
}

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Flatter nested surfaces ---------- */
/* Keep these selectors on one line per compound. A previous line-wise sweep that
   deleted the dead .l1-card / .l1-data-list classes chopped the middle out of
   two `:is(` lists and left them unclosed — which does not fail loudly, it makes
   the CSS parser swallow every rule after this block. .l1-topbar, .l1-table,
   .l1-status and the rest of the components below silently stopped
   existing. */
:is(.l1-console-body, .l1-client-portal-body)
  :is(.panel, .card)
  > :is(.form-card.card, .table-list, .list-group) {
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

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

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

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

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

.l1-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.l1-thread-message {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--l1-border);
  border-radius: 0;
  display: grid;
  gap: var(--l1-space-2) var(--l1-space-3);
  padding: var(--l1-space-4) 0;
}

.l1-thread-message:first-child { padding-top: 0; }

.l1-thread-message:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Avatar + copy share one grid so the body hangs from the name, not from the
   left edge of the panel. Without an avatar (outage timeline) the message is
   a single column. */
.l1-thread-message:has(.l1-thread-message__avatar) {
  grid-template-columns: 1.75rem minmax(0, 1fr);
}

.l1-thread-message__avatar {
  align-items: center;
  background: var(--l1-surface-2);
  border-radius: 50%;
  color: var(--l1-ink-muted);
  display: inline-flex;
  flex: none;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 1.75rem;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  width: 1.75rem;
}

.l1-thread-message--staff .l1-thread-message__avatar {
  background: var(--l1-brand-soft);
  color: var(--l1-brand-strong);
}

.l1-thread-message--internal .l1-thread-message__avatar {
  background: color-mix(in srgb, var(--l1-warn) 18%, transparent);
  color: var(--l1-warn);
}

.l1-thread-message:has(.l1-thread-message__avatar) .l1-thread-message__head,
.l1-thread-message:has(.l1-thread-message__avatar) .l1-thread-message__body {
  grid-column: 2;
}

.l1-thread-message__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  min-width: 0;
}

.l1-thread-message__who {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  min-width: 0;
}

.l1-thread-message__who strong {
  font-size: var(--l1-text-dense);
}

.l1-thread-message__who a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--l1-ink) 28%, transparent);
  text-underline-offset: 0.18em;
}

.l1-thread-message__who a:hover {
  color: var(--l1-brand);
  text-decoration-color: var(--l1-brand);
}

.l1-thread-message__time {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  margin-left: auto;
  white-space: nowrap;
}

.l1-thread-message__body {
  color: var(--l1-ink);
  font-size: var(--l1-text-dense);
  line-height: 1.55;
  min-width: 0;
  overflow-wrap: anywhere;
}

.l1-thread-message__body p { margin: 0; }

.l1-thread-message__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  margin-top: var(--l1-space-3);
}

/* Internal notes are inset cards, not a tint that fights the first/last
   padding rules (those used to strip the top padding off a leading note and
   the bottom border off a trailing one). */
.l1-thread-message--internal {
  background: var(--l1-warn-soft);
  border: 1px solid color-mix(in srgb, var(--l1-warn) 28%, transparent);
  border-radius: var(--l1-radius-sm);
  margin: var(--l1-space-2) 0;
  padding: var(--l1-space-3);
}

.l1-thread-message--internal:first-child { margin-top: 0; }
.l1-thread-message--internal:last-child { margin-bottom: 0; }

@media (max-width: 575px) {
  .l1-thread-message__time { margin-left: 0; }
}

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

}

/* ---------- Ambient canvas (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. */
.auth-body {
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--l1-brand) 8%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--l1-accent) 6%, transparent), transparent 24rem),
    var(--l1-surface-2);
}

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

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

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

/* Callout card: .l1-callout is gone; the portal uses .ui-panel / .ui-notice. */

/* ---------- Checkout workspace (configuration + review panel) ---------- */
/* .l1-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. */
.l1-order-workspace {
  align-items: start;
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

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

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

.l1-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. */
.l1-panel-pair {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

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

  .l1-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 is a raised fill and a 1px stronger border, the same
   recipe as the sidebar current item. A brand wash plus inset bar was the
   loudest thing on checkout, and it forced compensating text-colour
   overrides. Selection now means one thing and the text needs no
   compensating override. */
.l1-choice-list {
  display: grid;
  gap: var(--l1-space-2);
}

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

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

.l1-choice.is-selected {
  background: var(--l1-selected-bg, var(--l1-surface-2));
  border-color: var(--l1-selected-border, var(--l1-border-strong));
  box-shadow: none;
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 991.98px) {
}

@media (max-width: 1199.98px) {
  .l1-topbar__account-copy,
  .l1-topbar__account-chevron {
    display: none;
  }
}

@media (max-width: 575.98px) {
}

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

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

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

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

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

:is(.l1-console-body, .l1-client-portal-body) .panel .panel,
:is(.l1-console-body, .l1-client-portal-body) .panel .card,
:is(.l1-console-body, .l1-client-portal-body) .ui-panel .panel,
:is(.l1-console-body, .l1-client-portal-body) .ui-panel .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
/* Console layer — dense application UI
   --------------------------------------------------------------------------
   Added as part of the console 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.
   ========================================================================== */

/* ---------- Notification bell ----------
   Public site: right end of the contact strip. Client area: top-bar actions,
   immediately left of the avatar. The trigger is styled from `currentColor`
   so it follows whichever chrome it sits in. Only the badge and the panel
   commit to colours of their own. */
.l1-notifbell {
  display: inline-flex;
}

/* Pulls the marketing-strip bell back toward the email address it follows.
   The strip's own column gap is sized for two text links and reads as a gap
   in the row when an icon button sits at the end of it. The client top bar
   does not want that pull: it already gaps its actions. */
.l1-contactbar .l1-notifbell {
  margin-inline-start: calc(var(--l1-space-3) * -1);
}

.l1-notifbell__button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  padding: 5px 7px;
  /* Anchors the badge, which is positioned against the button rather than the
     icon glyph: the glyph's box changes width with the icon font's metrics. */
  position: relative;
  transition: background var(--l1-transition), color var(--l1-transition);
}

/* A neutral grey wash rather than a token: this one rule has to read as a
   subtle hover on a near-black strip and on a near-white one, and a surface
   token resolves to one of those two and disappears against it. */
.l1-notifbell__button:hover,
.l1-notifbell__button:focus-visible,
.l1-notifbell__button[aria-expanded="true"] {
  background: rgba(128, 128, 128, .22);
  color: inherit;
}

.l1-notifbell__button i {
  font-size: .95rem;
}

/* A fixed red rather than --l1-danger, and the one literal in this section that
   earns its place. The badge has to carry white text on three strips at once,
   and the token cannot: in dark mode --l1-danger resolves to the pale #f87171
   that dark surfaces need for *text*, which leaves white-on-pale-red at about
   2.3:1 here. Fixed keeps the count legible everywhere and keeps the badge
   reading as the same object on the public site and in the client area.

   Solid, not one of the rail's translucent status fills: those are for state
   labels that sit inside a row and must not shout. An unread count is the one
   thing in the strip whose whole job is to be seen first. */
.l1-notifbell__badge {
  background: #c92a2a;
  border-radius: var(--l1-radius-pill);
  color: #fff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-bold);
  line-height: 1.4;
  min-width: 15px;
  padding-inline: 4px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transform: translate(35%, -25%);
}

.l1-notifbell__menu {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-lg);
  color: var(--l1-text);
  /* Tall enough for the eight-row preview, capped so a full panel scrolls
     instead of running off a laptop viewport. */
  max-height: 26rem;
  overflow-y: auto;
  padding: 0;
  width: min(320px, calc(100vw - 24px));
}

/* Bootstrap paints .dropdown-item and .dropdown-divider from --bs-dropdown-*
   variables, which follow data-bs-theme and know nothing about which surface
   this panel actually landed on. Left alone that is fine on the public site and
   wrong on the rail, where light mode would put near-black link text and a grey
   hover on an ink-navy panel. Restating them against l1 tokens is what lets the
   strip's re-point carry the whole panel onto the rail. */
.l1-notifbell__menu .dropdown-item {
  color: var(--l1-text);
}

.l1-notifbell__menu .dropdown-item:hover,
.l1-notifbell__menu .dropdown-item:focus {
  background: var(--l1-surface-2);
  color: var(--l1-text);
}

.l1-notifbell__menu .dropdown-divider {
  border-color: var(--l1-border);
}

.l1-notifbell__head {
  align-items: baseline;
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-text-muted);
  display: flex;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  justify-content: space-between;
  letter-spacing: .04em;
  padding: var(--l1-space-2) var(--l1-space-3);
  text-transform: uppercase;
}

.l1-notifbell__head-count {
  color: var(--l1-danger);
}

/* Grid, not the inherited single-line .dropdown-item: a ticket subject is
   free text and has to be allowed to wrap. */
.l1-notifbell__menu .l1-notifbell__item {
  display: grid;
  gap: 1px;
  padding: var(--l1-space-2) var(--l1-space-3);
  white-space: normal;
}

.l1-notifbell__item-title {
  color: var(--l1-text);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
}

.l1-notifbell__item-subject {
  color: var(--l1-text-muted);
  font-size: var(--l1-text-xs);
  /* Two lines of subject, then an ellipsis. A long one otherwise turns a row
     into a paragraph and pushes the rest of the feed out of view. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.l1-notifbell__item-meta {
  color: var(--l1-text-dim);
  font-size: var(--l1-text-micro);
}

.l1-notifbell__empty,
.l1-notifbell__note {
  color: var(--l1-text-muted);
  font-size: var(--l1-text-xs);
  padding: var(--l1-space-3);
}

.l1-notifbell__note {
  border-top: 1px solid var(--l1-border);
  color: var(--l1-text-dim);
  font-size: var(--l1-text-micro);
  padding-block: var(--l1-space-2);
}

.l1-notifbell__menu .l1-notifbell__all {
  align-items: center;
  display: flex;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-2);
  padding: var(--l1-space-2) var(--l1-space-3);
}

/* Client top bar: match the neighbouring theme-toggle hit area rather than
   the marketing-strip grey wash. */
.l1-topbar .l1-notifbell {
  color: var(--l1-ink-muted);
}

.l1-topbar .l1-notifbell__button {
  height: var(--l1-control-h-md);
  padding: 0;
  width: var(--l1-control-h-md);
}

/* The base badge sits on the marketing strip's tight padding, then translates
   further out. The top-bar control is a 32px square, so that same corner
   placement floats the count off the glyph; inset it onto the icon instead. */
.l1-topbar .l1-notifbell__badge {
  right: 4px;
  top: 3px;
  transform: none;
}

.l1-topbar .l1-notifbell__button:hover,
.l1-topbar .l1-notifbell__button:focus-visible,
.l1-topbar .l1-notifbell__button[aria-expanded="true"] {
  background: var(--l1-surface-3);
  color: var(--l1-ink);
}

/* ---------- Top bar (stage bar on the floating sheet) ---------- */
.l1-topbar {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-ink);
  display: flex;
  gap: var(--l1-space-3);
  height: var(--l1-topbar-h);
  padding-inline: 1.25rem;
  position: relative;
  top: 0;
  z-index: 40;
}

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

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

html[data-l1-theme="dark"] .l1-console-body .l1-topbar__brand img {
  filter: brightness(0) invert(1);
}

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

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

.l1-topbar__workspace {
  align-items: center;
  display: flex;
  gap: .7rem;
  min-width: 0;
}

.l1-topbar__workspace-icon {
  align-items: center;
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: var(--l1-radius-md);
  color: var(--l1-brand-strong);
  display: inline-flex;
  flex: 0 0 2rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.l1-topbar__workspace-icon i,
.l1-topbar__workspace-icon svg {
  height: .95rem;
  width: .95rem;
}

.l1-topbar__workspace-copy {
  display: grid;
  line-height: 1.15;
  min-width: 0;
}

.l1-topbar__workspace-copy small {
  color: var(--l1-ink-muted);
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.l1-topbar__workspace-copy strong {
  color: var(--l1-ink);
  font-size: .8125rem;
  font-weight: 650;
  margin-top: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

.l1-topbar__account-copy {
  display: grid;
  line-height: 1.15;
  max-width: 10rem;
  min-width: 0;
  text-align: left;
}

.l1-topbar__account-copy strong {
  color: var(--l1-ink);
  font-size: .75rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-topbar__account-copy small {
  color: var(--l1-ink-muted);
  font-size: .625rem;
  margin-top: .15rem;
}

.l1-topbar__account-chevron {
  color: var(--l1-ink-muted);
  height: .85rem;
  width: .85rem;
}

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

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

.l1-topbar__menu .dropdown-item {
  color: var(--l1-ink);
}

.l1-topbar__menu .dropdown-item:hover,
.l1-topbar__menu .dropdown-item:focus {
  background: var(--l1-surface-3);
  color: var(--l1-ink);
}

.l1-topbar__menu .dropdown-divider {
  border-color: var(--l1-border);
}

/* Painted explicitly on the rail: this is a Bootstrap dropdown, whose
   background comes from --bs-body-bg rather than the rail re-point above, so
   left alone it would render a light panel holding rail-tinted text. */
html[data-l1-theme="dark"] .l1-console-body .l1-topbar__menu {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  box-shadow: var(--l1-shadow-lg);
  color: var(--l1-ink);
}

html[data-l1-theme="dark"] .l1-console-body .l1-topbar__menu .dropdown-item {
  color: var(--l1-ink);
}

html[data-l1-theme="dark"] .l1-console-body .l1-topbar__menu .dropdown-item:hover,
html[data-l1-theme="dark"] .l1-console-body .l1-topbar__menu .dropdown-item:focus {
  background: var(--l1-surface-3);
  color: var(--l1-ink);
}

html[data-l1-theme="dark"] .l1-console-body .l1-topbar__menu .dropdown-divider {
  border-color: var(--l1-border);
}

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

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

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

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

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

.l1-topbar__menu form {
  margin: 0;
}

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

/* .l1-stat-strip__value and .l1-table__data are gone — .ui-metric__value and
   .ui-table__data in assets/tailwind.css carry the 18px figure and the tabular
   digit alignment now. */

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

@media (prefers-reduced-motion: reduce) {
}

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

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

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

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

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

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

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

.l1-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. */
.l1-row-action[data-tone="danger"] {
  color: var(--l1-ink-muted);
}

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

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

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

@media (max-width: 900px) {
  .l1-topbar__link span {
    display: none;
  }
}

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

/* Server detail identity: name and status share a line, and the labelled
   toolbar sits beside them instead of being thrown to the far edge of the
   header. */
.ui-page__head.l1-service-head {
  align-items: flex-start;
  justify-content: flex-start;
}

.l1-service-head__title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--l1-space-3);
  row-gap: var(--l1-space-2);
  margin-top: 4px;
}

.l1-service-head__title-row .ui-title {
  margin: 0;
  min-width: 0;
}

.l1-service-head__title-row .ui-status {
  flex: none;
}

.l1-service-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}

.l1-service-controls__power,
.l1-service-controls__more {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}

.l1-service-head__title-row .l1-service-controls,
.l1-service-head__title-row > .l1-row-action {
  flex: none;
}

.l1-service-controls__power + .l1-service-controls__more {
  border-left: 1px solid var(--l1-border);
  margin-left: var(--l1-space-1);
  padding-left: var(--l1-space-3);
}

.l1-service-controls form {
  display: inline-flex;
  margin: 0;
}

.l1-service-controls .ui-btn {
  min-height: var(--l1-control-h-sm);
}

@media (max-width: 575px) {
  .l1-service-controls__power + .l1-service-controls__more {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }
}

/* 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) {
}

/* ---------- Native control theming ----------
   Native widgets a page cannot style directly -- the <select> popup, date
   pickers, spinners -- follow color-scheme, and color-scheme was only ever set
   on :root. On a machine whose OS is in dark mode that left the console's
   select popups painted dark by the OS while the page around them was light,
   so the options rendered white-on-white and the list looked empty.

   Binding it to the app's own theme rather than the OS is the fix. The explicit
   option colours underneath are belt and braces for engines that honour the
   property but not the inherited scheme. */
:is(.l1-console-body, .l1-client-portal-body) {
  color-scheme: light;
}

[data-l1-theme="dark"] :is(.l1-console-body, .l1-client-portal-body) {
  color-scheme: dark;
}

:is(.l1-console-body, .l1-client-portal-body) :is(select, option, optgroup) {
  background-color: var(--l1-surface-1);
  color: var(--l1-ink);
}

/* ---------- 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(.l1-console-body, .l1-client-portal-body) {
  scrollbar-color: var(--l1-border-strong) transparent;
  scrollbar-width: thin;
}

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

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

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

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

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

/* ---------- 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. */
.l1-topbar__context {
  background: var(--l1-surface-3);
  color: var(--l1-ink-muted);
}

:is(.l1-console-body, .l1-client-portal-body) .sidebar-label {
  color: var(--l1-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 l1-* class a page uses but none
   of its linked stylesheets define. */

/* Dropdown anchor for the top-bar account menu. */
.l1-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
   .l1-topbar__icon-button; this only guarantees the icon swap works. */
.l1-console-body .l1-theme-toggle [data-l1-theme-icon][hidden] {
  display: none;
}

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

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

/* Pack queue cards into the shorter column. CSS Grid still sizes each row
   to its tallest item, so a short "Recent outages" card left a blank cell
   beside "Active users" and "Failed work" could not start until that row
   ended. Multi-column layout fills that space. These cards must share one
   packing context — do not split them across two .l1-admin-queues sections.
   inline-block is required because .ui-panel uses overflow:hidden, which
   makes break-inside:avoid a no-op in Chromium. */
.l1-admin-queues {
  column-count: 2;
  column-fill: balance;
  column-gap: var(--l1-console-section-gap);
}

.l1-admin-queues > * {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  display: inline-block;
  margin: 0 0 var(--l1-console-section-gap);
  max-width: 100%;
  min-width: 0;
  vertical-align: top;
  width: 100%;
}

@media (max-width: 720px) {
  .l1-admin-queues {
    column-count: 1;
  }
}

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

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

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

/* Client dashboard: .l1-dashboard-summary, .l1-balance-card and
   .l1-bandwidth-card are gone — the balance/bandwidth composition is built
   from .ui-panel plus tw: grid utilities on the template now. */

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

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

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

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

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

.l1-bandwidth-facts__over {
  color: var(--l1-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. */
.l1-bw-chart {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

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

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

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

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

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

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

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

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

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

.l1-metrics-chart-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.25rem;
}

@media (max-width: 960px) {
  .l1-metrics-chart-grid {
    grid-template-columns: 1fr;
  }
}

.l1-metrics-chart {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md, 6px);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 140px;
  padding: 1rem;
}

.l1-metrics-chart__head {
  align-items: flex-start;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
}

.l1-metrics-chart__title {
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.l1-metrics-chart__stats {
  color: var(--l1-ink-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--l1-text-xs);
  gap: .15rem;
  text-align: right;
}

.l1-metrics-chart__svg {
  display: block;
  height: 80px;
  width: 100%;
}

.l1-metrics-chart__line {
  fill: none;
  stroke: var(--l1-brand);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.l1-metrics-chart__line--compare {
  stroke-opacity: .35;
  stroke-width: 1.25;
}

.l1-metrics-chart__area--compare {
  fill: var(--l1-brand);
  fill-opacity: .12;
  stroke: none;
}

.l1-metrics-chart__compare {
  color: var(--l1-ink-muted);
}

/* Hover readout: the plot wraps the stretched SVG, so the overlay elements
   position with percentages fed by the server-computed point coordinates. */
.l1-metrics-chart__plot {
  cursor: crosshair;
  position: relative;
  touch-action: pan-y;
}

.l1-metrics-chart__crosshair {
  background: var(--l1-border);
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
}

.l1-metrics-chart__marker {
  background: var(--l1-brand);
  border: 2px solid var(--l1-surface-1);
  border-radius: 50%;
  height: 10px;
  margin: -5px 0 0 -5px;
  pointer-events: none;
  position: absolute;
  width: 10px;
}

.l1-metrics-chart__marker--compare {
  opacity: .4;
}

.l1-metrics-chart__tooltip {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md, 6px);
  color: var(--l1-ink);
  font-size: var(--l1-text-xs);
  line-height: 1.45;
  padding: .35rem .55rem;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
  z-index: 5;
}

.l1-metrics-chart__tooltip-swatch {
  background: var(--l1-brand);
  border-radius: 2px;
  display: inline-block;
  height: .55rem;
  margin-right: .35rem;
  width: .55rem;
}

.l1-metrics-chart__tooltip-swatch--compare {
  opacity: .4;
}

.l1-metrics-chart__tooltip-time {
  color: var(--l1-ink-muted);
}

.l1-metrics-chart__empty {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex: 1;
  font-size: var(--l1-text-sm);
  justify-content: center;
  text-align: center;
}

/* ---------- Inline help tooltip ----------
   Circled "?" next to a control. Hover/focus shows the explanation immediately;
   a native title= tooltip has no affordance and a long delay, so it read as
   a stray question mark. Lives outside the checkbox <label> so using it cannot
   toggle the box. Panels clip overflow to their radius, which would hide the
   bubble; these forms have no edge-flush children that need that clip. */
.ui-panel:has(.l1-help) {
  overflow: visible;
}

.l1-check-row:has(> .l1-help) {
  align-items: center;
}

.l1-check-row__control {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  gap: var(--l1-space-2);
  min-width: 0;
}

button.l1-help {
  appearance: none;
  -webkit-appearance: none;
  align-items: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--l1-ink-muted) 50%, transparent);
  border-radius: var(--l1-radius-pill);
  box-sizing: border-box;
  box-shadow: none;
  color: var(--l1-ink-muted);
  cursor: help;
  display: inline-flex;
  flex: none;
  font: inherit;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-height: 1.25rem;
  min-width: 1.25rem;
  overflow: visible;
  padding: 0;
  position: relative;
  transition: background var(--l1-transition), border-color var(--l1-transition), color var(--l1-transition);
  width: 1.25rem;
}

.l1-help__mark {
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-bold);
  pointer-events: none;
}

button.l1-help:hover,
button.l1-help:focus,
button.l1-help:focus-visible {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand);
  color: var(--l1-brand);
}

button.l1-help:focus-visible {
  box-shadow: var(--l1-focus-ring);
  outline: none;
}

.l1-help__tip {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  box-shadow: var(--l1-shadow-md);
  color: var(--l1-ink);
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-normal);
  left: auto;
  line-height: 1.45;
  max-width: min(18rem, calc(100vw - 3rem));
  opacity: 0;
  padding: .5rem .65rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: left;
  top: calc(100% + 8px);
  transform: translateY(-2px);
  transition: opacity var(--l1-transition), transform var(--l1-transition);
  visibility: hidden;
  white-space: normal;
  width: max-content;
  z-index: 8;
}

button.l1-help:hover .l1-help__tip,
button.l1-help:focus .l1-help__tip,
button.l1-help:focus-visible .l1-help__tip {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* ---------- Server action tiles ----------
   The service detail page leads with a grid of large action tiles (power,
   console, usage, upgrade, settings) instead of a row of small header
   buttons. Forms render display:contents so the buttons themselves are the
   flex items. Destructive actions never belong here - they stay in the
   quiet danger panel at the bottom of the page. */
.l1-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.l1-action-grid form {
  display: contents;
}

.l1-action-tile {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md, 6px);
  color: var(--l1-ink);
  cursor: pointer;
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  font: inherit;
  gap: .5rem;
  justify-content: center;
  min-width: 0;
  padding: 1rem .75rem;
  text-align: center;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}

.l1-action-tile:hover,
.l1-action-tile:focus-visible {
  background: var(--l1-surface-2);
  border-color: var(--l1-brand);
  color: var(--l1-ink);
  text-decoration: none;
}

.l1-action-tile:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.l1-action-tile:disabled:hover {
  background: var(--l1-surface-1);
  border-color: var(--l1-border);
}

/* The icon sits in a tinted rounded container rather than floating loose on the
   tile, which is the same treatment .l1-bento-icon gives the public site's
   feature cards — these tiles are the first thing in the client area and read as
   a different product when their icons are a bare 20px glyph.

   Built from --l1-brand-soft / --l1-brand-border rather than a literal colour so
   it follows the dark-mode token swap and the console's deeper brand step. */
.l1-action-tile__icon {
  align-items: center;
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-brand);
  display: inline-flex;
  flex: none;
  height: 34px;
  justify-content: center;
  transition: background var(--l1-transition), border-color var(--l1-transition);
  width: 34px;
}

.l1-action-tile__icon svg {
  height: 18px;
  width: 18px;
}

.l1-action-tile:hover .l1-action-tile__icon,
.l1-action-tile:focus-visible .l1-action-tile__icon {
  background: color-mix(in srgb, var(--l1-brand) 16%, transparent);
  border-color: var(--l1-brand);
}

/* Disabled tiles keep the flat resting state — the hover rule above is scoped to
   :hover on the tile, which still fires on a disabled button in some browsers. */
.l1-action-tile:disabled:hover .l1-action-tile__icon {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
}

.l1-action-tile__label {
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
}

/* ---------- Deploy configurator ----------
   A three-step builder with one launch manifest. The left side owns choices;
   the sticky right side confirms the result and the exact next action.
   `.l1-deploy-step` is this wizard only — the homepage Instant Deploy mockup
   has its own `.l1-deploy-tick` class because this file loads after the
   marketing bundle and a shared name flattened that stepper. */
.l1-deploy-balance {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: flex;
  gap: var(--l1-space-3);
  min-width: 14rem;
  padding: var(--l1-space-2) var(--l1-space-3);
}

.l1-deploy-balance__icon {
  align-items: center;
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-brand-strong);
  display: inline-flex;
  flex: none;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.l1-deploy-balance__icon svg,
.l1-deploy-balance__icon i[data-lucide] {
  height: 16px;
  width: 16px;
}

.l1-deploy-balance__copy {
  display: grid;
  min-width: 0;
}

.l1-deploy-balance__copy > span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.l1-deploy-balance__copy strong {
  color: var(--l1-ink);
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-base);
  line-height: 1.2;
}

.l1-deploy-balance__copy small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
}

.ui-page.l1-deploy-page {
  gap: var(--l1-space-4);
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

.l1-deploy-page .ui-page__head {
  align-items: center;
  gap: var(--l1-space-3);
}

.l1-order-workspace.l1-deploy-layout {
  gap: var(--l1-space-3);
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 22rem);
}

.l1-deploy-builder {
  container-name: deploy-builder;
  container-type: inline-size;
  min-width: 0;
  overflow: hidden;
}

.l1-deploy-stages {
  display: flex;
  gap: var(--l1-space-2);
  border-bottom: 1px solid var(--l1-border);
  overflow-x: auto;
  padding: var(--l1-space-3) var(--l1-space-5) 0;
}

.l1-deploy-stages__item {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--l1-space-2);
  font: inherit;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  margin-bottom: -1px;
  padding: 0 0 var(--l1-space-3);
}

.l1-deploy-stages__item span {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  display: inline-flex;
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-micro);
  height: 1.35rem;
  justify-content: center;
  width: 1.35rem;
}

.l1-deploy-stages__item.is-current {
  border-bottom-color: var(--l1-brand);
  color: var(--l1-ink);
}

.l1-deploy-stages__item.is-current span {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
}

.l1-deploy-plan-table {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  overflow: hidden;
  width: 100%;
}

.l1-deploy-plan-table__head,
.l1-deploy-plan-table__row {
  align-items: center;
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: minmax(11rem, 1.5fr) repeat(3, minmax(4.5rem, .5fr)) minmax(7.25rem, .7fr);
}

.l1-deploy-plan-table__head {
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  padding: .5rem var(--l1-space-4);
  text-transform: uppercase;
}

.l1-deploy-plan-table__head span:not(:first-child),
.l1-deploy-plan-table__cell,
.l1-deploy-plan-table__price {
  text-align: right;
}

.l1-deploy-plan-table__group {
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  padding: .45rem var(--l1-space-3);
  text-transform: uppercase;
}

.l1-deploy-plan-table__row {
  appearance: none;
  background: var(--l1-surface-1);
  border: 0;
  border-bottom: 1px solid var(--l1-border);
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: .55rem var(--l1-space-4);
  position: relative;
  text-align: left;
  width: 100%;
}

.l1-deploy-plan-table__row:last-child {
  border-bottom: 0;
}

.l1-deploy-plan-table__row:hover {
  background: var(--l1-surface-2);
}

.l1-deploy-plan-table__row.is-selected {
  background: var(--l1-selected-bg, var(--l1-surface-2));
  box-shadow: none;
}

.l1-deploy-plan-table__row[hidden],
.l1-deploy-plan-table__group[hidden] {
  display: none !important;
}

.l1-deploy-plan-table__name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.l1-deploy-plan-table__name strong {
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
}

.l1-deploy-plan-table__name small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
}

.l1-deploy-plan-table__chips {
  display: none;
}

.l1-deploy-plan-table__cell,
.l1-deploy-plan-table__price {
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-dense);
}

.l1-deploy-plan-table__price {
  display: grid;
  justify-items: end;
  line-height: 1.2;
}

.l1-deploy-plan-table__price strong {
  font-size: var(--l1-text-base);
}

.l1-deploy-plan-table__price small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
}

.l1-pick-grid.l1-deploy-access {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l1-deploy-access .l1-pick {
  align-items: flex-start;
  min-height: 4.5rem;
}

.l1-deploy-access .l1-pick__label {
  white-space: normal;
}

.l1-deploy-vnet {
  display: grid;
  gap: var(--l1-space-3);
}

.l1-deploy-vnet > .l1-pick {
  width: 100%;
}

.l1-deploy-vnet__fields {
  display: grid;
  gap: var(--l1-space-3);
  padding-left: var(--l1-space-2);
}

[data-deploy-panel="configure"] .l1-deploy-step {
  grid-template-columns: minmax(0, 1fr);
}

[data-deploy-panel="configure"] .l1-deploy-step__number {
  display: none;
}

[data-deploy-panel][hidden] {
  display: none !important;
}

.l1-deploy-step {
  display: grid;
  gap: var(--l1-space-4);
  grid-template-columns: 2rem minmax(0, 1fr);
  padding: var(--l1-space-4) var(--l1-space-5);
}

[data-deploy-panel="plan"] .l1-deploy-step {
  grid-template-columns: minmax(0, 1fr);
}

[data-deploy-panel="plan"] .l1-deploy-step__number {
  display: none;
}

.l1-deploy-step + .l1-deploy-step {
  border-top: 1px solid var(--l1-border);
}

.l1-deploy-step__number {
  align-items: center;
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-brand-strong);
  display: inline-flex;
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-bold);
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.l1-deploy-step__content {
  display: grid;
  gap: var(--l1-space-4);
  min-width: 0;
}

.l1-deploy-step__head {
  align-items: start;
  display: flex;
  gap: var(--l1-space-3);
  justify-content: space-between;
}

.l1-deploy-step__title {
  color: var(--l1-ink);
  font-size: var(--l1-text-base);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.l1-deploy-step__desc {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  margin: 2px 0 0;
}

.l1-deploy-specs {
  background: var(--l1-border);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.l1-deploy-spec {
  background: var(--l1-surface-2);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--l1-space-2) var(--l1-space-3);
}

.l1-deploy-spec span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.l1-deploy-spec strong {
  color: var(--l1-ink);
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-base);
  font-weight: var(--l1-fw-semibold);
  overflow-wrap: anywhere;
}

.l1-pick-grid {
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.l1-pick {
  align-items: center;
  appearance: none;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  color: var(--l1-ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--l1-space-3);
  min-height: 3.25rem;
  min-width: 0;
  padding: var(--l1-space-2) var(--l1-space-3);
  text-align: left;
  transition: border-color var(--l1-transition), background var(--l1-transition);
  width: 100%;
}

.l1-pick:hover {
  border-color: var(--l1-border-strong);
}

.l1-pick:focus-visible {
  border-color: var(--l1-brand);
  outline: 2px solid var(--l1-brand);
  outline-offset: 2px;
}

.l1-pick.is-selected,
.l1-pick:has(.ui-check:checked) {
  background: var(--l1-selected-bg, var(--l1-surface-2));
  border-color: var(--l1-selected-border, var(--l1-border-strong));
  box-shadow: none;
}

/* A pick that wraps a native checkbox (deploy Networking). .ui-check is the
   1rem control; putting it on the label collapsed the caption onto the hint. */
.l1-pick > .ui-check {
  flex: none;
}

.l1-pick:has(> .ui-check) .l1-pick__label {
  white-space: normal;
}

.l1-pick__mark {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-soft);
  display: inline-flex;
  flex: none;
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-bold);
  height: 2rem;
  justify-content: center;
  letter-spacing: .04em;
  width: 2rem;
}

.l1-pick.is-selected .l1-pick__mark {
  background: var(--l1-surface-1);
  border-color: var(--l1-border-strong);
  color: var(--l1-ink);
}

.l1-pick__mark svg,
.l1-pick__mark i[data-lucide] {
  height: 14px;
  width: 14px;
}

.l1-pick__copy {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.l1-pick__label {
  display: block;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-pick__detail {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
}

.l1-pick__aside {
  color: var(--l1-ink-muted);
  flex: none;
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-normal);
  letter-spacing: 0;
  line-height: 1.3;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

.l1-pick.is-selected .l1-pick__aside {
  color: var(--l1-ink-muted);
  font-weight: var(--l1-fw-normal);
}

.l1-pick:disabled,
.l1-pick[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .62;
}

.l1-pick:disabled:hover,
.l1-pick[aria-disabled="true"]:hover {
  border-color: var(--l1-border);
}

.l1-pick-grid.l1-deploy-families {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.l1-deploy-families .l1-pick {
  align-items: center;
  min-height: 2.5rem;
  overflow: hidden;
  padding: .45rem .7rem;
}

.l1-deploy-families .l1-pick__mark {
  display: none;
}

.l1-deploy-families .l1-pick__copy {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  align-items: center;
  gap: .4rem;
  justify-content: space-between;
  min-width: 0;
}

.l1-deploy-families .l1-pick__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-deploy-families .l1-pick__aside {
  margin-left: 0;
  margin-top: 0;
  text-align: right;
  white-space: nowrap;
}

.l1-deploy-cadences {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.l1-deploy-cadences .l1-choice {
  align-content: start;
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
}

.l1-deploy-cadences .l1-choice.is-selected {
  background: var(--l1-selected-bg, var(--l1-surface-2));
  border-color: var(--l1-selected-border, var(--l1-border-strong));
  box-shadow: none;
}

.l1-deploy-cadences .l1-choice__aside {
  justify-self: start;
}

.l1-deploy-summary {
  align-self: start;
}

.l1-deploy-summary__hero {
  align-items: center;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--l1-rail-accent, #60a5fa) 26%, transparent), transparent 55%),
    linear-gradient(145deg, var(--l1-rail-bg, #152a52), var(--l1-rail-bg-raised, #1c3a6e));
  color: var(--l1-rail-ink, #f3f6ff);
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--l1-space-5);
  position: relative;
}

.l1-deploy-summary__icon {
  align-items: center;
  background: color-mix(in srgb, var(--l1-rail-ink, #f3f6ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--l1-rail-ink, #f3f6ff) 18%, transparent);
  border-radius: var(--l1-radius-md);
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.l1-deploy-summary__icon svg,
.l1-deploy-summary__icon i[data-lucide] {
  height: 18px;
  width: 18px;
}

.l1-deploy-summary__identity {
  min-width: 0;
}

.l1-deploy-summary__identity > span {
  color: var(--l1-rail-ink-muted, #b4c4e0);
  display: block;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.l1-deploy-summary__identity h2 {
  color: inherit;
  font-size: var(--l1-text-lg);
  font-weight: var(--l1-fw-bold);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-deploy-summary__state {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--l1-radius-pill);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  grid-column: 2;
  justify-self: start;
  padding: .2rem .5rem;
}

.l1-deploy-summary__state[data-state="ready"] {
  background: rgba(52, 211, 153, .14);
  border-color: rgba(110, 231, 183, .32);
  color: #bbf7d0;
}

.l1-deploy-summary__state[data-state="credit"] {
  background: rgba(96, 165, 250, .16);
  border-color: rgba(147, 197, 253, .35);
  color: #dbeafe;
}

.l1-deploy-summary__state[data-state="payment"] {
  background: rgba(251, 191, 36, .14);
  border-color: rgba(252, 211, 77, .32);
  color: #fef3c7;
}

.l1-deploy-summary__state[data-state="blocked"] {
  background: rgba(248, 113, 113, .14);
  border-color: rgba(252, 165, 165, .32);
  color: #fee2e2;
}

.l1-deploy-summary__body {
  display: grid;
  gap: var(--l1-space-4);
  padding: var(--l1-space-5);
}

.l1-deploy-summary__specs {
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-dense);
  margin: 0;
}

.l1-deploy-summary__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}

.l1-deploy-summary__tags > span {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink);
  display: inline-flex;
  font-size: var(--l1-text-micro);
  gap: var(--l1-space-1);
  max-width: 100%;
  padding: .25rem .5rem;
}

.l1-deploy-summary__tags svg,
.l1-deploy-summary__tags i[data-lucide] {
  color: var(--l1-ink-muted);
  flex: none;
  height: 12px;
  width: 12px;
}

.l1-deploy-summary__tags > span > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-deploy-summary__price {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  padding: var(--l1-space-3) var(--l1-space-4);
}

.l1-deploy-summary__price > span {
  color: var(--l1-ink-muted);
  display: block;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.l1-deploy-summary__price > div {
  align-items: baseline;
  display: flex;
  gap: var(--l1-space-1);
  margin-top: var(--l1-space-1);
}

.l1-deploy-summary__price strong {
  color: var(--l1-ink);
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: 1.75rem;
  font-weight: var(--l1-fw-bold);
  letter-spacing: -.03em;
  line-height: 1;
}

.l1-deploy-summary__price small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
}

.l1-deploy-summary__price p {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  margin: var(--l1-space-1) 0 0;
}

.l1-deploy-summary__due {
  align-items: baseline;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--l1-space-3);
}

.l1-deploy-summary__due span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
}

.l1-deploy-summary__due strong {
  color: var(--l1-ink);
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-lg);
}

.l1-deploy-summary[data-state="ready"] .l1-deploy-summary__due strong {
  color: var(--l1-ok);
}

.l1-deploy-summary__credit {
  align-items: center;
  display: flex;
  gap: var(--l1-space-2);
}

.l1-deploy-summary__credit-icon {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  display: inline-flex;
  flex: none;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.l1-deploy-summary__credit-icon svg,
.l1-deploy-summary__credit-icon i[data-lucide] {
  height: 13px;
  width: 13px;
}

.l1-deploy-summary__credit > span:last-child {
  display: grid;
  min-width: 0;
}

.l1-deploy-summary__credit strong {
  color: var(--l1-ink);
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
}

.l1-deploy-summary__credit small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
}

.l1-deploy-summary__note {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  margin: 0;
}

.l1-deploy-summary__action-note {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  margin: calc(var(--l1-space-2) * -1) 0 0;
  text-align: center;
}

.l1-deploy-summary__configure,
.l1-deploy-summary__back {
  width: 100%;
}

.l1-deploy-dock {
  display: none;
}

@media (max-width: 1200px) {
  .ui-page.l1-deploy-page {
    padding-bottom: 6.5rem;
  }

  .l1-order-workspace.l1-deploy-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-deploy-summary {
    display: none;
  }

  .l1-deploy-dock {
    align-items: center;
    background: color-mix(in srgb, var(--l1-surface-1) 92%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-md);
    bottom: calc(var(--l1-chat-bar-clearance, 0px) + .5rem);
    box-shadow: var(--l1-shadow-md, 0 8px 24px rgba(15, 23, 42, .12));
    display: flex;
    gap: var(--l1-space-3);
    justify-content: space-between;
    left: .75rem;
    padding: var(--l1-space-2) var(--l1-space-3);
    position: fixed;
    right: .75rem;
    z-index: 30;
  }

  .l1-deploy-dock__copy {
    display: grid;
    min-width: 0;
  }

  .l1-deploy-dock__copy span {
    color: var(--l1-ink-muted);
    font-size: var(--l1-text-micro);
    font-weight: var(--l1-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .l1-deploy-dock__copy strong {
    color: var(--l1-ink);
    font-feature-settings: var(--l1-font-feature-tabular);
    font-size: var(--l1-text-lg);
    line-height: 1.15;
  }

  .l1-deploy-dock .ui-btn {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .l1-deploy-summary__submit,
  .l1-deploy-summary__configure,
  .l1-deploy-summary__back,
  .l1-deploy-summary__action-note {
    display: none;
  }

  .l1-deploy-builder .ui-input,
  .l1-deploy-builder .ui-select,
  .l1-deploy-builder .ui-field {
    scroll-margin-bottom: 7rem;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .l1-deploy-dock {
    left: calc(var(--l1-sidebar-w, 296px) + .75rem);
  }
}

@media (max-width: 900px) {
  .l1-deploy-plan-table__head {
    display: none;
  }

  .l1-deploy-plan-table__row {
    gap: var(--l1-space-2);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .l1-deploy-plan-table__cell {
    display: none;
  }

  .l1-deploy-plan-table__chips {
    color: var(--l1-ink-muted);
    display: block;
    font-size: var(--l1-text-micro);
  }

  .l1-pick-grid.l1-deploy-access {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .l1-deploy-balance {
    width: 100%;
  }

  .l1-deploy-page .ui-subtitle {
    display: none;
  }

  .l1-pick-grid.l1-deploy-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l1-deploy-step {
    gap: var(--l1-space-3);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--l1-space-4);
  }

  .l1-deploy-step__number {
    display: none;
  }

  .l1-deploy-stages {
    padding: var(--l1-space-3) var(--l1-space-4) 0;
  }

  .l1-deploy-plan-table__head {
    display: none;
  }

  .l1-deploy-plan-table__row {
    gap: var(--l1-space-2);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .l1-deploy-plan-table__cell {
    display: none;
  }

  .l1-deploy-plan-table__chips {
    color: var(--l1-ink-muted);
    display: block;
    font-size: var(--l1-text-micro);
  }

  .l1-pick-grid.l1-deploy-access {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-deploy-step__content,
  .l1-deploy-step__head {
    gap: var(--l1-space-3);
  }

  .l1-deploy-builder .ui-input,
  .l1-deploy-builder .ui-select {
    font-size: 1rem;
    min-height: 2.75rem;
  }

  .l1-deploy-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l1-pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l1-pick {
    min-height: 3rem;
    padding: var(--l1-space-2);
  }

  .l1-deploy-cadences {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-deploy-cadences .l1-choice {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--l1-space-3);
    height: auto;
    justify-content: space-between;
  }

  .l1-deploy-cadences .l1-choice__aside {
    justify-self: unset;
    white-space: nowrap;
  }

  .l1-deploy-summary__hero {
    gap: var(--l1-space-2);
    padding: var(--l1-space-4);
  }

  .l1-deploy-summary__body {
    gap: var(--l1-space-3);
    padding: var(--l1-space-4);
  }

  .l1-deploy-summary__price strong {
    font-size: 1.35rem;
  }

  .l1-deploy-dock {
    bottom: max(var(--l1-chat-bar-clearance, 2.25rem), 2.25rem);
    padding-bottom: calc(var(--l1-space-2) + env(safe-area-inset-bottom, 0px));
  }

  .l1-deploy-dock .ui-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---------- Shared modal dialog ----------
   Native <dialog>, opened by the data-dialog-open / data-dialog-close
   handlers in app.js. Forms that would otherwise sit in their own panel at
   the bottom of a page (bandwidth purchase, destroy confirmation) live here
   instead, so pages keep only their content. */
.l1-dialog {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md, 6px);
  color: var(--l1-ink);
  margin: auto;
  max-width: min(480px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.l1-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.l1-dialog__head {
  align-items: flex-start;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  padding: 1rem;
}

.l1-dialog__title {
  font-size: 1rem;
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.l1-dialog--danger .l1-dialog__title {
  color: var(--l1-danger, #dc2626);
}

.l1-dialog__desc {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  margin: .25rem 0 0;
}

.l1-dialog__close {
  background: none;
  border: 0;
  border-radius: var(--l1-radius-md, 6px);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  padding: .25rem;
}

.l1-dialog__close:hover {
  background: var(--l1-surface-2);
  color: var(--l1-ink);
}

.l1-dialog__close svg {
  height: 18px;
  width: 18px;
}

.l1-dialog__body {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.l1-dialog__actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

/* ---------- Detail page 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.
   The .l1-detail wrapper itself is gone; .l1-overview below is still used by
   the client service and admin client detail templates. */

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

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

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

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

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

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

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

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

/* Checkout funnel stepper. Shared so anonymous configure (marketing layout)
   and the signed-in client shell both get Plan → Account → Pay → Deploy. */
.l1-flow-steps {
  align-items: stretch;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: .5rem;
}

.l1-flow-step {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  display: inline-flex;
  font-size: .78125rem;
  font-weight: 700;
  gap: .5rem;
  justify-content: center;
  min-height: 2rem;
  padding: .25rem .5rem;
  white-space: nowrap;
}

.l1-flow-step > span {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: .6875rem;
  height: 1.25rem;
  justify-content: center;
  width: 1.25rem;
}

.l1-flow-step.is-current,
.l1-flow-step.is-complete {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-ink);
}

@media (max-width: 640px) {
  .l1-flow-steps {
    grid-template-columns: 1fr;
  }

  .l1-flow-step {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Console 3.0 — control-deck chrome
   --------------------------------------------------------------------------
   Last l1 layer, so these pins beat app.css without a new stylesheet.
   html[data-l1-theme] is on every page and is here for specificity against
   the dark-mode element+class stacks in app.css. See docs/phase-57-console-3.md.
   ========================================================================== */

.l1-workbench {
  display: grid;
  min-width: 0;
}

.l1-workbench__stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

html[data-l1-theme] .l1-console-body {
  background-color: var(--l1-ground, #0d2b52);
  background-image: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

html[data-l1-theme="dark"] .l1-console-body {
  background-color: var(--l1-ground, #050911);
}

html[data-l1-theme] .l1-console-body .l1-workbench,
html[data-l1-theme] .l1-console-body .dashboard-shell,
html[data-l1-theme] .l1-console-body .l1-console-shell {
  background: transparent;
  flex: 1 1 auto;
  gap: 0;
  grid-template-columns: var(--l1-sidebar-w, 264px) minmax(0, 1fr);
  min-height: 0;
  padding: 0;
}

/* One edge-to-edge workspace. The command rail provides the frame; wrapping
   the stage in a second rounded outline costs working width on every page. */
html[data-l1-theme] .l1-console-body .l1-workbench__stage {
  background: var(--l1-sheet, var(--l1-surface-1));
  border: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--l1-ink);
  overflow: hidden;
}

html[data-l1-theme] .l1-console-body .l1-console-main-pane,
html[data-l1-theme] .l1-console-body .l1-console-content {
  color: var(--l1-ink);
}

html[data-l1-theme] .l1-console-body .l1-console-main-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar,
html[data-l1-theme] .l1-console-body .l1-console-sidebar .sidebar-inner {
  background: var(--l1-rail-bg, #0d2b52);
  color: var(--l1-rail-ink, #f3f6ff);
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 992px) {
  html[data-l1-theme] .l1-console-body .l1-console-sidebar {
    position: relative;
  }
}

/*
 * LayerOne rail architecture
 *
 * The background is the product mark translated into infrastructure:
 * three isometric planes, one upright "1", and a circuit trace feeding
 * the stack. It occupies the right half of the command column rather
 * than becoming a wallpaper behind every label.
 */
html[data-l1-theme] .l1-console-body .l1-sidebar-architecture {
  color: #b8d5ff;
  display: block;
  height: 100%;
  inset: 0;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .24) 30%, #000 64%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .24) 30%, #000 64%);
  mix-blend-mode: screen;
  opacity: .42;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

html[data-l1-theme="dark"] .l1-console-body .l1-sidebar-architecture {
  color: #82acf0;
  opacity: .3;
}

html[data-l1-theme] .l1-console-body .l1-sidebar-architecture__blade,
html[data-l1-theme] .l1-console-body .l1-sidebar-architecture__plane--top {
  vector-effect: non-scaling-stroke;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .sidebar-inner {
  background: linear-gradient(
    90deg,
    var(--l1-rail-bg, #0d2b52) 0%,
    var(--l1-rail-bg, #0d2b52) 30%,
    color-mix(in srgb, var(--l1-rail-bg, #0d2b52) 90%, transparent) 64%,
    color-mix(in srgb, var(--l1-rail-bg, #0d2b52) 48%, transparent) 100%
  );
  position: relative;
  z-index: 1;
}

html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar,
html[data-l1-theme="dark"] .l1-console-body:not(.l1-client-portal-body) .sidebar {
  background: var(--l1-rail-bg, #0d2b52);
  border-right-color: transparent;
  box-shadow: none;
  color: var(--l1-rail-ink, #eef2f8);
}

html[data-l1-theme] .l1-console-body.l1-client-portal-body .l1-console-sidebar {
  box-shadow: none;
}

html[data-l1-theme="dark"] .l1-console-body.l1-client-portal-body .l1-console-sidebar {
  box-shadow: none;
}

html[data-l1-theme] .l1-console-body .dashboard-shell .sidebar-inner,
html[data-l1-theme] .l1-client-portal-body .dashboard-shell .sidebar-inner {
  height: 100%;
  max-height: none;
  min-height: 100%;
  overflow: hidden;
  top: 0;
}

.l1-sidebar-brand {
  align-items: center;
  display: flex;
  gap: .75rem;
  padding: .45rem .35rem .8rem;
}

.l1-sidebar-brand__mark-frame {
  align-items: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--l1-radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  overflow: hidden;
  padding: 5px;
  width: 36px;
}

.l1-sidebar-brand__mark {
  display: block;
  filter: brightness(0) invert(1);
  height: 26px;
  object-fit: contain;
  object-position: center;
  width: 26px;
}

.l1-sidebar-brand .brand-copy strong {
  font-size: .925rem;
  letter-spacing: -.015em;
}

.l1-sidebar-brand__title {
  align-items: center;
  display: flex;
  gap: .5rem;
  min-width: 0;
}

.l1-sidebar-brand__edition {
  background: rgba(109, 159, 255, .14);
  border: 1px solid rgba(132, 174, 255, .24);
  border-radius: var(--l1-radius-pill);
  color: #b8d0ff;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  padding: .25rem .4rem;
  text-transform: uppercase;
}

.l1-sidebar-brand .brand-copy small {
  margin-top: .2rem;
}

.l1-nav-cta {
  font-weight: 700;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-nav-cta,
html[data-l1-theme] .l1-console-body .l1-console-sidebar a.l1-nav-cta {
  background: var(--l1-rail-cta, #2563eb);
  border-color: transparent;
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  color: var(--l1-rail-cta-ink, #ffffff);
  font-weight: 700;
  justify-content: center;
  margin: .15rem 0 .65rem;
  min-height: 2.75rem;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-nav-cta:hover,
html[data-l1-theme] .l1-console-body .l1-console-sidebar a.l1-nav-cta:hover {
  background: var(--l1-brand-strong, #1d4ed8);
  color: var(--l1-rail-cta-ink, #ffffff);
}

html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar .l1-nav-cta:hover,
html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar a.l1-nav-cta:hover {
  background: var(--l1-brand-strong, #7eb0ff);
  color: var(--l1-rail-cta-ink, #0b1220);
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-nav-cta.is-active,
html[data-l1-theme] .l1-console-body .l1-console-sidebar a.l1-nav-cta.is-active,
html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-nav-cta[aria-current="page"] {
  background: transparent;
  border-color: var(--l1-rail-line-strong, rgba(255, 255, 255, .22));
  box-shadow: none;
  color: var(--l1-rail-ink, #f3f6ff);
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-nav-cta :is(svg, i[data-lucide]) {
  color: inherit;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .nav a.is-active,
html[data-l1-theme] .l1-console-body .l1-console-sidebar .nav a[aria-current="page"],
html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-console-nav .nav-link.is-active,
html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar .nav a.is-active,
html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar .nav a[aria-current="page"],
html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar .l1-console-nav .nav-link.is-active,
html[data-l1-theme="dark"] .l1-console-body:not(.l1-client-portal-body) .l1-console-sidebar .l1-console-nav .nav-link.is-active,
html[data-l1-theme="dark"] .l1-console-body:not(.l1-client-portal-body) .l1-console-sidebar .l1-console-nav .nav-link[aria-current="page"],
html[data-l1-theme="dark"] .l1-console-body:not(.l1-client-portal-body) .l1-console-sidebar .nav a.is-active,
html[data-l1-theme="dark"] .l1-console-body:not(.l1-client-portal-body) .l1-console-sidebar .nav a[aria-current="page"] {
  backdrop-filter: none;
  background: var(--l1-rail-active-bg, rgba(255, 255, 255, .10));
  border-color: var(--l1-rail-active-border, rgba(255, 255, 255, .22));
  box-shadow: none;
  color: var(--l1-rail-ink, #f3f6ff);
  font-weight: 600;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .mode-switch {
  background: var(--l1-rail-hover, rgba(255, 255, 255, .08));
  border-color: var(--l1-rail-line, rgba(255, 255, 255, .12));
}

.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a) {
  border-radius: var(--l1-radius-md);
  gap: .55rem;
  min-height: 2.5rem;
  padding: .3rem .5rem;
}

.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a) > :is(svg, i[data-lucide]) {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--l1-radius-sm);
  box-sizing: border-box;
  height: 1.75rem;
  padding: .35rem;
  transition: background var(--l1-transition), border-color var(--l1-transition), color var(--l1-transition);
  width: 1.75rem;
}

.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a):hover > :is(svg, i[data-lucide]) {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .12);
}

.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link.is-active, .nav a.is-active) > :is(svg, i[data-lucide]) {
  background: color-mix(in srgb, var(--l1-rail-accent) 24%, transparent);
  border-color: color-mix(in srgb, var(--l1-rail-accent) 30%, transparent);
  color: #dce9ff;
}

/* Client navigation is short enough to expose its two mental models instead
   of presenting every destination as one undifferentiated list. The generic
   first-section rule intentionally compresses the first label, so the second
   group restores its own breathing room explicitly. */
.l1-client-portal-body .l1-console-sidebar .l1-client-nav-group-label {
  margin-top: 1rem;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar .mode-switch button.is-active,
html[data-l1-theme] .l1-client-portal-body .mode-switch button.is-active {
  background: rgba(255, 255, 255, .14);
  border: 1px solid var(--l1-rail-line-strong, rgba(255, 255, 255, .22));
  box-shadow: none;
  color: var(--l1-rail-ink, #f3f6ff);
  font-weight: 600;
}

html[data-l1-theme] .l1-console-body .l1-flow-step.is-current,
html[data-l1-theme] .l1-console-body .l1-flow-step.is-complete {
  background: var(--l1-selected-bg, var(--l1-surface-2));
  border-color: var(--l1-selected-border, var(--l1-border-strong));
  color: var(--l1-ink);
}

html[data-l1-theme] .l1-console-body .l1-flow-step.is-current > span,
html[data-l1-theme] .l1-console-body .l1-flow-step.is-complete > span {
  background: var(--l1-surface-1);
  border-color: var(--l1-border-strong);
  color: var(--l1-ink);
}

html[data-l1-theme] .l1-console-body .l1-topbar {
  backdrop-filter: none;
  background: var(--l1-sheet);
  border-bottom-color: var(--l1-border);
  color: var(--l1-ink);
  flex: none;
  position: relative;
}

@media (min-width: 992px) {
  .l1-console-body .l1-topbar__brand {
    display: none;
  }
}

.l1-console-body .l1-topbar__avatar {
  height: 30px;
  width: 30px;
}

.l1-console-v3 .l1-topbar__avatar-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--l1-radius-md);
  gap: .55rem;
  margin-left: .25rem;
  padding: .25rem .35rem .25rem .25rem;
}

.l1-console-v3 .l1-topbar__avatar-button:hover,
.l1-console-v3 .l1-topbar__avatar-button[aria-expanded="true"] {
  background: var(--l1-surface-2);
  border-color: var(--l1-border);
}

.l1-action-tile {
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  min-height: 6.5rem;
  padding: 1.15rem .85rem;
}

.l1-action-tile__icon {
  border-radius: 12px;
  height: 40px;
  width: 40px;
}

.l1-console-body #l1-console-content.htmx-request::before {
  left: auto;
  position: absolute;
  right: auto;
  top: 0;
  width: 40%;
}

/* ==========================================================================
   Console 3.0 — precision work surface
   --------------------------------------------------------------------------
   The command column and contextual topbar establish the frame.
   Within it, one calm canvas, compact action rows, and restrained panel depth
   keep dense operational data readable without turning every region into a
   floating card.
   Shared ui-* primitives are refined in assets/tailwind.css, which loads last.
   ========================================================================== */

html[data-l1-theme] .l1-console-body .l1-console-main-pane,
html[data-l1-theme] .l1-console-body .l1-console-content {
  background: var(--l1-console-canvas);
}

html[data-l1-theme] .l1-console-body .l1-topbar {
  background: var(--l1-sheet);
  border-bottom-color: var(--l1-border);
  padding-inline: var(--l1-space-5);
}

.l1-console-body .l1-console-content {
  padding: 1.5rem 1.75rem 2.5rem;
}

.l1-console-body {
  --l1-console-section-gap: 1.5rem;
  --l1-console-block-gap: 1rem;
}

.l1-console-body .l1-console-content > .messages {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-1);
  margin-bottom: var(--l1-space-4);
  margin-left: 0;
  margin-right: 0;
  width: fit-content;
}

.l1-console-body .messages .message {
  border: 0;
  box-shadow: none;
  font-size: var(--l1-text-dense);
  padding: .5rem .75rem;
}

/* Legacy card pages share the same quiet surface as converted ui-* screens.
   Forms and tables keep their own control/row boundaries; this only removes
   the redundant frame around the whole section. */
.l1-console-body .l1-console-content .panel,
.l1-console-body .l1-console-content .card {
  background: var(--l1-surface-1);
  border-color: var(--l1-border) !important;
  box-shadow: none !important;
}

.l1-console-body .l1-console-content :is(.panel-heading, .card-header) {
  border-bottom-color: transparent;
}

.l1-console-body .topbar.content-header.card {
  box-shadow: none !important;
}

/* Quick actions are a compact command strip, not a second navigation grid of
   six large cards. auto-fit keeps two-action pages useful without special
   markup and prevents a final action from becoming a full-width second row. */
.l1-console-body .l1-action-grid {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-lg);
  box-shadow: none;
  display: grid;
  gap: var(--l1-space-1);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  margin-bottom: 0;
  padding: var(--l1-space-2);
}

.l1-console-body .l1-action-tile {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-md);
  flex-direction: row;
  gap: var(--l1-space-2);
  justify-content: flex-start;
  min-height: 3.25rem;
  padding: .55rem .65rem;
  text-align: left;
}

.l1-console-body .l1-action-tile:hover,
.l1-console-body .l1-action-tile:focus-visible {
  background: var(--l1-surface-2);
  border-color: var(--l1-border);
  transform: none;
}

.l1-console-body .l1-action-tile__icon {
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-brand-strong);
  height: 2rem;
  width: 2rem;
}

.l1-console-body .l1-action-tile__icon svg {
  height: 1rem;
  width: 1rem;
}

/* The dashboard has six destinations. Three deliberate columns give their
   labels room to breathe on the 984px work surface left by the command rail;
   auto-fit otherwise squeezes them into six narrow, unevenly wrapped cells. */
.l1-console-body .l1-action-grid--dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Dashboard counts should scan as individual destinations without recreating
   the spreadsheet-like border grid that the public redesign removed. */
.l1-console-body .l1-admin-overview-grid {
  gap: var(--l1-space-2);
  padding: 0 var(--l1-space-5) var(--l1-space-5);
}

.l1-console-body .l1-overview-tile {
  background: var(--l1-surface-2);
  border: 1px solid color-mix(in srgb, var(--l1-border) 82%, transparent);
  border-radius: var(--l1-radius-md);
  min-height: 5rem;
  padding: var(--l1-space-3) var(--l1-space-4);
}

.l1-console-body .l1-overview-tile:hover,
.l1-console-body .l1-overview-tile:focus {
  background: var(--l1-surface-3);
  border-color: var(--l1-border-strong);
  transform: none;
}

.l1-console-body .l1-admin-overview.is-arranging .l1-admin-overview-grid {
  padding: var(--l1-space-3);
}

@media (max-width: 575px) {
  .l1-console-body .l1-console-content {
    padding: var(--l1-space-4);
  }

  .l1-console-body .l1-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-console-body .l1-admin-overview-grid {
    padding: 0 var(--l1-space-3) var(--l1-space-3);
  }
}

@media (max-width: 991.98px) {
  .l1-topbar__workspace {
    display: none;
  }

  .l1-topbar__account-copy,
  .l1-topbar__account-chevron {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 760px) {
  .l1-console-body .l1-action-grid--dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  html[data-l1-theme] .l1-console-body {
    --console-nav-offset: 0px;
    --l1-client-navbar-offset: 0px;
  }

  html[data-l1-theme] .l1-console-body .l1-client-sidebar-backdrop {
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 1045;
  }

  html[data-l1-theme] .l1-console-body .l1-workbench,
  html[data-l1-theme] .l1-console-body .dashboard-shell,
  html[data-l1-theme] .l1-console-body .l1-console-shell,
  html[data-l1-theme] .l1-console-body .app-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 0;
    padding-top: 0;
  }

  html[data-l1-theme] .l1-console-body .l1-workbench__stage {
    border: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* Closed drawer must leave the document flow. transform alone kept a
     full-height grid/flex hole (the blue band above the stage). */
  html[data-l1-theme] .l1-console-body .l1-console-sidebar {
    background: var(--l1-rail-bg, #0d2b52);
    border-radius: 0;
    bottom: 0;
    box-shadow: 0 1rem 2.5rem rgba(3, 8, 20, .4);
    display: none;
    height: 100dvh;
    left: 0;
    max-height: none;
    min-height: 0;
    padding-top: 0;
    position: fixed;
    top: 0;
    width: min(var(--l1-sidebar-w, 264px), 90vw);
    z-index: 1050;
  }

  html[data-l1-theme] .l1-console-body.l1-client-sidebar-open .l1-console-sidebar {
    display: flex;
  }

  html[data-l1-theme] .l1-console-body .l1-console-sidebar .sidebar-inner {
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
  }

  html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar {
    background: var(--l1-rail-bg, #0d2b52);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55);
  }

  html[data-l1-theme] .l1-console-body .l1-console-sidebar .sidebar-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }

  html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-sidebar-brand {
    flex: 1 1 auto;
    min-width: 0;
    order: 0;
  }

  html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-sidebar-close {
    color: var(--l1-rail-ink-muted, #b4c4e0);
    margin-left: auto;
    order: 1;
    position: static;
    right: auto;
    top: auto;
  }

  html[data-l1-theme] .l1-console-body .l1-console-sidebar .l1-sidebar-close:hover {
    background: var(--l1-rail-hover, rgba(255, 255, 255, .08));
    color: var(--l1-rail-ink, #f3f6ff);
  }

}

/* The /docs/ two-column shell used to live here. It moved to the l1-kb-* module
   in static/website/css/marketing/16-docs.css when the help centre gained a
   sidebar, a table-of-contents rail and copy buttons: those pages use the
   marketing layout, and splitting one screen's styles across the marketing
   bundle and this file is how a rule ends up applying on one docs page and not
   the next. */

.l1-live-chat-thread__log {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-height: min(40rem, calc(100dvh - 18rem));
  overflow: auto;
}

.l1-live-chat-msg header {
  align-items: baseline;
  display: flex;
  gap: .75rem;
  margin-bottom: .25rem;
}

.l1-live-chat-msg time {
  color: var(--l1-ink-muted, #3d4754);
  font-size: .75rem;
}

.l1-live-chat-msg p {
  color: var(--l1-ink);
  margin: 0;
}

.l1-live-chat-msg .l1-chat-markdown {
  color: var(--l1-ink);
}

.l1-live-chat-thread .ui-panel__foot {
  align-items: flex-end;
  display: flex;
  gap: .75rem;
}

.l1-chat-dock {
  --l1-chat-panel-h: min(36rem, calc(100dvh - 5rem));
  border-radius: var(--l1-radius-md) var(--l1-radius-md) 0 0;
  bottom: 0;
  box-shadow: var(--l1-shadow-md);
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  overflow: hidden;
  position: fixed;
  right: 1rem;
  width: 24rem;
  z-index: 1060;
}

html[data-l1-theme] .l1-console-body > .l1-chat-dock {
  color: var(--l1-ink);
  position: fixed;
  z-index: 1060;
}

/* Extra scroll room equal to the chat bar, applied by app.js only when the
   main pane already overflows. Height 0 must not create a scrollbar. */
html[data-l1-theme] .l1-client-portal-body #l1-console-content::after {
  content: "";
  display: block;
  flex-shrink: 0;
  height: var(--l1-chat-bar-clearance, 0px);
  pointer-events: none;
}

.l1-chat-dock[data-open="true"] {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-bottom: 0;
  color: var(--l1-ink);
}

.l1-chat-dock__bar {
  align-items: center;
  appearance: none;
  background: var(--l1-rail-bg, #152a52);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--l1-rail-ink, #f3f6ff);
  cursor: pointer;
  display: flex;
  flex: none;
  font-size: .8125rem;
  font-weight: var(--l1-fw-semibold, 650);
  gap: .4rem;
  justify-content: flex-start;
  min-height: 2.125rem;
  padding: .35rem .85rem;
  padding-bottom: calc(.35rem + env(safe-area-inset-bottom, 0px));
  text-align: left;
  width: 100%;
}

.l1-chat-dock__bar:hover {
  background: var(--l1-rail-bg-raised, #1c3a6e);
}

.l1-chat-dock[data-open="true"] .l1-chat-dock__bar {
  background: var(--l1-rail-bg, #152a52);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-bottom: .35rem;
}

.l1-chat-dock[data-open="true"] .l1-chat-dock__bar:hover {
  background: var(--l1-rail-bg-raised, #1c3a6e);
}

.l1-chat-dock__bar i[data-lucide],
.l1-chat-dock__bar svg {
  flex: none;
  height: 14px;
  width: 14px;
}

.l1-chat-dock__chevron {
  margin-left: auto;
  transition: transform .18s ease;
}

.l1-chat-dock[data-open="true"] .l1-chat-dock__chevron {
  transform: rotate(180deg);
}

.l1-chat-dock__queue {
  align-items: center;
  color: var(--l1-rail-ink-muted, #b4c4e0);
  display: inline-flex;
  font-size: var(--l1-text-micro, .75rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-medium, 500);
  gap: .4rem;
}

.l1-chat-dock__queue .ui-spinner {
  border-color: color-mix(in srgb, var(--l1-rail-ink, #f3f6ff) 35%, transparent);
  border-top-color: var(--l1-rail-ink, #f3f6ff);
  height: .75rem;
  width: .75rem;
}

.l1-chat-dock__badge {
  background: var(--l1-rail-ink, #f3f6ff);
  border-radius: 999px;
  color: var(--l1-rail-bg, #152a52);
  font-size: .65rem;
  font-weight: 700;
  min-width: 1.1rem;
  padding: .02rem .3rem;
  text-align: center;
}

.l1-chat-dock__reveal {
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height .34s cubic-bezier(.22, 1, .36, 1);
}

.l1-chat-dock[data-open="true"] .l1-chat-dock__reveal {
  max-height: var(--l1-chat-panel-h);
  pointer-events: auto;
}

.l1-chat-dock__panel.ui-panel {
  background: var(--l1-surface-1);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--l1-ink);
  display: flex;
  flex-direction: column;
  height: var(--l1-chat-panel-h);
  max-height: var(--l1-chat-panel-h);
  min-height: 0;
  overflow: hidden;
  transform: translateY(.75rem);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.l1-chat-dock[data-open="true"] .l1-chat-dock__panel.ui-panel {
  transform: translateY(0);
}

.l1-chat-dock__panel .ui-panel__head {
  align-items: center;
  flex: none;
  gap: .5rem;
}

.l1-chat-dock__panel .ui-panel__title {
  color: var(--l1-ink);
}

.l1-chat-dock__head-title {
  align-items: center;
  display: flex;
  gap: .35rem;
  min-width: 0;
}

.l1-chat-dock__back {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm, 8px);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 2rem;
  justify-content: center;
  margin: 0 0 0 -.35rem;
  padding: 0;
  width: 2rem;
}

.l1-chat-dock__back:hover {
  background: var(--l1-surface-2);
}

.l1-chat-dock__back i[data-lucide],
.l1-chat-dock__back svg {
  height: 1.2rem;
  width: 1.2rem;
}

.l1-chat-dock__head-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: flex-end;
}

.l1-chat-dock__inbox,
.l1-chat-dock__conversation {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.l1-chat-dock__thread-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.l1-chat-dock__thread-item {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--l1-border);
  color: inherit;
  display: flex;
  gap: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.l1-chat-dock__thread-item:hover {
  background: var(--l1-surface-2);
}

.l1-chat-dock__thread-item.is-unread {
  font-weight: var(--l1-fw-semibold, 650);
}

.l1-chat-dock__thread-item--new {
  background: var(--l1-surface-2);
  cursor: pointer;
  flex: none;
  gap: .65rem;
  padding: .75rem 1rem;
}

.l1-chat-dock__thread-item--new i[data-lucide],
.l1-chat-dock__thread-item--new svg {
  color: var(--l1-brand);
}

.l1-chat-dock__thread-open {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  font: inherit;
  gap: .65rem;
  min-width: 0;
  padding: .75rem .5rem .75rem 1rem;
  text-align: left;
}

.l1-chat-dock__thread-delete {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm, 8px);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 2rem;
  justify-content: center;
  margin: 0 .45rem 0 0;
  padding: 0;
  width: 2rem;
}

.l1-chat-dock__thread-delete:hover {
  background: var(--l1-danger-soft);
  color: var(--l1-danger);
}

.l1-chat-dock__thread-item i[data-lucide],
.l1-chat-dock__thread-item svg {
  color: var(--l1-ink-muted);
  flex: none;
  height: 1rem;
  width: 1rem;
}

.l1-chat-dock__thread-delete:hover i[data-lucide],
.l1-chat-dock__thread-delete:hover svg {
  color: var(--l1-danger);
}

.l1-chat-dock__thread-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.l1-chat-dock__thread-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-chat-dock__thread-copy span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro, .75rem);
}

.l1-chat-dock__empty {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense, .875rem);
  margin: 0;
  padding: 1.25rem 1rem;
}

.l1-chat-dock__thinking {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-micro, .75rem);
  font-variant-numeric: tabular-nums;
  gap: .5rem;
  padding: .15rem 0;
}

.l1-chat-dock__thinking .ui-spinner {
  height: .85rem;
  width: .85rem;
}

.l1-chat-dock__thoughts,
.l1-chat-thoughts {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro, .75rem);
  margin: 0 0 .35rem;
}

.l1-chat-dock__thoughts summary,
.l1-chat-thoughts summary {
  cursor: pointer;
}

.l1-chat-dock__thoughts p,
.l1-chat-thoughts p {
  margin: .35rem 0 0;
  white-space: pre-wrap;
}

.l1-chat-receipt {
  color: var(--l1-ink-muted);
  font-size: .7rem;
  margin: .25rem 0 0;
}

.l1-chat-dock__msg[data-role="visitor"] .l1-chat-receipt {
  color: color-mix(in srgb, var(--l1-on-brand, #fff) 80%, transparent);
  text-align: right;
}

.l1-chat-kind {
  align-items: center;
  display: inline-flex;
  gap: .4rem;
}

.l1-chat-kind i[data-lucide],
.l1-chat-kind svg {
  height: .9rem;
  width: .9rem;
}

.l1-unread-dot {
  background: var(--l1-brand);
  border-radius: 999px;
  display: inline-block;
  height: .45rem;
  margin-right: .4rem;
  vertical-align: middle;
  width: .45rem;
}

.l1-chat-queue-row.is-unread .ui-table__title {
  font-weight: var(--l1-fw-semibold, 650);
}

.l1-chat-dock__wait {
  align-items: flex-start;
  background: var(--l1-brand-soft);
  border-bottom: 1px solid var(--l1-brand-border);
  color: var(--l1-ink);
  display: flex;
  flex: none;
  gap: .75rem;
  padding: .85rem 1rem;
}

.l1-chat-dock__wait[hidden],
.l1-chat-dock__queue[hidden],
.l1-chat-dock__badge[hidden],
.l1-chat-dock__offer[hidden],
.l1-chat-dock__inbox[hidden],
.l1-chat-dock__conversation[hidden],
.l1-chat-dock__back[hidden],
.l1-chat-dock__form[hidden],
.l1-chat-dock__empty[hidden],
.l1-chat-dock [data-l1-chat-end][hidden],
.l1-chat-dock [data-l1-chat-head][hidden] {
  display: none !important;
}

.l1-chat-dock__wait-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.l1-chat-dock__wait-copy strong {
  color: var(--l1-ink);
  font-size: var(--l1-text-dense, .875rem);
  font-weight: var(--l1-fw-semibold, 650);
}

.l1-chat-dock__wait-copy span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro, .75rem);
  font-variant-numeric: tabular-nums;
}

.l1-chat-dock__wait .ui-spinner {
  flex: none;
  height: 1.1rem;
  margin-top: .15rem;
  width: 1.1rem;
}

.l1-chat-dock__messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .65rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .85rem 1rem;
}

.l1-chat-dock__msg {
  border-radius: var(--l1-radius-sm, 8px);
  font-size: var(--l1-text-dense, .875rem);
  line-height: 1.45;
  max-width: 92%;
  overflow-wrap: anywhere;
  padding: .55rem .7rem;
}

.l1-chat-dock__msg.is-streaming .l1-chat-dock__msg-body::after {
  animation: l1-chat-caret 1s step-end infinite;
  background: currentColor;
  content: "";
  display: inline-block;
  height: 1em;
  margin-left: .15em;
  vertical-align: -0.1em;
  width: .45em;
}

@keyframes l1-chat-caret {
  50% {
    opacity: 0;
  }
}

.l1-chat-markdown {
  display: flex;
  flex-direction: column;
  gap: .45em;
  min-width: 0;
}

.l1-chat-markdown > :first-child {
  margin-top: 0;
}

.l1-chat-markdown > :last-child {
  margin-bottom: 0;
}

.l1-chat-markdown p,
.l1-chat-markdown ul,
.l1-chat-markdown ol,
.l1-chat-markdown pre,
.l1-chat-markdown blockquote,
.l1-chat-markdown table,
.l1-chat-markdown h1,
.l1-chat-markdown h2,
.l1-chat-markdown h3,
.l1-chat-markdown h4 {
  margin: 0;
}

.l1-chat-markdown h1,
.l1-chat-markdown h2,
.l1-chat-markdown h3,
.l1-chat-markdown h4 {
  font-size: inherit;
  font-weight: var(--l1-fw-semibold, 650);
}

.l1-chat-markdown ul,
.l1-chat-markdown ol {
  padding-left: 1.2em;
}

.l1-chat-markdown li + li {
  margin-top: .15em;
}

.l1-chat-markdown a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .12em;
}

.l1-chat-markdown code {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 4px;
  font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: .85em;
  padding: .1em .35em;
}

.l1-chat-markdown pre {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: var(--l1-radius-sm, 8px);
  overflow-x: auto;
  padding: .55rem .7rem;
  white-space: pre-wrap;
}

.l1-chat-markdown pre code {
  background: none;
  padding: 0;
}

.l1-chat-markdown blockquote {
  border-left: 3px solid color-mix(in srgb, currentColor 28%, transparent);
  padding-left: .7em;
}

.l1-chat-markdown table {
  border-collapse: collapse;
  font-size: .9em;
  width: 100%;
}

.l1-chat-markdown th,
.l1-chat-markdown td {
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding: .2em .45em;
  text-align: left;
}

.l1-chat-markdown hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  margin: .2em 0;
}

.l1-chat-dock__msg[data-role="visitor"] {
  align-self: flex-end;
  background: var(--l1-brand);
  color: var(--l1-on-brand, #fff);
}

.l1-chat-dock__msg[data-role="assistant"],
.l1-chat-dock__msg[data-role="staff"],
.l1-chat-dock__msg[data-role="system"] {
  align-self: flex-start;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  color: var(--l1-ink);
}

.l1-chat-dock__offer {
  flex: none;
  margin: 0;
  padding: 0 1rem .75rem;
}

.l1-chat-dock__form.ui-panel__foot {
  align-items: flex-end;
  display: flex;
  flex: none;
  gap: .5rem;
  justify-content: stretch;
  padding: .75rem 1rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}

.l1-chat-dock__form .ui-textarea {
  flex: 1 1 auto;
  max-height: 3.25rem;
  min-height: 3.25rem;
  overflow-y: auto;
  resize: none;
}

html[data-l1-theme="dark"] .l1-chat-dock[data-open="true"],
html[data-l1-theme="dark"] .l1-chat-dock__panel {
  background: var(--l1-surface-1);
  border-color: var(--l1-border);
}

@media (max-width: 720px) {
  .l1-chat-dock {
    --l1-chat-panel-h: min(36rem, calc(100dvh - 8rem));
    border-radius: 999px;
    bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--l1-shadow-lg, var(--l1-shadow-md));
    height: 3.5rem;
    overflow: visible;
    right: .85rem;
    width: 3.5rem;
  }

  .l1-chat-dock[data-open="true"] {
    border-bottom: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-md);
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    height: auto;
    overflow: hidden;
    right: .75rem;
    width: calc(100vw - 1.5rem);
  }

  .l1-chat-dock__bar {
    border-radius: 999px;
    height: 3.5rem;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0;
    padding-bottom: 0;
    position: relative;
    width: 3.5rem;
  }

  .l1-chat-dock[data-open="true"] .l1-chat-dock__bar {
    border-radius: 0;
    height: auto;
    justify-content: flex-start;
    min-height: 2.125rem;
    padding: .35rem .85rem;
    width: 100%;
  }

  .l1-chat-dock:not([data-open="true"]) .l1-chat-dock__label,
  .l1-chat-dock:not([data-open="true"]) .l1-chat-dock__chevron,
  .l1-chat-dock:not([data-open="true"]) .l1-chat-dock__queue {
    display: none !important;
  }

  .l1-chat-dock:not([data-open="true"]) .l1-chat-dock__bar i[data-lucide],
  .l1-chat-dock:not([data-open="true"]) .l1-chat-dock__bar svg {
    height: 22px;
    width: 22px;
  }

  .l1-chat-dock:not([data-open="true"]) .l1-chat-dock__badge {
    position: absolute;
    right: .2rem;
    top: .2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l1-chat-dock__reveal,
  .l1-chat-dock__panel.ui-panel,
  .l1-chat-dock__chevron {
    transition: none;
  }

  .l1-chat-dock__panel.ui-panel {
    transform: none;
  }
}

.l1-recording-list {
  min-width: 0;
  overflow-x: hidden;
  width: 100%;
}

.l1-recording-list > .ui-panel {
  min-width: 0;
}

.l1-recording-list .ui-table-scroll {
  min-width: 0;
}

.l1-recording-list .ui-table {
  table-layout: fixed;
}

.l1-recording-list .ui-table th,
.l1-recording-list .ui-table td {
  overflow: hidden;
}

.l1-recording-list .ui-table .ui-table__col-grow {
  width: 28%;
}

.l1-recording-list__events {
  width: 22%;
}

.l1-recording-list .ui-table__truncate {
  max-width: 100%;
}

.l1-recording-list .ui-filter-field {
  min-width: 0;
}

.l1-recording-detail {
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-5);
  min-width: 0;
  overflow-x: hidden;
}

.l1-recording-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1);
  min-width: 0;
}

.l1-recording-flags .ui-chip {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l1-recording-detail__replay {
  min-height: 0;
  min-width: 0;
}

.l1-recording-detail__replay-body {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--l1-space-3);
}

.l1-recording-player-shell {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.l1-live-badge {
  align-items: center;
  color: var(--l1-ok);
  display: inline-flex;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  gap: 6px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.l1-live-badge[hidden] {
  display: none !important;
}

.l1-live-badge__dot {
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--l1-ok) 22%, transparent);
  display: block;
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.l1-live-badge:not([hidden]) .l1-live-badge__dot {
  animation: l1-pulse 1.2s ease-in-out infinite;
}

.l1-live-badge--overlay {
  background: color-mix(in srgb, var(--l1-surface-1) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--l1-ok) 35%, transparent);
  border-radius: var(--l1-radius-sm);
  left: calc(var(--l1-space-3) + env(safe-area-inset-left, 0px));
  padding: 6px 10px;
  pointer-events: none;
  position: absolute;
  top: calc(var(--l1-space-3) + env(safe-area-inset-top, 0px));
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .l1-live-badge:not([hidden]) .l1-live-badge__dot {
    animation: none;
  }
}

.l1-recording-player {
  background: var(--l1-surface-2);
  box-sizing: border-box;
  height: min(70dvh, 42rem);
  max-height: min(70dvh, 42rem);
  max-width: 100%;
  min-height: 16rem;
  min-width: 0;
  overflow: hidden;
  position: relative;
  touch-action: manipulation;
  width: 100%;
}

.l1-recording-player .rr-player {
  background: var(--l1-surface-1);
  box-shadow: none;
  float: none;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.l1-recording-player .rr-player__frame {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.l1-recording-player .replayer-wrapper {
  float: none;
  left: 50%;
  overflow: visible;
  position: absolute;
  top: 50%;
  transform-origin: top left;
}

.l1-recording-player .replayer-wrapper > iframe {
  border: 0;
  display: block;
  max-height: none;
  max-width: none;
}

.l1-recording-player .replayer-mouse-tail {
  pointer-events: none;
}

.l1-recording-player .rr-controller {
  max-width: 100%;
  touch-action: manipulation;
}

.l1-recording-player__close {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  display: none;
  font: inherit;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--l1-space-4);
  position: absolute;
  right: calc(var(--l1-space-3) + env(safe-area-inset-right, 0px));
  top: calc(var(--l1-space-3) + env(safe-area-inset-top, 0px));
  z-index: 2;
}

.l1-recording-player-shell.is-theater {
  background: var(--l1-surface-2);
  height: 100dvh;
  inset: 0;
  max-height: 100dvh;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  position: fixed;
  width: 100%;
  z-index: 2200;
}

.l1-recording-player-shell.is-theater .l1-recording-player {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

.l1-recording-player-shell.is-theater .l1-recording-player__close,
.l1-recording-player-shell:fullscreen .l1-recording-player__close,
.l1-recording-player-shell:-webkit-full-screen .l1-recording-player__close {
  display: flex;
}

.l1-recording-player-shell:fullscreen,
.l1-recording-player-shell:-webkit-full-screen {
  background: var(--l1-surface-2);
  height: 100%;
  width: 100%;
}

.l1-recording-player-shell:fullscreen .l1-recording-player,
.l1-recording-player-shell:-webkit-full-screen .l1-recording-player {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

body.l1-recording-theater-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .l1-recording-detail__replay-body {
    padding: var(--l1-space-2);
  }

  .l1-recording-player {
    height: min(65dvh, 36rem);
    max-height: min(65dvh, 36rem);
    min-height: 18rem;
  }

  .l1-recording-player .rr-controller {
    height: auto;
    min-height: 5.5rem;
    padding-bottom: var(--l1-space-2);
  }

  .l1-recording-player .rr-timeline {
    width: calc(100% - 1rem);
  }

  .l1-recording-player .rr-timeline__time {
    width: auto;
    min-width: 2.75rem;
    padding: 0 var(--l1-space-1);
  }

  .l1-recording-player .rr-progress {
    border-bottom-width: 16px;
    border-top-width: 16px;
    height: 28px;
  }

  .l1-recording-player .rr-progress__handler {
    height: 28px;
    top: 6px;
    width: 28px;
  }

  .l1-recording-player .rr-controller__btns button {
    height: 44px;
    min-width: 44px;
    width: 44px;
  }
}

/* Authenticated public status pages share the client shell, but the content is
   still a read-only status surface. Use spacing and quiet fills instead of the
   legacy card-inside-card treatment from app.css. */
.l1-client-portal-body .l1-console-content > .status-page {
  gap: 1.35rem;
  margin-inline: auto;
  max-width: var(--l1-console-content-max);
  width: min(100%, var(--l1-console-content-width));
}

.l1-client-portal-body .status-page .status-hero {
  background: var(--l1-surface-1) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--l1-radius-lg) !important;
  box-shadow: none !important;
  color: var(--l1-ink) !important;
  padding: 1.4rem 1.5rem !important;
}

/* The same status route is reachable while an administrator is in Admin mode,
   where the body class is l1-console-body rather than l1-client-portal-body. */
.l1-console-body .l1-console-content > .status-page {
  gap: 1.35rem;
  margin-inline: auto;
  max-width: var(--l1-console-content-max);
  width: min(100%, var(--l1-console-content-width));
}

.l1-console-body .status-page .status-hero {
  background: var(--l1-surface-1) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--l1-radius-lg) !important;
  box-shadow: none !important;
  color: var(--l1-ink) !important;
  padding: 1.4rem 1.5rem !important;
}

.l1-console-body .status-page .status-hero::before {
  display: none;
}

.l1-console-body .status-page .status-hero .eyebrow {
  align-items: center;
  color: var(--l1-ink-muted) !important;
  display: inline-flex;
  font-size: 0.67rem;
  gap: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.l1-console-body .status-page .status-signal-dot {
  background: currentColor;
  border-radius: 999px;
  height: 7px;
  width: 7px;
}

.l1-console-body .status-page .status-signal-dot[data-tone="ok"] { color: var(--l1-ok); }
.l1-console-body .status-page .status-signal-dot[data-tone="warning"] { color: var(--l1-warn); }
.l1-console-body .status-page .status-signal-dot[data-tone="danger"] { color: var(--l1-danger); }
.l1-console-body .status-page .status-signal-dot[data-tone="neutral"] { color: var(--l1-ink-muted); }

.l1-console-body .status-page .status-hero h1 {
  color: var(--l1-ink) !important;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -0.04em;
  margin-top: 0.4rem;
  text-shadow: none;
}

.l1-console-body .status-page .status-hero p,
.l1-console-body .status-page .status-hero-state > span:last-child {
  color: var(--l1-ink-muted) !important;
  text-shadow: none;
}

.l1-console-body .status-page .status-incidents,
.l1-console-body .status-page .public-status-shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

.l1-console-body .status-page .status-section-heading,
.l1-console-body .status-page .public-status-summary {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 0.85rem !important;
}

.l1-console-body .status-page .public-status-summary-meta {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  font-size: 0.66rem;
  font-weight: var(--l1-fw-semibold);
  gap: 0.8rem;
  text-transform: uppercase;
}

.l1-console-body .status-page .public-status-summary-meta span + span::before {
  content: "·";
  margin-right: 0.8rem;
}

.l1-console-body .status-page .public-status-list {
  gap: 0.8rem;
  padding: 0 !important;
}

.l1-console-body .status-page .public-status-group-card,
.l1-console-body .status-page .incident-public-card {
  background: var(--l1-surface-1) !important;
  border: 0 !important;
  border-radius: var(--l1-radius-lg) !important;
  box-shadow: none !important;
}

.l1-console-body .status-page .public-status-group-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--l1-border) !important;
  padding: 0.9rem 1rem;
}

.l1-console-body .status-page .status-service {
  background: transparent !important;
  border-color: var(--l1-border) !important;
}

.l1-console-body .status-page .status-service-trigger {
  background: transparent !important;
  border: 0 !important;
  padding: 0.95rem 1rem;
}

.l1-console-body .status-page .status-service-link:hover .status-service-trigger {
  background: var(--l1-surface-2) !important;
  transform: none;
}

.l1-console-body .status-page .status-empty-state {
  align-items: center;
  background: var(--l1-surface-1);
  border-radius: var(--l1-radius-lg);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1.25rem;
}

.l1-console-body .status-page .status-empty-state__icon {
  align-items: center;
  background: var(--l1-brand-soft);
  border-radius: 10px;
  color: var(--l1-brand-strong);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.l1-console-body .status-page .status-empty-state__title {
  color: var(--l1-ink);
  font-size: 0.88rem;
  font-weight: var(--l1-fw-semibold);
}

.l1-console-body .status-page .status-empty-state__desc {
  color: var(--l1-ink-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin-top: 0.15rem;
}

.l1-console-body .status-page .status-empty-state a {
  align-items: center;
  color: var(--l1-brand-strong);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: var(--l1-fw-semibold);
  gap: 0.4rem;
  text-decoration: none;
  white-space: nowrap;
}

.l1-console-body .status-page .public-status-refresh {
  background: var(--l1-surface-2) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.l1-console-body .status-page .status-detail-body {
  background: var(--l1-surface-1) !important;
  border-radius: var(--l1-radius-lg);
  padding: 1.2rem !important;
}

.l1-console-body .status-page .latency-location-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.l1-console-body .status-page .latency-location-card {
  background: var(--l1-surface-2) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.9rem !important;
}

.l1-console-body .status-page .latency-location-card__marker {
  align-items: center;
  background: var(--l1-brand-soft);
  border-radius: 9px;
  color: var(--l1-brand-strong);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.l1-console-body .status-page .latency-location-card__identity,
.l1-console-body .status-page .latency-location-card__reading {
  display: grid;
  gap: 0.12rem;
}

.l1-console-body .status-page .latency-location-card__identity strong,
.l1-console-body .status-page .latency-location-card__reading strong {
  color: var(--l1-ink) !important;
  font-size: 0.78rem;
}

.l1-console-body .status-page .latency-location-card__identity span,
.l1-console-body .status-page .latency-location-card__reading span,
.l1-console-body .status-page .latency-location-card small {
  color: var(--l1-ink-muted) !important;
  font-size: 0.65rem;
}

.l1-console-body .status-page .latency-location-card__reading {
  justify-items: end;
  text-align: right;
}

.l1-console-body .status-page .latency-location-card > small {
  grid-column: 2 / -1;
}

.l1-client-portal-body .status-page .status-hero::before {
  display: none;
}

.l1-client-portal-body .status-page .status-hero .eyebrow {
  align-items: center;
  color: var(--l1-ink-muted) !important;
  display: inline-flex;
  font-size: 0.67rem;
  gap: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.l1-client-portal-body .status-page .status-signal-dot {
  background: currentColor;
  border-radius: 999px;
  height: 7px;
  width: 7px;
}

.l1-client-portal-body .status-page .status-signal-dot[data-tone="ok"] { color: var(--l1-ok); }
.l1-client-portal-body .status-page .status-signal-dot[data-tone="warning"] { color: var(--l1-warn); }
.l1-client-portal-body .status-page .status-signal-dot[data-tone="danger"] { color: var(--l1-danger); }
.l1-client-portal-body .status-page .status-signal-dot[data-tone="neutral"] { color: var(--l1-ink-muted); }

.l1-client-portal-body .status-page .status-hero h1 {
  color: var(--l1-ink) !important;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -0.04em;
  margin-top: 0.4rem;
  text-shadow: none;
}

.l1-client-portal-body .status-page .status-hero p,
.l1-client-portal-body .status-page .status-hero-state > span:last-child {
  color: var(--l1-ink-muted) !important;
  text-shadow: none;
}

.l1-client-portal-body .status-page .status-hero .ui-status {
  color: var(--l1-ink) !important;
}

.l1-client-portal-body .status-page .status-incidents,
.l1-client-portal-body .status-page .public-status-shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

.l1-client-portal-body .status-page .status-section-heading,
.l1-client-portal-body .status-page .public-status-summary {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 0.85rem !important;
}

.l1-client-portal-body .status-page .public-status-refresh {
  background: var(--l1-surface-2) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.l1-client-portal-body .status-page .public-status-summary-meta {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  font-size: 0.66rem;
  font-weight: var(--l1-fw-semibold);
  gap: 0.8rem;
  text-transform: uppercase;
}

.l1-client-portal-body .status-page .public-status-summary-meta span + span::before {
  content: "·";
  margin-right: 0.8rem;
}

.l1-client-portal-body .status-page .public-status-list {
  gap: 0.8rem;
  padding: 0 !important;
}

.l1-client-portal-body .status-page .public-status-group-card,
.l1-client-portal-body .status-page .incident-public-card {
  background: var(--l1-surface-1) !important;
  border: 0 !important;
  border-radius: var(--l1-radius-lg) !important;
  box-shadow: none !important;
}

.l1-client-portal-body .status-page .public-status-group-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--l1-border) !important;
  padding: 0.9rem 1rem;
}

.l1-client-portal-body .status-page .status-service {
  background: transparent !important;
  border-color: var(--l1-border) !important;
}

.l1-client-portal-body .status-page .status-service-trigger {
  background: transparent !important;
  border: 0 !important;
  padding: 0.95rem 1rem;
}

.l1-client-portal-body .status-page .status-service-link:hover .status-service-trigger {
  background: var(--l1-surface-2) !important;
  transform: none;
}

.l1-client-portal-body .status-page .status-empty-state {
  align-items: center;
  background: var(--l1-surface-1);
  border-radius: var(--l1-radius-lg);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1.25rem;
}

.l1-client-portal-body .status-page .status-empty-state__icon {
  align-items: center;
  background: var(--l1-brand-soft);
  border-radius: 10px;
  color: var(--l1-brand-strong);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.l1-client-portal-body .status-page .status-empty-state__icon svg {
  height: 19px;
  width: 19px;
}

.l1-client-portal-body .status-page .status-empty-state__title {
  color: var(--l1-ink);
  font-size: 0.88rem;
  font-weight: var(--l1-fw-semibold);
}

.l1-client-portal-body .status-page .status-empty-state__desc {
  color: var(--l1-ink-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin-top: 0.15rem;
}

.l1-client-portal-body .status-page .status-empty-state a {
  align-items: center;
  color: var(--l1-brand-strong);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: var(--l1-fw-semibold);
  gap: 0.4rem;
  text-decoration: none;
  white-space: nowrap;
}

.l1-client-portal-body .status-page .status-empty-state a svg {
  height: 15px;
  width: 15px;
}

.l1-client-portal-body .status-page .status-detail-body {
  background: var(--l1-surface-1) !important;
  border-radius: var(--l1-radius-lg);
  padding: 1.2rem !important;
}

.l1-client-portal-body .status-page .latency-location-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.l1-client-portal-body .status-page .latency-location-card {
  background: var(--l1-surface-2) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.9rem !important;
}

.l1-client-portal-body .status-page .latency-location-card__marker {
  align-items: center;
  background: var(--l1-brand-soft);
  border-radius: 9px;
  color: var(--l1-brand-strong);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.l1-client-portal-body .status-page .latency-location-card__identity,
.l1-client-portal-body .status-page .latency-location-card__reading {
  display: grid;
  gap: 0.12rem;
}

.l1-client-portal-body .status-page .latency-location-card__identity strong,
.l1-client-portal-body .status-page .latency-location-card__reading strong {
  color: var(--l1-ink) !important;
  font-size: 0.78rem;
}

.l1-client-portal-body .status-page .latency-location-card__identity span,
.l1-client-portal-body .status-page .latency-location-card__reading span,
.l1-client-portal-body .status-page .latency-location-card small {
  color: var(--l1-ink-muted) !important;
  font-size: 0.65rem;
}

.l1-client-portal-body .status-page .latency-location-card__reading {
  justify-items: end;
  text-align: right;
}

.l1-client-portal-body .status-page .latency-location-card > small {
  grid-column: 2 / -1;
}

@media (max-width: 680px) {
  .l1-client-portal-body .status-page .status-hero {
    align-items: start;
    display: grid;
  }

  .l1-client-portal-body .status-page .status-hero-state {
    align-items: start;
    justify-items: start;
  }

  .l1-client-portal-body .status-page .public-status-summary-meta {
    display: none;
  }

  .l1-client-portal-body .status-page .status-empty-state {
    grid-template-columns: minmax(0, 1fr);
  }
}