/* 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-md);
  margin-bottom: var(--l1-space-4);
}
.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-lg);
  transition: border-color var(--l1-transition), box-shadow var(--l1-transition), transform 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: var(--l1-shadow-md);
  transform: translateY(-1px);
}

.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-lg);
}

.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-lg) !important;
  box-shadow: var(--l1-shadow-sm) !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__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 deliberately does not wash the row in brand colour with
   brand-coloured text. That was the loudest thing on the checkout pages, and it
   was self-inflicted: because the fill was a light lavender, site.js had to
   swap Bootstrap's text-white-50 on and off to keep the sub-label legible, and
   only an `!important` colour: inherit in app.css stopped it rendering as
   near-white text on near-white. Selection is now marked the way the sidebar
   marks the current page — a 2px brand edge — so the accent means one thing
   and the text needs no compensating override. */
.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 {
  border-color: var(--l1-border-strong);
  box-shadow: inset 2px 0 0 var(--l1-brand);
}

.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-muted);
  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: 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: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-sm);
  color: var(--l1-ink);
}

: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.
   ========================================================================== */

/* ---------- Contact strip (client area) ----------
   The public site's standing phone/email bar, restated for the console shell:
   layouts/_contact_bar.html is shared, but the marketing bundle that styles the
   bare .l1-contactbar is not loaded inside /console/ or /client/.

   Scoped to the --console modifier rather than left unqualified, because this
   file loads *after* the marketing bundle — an unqualified .l1-contactbar rule
   here would silently restyle the public site's strip too. That scoping is also
   what lets the two surfaces diverge: light client mode keeps the grey shell
   chrome, dark client mode joins v4's ink-navy rail, and marketing pages keep
   their own palette, from one shared partial. */
.l1-contactbar--console {
  background: transparent;
  border-bottom: 0;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  position: relative;
  z-index: 41;
}

/* Dark client: the cluster sits on the stage bar. --l1-danger is re-pointed
   for the unread count: light-mode #b42318 is unreadable on a dark sheet. */
html[data-l1-theme="dark"] .l1-contactbar--console {
  --l1-danger: #f87171;
  background: transparent;
  border-bottom: 0;
  color: var(--l1-ink-muted);
  color-scheme: dark;
}

.l1-contactbar--console .l1-contactbar-inner {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--l1-space-1) var(--l1-space-3);
  justify-content: flex-start;
  padding: 0;
  width: auto;
}

.l1-contactbar--console .l1-contactbar-link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-1);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* Brightening to full ink rather than shifting to the brand blue, which is
   the hover the marketing strip uses. On the rail a blue link hover reads as
   the accent colour reserved for the active nav item. */
.l1-contactbar--console .l1-contactbar-link:hover {
  color: var(--l1-ink);
}

html[data-l1-theme="dark"] .l1-contactbar--console .l1-contactbar-link:hover {
  color: var(--l1-rail-ink);
}

.l1-contactbar--console .l1-contactbar-link i {
  font-size: .9em;
  opacity: .7;
}

/* ---------- Notification bell ----------
   Sits at the right end of the contact strip on both the public site and the
   client area. It lands on three different backgrounds: the marketing strip,
   the client light-mode grey chrome, and v4's ink-navy rail (admin, and the
   client area in dark mode). So the trigger is styled from `currentColor` and
   takes its colour from whichever strip it is in. Only the badge and the panel
   commit to colours of their own; the dark-client rail block re-points the
   panel. */
.l1-notifbell {
  display: inline-flex;
  /* Pulls the 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. */
  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);
}

/* On the dark-client rail the trigger's hover wash is a deliberate literal
   (see the base rule), so re-pointing surfaces does not touch it; match the
   top bar's icon buttons instead. Light client mode keeps the grey wash. */
html[data-l1-theme="dark"] .l1-contactbar--console .l1-notifbell__button:hover,
html[data-l1-theme="dark"] .l1-contactbar--console .l1-notifbell__button:focus-visible,
html[data-l1-theme="dark"] .l1-contactbar--console .l1-notifbell__button[aria-expanded="true"] {
  background: var(--l1-rail-hover);
  color: var(--l1-rail-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__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__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);
}

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

/* Two-column masonry-style packing. Panels keep their own height — a short
   empty state must not stretch to match the neighbour. */
.l1-admin-queues {
  align-items: start;
  display: grid;
  gap: var(--l1-console-section-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.l1-admin-queues > * {
  align-self: start;
  min-width: 0;
}

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

/* 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;
}

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

.l1-order-workspace.l1-deploy-layout {
  gap: var(--l1-space-4);
  grid-template-columns: minmax(0, 1.7fr) minmax(19rem, .8fr);
}

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

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

.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(4, 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 {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  box-shadow: inset 3px 0 0 var(--l1-brand);
}

.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: color-mix(in srgb, var(--l1-brand) 30%, var(--l1-border));
  color: var(--l1-brand-strong);
}

.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-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-brand-soft);
  border-color: var(--l1-brand-border);
  box-shadow: inset 0 3px 0 var(--l1-brand);
}

.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-muted);
  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-soft);
  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-dock {
  display: none;
}

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

  .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;
    padding: var(--l1-space-2) var(--l1-space-3);
    position: sticky;
    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: none;
    min-width: 10.5rem;
  }

  .l1-deploy-summary__submit,
  .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 (max-width: 720px) {
  .l1-deploy-balance {
    width: 100%;
  }

  .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-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.is-selected {
    box-shadow: inset 3px 0 0 var(--l1-brand);
  }

  .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 2.0 — workbench 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-49-console-2.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, #152a52);
  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, #0c1018);
}

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, 296px) minmax(0, 1fr);
  min-height: 0;
  padding: 0;
}

html[data-l1-theme] .l1-console-body .l1-workbench__stage {
  background: var(--l1-sheet, var(--l1-surface-1));
  border: 0;
  border-left: 1px solid var(--l1-border);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

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, #152a52);
  color: var(--l1-rail-ink, #f3f6ff);
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar {
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 3px 0 var(--l1-rail-accent, #60a5fa);
  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: .94;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

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

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, #152a52) 0%,
    var(--l1-rail-bg, #152a52) 24%,
    color-mix(in srgb, var(--l1-rail-bg, #152a52) 90%, transparent) 52%,
    color-mix(in srgb, var(--l1-rail-bg, #152a52) 30%, 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, #101722);
  border-right-color: transparent;
  box-shadow: inset 0 3px 0 var(--l1-rail-accent, #4c8cff);
  color: var(--l1-rail-ink, #eef2f8);
}

html[data-l1-theme] .l1-console-body.l1-client-portal-body .l1-console-sidebar {
  box-shadow: inset 0 3px 0 var(--l1-rail-cta, #2563eb);
}

html[data-l1-theme="dark"] .l1-console-body.l1-client-portal-body .l1-console-sidebar {
  box-shadow: inset 0 3px 0 var(--l1-rail-accent, #4c8cff);
}

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: .35rem .3rem;
}

.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: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: flex-start;
  overflow: hidden;
  padding: 5px;
  width: 36px;
}

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

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

.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: linear-gradient(
    135deg,
    color-mix(in srgb, var(--l1-rail-cta, #2563eb) 88%, #ffffff) 0%,
    var(--l1-rail-cta, #2563eb) 58%,
    var(--l1-brand-strong, #1d4ed8) 100%
  );
  border-color: transparent;
  border-radius: var(--l1-radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 .45rem 1.2rem rgba(5, 24, 70, .22);
  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: #ffffff;
  box-shadow: none;
  color: var(--l1-brand-strong, #1d4ed8);
}

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: blur(7px);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--l1-rail-accent, #60a5fa) 30%, transparent),
    color-mix(in srgb, var(--l1-rail-bg-raised, #1c3a6e) 58%, transparent)
  );
  border-color: color-mix(in srgb, var(--l1-rail-accent, #60a5fa) 22%, transparent);
  box-shadow:
    inset 3px 0 0 var(--l1-rail-accent, #60a5fa),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #ffffff;
}

html[data-l1-theme] .l1-console-body .l1-topbar {
  background: transparent;
  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: 32px;
  width: 32px;
}

.l1-action-tile {
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-sm);
  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%;
}

@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, #152a52);
    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, 296px), 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, #101722);
    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);
  }

  .l1-contactbar--console .l1-contactbar-link span {
    display: none;
  }
}

.l1-docs-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  padding: 0 0 3rem;
}

.l1-docs-nav {
  font-size: .9375rem;
}

.l1-docs-nav__label {
  color: var(--l1-ink-muted, #5b6b86);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 .75rem;
  text-transform: uppercase;
}

.l1-docs-nav ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.l1-docs-nav li + li {
  margin-top: .35rem;
}

.l1-docs-nav a[aria-current="page"] {
  font-weight: 700;
}

.l1-docs-index-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.l1-docs-index-list li + li {
  margin-top: .4rem;
}

.l1-live-chat-thread__log {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-height: 28rem;
  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, #5b6b86);
  font-size: .75rem;
}

.l1-live-chat-msg p {
  margin: 0;
  white-space: pre-wrap;
}

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

.l1-chat-dock {
  --l1-chat-panel-h: min(32rem, 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 {
  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;
}

.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;
  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;
}

.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;
  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: flex-start;
  flex: none;
}

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

.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] {
  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%;
  padding: .55rem .7rem;
  white-space: pre-wrap;
}

.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;
}

.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-docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-chat-dock {
    bottom: 0;
    left: auto;
    max-width: 100vw;
    right: 0;
    width: min(24rem, 100vw);
  }
}

@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;
  }
}