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

/* Device credentials stay above the VNC display, including in fullscreen. */
.ui-console__access {
  align-items: center;
  background: var(--l1-surface-1);
  border-bottom: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md) var(--l1-radius-md) 0 0;
  color: var(--l1-ink);
  display: flex;
  flex: none;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2) var(--l1-space-4);
  padding: var(--l1-space-3) var(--l1-space-4);
}

.ui-console__access code { overflow-wrap: anywhere; }

/* A non-modal keyboard inside the VNC frame so it also works in fullscreen. */
.ui-console-keyboard {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-lg);
  color: var(--l1-ink);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  position: fixed;
  user-select: none;
  width: min(760px, calc(100vw - 16px));
  z-index: 100;
}

.ui-console-keyboard[hidden] { display: none; }

.ui-console-keyboard__head {
  align-items: stretch;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
}

.ui-console-keyboard__drag,
.ui-console-keyboard__close {
  background: transparent;
  border: 0;
  color: inherit;
  min-height: 44px;
  padding: var(--l1-space-2) var(--l1-space-3);
}

.ui-console-keyboard__drag {
  align-items: center;
  cursor: grab;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2);
  text-align: left;
  touch-action: none;
}

.ui-console-keyboard__drag:active { cursor: grabbing; }
.ui-console-keyboard__drag span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.ui-console-keyboard__close { cursor: pointer; font-size: 1.5rem; min-width: 44px; }
.ui-console-keyboard__keys { display: grid; gap: 5px; padding: var(--l1-space-3); }
.ui-console-keyboard__row { display: flex; gap: 5px; }

.ui-console-keyboard__key {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  flex-basis: 0;
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  min-height: 38px;
  min-width: 0;
  padding: 4px 1px;
  touch-action: manipulation;
}

.ui-console-keyboard__key:hover,
.ui-console-keyboard__key:active,
.ui-console-keyboard__key[aria-pressed="true"] {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
}

.ui-console-keyboard button:focus-visible {
  box-shadow: var(--l1-focus-ring);
  outline: 0;
}

/* ---------- Framework messages ----------
   The Django messages framework carries almost every POST outcome in the
   product, so this is the highest-traffic status surface there is. It lived in
   legacy app.css, which the auth and marketing layouts do not load, and it
   defined only two tones: success, and one shared rule for error *and*
   warning.

   That shared rule was not cosmetic. `messages.warning()` is chosen over
   `error` at the partial-success call sites -- the action took effect and a
   follow-up will retry itself ("Floating IP assignment was saved, but firewall
   sync will retry automatically") -- and rendering those in failure red is how
   a customer concludes the action failed and retries work that already
   succeeded. Four levels, four tones, one per meaning.

   Tones come from --l1-* so dark mode swaps with tokens.css and there is no
   second palette to keep in step. Lives here rather than app.css because
   components.css is loaded by every layout. */
.messages {
  display: grid;
  gap: var(--l1-space-3);
  margin-bottom: var(--l1-space-4);
}

.message {
  border: 1px solid var(--l1-border);
  border-left-width: 3px;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  line-height: 1.5;
  padding: var(--l1-space-3) var(--l1-space-4);
}

.message-success {
  background: var(--l1-ok-soft);
  border-color: color-mix(in srgb, var(--l1-ok) 35%, transparent);
  border-left-color: var(--l1-ok);
  color: var(--l1-ok);
}

.message-warning {
  background: var(--l1-warn-soft);
  border-color: color-mix(in srgb, var(--l1-warn) 35%, transparent);
  border-left-color: var(--l1-warn);
  color: var(--l1-warn);
}

.message-error {
  background: var(--l1-danger-soft);
  border-color: color-mix(in srgb, var(--l1-danger) 35%, transparent);
  border-left-color: var(--l1-danger);
  color: var(--l1-danger);
}

.message-info,
.message-debug {
  background: var(--l1-info-soft);
  border-color: color-mix(in srgb, var(--l1-info) 35%, transparent);
  border-left-color: var(--l1-info);
  color: var(--l1-info);
}

/* The level word carried for screen readers and for anyone who cannot use the
   tone. See templates/layouts/_messages.html. */
.message__level {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ---------- Form validation errors ----------
   Django emits <ul class="errorlist"> for every {{ field.errors }} and
   {{ form.non_field_errors }}. The class had exactly two rules in the whole
   codebase, scoped to the looking glass page and to the admin console inside a
   .ui-notice, so on every client portal page a validation error rendered as
   default-coloured body text with browser bullets and did not read as an error
   at all. This one rule covers ~90 render sites without touching a template. */
.errorlist {
  color: var(--l1-danger);
  display: grid;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  gap: 2px;
  line-height: 1.4;
  list-style: none;
  margin: var(--l1-space-1) 0 0;
  padding: 0;
}

.errorlist:empty { display: none; }

/* Django puts form-wide errors in the same element as field errors. Given a
   little more room, it reads as the block-level notice it is. */
.errorlist.nonfield {
  background: var(--l1-danger-soft);
  border-left: 3px solid var(--l1-danger);
  border-radius: var(--l1-radius-sm);
  padding: var(--l1-space-2) var(--l1-space-3);
}

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

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

/* Inside a panel the outer hairline already groups the section. */
.ui-panel .l1-filter-bar {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--l1-border);
  border-radius: 0;
}
.l1-filter-bar--compact {
  margin: 0;
  padding: var(--l1-space-1) var(--l1-space-2);
}
.l1-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-1);
}
.l1-filter-bar__field--grow {
  flex: 1 1 280px;
}
.l1-filter-bar__field > span {
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--l1-ink-muted);
}
.l1-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.l1-filter-bar select {
  padding: var(--l1-space-2) var(--l1-space-3);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-sm);
  background: var(--l1-surface-1);
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
}

/* ---------- Bootstrap brand bridge ----------
   The client area and marketing site render on stock Bootstrap (loaded from the
   CDN with its default blue primary). This bridge points Bootstrap's brand
   variables at the LayerOne tokens so every .btn-primary, badge, link, and
   subtle surface across those surfaces adopts the unified brand blue in light
   and dark mode — without touching individual templates. Loaded last, so it wins
   over the CDN defaults.

   The -rgb triples must be kept numerically equal to --l1-brand: Bootstrap
   builds its own alpha colours with rgba(var(--bs-primary-rgb), …), so a var()
   cannot be used here. There is no way to make the compiler check this, so when
   a brand token changes, these change in the same edit — they have silently
   drifted from the token twice already, and the symptom is subtle: solid fills
   look right and only the alpha tints (table hovers, focus washes, .bg-primary
   bg-opacity utilities) keep the old hue. */
:root {
  --bs-primary: var(--l1-brand);
  --bs-primary-rgb: 37, 99, 235;         /* #2563eb — --l1-brand */
  --bs-primary-bg-subtle: var(--l1-brand-soft);
  --bs-primary-border-subtle: var(--l1-brand-border);
  --bs-primary-text-emphasis: var(--l1-brand-strong);
  --bs-link-color: var(--l1-brand);
  --bs-link-color-rgb: 37, 99, 235;      /* #2563eb — --l1-brand */
  --bs-link-hover-color: var(--l1-brand-strong);
  --bs-border-radius: var(--l1-radius-md);
  --bs-border-radius-sm: var(--l1-radius-sm);
}
[data-l1-theme="dark"] {
  --bs-primary: var(--l1-brand);
  --bs-primary-rgb: 96, 165, 250;        /* #60a5fa — dark --l1-brand */
  --bs-primary-bg-subtle: var(--l1-brand-soft);
  --bs-primary-border-subtle: var(--l1-brand-border);
  --bs-primary-text-emphasis: var(--l1-brand-strong);
  --bs-link-color: var(--l1-brand-strong);
  --bs-link-color-rgb: 147, 197, 253;    /* #93c5fd — dark --l1-brand-strong */
  --bs-link-hover-color: var(--l1-brand-contrast);
}
/* Bootstrap solid/outline primary buttons hardcode their compiled colors via
   per-component --bs-btn-* vars, so map those to the brand too. */
.btn-primary {
  --bs-btn-bg: var(--l1-brand);
  --bs-btn-border-color: var(--l1-brand);
  --bs-btn-hover-bg: var(--l1-brand-strong);
  --bs-btn-hover-border-color: var(--l1-brand-strong);
  --bs-btn-active-bg: var(--l1-brand-strong);
  --bs-btn-active-border-color: var(--l1-brand-strong);
  --bs-btn-disabled-bg: var(--l1-brand);
  --bs-btn-disabled-border-color: var(--l1-brand);
  --bs-btn-color: var(--l1-on-brand);
  --bs-btn-hover-color: var(--l1-on-brand);
  --bs-btn-active-color: var(--l1-on-brand);
  --bs-btn-disabled-color: var(--l1-on-brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--l1-brand);
  --bs-btn-border-color: var(--l1-brand);
  --bs-btn-hover-bg: var(--l1-brand);
  --bs-btn-hover-border-color: var(--l1-brand);
  --bs-btn-hover-color: var(--l1-on-brand);
  --bs-btn-active-bg: var(--l1-brand);
  --bs-btn-active-border-color: var(--l1-brand);
  --bs-btn-active-color: var(--l1-on-brand);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.l1-console-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-console-nav-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.l1-console-nav-loader__spinner {
  animation: l1-console-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-hosting-progress {
  background: color-mix(in srgb, var(--l1-brand) 6%, var(--l1-surface-1));
  border: 1px solid color-mix(in srgb, var(--l1-brand) 24%, var(--l1-border));
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-2);
  padding: var(--l1-space-3) var(--l1-space-4);
}

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

.l1-hosting-progress__head strong {
  font-size: var(--l1-text-dense);
  line-height: 1.25;
}

.l1-hosting-progress__spinner {
  flex: none;
  height: 14px;
  width: 14px;
}

.l1-hosting-progress__live {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  margin-left: auto;
  text-transform: uppercase;
}

.l1-hosting-progress__jobs {
  display: grid;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0 calc(14px + var(--l1-space-2));
}

.l1-hosting-progress__jobs li {
  align-items: center;
  display: flex;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-3);
  justify-content: space-between;
  min-width: 0;
}

.l1-hosting-progress__jobs li > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-hosting-progress__more {
  color: var(--l1-ink-muted);
}

.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-nav-spin {
  to { transform: rotate(360deg); }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.l1-thread-message--ai .l1-thread-message__avatar {
  color: var(--l1-ink-muted);
}

.l1-thread-message--ai .l1-thread-message__avatar :is(svg, i[data-lucide]) {
  height: 0.875rem;
  width: 0.875rem;
}

.l1-thread-message__disclaimer {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  line-height: 1.45;
  margin-bottom: var(--l1-space-2);
}

.l1-thread-message__ai-mark {
  align-items: center;
  display: inline-flex;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  gap: 0.35rem;
  margin-bottom: var(--l1-space-3);
}

.l1-thread-message__ai-mark :is(svg, i[data-lucide]) {
  height: 0.875rem;
  width: 0.875rem;
}

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* A radio mark for single-choice rows (order page billing options), instead
   of "Select" / "Selected" text standing in for one. */
.l1-choice__radio {
  border: 1.5px solid var(--l1-border-strong);
  border-radius: 50%;
  flex: none;
  height: 1rem;
  width: 1rem;
}
.l1-choice.is-selected .l1-choice__radio {
  background: var(--l1-brand);
  border-color: var(--l1-brand);
  box-shadow: inset 0 0 0 3px var(--l1-surface-1);
}
.l1-choice__radio + .l1-choice__copy { flex: 1 1 0; min-width: 0; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* A state that needs the customer (an application down, credit running out)
   leads with a tone dot, the same signal as a status chip. */
.l1-notifbell__item[data-tone] .l1-notifbell__item-title { align-items: center; display: flex; gap: .5rem; }
.l1-notifbell__dot { background: var(--l1-ink-muted); border-radius: 50%; flex: none; height: .5rem; width: .5rem; }
.l1-notifbell__item[data-tone="danger"] .l1-notifbell__dot { background: var(--l1-danger); }
.l1-notifbell__item[data-tone="warn"] .l1-notifbell__dot { background: var(--l1-warn); }

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

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

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

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

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

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

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

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

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

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

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

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

/* Brand lockup in the console top bar. This used to be
   `filter: brightness(0) invert(1)` under the dark theme, which made the navy
   wordmark legible by flattening the entire lockup — mark included — to a white
   silhouette. There is a real white-wordmark lockup now, so the mark keeps its
   blue and the two are swapped instead.
   `.l1-topbar__brand img` is (0,1,1), so the parent class has to appear in
   these selectors or the hidden lockup would still render. */
.l1-topbar__brand .l1-brand-logo--dark { display: none; }
html[data-l1-theme="dark"] .l1-topbar__brand .l1-brand-logo--light { display: none; }
html[data-l1-theme="dark"] .l1-topbar__brand .l1-brand-logo--dark { display: block; }

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

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

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

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

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

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

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

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

/* Billing | LayerOne: the admin console's two sections
   (templates/layouts/_console_section_switch.html). A segmented pair of
   links, 32px tall on a neutral surface; the current section is the raised
   segment with a 2px brand underline. The count shows waiting work in the
   section you are not in, so it hides on the current one. The top-bar copy
   shows from 992px; below that the same switch opens the phone drawer. */
.l1-section-switch {
  align-items: stretch;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
}
.l1-section-switch__link {
  align-items: center;
  border-radius: calc(var(--l1-radius-sm) - 1px);
  color: var(--l1-ink-muted);
  display: inline-flex;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-medium);
  gap: .4rem;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0 .8rem;
  text-decoration: none;
  white-space: nowrap;
}
.l1-section-switch__link:hover {
  color: var(--l1-ink);
  text-decoration: none;
}
.l1-section-switch__link:focus-visible {
  box-shadow: var(--l1-focus-ring);
  outline: 0;
}
.l1-section-switch__link[aria-current="true"] {
  background: var(--l1-sheet);
  box-shadow: inset 0 -2px 0 var(--l1-brand), var(--l1-shadow-sm);
  color: var(--l1-ink);
  font-weight: var(--l1-fw-semibold);
}
.l1-section-switch__count {
  align-items: center;
  background: var(--l1-warn-soft);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-warn);
  display: inline-flex;
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  height: 1.125rem;
  justify-content: center;
  min-width: 1.125rem;
  padding: 0 .35rem;
}
.l1-section-switch__count[hidden],
.l1-section-switch__link[aria-current="true"] .l1-section-switch__count { display: none; }
.l1-section-switch--drawer { display: none; }
@media (max-width: 991.98px) {
  .l1-section-switch--topbar { display: none; }
  /* The drawer sits on the rail's own dark surface. */
  .l1-console-sidebar .l1-section-switch--drawer {
    background: var(--l1-rail-bg-raised);
    border-color: var(--l1-rail-line);
    display: flex;
    margin: 0 var(--l1-space-3) var(--l1-space-3);
  }
  .l1-console-sidebar .l1-section-switch--drawer .l1-section-switch__link {
    color: var(--l1-rail-ink-muted);
    flex: 1 1 0;
    min-height: 2.25rem;
  }
  .l1-console-sidebar .l1-section-switch--drawer .l1-section-switch__link[aria-current="true"] {
    background: var(--l1-rail-active-bg);
    box-shadow: inset 0 -2px 0 var(--l1-rail-accent);
    color: var(--l1-rail-ink);
  }
}
.l1-topbar__search-key {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  flex: none;
  font-family: var(--l1-font-body);
  font-size: var(--l1-text-micro);
  line-height: 1;
  padding: .2rem .4rem;
}
.l1-topbar__search:focus-within .l1-topbar__search-key { display: none; }
/* One surface: theme and form rules must not paint the inner input or the
   "/" key (a bare kbd renders white on dark), so the field reads as one piece. */
html[data-l1-theme] .l1-topbar__search .l1-topbar__search-input { background: transparent; box-shadow: none; }
/* app.css paints every dark console input with !important; only an !important
   here keeps the inner field from reading as a lighter box with a seam. */
html[data-l1-theme="dark"] .l1-topbar__search .l1-topbar__search-input { background-color: transparent !important; border-color: transparent !important; }
html[data-l1-theme] .l1-topbar__search .l1-topbar__search-key {
  background: transparent;
  border-color: var(--l1-border-strong);
  box-shadow: none;
  color: var(--l1-ink-muted);
}
/* The admin bar's section name is a plain label beside the logo (the switch in
   the drawer and the top bar does the switching), not a chip that looks tappable. */
.l1-admin-console-body .l1-topbar__context {
  background: transparent;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-medium);
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
}
/* Phones: the admin bar carries the section name, search, theme and account,
   so the public-site icon moves into the account menu's Public pages group. */
.l1-topbar__menu-public { display: none; }
@media (max-width: 479.98px) {
  .l1-admin-console-body .l1-topbar__public { display: none; }
  .l1-admin-console-body .l1-topbar__menu-public { display: list-item; }
}

/* The workspace pill answers "which tenant am I about to change things in",
   so it carries a surface and a border at rest rather than only on hover: a
   transparent control read as a label, and there is no other tenant marker in
   the bar. The personal-workspace link shares the treatment because it is the
   same slot for an account with no organization. */
.l1-topbar__tenant-toggle,
.l1-topbar__personal {
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 18rem;
  min-width: 0;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 1.35rem;
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-md);
  background: var(--l1-surface-2);
  box-shadow: var(--l1-shadow-sm);
  color: var(--l1-ink);
  text-align: left;
}
.l1-topbar__tenant-toggle:hover,
.l1-topbar__tenant-toggle:focus-visible,
.l1-topbar__tenant-toggle[aria-expanded="true"],
.l1-topbar__personal:hover,
.l1-topbar__personal:focus-visible {
  border-color: var(--l1-brand);
  background: var(--l1-surface-3);
  color: var(--l1-ink);
}
.l1-topbar__tenant-toggle > svg { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Scoped to the client bar: the admin workspace block is a caption, not a
   control, and does not want the extra weight. */
.l1-topbar__workspace--client .l1-topbar__workspace-icon { flex-basis: 1.75rem; height: 1.75rem; width: 1.75rem; }
.l1-topbar__workspace--client .l1-topbar__workspace-icon i,
.l1-topbar__workspace--client .l1-topbar__workspace-icon svg { height: 1.1rem; width: 1.1rem; }
.l1-topbar__workspace--client .l1-topbar__workspace-copy strong { font-size: .875rem; margin-top: 0; }
.l1-topbar__workspace--client .l1-topbar__workspace-icon {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.l1-topbar__tenant-mark {
  align-items: center;
  display: inline-flex;
  flex: 0 0 1.25rem;
  font-size: .7rem;
  font-weight: 700;
  height: 1.25rem;
  justify-content: center;
  letter-spacing: 0;
  text-transform: uppercase;
  width: 1.25rem;
}
.l1-topbar__tenant-mark svg { height: 15px; width: 15px; }
/* An unboxed field group, like the name field above it: a bordered fieldset
   inside the form panel read as a box inside a box. */
.l1-tenant-icon-picker {
  border: 0;
  display: grid;
  gap: var(--l1-space-2);
  margin: 0;
  min-width: 0;
  padding: 0;
}
.l1-tenant-icon-picker legend {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: 600;
  margin-bottom: var(--l1-space-2);
  padding: 0;
}
.l1-tenant-icon-picker__grid {
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
}
.l1-tenant-icon-picker__option {
  align-items: center;
  aspect-ratio: 1;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 2.75rem;
  position: relative;
}
.l1-tenant-icon-picker__option:hover,
.l1-tenant-icon-picker__option:has(:focus-visible) {
  border-color: var(--l1-brand);
}
.l1-tenant-icon-picker__option:has(:checked) {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand);
  color: var(--l1-brand-strong);
}
.l1-tenant-icon-picker__option input {
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.l1-tenant-icon-picker__mark {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.l1-tenant-icon-picker__mark svg { height: 1.1rem; width: 1.1rem; }
.l1-tenant-list__name {
  align-items: center;
  display: inline-flex;
  gap: var(--l1-space-2);
}
.l1-tenant-list__mark {
  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: 0 0 1.75rem;
  font-size: .75rem;
  font-weight: 700;
  height: 1.75rem;
  justify-content: center;
  text-transform: uppercase;
  width: 1.75rem;
}
.l1-tenant-list__mark svg { height: .95rem; width: .95rem; }
.l1-workspace-row .l1-tenant-list__name .ui-chip { margin-left: var(--l1-space-2); vertical-align: 1px; }

/* Organization pages: the add/edit workspace panel sized to its form, the
   rename form as one field with its button beside it, and member access where
   the workspace checklist only appears for "Specific workspaces". */
.l1-client-portal-body .l1-org-form { max-width: 40rem; width: 100%; }
.l1-org-name-form {
  align-items: end;
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: minmax(0, 28rem) auto;
  justify-content: start;
}
.l1-org-name-form > .l1-field { margin: 0; }
.l1-org-person { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-org-invite { display: grid; gap: var(--l1-space-4); }
.l1-org-invite__form { display: grid; gap: var(--l1-space-3); justify-items: start; max-width: 28rem; }
.l1-org-invite__form > .l1-field { justify-self: stretch; }
.l1-scope-picker { display: grid; gap: var(--l1-space-3); }
.l1-scope-picker .l1-choice-set { margin: 0; }
.l1-scope-picker:has(input[value="all"]:checked) .l1-scope-picker__list { display: none; }
@media (max-width: 575px) {
  .l1-org-name-form { grid-template-columns: minmax(0, 1fr); }
  .l1-org-name-form > .ui-btn { justify-self: start; }
}
.l1-topbar__tenant-menu { max-height: min(30rem, 70dvh); overflow-y: auto; max-width: calc(100vw - 2rem); }
.l1-topbar__tenant-menu .dropdown-item > span { white-space: normal; overflow-wrap: anywhere; }
.l1-topbar__personal { text-decoration: none; }
.l1-console-nav .nav-link[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.l1-console-nav .nav-link[aria-disabled="true"] > svg:last-child { width: .85rem; margin-left: 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__account-copy {
  display: grid;
  line-height: 1.15;
  max-width: 10rem;
  min-width: 0;
  text-align: left;
}

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

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

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

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

.l1-topbar__menu,
.l1-action-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,
.l1-action-menu .dropdown-item {
  color: var(--l1-ink);
}

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

.l1-topbar__menu .dropdown-divider,
.l1-action-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,
html[data-l1-theme="dark"] .l1-console-body .l1-action-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,
html[data-l1-theme="dark"] .l1-console-body .l1-action-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,
html[data-l1-theme="dark"] .l1-console-body .l1-action-menu .dropdown-item:hover,
html[data-l1-theme="dark"] .l1-console-body .l1-action-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,
html[data-l1-theme="dark"] .l1-console-body .l1-action-menu .dropdown-divider {
  border-color: var(--l1-border);
}

html[data-l1-theme="dark"] .l1-console-body .l1-action-menu .dropdown-item[data-tone="danger"] {
  color: var(--l1-danger);
}

html[data-l1-theme="dark"] .l1-console-body .l1-action-menu .dropdown-item[data-tone="danger"]:hover,
html[data-l1-theme="dark"] .l1-console-body .l1-action-menu .dropdown-item[data-tone="danger"]:focus {
  background: var(--l1-danger-soft);
  color: var(--l1-danger);
}

.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,
.l1-action-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);
  text-decoration: none;
}

.l1-topbar__menu .dropdown-item i,
.l1-topbar__menu .dropdown-item svg,
.l1-action-menu .dropdown-item i,
.l1-action-menu .dropdown-item svg {
  flex: none;
  height: 15px;
  width: 15px;
}

/* A Create entry that cannot be ordered yet (web hosting before launch):
   listed so customers know it is coming, quiet, and not a link. */
/* Destructive entries sit last, behind a divider, in the danger tone. */
.l1-action-menu .dropdown-item[data-tone="danger"] { color: var(--l1-danger); }
.l1-action-menu .dropdown-item[data-tone="danger"]:hover,
.l1-action-menu .dropdown-item[data-tone="danger"]:focus { background: var(--l1-danger-soft); color: var(--l1-danger); }
.l1-action-menu form { margin: 0; }
.l1-action-menu button.dropdown-item { width: 100%; }
.l1-action-menu .dropdown-item:disabled { color: var(--l1-ink-muted); cursor: not-allowed; opacity: .7; }
/* The top-bar Create menu (layouts/_console_create_menu.html): two grouped
   columns, each entry with a one-line description; one column on phones. */
.l1-create-menu { max-height: calc(100dvh - var(--l1-topbar-h) - 1rem); overflow-y: auto; padding: var(--l1-space-2); }
.l1-topbar__create .l1-create-menu.show { display: grid; gap: 0 var(--l1-space-2); grid-template-columns: repeat(2, minmax(15rem, 1fr)); }
.l1-create-menu__col { display: grid; align-content: start; gap: 1px; }
.l1-create-menu .l1-create-menu__heading { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); letter-spacing: .04em; margin: 0; padding: var(--l1-space-2) var(--l1-space-3) var(--l1-space-1); text-transform: uppercase; }
.l1-create-menu .l1-create-menu__heading:not(:first-child) { margin-top: var(--l1-space-2); }
.l1-create-menu .dropdown-item { align-items: flex-start; white-space: normal; }
.l1-create-menu .dropdown-item > svg { color: var(--l1-ink-muted); margin-top: 2px; }
.l1-create-menu .dropdown-item strong { display: block; font-size: var(--l1-text-dense); font-weight: var(--l1-fw-semibold); }
.l1-create-menu .dropdown-item small { color: var(--l1-ink-muted); display: block; font-size: var(--l1-text-micro); line-height: 1.4; }
/* Coming soon reads as unavailable in both themes (the dark menu rule would
   otherwise paint it full ink). */
html .l1-console-body .l1-create-menu .dropdown-item.l1-action-menu__soon { color: var(--l1-ink-muted); }
@media (max-width: 575.98px) {
  .l1-topbar__create .l1-create-menu.show { grid-template-columns: minmax(0, 1fr); min-width: min(20rem, calc(100vw - 2rem)); }
}
.l1-action-menu .l1-action-menu__soon,
.l1-action-menu .l1-action-menu__soon:hover {
  background: transparent;
  color: var(--l1-ink-muted);
  cursor: default;
}
.l1-action-menu__note {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  margin-inline-start: auto;
}

.l1-action-dropdown > .ui-btn [data-lucide="chevron-down"] {
  margin-inline-start: .1rem;
}

.l1-action-dropdown > .ui-btn[aria-expanded="true"] [data-lucide="chevron-down"] {
  transform: rotate(180deg);
}

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

/* In the console a priority or severity is a sentence-case word, not a pill,
   and only the levels that ask for attention (urgent/critical, high/major)
   carry colour. A coloured "Low" read as good news and a blue "Normal" as a
   link. The client portal keeps its flagged chip. */
.l1-admin-console-body .l1-priority {
  background: none;
  color: var(--l1-ink-muted);
  font-size: inherit;
  font-weight: var(--l1-fw-medium);
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
}
.l1-admin-console-body .l1-priority[data-level="urgent"] { color: var(--l1-danger); font-weight: var(--l1-fw-semibold); }
.l1-admin-console-body .l1-priority[data-level="high"] { color: var(--l1-warn); font-weight: var(--l1-fw-semibold); }

.l1-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  justify-content: flex-end;
}

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

/* One row-action style in the console: a text action is a link (brand
   colour, right-aligned by .l1-row-actions), more than two go in the "..."
   menu (.l1-row-action--icon). Destructive ones stay quiet until hovered. */
.l1-admin-console-body a.l1-row-action:not(.l1-row-action--icon, [data-tone="danger"]) { color: var(--l1-brand); }
.l1-admin-console-body a.l1-row-action:not(.l1-row-action--icon, [data-tone="danger"]):hover { color: var(--l1-brand-strong); }

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

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

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

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

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

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

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

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

/* Customer server header (billing/_service_head.html): identity and one line
   of facts on the left, the actions (Console, Power, Upgrade, More) at the far
   end. The sections are the left sidebar (layouts/_console_instance_sidebar.html). */
.l1-service-chrome { display: grid; min-width: 0; }
.l1-service-chrome > .ui-page__head.l1-service-head {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--l1-space-3) var(--l1-space-4);
}
.l1-service-head__identity { flex: 1 1 22rem; min-width: 0; }
.l1-service-head__facts {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-dense);
  gap: .25rem 0;
  list-style: none;
  margin: var(--l1-space-2) 0 0;
  padding: 0;
}
.l1-service-head__facts > li { align-items: center; display: inline-flex; min-width: 0; }
.l1-service-head__facts > li + li::before { color: var(--l1-border-strong); content: "·"; margin-inline: .5rem; }
/* Server header facts wrap on a phone. Each fact carries its own leading dot
   and the row is pulled left under a clipping wrapper, so a wrapped line never
   starts with a stray separator. The 3px padding keeps focus rings visible. */
.l1-service-head__facts-clip { margin: calc(var(--l1-space-2) - 3px) -3px -3px; overflow: hidden; padding: 3px; }
.l1-service-head__facts-clip > .l1-service-head__facts { margin: 0 0 0 -1.25rem; }
.l1-service-head__facts-clip > .l1-service-head__facts > li::before { color: var(--l1-border-strong); content: "·"; flex: none; margin-inline: 0; text-align: center; width: 1.25rem; }
/* Phone tab row for the server sections, under the header. The sidebar aside
   carries the same links on wider screens. */
.l1-service-chrome > .l1-service-head__tabs { display: none; }
@media (max-width: 767px) {
  /* It is a .l1-section-sidebar__nav, so it gets the shared phone tab row,
     edge fade included. */
  .l1-service-chrome > .l1-service-head__tabs { display: flex; margin-top: var(--l1-space-4); }
  .l1-section-workspace:has(.l1-service-head__tabs) > [data-l1-instance-sidebar] { display: none; }
}
.l1-service-head__facts strong { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-service-head__facts .l1-copyable__value { color: var(--l1-ink); }
/* The server's power state beside its name reads as a chip, not small grey
   text: it is the first thing an operator checks. The live poller still
   repaints the inner .ui-status (vm-power-state.js). */
.l1-server-head__state > .ui-status {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: 999px;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  padding: 2px var(--l1-space-3) 2px var(--l1-space-2);
}
.l1-server-head__state > .ui-status[data-tone="ok"] { background: var(--l1-ok-soft); border-color: color-mix(in srgb, var(--l1-ok) 35%, transparent); color: var(--l1-ok); }
.l1-server-head__state > .ui-status[data-tone="warn"] { background: var(--l1-warn-soft); border-color: color-mix(in srgb, var(--l1-warn) 35%, transparent); color: var(--l1-warn); }
.l1-server-head__state > .ui-status[data-tone="danger"] { background: var(--l1-danger-soft); border-color: color-mix(in srgb, var(--l1-danger) 35%, transparent); color: var(--l1-danger); }
.l1-server-head__state > .ui-status[data-tone="info"],
.l1-server-head__state > .ui-status[data-tone="busy"] { background: var(--l1-info-soft); border-color: color-mix(in srgb, var(--l1-info) 35%, transparent); color: var(--l1-info); }
.l1-service-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  margin-left: auto;
}
.l1-service-actions > form { display: inline-flex; margin: 0; }

/* Power and More: <details> menus, so they open without JavaScript. app.js
   (bindInstanceMenus) closes them and floats one that sits in a scrolling
   table. Items reuse the header dropdown look (.l1-action-menu). */
.l1-service-menu { position: relative; }
.l1-service-menu > summary { cursor: pointer; list-style: none; }
.l1-service-menu > summary::-webkit-details-marker { display: none; }
.l1-service-menu__chevron { transition: transform .15s ease; }
.l1-service-menu[open] .l1-service-menu__chevron { transform: rotate(180deg); }
.l1-service-menu__more { padding-inline: .625rem; }
.l1-service-menu__list {
  display: grid;
  gap: 1px;
  min-width: 17rem;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
}
.l1-service-menu__list form { margin: 0; }
.l1-service-menu__list .dropdown-divider { border-top: 1px solid var(--l1-border); margin: var(--l1-space-1) 0; opacity: 1; }
.l1-service-menu__list .dropdown-item {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  white-space: normal;
  width: 100%;
}
.l1-service-menu__list .dropdown-item:disabled { cursor: not-allowed; opacity: .5; }
.l1-service-menu__label { display: grid; gap: 1px; }
.l1-service-menu__label small { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-normal); }
.l1-action-menu .dropdown-item.l1-service-menu__danger,
html[data-l1-theme="dark"] .l1-console-body .l1-action-menu .dropdown-item.l1-service-menu__danger { color: var(--l1-danger); }
@media (max-width: 575px) {
  .l1-service-actions { margin-left: 0; width: 100%; }
  .l1-service-actions > form,
  .l1-service-actions > a,
  .l1-service-actions > button,
  .l1-service-actions > .l1-service-menu:not(:last-child) { flex: 1 1 0; }
  .l1-service-actions > form > .ui-btn,
  .l1-service-actions > .l1-service-menu:not(:last-child) > summary { justify-content: center; width: 100%; }
  .l1-service-actions .ui-btn { gap: .375rem; padding-inline: .625rem; }
  .l1-service-actions .l1-service-menu__chevron { display: none; }
  .l1-service-menu__list { max-width: calc(100vw - 2rem); }
}

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

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

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

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

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

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

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

/* Columns that earn their place on wide screens but are droppable when space
   is tight. The data stays reachable on the record's own page. */
@media (max-width: 1250px) {
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Page markers and script hooks (September 2026 redesign). These classes name
   a page, a region or a JavaScript target; their look comes from their parent
   blocks or modifiers, so the rule is empty on purpose. Listed here so the
   design audit (apps/core/design_audit.py) knows they are intentional. */
.l1-brand-logo,
.l1-credit-counter__value,
.l1-nav-tenant-switch,
.l1-aegis-sidebar,
.l1-add-credit__actions,
.l1-app-create-bar,
.l1-apps-page,
.l1-billing-overview__col--side,
.l1-bw-meter__key,
.l1-catalog-page,
.l1-catalog-pagination,
.l1-database-create,
.l1-home-people,
.l1-images-storage,
.l1-inline-search,
.l1-iso-panel,
.l1-log-pager,
.l1-marketplace-panel,
.l1-ops-board-page,
.l1-overview-activity,
.l1-overview-list,
.l1-plan-family,
.l1-plan-table--families,
.l1-referral-code,
.l1-referrals__band,
.l1-settings__frame,
.l1-settings-section--secondary,
.l1-support-inbox-panel,
.l1-targets,
.l1-ticket-queue-page {}

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

/* Keep operational queues in a stable reading order as their contents change. */
.l1-admin-queues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--l1-console-section-gap);
  align-items: start;
}

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

.l1-admin-queues > .l1-failure-feed { grid-column: 1 / -1; }

@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 account rows and announcement layout compose .ui-panel
   with the client page primitives in assets/tailwind.css. */

/* Standalone links (View all, All receipts, Payment methods) share the help
   link's look: brand colour, medium weight, underline on hover. */
.l1-link-arrow {
  color: var(--l1-brand);
  font-weight: var(--l1-fw-medium, 500);
  text-decoration: none;
}

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

.l1-bandwidth-legend,
.l1-bandwidth-legend li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.l1-bandwidth-legend {
  gap: .65rem 1.5rem;
  list-style: none;
  margin: 0 0 var(--l1-space-3);
  padding: 0;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
}

.l1-bandwidth-legend li { flex-wrap: nowrap; gap: .375rem; }

/* Each legend item carries its own figure, so the pool still reads on a phone
   where the chart drops its marker labels. */
.l1-bandwidth-legend strong {
  color: var(--l1-ink);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
}

.l1-bandwidth-swatch {
  display: inline-block;
  flex: 0 0 12px;
  height: 12px;
}

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

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

.l1-bandwidth-facts__label {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
}

.l1-bandwidth-facts dd {
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.l1-bandwidth-facts__over { color: var(--l1-danger); }

/* Transfer pool as one meter (billing/_bandwidth_pool.html). The track is the
   pool: tinted up to where it stands now, hatched on to where it will be by
   the reset. The brand fill is what has been used, and overage runs on past
   the notch in the danger colour. Positions come from custom properties set
   on the element, on the same scale as the pool summary's percentages. The
   tint is mixed so the used fill keeps 3:1 against it in both themes; the
   pool's edge is carried by the notch, which is ink coloured. */
.l1-bw-meter__figure { align-items: baseline; display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; margin-bottom: var(--l1-space-3); }
.l1-bw-meter__headline { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); margin: 0; }
.l1-bw-meter__headline strong { color: var(--l1-ink); font-size: var(--l1-text-xl); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); letter-spacing: -.01em; margin-right: .25rem; }
.l1-bw-meter__left { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); font-variant-numeric: tabular-nums; }
.l1-bw-meter__left.is-over { color: var(--l1-danger); font-weight: var(--l1-fw-semibold); }
.l1-bw-meter { background: var(--l1-surface-3); border-radius: var(--l1-radius-pill); height: 12px; margin-bottom: var(--l1-space-3); position: relative; }
.l1-bw-meter > span { bottom: 0; position: absolute; top: 0; }
.l1-bw-meter__now,
.l1-bandwidth-swatch[data-bw="now"] { background: color-mix(in srgb, var(--l1-brand) 26%, var(--l1-surface-3)); }
.l1-bw-meter__now { border-radius: var(--l1-radius-pill) 0 0 var(--l1-radius-pill); left: 0; width: var(--l1-bw-pool); }
.l1-bw-meter__later,
.l1-bandwidth-swatch[data-bw="later"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--l1-brand) 26%, var(--l1-surface-3)) 0 3px, var(--l1-surface-3) 3px 6px); }
.l1-bw-meter__later { left: var(--l1-bw-pool); width: calc(var(--l1-bw-potential) - var(--l1-bw-pool)); }
.l1-bw-meter__used,
.l1-bandwidth-swatch[data-bw="used"] { background: var(--l1-brand); }
.l1-bw-meter__used { border-radius: var(--l1-radius-pill); left: 0; width: min(var(--l1-bw-used), var(--l1-bw-pool)); }
.l1-bw-meter__over { background: var(--l1-danger); border-radius: 0 var(--l1-radius-pill) var(--l1-radius-pill) 0; left: var(--l1-bw-pool); width: max(0%, calc(var(--l1-bw-used) - var(--l1-bw-pool))); }
.l1-bw-meter > .l1-bw-meter__notch { background: var(--l1-ink-muted); border-radius: 1px; bottom: -4px; top: -4px; transform: translateX(-1px); width: 2px; }
.l1-bw-meter__notch--now { left: var(--l1-bw-pool); }
.l1-bw-meter__notch--later { left: min(var(--l1-bw-potential), calc(100% - 1px)); opacity: .5; }
.l1-bandwidth-swatch[data-bw] { border-radius: 3px; }
/* Pool and usage totals: bold, under a rule across the whole row. */
.l1-bw-table tfoot th,
.l1-bw-table tfoot td { border-bottom: 0; border-top: 1px solid var(--l1-border-strong); color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-bw-unsplit { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); margin: 0; padding-block: 0 var(--l1-space-3); }
/* Stacked on a phone, a totals row reads like the rows above it: its label,
   then each figure with its column name, under one full-width rule. */
@media (max-width: 575px) {
  .ui-table--stack.l1-bw-table tfoot { display: block; }
  .ui-table--stack.l1-bw-table tfoot tr { border-top: 1px solid var(--l1-border-strong); display: grid; gap: .375rem; padding: .875rem 1rem; }
  .l1-client-portal-body .ui-table.ui-table--stack.l1-bw-table tfoot th,
  .l1-client-portal-body .ui-table.ui-table--stack.l1-bw-table tfoot td { border: 0; display: flex; gap: .75rem; justify-content: space-between; padding: 0; }
  .ui-table--stack.l1-bw-table tfoot td[data-label]::before { color: var(--l1-ink-muted); content: attr(data-label); font-family: var(--l1-font-body); font-size: var(--l1-text-xs); font-weight: 500; }
  .ui-table--stack.l1-bw-table tfoot td[data-stack="hide"] { display: none; }
}

@media (max-width: 640px) {
  .l1-bandwidth-legend {
    column-gap: 1rem;
    font-size: var(--l1-text-xs);
  }
}

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

/* The closing segment of a series whose newest period has not finished. Dashed
   rather than a different colour: the tone scale is spoken for by status, and a
   projection is the same measurement continued, not a different state. Drawn
   over the solid line, so the solid one is what shows if this rule is lost. */
.l1-metrics-chart__line--estimate {
  stroke-dasharray: 3 2.5;
  stroke-opacity: .75;
  stroke-width: 1.5;
}

.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);
}
/* Start and end of the plotted span, under a sparkline that has no axis. */
.l1-metrics-chart__range {
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  margin-top: var(--l1-space-1);
}

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

/* ---------- Performance workbenches ----------
   Admin workspaces share Revenue and Insights' connected summary and native
   disclosures. Every colour and surface continues to come from Console tokens. */
.l1-performance .l1-performance__scope {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  gap: var(--l1-space-3);
  justify-content: space-between;
}
.l1-performance__scope > div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3);
}
.l1-performance__scope strong { color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-performance .l1-performance__metrics {
  background: var(--l1-border);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}
.l1-performance .l1-performance__metrics > .ui-stat {
  border: 0;
  border-radius: 0;
  min-width: 0;
  padding: var(--l1-space-5);
}
.l1-performance .l1-performance__metrics > .ui-stat:first-child {
  background: var(--l1-brand-soft);
}
.l1-performance .l1-performance__metrics .ui-stat__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--l1-space-2);
}
.l1-performance .l1-performance__metrics .ui-stat__head > svg {
  color: var(--l1-ink-muted);
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}
.l1-performance .l1-performance__metrics .ui-stat__value {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1.2;
  margin: var(--l1-space-3) 0;
  overflow-wrap: anywhere;
}
.l1-performance .l1-performance__metrics .ui-stat__meta { line-height: 1.6; }
.l1-performance__metric { min-width: 0; }
.l1-performance__grid {
  align-items: start;
  display: grid;
  gap: var(--l1-space-4);
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
}
.l1-performance__grid--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-performance__grid > * { min-width: 0; }
.l1-performance__summary {
  align-items: center;
  background: var(--l1-surface-2);
  border-radius: var(--l1-radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-4);
  justify-content: space-between;
  padding: var(--l1-space-4);
}
.l1-performance__summary .l1-performance__value {
  display: block;
  font-size: var(--l1-text-xl);
  margin-top: var(--l1-space-1);
}
.l1-performance__value { font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
.l1-performance__note {
  color: var(--l1-ink-muted);
  display: block;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-normal);
  line-height: 1.6;
}
p.l1-performance__note { margin: var(--l1-space-3) 0 0; }
.l1-performance__change {
  display: inline-block;
  color: var(--l1-ink);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
}
.l1-performance__change[data-direction="up"] { color: var(--l1-ok); }
.l1-performance__change[data-direction="down"] { color: var(--l1-danger); }
.l1-performance__breakdown { display: grid; gap: var(--l1-space-4); margin: 0; }
.l1-performance__breakdown-row {
  align-items: baseline;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-4);
  justify-content: space-between;
  padding-bottom: var(--l1-space-3);
}
.l1-performance__breakdown-row:last-child { border-bottom: 0; padding-bottom: 0; }
.l1-performance__breakdown-row dt { font-weight: var(--l1-fw-medium); }
.l1-performance__breakdown-row dd {
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  margin: 0;
  white-space: nowrap;
}
.l1-performance__breakdown-row a > svg { display: inline; height: 12px; width: 12px; }
/* Record facts can contain long hostnames, emails and identifiers. Financial
   breakdowns keep their compact, unbroken numeric column. */
.l1-performance__breakdown--facts .l1-performance__breakdown-row { flex-wrap: wrap; }
.l1-performance__breakdown--facts dt,
.l1-performance__breakdown--facts dd { min-width: 0; overflow-wrap: anywhere; }
.l1-performance__breakdown--facts dd { max-width: 100%; white-space: normal; }
.l1-performance__ai-section { margin: var(--l1-space-4) 0; }
.l1-performance__ai-section .l1-performance__scope { margin-bottom: var(--l1-space-4); }
.l1-performance__ai {
  display: grid;
  gap: var(--l1-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin-top: var(--l1-space-2);
}
.l1-performance__ai-panel {
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-4);
  min-width: 0;
}
.l1-performance__ai-panel .ui-panel__title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-lg);
  gap: var(--l1-space-2);
}
.l1-performance__ai-copy {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  line-height: 1.6;
  margin-top: var(--l1-space-3);
}
.l1-revenue-bot {
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: flex-end;
  max-width: calc(100vw - 2rem);
  overflow: visible;
  pointer-events: none;
  position: fixed;
  right: 1rem;
  width: min(24rem, calc(100vw - 2rem));
  z-index: 1060;
}
/* The panel opens from the Outlook button on the Overview toolbar and sits in
   the bottom right corner only while open; there is no floating trigger. */
.l1-revenue-bot__reveal {
  bottom: 0;
  height: min(36rem, calc(100dvh - 6.5rem));
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  visibility: hidden;
  width: 100%;
}
.l1-revenue-bot[data-open="true"] .l1-revenue-bot__reveal {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}
.l1-revenue-bot__panel.ui-panel {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
.l1-revenue-bot__panel .ui-panel__head {
  align-items: flex-start;
  display: flex;
  flex: none;
  flex-direction: row;
  gap: var(--l1-space-3);
  justify-content: space-between;
}
.l1-revenue-bot__panel .ui-panel__head > .l1-row-action { flex: none; }
.l1-revenue-bot__meta {
  color: var(--l1-ink-muted);
  display: grid;
  flex: none;
  font-size: var(--l1-text-micro, .75rem);
  gap: .2rem;
  line-height: 1.45;
  margin: 0;
  padding: 0 1rem .75rem;
}
.l1-revenue-bot__log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .65rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .25rem 1rem .85rem;
}
.l1-revenue-bot__log .l1-chat-dock__msg[data-role="assistant"],
.l1-revenue-bot__log .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-revenue-bot__log .l1-chat-dock__msg[data-role="visitor"] {
  align-self: flex-end;
  background: var(--l1-brand);
  color: var(--l1-on-brand, #fff);
}
.l1-revenue-bot__log .l1-performance__ai-copy {
  margin-top: 0;
}
.l1-revenue-bot__snapshot {
  border-top: 1px solid var(--l1-border);
  flex: none;
  max-height: 40%;
  overflow: auto;
  padding: .5rem 1rem .75rem;
}
.l1-revenue-bot__snapshot summary {
  cursor: pointer;
  font-size: var(--l1-text-sm);
  font-weight: 600;
}
.l1-revenue-bot__snapshot .l1-performance__ai {
  margin-top: .75rem;
}
.l1-revenue-bot__form.ui-panel__foot {
  align-items: flex-end;
  display: flex;
  flex: none;
  gap: .5rem;
  padding: .75rem 1rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}
.l1-revenue-bot__form .ui-textarea {
  flex: 1 1 auto;
  min-height: 2.75rem;
  resize: none;
}
html[data-l1-theme="dark"] .l1-revenue-bot__panel {
  background: var(--l1-surface-2);
  border-color: var(--l1-border-strong);
}
@media (prefers-reduced-motion: reduce) {
  .l1-revenue-bot__reveal {
    transition: none;
  }
}
.l1-performance__meter {
  appearance: none;
  background: var(--l1-surface-3);
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-brand);
  display: block;
  height: 5px;
  overflow: hidden;
  width: 100%;
}
.l1-performance__meter::-webkit-progress-bar { background: var(--l1-surface-3); }
.l1-performance__meter::-webkit-progress-value { background: var(--l1-brand); }
.l1-performance__meter::-moz-progress-bar { background: var(--l1-brand); }
.l1-performance__share {
  align-items: center;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  gap: var(--l1-space-2);
}
.l1-performance__share > progress { width: 54px; }
.l1-performance__partition {
  display: grid;
  gap: var(--l1-space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--l1-space-5);
}
.l1-performance__partition dt { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-medium); }
.l1-performance__partition dd { font-size: var(--l1-text-xl); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); margin: var(--l1-space-2) 0; }
/* ---------- Insight lenses and product adoption ----------
   The Insights client table is one population with many lenses on it, so the
   filter strip is a wrapping group of chips rather than a tab row: eighteen
   tabs do not fit on any width, and a lens with nothing in it still has to be
   readable as "nothing in it" rather than disappear. */
.l1-lens-groups { display: grid; gap: var(--l1-space-3); }
.l1-lens {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}
.l1-lens__label {
  color: var(--l1-ink-muted);
  flex: 0 0 4.5rem;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.l1-lens__chip {
  align-items: baseline;
  background: var(--l1-surface-1);
  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-xs);
  gap: var(--l1-space-2);
  line-height: 1.4;
  padding: var(--l1-space-1) var(--l1-space-3);
  text-decoration: none;
}
.l1-lens__chip:hover { border-color: var(--l1-border-strong); color: var(--l1-ink); }
.l1-lens__chip b {
  font-feature-settings: var(--l1-font-feature-tabular);
  font-weight: var(--l1-fw-semibold);
}
/* An empty lens stays clickable and stays legible: a zero is information. */
.l1-lens__chip[data-empty="true"] { color: var(--l1-ink-muted); opacity: .7; }
.l1-lens__chip[aria-current="page"] {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
  font-weight: var(--l1-fw-semibold);
  opacity: 1;
}
.l1-adoption__share-col { min-width: 7rem; width: 9rem; }
.l1-adoption__share-col .ui-meter { margin-bottom: var(--l1-space-1); }
/* A product nobody has bought is the most interesting row on the panel and the
   least urgent one: kept, dimmed, never dropped. */
.l1-adoption__row--empty .ui-table__title,
.l1-adoption__row--empty .ui-table__data { color: var(--l1-ink-muted); }
.l1-adoption__row--empty .l1-adoption__name > svg { opacity: .6; }
.l1-adoption__name > svg { height: 14px; margin-right: var(--l1-space-2); vertical-align: -2px; width: 14px; }

.l1-performance__details { min-width: 0; }
.l1-performance__detail-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-4);
  justify-content: space-between;
  list-style: none;
  padding: var(--l1-space-4) var(--l1-space-5);
}
.l1-performance__detail-summary::-webkit-details-marker { display: none; }
.l1-performance__detail-summary > div,
.l1-performance__detail-summary > span { min-width: 0; overflow-wrap: anywhere; }
.l1-performance__detail-summary > svg { flex-shrink: 0; height: 16px; width: 16px; }
.l1-performance__details[open] > .l1-performance__detail-summary { border-bottom: 1px solid var(--l1-border); }
.l1-performance__details[open] > .l1-performance__detail-summary > svg { transform: rotate(180deg); }
.l1-performance__data { margin-top: var(--l1-space-4); }
.l1-performance__data > summary { color: var(--l1-brand); cursor: pointer; font-size: var(--l1-text-sm); font-weight: var(--l1-fw-medium); padding: var(--l1-space-2) 0; }
.l1-performance__data caption { caption-side: top; display: table-caption; padding: var(--l1-space-3) 0; text-align: left; }
.l1-performance summary:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }
.l1-performance__definitions dt { font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-performance__definitions dd { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); line-height: 1.7; margin: var(--l1-space-1) 0 0; max-width: 90ch; }
.l1-performance__chart { margin-top: var(--l1-space-5); }
.l1-performance__legend { display: flex; flex-wrap: wrap; gap: var(--l1-space-4); margin-bottom: var(--l1-space-4); }
.l1-performance__legend > span { align-items: center; color: var(--l1-ink-muted); display: inline-flex; font-size: var(--l1-text-xs); gap: var(--l1-space-2); }
.l1-performance__legend i { border-top: 2px solid var(--l1-brand); width: 18px; }
.l1-performance__legend .l1-performance__legend-prior i { border-color: var(--l1-ink-muted); border-top-style: dashed; }
.l1-performance__legend .l1-performance__legend-estimate i { border-top-style: dashed; }
.l1-performance__plot-frame { display: grid; gap: var(--l1-space-3); grid-template-columns: max-content minmax(0, 1fr); }
.l1-performance__axis { color: var(--l1-ink-muted); display: flex; flex-direction: column; font-size: 10px; font-variant-numeric: tabular-nums; justify-content: space-between; text-align: right; }
.l1-performance__plot .l1-metrics-chart__svg { height: 230px; overflow: visible; }
.l1-performance__plot .l1-metrics-chart__line { stroke-width: 2; }
.l1-performance__plot .l1-metrics-chart__line--compare { stroke: var(--l1-ink-muted); stroke-dasharray: 4 4; stroke-opacity: .7; stroke-width: 1.5; }
.l1-performance__plot .l1-metrics-chart__line--estimate { stroke-dasharray: 4 4; }
.l1-performance__gridline { fill: none; stroke: var(--l1-border); stroke-dasharray: 2 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.l1-performance__x-axis { color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-xs); justify-content: space-between; margin-top: var(--l1-space-3); padding-left: var(--l1-space-8); }
.l1-performance__point { fill: var(--l1-brand); }
.l1-performance__point--prior { fill: var(--l1-ink-muted); }
/* The two blocks the page leads with, side by side above everything else.
   Money in is the wider of the two because its rows carry a comparison column;
   pace gets the chart, which needs less width than four money columns do. */
.l1-performance__lead {
  display: grid;
  gap: var(--l1-space-5);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin-bottom: var(--l1-space-5);
}
.l1-performance__lead > * { min-width: 0; }

/* A section with a rule under its heading instead of a panel around it. The
   panel head/description/body chrome is what made these screens read as design:
   three nested boxes and a paragraph before any figure. */
.l1-performance__block > .ui-table-scroll,
.l1-performance__block > .l1-performance__chart { margin-top: var(--l1-space-3); }
.l1-performance__block-title {
  align-items: baseline;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-3);
  margin: 0;
  padding-bottom: var(--l1-space-2);
}
/* Figure tables carry their own border so a block reads as one surface without
   a panel; the header row keeps the quiet fill every ui-table thead has. */
.l1-performance__figures { margin: 0; }
/* Row headers here carry a line of description under the label, and `.ui-table
   th` is nowrap -- which made the first column as wide as its longest sentence
   and pushed the comparison columns off the side of the block. Those columns are
   the entire question this table answers, so the label wraps instead. */
.l1-performance__figures th[scope="row"] { white-space: normal; }
.l1-performance__figures th[scope="row"] .ui-table__sub { white-space: normal; }
.l1-performance__block > .ui-table-scroll {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
}
.l1-performance__block .l1-performance__note { margin-top: var(--l1-space-3); }

/* Targets, as one line above the metrics: a wrapping row of "NN% paid income",
   each with its actual and goal in the muted note size beside it. A strip, not
   a table, because the whole figure is one division and a table of one column
   per metric was the shape this replaced. */
.l1-performance__targets {
  align-items: baseline;
  column-gap: var(--l1-space-5);
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 var(--l1-space-4);
  row-gap: var(--l1-space-2);
}
.l1-performance__targets > span { align-items: baseline; display: inline-flex; gap: var(--l1-space-2); }
.l1-performance__targets strong { font-size: var(--l1-text-lg); font-variant-numeric: tabular-nums; }
/* A separator the gap alone does not give: the figures run together when the
   line is copied or read aloud, and "$400.000%" is two metrics, not one. */
.l1-performance__target + .l1-performance__target::before {
  color: var(--l1-ink-muted);
  content: "\00b7";
}

/* Indented sub-rows sum to the subtotal beneath them rather than standing
   beside it; without the indent the subtotal reads as a sibling and the column
   looks like it double-counts. Scoped to the console body to match
   `.l1-admin-console-body .ui-table th`, which sets the cell padding these rows
   have to beat and loads after this file: the same specificity would lose on
   source order, and !important here would be the override layer the design
   rules forbid. */
.l1-admin-console-body .ui-table th.l1-performance__sub-row {
  padding-inline-start: var(--l1-space-7);
}
.l1-performance__total-row > th,
.l1-performance__total-row > td {
  border-top: 1px solid var(--l1-border);
  font-weight: var(--l1-fw-semibold);
}
/* A caveat that sits in a total row (Reports' credit-held identity) is prose,
   not a figure, so it keeps its own weight. */
.l1-performance__total-row .l1-report__caveat,
.l1-performance__total-row .ui-table__sub { font-weight: var(--l1-fw-normal); }

/* Rows that sit apart from the sum above them (Revenue's "Waived by the $0.00
   floor"): a second tbody after a divider, labelled rather than bolded, so it
   cannot be read as part of the total. */
.l1-performance__figures .l1-performance__apart > tr > * {
  border-top: 1px solid var(--l1-border-strong);
  color: var(--l1-ink-muted);
}
.l1-performance__apart-label {
  color: var(--l1-ink-muted);
  display: block;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
}

/* Analytics row headers. `.ui-table th` sets every th in 11px uppercase grey for
   column heads, and only .l1-admin-workspace resets it, so on Revenue, Reports
   and Targets the row labels (and their sub-lines) shouted in capitals. The
   admin stripe also painted td only, which split each row in two. Scoped to the
   admin console body so client tables are untouched. */
.l1-admin-console-body .l1-admin-analytics .ui-table tbody th {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  letter-spacing: 0;
  text-transform: none;
}
.l1-admin-console-body .l1-admin-analytics .ui-table tbody th .ui-table__sub {
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-normal);
}
.l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics) .ui-table tbody tr:nth-child(even) > th {
  background: var(--l1-work-table-stripe);
}
/* Row headers share the data cells' box: the same block padding and the same
   hairline under them, so a row's stripe and rule run straight across instead
   of stepping at the label column. (Phones stack the row into a card.) */
@media (min-width: 576px) {
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics) .ui-table tbody th[scope="row"] {
    border-bottom: 1px solid color-mix(in srgb, var(--l1-border) 72%, transparent);
    padding-block: .5rem;
  }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics) .ui-table tbody tr:last-child > th[scope="row"] { border-bottom: 0; }
}
.l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics) .ui-table tbody tr:hover > th {
  background: var(--l1-work-row-hover);
}

/* ---------- Revenue overview: headline band ----------
   Five figures in one row divided by hairlines, no panel chrome: the first read
   of the page. Each cell is label, value, the change against the same point
   last month, and a target bullet where a goal is set. */
.l1-kpi-band {
  border-block: 1px solid var(--l1-border);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: var(--l1-space-2) 0 0;
}
.l1-kpi {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-1);
  min-width: 0;
  padding: var(--l1-space-4) var(--l1-space-5) var(--l1-space-4) var(--l1-space-5);
  text-decoration: none;
}
.l1-kpi:first-child { padding-left: 0; }
.l1-kpi + .l1-kpi { border-left: 1px solid var(--l1-border); }
.l1-kpi--link:hover { background: var(--l1-work-row-hover); }
.l1-kpi--link:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }
.l1-kpi__label {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
}
.l1-kpi__value {
  color: var(--l1-ink);
  font-size: var(--l1-text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.l1-kpi__value[data-tone="danger"] { color: var(--l1-danger); }
.l1-kpi__unit {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  letter-spacing: 0;
  margin-left: .125rem;
}
.l1-kpi__none { color: var(--l1-ink-muted); font-weight: var(--l1-fw-medium); }
.l1-kpi__value .l1-kpi__none { font-size: var(--l1-text-lg); }
.l1-kpi__meta {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  line-height: 1.5;
}
.l1-kpi__meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--l1-border-strong); }
.l1-kpi__meta strong { color: var(--l1-ink); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
.l1-kpi__meta--rule {
  border-top: 1px dashed var(--l1-border);
  margin-top: var(--l1-space-2);
  padding-top: var(--l1-space-2);
}

/* A target as a bullet bar: the fill is the share of the goal reached, the
   tick is the share of the month gone. Behind pace turns the fill warn. */
.l1-bullet { margin-top: var(--l1-space-2); min-width: 0; }
.l1-bullet__track {
  background: var(--l1-surface-3);
  border-radius: var(--l1-radius-pill);
  height: 6px;
  position: relative;
}
.l1-bullet__bar {
  background: var(--l1-brand);
  border-radius: var(--l1-radius-pill);
  display: block;
  height: 100%;
  max-width: 100%;
}
.l1-bullet__bar[data-pace="behind"] { background: var(--l1-warn); }
.l1-bullet__bar[data-pace="ok"] { background: var(--l1-ok); }
.l1-bullet__tick {
  background: var(--l1-ink);
  border-radius: 1px;
  height: 12px;
  position: absolute;
  top: -3px;
  transform: translateX(-1px);
  width: 2px;
}
.l1-bullet__caption {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  gap: var(--l1-space-1) var(--l1-space-2);
  margin: var(--l1-space-2) 0 0;
}
.l1-bullet__caption strong { color: var(--l1-ink); font-variant-numeric: tabular-nums; }
.l1-bullet__caption .ui-status { font-size: var(--l1-text-xs); }
.l1-bullet__note { font-style: italic; }

/* Targets with no cell of their own in the band (New orders), and the one line
   that says what the bars mean, under the band. */
.l1-revenue__targets {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3) var(--l1-space-6);
  margin-bottom: var(--l1-space-6);
  padding: var(--l1-space-3) 0;
}
.l1-revenue__target {
  align-items: center;
  display: grid;
  gap: var(--l1-space-1) var(--l1-space-3);
  grid-template-columns: auto auto minmax(10rem, 14rem);
}
.l1-revenue__target .l1-bullet { margin-top: 0; }
.l1-revenue__target .l1-bullet--compact { align-items: center; display: flex; gap: var(--l1-space-3); }
.l1-revenue__target .l1-bullet--compact .l1-bullet__track { flex: 1 1 6rem; }
.l1-revenue__target .l1-bullet--compact .l1-bullet__caption { flex: none; margin: 0; }
.l1-revenue__target-value { font-size: var(--l1-text-sm); font-variant-numeric: tabular-nums; }
.l1-revenue__target-note {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  margin: 0 0 0 auto;
}
/* Two independent column stacks under the band: each block keeps its own
   height, so Top accounts (two rows) never leaves a blank beside Book and
   collections, and nothing waits for a taller neighbour to end. */
.l1-revenue__columns {
  align-items: start;
  display: grid;
  gap: var(--l1-space-6) var(--l1-space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--l1-space-6);
}
.l1-revenue__col { display: grid; gap: var(--l1-space-6); min-width: 0; }
@media (max-width: 1100px) {
  /* One column: read in the order the question is asked, not column by
     column (chart, Money in, book, top accounts, one-offs, metering). */
  .l1-revenue__columns { grid-template-columns: minmax(0, 1fr); }
  .l1-revenue__col { display: contents; }
  .l1-revenue__columns section[aria-labelledby="revenue-money-title"] { order: 2; }
  .l1-revenue__columns section[aria-labelledby="revenue-book-title"] { order: 3; }
  .l1-revenue__columns section[aria-labelledby="revenue-customers-title"] { order: 4; }
  .l1-revenue__columns section[aria-labelledby="revenue-oneoffs-title"] { order: 5; }
  .l1-revenue__columns section[aria-labelledby="revenue-meter-title"] { order: 6; }
}
.l1-revenue .l1-performance__figures th[scope="row"] { min-width: 10rem; }
.l1-revenue .l1-performance__figures td,
.l1-revenue .l1-performance__figures .l1-performance__change { white-space: nowrap; }
/* The four pace figures under the month chart, and the metering reading. */
.l1-revenue__pace {
  border-top: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-4) var(--l1-space-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--l1-space-4) 0 0;
  padding-top: var(--l1-space-4);
}
.l1-revenue__pace--three { border-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; }
.l1-revenue__pace > div { min-width: 0; }
.l1-revenue__pace dt { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-medium); }
.l1-revenue__pace dd {
  align-items: baseline;
  color: var(--l1-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-lg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-2);
  margin: var(--l1-space-1) 0 0;
}
.l1-revenue__pace dd .l1-performance__change { font-size: var(--l1-text-xs); }
.l1-revenue__pace .l1-performance__note { margin-top: var(--l1-space-1); }
.l1-revenue__declined { color: var(--l1-warn); font-weight: var(--l1-fw-semibold); }
/* Reports > Revenue by service: a header row per group (hourly services,
   one-off charges) and a subtotal row closing each. */
.l1-admin-console-body .l1-report .ui-table tbody tr.l1-report__group-head > th {
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
  font-weight: var(--l1-fw-semibold);
  text-align: left;
}
.l1-revenue__empty-list > span + span::before { content: ", "; }
/* Usage (Customers > Services > Usage) and Fleet demand (LayerOne > Monitoring). */
.l1-usage__band { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--l1-space-4); }
.l1-usage__band .ui-meter { margin-top: var(--l1-space-2); }
.l1-usage__over { color: var(--l1-warn); font-weight: var(--l1-fw-semibold); }
.l1-usage__meter-col { width: 8rem; }
.l1-usage__meter-col .ui-meter { min-width: 5rem; }
.l1-fleet__grid {
  display: grid;
  gap: var(--l1-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.l1-fleet__grid > article { min-width: 0; }
/* Terminations: the collections pipeline as five linked steps, left to right. */
.l1-funnel {
  border-block: 1px solid var(--l1-border);
  counter-reset: funnel;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 var(--l1-space-3);
  padding: 0;
}
.l1-funnel__step { min-width: 0; position: relative; }
.l1-funnel__step + .l1-funnel__step { border-left: 1px solid var(--l1-border); }
.l1-funnel__step + .l1-funnel__step::before {
  background: var(--l1-surface-1);
  border-right: 1px solid var(--l1-border);
  border-top: 1px solid var(--l1-border);
  content: "";
  height: 10px;
  left: -6px;
  position: absolute;
  top: calc(50% - 5px);
  transform: rotate(45deg);
  width: 10px;
}
.l1-funnel__step > a {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-1);
  height: 100%;
  padding: var(--l1-space-4) var(--l1-space-5);
  text-decoration: none;
}
.l1-funnel__step:first-child > a { padding-left: 0; }
.l1-funnel__step > a:hover { background: var(--l1-work-row-hover); }
.l1-funnel__step > a:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }
.l1-funnel__step[aria-current="true"] > a { box-shadow: inset 0 -2px 0 var(--l1-brand); }
.l1-funnel .l1-kpi__value[data-tone="warn"] { color: var(--l1-warn); }
.l1-terminations__owed { color: var(--l1-danger); }
/* Referrals: program band, payout rows, and the partner page. */
.l1-referrals__segments { margin-top: var(--l1-space-2); }
.l1-referrals__balance { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: var(--l1-space-4); }
.l1-referrals__chips { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2) var(--l1-space-4); margin-top: var(--l1-space-2); }
.l1-referrals__code { align-items: center; color: var(--l1-ink-muted); display: inline-flex; font-size: var(--l1-text-sm); gap: var(--l1-space-2); }
/* The rail on the partner page reads as a quiet panel, not the loudest block. */
.l1-admin-workspace .l1-work-aside.l1-referrals__aside {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
}
.l1-referrals__manage-row {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-3);
  justify-content: space-between;
  padding-top: var(--l1-space-3);
}
.l1-referrals__manage-row strong { font-size: var(--l1-text-sm); }
.l1-referrals__manage-row .l1-performance__note { margin: var(--l1-space-1) 0 0; }
.l1-referrals__danger strong { color: var(--l1-danger); }
.l1-payouts__details .l1-copyable { align-items: flex-start; }
.l1-payouts__details .l1-copyable__value { white-space: pre-line; }
.l1-payouts__actions { display: grid; gap: var(--l1-space-2); min-width: 16rem; }
.l1-payouts__pay { display: flex; gap: var(--l1-space-2); }
.l1-payouts__pay .ui-input { flex: 1 1 10rem; min-width: 0; }
.l1-payouts__secondary { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-payouts__reject > summary { list-style: none; }
.l1-payouts__reject > summary::-webkit-details-marker { display: none; }
.l1-payouts__reject[open] > summary { display: none; }
.l1-payouts__reject > form { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-admin-console-body .l1-form legend {
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  margin: 0 0 var(--l1-space-2);
}
@media (max-width: 1200px) {
  .l1-referrals__balance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-referrals__balance .l1-kpi { border-left: 0; border-top: 0; padding-left: 0; }
  .l1-referrals__balance .l1-kpi:nth-child(even) { border-left: 1px solid var(--l1-border); padding-left: var(--l1-space-4); }
  .l1-referrals__balance .l1-kpi:nth-child(n + 3) { border-top: 1px solid var(--l1-border); }
  .l1-referrals__balance .l1-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .l1-payouts__actions { min-width: 0; width: 100%; }
  .l1-payouts__pay { flex-wrap: wrap; }
  .l1-payouts__pay .ui-btn { width: 100%; }
}
@media (max-width: 1200px) {
  .l1-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-funnel__step + .l1-funnel__step::before { display: none; }
  .l1-funnel__step { border-left: 0 !important; }
  .l1-funnel__step:nth-child(even) { border-left: 1px solid var(--l1-border) !important; }
  .l1-funnel__step:nth-child(n + 3) { border-top: 1px solid var(--l1-border); }
  .l1-funnel__step:nth-child(odd) > a { padding-left: 0; }
  .l1-funnel__step:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Disk I/O hosts: one row per host, opening to its guests in the row below. */
.l1-io__host + .l1-io__host > tr:first-child > * { border-top: 1px solid var(--l1-border); }
.l1-admin-console-body .l1-admin-workspace .ui-table.l1-io__hosts > tbody.l1-io__host > tr > * { background: transparent; }
.l1-admin-console-body .l1-admin-workspace .ui-table.l1-io__hosts > tbody.l1-io__host > tr:first-child > th {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
}
.l1-io__guests-row > td { padding-top: 0; }
.l1-io__guests > summary {
  align-items: center;
  color: var(--l1-brand);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
  gap: var(--l1-space-1);
  list-style: none;
  padding: var(--l1-space-1) 0 var(--l1-space-2);
}
.l1-io__guests > summary::-webkit-details-marker { display: none; }
.l1-io__guests > summary > svg { height: 14px; transition: transform .15s ease; width: 14px; }
.l1-io__guests[open] > summary > svg { transform: rotate(90deg); }
.l1-io__guests .ui-table-scroll { border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); }
.l1-fleet__subhead {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  margin: 0 0 var(--l1-space-2);
}
@media (max-width: 1200px) {
  .l1-usage__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-usage__band .l1-kpi { border-left: 0; border-top: 0; padding-left: 0; }
  .l1-usage__band .l1-kpi:nth-child(even) { border-left: 1px solid var(--l1-border); padding-left: var(--l1-space-4); }
  .l1-usage__band .l1-kpi:nth-child(n + 3) { border-top: 1px solid var(--l1-border); }
}
.l1-revenue__meter-charts { margin-top: var(--l1-space-5); }
.l1-revenue > .l1-performance__grid { margin-bottom: var(--l1-space-6); }
.l1-revenue > .l1-performance__details + .l1-performance__details { margin-top: var(--l1-space-3); }

/* The month pace chart: target as a dotted rule, today as a hairline. */
.l1-pace-chart { margin-top: var(--l1-space-4); }
.l1-pace-chart__target {
  stroke: var(--l1-ok);
  stroke-dasharray: 1 3;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.l1-pace-chart__today {
  stroke: var(--l1-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.l1-performance__legend .l1-pace-chart__legend-target i { border-color: var(--l1-ok); border-top-style: dotted; }

@media (max-width: 1200px) {
  .l1-kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l1-kpi:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .l1-kpi:nth-child(n + 4) { border-top: 1px solid var(--l1-border); }
  .l1-revenue__pace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .l1-kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-kpi { padding: var(--l1-space-3) var(--l1-space-3) var(--l1-space-3) var(--l1-space-3); }
  .l1-kpi:nth-child(3n + 1) { border-left: 1px solid var(--l1-border); padding-left: var(--l1-space-3); }
  .l1-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .l1-kpi:nth-child(n + 3) { border-top: 1px solid var(--l1-border); }
  .l1-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .l1-kpi__value { font-size: var(--l1-text-xl); }
  .l1-revenue__target { grid-template-columns: auto minmax(0, 1fr); }
  .l1-revenue__target .l1-bullet { grid-column: 1 / -1; }
  .l1-revenue__target-note { margin-left: 0; }
  .l1-revenue__pace--three { grid-template-columns: minmax(0, 1fr); }
}

/* Stacked analytics tables on phones: the row header becomes the card title.
   The shared stack rules only handle td. */
@media (max-width: 575px) {
  .l1-admin-console-body .ui-table.ui-table--stack tbody th {
    border: 0;
    display: block;
    padding: 0 0 var(--l1-space-1);
    text-align: left;
    white-space: normal;
  }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics) .ui-table.ui-table--stack tbody tr > * { background: transparent; }
  .l1-performance__block > .ui-table-scroll:has(> .ui-table--stack) { border-radius: var(--l1-radius-md); }
}

/* One metric strip in the console. The open Revenue-style band is drawn like
   .ui-metrics: a joined strip of tinted cells split by hairlines, labels in
   sentence case, the figure at the same size. Flex rather than grid, so a
   leftover cell on a narrow screen grows instead of leaving a gap. */
.l1-admin-console-body .l1-kpi-band {
  background: var(--l1-border);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
}
.l1-admin-console-body .l1-kpi-band > .l1-kpi {
  background: var(--l1-surface-1);
  border: 0;
  flex: 1 1 11rem;
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-admin-console-body .l1-kpi-band > .l1-kpi--link:hover { background: var(--l1-surface-2); }
.l1-admin-console-body .l1-kpi-band .l1-kpi__value { font-size: var(--l1-text-xl); }

/* Compact stacked cards on phones (every console table with ui-table--stack).
   The title runs across the top, then label/value pairs two to a line with the
   label above its value, so a row is half the height of one pair per line. A
   row menu alone in its cell sits top right; an empty actions cell drops out,
   as does any cell marked data-stack="hide"; the zebra stripe paints the whole
   card instead of each line inside it. */
@media (max-width: 575px) {
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody tr {
    column-gap: var(--l1-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    row-gap: .625rem;
  }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody td {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody :is(td.ui-table__nowrap, td .ui-table__nowrap, td .ui-table__sub:not(.ui-table__truncate)) { white-space: normal; }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody td[data-label]::before {
    display: block;
    font-size: var(--l1-text-micro);
    margin-bottom: 2px;
  }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody :is(td[data-stack="title"], td[colspan], th) { grid-column: 1 / -1; }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody td[data-stack="actions"] { display: flex; grid-column: 1 / -1; }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody td[data-stack="actions"]:empty,
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody td[data-stack="hide"] { display: none; }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody td[data-stack="actions"]:has(> .l1-action-dropdown:only-child) {
    padding: 0;
    position: absolute;
    right: .5rem;
    top: .5rem;
  }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody tr:has(> td[data-stack="actions"] > .l1-action-dropdown:only-child) > td[data-stack="title"] { padding-right: 2.5rem; }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody tr:nth-child(even) { background: var(--l1-work-table-stripe); }
  .l1-admin-console-body :is(.l1-admin-workspace, .l1-admin-analytics, .ui-page) .ui-table.ui-table--stack tbody tr:nth-child(n) > td { background: transparent; }
}

/* ---------- Client churn ----------
   Every figure in the table opens the customers behind it, and the links keep
   the console's table-link treatment -- cell colour, no underline, hover is
   the affordance -- so a column of counts still reads as counts rather than as
   sixteen blue underlines. What says they can be picked is the panel
   description, the same way the adoption table says it. Only the opened figure
   is marked: the detail heading is the one other thing naming which of the
   sixteen was clicked, and it is below the fold on a narrow window. */
.ui-table .l1-churn__figure[aria-current="page"] {
  color: var(--l1-brand);
  font-weight: var(--l1-fw-semibold);
}
.l1-churn__detail {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  margin-top: var(--l1-space-4);
}
.l1-churn__detail > .ui-panel__head { padding: var(--l1-space-4); }
.l1-churn__detail .ui-table-scroll { border-top: 1px solid var(--l1-border); }

.l1-targets__plan input[type="number"] {
  font-variant-numeric: tabular-nums;
  max-width: 9rem;
  text-align: right;
}
.l1-targets__cell { vertical-align: top; }
.l1-targets__cell .ui-table__sub { display: block; margin-top: var(--l1-space-1); }
.l1-targets__plan th[scope="row"] .ui-chip { margin-left: var(--l1-space-2); }
/* This month's row: brand wash and a brand rule on its leading edge. */
.l1-admin-console-body .l1-admin-analytics .l1-targets__plan tbody tr.l1-targets__current > * { background: var(--l1-brand-soft); }
.l1-admin-console-body .l1-admin-analytics .l1-targets__plan tbody tr.l1-targets__current > th { box-shadow: inset 3px 0 0 var(--l1-brand); }
.l1-targets__plan[data-l1-dirty-ready] tr:not([data-dirty]) .l1-targets__save { visibility: hidden; }
.l1-targets__plan tr[data-dirty] > th { box-shadow: inset 3px 0 0 var(--l1-warn); }
.l1-targets__plan-block,
.l1-targets__now { margin-bottom: var(--l1-space-6); }
.l1-targets__now .l1-performance__block-title { margin-bottom: 0; }
/* This month: one line per target. */
.l1-targets__track { display: grid; list-style: none; margin: 0; padding: 0; }
.l1-targets__track-row {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-2) var(--l1-space-5);
  grid-template-columns: minmax(8rem, 12rem) minmax(10rem, 16rem) minmax(0, 1fr);
  padding: var(--l1-space-3) 0;
}
.l1-targets__track-label { font-size: var(--l1-text-sm); font-weight: var(--l1-fw-medium); }
.l1-targets__track-value { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); font-variant-numeric: tabular-nums; }
.l1-targets__track-value strong { color: var(--l1-ink); font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); }
.l1-targets__track-empty { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); }
.l1-targets__track .l1-bullet { margin-top: 0; }
.l1-targets__track .l1-bullet--compact { align-items: center; display: flex; gap: var(--l1-space-4); }
.l1-targets__track .l1-bullet--compact .l1-bullet__track { flex: 1 1 12rem; }
.l1-targets__track .l1-bullet--compact .l1-bullet__caption { flex: none; margin: 0; }
/* Last 12 months: small multiples, twelve bars each, target as a tick. */
.l1-targets__charts {
  display: grid;
  gap: var(--l1-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: var(--l1-space-4) 0 var(--l1-space-5);
}
.l1-targets__chart { margin: 0; min-width: 0; }
.l1-targets__chart figcaption { display: flex; flex-direction: column; font-size: var(--l1-text-sm); gap: var(--l1-space-1); margin-bottom: var(--l1-space-3); }
.l1-targets__bars {
  align-items: flex-end;
  border-bottom: 1px solid var(--l1-border);
  display: grid;
  gap: 3px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: 5.5rem;
}
.l1-targets__bar { height: 100%; position: relative; }
.l1-targets__bar-fill {
  background: color-mix(in srgb, var(--l1-brand) 55%, transparent);
  border-radius: 2px 2px 0 0;
  bottom: 0;
  left: 0;
  min-height: 1px;
  position: absolute;
  right: 0;
}
.l1-targets__bar-fill[data-reached="true"] { background: var(--l1-ok); }
.l1-targets__bar-target {
  background: var(--l1-ink);
  height: 2px;
  left: -1px;
  position: absolute;
  right: -1px;
}
.l1-targets__chart .l1-performance__x-axis { padding-left: 0; }
.l1-targets__history td .ui-table__sub { display: flex; gap: var(--l1-space-2); justify-content: flex-end; }
@media (max-width: 600px) {
  .l1-targets__track-row { grid-template-columns: minmax(0, 1fr) auto; }
  .l1-targets__track-row > .l1-bullet,
  .l1-targets__track-row > .l1-targets__track-empty { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .l1-targets__plan input[type="number"] { max-width: 10rem; }
  .l1-targets__plan tbody td[data-stack="actions"] .ui-btn { width: 100%; }
  .l1-targets__plan[data-l1-dirty-ready] tr:not([data-dirty]) td[data-stack="actions"] { display: none; }
  .l1-targets__history td .ui-table__sub { justify-content: flex-end; }
}

@media (max-width: 1200px) {
  .l1-performance .l1-performance__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-performance__grid,
  .l1-performance__lead { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .l1-performance .l1-performance__metrics > .ui-stat { padding: var(--l1-space-3); }
  .l1-performance .l1-performance__metrics .ui-stat__value { font-size: var(--l1-text-xl); }
  .l1-performance__partition { grid-template-columns: minmax(0, 1fr); gap: var(--l1-space-4); }
  .l1-performance__partition > div + div { border-top: 1px solid var(--l1-border); padding-top: var(--l1-space-3); }
  .l1-performance__plot .l1-metrics-chart__svg { height: 175px; }
  .l1-performance__detail-summary { padding: var(--l1-space-4); }
  .l1-performance__share > progress { display: none; }
}

/* ---------- Task-first admin pages ----------
   Operational directories, records and editors do not need an analytics hero.
   These opt-in components leave Revenue, Insights and the client portal alone.
   Regions use open space and one divider, with a border reserved for data that
   actually needs containment (tables, previews, editors and warnings). */
.l1-admin-workspace { container: admin-workspace / inline-size; min-width: 0; }
.l1-admin-workspace .l1-performance__grid--equal {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}
.l1-admin-workspace .ui-toolbar { align-items: flex-end; }
/* Shared filter bar end (includes/_filter_actions.html): quiet Apply, a Clear
   text link only while filtered, the count on the right. */
.l1-admin-workspace .l1-filter-clear {
  align-self: center;
  color: var(--l1-brand-strong);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  padding-inline: var(--l1-space-1);
  text-decoration: none;
}
.l1-admin-workspace .l1-filter-clear:hover { text-decoration: underline; }
.l1-admin-workspace .ui-toolbar .ui-toolbar__count { align-self: center; }
/* Monitoring as the Operations board: snapshot time beside the tab row, the
   merged "Needs attention" list, worker groups with their last heartbeat. */
.l1-admin-workspace .l1-attention-table tbody tr[data-level="urgent"] > td:first-child { box-shadow: inset 3px 0 var(--l1-danger); }
.l1-admin-workspace .l1-attention-table tbody tr[data-level="high"] > td:first-child { box-shadow: inset 3px 0 var(--l1-warn); }
.l1-admin-workspace .l1-attention-table .ui-chip { margin-inline-end: var(--l1-space-1); }
.l1-admin-workspace .l1-attention-table .ui-table__title { display: inline; }
@media (max-width: 575px) {
  /* Stacked cards: the urgency edge runs down the card, not through the
     title text, and the signals take the full card width. */
  .l1-admin-workspace .l1-attention-table tbody tr[data-level] > td:first-child { box-shadow: none; }
  .l1-admin-workspace .l1-attention-table tbody tr[data-level="urgent"] { box-shadow: inset 3px 0 var(--l1-danger); }
  .l1-admin-workspace .l1-attention-table tbody tr[data-level="high"] { box-shadow: inset 3px 0 var(--l1-warn); }
  .l1-admin-console-body .l1-admin-workspace .ui-table.l1-attention-table tbody td[data-label="Signals"] { grid-column: 1 / -1; }
}
/* Insights > Attention: one "Show" select, then the few signals that have
   accounts as quick chips on the same line (one scrolling row on a phone,
   never a wall of zero-count chips). */
.l1-admin-workspace .l1-worklist-filter { align-items: flex-end; }
.l1-worklist-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1);
  margin: 0;
}
.l1-worklist-chips > .ui-chip { text-decoration: none; }
.l1-worklist-chips > .ui-chip b { font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); margin-inline-start: 2px; }
@media (max-width: 575px) {
  .l1-worklist-chips { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .l1-worklist-chips > .ui-chip { flex: none; }
}
/* Insights > Book of business: two independent column stacks, so a short
   report block never stretches to its neighbour's height. */
.l1-insights-book {
  align-items: start;
  display: grid;
  gap: var(--l1-space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.l1-insights-book__col { display: grid; gap: var(--l1-space-5); min-width: 0; }
.l1-insights-book__col > .l1-work-section { margin: 0; }
/* Half-width columns: the console's table floors (48rem from five columns)
   would push Clients, Volume and the churn figures out of view. */
.l1-admin-console-body .l1-admin-workspace .l1-insights-book .l1-insights-book__col .ui-table-scroll .ui-table.ui-table--stack { min-width: 0; }
.l1-admin-workspace :is(.l1-attention-table, .l1-insights-book) .ui-table__primary .ui-table__sub { font-weight: var(--l1-fw-normal); }
@media (max-width: 1100px) {
  .l1-insights-book { grid-template-columns: minmax(0, 1fr); }
}
.l1-admin-workspace .l1-audit-table td:nth-child(2) { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-worker-groups { display: grid; gap: var(--l1-space-3); list-style: none; margin: 0; }
.l1-worker-groups > li { align-items: start; display: flex; gap: var(--l1-space-3); justify-content: space-between; }
.l1-worker-groups__name, .l1-worker-groups__state { display: grid; gap: 2px; min-width: 0; }
.l1-worker-groups__state { justify-items: end; text-align: right; }
.l1-worker-grid {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  padding: var(--l1-space-3) 0;
}
.l1-worker-grid__cell {
  align-content: start;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-1);
  justify-items: start;
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-worker-grid__cell.is-down { border-color: color-mix(in srgb, var(--l1-warn) 45%, var(--l1-border)); }
.l1-worker-grid__head { align-items: center; display: flex; gap: var(--l1-space-2); justify-content: space-between; width: 100%; }
.l1-worker-grid__cell .ui-btn { margin-top: var(--l1-space-1); }
.l1-lg-summary { margin-bottom: var(--l1-space-4); }
.l1-lg-latency { display: grid; gap: var(--l1-space-2); list-style: none; margin: 0; }
.l1-lg-latency li { align-items: baseline; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--l1-space-3); }
.l1-lg-latency li > .ui-table__sub { grid-column: 1 / -1; }
.l1-link-button {
  background: none;
  border: 0;
  color: var(--l1-brand-strong);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}
.l1-lg-output { max-width: min(56rem, calc(100vw - 2rem)); }
.l1-lg-output pre { max-height: 60vh; overflow: auto; }
/* Incidents: a severity edge on list rows and on the incident page head
   (critical danger, major warn, minor info), a composer above the timeline,
   and the response clock in the rail. */
.l1-admin-workspace .l1-incident-table tbody tr[data-level="urgent"] > td:first-child { box-shadow: inset 3px 0 var(--l1-danger); }
.l1-admin-workspace .l1-incident-table tbody tr[data-level="high"] > td:first-child { box-shadow: inset 3px 0 var(--l1-warn); }
.l1-admin-workspace .l1-incident-table tbody tr[data-level="normal"] > td:first-child { box-shadow: inset 3px 0 var(--l1-info); }
.l1-admin-workspace .l1-incident-table .ui-chip svg,
.l1-incident-page .ui-chip svg { height: 12px; width: 12px; }
/* "Edit times" under the read-only response timeline. */
.l1-incident-times { margin-top: var(--l1-space-3); }
.l1-incident-times > summary { cursor: pointer; font-size: var(--l1-text-sm); list-style: none; }
.l1-incident-times > summary::-webkit-details-marker { display: none; }
.l1-incident-times > form { margin-top: var(--l1-space-3); }
.l1-incident-meta { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2) var(--l1-space-4); }
.l1-incident-meta .l1-copyable__value { font-size: var(--l1-text-xs); }
.l1-incident-open { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-incident-composer__row {
  align-items: start;
  display: grid;
  gap: var(--l1-space-4);
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
}
.l1-incident-visibility { border: 0; margin: 0; min-width: 0; padding: 0; }
.l1-incident-visibility__options { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); margin-top: var(--l1-space-1); }
.l1-incident-visibility .l1-check-row:has(input:disabled) { opacity: .55; }
.l1-incident-visibility .ui-hint { margin: var(--l1-space-1) 0 0; }
@media (max-width: 720px) {
  .l1-incident-composer__row { grid-template-columns: minmax(0, 1fr); }
}
.l1-incident-timeline { display: grid; gap: 0; list-style: none; margin: 0; }
.l1-incident-timeline__entry {
  border-left: 2px solid var(--l1-border);
  padding: 0 0 var(--l1-space-5) var(--l1-space-4);
  position: relative;
}
.l1-incident-timeline__entry::before {
  background: var(--l1-surface-1);
  border: 2px solid var(--l1-border-strong);
  border-radius: 50%;
  content: "";
  height: 10px;
  left: -6px;
  position: absolute;
  top: 5px;
  width: 10px;
}
.l1-incident-timeline__entry[data-tone="ok"]::before { border-color: var(--l1-ok); }
.l1-incident-timeline__entry[data-tone="warn"]::before { border-color: var(--l1-warn); }
.l1-incident-timeline__entry[data-tone="danger"]::before { border-color: var(--l1-danger); }
.l1-incident-timeline__entry[data-tone="info"]::before,
.l1-incident-timeline__entry[data-tone="busy"]::before { border-color: var(--l1-info); }
.l1-incident-timeline__entry:last-child { padding-bottom: 0; }
.l1-incident-timeline__entry.is-internal .l1-incident-timeline__body {
  background: color-mix(in srgb, var(--l1-warn) 7%, var(--l1-surface-1));
  border: 1px solid color-mix(in srgb, var(--l1-warn) 30%, transparent);
}
.l1-incident-timeline__head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2) var(--l1-space-3); }
.l1-incident-timeline__time { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); margin-inline-start: auto; }
.l1-incident-timeline__body {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  margin: var(--l1-space-2) 0 0;
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-incident-timeline__empty { list-style: none; }
.l1-incident-timeline__empty .ui-empty { align-items: flex-start; text-align: left; }
.l1-incident-clock { display: grid; gap: var(--l1-space-3); list-style: none; margin: 0; }
.l1-incident-clock > li {
  border-left: 2px solid var(--l1-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: var(--l1-space-3);
}
.l1-incident-clock > li.is-set { border-left-color: var(--l1-brand); }
.l1-incident-clock__label { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); grid-column: 1 / -1; }
.l1-incident-clock__time { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-medium); }
.l1-incident-clock__gap { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); text-align: right; }
.l1-incident-monitors { display: grid; gap: var(--l1-space-3); list-style: none; margin: 0; }
.l1-incident-monitors li { display: grid; gap: 2px; }
.l1-incident-details .l1-field__help { font-size: var(--l1-text-xs); }
.l1-action-menu .l1-action-menu__danger { color: var(--l1-danger); }
/* Audit log: single-line events, a danger edge on failures, detail rows. */
.l1-admin-workspace :is(.l1-audit-table, .l1-email-log-table) tbody tr[data-failed] > td:first-child { box-shadow: inset 3px 0 var(--l1-danger); }
.l1-admin-workspace .l1-log-footnote { margin: var(--l1-space-3) 0 0; }
/* Payment log: the action code rides on the event's sub-line in muted data
   type (coloured only when its name says it failed or warned), and Account
   keeps enough width to read the customer. */
.l1-admin-workspace .l1-event-code {
  color: var(--l1-ink-muted);
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
}
.l1-admin-workspace .l1-event-code[data-tone="danger"] { color: var(--l1-danger); }
.l1-admin-workspace .l1-event-code[data-tone="warn"] { color: var(--l1-warn); }
.l1-admin-workspace .l1-event-code[data-tone="ok"] { color: var(--l1-ink-muted); }
@media (min-width: 576px) {
  .l1-admin-workspace .l1-event-table td.l1-event-table__account { min-width: 14rem; }
}
.l1-admin-workspace .l1-event-code-field { flex: 0 0 11rem; }
.l1-admin-workspace .l1-audit-table .l1-audit-category { margin-inline-end: var(--l1-space-1); }
.l1-admin-workspace .l1-audit-table .l1-audit-detail > td { background: var(--l1-surface-2); }
.l1-admin-workspace .ui-table.l1-audit-table tbody tr.l1-audit-detail[hidden] { display: none; }
.l1-admin-workspace .l1-audit-toggle svg { transition: transform 120ms ease; }
.l1-admin-workspace .l1-audit-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* A "More filters" disclosure that stays a disclosure at every width. */
.l1-filter-more.l1-filter-more--always > summary { cursor: pointer; display: inline-flex; list-style: none; }
.l1-filter-more.l1-filter-more--always > summary::-webkit-details-marker { display: none; }
.l1-filter-more.l1-filter-more--always[open] { flex-basis: 100%; order: 10; }
.l1-filter-more.l1-filter-more--always[open] > summary { margin-bottom: var(--l1-space-2); }
.l1-filter-more.l1-filter-more--always .l1-filter-more__fields { flex-wrap: wrap; }
/* Recordings: live band, signal chips as filters, compact rows. */
.l1-recording-live {
  align-items: center;
  background: var(--l1-danger-soft);
  border: 1px solid color-mix(in srgb, var(--l1-danger) 30%, transparent);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-4);
  margin-bottom: var(--l1-space-4);
  padding: var(--l1-space-2) var(--l1-space-4);
}
.l1-recording-live > strong { align-items: center; display: inline-flex; gap: var(--l1-space-2); }
.l1-recording-live ul { display: flex; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-4); list-style: none; margin: 0; padding: 0; }
.l1-recording-signals { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); padding: var(--l1-space-3) 0 0; }
.l1-recording-signals .ui-chip { text-decoration: none; }
.l1-recording-signals .ui-chip > span { color: var(--l1-ink-muted); font-variant-numeric: tabular-nums; }
.l1-recording-signals .ui-chip.is-active { border-color: var(--l1-brand); color: var(--l1-brand-strong); }
.l1-admin-workspace .l1-recording-table .ui-table__title { align-items: center; display: inline-flex; gap: var(--l1-space-1); }
.l1-admin-workspace .l1-recording-table .ui-table__title svg { color: var(--l1-brand); height: 15px; width: 15px; }
.l1-recording-flags a.ui-chip svg { height: 11px; width: 11px; }
/* Errors, grouped: a 14-day bar sparkline per error group. */
.l1-sparkbars {
  align-items: flex-end;
  display: inline-flex;
  gap: 2px;
  height: 1.5rem;
  vertical-align: middle;
}
.l1-sparkbars__bar {
  background: var(--l1-danger);
  border-radius: 1px;
  display: block;
  min-height: 2px;
  opacity: .8;
  width: 5px;
}
.l1-sparkbars__bar.is-empty { background: var(--l1-border-strong); opacity: .6; }
.l1-admin-workspace .l1-error-message {
  display: block;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-admin-workspace .l1-error-group-table .ui-chip { margin-top: var(--l1-space-1); }
.l1-admin-workspace .l1-error-table .ui-table__title,
.l1-admin-workspace .l1-error-table .ui-table__sub {
  display: block;
  max-width: 70ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-admin-workspace .l1-error-signature { align-items: center; display: flex; gap: var(--l1-space-3); justify-content: space-between; margin: var(--l1-space-3) 0; }
.l1-admin-workspace .l1-error-views { margin-bottom: 0; }
/* Secondary filters: inline on desktop, folded behind "Filters" on phones. */
.l1-filter-more { flex: 0 0 auto; min-width: 0; }
.l1-filter-more > summary { display: none; }
.l1-filter-more__fields {
  align-items: flex-end;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--l1-space-2);
  min-width: 0;
}
.l1-filter-more__fields > .ui-filter-field { flex: 0 0 11rem; min-width: 0; }
@media (max-width: 575px) {
  .l1-filter-more { flex: 1 1 100%; }
  .l1-filter-more > summary {
    cursor: pointer;
    display: inline-flex;
    list-style: none;
  }
  .l1-filter-more > summary::-webkit-details-marker { display: none; }
  .l1-filter-more[open] > summary { margin-bottom: var(--l1-space-2); }
  .l1-filter-more__fields { flex-wrap: wrap; }
  .l1-filter-more__fields > .ui-filter-field { flex: 1 1 100%; }
}
.l1-admin-workspace .ui-toolbar > .ui-filter-field { min-width: 0; }
.l1-admin-workspace .ui-filter-field > span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
}
.l1-admin-workspace .ui-table th.ui-table__num { text-align: right; }
.l1-admin-workspace .ui-table tfoot th {
  letter-spacing: 0;
  text-transform: none;
}
.l1-admin-workspace[data-workspace-kind="form"]:not(.ui-page--wide) {
  margin-inline: 0;
  max-width: 72rem;
}
.l1-admin-workspace .l1-work-section {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--l1-border);
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  overflow: visible;
}
.l1-admin-workspace > .ui-page__head + .l1-work-section { border-top: 0; }
.l1-admin-workspace .l1-work-section > .ui-panel__head,
.l1-admin-workspace .l1-work-section > .l1-performance__detail-summary {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: var(--l1-space-2) 0;
}
.l1-admin-workspace .l1-work-section > .ui-panel__body,
.l1-admin-workspace .l1-work-section > .ui-panel__section {
  padding: 0 0 var(--l1-space-4);
}
.l1-admin-workspace .l1-work-section > .ui-panel__foot {
  background: transparent;
  padding: var(--l1-space-3) 0;
}
.l1-admin-workspace .l1-work-section > .ui-toolbar {
  background: transparent;
  padding: var(--l1-space-2) 0;
}
.l1-admin-workspace .l1-work-section > .ui-list {
  background: transparent;
}
.l1-admin-workspace .l1-work-section > .ui-list > .ui-row {
  padding-inline: 0;
}
.l1-admin-workspace .l1-work-section > .ui-empty,
.l1-admin-workspace .l1-work-section > .ui-panel__body > .ui-empty {
  align-items: flex-start;
  padding: var(--l1-space-5) 0;
  text-align: left;
}
.l1-admin-workspace .l1-work-section > .ui-empty--inline,
.l1-admin-workspace .l1-work-section > .ui-panel__body > .ui-empty--inline {
  align-items: center;
  padding: var(--l1-space-3) 0;
}
/* An empty state inside a section of a page never outranks the section's own
   heading: no icon, the title at body size, tighter spacing. The one-line form
   is includes/_empty_state.html with compact=True. */
.l1-admin-workspace .l1-work-section > .ui-empty:not(.ui-empty--inline),
.l1-admin-workspace .l1-work-section > .ui-panel__body > .ui-empty:not(.ui-empty--inline) {
  gap: var(--l1-space-1);
  padding: var(--l1-space-3) 0 var(--l1-space-4);
}
.l1-admin-workspace .l1-work-section > .ui-empty:not(.ui-empty--inline) .ui-empty__icon,
.l1-admin-workspace .l1-work-section > .ui-panel__body > .ui-empty:not(.ui-empty--inline) .ui-empty__icon { display: none; }
.l1-admin-workspace .l1-work-section > .ui-empty:not(.ui-empty--inline) .ui-empty__title,
.l1-admin-workspace .l1-work-section > .ui-panel__body > .ui-empty:not(.ui-empty--inline) .ui-empty__title {
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
}
.l1-admin-workspace .l1-work-section > .ui-empty:not(.ui-empty--inline) .ui-empty__desc,
.l1-admin-workspace .l1-work-section > .ui-panel__body > .ui-empty:not(.ui-empty--inline) .ui-empty__desc { font-size: var(--l1-text-sm); }
.l1-work-summary {
  align-items: baseline;
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-3) var(--l1-space-6);
  list-style: none;
  margin: 0;
  padding: var(--l1-space-2) 0 var(--l1-space-3);
}
.l1-work-summary > li,
.l1-work-summary > li > a {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  min-width: 0;
}
.l1-work-summary strong {
  color: var(--l1-ink);
  font-size: var(--l1-text-base);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
}
.l1-work-summary strong[data-tone="ok"] { color: var(--l1-ok); }
.l1-work-summary strong[data-tone="warn"] { color: var(--l1-warn); }
.l1-work-summary strong[data-tone="danger"] { color: var(--l1-danger); }
.l1-work-summary strong[data-tone="info"],
.l1-work-summary strong[data-tone="busy"] { color: var(--l1-info); }
.l1-work-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3) var(--l1-space-6);
  margin: 0;
}
.l1-work-context > div { min-width: 0; }
.l1-work-context dt {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-normal);
  overflow-wrap: anywhere;
}
.l1-work-context dd {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-medium);
  margin: var(--l1-space-1) 0 0;
  overflow-wrap: anywhere;
}
.l1-work-layout {
  align-items: start;
  display: grid;
  gap: var(--l1-space-5);
  grid-template-columns: minmax(0, 1fr) 320px;
}
/* Two independent column stacks for any console page (the homes use the
   same idea as .l1-home-columns): each column flows on its own and every card
   keeps its content height, so a short card never leaves a blank block beside
   a tall one. Only a true KPI row stays row-aligned. One column below 1100px. */
.l1-split { align-items: flex-start; display: flex; gap: var(--l1-space-5); }
.l1-split > .l1-split__col { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--l1-space-5); min-width: 0; }
.l1-split > .l1-split__col--wide { flex-grow: 2; }
@media (max-width: 1100px) {
  .l1-split { align-items: stretch; flex-direction: column; }
}
.l1-work-layout--balanced { grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); }
.l1-work-layout > * { min-width: 0; }
.l1-work-layout > .l1-work-section:first-child,
.l1-work-layout > :first-child > .l1-work-section:first-child { border-top: 0; }
.l1-work-aside {
  border-left: 1px solid var(--l1-border);
  min-width: 0;
  padding-left: var(--l1-space-5);
}
.l1-work-aside > .l1-work-section:first-child,
.l1-admin-workspace .l1-work-context-panel > .l1-work-section:first-child { border-top: 0; }
/* One context region, not a colored card for every fact. A bordered surface
   in both themes: the tinted fill was the loudest surface in light mode and
   all but vanished in dark. Tint stays for notices. */
.l1-admin-workspace .l1-work-aside,
.l1-admin-workspace .l1-work-context-panel {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  min-width: 0;
  padding: var(--l1-space-4);
}
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) > .ui-panel__head,
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) > .l1-work-section:first-child > .ui-panel__head {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0 0 var(--l1-space-4);
}
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) > .ui-panel__body {
  padding: 0;
}
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) > .l1-work-section:last-child > .ui-panel__body {
  padding-bottom: 0;
}
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) .l1-work-context {
  display: grid;
  gap: var(--l1-space-3);
}
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) .l1-work-context > div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1) var(--l1-space-3);
  justify-content: space-between;
}
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) .l1-work-context dd {
  margin: 0;
  max-width: 100%;
  text-align: right;
}
/* Context is a narrow reading column: labels and long references must never
   compete for half a line. Editors use a balanced layout or the main column. */
.l1-admin-workspace :is(.l1-work-aside, .l1-work-context-panel) .ui-kv__row {
  gap: var(--l1-space-1);
  grid-template-columns: minmax(0, 1fr);
}
.l1-admin-workspace :is(.ui-panel__head, .ui-page__head) > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.l1-admin-workspace .ui-panel__desc { max-width: 75ch; }
/* One section-heading style across the console: ink, like the analytics
   block titles. Teal headings read as links beside the blue links on the same
   pages. */
.l1-admin-workspace .l1-work-section > .ui-panel__head .ui-panel__title {
  color: var(--l1-ink);
}
.l1-admin-workspace .l1-work-table--wide { min-width: 68rem; }
/* LayerOne infrastructure pages (Compute, Networking, Web hosting, Jobs).
   A cell with more than one line (a meter and its figure, a status and its
   reason) wraps them in .l1-cell so a stacked phone card keeps label | value. */
.l1-admin-workspace .l1-cell { display: grid; gap: 2px; justify-items: start; min-width: 0; }
/* A usage bar beside its figure: host CPU and RAM, allocation, ISO import. */
.l1-admin-workspace .l1-meter-cell {
  align-items: center;
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: 4.5rem auto;
  justify-content: start;
}
.l1-admin-workspace .l1-meter-cell > .ui-table__num { text-align: left; white-space: nowrap; }
.l1-admin-workspace .ui-meter__bar[data-tone="warn"] { background: var(--l1-warn); }
.l1-admin-workspace .ui-meter__bar[data-tone="ok"] { background: var(--l1-ok); }
/* A heading row inside a table: a connection above its hosts, an OS family
   above its versions. Replaces a sub-line repeated on every row. */
.l1-admin-workspace .ui-table tr.l1-table-group > th {
  background: var(--l1-surface-2);
  border-top: 1px solid var(--l1-border);
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: 0;
  padding-block: .5rem;
  text-align: left;
  text-transform: none;
}
.l1-admin-workspace .l1-table-group__title {
  align-items: center;
  display: inline-flex;
  gap: var(--l1-space-2);
  margin-inline-end: var(--l1-space-4);
}
.l1-admin-workspace .l1-table-group__meta {
  align-items: center;
  color: var(--l1-ink-muted);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-normal);
  gap: var(--l1-space-3);
}
.l1-admin-workspace .l1-table-group > th > .l1-row-action { float: right; }
.l1-admin-workspace .ui-table tr[data-dimmed] > td { color: var(--l1-ink-muted); }
.l1-admin-workspace .l1-tone-warn,
.l1-admin-workspace a.l1-tone-warn,
.l1-admin-workspace .ui-table__sub.l1-tone-warn { color: var(--l1-warn); }
.l1-admin-workspace .l1-tone-danger,
.l1-admin-workspace .ui-table__sub.l1-tone-danger { color: var(--l1-danger); }
.l1-admin-workspace .l1-host-name { align-items: center; display: inline-flex; flex-wrap: wrap; gap: var(--l1-space-2); }
/* Host detail: six history charts two to a row (one on phones). */
.l1-admin-workspace .l1-host-charts { display: grid; gap: var(--l1-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-admin-workspace .l1-host-strip .l1-meter-cell { grid-template-columns: minmax(3rem, 5rem) auto; }
@media (max-width: 767px) {
  .l1-admin-workspace .l1-host-charts { grid-template-columns: minmax(0, 1fr); }
}
/* Segmented filters with counts (VMID reservations, PTR records, private
   networks): the current one takes the brand tint, like a status tab's chip. */
.l1-admin-workspace .l1-chip-filter { margin: 0; padding: var(--l1-space-2) 0; }
.l1-admin-workspace .l1-chip-filter > .ui-chip {
  background: var(--l1-surface-1);
  border-color: var(--l1-border);
  color: var(--l1-ink);
  font-size: var(--l1-text-xs);
  padding: .125rem .625rem;
}
.l1-admin-workspace .l1-chip-filter > .ui-chip:hover { border-color: var(--l1-border-strong); }
.l1-admin-workspace .l1-chip-filter > .ui-chip[data-tone="warn"] { color: var(--l1-warn); }
.l1-admin-workspace .l1-chip-filter > .ui-chip[data-tone="danger"] { color: var(--l1-danger); }
.l1-admin-workspace .l1-chip-filter > .ui-chip[aria-current] {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand);
  color: var(--l1-brand-strong);
}
.l1-admin-workspace .l1-chip-filter .ui-count { margin-inline-start: 2px; }
.l1-admin-workspace .l1-chip-filter > .ui-chip[data-tone] .ui-count { color: inherit; }
/* Guests: the show filters and the inventory time on one line. */
.l1-admin-workspace .l1-guest-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-4);
  justify-content: space-between;
}
.l1-admin-workspace .l1-icon-link {
  align-items: center;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  vertical-align: middle;
  width: 1.75rem;
}
.l1-admin-workspace .l1-icon-link:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-admin-workspace .l1-icon-link > svg { height: 1rem; width: 1rem; }
/* Networking > IP addresses: one card per pool, utilization as a stacked bar
   (allocated, reserved, blocked; the track is what is still available). Each
   segment and legend entry filters the address table. 2px surface gaps
   separate segments; the legend carries the counts, so identity is never
   colour alone. */
.l1-admin-workspace .l1-pool-grid {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  padding-bottom: var(--l1-space-4);
}
.l1-admin-workspace .l1-pool-card {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-2);
  min-width: 0;
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-admin-workspace .l1-pool-card.is-disabled { background: var(--l1-surface-2); }
.l1-admin-workspace .l1-pool-card__head { align-items: baseline; display: flex; gap: var(--l1-space-2); justify-content: space-between; }
.l1-admin-workspace .l1-pool-card__name { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); overflow-wrap: anywhere; }
.l1-admin-workspace .l1-pool-card__cidr { font-size: var(--l1-text-sm); }
.l1-admin-workspace .l1-pool-card__use { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-3); justify-content: space-between; }
.l1-admin-workspace .l1-pool-card__figure { color: var(--l1-ink); font-feature-settings: var(--l1-font-feature-tabular); font-weight: var(--l1-fw-semibold); }
.l1-admin-workspace .l1-pool-card__figure[data-tone="warn"] { color: var(--l1-warn); }
.l1-admin-workspace .l1-pool-card__figure[data-tone="danger"] { color: var(--l1-danger); }
.l1-admin-workspace .l1-pool-card__foot { align-items: center; display: flex; gap: var(--l1-space-2); justify-content: space-between; }
.l1-admin-workspace .l1-stackbar {
  background: var(--l1-surface-3);
  border-radius: var(--l1-radius-pill);
  display: flex;
  gap: 2px;
  height: 8px;
  overflow: hidden;
}
.l1-admin-workspace .l1-stackbar__segment { display: block; flex: none; min-width: 3px; }
.l1-admin-workspace :is(.l1-stackbar__segment, .l1-stackbar__swatch)[data-kind="allocated"] { background: var(--l1-brand); }
.l1-admin-workspace :is(.l1-stackbar__segment, .l1-stackbar__swatch)[data-kind="reserved"] { background: color-mix(in srgb, var(--l1-brand) 45%, var(--l1-surface-1)); }
.l1-admin-workspace :is(.l1-stackbar__segment, .l1-stackbar__swatch)[data-kind="blocked"] { background: var(--l1-warn); }
.l1-admin-workspace .l1-stackbar__swatch[data-kind="available"] { background: var(--l1-surface-3); box-shadow: inset 0 0 0 1px var(--l1-border); }
.l1-admin-workspace .l1-stackbar__segment:hover { filter: brightness(1.1); }
.l1-admin-workspace .l1-stackbar__legend {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  gap: var(--l1-space-1) var(--l1-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.l1-admin-workspace .l1-stackbar__legend a { align-items: center; color: var(--l1-ink-muted); display: inline-flex; gap: 6px; text-decoration: none; }
.l1-admin-workspace .l1-stackbar__legend a:hover { color: var(--l1-ink); }
.l1-admin-workspace .l1-stackbar__swatch { border-radius: 2px; display: inline-block; height: 8px; width: 8px; }
/* An edit dialog on an infrastructure record (IP address, firewall group):
   wider than a confirm, rare fields folded under Advanced. */
.l1-admin-workspace .l1-dialog--wide { max-width: min(640px, calc(100vw - 32px)); }
.l1-admin-workspace .l1-dialog__advanced {
  border-top: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-3);
  padding-top: var(--l1-space-3);
}
.l1-admin-workspace .l1-dialog__advanced > summary {
  color: var(--l1-ink-muted);
  cursor: pointer;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
}
.l1-admin-workspace .l1-dialog__body { display: grid; gap: var(--l1-space-3); }
/* A settings summary card at the top of a page whose settings live in a
   dialog (Reverse DNS publishing, hosted mail DNS provider). */
.l1-admin-workspace .l1-publish-card {
  align-items: flex-start;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3) var(--l1-space-5);
  justify-content: space-between;
  margin-bottom: var(--l1-space-4);
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-admin-workspace .l1-publish-card.is-off { border-left: 3px solid var(--l1-warn); }
.l1-admin-workspace .l1-publish-card__main { display: grid; flex: 1 1 32rem; gap: var(--l1-space-2); min-width: 0; }
.l1-admin-workspace .l1-publish-card__facts { display: flex; flex-wrap: wrap; gap: var(--l1-space-2) var(--l1-space-6); margin: 0; }
.l1-admin-workspace .l1-publish-card__facts > div { display: grid; gap: 2px; }
.l1-admin-workspace .l1-publish-card__facts dt { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-normal); }
.l1-admin-workspace .l1-publish-card__facts dd { font-size: var(--l1-text-sm); margin: 0; }
.l1-admin-workspace .l1-publish-card .l1-performance__note { margin: 0; }
/* A group heading inside a settings form: sentence case at the panel-title
   scale, not the uppercase micro label. */
.l1-admin-workspace .l1-form-legend {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: 0;
  margin-bottom: var(--l1-space-1);
  text-transform: none;
}
/* A one-line notice whose rows open beneath it (Jobs: paid orders with no job). */
.l1-admin-workspace details.l1-notice-details { display: block; }
.l1-admin-workspace .l1-notice-details > summary { cursor: pointer; list-style: none; }
.l1-admin-workspace .l1-notice-details > summary::-webkit-details-marker { display: none; }
.l1-admin-workspace .l1-notice-details__toggle { color: var(--l1-brand-strong); font-size: var(--l1-text-sm); margin-inline-start: var(--l1-space-2); text-decoration: underline; }
.l1-admin-workspace .l1-notice-details[open] > summary { margin-bottom: var(--l1-space-2); }
.l1-admin-workspace .l1-notice-details[open] .l1-notice-details__toggle { display: none; }
/* Workers: scheduled tasks folded by area, each summary line carrying the
   area's task count and its worst state. */
.l1-admin-workspace .l1-task-group { border-bottom: 1px solid var(--l1-border); }
.l1-admin-workspace .l1-task-group__summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--l1-space-3);
  list-style: none;
  padding: var(--l1-space-2) 0;
}
.l1-admin-workspace .l1-task-group__summary::-webkit-details-marker { display: none; }
.l1-admin-workspace .l1-task-group__name { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); min-width: 9rem; }
.l1-admin-workspace .l1-task-group__summary > .ui-status { margin-inline-start: auto; }
.l1-admin-workspace .l1-task-group__summary > svg { color: var(--l1-ink-muted); height: 1rem; transition: transform 150ms ease; width: 1rem; }
.l1-admin-workspace .l1-task-group[open] > .l1-task-group__summary > svg { transform: rotate(180deg); }
.l1-admin-workspace .l1-task-group > .ui-table-scroll { margin-bottom: var(--l1-space-3); }
/* Scheduled task: one mark per retained run (newest right) and a duration
   line. Status colours carry a legend and a title per mark, never colour alone. */
.l1-admin-workspace .l1-run-trend { display: grid; gap: var(--l1-space-3); }
.l1-admin-workspace .l1-run-strip { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.l1-admin-workspace .l1-run-strip > li,
.l1-admin-workspace .l1-run-swatch { background: var(--l1-surface-3); border-radius: 2px; display: inline-block; height: 18px; width: 8px; }
.l1-admin-workspace .l1-run-swatch { height: 8px; }
.l1-admin-workspace :is(.l1-run-strip > li, .l1-run-swatch)[data-tone="ok"] { background: var(--l1-ok); }
.l1-admin-workspace :is(.l1-run-strip > li, .l1-run-swatch)[data-tone="danger"] { background: var(--l1-danger); }
.l1-admin-workspace :is(.l1-run-strip > li, .l1-run-swatch)[data-tone="info"] { background: var(--l1-info); }
.l1-admin-workspace .l1-stackbar__legend > li { align-items: center; color: var(--l1-ink-muted); display: inline-flex; gap: 6px; }
.l1-admin-workspace .l1-sparkline { margin: 0; max-width: 36rem; }
.l1-admin-workspace .l1-sparkline svg { display: block; height: 40px; width: 100%; }
.l1-admin-workspace .l1-sparkline polyline { stroke: var(--l1-brand); stroke-linejoin: round; stroke-width: 2px; }
.l1-admin-workspace .l1-plain-list { display: grid; gap: var(--l1-space-1); margin: 0; padding-inline-start: 1.1rem; }
/* One line per status, explained once under a filter bar (VMID reservations). */
.l1-admin-workspace .l1-legend {
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  gap: var(--l1-space-1) var(--l1-space-5);
  margin: 0 0 var(--l1-space-3);
}
.l1-admin-workspace .l1-legend > div { align-items: baseline; display: inline-flex; gap: var(--l1-space-2); }
.l1-admin-workspace .l1-legend dd { margin: 0; }
.l1-admin-workspace .l1-legend .ui-status { font-size: var(--l1-text-xs); }
.l1-admin-workspace .dropdown-item[data-tone="danger"] { color: var(--l1-danger); }
@media (max-width: 575px) {
  .l1-admin-workspace .ui-table--stack tbody tr.l1-table-group { padding: .5rem 1rem; }
  .l1-admin-workspace .ui-table--stack tbody tr.l1-table-group > th { background: transparent; border: 0; display: block; padding: 0; }
  .l1-admin-workspace .l1-table-group > th > .l1-row-action { float: none; }
  .l1-admin-workspace .ui-table--stack tbody td > .l1-cell { justify-items: end; text-align: right; }
  .l1-admin-workspace .ui-table--stack .l1-meter-cell { grid-template-columns: 4rem auto; }
}
.l1-admin-workspace .l1-work-table__summary {
  max-width: 40rem;
  min-width: 18rem;
  overflow-wrap: anywhere;
  white-space: normal;
}
.l1-admin-workspace .ui-table .l1-work-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.l1-admin-workspace .ui-row { flex-wrap: wrap; }
.l1-admin-workspace .ui-row__main { flex-basis: 14rem; overflow-wrap: anywhere; }
.l1-admin-workspace .l1-console-search-kind {
  flex: 0 0 8.5rem;
  justify-content: center;
}
.l1-admin-workspace .l1-work-identity {
  align-items: center;
  display: flex;
  gap: var(--l1-space-3);
  min-width: 0;
}
.l1-admin-workspace .l1-work-identity > :last-child { min-width: 0; overflow-wrap: anywhere; }
.l1-admin-workspace .l1-work-avatar {
  align-items: center;
  background: var(--l1-brand-soft);
  border-radius: var(--l1-radius-md);
  color: var(--l1-brand);
  display: inline-flex;
  flex: 0 0 32px;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}
.l1-admin-workspace .l1-work-avatar[data-variant="accent"] {
  background: var(--l1-ok-soft);
  color: var(--l1-ok);
}
.l1-admin-workspace .l1-work-attention {
  align-items: center;
  background: var(--l1-brand-soft);
  border: 0;
  border-left: 3px solid var(--l1-brand);
  border-radius: 0 var(--l1-radius-md) var(--l1-radius-md) 0;
  color: var(--l1-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3);
  justify-content: space-between;
  padding: var(--l1-space-4);
}
.l1-admin-workspace .l1-work-attention[data-tone="warn"],
.l1-admin-workspace .l1-work-attention[data-tone="warning"] {
  background: var(--l1-warn-soft);
  border-left-color: var(--l1-warn);
}
.l1-admin-workspace .l1-work-attention[data-tone="danger"] {
  background: var(--l1-danger-soft);
  border-left-color: var(--l1-danger);
}
.l1-admin-workspace .l1-work-attention > :first-child { min-width: 0; }
.l1-admin-workspace .l1-work-attention p { margin: var(--l1-space-1) 0 0; }
/* ---------- One filter style, and the tab toolbar ----------
   Page tabs change the page: a .ui-tabs that is a direct child of .ui-page (or
   carries .ui-tabs--page) stays an underlined row. A status filter changes the
   list, so it is one segmented control with counts, never a second underlined
   row: includes/_filter_pills.html, any .ui-tabs nested inside a section, or
   .ui-tabs--filter anywhere. Counts sit in the segment as plain figures. */
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) {
  align-items: center;
  align-self: flex-start;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  padding: 2px;
  width: fit-content;
}
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) > :is(.ui-tabs__link, .l1-filter-pill) {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--l1-radius-sm) - 1px);
  color: var(--l1-ink-muted);
  display: inline-flex;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  gap: .4rem;
  margin: 0;
  min-height: 1.875rem;
  padding: 0 .7rem;
  text-decoration: none;
  white-space: nowrap;
}
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) > :is(.ui-tabs__link, .l1-filter-pill):hover { color: var(--l1-ink); }
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) > :is(.ui-tabs__link, .l1-filter-pill)[aria-current] {
  background: var(--l1-sheet);
  border-color: var(--l1-border);
  box-shadow: var(--l1-shadow-sm);
  color: var(--l1-ink);
  font-weight: var(--l1-fw-semibold);
}
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) :is(.ui-chip, .l1-filter-pill__count) {
  background: transparent;
  border: 0;
  color: var(--l1-ink-muted);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  min-height: 0;
  padding: 0;
}
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) :is(.ui-chip--warn, .l1-filter-pill__count[data-tone="warn"]) { color: var(--l1-warn); }
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) :is(.ui-chip--danger, .l1-filter-pill__count[data-tone="danger"]) { color: var(--l1-danger); }
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) .l1-filter-pill__count[data-tone="info"] { color: var(--l1-info); }
:is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) .l1-filter-pill__count[data-tone="ok"] { color: var(--l1-ok); }
@media (max-width: 767px) {
  :is(.l1-filter-pills, .ui-tabs.ui-tabs--filter, .l1-admin-console-body .ui-page > :not(.ui-page__head) .ui-tabs:not(.ui-tabs--page, .ui-tabs--panel, .l1-settings__tabs, .l1-client-tabs)) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
}
/* Setup card: the whole body of a LayerOne area that has nothing to show
   yet (Web hosting before its first node), as numbered steps. */
.l1-admin-workspace .l1-setup-card { max-width: 46rem; }
.l1-setup-steps { counter-reset: none; display: grid; gap: var(--l1-space-4); list-style: none; margin: 0; }
.l1-setup-steps > li { align-items: flex-start; display: flex; gap: var(--l1-space-3); }
.l1-setup-steps > li > div { display: grid; gap: 2px; min-width: 0; }
.l1-setup-steps strong { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-setup-steps span:not(.l1-setup-steps__mark) { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); }
.l1-setup-steps__mark {
  align-items: center;
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: 999px;
  color: var(--l1-brand);
  display: inline-flex;
  flex: none;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}
/* A hairline between the tabs of a row and the tab that is not one of them
   (Jobs: the categories, then Workers). */
.l1-tabs__divider {
  align-self: center;
  background: var(--l1-border-strong);
  flex: none;
  height: 1.125rem;
  margin: 0 var(--l1-space-2);
  width: 1px;
}
/* The line under a tab row: the tab's own one-line description on the left,
   its filters and tab-only actions (Download, the period select, Refresh) on
   the right. It is what lets the section head stay identical on every tab. */
.l1-tab-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-4);
  justify-content: space-between;
  min-height: 2.25rem;
}
.l1-tab-toolbar__desc {
  color: var(--l1-ink-muted);
  flex: 1 1 20rem;
  font-size: var(--l1-text-sm);
  margin: 0;
  min-width: 0;
}
.l1-tab-toolbar__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  margin-left: auto;
}
@media (max-width: 575px) {
  /* Wrapped under the description on a phone, the actions start at the left
     edge like every other phone head, not stranded on the right. */
  .l1-tab-toolbar__actions { margin-left: 0; }
}

/* ---------- Content lists and editors (Website, Help center, Emails) ----------
   Filter pills (styled above, as the one filter control): one row of label +
   count under the section tabs, above the search toolbar, the current one
   marked. The editor frame: content in the main column, a sticky Publish card
   on the right, a Save bar on phones. */
.l1-filter-pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  margin: var(--l1-space-1) 0 var(--l1-space-3);
}
.l1-filter-pill {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  display: inline-flex;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2);
  min-height: 2rem;
  padding: 0 var(--l1-space-3);
  text-decoration: none;
  white-space: nowrap;
}
.l1-filter-pill:hover { border-color: var(--l1-border-strong); color: var(--l1-ink); }
.l1-filter-pill[aria-current] { background: var(--l1-brand-soft); border-color: var(--l1-brand-border); color: var(--l1-brand); font-weight: var(--l1-fw-medium); }
.l1-filter-pill__count { color: var(--l1-ink); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
.l1-filter-pill[aria-current] .l1-filter-pill__count { color: var(--l1-brand); }
.l1-filter-pill__count[data-tone="warn"] { color: var(--l1-warn); }
.l1-filter-pill__count[data-tone="danger"] { color: var(--l1-danger); }
.l1-filter-pill__count[data-tone="info"] { color: var(--l1-info); }
.l1-filter-pill__count[data-tone="ok"] { color: var(--l1-ok); }
.l1-admin-workspace .ui-tabs + .l1-filter-pills { margin-top: var(--l1-space-3); }
/* Content tables: title cell carries path, open link and flags, so rows stay
   one or two lines instead of wrapping every column. */
.l1-content-table .ui-table__title { font-weight: var(--l1-fw-semibold); }
.l1-content-table__path { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-2); }
.l1-content-table__path > a { color: var(--l1-ink-muted); display: inline-flex; }
.l1-content-table__path > a:hover { color: var(--l1-brand); }
.l1-content-table__path svg { height: .85rem; width: .85rem; }
.l1-content-table__path .ui-chip { font-size: var(--l1-text-micro); }
.l1-content-table__flag { color: var(--l1-warn); font-size: var(--l1-text-xs); }
.l1-content-table .ui-table__sub .ui-hint,
.l1-table-group .ui-hint { font-variant-numeric: tabular-nums; }
/* Website overview board. */
.l1-content-board__tiles { margin: var(--l1-space-3) 0 var(--l1-space-5); }
.l1-content-board__tile { color: inherit; text-decoration: none; }
.l1-content-board__tile:hover { background: var(--l1-surface-2); }
.l1-content-board__row { display: grid; gap: var(--l1-space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-content-board__row > .l1-work-section { border-top: 0; }
.l1-content-board__when { color: var(--l1-ink-muted); flex: none; font-size: var(--l1-text-xs); white-space: nowrap; }
.l1-content-board .ui-row .ui-chip { flex: none; }
/* Editor frame. */
.l1-editor-frame {
  align-items: start;
  display: grid;
  gap: var(--l1-space-6);
  grid-template-columns: minmax(0, 1fr) 18rem;
}
.l1-editor-frame__main { container-type: inline-size; display: grid; gap: var(--l1-space-2); min-width: 0; }
.l1-editor-frame__main > .l1-work-section:first-child,
.l1-editor-frame__main > .ui-notice + .l1-work-section { border-top: 0; }
.l1-editor-frame__fields { display: grid; gap: var(--l1-space-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.l1-editor-frame__aside { align-self: start; position: sticky; top: var(--l1-space-4); }
.l1-editor-frame__card {
  background: var(--l1-work-context-bg);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-4);
  padding: var(--l1-space-4);
}
.l1-editor-frame__card-title { font-size: var(--l1-text-base); font-weight: var(--l1-fw-semibold); margin: 0; }
.l1-editor-frame__publish { display: grid; gap: var(--l1-space-3); }
.l1-editor-frame__publish .l1-check-row { background: transparent; border: 0; padding: 0; }
.l1-editor-frame__address { display: grid; gap: var(--l1-space-1); min-width: 0; }
.l1-editor-frame__address .l1-copyable { max-width: 100%; }
.l1-editor-frame__label { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-semibold); }
.l1-editor-frame__meta { color: var(--l1-ink-muted); display: grid; font-size: var(--l1-text-xs); gap: var(--l1-space-1); margin: 0; }
.l1-editor-frame__actions { display: flex; gap: var(--l1-space-2); justify-content: flex-end; }
.l1-editor-frame__actions .ui-btn--primary { flex: 1 1 auto; justify-content: center; }
.l1-editor-frame__delete { justify-self: start; }
.l1-editor-frame__status { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-editor-frame .l1-editor-frame__bar { display: none; }
.l1-editor-frame .l1-editor-frame__preview-open { display: none; }
.l1-admin-workspace .ui-notice:has(> svg:first-child) { align-items: flex-start; flex-wrap: nowrap; justify-content: flex-start; }
.l1-admin-workspace .ui-notice:has(> svg:first-child) > svg { flex: none; height: 1.1rem; margin-top: 1px; width: 1.1rem; }
.l1-admin-workspace .ui-notice:has(> svg:first-child) > .ui-notice__copy { flex: 1 1 auto; min-width: 0; }
.l1-admin-workspace .ui-notice--warn > svg:first-child { color: var(--l1-warn); }
.l1-admin-workspace .ui-notice--danger > svg:first-child { color: var(--l1-danger); }
.l1-admin-workspace .ui-notice--info > svg:first-child { color: var(--l1-info); }
/* The builder's list and preview stack when the main column is narrow. */
@container (max-width: 62rem) {
  .l1-editor-frame__main .l1-editor { grid-template-columns: minmax(0, 1fr); }
}
.l1-editor-frame__stack { display: grid; gap: var(--l1-space-3); }
.l1-markdown { display: grid; gap: var(--l1-space-2); }
.l1-markdown__head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); justify-content: space-between; }
.l1-markdown__label { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-markdown__modes { display: inline-flex; gap: var(--l1-space-1); }
.l1-markdown__modes .ui-btn[aria-pressed="true"] { background: var(--l1-brand-soft); border-color: var(--l1-brand-border); color: var(--l1-brand); }
.l1-markdown textarea { font-family: var(--l1-font-data); font-size: var(--l1-text-sm); line-height: 1.6; min-height: 20rem; resize: vertical; }
.l1-markdown .l1-markdown__preview { display: none; }
.l1-markdown[data-mode="preview"] .l1-markdown__write { display: none; }
.l1-markdown[data-mode="preview"] .l1-markdown__preview { display: block; }
.l1-markdown__frame { background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); height: min(75vh, 48rem); width: 100%; }
.l1-editor-frame__state { display: grid; gap: var(--l1-space-1); }
.l1-editor-frame__transitions { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-editor-frame__sentto { align-items: flex-start; background: var(--l1-surface-2); border-radius: var(--l1-radius-sm); color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-sm); gap: var(--l1-space-2); margin: 0; padding: var(--l1-space-3); }
.l1-editor-frame__sentto svg { flex: none; height: 1rem; margin-top: 2px; width: 1rem; }
.l1-editor-frame__sentto strong { color: var(--l1-ink); margin-right: var(--l1-space-1); }
.l1-editor-frame__secondary { margin-top: var(--l1-space-4); }
.l1-merge-token {
  background: var(--l1-info-soft);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-info);
  font-family: var(--l1-font-data);
  font-size: .85em;
  padding: 0 .3em;
  white-space: nowrap;
}
.l1-filter-context { margin: 0 0 var(--l1-space-3); }
.l1-mode-tabs {
  justify-self: start;
  width: max-content;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--l1-space-3);
  padding: 2px;
}
.l1-mode-tabs label { cursor: pointer; margin: 0; position: relative; }
.l1-mode-tabs input { opacity: 0; pointer-events: none; position: absolute; }
.l1-mode-tabs span { border-radius: var(--l1-radius-pill); color: var(--l1-ink-muted); display: inline-block; font-size: var(--l1-text-sm); padding: var(--l1-space-1) var(--l1-space-3); }
.l1-mode-tabs input:checked + span { background: var(--l1-brand-soft); color: var(--l1-brand); font-weight: var(--l1-fw-medium); }
.l1-mode-tabs input:focus-visible + span { outline: 2px solid var(--l1-focus-ring); outline-offset: 1px; }
.l1-contacts-dialog .l1-mode-panel { display: none; }
.l1-contacts-dialog:has([data-l1-mode="one"]:checked) [data-l1-mode-panel="one"],
.l1-contacts-dialog:has([data-l1-mode="list"]:checked) [data-l1-mode-panel="list"] { display: grid; gap: var(--l1-space-3); }
.l1-editor-legacy { margin-bottom: var(--l1-space-3); }
.l1-editor-legacy > .ui-btn { flex: none; }
.l1-editor-legacy__stage { background: var(--l1-surface-2); border-radius: var(--l1-radius-sm); height: min(70vh, 760px); padding: var(--l1-space-2); }
.l1-editor-legacy__frame { height: 100%; width: 100%; }
.l1-editor__preview-empty { color: var(--l1-ink-muted); display: none; font-size: var(--l1-text-sm); margin: auto; text-align: center; }
.l1-editor[data-l1-builder-empty] .l1-editor__preview-stage { align-items: center; height: 12rem; }
.l1-editor[data-l1-builder-empty] .l1-editor__preview-frame { display: none; }
.l1-editor[data-l1-builder-empty] .l1-editor__preview-empty { display: block; }
.l1-editor .l1-editor__preview-close { display: none; }
@media (max-width: 991px) {
  .l1-editor-frame { grid-template-columns: minmax(0, 1fr); }
  .l1-editor-frame__aside { position: static; }
  .l1-editor-frame__aside .l1-editor-frame__actions { display: none; }
  .l1-editor-frame .l1-editor-frame__bar {
    align-items: center;
    background: var(--l1-console-canvas, var(--l1-surface-1));
    border-top: 1px solid var(--l1-border);
    bottom: 0;
    display: flex;
    gap: var(--l1-space-3);
    justify-content: space-between;
    padding: var(--l1-space-3) 0;
    position: sticky;
    z-index: 3;
  }
}
@media (max-width: 767px) {
  .l1-content-board__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .l1-filter-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .l1-filter-pills::-webkit-scrollbar { display: none; }
  .l1-content-filters .l1-content-filters__more { display: none; }
  /* Phones: the preview opens full screen from the Preview button. */
  .l1-editor-frame .l1-editor-frame__preview-open { display: inline-flex; }
  .l1-editor-frame .l1-editor__preview { display: none; }
  .l1-editor-frame .l1-editor__preview[data-open] {
    background: var(--l1-surface-1);
    display: flex;
    flex-direction: column;
    inset: 0;
    position: fixed;
    z-index: 1060;
  }
  .l1-editor-frame .l1-editor__preview[data-open] .l1-editor__preview-stage { flex: 1 1 auto; height: auto; }
  .l1-editor-frame .l1-editor__devices { display: none; }
  .l1-editor-frame .l1-editor .l1-editor__preview-close { display: inline-flex; }
  .l1-editor-legacy { flex-wrap: wrap; }
  .l1-editor-legacy__stage { height: 60vh; }
}
/* ---------- Console Settings (billing/admin_configuration.html) ----------
   One shell for both sections: the page head (same on every tab), the
   navigation (Billing's tab row, or LayerOne's grouped list beside the tab),
   the tab line with the state chip and master switch, two-column section rows,
   a save bar that stays in view, and the reference notes beside the form when
   the body is wide enough. Widths come from container queries on
   .l1-settings__body, so the same tab lays out correctly beside the LayerOne
   list or under the Billing tab row. */
.l1-admin-workspace.l1-settings[data-workspace-kind="form"]:not(.ui-page--wide) { max-width: 84rem; }
.l1-settings__head { align-items: flex-start; }
.l1-settings__head .ui-subtitle { max-width: 62ch; }
.l1-settings__state { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.l1-settings-master {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-pill);
  cursor: pointer;
  display: inline-flex;
  gap: var(--l1-space-2);
  min-height: var(--l1-control-h-md);
  padding: 0 var(--l1-space-3) 0 var(--l1-space-2);
}
.l1-settings-master:has(input:checked) { background: var(--l1-brand-soft); border-color: var(--l1-brand-border); }
.l1-settings-master input { accent-color: var(--l1-brand); height: 1rem; margin: 0; width: 1rem; }
.l1-settings-master__text { align-items: baseline; display: inline-flex; gap: var(--l1-space-2); font-size: var(--l1-text-sm); }
.l1-settings-master__text strong { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-settings-master__state { color: var(--l1-ink-muted); font-variant-numeric: tabular-nums; }
.l1-settings-master:has(input:checked) .l1-settings-master__state { color: var(--l1-brand); font-weight: var(--l1-fw-medium); }
.l1-settings__master-error { margin: calc(var(--l1-space-2) * -1) 0 var(--l1-space-3); text-align: right; }
.l1-settings__detail { margin-bottom: var(--l1-space-4); }
.l1-settings .ui-notice { align-items: flex-start; flex-wrap: nowrap; justify-content: flex-start; }
.l1-settings .ui-notice > svg { color: currentColor; flex: none; height: 1.1rem; margin-top: 1px; width: 1.1rem; }
.l1-settings .ui-notice--warn > svg { color: var(--l1-warn); }
.l1-settings .ui-notice--danger > svg { color: var(--l1-danger); }
.l1-settings .ui-notice > .ui-notice__copy { flex: 1 1 auto; min-width: 0; }
.l1-settings__detail-line { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); margin: 0 0 var(--l1-space-4); }
.l1-settings__tabs { margin-bottom: var(--l1-space-4); }
.l1-settings__metrics { margin-bottom: var(--l1-space-5); }
.l1-settings__metrics .ui-metric__value { font-size: var(--l1-text-base); }
.l1-settings__metric-link { color: inherit; text-decoration: none; }
.l1-settings__metric-link:hover { background: var(--l1-surface-2); }
.l1-settings__metric-link:hover .ui-metric__hint { color: var(--l1-brand); }
.l1-settings__frame--nav {
  align-items: start;
  display: grid;
  gap: var(--l1-space-6);
  grid-template-columns: 12.5rem minmax(0, 1fr);
}
.l1-settings__tabhead {
  border-bottom: 1px solid var(--l1-border);
  margin-bottom: var(--l1-space-4);
  padding-bottom: var(--l1-space-3);
}
.l1-settings__tabtitle { display: grid; flex: 1 1 20rem; gap: 2px; min-width: 0; }
.l1-settings__tabname { color: var(--l1-ink); font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); line-height: 1.3; margin: 0; }
@media (max-width: 767px) {
  .l1-settings__frame--nav { gap: var(--l1-space-4); grid-template-columns: minmax(0, 1fr); }
}
.l1-settings__body { container-type: inline-size; min-width: 0; }
.l1-settings__layout { display: grid; gap: var(--l1-space-6); grid-template-columns: minmax(0, 1fr); }
.l1-settings__main { min-width: 0; }
@container (min-width: 54rem) {
  .l1-settings__layout:not(.l1-settings__layout--full) { grid-template-columns: minmax(0, 1fr) 15rem; }
  .l1-settings__reference { align-self: start; position: sticky; top: var(--l1-space-4); }
}
.l1-settings__reference {
  background: var(--l1-work-context-bg);
  border-radius: var(--l1-radius-md);
  color: var(--l1-ink);
  min-width: 0;
  padding: var(--l1-space-4);
}
.l1-settings__reference-title { font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); margin: 0 0 var(--l1-space-3); }
.l1-settings__reference-list { display: grid; gap: var(--l1-space-3); margin: 0; }
.l1-settings__reference-list dt { font-size: var(--l1-text-xs); font-weight: var(--l1-fw-semibold); }
.l1-settings__reference-list dd { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); line-height: 1.5; margin: var(--l1-space-1) 0 0; overflow-wrap: anywhere; }
.l1-settings__reference-list:empty,
.l1-settings__reference:has(.l1-settings__reference-list:empty) { display: none; }
.l1-settings__crosslink {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2);
  margin: var(--l1-space-5) 0 0;
}
.l1-settings__crosslink svg { flex: none; height: 1rem; width: 1rem; }
.l1-settings__jump {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-1) var(--l1-space-4);
  padding: 0 0 var(--l1-space-3);
}
.l1-settings__jump > span { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-semibold); }
.l1-settings__jump a[data-tone="warn"]::after {
  background: var(--l1-warn);
  border-radius: var(--l1-radius-pill);
  content: "";
  display: inline-block;
  height: .4rem;
  margin-left: var(--l1-space-1);
  vertical-align: middle;
  width: .4rem;
}
/* Section rows: what the section is on the left, its fields on the right. */
.l1-settings-section {
  border-top: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-3) var(--l1-space-6);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--l1-space-5) 0;
}
.l1-settings__form > .l1-settings-section:first-of-type,
.l1-settings__errors + .l1-settings-section { border-top: 0; }
@container (min-width: 44rem) {
  .l1-settings-section { grid-template-columns: 13rem minmax(0, 1fr); }
}
.l1-settings-section__intro { min-width: 0; }
.l1-settings-section__intro h3 { color: var(--l1-ink); font-size: var(--l1-text-base); font-weight: var(--l1-fw-semibold); margin: 0; }
.l1-settings-section__intro p { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); line-height: 1.5; margin: var(--l1-space-1) 0 0; }
.l1-settings-section__switch { margin-top: var(--l1-space-3); }
.l1-settings-section__fields {
  align-items: start;
  display: grid;
  gap: var(--l1-space-4);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  min-width: 0;
}
.l1-settings-section__fields > .l1-config-field--check,
.l1-settings-section__fields > .l1-config-field--wide,
.l1-settings-section__fields > .ui-notice,
.l1-settings-section__fields > .l1-settings-hostline,
.l1-settings-section__fields > .l1-settings-deps,
.l1-settings-section__fields > table,
.l1-settings-section__fields > p { grid-column: 1 / -1; }
.l1-settings-section__note { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); margin: 0; }
.l1-settings-section__dimmed-note {
  align-items: center;
  color: var(--l1-warn);
  display: none;
  font-size: var(--l1-text-xs);
  gap: var(--l1-space-1);
}
.l1-settings-section__dimmed-note svg { height: .875rem; width: .875rem; }
.l1-settings-section[data-dimmed] .l1-settings-section__dimmed-note { display: flex; }
.l1-settings-section[data-dimmed] .l1-settings-section__fields { opacity: .55; }
.l1-settings__form--dimmed .l1-settings-section { opacity: .6; }
.l1-settings-section--advanced > summary { cursor: pointer; display: block; list-style: none; position: relative; }
.l1-settings-section--advanced > summary::-webkit-details-marker { display: none; }
.l1-settings-section--advanced > summary svg { color: var(--l1-ink-muted); height: 1rem; position: absolute; right: 0; top: 0; width: 1rem; }
.l1-settings-section--advanced[open] > summary svg { transform: rotate(180deg); }
.l1-settings-section--advanced:not([open]) { display: block; }
/* Fields inside settings read as sentence-case labels, not tiny caps. */
.l1-config-field > label { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-config-field > label > span:first-child,
.l1-config-field__label { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-medium); }
.l1-config-field__saved { font-size: var(--l1-text-micro); }
.l1-config-field--number :is(input, select) { max-width: 12rem; }
.l1-config-field__control { align-items: center; display: inline-flex; gap: var(--l1-space-2); max-width: 12rem; }
.l1-config-field__control > input { min-width: 0; }
.l1-config-field__suffix { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); }
.l1-config-field select.ui-select[name$="_hour"],
.l1-config-field select.ui-select[name$="hours_start"],
.l1-config-field select.ui-select[name$="hours_end"] { max-width: 12rem; }
.l1-settings .l1-config-field--check { background: transparent; border: 0; padding: 0; }
.l1-settings .l1-config-field--check input { accent-color: var(--l1-brand); }
.l1-settings-inline-action { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); }
.l1-settings-deps { display: grid; gap: var(--l1-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--l1-text-sm); }
.l1-settings-deps a { margin-left: var(--l1-space-2); }
.l1-settings-hostline { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); }
.l1-settings-hostline__link { font-size: var(--l1-text-sm); }
.l1-settings-hours { max-width: 34rem; }
.l1-settings-hours th[scope="row"] { font-weight: var(--l1-fw-medium); text-align: left; white-space: nowrap; }
.l1-settings-hours input[type="text"] { max-width: 8rem; }
.l1-settings-hours tr[data-closed] input[type="text"] { opacity: .45; }
/* The save bar stays in view at the bottom of the console pane. */
.l1-settings__savebar {
  align-items: center;
  background: var(--l1-console-canvas, var(--l1-surface-1));
  border-top: 1px solid var(--l1-border);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3);
  justify-content: space-between;
  margin-top: var(--l1-space-2);
  padding: var(--l1-space-3) 0;
  position: sticky;
  z-index: 3;
}
.l1-settings__savestate { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); }
.l1-settings__savebar[data-dirty] .l1-settings__savestate { color: var(--l1-warn); font-weight: var(--l1-fw-medium); }
.l1-settings__savebar[data-dirty] { box-shadow: 0 -6px 12px -10px var(--l1-ink); }
/* Blocks that are not form sections: tables of channels, providers, offers. */
.l1-settings-block { border-top: 1px solid var(--l1-border); margin-top: var(--l1-space-2); padding: var(--l1-space-4) 0; }
.l1-settings__main > .l1-settings-block:first-child,
.l1-settings__detail + .l1-settings-block,
.l1-settings__metrics + .l1-settings-block,
.l1-settings__form > .l1-settings-block:first-of-type { border-top: 0; margin-top: 0; }
.l1-settings-block__head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); justify-content: space-between; margin-bottom: var(--l1-space-3); }
.l1-settings-block__head h2 { color: var(--l1-ink); font-size: var(--l1-text-base); font-weight: var(--l1-fw-semibold); margin: 0; }
.l1-settings-block__head p { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); margin: var(--l1-space-1) 0 0; max-width: 70ch; }
.l1-settings-block__head .ui-actions { align-items: center; }
.l1-settings-block__body { display: grid; gap: var(--l1-space-3); justify-items: start; }
.l1-settings-block__foot { padding-top: var(--l1-space-3); }
.l1-settings-block__note { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); margin: var(--l1-space-3) 0 0; }
.l1-settings-block .ui-notice { margin-bottom: var(--l1-space-3); }
.l1-settings-warn-text { color: var(--l1-warn); }
.l1-settings-danger-text { color: var(--l1-danger); }
.l1-settings-checks__list { display: grid; gap: var(--l1-space-1); margin: var(--l1-space-2) 0 0; padding-left: 1.1rem; }
.l1-table-group th { background: var(--l1-surface-2); color: var(--l1-ink); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-semibold); letter-spacing: 0; text-align: left; text-transform: none; }
.l1-table-group .ui-hint { font-weight: var(--l1-fw-normal); margin-left: var(--l1-space-2); }
.l1-promo-table__url { align-items: center; display: inline-flex; gap: var(--l1-space-2); }
.l1-promo-table__url > a { color: var(--l1-ink-muted); display: inline-flex; }
.l1-promo-table__url > a svg { height: .9rem; width: .9rem; }
.l1-promo-table .l1-promo-table__sub > td:first-child { border-left: 3px solid var(--l1-border-strong); padding-left: var(--l1-space-6); }
.l1-promo-table__sub input[type="text"] { max-width: 12rem; }
.l1-promo-table input[type="checkbox"],
.l1-domains-table input[type="checkbox"] { accent-color: var(--l1-brand); height: 1rem; width: 1rem; }
.l1-domains-table input[type="text"] { min-width: 14rem; }
.l1-domains-table__try { display: inline-flex; align-items: center; gap: var(--l1-space-1); font-size: var(--l1-text-xs); margin-top: var(--l1-space-1); }
.l1-domains-table__try svg { height: .8rem; width: .8rem; }
.l1-domains-table__host { margin-top: var(--l1-space-1); }
/* Credit lifecycle strip on Billing policy. */
.l1-lifecycle {
  counter-reset: none;
  display: grid;
  gap: var(--l1-space-1);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 var(--l1-space-5);
  padding: 0;
}
.l1-lifecycle__step { min-width: 0; position: relative; }
.l1-lifecycle__step > a {
  border-top: 3px solid var(--l1-brand);
  color: inherit;
  align-content: start;
  display: grid;
  gap: 2px;
  height: 100%;
  padding: var(--l1-space-3) var(--l1-space-4) var(--l1-space-3) 0;
  text-decoration: none;
}
.l1-lifecycle__step + .l1-lifecycle__step > a { padding-left: var(--l1-space-4); }
.l1-lifecycle__step:hover > a { background: var(--l1-surface-2); }
.l1-lifecycle__step[data-tone="warn"] > a { border-top-color: var(--l1-warn); }
.l1-lifecycle--paused .l1-lifecycle__step > a { border-top-color: var(--l1-border-strong); opacity: .7; }
.l1-lifecycle__index { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-variant-numeric: tabular-nums; }
.l1-lifecycle__label { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.l1-lifecycle__value { color: var(--l1-ink); font-size: var(--l1-text-base); font-weight: var(--l1-fw-semibold); }
.l1-lifecycle__note { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); }
/* LayerOne settings overview cards. */
.l1-config-board { margin-bottom: var(--l1-space-5); }
.l1-settings .l1-config-board__title { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-semibold); letter-spacing: .06em; margin: 0 0 var(--l1-space-2); text-transform: uppercase; }
/* Independent columns, each card at its own height: a short card never
   stretches to its neighbour's height or leaves an orphan row. */
.l1-config-board__grid { column-gap: var(--l1-space-3); columns: 17rem; }
.l1-config-board__grid > .l1-config-card { break-inside: avoid; margin-bottom: var(--l1-space-3); }
.l1-config-card {
  align-items: flex-start;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  color: inherit;
  display: flex;
  gap: var(--l1-space-3);
  padding: var(--l1-space-3) var(--l1-space-4);
  text-decoration: none;
}
.l1-config-card:hover { border-color: var(--l1-brand-border); }
.l1-config-card--attention { border-left: 3px solid var(--l1-warn); }
/* Settings overview: the problems, one full-width row each, before the board. */
.l1-config-problems { border-top: 0; margin-bottom: var(--l1-space-5); }
.l1-config-problem { align-items: center; gap: var(--l1-space-3); }
.l1-config-problem > .l1-config-card__icon { flex: none; }
.l1-config-card__icon { align-items: center; background: var(--l1-surface-2); border-radius: var(--l1-radius-sm); color: var(--l1-ink-muted); display: inline-flex; flex: 0 0 2rem; height: 2rem; justify-content: center; }
.l1-config-card__icon svg { height: 1rem; width: 1rem; }
.l1-config-card__body { display: grid; gap: 2px; min-width: 0; }
.l1-config-card__head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-3); justify-content: space-between; }
.l1-config-card__head strong { color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-config-card__line { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); overflow-wrap: anywhere; }
.l1-config-card__meta { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
@media (max-width: 767px) {
  .l1-settings__state { justify-content: flex-start; }
  .l1-settings__master-error { text-align: left; }
  .l1-lifecycle { grid-template-columns: minmax(0, 1fr); }
  .l1-lifecycle__step > a,
  .l1-lifecycle__step + .l1-lifecycle__step > a {
    border-left: 3px solid var(--l1-brand);
    border-top: 0;
    grid-template-columns: 1.25rem 5.5rem minmax(0, 1fr);
    padding: var(--l1-space-2) var(--l1-space-3);
  }
  .l1-lifecycle__step[data-tone="warn"] > a { border-left-color: var(--l1-warn); }
  .l1-lifecycle__note { grid-column: 3; }
  .l1-settings__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .l1-settings__tabs .ui-tabs__link { flex: 0 0 auto; }
  .l1-settings-hours input[type="text"] { max-width: 6.5rem; }
  .l1-domains-table input[type="text"] { min-width: 0; }
  .l1-promo-table .l1-promo-table__sub > td:first-child { padding-left: var(--l1-space-3); }
}
/* ---------- Client record (billing/admin_client_detail.html) ----------
   Header: back link, avatar, name with state chips, a meta row with copy
   buttons, and the actions (one filled). Then five KPI tiles, one alert slot
   and the tabs. Everything below uses the flat workspace sections. */
.l1-admin-workspace .l1-client-head { align-items: flex-end; }
.l1-admin-workspace .l1-client-head__identity { flex: 1 1 28rem; min-width: 0; }
.l1-admin-workspace .l1-client-head__title {
  align-items: center;
  display: flex;
  gap: var(--l1-space-4);
  margin-top: var(--l1-space-2);
  min-width: 0;
}
.l1-admin-workspace .l1-client-head__title > .l1-work-avatar {
  flex-basis: 48px;
  font-size: var(--l1-text-sm);
  height: 48px;
  width: 48px;
}
.l1-admin-workspace .l1-client-head__text { min-width: 0; }
.l1-admin-workspace .l1-client-head__name {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-3);
}
.l1-admin-workspace .l1-client-head__name .ui-title { margin: 0; overflow-wrap: anywhere; }
.l1-admin-workspace .l1-client-head__meta > span + span::before {
  color: var(--l1-border-strong);
  content: "\00b7";
  margin-inline-end: var(--l1-space-3);
}
.l1-admin-workspace .l1-client-head__actions { flex-wrap: wrap; }
.l1-admin-workspace .l1-client-kpis { margin-top: var(--l1-space-4); }
.l1-admin-workspace .l1-client-kpis .ui-metric { padding-block: var(--l1-space-3); }
.l1-admin-workspace .l1-client-kpis__unit {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  margin-inline-start: 2px;
}
.l1-tone-text[data-tone="danger"] { color: var(--l1-danger); font-weight: var(--l1-fw-semibold); }
.l1-tone-text[data-tone="warn"] { color: var(--l1-warn); font-weight: var(--l1-fw-semibold); }
.l1-admin-workspace .l1-client-alert { margin-top: var(--l1-space-4); }
.l1-admin-workspace .l1-client-alert .ui-notice__copy { flex: 1 1 24rem; min-width: 0; }
.l1-admin-workspace .l1-client-alert__why { margin-top: var(--l1-space-2); }
.l1-admin-workspace .l1-client-alert__why > summary {
  color: var(--l1-ink-soft);
  cursor: pointer;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
}
.l1-admin-workspace .l1-client-alert__why > :not(summary) { margin-top: var(--l1-space-2); }
.l1-admin-workspace .l1-client-tabs { margin-top: var(--l1-space-5); }
/* A record page has many sections; an empty one is one quiet line, not a
   hero block with an icon. */
.l1-client-record .l1-work-section > .ui-empty,
.l1-client-record .l1-work-section > .ui-panel__body > .ui-empty {
  gap: 2px;
  padding: var(--l1-space-2) 0 var(--l1-space-4);
}
.l1-client-record .l1-work-section .ui-empty__icon { display: none; }
.l1-client-record .l1-work-section .ui-empty__title { font-size: var(--l1-text-sm); }
/* Money list on the client Overview: what is owed first, then what was paid. */
.l1-admin-workspace .l1-money-list { list-style: none; margin: 0; padding: 0; }
.l1-admin-workspace .l1-money-list > .ui-row { align-items: center; gap: var(--l1-space-3); }
.l1-admin-workspace .l1-money-list > .ui-row > .l1-money { flex: none; min-width: 6.5rem; text-align: right; }
.l1-admin-workspace .l1-money-list__settled .ui-row__main strong { color: var(--l1-ink-soft); font-weight: var(--l1-fw-medium); }
.l1-admin-workspace .l1-month-line { gap: var(--l1-space-3) var(--l1-space-6); }
.l1-admin-workspace .l1-month-line dd { font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); }
/* Billing tab: the balance and its one action, as a band above the records. */
.l1-admin-workspace .l1-balance-bar {
  align-items: center;
  background: var(--l1-work-context-bg);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3);
  justify-content: space-between;
  margin: var(--l1-space-4) 0;
  padding: var(--l1-space-4);
}
.l1-admin-workspace .l1-balance-bar > div { flex: 1 1 24rem; min-width: 0; }
.l1-admin-workspace .l1-balance-bar .ui-panel__title { font-size: var(--l1-text-lg); }
.l1-admin-workspace .ui-tabs--sub { margin-bottom: var(--l1-space-2); }
.l1-admin-workspace .ui-tabs--sub .ui-tabs__link { font-size: var(--l1-text-sm); }
/* Add-ons: one status line per add-on, the controls behind "Change". */
.l1-admin-workspace .l1-addon { border-bottom: 1px solid var(--l1-border); }
.l1-admin-workspace .l1-addon__line {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-4);
  list-style: none;
  padding: var(--l1-space-3) 0;
}
.l1-admin-workspace .l1-addon__line::-webkit-details-marker { display: none; }
.l1-admin-workspace .l1-addon__name { align-items: center; display: inline-flex; gap: var(--l1-space-2); }
.l1-admin-workspace .l1-addon__name i { color: var(--l1-ink-muted); height: 16px; width: 16px; }
.l1-admin-workspace .l1-addon__state { color: var(--l1-ink-muted); flex: 1 1 14rem; font-size: var(--l1-text-sm); min-width: 0; }
.l1-admin-workspace .l1-addon__toggle { pointer-events: none; }
.l1-admin-workspace .l1-addon[open] .l1-addon__toggle { background: var(--l1-surface-3); }
.l1-admin-workspace .l1-addon__body { padding: 0 0 var(--l1-space-4); }
/* Text values in a KPI tile (a plan name, a date) sit a step smaller than
   figures, so the row still reads as numbers first. */
.l1-admin-workspace .ui-metric__value.l1-metric-text { font-size: var(--l1-text-base); }
.l1-admin-workspace .l1-metric-link { color: inherit; text-decoration: none; }
.l1-admin-workspace .l1-metric-link:hover { text-decoration: underline; }
.l1-admin-workspace .l1-server-head__identity { flex: 1 1 28rem; min-width: 0; }
.l1-admin-workspace .l1-server-head__actions { flex-wrap: wrap; margin-inline-start: auto; }
.l1-admin-workspace .l1-server-head__actions form { margin: 0; }
@media (max-width: 767px) {
  .l1-admin-workspace .l1-server-head__identity { flex-basis: auto; }
  .l1-admin-workspace .l1-server-head__actions { margin-inline-start: 0; }
}
/* Order payment link: the URL with a copy button and an Open link. */
.l1-admin-workspace .l1-payment-link {
  align-items: center;
  background: var(--l1-work-context-bg);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3);
  justify-content: space-between;
  margin-bottom: var(--l1-space-4);
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-admin-workspace .l1-payment-link .l1-copyable { min-width: 0; overflow-wrap: anywhere; }
/* Products: an inactive product's tab is muted; the selected product opens
   with a header band (identity, facts, its two actions) above its plans. */
.l1-admin-workspace .l1-product-tabs .l1-product-tabs__inactive { color: var(--l1-ink-muted); opacity: .75; }
.l1-admin-workspace .l1-product-band {
  align-items: flex-start;
  background: var(--l1-work-context-bg);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3);
  justify-content: space-between;
  margin: var(--l1-space-4) 0 var(--l1-space-2);
  padding: var(--l1-space-4);
}
.l1-admin-workspace .l1-product-band__main { flex: 1 1 28rem; min-width: 0; }
.l1-admin-workspace .l1-product-band .ui-panel__title { font-size: var(--l1-text-lg); margin: 0; }
.l1-admin-workspace .l1-plan-group > th {
  background: var(--l1-surface-2);
  font-weight: var(--l1-fw-semibold);
  padding-block: var(--l1-space-2);
  text-align: left;
}
/* New orders on/off: one status line under the Products H1; Change opens the
   switches in place. */
.l1-admin-workspace .l1-stock-status > summary {
  cursor: pointer;
  list-style: none;
}
.l1-admin-workspace .l1-stock-status > summary::-webkit-details-marker { display: none; }
.l1-admin-workspace .l1-stock-status > summary .ui-status { margin-inline-start: var(--l1-space-2); }
.l1-admin-workspace .l1-stock-status__edit {
  color: var(--l1-brand-strong);
  font-weight: var(--l1-fw-medium);
  margin-inline-start: var(--l1-space-3);
}
.l1-admin-workspace .l1-stock-status > summary:hover .l1-stock-status__edit { text-decoration: underline; }
.l1-admin-workspace .l1-stock-status[open] .l1-stock-status__edit { display: none; }
.l1-admin-workspace .l1-stock-status__form {
  background: var(--l1-work-context-bg);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-3);
  margin-top: var(--l1-space-3);
  max-width: 40rem;
  padding: var(--l1-space-4);
}
/* Plans by family: one row per base plan, its promotional price variants
   folded under it (billing/catalog_families.py). The fold button carries the
   count; variant rows sit indented on a quieter surface. */
.l1-admin-workspace .l1-plan-fold {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-brand-strong);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
  gap: var(--l1-space-1);
  padding: var(--l1-space-1) var(--l1-space-2);
  white-space: nowrap;
}
.l1-admin-workspace .l1-plan-fold:hover { background: var(--l1-surface-2); }
.l1-admin-workspace .l1-plan-fold:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: 1px; }
.l1-admin-workspace .l1-plan-fold svg { height: 14px; transition: transform 120ms ease; width: 14px; }
.l1-admin-workspace .l1-plan-fold[aria-expanded="true"] svg { transform: rotate(180deg); }
.l1-admin-workspace .ui-table.l1-plan-table tbody.l1-plan-variants[hidden] { display: none; }
.l1-admin-workspace .ui-table.l1-plan-table tbody.l1-plan-variants > tr > td { background: var(--l1-surface-2); }
.l1-admin-workspace .ui-table.l1-plan-table tbody.l1-plan-variants > tr > td:first-child { padding-inline-start: var(--l1-space-8, 2.5rem); }
.l1-admin-workspace .ui-table.l1-plan-table tbody.l1-plan-variants .ui-table__title { font-weight: var(--l1-fw-medium); }
.l1-admin-workspace .ui-table.l1-plan-table tr.l1-plan-row--context > td > * { opacity: .7; }
.l1-admin-workspace .l1-money.l1-money--quiet { color: var(--l1-ink-muted); font-weight: var(--l1-fw-normal); }
@media (max-width: 575px) {
  .l1-admin-workspace .ui-table.l1-plan-table tbody.l1-plan-variants > tr > td:first-child { padding-inline-start: 0; }
  .l1-admin-workspace .ui-table.l1-plan-table tbody.l1-plan-variants > tr { background: var(--l1-surface-2); }
}
/* Switches on a settings form read as plain check rows under the selects,
   not as tinted cards dropped into the field grid. */
.l1-admin-workspace .l1-plain-checks { margin-top: var(--l1-space-3); }
.l1-admin-workspace .l1-plain-checks .l1-check-row { background: transparent; border: 0; box-shadow: none; padding-inline: 0; }
.l1-admin-workspace .l1-addon__state > .ui-status + .ui-status { margin-inline-start: var(--l1-space-4); }
/* Announcements: the dashboard's slots in order, open ones dashed. */
.l1-admin-workspace .l1-slot-strip {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  list-style: none;
  margin: 0 0 var(--l1-space-4);
  padding: 0;
}
.l1-admin-workspace .l1-slot {
  background: var(--l1-work-context-bg);
  border: 1px solid transparent;
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-admin-workspace .l1-slot--open { background: transparent; border: 1px dashed var(--l1-border-strong); color: var(--l1-ink-muted); }
.l1-admin-workspace .l1-slot--open .ui-table__title { color: var(--l1-ink-muted); }
.l1-admin-workspace .l1-slot__index { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-semibold); }
/* A band heading that separates "act now" from the trends below it (Insights). */
.l1-admin-workspace .l1-band-title {
  border-top: 2px solid var(--l1-border-strong);
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .06em;
  margin: var(--l1-space-6) 0 0;
  padding-top: var(--l1-space-3);
  text-transform: uppercase;
}
/* Attention signals: one line per signal, amount and age beside the label. */
.l1-signal-list { display: grid; gap: var(--l1-space-1); list-style: none; margin: 0; padding: 0; }
.l1-signal-list > li { align-items: baseline; display: flex; flex-wrap: wrap; gap: 2px var(--l1-space-2); }
/* Label and figure rows for small summaries (Insights funding and movement).
   Reads the same at every width, so phones need no sideways scroll. */
.l1-admin-workspace .l1-figure-list { display: grid; margin: 0; }
.l1-admin-workspace .l1-figure-list > div {
  align-items: baseline;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-3);
  justify-content: space-between;
  padding: var(--l1-space-2) 0;
}
.l1-admin-workspace .l1-figure-list dt { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-normal); min-width: 0; }
.l1-admin-workspace .l1-figure-list dd {
  font-feature-settings: var(--l1-font-feature-tabular);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.l1-admin-workspace .l1-figure-list dd[data-tone="danger"] { color: var(--l1-danger); }
.l1-admin-workspace .l1-figure-list__total { border-top: 1px solid var(--l1-border-strong); }
/* Filter chips above a timeline (client Activity). */
.l1-chip-filter { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); margin: var(--l1-space-2) 0 var(--l1-space-3); }
.l1-chip-filter > .ui-chip { text-decoration: none; }
/* A section with nothing to show but one fact ("API: 0 of 5,000. No keys."). */
.l1-admin-workspace .l1-oneline {
  align-items: baseline;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-3);
  margin: 0;
  padding: var(--l1-space-3) 0;
}
.l1-admin-workspace .l1-oneline > strong { color: var(--l1-work-section-ink, var(--l1-ink)); font-size: var(--l1-text-base); }
/* Usage meter with its figures (client bandwidth). */
.l1-admin-workspace .l1-usage-meter { display: grid; gap: var(--l1-space-2); margin-bottom: var(--l1-space-4); max-width: 42rem; }
.l1-admin-workspace .l1-usage-meter__figures {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-3);
  justify-content: space-between;
}
.l1-admin-workspace .l1-usage-meter .ui-meter { height: 8px; }
.l1-admin-workspace .ui-meter__bar[data-tone="warn"] { background: var(--l1-warn); }
.l1-check-inline { align-items: center; display: inline-flex; gap: var(--l1-space-2); margin: 0; }
@media (max-width: 767px) {
  .l1-admin-workspace .l1-client-head__title { align-items: flex-start; gap: var(--l1-space-3); }
  .l1-admin-workspace .l1-client-head__title > .l1-work-avatar { flex-basis: 40px; height: 40px; width: 40px; }
  .l1-admin-workspace .l1-client-head__identity { flex-basis: auto; }
  .l1-admin-workspace .l1-client-head__meta { column-gap: var(--l1-space-3); row-gap: 2px; }
  .l1-admin-workspace .l1-client-head__meta > span + span::before { content: none; }
  .l1-admin-workspace .l1-client-kpis > .ui-metric { flex-basis: calc(50% - 1px); }
  .l1-admin-workspace .l1-money-list > .ui-row > .l1-money { min-width: 0; }
}
.l1-admin-workspace .l1-work-composer {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  overflow: visible;
}
.l1-admin-workspace .l1-work-composer > .ui-panel__head {
  background: var(--l1-brand-soft);
  border-radius: var(--l1-radius-md) var(--l1-radius-md) 0 0;
  color: var(--l1-brand);
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-admin-workspace .l1-work-composer > .ui-panel__body { padding: var(--l1-space-4); }
.l1-admin-workspace .l1-work-composer .ui-panel__title { color: var(--l1-brand); }
.l1-admin-workspace .l1-thread-list--workspace { gap: var(--l1-space-4); }
.l1-admin-workspace .l1-thread-list--workspace .l1-thread-message {
  background: var(--l1-surface-1);
  border: 0;
  border-radius: 0;
  padding: var(--l1-space-2) 0;
}
.l1-admin-workspace .l1-thread-list--workspace .l1-thread-message:has(.l1-thread-message__avatar) {
  grid-template-columns: 32px minmax(0, 1fr);
}
.l1-admin-workspace .l1-thread-list--workspace .l1-thread-message__who strong {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.l1-admin-workspace .l1-thread-list--workspace .l1-thread-message--staff {
  background: var(--l1-work-context-bg);
  border-left: 3px solid var(--l1-brand);
  border-radius: 0 var(--l1-radius-md) var(--l1-radius-md) 0;
  padding: var(--l1-space-4);
}
.l1-admin-workspace .l1-thread-list--workspace .l1-thread-message--internal {
  background: var(--l1-warn-soft);
  border-left: 3px solid var(--l1-warn);
  border-radius: 0 var(--l1-radius-md) var(--l1-radius-md) 0;
  margin: 0;
  padding: var(--l1-space-4);
}
.l1-admin-workspace .l1-thread-list--workspace .l1-thread-message--internal .l1-work-avatar {
  background: color-mix(in srgb, var(--l1-warn) 12%, transparent);
  color: var(--l1-warn);
}
.l1-admin-workspace .l1-client-directory-table { min-width: 760px; }
/* An avatar must not consume the entire text column when preview narrows a table. */
.l1-admin-workspace[data-l1-directory-preview] .ui-table td:has(.l1-work-identity) { min-width: 14rem; }
.l1-admin-workspace[data-l1-directory-preview] [hidden] { display: none !important; }
/* Billing directories (Clients, Services, Orders, Invoices) share one row
   shape (.l1-directory-table): an identity cell (title link that navigates and
   a muted sub-line), then the secondary columns, money, status and dates, and
   a right-hand actions cell holding the preview eye and, where a row has more
   than one action, the "..." menu. The identity text is nowrap with an
   ellipsis, so its cell carries a floor: without one an auto-layout table
   squeezed Invoices' number column down to its icon at 1440 and 1920. */
.l1-admin-workspace [data-l1-preview-row] > td { vertical-align: middle; }
.l1-admin-workspace .l1-directory-table > tbody > tr > td { vertical-align: middle; }
@media (min-width: 576px) {
  .l1-admin-workspace .l1-directory-table > tbody > tr > td.ui-table__primary { min-width: 12rem; }
  .l1-admin-workspace .l1-directory-table > tbody > tr > td.ui-table__actions { width: 1%; }
}
.l1-admin-workspace .l1-directory-id {
  align-items: center;
  display: flex;
  gap: var(--l1-space-3);
  min-width: 0;
}
.l1-admin-workspace .l1-directory-id__text {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}
.l1-admin-workspace .l1-directory-id__text > :is(.ui-table__title, .ui-table__sub) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Title plus a copy button for the value support pastes (invoice number). */
.l1-admin-workspace .l1-directory-id__line {
  align-items: center;
  display: flex;
  gap: var(--l1-space-1);
  min-width: 0;
}
.l1-admin-workspace .l1-directory-id__line > .ui-table__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-admin-workspace .l1-directory-id__line > .l1-copyable__btn { flex: none; height: 1.5rem; width: 1.5rem; }
/* A sub-line under a record title is quiet: .ui-table__primary sets the whole
   cell semibold, which made every email, plan spec and action code bold. */
.l1-admin-workspace :is(.l1-directory-table, .l1-event-table, .l1-plan-table, .l1-terminations) .ui-table__primary .ui-table__sub { font-weight: var(--l1-fw-normal); }
.l1-admin-workspace .l1-directory-actions {
  align-items: center;
  white-space: nowrap;
}
.l1-admin-workspace .l1-directory-actions > * { vertical-align: middle; }
.l1-admin-workspace .l1-directory-actions > .dropdown { display: inline-block; }
/* The preview eye and the copy button are quiet until the row is in play,
   like a file manager's "info" affordance: shown on row hover and on keyboard
   focus, always shown on touch screens (no hover). */
@media (hover: hover) {
  .l1-admin-workspace :is(.l1-directory-peek, .l1-directory-copy) { opacity: 0; transition: opacity 120ms ease; }
  .l1-admin-workspace :is([data-l1-preview-row], .l1-directory-table tr):hover :is(.l1-directory-peek, .l1-directory-copy),
  .l1-admin-workspace :is([data-l1-preview-row], .l1-directory-table tr):focus-within :is(.l1-directory-peek, .l1-directory-copy),
  .l1-admin-workspace .l1-directory-peek[aria-expanded="true"],
  .l1-admin-workspace .l1-directory-copy[data-copied] { opacity: 1; }
}
/* Money in a directory: tabular figures in body type, never monospace, and a
   tone only when the amount needs one (below zero, overdue, declined). */
.l1-admin-workspace .l1-money {
  color: var(--l1-ink);
  font-feature-settings: var(--l1-font-feature-tabular);
  font-weight: var(--l1-fw-semibold);
  white-space: nowrap;
}
.l1-admin-workspace .l1-money[data-tone="danger"] { color: var(--l1-danger); }
.l1-admin-workspace .l1-money[data-tone="warn"] { color: var(--l1-warn); }
.l1-admin-workspace .l1-money[data-tone="ok"] { color: var(--l1-ok); }
.l1-admin-workspace .l1-money[data-tone="muted"] { color: var(--l1-ink-muted); font-weight: var(--l1-fw-normal); }
/* Status tabs above a directory carry their count; the active tab's chip
   takes the brand tint so the current filter is readable at a glance. */
.l1-admin-workspace .ui-tabs__link[aria-current="page"] > .ui-chip {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
}
.l1-admin-workspace .ui-tabs__link > .ui-chip { margin-inline-start: var(--l1-space-1); }
/* Directory footer: "1 to 50 of 312" plus the pager. */
.l1-admin-workspace .l1-directory-foot {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-3);
  justify-content: space-between;
  padding: var(--l1-space-3) 0;
}
/* Stacked admin tables (ui-table--stack) on phones. The workspace's desktop
   row padding and zebra stripe are written at the same specificity as the
   stack rule and later, so without this every label/value line of a card
   carried 16px of cell padding and alternate cards were striped cell by cell. */
@media (max-width: 575px) {
  .l1-admin-console-body .l1-admin-workspace .ui-table.ui-table--stack tbody td { padding-block: 0; }
  .l1-admin-console-body .l1-admin-workspace .ui-table.ui-table--stack tbody tr:nth-child(even) > td { background: transparent; }
  .l1-admin-console-body .l1-admin-workspace .ui-table.ui-table--stack tbody td:has(> .ui-table__title),
  .l1-admin-console-body .l1-admin-workspace .ui-table.ui-table--stack tbody td[data-stack="title"] { min-width: 0; }
}
.l1-admin-workspace .ui-table__num > .ui-table__sub { white-space: nowrap; }
/* Billing directory rows on phones. The console's compact stacked card (two
   label/value pairs to a line) applies; on top of it the row's actions cell
   (preview eye, and the "..." menu on Services) sits at the card's top right
   beside the title, and the eye and copy buttons are always visible because
   a phone has no hover. */
@media (max-width: 575px) {
  .l1-admin-console-body .l1-admin-workspace .ui-table.l1-directory-table tbody td[data-stack="title"] { padding-inline-end: 3rem; }
  .l1-admin-console-body .l1-admin-workspace .ui-table.l1-directory-table tbody td[data-stack="actions"] {
    align-items: center;
    gap: var(--l1-space-1);
    padding: 0;
    position: absolute;
    right: .5rem;
    top: .5rem;
  }
  .l1-admin-workspace .l1-directory-table :is(.l1-directory-peek, .l1-directory-copy) { opacity: 1; }
}
/* A few state chips beside a status (KYC hold, Sign-in disabled). */
.l1-chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1);
  margin: 0;
  vertical-align: middle;
}
.ui-status + .l1-chip-row { margin-inline-start: var(--l1-space-2); }
/* Customer reference (billing/_client_ref.html): the name, a state chip only
   when the account is not Active, the billing email under it. Used in every
   billing table and header. */
.l1-client-ref {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.l1-client-ref__name {
  align-items: center;
  display: flex;
  gap: var(--l1-space-2);
  min-width: 0;
}
.l1-client-ref__name > .ui-chip { flex: none; }
.l1-client-ref > .ui-table__sub { font-weight: var(--l1-fw-normal); }
.l1-client-ref__name > .ui-table__title,
.l1-client-ref > .ui-table__sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-admin-workspace .l1-directory-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  width: max-content;
  max-width: 22rem;
  min-width: 0;
  align-items: center;
  justify-content: start;
  gap: var(--l1-space-2);
}
.l1-admin-workspace .l1-directory-record__line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-admin-workspace .l1-directory-record__line > .ui-table__title {
  display: inline;
}
.l1-admin-workspace .l1-directory-record__line > .ui-table__sub::before {
  content: "· ";
}
.l1-admin-workspace .l1-client-directory-table .l1-directory-record__line > :is(.ui-table__title, .ui-table__sub) {
  display: block;
  margin-inline-start: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l1-admin-workspace .l1-client-directory-table .l1-directory-record__line > .ui-table__sub { font-weight: 400; }
.l1-admin-workspace .l1-client-directory-table .l1-directory-record__line > .ui-table__sub::before { content: none; }
/* Ticket references and wait ownership fit within the existing avatar-height
   rows. Keeping them below their primary value reduces horizontal scrolling. */
.l1-admin-workspace .l1-ticket-directory-table [data-l1-preview-row] .ui-table__sub {
  display: block;
  line-height: 1.2;
  margin-inline-start: 0;
}
.l1-admin-workspace .l1-ticket-directory-table :is(td, .ui-status) { line-height: 1.2; }
.l1-admin-workspace .l1-ticket-directory-table .l1-priority { line-height: 1; }
.l1-admin-workspace .l1-ticket-directory-table .l1-directory-record__line > .ui-table__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l1-admin-workspace .l1-ticket-directory-table .l1-directory-record__line > .ui-table__sub::before {
  content: none;
}
.l1-admin-workspace .l1-ticket-directory-table .l1-directory-record {
  max-width: 20rem;
}
.l1-admin-workspace[data-l1-directory-preview] .l1-ticket-directory-table td:has(.l1-work-identity) {
  min-width: 11rem;
}
.l1-admin-workspace .l1-ticket-directory-table .l1-work-identity > :last-child {
  max-width: 12rem;
}
.l1-admin-workspace .l1-ticket-directory-table .l1-work-identity > :last-child > :is(a, span) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l1-admin-workspace .l1-ticket-directory-table .l1-work-identity .ui-table__sub {
  white-space: normal;
}
/* Service directory: a row click opens the record; there is no preview pane. */
.l1-admin-workspace .l1-service-directory-table tbody tr[data-record-href] {
  cursor: pointer;
}
.l1-admin-workspace .l1-service-directory-table td { white-space: nowrap; }
.l1-admin-workspace .l1-service-directory-table td:nth-child(2) { min-width: 12rem; max-width: 18rem; }
/* An address that is also a link: the link, then its copy button. */
.l1-admin-workspace .l1-address-cell { align-items: center; display: inline-flex; gap: var(--l1-space-1); }
.l1-admin-workspace .l1-address-cell .l1-copyable__btn { flex: none; }
/* A pasted value (IP, hostname) never breaks mid-token inside a table cell. */
.l1-admin-workspace .ui-table .l1-copyable { white-space: nowrap; }
.l1-admin-workspace .ui-table .l1-copyable__value { overflow-wrap: normal; }

/* Ticket queue: compact rows; one click anywhere on a row opens the ticket
   (data-l1-row-link in app.js). Colour is reserved for what needs attention:
   a 3px left edge on urgent (danger) and high (warn) rows, and a bold subject
   when it is waiting on us. */
.l1-ticket-queue-list { min-width: 0; }
.l1-admin-workspace .l1-ticket-queue-table {
  table-layout: fixed;
  width: 100%;
}
.l1-admin-workspace .l1-ticket-queue-table th,
.l1-admin-workspace .l1-ticket-queue-table td {
  line-height: 1.25;
  padding-block: .5rem;
  padding-inline: .55rem;
  vertical-align: middle;
}
.l1-admin-workspace .l1-ticket-queue-table thead th:nth-child(1) { width: 2.5rem; }
.l1-admin-workspace .l1-ticket-queue-table thead th:nth-child(3) { width: 19%; }
.l1-admin-workspace .l1-ticket-queue-table thead th:nth-child(4) { width: 11.5rem; }
.l1-admin-workspace .l1-ticket-queue-table thead th:nth-child(5) { width: 4.25rem; }
.l1-admin-workspace .l1-ticket-queue-table thead th:nth-child(6) { width: 7.5rem; }
.l1-admin-workspace .l1-ticket-queue-table tbody tr { border-top: 1px solid var(--l1-border); }
.l1-admin-workspace .l1-ticket-queue-table tbody td { background: var(--l1-surface-1); }
.l1-admin-workspace .l1-ticket-queue-table tbody tr:hover > td { background: var(--l1-surface-2); }
.l1-admin-workspace .l1-ticket-queue-table tbody tr[data-l1-row-link] { cursor: pointer; }
.l1-admin-workspace .l1-ticket-queue-table tbody tr[data-l1-row-link] .ui-table__select { cursor: default; }
.l1-admin-workspace .l1-ticket-queue-table tbody tr[data-priority="urgent"] > td:first-child { box-shadow: inset 3px 0 var(--l1-danger); }
.l1-admin-workspace .l1-ticket-queue-table tbody tr[data-priority="high"] > td:first-child { box-shadow: inset 3px 0 var(--l1-warn); }
/* Subjects wrap to two lines before they are cut, so two tickets about the
   same server can still be told apart. */
.l1-admin-workspace .l1-ticket-queue-table .ui-table__title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--l1-ink);
  display: -webkit-box;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}
.l1-admin-workspace .l1-ticket-queue-table tr[data-on-us] .ui-table__title { font-weight: var(--l1-fw-semibold); }
.l1-admin-workspace .l1-ticket-queue-table tr[data-on-customer] .ui-table__title { color: var(--l1-ink-muted); }
.l1-admin-workspace .l1-ticket-queue-table tbody tr:hover .ui-table__title { color: var(--l1-brand-strong); }
.l1-admin-workspace .l1-ticket-queue-table .ui-table__sub {
  color: var(--l1-ink-muted);
  display: block;
  font-size: var(--l1-text-micro);
  line-height: 1.3;
  margin-inline-start: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-admin-workspace .l1-ticket-queue-table .l1-ticket-queue__meta {
  align-items: center;
  display: flex;
  gap: var(--l1-space-2);
  margin-top: 2px;
}
.l1-admin-workspace .l1-ticket-queue__meta .l1-copyable__value { font-size: var(--l1-text-micro); }
.l1-admin-workspace .l1-ticket-queue__meta .l1-copyable__btn { height: 1.25rem; width: 1.25rem; }
.l1-admin-workspace .l1-ticket-queue__customer > div,
.l1-admin-workspace .l1-ticket-queue__wait > div { min-width: 0; overflow: hidden; }
.l1-admin-workspace .l1-ticket-queue__customer a,
.l1-admin-workspace .l1-ticket-queue__customer > div > span:first-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-admin-workspace .l1-ticket-queue__wait time { font-variant-numeric: tabular-nums; }
.l1-admin-workspace tr[data-on-us] .l1-ticket-queue__wait time { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-admin-workspace .l1-ticket-owner { align-items: center; display: inline-flex; gap: var(--l1-space-2); }
.l1-admin-workspace .l1-ticket-owner .l1-work-avatar { border-radius: 50%; flex-basis: 24px; height: 24px; width: 24px; }
.l1-admin-workspace .l1-ticket-owner--none .l1-work-avatar {
  background: transparent;
  border: 1px dashed var(--l1-border-strong);
}
.l1-admin-workspace .l1-ticket-owner__name {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.l1-ticket-queue-hint { margin: var(--l1-space-2) 0 0; }
@media (max-width: 575px) {
  /* Cards on phones: the owner's name shows beside the avatar. */
  .l1-admin-workspace .l1-ticket-owner__name { clip: auto; height: auto; margin: 0; position: static; width: auto; }
  .l1-admin-workspace .l1-ticket-queue-table .ui-table__title { white-space: normal; }
  .l1-admin-workspace .l1-ticket-queue-table tbody tr[data-priority] > td:first-child { box-shadow: none; }
  .l1-admin-workspace .l1-ticket-queue-table tbody tr[data-priority="urgent"] { box-shadow: inset 3px 0 var(--l1-danger); }
  .l1-admin-workspace .l1-ticket-queue-table tbody tr[data-priority="high"] { box-shadow: inset 3px 0 var(--l1-warn); }
  .l1-admin-workspace .l1-ticket-queue__customer > div,
  .l1-admin-workspace .l1-ticket-queue__wait > div { text-align: right; }
  .l1-admin-workspace .l1-ticket-bulkbar { display: none; }
  .l1-admin-workspace .l1-ticket-queue__wait .ui-table__sub,
  .l1-admin-workspace .l1-ticket-queue__customer .ui-table__sub { display: inline; margin-inline-start: var(--l1-space-1); }
  .l1-admin-workspace .l1-ticket-queue__customer .ui-table__sub::before { content: "· "; }
  .l1-admin-workspace .l1-ops-metrics > * { flex-basis: calc(50% - 1px); }
}
@media (pointer: coarse) {
  .l1-admin-workspace .l1-directory-record > .l1-row-action { height: auto; min-height: 44px; }
}
.l1-admin-workspace [data-l1-preview-row] .l1-work-identity {
  align-items: flex-start;
}
.l1-admin-workspace [data-l1-preview-row] .l1-dialog {
  white-space: normal;
}
/* Preview facts have stable columns, not wrapping flex rows. Only the details
   scroll; the title/close control and record action always remain available. */
.l1-admin-workspace [data-l1-preview-panel] {
  display: flex;
  flex-direction: column;
  max-height: var(--l1-preview-max-height, calc(100dvh - var(--l1-topbar-h) - var(--l1-space-6)));
  overflow: hidden;
  padding: var(--l1-space-3);
  scroll-margin-block: var(--l1-space-3);
}
.l1-admin-workspace [data-l1-preview-panel] > .ui-panel__head {
  flex: 0 0 auto;
  gap: var(--l1-space-2);
  padding-bottom: var(--l1-space-3);
}
.l1-admin-workspace [data-l1-preview-content] {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px;
  line-height: 1.45;
}
.l1-admin-workspace [data-l1-preview-content]:focus-visible {
  outline: 2px solid var(--l1-brand);
  outline-offset: -2px;
}
.l1-admin-workspace [data-l1-preview-content] > * + * { margin-top: var(--l1-space-3); }
.l1-admin-workspace [data-l1-preview-content] .ui-panel__title { font-size: var(--l1-text-sm); }
.l1-admin-workspace [data-l1-preview-content] .l1-work-context { gap: var(--l1-space-2); }
.l1-admin-workspace [data-l1-preview-content] .l1-work-context > div {
  align-items: start;
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
}
.l1-admin-workspace [data-l1-preview-content] .l1-work-context dd {
  min-width: 0;
  text-align: left;
}
.l1-admin-workspace [data-l1-preview-content] .ui-table__sub { margin-top: 2px; }
/* Line-item descriptions are content, not short field labels. */
.l1-admin-workspace [data-l1-preview-content] section .l1-work-context { margin-top: var(--l1-space-2); }
.l1-admin-workspace [data-l1-preview-content] section .l1-work-context > div {
  gap: 2px;
  grid-template-columns: minmax(0, 1fr);
}
.l1-admin-workspace [data-l1-preview-footer] {
  border-top: 1px solid var(--l1-border);
  flex: 0 0 auto;
  margin-top: var(--l1-space-3);
  padding-top: var(--l1-space-3);
}
.l1-admin-workspace [data-l1-preview-footer]:empty { display: none; }
.l1-admin-workspace [data-l1-preview-footer] > a { width: 100%; }
.l1-admin-workspace[data-preview-bound="true"] [data-l1-preview-row]:hover > td {
  background: var(--l1-work-row-hover);
}
/* Preview selection adds only a leading marker; retain normal stripes/hover. */
.l1-admin-workspace [data-l1-preview-row][data-selected="true"] > td:first-child {
  box-shadow: inset 3px 0 var(--l1-brand);
}
/* A retained analytical figure is modest here; directories/editors should remove
   their former metric bands entirely rather than merely inherit a smaller one. */
.l1-admin-workspace .ui-stat__value,
.l1-admin-workspace .ui-metric__value {
  font-size: var(--l1-text-xl);
  letter-spacing: -.02em;
}
.l1-admin-workspace .l1-performance__metrics .ui-stat__value {
  font-size: var(--l1-text-xl);
}
/* A summary metric that opens the list it counts (queue, board, log tabs).
   Tone stays on the numeral and only when non-zero; the cell itself is a link. */
.l1-admin-workspace a.ui-metric {
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.l1-admin-workspace a.ui-metric:hover { background: var(--l1-surface-2); }
.l1-admin-workspace a.ui-metric:hover .ui-metric__label { color: var(--l1-brand-strong); }
.l1-admin-workspace a.ui-metric:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }
.l1-admin-workspace .l1-ops-metrics { margin-bottom: var(--l1-space-4); }
.l1-admin-workspace .l1-ops-metrics .ui-metric__value { font-size: var(--l1-text-lg); }
/* ---------- Console homes: Billing overview and LayerOne overview ----------
   templates/core/admin_billing_overview.html and admin_dashboard.html share
   one frame: head, a row of at most four KPI cards (the one row-aligned grid,
   because the cards carry the same furniture), then two columns that stack
   independently (.l1-home-columns), each card at its own content height, so a
   short card never leaves a blank block beside a tall one. Needs attention
   opens the side column on desktop and the page on phones. Stat cards are
   neutral; tone lands only on a value, a sub-line or a count when the state
   warrants it. Every colour is a token, so dark mode follows tokens.css. */
.l1-home {
  display: grid;
  gap: var(--l1-space-4);
}
.l1-admin-console-body .l1-admin-workspace.l1-home > .ui-page__head { padding-bottom: 0; }
.l1-home-stats {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
/* A known count lays out in even rows instead of leaving one card alone. */
.l1-home-stats[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l1-home-stats[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .l1-home-stats[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .l1-home-stats[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.l1-home-stat {
  background: var(--l1-sheet);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  color: var(--l1-ink);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  padding: var(--l1-space-3) var(--l1-space-4) var(--l1-space-4);
  text-decoration: none;
}
.l1-home-stat:hover,
.l1-home-stat:focus-visible {
  background: var(--l1-surface-1);
  border-color: var(--l1-border-strong);
  color: var(--l1-ink);
  text-decoration: none;
}
.l1-home-stat__label {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
}
.l1-home-stat__value {
  color: var(--l1-ink);
  display: block;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.l1-home-stat__value[data-tone="danger"] { color: var(--l1-danger); }
.l1-home-stat__value[data-tone="warn"] { color: var(--l1-warn); }
.l1-home-stat__sub {
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
  line-height: 1.4;
}
.l1-home-stat__sub[data-tone="ok"] { color: var(--l1-ok); }
.l1-home-stat__sub[data-tone="warn"] { color: var(--l1-warn); }
.l1-home-stat__sub[data-tone="danger"] { color: var(--l1-danger); }
/* The foot sits on the card's bottom edge whatever the sub-line's length, so
   a row of cards ends level: a target bar, or a plain fact in muted type. */
.l1-home-stat__foot {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  line-height: 1.4;
  margin-top: auto;
  padding-top: .45rem;
}
.l1-home-stat__target {
  display: grid;
  gap: .3rem;
}
.l1-home-stat__meter {
  appearance: none;
  background: var(--l1-surface-3);
  border: 0;
  border-radius: var(--l1-radius-pill);
  display: block;
  height: .375rem;
  overflow: hidden;
  width: 100%;
}
.l1-home-stat__meter::-webkit-progress-bar { background: var(--l1-surface-3); }
.l1-home-stat__meter::-webkit-progress-value { background: var(--l1-brand); border-radius: var(--l1-radius-pill); }
.l1-home-stat__meter::-moz-progress-bar { background: var(--l1-brand); border-radius: var(--l1-radius-pill); }

.l1-home-columns {
  align-items: flex-start;
  display: flex;
  gap: var(--l1-space-4);
}
.l1-home-col {
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-4);
  min-width: 0;
}
.l1-home-col--main { flex: 2 1 0; }
.l1-home-col--side { flex: 1 1 0; min-width: 20rem; }
.l1-home .l1-home-panel {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}
/* One card head everywhere: title left, "View all" right on the title's
   baseline, never wrapped under a description. */
.l1-home .l1-home-panel > .ui-panel__head {
  align-items: baseline;
  flex-wrap: nowrap;
  gap: var(--l1-space-3);
}
.l1-home .l1-home-panel > .ui-panel__head > div { flex: 1 1 auto; }
.l1-home .l1-home-panel > .ui-panel__head .ui-link { flex: none; min-height: 0; white-space: nowrap; }
.l1-home .l1-home-panel > .ui-panel__foot { margin-top: auto; }
.l1-home-table { font-size: var(--l1-text-dense); }
.l1-home-table td { vertical-align: top; }
.l1-home-table .ui-table__sub { display: block; margin-top: .1rem; }

/* Needs attention: one line per queue, count at the right. */
.l1-home-queue,
.l1-home-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l1-home-queue__link,
.l1-home-list__link {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  color: var(--l1-ink);
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: 1.125rem minmax(0, 1fr) auto;
  padding: .7rem var(--l1-space-4);
  text-decoration: none;
}
.l1-home-list__link { grid-template-columns: minmax(0, 1fr) auto; }
.l1-home-queue > li:first-child > .l1-home-queue__link,
.l1-home-list > li:first-child > .l1-home-list__link { border-top: 0; }
.l1-home-queue__link:hover,
.l1-home-queue__link:focus-visible,
.l1-home-list__link:hover,
.l1-home-list__link:focus-visible {
  background: var(--l1-surface-1);
  color: var(--l1-ink);
  text-decoration: none;
}
.l1-home-queue__icon,
.l1-home-queue__link svg { color: var(--l1-ink-muted); height: 1.125rem; width: 1.125rem; }
.l1-home-queue__link[data-tone="danger"] > .l1-home-queue__icon { color: var(--l1-danger); }
.l1-home-queue__link[data-tone="warn"] > .l1-home-queue__icon { color: var(--l1-warn); }
.l1-home-queue__link[data-tone="info"] > .l1-home-queue__icon { color: var(--l1-info); }
.l1-home-queue__link > .l1-home-queue__go { color: var(--l1-ink-muted); height: 1rem; justify-self: end; width: 1rem; }
div.l1-home-queue__link:hover { background: transparent; }
.l1-home-attention__total { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); white-space: nowrap; }
/* A thin tone rule down the card's left edge says at a glance whether
   anything failed; green when every check passes. */
.l1-home .l1-home-attention { border-left: 3px solid var(--l1-ok); }
.l1-home .l1-home-attention[data-tone="warn"] { border-left-color: var(--l1-warn); }
.l1-home .l1-home-attention[data-tone="danger"] { border-left-color: var(--l1-danger); }
.l1-home-queue__copy,
.l1-home-list__copy { display: grid; gap: .1rem; min-width: 0; }
.l1-home-queue__copy strong,
.l1-home-list__copy strong {
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  overflow-wrap: anywhere;
}
.l1-home-queue__copy small,
.l1-home-list__copy small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  overflow-wrap: anywhere;
}
.l1-home-list__meta {
  align-items: flex-end;
  color: var(--l1-ink-muted);
  display: grid;
  font-size: var(--l1-text-xs);
  gap: .2rem;
  justify-items: end;
  white-space: nowrap;
}
/* Money in a home list: the body face with tabular figures, never monospace;
   a zero total is muted so the real amounts stand out. */
.l1-home-list__value {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
}
.l1-home-list__value--zero { color: var(--l1-ink-muted); font-weight: var(--l1-fw-medium); }
.l1-home-list__copy strong .ui-chip { margin-left: var(--l1-space-1); vertical-align: 1px; }
/* Signed in: one line, the latest rows behind it for super admins. */
.l1-home-people__summary {
  align-items: center;
  color: var(--l1-ink-muted);
  cursor: default;
  display: flex;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2);
  list-style: none;
  margin: 0;
  padding: .75rem var(--l1-space-4);
}
.l1-home-people__summary > svg { flex: none; height: 1rem; width: 1rem; }
.l1-home-people__summary strong { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
details > .l1-home-people__summary { cursor: pointer; }
details > .l1-home-people__summary::-webkit-details-marker { display: none; }
details > .l1-home-people__summary:hover { color: var(--l1-ink); }
.l1-home-people__summary > .l1-home-people__chevron { margin-left: auto; transition: transform var(--l1-transition); }
.l1-home-people__details[open] .l1-home-people__chevron { transform: rotate(180deg); }
.l1-home-people__details[open] > .l1-home-people__summary { border-bottom: 1px solid var(--l1-border); }
.l1-home-people__more { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); margin: 0; padding: .6rem var(--l1-space-4); border-top: 1px solid var(--l1-border); }
.l1-home-queue__count,
.l1-home-list__count {
  border-radius: var(--l1-radius-pill);
  font-size: var(--l1-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  min-width: 2rem;
  padding: .1rem .55rem;
  text-align: center;
}
:is(.l1-home-queue__count, .l1-home-list__count)[data-tone="danger"] { background: var(--l1-danger-soft); color: var(--l1-danger); }
:is(.l1-home-queue__count, .l1-home-list__count)[data-tone="warn"] { background: var(--l1-warn-soft); color: var(--l1-warn); }
.l1-home-clear {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2);
  margin: 0;
  padding: var(--l1-space-4);
}
.l1-home-clear svg { color: var(--l1-ok); flex: none; height: 1.125rem; width: 1.125rem; }
/* Metric cells in one strip share a height; keep each label and value at the
   top so a cell without a hint does not float its value to the middle. */
.l1-admin-workspace .ui-metric { align-content: start; }
/* Staff member page: one row per recovery action, text left, button right. */
.l1-recovery-row {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-3);
  justify-content: space-between;
  padding-top: var(--l1-space-3);
}
.l1-recovery-row:first-child { border-top: 0; padding-top: 0; }
.l1-recovery-row > div { display: grid; gap: .15rem; min-width: 0; }
.l1-recovery-row strong { font-size: var(--l1-text-sm); font-weight: var(--l1-fw-medium); }
.l1-recovery-row small { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); }
.l1-recovery-row > .ui-btn,
.l1-recovery-row > form { flex: none; }
/* Admin API project: the base URL line and the one-time secret. */
.l1-api-base { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); margin: 0; }
.l1-token-secret { margin: 0 0 var(--l1-space-3); overflow-wrap: anywhere; }
@media (max-width: 575px) {
  .l1-recovery-row { align-items: flex-start; flex-direction: column; }
  /* Two metric cells per row on a phone instead of a tall single column. */
  .l1-admin-workspace .ui-metrics > * { flex-basis: 9rem; }
}
.l1-home-clear--rest { border-top: 1px solid var(--l1-border); font-size: var(--l1-text-xs); padding: .7rem var(--l1-space-4); }
.l1-home-note {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  padding-top: 0;
}

/* Work in progress: three counts in one strip. */
.l1-home-counts {
  border-bottom: 1px solid var(--l1-border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.l1-home-counts > a {
  border-left: 1px solid var(--l1-border);
  color: var(--l1-ink);
  display: grid;
  gap: .1rem;
  padding: var(--l1-space-3) var(--l1-space-4);
  text-decoration: none;
}
.l1-home-counts > a:first-child { border-left: 0; }
.l1-home-counts > a:hover,
.l1-home-counts > a:focus-visible { background: var(--l1-surface-1); color: var(--l1-ink); text-decoration: none; }
.l1-home-counts .l1-home-counts__value {
  color: var(--l1-ink);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  line-height: 1.15;
}
.l1-home-counts .l1-home-counts__value[data-tone="warn"] { color: var(--l1-warn); }
.l1-home-counts span:not(.l1-home-counts__value) { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); }

/* Paid income chart: columns for this period, a dashed line for the same
   buckets one period earlier, one dollar axis. Bars are HTML so their 4px
   rounded tops stay round at any width; the prior line is an SVG overlay. */
.l1-home-chart__periods {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
}
.l1-home-chart__period {
  background: transparent;
  border: 0;
  border-radius: calc(var(--l1-radius-sm) - 1px);
  color: var(--l1-ink-muted);
  cursor: pointer;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
  min-height: 1.75rem;
  padding: 0 .7rem;
  white-space: nowrap;
}
.l1-home-chart__period:hover { color: var(--l1-ink); }
.l1-home-chart__period:focus-visible { box-shadow: var(--l1-focus-ring); outline: 0; }
.l1-home-chart__period[aria-selected="true"] {
  background: var(--l1-sheet);
  box-shadow: var(--l1-shadow-sm);
  color: var(--l1-ink);
  font-weight: var(--l1-fw-semibold);
}
.l1-home-chart__plot {
  column-gap: var(--l1-space-2);
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
}
.l1-home-chart__y {
  color: var(--l1-ink-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
  height: 12.5rem;
  justify-content: space-between;
  text-align: right;
  transform: translateY(-.4em);
}
.l1-home-chart__canvas {
  height: 12.5rem;
  min-width: 0;
  position: relative;
}
.l1-home-chart__grid {
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: space-between;
  pointer-events: none;
  position: absolute;
}
.l1-home-chart__grid span { border-top: 1px solid var(--l1-border); display: block; }
.l1-home-chart__grid span:last-child { border-top-color: var(--l1-border-strong); }
.l1-home-chart__bars {
  align-items: flex-end;
  display: flex;
  gap: 2px;
  inset: 0;
  position: absolute;
}
.l1-home-chart__slot {
  align-items: flex-end;
  display: flex;
  flex: 1 1 0;
  height: 100%;
  justify-content: center;
  min-width: 0;
}
.l1-home-chart__bar {
  background: var(--l1-brand);
  border-radius: 4px 4px 0 0;
  max-width: 24px;
  min-height: 0;
  width: 70%;
}
.l1-home-chart__slot.is-hover .l1-home-chart__bar { background: var(--l1-brand-strong); }
.l1-home-chart__prior {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.l1-home-chart__prior polyline {
  fill: none;
  stroke: var(--l1-ink-muted);
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.l1-home-chart__x {
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
  gap: 2px;
  margin-top: .4rem;
}
.l1-home-chart__x span { flex: 1 1 0; min-width: 0; overflow: visible; text-align: center; white-space: nowrap; }
.l1-home-chart__crosshair {
  background: var(--l1-border-strong);
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
}
.l1-home-chart__tooltip {
  background: var(--l1-sheet);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  box-shadow: var(--l1-shadow-md);
  color: var(--l1-ink);
  font-size: var(--l1-text-xs);
  line-height: 1.5;
  min-width: 10rem;
  padding: .45rem .6rem;
  pointer-events: none;
  position: absolute;
  top: .5rem;
  z-index: 3;
}
.l1-home-chart__tooltip strong { display: block; font-weight: var(--l1-fw-semibold); margin-bottom: .15rem; }
.l1-home-chart__tooltip-row { display: flex; gap: .75rem; justify-content: space-between; }
.l1-home-chart__tooltip-row span:last-child { font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-medium); }
.l1-home-chart__legend {
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  gap: .35rem var(--l1-space-4);
  list-style: none;
  margin: var(--l1-space-3) 0 0;
  padding: 0;
}
.l1-home-chart__legend li { align-items: center; display: inline-flex; gap: .4rem; }
.l1-home-chart__legend strong { color: var(--l1-ink); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
.l1-home-chart__key { display: inline-block; flex: none; }
.l1-home-chart__key--income { background: var(--l1-brand); border-radius: 2px; height: .625rem; width: .625rem; }
.l1-home-chart__key--prior { border-top: 2px dashed var(--l1-ink-muted); height: 0; width: 1.1rem; }

@media (max-width: 1100px) {
  /* One column: the two stacks dissolve into one list, and the work to chase
     (Needs attention) moves to the top. */
  .l1-home-columns { flex-direction: column; align-items: stretch; }
  .l1-home-col { display: contents; }
  .l1-home-columns > .l1-home-col > .l1-home-attention { order: -1; }
}
@media (max-width: 575px) {
  .l1-home { gap: var(--l1-space-3); }
  .l1-home-stats,
  .l1-home-stats[data-count] { gap: var(--l1-space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-home-stat { gap: .15rem; padding: .625rem .75rem; }
  .l1-home-stat__value { font-size: 1.25rem; }
  /* One judged line per card survives on a phone; the foot does not. */
  .l1-home-stat__foot { display: none; }
  .l1-home .l1-home-chart > .ui-panel__head { align-items: flex-start; flex-direction: column; }
  .l1-home-chart__periods { max-width: 100%; overflow-x: auto; }
  .l1-home-chart__y,
  .l1-home-chart__canvas { height: 10rem; }
  .l1-home-chart__plot { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .l1-home-counts > a { padding: var(--l1-space-3); }
}

/* Directory preview drawer: it lies over the right edge of the console, under
   the top bar, instead of taking a 360px column from the table. On phones it
   is a bottom sheet. Opened only on request (row button or Space). */
.l1-admin-workspace .l1-directory-drawer {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  bottom: var(--l1-space-4);
  box-shadow: var(--l1-shadow-lg);
  max-height: none;
  position: fixed;
  right: var(--l1-space-4);
  top: calc(var(--l1-topbar-h) + var(--l1-space-3));
  width: min(380px, calc(100vw - 2 * var(--l1-space-4)));
  z-index: 35;
}
.l1-admin-workspace .l1-directory-drawer:focus { outline: none; }
@media (max-width: 767px) {
  .l1-admin-workspace .l1-directory-drawer {
    bottom: var(--l1-space-3);
    left: var(--l1-space-3);
    max-height: 78dvh;
    right: var(--l1-space-3);
    top: auto;
    width: auto;
  }
}
@media (max-width: 1100px) {
  .l1-work-layout,
  .l1-work-layout--balanced { grid-template-columns: minmax(0, 1fr); }
  .l1-work-aside {
    border-left: 0;
    border-top: 1px solid var(--l1-border);
    padding: var(--l1-space-3) 0 0;
  }
}
/* Settings and embedded workspaces can be narrow even on a wide monitor.
   Directory previews keep their explicit viewport/keyboard lifecycle contract. */
@container admin-workspace (max-width: 900px) {
  .l1-work-layout:not([data-l1-directory-layout]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

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

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

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

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

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

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

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

button.l1-help:not([data-l1-help]):hover .l1-help__tip,
button.l1-help:not([data-l1-help]):focus .l1-help__tip,
button.l1-help:not([data-l1-help]):focus-visible .l1-help__tip,
button.l1-help[data-l1-help][aria-expanded="true"] .l1-help__tip {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* Opt-in help supports tap-to-toggle and Escape through app.js. Keeping its
   visibility in one state also lets Escape dismiss a still-hovered control. */
button.l1-help[data-l1-help] {
  border: 0;
  cursor: pointer;
  height: 1.5rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
  width: 1.5rem;
}

button.l1-help[data-l1-help] .l1-help__mark {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--l1-radius-pill);
  display: inline-flex;
  height: 1.25rem;
  justify-content: center;
  width: 1.25rem;
}

button.l1-help[data-l1-help] .l1-help__tip {
  box-sizing: border-box;
  left: 0;
  max-height: calc(100dvh - 2rem);
  max-width: calc(100vw - 2rem);
  overflow-wrap: anywhere;
  overflow-y: auto;
  padding: var(--l1-space-3);
  right: auto;
  transform: none;
  transition: opacity var(--l1-transition);
  width: 22rem;
  z-index: 30;
}

button.l1-help[data-l1-help][aria-expanded="true"] .l1-help__tip {
  pointer-events: auto;
}

button.l1-help[data-l1-help] .l1-help__tip > span {
  display: block;
}

button.l1-help[data-l1-help] .l1-help__tip > span + span {
  margin-top: var(--l1-space-2);
}

@media (pointer: coarse), (max-width: 600px) {
  button.l1-help[data-l1-help] {
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* "$3.00/mo" reads as one figure, with the hourly rate the line below. */
.l1-deploy-plan-table__amount { align-items: baseline; display: inline-flex; gap: 1px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.l1-os-picker {
  display: grid;
  gap: var(--l1-space-4);
}

.l1-os-picker [data-os-value-select] {
  display: none !important;
}

.l1-os-picker__families {
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr));
}
/* Two tiles a row on a phone, as on desktop, rather than eight full-width rows. */
@media (max-width: 767px) {
  .l1-os-picker__families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.l1-os-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;
  text-decoration: none;
  transition: border-color var(--l1-transition), background var(--l1-transition);
  width: 100%;
}

a.l1-os-pick:hover,
.l1-os-pick:hover {
  border-color: var(--l1-border-strong);
  color: var(--l1-ink);
}

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

.l1-os-pick.is-selected {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand);
}

.l1-os-pick:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.l1-os-pick__icon {
  align-items: center;
  background: var(--l1-surface-2);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  flex: none;
  height: 1.75rem;
  justify-content: center;
  overflow: hidden;
  width: 1.75rem;
}

.l1-os-pick.is-selected .l1-os-pick__icon {
  background: var(--l1-surface-1);
}

.l1-os-pick__icon img {
  display: block;
  height: 1.5rem;
  object-fit: contain;
  width: 1.5rem;
}

.l1-os-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-os-picker__version {
  max-width: 28rem;
}

.l1-image-source {
  display: grid;
  gap: var(--l1-space-4);
}

.l1-image-source .l1-os-picker__families {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l1-image-source .l1-os-pick__label {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* The tiles are followed by the operating system picker or the ISO list in
   the same container, which has no gap of its own. */
[data-image-source] > .l1-image-source {
  margin-bottom: var(--l1-space-5);
}

.l1-iso-list {
  border: 0;
  display: grid;
  gap: var(--l1-space-2);
  margin: 0;
  min-width: 0;
  padding: 0;
}

.l1-iso-list .l1-pick {
  align-items: flex-start;
}

.l1-os-admin {
  display: grid;
  gap: var(--l1-space-3);
  margin: 0 0 var(--l1-space-4);
}

.l1-os-icon-preview {
  align-items: center;
  display: flex;
  gap: var(--l1-space-3);
}

.l1-os-table-mark {
  align-items: center;
  display: inline-flex;
  gap: .35rem;
}

.l1-os-table-mark img {
  display: block;
  height: 1rem;
  object-fit: contain;
  width: 1rem;
}

.l1-pick-grid.l1-deploy-families {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

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

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

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

.l1-deploy-families .l1-pick__label {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

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

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

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

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

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

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

/* Images: the one-line note that ISO uploads are off for the account. */
.l1-images-iso-off { align-items: center; }
.l1-images-iso-off > svg { color: var(--l1-ink-muted); flex: none; height: 16px; width: 16px; }
.l1-images-iso-off > .ui-notice__copy { flex: 1; min-width: 0; }
.l1-images-storage__controls .ui-subhead { margin: 0 0 var(--l1-space-3); }

/* One summary head for both deploy steps (plan and configure): a plain panel
   header, not a navy banner on one step and nothing on the other. */
.l1-deploy-summary__hero {
  align-items: center;
  background: var(--l1-surface-1);
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-ink);
  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: var(--l1-brand-soft);
  border: 1px solid var(--l1-border);
  color: var(--l1-brand-strong);
  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-ink-muted);
  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 var(--l1-border);
  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: var(--l1-ok-soft); color: var(--l1-ok); }
.l1-deploy-summary__state[data-state="credit"] { background: var(--l1-info-soft); color: var(--l1-info); }
.l1-deploy-summary__state[data-state="payment"] { background: var(--l1-warn-soft); color: var(--l1-warn); }
.l1-deploy-summary__state[data-state="blocked"] { background: var(--l1-danger-soft); color: var(--l1-danger); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The order page keeps its review panel beside the form down to phone width,
   so its dock only appears on a phone. */
@media (min-width: 768px) {
  .l1-checkout-page .l1-order-dock { display: none !important; }
}
@media (max-width: 767px) {
  .l1-checkout-page:has(.l1-order-dock) { padding-bottom: 6.5rem; }
}

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

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

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

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

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

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

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

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

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

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

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

@container deploy-builder (max-width: 40rem) {
  .l1-deploy-plan-table__head {
    display: none;
  }

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .l1-deploy-dock {
    bottom: 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%;
  /* A dialog is promoted to the top layer but still inherits from wherever it
     sits in the DOM, and almost every confirm dialog sits in the row it acts on
     -- a `.ui-table__actions` cell, which is `text-align: end; white-space:
     nowrap`. Inherited, that right-aligned the title and stopped the
     description wrapping, so it ran out of the box. Modal surfaces set their
     own typography rather than borrowing the cell's. */
  text-align: start;
  white-space: normal;
}

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

/* A dialog as a side sheet: full height at the right edge (the whole width on
   a phone), a fixed head and a body that scrolls. Billing's Add credit drawer,
   opened by a link to the full page (data-l1-drawer in app.js). */
.l1-dialog--drawer {
  border-radius: 0;
  border-width: 0 0 0 1px;
  height: 100dvh;
  inset: 0 0 0 auto;
  margin: 0 0 0 auto;
  max-height: 100dvh;
  max-width: min(28rem, 100vw);
}
.l1-dialog--drawer[open] { display: flex; flex-direction: column; }
.l1-dialog--drawer .l1-dialog__body { align-content: start; flex: 1 1 auto; overflow-y: auto; }
@media (prefers-reduced-motion: no-preference) {
  .l1-dialog--drawer[open] { animation: l1-drawer-in 180ms ease-out; }
}
@keyframes l1-drawer-in {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- 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
   operator detail templates. Client instance facts use open lists. */

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

/* Two columns instead of three. The base rule hardcodes repeat(3), so a
   two-column composition left an empty third cell with the canvas showing
   through the panel. Declared before the 960px block below so the collapse to
   a single column still wins on source order. */
.l1-overview--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

/* Client instance overview: compact facts, optional services, and activity. */
/* Customer task summaries: one quiet band of readable facts, never a set of
   oversized counters or an operator preview. The shell + page scope also keeps
   shared operator forms and public network tools on their existing design. */
.l1-client-portal-body .l1-client-page .l1-client-summary {
  background: var(--l1-client-summary-bg);
  border: 0;
  border-radius: var(--l1-radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3) var(--l1-space-6);
  margin: 0;
  padding: var(--l1-space-3) var(--l1-space-4);
}
.l1-client-portal-body .l1-client-page .l1-client-summary > div {
  flex: 1 1 9rem;
  min-width: 0;
}
.l1-client-portal-body .l1-client-page .l1-client-summary dt {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-normal);
  overflow-wrap: anywhere;
}
.l1-client-portal-body .l1-client-page .l1-client-summary dd {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  margin: var(--l1-space-1) 0 0;
  overflow-wrap: anywhere;
}
.l1-client-portal-body .l1-client-page .l1-client-summary .ui-hint { display: block; font-weight: var(--l1-fw-normal); }
/* The "what stays the same" band on Reinstall sits inside the panel. */
.l1-client-portal-body .l1-client-page .l1-client-summary.l1-reinstall-keeps { margin: 0 var(--l1-space-4); }
/* Hidden positioned help must not widen the phone workspace. The existing
   controller expands it before measuring/clamping its visible position. */
.l1-client-portal-body .l1-client-page button.l1-help[data-l1-help][aria-expanded="false"] .l1-help__tip {
  display: none;
}
.l1-client-portal-body .l1-client-page .l1-client-inline-note {
  border-top: 1px solid var(--l1-border);
  padding-top: var(--l1-space-4);
}
.l1-client-portal-body .l1-client-page .l1-client-table-readable :is(td, th) { overflow-wrap: anywhere; }
.l1-client-portal-body .l1-client-page .l1-client-log {
  max-height: min(60dvh, 32rem);
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}
.l1-client-portal-body .l1-client-page .l1-client-log:focus-visible {
  outline: 2px solid var(--l1-brand);
  outline-offset: 2px;
}

/* Client overview (/client/, apps/billing/views/overview.py): Get started,
   attention, the at-a-glance strip, quick actions, then servers and
   applications beside recent activity. Built from ui-panel, ui-metrics,
   ui-table--stack and the shared .l1-action-grid band; these rules only lay
   them out and give the checklist, attention and feed rows their shape. */
.l1-client-portal-body .l1-overview-page .l1-overview-page__grid,
.l1-client-portal-body .l1-overview-page .l1-overview-page__main {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.l1-client-portal-body .l1-overview-page .l1-overview-page__grid > *,
.l1-client-portal-body .l1-overview-page .l1-overview-page__main > * { min-width: 0; }
@container client-workspace (min-width: 60rem) {
  .l1-client-portal-body .l1-overview-page .l1-overview-page__grid { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
}
.l1-client-portal-body .l1-overview-page .l1-overview-more {
  align-items: center;
  color: var(--l1-brand);
  display: inline-flex;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-medium);
  gap: .25rem;
  text-decoration: none;
  white-space: nowrap;
}
.l1-client-portal-body .l1-overview-page .l1-overview-more:hover { text-decoration: underline; }
.l1-client-portal-body .l1-overview-page .l1-overview-more :is(svg, i[data-lucide]) { height: .875rem; width: .875rem; }

/* At-a-glance strip: the shared client stat tile (assets/tailwind.css), whose
   figures link to the page behind them, and a row of per-status counts that
   each open the filtered list. */
.l1-client-portal-body .l1-overview-page .l1-overview-summary__figure {
  text-decoration: none;
  width: fit-content;
}
/* Only the linked figures take ink here; a span keeps its data-tone colour. */
.l1-client-portal-body .l1-overview-page a.l1-overview-summary__figure { color: var(--l1-ink); }
.l1-client-portal-body .l1-overview-page a.l1-overview-summary__figure:hover { color: var(--l1-brand); }
.l1-client-portal-body .l1-overview-page .l1-overview-summary__row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  justify-content: space-between;
}
.l1-client-portal-body .l1-overview-page .l1-overview-summary__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem .875rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-summary__breakdown a.ui-status {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  gap: .375rem;
  text-decoration: none;
}
.l1-client-portal-body .l1-overview-page .l1-overview-summary__breakdown a.ui-status:hover { color: var(--l1-ink); text-decoration: underline; }

/* Quick actions reuse the command band; a second line says what each does. */
.l1-client-portal-body .l1-overview-page .l1-overview-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.l1-client-portal-body .l1-overview-page .l1-overview-actions__copy { display: grid; gap: .125rem; min-width: 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-actions__desc {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-normal);
}

/* Get started: one cell per step, divided by hairlines like the metric strip.
   Once a step is done the panel is one bar (progress on the left, the next
   step and its button on the right) with the steps behind "All steps". The
   dismiss button is pinned to the top right corner at every width. */
.l1-client-portal-body .l1-overview-page .l1-overview-start { position: relative; }
.l1-client-portal-body .l1-overview-page .l1-overview-start > .ui-panel__head { padding-right: 3rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__dismiss-form { margin: 0; position: absolute; right: .5rem; top: .5rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__meter { width: 7rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  padding: .875rem 3rem .875rem 1rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__progress { display: grid; gap: .375rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__meter-row { align-items: center; display: flex; gap: .625rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__count { color: var(--l1-ink-muted); font-size: .8125rem; white-space: nowrap; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__next {
  align-items: center;
  display: flex;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: flex-end;
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__next-copy { align-items: baseline; display: flex; flex-wrap: wrap; font-size: var(--l1-text-sm); gap: .125rem .5rem; min-width: 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__next-copy strong { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-overview-page .l1-overview-start__next-label { color: var(--l1-ink-muted); font-size: .8125rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__all > summary { padding: .5rem 1rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__all > .l1-overview-start__steps { border-top: 1px solid var(--l1-border); }
.l1-client-portal-body .l1-overview-page .l1-overview-start__dismiss {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__dismiss:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-client-portal-body .l1-overview-page .l1-overview-start__dismiss :is(svg, i[data-lucide]) { height: 1rem; width: 1rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__steps {
  background: var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__step {
  background: var(--l1-surface-1);
  display: grid;
  flex: 1 1 14rem;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: 1rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__mark {
  align-items: center;
  border: 1px solid var(--l1-border-strong);
  border-radius: 50%;
  color: var(--l1-ink-muted);
  display: inline-flex;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__mark :is(svg, i[data-lucide]) { height: .875rem; width: .875rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__step.is-next .l1-overview-start__mark {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand);
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__step.is-done .l1-overview-start__mark {
  background: var(--l1-ok-soft);
  border-color: color-mix(in srgb, var(--l1-ok) 35%, transparent);
  color: var(--l1-ok);
}
.l1-client-portal-body .l1-overview-page .l1-overview-start__copy { align-content: start; display: grid; gap: .25rem; justify-items: start; min-width: 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__title { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-overview-page .l1-overview-start__step.is-done .l1-overview-start__title { color: var(--l1-ink-muted); }
.l1-client-portal-body .l1-overview-page .l1-overview-start__text { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); }
.l1-client-portal-body .l1-overview-page .l1-overview-start__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .375rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-start__alt { color: var(--l1-brand); font-size: var(--l1-text-dense); }

/* Attention: tone lives on the icon tile, so a list of problems reads by
   severity without a row of coloured backgrounds. */
.l1-client-portal-body .l1-overview-page .l1-overview-attention__list { list-style: none; margin: 0; padding: 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__item {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: .75rem 1rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-attention__item:first-child { border-top: 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__icon {
  align-items: center;
  background: var(--l1-surface-2);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-attention__icon :is(svg, i[data-lucide]) { height: 1rem; width: 1rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__item[data-tone="danger"] .l1-overview-attention__icon { background: var(--l1-danger-soft); color: var(--l1-danger); }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__item[data-tone="warn"] .l1-overview-attention__icon { background: var(--l1-warn-soft); color: var(--l1-warn); }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__item[data-tone="info"] .l1-overview-attention__icon { background: var(--l1-info-soft); color: var(--l1-info); }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__copy { display: grid; gap: .125rem; min-width: 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__copy strong { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-overview-page .l1-overview-attention__copy span { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); overflow-wrap: anywhere; }

/* Server and application lists. */
.l1-client-portal-body .l1-overview-page .l1-overview-table td:not(.ui-table__primary) { white-space: nowrap; }
.l1-client-portal-body .l1-overview-page .l1-overview-app-mark {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand);
}
.l1-client-portal-body .l1-overview-page .l1-overview-app-mark :is(svg, i[data-lucide]) { height: .875rem; width: .875rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-list__foot {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-dense);
  gap: .5rem 1rem;
  justify-content: space-between;
}
.l1-client-portal-body .l1-overview-page .l1-overview-list__foot > span { align-items: center; display: inline-flex; gap: .5rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-list__foot :is(svg, i[data-lucide]) { height: .875rem; width: .875rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-list__foot a { color: var(--l1-brand); font-weight: var(--l1-fw-semibold); }

/* Recent activity: icon, what happened, when. */
.l1-client-portal-body .l1-overview-page .l1-overview-feed { list-style: none; margin: 0; padding: .375rem 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-feed__item {
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: .5rem 1rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-feed__icon {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: 50%;
  color: var(--l1-ink-muted);
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-feed__icon :is(svg, i[data-lucide]) { height: .8125rem; width: .8125rem; }
.l1-client-portal-body .l1-overview-page .l1-overview-feed__copy { display: grid; font-size: var(--l1-text-dense); gap: .125rem; min-width: 0; }
.l1-client-portal-body .l1-overview-page .l1-overview-feed__copy > a,
.l1-client-portal-body .l1-overview-page .l1-overview-feed__title { color: var(--l1-ink); font-weight: var(--l1-fw-medium); overflow-wrap: anywhere; text-decoration: none; }
.l1-client-portal-body .l1-overview-page .l1-overview-feed__copy > a:hover { color: var(--l1-brand); text-decoration: underline; }
.l1-client-portal-body .l1-overview-page .l1-overview-feed__meta {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  gap: .25rem .75rem;
}
.l1-client-portal-body .l1-overview-page .l1-overview-feed__meta .ui-status { font-size: var(--l1-text-xs); gap: .375rem; }

/* Phone: each server or application is two lines, name then status and
   address, instead of a labelled card per field. Also restores the title
   cell's own block layout, which the console-wide stacked-cell rule
   (display:flex, text-align:right) otherwise outranks. */
@media (max-width: 575px) {
  .l1-client-portal-body .l1-overview-page .l1-overview-table tbody tr {
    align-items: center;
    column-gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .l1-client-portal-body .l1-overview-page .l1-overview-table tbody td[data-stack="title"] {
    display: block;
    grid-column: 1 / -1;
    text-align: left;
  }
  .l1-client-portal-body .l1-overview-page .l1-overview-table tbody td[data-label]::before { content: none; }
  .l1-client-portal-body .l1-overview-page .l1-overview-table tbody td[data-label]:nth-child(2) { justify-content: flex-start; padding-left: 2.5rem; }
  .l1-client-portal-body .l1-overview-page .l1-overview-table tbody td[data-label]:nth-child(3) { justify-content: flex-end; min-width: 0; }
  .l1-client-portal-body .l1-overview-page .l1-overview-table .l1-copyable__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@container client-workspace (max-width: 36rem) {
  .l1-client-portal-body .l1-overview-page .l1-overview-actions__desc { display: none; }
  .l1-client-portal-body .l1-overview-page .l1-overview-start__step.is-done { display: none; }
  .l1-client-portal-body .l1-overview-page .l1-overview-start__next { justify-content: space-between; }
  .l1-client-portal-body .l1-overview-page .l1-overview-attention__item { grid-template-columns: auto minmax(0, 1fr); }
  .l1-client-portal-body .l1-overview-page .l1-overview-attention__item > .ui-btn { grid-column: 2; justify-self: start; }
  .l1-client-portal-body .l1-overview-page .l1-overview-summary .ui-metric { padding: .75rem; }
  .l1-client-portal-body .l1-overview-page .l1-overview-summary__money { flex-basis: 100%; }
  .l1-client-portal-body .l1-overview-page .l1-overview-table td:not(.ui-table__primary) { white-space: normal; }
}
.l1-client-portal-body .l1-client-workspace .l1-workspace-count {
  color: var(--l1-ink-muted);
  font-size: .8125rem;
  font-weight: var(--l1-fw-medium);
  margin-left: .375rem;
}
.l1-client-portal-body .l1-client-workspace .l1-resource-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--l1-brand);
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: var(--l1-radius-sm);
}
.l1-client-portal-body .l1-client-workspace .l1-resource-icon svg { width: 1.125rem; height: 1.125rem; }
.l1-instance-identity {
  align-items: flex-start;
  display: flex;
  gap: var(--l1-space-3);
  min-width: 0;
}
.l1-instance-identity__copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.l1-instance-identity__copy .ui-table__sub { font-weight: 400; line-height: 1.5; }
.l1-instance-os {
  align-items: center;
  background: #fff;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  flex: none;
  height: 1.75rem;
  justify-content: center;
  margin-top: .1rem;
  overflow: hidden;
  width: 1.75rem;
}
.l1-instance-os img {
  display: block;
  height: 1.125rem;
  object-fit: contain;
  width: 1.125rem;
}
/* Distribution logos are drawn for a light tile. In dark mode the tile takes
   the raised surface instead of staying the brightest square on the page. */
html[data-l1-theme="dark"] .l1-instance-os:not(.l1-instance-os--hosting) { background: var(--l1-surface-2); }
.l1-instance-os--hosting {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand);
}
.l1-instance-os--hosting svg,
.l1-instance-os--hosting i {
  display: block;
  height: 1rem;
  width: 1rem;
}
.l1-service-head__title-row .l1-instance-os {
  margin-top: 0;
}
.ui-row > .l1-instance-os {
  margin-top: 0;
}
.l1-client-portal-body .l1-client-workspace .l1-instance-table .ui-table__col-grow { width: 20%; }
.l1-instance-table .l1-copyable__value,
.l1-instance-table td[data-label="Plan"] .ui-table__sub { overflow-wrap: normal; white-space: nowrap; }
.l1-client-portal-body .l1-client-workspace .l1-instance-filters { align-items: end; }
/* Instances list: the 24-hour CPU line per row (app.js fetches it once the
   row is on screen), inline Console and Power, and an optional card view. */
.l1-instance-spark { align-items: center; display: inline-flex; gap: .5rem; min-width: 0; }
.l1-instance-spark__chart { flex: none; height: 1.5rem; overflow: visible; width: 4.5rem; }
.l1-instance-spark__value {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.l1-instance-spark[data-state="empty"] .l1-instance-spark__chart { display: none; }
.l1-instance-row-actions { flex-wrap: nowrap; }
.l1-instance-row-actions .ui-btn { gap: .35rem; }
@container client-workspace (max-width: 84rem) {
  .l1-instance-row-actions__label {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .l1-instance-row-actions .l1-service-menu__chevron { display: none; }
}
@media (max-width: 575px) {
  .l1-instance-row-actions .l1-instance-row-actions__label {
    clip: auto;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
  }
}
.l1-view-toggle {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  margin-left: auto;
  padding: 2px;
}
.l1-view-toggle[hidden] { display: none; }
.l1-view-toggle__btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: calc(var(--l1-radius-sm) - 2px);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2.25rem;
}
.l1-view-toggle__btn svg { height: 1rem; width: 1rem; }
.l1-view-toggle__btn:hover { color: var(--l1-ink); }
.l1-view-toggle__btn[aria-pressed="true"] { background: var(--l1-surface-3); color: var(--l1-ink); }
.l1-view-toggle__btn:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: 1px; }
.l1-instance-list[data-view="cards"] .ui-table-scroll { overflow: visible; }
.l1-client-portal-body .l1-client-page .l1-instance-list[data-view="cards"] .ui-table.l1-instance-table { display: block; min-width: 0 !important; }
.l1-instance-list[data-view="cards"] .l1-instance-table thead { display: none; }
.l1-instance-list[data-view="cards"] .l1-instance-table tbody {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  padding: var(--l1-space-4);
}
.l1-instance-list[data-view="cards"] .l1-instance-table tbody tr {
  align-content: start;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: .5rem;
  padding: var(--l1-space-4);
  position: relative;
}
.l1-client-portal-body .l1-client-page .l1-instance-list[data-view="cards"] .ui-table.l1-instance-table tbody td {
  align-items: baseline;
  background: transparent;
  border: 0;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0;
  text-align: right;
  width: auto;
}
.l1-instance-list[data-view="cards"] .l1-instance-table tbody td[data-label]::before {
  color: var(--l1-ink-muted);
  content: attr(data-label);
  flex: none;
  font-size: var(--l1-text-xs);
  font-weight: 500;
  text-align: left;
}
.l1-client-portal-body .l1-client-page .l1-instance-list[data-view="cards"] .ui-table.l1-instance-table tbody td[data-stack="title"] { display: block; padding-right: 2rem; text-align: left; }
.l1-client-portal-body .l1-client-page .l1-instance-list[data-view="cards"] .ui-table.l1-instance-table tbody td.ui-table__select { position: absolute; right: var(--l1-space-4); top: var(--l1-space-4); }
.l1-client-portal-body .l1-client-page .l1-instance-list[data-view="cards"] .ui-table.l1-instance-table tbody td[data-stack="actions"] {
  border-top: 1px solid var(--l1-border);
  justify-content: flex-start;
  margin-top: .25rem;
  padding-top: .75rem;
}
.l1-instance-list[data-view="cards"] .l1-instance-row-actions__label {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  width: auto;
}
/* Add credit: the preset amounts are radio chips. Two across on a phone and
   four from 576px, so $100 never sits alone on a second row. The checked chip
   takes the brand tint, the same cue as .l1-paas-choices; the radio itself is
   visually hidden, so focus shows on the chip. */
.l1-amount-chips {
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) {
  .l1-amount-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.l1-amount-chip {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 3rem;
  padding: var(--l1-space-2);
}
.l1-amount-chip:hover { border-color: var(--l1-brand-border); }
.l1-amount-chip:has(input:checked) {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand);
  box-shadow: inset 0 0 0 1px var(--l1-brand);
  color: var(--l1-brand-strong);
}
.l1-amount-chip:has(input:focus-visible) { box-shadow: var(--l1-focus-ring); }
/* Payment choices (saved cards, Other amount, the add-card options): a checked
   option takes the brand colour like every other selected control in the
   portal, not app.css's green accent. The brand token swaps with the theme. */
.l1-client-portal-body .l1-payment-option:has(input:checked) .l1-payment-option__label { color: var(--l1-brand); }
.l1-client-portal-body .l1-payment-option:has(input:focus-visible) { outline-color: var(--l1-brand); }
.l1-amount-chip__value {
  font-size: var(--l1-text-base);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
}
.l1-amount-chip__bonus { color: var(--l1-ok); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); }
.l1-amount-other {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-3);
  margin-top: var(--l1-space-3);
}
.l1-amount-other > .ui-input { flex: 1 1 10rem; max-width: 14rem; }

/* Billing's month picker sits in a panel head: a label and a select that
   submits on change, no tinted toolbar box around them. */
.l1-month-picker {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  margin: 0;
}
.l1-month-picker .ui-label { margin: 0; }
.l1-month-picker .ui-select { width: auto; }

/* The add-credit form (billing/_add_credit_form.html), on its page and in the
   drawer: one column with the page's form rhythm. */
.l1-add-credit,
.l1-add-credit__form {
  display: grid;
  gap: var(--l1-space-4);
}
.l1-add-credit__form .ui-field { margin: 0; }

/* Billing overview (views/client.py _billing_overview_context). Two columns
   that each stack their own cards, so no card is stretched to its neighbour's
   height: the balance card over payments, and 30 days of spend over the top
   costs, which takes the wider column because it is a table. One column when
   narrow, where the column wrappers step aside and the cards read balance,
   spending, top costs, payments. */
.l1-billing-overview {
  align-items: start;
  display: grid;
  gap: var(--l1-space-4);
  grid-template-columns: minmax(0, 1fr);
}
.l1-billing-overview__col { display: contents; }
.l1-billing-overview .ui-panel { margin: 0; min-width: 0; }
.l1-billing-overview .l1-balance-card { order: 1; }
.l1-billing-overview .l1-spend-panel { order: 2; }
.l1-billing-overview .l1-top-costs { order: 3; }
.l1-billing-overview .l1-payments-card { order: 4; }
@container client-workspace (min-width: 50rem) {
  .l1-billing-overview { grid-template-columns: minmax(19rem, 5fr) minmax(0, 7fr); }
  .l1-billing-overview__col { display: flex; flex-direction: column; gap: var(--l1-space-4); min-width: 0; }
}

.l1-balance-card__body {
  align-content: start;
  display: grid;
  gap: var(--l1-space-5);
}
.l1-billing-overview .l1-balance-card__label {
  color: var(--l1-ink-muted);
  font-size: .8125rem;
  font-weight: var(--l1-fw-medium);
  letter-spacing: 0;
  margin: 0;
}
/* Receipt dates and numbers under each payment: the 13px caption floor. */
.l1-billing-overview .l1-payments-card .ui-table__sub { font-size: .8125rem; }
.l1-billing-overview .l1-balance-card__figure {
  color: var(--l1-ink);
  font-family: var(--l1-font-head);
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: 2.5rem;
  font-weight: var(--l1-fw-bold);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: .375rem 0 .25rem;
}
.l1-billing-overview .l1-balance-card__figure[data-tone="danger"] { color: var(--l1-danger); }
.l1-billing-overview .l1-balance-card__sub { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); margin: 0; }
.l1-balance-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3) var(--l1-space-4);
}
.l1-balance-card__method {
  align-items: center;
  color: var(--l1-ink-muted);
  display: inline-flex;
  font-size: var(--l1-text-dense);
  gap: .375rem;
  text-decoration: none;
}
.l1-balance-card__method:hover { color: var(--l1-ink); text-decoration: underline; }
.l1-balance-card__method :is(svg, i[data-lucide]) { flex: none; height: 1rem; width: 1rem; }
.l1-balance-card__foot { font-size: var(--l1-text-sm); }

/* Runway: fills to a month of credit; the tick is the 7-day low-credit mark.
   Green while healthy, then the strip's own amber and red. */
.l1-runway { display: grid; gap: var(--l1-space-2); }
.l1-runway__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  justify-content: space-between;
}
.l1-runway__label { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); }
.l1-runway__value {
  color: var(--l1-ink);
  font-size: var(--l1-text-lg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
}
.l1-runway__value[data-tone="warn"] { color: var(--l1-warn); }
.l1-runway__value[data-tone="danger"] { color: var(--l1-danger); }
.l1-runway__meter {
  background: var(--l1-surface-3);
  border-radius: var(--l1-radius-pill);
  height: .625rem;
  position: relative;
}
.l1-runway__fill {
  background: var(--l1-ok);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: .625rem;
}
.l1-runway__fill[data-tone="warn"] { background: var(--l1-warn); }
.l1-runway__fill[data-tone="danger"] { background: var(--l1-danger); }
.l1-runway__tick {
  background: var(--l1-ink-muted);
  border-radius: 1px;
  bottom: -3px;
  opacity: .55;
  position: absolute;
  top: -3px;
  transform: translateX(-50%);
  width: 2px;
}
.l1-runway__scale {
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-micro);
  justify-content: space-between;
  position: relative;
}
.l1-runway__scale-tick { position: absolute; top: 0; transform: translateX(-50%); }
.l1-billing-overview .l1-runway__note { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); margin: 0; }

/* Spend chart: one stacked bar per day, sized to the data. Series colours
   come from tokens in a fixed order (servers, applications, bandwidth,
   add-ons), checked for colour-blind separation in both themes; the legend
   and the Daily figures table carry the same identity in words. */
.l1-spend-legend {
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: .5rem 1.25rem;
  list-style: none;
  margin: 0 0 var(--l1-space-4);
  padding: 0;
}
.l1-spend-legend li { align-items: center; display: inline-flex; gap: .375rem; }
.l1-spend-legend strong { color: var(--l1-ink); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
.l1-spend-swatch {
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 .625rem;
  height: .625rem;
  width: .625rem;
}
:is(.l1-spend-swatch, .l1-spend-chart__segment)[data-group="servers"] { background: var(--l1-brand); }
:is(.l1-spend-swatch, .l1-spend-chart__segment)[data-group="applications"] { background: var(--l1-accent); }
:is(.l1-spend-swatch, .l1-spend-chart__segment)[data-group="bandwidth"] { background: color-mix(in srgb, var(--l1-brand) 55%, var(--l1-ink)); }
:is(.l1-spend-swatch, .l1-spend-chart__segment)[data-group="addons"] { background: color-mix(in srgb, var(--l1-ink-muted) 65%, var(--l1-surface-1)); }
.l1-spend-chart {
  column-gap: var(--l1-space-2);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 11rem auto;
}
.l1-spend-chart__axis {
  color: var(--l1-ink-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  line-height: 1;
  margin: -.35em 0;
  text-align: end;
}
.l1-spend-chart__plot {
  background-image: linear-gradient(to bottom, var(--l1-border) 1px, transparent 1px);
  background-size: 100% 50%;
  border-bottom: 1px solid var(--l1-border-strong);
  display: flex;
  gap: 2px;
  position: relative;
}
.l1-spend-chart__day {
  align-items: flex-end;
  border-radius: 4px 4px 0 0;
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  position: relative;
}
.l1-spend-chart__day:hover { background: color-mix(in srgb, var(--l1-brand) 8%, transparent); }
.l1-spend-chart__bar {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  height: var(--bar);
  min-height: 3px;
  width: min(72%, 1.25rem);
}
.l1-spend-chart__segment { flex: 1 1 0; min-height: 2px; }
.l1-spend-chart__segment:last-child { border-radius: 4px 4px 0 0; }
.l1-spend-chart__tip {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  box-shadow: var(--l1-shadow-md);
  color: var(--l1-ink-muted);
  display: none;
  font-size: var(--l1-text-xs);
  gap: .25rem;
  left: calc(100% + 6px);
  min-width: 10rem;
  padding: .5rem .625rem;
  pointer-events: none;
  position: absolute;
  top: 0;
  white-space: nowrap;
  z-index: 2;
}
.l1-spend-chart__day[data-align="end"] .l1-spend-chart__tip { left: auto; right: calc(100% + 6px); }
.l1-spend-chart__day:hover .l1-spend-chart__tip { display: grid; }
.l1-spend-chart__tip strong { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-spend-chart__tip span { align-items: center; display: flex; gap: .375rem; }
.l1-spend-chart__tip b { color: var(--l1-ink); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); margin-left: auto; padding-left: .75rem; }
.l1-spend-chart__tip-total { border-top: 1px solid var(--l1-border); padding-top: .25rem; }
.l1-spend-chart__x {
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-micro);
  grid-column: 2;
  justify-content: space-between;
  margin-top: .375rem;
}
@container client-workspace (max-width: 36rem) {
  .l1-spend-chart { grid-template-rows: 8.5rem auto; }
  .l1-spend-chart__plot { gap: 1px; }
}

/* Top costs: each resource's share of the month as a meter beside its figure. */
.l1-top-costs__share { align-items: center; display: flex; gap: var(--l1-space-2); min-width: 7rem; }
.l1-top-costs__share .ui-meter { flex: 1 1 auto; max-width: 9rem; }
.l1-billing-overview .l1-payments-card__method {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-dense);
  gap: .375rem .625rem;
  margin: 0 0 .375rem;
}
.l1-payments-card__method :is(svg, i[data-lucide]) { color: var(--l1-ink-muted); height: 1rem; width: 1rem; }
.l1-payments-card .ui-subhead-row .l1-link-arrow { font-size: var(--l1-text-sm); }
/* The client page's section padding would otherwise inset the flush receipts
   list 16px past the section above it. */

/* Statement and receipt pages: the back link and Print line up with the
   centred document (.ui-invoice is 56rem) instead of spanning the canvas.
   Inside the client Billing menu both sit on the content column's left edge,
   at the same 56rem as every Billing document, the way forms do. */
.l1-document-head {
  align-items: center;
  margin-inline: auto;
  max-width: 56rem;
  width: 100%;
}
.l1-client-portal-body .l1-section-workspace :is(.l1-document-head, .ui-invoice) { margin-inline: 0; }
/* The way back and Print share one row on a phone too. */
.l1-client-portal-body .l1-client-page .l1-document-head { align-items: center; flex-direction: row; }
.l1-client-portal-body .l1-section-workspace .ui-invoice { box-shadow: none; max-width: 56rem; width: 100%; }
/* A statement's four totals read as the portal's stat band on screen: one
   hairline band, sentence-case labels. Print keeps the document styling. */
@media screen {
  .l1-client-portal-body .l1-client-page .ui-invoice__summary {
    background: var(--l1-border);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-md);
    gap: 1px;
    overflow: hidden;
  }
  .l1-client-portal-body .l1-client-page .ui-invoice__summary > div {
    align-content: start;
    background: var(--l1-surface-1);
    border-radius: 0;
    gap: .25rem;
    padding: .75rem 1rem;
  }
  .l1-client-portal-body .l1-client-page .ui-invoice__summary span {
    font-size: .75rem;
    font-weight: var(--l1-fw-medium);
    letter-spacing: 0;
    text-transform: none;
  }
  .l1-client-portal-body .l1-client-page .ui-invoice__summary strong { font-size: 1.25rem; letter-spacing: -.02em; }
}
/* Server Overview: the Usage card (three small live charts), then two
   independent columns. Each column stacks its own cards (no shared rows), so
   a tall Connect card never leaves a gap under Details. The left column,
   Connect and Add-ons, is a little wider. */
.l1-instance-overview-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.l1-instance-overview-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
@container client-workspace (min-width: 56rem) {
  .l1-instance-overview-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.l1-instance-kv { padding: var(--l1-space-3) var(--l1-space-4) var(--l1-space-4); }
.l1-instance-kv .ui-kv__row { grid-template-columns: 8rem minmax(0, 1fr); }
.l1-instance-card__foot { font-size: var(--l1-text-dense); }
/* Server Networking: the public address's reverse DNS hostname and its link. */
.l1-interface-rdns { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
@media (max-width: 575px) {
  .ui-table--stack .l1-interface-rdns { justify-content: flex-end; }
}
/* Server Settings: a readable form width, and Destroy set apart. */
.l1-instance-form { max-width: 44rem; }
@media (min-width: 576px) {
  .l1-client-portal-body .ui-form-grid.l1-instance-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.l1-reinstall-confirm { max-width: 32rem; }
.l1-client-portal-body .l1-client-page .l1-danger-zone { border-color: color-mix(in srgb, var(--l1-danger) 30%, var(--l1-border)); }
.l1-client-portal-body .l1-client-page .l1-danger-zone .ui-panel__title { color: var(--l1-danger); }
.l1-danger-zone .ui-actions form { display: inline-flex; margin: 0; }
/* Server usage board (billing/_vm_metrics_board.html): the Overview's first
   row and the whole Metrics page are the same tiles. Each tile draws its own
   left and top hairline and the grid sits one pixel up and left, so the first
   row tucks under the panel head and the first column under the panel edge:
   any number of rows and columns gets clean dividers. */
.l1-live-usage__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -1px 0 0 -1px; }
.l1-live-usage__tile {
  align-content: start;
  box-shadow: inset 1px 0 0 var(--l1-border), inset 0 1px 0 var(--l1-border);
  display: grid;
  gap: .375rem;
  min-width: 0;
  padding: .875rem 1rem 1rem;
}
.l1-live-usage__none { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); letter-spacing: 0; }
.l1-live-usage--board .l1-live-usage__chart { height: 4.5rem; }
.l1-live-usage__meter { align-items: flex-end; display: flex; height: 3rem; padding-bottom: .25rem; }
.l1-live-usage--board .l1-live-usage__meter { height: 4.5rem; }
.l1-live-usage__meter > .ui-meter { flex: 1; }
.l1-live-usage__empty { align-content: center; grid-column: span 2; justify-items: center; padding: var(--l1-space-6) var(--l1-space-4); text-align: center; }
.l1-live-usage__empty > p { margin: 0; }
.l1-live-usage__head { align-items: baseline; display: flex; gap: .5rem; justify-content: space-between; }
.l1-live-usage__label { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); }
.l1-live-usage__value {
  color: var(--l1-ink);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.l1-live-usage__chart { display: block; height: 3rem; overflow: visible; width: 100%; }
.l1-live-usage__chart.is-empty { background: linear-gradient(var(--l1-border), var(--l1-border)) left bottom / 100% 1px no-repeat; }
.l1-live-usage__area { fill: var(--l1-brand); fill-opacity: .1; stroke: none; }
.l1-live-usage__line--out { stroke-dasharray: 3 2; stroke-opacity: .6; }
.l1-live-usage__meta,
.l1-live-usage__stats {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-variant-numeric: tabular-nums;
  margin: 0;
  min-height: 1.25em;
}
.l1-live-usage__tile[data-l1-spark-active] > .l1-live-usage__meta:not(.l1-spark-readout) { display: none; }
.l1-spark-readout { color: var(--l1-ink); }
.l1-spark-cursor { stroke: var(--l1-border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.l1-live-usage__legend { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.l1-live-usage__key::before {
  background: var(--l1-brand);
  content: "";
  display: inline-block;
  height: 2px;
  margin-right: .35rem;
  vertical-align: middle;
  width: .75rem;
}
.l1-live-usage__key--out::before { background: repeating-linear-gradient(90deg, var(--l1-brand) 0 3px, transparent 3px 5px); opacity: .6; }
@container client-workspace (max-width: 40rem) {
  .l1-live-usage__grid { grid-template-columns: minmax(0, 1fr); }
  /* Overview row: figure left, chart right. The Metrics board keeps each
     tile stacked, since its tiles carry a second line of figures. */
  .l1-live-usage:not(.l1-live-usage--board) .l1-live-usage__tile { align-items: center; column-gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .l1-live-usage:not(.l1-live-usage--board) .l1-live-usage__tile > * { grid-column: 1; }
  .l1-live-usage:not(.l1-live-usage--board) .l1-live-usage__tile > .l1-live-usage__head { align-items: flex-start; flex-direction: column; gap: 0; }
  .l1-live-usage:not(.l1-live-usage--board) .l1-live-usage__tile > .l1-live-usage__chart { grid-column: 2; grid-row: 1 / span 2; height: 2.5rem; }
  .l1-live-usage--board .l1-live-usage__chart,
  .l1-live-usage--board .l1-live-usage__meter { height: 3.5rem; }
  .l1-live-usage__grid > .l1-live-usage__empty { grid-column: auto; }
  .l1-live-usage__range { width: 100%; }
  .l1-live-usage__range > .l1-segmented__option { flex: 1; justify-content: center; padding: 0 var(--l1-space-2); white-space: nowrap; }
  .l1-instance-kv .ui-kv__row { gap: .125rem; grid-template-columns: minmax(0, 1fr); }
}
@container client-workspace (min-width: 58rem) {
  .l1-client-portal-body .l1-client-workspace .l1-client-dashboard:has(.l1-client-dashboard__main) {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}
@media (max-width: 767px) {
  .l1-client-portal-body .l1-client-workspace .l1-instance-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .l1-instance-filters .ui-filter-field { min-width: 0; }
  .l1-instance-filters .ui-filter-field--grow,
  .l1-instance-filters .ui-toolbar__count,
  .l1-instance-filters [data-l1-filter-submit] { grid-column: 1 / -1; }
  .l1-instance-filters .ui-btn { min-height: 2.75rem; }
  .l1-instance-filters .l1-view-toggle { display: none; }
}
/* With script, the Type and Status selects apply themselves (app.js), so the
   Filter button is only the no-script fallback. */
.l1-instance-filters[data-l1-filter-ready] [data-l1-filter-submit] { display: none; }

/* Referral pages share the client workspace, with the link and the available
   reward leading each task. All monetary values still come from the views. */
.l1-client-portal-body .l1-referral-workspace :is(.l1-referral-programs, .l1-referral-overview, .l1-referral-earnings, .l1-referral-records) {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-programs {
  /* Two alternatives with a literal "or" between them: stacked on a phone,
     side by side once both cards fit. */
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}
.l1-client-portal-body .l1-referral-workspace :is(.l1-referral-programs, .l1-referral-overview, .l1-referral-earnings, .l1-referral-records) > * { min-width: 0; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-or {
  align-items: center;
  display: grid;
  justify-items: center;
  margin: 0;
  min-height: 2.5rem;
  position: relative;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-or::before {
  background: var(--l1-border);
  content: "";
  height: 1px;
  inset-inline: 12%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-or > span {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  display: grid;
  font-size: .6875rem;
  font-weight: var(--l1-fw-semibold);
  height: 2.5rem;
  letter-spacing: .12em;
  min-width: 2.5rem;
  padding: 0 .75rem;
  place-items: center;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-program {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--l1-surface-1);
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-program.is-current {
  background: color-mix(in srgb, var(--l1-brand-soft) 45%, var(--l1-surface-1));
  border-color: var(--l1-brand-border);
}
/* The card a dashboard link asked for, before its program is joined. */
.l1-client-portal-body .l1-referral-workspace .l1-referral-program.is-highlighted {
  border-color: var(--l1-brand);
  box-shadow: 0 0 0 1px var(--l1-brand);
  scroll-margin-top: calc(var(--l1-topbar-h) + 1rem);
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-program__intro { padding: 1rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-program__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-program__kind {
  color: var(--l1-ink-muted);
  font-size: .75rem;
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .06em;
  margin-right: auto;
  text-transform: uppercase;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-program__description {
  color: var(--l1-ink-muted);
  font-size: .875rem;
  line-height: 1.6;
  margin: .5rem 0 0;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-program__reward {
  display: grid;
  gap: .25rem;
  font-size: 1.5rem;
  font-weight: var(--l1-fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: .75rem 0 0;
  overflow-wrap: anywhere;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-program__reward > span {
  color: var(--l1-ink-muted);
  font-size: .8125rem;
  font-weight: var(--l1-fw-normal);
  letter-spacing: 0;
  line-height: 1.6;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-terms {
  display: grid;
  align-content: start;
  gap: .75rem;
  margin: 0;
  padding: 1rem;
  border-top: 1px solid var(--l1-border);
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-terms dt { font-size: .8125rem; font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-referral-workspace .l1-referral-terms dd { color: var(--l1-ink-muted); font-size: .875rem; line-height: 1.6; margin: .25rem 0 0; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-program__action { border-top: 1px solid var(--l1-border); padding: 1rem; }
.l1-client-portal-body .l1-referral-workspace :is(.l1-referral-join, .l1-referral-payout-details) { display: grid; gap: 1rem; }
.l1-client-portal-body .l1-referral-workspace :is(.l1-referral-join, .l1-referral-payout-details) > .ui-btn { justify-self: start; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 1rem;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-steps__number { color: var(--l1-brand); font-size: .8125rem; font-weight: var(--l1-fw-semibold); font-variant-numeric: tabular-nums; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-steps h3 { font-size: .9375rem; font-weight: var(--l1-fw-semibold); margin: .625rem 0 .5rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-steps p { color: var(--l1-ink-muted); font-size: .875rem; line-height: 1.6; margin: 0; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-share { display: grid; gap: .75rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-share__control { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-share__control > .ui-input { flex: 1 1 16rem; min-width: 0; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-share__control > .ui-btn { flex: 0 0 auto; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-reward-note {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  border-top: 1px solid var(--l1-border);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}
.l1-client-portal-body .l1-referral-workspace .l1-referral-reward-note > .l1-resource-icon { flex: 0 0 2rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-reward-note p { color: var(--l1-ink-muted); font-size: .875rem; line-height: 1.7; margin: 0; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-reward-note strong { color: var(--l1-ink); }
.l1-client-portal-body .l1-referral-workspace .l1-referral-summary { display: grid; gap: 1.25rem; margin: 0 0 1rem; padding: 0; background: transparent; border: 0; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-summary dd { color: var(--l1-ink); font-size: 1.5rem; font-weight: var(--l1-fw-semibold); letter-spacing: -.035em; margin-top: .375rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-earning-actions { display: grid; gap: 1rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-earning-action + .l1-referral-earning-action { border-top: 1px solid var(--l1-border); padding-top: 1rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-earning-action > .ui-hint { margin-block: .5rem 1rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-amount-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .625rem; }
.l1-client-portal-body .l1-referral-workspace .l1-referral-amount-form > .ui-field { flex: 1 1 10rem; min-width: 0; }
.l1-client-portal-body .l1-referral-workspace :is(.ui-btn, .ui-hint, .l1-referral-terms dd) { overflow-wrap: anywhere; }
@container client-workspace (min-width: 44rem) {
  .l1-client-portal-body .l1-referral-workspace .l1-referral-programs {
    grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
    gap: .5rem;
  }
  .l1-client-portal-body .l1-referral-workspace .l1-referral-or::before {
    height: auto;
    inset-block: 10%;
    inset-inline: auto;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    width: 1px;
  }
}
@container client-workspace (min-width: 52rem) {
  .l1-client-portal-body .l1-referral-workspace .l1-referral-overview { grid-template-columns: minmax(0, 1fr) 17.5rem; align-items: start; }
  .l1-client-portal-body .l1-referral-workspace .l1-referral-earnings { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}
@container client-workspace (max-width: 28rem) {
  .l1-client-portal-body .l1-referral-workspace .l1-referral-share__control > .ui-btn { flex-grow: 1; }
  .l1-client-portal-body .l1-referral-workspace :is(.l1-referral-program__intro, .l1-referral-terms, .l1-referral-program__action, .l1-referral-steps) { padding: 1rem; }
  .l1-client-portal-body .l1-referral-workspace .ui-metrics > * { flex-basis: 8rem; }
}

/* Tenure rewards: standing and the deposit ladder. Bandwidth gifts from
   apps.billing.rewards render on the Silver and Platinum rungs. */
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-ladder {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  min-width: 0;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-ladder > * { min-width: 0; }
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--l1-surface-1);
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier.is-current {
  border-color: var(--l1-brand-border);
  background: color-mix(in srgb, var(--l1-brand-soft) 45%, var(--l1-surface-1));
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier__intro { padding: 1rem; }
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier__reward {
  color: var(--l1-ink);
  display: grid;
  gap: .25rem;
  font-size: 1.5rem;
  font-weight: var(--l1-fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: .75rem 0 0;
  overflow-wrap: anywhere;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier__reward > span {
  color: var(--l1-ink-muted);
  font-size: .8125rem;
  font-weight: var(--l1-fw-normal);
  letter-spacing: 0;
  line-height: 1.6;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier__terms {
  display: grid;
  align-content: start;
  gap: .75rem;
  margin: 0;
  padding: 1rem;
  border-top: 1px solid var(--l1-border);
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier__terms dt { font-size: .8125rem; font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier__terms dd { color: var(--l1-ink-muted); font-size: .875rem; line-height: 1.6; margin: .25rem 0 0; }
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-progress {
  display: grid;
  gap: 1rem;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-progress__meter {
  display: grid;
  gap: .5rem;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-progress__meter .ui-meter { height: .5rem; }
/* The tier the customer is in leads the page, named with what comes next. */
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-hero { border-color: var(--l1-brand-border); }
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-hero__label { color: var(--l1-ink-muted); display: block; font-size: .8125rem; font-weight: var(--l1-fw-medium); }
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-hero__title { color: var(--l1-ink); font-size: 1.375rem; font-weight: var(--l1-fw-semibold); letter-spacing: -.02em; line-height: 1.25; margin: .125rem 0 .375rem; }
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier .l1-resource-icon[data-tone="warn"] {
  color: var(--l1-warn);
  background: var(--l1-warn-soft);
  border-color: color-mix(in srgb, var(--l1-warn) 35%, transparent);
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-tier .l1-resource-icon[data-tone="info"] {
  color: var(--l1-info);
  background: var(--l1-info-soft);
  border-color: color-mix(in srgb, var(--l1-info) 35%, transparent);
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-ladder-note {
  margin: 0;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 1rem;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-steps__number {
  color: var(--l1-brand);
  font-size: .8125rem;
  font-weight: var(--l1-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-steps h3 {
  font-size: .9375rem;
  font-weight: var(--l1-fw-semibold);
  margin: .625rem 0 .5rem;
}
.l1-client-portal-body .l1-rewards-workspace .l1-rewards-steps p {
  color: var(--l1-ink-muted);
  font-size: .875rem;
  line-height: 1.6;
  margin: 0;
}
.l1-client-portal-body .l1-rewards-workspace :is(.l1-rewards-tier__terms dd, .ui-hint) { overflow-wrap: anywhere; }
@container client-workspace (max-width: 28rem) {
  .l1-client-portal-body .l1-rewards-workspace :is(.l1-rewards-tier__intro, .l1-rewards-tier__terms, .l1-rewards-steps) { padding: 1rem; }
  .l1-client-portal-body .l1-rewards-workspace .ui-metrics > * { flex-basis: 8rem; }
}

.l1-instance-facts__hint {
  display: block;
  margin-top: .125rem;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: 400;
}

/* The secret stays outside summary so native disclosure protects it even
   when CSS is unavailable. Fit the disclosure to its text so the floated
   eye stays beside the revealed value instead of the detail column's edge. */
.l1-instance-password {
  display: flow-root;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}
.l1-instance-password > summary {
  display: flex;
  align-items: center;
  gap: var(--l1-space-2);
  width: fit-content;
  max-width: 100%;
  min-height: 2rem;
  padding: 0 var(--l1-space-1);
  border-radius: var(--l1-radius-sm);
  cursor: pointer;
  list-style: none;
}
.l1-instance-password > summary::-webkit-details-marker { display: none; }
.l1-instance-password > summary:hover { background: var(--l1-surface-2); }
.l1-instance-password > summary:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: 2px; }
.l1-instance-password code {
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--l1-ink);
  font: inherit;
  font-family: var(--l1-font-data);
  overflow-wrap: anywhere;
}
.l1-instance-password svg { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--l1-ink-muted); }
.l1-instance-password[open] > summary { float: right; }
.l1-instance-password .l1-instance-password__value {
  display: block;
  min-height: 2rem;
  margin-right: 2rem;
  padding-top: .4rem;
}
.l1-instance-password .l1-instance-password__hide { display: none; }
.l1-instance-password[open] .l1-instance-password__hide { display: inline; }
.l1-instance-password[open] .l1-instance-password__mask,
.l1-instance-password[open] .l1-instance-password__show { display: none; }
@media (pointer: coarse) {
  .l1-instance-password > summary { min-height: 2.75rem; }
  .l1-instance-password .l1-instance-password__value { min-height: 2.75rem; padding-top: .75rem; }
}
.l1-instance-password-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1) var(--l1-space-3);
}
.l1-instance-password-row > .ui-table__muted { line-height: 2rem; }
.l1-instance-password-row > .l1-copyable__btn { margin-top: .25rem; }
.l1-instance-password-row__change {
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-medium);
  line-height: 2rem;
}

.l1-instance-section__empty {
  margin: 0;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
}
.l1-instance-iso-attach {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--l1-space-3);
}
.l1-instance-iso-attach .ui-filter-field { min-width: 12rem; }

.l1-instance-recommendations { display: grid; }
.l1-instance-recommendation {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--l1-space-4);
  padding-block: var(--l1-space-4);
}
.l1-instance-recommendation:first-child { padding-top: 0; }
.l1-instance-recommendation:last-child { padding-bottom: 0; }
.l1-instance-recommendation + .l1-instance-recommendation { border-top: 1px solid var(--l1-border); }
.l1-instance-recommendation__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  background: var(--l1-surface-1);
  color: var(--l1-ink-muted);
}
.l1-instance-recommendation__icon svg { width: 1.125rem; height: 1.125rem; }
.l1-instance-recommendation__copy { min-width: 0; }
.l1-instance-recommendation__copy h3 {
  margin: 0;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  line-height: 1.5;
}
.l1-instance-recommendation__copy p {
  margin: var(--l1-space-1) 0 0;
  max-width: 62ch;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  line-height: 1.6;
}
.l1-instance-recommendation__price {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem var(--l1-space-2);
}
.l1-instance-recommendation__price strong { color: var(--l1-ink); }
.l1-instance-recommendation__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--l1-space-2);
  max-width: 10rem;
}
.l1-instance-recommendation__availability {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  text-align: right;
}

.l1-instance-activity { list-style: none; margin: 0; padding: 0; }
.l1-instance-activity__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--l1-space-3);
  padding-block: var(--l1-space-3);
}
.l1-instance-activity__item:first-child { padding-top: 0; }
.l1-instance-activity__item + .l1-instance-activity__item { border-top: 1px solid var(--l1-border); }
.l1-instance-activity__icon {
  display: grid;
  place-items: center;
  height: 1.75rem;
  border-radius: var(--l1-radius-sm);
  background: var(--l1-surface-2);
  color: var(--l1-ink-muted);
}
.l1-instance-activity__icon svg { width: 1rem; height: 1rem; }
.l1-instance-activity__copy { min-width: 0; font-size: var(--l1-text-dense); }
.l1-instance-activity__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem var(--l1-space-3);
  margin-top: .25rem;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  overflow-wrap: anywhere;
}
.l1-instance-activity__copy .ui-table__error { margin: var(--l1-space-2) 0 0; }
.l1-instance-activity__more { border-top: 1px solid var(--l1-border); }
.l1-instance-activity__more > summary {
  color: var(--l1-ink-muted);
  cursor: pointer;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-medium);
  padding-block: var(--l1-space-3);
}
.l1-instance-activity__more > summary:hover { color: var(--l1-ink); }
.l1-instance-activity__more[open] > summary { padding-bottom: 0; }
.l1-instance-activity__more .l1-instance-activity__item:first-child { padding-top: var(--l1-space-3); }

/* Upgrade options: the radio sits with the plan name, the price leads with
   the listed monthly figure and its difference, the hourly rate below. */
.l1-upgrade-option {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--l1-space-2);
}
.l1-upgrade-price { display: inline-grid; justify-items: end; }
/* Specs repeat the vCPU, Memory and Storage columns, so they show only on a
   phone, where those columns are dropped. The current plan leads the table as
   a quiet row that the deltas are measured from. */
.l1-upgrade-table .l1-upgrade-option__specs { display: none; }
.l1-upgrade-option--current { cursor: default; }
.l1-upgrade-table tr.l1-upgrade-table__current { background: var(--l1-surface-2); }
@media (max-width: 575px) {
  .l1-upgrade-table .l1-upgrade-option__specs { display: block; font-weight: 400; }
  .l1-upgrade-table td[data-stack="title"] { padding-bottom: var(--l1-space-1); }
}
.l1-upgrade-details { margin-inline: calc(-1 * var(--l1-space-4)); }
.l1-upgrade-details > .ui-hint { margin: 0; padding: 0 var(--l1-space-4) var(--l1-space-3); }

/* Firewall rules: numbered in evaluation order. On a phone each rule reads as
   one sentence ("1. Allow inbound TCP 22 from any address") instead of eight
   label rows. */
.l1-firewall-rules__summary { display: none; }
.l1-firewall-rules-head .ui-empty { margin-top: var(--l1-space-3); }
@media (max-width: 575px) {
  .l1-firewall-rules__num { display: none; }
  .l1-firewall-rules__summary { display: block; text-align: left; }
  .l1-firewall-rules__summary .ui-table__sub { display: block; }
}

/* ---------- Customer firewall (server Firewall tab, client firewall group) ----------
   billing/client_service_firewall.html and _client_firewall_group_detail.html,
   built from _firewall_status.html, _firewall_rules_table.html and the two
   dialogs. A status strip (posture, default policy, rules, applied state),
   then inbound and outbound rule tables in the order they are checked, each
   ending in its default policy as "Everything else". On a phone every rule is
   one card: number, type and action on the first line, protocol, port and
   address below. Tokens only, so dark mode follows. */
.l1-fw { display: grid; gap: var(--l1-space-4); min-width: 0; }
.l1-fw .ui-notice { margin: 0; }
.l1-fw-notice { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); justify-content: space-between; }
.l1-fw-notice > .ui-notice__copy { flex: 1 1 18rem; }

.l1-fw-status__head {
  align-items: flex-start;
  display: flex;
  gap: var(--l1-space-3);
  padding: var(--l1-space-4);
}
.l1-fw-status__icon {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  color: var(--l1-ink-muted);
  display: grid;
  flex: none;
  height: 2.5rem;
  place-items: center;
  width: 2.5rem;
}
.l1-fw-status__icon svg { height: 1.25rem; width: 1.25rem; }
.l1-fw-status__icon[data-tone="ok"] { background: var(--l1-ok-soft); border-color: color-mix(in srgb, var(--l1-ok) 30%, transparent); color: var(--l1-ok); }
.l1-fw-status__icon[data-tone="warn"] { background: var(--l1-warn-soft); border-color: color-mix(in srgb, var(--l1-warn) 30%, transparent); color: var(--l1-warn); }
.l1-fw-status__icon[data-tone="danger"] { background: var(--l1-danger-soft); border-color: color-mix(in srgb, var(--l1-danger) 30%, transparent); color: var(--l1-danger); }
.l1-fw-status__copy { flex: 1 1 0; min-width: 0; }
.l1-fw-status__title { color: var(--l1-ink); font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); letter-spacing: -.01em; line-height: 1.3; margin: 0; }
.l1-fw-status__copy .ui-panel__desc { margin-top: 2px; }
.l1-fw-status__action { flex: none; }
.l1-fw-status__facts {
  border-top: 1px solid var(--l1-border);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.l1-fw-status__fact { display: grid; align-content: start; gap: .25rem; min-width: 0; padding: .75rem 1rem .875rem; }
.l1-fw-status__fact + .l1-fw-status__fact { border-left: 1px solid var(--l1-border); }
.l1-fw-status__fact dt { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-medium); }
.l1-fw-status__fact dd { align-items: baseline; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; min-width: 0; }
.l1-fw-status__value { color: var(--l1-ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); letter-spacing: -.02em; line-height: 1.2; }
.l1-fw-status__of { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); }
.l1-fw-status__meta { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); }
.l1-fw-status__policies { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); gap: .375rem .875rem; padding-top: .125rem; }
.l1-fw-status__policies > span { align-items: center; display: inline-flex; gap: .375rem; }

:is(.l1-fw, .l1-fw-page) .l1-workspace-count { color: var(--l1-ink-muted); font-size: .8125rem; font-weight: var(--l1-fw-medium); margin-left: .375rem; }
.l1-fw-rules__add { flex: none; }
@media (min-width: 576px) {
  /* Both directions share one column grid, so the two tables line up. */
  .l1-fw-table { table-layout: fixed; width: 100%; }
  .l1-fw-table th:nth-child(1) { width: 3rem; }
  .l1-fw-table th:nth-child(2) { width: 17%; }
  .l1-fw-table th:nth-child(3) { width: 8%; }
  .l1-fw-table th:nth-child(4) { width: 12%; }
  .l1-fw-table th:nth-child(5) { width: 19%; }
  .l1-fw-table th:nth-child(6) { width: 9%; }
  .l1-fw-table th:nth-child(8) { width: 7.5rem; }
  .l1-fw-table td.ui-table__mono { white-space: nowrap; }
}
.l1-fw-table .ui-table__num { width: 2.5rem; }
.l1-fw-table .l1-fw-table__lead { min-width: 9rem; }
.l1-fw-table__title { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.l1-fw-table__type { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-fw-table .ui-table__sub { font-weight: var(--l1-fw-normal); }
.l1-fw-table td.l1-fw-table__pos,
.l1-fw-table td.l1-fw-table__note { color: var(--l1-ink-muted); }
.l1-fw-table .l1-fw-table__pos-inline,
.l1-fw-table .l1-fw-table__phone { display: none; }
.l1-fw-table .l1-fw-table__comment { overflow-wrap: break-word; }
.l1-fw-addr { font-size: var(--l1-text-xs); }
code.l1-fw-addr { color: var(--l1-ink); font-family: var(--l1-font-data); font-weight: var(--l1-fw-medium); overflow-wrap: anywhere; white-space: normal; }
.l1-fw-addr svg { height: .75rem; width: .75rem; }
.l1-fw-table__default > td { background: var(--l1-surface-2); border-top: 1px solid var(--l1-border-strong); }
.l1-fw-table__default .ui-table__num { color: var(--l1-ink-muted); }
.l1-fw-table__default .ui-table__num svg { height: 1rem; width: 1rem; }
.l1-fw-table__empty > td { padding: 0; }
.l1-fw-table__empty .ui-empty { padding-block: var(--l1-space-5); }
.l1-fw-table__none { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); margin: 0; padding: .75rem var(--l1-space-4); }
.l1-fw-presets { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-fw-table__empty .l1-fw-presets { justify-content: center; }

.l1-fw-groups__list { display: grid; list-style: none; margin: 0; padding: 0; }
.l1-fw-groups__item { align-items: center; border-top: 1px solid var(--l1-border); display: flex; gap: var(--l1-space-3); padding: .625rem var(--l1-space-4); }
.l1-fw-groups__pos { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-variant-numeric: tabular-nums; min-width: 1rem; }
.l1-fw-groups__name { flex: 1 1 auto; font-weight: var(--l1-fw-semibold); min-width: 0; overflow-wrap: anywhere; }
.l1-fw-groups__meta { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); white-space: nowrap; }
.l1-fw-combine > p { margin: 0; padding: 0 var(--l1-space-4) var(--l1-space-3); }

/* Default policy choices: the checked option carries the selected look. */
.l1-fw-choices { border: 0; margin: 0; min-width: 0; padding: 0; }
.l1-fw-choice { align-items: flex-start; flex-wrap: nowrap; justify-content: flex-start; }
.l1-fw-choice > .ui-check { margin-top: .2rem; }
.l1-fw-choice:has(input:checked) { background: var(--l1-selected-bg, var(--l1-surface-2)); border-color: var(--l1-brand-border); }
.l1-fw-choice:has(input:focus-visible) { box-shadow: var(--l1-focus-ring); }
.l1-fw-choice .l1-choice__copy { display: grid; gap: 2px; }

/* Add rule dialog: wider than a confirm, two columns where they fit. */
.l1-dialog.l1-fw-dialog { max-width: min(40rem, calc(100vw - 32px)); }
.l1-fw-dialog .l1-dialog__body { gap: var(--l1-space-4); }
.l1-fw-dialog__row { display: grid; gap: var(--l1-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-fw-dialog__group { border: 0; display: grid; gap: var(--l1-space-2); margin: 0; min-width: 0; padding: 0; }
.l1-fw-dialog__group > legend { margin-bottom: var(--l1-space-2); padding: 0; }
.l1-fw-dialog__hint { margin-top: calc(-1 * var(--l1-space-2)); }
.l1-fw-seg { align-self: start; flex-wrap: wrap; justify-self: start; }
.l1-fw-seg .l1-segmented__option { min-height: 2rem; }
.l1-fw-seg .l1-segmented__option:has(input:checked) {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
  font-weight: var(--l1-fw-semibold);
}
.l1-fw-seg .l1-segmented__option:has(input:focus-visible) { box-shadow: var(--l1-focus-ring); }
.l1-fw-preset {
  align-items: baseline;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-medium);
  gap: .375rem;
  padding: .25rem .75rem;
}
.l1-fw-preset > span { color: var(--l1-ink-muted); font-family: var(--l1-font-data); font-size: var(--l1-text-xs); }
.l1-fw-preset:hover { border-color: var(--l1-border-strong); }
.l1-fw-preset:focus-visible { box-shadow: var(--l1-focus-ring); outline: 0; }
.l1-fw-preset[aria-pressed="true"] { background: var(--l1-brand-soft); border-color: var(--l1-brand-border); color: var(--l1-brand-strong); }
.l1-fw-preset[aria-pressed="true"] > span { color: inherit; }
.l1-fw-address { align-content: start; display: grid; gap: var(--l1-space-2); min-width: 0; }
.l1-fw-address > .ui-hint { display: block; }
.l1-fw-address [data-l1-fw-hint][hidden],
.l1-fw-address__field[hidden] { display: none; }
.l1-fw-address__field > .ui-input { width: 100%; }

@container client-workspace (max-width: 44rem) {
  .l1-fw-status__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-fw-status__fact:nth-child(3) { border-left: 0; }
  .l1-fw-status__fact:nth-child(n + 3) { border-top: 1px solid var(--l1-border); }
}
@media (max-width: 575px) {
  .l1-fw-status__head { flex-wrap: wrap; padding: var(--l1-space-3) var(--l1-space-4); }
  .l1-fw-status__action { flex: 1 1 100%; justify-content: center; }
  .l1-fw-table .l1-fw-table__pos-inline {
    background: var(--l1-surface-2);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-sm);
    color: var(--l1-ink-muted);
    display: inline-grid;
    font-size: var(--l1-text-xs);
    font-variant-numeric: tabular-nums;
    min-width: 1.5rem;
    padding: 0 .25rem;
    place-items: center;
  }
  .l1-fw-table .l1-fw-table__phone { display: inline-flex; }
  .l1-fw-table span.ui-table__sub.l1-fw-table__phone { display: block; }
  .l1-fw-table__title > .ui-chip { margin-left: auto; }
  .l1-fw-table .l1-row-action--icon { padding-inline: var(--l1-space-2); width: auto; }
  .l1-fw-table .l1-fw-table__comment { max-width: none; }
  .l1-fw-table__default > td { border-top: 0; }
  .ui-table--stack.l1-fw-table tbody tr.l1-fw-table__default { background: var(--l1-surface-2); border-top: 1px solid var(--l1-border-strong); }
  .ui-table--stack.l1-fw-table tbody tr.l1-fw-table__empty { padding: 0; }
  .l1-fw-dialog__row { grid-template-columns: minmax(0, 1fr); }
  .l1-dialog.l1-fw-dialog { border-radius: var(--l1-radius-md) var(--l1-radius-md) 0 0; margin: auto 0 0; max-height: 94dvh; max-width: 100vw; overflow-y: auto; }
}

/* Usage history range pickers wrap on a phone instead of scrolling a row of
   ranges off screen with nothing to say there are more. */
@media (max-width: 767px) {
  .l1-client-portal-body .l1-client-page .ui-tabs.l1-usage-range {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Backup schedule line on a server's Backups tab: wraps on a phone. */
.l1-backup-schedule {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-3);
}
.l1-backup-schedule__text {
  font-size: var(--l1-text-dense);
  min-width: 0;
  overflow-wrap: anywhere;
}
.l1-backup-schedule__error,
.l1-backup-schedule__note { flex-basis: 100%; margin: 0; }

@media (max-width: 575px) {
  .l1-instance-recommendation { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--l1-space-3); }
  .l1-instance-recommendation__action { grid-column: 2; align-items: flex-start; max-width: none; }
  .l1-instance-recommendation__availability { text-align: left; }
  .l1-instance-activity__item { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .l1-instance-activity__item > .ui-status { grid-column: 2; justify-self: start; }
}

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   Console 3.0 — control-deck chrome
   --------------------------------------------------------------------------
   Last l1 layer, so these pins beat app.css without a new stylesheet.
   html[data-l1-theme] is on every page and is here for specificity against
   the dark-mode element+class stacks in app.css. See Workspace "Stylesheets: components, shell and the Console 3.0 look".
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

html[data-l1-theme] .l1-console-body .l1-console-sidebar .sidebar-inner {
  background: transparent;
  gap: .5rem;
  padding: .75rem 0;
  position: relative;
  z-index: 1;
}

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

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

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

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

.l1-console-sidebar .sidebar-top {
  flex: 0 0 auto;
}

.l1-sidebar-brand {
  align-items: center;
  display: flex;
  gap: .5rem;
  padding: .25rem .875rem .5rem;
}

.l1-sidebar-brand__mark-frame {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: inline-flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  width: 32px;
}

.l1-sidebar-brand__mark {
  display: block;
  filter: none;
  height: 32px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  width: 32px;
}

/* Knock the mark out to white on the light theme's rail.
   That rail is --l1-rail-bg #0d2b52, a navy sitting about 23 points of
   luminance from the mark's own #153990 — close enough that the two merge and
   the logo disappears. Flattening it to a white silhouette is the point here:
   the gaps between the three plates carry the stack on their own, so nothing
   is lost by dropping the gradient.
   This is the same filter that was removed from the lockups, where it was
   wrong: there it flattened a mark that needed to stay blue. The dark rail is
   #191b1f, far enough from the blue that the artwork reads as drawn, so it is
   left alone. */
html[data-l1-theme="light"] .l1-sidebar-brand__mark {
  filter: brightness(0) invert(1);
}

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

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

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

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

.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav, .nav),
.l1-console-v3 .l1-console-sidebar .sidebar-section {
  gap: 0;
  padding-inline: .5rem;
}

/* Shared navigation rows: compact. The admin rail is text-only; the client
   rail leads each row with its glyph. */
.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a) {
  border-radius: var(--l1-radius-sm);
  color: var(--l1-rail-ink-muted);
  font-size: .875rem;
  font-weight: 500;
  gap: .375rem;
  line-height: 1.25;
  min-height: 2rem;
  padding: .3125rem .625rem;
  position: relative;
  transition: background var(--l1-transition), border-color var(--l1-transition), color var(--l1-transition);
  width: 100%;
}

.l1-admin-console-body .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a) :is(svg, i[data-lucide]) {
  display: none;
}

.l1-client-portal-body .l1-console-sidebar .l1-console-nav .nav-link {
  gap: .625rem;
}

.l1-client-portal-body .l1-console-sidebar .l1-console-nav .nav-link > :is(svg, i[data-lucide]) {
  flex: none;
  height: 1rem;
  opacity: .8;
  width: 1rem;
}

.l1-client-portal-body .l1-console-sidebar .l1-console-nav .nav-link:is(.is-active, [aria-current="page"]) > :is(svg, i[data-lucide]) {
  opacity: 1;
}

/* The lock on a row the organization owner manages trails the label. */
.l1-client-portal-body .l1-console-sidebar .l1-console-nav .nav-link[aria-disabled="true"] > :is(svg, i[data-lucide]):last-child {
  height: .875rem;
  margin-left: auto;
  width: .875rem;
}

html[data-l1-theme] .l1-console-body .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a):not(.is-active, .is-current, [aria-current="page"], .l1-nav-cta):hover {
  background: var(--l1-rail-hover);
  border-color: transparent;
  color: var(--l1-rail-ink);
}

.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a):is(.is-active, [aria-current="page"]):not(.l1-nav-cta)::before {
  background: var(--l1-rail-active-border);
  border-radius: 2px;
  content: "";
  display: block;
  inset-block: .5rem;
  inset-inline-start: 0;
  position: absolute;
  width: 2px;
}

/* A real outline survives the active row's shadow reset and remains inside
   the scrolling rail, including on the selected link. */
html[data-l1-theme] .l1-console-body .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a):focus-visible {
  outline: 2px solid var(--l1-rail-accent);
  outline-offset: -2px;
}

.l1-console-v3 .l1-console-sidebar .sidebar-label {
  padding-inline: .625rem;
}

/* Navigation counts keep one shape in every state; only actionable counts
   use semantic colour. The shared component lives with the rail styles. */
.l1-sidebar-badge {
  align-items: center;
  background: var(--l1-rail-hover);
  border: 1px solid var(--l1-rail-line);
  border-radius: 6px;
  color: var(--l1-rail-ink-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0 .3125rem;
}
.l1-sidebar-badge--warn {
  background: var(--l1-warn-soft);
  border-color: color-mix(in srgb, var(--l1-warn) 35%, transparent);
  color: var(--l1-warn);
}
.l1-sidebar-badge--danger {
  background: var(--l1-danger-soft);
  border-color: color-mix(in srgb, var(--l1-danger) 35%, transparent);
  color: var(--l1-danger);
}

/* Hairlines frame Manage / Account (and sit under Tenants when present). */
.l1-console-sidebar .l1-sidebar-divider {
  border: 0;
  border-top: 1px solid var(--l1-rail-line);
  flex: none;
  height: 0;
  margin: .55rem 0;
  opacity: .7;
}

/* Collapsible work areas keep every destination available. */
.l1-console-sidebar-scroll {
  gap: .375rem;
  padding-right: 0;
  scrollbar-gutter: auto;
}

.l1-admin-console-body .l1-console-sidebar-scroll {
  gap: .375rem;
}

.l1-console-sidebar details.l1-nav-group {
  display: block;
  min-width: 0;
}

.l1-console-sidebar .l1-nav-group > .sidebar-label {
  align-items: center;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-rail-ink-muted);
  cursor: pointer;
  display: flex;
  font-size: .6875rem;
  font-weight: 600;
  gap: .5rem;
  justify-content: space-between;
  line-height: 1.3;
  list-style: none;
  margin: .35rem .5rem .3rem;
  min-height: 1.5rem;
  padding-block: .15rem;
  transition: background .15s ease, color .15s ease;
  user-select: none;
}

.l1-console-sidebar .l1-nav-group > .sidebar-label::-webkit-details-marker,
.l1-console-sidebar .l1-nav-group > .sidebar-label::marker {
  display: none;
  content: none;
}

.l1-console-sidebar .l1-nav-group > .sidebar-label:hover,
.l1-console-sidebar .l1-nav-group > .sidebar-label:focus-visible {
  background: var(--l1-rail-hover);
  color: var(--l1-rail-ink);
}

.l1-console-sidebar .l1-nav-group > .sidebar-label:focus-visible {
  outline: 2px solid var(--l1-rail-accent);
  outline-offset: -2px;
}

.l1-nav-group__label {
  flex: 0 0 auto;
}

/* The tenant card sits tight between the brand hairline and the Manage
   divider: it is a context label, not a section that needs air. */
.l1-nav-workspace {
  margin: 0 .5rem;
}
.l1-console-sidebar .l1-nav-workspace .l1-nav-group > .sidebar-label {
  margin: 0;
  min-height: 2.25rem;
  padding: .375rem .5rem;
}
.l1-console-sidebar .l1-nav-workspace + .l1-sidebar-divider {
  margin-top: .125rem;
}
.l1-console-v3 .l1-console-sidebar .l1-nav-workspace .l1-console-nav { padding-inline: .25rem; }
.l1-nav-workspace-context {
  display: grid;
  gap: .25rem;
  padding: .75rem .75rem .25rem;
}
.l1-nav-workspace-context > span { color: var(--l1-rail-ink-muted); font-size: .6875rem; }
.l1-nav-workspace-context > strong { color: var(--l1-rail-ink); font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }

.l1-nav-group__context {
  color: var(--l1-rail-ink-muted);
  flex: 1 1 auto;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.l1-nav-group[open] > .sidebar-label .l1-nav-group__context {
  display: none;
}

.l1-nav-group__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  height: .875rem;
  margin-left: auto;
  width: .875rem;
  transition: transform .15s ease;
}

.l1-nav-group__chevron :is(svg, i[data-lucide]) {
  height: .875rem;
  width: .875rem;
}

.l1-nav-group:not([open]) > .sidebar-label .l1-nav-group__chevron {
  transform: rotate(-90deg);
}

.l1-nav-tenant-form {
  margin: 0;
  min-width: 0;
}

.l1-console-sidebar .l1-console-nav button.nav-link {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

.l1-nav-tenant {
  min-width: 0;
}

.l1-console-sidebar .l1-nav-workspace .l1-nav-current-tenant {
  color: var(--l1-rail-ink);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  min-height: 2.5rem;
  text-transform: none;
}

.l1-nav-current-tenant {
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  padding: .5rem .625rem;
}

.l1-nav-workspace > .l1-nav-current-tenant {
  margin: 0;
}

.l1-nav-current-tenant__copy {
  display: grid;
  flex: 1 1 auto;
  gap: .05rem;
  min-width: 0;
}

.l1-nav-current-tenant__org {
  color: var(--l1-rail-ink-muted);
  font-size: .6875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-nav-current-tenant__name {
  color: var(--l1-rail-ink);
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-nav-tenant__mark {
  align-items: center;
  background: var(--l1-rail-hover);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-rail-ink);
  display: inline-flex;
  flex: none;
  font-size: .6875rem;
  font-weight: 700;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

.l1-nav-tenant__mark :is(svg, i[data-lucide]) {
  height: .875rem;
  width: .875rem;
}

/* Tenant marks keep their own size inside switcher rows, whatever the rail
   does with row glyphs. */
.l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a) .l1-nav-tenant__mark :is(svg, i[data-lucide]) {
  display: block;
  flex: none;
  height: .875rem;
  width: .875rem;
}

.l1-nav-tenant__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-console-sidebar .l1-nav-tenant.is-current {
  background: var(--l1-rail-hover);
  border-color: transparent;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-rail-ink, #f3f6ff);
  font-weight: 600;
}

@media (min-width: 992px) and (pointer: fine) {
  .l1-admin-console-body .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a) {
    min-height: 2rem;
    padding: .3125rem .625rem;
  }
}

@media (max-width: 991.98px), (pointer: coarse) {
  .l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a) {
    min-height: 2.75rem;
  }
  .l1-console-sidebar .l1-nav-group > .sidebar-label,
  .l1-console-sidebar .l1-nav-workspace .l1-nav-group > .sidebar-label { min-height: 2.75rem; }
}

/* Recover drawer space from stacked group margins, keeping every touch
   target at 44px. Desktop navigation retains its existing spacing. */
@media (max-width: 991.98px) {
  html[data-l1-theme] .l1-console-body .l1-console-sidebar .sidebar-inner {
    gap: .25rem;
    padding-block: .5rem;
  }
  .l1-console-sidebar .l1-console-sidebar-scroll { gap: 0; }
  .l1-console-sidebar .l1-sidebar-divider { margin-block: .25rem; }
  .l1-console-sidebar .l1-nav-group > .sidebar-label,
  .l1-console-sidebar .l1-nav-workspace .l1-nav-group > .sidebar-label { margin-block: 0; }
  .l1-nav-workspace { margin-top: .25rem; padding-bottom: .125rem; }
  .l1-nav-workspace-context { gap: .125rem; padding-block: .5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .l1-console-v3 .l1-console-sidebar :is(.l1-console-nav .nav-link, .nav a, .l1-nav-group > .sidebar-label, .l1-nav-group__chevron) { transition: none; }
}

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

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

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

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

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

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

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

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

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

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

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

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

/* The legacy .dashboard-shell .main dark rule is more specific than the
   generic canvas bridge above. Only opted-in workspaces replace that legacy
   paint; reference analytics and client/public pages remain unchanged. */
html[data-l1-theme] .l1-admin-console-body:has(.l1-admin-workspace, .l1-admin-analytics) .l1-console-content {
  background: var(--l1-console-canvas);
  color: var(--l1-ink);
}

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

.l1-console-body .l1-console-content {
  --l1-content-pad-block-start: 1.5rem;
  --l1-content-pad-inline: 1.75rem;
  padding: 1.5rem 1.75rem 2.5rem;
}

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

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

/* Console 3.x keeps these compact and quiet, so the box frame goes. The 3px
   left stripe stays: it is the level channel, and dropping it is what left
   warning and error looking identical here. Matches .l1-console-body
   .ui-notice, which also keeps its stripe. */
.l1-console-body .messages .message {
  border: 0;
  border-left: 3px solid transparent;
  box-shadow: none;
  font-size: var(--l1-text-dense);
  padding: .5rem .75rem;
}

.l1-console-body .messages .message-success { border-left-color: var(--l1-ok); }
.l1-console-body .messages .message-warning { border-left-color: var(--l1-warn); }
.l1-console-body .messages .message-error { border-left-color: var(--l1-danger); }
.l1-console-body .messages .message-info,
.l1-console-body .messages .message-debug { border-left-color: var(--l1-info); }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Ongoing public incident. A full-width strip on the top edge of the client
   content pane, under the top bar: icon, the leading incident's title, status
   and start time, its newest public update, then Details, "and N more" and the
   dismiss X. The negative margins cancel the pane gutters, which is why those
   gutters must be lengths (0px, never a bare 0: calc(0 * -1) is a number and
   invalidates the whole margin). */
.l1-incident-banner {
  --l1-incident-accent: var(--l1-warn);
  align-items: center;
  background: var(--l1-warn-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--l1-incident-accent) 40%, var(--l1-border));
  box-shadow: inset 3px 0 0 var(--l1-incident-accent);
  box-sizing: border-box;
  color: var(--l1-ink);
  display: grid;
  flex: none;
  gap: .25rem .875rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: calc(var(--l1-content-pad-block-start, 1.5rem) * -1) calc(var(--l1-content-pad-inline, 1.75rem) * -1) 0;
  min-width: 0;
  padding: .75rem max(1rem, var(--l1-content-pad-inline, 1.75rem));
  width: auto;
}

/* The applications map drops the page gutters so the plane can run to the
   edges. The banner still uses the same text inset as every other client page. */
.l1-client-portal-body .l1-console-content:has(> .l1-client-page.l1-canvas-page) > .l1-incident-banner {
  padding-inline: 2rem;
}

.l1-incident-banner[data-tone="danger"] { --l1-incident-accent: var(--l1-danger); background: var(--l1-danger-soft); }
.l1-incident-banner[data-tone="info"] { --l1-incident-accent: var(--l1-info); background: var(--l1-info-soft); }
.l1-incident-banner[data-tone="warn"] { --l1-incident-accent: var(--l1-warn); background: var(--l1-warn-soft); }

.l1-incident-banner__icon {
  align-items: center;
  align-self: start;
  background: color-mix(in srgb, var(--l1-incident-accent) 16%, transparent);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-incident-accent);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.l1-incident-banner__icon :is(svg, i) { height: 1rem; width: 1rem; }

.l1-incident-banner__copy { display: grid; gap: .2rem; min-width: 0; }
.l1-incident-banner__line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin: 0;
  min-width: 0;
}
.l1-incident-banner__title {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  overflow-wrap: anywhere;
}
.l1-incident-banner__meta { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); white-space: nowrap; }
.l1-incident-banner__update {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: var(--l1-ink);
  display: -webkit-box;
  font-size: var(--l1-text-dense);
  line-height: 1.45;
  margin: 0;
  overflow: hidden;
}
.l1-incident-banner__update-label { color: var(--l1-ink-muted); font-weight: var(--l1-fw-medium); }

.l1-incident-banner__actions {
  align-items: center;
  display: flex;
  flex: none;
  gap: var(--l1-space-2);
}
.l1-incident-banner__more {
  color: var(--l1-ink);
  font-size: var(--l1-text-dense);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.l1-incident-banner__more:hover { color: var(--l1-brand); }

.l1-incident-banner__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  padding: 0;
  width: 2rem;
}
.l1-incident-banner__close:hover,
.l1-incident-banner__close:focus-visible { background: color-mix(in srgb, var(--l1-ink) 8%, transparent); }
.l1-incident-banner__close :is(svg, i) { height: 1rem; width: 1rem; }

/* The Details link lands on the incident's card, clear of the sticky header. */
.l1-console-body .status-page .incident-public-card[id] { scroll-margin-top: 5rem; }

@media (max-width: 767px) {
  .l1-client-portal-body .l1-console-content:has(> .l1-client-page.l1-canvas-page) > .l1-incident-banner {
    padding-inline: 1rem;
  }
}

/* Phone: icon and copy on top with the X in the corner, then the update on
   two lines and Details under it. */
@media (max-width: 575px) {
  .l1-incident-banner {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 3rem;
    position: relative;
  }
  .l1-incident-banner__update { -webkit-line-clamp: 2; }
  .l1-incident-banner__actions { grid-column: 2; }
  .l1-incident-banner__close { position: absolute; right: .5rem; top: .625rem; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

/* Shared Account pages follow the active operations workspace. */
.l1-admin-console-body .l1-admin-workspace .ui-settings__section {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--l1-border);
  border-radius: 0;
  overflow: visible;
}
.l1-admin-console-body .l1-admin-workspace .ui-settings__title {
  background: transparent;
  border: 0;
  color: var(--l1-work-section-ink);
  padding: var(--l1-space-4) 0;
}
.l1-admin-console-body .l1-admin-workspace :is(.ui-settings__row, .ui-settings__note) { padding-inline: 0; }
.l1-admin-console-body .l1-admin-workspace .l1-work-section.ui-panel--danger .ui-panel__title { color: var(--l1-danger); }

/* Keep dense customer and support records readable within their scroll regions. */
.l1-admin-workspace .l1-client-services-table th:nth-child(1) { min-width: 15rem; width: 30%; }
.l1-admin-workspace .l1-client-services-table th:nth-child(2) { min-width: 8rem; }
.l1-admin-workspace .l1-client-services-table th:nth-child(3) { min-width: 13rem; }
.l1-admin-workspace .l1-client-services-table th:nth-child(4) { min-width: 16rem; }
.l1-admin-workspace .l1-ticket-filters > .ui-filter-field { flex: 0 1 11rem; min-width: 0; }
.l1-admin-workspace .l1-ticket-filters > .ui-filter-field--grow { flex: 1 1 18rem; }
@container admin-workspace (max-width: 44rem) {
  .l1-admin-workspace .l1-ticket-filters > .ui-filter-field { flex: 1 1 11rem; }
  .l1-admin-workspace .l1-ticket-filters > .ui-filter-field--grow { flex-basis: 100%; }
}
@media (max-width: 575px) {
  .l1-admin-workspace .l1-ticket-filters > .ui-filter-field { flex-basis: 100%; }
}
.l1-admin-workspace .l1-live-chat-thread__log { gap: var(--l1-space-4); }
.l1-admin-workspace .l1-live-chat-msg { padding: var(--l1-space-2) 0; }
.l1-admin-workspace .l1-live-chat-msg header { flex-wrap: wrap; }
.l1-admin-workspace .l1-live-chat-msg[data-role="staff"],
.l1-admin-workspace .l1-live-chat-msg[data-role="assistant"] {
  background: var(--l1-work-context-bg);
  border-left: 3px solid var(--l1-brand);
  border-radius: 0 var(--l1-radius-md) var(--l1-radius-md) 0;
  padding: var(--l1-space-4);
}
.l1-admin-workspace .l1-live-chat-msg[data-role="system"] {
  background: var(--l1-surface-2);
  border-left: 3px solid var(--l1-border-strong);
  padding: var(--l1-space-3);
}

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* includes/_copy.html: a value with an icon button that copies it. */
.l1-copyable {
  align-items: center;
  display: inline-flex;
  gap: .25rem;
  max-width: 100%;
  min-width: 0;
}
.l1-copyable__value {
  font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: anywhere;
}
.l1-copyable--plain .l1-copyable__value { font-family: inherit; }
.l1-copyable__btn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 1.75rem;
  justify-content: center;
  padding: 0;
  width: 1.75rem;
}
.l1-copyable__btn:hover { background: var(--l1-surface-3); color: var(--l1-ink); }
.l1-copyable__btn[data-copied="true"] { color: var(--l1-ok); }
.l1-copyable__btn[data-copied="false"] { color: var(--l1-danger); }
.l1-copyable__btn :is(svg, i[data-lucide]) { height: .875rem; width: .875rem; }

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

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

/* Message, markdown, thinking and thread-row styles below keep the retired
   dock's class names: Ask AI, the console chat thread and the revenue outlook
   bot all render messages with them. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Ask AI drawer (client portal) ----------
   Opened from the top-bar button. Sits under the top bar (z-index 40) so its
   dropdowns still open over it, and under the mobile navigation drawer. */
.l1-ask-ai {
  background: var(--l1-surface-1);
  border-left: 1px solid var(--l1-border);
  bottom: 0;
  box-shadow: var(--l1-shadow-lg, var(--l1-shadow-md));
  color: var(--l1-ink);
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  position: fixed;
  right: 0;
  top: var(--l1-topbar-h, 60px);
  transform: translateX(100%);
  transition: transform .2s ease, visibility 0s linear .2s;
  visibility: hidden;
  width: 26rem;
  z-index: 35;
}

.l1-ask-ai[data-open="true"] {
  transform: none;
  transition: transform .2s ease;
  visibility: visible;
}

.l1-ask-ai [hidden] {
  display: none !important;
}

.l1-ask-ai__head {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex: none;
  gap: .625rem;
  padding: .75rem .75rem .75rem 1rem;
}

.l1-ask-ai__mark,
.l1-ask-ai-toggle__mark {
  align-items: center;
  background: var(--l1-brand-soft);
  border: 1px solid var(--l1-brand-border);
  border-radius: 8px;
  color: var(--l1-brand);
  display: inline-flex;
  flex: none;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.l1-ask-ai__mark :is(svg, i[data-lucide]),
.l1-ask-ai-toggle__mark :is(svg, i[data-lucide]) {
  height: 1rem;
  width: 1rem;
}

.l1-ask-ai__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.l1-ask-ai__title {
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.25;
  margin: 0;
}

.l1-ask-ai__subtitle {
  color: var(--l1-ink-muted);
  font-size: .75rem;
  margin: .1rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-ask-ai__head-actions {
  display: flex;
  flex: none;
  gap: .125rem;
}

.l1-ask-ai__icon-btn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 2rem;
  justify-content: center;
  padding: 0;
  width: 2rem;
}

.l1-ask-ai__icon-btn:hover,
.l1-ask-ai__icon-btn[aria-pressed="true"] {
  background: var(--l1-surface-3);
  color: var(--l1-ink);
}

.l1-ask-ai__icon-btn :is(svg, i[data-lucide]) {
  height: 1rem;
  width: 1rem;
}

.l1-ask-ai__history,
.l1-ask-ai__conversation {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.l1-ask-ai__threads {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.l1-ask-ai__empty {
  color: var(--l1-ink-muted);
  font-size: .875rem;
  margin: 0;
  padding: 1.25rem 1rem;
}

.l1-ask-ai__thread-badge {
  background: var(--l1-brand);
  border-radius: 999px;
  color: var(--l1-on-brand);
  flex: none;
  font-size: .6875rem;
  font-weight: 650;
  line-height: 1;
  padding: .2rem .4rem;
}

.l1-ask-ai__messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

.l1-ask-ai__composer {
  align-items: flex-end;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex: none;
  gap: .5rem;
  margin: 0 .75rem;
  padding: .5rem .5rem .5rem .75rem;
}

.l1-ask-ai__composer:focus-within {
  border-color: var(--l1-brand);
  outline: 2px solid var(--l1-brand-soft);
  outline-offset: 1px;
}

.l1-ask-ai__input {
  background: transparent;
  border: 0;
  color: var(--l1-ink);
  flex: 1 1 auto;
  font: inherit;
  font-size: .875rem;
  line-height: 1.4;
  max-height: 8rem;
  min-height: 2.5rem;
  outline: 0;
  padding: .25rem 0;
  resize: none;
}

.l1-ask-ai__input::placeholder {
  color: var(--l1-ink-muted);
}

/* The composer frame carries the field's border and focus ring. app.css paints
   every dark client-portal textarea with !important, so only !important at a
   higher specificity keeps this one transparent inside its frame. */
html[data-l1-theme] .l1-ask-ai .l1-ask-ai__input {
  background: transparent !important;
  border-color: transparent !important;
}

.l1-ask-ai .l1-ask-ai__input:focus-visible {
  box-shadow: none;
}

.l1-ask-ai__send {
  align-items: center;
  background: var(--l1-brand-fill);
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-on-brand-fill);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 2rem;
  justify-content: center;
  padding: 0;
  width: 2rem;
}

.l1-ask-ai__send:hover {
  background: color-mix(in srgb, var(--l1-brand-fill) 86%, #000);
}

.l1-ask-ai__send:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.l1-ask-ai__send :is(svg, i[data-lucide]) {
  height: 1rem;
  width: 1rem;
}

.l1-ask-ai__foot {
  color: var(--l1-ink-muted);
  flex: none;
  font-size: .75rem;
  margin: 0;
  padding: .5rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

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

.l1-ask-ai .l1-chat-dock__msg {
  max-width: 88%;
}

@media (max-width: 575.98px) {
  .l1-ask-ai {
    border-left: 0;
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l1-ask-ai,
  .l1-ask-ai[data-open="true"] {
    transition: none;
  }
}

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

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

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

.l1-recording-list__events {
  min-width: 14rem;
}

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

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

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

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

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

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

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

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

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

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

.l1-live-badge.is-reconnecting {
  color: var(--l1-warn);
}

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

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

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

.l1-recording-go-live {
  background: var(--l1-brand);
  border: 1px solid color-mix(in srgb, var(--l1-brand) 78%, var(--l1-border));
  border-radius: var(--l1-radius-sm);
  color: var(--l1-on-brand);
  cursor: pointer;
  font: inherit;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  min-height: 36px;
  padding: 0 var(--l1-space-3);
  position: absolute;
  right: calc(var(--l1-space-3) + env(safe-area-inset-right, 0px));
  top: calc(var(--l1-space-3) + env(safe-area-inset-top, 0px));
  z-index: 3;
}

.l1-recording-go-live[hidden],
.l1-recording-end-overlay[hidden] {
  display: none !important;
}

.l1-recording-end-overlay {
  align-items: center;
  background: color-mix(in srgb, var(--l1-surface-1) 94%, transparent);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-2);
  left: 50%;
  max-width: min(26rem, calc(100% - 2 * var(--l1-space-4)));
  padding: var(--l1-space-5);
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  z-index: 4;
}

.l1-recording-end-overlay > span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
}

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

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

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

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

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

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

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

.l1-recording-player .rr-controller {
  max-width: 100%;
  touch-action: manipulation;
}
/* The vendor controller hard-codes a white bar, #eee track and #11103e text
   at three-class specificity; these follow the theme tokens instead, so the
   controls are readable in dark mode. */
.l1-recording-player-shell .l1-recording-player .rr-controller.rr-controller {
  background: var(--l1-surface-1);
  border-top: 1px solid var(--l1-border);
  color: var(--l1-ink);
}
.l1-recording-player-shell .l1-recording-player .rr-timeline__time.rr-timeline__time { color: var(--l1-ink); }
.l1-recording-player-shell .l1-recording-player .rr-progress.rr-progress {
  background: var(--l1-surface-3);
  border-bottom-color: var(--l1-surface-1);
  border-top-color: var(--l1-surface-1);
}
.l1-recording-player-shell .l1-recording-player .rr-progress__step.rr-progress__step { background: var(--l1-brand-soft); }
.l1-recording-player-shell .l1-recording-player .rr-progress__handler.rr-progress__handler { background: var(--l1-brand); }
.l1-recording-player-shell .l1-recording-player .rr-controller__btns button { color: var(--l1-ink); }
.l1-recording-player-shell .l1-recording-player .rr-controller__btns button svg { fill: currentColor; }
.l1-recording-player-shell .l1-recording-player .rr-controller__btns button:active { background: var(--l1-brand-soft); }
.l1-recording-player-shell .l1-recording-player .rr-controller__btns button.active.active { background: var(--l1-brand); color: var(--l1-on-brand); }

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

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

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

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

.l1-recording-player-shell.is-theater .l1-recording-go-live,
.l1-recording-player-shell:fullscreen .l1-recording-go-live,
.l1-recording-player-shell:-webkit-full-screen .l1-recording-go-live {
  right: calc(5.5rem + env(safe-area-inset-right, 0px));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Web-hosting control workspace ---------- */
.l1-hosting-workspace {
  align-items: start;
  display: grid;
  gap: var(--l1-space-5);
  grid-template-columns: minmax(15rem, 16.5rem) minmax(0, 1fr);
}

/* Tool panels keep the same section rhythm as the surrounding workspace. */
.l1-hosting-workspace__main { display: grid; align-content: start; gap: var(--l1-space-5); min-width: 0; }
.l1-client-portal-body .ui-panel > .l1-hosting-create.ui-panel__section { margin-top: 0; }
.l1-client-portal-body .l1-hosting-create > form { display: grid; gap: var(--l1-space-3); }
.l1-client-portal-body .l1-hosting-create > form > .ui-btn { justify-self: start; }
.l1-client-portal-body .l1-hosting-php { container: hosting-php / inline-size; }
.l1-client-portal-body .l1-hosting-php-extensions { min-width: 0; margin: 0; padding: 0; border: 0; }
.l1-client-portal-body .l1-hosting-php-extensions legend { float: none; width: auto; padding: 0; }
.l1-client-portal-body .l1-hosting-php-extensions > div.l1-hosting-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-client-portal-body .l1-hosting-php-extensions > div.l1-hosting-choice-grid > div { min-width: 0; }
@container hosting-php (min-width: 36rem) {
  .l1-client-portal-body .l1-hosting-php-extensions > div.l1-hosting-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container hosting-php (max-width: 20rem) {
  .l1-client-portal-body .l1-hosting-php-extensions > div.l1-hosting-choice-grid { grid-template-columns: minmax(0, 1fr); }
}

.l1-hosting-workspace-nav {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  overflow: hidden;
  position: sticky;
  top: 5.5rem;
}

.l1-hosting-workspace-nav__home {
  align-items: center;
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-ink);
  display: flex;
  gap: var(--l1-space-3);
  padding: var(--l1-space-4);
  text-decoration: none;
}
.l1-hosting-workspace-nav__mobile { display: none; }

.l1-hosting-workspace-nav__home:hover {
  background: var(--l1-surface-3);
  color: var(--l1-ink);
  text-decoration: none;
}

.l1-hosting-workspace-nav__home > svg {
  color: var(--l1-brand);
  flex: none;
  height: 1.35rem;
  width: 1.35rem;
}

.l1-hosting-workspace-nav__home span {
  display: grid;
  min-width: 0;
}

.l1-hosting-workspace-nav__home small {
  color: var(--l1-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-hosting-workspace-nav__groups {
  display: grid;
  gap: var(--l1-space-3);
  padding: var(--l1-space-3);
}

.l1-hosting-workspace-nav__group {
  min-width: 0;
}

.l1-hosting-workspace-nav__label {
  color: var(--l1-ink-muted);
  display: block;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .05em;
  margin: 0 var(--l1-space-2) var(--l1-space-1);
  text-transform: uppercase;
}

.l1-hosting-workspace-nav__links {
  display: grid;
  gap: 2px;
}

.l1-hosting-workspace-nav__links a {
  align-items: center;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-2);
  min-height: 2.15rem;
  padding: .35rem .55rem;
  text-decoration: none;
}

.l1-hosting-workspace-nav__links a:hover,
.l1-hosting-workspace-nav__links a[aria-current="page"] {
  background: var(--l1-brand-soft);
  color: var(--l1-brand-strong);
  text-decoration: none;
}

.l1-hosting-workspace-nav__links a[aria-current="page"] {
  box-shadow: inset 0 0 0 1px var(--l1-brand-border);
  font-weight: var(--l1-fw-semibold);
}

.l1-hosting-workspace-nav__links a[data-unavailable="true"]:not([aria-current="page"]) {
  opacity: .62;
}

.l1-hosting-workspace-nav__links svg {
  flex: none;
  height: 1rem;
  width: 1rem;
}

.l1-hosting-workspace-summary {
  border-top: 1px solid var(--l1-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.l1-hosting-workspace-summary > span {
  border-bottom: 1px solid var(--l1-border);
  border-right: 1px solid var(--l1-border);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--l1-space-2) var(--l1-space-3);
}

.l1-hosting-workspace-summary > span:nth-child(2n) {
  border-right: 0;
}

.l1-hosting-workspace-summary > span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.l1-hosting-workspace-summary small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  text-transform: uppercase;
}

.l1-hosting-workspace-summary strong {
  font-size: var(--l1-text-dense);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-hosting-control {
  display: grid;
  gap: var(--l1-space-6);
}

.l1-hosting-control__search {
  display: grid;
  gap: var(--l1-space-2);
}

.l1-hosting-control__search > label {
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
}

.l1-hosting-control__search-field {
  position: relative;
}

.l1-hosting-control__search-field > svg {
  color: var(--l1-ink-muted);
  height: 1.1rem;
  left: .85rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
}

.l1-hosting-control__search-field .ui-input {
  padding-left: 2.5rem;
}

.l1-hosting-usage {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
}

.l1-hosting-usage > span {
  border-right: 1px solid var(--l1-border);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--l1-space-3) var(--l1-space-4);
}

.l1-hosting-usage > span:last-child {
  border-right: 0;
}

.l1-hosting-usage small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  text-transform: uppercase;
}

.l1-hosting-usage strong {
  font-size: var(--l1-text-dense);
}

.l1-hosting-control__groups {
  display: grid;
  gap: var(--l1-space-6);
}

.l1-hosting-control__group > header {
  margin-bottom: var(--l1-space-3);
}

.l1-hosting-control__group h2 {
  font-size: var(--l1-text-lg);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.l1-hosting-control__group p {
  color: var(--l1-ink-muted);
  margin: .2rem 0 0;
}

.l1-hosting-tool-grid {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

.l1-hosting-tool {
  --l1-hosting-accent: var(--l1-brand);
  --l1-hosting-accent-soft: var(--l1-brand-soft);
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  color: var(--l1-ink);
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-3);
  min-height: 10.5rem;
  padding: 1.1rem .85rem .95rem;
  text-align: center;
  text-decoration: none;
}

.l1-hosting-tool:hover,
.l1-hosting-tool:focus-visible {
  border-color: color-mix(in srgb, var(--l1-hosting-accent) 45%, var(--l1-border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--l1-hosting-accent) 18%, transparent);
  color: var(--l1-ink);
  text-decoration: none;
}

.l1-hosting-tool[data-unavailable="true"] {
  opacity: .62;
}

.l1-hosting-tool[data-accent="backups"],
.l1-hosting-tool[data-accent="ssl"] {
  --l1-hosting-accent: var(--l1-ok);
  --l1-hosting-accent-soft: var(--l1-ok-soft);
}

.l1-hosting-tool[data-accent="postgresql"],
.l1-hosting-tool[data-accent="dns"],
.l1-hosting-tool[data-accent="applications"] {
  --l1-hosting-accent: var(--l1-accent);
  --l1-hosting-accent-soft: var(--l1-accent-soft);
}

.l1-hosting-tool[data-accent="email"],
.l1-hosting-tool[data-accent="forwarders"],
.l1-hosting-tool[data-accent="webmail"] {
  --l1-hosting-accent: var(--l1-warn);
  --l1-hosting-accent-soft: var(--l1-warn-soft);
}

.l1-hosting-tool[data-accent="mysql"],
.l1-hosting-tool[data-accent="info"],
.l1-hosting-tool[data-accent="php"] {
  --l1-hosting-accent: var(--l1-info);
  --l1-hosting-accent-soft: var(--l1-info-soft);
}

.l1-hosting-tool__icon {
  align-items: center;
  background: var(--l1-hosting-accent-soft);
  border: 1px solid color-mix(in srgb, var(--l1-hosting-accent) 28%, var(--l1-border));
  border-radius: 12px;
  color: var(--l1-hosting-accent);
  display: inline-flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.l1-hosting-tool__icon svg {
  height: 1.45rem;
  width: 1.45rem;
}

.l1-hosting-tool__copy {
  display: grid;
  gap: .2rem;
}

.l1-hosting-tool__copy strong {
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
}

.l1-hosting-tool__copy small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  line-height: 1.35;
}

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

.l1-hosting-tool__state[data-tone="warn"],
.l1-hosting-tool__copy .l1-hosting-tool__warning {
  color: var(--l1-warn);
}

/* Customer tools retain their categories, availability and color cues, with
   compact horizontal entries rather than large centered launch tiles. */
.l1-client-portal-body .l1-client-page .l1-hosting-tool-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
/* The legacy input reset has six pseudo-classes; this existing unique ID keeps
   its icon inset intact without changing other customer or operator inputs. */
.l1-client-portal-body .l1-client-page #hosting-tool-search.ui-input { padding-left: 2.5rem; }
.l1-client-portal-body .l1-client-page .l1-hosting-usage {
  background: var(--l1-border);
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.l1-client-portal-body .l1-client-page .l1-hosting-usage > span {
  background: var(--l1-surface-1);
  border: 0;
}
.l1-client-portal-body .l1-client-page .l1-hosting-tool {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: 2.25rem minmax(0, 1fr);
  min-height: 5rem;
  padding: var(--l1-space-3);
  text-align: left;
}
.l1-client-portal-body .l1-client-page .l1-hosting-tool__icon { height: 2.25rem; width: 2.25rem; }
.l1-client-portal-body .l1-client-page .l1-hosting-tool__icon svg { height: 1.25rem; width: 1.25rem; }
.l1-client-portal-body .l1-client-page .l1-hosting-tool__copy { min-width: 0; overflow-wrap: anywhere; }
.l1-client-portal-body .l1-client-page .l1-hosting-tool__copy small { font-size: var(--l1-text-xs); }
.l1-client-portal-body .l1-client-page .l1-hosting-control__group h2 { color: var(--l1-client-section-ink); font-size: var(--l1-text-base); }
.l1-client-portal-body .l1-client-page .l1-hosting-workspace-summary { grid-template-columns: minmax(0, 1fr); }
.l1-client-portal-body .l1-client-page .l1-hosting-workspace-summary > span { border-right: 0; }
.l1-client-portal-body .l1-client-page .l1-hosting-workspace-summary > span:not(:last-child) { border-bottom: 1px solid var(--l1-border); }
.l1-client-portal-body .l1-client-page .l1-hosting-workspace-summary strong {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}
.l1-client-portal-body .l1-client-page .l1-client-records-table td code { white-space: normal; overflow-wrap: anywhere; }

.l1-hosting-create {
  border-top: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-3);
  margin-top: var(--l1-space-5);
  padding-top: var(--l1-space-5);
}

.l1-hosting-create h3 {
  font-size: var(--l1-text-base);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.l1-hosting-record {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  margin-bottom: var(--l1-space-4);
  overflow: hidden;
}

.l1-hosting-settings {
  display: grid;
  gap: var(--l1-space-5);
}

.l1-hosting-settings fieldset {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-3);
  margin: 0;
  min-width: 0;
  padding: var(--l1-space-4);
}

.l1-hosting-settings legend {
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  padding: 0 .35rem;
}

/* The checkbox-group layout for a ModelMultipleChoiceField rendered with
   CheckboxSelectMultiple. Generic name first: the hosting plan picker was the
   first user, the maintenance announcement composer is the second, and a second
   copy of the same six rules is how two identical pickers start drifting. */
.l1-choice-grid,
.l1-hosting-choice-grid {
  display: grid;
  gap: var(--l1-space-2) var(--l1-space-4);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.l1-choice-grid li,
.l1-choice-grid label,
.l1-hosting-choice-grid li,
.l1-hosting-choice-grid label {
  align-items: center;
  display: flex;
  gap: var(--l1-space-2);
  margin: 0;
}

/* Wrapper for one checkbox group: a fieldset/legend rather than the <label>
   .l1-field uses, because a label wrapping many controls has no single control
   to point at and clicking its text toggles whichever one came first. */
.l1-choice-set {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-2);
  margin: 0 0 var(--l1-space-4);
  padding: var(--l1-space-3) var(--l1-space-4) var(--l1-space-4);
}

.l1-choice-set legend {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: 600;
  padding: 0 var(--l1-space-2);
}

.l1-file-manager__status {
  color: var(--l1-ink-muted);
  display: grid;
  font-size: var(--l1-text-micro);
  text-align: right;
}

.l1-file-manager__status [data-l1-file-live-state] {
  align-items: center;
  display: inline-flex;
  gap: var(--l1-space-1);
  justify-content: flex-end;
}

.l1-file-manager__spinner {
  animation: l1-file-manager-spin .8s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  height: .9rem;
  width: .9rem;
}

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

.l1-file-manager__toolbar {
  align-items: end;
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-3);
  justify-content: space-between;
  padding: var(--l1-space-3) var(--l1-space-5);
}

.l1-file-manager__site {
  align-items: center;
  display: flex;
  gap: var(--l1-space-2);
  margin: 0;
  min-width: min(100%, 22rem);
}

.l1-file-manager__site label {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  text-transform: uppercase;
}

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

.l1-file-manager__home > svg {
  color: var(--l1-brand);
  flex: 0 0 auto;
  height: 1.25rem;
  width: 1.25rem;
}

.l1-file-manager__home > span {
  display: grid;
  min-width: 0;
}

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

.l1-file-manager__commands,
.l1-file-manager__row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1);
}

.l1-file-manager__commands form,
.l1-file-manager__row-actions form {
  margin: 0;
}

.l1-file-manager__popover,
.l1-file-manager__row-menu {
  position: relative;
}

.l1-file-manager__popover > summary,
.l1-file-manager__row-menu > summary {
  list-style: none;
}

.l1-file-manager__popover > summary::-webkit-details-marker,
.l1-file-manager__row-menu > summary::-webkit-details-marker {
  display: none;
}

.l1-file-manager__popover[open] > summary,
.l1-file-manager__row-menu[open] > summary {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
}

.l1-file-manager__popover > form,
.l1-file-manager__row-menu > div {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-lg);
  display: grid;
  gap: var(--l1-space-3);
  padding: var(--l1-space-4);
  position: absolute;
  right: 0;
  top: calc(100% + .35rem);
  width: min(22rem, calc(100vw - 3rem));
  z-index: 20;
}

/* The row menu holds actions, not a form: tighter than the toolbar popovers,
   and each item spans the panel so the whole row is the hit target. */
.l1-file-manager__row-menu > div {
  gap: 2px;
  min-width: 11rem;
  padding: var(--l1-space-2);
  width: max-content;
}

.l1-file-manager__row-menu > div .l1-row-action {
  justify-content: flex-start;
  width: 100%;
}

.l1-file-manager__editor {
  border: 0;
  border-radius: 0;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  width: 100vw;
}

.l1-file-manager__editor[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.l1-file-manager__editor .l1-dialog__head {
  align-items: center;
  padding-inline: var(--l1-space-5);
}

.l1-file-manager__editor .l1-dialog__head > div {
  min-width: 0;
}

.l1-file-manager__editor .l1-dialog__desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-file-manager__editor .l1-dialog__body {
  gap: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.l1-file-manager__editor .l1-file-manager__error {
  margin: var(--l1-space-4) var(--l1-space-5) 0;
}

.l1-file-manager__editor-area {
  border: 0;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--l1-text-micro);
  height: 100%;
  line-height: 1.55;
  min-height: 0;
  padding: var(--l1-space-5);
  resize: none;
  white-space: pre;
  width: 100%;
}

.l1-file-manager__editor .l1-dialog__actions {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  flex-wrap: wrap;
  padding: var(--l1-space-3) var(--l1-space-5);
}

.l1-file-manager__editor [data-l1-editor-state] {
  margin-right: auto;
}

/* File contents stay inside this bounded editor, not the console shell. */
.l1-code-editor {
  --l1-code-keyword: #7447a8;
  --l1-code-string: #176c4d;
  --l1-code-number: #975207;
  --l1-code-comment: #647086;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--l1-surface-1);
  color: var(--l1-text);
  font-size: var(--l1-text-dense);
}

[data-l1-theme="dark"] .l1-code-editor {
  --l1-code-keyword: #c6a7ff;
  --l1-code-string: #87d9b4;
  --l1-code-number: #f1bd80;
  --l1-code-comment: #a0acc0;
}

.l1-code-editor [hidden] { display: none !important; }

.l1-file-manager__editor .l1-code-editor { grid-row: 2; }
.l1-file-manager__editor .l1-dialog__actions { grid-row: 3; }

.l1-code-editor__toolbar,
.l1-code-editor__status,
.l1-code-editor__search {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-3);
  padding: var(--l1-space-2) var(--l1-space-4);
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
}

.l1-code-editor__toolbar { grid-row: 1; }
.l1-code-editor__search { grid-row: 2; }
.l1-code-editor__search input { max-width: 25rem; }
.l1-code-editor__language { font-weight: 600; }
.l1-code-editor__dirty { margin-right: auto; color: var(--l1-text-muted); }
.l1-code-editor__frame { grid-row: 3; min-height: 0; min-width: 0; overflow: hidden; }
.l1-code-editor__surface { height: 100%; font-family: var(--l1-font-data); }
.l1-code-editor .l1-file-manager__editor-area { font-size: var(--l1-text-dense); }
.l1-code-editor__status {
  border-bottom: 0;
  border-top: 1px solid var(--l1-border);
  color: var(--l1-text-muted);
  font-size: var(--l1-text-xs);
  grid-row: 4;
  justify-content: space-between;
}

.l1-code-editor .cm-editor { line-height: 1.6; background: var(--l1-surface-1); }
.l1-code-editor .cm-editor.cm-focused { outline: 2px solid var(--l1-accent); outline-offset: -2px; }
.l1-code-editor .cm-content { padding-block: var(--l1-space-3); caret-color: var(--l1-text); }
.l1-code-editor .cm-line { padding-inline: var(--l1-space-3); }
.l1-code-editor .cm-gutters {
  background: var(--l1-surface-2);
  border-right: 1px solid var(--l1-border);
  color: var(--l1-text-muted);
}
.l1-code-editor .cm-activeLine,
.l1-code-editor .cm-activeLineGutter { background: var(--l1-surface-3); }
.l1-code-editor .cm-cursor { border-left-color: var(--l1-text); }
.l1-code-editor .cm-selectionBackground,
.l1-code-editor .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--l1-accent) 22%, transparent); }
.l1-code-editor .cm-panels { background: var(--l1-surface-2); color: var(--l1-text); border-color: var(--l1-border); }
.l1-code-editor .cm-search { padding: var(--l1-space-2) var(--l1-space-4); }
.l1-code-editor .cm-textfield,
.l1-code-editor .cm-button {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-text);
  font: inherit;
  padding: 4px 8px;
}
.l1-code-editor__filename { font-family: var(--l1-font-data); overflow-wrap: anywhere; }
.l1-file-editor-page .l1-code-editor { height: min(70dvh, 52rem); min-height: 25rem; border: 1px solid var(--l1-border); }
.l1-file-editor-page .l1-dialog__actions { margin-top: var(--l1-space-3); }
.l1-file-editor-page [data-l1-editor-state] { margin-right: auto; }

@media (max-width: 640px) {
  .l1-code-editor__status > span:first-child { max-width: 70%; }
  .l1-code-editor__toolbar { gap: var(--l1-space-2); }
  .l1-code-editor__search input { width: 100%; }
  .l1-file-editor-page .ui-panel__body { padding: var(--l1-space-2); }
}

.l1-file-manager__permissions {
  margin-bottom: var(--l1-space-3);
}

.l1-file-manager__permissions td {
  text-align: center;
}

.l1-file-manager__mode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .25em;
  max-width: 8rem;
  text-align: center;
}

.l1-file-manager__move {
  width: min(38rem, calc(100vw - 2rem));
}

.l1-file-manager__move .l1-dialog__body {
  gap: var(--l1-space-3);
}

.l1-file-manager__move-breadcrumbs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}

.l1-file-manager__move-breadcrumbs button {
  background: transparent;
  border: 0;
  color: var(--l1-brand-strong);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.l1-file-manager__move-breadcrumbs button[aria-current="page"] {
  color: var(--l1-ink);
  cursor: default;
  font-weight: var(--l1-fw-semibold);
}

.l1-file-manager__move-folders {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  max-height: min(45vh, 24rem);
  min-height: 10rem;
  overflow-y: auto;
}

.l1-file-manager__move-folder {
  align-items: center;
  background: var(--l1-surface-1);
  border: 0;
  border-bottom: 1px solid var(--l1-border);
  color: var(--l1-ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--l1-space-2);
  padding: var(--l1-space-3);
  text-align: left;
}

.l1-file-manager__move-folder:last-child {
  border-bottom: 0;
}

.l1-file-manager__move-folder:hover,
.l1-file-manager__move-folder:focus-visible {
  background: var(--l1-brand-soft);
  color: var(--l1-brand-strong);
}

.l1-file-manager__move-folder > svg {
  flex: 0 0 auto;
  height: 1rem;
  width: 1rem;
}

.l1-file-manager__move-empty {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  justify-content: center;
  min-height: 10rem;
  padding: var(--l1-space-4);
  text-align: center;
}

.l1-file-manager__move-more {
  justify-self: start;
}

.l1-file-manager__move .l1-dialog__actions [data-l1-move-state] {
  margin-right: auto;
}

.l1-file-manager__popover form p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.l1-file-manager__popover form .helptext {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
}

.l1-file-manager__breadcrumbs {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-2);
  min-height: 2.75rem;
  padding: var(--l1-space-2) var(--l1-space-5);
}

.l1-file-manager__breadcrumbs a {
  color: var(--l1-brand-strong);
  text-decoration: none;
}

.l1-file-manager__breadcrumbs a[aria-current="page"] {
  color: var(--l1-ink);
  font-weight: var(--l1-fw-semibold);
}

.l1-file-manager__error {
  background: var(--l1-danger-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--l1-danger) 28%, transparent);
  color: var(--l1-danger);
  font-size: var(--l1-text-dense);
  padding: var(--l1-space-3) var(--l1-space-5);
}

.l1-file-manager__filter {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-2);
  padding: var(--l1-space-2) var(--l1-space-5);
}

.l1-file-manager__filter > svg {
  color: var(--l1-ink-muted);
  flex: none;
  height: 1rem;
  width: 1rem;
}

.l1-file-manager__filter .ui-input {
  border: 0;
  box-shadow: none;
  padding-left: 0;
}

.l1-file-manager__table-wrap {
  min-height: 18rem;
}

.l1-file-manager__table td:last-child,
.l1-file-manager__table th:last-child {
  text-align: right;
}

.l1-file-manager__name {
  align-items: center;
  color: var(--l1-ink);
  display: grid;
  gap: 0 var(--l1-space-2);
  grid-template-columns: 1.25rem minmax(0, 1fr);
  text-decoration: none;
}

.l1-file-manager__name:hover {
  color: var(--l1-brand-strong);
  text-decoration: none;
}

.l1-file-manager__name > svg {
  color: var(--l1-brand);
  grid-row: 1 / span 2;
  height: 1rem;
  width: 1rem;
}

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

.l1-file-manager__identity {
  font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l1-file-manager__row-actions {
  justify-content: flex-end;
  white-space: nowrap;
}

.l1-file-manager__row-menu > div {
  gap: 0;
  padding: var(--l1-space-2);
  width: 15rem;
}

.l1-file-manager__row-menu button {
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: var(--l1-text-dense);
  padding: .5rem .65rem;
  text-align: left;
  width: 100%;
}

.l1-file-manager__row-menu button:hover {
  background: var(--l1-surface-2);
}

.l1-file-manager__row-menu .l1-file-manager__danger {
  color: var(--l1-danger);
}

.l1-file-manager__rename {
  border-bottom: 1px solid var(--l1-border);
  border-top: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-1);
  margin: var(--l1-space-1) 0;
  padding: var(--l1-space-2) 0;
}

.l1-file-manager__rename label {
  color: var(--l1-ink-muted);
  display: grid;
  font-size: var(--l1-text-micro);
  gap: 3px;
  padding: 0 .65rem;
}

.l1-file-manager__rename input {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  font: inherit;
  padding: .35rem .5rem;
}

.l1-file-manager__empty {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-2);
  justify-content: center;
  min-height: 13rem;
  text-align: center;
}

.l1-file-manager__empty > svg {
  height: 2rem;
  width: 2rem;
}

.l1-file-manager__empty strong {
  color: var(--l1-ink);
}

.l1-file-manager__activity {
  border-top: 1px solid var(--l1-border);
}

.l1-file-manager__activity > summary {
  color: var(--l1-ink-soft);
  cursor: pointer;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  padding: var(--l1-space-3) var(--l1-space-5);
}

.l1-file-manager__pagination {
  border-top: 1px solid var(--l1-border);
  display: flex;
  justify-content: center;
  padding: var(--l1-space-3);
}

.l1-file-manager__pagination:has(> [hidden]) {
  display: none;
}

@media (max-width: 1100px) {
  .l1-hosting-usage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .l1-hosting-usage > span:nth-child(3n) {
    border-right: 0;
  }

  .l1-hosting-usage > span:nth-child(-n + 3) {
    border-bottom: 1px solid var(--l1-border);
  }
}

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

  .l1-hosting-workspace-nav {
    position: static;
  }

  .l1-hosting-workspace-nav__desktop { display: none; }
  .l1-hosting-workspace-nav__mobile { display: block; }
  .l1-hosting-workspace-nav__mobile > summary { padding: var(--l1-space-3); }

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

  .l1-hosting-workspace-nav__group {
    min-width: 0;
    border-right: 0;
  }

  .l1-hosting-workspace-nav__group:last-child {
    border-right: 0;
  }

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

  .l1-file-manager__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .l1-file-manager__commands {
    justify-content: flex-start;
  }
}

@media (max-width: 575px) {
  .l1-hosting-usage,
  .l1-hosting-workspace-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-hosting-usage > span,
  .l1-hosting-workspace-summary > span {
    border-bottom: 1px solid var(--l1-border);
    border-right: 0;
  }

  .l1-hosting-usage > span:last-child,
  .l1-hosting-workspace-summary > span:last-child {
    border-bottom: 0;
  }

  .l1-file-manager__commands > *,
  .l1-file-manager__commands > form > button,
  .l1-file-manager__commands > details > summary {
    justify-content: center;
    width: 100%;
  }

  .l1-file-manager__popover > form,
  .l1-file-manager__row-menu > div {
    left: 0;
    right: auto;
  }
}

/* ---------- Hosted mail setup ----------
   The mail panel used to be three visually identical .ui-table blocks: seven
   Verified/Pending booleans, the DNS records, and the mailboxes. Everything
   had the same weight, so the one thing a customer can act on -- publishing
   their records -- was the least prominent thing on the page, and the seven
   gates read as seven chores rather than "one of these is yours".

   Tokens only, both themes. The meter and the check rows carry a text state
   next to every colour, because "green means done" is not available to every
   reader. */

.l1-mail-card {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-4);
  margin-bottom: var(--l1-space-4);
  padding: var(--l1-space-4);
}

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

.l1-mail-card__identity { display: grid; gap: var(--l1-space-1); min-width: 0; }

.l1-mail-card__title {
  font-size: var(--l1-text-base);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
  overflow-wrap: anywhere;
}

.l1-mail-card__hosts {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  margin: 0;
  overflow-wrap: anywhere;
}

.l1-mail-card__hosts code {
  background: var(--l1-surface-2);
  border-radius: var(--l1-radius-sm);
  font-family: var(--l1-font-data);
  padding: 0 .25rem;
}

/* ---- customer setup sequence ---- */
.l1-mail-stages {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.l1-mail-stages li {
  border-top: 3px solid var(--l1-border);
  font-size: var(--l1-text-dense);
  padding-top: var(--l1-space-2);
}

.l1-mail-stages li[data-complete="true"] { border-color: var(--l1-ok); }
.l1-mail-stages strong { font-weight: var(--l1-fw-semibold); }
.l1-mail-stages span {
  color: var(--l1-ink-muted);
  display: block;
  margin-top: var(--l1-space-1);
}

/* ---- next step ---- */
.l1-mail-next {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-left: 3px solid var(--l1-ink-muted);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: var(--l1-space-1);
  padding: var(--l1-space-3);
}

.l1-mail-next[data-tone="warn"] {
  background: var(--l1-warn-soft);
  border-left-color: var(--l1-warn);
}

.l1-mail-next[data-tone="ok"] {
  background: var(--l1-ok-soft);
  border-left-color: var(--l1-ok);
}

.l1-mail-next[data-tone="danger"] {
  background: var(--l1-danger-soft);
  border-left-color: var(--l1-danger);
}

.l1-mail-next > a { justify-self: start; }

.l1-mail-next__title {
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.l1-mail-next__body {
  color: var(--l1-ink);
  font-size: var(--l1-text-dense);
  margin: 0;
}

.l1-mail-alert {
  background: var(--l1-danger-soft);
  border-left: 3px solid var(--l1-danger);
  border-radius: var(--l1-radius-sm);
  font-size: var(--l1-text-dense);
  margin: 0;
  padding: var(--l1-space-3);
}

/* ---- DNS records ----
   A record is name + type + value, and the value is the part that has to be
   copied exactly. As table rows the values wrapped into unreadable columns on
   a phone, so each record is its own block with the value on its own line. */
.l1-mail-records { display: grid; gap: var(--l1-space-2); }

.l1-mail-records__head { display: grid; gap: var(--l1-space-1); }

.l1-mail-records__title {
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.l1-mail-records__list {
  display: grid;
  gap: var(--l1-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.l1-mail-record {
  align-items: start;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--l1-space-3);
}

.l1-mail-record__head, .l1-mail-record__identity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}

.l1-mail-record__head { justify-content: space-between; }
.l1-mail-record__identity { font-size: var(--l1-text-dense); }
.l1-mail-record__instruction { font-size: var(--l1-text-dense); margin: 0; }

.l1-mail-record__values {
  border: 1px solid var(--l1-border);
  border-left: 3px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: var(--l1-space-2);
  padding: var(--l1-space-3);
}

.l1-mail-record__values[data-kind="current"] {
  background: var(--l1-warn-soft);
  border-left-color: var(--l1-warn);
}

.l1-mail-record__values[data-kind="required"] {
  background: var(--l1-info-soft);
  border-left-color: var(--l1-info);
}

.l1-mail-record__value-label { font-size: var(--l1-text-dense); }
.l1-mail-record__entry { display: grid; gap: var(--l1-space-2); min-width: 0; }
.l1-mail-record__entry + .l1-mail-record__entry { border-top: 1px solid var(--l1-border); padding-top: var(--l1-space-2); }
.l1-mail-record__entry > button { justify-self: start; }
.l1-mail-records__verified summary { cursor: pointer; font-size: var(--l1-text-dense); padding-block: var(--l1-space-2); }

.l1-mail-record__type {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  padding: .15rem .4rem;
}

.l1-mail-record__field {
  display: grid;
  gap: var(--l1-space-1);
  grid-template-columns: 5.5rem minmax(0, 1fr);
}

.l1-mail-record__key {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  padding-top: .1rem;
}

.l1-mail-record__value {
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  min-width: 0;
  overflow-wrap: anywhere;
}

.l1-mail-record__copy {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--l1-text-micro);
  gap: var(--l1-space-1);
  padding: .25rem .5rem;
}

.l1-mail-record__copy:hover { background: var(--l1-surface-2); }

.l1-mail-record__copy svg { height: .85rem; width: .85rem; }

.l1-mail-record__copy[data-copied="true"] {
  border-color: var(--l1-ok);
  color: var(--l1-ok);
}

/* ---- checklist ----
   Collapsed by default while setup is in progress: the customer cannot act on
   six of the seven, so the records above them are what should be read first.
   Open once everything passes, when the list is the answer rather than noise. */
.l1-mail-checks {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
}

.l1-mail-checks__summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-2);
  justify-content: space-between;
  padding: var(--l1-space-3);
}

.l1-mail-checks__list {
  border-top: 1px solid var(--l1-border);
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.l1-mail-check {
  align-items: center;
  display: grid;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--l1-space-2) var(--l1-space-3);
}

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

.l1-mail-check svg { height: 1rem; width: 1rem; }

.l1-mail-check[data-ok="true"] svg { color: var(--l1-ok); }
.l1-mail-check[data-ok="false"] svg { color: var(--l1-ink-muted); }

.l1-mail-check__label { min-width: 0; overflow-wrap: anywhere; }

.l1-mail-check__state {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  white-space: nowrap;
}

.l1-mail-check[data-ok="true"] .l1-mail-check__state { color: var(--l1-ok); }

@media (max-width: 40rem) {
  .l1-mail-stages { grid-template-columns: minmax(0, 1fr); }
  .l1-mail-record__field { grid-template-columns: minmax(0, 1fr); }
  .l1-mail-check { grid-template-columns: auto minmax(0, 1fr); }
  .l1-mail-check__state { grid-column: 2; }
}


/* ---- SSL/TLS ----
   Dense tables and one install form, which is the layout every hosting
   customer has already learned. An earlier pass made each hostname a card
   with its own collapsed install form; that turned an account with a dozen
   domains into a dozen identical forms and gave no way to see the whole
   account at once. Installing a certificate is one action, so it is one form
   with a domain selector, and the rows go back to being rows. */
.l1-tls-table td { vertical-align: top; }

/* Two or three controls per row, and they must not become a column one word
   wide on a narrow viewport or stack into the neighbouring cell. */
.l1-tls-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  align-items: center;
}

.l1-tls-table__actions form { margin: 0; }

/* PEM blocks are 64-column base64. Anything but a monospace face at a small
   size wraps them into something a customer cannot eyeball for truncation,
   which is the one thing they need to check before submitting. */
.l1-tls-install textarea {
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.l1-tls-install .ui-form-grid { margin-bottom: var(--l1-space-4); }

.l1-tls-explainer ul {
  color: var(--l1-ink-soft);
  display: grid;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-1);
  margin: 0 0 var(--l1-space-3);
  padding-left: var(--l1-space-4);
}

/* Regenerating a placeholder key is a real control and almost never the one
   somebody came for, so it is disclosed rather than displayed. */
.l1-tls-advanced > summary {
  cursor: pointer;
  font-size: var(--l1-text-dense);
  padding: var(--l1-space-1) 0;
}

.l1-tls-advanced__rows {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  margin-top: var(--l1-space-2);
}

.l1-tls-advanced__rows form { margin: 0; }

/* The certificate authority's own sentence, quoted verbatim. Set apart from
   our explanation of it, because they are two different voices and reading
   them as one makes the quote look like something we chose to say. */
.l1-tls-detail {
  border-left: 2px solid var(--l1-border-strong);
  color: var(--l1-ink-muted);
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  margin-top: var(--l1-space-1);
  padding-left: var(--l1-space-2);
}

.l1-topbar__search {
  display: flex;
  align-items: center;
  gap: var(--l1-space-2);
  flex: 1 1 32rem;
  min-width: 14rem;
  max-width: 36rem;
  margin: 0;
  min-height: 2.5rem;
  padding: 0 .35rem 0 var(--l1-space-3);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-sm);
  background: var(--l1-surface-2);
}
.l1-topbar__search:focus-within {
  border-color: var(--l1-brand);
  outline: 2px solid var(--l1-brand-soft);
  outline-offset: 1px;
}
.l1-topbar__search-ai {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--l1-brand-strong);
}
.l1-topbar__search-ai svg {
  width: 1rem;
  height: 1rem;
}
.l1-topbar__search-input {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  padding: .55rem 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--l1-ink);
  font: inherit;
  font-size: .8125rem;
}
.l1-topbar__search-input::-webkit-search-decoration,
.l1-topbar__search-input::-webkit-search-cancel-button { appearance: none; }
.l1-topbar__search-input::placeholder { color: var(--l1-ink-muted); }
.l1-topbar__search-submit {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  display: inline-flex;
  flex: 0 0 2rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.l1-topbar__search-submit:hover { color: var(--l1-ink); background: var(--l1-surface-3); }
.l1-topbar__search-submit svg { width: 1rem; height: 1rem; }
.l1-topbar__search-shortcut { display: none; }

/* Client feature lookup uses the same capped field as console search, with
   equal spacers centering it between Public site (left) and Create (right). */
.l1-topbar__create {
  flex: none;
}
/* Create is the client bar's one filled control, in green rather than the
   brand blue so it never competes with a page's own primary action. Four
   classes, because tailwind.css loads later and styles
   .l1-console-body .ui-btn:not(.ui-btn--primary) at three. */
.l1-client-portal-body .l1-topbar .ui-btn.l1-create-btn {
  background: var(--l1-ok-fill);
  border-color: var(--l1-ok-fill);
  color: var(--l1-on-ok-fill);
  min-height: var(--l1-control-h-md);
  padding-inline: .75rem;
  white-space: nowrap;
}
.l1-client-portal-body .l1-topbar .ui-btn.l1-create-btn:hover,
.l1-client-portal-body .l1-topbar .ui-btn.l1-create-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--l1-ok-fill) 86%, #000);
  border-color: color-mix(in srgb, var(--l1-ok-fill) 86%, #000);
  color: var(--l1-on-ok-fill);
}
.l1-client-portal-body .l1-topbar__actions { gap: var(--l1-space-2); }

.l1-ask-ai-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  gap: .5rem;
  height: var(--l1-control-h-md);
  padding: 0 .625rem 0 .25rem;
  white-space: nowrap;
}
.l1-ask-ai-toggle:hover,
.l1-ask-ai-toggle[aria-expanded="true"] { background: var(--l1-surface-3); }
.l1-ask-ai-toggle:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: 2px; }

/* Credit counter: balance (opens Billing) and an add-credit segment. */
.l1-credit-counter {
  align-items: stretch;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  flex: none;
  height: var(--l1-control-h-md);
  overflow: hidden;
}
.l1-credit-counter__balance {
  align-items: center;
  color: var(--l1-ink);
  display: inline-flex;
  font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  gap: .5rem;
  padding: 0 .625rem;
  text-decoration: none;
}
.l1-credit-counter__balance:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-credit-counter__dot {
  background: var(--l1-ok);
  border-radius: 999px;
  flex: none;
  height: .5rem;
  width: .5rem;
}
.l1-credit-counter[data-tone="danger"] .l1-credit-counter__dot { background: var(--l1-danger); }
.l1-credit-counter__add {
  align-items: center;
  background: var(--l1-ok-soft);
  border-left: 1px solid var(--l1-border);
  color: var(--l1-ok);
  display: inline-flex;
  justify-content: center;
  width: var(--l1-control-h-md);
}
.l1-credit-counter__add:hover { background: color-mix(in srgb, var(--l1-ok) 18%, var(--l1-surface-1)); color: var(--l1-ok); }
.l1-credit-counter__add :is(svg, i[data-lucide]) { height: 1rem; width: 1rem; }
.l1-credit-counter a:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }

/* The client avatar stands alone: name and role open at the top of its menu. */
.l1-client-portal-body.l1-console-v3 .l1-topbar__avatar-button {
  border-radius: var(--l1-radius-pill);
  margin-left: 0;
  padding: 2px;
}
.l1-client-portal-body .l1-topbar__avatar { height: 32px; width: 32px; }

@media (max-width: 767.98px) {
  .l1-ask-ai-toggle { padding-right: .25rem; }
  .l1-ask-ai-toggle__label { display: none; }
}
@media (max-width: 479.98px) {
  .l1-create-btn__label, .l1-create-btn__chevron { display: none; }
  .l1-client-portal-body .l1-topbar .ui-btn.l1-create-btn { padding-inline: .5rem; }
  .l1-client-portal-body .l1-topbar__actions { gap: var(--l1-space-1); }
}
.l1-feature-search {
  position: relative;
  flex: 1 1 32rem;
  min-width: 14rem;
  max-width: 36rem;
}
.l1-feature-search__field { display: flex; align-items: center; gap: var(--l1-space-2); min-height: 2.5rem; padding: 0 var(--l1-space-3); border: 1px solid var(--l1-border-strong); border-radius: var(--l1-radius-sm); background: var(--l1-surface-2); color: var(--l1-ink-muted); }
.l1-feature-search__field:focus-within { border-color: var(--l1-brand); outline: 2px solid var(--l1-brand-soft); outline-offset: 1px; }
.l1-feature-search__field > svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.l1-feature-search__input { appearance: none; min-width: 0; width: 100%; padding: .6rem 0; border: 0; outline: 0; background: transparent; color: var(--l1-ink); font: inherit; font-size: .8125rem; }
.l1-feature-search__input::placeholder { color: var(--l1-ink-muted); }
.l1-feature-search__key { flex-shrink: 0; padding: .1rem .3rem; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); background: var(--l1-surface-1); color: var(--l1-ink-muted); font-size: .625rem; }
.l1-feature-search__panel { position: absolute; inset: calc(100% + .5rem) 0 auto 0; z-index: 110; width: auto; max-height: min(34rem, calc(100dvh - 6rem)); overflow: auto; border: 1px solid var(--l1-border-strong); border-radius: var(--l1-radius-md); background: var(--l1-surface-1); color: var(--l1-ink); box-shadow: var(--l1-shadow-md); }
.l1-feature-search__heading, .l1-feature-search__hint { margin: 0; padding: var(--l1-space-3); color: var(--l1-ink-muted); font-size: .7rem; }
.l1-feature-search__heading { font-weight: 600; border-bottom: 1px solid var(--l1-border); }
.l1-feature-search__hint { border-top: 1px solid var(--l1-border); }
.l1-feature-search__results { margin: 0; padding: var(--l1-space-1); list-style: none; max-height: min(26rem, calc(100dvh - 13rem)); overflow: auto; }
.l1-feature-search__result { display: flex; align-items: center; justify-content: space-between; gap: var(--l1-space-3); min-height: 3.5rem; padding: var(--l1-space-3); border-radius: var(--l1-radius-sm); color: var(--l1-ink); text-decoration: none; }
.l1-feature-search__result:hover, .l1-feature-search__result[aria-selected="true"] { color: var(--l1-ink); background: var(--l1-brand-soft); outline: 1px solid var(--l1-border); }
.l1-feature-search__result strong, .l1-feature-search__result small { display: block; }
.l1-feature-search__result strong { font-size: .8125rem; font-weight: 600; }
.l1-feature-search__result small { margin-top: .2rem; color: var(--l1-ink-muted); font-size: .72rem; }
.l1-feature-search__category { flex-shrink: 0; font-size: .65rem; color: var(--l1-ink-muted); }
.l1-feature-search__empty { margin: 0; padding: var(--l1-space-5) var(--l1-space-3); font-size: .8125rem; color: var(--l1-ink-muted); }
.l1-feature-search [hidden], [data-l1-ddos-indicator][hidden], [data-l1-ddos-badge][hidden] { display: none !important; }
/* Phones get a search icon instead of the field (it takes the Public site
   link's place); it opens the same palette as a sheet across the top. */
.l1-topbar__search-open { display: none; }
@media (max-width: 767px) {
  /* Same cutoff as the topbar brand: once the logo is gone, drop the field
     so the stage bar stays one row. */
  .l1-feature-search { display: none; }
  .l1-client-portal-body .l1-topbar__actions { margin-inline-start: auto; }
  .l1-topbar__search-open { display: inline-flex; }
  .l1-feature-search[data-phone-open] {
    background: var(--l1-surface-1);
    border-bottom: 1px solid var(--l1-border);
    box-shadow: var(--l1-shadow-lg);
    display: block;
    inset: 0 0 auto;
    max-width: none;
    min-width: 0;
    padding: var(--l1-space-3);
    position: fixed;
    z-index: 1060;
  }
  .l1-feature-search[data-phone-open] .l1-feature-search__panel {
    border: 0;
    box-shadow: none;
    margin-top: var(--l1-space-2);
    max-height: calc(100dvh - 5rem);
    position: static;
  }
}
/* brightness(.6) used to live here: the client mark was the pale grey SVG and
   washed out on a light top bar. It is the blue mark now, which carries its own
   contrast, and dimming it only muddies the colour. */
html[data-l1-theme="light"] .l1-client-portal-body .l1-topbar__brand img { filter: none; }
.l1-aegis-indicator { position: relative; color: var(--l1-danger) !important; }
.l1-aegis-indicator__dot { position: absolute; top: .2rem; right: .2rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--l1-danger); }
.l1-section-workspace { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--l1-space-5); align-items: start; }
.l1-section-workspace__content { min-width: 0; }
.l1-section-sidebar { position: sticky; top: var(--l1-space-4); min-width: 0; padding-right: var(--l1-space-4); border-right: 1px solid var(--l1-border); }
.l1-section-sidebar__head { display: flex; align-items: center; gap: var(--l1-space-2); padding: var(--l1-space-2) 0 var(--l1-space-4); color: var(--l1-ink); font-size: .9rem; }
.l1-section-sidebar__head svg { width: 1.125rem; height: 1.125rem; color: var(--l1-ink-muted); }
.l1-section-sidebar__nav { display: flex; flex-direction: column; gap: var(--l1-space-1); }
.l1-section-sidebar__group { padding: var(--l1-space-3) var(--l1-space-2) var(--l1-space-1); font-size: .65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--l1-ink-muted); }
.l1-section-sidebar__link { display: flex; align-items: center; gap: var(--l1-space-2); min-height: 2.25rem; padding: var(--l1-space-2); color: var(--l1-ink-muted); font-size: .8125rem; line-height: 1.4; border-radius: var(--l1-radius-sm); text-decoration: none; }
@media (pointer: coarse) {
  .l1-section-sidebar__link { min-height: 2.75rem; }
}
.l1-section-sidebar__link > svg, .l1-section-sidebar__alert svg { flex-shrink: 0; width: 1rem; height: 1rem; }
.l1-section-sidebar__link:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-section-sidebar__link[aria-current="page"] { background: var(--l1-brand-soft); color: var(--l1-brand); font-weight: 600; }
.l1-section-sidebar__link strong, .l1-section-sidebar__link small { display: block; }
.l1-section-sidebar__link small { margin-top: .15rem; font-size: .7rem; font-weight: 400; }
.l1-section-sidebar__alert { margin-left: auto; color: var(--l1-danger); }
/* A menu entry that opens another area is marked as a link out: "Opens
   Aegis" under its name and an arrow at the end of the row. */
.l1-section-sidebar__link > .l1-section-sidebar__out { color: var(--l1-ink-muted); height: .875rem; margin-left: auto; width: .875rem; }
/* Client Settings menu: invitations waiting on General. */
.l1-settings-nav__badge {
  min-width: 1.25rem;
  margin-left: auto;
  padding: 0 .375rem;
  border-radius: var(--l1-radius-pill);
  background: var(--l1-brand);
  color: var(--l1-on-brand);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  line-height: 1.25rem;
  text-align: center;
}
.l1-section-sidebar__mobile { display: none; }
/* Settings pages read as one column beside the menu, the way Vercel and
   Linear lay them out, and a key/value list keeps its value next to its label
   instead of across the page. */
.l1-client-portal-body .l1-section-workspace:has(> .l1-settings-nav) > .l1-section-workspace__content > .ui-page { max-width: 58rem; }
/* The API reference is a document with its own index, not a settings form: it
   takes the full column, and its index becomes a right rail once wide enough. */
.l1-client-portal-body .l1-section-workspace:has(> .l1-settings-nav) > .l1-section-workspace__content > .ui-page:has(> .ui-ref) { max-width: none; }
.l1-client-portal-body .l1-section-workspace:has(> .l1-settings-nav) .ui-kv__row { grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr); }
/* Settings > Profile: the person's own details as a short form. */
.l1-profile-form { display: grid; gap: 1rem; }
.l1-profile-form__names { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.l1-profile-form__names > * { margin: 0; min-width: 0; }
.l1-profile-form__note { display: block; margin-top: .125rem; }

@media (max-width: 1399px) {
  .l1-client-portal-body .l1-topbar__workspace--client { display: flex; flex-shrink: 0; max-width: 14rem; }
  .l1-client-portal-body .l1-topbar__account-copy,
  .l1-client-portal-body .l1-topbar__account-chevron,
  .l1-client-portal-body .l1-topbar__link { display: none; }
}
/* Equal spacers only centre the search *between* the two side groups, and the
   workspace pill and the account controls are never the same width -- the bar
   drops the account name below 1400px, which on its own swung the field 23px
   off the midpoint. Making the two side groups equal flex columns instead
   lands it on the bar's true centre at every width, and unlike absolute
   positioning it still shrinks rather than sliding under the pill when a
   tenant name is long. Sibling combinator so a bar with no pill keeps the
   growing spacers above, and from 992px up only: below that the brand and the
   menu toggle come back as separate items on the left and there is no
   symmetry left to hold. The pill's medium-width cap has to move onto the
   button, because capping the column freezes it short of its half and hands
   the difference to the other side. Both columns ask for the same 14rem
   the pill is capped at rather than for zero: equal bases stay equal columns
   either way, but a zero basis leaves the field at full width and crushes the
   pill to nothing on a 992px bar, where what should give first is the search.
   Keep the two numbers the same. Shrinking the field faster than the columns
   is the rest of that: flexbox takes space proportionally rather than in
   order, so an even split reads as the tenant name losing characters while a
   400px search box sits half empty. */
@media (min-width: 992px) {
  .l1-client-portal-body .l1-topbar__workspace--client ~ .l1-topbar__spacer { flex: 0 0 var(--l1-space-4); }
  .l1-client-portal-body .l1-topbar__workspace--client,
  .l1-client-portal-body .l1-topbar__workspace--client ~ .l1-topbar__actions { flex: 1 1 14rem; min-width: 0; }
  .l1-client-portal-body .l1-topbar__workspace--client { max-width: none; }
  .l1-client-portal-body .l1-topbar__workspace--client ~ .l1-topbar__actions { justify-content: flex-end; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .l1-client-portal-body .l1-topbar__workspace--client .l1-topbar__tenant-toggle { max-width: 14rem; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .l1-section-workspace { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--l1-space-4); }
}
@media (max-width: 767px) {
  .l1-section-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--l1-space-5); }
  /* One phone pattern for every section menu (billing, account, organization,
     instance, networking, Aegis, referrals): a single row of tabs that scrolls
     sideways, current tab underlined. The page heading names the section, so
     the menu heading and link icons drop out, and a stack of links never
     pushes the page down. Group labels stay, as small captions inside the row,
     so a long menu (Settings) keeps its Organization, Account and Security
     sets. The right edge fades, with room to scroll the last tab clear of it,
     to say more tabs sit off screen (the server tab row does the same).
     client-workspace.js scrolls the current tab into view. */
  .l1-section-sidebar { position: static; padding: 0; border-right: 0; }
  .l1-section-sidebar__head,
  .l1-section-sidebar__nav .l1-section-sidebar__link > svg,
  .l1-section-sidebar__nav .l1-section-sidebar__alert { display: none; }
  .l1-section-sidebar__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-bottom: 1px solid var(--l1-border);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    padding-inline-end: 2rem;
  }
  .l1-section-sidebar__nav .l1-section-sidebar__group {
    align-self: center;
    flex: none;
    margin-inline-start: var(--l1-space-2);
    padding: .125rem var(--l1-space-2) .125rem var(--l1-space-3);
    border-left: 1px solid var(--l1-border);
    white-space: nowrap;
  }
  .l1-section-sidebar__nav .l1-section-sidebar__group:first-child {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-left: 0;
  }
  /* Header first, then the tab row, then the page. The section menu comes
     first in the markup (it is the sidebar on wider screens), so on a phone
     the content wrapper and the page frame step aside (display: contents) and
     the head, the menu and the page body are ordered directly. Messages and
     account notices keep their place above the head. Only pages whose head is
     a direct child of the page frame take part; the applications canvas keeps
     its own full-height frame, and server pages carry their own tab row. */
  /* A box-less page frame is no longer a size container, so the workspace
     takes over as client-workspace and the pages' phone container queries
     keep working. */
  .l1-client-portal-body .l1-section-workspace:has(> .l1-section-workspace__content > .l1-client-page:not(.l1-canvas-page) > .ui-page__head) {
    align-items: stretch;
    container: client-workspace / inline-size;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .l1-client-portal-body .l1-section-workspace:has(> .l1-section-workspace__content > .l1-client-page:not(.l1-canvas-page) > .ui-page__head) > .l1-section-workspace__content,
  .l1-client-portal-body .l1-section-workspace:has(> .l1-section-workspace__content > .l1-client-page:not(.l1-canvas-page) > .ui-page__head) > .l1-section-workspace__content > .l1-client-page {
    display: contents;
  }
  .l1-client-portal-body .l1-section-workspace:has(> .l1-section-workspace__content > .l1-client-page:not(.l1-canvas-page) > .ui-page__head) > .l1-section-sidebar {
    order: 1;
  }
  .l1-client-portal-body .l1-section-workspace:has(> .l1-section-workspace__content > .l1-client-page:not(.l1-canvas-page) > .ui-page__head) > .l1-section-workspace__content > .l1-client-page > :not(.ui-page__head) {
    min-width: 0;
    order: 2;
  }
  .l1-section-sidebar__nav::-webkit-scrollbar { display: none; }
  /* The phone tab row only switches between pages of this area, so links
     out of it, and their group label, drop out. */
  .l1-section-sidebar__nav .l1-section-sidebar__link--out,
  .l1-section-sidebar__nav .l1-section-sidebar__group--out { display: none; }
  .l1-section-sidebar__nav .l1-section-sidebar__link {
    flex: none;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--l1-space-2) var(--l1-space-3);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .l1-section-sidebar__nav .l1-section-sidebar__link[aria-current="page"] {
    background: transparent;
    border-bottom-color: var(--l1-brand);
  }
  /* LayerOne settings use the same scrolling row (no disclosure). */
  /* Admin console tab strips (Services, Logs, Monitoring, Revenue, IP
     addresses, Website and the rest of templates/layouts/_console_*_tabs.html)
     follow the same phone pattern: one row that scrolls sideways instead of
     wrapping onto two or three lines. app.js scrolls the current tab into view. */
  .l1-admin-console-body .ui-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .l1-admin-console-body .ui-tabs::-webkit-scrollbar { display: none; }
  .l1-admin-console-body .ui-tabs__link { flex: none; scroll-snap-align: start; }
  .l1-client-portal-body .l1-topbar__menu-toggle { flex-shrink: 0; }
  .l1-client-portal-body .l1-topbar__workspace--client { flex: 1; max-width: none; }
  .l1-topbar__tenant-toggle, .l1-topbar__personal { max-width: 100%; min-width: 0; }
  .l1-client-portal-body .l1-topbar__workspace--client .l1-topbar__workspace-icon { display: none; }
  .l1-feature-search__panel { left: 0; right: 0; width: 100%; }
  .l1-feature-search__key, .l1-feature-search__category { display: none; }
  .l1-client-portal-body .l1-topbar__brand, .l1-client-portal-body .l1-topbar__spacer, .l1-client-portal-body .l1-topbar__link { display: none; }
}
@media (max-width: 991.98px) {
  .l1-client-sidebar-open .l1-revenue-bot { visibility: hidden; pointer-events: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .l1-admin-console-body .l1-topbar__workspace { display: none; }
}
@media (max-width: 767px) {
  .l1-topbar__search { display: none; }
  .l1-topbar__search-shortcut { display: inline-flex; }
}

/* LayerOne Aegis: scoped network instrumentation using the shared console tokens. */
.l1-aegis-workspace { min-width: 0; container-type: inline-size; }
/* Status strip that opens the DDoS protection page: one line of facts, the
   tone on a left rule so an active attack reads before anything else. */
/* A left rule, not an inset shadow: dark mode strips panel shadows with !important. */
.l1-client-portal-body .l1-aegis-workspace .l1-aegis-status { border-left: 3px solid var(--l1-border-strong); }
.l1-client-portal-body .l1-aegis-workspace .l1-aegis-status[data-tone="ok"] { border-left-color: var(--l1-ok); }
.l1-client-portal-body .l1-aegis-workspace .l1-aegis-status[data-tone="danger"] { border-left-color: var(--l1-danger); background: var(--l1-danger-soft); }
.l1-aegis-status__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l1-space-2) var(--l1-space-5); min-width: 0; padding-block: var(--l1-space-1); }
.l1-aegis-status__facts > .ui-status { white-space: normal; }
.l1-aegis-status__lead { font-weight: var(--l1-fw-semibold); }
.l1-aegis-status__fact { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); }
/* No traffic in the chosen window: the graphs give way to one empty state. */
.l1-aegis-workspace[data-aegis-traffic="empty"] [data-aegis-when-data],
.l1-aegis-workspace:not([data-aegis-traffic="empty"]) [data-aegis-when-empty] { display: none; }
.l1-aegis-empty-note { margin: 0; text-align: center; }
.l1-aegis-empty-note:empty { display: none; }
.l1-aegis-toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--l1-space-3); padding: var(--l1-space-4); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); background: var(--l1-surface-2); }
.l1-aegis-toolbar > p { margin: 0; padding-bottom: var(--l1-space-3); overflow-wrap: anywhere; }
.l1-aegis-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--l1-space-3); min-width: 0; max-width: 100%; }
.l1-aegis-controls label { font-size: .8125rem; color: var(--l1-ink-muted); }
.l1-aegis-controls__field { display: grid; gap: var(--l1-space-1); min-width: 0; max-width: min(22rem, 100%); font-weight: 600; }
.l1-aegis-controls select { width: auto; min-width: 0; max-width: 100%; min-height: 2.75rem; text-overflow: ellipsis; }
.l1-aegis-controls button { align-self: flex-end; }
.l1-aegis-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--l1-border); }
.l1-aegis-metrics > div { min-width: 0; padding: var(--l1-space-4); }
.l1-aegis-metrics > div + div { border-left: 1px solid var(--l1-border); }
.l1-aegis-metrics dt { display: flex; align-items: center; gap: var(--l1-space-2); color: var(--l1-ink-soft); font-size: .75rem; font-weight: 600; }
.l1-aegis-metrics dd { margin: var(--l1-space-2) 0; font-family: var(--l1-font-data); font-variant-numeric: tabular-nums; font-size: clamp(1.125rem, 2cqi, 1.625rem); line-height: 1.4; letter-spacing: -.05em; color: var(--l1-ink); overflow-wrap: anywhere; }
.l1-aegis-metrics dd small { display: block; margin-top: var(--l1-space-2); color: var(--l1-ink-muted); font: .6875rem/1.5 var(--l1-font-body); letter-spacing: normal; }
.l1-aegis-direction { width: .5rem; height: .5rem; border-radius: 50%; background: var(--l1-info); }
.l1-aegis-direction[data-series="outbound"] { background: var(--l1-warn); }
.l1-aegis-freshness { font-variant-numeric: tabular-nums; }
.l1-aegis-charts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.l1-aegis-chart { min-width: 0; padding: var(--l1-space-4); }
.l1-aegis-chart + .l1-aegis-chart { border-top: 1px solid var(--l1-border); }
.l1-aegis-chart__heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--l1-space-3); flex-wrap: wrap; }
.l1-aegis-chart__heading h3 { margin: 0; font-size: .875rem; font-weight: 600; color: var(--l1-ink); }
.l1-aegis-chart__heading > span { font-family: var(--l1-font-data); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.l1-aegis-legend { display: flex; flex-wrap: wrap; gap: var(--l1-space-2) var(--l1-space-4); padding: 0; margin: var(--l1-space-3) 0; list-style: none; font-size: .75rem; color: var(--l1-ink-muted); }
.l1-aegis-legend li { display: inline-flex; align-items: center; gap: var(--l1-space-2); }
.l1-aegis-legend li[hidden] { display: none; }
.l1-aegis-legend li::before { content: ""; width: 1.5rem; border-top: 2px solid var(--l1-brand); }
.l1-aegis-legend [data-series="inbound"]::before { border-color: var(--l1-info); }
.l1-aegis-legend [data-series="outbound"]::before { border-color: var(--l1-warn); border-top-style: dashed; }
.l1-aegis-legend [data-series="expected"]::before { border-color: var(--l1-ink-muted); border-top-style: dashed; }
.l1-aegis-legend [data-series="ddos"]::before { border-color: var(--l1-danger); }
.l1-aegis-chart__plot { position: relative; min-width: 0; background: var(--l1-surface-2); border-radius: var(--l1-radius-sm); }
.l1-aegis-chart__plot svg { display: block; width: 100%; height: 240px; overflow: visible; }
.l1-aegis-chart__grid path { fill: none; stroke: var(--l1-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.l1-aegis-chart__axis path { fill: none; stroke: var(--l1-border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.l1-aegis-chart__axis text { fill: var(--l1-ink-muted); font-family: var(--l1-font-data); font-size: 10px; }
.l1-aegis-chart__line { fill: none; stroke: var(--l1-brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.l1-aegis-chart__line[data-series="total"] { stroke-width: 2.5; }
.l1-aegis-chart__line[data-series="inbound"] { stroke: var(--l1-info); }
.l1-aegis-chart__line[data-series="outbound"] { stroke: var(--l1-warn); stroke-dasharray: 8 3; }
.l1-aegis-chart__line[data-series="expected"] { stroke: var(--l1-ink-muted); stroke-dasharray: 4 4; }
.l1-aegis-chart__line[data-series="ddos"] { stroke: var(--l1-danger); stroke-width: 2.5; }
.l1-aegis-chart__cursor { pointer-events: none; }
.l1-aegis-chart__crosshair { fill: none; stroke: var(--l1-ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.l1-aegis-chart__cursor .l1-aegis-chart__point { fill: var(--l1-surface); stroke-dasharray: none; }
.l1-aegis-chart__tooltip { position: absolute; z-index: 2; top: 12px; width: max-content; max-width: calc(100% - 16px); padding: var(--l1-space-3); border: 1px solid var(--l1-border-strong); border-radius: var(--l1-radius-sm); background: var(--l1-surface); box-shadow: var(--l1-shadow-md); color: var(--l1-ink); font-size: .75rem; font-variant-numeric: tabular-nums; pointer-events: none; }
.l1-aegis-chart__tooltip[hidden] { display: none; }
.l1-aegis-chart__tooltip dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--l1-space-2) var(--l1-space-3); margin: var(--l1-space-3) 0 0; }
.l1-aegis-chart__tooltip dt { display: flex; align-items: center; gap: var(--l1-space-2); }
.l1-aegis-chart__tooltip dt::before { content: ""; width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 50%; background: var(--l1-brand); }
.l1-aegis-chart__tooltip [data-series="inbound"]::before { background: var(--l1-info); }
.l1-aegis-chart__tooltip [data-series="outbound"]::before { background: var(--l1-warn); }
.l1-aegis-chart__tooltip [data-series="expected"]::before { background: var(--l1-ink-muted); }
.l1-aegis-chart__tooltip [data-series="ddos"]::before { background: var(--l1-danger); }
.l1-aegis-chart__tooltip dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.l1-aegis-chart__tooltip p { margin: var(--l1-space-2) 0 0; }
.l1-aegis-chart__empty { position: absolute; top: 36%; left: 15%; right: 5%; margin: 0; text-align: center; font-size: .8125rem; color: var(--l1-ink-muted); }
.l1-aegis-chart__empty[hidden] { display: none; }
.l1-aegis-evidence { display: grid; gap: var(--l1-space-2); }
.l1-aegis-evidence p { margin: 0; }
.l1-aegis-observations { display: grid; gap: .375rem; margin: 0; min-width: 18rem; }
.l1-aegis-observations > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; gap: .5rem; }
.l1-aegis-observations dt { margin: 0; color: var(--l1-ink-muted); font-size: .6875rem; font-weight: var(--l1-fw-medium); }
.l1-aegis-observations dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.l1-aegis-observations__applications { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.l1-aegis-observations__applications > li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .125rem .5rem; }
.l1-aegis-observations__applications strong { font-weight: var(--l1-fw-medium); }
.l1-aegis-observations__service > summary { padding-block: .125rem; cursor: pointer; }
.l1-aegis-observations__service > summary:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: 2px; }
.l1-aegis-observations__service > ul { display: grid; gap: .375rem; margin: .25rem 0; padding-left: 1rem; }
@media (pointer: coarse) {
  .l1-aegis-observations__service > summary { min-height: 2.75rem; align-content: center; }
}
.l1-aegis-top-applications { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--l1-space-5) var(--l1-space-6); margin: 0; padding: var(--l1-space-4); list-style: none; }
.l1-aegis-top-applications__item { display: flex; align-items: flex-start; gap: var(--l1-space-3); min-width: 0; }
.l1-aegis-top-applications__icon { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); background: var(--l1-brand-soft); color: var(--l1-brand); }
.l1-aegis-top-applications__icon svg { width: 1.25rem; height: 1.25rem; }
.l1-aegis-top-applications__icon .fa-brands { font-size: 1.25rem; }
.l1-aegis-top-applications__more { border-top: 1px solid var(--l1-border); }
.l1-aegis-top-applications__more[hidden] { display: none; }
.l1-aegis-top-applications__more > summary { padding: var(--l1-space-3) var(--l1-space-4); min-height: 2.75rem; cursor: pointer; color: var(--l1-brand); font-size: .8125rem; font-weight: 600; }
.l1-aegis-top-applications__more > summary:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }
.l1-aegis-top-applications__content { flex: 1; min-width: 0; }
.l1-aegis-top-applications__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-3); }
.l1-aegis-top-applications__heading h3 { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--l1-ink); overflow-wrap: anywhere; }
.l1-aegis-top-applications__heading strong { font: 600 .8125rem var(--l1-font-data); color: var(--l1-ink); white-space: nowrap; }
.l1-aegis-top-applications__content dl { display: flex; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-3); margin: var(--l1-space-2) 0; font-size: .6875rem; color: var(--l1-ink-muted); }
.l1-aegis-top-applications__content dl > div { display: flex; flex-wrap: wrap; gap: var(--l1-space-1); }
.l1-aegis-top-applications__content dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--l1-ink-soft); }
.l1-aegis-top-applications__bar { height: .25rem; border-radius: var(--l1-radius-sm); background: var(--l1-surface-2); overflow: hidden; }
.l1-aegis-top-applications__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--l1-brand); }
.l1-aegis-top-applications__empty { grid-column: 1 / -1; padding-block: var(--l1-space-3); font-size: .8125rem; color: var(--l1-ink-muted); }
.l1-aegis-table { min-width: 44rem; }
.l1-aegis-table th, .l1-aegis-table td { min-width: 8rem; }
.l1-aegis-table td { font-variant-numeric: tabular-nums; }
.l1-aegis-table td:last-child { min-width: 15rem; }
.l1-aegis-table details { min-width: 14rem; max-width: 32rem; }
.l1-aegis-table summary { cursor: pointer; }
.l1-aegis-table details ul { padding-left: var(--l1-space-4); }
.l1-aegis-table details li { padding-block: var(--l1-space-2); overflow-wrap: anywhere; font-size: .75rem; line-height: 1.6; }
.l1-aegis-device-inventory { min-width: 0; }
.l1-aegis-instance-list { margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--l1-border); }
.l1-aegis-instance-row + .l1-aegis-instance-row { border-top: 1px solid var(--l1-border); }
.l1-aegis-instance-button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--l1-space-4); width: 100%; min-height: 5rem; padding: var(--l1-space-4); border: 0; border-radius: 0; background: transparent; color: var(--l1-ink); font: inherit; text-align: left; cursor: pointer; }
.l1-aegis-instance-button:hover { background: var(--l1-surface-2); }
.l1-aegis-instance-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); background: var(--l1-surface); color: var(--l1-ink-soft); }
.l1-aegis-instance-icon svg { width: 1.25rem; height: 1.25rem; }
.l1-instance-os.l1-aegis-instance-os { margin-top: 0; }
.l1-aegis-instance-identity { display: grid; gap: var(--l1-space-1); min-width: 0; overflow-wrap: anywhere; }
.l1-aegis-instance-identity strong { font-size: .875rem; font-weight: 600; }
.l1-aegis-instance-identity > span { color: var(--l1-ink-muted); font: .75rem/1.5 var(--l1-font-data); }
.l1-aegis-instance-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--l1-space-2) var(--l1-space-4); color: var(--l1-ink-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.l1-aegis-instance-counts > span { white-space: nowrap; }
.l1-aegis-instance-counts > .l1-aegis-instance-vulnerabilities { display: inline-flex; align-items: center; gap: var(--l1-space-1); padding: .125rem .375rem; border: 1px solid color-mix(in srgb, var(--l1-warn) 30%, transparent); border-radius: var(--l1-radius-sm); background: var(--l1-warn-soft); color: var(--l1-warn); font-weight: 600; }
.l1-aegis-instance-vulnerabilities > span[aria-hidden="true"] { display: inline-flex; }
.l1-aegis-instance-vulnerabilities svg { width: .875rem; height: .875rem; fill: currentColor; }
.l1-aegis-instance-chevron { display: flex; color: var(--l1-ink-muted); }
.l1-aegis-instance-chevron svg { width: 1rem; height: 1rem; }
.l1-aegis-instance-detail { display: grid; gap: var(--l1-space-6); min-width: 0; }
.l1-aegis-instance-back { justify-self: start; }
.l1-aegis-instance-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--l1-space-3); padding-bottom: var(--l1-space-5); border-bottom: 1px solid var(--l1-border); }
.l1-aegis-instance-head > div { min-width: 0; }
.l1-aegis-instance-head h2 { margin: 0; color: var(--l1-ink); font-size: 1.125rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.l1-aegis-instance-head p { margin: var(--l1-space-1) 0 0; color: var(--l1-ink-muted); font: .75rem/1.6 var(--l1-font-data); overflow-wrap: anywhere; }
.l1-aegis-instance-section { min-width: 0; }
.l1-aegis-instance-section > h3 { margin: 0 0 var(--l1-space-1); color: var(--l1-ink); font-size: .9375rem; font-weight: 600; }
.l1-aegis-instance-section > p { margin: 0 0 var(--l1-space-4); color: var(--l1-ink-muted); font-size: .8125rem; line-height: 1.6; }
.l1-aegis-port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); align-items: start; gap: var(--l1-space-3); padding: 0; margin: 0; list-style: none; }
.l1-aegis-port-grid > li { min-width: 0; }
.l1-aegis-port-grid > li:has(> .l1-aegis-port[open]) { grid-column: 1 / -1; }
.l1-aegis-port { border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-surface); overflow-wrap: anywhere; }
.l1-aegis-port > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--l1-space-2); min-height: 2.75rem; padding: var(--l1-space-4); border-radius: inherit; cursor: pointer; list-style: none; }
.l1-aegis-port > summary::-webkit-details-marker { display: none; }
.l1-aegis-port > summary::after { content: ""; grid-column: 2; grid-row: 1; width: .375rem; height: .375rem; margin-right: .125rem; border-right: 1.5px solid var(--l1-ink-muted); border-bottom: 1.5px solid var(--l1-ink-muted); transform: rotate(45deg); }
.l1-aegis-port > summary:hover { background: var(--l1-surface-2); }
.l1-aegis-port[open] { border-color: var(--l1-border-strong); }
.l1-aegis-port[open] > summary { border-bottom: 1px solid var(--l1-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.l1-aegis-port[open] > summary::after { transform: rotate(225deg); }
.l1-aegis-port-number { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--l1-space-2); min-width: 0; }
.l1-aegis-port-number strong { color: var(--l1-ink); font: 600 1.125rem/1.4 var(--l1-font-data); font-variant-numeric: tabular-nums; }
.l1-aegis-port-number > span { color: var(--l1-ink-muted); font-size: .6875rem; }
.l1-aegis-port-service { grid-column: 1 / -1; color: var(--l1-ink-soft); font-size: .8125rem; line-height: 1.5; }
.l1-aegis-port-address { grid-column: 1 / -1; color: var(--l1-ink-muted); font: .6875rem/1.5 var(--l1-font-data); }
.l1-aegis-port-warning { grid-column: 1 / -1; color: var(--l1-warn); font-size: .6875rem; line-height: 1.5; }
.l1-aegis-port-detail { min-width: 0; padding: var(--l1-space-3) var(--l1-space-4); font-size: .75rem; line-height: 1.6; }
.l1-aegis-port-detail > p { margin: 0 0 var(--l1-space-2); color: var(--l1-ink-muted); }
.l1-aegis-port-detail > :last-child { margin-bottom: 0; }
.l1-aegis-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr)); gap: var(--l1-space-3); padding: 0; margin: 0; list-style: none; }
.l1-aegis-app-grid > li { min-width: 0; }
.l1-aegis-app-button { display: flex; flex-direction: column; align-items: center; gap: var(--l1-space-2); width: 100%; height: 100%; min-height: 8rem; padding: var(--l1-space-3) var(--l1-space-2); border: 1px solid transparent; border-radius: var(--l1-radius-md); background: transparent; color: var(--l1-ink); font: inherit; text-align: center; cursor: pointer; }
.l1-aegis-app-button:hover { background: var(--l1-surface-2); }
.l1-aegis-app-button[aria-expanded="true"] { border-color: var(--l1-brand); background: var(--l1-brand-soft); }
.l1-aegis-app-icon { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; height: 3rem; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-lg); background: var(--l1-surface); color: var(--l1-brand); }
.l1-aegis-app-icon svg { width: 1.5rem; height: 1.5rem; }
.l1-aegis-app-icon .fa-brands { font-size: 1.5rem; }
.l1-aegis-app-button > strong { max-width: 100%; font-size: .8125rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.l1-aegis-app-button > span:not(.l1-aegis-app-icon) { max-width: 100%; color: var(--l1-ink-muted); font: .6875rem/1.5 var(--l1-font-data); overflow-wrap: anywhere; }
.l1-aegis-app-detail { min-width: 0; margin-top: var(--l1-space-4); padding: var(--l1-space-4); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-surface); overflow-wrap: anywhere; }
.l1-aegis-app-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--l1-space-3); margin-bottom: var(--l1-space-4); }
.l1-aegis-app-detail-head h4 { min-width: 0; margin: 0; color: var(--l1-ink); font-size: .875rem; font-weight: 600; }
.l1-aegis-app-detail-head .ui-btn { flex-shrink: 0; }
.l1-aegis-app-detail > p { margin: var(--l1-space-3) 0 0; color: var(--l1-ink-muted); font-size: .75rem; line-height: 1.6; }
.l1-aegis-app-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--l1-space-4); margin: 0; }
.l1-aegis-app-facts > div { min-width: 0; }
.l1-aegis-app-facts dt { margin-bottom: var(--l1-space-1); color: var(--l1-ink-muted); font-size: .6875rem; }
.l1-aegis-app-facts dd { margin: 0; color: var(--l1-ink-soft); font: .75rem/1.6 var(--l1-font-data); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.l1-aegis-port-detail .l1-aegis-app-facts { grid-template-columns: minmax(0, 1fr); gap: var(--l1-space-3); }
.l1-aegis-instance-empty { margin: 0; padding-block: var(--l1-space-3); color: var(--l1-ink-muted); font-size: .8125rem; line-height: 1.6; }
.l1-aegis-instance-section > .l1-aegis-instance-empty { margin: 0; padding-block: var(--l1-space-1); }
.l1-aegis-instance-list[hidden],
.l1-aegis-instance-detail[hidden],
.l1-aegis-app-detail[hidden] { display: none; }
.l1-aegis-instance-button:focus-visible,
.l1-aegis-app-button:focus-visible,
.l1-aegis-port > summary:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; box-shadow: none; }
.l1-aegis-device__detail { display: block; margin-top: var(--l1-space-1); color: var(--l1-ink-muted); font-size: .75rem; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.l1-aegis-device__tools { display: flex; align-items: start; flex-wrap: wrap; column-gap: var(--l1-space-5); border-top: 1px solid var(--l1-border); }
.l1-aegis-device__tools > details { min-width: 0; max-width: 100%; }
.l1-aegis-device__tools > details[open] { flex-basis: 100%; padding-bottom: var(--l1-space-2); }
.l1-aegis-device__tools > details > summary { cursor: pointer; padding-block: var(--l1-space-2); overflow-wrap: anywhere; }
.l1-aegis-workspace .l1-aegis-device__tools summary:focus-visible,
.l1-aegis-workspace .l1-aegis-finding-toggle > summary:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; box-shadow: none; }
.l1-aegis-device__scans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--l1-space-3); list-style: none; padding: var(--l1-space-3); margin: 0; background: var(--l1-surface-2); }
.l1-aegis-device__scans li { min-width: 0; color: var(--l1-ink-soft); font-size: .75rem; overflow-wrap: anywhere; }
.l1-aegis-findings { min-width: 0; max-width: 75ch; padding: var(--l1-space-2) 0; overflow-wrap: anywhere; }
.l1-aegis-finding-toggle { overflow-wrap: anywhere; }
.l1-aegis-finding-toggle > summary { cursor: pointer; }
.l1-aegis-finding-toggle__active { font-weight: 650; color: var(--l1-ink); }
.l1-aegis-findings > p { margin-block: var(--l1-space-2); }
.l1-client-portal-body .l1-client-page.l1-aegis-inventory .l1-aegis-findings .ui-panel__section { padding: var(--l1-space-2) 0; }
.l1-client-portal-body .l1-client-page.l1-aegis-inventory { gap: var(--l1-space-4); }
/* Services and ports: the server list and a selected server sit inside one panel. */
.l1-aegis-device-inventory > .l1-aegis-instance-empty { padding: var(--l1-space-4); }
.l1-aegis-device-inventory > .l1-aegis-instance-detail { padding: var(--l1-space-4); }
.l1-aegis-instance-counts > .l1-aegis-instance-scanned { color: var(--l1-ink-muted); }
.l1-client-portal-body .l1-aegis-workspace .l1-aegis-vulnerabilities[data-tone="danger"] { border-color: color-mix(in srgb, var(--l1-danger) 35%, transparent); border-left: 3px solid var(--l1-danger); }
.l1-aegis-workspace .l1-aegis-vulnerabilities[data-tone="danger"] [data-aegis-vulnerability-summary] { color: var(--l1-danger); font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-aegis-workspace .l1-aegis-vulnerabilities[data-tone="ok"] { border-left: 3px solid var(--l1-ok); }
/* Networking forms that sit inside a table cell or panel head stay on one line. */
/* Doubled class so it outranks .ui-form-row { flex-wrap: wrap } in tailwind.css, which loads later. */
.ui-form-row.l1-group-search { flex: 0 1 20rem; flex-wrap: nowrap; }
.ui-form-row:is(.l1-floating-ip-assign, .l1-rdns-form) { flex-wrap: nowrap; min-width: 15rem; }
/* Networking overview (views/network.py client_network_overview): DDoS
   protection and bandwidth, then one card per feature, two across when the
   workspace has room. Built from ui-panel, ui-figure, ui-status and ui-meter;
   these rules only lay the cards out and give their record rows a shape. */
.l1-net-overview__grid {
  align-items: stretch;
  display: grid;
  gap: var(--l1-space-4);
  grid-template-columns: minmax(0, 1fr);
}
@container client-workspace (min-width: 44rem) {
  .l1-net-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.l1-net-overview .l1-net-card { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.l1-net-card__over { color: var(--l1-danger); font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-net-overview .l1-net-card[data-tone="danger"] { border-left: 3px solid var(--l1-danger); }
.l1-net-card__title { align-items: center; display: flex; gap: var(--l1-space-2); min-width: 0; }
.l1-net-card__title a { color: inherit; text-decoration: none; }
.l1-net-card__title a:hover { color: var(--l1-brand); text-decoration: underline; }
.l1-net-card__title :is(svg, i[data-lucide]) { color: var(--l1-ink-muted); flex: none; height: 1rem; width: 1rem; }
.l1-net-overview .l1-net-card__body { align-content: start; display: grid; flex: 1 1 auto; gap: var(--l1-space-3); }
.l1-net-card__figure { align-items: baseline; display: flex; flex-wrap: wrap; gap: .125rem .5rem; margin: 0; }
.l1-net-card__unit { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); }
.l1-net-card__status { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }
.l1-net-card__status .ui-status { white-space: normal; }
.l1-net-card__desc { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); margin: 0; }
.l1-net-card__rows { border-top: 1px solid var(--l1-border); list-style: none; margin: 0; padding: 0; }
.l1-net-card__row {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  font-size: var(--l1-text-dense);
  gap: .25rem .75rem;
  justify-content: space-between;
  padding: .5rem 0;
}
.l1-net-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.l1-net-card__row-main { display: grid; gap: .125rem; min-width: 0; }
.l1-net-card__name { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); overflow-wrap: anywhere; text-decoration: none; }
.l1-net-card__name:hover { color: var(--l1-brand); text-decoration: underline; }
.l1-net-card__sub { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); overflow-wrap: anywhere; }
.l1-net-card__meta { color: var(--l1-ink-muted); flex: none; font-size: var(--l1-text-xs); text-align: end; }
.l1-net-card__row > .ui-status { flex: none; }
.l1-net-card__row-main > .l1-copyable .l1-copyable__value { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); }
.l1-net-card__row .l1-copyable__btn { height: 1.375rem; width: 1.375rem; }
.l1-net-card__foot .l1-link-arrow { font-size: var(--l1-text-dense); }
.l1-aegis-action-status:empty { display: none; }
@media (pointer: coarse), (max-width: 767px) {
  .l1-aegis-instance-detail .ui-btn,
  .l1-aegis-device__tools > details > summary,
  .l1-aegis-finding-toggle > summary { min-height: 2.75rem; align-content: center; }
}
@media (max-width: 575px) {
  .l1-aegis-table.ui-table--stack,
  .l1-aegis-table.ui-table--stack td { min-width: 0; }
  .ui-form-row:is(.l1-floating-ip-assign, .l1-rdns-form) { min-width: 0; }
}
@container (max-width: 38rem) {
  .l1-aegis-instance-button { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--l1-space-2) var(--l1-space-3); padding: var(--l1-space-4) var(--l1-space-2); }
  .l1-aegis-instance-icon,
  .l1-aegis-instance-os { grid-row: 1 / 3; }
  .l1-aegis-instance-counts { grid-column: 2; grid-row: 2; justify-content: flex-start; gap: var(--l1-space-2) var(--l1-space-3); }
  .l1-aegis-instance-chevron { grid-column: 3; grid-row: 1 / 3; }
}
@container (min-width: 48rem) {
  .l1-aegis-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-aegis-chart + .l1-aegis-chart { border-top: 0; border-left: 1px solid var(--l1-border); }
  .l1-aegis-legend { min-height: 3rem; align-content: flex-start; }
}
@container (max-width: 42rem) {
  .l1-aegis-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-aegis-metrics > div:nth-child(3) { border-left: 0; }
  .l1-aegis-metrics > div:nth-child(n+3) { border-top: 1px solid var(--l1-border); }
}
@container (max-width: 28rem) {
  .l1-aegis-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; align-items: flex-end; }
  .l1-aegis-controls__field { max-width: 100%; }
  .l1-aegis-controls__field:first-child { grid-column: 1 / -1; }
  .l1-aegis-controls select { width: 100%; }
  .l1-aegis-toolbar > p { padding-bottom: 0; }
  .l1-aegis-metrics > div { padding: var(--l1-space-4) var(--l1-space-2); }
}

/* Client Aegis touchups retain the shared chart geometry, telemetry hooks and
   semantic series colors. Operator Aegis does not opt into this workspace. */
.l1-client-portal-body .l1-client-workspace.l1-aegis-workspace { gap: 1rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-overview {
  min-width: 0;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
}
.l1-client-portal-body .l1-client-workspace .l1-aegis-toolbar {
  gap: 1rem;
  padding: 1rem;
  border: 0;
  background: transparent;
}
.l1-client-portal-body .l1-client-workspace .l1-aegis-toolbar > p { padding-bottom: 0; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-controls { flex: 1 1 32rem; gap: .75rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-controls__field { flex: 1 1 12rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-controls select { width: 100%; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-metrics > div { padding: .75rem 1rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-metrics dt { font-size: .8125rem; font-weight: var(--l1-fw-medium); }
.l1-client-portal-body .l1-client-workspace .l1-aegis-metrics dd { margin-block: .375rem 0; letter-spacing: -.035em; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-metrics dd small { font-size: .75rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-chart { padding: 1rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-chart__heading h3 { font-size: .9375rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-chart__heading > span { font-size: .75rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-evidence { gap: .625rem; line-height: 1.65; }
.l1-client-portal-body .l1-client-workspace .ui-panel__foot.l1-aegis-evidence { padding: .75rem 1rem; background: var(--l1-surface-2); }
.l1-client-portal-body .l1-client-workspace .l1-aegis-top-applications { padding: 1rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-top-applications__heading h3 { font-size: .875rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-top-applications__content dl { font-size: .75rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-instance-list { border: 0; background: transparent; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-instance-button { min-height: 3.25rem; gap: .75rem; padding: .625rem 1rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-instance-icon { width: 1.75rem; height: 1.75rem; background: var(--l1-brand-soft); border-color: var(--l1-brand-border); color: var(--l1-brand); }
.l1-client-portal-body .l1-client-workspace .l1-aegis-instance-identity strong { font-size: .9375rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-instance-counts { font-size: .8125rem; }
.l1-client-portal-body .l1-client-workspace.l1-aegis-workspace > .l1-client-summary { border: 1px solid var(--l1-border); padding: .75rem 1rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-preferences { display: grid; gap: 1rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-preference-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-preference-group legend { float: none; width: auto; margin: 0 0 .5rem; color: var(--l1-ink); font-size: .9375rem; font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-client-workspace .l1-aegis-notification-options { display: grid; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-notification-options > .l1-check-row { padding: 1rem 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-notification-options > .l1-check-row + .l1-check-row { border-top: 1px solid var(--l1-border); }
.l1-client-portal-body .l1-client-workspace .l1-aegis-preference-group .l1-field { max-width: 30rem; }
/* "Email when an attack ends" nests under email alerts and greys out while they are off. */
.l1-client-portal-body .l1-client-workspace .l1-aegis-notification-options > .l1-aegis-dependent { padding: 0 0 1rem 1.75rem; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-dependent > .l1-check-row { margin: 0; padding: 0; border: 0; background: transparent; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-dependent:has(input:disabled) { opacity: .55; }
.l1-client-portal-body .l1-client-workspace .l1-aegis-email-address { margin: .25rem 0 0; }
@container client-workspace (max-width: 28rem) {
  .l1-client-portal-body .l1-client-workspace :is(.l1-aegis-toolbar, .l1-aegis-chart, .l1-aegis-top-applications) { padding: 1rem; }
  .l1-client-portal-body .l1-client-workspace .l1-aegis-metrics > div { padding: .75rem .875rem; }
  .l1-client-portal-body .l1-client-workspace .l1-aegis-instance-button { padding: .75rem; }
}

/* Client support: an inbox list, a chat-style conversation with the reply box
   pinned under it, and a new-ticket form with Ask AI suggestions beside the
   subject. The staff desk and the guest link keep tickets/_thread.html and the
   .l1-thread-* rules above; nothing here reaches them. */
.l1-client-portal-body .l1-support-workspace { min-width: 0; }
.l1-client-portal-body .l1-support-workspace .ui-page__head > div:first-child { min-width: 0; }
.l1-client-portal-body .l1-support-workspace .ui-title { overflow-wrap: anywhere; }
.l1-client-portal-body .l1-support-workspace .ui-page__meta { align-items: center; gap: .625rem 1rem; margin-top: .875rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-contacts { gap: .625rem 1.25rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-contacts a { font-size: .8125rem; }

@media (pointer: coarse) {
  .l1-client-portal-body .l1-client-workspace .l1-dashboard-server-table .ui-table__title { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Inbox: one row per ticket, the last reply as a preview, who acts next on the
   right. Whole rows are links; nothing interactive sits inside them. */
.l1-client-portal-body .l1-support-workspace .l1-support-filter .ui-count { margin-left: .25rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-filter .ui-count[data-tone="warn"] { color: var(--l1-warn); }
/* Tickets waiting on the customer: the filter itself carries the warning
   (it replaced a banner that repeated it). */
.l1-client-portal-body .l1-support-workspace .l1-support-filter .ui-tabs__link[data-tone="warn"] { color: var(--l1-warn); font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-support-workspace .l1-support-filter .ui-tabs__link[data-tone="warn"][aria-current="page"] { border-bottom-color: var(--l1-warn); }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox { list-style: none; margin: 0; padding: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__item + .l1-support-inbox__item { border-top: 1px solid var(--l1-border); }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem 1rem;
  padding: 1rem 1.25rem;
  color: var(--l1-ink);
  text-decoration: none;
}
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__link:hover { background: var(--l1-client-row-hover); color: var(--l1-ink); }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__link:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__item[data-unread="true"] .l1-support-inbox__link { box-shadow: inset 3px 0 var(--l1-brand); }
.l1-client-portal-body .l1-support-workspace :is(.l1-support-inbox__avatar, .l1-support-msg__avatar) {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--l1-brand-border);
  border-radius: 50%;
  background: var(--l1-brand-soft);
  color: var(--l1-brand);
  font-size: .8125rem;
  font-weight: var(--l1-fw-semibold);
}
.l1-client-portal-body .l1-support-workspace .l1-support-msg[data-side="customer"] > .l1-support-msg__avatar,
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__avatar[data-side="customer"] {
  border-color: var(--l1-border);
  background: var(--l1-surface-2);
  color: var(--l1-ink-muted);
}
.l1-client-portal-body .l1-support-workspace :is(.l1-support-inbox__avatar, .l1-support-msg__avatar) :is(svg, i[data-lucide]) { width: 1rem; height: 1rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__main { display: grid; gap: .3rem; min-width: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__title { font-size: .9375rem; font-weight: var(--l1-fw-medium); line-height: 1.4; overflow-wrap: anywhere; }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__item[data-unread="true"] .l1-support-inbox__title { font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--l1-ink-muted);
  font-size: .8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__who { color: var(--l1-ink); font-weight: var(--l1-fw-medium); }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--l1-ink-muted); font-size: .75rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-inbox__side {
  display: grid;
  justify-items: end;
  gap: .3rem;
  color: var(--l1-ink-muted);
  font-size: .75rem;
  text-align: right;
  white-space: nowrap;
}
@container client-workspace (max-width: 36rem) {
  .l1-client-portal-body .l1-support-workspace .l1-support-inbox__link { grid-template-columns: 2rem minmax(0, 1fr); padding: 1rem; }
  .l1-client-portal-body .l1-support-workspace .l1-support-inbox__avatar { width: 2rem; height: 2rem; }
  .l1-client-portal-body .l1-support-workspace .l1-support-inbox__side {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    align-items: center;
    gap: .375rem .75rem;
    text-align: left;
  }
}

/* Ticket: the conversation beside a details column. The composer sticks to
   the bottom of the scrolling pane while the conversation is on screen (the
   panel clips rather than hides its overflow, or sticky would stop at the
   panel), and sits at the end of the thread on phones. */
.l1-client-portal-body .l1-support-workspace .l1-support-ticket { display: grid; align-items: start; gap: 1.5rem; min-width: 0; }
@container client-workspace (min-width: 60rem) {
  .l1-client-portal-body .l1-support-workspace .l1-support-ticket { grid-template-columns: minmax(0, 1fr) 19rem; }
}
.l1-client-portal-body .l1-support-workspace .l1-support-ticket__aside { display: grid; gap: 1rem; min-width: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-ticket__main { display: grid; gap: 1rem; min-width: 0; }
/* The pinned question: support's newest message with the reply box under it,
   tinted like the warning it replaces. The box sits in the card, not stuck to
   the bottom of the pane. */
.l1-client-portal-body .l1-support-workspace .l1-support-latest { border-color: color-mix(in srgb, var(--l1-warn) 35%, var(--l1-border)); overflow: clip; }
.l1-client-portal-body .l1-support-workspace .l1-support-latest > .ui-panel__head { background: color-mix(in srgb, var(--l1-warn-soft) 70%, var(--l1-surface-1)); }
.l1-client-portal-body .l1-support-workspace .l1-support-latest .l1-support-composer { position: static; }
.l1-client-portal-body .l1-support-workspace .l1-support-facts__foot { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem .75rem; padding: .75rem 1rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-facts__foot .ui-hint { margin: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-ticket__aside .ui-panel__body { padding: 1rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-facts { padding: .25rem 1rem .75rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-facts .ui-kv__row { grid-template-columns: 7rem minmax(0, 1fr); font-size: .8125rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-ticket__help { display: flex; align-items: center; gap: .375rem; margin: 0; padding-inline: .25rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-ticket__help :is(svg, i[data-lucide]) { width: .875rem; height: .875rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-convo { overflow: clip; }
.l1-client-portal-body .l1-support-workspace .l1-support-thread { display: flex; flex-direction: column; gap: 1.125rem; margin: 0; padding: 1.25rem; list-style: none; }
.l1-client-portal-body .l1-support-workspace .l1-support-thread--folded { padding: 1.125rem 0 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-thread__day {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.l1-client-portal-body .l1-support-workspace .l1-support-thread__day::before,
.l1-client-portal-body .l1-support-workspace .l1-support-thread__day::after { content: ""; flex: 1; height: 1px; background: var(--l1-border); }
.l1-client-portal-body .l1-support-workspace .l1-support-thread__fold > details > summary { display: flex; justify-content: center; cursor: pointer; list-style: none; }
.l1-client-portal-body .l1-support-workspace .l1-support-thread__fold > details > summary::-webkit-details-marker { display: none; }
.l1-client-portal-body .l1-support-workspace .l1-support-thread__fold > details > summary > span {
  padding: .3rem .875rem;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  background: var(--l1-surface-1);
  color: var(--l1-ink-muted);
  font-size: .75rem;
  font-weight: var(--l1-fw-medium);
}
.l1-client-portal-body .l1-support-workspace .l1-support-thread__fold > details > summary:hover > span { color: var(--l1-ink); border-color: var(--l1-border-strong); }
.l1-client-portal-body .l1-support-workspace .l1-support-thread__fold > details[open] > summary { display: none; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: .625rem;
  max-width: min(46rem, 88%);
}
.l1-client-portal-body .l1-support-workspace .l1-support-msg[data-side="customer"] { grid-template-columns: minmax(0, 1fr) 2.25rem; align-self: flex-end; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg[data-side="customer"] > .l1-support-msg__avatar { grid-column: 2; grid-row: 1; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg[data-side="customer"] > .l1-support-msg__stack { grid-column: 1; grid-row: 1; justify-items: end; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__stack { display: grid; gap: .375rem; min-width: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; color: var(--l1-ink-muted); font-size: .75rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__meta strong { color: var(--l1-ink); font-size: .8125rem; overflow-wrap: anywhere; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__bubble {
  padding: .75rem 1rem;
  border: 1px solid var(--l1-border);
  border-radius: .25rem 1rem 1rem 1rem;
  background: var(--l1-surface-2);
  color: var(--l1-ink);
  font-size: .9375rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.l1-client-portal-body .l1-support-workspace .l1-support-msg[data-side="customer"] .l1-support-msg__bubble {
  border-color: var(--l1-brand-border);
  border-radius: 1rem .25rem 1rem 1rem;
  background: var(--l1-brand-soft);
}
.l1-client-portal-body .l1-support-workspace .l1-support-msg[data-ai="true"] .l1-support-msg__bubble { border-style: dashed; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__bubble p { margin: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__bubble p + p { margin-top: .5rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__bubble a { color: inherit; text-decoration: underline; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__disclaimer { color: var(--l1-ink-muted); font-size: .8125rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__ai-mark {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.l1-client-portal-body .l1-support-workspace .l1-support-msg__ai-mark :is(svg, i[data-lucide]) { width: .75rem; height: .75rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg__files { display: flex; flex-wrap: wrap; gap: .5rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-msg[data-side="customer"] .l1-support-msg__files { justify-content: flex-end; }
.l1-client-portal-body .l1-support-workspace .l1-support-file {
  display: grid;
  gap: .375rem;
  max-width: min(16rem, 100%);
  padding: .5rem .625rem;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  background: var(--l1-surface-1);
  color: var(--l1-ink);
  font-size: .8125rem;
  text-decoration: none;
}
.l1-client-portal-body .l1-support-workspace .l1-support-file:hover { border-color: var(--l1-brand-border); color: var(--l1-ink); }
.l1-client-portal-body .l1-support-workspace .l1-support-file--image img {
  display: block;
  max-width: 100%;
  max-height: 10rem;
  min-height: 3rem;
  border-radius: var(--l1-radius-sm);
  background: var(--l1-surface-2);
  object-fit: contain;
}
.l1-client-portal-body .l1-support-workspace .l1-support-file__name { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-file__name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-client-portal-body .l1-support-workspace .l1-support-file__name small { flex: none; color: var(--l1-ink-muted); }
.l1-client-portal-body .l1-support-workspace .l1-support-file__name :is(svg, i[data-lucide]) { flex: none; width: .875rem; height: .875rem; color: var(--l1-ink-muted); }
.l1-client-portal-body .l1-support-workspace .l1-support-composer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .625rem 1rem;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--l1-border);
  background: var(--l1-surface-1);
  scroll-margin-top: 5rem;
}
.l1-client-portal-body .l1-support-workspace .l1-support-composer:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: -2px; }
.l1-client-portal-body .l1-support-workspace .l1-support-composer > :is(textarea, .ui-notice, .errorlist) { grid-column: 1 / -1; }
.l1-client-portal-body .l1-support-workspace .l1-support-composer > textarea {
  min-height: 4.5rem;
  max-height: 40vh;
  field-sizing: content;
  resize: vertical;
}
/* Row two: the attach disclosure on the left, Send on the right. An opened
   disclosure grows down its own column, so Send never moves. */
.l1-client-portal-body .l1-support-workspace .l1-support-composer__bar { display: flex; align-items: center; gap: .75rem; grid-column: 2; }
.l1-client-portal-body .l1-support-workspace .l1-support-composer .l1-support-extras { grid-column: 1; border-top: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-composer .l1-support-extras > summary { min-height: var(--l1-control-h-md); padding-block: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-composer .l1-support-extras > summary::before { display: none; }
.l1-client-portal-body .l1-support-workspace .l1-support-composer .l1-support-extras > summary :is(svg, i[data-lucide]) { width: .875rem; height: .875rem; }
.l1-client-portal-body .l1-support-workspace .l1-support-facts__you { color: var(--l1-warn); font-weight: var(--l1-fw-semibold); }
.l1-client-portal-body .l1-support-workspace .l1-support-composer kbd {
  padding: .05rem .3rem;
  border: 1px solid var(--l1-border);
  border-radius: .25rem;
  background: var(--l1-surface-2);
  color: var(--l1-ink-muted);
  font-family: var(--l1-font-data);
  font-size: .7rem;
}
@media (pointer: coarse) {
  .l1-client-portal-body .l1-support-workspace .l1-support-composer__keys { display: none; }
}
@media (max-width: 767px) {
  .l1-client-portal-body .l1-support-workspace .l1-support-composer { position: static; }
  .l1-client-portal-body .l1-support-workspace .l1-support-composer__keys { display: none; }
}
@container client-workspace (max-width: 32rem) {
  .l1-client-portal-body .l1-support-workspace :is(.l1-support-thread, .l1-support-composer) { padding: 1rem; }
  .l1-client-portal-body .l1-support-workspace .l1-support-thread--folded { padding: 1rem 0 0; }
  .l1-client-portal-body .l1-support-workspace .l1-support-composer { grid-template-columns: minmax(0, 1fr); }
  .l1-client-portal-body .l1-support-workspace :is(.l1-support-composer__bar, .l1-support-composer .l1-support-extras) { grid-column: 1; }
  .l1-client-portal-body .l1-support-workspace .l1-support-composer__bar > .ui-btn { flex: 1 1 auto; justify-content: center; }
  .l1-client-portal-body .l1-support-workspace .l1-support-msg { max-width: 100%; grid-template-columns: 1.75rem minmax(0, 1fr); }
  .l1-client-portal-body .l1-support-workspace .l1-support-msg[data-side="customer"] { grid-template-columns: minmax(0, 1fr) 1.75rem; }
  .l1-client-portal-body .l1-support-workspace .l1-support-msg__avatar { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
}

/* Files and secure fields on the new-ticket and reply forms sit behind one
   disclosure: most messages need only text, and four open fields made every
   reply look like a form to fill in. */
.l1-client-portal-body .l1-support-workspace .l1-support-reply-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
  gap: 1.25rem;
  min-width: 0;
}
.l1-client-portal-body .l1-support-workspace .l1-support-reply-extras > * { min-width: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-reply-extras input { max-width: 100%; }
/* The label names the box beneath it, so this pair stacks at every width rather
   than joining the auto-fit extras grid, where a wide viewport would put the
   question beside its own answer. */
.l1-client-portal-body .l1-support-workspace .l1-support-secure-note { display: grid; gap: 1rem; min-width: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-secure-note input { max-width: 100%; }
/* Overrides the 11rem workspace minimum: this is an optional extra, and a box
   two-thirds the height of the message field reads as the main event. */
.l1-client-portal-body .l1-support-workspace .l1-support-secure-note textarea { min-height: 6rem; }
.l1-client-portal-body .l1-support-workspace textarea { min-height: 11rem; resize: vertical; }
.l1-client-portal-body .l1-support-workspace .l1-support-extras__body { display: grid; gap: 1rem; padding: 0 var(--l1-space-4) var(--l1-space-4); }
.l1-client-portal-body .l1-support-workspace .l1-support-extras__body > .ui-hint { margin: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-composer .l1-support-extras > summary,
.l1-client-portal-body .l1-support-workspace .l1-support-composer .l1-support-extras__body { padding-inline: 0; }

/* New ticket: the form at a readable width, what happens next beside it. */
.l1-client-portal-body .l1-support-workspace .l1-support-new { display: grid; align-items: start; gap: 1.5rem; min-width: 0; }
@container client-workspace (min-width: 60rem) {
  .l1-client-portal-body .l1-support-workspace .l1-support-new { grid-template-columns: minmax(0, 46rem) 18rem; }
}
.l1-client-portal-body .l1-support-workspace .l1-support-create { min-width: 0; }
@container client-workspace (min-width: 40rem) {
  .l1-client-portal-body .l1-support-workspace .l1-support-create .ui-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.l1-client-portal-body .l1-support-workspace .l1-support-new__aside { display: grid; gap: 1rem; min-width: 0; }
.l1-client-portal-body .l1-support-workspace .l1-support-steps { display: grid; gap: .875rem; margin: 0; padding: 1rem; list-style: none; counter-reset: l1-support-step; }
.l1-client-portal-body .l1-support-workspace .l1-support-steps > li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .125rem .625rem;
  font-size: .8125rem;
  line-height: 1.5;
  counter-increment: l1-support-step;
}
.l1-client-portal-body .l1-support-workspace .l1-support-steps > li::before {
  content: counter(l1-support-step);
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--l1-brand-soft);
  color: var(--l1-brand);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
}
.l1-client-portal-body .l1-support-workspace .l1-support-steps > li > span { color: var(--l1-ink-muted); }
.l1-client-portal-body .l1-support-workspace .l1-support-channel { justify-content: flex-start; gap: .75rem; color: var(--l1-ink); text-decoration: none; }
.l1-client-portal-body .l1-support-workspace .l1-support-channel:hover { background: var(--l1-client-row-hover); color: var(--l1-ink); }
.l1-client-portal-body .l1-support-workspace .l1-support-channel > :is(svg, i[data-lucide]) { flex: none; width: 1rem; height: 1rem; color: var(--l1-ink-muted); }

/* Ask AI suggestions under the subject. Hidden until app.js reveals it. */
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest {
  display: grid;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--l1-brand-border);
  border-radius: var(--l1-radius-md);
  background: color-mix(in srgb, var(--l1-brand-soft) 55%, var(--l1-surface-1));
}
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest[hidden],
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest [hidden] { display: none; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__head { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .75rem; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--l1-brand-soft);
  color: var(--l1-brand);
}
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__mark :is(svg, i[data-lucide]) { width: 1rem; height: 1rem; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__copy { display: grid; flex: 1 1 14rem; gap: .125rem; min-width: 0; font-size: .8125rem; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__status { display: inline-flex; align-items: center; gap: .375rem; color: var(--l1-ink-muted); }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__body { color: var(--l1-ink); font-size: .875rem; line-height: 1.65; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__body :is(p, ul, ol) { margin: 0 0 .5rem; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__body :is(p, li) { font-size: inherit; line-height: inherit; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__body :is(ul, ol) { padding-left: 1.25rem; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__body > :last-child { margin-bottom: 0; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__sources { display: grid; gap: .375rem; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__label {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__sources ul { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__sources a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  background: var(--l1-surface-1);
  color: var(--l1-ink);
  font-size: .75rem;
  text-decoration: none;
}
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__sources a:hover { border-color: var(--l1-brand-border); color: var(--l1-brand); }
.l1-client-portal-body .l1-support-workspace .l1-ticket-suggest__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--l1-border);
}

/* ---------- Account pages ---------- */
/* Theme choice on Profile: one segmented control whose selected option is
   filled, instead of three words told apart by an underline. */
.l1-segmented {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
}
.l1-segmented__option {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-medium);
  gap: var(--l1-space-2);
  min-height: 2.25rem;
  padding: 0 var(--l1-space-3);
}
.l1-segmented__option svg { height: 1rem; width: 1rem; }
.l1-segmented__option:hover { color: var(--l1-ink); }
.l1-segmented__option:focus-visible { box-shadow: var(--l1-focus-ring); outline: 0; }
a.l1-segmented__option { text-decoration: none; }
.l1-segmented__option[aria-pressed="true"],
.l1-segmented__option[aria-current="true"] {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
  font-weight: var(--l1-fw-semibold);
}
@media (max-width: 575px) {
  .ui-row:has(> .l1-segmented) { align-items: flex-start; flex-direction: column; gap: var(--l1-space-3); }
  .ui-row:has(> .l1-segmented) > .ui-row__main { flex: none; }
}
/* Change password: a show/hide toggle inside the new-password input. */
.l1-password-field { display: block; position: relative; }
.l1-password-field > input { padding-right: 2.75rem; width: 100%; }
.l1-password-field__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
}
.l1-password-field__toggle:hover { color: var(--l1-ink); }
.l1-password-field__toggle:focus-visible { box-shadow: var(--l1-focus-ring); outline: 0; }
.l1-password-field__toggle svg { height: 1.1rem; width: 1.1rem; }
.l1-password-field__toggle [hidden] { display: none; }
.l1-password-panel { max-width: 30rem; }
/* A submit button that reads as a link inside a sentence. */
.l1-inline-link {
  background: none;
  border: 0;
  color: var(--l1-brand);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.l1-inline-link:hover { color: var(--l1-brand-strong); }

/* ---------- API access and the API reference ---------- */
/* Code samples keep their lines and scroll sideways. The bootstrap bridge's
   html[data-l1-theme] pre rule (pre-wrap, break-word) outranks .ui-code, which
   broke curl lines mid-word on phones ("/api/v2/server s"). */
.ui-ref .ui-code,
.ui-code.l1-api-quickstart { overflow-wrap: normal; white-space: pre; word-break: normal; }
/* Reference prose reads as paragraphs, not one run-on block. */
.ui-ref .ui-panel__body > * + * { margin-top: var(--l1-space-3); }
.ui-panel__desc.l1-api-create__lead { margin: var(--l1-space-1) 0 var(--l1-space-4); }
.ui-code.l1-api-quickstart { margin-block: var(--l1-space-4) var(--l1-space-3); }
.l1-api-quickstart__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l1-space-2) var(--l1-space-4); }
.l1-api-token-copy { display: inline-flex; margin-top: var(--l1-space-3); }
.l1-api-usage { display: grid; gap: var(--l1-space-2); }
.l1-api-usage__figure,
.l1-api-usage__over { margin: 0; }
.l1-api-usage__figure strong { font-size: var(--l1-text-lg); }
.l1-api-usage__over { color: var(--l1-danger); font-size: var(--l1-text-dense); }
/* The reference index sits in an "On this page" disclosure. Beside the body
   the summary is hidden and the index is simply open; where the index stacks
   above the body (narrow viewport or narrow client container) the summary
   shows and api-docs.js starts it closed. */
.ui-ref__toc > summary { display: none; }
.ui-ref__toc > .ui-ref__group + .ui-ref__group { margin-top: var(--l1-space-4); }
.ui-ref__toc-summary {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink);
  cursor: pointer;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-2);
  justify-content: space-between;
  list-style: none;
  min-height: 2.75rem;
  padding: 0 var(--l1-space-4);
}
.ui-ref__toc-summary::-webkit-details-marker { display: none; }
.ui-ref__toc-summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  height: 6px;
  transform: rotate(45deg);
  transition: transform var(--l1-transition);
  width: 6px;
}
.ui-ref__toc[open] > .ui-ref__toc-summary { margin-bottom: var(--l1-space-3); }
.ui-ref__toc[open] > .ui-ref__toc-summary::after { transform: rotate(-135deg); }
@media (max-width: 1023px) {
  .ui-ref__toc > summary { display: flex; }
}
@container l1-api-reference (max-width: 50rem) {
  .ui-ref__toc > summary { display: flex; }
}
@container client-workspace (max-width: 66rem) {
  .l1-client-portal-body .l1-section-workspace .ui-ref__toc > summary { display: flex; }
}

/* ---------- Images: storage pools ---------- */
/* The two pools on /client/services/isos/ open as a labelled figure over a
   meter. `.ui-metric` is the same three-part shape, but it carries the metric
   strip's own cell padding, which is wrong inside a `.ui-panel__section` that
   is already padded — so the cell borrows the metric *parts* (label, value,
   hint) and supplies its own box. Nothing here restyles those parts: a figure
   on this page and a figure in a metric strip must stay the same size. */
.l1-storage-meter__figure {
  display: grid;
  gap: 2px;
  margin-block: var(--l1-space-3) var(--l1-space-2);
}

/* Section children are a plain flow, so the rhythm between figure, meter and
   the copy under it is set here rather than with per-element utilities. */
.l1-storage-meter__figure + .ui-meter {
  margin-bottom: var(--l1-space-3);
}

/* Backup storage size field, live monthly price and the buy button on one
   row (billing/_backup_storage_controls.html). */
.l1-storage-purchase { margin-top: var(--l1-space-3); }
.l1-storage-purchase__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-3);
}
.l1-storage-purchase__row .ui-input { max-width: 8rem; }
.l1-storage-purchase__price {
  color: var(--l1-ink);
  font-feature-settings: var(--l1-font-feature-tabular);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  min-width: 5.5rem;
}
.l1-storage-purchase .ui-hint { margin-top: var(--l1-space-2); }
.l1-images-storage__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  justify-content: space-between;
  margin-bottom: var(--l1-space-1);
}
.l1-images-storage__head .ui-panel__title { margin: 0; }

.ui-panel__split .ui-panel__section > .ui-panel__head {
  padding: 0;
}

.ui-panel__split .ui-panel__section > .ui-notice {
  margin-top: var(--l1-space-3);
}

.ui-panel__split .ui-panel__section > .ui-form-row {
  margin-top: var(--l1-space-4);
}

/* ---------- Reports ----------
   The Reports workbench reuses the Revenue workbench wholesale: .l1-performance
   supplies the scope strip, metric grid, plot frame, breakdown lists and native
   disclosures, and nothing below re-declares any of them. What is genuinely new
   is the period picker, the reconciliation flow, and a three-series chart whose
   lines have to be told apart without hover.

   Colour: revenue earned takes brand, because it is the series the page is
   about; cash and invoices take the neutral info and warn tokens. Status tones
   (ok/danger) are deliberately not used - none of these three lines is a good or
   a bad outcome, and borrowing the status scale for a legend is how a healthy
   month starts reading as an alarm. */
.l1-report__period {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--l1-space-3);
  justify-content: space-between;
}
.l1-report__period .l1-report__presets { margin-bottom: 0; flex: 1 1 24rem; }
.l1-report__period .l1-report__range {
  border: 0;
  flex: 0 1 auto;
  padding: 0 0 var(--l1-space-2);
}
.l1-report__scope { margin-block: var(--l1-space-3) var(--l1-space-4); }

/* The report builder toolbar: period, custom dates only while Custom is the
   chosen period (no script), and the sheet select only on phones, where the
   sheet chips would run to four lines. */
.l1-admin-console-body .l1-report .l1-report__toolbar {
  align-items: flex-end;
  background: transparent;
  border: 0;
  gap: var(--l1-space-3);
  padding: var(--l1-space-4) 0 var(--l1-space-3);
}
.l1-report__toolbar .ui-filter-field > span { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); font-weight: var(--l1-fw-medium); }
.l1-report__toolbar .l1-report__custom,
.l1-report__toolbar .l1-report__sheet-select { display: none; }
.l1-report__toolbar:has(#report-period option[value="custom"]:checked) .l1-report__custom { display: flex; }
.l1-report__band { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.l1-report__about { margin-top: var(--l1-space-2); }
.l1-report__about > summary {
  align-items: center;
  color: var(--l1-brand);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
  gap: var(--l1-space-1);
  list-style: none;
}
.l1-report__about > summary::-webkit-details-marker { display: none; }
.l1-report__about > summary > svg { height: 12px; width: 12px; }
.l1-report__about > p {
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-xs);
  line-height: 1.5;
  margin: var(--l1-space-2) 0 0;
}
/* Opening + issued - earned = closing, as the sentence it is, under the band. */
.l1-report__identity {
  align-items: baseline;
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-5);
  padding: var(--l1-space-3) 0;
}
.l1-report__identity-sum {
  align-items: baseline;
  color: var(--l1-ink-muted);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-1) var(--l1-space-3);
}
.l1-report__identity-sum strong { color: var(--l1-ink); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
.l1-report__identity-note { color: var(--l1-ink-muted); flex: 1 1 24rem; font-size: var(--l1-text-xs); margin: 0; }
.l1-report__sheets { margin: var(--l1-space-5) 0 var(--l1-space-4); }
.l1-report__sheet-block .l1-performance__block-title { margin-bottom: var(--l1-space-3); }
.l1-report__chart { margin: 0 0 var(--l1-space-5); }
.l1-report__chart .l1-metrics-chart__svg { height: 200px; overflow: visible; width: 100%; }
.l1-report__unit {
  color: var(--l1-ink-muted);
  display: block;
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-normal);
}
.l1-report__sheet td.l1-report__wrap { max-width: 36rem; min-width: 18rem; white-space: normal; }
@media (max-width: 1200px) {
  .l1-report__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l1-report__band .l1-kpi { border-left: 0; border-top: 0; padding-left: 0; }
  .l1-report__band .l1-kpi:nth-child(even) { border-left: 1px solid var(--l1-border); padding-left: var(--l1-space-4); }
  .l1-report__band .l1-kpi:nth-child(n + 3) { border-top: 1px solid var(--l1-border); }
}
@media (max-width: 575px) {
  .l1-report__toolbar .l1-report__sheet-select { display: flex; }
  .l1-report__sheets { display: none; }
  .l1-report__toolbar > .ui-filter-field { flex: 1 1 100%; }
}

/* The measures band above the sheet. Bordered like the sheet below it so the
   two read as one working surface rather than a summary sitting on top of a
   table, and the caveat column is allowed to wrap where every other cell in
   these tables is nowrap -- a cropped caveat is the failure it exists to fix. */
.l1-report__measures {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  margin-bottom: var(--l1-space-4);
}
.l1-report__measures > .ui-table { margin: 0; }
.l1-report__caveat {
  font-size: var(--l1-text-xs);
  max-width: 44ch;
  white-space: normal;
}

.l1-report__sheets { flex-wrap: wrap; margin-bottom: var(--l1-space-3); }
.l1-report__sheet-wrap {
  max-height: calc(100vh - 18rem);
  overflow: auto;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
}
.l1-report__sheet {
  font-size: var(--l1-text-xs);
  margin: 0;
}
/* Column heads on the sheet are humanized labels with a unit line, set in
   sentence case rather than the shouting column-head style. */
.l1-admin-console-body .l1-report .l1-report__sheet thead th {
  letter-spacing: 0;
  text-transform: none;
  vertical-align: bottom;
}
.l1-report__sheet caption {
  caption-side: top;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  padding: var(--l1-space-2) var(--l1-space-3);
  text-align: left;
}
.l1-report__sheet th,
.l1-report__sheet td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.l1-report__sheet thead th {
  background: var(--l1-surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* The measure cards carry two lines of prose the Revenue metrics do not: what
   the figure answers, and what it is not. Sized down and separated by a rule so
   a glance still lands on the number, but the caveat cannot be cropped away from
   it in a screenshot -- which is the entire failure this page exists to fix. */
.l1-report__measure-question {
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-xs);
  margin: var(--l1-space-3) 0 0;
}
.l1-report__measure-caveat {
  align-items: flex-start;
  border-top: 1px dashed var(--l1-border);
  color: var(--l1-ink-muted);
  display: flex;
  font-size: var(--l1-text-micro);
  gap: var(--l1-space-2);
  margin: var(--l1-space-2) 0 0;
  padding-top: var(--l1-space-2);
}
.l1-report__measure-caveat > svg { flex: none; height: 1em; width: 1em; margin-top: .15em; }

/* Opening + issued - earned = closing, laid out as the sentence it is. A grid
   rather than a table because the operators (+, -, =) are presentation: they are
   aria-hidden and the labels carry the meaning for a screen reader. */
.l1-report__flow {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--l1-border);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
.l1-report__flow-step {
  background: var(--l1-surface-1);
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-1);
  padding: var(--l1-space-5);
  position: relative;
}
.l1-report__flow-step--total { background: var(--l1-brand-soft); }
.l1-report__flow-op {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-lg);
  font-weight: var(--l1-fw-semibold);
  left: var(--l1-space-2);
  position: absolute;
  top: var(--l1-space-3);
}
.l1-report__flow-label {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.l1-report__flow-value {
  color: var(--l1-ink);
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-xl);
  font-variant-numeric: tabular-nums;
}
.l1-report__recon-note { margin-top: var(--l1-space-4); }

.l1-report__line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.l1-report__line--earned { stroke: var(--l1-brand); }
.l1-report__line--cash { stroke: var(--l1-info); stroke-dasharray: 4 2; }
.l1-report__line--invoiced { stroke: var(--l1-ink-muted); stroke-opacity: .55; stroke-dasharray: 1.5 2; }
.l1-report__key { align-items: center; display: inline-flex; gap: var(--l1-space-2); }
.l1-report__key > i { border-top: 2px solid var(--l1-brand); display: inline-block; height: 0; width: 1.25rem; }
.l1-report__key--cash > i { border-top-color: var(--l1-info); border-top-style: dashed; }
.l1-report__key--invoiced > i { border-top-color: var(--l1-ink-muted); border-top-style: dotted; }

/* Subheads inside a long table. A th spanning the row rather than a second
   table, so the hourly and non-hourly halves stay one scrollable column pair and
   their totals line up. */
.l1-report__group-row > th {
  background: var(--l1-surface-2);
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.l1-report__exports { display: grid; gap: var(--l1-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-report__export-list { display: grid; gap: var(--l1-space-3); list-style: none; margin: var(--l1-space-3) 0 0; padding: 0; }
.l1-report__export-list > li { display: grid; gap: var(--l1-space-1); }
.l1-report__export-list .ui-btn { justify-self: start; }

@media (max-width: 1100px) {
  .l1-report__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .l1-report__flow { grid-template-columns: minmax(0, 1fr); }
  .l1-report__exports { grid-template-columns: minmax(0, 1fr); }
  .l1-report__period { align-items: stretch; }
}

/* ---------- Ticket workbench ----------
   The console ticket page in two columns: the conversation, fluid, and one
   320px rail of what you change and look up while answering. The composer is
   not in this grid at all: it is the floating dock below, so the conversation
   stays readable and selectable while a reply is being written. */
.l1-ticket-columns {
  align-items: start;
  display: grid;
  gap: var(--l1-space-5);
  /* The stream is the only elastic column. The rail is a reading column of a
     fixed measure, because a label/value pair that reflows at every window
     width is harder to scan than one that never moves. 340px holds the four
     live fields as a 2 by 2 grid. */
  grid-template-columns: minmax(0, 1fr) 340px;
}
.l1-ticket-columns > * { min-width: 0; }

.l1-admin-workspace .l1-ticket-rail {
  display: grid;
  gap: var(--l1-space-4);
}
/* The rail scrolls with the page rather than pinning: it is taller than most
   viewports, and a pinned rail hides its own lower sections until the thread
   ends. The composer bar under the thread is what stays in reach. */
.l1-admin-workspace .l1-ticket-rail > .l1-work-section { border-top: 0; }
.l1-admin-workspace .l1-ticket-rail > .l1-work-section + .l1-work-section {
  border-top: 1px solid var(--l1-border);
  padding-top: var(--l1-space-4);
}
.l1-ticket-stream > .l1-work-section { border-top: 0; }
/* Rail sections are separated by the hairline alone: no inner head strip or
   body padding stacking up between them. */
.l1-admin-workspace .l1-ticket-rail > .l1-work-section > .ui-panel__head {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0 0 var(--l1-space-2);
}
.l1-admin-workspace .l1-ticket-rail > .l1-work-section > .ui-panel__body { padding: 0; }
/* On a phone the head's only control, the "..." menu, sits beside the
   breadcrumb instead of on a row of its own. */
@media (max-width: 767px) {
  .l1-ticket-page .l1-ticket-head { position: relative; }
  .l1-ticket-page .l1-ticket-head > .ui-actions { position: absolute; right: 0; top: -4px; }
}

/* Below 1024px the conversation comes first (it is first in the markup) and
   the rail follows it. */
@media (max-width: 1024px) {
  .l1-ticket-columns { grid-template-columns: minmax(0, 1fr); }
}
/* Status, Priority, Owner and Type as one compact 2 by 2 grid. */
.l1-ticket-editor__grid {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.l1-ticket-editor__grid .ui-label { font-size: var(--l1-text-xs); }
.l1-ticket-editor__grid .ui-select { font-size: var(--l1-text-sm); min-width: 0; text-overflow: ellipsis; }

/* The live editor. The Save button is the markup's default and is only
   withdrawn once the script that replaces it is confirmed running — and it
   comes back the moment a live save fails. */
.l1-ticket-editor .l1-ticket-editor__state { margin: var(--l1-space-2) 0 0; }
.l1-ticket-editor .l1-ticket-editor__state[data-tone="ok"] { color: var(--l1-ok); }
.l1-ticket-editor .l1-ticket-editor__state[data-tone="danger"] { color: var(--l1-danger); }
.l1-ticket-editor.is-live .l1-ticket-editor__fallback { display: none; }

.l1-ticket-time-list {
  display: grid;
  gap: var(--l1-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.l1-ticket-time-entry {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-3);
  justify-content: space-between;
  padding-top: var(--l1-space-2);
}
.l1-ticket-time-entry:first-child { border-top: 0; padding-top: 0; }
.l1-ticket-time-entry__main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1) var(--l1-space-2);
  min-width: 0;
}
.l1-ticket-time-entry__main > .ui-table__sub { flex-basis: 100%; }

.l1-ticket-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1);
}
.l1-ticket-filter__btn {
  background: transparent;
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  cursor: pointer;
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-medium);
  padding: .25rem .7rem;
}
.l1-ticket-filter__btn:hover { color: var(--l1-ink); }
.l1-ticket-filter__btn[aria-pressed="true"] {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand);
  color: var(--l1-brand);
}
/* Filtering the rendered page, not the query. The panel description says so,
   because "no internal notes" and "none on this page" are different facts. */
.l1-thread-list[data-activity-filter="public"] [data-activity-kind="internal"],
.l1-thread-list[data-activity-filter="internal"] [data-activity-kind="public"] { display: none; }

.l1-thread-message__time-chip { white-space: nowrap; }

/* ---------- Ticket composer dock ----------
   A non-modal <dialog>: it floats over the workspace without making the rest
   of the document inert, which is what lets the operator keep selecting and
   copying from the ticket while writing about it. Never call showModal() on
   this element — that single change would silently take that away. */
.l1-ticket-dock {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-lg);
  bottom: var(--l1-space-5);
  box-shadow: var(--l1-shadow-lg);
  color: var(--l1-ink);
  inset-inline: auto var(--l1-space-5);
  margin: 0;
  max-height: min(78vh, 46rem);
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  padding: 0;
  position: fixed;
  text-align: start;
  top: auto;
  white-space: normal;
  width: 30rem;
  z-index: 60;
}
.l1-ticket-dock[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.l1-ticket-dock__head {
  align-items: flex-start;
  background: var(--l1-surface-2);
  border-bottom: 1px solid var(--l1-border);
  cursor: grab;
  display: flex;
  gap: var(--l1-space-2);
  padding: var(--l1-space-3) var(--l1-space-4);
  /* The handle is dragged, not selected. Without this, a drag that starts on
     the title paints a selection across the page instead of moving the dock. */
  user-select: none;
}
.l1-ticket-dock[data-dragging] .l1-ticket-dock__head { cursor: grabbing; }
/* An internal note is written under a warning-tinted header, so a private
   note never looks like the reply the customer will receive. */
.l1-ticket-dock[data-audience="internal"] .l1-ticket-dock__head {
  background: var(--l1-warn-soft);
  border-bottom-color: color-mix(in srgb, var(--l1-warn) 35%, transparent);
}
.l1-ticket-dock[data-audience="internal"] .l1-dialog__title { color: var(--l1-warn); }
.l1-ticket-dock__grip {
  color: var(--l1-ink-muted);
  display: inline-flex;
  padding-top: 2px;
}
.l1-ticket-dock__heading { min-width: 0; flex: 1 1 auto; }
.l1-ticket-dock__heading .l1-dialog__desc { overflow-wrap: anywhere; }
.l1-ticket-dock__body {
  overflow-y: auto;
  padding: var(--l1-space-4);
}
.l1-ticket-dock__time {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: grid;
  gap: var(--l1-space-3);
  padding: var(--l1-space-3);
}
.l1-ticket-dock__time > legend { padding-inline: var(--l1-space-1); }
.l1-ticket-dock__time-grid {
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.l1-ticket-dock__more > summary {
  color: var(--l1-ink-muted);
  cursor: pointer;
  font-size: var(--l1-text-sm);
}
.l1-ticket-dock__more[open] > summary { color: var(--l1-ink); }

@media (max-width: 640px) {
  /* No room to float or to drag: the dock becomes a sheet on the bottom edge. */
  .l1-ticket-dock {
    border-radius: var(--l1-radius-lg) var(--l1-radius-lg) 0 0;
    bottom: 0;
    inset-inline: 0;
    max-height: 88vh;
    max-width: 100vw;
    width: 100vw;
  }
  .l1-ticket-dock__head { cursor: default; }
}

/* ---------- Standalone ticketing shell ----------
   The staff workbench mounted on its own (settings.TICKETING_URL_PREFIX), with
   no command rail. It keeps .l1-console-body, so the tokens, dark scale and
   admin workspace palette are the console's; only the frame differs.

   .l1-console-body is a full-height flex column that owns the scroll, so this
   stage mirrors what .l1-workbench__stage does inside the console: take the
   remaining height, hide its own overflow, and let .l1-console-main-pane be the
   one thing that scrolls. */
.l1-ticketing-shell {
  background: var(--l1-sheet, var(--l1-surface-1));
  color: var(--l1-ink);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.l1-ticketing-topbar {
  background: var(--l1-sheet, var(--l1-surface-1));
  flex: 0 0 auto;
}

@media (min-width: 992px) {
  /* The console hides the topbar brand at this width because its command rail
     already carries it. There is no rail here, so the topbar is the only place
     the product can identify itself. Same specificity as the rule it undoes,
     and later in the file, which is what makes it win. */
  .l1-ticketing-body .l1-topbar__brand { display: inline-flex; }
}

.l1-ticketing-nav {
  align-items: center;
  display: flex;
  gap: var(--l1-space-1);
  min-width: 0;
}

.l1-ticketing-nav__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);
  padding: .4rem .7rem;
  text-decoration: none;
  white-space: nowrap;
}

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

.l1-ticketing-nav__link[aria-current="page"] {
  background: var(--l1-brand-soft);
  color: var(--l1-brand);
}

.l1-ticketing-nav__link svg {
  height: 16px;
  width: 16px;
}
/* New ticket is the standalone app's one filled action; the queue page does
   not repeat it in its own head. */
.l1-ticketing-nav__link--primary,
.l1-ticketing-nav__link--primary:hover,
.l1-ticketing-nav__link--primary[aria-current="page"] {
  background: var(--l1-brand);
  color: var(--l1-on-brand);
}
.l1-ticketing-nav__link--primary:hover { background: var(--l1-brand-strong); }

/* No rail means no off-canvas drawer and no hamburger, so the topbar has to
   shed its own furniture rather than rely on the sidebar toggle to do it. */
@media (max-width: 900px) {
  .l1-ticketing-topbar .l1-topbar__workspace { display: none; }
  .l1-ticketing-nav__link span { display: none; }
  .l1-ticketing-nav__link { padding-inline: .5rem; }
}

@media (max-width: 640px) {
  .l1-ticketing-topbar .l1-topbar__context { display: none; }
  .l1-ticketing-topbar .l1-topbar__account-copy { display: none; }
}

.l1-ticketing-site {
  align-items: center;
  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);
  min-width: 0;
  white-space: nowrap;
}
.l1-ticketing-site svg { height: 16px; width: 16px; }
@media (max-width: 900px) { .l1-ticketing-site { display: none; } }

/* ---------- Ticket surfaces: the Jira-class treatment ----------
   Scoped to .l1-ticket-ui (queue, ticket, create) rather than applied to the
   admin shell, so the rest of the console keeps the Console 3.0 look. These are
   the same tokens and the same tone mapping from the l1_ui filters; what
   changes is density, typographic hierarchy and the shape of a status. */

/* Status is the standard dot and sentence-case label here too, and priority
   the console's sentence-case word (coloured only for urgent and high), so a
   ticket reads the same in the queue, its preview and its own page. */

/* Section headings are quiet, sentence-case labels: on a page that is mostly
   fields and messages, a row of full-size headings competes with the content. */
.l1-ticket-ui .l1-work-section > .ui-panel__head .ui-panel__title {
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
}

/* ---------- Queue ---------- */
/* Hairlines instead of zebra striping. Alternating fills make every other row
   look selected, which is exactly the signal the hover and the selection marker
   need for themselves. */
.l1-admin-workspace.l1-ticket-ui .l1-ticket-queue-table tbody tr:nth-child(even) > td {
  background: transparent;
}

/* ---------- Ticket header ---------- */
.l1-ticket-ui .ui-page__head .ui-title {
  font-size: 1.375rem;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.l1-ticket-key {
  background: var(--l1-surface-2);
  border-radius: 3px;
  color: var(--l1-ink-muted);
  font-family: var(--l1-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--l1-text-micro);
  letter-spacing: .02em;
  padding: 1px 6px;
}

/* ---------- Editor rail ----------
   Sentence case throughout, like every other detail aside: fields, section
   headings and fact labels. Facts are label/value rows (the aside default). */
.l1-ticket-rail .l1-ticket-rail__fields .l1-ticket-editor__state { color: var(--l1-ink-muted); }
.l1-ticket-contact__links { display: flex; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-4); margin-top: var(--l1-space-3); }
.l1-ticket-contact__links .ui-link { font-size: var(--l1-text-sm); }
.l1-ticket-rail .l1-ticket-facts { margin-top: var(--l1-space-3); }
/* "More": In copy, Time worked, Details and the guest link, folded. */
.l1-ticket-more > .l1-ticket-more__summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--l1-space-2);
  justify-content: space-between;
  list-style: none;
}
.l1-ticket-more > .l1-ticket-more__summary::-webkit-details-marker { display: none; }
.l1-ticket-more > .l1-ticket-more__summary > span { display: grid; gap: 2px; min-width: 0; }
.l1-ticket-more > .l1-ticket-more__summary strong { font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-ticket-more > .l1-ticket-more__summary svg { color: var(--l1-ink-muted); flex: none; height: 16px; transition: transform .15s ease; width: 16px; }
.l1-ticket-more[open] > .l1-ticket-more__summary svg { transform: rotate(180deg); }
.l1-ticket-more__part { border-top: 1px solid var(--l1-border); display: grid; gap: var(--l1-space-2); margin-top: var(--l1-space-3); padding-top: var(--l1-space-3); }
.l1-ticket-more__part:first-of-type { border-top: 0; padding-top: 0; }
.l1-ticket-more__title { font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); margin: 0; }
.l1-ticket-more__part .ui-hint { margin: 0; }
.l1-ticket-more__part .ui-actions { justify-content: flex-start; }

/* ---------- Activity stream ---------- */
/* Each message is a card with a connector running behind the avatars, so the
   stream reads as one thread rather than as a stack of rules. */
.l1-ticket-ui .l1-thread-list--workspace { position: relative; }
/* No messages, no thread: the connector must not run through the empty state. */
.l1-ticket-ui .l1-thread-list--workspace:not(:has(.l1-thread-message))::before { display: none; }
/* An empty thread is one quiet line (the compact empty state), not a second
   call to action: the composer bar right under it is where replying happens. */
.l1-ticket-ui .l1-thread-list--workspace::before {
  background: var(--l1-border);
  bottom: var(--l1-space-5);
  content: "";
  left: calc(0.875rem - 0.5px);
  position: absolute;
  top: var(--l1-space-5);
  width: 1px;
}
.l1-ticket-ui .l1-thread-list--workspace .l1-thread-message {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  margin-bottom: var(--l1-space-3);
  padding: var(--l1-space-3) var(--l1-space-4);
  position: relative;
}
.l1-ticket-ui .l1-thread-list--workspace .l1-thread-message:first-child { padding-top: var(--l1-space-3); }
.l1-ticket-ui .l1-thread-list--workspace .l1-thread-message:last-child { margin-bottom: 0; }
.l1-ticket-ui .l1-thread-list--workspace .l1-thread-message__avatar {
  /* Sits on the connector, so it needs the card's own background behind it. */
  box-shadow: 0 0 0 3px var(--l1-surface-1);
}
.l1-ticket-ui .l1-thread-list--workspace .l1-thread-message--internal {
  background: color-mix(in srgb, var(--l1-warn) 7%, var(--l1-surface-1));
  border-color: color-mix(in srgb, var(--l1-warn) 30%, transparent);
}
.l1-ticket-ui .l1-thread-list--workspace .l1-thread-message--internal .l1-thread-message__avatar {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--l1-warn) 7%, var(--l1-surface-1));
}
.l1-ticket-ui .l1-thread-message__time {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
}
.l1-ticket-ui .l1-thread-message__who strong { font-size: var(--l1-text-sm); }

.l1-ticket-crumbs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  letter-spacing: 0;
  text-transform: none;
}
.l1-ticket-crumbs > span[aria-hidden] { color: var(--l1-border-strong); }
.l1-ticket-crumbs a { align-items: center; display: inline-flex; gap: var(--l1-space-1); text-decoration: none; }
.l1-ticket-crumbs a:hover { color: var(--l1-ink); }
.l1-ticket-crumbs a svg { height: 14px; width: 14px; }
.l1-ticket-crumbs .l1-copyable__value { color: var(--l1-ink-muted); font-size: var(--l1-text-xs); }
.l1-ticket-meta { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2) var(--l1-space-3); }
.l1-ticket-meta .ui-chip svg { height: 13px; width: 13px; }
.l1-ticket-contact__email { display: grid; gap: 2px; margin-top: var(--l1-space-3); }
.l1-ticket-services {
  display: grid;
  gap: var(--l1-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.l1-ticket-services li {
  align-items: center;
  column-gap: var(--l1-space-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.l1-ticket-services li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-ticket-services li > .ui-table__sub { grid-column: 1; grid-row: 2; }
.l1-ticket-services li > .ui-status { grid-column: 2; grid-row: 1 / span 2; }

/* Rail facts are the aside's label/value rows; times are relative with the
   exact moment on hover, so a value never wraps into a second line. */
.l1-admin-workspace.l1-ticket-ui .l1-ticket-rail .l1-work-context dd { font-weight: var(--l1-fw-normal); }
.l1-admin-workspace.l1-ticket-ui .l1-ticket-rail .l1-work-context { gap: var(--l1-space-2); }

/* The composer bar under the conversation: a field-shaped prompt that opens
   the dock on the public audience, with Internal note beside it. It sticks to
   the bottom of the scrolling pane while the thread is in view, so replying
   never means scrolling back to the page head. */
.l1-ticket-ui .l1-ticket-composer-bar {
  align-items: center;
  background: var(--l1-sheet, var(--l1-surface-1));
  border-top: 1px solid var(--l1-border);
  bottom: 0;
  display: flex;
  gap: var(--l1-space-4);
  margin-top: var(--l1-space-4);
  padding: var(--l1-space-3) 0;
  position: sticky;
  z-index: 2;
}
.l1-ticket-composer-bar__field {
  align-items: stretch;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex: 1 1 auto;
  min-height: 2.75rem;
  min-width: 0;
}
.l1-ticket-composer-bar__field:hover,
.l1-ticket-composer-bar__field:focus-within { border-color: var(--l1-brand); }
.l1-ticket-composer-bar__prompt {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex: 1 1 auto;
  gap: var(--l1-space-2);
  min-width: 0;
  padding: 0 var(--l1-space-3);
  text-decoration: none;
}
.l1-ticket-composer-bar__prompt:hover,
.l1-ticket-composer-bar__prompt:focus-visible { color: var(--l1-ink); }
.l1-ticket-composer-bar__prompt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-ticket-composer-bar__note {
  align-items: center;
  border-left: 1px solid var(--l1-border);
  color: var(--l1-warn);
  display: inline-flex;
  flex: none;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  gap: var(--l1-space-1);
  padding: 0 var(--l1-space-3);
  text-decoration: none;
  white-space: nowrap;
}
.l1-ticket-composer-bar__note:hover { text-decoration: underline; }
.l1-ticket-composer-bar svg { flex: none; height: 16px; width: 16px; }

/* ---------- Watchers, history and CSAT on the ticket ---------- */
.l1-ticket-watchers {
  display: grid;
  gap: var(--l1-space-2);
  list-style: none;
  margin: 0 0 var(--l1-space-3);
  padding: 0;
}
.l1-ticket-watcher {
  align-items: center;
  border-top: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-2);
  justify-content: space-between;
  padding-top: var(--l1-space-2);
}
.l1-ticket-watcher:first-child { border-top: 0; padding-top: 0; }
.l1-ticket-watcher__who { display: grid; min-width: 0; overflow-wrap: anywhere; }
/* Two classes, not one: .l1-form is a flex column and would otherwise stack the
   field above its own Add button in a 300px rail that has room for both. */
.l1-form.l1-ticket-watchers__add {
  align-items: center;
  display: grid;
  gap: var(--l1-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

/* A revealed secure note, as opposed to the single-line <code> a password gets.
   pre-wrap because the value is free text the customer pasted: recovery codes
   and connection strings carry their own line breaks and must keep them, while
   a long unbroken key still has to wrap inside a 300px console rail rather than
   push the panel sideways. */
.l1-ticket-secret-note {
  background: var(--l1-surface-2);
  border-radius: var(--l1-radius-sm);
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-sm);
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: var(--l1-space-2) var(--l1-space-3);
  white-space: pre-wrap;
}

.l1-ticket-csat__comment {
  background: var(--l1-surface-2);
  border-radius: var(--l1-radius-md);
  margin: var(--l1-space-3) 0 0;
  padding: var(--l1-space-3);
}

/* One row per recorded change, with the diff indented under its summary so the
   page reads as "what happened" first and "to which field" second. */
.l1-ticket-history {
  display: grid;
  gap: var(--l1-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.l1-ticket-history__row {
  border-left: 2px solid var(--l1-border);
  padding-left: var(--l1-space-3);
}
.l1-ticket-history__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1) var(--l1-space-3);
}
.l1-ticket-history__head time { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-ticket-history__changes {
  display: grid;
  gap: var(--l1-space-1);
  list-style: none;
  margin: var(--l1-space-1) 0 0;
  padding: 0;
}
.l1-ticket-history__changes li {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2);
}
.l1-ticket-history__changes svg { height: 13px; width: 13px; }
.l1-ticket-history__field { font-weight: var(--l1-fw-semibold); }
.l1-ticket-history__from { text-decoration: line-through; }
.l1-ticket-history__to { color: var(--l1-ink); font-weight: var(--l1-fw-medium); }

/* The ticketing app's lockup: its own mark plus the configured workspace name,
   in place of the platform wordmark. */
.l1-ticketing-logo {
  border-radius: 6px;
  display: block;
  flex: none;
  height: 24px;
  width: 24px;
}
.l1-ticketing-wordmark {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ── Application platform ────────────────────────────────────────────────
   The client PaaS screens: the app grid, the service header and its tabs,
   the variables editor, the grouped settings form and the build log.

   Why this much lives here rather than in ui-* primitives: these are the
   only screens in the product where the record IS the subject — an app is a
   thing you watch, not a row you scan — so they get a card surface, a status
   rail and a deploy affordance that no other client page wants. Everything
   that repeats elsewhere (buttons, fields, chips, tables, kv lists) still
   comes from ui-*; nothing below re-implements one.

   Colour comes from tone tokens only, so light/dark follow the existing swap
   and status never disagrees with the l1_ui filters. */

/* ---------- Status chips ---------- */
/* Shared by the canvas's floating bar, which tightens them to its own
   height; the sizing here is the standalone one. */
/* Status filters read as one segmented control rather than five buttons. */
.l1-app-filter {
  align-items: center;
  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-dense);
  gap: var(--l1-space-2);
  line-height: 1;
  padding: 7px var(--l1-space-3);
  text-decoration: none;
  white-space: nowrap;
}
.l1-app-filter:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-app-filter[aria-current="page"] {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
  font-weight: var(--l1-fw-semibold);
}
.l1-app-filter__count {
  color: var(--l1-ink-muted);
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
}
.l1-app-filter[aria-current="page"] .l1-app-filter__count { color: inherit; }

/* ---------- Service header ---------- */
/* The identity band on every page for one app. Wider than ui-page__head
   because it carries the live hostname and the deploy control together. */
.l1-paas-head {
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-4);
  justify-content: space-between;
  padding-bottom: var(--l1-space-4);
}
.l1-paas-head__identity { display: grid; gap: 6px; min-width: 0; }
.l1-paas-head__title {
  align-items: center;
  color: var(--l1-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-2xl);
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-3);
  letter-spacing: -.02em;
  margin: 0;
}
.l1-paas-head__meta {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-2);
}
.l1-paas-head__sep { color: var(--l1-border-strong); }
@media (max-width: 575.98px) {
  .l1-paas-head__sep { display: none; }
  .l1-paas-head { gap: var(--l1-space-3); }
}
/* The public URL as a pill: the one thing on the page a customer clicks to
   confirm their own app is up. */
.l1-paas-head__url {
  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-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 10px;
  text-decoration: none;
}
a.l1-paas-head__url:hover {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
}
.l1-paas-head__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-paas-head__url svg,
.l1-paas-head__url i[data-lucide] { flex: none; height: 12px; width: 12px; }
.l1-paas-head__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}
.l1-paas-head__actions .l1-inline-form { flex-wrap: nowrap; }
.l1-paas-head__actions .ui-input { width: 11.5rem; }

.l1-paas-tabs {
  border-bottom: 1px solid var(--l1-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1);
  margin-bottom: var(--l1-space-5);
}
.l1-paas-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-sm);
  margin-bottom: -1px;
  padding: var(--l1-space-2) var(--l1-space-3);
  text-decoration: none;
  white-space: nowrap;
}
.l1-paas-tabs a:hover { color: var(--l1-ink); }
.l1-paas-tabs a[aria-current="page"] {
  border-bottom-color: var(--l1-brand);
  color: var(--l1-brand-strong);
  font-weight: var(--l1-fw-semibold);
}

/* ---------- Variables editor ---------- */
/* Environment variables are not tabular data: the key is an identifier, the
   value is often long and secret, and both are read by eye and copied by
   hand. A table forced the value into a cell that truncates; this is a
   two-column row that gives the value the width it needs. */
.l1-env-list {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  overflow: hidden;
}
.l1-env-row {
  align-items: center;
  border-bottom: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) auto;
  padding: var(--l1-space-2) var(--l1-space-3);
}
.l1-env-row:last-child { border-bottom: 0; }
.l1-env-row:hover { background: var(--l1-surface-2); }
.l1-env-row__key {
  color: var(--l1-ink);
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
  overflow-wrap: anywhere;
}
.l1-env-row__value {
  align-items: center;
  color: var(--l1-ink-soft);
  display: flex;
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-2);
  min-width: 0;
}
.l1-env-row__value > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A secret's stored value never reaches this page, so the masked run of dots
   is the whole value — there is nothing to reveal and no reveal control that
   could imply otherwise. */
.l1-env-row__masked { color: var(--l1-ink-muted); letter-spacing: .18em; }
.l1-env-row__actions {
  align-items: center;
  display: flex;
  gap: var(--l1-space-1);
  justify-content: end;
}
/* Row controls stay quiet until the row is under the pointer, so five rows of
   Remove buttons do not read as the most important thing on the page. They
   remain in the tab order and become visible on focus. */
.l1-env-row__actions .ui-btn { opacity: .55; }
.l1-env-row:hover .ui-btn,
.l1-env-row__actions .ui-btn:focus-visible { opacity: 1; }
@media (hover: none) {
  .l1-env-row__actions .ui-btn { opacity: 1; }
}
/* Stacked on phones: key over value, actions beside both. Every child names
   its cell — an implicit column on the row-spanning actions put them above the
   key instead of beside it. */
@media (max-width: 767.98px) {
  .l1-env-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px;
  }
  .l1-env-row__key     { grid-column: 1; grid-row: 1; }
  .l1-env-row__value   { grid-column: 1; grid-row: 2; }
  .l1-env-row__actions { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Domain verification records ---------- */
.l1-dns-record {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  gap: var(--l1-space-2);
  padding: 6px var(--l1-space-2);
}
.l1-dns-record__type {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  flex: none;
  padding: 1px 6px;
}
.l1-dns-record__name,
.l1-dns-record__value {
  overflow-wrap: anywhere;
  min-width: 0;
}
.l1-dns-record__name { color: var(--l1-ink-soft); }
.l1-dns-record__value { color: var(--l1-ink); }
.l1-dns-record__arrow { color: var(--l1-ink-muted); flex: none; }
.l1-dns-record .ui-btn { margin-inline-start: auto; }

/* The raw .env editor, offered beside the one-at-a-time form. Pasting a
   provider's connection block is the common case and retyping it key by key
   is where mistakes come from. */
.l1-env-raw {
  background: var(--l1-code-bg);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  color: var(--l1-code-ink);
  display: block;
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-xs);
  line-height: 1.7;
  min-height: 14rem;
  padding: var(--l1-space-3);
  resize: vertical;
  width: 100%;
}
.l1-env-raw:focus { box-shadow: var(--l1-focus-ring); outline: none; }

/* ---------- Grouped settings ---------- */
/* Every setting used to be one cell in a four-across grid, which put the
   repository URL beside the instance count and made neither legible. These
   are groups of setting rows: what it is and why on the left, the control on
   the right, at a width the control actually wants. */
.l1-setting-row {
  border-bottom: 1px solid var(--l1-border);
  display: grid;
  gap: var(--l1-space-3) var(--l1-space-5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  padding: var(--l1-space-4) 0;
}
.l1-setting-row:first-of-type { padding-top: 0; }
.l1-setting-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
/* 13px, not 14: the group heading above it is 14px, and a label at the same
   size and weight flattened the two into one level. */
.l1-setting-row__label {
  color: var(--l1-ink);
  display: block;
  font-size: var(--l1-text-dense);
  font-weight: var(--l1-fw-semibold);
}
.l1-setting-row__help {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  margin: 4px 0 0;
  max-width: 46ch;
}
.l1-setting-row__control { display: grid; gap: var(--l1-space-2); min-width: 0; }
/* A control that needs the full measure — a start command, a long URL — opts
   out of the narrow column instead of being cut off inside it. */
.l1-setting-row--wide { grid-template-columns: minmax(0, 1fr); }
.l1-setting-row--wide .l1-setting-row__control { max-width: 44rem; }
@media (max-width: 991.98px) {
  .l1-setting-row { grid-template-columns: minmax(0, 1fr); }
  .l1-setting-row__control { max-width: 32rem; }
}

/* ---------- Templates ---------- */
/* Search and the category chips stay in reach while scrolling a phone's
   worth of templates; cards say what each app is and how big it runs, and a
   template that cannot be deployed yet is listed, dimmed, as coming soon. */
.l1-catalog-tools { background: var(--l1-bg); }
.l1-catalog-section { display: grid; gap: var(--l1-space-3); }
.l1-catalog-section__title { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); margin: 0; }
/* Six popular templates: two even rows of three, or three of two. */
.l1-catalog-grid--popular { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .l1-catalog-grid--popular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.l1-catalog-search { align-items: center; display: flex; gap: var(--l1-space-2); max-width: 36rem; }
.l1-catalog-search .ui-input { flex: 1; min-width: 0; }
.l1-catalog-groups { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-catalog-grid { display: grid; gap: var(--l1-space-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.l1-catalog-card { background: var(--l1-surface-1); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); color: inherit; display: flex; flex-direction: column; gap: var(--l1-space-2); padding: var(--l1-space-4); text-decoration: none; transition: border-color var(--l1-transition); }
.l1-catalog-card:hover { border-color: var(--l1-border-strong); }
.l1-catalog-card:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: 3px; }
.l1-catalog-card[data-unavailable="true"] { background: var(--l1-surface-2); }
.l1-catalog-card[data-unavailable="true"] :is(h2, h3),
.l1-catalog-card[data-unavailable="true"] .l1-catalog-icon { color: var(--l1-ink-muted); }
.l1-catalog-card :is(h2, h3) { color: var(--l1-ink); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); margin: var(--l1-space-1) 0 0; }
.l1-catalog-card p { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); line-height: 1.5; margin: 0; }
.l1-catalog-card__top, .l1-catalog-card__footer { align-items: center; display: flex; gap: var(--l1-space-3); justify-content: space-between; }
.l1-catalog-card__group { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); text-align: end; }
.l1-catalog-card__footer { border-top: 1px solid var(--l1-border); margin-top: auto; padding-top: var(--l1-space-3); }
.l1-catalog-card__size { color: var(--l1-ink-muted); font-family: var(--l1-font-data); font-size: var(--l1-text-micro); white-space: nowrap; }
.l1-catalog-card__go { align-items: center; color: var(--l1-brand-strong); display: inline-flex; font-size: var(--l1-text-dense); font-weight: var(--l1-fw-semibold); gap: 4px; white-space: nowrap; }
.l1-catalog-card__go svg { height: 14px; width: 14px; }
.l1-catalog-icon { background: var(--l1-brand-soft); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); color: var(--l1-brand-strong); display: grid; font-weight: var(--l1-fw-bold); height: 36px; place-items: center; width: 36px; }
.l1-catalog-icon svg { height: 18px; width: 18px; }
.l1-catalog-card[data-unavailable="true"] .l1-catalog-icon { background: var(--l1-surface-2); }
@media (max-width: 575.98px) {
  .l1-catalog-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .l1-catalog-grid,
  .l1-catalog-grid--popular { gap: 0; grid-template-columns: minmax(0, 1fr); }
  /* Two lines a template: name and what it is, with the size beside. */
  .l1-catalog-card { border-radius: 0; display: grid; gap: 2px var(--l1-space-3); grid-template-columns: auto minmax(0, 1fr); padding: var(--l1-space-3) 0; background: transparent; border-width: 0 0 1px; }
  .l1-catalog-card[data-unavailable="true"] { background: transparent; }
  .l1-catalog-card__top { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .l1-catalog-card__group { display: none; }
  .l1-catalog-card :is(h2, h3) { grid-column: 2; margin: 0; }
  .l1-catalog-card p { grid-column: 2; }
  .l1-catalog-card__footer { border: 0; grid-column: 2; padding-top: 2px; }
}

/* ---------- New application ---------- */
.l1-new-section { display: grid; gap: var(--l1-space-3); }
.l1-new-section__title { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.l1-new-grid { display: grid; gap: var(--l1-space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.l1-new-card { background: var(--l1-surface-1); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); color: inherit; display: grid; gap: var(--l1-space-4); grid-template-columns: auto minmax(0, 1fr) auto; min-height: 100%; padding: var(--l1-space-5); align-items: start; text-decoration: none; }
.l1-new-card:hover { background: var(--l1-surface-2); border-color: var(--l1-border-strong); }
.l1-new-card:focus-visible { outline: 2px solid var(--l1-brand); outline-offset: 3px; }
.l1-new-card__icon { border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); color: var(--l1-ink); display: grid; height: 36px; place-items: center; width: 36px; }
.l1-new-card__icon svg, .l1-new-card__go svg { height: 18px; width: 18px; }
.l1-new-card__body { display: grid; gap: 6px; justify-items: start; }
.l1-new-card__title { font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-new-card__text { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); line-height: 1.5; }
.l1-new-card__hint { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-new-card__state svg { height: 12px; width: 12px; }
.l1-new-card__go { color: var(--l1-ink-soft); margin-top: 2px; }
.l1-new-card:hover .l1-new-card__go { color: var(--l1-ink); }

/* ---------- Create form ---------- */
/* The source switcher in the panel head: a quiet link that opens a short
   list of the other sources. */
.l1-app-switch { position: relative; }
.l1-app-switch > summary { cursor: pointer; list-style: none; }
.l1-app-switch > summary::-webkit-details-marker { display: none; }
.l1-app-switch > summary svg { height: 14px; width: 14px; }
.l1-app-switch__menu { background: var(--l1-surface-1); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); box-shadow: var(--l1-shadow-md); display: grid; inset-inline-end: 0; min-width: 14rem; padding: var(--l1-space-1); position: absolute; top: calc(100% + 6px); z-index: 5; }
.l1-app-switch__menu a { border-radius: var(--l1-radius-sm); color: var(--l1-ink); font-size: var(--l1-text-dense); padding: var(--l1-space-2) var(--l1-space-3); text-decoration: none; }
.l1-app-switch__menu a:hover { background: var(--l1-surface-2); }
/* Builder options as cards with a line each, the common two up front. */
.l1-builder-choices { display: grid; gap: var(--l1-space-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.l1-builder-choice { align-items: start; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); cursor: pointer; display: flex; gap: var(--l1-space-3); margin: 0; padding: var(--l1-space-3) var(--l1-space-4); }
.l1-builder-choice:hover { border-color: var(--l1-border-strong); }
.l1-builder-choice:has(input:checked) { background: var(--l1-brand-soft); border-color: var(--l1-brand-border); }
.l1-builder-choice input { margin-top: 3px; }
.l1-builder-choice span { display: grid; gap: 2px; }
.l1-builder-choice strong { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-semibold); }
.l1-builder-choice small { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); line-height: 1.5; }
.l1-builder-more { margin-top: var(--l1-space-3); padding: 0; }
.l1-builder-more > .l1-builder-choices { margin-top: var(--l1-space-2); }
.l1-database-create__foot { justify-content: space-between; }

/* ---------- GitHub connection ---------- */
/* The connect/disconnect band. One row, because it carries one decision. */
.l1-github-connect {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-4);
  justify-content: space-between;
}
.l1-github-connect__copy { display: grid; gap: 4px; min-width: 0; }
.l1-github-connect__title {
  align-items: center;
  color: var(--l1-ink);
  display: flex;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-2);
}
.l1-github-connect__title svg,
.l1-github-connect__title i[data-lucide] { flex: none; height: 16px; width: 16px; }
.l1-github-connect__body {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-dense);
  max-width: 62ch;
}

/* A checkbox that reads as one control with its wording, so the label is the
   click target rather than a 13px square beside some text. */
.l1-check {
  align-items: center;
  color: var(--l1-ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-2);
}
.l1-check input { flex: none; height: 16px; margin: 0; width: 16px; }

/* The repository a connected application deploys from, shown as a fact rather
   than an editable field: it is chosen at creation and changing it would mean
   moving the push hook too. */
.l1-repo-fact {
  align-items: center;
  color: var(--l1-ink);
  display: inline-flex;
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-dense);
  gap: 6px;
  overflow-wrap: anywhere;
}
.l1-repo-fact svg,
.l1-repo-fact i[data-lucide] { color: var(--l1-ink-muted); flex: none; height: 14px; width: 14px; }

/* ---------- Deployment feed ---------- */
/* Builds as a timeline rather than a table: a build is an event with an
   outcome, and the status marker carries more than a status column does. */
.l1-deploy-feed { display: grid; }
.l1-deploy-item {
  border-bottom: 1px solid var(--l1-border);
  display: grid;
  gap: 2px var(--l1-space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--l1-space-3) 0;
  position: relative;
}
.l1-deploy-item:first-child { padding-top: 0; }
.l1-deploy-item:last-child { border-bottom: 0; padding-bottom: 0; }
/* Every child names its cell. Two of them span both rows, and grid places
   row-definite items before fully auto ones — leaving the columns implicit
   put the timestamp where the title should be. */
.l1-deploy-item__marker {
  border-radius: 50%;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 9px;
  margin-top: 5px;
  width: 9px;
}
.l1-deploy-item__marker[data-tone="ok"]     { background: var(--l1-ok); }
.l1-deploy-item__marker[data-tone="warn"]   { background: var(--l1-warn); }
.l1-deploy-item__marker[data-tone="danger"] { background: var(--l1-danger); }
.l1-deploy-item__marker[data-tone="info"],
.l1-deploy-item__marker[data-tone="busy"]   { background: var(--l1-info); }
.l1-deploy-item__marker[data-tone="muted"]  { background: var(--l1-border-strong); }
.l1-deploy-item__title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-dense);
  gap: var(--l1-space-2);
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
}
.l1-deploy-item__title a { color: var(--l1-ink); font-weight: var(--l1-fw-semibold); text-decoration: none; }
.l1-deploy-item__title a:hover { color: var(--l1-brand-strong); }
.l1-deploy-item__commit {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-deploy-item__when {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
  grid-column: 3;
  grid-row: 1 / span 2;
  white-space: nowrap;
}

/* ---------- Application tab workspace ---------- */
.l1-app-workspace { min-width: 0; }
.l1-app-workspace > *, .l1-app-workspace form { min-width: 0; }
.l1-app-workspace .ui-panel { margin: 0; }
.l1-app-workspace .ui-panel__head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); justify-content: space-between; padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-workspace .ui-panel__head > div { flex: 1; min-width: 0; }
.l1-app-workspace .ui-panel__title { align-items: center; display: flex; gap: var(--l1-space-2); font-size: var(--l1-text-sm); }
.l1-app-workspace .ui-panel__desc { font-size: var(--l1-text-dense); line-height: 1.5; margin-top: 5px; max-width: 60ch; }
.l1-app-workspace svg, .l1-app-log-console svg { flex-shrink: 0; height: 16px; width: 16px; }
.l1-app-workspace code { font-family: var(--l1-font-data); font-size: .92em; }
/* An "add" form that opens in place: the summary button sits in the panel
   head's top-right corner and the form opens under the head, above the list
   it adds to. No script, and the drawer's poll pauses while it is open. */
.l1-app-card--adder { position: relative; }
.l1-app-card--adder > .ui-panel__head { padding-inline-end: 11rem; }
.l1-app-adder > summary { inset-block-start: var(--l1-space-3); inset-inline-end: var(--l1-space-4); list-style: none; position: absolute; }
.l1-app-adder > summary::-webkit-details-marker { display: none; }
.l1-app-adder__close,
.l1-app-adder[open] .l1-app-adder__open,
.l1-app-adder[open] > summary > svg { display: none; }
.l1-app-adder[open] .l1-app-adder__close { display: inline; }
.l1-app-adder__body { background: var(--l1-surface-2); border-block: 1px solid var(--l1-border); display: grid; gap: var(--l1-space-4); padding: var(--l1-space-5); }
.l1-app-adder__body + * { border-top: 0; }
.l1-app-adder__alt { padding: 0; }
.l1-app-connect { display: grid; gap: var(--l1-space-6); }
.l1-app-connect--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-app-connect__title { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-semibold); margin: 0; }
.l1-app-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); justify-content: space-between; }
.l1-app-range { display: flex; flex-wrap: wrap; gap: var(--l1-space-1); }
.l1-app-inline-notice { margin-top: var(--l1-space-2); }
.l1-app-link-button { appearance: none; background: none; border: 0; color: var(--l1-brand-strong); cursor: pointer; font: inherit; padding: 0; }
.l1-app-link-button:hover { text-decoration: underline; }
.l1-app-card { overflow: hidden; }
.l1-app-row { align-items: center; display: flex; gap: var(--l1-space-3); padding: var(--l1-space-4) var(--l1-space-5); }
/* Workplace (Notion-style editor on the Workplace host). Colours are local
   custom properties so dark mode is one override block, not a copy of every rule. */
body.l1-workplace-body {
  --wp-ink: #37352f;
  --wp-ink-2: rgba(55, 53, 47, 0.65);
  --wp-ink-3: rgba(55, 53, 47, 0.45);
  --wp-ink-4: rgba(55, 53, 47, 0.3);
  --wp-bg: #fff;
  --wp-side: #f7f7f5;
  --wp-hover: rgba(55, 53, 47, 0.06);
  --wp-hover-2: rgba(55, 53, 47, 0.1);
  --wp-line: rgba(55, 53, 47, 0.09);
  --wp-line-2: rgba(55, 53, 47, 0.16);
  --wp-pop: #fff;
  --wp-pop-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;
  --wp-column: #f7f7f5;
  --wp-card: #fff;
  --wp-code: #f7f6f3;
  --wp-accent: #2383e2;
  --wp-danger: #eb5757;
  margin: 0;
  background: var(--wp-bg);
  color: var(--wp-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-l1-theme="dark"] body.l1-workplace-body {
  --wp-ink: rgba(255, 255, 255, 0.81);
  --wp-ink-2: rgba(255, 255, 255, 0.6);
  --wp-ink-3: rgba(255, 255, 255, 0.45);
  --wp-ink-4: rgba(255, 255, 255, 0.28);
  --wp-bg: #191919;
  --wp-side: #202020;
  --wp-hover: rgba(255, 255, 255, 0.055);
  --wp-hover-2: rgba(255, 255, 255, 0.1);
  --wp-line: rgba(255, 255, 255, 0.08);
  --wp-line-2: rgba(255, 255, 255, 0.13);
  --wp-pop: #252525;
  --wp-pop-shadow: rgba(255, 255, 255, 0.094) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 5px 10px, rgba(0, 0, 0, 0.4) 0 15px 40px;
  --wp-column: #202020;
  --wp-card: #252525;
  --wp-code: #202020;
}
/* The shell paints its own background: a global dark rule outranks body here. */
.l1-notion { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--wp-bg); color: var(--wp-ink); }
.l1-notion svg { flex: none; }
.l1-notion button { font: inherit; color: inherit; }
.l1-notion textarea, .l1-notion input[type="text"] { font: inherit; color: inherit; }
.l1-notion textarea::placeholder, .l1-notion input::placeholder { color: var(--wp-ink-4); }

/* Shared small controls */
.l1-notion-iconbtn { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--wp-ink-3); cursor: pointer; transition: background 80ms ease-in; }
.l1-notion-iconbtn:hover { background: var(--wp-hover-2); color: var(--wp-ink); }
.l1-notion-iconbtn svg { width: 16px; height: 16px; }
.l1-notion-iconbtn--sm { width: 22px; height: 22px; border-radius: 4px; }
.l1-notion-iconbtn--sm svg { width: 14px; height: 14px; }

/* Sidebar */
.l1-notion-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--wp-side); color: var(--wp-ink); border-right: 1px solid var(--wp-line); font-size: 14px; }
.l1-notion-side__head { position: relative; display: flex; align-items: center; gap: 2px; padding: 8px 8px 4px; }
.l1-notion-switch { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
.l1-notion-switch:hover, .l1-notion-switch[aria-expanded="true"] { background: var(--wp-hover-2); }
.l1-notion-switch strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.l1-notion-switch svg { width: 14px; height: 14px; color: var(--wp-ink-3); }
.l1-notion-logo { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.l1-notion-side__section { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 2px 14px; color: var(--wp-ink-3); font-size: 12px; font-weight: 600; }
.l1-notion-side__section .l1-notion-iconbtn { opacity: 0; }
.l1-notion-side__section:hover .l1-notion-iconbtn, .l1-notion-side__section .l1-notion-iconbtn:focus-visible, .l1-notion-side__section .l1-notion-iconbtn[aria-expanded="true"] { opacity: 1; }
.l1-notion-tree { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 4px; }
.l1-notion-empty-side { margin: 6px 8px; color: var(--wp-ink-3); font-size: 13px; }
.l1-notion-row { position: relative; display: flex; align-items: center; gap: 2px; min-height: 30px; margin: 1px 0; padding-left: calc(4px + var(--l1-notion-depth, 0) * 16px); padding-right: 4px; border-radius: 6px; color: var(--wp-ink-2); }
.l1-notion-row:hover, .l1-notion-row:focus-within { background: var(--wp-hover); }
.l1-notion-row.is-current { background: var(--wp-hover-2); color: var(--wp-ink); font-weight: 500; }
.l1-notion-row > a { display: flex; align-items: center; min-width: 0; flex: 1; padding: 4px 2px; color: inherit; text-decoration: none; line-height: 1.3; }
.l1-notion-row > a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-row__toggle { position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; }
.l1-notion-row__toggle svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.l1-notion-row__toggle.has-children { cursor: pointer; }
.l1-notion-row__toggle.has-children:hover { background: var(--wp-hover-2); }
.l1-notion-row__chev { opacity: 0; transition: transform 120ms ease; }
.l1-notion-favs { padding: 0 8px 2px; }
.l1-notion-star.is-on { color: var(--tone-yellow-ink, #d9a400); }
.l1-notion-star.is-on svg { fill: currentColor; }
.l1-notion-row:hover .l1-notion-row__toggle.has-children .l1-notion-row__icon { opacity: 0; }
.l1-notion-row:hover .l1-notion-row__toggle.has-children .l1-notion-row__chev { opacity: 1; }
.l1-notion-node.is-collapsed > .l1-notion-row .l1-notion-row__chev { transform: rotate(-90deg); }
.l1-notion-node.is-collapsed > .l1-notion-children { display: none; }
.l1-notion-row__actions { display: flex; gap: 1px; opacity: 0; }
.l1-notion-row:hover .l1-notion-row__actions, .l1-notion-row:focus-within .l1-notion-row__actions, .l1-notion-row__actions [aria-expanded="true"] { opacity: 1; }
.l1-notion-row__actions:has([aria-expanded="true"]) { opacity: 1; }
.l1-notion-rename { flex: 1; min-width: 0; height: 26px; margin: 2px 0; padding: 0 6px; border: 0; border-radius: 4px; background: var(--wp-bg); box-shadow: inset 0 0 0 1px var(--wp-accent), 0 0 0 3px rgba(35, 131, 226, 0.2); font-size: 14px; outline: none; }
.l1-notion-newpage { display: flex; align-items: center; gap: 8px; margin: 2px 8px 6px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--wp-ink-3); cursor: pointer; text-align: left; font-size: 14px; }
.l1-notion-newpage:hover { background: var(--wp-hover); color: var(--wp-ink); }
.l1-notion-newpage svg { width: 16px; height: 16px; }
.l1-notion-user { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--wp-line); font-size: 12px; color: var(--wp-ink-2); }
.l1-notion-user img { width: 22px; height: 22px; border-radius: 5px; }
.l1-notion-user span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-user form { margin: 0; }

/* Workplace switcher popover */
.l1-notion-workplaces { position: absolute; z-index: 30; left: 8px; right: -40px; top: 42px; padding: 6px; border-radius: 10px; background: var(--wp-pop); box-shadow: var(--wp-pop-shadow); }
.l1-notion-workplaces[hidden] { display: none; }
.l1-notion-workplaces__list { display: grid; gap: 1px; max-height: 50vh; overflow: auto; }
.l1-notion-workplace { display: flex; align-items: center; gap: 2px; min-height: 32px; padding-right: 4px; border-radius: 6px; }
.l1-notion-workplace:hover { background: var(--wp-hover); }
.l1-notion-workplace > a { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 6px 8px; color: inherit; text-decoration: none; font-size: 14px; }
.l1-notion-workplace > a span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-workplace svg { width: 16px; height: 16px; color: var(--wp-ink-2); }
.l1-notion-workplace__check { color: var(--wp-ink) !important; }
.l1-notion-workplace .l1-notion-iconbtn { opacity: 0; }
.l1-notion-workplace:hover .l1-notion-iconbtn, .l1-notion-workplace .l1-notion-iconbtn:focus-visible { opacity: 1; }
.l1-notion-workplace .l1-notion-rename { margin: 3px 4px; }
.l1-notion-workplaces__add { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 7px 8px; border: 0; border-top: 1px solid var(--wp-line); border-radius: 0 0 6px 6px; background: transparent; color: var(--wp-ink-2); cursor: pointer; text-align: left; font-size: 14px; }
.l1-notion-workplaces__add:hover { background: var(--wp-hover); color: var(--wp-ink); }
.l1-notion-workplaces__add svg { width: 16px; height: 16px; }

/* Popover menu (workplace.js builds these, fixed so nothing clips them) */
.l1-notion-pop { position: fixed; z-index: 1000; display: grid; min-width: 200px; max-width: 320px; max-height: min(420px, 70vh); overflow: auto; padding: 5px; border-radius: 10px; background: var(--wp-pop); color: var(--wp-ink); box-shadow: var(--wp-pop-shadow); font-size: 14px; outline: none; animation: l1-notion-pop-in 90ms ease-out; }
.l1-notion-pop--wide { width: 300px; }
@keyframes l1-notion-pop-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.l1-notion-pop__label { margin: 0; padding: 8px 8px 4px; color: var(--wp-ink-3); font-size: 12px; font-weight: 600; }
.l1-notion-pop__label:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--wp-line); padding-top: 10px; }
.l1-notion-pop__empty { margin: 0; padding: 8px; color: var(--wp-ink-3); }
.l1-notion-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
.l1-notion-pop__item.is-active { background: var(--wp-hover-2); }
.l1-notion-pop__item.is-danger { color: var(--wp-danger); }
.l1-notion-pop__icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--wp-ink-2); }
.l1-notion-pop__item.is-danger .l1-notion-pop__icon { color: inherit; }
.l1-notion-pop__icon svg { width: 17px; height: 17px; }
.l1-notion-pop__item.has-desc { min-height: 46px; }
.l1-notion-pop__item.has-desc .l1-notion-pop__icon { width: 40px; height: 40px; border-radius: 6px; background: var(--wp-bg); box-shadow: 0 0 0 1px var(--wp-line-2); }
.l1-notion-pop__item.has-desc .l1-notion-pop__icon svg { width: 20px; height: 20px; }
.l1-notion-pop__text { display: grid; min-width: 0; }
.l1-notion-pop__text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-pop__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wp-ink-3); font-size: 12px; }

/* Main column */
/* The editor is a size container: side padding and wide tables follow the
   width the editor actually has, not the window (the sidebar takes 248px). */
.l1-notion-main { position: relative; min-width: 0; min-height: 0; overflow: auto; container-type: inline-size; --doc-pad: clamp(24px, 7cqi, 96px); --doc-text: 708px; }
.l1-notion-topbar { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; gap: 8px; height: 45px; padding: 0 12px; background: var(--wp-bg); }
.l1-notion-crumb { display: flex; flex: 1; min-width: 0; align-items: center; gap: 2px; color: var(--wp-ink-2); font-size: 14px; }
.l1-notion-crumb a, .l1-notion-crumb__current { overflow: hidden; max-width: 220px; padding: 2px 6px; border-radius: 4px; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-crumb a:hover { background: var(--wp-hover); }
.l1-notion-crumb__current { color: var(--wp-ink); }
.l1-notion-crumb > span[aria-hidden] { color: var(--wp-ink-4); }
.l1-notion-status { color: var(--wp-ink-3); font-size: 13px; white-space: nowrap; }
.l1-notion-status[data-tone="error"] { color: var(--wp-danger); }
/* 708px of text plus the side padding (the old rule put the padding inside
   708px, which left a 516px column). */
.l1-notion-doc { max-width: calc(var(--doc-text) + 2 * var(--doc-pad)); margin: 0 auto; padding: 72px var(--doc-pad) 24px; }
.l1-notion-page.is-board .l1-notion-doc, .l1-notion-page.is-table .l1-notion-doc, .l1-notion-page.is-full .l1-notion-doc { max-width: none; }
.l1-notion-emoji { display: block; width: 52px; height: 52px; margin-bottom: 10px; color: var(--wp-ink-2); stroke-width: 1.5; }
.l1-notion-docform { display: grid; }
.l1-notion-title { display: block; width: 100%; margin: 0 0 4px; padding: 3px 2px; border: 0; background: transparent; font-size: 40px !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; resize: none; overflow: hidden; outline: none; }
.l1-notion-body { display: block; width: 100%; margin: 0; padding: 3px 2px; border: 0; background: transparent; font-size: 16px; line-height: 1.6; resize: none; overflow: hidden; outline: none; }
.l1-notion-kicker { margin: 0 0 8px; color: var(--wp-ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.l1-notion-hero { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.l1-notion-lead { margin: 12px 0 0; color: var(--wp-ink-3); font-size: 16px; }
.l1-notion-empty { padding-top: 120px; }
.l1-notion-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.l1-notion-starters button { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--wp-hover); cursor: pointer; font-size: 14px; }
.l1-notion-starters button:hover { background: var(--wp-hover-2); }
.l1-notion-starters svg { width: 16px; height: 16px; color: var(--wp-ink-2); }
.l1-notion-group-pages { display: grid; gap: 1px; margin: 8px 0; padding: 0; list-style: none; }
.l1-notion-group-pages a { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; color: inherit; text-decoration: none; }
.l1-notion-group-pages a span { border-bottom: 1px solid var(--wp-line-2); }
.l1-notion-group-pages a:hover { background: var(--wp-hover); }
.l1-notion-group-pages svg { width: 18px; height: 18px; color: var(--wp-ink-2); }

/* Blocks */
.l1-notion-blocks { display: grid; margin-top: 2px; }
.l1-notion-block { position: relative; margin: 1px 0; border-radius: 4px; }
.l1-notion-block.is-dragging { opacity: 0.4; }
.l1-notion-block.is-drop-before { box-shadow: 0 -3px 0 0 rgba(35, 131, 226, 0.55); }
.l1-notion-block.is-drop-after { box-shadow: 0 3px 0 0 rgba(35, 131, 226, 0.55); }
.l1-notion-gutter { position: absolute; left: -50px; top: 3px; display: flex; gap: 1px; padding-right: 4px; opacity: 0; transition: opacity 120ms ease-in; }
.l1-notion-block:hover > .l1-notion-gutter, .l1-notion-gutter:focus-within, .l1-notion-gutter:has([aria-expanded="true"]) { opacity: 1; }
.l1-notion-gutter__btn { display: grid; place-items: center; width: 22px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--wp-ink-4); cursor: pointer; }
.l1-notion-gutter__btn:hover { background: var(--wp-hover-2); color: var(--wp-ink-2); }
.l1-notion-gutter__btn[data-l1-block-handle] { cursor: grab; width: 18px; }
.l1-notion-gutter__btn svg { width: 16px; height: 16px; }
.l1-notion-block--heading > .l1-notion-gutter { top: 12px; }
.l1-notion-block--subheading > .l1-notion-gutter { top: 8px; }
.l1-notion-block__content { min-width: 0; }
.l1-notion-block form { display: flex; align-items: flex-start; gap: 4px; margin: 0; }
.l1-notion-block__text { display: grid; flex: 1; min-width: 0; }
.l1-notion-block textarea { display: block; width: 100%; min-width: 0; margin: 0; padding: 3px 2px; border: 0; background: transparent; font-size: 16px; line-height: 1.5; resize: none; overflow: hidden; outline: none; }
.l1-notion-block textarea::placeholder { color: transparent; }
.l1-notion-block textarea:focus::placeholder, .l1-notion-block--heading textarea::placeholder, .l1-notion-block--subheading textarea::placeholder, .l1-notion-block--toggle textarea::placeholder, .l1-notion-block--todo textarea::placeholder { color: var(--wp-ink-4); }
.l1-notion-block--heading { margin-top: 1.4em; }
.l1-notion-block--heading textarea { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.l1-notion-block--subheading { margin-top: 1em; }
.l1-notion-block--subheading textarea { font-size: 24px; font-weight: 650; line-height: 1.3; }
.l1-notion-marker { flex: none; min-width: 24px; padding: 3px 2px 0 2px; text-align: center; line-height: 1.5; font-size: 16px; }
.l1-notion-block--bullet .l1-notion-marker { font-size: 22px; line-height: 1.05; }
.l1-notion-check { flex: none; width: 16px; height: 16px; margin: 7px 6px 0 4px; accent-color: var(--wp-accent); cursor: pointer; }
.l1-notion-block--todo:has(.l1-notion-check:checked) textarea[name="body"] { color: var(--wp-ink-3); text-decoration: line-through; text-decoration-color: var(--wp-ink-4); }
.l1-notion-block--quote .l1-notion-block__text { border-left: 3px solid currentColor; padding-left: 14px; }
.l1-notion-block--quote textarea { font-size: 18px; }
.l1-notion-block--callout form { padding: 14px 14px 14px 12px; border-radius: 6px; background: var(--wp-hover); }
.l1-notion-callout__icon { width: 20px; height: 20px; margin: 4px 6px 0 0; color: #d9730d; }
.l1-notion-block--code .l1-notion-block__text { padding: 12px 16px; border-radius: 6px; background: var(--wp-code); }
.l1-notion-block--code textarea { font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 14px; line-height: 1.55; tab-size: 2; }
/* Inline Markdown (workplace-markup.js): the formatted view shows while the
   block is not being edited; the textarea stays focusable underneath it. */
.l1-notion-md { display: none; min-width: 0; padding: 3px 2px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.l1-notion-block__text.has-md:not(:focus-within) > .l1-notion-md { display: block; }
.l1-notion-block__text.has-md:not(:focus-within) > textarea[data-l1-editor] { position: absolute; width: 1px; height: 1px !important; opacity: 0; pointer-events: none; }
.l1-notion-block__text { position: relative; }
.l1-notion-block--heading .l1-notion-md { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.l1-notion-block--subheading .l1-notion-md { font-size: 24px; font-weight: 650; line-height: 1.3; }
.l1-notion-block--quote .l1-notion-md { font-size: 18px; }
.l1-notion-block--todo:has(.l1-notion-check:checked) .l1-notion-md { color: var(--wp-ink-3); text-decoration: line-through; text-decoration-color: var(--wp-ink-4); }
.l1-notion-md a { color: var(--wp-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.l1-notion-md code { padding: 1px 5px; border-radius: 4px; background: var(--wp-hover); color: var(--tone-red-ink, #eb5757); font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.86em; }
.l1-notion-mdimport { width: 100%; min-height: 220px; padding: 10px; border: 0; border-radius: 6px; background: var(--wp-bg); box-shadow: inset 0 0 0 1px var(--wp-line-2); color: inherit; font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; line-height: 1.5; resize: vertical; }
.l1-notion-block--divider hr { width: 100%; margin: 12px 0; border: 0; border-top: 1px solid var(--wp-line-2); }
.l1-notion-block--divider > .l1-notion-gutter { top: 2px; }
.l1-notion-toggle { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.l1-notion-toggle:hover { background: var(--wp-hover-2); }
.l1-notion-toggle svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform 120ms ease; }
.l1-notion-block.is-closed .l1-notion-toggle svg { transform: none; }
.l1-notion-block.is-closed .l1-notion-toggle__detail { display: none; }
.l1-notion-toggle__detail { color: var(--wp-ink-2); }
.l1-notion-ghost { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 4px 2px; border: 0; border-radius: 4px; background: transparent; color: var(--wp-ink-4); cursor: text; text-align: left; font-size: 15px; opacity: 0.8; }
.l1-notion-ghost:hover { color: var(--wp-ink-3); }
.l1-notion-ghost svg { width: 16px; height: 16px; }
.l1-notion-page { min-height: calc(100% - 45px); padding-bottom: 30vh; cursor: text; }
.l1-notion-page button, .l1-notion-page a, .l1-notion-page input[type="checkbox"] { cursor: pointer; }

/* Boards */
.l1-notion-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 8px var(--doc-pad) 48px; cursor: default; }
/* A board inside a page starts at the text column and runs to the editor's
   right edge, like Notion, instead of scrolling inside 708px. */
.l1-notion-board--inline { --bleed: max(0px, (100cqi - var(--doc-text) - 2 * var(--doc-pad)) / 2); margin: 4px calc(-1 * var(--bleed)) 4px 0; padding: 8px 0 12px; }
.l1-notion-page.is-full .l1-notion-board--inline { --bleed: 0px; }
.l1-notion-column { flex: 0 0 260px; display: grid; align-content: start; gap: 6px; padding: 6px; border-radius: 10px; background: var(--wp-column); transition: box-shadow 80ms ease; }
.l1-notion-column.is-drop-target { box-shadow: inset 0 0 0 2px rgba(35, 131, 226, 0.5); }
.l1-notion-column header { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.l1-notion-column h2 { margin: 0; font-size: 14px; font-weight: 600; }
.l1-notion-column header span { color: var(--wp-ink-3); font-size: 13px; }
.l1-notion-card { position: relative; padding: 8px 10px; border-radius: 8px; background: var(--wp-card); box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 2px 4px; cursor: grab; }
html[data-l1-theme="dark"] .l1-notion-card { box-shadow: rgba(255, 255, 255, 0.094) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 2px 4px; }
.l1-notion-card:hover { background: color-mix(in srgb, var(--wp-card) 94%, var(--wp-ink)); }
.l1-notion-card.is-dragging { opacity: 0.4; }
.l1-notion-card form { display: grid; margin: 0; }
.l1-notion-card textarea { display: block; width: 100%; margin: 0; padding: 0 22px 0 0; border: 0; background: transparent; resize: none; overflow: hidden; outline: none; }
.l1-notion-card__title { font-size: 14px; font-weight: 500; line-height: 1.4; }
.l1-notion-card__notes { color: var(--wp-ink-2); font-size: 12.5px !important; line-height: 1.45; }
.l1-notion-card__notes:placeholder-shown:not(:focus) { height: 0 !important; }
.l1-notion-card__menu { position: absolute; top: 6px; right: 6px; opacity: 0; background: var(--wp-card); }
.l1-notion-card:hover .l1-notion-card__menu, .l1-notion-card__menu:focus-visible, .l1-notion-card__menu[aria-expanded="true"] { opacity: 1; }
.l1-notion-newcard, .l1-notion-column--new { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 8px; border-radius: 6px; color: var(--wp-ink-3); }
.l1-notion-newcard:hover, .l1-notion-column--new:hover { background: var(--wp-hover); }
.l1-notion-newcard svg, .l1-notion-column--new svg { width: 15px; height: 15px; }
.l1-notion-newcard input, .l1-notion-column--new input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; font-size: 14px; outline: none; }
.l1-notion-column--new { flex: 0 0 200px; background: transparent; height: 36px; }

/* Tables */
.l1-notion-sheet { padding: 0 var(--doc-pad) 32px; cursor: default; }
/* A table inside a page: narrow ones line up with the text; wider ones grow
   into the empty space on both sides (up to the editor padding) before they
   scroll. --table-w is the sum of the column widths, set by the template. */
.l1-notion-block .l1-notion-sheet {
  --bleed: max(0px, (100cqi - var(--doc-text) - 2 * var(--doc-pad)) / 2);
  --shift: min(var(--bleed), max(0px, (var(--table-w, 0px) - var(--doc-text)) / 2));
  margin: 0 calc(-1 * var(--bleed)) 0 calc(-1 * var(--shift));
  padding: 4px 0 8px;
}
.l1-notion-page.is-full .l1-notion-block .l1-notion-sheet { --bleed: 0px; --shift: 0px; }
.l1-notion-sheet form { margin: 0; }
.l1-notion-sheet__scroll { overflow-x: auto; }
/* Fixed layout: each <col> width (set by dragging a header edge) is the column width. */
.l1-notion-sheet table { border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.l1-notion-sheet th, .l1-notion-sheet td { overflow: hidden; padding: 0; border: 1px solid var(--wp-line-2); vertical-align: middle; }
.l1-notion-sheet th { position: relative; }
.l1-notion-sheet__resize { position: absolute; z-index: 2; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
.l1-notion-sheet__resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; border-radius: 1px; background: transparent; transition: background 80ms ease-in; }
.l1-notion-sheet__resize:hover::after, .l1-notion-sheet__resize.is-active::after { background: var(--wp-accent); }
body.l1-notion-resizing, body.l1-notion-resizing * { cursor: col-resize !important; user-select: none; }
.l1-notion-sheet tr > :first-child { border-left: 0; }
.l1-notion-sheet tr > :last-child { border-right: 0; }
.l1-notion-sheet th { color: var(--wp-ink-2); font-weight: 500; text-align: left; }
.l1-notion-sheet__head { display: flex; align-items: center; gap: 4px; padding-left: 8px; }
.l1-notion-sheet__head > svg { width: 14px; height: 14px; color: var(--wp-ink-3); }
.l1-notion-sheet th input, .l1-notion-sheet td input[type="text"] { width: 100%; min-width: 0; padding: 7px 8px; border: 0; background: transparent; font-size: 14px; outline: none; }
.l1-notion-sheet th input { padding-left: 2px; color: var(--wp-ink-2); font-weight: 500; }
.l1-notion-sheet td:focus-within { box-shadow: inset 0 0 0 2px rgba(35, 131, 226, 0.55); }
.l1-notion-sheet td input[type="checkbox"] { width: 16px; height: 16px; margin: 8px; accent-color: var(--wp-accent); }
.l1-notion-sheet__corner { width: 56px; text-align: center; white-space: nowrap; }
.l1-notion-sheet__x, .l1-notion-sheet__plus { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--wp-ink-3); cursor: pointer; }
.l1-notion-sheet__x { opacity: 0; }
/* Row reordering: a grip next to the remove button, shown on row hover. */
.l1-notion-sheet__grip { display: inline-grid; place-items: center; width: 18px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--wp-ink-3); cursor: grab; opacity: 0; vertical-align: middle; }
.l1-notion-sheet tr:hover .l1-notion-sheet__grip, .l1-notion-sheet__grip:focus-visible { opacity: 1; }
.l1-notion-sheet__grip:hover { background: var(--wp-hover-2); color: var(--wp-ink); }
.l1-notion-sheet__grip:active { cursor: grabbing; }
.l1-notion-sheet__grip svg { width: 14px; height: 14px; }
.l1-notion-sheet tr.is-dragging > td { opacity: 0.4; }
.l1-notion-sheet tr.is-drop-before > td { box-shadow: inset 0 3px 0 0 rgba(35, 131, 226, 0.6); }
.l1-notion-sheet tr.is-drop-after > td { box-shadow: inset 0 -3px 0 0 rgba(35, 131, 226, 0.6); }
.l1-notion-sheet th:hover .l1-notion-sheet__x, .l1-notion-sheet tr:hover .l1-notion-sheet__x, .l1-notion-sheet__x:focus-visible { opacity: 1; }
.l1-notion-sheet__x:hover, .l1-notion-sheet__plus:hover { background: var(--wp-hover-2); color: var(--wp-ink); }
.l1-notion-sheet__x svg, .l1-notion-sheet__plus svg { width: 14px; height: 14px; }
.l1-notion-sheet__newrow { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--wp-line-2); background: transparent; color: var(--wp-ink-3); cursor: pointer; text-align: left; font-size: 14px; }
.l1-notion-sheet__newrow:hover { background: var(--wp-hover); color: var(--wp-ink-2); }
.l1-notion-sheet__newrow svg { width: 15px; height: 15px; }

@media (max-width: 800px) {
  .l1-notion { grid-template-columns: 1fr; height: auto; min-height: 100dvh; }
  .l1-notion-side { max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--wp-line); }
  .l1-notion-doc, .l1-notion-page.is-board .l1-notion-doc, .l1-notion-page.is-table .l1-notion-doc { padding: 32px 24px 16px 40px; }
  .l1-notion-title, .l1-notion-hero { font-size: 32px !important; }
  .l1-notion-gutter { left: -36px; }
  .l1-notion-gutter__btn[data-l1-block-add] { display: none; }
  .l1-notion-gutter { opacity: 0.6; }
  .l1-notion-board, .l1-notion-sheet { padding-left: 16px; padding-right: 16px; }
  .l1-notion-workplaces { right: 8px; }
}
/* Workplace Select columns: option pills, the cell picker, the options
   manager and the colour swatches (static/js/workplace-select.js). --opt is the
   option's colour; tint and text are mixed from it so any custom hex reads. */
.l1-notion-opt { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 0 7px; border-radius: 4px; background: color-mix(in srgb, var(--opt, #9b9a97) 22%, transparent); color: color-mix(in srgb, var(--opt, #9b9a97) 72%, #1f1e1b); font-size: 13.5px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-l1-theme="dark"] .l1-notion-opt { background: color-mix(in srgb, var(--opt, #9b9a97) 34%, transparent); color: color-mix(in srgb, var(--opt, #9b9a97) 45%, #ffffff); }
.l1-notion-opt__x { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; cursor: pointer; opacity: 0.7; }
.l1-notion-opt__x:hover { opacity: 1; background: color-mix(in srgb, var(--opt, #9b9a97) 25%, transparent); }
.l1-notion-opt__x svg { width: 12px; height: 12px; }
.l1-notion-selectcell { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 4px 8px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.l1-notion-selectcell:hover { background: var(--wp-hover); }
.l1-notion-selectcell:focus-visible { outline: 2px solid rgba(35, 131, 226, 0.55); outline-offset: -2px; }
.l1-notion-sheet__type { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--wp-ink-3); cursor: pointer; }
.l1-notion-sheet__type:hover { background: var(--wp-hover-2); color: var(--wp-ink); }
.l1-notion-sheet__type svg { width: 14px; height: 14px; }
.l1-notion-picker { padding: 0; }
.l1-notion-picker__field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--wp-line); background: var(--wp-hover); }
.l1-notion-picker__field input { flex: 1; min-width: 80px; padding: 3px 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: inherit; outline: none; }
.l1-notion-picker .l1-notion-pop__label { padding-left: 12px; }
.l1-notion-picker__list { display: grid; padding: 0 5px 5px; max-height: 280px; overflow: auto; }
.l1-notion-picker__item { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 6px; border-radius: 5px; cursor: pointer; }
.l1-notion-picker__item.is-active { background: var(--wp-hover-2); }
.l1-notion-picker__item[aria-selected="true"] .l1-notion-opt { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--opt) 60%, transparent); }
.l1-notion-picker__grip { width: 14px; height: 14px; color: var(--wp-ink-4); }
.l1-notion-picker__edit { margin-left: auto; opacity: 0; }
.l1-notion-picker__item:hover .l1-notion-picker__edit, .l1-notion-picker__edit:focus-visible { opacity: 1; }
.l1-notion-picker__create { color: var(--wp-ink-2); font-size: 13px; }
.l1-notion-manager { display: grid; gap: 4px; padding: 6px 8px 8px; }
.l1-notion-manager__list { display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.l1-notion-manager__row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px; cursor: grab; }
.l1-notion-manager__row:hover { background: var(--wp-hover); }
.l1-notion-manager__color { flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: var(--opt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); cursor: pointer; }
.l1-notion-manager__name { flex: 1; min-width: 0; padding: 3px 6px; border: 0; border-radius: 4px; background: transparent; font: inherit; font-size: 14px; color: inherit; outline: none; }
.l1-notion-manager__name:focus { background: var(--wp-bg); box-shadow: inset 0 0 0 1px var(--wp-accent); }
.l1-notion-manager__preview { flex: none; max-width: 96px; }
.l1-notion-manager__error { margin: 0; color: var(--wp-danger); font-size: 12px; }
.l1-notion-manager__error:empty { display: none; }
.l1-notion-manager__add { padding: 6px 8px; border: 0; border-radius: 5px; background: var(--wp-hover); font: inherit; font-size: 14px; color: inherit; outline: none; }
.l1-notion-manager__add:focus { box-shadow: inset 0 0 0 1px var(--wp-accent); }
.l1-notion-manager__done { justify-self: end; padding: 4px 12px; border: 0; border-radius: 5px; background: var(--wp-accent); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.l1-notion-swatches { position: fixed; z-index: 1001; width: 220px; }
.l1-notion-swatches__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 2px 4px; }
.l1-notion-swatch { display: flex; padding: 4px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.l1-notion-swatch:hover, .l1-notion-swatch.is-current { background: var(--wp-hover-2); }
.l1-notion-swatches__custom { display: flex; align-items: center; gap: 6px; padding: 6px 6px 2px; border-top: 1px solid var(--wp-line); font-size: 13px; color: var(--wp-ink-2); }
.l1-notion-swatches__custom input[type="color"] { width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.l1-notion-swatches__custom input[type="text"] { width: 80px; padding: 3px 6px; border: 1px solid var(--wp-line-2); border-radius: 4px; background: transparent; font: inherit; font-size: 13px; color: inherit; }
/* Workplace: Trash, page history, confirm dialog, toast (workplace-trash.js). */
.l1-notion-trashbtn { margin-top: 2px; }
.l1-notion-iconbtn--danger:hover { color: var(--wp-danger); }
.l1-notion-textbtn { padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--wp-ink-2); cursor: pointer; font-size: 13px; }
.l1-notion-textbtn:hover { background: var(--wp-hover-2); color: var(--wp-ink); }
.l1-notion-textbtn--danger { color: var(--wp-danger); }
.l1-notion-textbtn--danger:hover { color: var(--wp-danger); }
.l1-notion-primary { padding: 7px 14px; border: 0; border-radius: 6px; background: var(--wp-accent); color: #fff !important; cursor: pointer; font-size: 14px; font-weight: 500; }
.l1-notion-primary:hover { filter: brightness(1.08); }
.l1-notion-modal { position: fixed; z-index: 900; inset: 0; display: grid; place-items: center; padding: 24px 16px; background: rgba(15, 15, 15, 0.45); }
.l1-notion-modal[hidden] { display: none; }
.l1-notion-modal__card { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(720px, calc(100dvh - 48px)); overflow: hidden; border-radius: 12px; background: var(--wp-pop); color: var(--wp-ink); box-shadow: var(--wp-pop-shadow); animation: l1-notion-pop-in 120ms ease-out; }
.l1-notion-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 6px 20px; }
.l1-notion-modal__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; }
.l1-notion-modal__head h2 svg { width: 18px; height: 18px; color: var(--wp-ink-2); }
.l1-notion-modal__lead { margin: 0; padding: 0 20px 10px; color: var(--wp-ink-3); font-size: 13px; }
.l1-notion-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--wp-line); }
.l1-notion-modal__foot .l1-notion-modal__lead { padding: 0; margin-right: auto; }
.l1-notion-trash__filter { margin: 0 16px 8px; padding: 7px 10px; border: 1px solid var(--wp-line-2); border-radius: 6px; background: var(--wp-bg); font-size: 14px; outline: none; }
.l1-notion-trash__filter:focus { border-color: var(--wp-accent); box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.18); }
.l1-notion-trash__list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0 8px 8px; list-style: none; }
.l1-notion-trash__item { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 6px; }
.l1-notion-trash__item:hover { background: var(--wp-hover); }
.l1-notion-trash__icon { width: 18px; height: 18px; flex: none; color: var(--wp-ink-2); }
.l1-notion-trash__text { display: grid; flex: 1; min-width: 0; }
.l1-notion-trash__text strong { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-trash__text small { overflow: hidden; color: var(--wp-ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-trash__actions { display: flex; gap: 2px; }
.l1-notion-trash__none { margin: 0; padding: 12px 20px; color: var(--wp-ink-3); font-size: 13px; }
.l1-notion-trash__empty { display: grid; place-items: center; gap: 6px; padding: 36px 20px 44px; color: var(--wp-ink-3); }
.l1-notion-trash__empty svg { width: 32px; height: 32px; }
.l1-notion-trash__empty p { margin: 0; }
.l1-notion-history { width: min(980px, 100%); max-height: min(760px, calc(100dvh - 48px)); }
.l1-notion-history__body { display: grid; flex: 1; min-height: 0; grid-template-columns: 240px minmax(0, 1fr); border-top: 1px solid var(--wp-line); }
.l1-notion-history__list { overflow: auto; padding: 6px; border-right: 1px solid var(--wp-line); background: var(--wp-side); }
.l1-notion-history__version { display: grid; gap: 1px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
.l1-notion-history__version:hover { background: var(--wp-hover); }
.l1-notion-history__version.is-selected { background: var(--wp-hover-2); }
.l1-notion-history__when { font-size: 13px; font-weight: 500; }
.l1-notion-history__when em { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(35, 131, 226, 0.14); color: var(--wp-accent); font-size: 11px; font-style: normal; }
.l1-notion-history__who, .l1-notion-history__what { overflow: hidden; color: var(--wp-ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-history__preview { display: flex; flex-direction: column; min-height: 0; }
.l1-notion-history__doc { flex: 1; overflow: auto; padding: 24px 36px; font-size: 15px; line-height: 1.55; }
.l1-notion-history__doc h1 { margin: 0 0 12px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.l1-notion-history__doc h2 { margin: 18px 0 4px; font-size: 21px; }
.l1-notion-history__doc h3 { margin: 14px 0 4px; font-size: 17px; }
.l1-notion-history__doc p, .l1-notion-history__doc pre, .l1-notion-history__doc blockquote { margin: 4px 0; }
.l1-notion-history__doc hr { border: 0; border-top: 1px solid var(--wp-line-2); margin: 10px 0; }
.l1-notion-history__doc blockquote { padding-left: 12px; border-left: 3px solid currentColor; }
.l1-notion-history__doc pre { padding: 10px 12px; border-radius: 6px; background: var(--wp-code); font-size: 13px; white-space: pre-wrap; }
.l1-notion-history__callout { padding: 10px 12px; border-radius: 6px; background: var(--wp-hover); }
.l1-notion-history__todo.is-done { color: var(--wp-ink-3); text-decoration: line-through; }
.l1-notion-history__table { overflow-x: auto; margin: 8px 0; }
.l1-notion-history__table table { border-collapse: collapse; font-size: 13px; }
.l1-notion-history__table th, .l1-notion-history__table td { min-width: 90px; padding: 5px 8px; border: 1px solid var(--wp-line-2); text-align: left; }
.l1-notion-history__table th { color: var(--wp-ink-2); font-weight: 500; }
.l1-notion-history__board { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0; }
.l1-notion-history__column { display: grid; align-content: start; gap: 4px; min-width: 150px; padding: 6px; border-radius: 8px; background: var(--wp-column); font-size: 13px; }
.l1-notion-history__column span { padding: 4px 6px; border-radius: 5px; background: var(--wp-card); box-shadow: 0 0 0 1px var(--wp-line-2); }
.l1-notion-history__removed { max-height: 180px; overflow: auto; padding: 8px 16px 12px; border-top: 1px solid var(--wp-line); }
.l1-notion-history__removed h3 { margin: 0 0 4px; color: var(--wp-ink-3); font-size: 12px; font-weight: 600; }
.l1-notion-history__removed ul { margin: 0; padding: 0; list-style: none; }
.l1-notion-history__removed li { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; }
.l1-notion-history__removed-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-notion-history__removed small { color: var(--wp-ink-3); white-space: nowrap; }
.l1-notion-confirm { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15, 15, 15, 0.45); }
.l1-notion-confirm__card { width: min(400px, 100%); padding: 20px; border-radius: 12px; background: var(--wp-pop, #fff); color: var(--wp-ink, #37352f); box-shadow: var(--wp-pop-shadow); animation: l1-notion-pop-in 100ms ease-out; }
.l1-notion-confirm__card h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.l1-notion-confirm__card p { margin: 0; color: var(--wp-ink-2); font-size: 14px; line-height: 1.5; }
.l1-notion-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.l1-notion-confirm__actions button { padding: 7px 14px; border: 0; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
.l1-notion-confirm__cancel { background: var(--wp-hover-2); color: inherit; }
.l1-notion-confirm__ok { background: var(--wp-accent); color: #fff; }
.l1-notion-confirm__ok.is-danger { background: var(--wp-danger); }
.l1-notion-confirm__actions button:focus-visible { outline: 2px solid var(--wp-accent); outline-offset: 2px; }
.l1-notion-toast { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%); pointer-events: none; }
.l1-notion-toast__card { display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 16px; border-radius: 8px; background: #2f2f2f; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 14px; pointer-events: auto; animation: l1-notion-pop-in 140ms ease-out; }
.l1-notion-toast__card button { padding: 4px 10px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.l1-notion-toast__card button:hover { background: rgba(255, 255, 255, 0.24); }
@media (max-width: 800px) {
  .l1-notion-history__body { grid-template-columns: 1fr; }
  .l1-notion-history__list { max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--wp-line); }
  .l1-notion-history__doc { padding: 16px 20px; }
}
/* Workplace tables: polish, typed cells, conditional formatting. */
body.l1-workplace-body {
  --tone-gray: #f1f1ef; --tone-brown: #f4eeee; --tone-orange: #fbecdd; --tone-yellow: #fbf3db; --tone-green: #edf3ec;
  --tone-blue: #e7f3f8; --tone-purple: #f6f3f9; --tone-pink: #faf1f5; --tone-red: #fdebec;
  --tone-gray-ink: #787774; --tone-brown-ink: #9f6b53; --tone-orange-ink: #d9730d; --tone-yellow-ink: #cb912f; --tone-green-ink: #448361;
  --tone-blue-ink: #337ea9; --tone-purple-ink: #9065b0; --tone-pink-ink: #c14c8a; --tone-red-ink: #d44c47;
}
html[data-l1-theme="dark"] body.l1-workplace-body {
  --tone-gray: #2f2f2f; --tone-brown: #4a3228; --tone-orange: #5c3b23; --tone-yellow: #564328; --tone-green: #243d30;
  --tone-blue: #143a4e; --tone-purple: #3c2d49; --tone-pink: #4e2c3c; --tone-red: #522e2a;
  --tone-gray-ink: #9b9b9b; --tone-brown-ink: #ba856f; --tone-orange-ink: #c77d48; --tone-yellow-ink: #ca9849; --tone-green-ink: #529e72;
  --tone-blue-ink: #5e87c9; --tone-purple-ink: #9d68d3; --tone-pink-ink: #d15796; --tone-red-ink: #df5452;
}
.l1-notion-sheet__bar { display: flex; align-items: center; gap: 4px; min-height: 30px; margin-bottom: 2px; }
/* Under the table, "New row" is as wide as the table, not the bleed area. */
.l1-notion-sheet > .l1-notion-sheet__newrow { max-width: var(--table-w, 100%); }
.l1-notion .l1-notion-sheet__tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--wp-ink-3); cursor: pointer; font-size: 13px; }
.l1-notion .l1-notion-sheet__tool:hover, .l1-notion .l1-notion-sheet__tool[aria-expanded="true"] { background: var(--wp-hover); color: var(--wp-ink); }
.l1-notion-sheet__tool svg { width: 15px; height: 15px; }
.l1-notion-sheet__count:not(:empty) { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--wp-accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.l1-notion-sheet thead th { height: 34px; background: var(--wp-bg); }
.l1-notion-page.is-table .l1-notion-sheet thead th { position: sticky; top: 45px; z-index: 2; }
.l1-notion-sheet tbody td { height: 34px; transition: background-color 120ms ease; }
.l1-notion-sheet tbody tr:hover > td { background-color: var(--wp-hover); }
.l1-notion-sheet td input[type="text"], .l1-notion-sheet td input[type="url"], .l1-notion-sheet td input[type="date"] { width: 100%; min-width: 0; height: 33px; padding: 0 8px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; outline: none; text-overflow: ellipsis; }
.l1-notion-sheet td .l1-notion-cell--number { text-align: right; font-variant-numeric: tabular-nums; }
.l1-notion-sheet td .l1-notion-cell--date { color-scheme: light dark; font-variant-numeric: tabular-nums; }
.l1-notion-sheet td .l1-notion-cell--date:invalid, .l1-notion-sheet td .l1-notion-cell--date[value=""] { color: var(--wp-ink-4); }
.l1-notion-cell--url { position: relative; display: flex; align-items: center; }
.l1-notion-cell--url input { color: var(--wp-ink) !important; text-decoration: underline; text-decoration-color: var(--wp-ink-4); text-underline-offset: 3px; }
.l1-notion-cell__open { position: absolute; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--wp-pop); box-shadow: 0 0 0 1px var(--wp-line-2); color: var(--wp-ink-2); opacity: 0; }
.l1-notion-cell--url:hover .l1-notion-cell__open, .l1-notion-cell__open:focus-visible { opacity: 1; }
.l1-notion-cell__open svg { width: 14px; height: 14px; }
/* Conditional formatting: a row rule tints the row, a cell rule the cell (and wins). */
.l1-notion-sheet tbody tr[data-l1-rule="gray"] > td { background-color: var(--tone-gray); }
.l1-notion-sheet tbody tr[data-l1-rule="brown"] > td { background-color: var(--tone-brown); }
.l1-notion-sheet tbody tr[data-l1-rule="orange"] > td { background-color: var(--tone-orange); }
.l1-notion-sheet tbody tr[data-l1-rule="yellow"] > td { background-color: var(--tone-yellow); }
.l1-notion-sheet tbody tr[data-l1-rule="green"] > td { background-color: var(--tone-green); }
.l1-notion-sheet tbody tr[data-l1-rule="blue"] > td { background-color: var(--tone-blue); }
.l1-notion-sheet tbody tr[data-l1-rule="purple"] > td { background-color: var(--tone-purple); }
.l1-notion-sheet tbody tr[data-l1-rule="pink"] > td { background-color: var(--tone-pink); }
.l1-notion-sheet tbody tr[data-l1-rule="red"] > td { background-color: var(--tone-red); }
.l1-notion-sheet tbody tr > td[data-l1-rule="gray"] { background-color: var(--tone-gray); color: var(--tone-gray-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="brown"] { background-color: var(--tone-brown); color: var(--tone-brown-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="orange"] { background-color: var(--tone-orange); color: var(--tone-orange-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="yellow"] { background-color: var(--tone-yellow); color: var(--tone-yellow-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="green"] { background-color: var(--tone-green); color: var(--tone-green-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="blue"] { background-color: var(--tone-blue); color: var(--tone-blue-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="purple"] { background-color: var(--tone-purple); color: var(--tone-purple-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="pink"] { background-color: var(--tone-pink); color: var(--tone-pink-ink); }
.l1-notion-sheet tbody tr > td[data-l1-rule="red"] { background-color: var(--tone-red); color: var(--tone-red-ink); }
.l1-notion-sheet tbody td[data-l1-rule] input { color: inherit; font-weight: 500; }

/* Formatting rules panel */
.l1-notion-rules { position: fixed; z-index: 1000; display: grid; gap: 8px; max-height: min(560px, 80vh); overflow: auto; padding: 12px; border-radius: 12px; background: var(--wp-pop); color: var(--wp-ink); box-shadow: var(--wp-pop-shadow); font-size: 14px; animation: l1-notion-pop-in 90ms ease-out; }
.l1-notion-rules__head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 4px; }
.l1-notion-rules__head small { flex: 1; color: var(--wp-ink-3); font-size: 12px; }
.l1-notion-rules__list { display: grid; gap: 8px; }
.l1-notion-rules__empty { margin: 0; padding: 10px 4px; color: var(--wp-ink-3); font-size: 13px; line-height: 1.5; }
.l1-notion-rule { display: grid; gap: 6px; padding: 8px 8px 8px 10px; border-radius: 8px; background: var(--wp-hover); box-shadow: inset 3px 0 0 var(--rule-ink, var(--wp-line-2)); }
.l1-notion-rule[data-tone="gray"] { --rule-ink: var(--tone-gray-ink); } .l1-notion-rule[data-tone="brown"] { --rule-ink: var(--tone-brown-ink); }
.l1-notion-rule[data-tone="orange"] { --rule-ink: var(--tone-orange-ink); } .l1-notion-rule[data-tone="yellow"] { --rule-ink: var(--tone-yellow-ink); }
.l1-notion-rule[data-tone="green"] { --rule-ink: var(--tone-green-ink); } .l1-notion-rule[data-tone="blue"] { --rule-ink: var(--tone-blue-ink); }
.l1-notion-rule[data-tone="purple"] { --rule-ink: var(--tone-purple-ink); } .l1-notion-rule[data-tone="pink"] { --rule-ink: var(--tone-pink-ink); }
.l1-notion-rule[data-tone="red"] { --rule-ink: var(--tone-red-ink); }
.l1-notion-rule__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.l1-notion-rule__if { min-width: 44px; color: var(--wp-ink-3); font-size: 12px; font-weight: 600; }
.l1-notion-rule select, .l1-notion-rule__value { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--wp-bg); box-shadow: 0 0 0 1px var(--wp-line-2); color: inherit; font: inherit; font-size: 13px; outline: none; }
.l1-notion-rule select:focus, .l1-notion-rule__value:focus { box-shadow: 0 0 0 2px rgba(35, 131, 226, 0.55); }
.l1-notion-rule__column { max-width: 150px; }
.l1-notion-rule__value { flex: 1; min-width: 90px; color-scheme: light dark; }
.l1-notion-rule__spacer { flex: 1; }
.l1-notion-rule__x { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--wp-ink-3); cursor: pointer; }
.l1-notion-rule__x:hover { background: var(--wp-hover-2); color: var(--wp-ink); }
.l1-notion-rule__x svg { width: 15px; height: 15px; }
.l1-notion-rule__tones { display: flex; gap: 4px; }
.l1-notion-rule__tone { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--wp-line-2); cursor: pointer; }
.l1-notion-rule__tone.is-on { box-shadow: 0 0 0 2px var(--wp-pop), 0 0 0 4px var(--wp-accent); }
.l1-notion-rule__tone[data-tone="gray"] { background: var(--tone-gray); } .l1-notion-rule__tone[data-tone="brown"] { background: var(--tone-brown); }
.l1-notion-rule__tone[data-tone="orange"] { background: var(--tone-orange); } .l1-notion-rule__tone[data-tone="yellow"] { background: var(--tone-yellow); }
.l1-notion-rule__tone[data-tone="green"] { background: var(--tone-green); } .l1-notion-rule__tone[data-tone="blue"] { background: var(--tone-blue); }
.l1-notion-rule__tone[data-tone="purple"] { background: var(--tone-purple); } .l1-notion-rule__tone[data-tone="pink"] { background: var(--tone-pink); }
.l1-notion-rule__tone[data-tone="red"] { background: var(--tone-red); }
.l1-notion-rule__scope { display: inline-flex; margin-left: auto; padding: 2px; border-radius: 7px; background: var(--wp-bg); box-shadow: 0 0 0 1px var(--wp-line-2); }
.l1-notion-rule__scope button { height: 24px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--wp-ink-2); cursor: pointer; font-size: 12px; }
.l1-notion-rule__scope button.is-on { background: var(--wp-hover-2); color: var(--wp-ink); font-weight: 500; }
.l1-notion-rules__add { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--wp-ink-2); cursor: pointer; font-size: 13px; }
.l1-notion-rules__add:hover:not(:disabled) { background: var(--wp-hover); color: var(--wp-ink); }
.l1-notion-rules__add:disabled { opacity: 0.5; cursor: default; }
.l1-notion-rules__add svg { width: 15px; height: 15px; }

/* Live collaboration: faces in the top bar, a named outline on what each
   person is editing, and dots next to open pages in the sidebar. */
.l1-notion-people { display: flex; align-items: center; padding-left: 6px; }
.l1-notion-face { position: relative; display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; overflow: hidden; border-radius: 50%; background: var(--who, var(--wp-ink-3)); box-shadow: 0 0 0 2px var(--wp-bg), 0 0 0 4px var(--who, transparent); color: #fff; font-size: 10px; font-weight: 700; }
.l1-notion-face img { width: 100%; height: 100%; object-fit: cover; }
.l1-notion-face--more { background: var(--wp-hover-2); box-shadow: 0 0 0 2px var(--wp-bg); color: var(--wp-ink-2); }
.is-remote-focus { position: relative; }
.l1-notion-block.is-remote-focus, .l1-notion-docform.is-remote-focus, .l1-notion-card.is-remote-focus { outline: 2px solid var(--who); outline-offset: 3px; border-radius: 4px; }
.l1-notion-sheet td.is-remote-focus, .l1-notion-sheet th.is-remote-focus { box-shadow: inset 0 0 0 2px var(--who); }
.l1-notion-remote { position: absolute; z-index: 4; top: -10px; right: 2px; padding: 1px 6px; border-radius: 4px 4px 4px 0; background: var(--who); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; pointer-events: none; animation: l1-notion-pop-in 120ms ease-out; }
.l1-notion-sheet td > .l1-notion-remote, .l1-notion-sheet th > .l1-notion-remote { top: 1px; right: 1px; border-radius: 0 0 0 4px; font-size: 10px; line-height: 14px; }
.l1-notion-row__people { display: flex; flex: none; margin-right: 2px; }
.l1-notion-dot { display: grid; place-items: center; width: 16px; height: 16px; margin-left: -4px; overflow: hidden; border-radius: 50%; background: var(--who); box-shadow: 0 0 0 1.5px var(--wp-side); color: #fff; font-size: 7px; font-weight: 700; }
.l1-notion-dot img { width: 100%; height: 100%; object-fit: cover; }
.l1-notion-row:hover .l1-notion-row__people { display: none; }

/* Workplace "Connect AI": folder-scoped MCP keys (modal) and the sidebar badge. */
.l1-notion-row__ai { flex: none; width: 14px; height: 14px; margin-right: 2px; color: var(--wp-accent); opacity: 0.85; }
.l1-notion-row:hover .l1-notion-row__ai { display: none; }
.l1-notion-agent { width: min(640px, 100%); overflow-y: auto; }
.l1-notion-agent > .l1-notion-modal__head { position: sticky; top: 0; z-index: 1; background: var(--wp-pop); }
.l1-notion-agent__form, .l1-notion-agent__keys { padding: 0 20px 16px; }
.l1-notion-agent h3 { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--wp-ink-2); }
.l1-notion-agent code { padding: 1px 5px; border-radius: 4px; background: var(--wp-hover); font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; }
.l1-notion-agent__new { margin: 8px 20px 4px; padding: 12px 14px 14px; border-radius: 10px; background: var(--wp-hover); }
.l1-notion-agent__warn { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--tone-orange-ink, #d9730d); font-size: 13px; font-weight: 600; }
.l1-notion-agent__warn svg { width: 16px; height: 16px; }
.l1-notion-agent__copy { position: relative; display: flex; align-items: center; gap: 8px; }
.l1-notion-agent__copy > code { flex: 1; overflow: hidden; padding: 8px 10px; background: var(--wp-bg); box-shadow: inset 0 0 0 1px var(--wp-line-2); text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.l1-notion-agent__copy--block { align-items: flex-start; margin-bottom: 6px; }
.l1-notion-agent__copy pre { flex: 1; margin: 0; overflow: auto; max-height: 220px; padding: 9px 10px; border-radius: 6px; background: var(--wp-bg); box-shadow: inset 0 0 0 1px var(--wp-line-2); font-family: var(--l1-font-data, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.l1-notion-agent__prompt { font-family: inherit !important; font-size: 13px !important; word-break: normal !important; }
.l1-notion .l1-notion-agent__copybtn, .l1-notion-agent__copybtn { flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--wp-bg); box-shadow: inset 0 0 0 1px var(--wp-line-2); color: var(--wp-ink); cursor: pointer; font-size: 12px; font-weight: 500; }
.l1-notion-agent__copybtn:hover { background: var(--wp-hover-2); }
.l1-notion-agent__hint { margin: 4px 0 8px; color: var(--wp-ink-3); font-size: 12px; line-height: 1.5; }
.l1-notion-agent__more summary { margin: 4px 0 6px; color: var(--wp-ink-3); cursor: pointer; font-size: 12px; }
.l1-notion-agent__form { margin-top: 6px; }
.l1-notion-agent__fields { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.l1-notion-agent__fields label { display: grid; gap: 4px; }
.l1-notion-agent__fields span { color: var(--wp-ink-3); font-size: 12px; }
.l1-notion-agent__fields input, .l1-notion-agent__fields select { height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--wp-bg); box-shadow: inset 0 0 0 1px var(--wp-line-2); color: inherit; font: inherit; font-size: 13px; outline: none; }
.l1-notion-agent__fields input:focus, .l1-notion-agent__fields select:focus { box-shadow: inset 0 0 0 2px rgba(35, 131, 226, 0.6); }
.l1-notion .l1-notion-agent__create, .l1-notion-agent__create { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--wp-accent); color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.l1-notion-agent__create svg { width: 15px; height: 15px; }
.l1-notion-agent__error { margin: 0 0 8px; color: var(--wp-danger); font-size: 13px; }
.l1-notion-agent__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.l1-notion-agent__key { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.l1-notion-agent__key:hover { background: var(--wp-hover); }
.l1-notion-agent__key.is-off { opacity: 0.5; }
.l1-notion-agent__key > svg { flex: none; width: 16px; height: 16px; color: var(--wp-ink-2); }
.l1-notion-agent__keytext { display: grid; flex: 1; min-width: 0; }
.l1-notion-agent__keytext small { color: var(--wp-ink-3); font-size: 12px; }
.l1-notion .l1-notion-agent__revoke, .l1-notion-agent__revoke { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--wp-danger); cursor: pointer; font-size: 12px; font-weight: 500; }
.l1-notion-agent__revoke:hover { background: var(--wp-hover-2); }
.l1-notion-agent__empty { margin: 0; color: var(--wp-ink-3); font-size: 13px; }
@media (max-width: 640px) { .l1-notion-agent__fields { grid-template-columns: 1fr; } }

.l1-app-row > .l1-app-actions { flex: none; }
.l1-app-row + .l1-app-row, .l1-app-domain-card + .l1-app-domain-card, .l1-app-database + .l1-app-database { border-top: 1px solid var(--l1-border); }
.l1-app-row__icon, .l1-app-version { align-items: center; background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); color: var(--l1-ink-muted); display: inline-flex; flex: 0 0 34px; height: 34px; justify-content: center; }
.l1-app-version { font-family: var(--l1-font-data); font-size: var(--l1-text-micro); }
.l1-app-row__body { flex: 1; min-width: 0; }
.l1-app-row__title { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2) var(--l1-space-3); }
.l1-app-row__title strong { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-semibold); line-height: 1.5; overflow-wrap: anywhere; }
.l1-app-row__title a { color: inherit; text-decoration: none; }
.l1-app-row__title a:hover strong { color: var(--l1-brand-strong); }
.l1-app-row__title .ui-status { font-size: var(--l1-text-micro); }
.l1-app-row__meta { align-items: center; color: var(--l1-ink-muted); display: flex; flex-wrap: wrap; font-size: var(--l1-text-micro); gap: 4px var(--l1-space-3); line-height: 1.5; margin: 5px 0 0; overflow-wrap: anywhere; }
.l1-app-row__meta > * + * { border-left: 1px solid var(--l1-border); padding-left: var(--l1-space-3); }
.l1-app-row__error { color: var(--l1-danger); font-size: var(--l1-text-dense); line-height: 1.5; margin: 8px 0 0; overflow-wrap: anywhere; }
.l1-app-row__trailing { color: var(--l1-ink-muted); }
.l1-app-row > form { flex: none; margin: 0; }
.l1-app-note { align-items: start; background: var(--l1-surface-2); border-top: 1px solid var(--l1-border); color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-micro); gap: var(--l1-space-2); padding: var(--l1-space-3) var(--l1-space-5); }
.l1-app-note p { line-height: 1.6; margin: 0; }
.l1-app-note > svg { margin-top: 2px; }
.l1-app-inset { padding: var(--l1-space-5); }
.l1-app-inset-copy { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); line-height: 1.6; margin: 0; padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-form-stack { display: grid; gap: var(--l1-space-4); margin: 0; }
.l1-app-field-grid { align-items: start; display: grid; gap: var(--l1-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-app-field-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l1-app-field-grid--domain { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.l1-app-field { align-content: start; min-width: 0; }
.l1-app-field--wide { grid-column: 1 / -1; }
.l1-app-field .ui-input { align-self: start; min-height: 38px; }
.l1-app-field__label { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); }
.l1-app-field__error { color: var(--l1-danger); font-size: var(--l1-text-dense); grid-column: 1 / -1; }
.l1-app-field__error ul { list-style: none; margin: 0; padding: 0; }
.l1-app-readonly { align-items: center; background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-dense); gap: var(--l1-space-3); justify-content: space-between; min-height: 38px; padding: 8px 12px; overflow-wrap: anywhere; }
.l1-app-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-app-actions > form { margin: 0; }
.l1-app-save-bar { align-items: center; background: var(--l1-surface-1); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); bottom: var(--l1-space-6); box-shadow: var(--l1-shadow-sm); color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-micro); gap: var(--l1-space-3); justify-content: space-between; padding: var(--l1-space-3) var(--l1-space-4); position: sticky; z-index: 2; }
.l1-app-disclosure > summary, .l1-app-subdisclosure > summary { align-items: center; cursor: pointer; display: flex; gap: var(--l1-space-3); justify-content: space-between; list-style: none; }
.l1-app-disclosure > summary::-webkit-details-marker, .l1-app-subdisclosure > summary::-webkit-details-marker, .l1-app-variable > summary::-webkit-details-marker { display: none; }
.l1-app-disclosure > summary { color: var(--l1-ink); font-size: var(--l1-text-dense); padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-disclosure > summary > span { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); }
.l1-app-disclosure > summary strong { font-weight: var(--l1-fw-medium); }
.l1-app-disclosure > summary > svg, .l1-app-subdisclosure > summary > svg { color: var(--l1-ink-muted); transition: transform 120ms ease; }
.l1-app-disclosure[open] > summary > svg, .l1-app-subdisclosure[open] > summary > svg { transform: rotate(180deg); }
.l1-app-disclosure[open] > summary { border-bottom: 1px solid var(--l1-border); }
.l1-app-subdisclosure { padding: 0 var(--l1-space-5) var(--l1-space-4); }
.l1-app-subdisclosure > summary { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); justify-content: start; padding-block: var(--l1-space-2); }
.l1-app-disclosure--danger > summary, .l1-app-subdisclosure--danger > summary { color: var(--l1-danger); }
.l1-app-subdisclosure > .l1-app-form-stack, .l1-app-subdisclosure > .l1-app-caption { margin-top: var(--l1-space-2); }
.l1-app-tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding-block: var(--l1-space-3); }
.l1-app-tag-list code { background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: 4px; color: var(--l1-ink-soft); padding: 3px 7px; }
.l1-app-pagination { align-items: center; border-top: 1px solid var(--l1-border); color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-micro); gap: var(--l1-space-3); justify-content: end; padding: var(--l1-space-3) var(--l1-space-5); }
.l1-app-scale { align-items: end; display: flex; flex-wrap: wrap; gap: var(--l1-space-4) var(--l1-space-8); padding: var(--l1-space-5); }
.l1-app-scale__control { display: grid; gap: var(--l1-space-2); }
.l1-app-stepper { align-items: center; display: inline-flex; gap: var(--l1-space-2); }
.l1-app-stepper .ui-input { -moz-appearance: textfield; appearance: textfield; font-feature-settings: var(--l1-font-feature-tabular); text-align: center; width: 4.5rem; }
.l1-app-stepper .ui-input::-webkit-inner-spin-button,
.l1-app-stepper .ui-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.l1-app-scale__cost { display: grid; gap: 2px; margin-inline-end: auto; }
.l1-app-scale__cost strong { color: var(--l1-ink); font-size: var(--l1-text-lg); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
.l1-app-scale > .l1-app-field__error { flex-basis: 100%; }
.l1-app-variable-legend, .l1-app-variable > summary { align-items: center; display: grid; gap: var(--l1-space-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-variable-legend { background: var(--l1-surface-2); color: var(--l1-ink-muted); font-size: var(--l1-text-micro); padding-block: var(--l1-space-3); }
.l1-app-variable { border-top: 1px solid var(--l1-border); }
.l1-app-variable > summary { cursor: pointer; list-style: none; min-height: 58px; }
.l1-app-variable > summary:hover { background: var(--l1-surface-2); }
.l1-app-workspace .l1-app-variable > summary > code { background: transparent; color: var(--l1-ink); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); justify-self: start; max-width: 100%; overflow-wrap: anywhere; padding: 0; }
.l1-app-variable__value { align-items: center; color: var(--l1-ink-muted); display: flex; flex-wrap: wrap; font-family: var(--l1-font-data); font-size: var(--l1-text-micro); gap: var(--l1-space-2); min-width: 0; overflow-wrap: anywhere; }
.l1-app-variable__masked { letter-spacing: .15em; }
.l1-app-variable__edit { color: var(--l1-ink-muted); display: flex; justify-content: end; }
.l1-app-variable[open] > summary { background: var(--l1-brand-soft); }
.l1-app-variable__editor { border-top: 1px solid var(--l1-border); display: grid; gap: var(--l1-space-3); padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-variable__editor .l1-app-variable__remove { margin-left: auto; }
.l1-app-hostname { align-items: center; color: var(--l1-ink); display: inline-flex; font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); gap: var(--l1-space-2); line-height: 1.5; overflow-wrap: anywhere; text-decoration: none; }
.l1-app-hostname:hover { color: var(--l1-brand-strong); }
.l1-app-dns-record { align-items: start; background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); display: flex; gap: var(--l1-space-3); margin-top: var(--l1-space-3); padding: var(--l1-space-3); }
.l1-app-dns-record__fields { display: grid; flex: 1; gap: var(--l1-space-3); min-width: 0; }
/* One width for the record type, so CNAME and TXT fields line up. */
.l1-app-dns-record > .ui-chip { flex: none; justify-content: center; min-width: 4rem; }
.l1-app-dns-record__fields > div > span { color: var(--l1-ink-muted); display: block; font-size: var(--l1-text-micro); margin-bottom: 3px; }
.l1-app-dns-record__fields > div > div { align-items: center; display: flex; gap: var(--l1-space-2); justify-content: space-between; }
.l1-app-dns-record code { color: var(--l1-ink-soft); font-size: var(--l1-text-micro); min-width: 0; overflow-wrap: anywhere; }
.l1-app-dns-record__full { color: var(--l1-ink-muted); display: block; font-size: var(--l1-text-micro); margin-top: 2px; overflow-wrap: anywhere; }
.l1-app-log-console { min-width: 0; overflow: hidden; }
.l1-app-log-console__toolbar { align-items: end; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); justify-content: space-between; padding: var(--l1-space-4); }
.l1-app-log-console__toolbar > .ui-field { flex: 1 1 12rem; max-width: 24rem; }
.l1-app-log-console__toolbar .l1-check { font-size: var(--l1-text-micro); margin: 0; }
.l1-app-log-console__toolbar :is(.ui-input, .ui-select) { min-height: var(--l1-control-h-md); }
.l1-app-log-console__toolbar .ui-field > label { line-height: 1.4; margin-bottom: var(--l1-space-1); }
.l1-app-log-console__warning { align-items: center; background: var(--l1-warn-soft); border-block: 1px solid var(--l1-warn-border, var(--l1-border)); color: var(--l1-ink); display: flex; font-size: var(--l1-text-dense); gap: var(--l1-space-2); margin: 0; padding: var(--l1-space-2) var(--l1-space-4); }
.l1-app-log-console__warning[hidden] { display: none; }
.l1-app-workspace .l1-app-log-console__warning svg { color: var(--l1-warn); height: 15px; width: 15px; }
.l1-app-log-console__controls { min-height: var(--l1-control-h-md); }
.l1-app-log-console__caption { align-items: center; background: var(--l1-code-bg); color: var(--l1-code-ink); display: flex; font-family: var(--l1-font-data); font-size: var(--l1-text-micro); gap: var(--l1-space-3); justify-content: space-between; padding: var(--l1-space-3) var(--l1-space-4); }
.l1-app-log-console__caption > span:first-child { align-items: center; display: flex; gap: var(--l1-space-2); }
.l1-app-log-console__footer { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); padding: var(--l1-space-3) var(--l1-space-4); }
.l1-app-log-console__footer p { line-height: 1.5; margin: 0 0 var(--l1-space-3); }
.l1-app-log-console__footer .l1-app-actions > span { margin-left: auto; }
@container client-workspace (max-width: 560px) {
  .l1-app-row { flex-wrap: wrap; padding: var(--l1-space-4); }
  .l1-app-row__body { flex-basis: calc(100% - 50px); }
  .l1-app-row > .ui-btn, .l1-app-row > form, .l1-app-row > .l1-app-actions { margin-left: 46px; }
  .l1-app-row__trailing { display: none; }
  .l1-app-field-grid, .l1-app-field-grid--three, .l1-app-field-grid--domain, .l1-app-connect--two { grid-template-columns: minmax(0, 1fr); }
  .l1-app-workspace .ui-panel__head, .l1-app-inset, .l1-app-disclosure > summary, .l1-app-variable > summary, .l1-app-variable__editor, .l1-app-adder__body { padding: var(--l1-space-4); }
  /* No top-right corner to spare: the add button drops under the head. */
  .l1-app-card--adder > .ui-panel__head { padding-inline-end: var(--l1-space-4); }
  .l1-app-adder > summary { margin: 0 var(--l1-space-4) var(--l1-space-4); position: static; }
  .l1-app-scale { align-items: stretch; flex-direction: column; }
  .l1-app-scale > .ui-btn { align-self: flex-start; }
  .l1-app-variable-legend { display: none; }
  .l1-app-variable > summary { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px; }
  .l1-app-variable__value { grid-column: 1; grid-row: 2; }
  .l1-app-variable__edit { grid-column: 2; grid-row: 1 / span 2; }
  .l1-app-variable__editor .l1-app-variable__remove { margin-left: 0; }
  .l1-app-save-bar { flex-wrap: wrap; }
  .l1-app-save-bar .ui-btn { margin-left: 0; }
  .l1-app-log-console__caption > span:last-child { display: none; }
}


/* ---------- Application overview ---------- */
.l1-app-overview__grid { align-items: start; display: grid; gap: var(--l1-space-4); grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 1fr); }
.l1-app-overview__column { display: grid; gap: var(--l1-space-4); min-width: 0; }
.l1-app-overview__updated { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); margin: 0; text-align: end; }
.l1-app-eyebrow { color: var(--l1-ink-muted); display: block; font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); letter-spacing: .06em; text-transform: uppercase; }
.l1-app-caption { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); line-height: 1.6; margin: 0; }
.l1-app-text-link { align-items: center; color: var(--l1-brand-strong); display: inline-flex; font-size: var(--l1-text-micro); gap: 5px; text-decoration: none; }
.l1-app-text-link:hover { text-decoration: underline; }
.l1-app-overview svg { flex-shrink: 0; height: 15px; width: 15px; }
.l1-app-overview .ui-btn svg { height: 14px; width: 14px; }
.l1-app-summary {
  --app-tone: var(--l1-ink-muted);
  background: linear-gradient(125deg, color-mix(in srgb, var(--app-tone) 5%, var(--l1-surface-1)), var(--l1-surface-1) 65%);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  overflow: hidden;
}
.l1-app-summary[data-tone="ok"] { --app-tone: var(--l1-ok); }
.l1-app-summary[data-tone="warn"] { --app-tone: var(--l1-warn); }
.l1-app-summary[data-tone="danger"] { --app-tone: var(--l1-danger); }
.l1-app-summary[data-tone="busy"], .l1-app-summary[data-tone="info"] { --app-tone: var(--l1-info); }
.l1-app-summary__body { align-items: start; display: flex; gap: var(--l1-space-3); padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-summary__signal { align-items: center; background: color-mix(in srgb, var(--app-tone) 10%, transparent); border: 1px solid color-mix(in srgb, var(--app-tone) 20%, transparent); border-radius: 50%; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; }
.l1-app-summary__signal span { background: var(--app-tone); border-radius: 50%; height: 10px; width: 10px; }
.l1-app-summary__copy { min-width: 0; }
.l1-app-summary__copy h3 { color: var(--l1-ink); font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); letter-spacing: -.02em; line-height: 1.3; margin: 4px 0 6px; }
.l1-app-summary__copy p { color: var(--l1-ink-soft); font-size: var(--l1-text-dense); line-height: 1.65; margin: 0; max-width: 68ch; }
.l1-app-summary__actions { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); margin-top: var(--l1-space-3); }
.l1-app-summary__facts { border-top: 1px solid var(--l1-border); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.l1-app-summary__facts > div { padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-summary__facts > div + div { border-left: 1px solid var(--l1-border); }
.l1-app-summary__facts dt { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-normal); margin-bottom: 6px; }
.l1-app-summary__facts dd { color: var(--l1-ink); font-size: var(--l1-text-base); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); margin: 0 0 4px; }
.l1-app-summary__facts dd span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-normal); }
.l1-app-summary__facts small { color: var(--l1-ink-muted); display: block; font-size: var(--l1-text-micro); }
.l1-app-summary__facts code { color: inherit; font-family: var(--l1-font-data); font-size: inherit; }
.l1-app-card-body { display: grid; gap: var(--l1-space-3); padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-deployment__title { color: var(--l1-ink); font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.l1-app-deployment__meta { align-items: center; color: var(--l1-ink-muted); display: flex; flex-wrap: wrap; font-size: var(--l1-text-micro); gap: 6px var(--l1-space-3); }
.l1-app-deployment__meta span { align-items: center; display: inline-flex; gap: 5px; overflow-wrap: anywhere; }
.l1-app-deployment__meta code { background: var(--l1-surface-2); border-radius: 4px; color: var(--l1-ink-soft); font-family: var(--l1-font-data); font-size: inherit; padding: 2px 5px; }
.l1-app-deployment__steps { background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: var(--l1-space-2) 0; padding: 0; }
.l1-app-deployment__steps li { --step-tone: var(--l1-ink-muted); align-items: start; color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-micro); gap: 8px; padding: var(--l1-space-3); }
.l1-app-deployment__steps li + li { border-left: 1px solid var(--l1-border); }
.l1-app-deployment__steps li[data-tone="ok"] { --step-tone: var(--l1-ok); }
.l1-app-deployment__steps li[data-tone="danger"] { --step-tone: var(--l1-danger); }
.l1-app-deployment__steps li[data-tone="warn"] { --step-tone: var(--l1-warn); }
.l1-app-deployment__steps li[data-tone="busy"], .l1-app-deployment__steps li[data-tone="info"] { --step-tone: var(--l1-info); }
.l1-app-deployment__steps strong { color: var(--step-tone); display: block; font-weight: var(--l1-fw-medium); margin-top: 3px; }
.l1-app-deployment__step-dot { background: var(--step-tone); border-radius: 50%; flex: 0 0 6px; height: 6px; margin-top: 6px; }
.l1-app-deployment__error { border-left: 2px solid var(--l1-danger); color: var(--l1-ink-soft); font-size: var(--l1-text-dense); line-height: 1.6; margin: 0; overflow-wrap: anywhere; padding: 2px 0 2px var(--l1-space-3); }
.l1-app-card-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); justify-content: space-between; }
.l1-app-card-actions form { margin: 0; }
.l1-app-empty { color: var(--l1-ink-muted); padding: var(--l1-space-3) 0; }
.l1-app-empty > svg { color: var(--l1-brand-strong); height: 24px; margin-bottom: var(--l1-space-3); width: 24px; }
.l1-app-empty h3 { color: var(--l1-ink); font-size: var(--l1-text-base); font-weight: var(--l1-fw-medium); margin: 0 0 8px; }
.l1-app-empty p { font-size: var(--l1-text-dense); line-height: 1.65; margin: 0; max-width: 52ch; }
.l1-app-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-app-resource-grid > div { padding: var(--l1-space-5); }
.l1-app-resource-grid > div + div { border-left: 1px solid var(--l1-border); }
.l1-app-resource-grid strong { color: var(--l1-ink); display: block; font-size: var(--l1-text-2xl); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-medium); letter-spacing: -.03em; margin: 10px 0 6px; }
.l1-app-resource-grid strong small { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); letter-spacing: 0; }
.l1-app-resource-grid p { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); line-height: 1.5; margin: 0; }
.l1-app-card-footer { align-items: center; border-top: 1px solid var(--l1-border); color: var(--l1-ink-muted); display: flex; flex-wrap: wrap; font-size: var(--l1-text-micro); gap: var(--l1-space-2); justify-content: space-between; padding: var(--l1-space-3) var(--l1-space-5); }
.l1-app-card-footer span, .l1-app-card-footer a { align-items: center; display: inline-flex; gap: 6px; }
.l1-app-card-footer a { color: var(--l1-brand-strong); text-decoration: none; }
.l1-app-card-footer a:hover { text-decoration: underline; }
.l1-app-history__row { align-items: center; border-top: 1px solid var(--l1-border); display: grid; gap: var(--l1-space-3); grid-template-columns: auto minmax(0, 1fr) auto auto; padding: var(--l1-space-3) var(--l1-space-5); text-decoration: none; }
.l1-app-history__row:first-child { border-top: 0; }
.l1-app-history__row:hover { background: var(--l1-surface-2); }
.l1-app-history__copy { display: grid; gap: 4px; min-width: 0; }
.l1-app-history__copy strong { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-app-history__copy small, .l1-app-history__row time, .l1-app-history__row > svg { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-app-history__row time { white-space: nowrap; }
.l1-app-domain { align-items: center; color: var(--l1-brand-strong); display: flex; font-size: var(--l1-text-dense); gap: var(--l1-space-2); text-decoration: none; }
.l1-app-domain span { min-width: 0; overflow-wrap: anywhere; }
.l1-app-domain > svg:last-child { margin-left: auto; }
.l1-app-domain:hover span { text-decoration: underline; }
.l1-app-facts { display: grid; gap: var(--l1-space-3); margin: var(--l1-space-2) 0 0; }
.l1-app-facts > div { align-items: baseline; display: flex; gap: var(--l1-space-3); justify-content: space-between; }
.l1-app-facts dt { color: var(--l1-ink-muted); flex-shrink: 0; font-size: var(--l1-text-micro); font-weight: var(--l1-fw-normal); }
.l1-app-facts dd { color: var(--l1-ink-soft); font-size: var(--l1-text-micro); margin: 0; min-width: 0; overflow-wrap: anywhere; text-align: end; }
.l1-app-facts dd, .l1-app-facts dd a { align-items: center; display: inline-flex; gap: 5px; }
.l1-app-facts dd a { color: var(--l1-brand-strong); text-decoration: none; }
.l1-app-source { align-items: start; display: flex; gap: var(--l1-space-3); }
.l1-app-source > svg { color: var(--l1-ink-muted); margin-top: 2px; }
.l1-app-source > div { display: grid; gap: 5px; min-width: 0; }
.l1-app-source strong { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); overflow-wrap: anywhere; }
.l1-app-source span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-app-connection { align-items: center; color: var(--l1-ink); display: flex; gap: var(--l1-space-2); text-decoration: none; }
.l1-app-connection:hover strong { color: var(--l1-brand-strong); }
.l1-app-connection__icon { align-items: center; background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); color: var(--l1-ink-muted); display: flex; flex: 0 0 30px; height: 30px; justify-content: center; }
.l1-app-connection__copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.l1-app-connection__copy strong { font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); overflow-wrap: anywhere; }
.l1-app-connection__copy small { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
@container client-workspace (max-width: 740px) {
  .l1-app-overview__grid { grid-template-columns: minmax(0, 1fr); }
}
@container client-workspace (max-width: 460px) {
  .l1-app-summary__facts { grid-template-columns: minmax(0, 1fr); }
  .l1-app-summary__facts > div + div { border-left: 0; border-top: 1px solid var(--l1-border); }
  .l1-app-summary__body { gap: var(--l1-space-3); padding: var(--l1-space-4); }
  .l1-app-summary__copy h3 { font-size: var(--l1-text-lg); }
  .l1-app-summary__signal { flex-basis: 28px; height: 28px; }
  .l1-app-summary__facts > div { padding: var(--l1-space-3) var(--l1-space-4); }
  .l1-app-card-body, .l1-app-resource-grid > div { padding: var(--l1-space-4); }
  .l1-app-deployment__steps li { flex-direction: column; gap: 6px; padding: var(--l1-space-2); }
  .l1-app-history__row { gap: var(--l1-space-2); grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: var(--l1-space-4); }
  .l1-app-history__row time { grid-column: 2; grid-row: 2; }
  .l1-app-history__row > svg { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Build log ---------- */
/* Build output is the customer's own, including whatever their dependencies
   print. It is escaped in the template and scrolls rather than wrapping, so a
   long line cannot stretch the page.

   Two corrections to the original rule, both of which meant it was declaring
   colours and a face it never actually got:

   - The font token is --l1-font-data. --l1-font-mono is defined nowhere, so the
     declaration resolved to nothing and build output — whose columns only line
     up in a fixed-width face — rendered in the body font.
   - bootstrap-bridge.css normalises every `<pre>` on the page with
     `background/border-color/color: … !important`, which no amount of
     specificity beats. The three properties below carry !important for that one
     reason: this is a terminal surface, not a Bootstrap code block, and it is
     the single deliberate exception rather than a general licence. Delete them
     in the change that removes the bridge. */
.l1-client-page .l1-paas-log {
  background: var(--l1-code-bg) !important;
  border: 1px solid var(--l1-border) !important;
  border-radius: var(--l1-radius-md);
  color: var(--l1-code-ink) !important;
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-xs);
  line-height: 1.6;
  margin: 0;
  max-height: 32rem;
  overflow: auto;
  padding: var(--l1-space-4);
  white-space: pre;
}

.l1-client-page .l1-app-log-console .l1-paas-log { border-radius: 0; border-width: 0 !important; min-height: 20rem; max-height: 38rem; }

/* ===================================================================
   The application canvas
   ===================================================================
   Applications and databases as boxes on a plane, wired together by their
   attachments, dragged wherever the customer wants them and opened in a
   side drawer without leaving the screen.

   Geometry is shared, not repeated: the node box is 264x128, which is also
   NODE_WIDTH/NODE_HEIGHT in apps/paas/canvas.py and the two numbers the drag
   handler reads off data attributes. Change one and change all three, or the
   wires attach to a point the box no longer has.

   Colour is tone tokens only, so light and dark follow the existing swap and
   a status here cannot disagree with the l1_ui filters. Elevation is spent on
   exactly one thing -- the drawer, which genuinely floats over the plane.
   Nodes are hairline-bordered panels like everything else in Console 3.0. */

/* The page is the plane. Everything above it is one slim identity band, and
   everything else the screen needs floats on the plane itself, so the map
   gets the full stage between the command rail and the window edge. The
   shell's own gutters are dropped for this page in assets/tailwind.css. */
.l1-canvas-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
/* Beats the 1.25rem every other client page puts between its blocks. Here the
   plane meets the title band directly; a gap would draw the pane's own
   background as a stripe across the full width of the screen. */
.l1-client-portal-body .l1-client-page.l1-canvas-page { gap: 0; }
/* Nothing to draw yet: the empty state is a normal panel and wants the gutter
   the plane gave up. */
.l1-canvas-page__empty { margin: var(--l1-space-5) 2rem; }
.l1-canvas-page__head { padding: var(--l1-space-6) 2rem 0; }
/* The page now sits beside the Applications sidebar under the standard page
   header (paas/client_app_list.html), so the plane is a framed surface that
   fills the rest of the window instead of bleeding to its edges, and its own
   floating title and action pills are gone. */
.l1-apps-page--canvas .l1-canvas {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-lg);
  flex: none;
  height: max(26rem, calc(100dvh - var(--l1-topbar-h) - 11rem));
  min-height: 0;
  /* Inside the frame, nothing is docked over the bottom edge. */
  --l1-canvas-floor: var(--l1-space-4);
}
.l1-apps-page__alert { color: var(--l1-danger); font-weight: var(--l1-fw-medium); }
/* A cross-link inside a cell (Used by, Databases) is shown as a link; table
   titles keep the design system's inherited colour. */
.ui-table a.l1-apps-list__link:not(.ui-btn) { color: var(--l1-brand-strong); text-decoration: none; }
.ui-table a.l1-apps-list__link:not(.ui-btn):hover { text-decoration: underline; }
.l1-apps-list__address .l1-copyable { white-space: nowrap; }
.l1-apps-list__address .l1-copyable__value { font-size: var(--l1-text-micro); }
@media (max-width: 767.98px) {
  .l1-canvas-page__empty { margin: var(--l1-space-4) 1rem; }
}

/* ---------- The plane ---------- */
.l1-canvas {
  /* No frame and no height of its own: it takes whatever the pane has left
     below the title band and runs to the other three edges. A bordered box
     floating inside a padded page spent a gutter's worth of working area on
     drawing the same boundary the window already has. */
  border: 0;
  border-radius: 0;
  flex: 1 1 auto;
  min-height: 24rem;
  overflow: hidden;
  position: relative;
}
.l1-canvas__viewport {
  background-color: var(--l1-surface-2);
  /* The dot grid is what makes dragging legible: without a reference, a node
     in motion has nothing to move relative to. */
  background-image: radial-gradient(
    circle at 1px 1px, color-mix(in srgb, var(--l1-border-strong) 70%, transparent) 1px, transparent 0
  );
  background-size: 24px 24px;
  cursor: grab;
  height: 100%;
  overflow: hidden;
  position: relative;
  touch-action: none;
  /* Nothing on the plane is text to select. Dragging a node by its own name
     otherwise starts a selection instead of a drag, and the selection wins:
     the pointer ends up painting a name blue while the box stays put. The
     drawer is a sibling of the viewport rather than a child, so what it shows
     stays selectable and copyable. */
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}
.l1-canvas__viewport:focus-visible {
  outline: 2px solid var(--l1-brand);
  outline-offset: -2px;
}
.l1-canvas[data-canvas-panning="true"] .l1-canvas__viewport { cursor: grabbing; }
.l1-canvas__world {
  position: absolute;
  transform-origin: 0 0;
  inset-block-start: 0;
  inset-inline-start: 0;
}
/* The size is load-bearing and has to be stated here. app.css carries a bare
   `svg, i[data-lucide] { width: 16px; height: 16px }` for icon placeholders,
   which beats the element's own width/height attributes and collapsed the wire
   layer to a 16px square -- present in the DOM, correct `d`, drawing nothing.
   Same trap as `a { color: inherit }` in that file; the class selector wins. */
.l1-canvas__wires {
  height: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.l1-canvas__wire {
  fill: none;
  stroke: var(--l1-border-strong);
  stroke-width: 2;
}
.l1-canvas__wire[data-tone="ok"] { stroke: var(--l1-ok); }
.l1-canvas__wire[data-tone="warn"] { stroke: var(--l1-warn); }
.l1-canvas__wire[data-tone="danger"] { stroke: var(--l1-danger); }
.l1-canvas__wire[data-tone="info"] { stroke: var(--l1-info); }
/* The wire being dragged is unmistakably not yet a connection. */
.l1-canvas__wire--draft {
  stroke: var(--l1-brand);
  stroke-dasharray: 6 6;
}

/* ---------- One node ---------- */
.l1-canvas-node {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--l1-space-2);
  height: 128px;
  inset-block-start: calc(var(--l1-canvas-origin) + var(--l1-node-y, 0px));
  inset-inline-start: calc(var(--l1-canvas-origin) + var(--l1-node-x, 0px));
  cursor: grab;
  padding: var(--l1-space-3);
  position: absolute;
  touch-action: none;
  transition: border-color var(--l1-transition), opacity var(--l1-transition);
  width: 264px;
}
.l1-canvas-node:hover { border-color: var(--l1-border-strong); }
.l1-canvas-node[data-node-selected="true"] {
  border-color: var(--l1-brand);
  box-shadow: 0 0 0 1px var(--l1-brand);
}
/* Dragging drops the transition so the box tracks the pointer exactly, and
   lifts it above its neighbours so it is never dragged underneath one. */
.l1-canvas-node[data-node-dragging="true"],
.l1-canvas-node[data-node-dragging="true"] .l1-canvas-node__open {
  cursor: grabbing;
}
.l1-canvas-node[data-node-dragging="true"] {
  transition: none;
  z-index: 5;
}
/* A filter match is the normal state; a non-match is quiet but still there,
   because a map that removes boxes misrepresents the system. */
.l1-canvas-node[data-node-dimmed="true"] { opacity: 0.38; }
.l1-canvas-node[data-node-drop="true"] {
  border-color: var(--l1-brand);
  box-shadow: 0 0 0 3px var(--l1-brand-soft);
}
/* The tone stripe, same language as the application cards. */
.l1-canvas-node::before {
  background: var(--l1-border-strong);
  border-radius: var(--l1-radius-md) var(--l1-radius-md) 0 0;
  content: "";
  height: 3px;
  inset-block-start: 0;
  inset-inline: 0;
  position: absolute;
}
.l1-canvas-node[data-tone="ok"]::before { background: var(--l1-ok); }
.l1-canvas-node[data-tone="warn"]::before { background: var(--l1-warn); }
.l1-canvas-node[data-tone="danger"]::before { background: var(--l1-danger); }
.l1-canvas-node[data-tone="info"]::before { background: var(--l1-info); }
/* Something is happening to this node right now. */
.l1-canvas-node[data-node-busy="true"]::before {
  animation: l1-canvas-pulse 1.6s ease-in-out infinite;
}
@keyframes l1-canvas-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .l1-canvas-node[data-node-busy="true"]::before { animation: none; }
}

.l1-canvas-node__grip {
  color: var(--l1-ink-muted);
  cursor: grab;
  inset-block-start: var(--l1-space-3);
  inset-inline-end: var(--l1-space-2);
  opacity: 0;
  position: absolute;
  transition: opacity var(--l1-transition);
}
.l1-canvas-node:hover .l1-canvas-node__grip { opacity: 0.7; }
.l1-canvas-node__grip svg,
.l1-canvas-node__grip i[data-lucide] { height: 14px; width: 14px; }

.l1-canvas-node__open {
  align-items: center;
  color: inherit;
  cursor: grab;
  display: flex;
  gap: var(--l1-space-3);
  min-width: 0;
  text-decoration: none;
  -webkit-user-drag: none;
}
.l1-canvas-node__icon {
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  display: inline-flex;
  flex: none;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.l1-canvas-node__icon svg,
.l1-canvas-node__icon i[data-lucide] { height: 16px; width: 16px; }
.l1-canvas-node__identity { display: grid; min-width: 0; }
.l1-canvas-node__name {
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-canvas-node__sub {
  color: var(--l1-ink-muted);
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-canvas-node__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
  margin-block-start: auto;
}
.l1-canvas-node__fact {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l1-canvas-node__fact[data-tone="danger"] { color: var(--l1-danger); }
.l1-canvas-node__fact[data-tone="warn"] { color: var(--l1-warn); }
/* Open the live site. Outside the node's link, and skipped by the drag
   handler, so a click here never opens the drawer. */
.l1-canvas-node__visit {
  align-items: center;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  display: inline-flex;
  height: 22px;
  justify-content: center;
  margin-inline-start: auto;
  width: 22px;
}
.l1-canvas-node__visit:hover { background: var(--l1-surface-2); color: var(--l1-brand-strong); }
.l1-canvas-node__visit svg,
.l1-canvas-node__visit i[data-lucide] { height: 14px; width: 14px; }
.l1-canvas-node__project {
  background: var(--l1-surface-3);
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  padding: 2px var(--l1-space-2);
}

/* The wire handle on a database, and the socket it lands in on an app. Both
   sit on the node's edge at exactly the height canvas.py aims a wire at. */
.l1-canvas-node__port,
.l1-canvas-node__socket {
  background: var(--l1-surface-1);
  border: 2px solid var(--l1-border-strong);
  border-radius: 50%;
  height: 14px;
  inset-block-start: calc(50% - 7px);
  position: absolute;
  width: 14px;
}
.l1-canvas-node__port {
  cursor: crosshair;
  inset-inline-end: -8px;
  padding: 0;
}
.l1-canvas-node__port:hover,
.l1-canvas[data-canvas-wiring="true"] .l1-canvas-node__port {
  background: var(--l1-brand);
  border-color: var(--l1-brand);
}
.l1-canvas-node__socket { inset-inline-start: -8px; }

/* ---------- The chrome that floats on the plane ---------- */
/* Search, the status chips and the two things a customer can create live on
   the map rather than above it. They are one surface, not three floating
   pills, so the plane reads as continuous underneath rather than littered.
   Everything here is z-indexed below the drawer and above the wires. */
.l1-canvas__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2) var(--l1-space-3);
  inset-block-start: var(--l1-space-3);
  inset-inline: var(--l1-space-3);
  justify-content: flex-start;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}
/* The bar spans the plane so its two groups sit at the far edges, but the
   gap between them is still plane: a click there pans, it does not land on
   an invisible strip. Only the groups themselves take the pointer back. */
.l1-canvas__bar > * { pointer-events: auto; }
.l1-canvas__find,
.l1-canvas__actions {
  align-items: center;
  background: color-mix(in srgb, var(--l1-surface-1) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  box-shadow: var(--l1-shadow-sm);
  display: flex;
  gap: var(--l1-space-2);
  padding: 4px;
}
.l1-canvas__find { flex-wrap: wrap; }
/* The page title, as one more pill on the bar rather than a band above the
   plane that would cost the map its top edge. Scoped to the bar so it beats
   the shell's bare-h1 fallback. */
.l1-canvas__bar .l1-canvas__title {
  background: color-mix(in srgb, var(--l1-surface-1) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  box-shadow: var(--l1-shadow-sm);
  color: var(--l1-ink);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-semibold);
  line-height: 30px;
  margin: 0;
  padding: 4px var(--l1-space-4);
}
.l1-canvas__filters .l1-app-filter .ui-status { font-size: inherit; font-weight: inherit; }
.l1-canvas__search { min-width: 0; }
.l1-canvas__search .ui-input {
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-pill);
  font-size: var(--l1-text-dense);
  height: 30px;
  padding-inline: var(--l1-space-3);
  width: 11rem;
}
.l1-canvas__search .ui-input:focus-visible { background: var(--l1-surface-2); }
.l1-canvas__go {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.l1-canvas__go:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-canvas__go svg,
.l1-canvas__go i[data-lucide] { height: 15px; width: 15px; }
.l1-canvas__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-1);
}
/* The chips are the shared .l1-app-filter, tightened to the bar's height. */
.l1-canvas__filters .l1-app-filter {
  border-color: transparent;
  font-size: var(--l1-text-micro);
  padding: 6px var(--l1-space-2);
}
.l1-canvas__filters .l1-app-filter:hover { border-color: var(--l1-border); }
.l1-canvas__filters .l1-app-filter[aria-current="page"] { border-color: var(--l1-brand-border); }
/* When the bar has to wrap -- a narrow pane, many status chips -- the actions
   drop below the search group and must stay at the right edge. space-between
   alone puts a lone item on a new line back at the left, which reads as a
   second, unrelated control. */
.l1-canvas__actions { margin-inline-start: auto; }
.l1-canvas__actions .ui-btn { border-radius: var(--l1-radius-pill); }

/* ---------- Zoom controls and hint ---------- */
/* The plane now runs to the bottom of the pane, where the assistant's docked
   chat bar is pinned; the hint used to sit clear of it only because the page
   had a 3rem gutter there. Both pieces of bottom chrome share one baseline
   above that bar, so the map keeps the edge and neither reads as half-hidden
   behind something. */
.l1-canvas {
  --l1-canvas-floor: calc(var(--l1-space-4) + 2.25rem);
}
.l1-canvas__controls {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-pill);
  bottom: var(--l1-canvas-floor);
  display: flex;
  gap: 2px;
  inset-inline-start: var(--l1-space-4);
  padding: 3px;
  position: absolute;
  z-index: 3;
}
.l1-canvas__control {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-pill);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.l1-canvas__control:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-canvas__control svg,
.l1-canvas__control i[data-lucide] { height: 14px; width: 14px; }
.l1-canvas__control--wide {
  font-family: var(--l1-font-data);
  font-size: var(--l1-text-micro);
  font-variant-numeric: tabular-nums;
  width: auto;
  padding-inline: var(--l1-space-2);
}
.l1-canvas__hint {
  bottom: var(--l1-canvas-floor);
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-micro);
  inset-inline-end: var(--l1-space-4);
  margin: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* Application workspace: one header on every tab (identity, status, live
   address, Deploy), then the tab's panels. Status words and tones come from
   overview.STATUS_LABELS through paas/_app_status.html. */
.l1-app-back { width: fit-content; }
/* The full-page header is the server header's twin (paas/_app_header.html
   reuses .l1-service-head and its facts line); these are its few extras. */
.l1-service-head__title-row .l1-app-head__mark { border-radius: var(--l1-radius-sm); height: 32px; width: 32px; }
.l1-service-head__title-row .l1-app-head__mark svg { height: 16px; width: 16px; }
.l1-app-head__visit { align-items: center; border-radius: var(--l1-radius-sm); color: var(--l1-ink-muted); display: inline-flex; height: 22px; justify-content: center; margin-inline-start: 2px; width: 22px; }
.l1-app-head__visit:hover { background: var(--l1-surface-2); color: var(--l1-brand-strong); }
.l1-app-workspace .l1-app-head__visit svg { height: 13px; width: 13px; }
.l1-app-head .l1-service-head__facts .l1-app-meta > span { max-width: 28rem; }
/* The address gets a line of its own; source, release and cost follow it.
   The shared facts clip hides the dot of whichever fact starts a line. */
.l1-app-head__facts > li:first-child { flex-basis: 100%; }
/* The application's own section menu: its name, truncated, beside a status dot. */
.l1-app-sidebar__head { min-width: 0; }
.l1-app-sidebar__head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-app-identity { align-items: center; display: flex; gap: var(--l1-space-4); min-width: 0; }
.l1-app-identity__copy { display: grid; gap: var(--l1-space-1); min-width: 0; }
.l1-app-identity__icon { background: var(--l1-surface-2); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); color: var(--l1-ink-soft); display: grid; flex: none; height: 44px; place-items: center; width: 44px; }
.l1-app-identity__icon svg { height: 22px; width: 22px; }
.l1-panel-head__title .ui-status { font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); letter-spacing: 0; }
.l1-app-meta { align-items: center; display: inline-flex; gap: 5px; min-width: 0; }
.l1-app-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-app-meta svg, .l1-panel-head__meta .l1-app-copy svg { color: var(--l1-ink-muted); height: 13px; width: 13px; }
.l1-app-copy { align-items: center; background: transparent; border: 0; border-radius: var(--l1-radius-sm); cursor: pointer; display: inline-flex; height: 22px; justify-content: center; margin-inline-start: -4px; padding: 0; width: 22px; }
.l1-app-copy:hover { background: var(--l1-surface-2); }
.l1-app-more { padding-inline: .6rem; }
.l1-panel-head__actions .dropdown-header { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); letter-spacing: .04em; padding: var(--l1-space-2) var(--l1-space-3) var(--l1-space-1); text-transform: uppercase; }
.l1-panel-head__actions .dropdown-item { background: transparent; border: 0; font: inherit; text-align: start; width: 100%; }
.l1-panel-head__actions .dropdown-item:disabled { color: var(--l1-ink-muted); cursor: not-allowed; }

/* The note under the header: what is wrong or happening, and the actions
   that fix it. A ui-notice with an icon and a row of buttons. */
.l1-app-health { align-items: flex-start; flex-wrap: nowrap; justify-content: flex-start; }
.l1-app-health[data-tone="info"] { border-left-color: var(--l1-info); }
.l1-app-health__icon { color: var(--l1-ink-muted); flex: none; margin-top: 2px; }
.l1-app-health[data-tone="danger"] .l1-app-health__icon { color: var(--l1-danger); }
.l1-app-health[data-tone="warn"] .l1-app-health__icon { color: var(--l1-warn); }
.l1-app-health[data-tone="info"] .l1-app-health__icon { color: var(--l1-info); }
.l1-app-health > .ui-notice__copy { flex: 1; min-width: 0; }
.l1-app-health > .l1-app-actions, .l1-app-health > .ui-btn { flex: none; }
/* A down app's note also says what else its fix will ship. */
.l1-app-health__pending { align-items: center; display: flex; gap: var(--l1-space-2); margin-top: var(--l1-space-2); }
.l1-app-workspace .l1-app-health__pending svg { color: var(--l1-ink-muted); height: 14px; width: 14px; }
.l1-app-workspace .l1-app-health__actions .dropdown > .ui-btn svg { height: 14px; width: 14px; }

/* Never deployed: one empty state with the three things worth checking. */
.l1-app-first__copy { display: grid; gap: var(--l1-space-2); justify-items: center; padding: var(--l1-space-7) var(--l1-space-5) var(--l1-space-5); text-align: center; }
.l1-app-first__copy > svg { color: var(--l1-brand-strong); height: 28px; width: 28px; }
.l1-app-first__copy h2 { color: var(--l1-ink); font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); margin: 0; }
.l1-app-first__copy p { color: var(--l1-ink-muted); font-size: var(--l1-text-dense); line-height: 1.6; margin: 0; max-width: 56ch; }
.l1-app-checklist { border-block: 1px solid var(--l1-border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.l1-app-checklist li { align-items: center; display: flex; gap: var(--l1-space-3); min-width: 0; padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-checklist li + li { border-left: 1px solid var(--l1-border); }
.l1-app-checklist li > svg { color: var(--l1-ink-muted); }
.l1-app-checklist li > span { color: var(--l1-ink-muted); display: grid; flex: 1; font-size: var(--l1-text-micro); gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.l1-app-checklist strong { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-semibold); }
.l1-app-first__foot { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-3); justify-content: space-between; padding: var(--l1-space-4) var(--l1-space-5); }
/* A cost line that leads with what an app typically costs and gives the
   ceiling second, like a server's price and its hourly rate. */
.l1-app-cost { display: grid; gap: 2px; max-width: 64ch; min-width: 0; }
.l1-app-cost__lead { color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-app-cost__lead strong { font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
/* The create form: every field stacked, label above, at a readable width. */
.l1-app-create-fields { display: grid; gap: var(--l1-space-4); }
.l1-app-create-fields > .ui-field,
.l1-app-create-fields > .l1-github-connect,
.l1-app-create-fields > .ui-notice { max-width: 36rem; }
.l1-app-create-fields > .ui-field { margin: 0; }

/* Deploy attempts as compact rows: status, what it was, version and time,
   View logs. Details open in place. */
.l1-deploy-list { display: grid; }
.l1-deploy-row + .l1-deploy-row { border-top: 1px solid var(--l1-border); }
.l1-deploy-row__summary { align-items: center; cursor: pointer; display: grid; gap: var(--l1-space-2) var(--l1-space-4); grid-template-columns: 11rem minmax(0, 1fr) auto 16px; list-style: none; padding: var(--l1-space-3) var(--l1-space-5); }
.l1-deploy-row__summary::-webkit-details-marker { display: none; }
.l1-deploy-row__summary:hover, .l1-deploy-row[open] > .l1-deploy-row__summary { background: var(--l1-surface-2); }
.l1-deploy-row__status { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-2); }
.l1-deploy-row__copy { display: grid; gap: 3px; min-width: 0; }
.l1-deploy-row__copy strong { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-deploy-row__meta { align-items: center; color: var(--l1-ink-muted); display: flex; flex-wrap: wrap; font-size: var(--l1-text-micro); gap: 2px var(--l1-space-3); }
.l1-deploy-row__meta code { background: var(--l1-surface-2); border-radius: 4px; color: var(--l1-ink-soft); padding: 1px 5px; }
.l1-deploy-row__chevron { color: var(--l1-ink-muted); transition: transform 120ms ease; }
.l1-deploy-row[open] .l1-deploy-row__chevron { transform: rotate(180deg); }
.l1-deploy-row__details { display: grid; gap: var(--l1-space-3); padding: var(--l1-space-3) var(--l1-space-5) var(--l1-space-4); }
.l1-deploy-row > .l1-deploy-row__details { background: var(--l1-surface-2); border-top: 1px solid var(--l1-border); }
.l1-deploy-row__failure { border-left: 2px solid var(--l1-danger); color: var(--l1-ink-soft); font-size: var(--l1-text-dense); line-height: 1.6; margin: 0; overflow-wrap: anywhere; padding: 2px 0 2px var(--l1-space-3); }
.l1-deploy-row__facts { display: flex; flex-wrap: wrap; gap: var(--l1-space-3) var(--l1-space-6); margin: 0; }
.l1-deploy-row__facts dt { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-normal); margin-bottom: 2px; }
.l1-deploy-row__facts dd { color: var(--l1-ink); font-size: var(--l1-text-dense); margin: 0; overflow-wrap: anywhere; }

.l1-app-metrics-grid { display: grid; gap: var(--l1-space-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.l1-app-metric__value { color: var(--l1-ink); font-size: var(--l1-text-lg); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); white-space: nowrap; }
.l1-app-metric__value small { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-normal); }
.l1-app-workspace svg.l1-app-metric__chart { display: block; height: auto; overflow: visible; width: 100%; }
.l1-app-metric__chart polyline { fill: none; stroke: var(--l1-brand); stroke-linecap: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
.l1-app-metric__grid { fill: none; stroke: var(--l1-border); stroke-width: 1; }
.l1-app-metric__axis { color: var(--l1-ink-muted); display: flex; font-size: var(--l1-text-micro); justify-content: space-between; margin-top: var(--l1-space-2); }
.l1-app-capacity a { color: var(--l1-brand-strong); }
.l1-app-workspace .ui-metrics.l1-app-capacity { border-radius: 0; border-width: 1px 0 0; }

/* Totals under a resource form: replicas and the most it can cost. */
.l1-app-resource-foot { background: var(--l1-surface-2); border-top: 1px solid var(--l1-border); display: flex; flex-wrap: wrap; gap: var(--l1-space-4) var(--l1-space-8); padding: var(--l1-space-4) var(--l1-space-5); }
.l1-app-resource-foot__item { display: grid; gap: 2px; min-width: 0; }
.l1-app-resource-foot__item strong { color: var(--l1-ink); font-size: var(--l1-text-lg); font-variant-numeric: tabular-nums; font-weight: var(--l1-fw-semibold); }
/* The ceiling is the secondary figure beside what it costs (or typically costs). */
.l1-app-resource-foot__item--ceiling strong { color: var(--l1-ink-soft); font-size: var(--l1-text-sm); }
/* Deploy token and deletion share one panel instead of floating as two cards. */
.l1-app-extras { overflow: hidden; }
.l1-app-extras > .l1-app-disclosure + .l1-app-disclosure { border-top: 1px solid var(--l1-border); }
.l1-terminal-mount { height: 68vh; background: #000; padding: 8px; }
.l1-app-console-frame { width: 100%; height: 520px; min-height: 320px; display: block; border: 0; background: #090d14; }
@container client-workspace (max-width: 620px) {
  .l1-deploy-row__summary { grid-template-columns: minmax(0, 1fr) auto 16px; padding-inline: var(--l1-space-4); }
  .l1-deploy-row__status { grid-column: 1; grid-row: 1; }
  .l1-deploy-row__copy { grid-column: 1 / -1; grid-row: 2; }
  .l1-deploy-row__copy strong { white-space: normal; overflow-wrap: anywhere; }
  .l1-deploy-row__logs { grid-column: 2; grid-row: 1; }
  .l1-deploy-row__chevron { grid-column: 3; grid-row: 1; }
  .l1-deploy-row__details { padding-inline: var(--l1-space-4); }
  .l1-app-checklist { grid-template-columns: minmax(0, 1fr); }
  .l1-app-checklist li + li { border-left: 0; border-top: 1px solid var(--l1-border); }
  .l1-app-health { flex-wrap: wrap; }
  /* Padding, not margin: a full-width row plus a margin ran the last button
     into the note's right border. */
  .l1-app-health > .l1-app-actions { flex-basis: 100%; padding-inline-start: 28px; }
  .l1-app-health > .ui-btn { margin-inline-start: 28px; }
  .l1-app-metrics-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The drawer ---------- */
/* The one elevated surface on this screen: it genuinely floats over the plane,
   and without a shadow the wires read as though they run through it. */
.l1-canvas-drawer {
  background: var(--l1-surface-1);
  border-inline-start: 1px solid var(--l1-border-strong);
  bottom: 0;
  box-shadow: var(--l1-shadow-lg);
  display: flex;
  flex-direction: column;
  inset-block-start: 0;
  inset-inline-end: 0;
  position: absolute;
  width: min(67.5rem, 96%);
  z-index: 10;
}
.l1-canvas-drawer[data-wide="true"] { width: 100%; }
.l1-canvas-drawer[hidden] { display: none; }
.l1-canvas-drawer__bar {
  align-items: center;
  border-block-end: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-1);
  flex: none;
  padding: var(--l1-space-2) var(--l1-space-3);
}
.l1-canvas-drawer__spacer { flex: 1 1 auto; }
.l1-canvas-drawer__grab,
.l1-canvas-drawer__close,
.l1-canvas-drawer__link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  text-decoration: none;
  width: 28px;
}
.l1-canvas-drawer__grab:hover,
.l1-canvas-drawer__close:hover,
.l1-canvas-drawer__link:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-canvas-drawer__grab svg, .l1-canvas-drawer__grab i[data-lucide],
.l1-canvas-drawer__close svg, .l1-canvas-drawer__close i[data-lucide],
.l1-canvas-drawer__link svg, .l1-canvas-drawer__link i[data-lucide] { height: 15px; width: 15px; }
.l1-canvas-drawer__body {
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 13rem;
  padding: var(--l1-space-6) var(--l1-space-8);
}
/* The drawer holds real pages, which arrive with the page-level spacing they
   use at full width. Tightened here rather than in the pages themselves, so
   the full-screen route keeps its own proportions. */
.l1-canvas-drawer__body .ui-page { gap: var(--l1-space-6); padding: 0; }
.l1-canvas-drawer__body .ui-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l1-canvas-drawer__body .ui-panel__split { display: grid; gap: var(--l1-space-3); }
.l1-canvas-drawer__loading {
  align-items: center;
  background: color-mix(in srgb, var(--l1-surface-1) 72%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
}
.l1-canvas-drawer__loading[hidden] { display: none; }
.l1-canvas-drawer__spinner {
  animation: l1-canvas-spin 700ms linear infinite;
  border: 2px solid var(--l1-border);
  border-block-start-color: var(--l1-brand);
  border-radius: 50%;
  height: 22px;
  width: 22px;
}
@keyframes l1-canvas-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .l1-canvas-drawer__spinner { animation-duration: 2.4s; }
}

/* ---------- Panel-mode page chrome ---------- */
.l1-app-chrome { background: var(--l1-surface-1); min-width: 0; }
.l1-canvas-drawer__body .l1-app-chrome { position: sticky; top: -32px; z-index: 4; padding-top: var(--l1-space-6); margin-top: -32px; }
.l1-canvas-drawer__body .l1-app-workspace { gap: var(--l1-space-6); }
@container client-workspace (max-width: 560px) {
  .l1-app-chrome .l1-panel-head { grid-template-columns: minmax(0, 1fr); }
  .l1-app-chrome .l1-panel-head__actions { justify-content: space-between; }
  .l1-app-chrome .l1-panel-head__actions .l1-inline-form { flex: 1; }
  .l1-app-chrome .l1-panel-head__actions .ui-input { flex: 1; width: auto; }
  .l1-app-chrome .l1-panel-tabs { gap: var(--l1-space-3); }
  .l1-app-chrome .l1-panel-tabs a { padding-inline: 4px; text-align: center; }
  .l1-app-identity__icon { display: none; }
}

/* The compact twin of .l1-paas-head, used when an application page renders
   inside the drawer. Same content, smaller type, no back link -- the canvas
   is right there behind it. */
.l1-panel-head {
  align-items: start;
  display: grid;
  gap: var(--l1-space-3);
  grid-template-columns: minmax(0, 1fr) auto;
}
.l1-panel-head__identity { display: grid; gap: var(--l1-space-2); min-width: 0; }
.l1-panel-head__title {
  align-items: center;
  color: var(--l1-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xl);
  font-weight: var(--l1-fw-semibold);
  gap: var(--l1-space-2);
  margin: 0;
}
.l1-panel-head__meta {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-sm);
  gap: var(--l1-space-2);
  margin: 0;
  min-width: 0;
}
.l1-panel-head__url {
  align-items: center;
  color: var(--l1-ink-muted);
  display: inline-flex;
  gap: var(--l1-space-1);
  min-width: 0;
  text-decoration: none;
}
.l1-panel-head__url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.l1-panel-head__url:hover { color: var(--l1-brand-strong); }
.l1-panel-head__url svg,
.l1-panel-head__url i[data-lucide] { flex: none; height: 12px; width: 12px; }
.l1-panel-head__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}
.l1-panel-head__actions form { margin: 0; }
/* Keep the deploy controls compact beside the application identity. */
.l1-panel-head__actions .l1-inline-form { flex-wrap: nowrap; min-width: 0; }
.l1-panel-head__actions .ui-input { width: 9rem; min-width: 0; }

/* A label, one control and its button on a single line. Used by the deploy
   control, the typed-confirmation delete rows and the database forms -- all of
   which read as one action, not as a form to fill in. Defined here because it
   was markup in four templates and a rule in none: the pages that use it were
   relying on the browser's own inline layout. */
.l1-inline-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l1-space-2);
}
.l1-inline-form > * { margin: 0; }
.l1-inline-form input[type="text"] { min-width: 0; }

.l1-panel-tabs {
  border-block-end: 1px solid var(--l1-border);
  display: flex;
  gap: var(--l1-space-6);
  margin-block: var(--l1-space-4) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.l1-panel-tabs::-webkit-scrollbar { display: none; }
.l1-panel-tabs a {
  border-block-end: 2px solid transparent;
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  padding: var(--l1-space-4) 0;
  text-decoration: none;
  white-space: nowrap;
}
.l1-panel-tabs a:hover { color: var(--l1-ink); }
.l1-panel-tabs a[aria-current="page"] {
  border-block-end-color: var(--l1-brand);
  color: var(--l1-ink);
}

/* ---------- The phone list ---------- */
/* The same nodes as rows, for screens too small for a readable map. Hidden
   until the narrow-screen rules below swap it in for the plane. */
.l1-canvas-list { display: none; }
.l1-canvas-card {
  align-items: center;
  color: inherit;
  display: flex;
  gap: var(--l1-space-3);
  padding: var(--l1-space-3) var(--l1-space-4);
  text-decoration: none;
}
.l1-canvas-card + .l1-canvas-card { border-top: 1px solid var(--l1-border); }
.l1-canvas-card:hover { background: var(--l1-surface-2); }
.l1-canvas-card__copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.l1-canvas-card__top { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l1-space-1) var(--l1-space-3); justify-content: space-between; }
.l1-canvas-card__top strong { color: var(--l1-ink); font-size: var(--l1-text-dense); font-weight: var(--l1-fw-semibold); }
.l1-canvas-card__sub { color: var(--l1-ink-muted); font-family: var(--l1-font-data); font-size: var(--l1-text-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-canvas-card__fact { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-canvas-card__fact:empty { display: none; }
.l1-canvas-card__fact[data-tone="danger"] { color: var(--l1-danger); }
.l1-canvas-card__fact[data-tone="warn"] { color: var(--l1-warn); }
.l1-canvas-card__go { color: var(--l1-ink-muted); flex: none; height: 16px; width: 16px; }

/* ---------- Narrow screens ---------- */
/* Below 768px the pan-and-zoom plane opened at 60% with the right-hand nodes
   off screen, so a phone gets the list instead: the bar becomes an ordinary
   page head, the chips wrap rather than scroll out of sight, and each node is
   a row that opens its full page. The drawer still takes the whole screen for
   the one path into it that remains, a database wired from a wide window. */
@media (max-width: 767.98px) {
  .l1-canvas { flex: none; min-height: 0; overflow: visible; }
  .l1-canvas__viewport,
  .l1-canvas__controls,
  .l1-canvas__hint { display: none; }
  .l1-canvas__bar {
    display: grid;
    gap: var(--l1-space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    inset: auto;
    padding: var(--l1-space-4) 1rem 0;
    position: static;
  }
  .l1-canvas__bar .l1-canvas__title {
    align-self: center;
    background: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    font-size: var(--l1-text-xl);
    grid-column: 1;
    grid-row: 1;
    line-height: 1.2;
    padding: 0;
  }
  .l1-canvas__actions { background: none; backdrop-filter: none; border: 0; box-shadow: none; grid-column: 2; grid-row: 1; padding: 0; }
  .l1-canvas__find { border-radius: var(--l1-radius-md); grid-column: 1 / -1; grid-row: 2; }
  /* The field and its button share the first line and the chips take the
     second: flex-basis 0 rather than 100% so the button does not get pushed
     down onto the chip strip. */
  .l1-canvas__search { flex: 1 1 0; }
  .l1-canvas__search .ui-input { width: 100%; }
  .l1-canvas__filters { padding: 0 2px 2px; width: 100%; }
  .l1-canvas-list { display: grid; gap: var(--l1-space-4); padding: var(--l1-space-4) 1rem var(--l1-space-6); }
  .l1-canvas-list__group .ui-panel__head { padding: var(--l1-space-3) var(--l1-space-4); }
  /* A 45rem drawer over a 23rem screen is a drawer with a useless sliver of
     plane beside it. */
  .l1-canvas-drawer,
  .l1-canvas-drawer[data-wide="true"] { width: 100%; }
  .l1-canvas-drawer__body { padding: var(--l1-space-4); }
  .l1-canvas-drawer__body .l1-app-chrome { top: -16px; margin-top: -16px; padding-top: var(--l1-space-4); }
  .l1-app-chrome .l1-panel-tabs { gap: var(--l1-space-3); margin-top: var(--l1-space-4); }
  .l1-app-chrome .l1-panel-tabs a { padding-inline: 0; font-size: var(--l1-text-dense); }
  .l1-canvas-page__head { padding: var(--l1-space-4) 1rem 0; }
  /* The page keeps its own phone gutter now, so the list drops the one it
     used to add, and the bar is just the search and chips. */
  .l1-apps-page--canvas .l1-canvas { border: 0; border-radius: 0; height: auto; }
  .l1-apps-page--canvas .l1-canvas__bar { display: block; padding: 0; }
  .l1-apps-page--canvas .l1-canvas-list { padding: var(--l1-space-4) 0 0; }
}

/* ---------------------------------------------------------------------------
   Connect: the inventory spreadsheet and the switch topology, on their own
   hostname. Everything is scoped under .l1-connect-body.
   ------------------------------------------------------------------------ */
.l1-connect-body { margin: 0; background: var(--l1-bg); color: var(--l1-ink); font-family: var(--l1-font-body); }
.l1-connect { position: relative; display: flex; flex-direction: column; height: 100vh; min-height: 0; }
.l1-connect--page { height: auto; min-height: 100vh; }
.l1-connect code, .l1-topo code { font-family: var(--l1-font-data); font-size: 0.92em; background: none; color: inherit; padding: 0; }

.l1-connect__bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--l1-space-5); min-height: 48px; padding: 0 var(--l1-space-4); background: var(--l1-rail-bg); color: var(--l1-rail-ink); border-bottom: 1px solid var(--l1-rail-line); }
.l1-connect__brand { display: inline-flex; align-items: center; gap: var(--l1-space-2); color: inherit; font-weight: var(--l1-fw-semibold); text-decoration: none; white-space: nowrap; }
.l1-connect__brand:hover { color: inherit; }
.l1-connect__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--l1-radius-sm); background: var(--l1-rail-accent, var(--l1-brand)); color: #fff; }
.l1-connect__tabs { display: flex; align-items: stretch; align-self: stretch; gap: var(--l1-space-1); overflow-x: auto; scrollbar-width: none; }
.l1-connect__tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--l1-space-3); color: var(--l1-rail-ink-muted); text-decoration: none; font-size: var(--l1-text-sm); border-bottom: 2px solid transparent; white-space: nowrap; }
.l1-connect__tabs a:hover { color: var(--l1-rail-ink); }
.l1-connect__tabs a[aria-current="page"] { color: var(--l1-rail-ink); border-bottom-color: var(--l1-rail-accent, var(--l1-brand)); font-weight: var(--l1-fw-semibold); }
.l1-connect__count { min-width: 1.5em; padding: 0 6px; border-radius: var(--l1-radius-pill); background: var(--l1-rail-hover); color: var(--l1-rail-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); text-align: center; font-variant-numeric: tabular-nums; }

.l1-connect__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l1-space-3); padding: var(--l1-space-3) var(--l1-space-4); background: var(--l1-surface); border-bottom: 1px solid var(--l1-border); }
.l1-connect__heading { display: flex; align-items: baseline; gap: var(--l1-space-2); margin-right: auto; }
.l1-connect__heading h1 { margin: 0; font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); }
.l1-connect__meta { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); font-variant-numeric: tabular-nums; }
.l1-connect__filter { display: inline-flex; align-items: center; gap: 6px; height: var(--l1-control-h-sm, 32px); padding: 0 10px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-bg); color: var(--l1-ink-muted); margin: 0; }
.l1-connect__filter:focus-within { border-color: var(--l1-brand); box-shadow: 0 0 0 3px var(--l1-focus-ring); }
.l1-connect__filter input { width: 14rem; border: 0; outline: none; background: transparent; color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-connect__actions { display: flex; align-items: center; gap: var(--l1-space-2); }
.l1-connect__tool { display: inline-flex; align-items: center; gap: 6px; height: var(--l1-control-h-sm, 32px); padding: 0 10px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-surface); color: var(--l1-ink); font-size: var(--l1-text-sm); text-decoration: none; cursor: pointer; }
.l1-connect__tool:hover { background: var(--l1-surface-2); color: var(--l1-ink); }
.l1-connect__tool[aria-pressed="true"] { border-color: var(--l1-brand-border, var(--l1-brand)); background: var(--l1-brand-soft); color: var(--l1-brand-strong, var(--l1-brand)); }
.l1-connect__status { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 var(--l1-space-2); color: var(--l1-ink-muted); font-size: var(--l1-text-sm); white-space: nowrap; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
.l1-connect__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--l1-ok); }
.l1-connect__status[data-state="saving"]::before { background: var(--l1-warn); }
.l1-connect__status[data-state="error"] { color: var(--l1-danger); }
.l1-connect__status[data-state="error"]::before { background: var(--l1-danger); }

.l1-connect__scroll { flex: 1; min-height: 0; overflow: auto; background: var(--l1-surface); }
.l1-connect-sheet { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--l1-text-dense); }
.l1-connect-sheet th,
.l1-connect-sheet td { border-right: 1px solid var(--l1-border); border-bottom: 1px solid var(--l1-border); background: var(--l1-surface); }
.l1-connect-sheet thead th { position: sticky; top: 0; z-index: 3; background: var(--l1-surface-2); font-weight: var(--l1-fw-semibold); text-align: left; padding: 5px 8px 6px; min-width: 8.5rem; white-space: nowrap; border-bottom-color: var(--l1-border-strong); }
.l1-connect-sheet thead th.is-active { background: color-mix(in srgb, var(--l1-brand) 10%, var(--l1-surface-2)); box-shadow: inset 0 -2px 0 var(--l1-brand); }
.l1-connect-sheet__letter { display: block; color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); letter-spacing: 0.04em; }
.l1-connect-sheet__label { display: inline-flex; align-items: center; gap: 5px; }
.l1-connect-sheet__hint { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--l1-border-strong); color: var(--l1-ink-muted); font-size: 9px; font-weight: var(--l1-fw-bold); cursor: help; }
.l1-connect-sheet__gutter { position: sticky; left: 0; z-index: 2; width: 3.25rem; min-width: 3.25rem; background: var(--l1-surface-2); text-align: right; color: var(--l1-ink-muted); font-weight: var(--l1-fw-medium); font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.l1-connect-sheet thead .l1-connect-sheet__gutter { z-index: 4; }
.l1-connect-sheet td { position: relative; min-width: 8.5rem; max-width: 22rem; height: 1.9rem; padding: 3px 8px; vertical-align: top; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.l1-connect-sheet tbody tr:hover td { background: color-mix(in srgb, var(--l1-ink) 3%, var(--l1-surface)); }
.l1-connect-sheet td[data-kind="key"] { font-weight: var(--l1-fw-semibold); }
.l1-connect-sheet td[data-kind="mono"],
.l1-connect-sheet td[data-kind="multi"] { font-family: var(--l1-font-data); font-size: 0.95em; }
.l1-connect-sheet td[data-kind="wide"] { min-width: 18rem; max-width: 32rem; }
.l1-connect-sheet td[data-kind="multi"] { min-width: 11rem; }
/* A multi-value cell shows its first line and a count until opened. Table
   cells ignore max-height, so the clip is on an inner block. */
.l1-connect-sheet td.is-multi { padding-right: 2.75rem; }
.l1-connect-val { display: block; max-height: 1.45em; overflow: hidden; white-space: pre; text-overflow: ellipsis; }
.l1-connect.is-expanded .l1-connect-sheet td.is-multi { padding-right: 8px; }
.l1-connect.is-expanded .l1-connect-val { max-height: none; white-space: pre-wrap; }
.l1-connect.is-expanded .l1-connect-more { display: none; }
.l1-connect-more { position: absolute; top: 4px; right: 5px; height: 20px; min-width: 26px; padding: 0 6px; border: 1px solid var(--l1-brand-border, var(--l1-border)); border-radius: var(--l1-radius-pill); background: var(--l1-brand-soft); color: var(--l1-brand-strong, var(--l1-brand)); font: var(--l1-fw-semibold) 11px/1 var(--l1-font-body); cursor: pointer; }
.l1-connect-more:hover { background: var(--l1-brand); color: var(--l1-on-brand, #fff); }
.l1-connect-sheet td[data-tone] { padding-left: 22px; }
.l1-connect-sheet td[data-tone]::before { content: ""; position: absolute; left: 9px; top: 0.72rem; width: 7px; height: 7px; border-radius: 50%; background: var(--l1-ink-muted); }
.l1-connect-sheet td[data-tone="ok"]::before { background: var(--l1-ok); }
.l1-connect-sheet td[data-tone="warn"]::before { background: var(--l1-warn); }
.l1-connect-sheet td[data-tone="danger"]::before { background: var(--l1-danger); }
.l1-connect-sheet td[data-tone="info"]::before { background: var(--l1-info); }
.l1-connect-sheet td.is-selected { background: color-mix(in srgb, var(--l1-brand) 11%, var(--l1-surface)) !important; }
.l1-connect-sheet td.is-focus { box-shadow: inset 0 0 0 2px var(--l1-brand); }
.l1-connect-sheet td.is-editing { background: var(--l1-surface) !important; box-shadow: inset 0 0 0 2px var(--l1-brand), var(--l1-shadow-md); z-index: 1; white-space: pre-wrap; }
.l1-connect-sheet tr.is-error td { box-shadow: inset 0 -2px 0 var(--l1-danger); }
.l1-connect-sheet tr.is-error .l1-connect-sheet__gutter { background: var(--l1-danger-soft); color: var(--l1-danger); }
.l1-connect-sheet__gutter button { visibility: hidden; border: 0; background: transparent; color: var(--l1-ink-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.l1-connect-sheet tr:hover .l1-connect-sheet__gutter button,
.l1-connect-sheet__gutter button:focus-visible { visibility: visible; }
.l1-connect-sheet__gutter button:hover { color: var(--l1-danger); }

.l1-connect__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--l1-space-4); min-height: 32px; padding: 0 var(--l1-space-4); border-top: 1px solid var(--l1-border); background: var(--l1-surface-2); color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-connect__foot p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-connect__cell strong { color: var(--l1-ink); font-family: var(--l1-font-data); margin-right: 4px; }
.l1-connect__foot kbd { padding: 0 4px; border: 1px solid var(--l1-border-strong); border-radius: 3px; background: var(--l1-surface); color: var(--l1-ink); font: 10px/1.5 var(--l1-font-data); box-shadow: none; }

.l1-connect-pop { position: absolute; z-index: 30; max-width: 26rem; max-height: 22rem; overflow: auto; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-surface); color: var(--l1-ink); box-shadow: var(--l1-shadow-lg); font-size: var(--l1-text-sm); }
.l1-connect-pop header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--l1-space-3); padding: 8px 12px; border-bottom: 1px solid var(--l1-border); }
.l1-connect-pop header span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-connect-pop ol, .l1-connect-pop ul { margin: 0; padding: 4px 0; list-style: none; }
.l1-connect-pop ol li { display: flex; align-items: center; gap: 8px; padding: 5px 12px; counter-increment: l1-ip; }
.l1-connect-pop ol li::before { content: counter(l1-ip); min-width: 1.2em; color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-variant-numeric: tabular-nums; }
.l1-connect-pop ol li:hover { background: var(--l1-surface-2); }
.l1-connect-pop ol code { font-weight: var(--l1-fw-medium); }
.l1-connect-pop ol span { color: var(--l1-ink-muted); }
.l1-connect-pop em { padding: 1px 6px; border-radius: var(--l1-radius-pill); background: var(--l1-ok-soft); color: var(--l1-ok); font-size: 10px; font-style: normal; font-weight: var(--l1-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.l1-connect-pop__copy { margin-left: auto; border: 0; background: none; color: var(--l1-brand); font-size: var(--l1-text-micro); cursor: pointer; opacity: 0; }
.l1-connect-pop li:hover .l1-connect-pop__copy, .l1-connect-pop__copy:focus-visible { opacity: 1; }
.l1-connect-pop footer { display: flex; align-items: center; gap: var(--l1-space-3); padding: 8px 12px; border-top: 1px solid var(--l1-border); background: var(--l1-surface-2); }
.l1-connect-pop footer button { padding: 3px 10px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); background: var(--l1-surface); color: var(--l1-ink); font-size: var(--l1-text-micro); cursor: pointer; }
.l1-connect-pop footer span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-connect-pop[data-mode="picker"] ul li { position: relative; padding: 6px 12px 6px 26px; cursor: pointer; }
.l1-connect-pop[data-mode="picker"] ul li:hover,
.l1-connect-pop[data-mode="picker"] ul li[aria-selected="true"] { background: var(--l1-brand-soft); color: var(--l1-brand-strong, var(--l1-brand)); }
.l1-connect-pop[data-mode="picker"] li[data-tone]::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--l1-ink-muted); }
.l1-connect-pop[data-mode="picker"] li[data-tone="ok"]::before { background: var(--l1-ok); }
.l1-connect-pop[data-mode="picker"] li[data-tone="warn"]::before { background: var(--l1-warn); }
.l1-connect-pop[data-mode="picker"] li[data-tone="info"]::before { background: var(--l1-info); }
.l1-connect-pop[data-mode="picker"] li[data-tone="danger"]::before { background: var(--l1-danger); }

.l1-connect-tone { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--l1-radius-pill); background: var(--l1-surface-2); color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); }
.l1-connect-tone::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.l1-connect-tone[data-tone="ok"] { background: var(--l1-ok-soft); color: var(--l1-ok); }
.l1-connect-tone[data-tone="warn"] { background: var(--l1-warn-soft); color: var(--l1-warn); }
.l1-connect-tone[data-tone="info"] { background: var(--l1-info-soft); color: var(--l1-info); }
.l1-connect-tone[data-tone="danger"] { background: var(--l1-danger-soft); color: var(--l1-danger); }

/* Topology ----------------------------------------------------------------- */
.l1-topo-sprite { position: absolute; }
.l1-topo { display: flex; flex-direction: column; gap: var(--l1-space-4); width: 100%; max-width: 1600px; margin: 0 auto; padding: var(--l1-space-5) var(--l1-space-4) var(--l1-space-7); }
.l1-topo svg use, .l1-topo-node svg, .l1-topo__chips svg, .l1-topo-switch__icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.l1-topo__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--l1-space-3); }
.l1-topo__head h1 { margin: 0; font-size: var(--l1-text-xl); font-weight: var(--l1-fw-semibold); }
.l1-topo__head p { margin: 2px 0 0; color: var(--l1-ink-muted); font-size: var(--l1-text-sm); }
.l1-topo__site { display: flex; align-items: center; gap: var(--l1-space-2); font-size: var(--l1-text-sm); }
.l1-topo__site label { color: var(--l1-ink-muted); margin: 0; }
.l1-topo__site select { height: var(--l1-control-h-sm, 32px); padding: 0 28px 0 10px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background-color: var(--l1-surface); color: var(--l1-ink); }
.l1-topo__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--l1-space-3); margin: 0; }
.l1-topo__stats > div { position: relative; padding: var(--l1-space-3) var(--l1-space-4); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-surface); }
.l1-topo__stats > div[data-tone="warn"] { border-color: color-mix(in srgb, var(--l1-warn) 45%, var(--l1-border)); }
.l1-topo__stats dt { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); text-transform: uppercase; letter-spacing: 0.05em; }
.l1-topo__stats dd { margin: 4px 0 0; font-size: var(--l1-text-2xl); font-weight: var(--l1-fw-semibold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.l1-topo__stats dd small { margin-left: 6px; color: var(--l1-ink-muted); font-size: var(--l1-text-sm); font-weight: var(--l1-fw-normal); }
.l1-topo__meter, .l1-topo-node__util { display: block; height: 4px; border-radius: 2px; background: var(--l1-surface-3, var(--l1-surface-2)); overflow: hidden; }
.l1-topo__meter { margin-top: 8px; }
.l1-topo__meter i, .l1-topo-node__util i { display: block; height: 100%; background: var(--l1-brand); border-radius: inherit; }

.l1-topo__canvas { border: 1px solid var(--l1-border); border-radius: var(--l1-radius-lg); background: var(--l1-surface); overflow: hidden; }
.l1-topo__canvasbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--l1-space-3); padding: var(--l1-space-2) var(--l1-space-3); border-bottom: 1px solid var(--l1-border); }
.l1-topo__legend { display: flex; flex-wrap: wrap; gap: var(--l1-space-4); margin: 0; padding: 0; list-style: none; color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-topo__legend li { display: inline-flex; align-items: center; gap: 6px; }
.l1-topo-key { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--l1-ink-muted); }
.l1-topo-key--uplink { border-top-width: 3px; border-top-color: var(--l1-brand); }
.l1-topo-key--management { border-top-style: dashed; border-top-color: var(--l1-info); }
.l1-topo-key--dependency { border-top-style: dotted; }
.l1-topo__zoom { display: inline-flex; gap: 2px; }
.l1-topo__zoom button { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-sm); background: var(--l1-surface); color: var(--l1-ink); font-size: var(--l1-text-sm); font-variant-numeric: tabular-nums; cursor: pointer; }
.l1-topo__zoom button:hover { background: var(--l1-surface-2); }
.l1-topo__stage { position: relative; display: flex; }
.l1-topo__viewport { flex: 1; min-width: 0; height: min(72vh, 820px); overflow: auto; cursor: grab; background-color: var(--l1-bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--l1-ink) 14%, transparent) 1px, transparent 1.2px); background-size: 20px 20px; }
.l1-topo__viewport.is-panning { cursor: grabbing; user-select: none; }
.l1-topo__plane { position: relative; margin: 0 auto; }
.l1-topo__wires { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.l1-topo-edge { fill: none; stroke: color-mix(in srgb, var(--l1-ink) 38%, transparent); stroke-width: 1.6; stroke-linejoin: round; transition: opacity 0.15s, stroke 0.15s; pointer-events: stroke; }
.l1-topo-edge--uplink, .l1-topo-edge--trunk { stroke: var(--l1-brand); stroke-width: 2.6; }
.l1-topo-edge--management { stroke: var(--l1-info); stroke-dasharray: 6 4; }
.l1-topo-edge--dependency { stroke-dasharray: 2 4; }
.l1-topo-edge.is-extra { stroke-opacity: 0.75; }
.l1-topo-port { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 0 5px; border: 1px solid var(--l1-border); border-radius: 4px; background: var(--l1-surface); color: var(--l1-ink-soft, var(--l1-ink)); font: 10.5px/16px var(--l1-font-data); white-space: nowrap; pointer-events: none; transition: opacity 0.15s; }
.l1-topo-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-surface); color: var(--l1-ink); text-align: left; box-shadow: var(--l1-shadow-sm); cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s; }
.l1-topo-node:hover { border-color: var(--l1-brand); box-shadow: var(--l1-shadow-md); }
.l1-topo-node.is-selected { border-color: var(--l1-brand); box-shadow: 0 0 0 3px var(--l1-focus-ring), var(--l1-shadow-md); }
.l1-topo-node.is-switch { border-top: 3px solid var(--l1-brand); padding-bottom: 12px; }
.l1-topo-node.is-leaf { padding: 6px 10px 6px 8px; box-shadow: none; }
.l1-topo-node__icon { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--l1-radius-sm); background: var(--l1-surface-2); color: var(--l1-ink-muted); }
.l1-topo-node[data-role="router"] .l1-topo-node__icon,
.l1-topo-node[data-role="firewall"] .l1-topo-node__icon,
.l1-topo-node[data-role="cloud"] .l1-topo-node__icon { background: var(--l1-warn-soft); color: var(--l1-warn); }
.l1-topo-node[data-role="switch"] .l1-topo-node__icon { background: var(--l1-brand-soft); color: var(--l1-brand); }
.l1-topo-node.is-leaf .l1-topo-node__icon { width: 28px; height: 28px; }
.l1-topo-node__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.l1-topo-node__body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--l1-text-sm); font-weight: var(--l1-fw-semibold); }
.l1-topo-node__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--l1-ink-muted); font-size: 11px; line-height: 1.35; }
.l1-topo-node__meta em { margin-left: 4px; padding: 0 5px; border-radius: var(--l1-radius-pill); background: var(--l1-surface-2); font-style: normal; font-size: 10px; }
.l1-topo-node__status { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--l1-ink-muted); }
.l1-topo-node[data-tone="ok"] .l1-topo-node__status { background: var(--l1-ok); }
.l1-topo-node[data-tone="warn"] .l1-topo-node__status { background: var(--l1-warn); }
.l1-topo-node[data-tone="info"] .l1-topo-node__status { background: var(--l1-info); }
.l1-topo-node[data-tone="danger"] .l1-topo-node__status { background: var(--l1-danger); }
.l1-topo-node__util { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; }
.l1-topo__plane.is-focused .l1-topo-node:not(.is-lit) { opacity: 0.35; }
.l1-topo__plane.is-focused .l1-topo-edge:not(.is-lit),
.l1-topo__plane.is-focused .l1-topo-port:not(.is-lit) { opacity: 0.12; }
.l1-topo__plane.is-focused .l1-topo-edge.is-lit { stroke-width: 3; }
.l1-topo__empty { max-width: 34rem; margin: var(--l1-space-7) auto; padding: var(--l1-space-5); text-align: center; color: var(--l1-ink-muted); }
.l1-topo__empty p { margin: 0 0 var(--l1-space-2); }
.l1-topo__empty strong { color: var(--l1-ink); }

.l1-topo__inspector { flex: none; width: 20rem; max-height: min(72vh, 820px); overflow: auto; border-left: 1px solid var(--l1-border); background: var(--l1-surface); font-size: var(--l1-text-sm); }
.l1-topo-inspect__head { position: sticky; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--l1-space-2); padding: var(--l1-space-3) var(--l1-space-4); border-bottom: 1px solid var(--l1-border); background: var(--l1-surface); }
.l1-topo-inspect__head strong { display: block; font-size: var(--l1-text-base); }
.l1-topo-inspect__head span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-topo-inspect__close { border: 0; background: none; color: var(--l1-ink-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.l1-topo__inspector h3 { margin: var(--l1-space-4) var(--l1-space-4) var(--l1-space-2); color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; }
.l1-topo__inspector > p { margin: 0 var(--l1-space-4); }
.l1-topo-inspect__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--l1-space-3); margin: var(--l1-space-3) var(--l1-space-4) 0; }
.l1-topo-inspect__facts dt { color: var(--l1-ink-muted); font-weight: var(--l1-fw-normal); }
.l1-topo-inspect__facts dd { margin: 0; overflow-wrap: anywhere; }
.l1-topo-inspect__ips { margin: 0; padding: 0 var(--l1-space-4); list-style: none; }
.l1-topo-inspect__ips li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--l1-border); }
.l1-topo-inspect__ips span { color: var(--l1-ink-muted); }
.l1-topo-inspect__ips em { margin-left: auto; padding: 1px 6px; border-radius: var(--l1-radius-pill); background: var(--l1-ok-soft); color: var(--l1-ok); font-size: 10px; font-style: normal; font-weight: var(--l1-fw-semibold); text-transform: uppercase; }
.l1-topo-inspect__links { width: calc(100% - 2 * var(--l1-space-4)); margin: 0 var(--l1-space-4); border-collapse: collapse; font-size: var(--l1-text-micro); }
.l1-topo-inspect__links th { color: var(--l1-ink-muted); font-weight: var(--l1-fw-medium); text-align: left; padding: 3px 4px 3px 0; }
.l1-topo-inspect__links td { padding: 4px 4px 4px 0; border-top: 1px solid var(--l1-border); }
.l1-topo-inspect__actions { display: flex; flex-wrap: wrap; gap: var(--l1-space-3); margin: var(--l1-space-4) !important; padding-bottom: var(--l1-space-3); }

.l1-topo__section h2 { display: flex; align-items: center; gap: var(--l1-space-2); margin: var(--l1-space-3) 0 2px; font-size: var(--l1-text-lg); font-weight: var(--l1-fw-semibold); }
.l1-topo__section h2 span { padding: 0 8px; border-radius: var(--l1-radius-pill); background: var(--l1-surface-2); color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); }
.l1-topo__sub { margin: 0 0 var(--l1-space-3); color: var(--l1-ink-muted); font-size: var(--l1-text-sm); }
.l1-topo__warn { margin: var(--l1-space-3) var(--l1-space-4); padding: var(--l1-space-2) var(--l1-space-3); border-radius: var(--l1-radius-sm); background: var(--l1-warn-soft); color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-topo-muted { color: var(--l1-ink-muted); }
.l1-topo__chips { display: flex; flex-wrap: wrap; gap: var(--l1-space-2); margin: 0; padding: 0; list-style: none; }
.l1-topo__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--l1-border-strong); border-radius: var(--l1-radius-pill); background: var(--l1-surface); font-size: var(--l1-text-sm); }
.l1-topo__chips li span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }

.l1-topo-switch { margin-bottom: var(--l1-space-3); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-lg); background: var(--l1-surface); }
.l1-topo-switch > summary { display: flex; align-items: center; gap: var(--l1-space-3); padding: var(--l1-space-3) var(--l1-space-4); cursor: pointer; list-style: none; }
.l1-topo-switch > summary::-webkit-details-marker { display: none; }
.l1-topo-switch > summary::after { content: ""; width: 8px; height: 8px; margin-left: var(--l1-space-2); border-right: 2px solid var(--l1-ink-muted); border-bottom: 2px solid var(--l1-ink-muted); transform: rotate(-45deg); transition: transform 0.15s; }
.l1-topo-switch[open] > summary::after { transform: rotate(45deg); }
.l1-topo-switch[open] > summary { border-bottom: 1px solid var(--l1-border); }
.l1-topo-switch__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--l1-radius-sm); background: var(--l1-brand-soft); color: var(--l1-brand); }
.l1-topo-switch__name { display: flex; flex-direction: column; margin-right: auto; }
.l1-topo-switch__name span { color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-topo-switch__usage { color: var(--l1-ink-muted); font-size: var(--l1-text-sm); font-variant-numeric: tabular-nums; }

/* The faceplate numbers ports the way the hardware does: odd on top. */
.l1-faceplate { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 30px); grid-auto-columns: 34px; gap: 5px; width: max-content; max-width: calc(100% - 2 * var(--l1-space-4)); margin: var(--l1-space-4) var(--l1-space-4) 0; padding: 10px 12px; overflow-x: auto; border-radius: var(--l1-radius-md); background: #1f2937; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
.l1-faceplate__port { display: grid; place-items: end center; padding-bottom: 2px; border-radius: 3px 3px 5px 5px; background: #374151; color: #d1d5db; font: var(--l1-fw-semibold) 10px/1 var(--l1-font-data); text-decoration: none; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.35); }
.l1-faceplate__port:hover { color: #fff; outline: 2px solid #fff; outline-offset: 1px; }
.l1-faceplate__port.is-up { background: #15803d; color: #ecfdf5; }
.l1-faceplate__port.is-uplink { background: #2563eb; color: #eff6ff; }
.l1-faceplate__port.is-disabled { background: repeating-linear-gradient(135deg, #374151 0 4px, #2b3340 4px 8px); color: #6b7280; }
.l1-faceplate__port.is-undocumented { outline: 1px dashed #fbbf24; outline-offset: -1px; }
.l1-faceplate__legend { display: flex; flex-wrap: wrap; gap: var(--l1-space-4); margin: var(--l1-space-2) var(--l1-space-4) 0; padding: 0; list-style: none; color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-faceplate__legend li { display: inline-flex; align-items: center; gap: 6px; }
.l1-faceplate__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #374151; }
.l1-faceplate__legend i.is-up { background: #15803d; }
.l1-faceplate__legend i.is-uplink { background: #2563eb; }
.l1-faceplate__legend i.is-disabled { background: repeating-linear-gradient(135deg, #374151 0 3px, #2b3340 3px 6px); }
.l1-faceplate__legend i.is-undocumented { outline: 1px dashed #fbbf24; outline-offset: -1px; }
.l1-topo-table { margin: var(--l1-space-4) 0 0; overflow-x: auto; border-top: 1px solid var(--l1-border); }
.l1-topo-table table { width: 100%; border-collapse: collapse; font-size: var(--l1-text-sm); }
.l1-topo-table th { padding: 8px 12px; background: var(--l1-surface-2); color: var(--l1-ink-muted); font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); text-align: left; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.l1-topo-table td { padding: 7px 12px; border-top: 1px solid var(--l1-border); vertical-align: top; }
.l1-topo-table tr:target td { background: var(--l1-brand-soft); }
.l1-topo-table tr.is-free td, .l1-topo-table tr.is-disabled td { color: var(--l1-ink-muted); }
.l1-topo-table__notes { max-width: 22rem; }
.l1-topo-ip { display: block; }
.l1-port-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--l1-text-micro); font-weight: var(--l1-fw-semibold); white-space: nowrap; }
.l1-port-state::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--l1-ink-muted); opacity: 0.5; }
.l1-port-state.is-up::before { background: var(--l1-ok); opacity: 1; }
.l1-port-state.is-uplink::before { background: var(--l1-brand); opacity: 1; }

/* Editing on the topology page: add a switch, label its ports. */
.l1-topo__headtools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l1-space-3); }
.l1-connect__tool.is-primary { border-color: var(--l1-brand); background: var(--l1-brand); color: var(--l1-on-brand); }
.l1-connect__tool.is-primary:hover { background: var(--l1-brand-strong); color: var(--l1-on-brand); }
.l1-connect__tool.is-danger { color: var(--l1-danger); }
.l1-connect__tool.is-danger:hover { border-color: var(--l1-danger); background: var(--l1-danger-soft); color: var(--l1-danger); }
.l1-topo__notices { display: flex; flex-direction: column; gap: var(--l1-space-2); margin: 0; padding: 0; list-style: none; }
.l1-topo__notices li { padding: var(--l1-space-2) var(--l1-space-3); border-radius: var(--l1-radius-md); background: var(--l1-ok-soft); color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-topo__notices li[data-tone="danger"] { background: var(--l1-danger-soft); }
.l1-topo-addform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--l1-space-3); padding: var(--l1-space-4); border: 1px solid var(--l1-border); border-radius: var(--l1-radius-lg); background: var(--l1-surface); }
.l1-topo-addform[hidden] { display: none; }
.l1-topo-addform label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 12rem; margin: 0; font-size: var(--l1-text-micro); font-weight: var(--l1-fw-medium); color: var(--l1-ink-muted); }
.l1-topo-addform label.is-narrow { flex: 0 0 6rem; }
.l1-topo-addform label em { font-style: normal; font-weight: var(--l1-fw-normal); opacity: 0.8; }
.l1-topo-addform input, .l1-topo-switch__more input { height: var(--l1-control-h-sm, 32px); padding: 0 10px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-md); background: var(--l1-surface); color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-topo-addform input:focus, .l1-topo-switch__more input:focus { outline: none; border-color: var(--l1-brand); box-shadow: 0 0 0 3px var(--l1-focus-ring); }
.l1-topo-addform__actions { display: flex; gap: var(--l1-space-2); }
.l1-topo-addform__hint { flex-basis: 100%; margin: 0; color: var(--l1-ink-muted); font-size: var(--l1-text-micro); }
.l1-topo-switch__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--l1-space-3); padding: var(--l1-space-3) var(--l1-space-4) 0; }
.l1-topo-switch__tools form { margin: 0; }
.l1-topo-switch__more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--l1-text-sm); color: var(--l1-ink-muted); }
.l1-topo-switch__more label { margin: 0; }
.l1-topo-switch__more input { width: 4.5rem; }
.l1-topo-switch__none { margin: var(--l1-space-3) var(--l1-space-4) var(--l1-space-4); }
.l1-topo-table th.l1-topo-table__label, .l1-topo-table td.l1-topo-table__label { width: 34%; min-width: 14rem; }
.l1-topo-table td.l1-topo-table__label { padding: 3px 8px; }
.l1-topo-table td label { margin: 0; cursor: pointer; }
.l1-topo-label { width: 100%; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--l1-radius-sm); background: transparent; color: var(--l1-ink); font-size: var(--l1-text-sm); }
.l1-topo-label::placeholder { color: var(--l1-ink-muted); opacity: 0.6; }
.l1-topo-label:hover { border-color: var(--l1-border); }
.l1-topo-label:focus { outline: none; border-color: var(--l1-brand); background: var(--l1-surface); box-shadow: 0 0 0 3px var(--l1-focus-ring); }
.l1-topo-label.is-saving { border-style: dashed; border-color: var(--l1-border-strong); }
.l1-topo-label.is-error { border-color: var(--l1-danger); background: var(--l1-danger-soft); }
.l1-topo-table tr.is-free td .l1-topo-label { color: var(--l1-ink); }

@media (max-width: 860px) {
  .l1-connect__bar { gap: var(--l1-space-3); }
  .l1-connect__filter input { width: 9rem; }
  .l1-connect__keys { display: none; }
  .l1-topo__stage { flex-direction: column; }
  .l1-topo__inspector { width: auto; max-height: none; border-left: 0; border-top: 1px solid var(--l1-border); }
}
@media print {
  .l1-connect__bar, .l1-topo__zoom, .l1-topo__headtools, .l1-topo__inspector, .l1-topo-addform, .l1-topo-switch__tools, .l1-topo__notices { display: none !important; }
  .l1-topo-label { border: 0 !important; padding: 0; }
  .l1-connect-body, .l1-topo__viewport { background: #fff !important; }
  .l1-topo__viewport { height: auto; overflow: visible; }
  .l1-topo-switch { break-inside: avoid; }
}

/* Shared in-page confirm dialog (static/js/l1-confirm.js). window.confirm does
   nothing in the B18 Admin desktop app, so every layout uses this instead. */
.l1-confirm { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, 0.45); }
.l1-confirm__card { width: min(420px, 100%); padding: 20px; border: 1px solid var(--l1-border); border-radius: var(--l1-radius-lg); background: var(--l1-surface); color: var(--l1-text); box-shadow: var(--l1-shadow-lg); }
.l1-confirm__card h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.l1-confirm__card p { margin: 0; color: var(--l1-text-muted); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.l1-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }