/* ============================================================
   Design tokens have moved out of this file:
     - themes.css       brand PRIMITIVES per [data-theme] (the switch)
     - tokens-base.css  semantic aliases, states, effect tokens, type scale
   Both are loaded before this file in fragments/shared/head.html.
   This file now contains COMPONENT styles only; they must reference
   semantic / effect / state tokens (--fg-*, --bg-*, --border-*,
   --bb-surface-*, --bb-shadow-*, --bb-r*) — never brand primitives
   and never hard-coded hex.
   ============================================================ */

body {
  font-family: var(--bb-font-sans);
}

.htmx-indicator {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  visibility: visible;
}

.bb-fg-1 { color: var(--fg-1); }
.bb-fg-2 { color: var(--fg-2); }
.bb-fg-3 { color: var(--fg-3); }
.bb-fg-accent { color: var(--fg-accent); }
.bb-fg-action { color: var(--fg-action); }
.bb-fg-inverse { color: var(--fg-inverse); }
.bb-fg-danger { color: var(--bb-danger-text); }
.bb-fg-success { color: var(--bb-success-text); }
.bb-fg-success-strong { color: var(--bb-success-text-strong); }
.bb-fg-warn { color: var(--bb-warn-text); }
.bb-fg-info { color: var(--bb-info-text); }
.bb-fg-highlight { color: var(--fg-highlight); }
.bb-fg-line { color: var(--border-1); }
.bb-fg-inherit { color: inherit; }
.bb-bg-1 { background: var(--bg-1); }
.bb-bg-2 { background: var(--bg-2); }
.bb-bg-3 { background: var(--bg-3); }
.bb-bg-surface { background: var(--bb-surface); }
.bb-bg-surface-2 { background: var(--bb-surface-2); }
.bb-bg-muted { background: var(--bb-bg-2); }
.bb-bg-line { background: var(--border-1); }
.bb-bg-warn { background: var(--bb-warn-bg); }
.bb-bg-warn-2 { background: var(--bb-warn-bg-2); }
.bb-bg-warn-fg { background: var(--bb-warn-text); }
.bb-bg-success { background: var(--bb-success-bg); }
.bb-bg-success-2 { background: var(--bb-chart-green-bg-4); }
.bb-bg-success-fg { background: var(--bb-success-text); }
.bb-bg-danger { background: var(--bb-danger-bg); }
.bb-bg-danger-fg { background: var(--bb-danger-text); }
.bb-bg-info { background: var(--bb-info-bg); }
.bb-bg-accent { background: var(--fg-accent); }
.bb-bg-action { background: var(--fg-action); }
.bb-bg-none { background: none; }
.bb-bg-disabled { background: var(--bb-neutral-disabled); }
.bb-hairline { border-color: var(--border-1); }
.bb-box-hairline { border: 1px solid var(--border-1); }
.bb-row-hairline { border-bottom: 1px solid var(--border-1); }
.bb-row-hairline-top { border-top: 1px solid var(--border-1); }
.bb-border-success { border-color: var(--bb-success-border); }
.bb-border-danger { border-color: var(--bb-danger-text); }
.bb-border-danger-2 { border-color: var(--bb-danger-border); }
.bb-border-action { border-color: var(--fg-action); }
.bb-fill-action { background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)); }
.bb-fill-accent { background: color-mix(in srgb, var(--fg-accent) 12%, var(--bg-1)); }
.bb-fg-chart-purple { color: var(--bb-chart-purple); }
.bb-fg-chart-orange { color: var(--bb-chart-orange); }
.bb-bg-chart-orange { background: var(--bb-chart-orange-bright); }

.bb-auth-shell {
  min-height: 100vh;
  background: var(--bb-page-fill);
}

.bb-auth-card {
  width: 100%;
  max-width: 26rem;
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r);
  background: var(--bb-surface-fill);
  backdrop-filter: var(--bb-surface-blur);
  -webkit-backdrop-filter: var(--bb-surface-blur);
  box-shadow: var(--bb-shadow-sm);
}

.bb-logo-wrap {
  display: inline-flex;
  align-items: center;
  border-radius: 0.75rem;
  background: var(--fg-accent);
  padding: 0.625rem 1.125rem;
}

.bb-logo-img {
  max-height: 48px;
  max-width: 130px;
  width: auto;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.bb-logo-img--light {
  filter: brightness(0) invert(1);
}

.bb-logo-text {
  color: var(--fg-inverse);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
}

.bb-logo-em {
  margin-left: 0.25rem;
  display: inline-block;
  border-radius: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--fg-highlight) 30%, transparent);
  padding: 0 0.35rem;
  color: var(--fg-highlight);
  font-size: 0.875rem;
  font-style: normal;
}

.bb-title {
  margin: 0;
  color: var(--fg-accent);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bb-title-lg {
  font-size: 2rem;
}

.bb-title-md {
  font-size: 1.5rem;
}

.bb-title-sm {
  font-size: 1.125rem;
}

/* ============================================================
   Typography layer — brand spec scale
   ============================================================ */
.bb-h1 {
  font-size: 30px;
  line-height: 36px;
  font-weight: var(--bb-weight-bold);
  letter-spacing: var(--bb-track-tight-1);
  margin: 0;
}

.bb-h2 {
  font-size: 22px;
  line-height: 28px;
  font-weight: var(--bb-weight-bold);
  letter-spacing: var(--bb-track-tight-2);
  margin: 0;
}

.bb-h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--bb-weight-medium);
  margin: 0;
}

.bb-intro {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--bb-weight-light);
}

.bb-subhead {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--bb-weight-bold);
}

.bb-body {
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--bb-weight-light);
}

.bb-body-on-dark {
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--bb-weight-regular);
}

.bb-kicker,
.bb-list-title {
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--bb-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-caps);
}

.bb-caption {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--bb-weight-regular);
}

.bb-quote {
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--bb-weight-medium);
}

/* ============================================================ */

.bb-subtitle {
  margin: 0;
  color: var(--bb-muted);
  font-size: 0.813rem;
}

.bb-label {
  margin-bottom: 0.375rem;
  display: block;
  color: var(--fg-accent);
  font-size: 0.813rem;
  font-weight: 600;
}

.bb-input,
.bb-select {
  width: 100%;
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r-sm);
  background: var(--bb-control-fill);
  padding: 0.7rem 0.75rem;
  font-size: 0.875rem;
}

.bb-textarea {
  width: 100%;
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r-sm);
  background: var(--bb-control-fill);
  padding: 0.7rem 0.75rem;
  font-size: 0.875rem;
  resize: vertical;
}

.bb-input:focus,
.bb-select:focus,
.bb-textarea:focus {
  outline: none;
  border-color: var(--fg-action);
  box-shadow: var(--bb-focus-ring);
}

.bb-input[readonly] {
  color: var(--bb-muted);
  background: var(--bb-input-readonly-bg);
}

.bb-btn-primary {
  width: 100%;
  border: 0;
  border-radius: var(--bb-r-sm);
  background: var(--fg-action);
  padding: 0.75rem 0.875rem;
  color: var(--fg-inverse);
  font-size: 0.875rem;
  font-weight: 600;
}

.bb-btn-primary:hover {
  filter: brightness(0.97);
}

.bb-btn-secondary {
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r-xs);
  background: var(--bb-control-fill);
  color: var(--fg-accent);
  padding: 0.45rem 0.8rem;
  font-size: 0.813rem;
  font-weight: 600;
}

.bb-btn-secondary:hover {
  background: var(--bb-surface-2);
}

.bb-btn-secondary.on {
  background: var(--fg-accent);
  color: var(--bb-white);
  border-color: var(--fg-accent);
}

.bb-btn-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--fg-accent);
  font-size: 0.813rem;
  text-decoration: underline;
}

.bb-link-row {
  text-align: center;
}

.bb-link {
  color: var(--fg-accent);
  font-size: 0.813rem;
  text-decoration: none;
}

.bb-link:hover {
  text-decoration: underline;
}

.bb-quick-login {
  border-top: 1px solid var(--bb-line);
  padding-top: 16px;
}

.bb-quick-login-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--bb-line);
  border-radius: 8px;
  background: var(--bb-bg);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bb-quick-login-card:hover {
  border-color: var(--fg-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--fg-accent) 10%, transparent);
}

.bb-quick-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.bb-quick-login-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.bb-quick-login-info strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text);
}

.message {
  border-radius: 0.75rem;
  border: 1px solid transparent;
  padding: 0.625rem 0.75rem;
  font-size: 0.813rem;
}

.is-error {
  border-color: var(--bb-danger-border);
  color: var(--bb-danger-text);
  background: var(--bb-danger-bg);
}

.is-success {
  border-color: var(--bb-success-border);
  color: var(--bb-success-text);
  background: var(--bb-success-bg);
}

.hidden {
  display: none !important;
}

.bb-step-title {
  margin: 0;
  color: var(--fg-accent);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bb-hint {
  margin: 0.5rem 0 0.75rem;
  color: var(--bb-hint);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.bb-page-shell {
  min-height: 100vh;
  background: var(--bb-page-fill);
}

/* ── Hero Header ── */

.bb-hero-header {
  background: linear-gradient(
    color-mix(in srgb, var(--fg-accent) 98%, transparent) 0%,
    color-mix(in srgb, var(--fg-accent) 88%, transparent) 100%
  );
}

.bb-navbar {
  height: 88px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bb-hero-header .bb-logo-wrap {
  width: 150px;
  height: 100%;
  background: var(--bb-surface-fill);
  backdrop-filter: var(--bb-surface-blur);
  -webkit-backdrop-filter: var(--bb-surface-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border-bottom-right-radius: 28px;
  border-bottom-left-radius: 28px;
  box-shadow: var(--bb-shadow-md);
  padding: 0;
}

.bb-hero-header .bb-logo-text {
  color: var(--fg-accent);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.4px;
}

.bb-hero-header .bb-logo-em {
  font-style: normal;
  color: var(--fg-highlight);
  background: var(--fg-accent);
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 2px;
  font-size: 15px;
  border: none;
}

.bb-hero-strip {
  height: 20px;
}

/* ── Legacy Topbar (kept for backward compat) ── */

.bb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fg-accent);
  color: var(--fg-inverse);
}

.bb-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* ── Nav Links (hero-header context) ── */

.bb-nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-left: auto;
}

.bb-nav-link {
  text-decoration: none;
  color: var(--fg-inverse);
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s;
}

.bb-nav-link:hover {
  border-color: color-mix(in srgb, var(--fg-highlight) 50%, transparent);
}

.bb-nav-link.active {
  border-bottom: 3px solid var(--fg-highlight);
}

.bb-nav-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--fg-inverse);
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid color-mix(in srgb, var(--fg-inverse) 30%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
  transition: all 0.2s;
  margin-left: 8px;
}

.bb-nav-settings:hover {
  background: color-mix(in srgb, var(--fg-inverse) 10%, transparent);
  border-color: color-mix(in srgb, var(--fg-inverse) 60%, transparent);
}

.bb-nav-settings.active {
  background: var(--fg-highlight);
  color: var(--fg-accent);
  border-color: var(--fg-highlight);
}

.bb-nav-settings svg {
  flex-shrink: 0;
}

.bb-nav-profile-wrap {
  position: relative;
  margin-left: 12px;
  flex-shrink: 0;
}

.bb-nav-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--fg-inverse) 40%, transparent);
  color: var(--fg-inverse);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.bb-nav-profile:hover {
  background: color-mix(in srgb, var(--fg-inverse) 15%, transparent);
  border-color: var(--fg-highlight);
}

.bb-nav-profile-wrap.open .bb-nav-profile {
  background: var(--fg-highlight);
  color: var(--fg-accent);
  border-color: var(--fg-highlight);
}

.bb-profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bb-surface-fill);
  border-radius: 8px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--fg-accent) 15%, transparent);
  padding: 12px 0;
  z-index: 100;
}

.bb-nav-profile-wrap.open .bb-profile-dropdown {
  display: block;
}

.bb-profile-dropdown-name {
  padding: 4px 16px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-text);
}

.bb-profile-dropdown-role {
  padding: 0 16px 4px;
  font-size: 11px;
  color: var(--bb-text-2);
}

.bb-profile-dropdown-divider {
  border: none;
  border-top: 1px solid var(--bb-border);
  margin: 8px 0;
}

.bb-profile-dropdown-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--bb-text-2);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.bb-profile-dropdown-logout:hover {
  background: var(--bb-danger-bg);
  color: var(--bb-danger-text);
}

.bb-profile-dropdown-logout svg {
  flex-shrink: 0;
}

.bb-profile-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--bb-text-2);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.bb-profile-dropdown-link:hover {
  background: var(--bb-surface-2);
  color: var(--bb-text);
}

.bb-btn-logout {
  border: 2px solid var(--fg-highlight);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-inverse);
  padding: 0.45rem 1rem;
  font-size: 0.813rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.bb-btn-logout:hover {
  background: var(--fg-highlight);
  color: var(--fg-accent);
}

.bb-content-wrap {
  padding: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.bb-admin-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .bb-admin-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.bb-card {
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r);
  background: var(--bb-surface-fill);
  backdrop-filter: var(--bb-surface-blur);
  -webkit-backdrop-filter: var(--bb-surface-blur);
  box-shadow: var(--bb-shadow-sm);
}

.bb-theme-preview-stage {
  background: var(--bb-page-fill);
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r);
  padding: 24px;
}

.bb-role-text {
  color: var(--bb-muted);
}

.bb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r-sm);
}

.bb-table {
  width: 100%;
  border-collapse: collapse;
}

.bb-table th,
.bb-table td {
  border-bottom: 1px solid var(--bb-line);
  padding: 0.7rem 0.75rem;
  text-align: left;
  font-size: 0.813rem;
}

.bb-table th {
  background: var(--bb-surface-2);
  color: var(--fg-accent);
  font-weight: 700;
}

.bb-th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.bb-th-sortable:hover {
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
}
.bb-th-sortable::after {
  content: " ⇅";
  opacity: 0.35;
  font-size: 0.75em;
}
.bb-th-sorted-asc::after {
  content: " ↑";
  opacity: 1;
  color: var(--fg-accent);
}
.bb-th-sorted-desc::after {
  content: " ↓";
  opacity: 1;
  color: var(--fg-accent);
}

/* Audit log tables (settings prototype) */
.bb-audit-table.bb-table th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-text-3);
  background: var(--bb-bg);
}

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

.bb-table-empty {
  color: var(--bb-muted);
  text-align: center !important;
}

.bb-table-group-header td {
  background: var(--bb-bg);
  border-top: 2px solid var(--bb-line);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--fg-accent);
}

.bb-table-group-header:first-child td {
  border-top: none;
}

.bb-table-group-count {
  margin-left: 8px;
  font-weight: 500;
  color: var(--bb-text-3);
  font-size: 12px;
}

.bb-users-panel-block {
  margin-bottom: 0;
}

.bb-users-panel-block + .bb-users-panel-block {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--bb-line);
}

.bb-users-panel-block-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bb-text-3);
  margin: 0 0 4px;
}

.bb-users-panel-block-desc {
  font-size: 13px;
  color: var(--bb-muted);
  margin: 0 0 16px;
  line-height: 1.45;
}

.bb-users-panel-inset {
  border: 1px solid var(--bb-line);
  border-radius: 12px;
  background: var(--bb-bg);
  padding: 20px 20px 16px;
}

.bb-invite-form-row {
  display: grid;
  gap: 14px;
}

@media (min-width: 900px) {
  .bb-invite-form-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(140px, 0.7fr) auto;
    align-items: end;
  }

  .bb-invite-form-row .bb-invite-form-submit-wrap {
    align-self: end;
  }
}

.bb-btn-table {
  border: 1px solid var(--bb-line);
  border-radius: 0.5rem;
  background: var(--bb-surface-fill);
  color: var(--fg-accent);
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.bb-btn-table:hover {
  background: var(--bb-surface-2);
}

.bb-btn-table:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bb-surface-2);
}

.bb-btn-table-danger {
  border-color: var(--bb-danger-border);
  color: var(--bb-danger-text);
}

.bb-window-btn {
  border: 1px solid var(--bb-line);
  border-radius: 0.5rem;
  background: var(--bb-surface-fill);
  color: var(--bb-text-3);
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bb-window-btn:hover {
  background: var(--bb-surface-2);
  color: var(--fg-accent);
}

.bb-window-btn--active {
  background: var(--fg-accent);
  border-color: var(--fg-accent);
  color: var(--fg-inverse);
}

.bb-window-btn--active:hover {
  background: var(--fg-accent);
  color: var(--fg-inverse);
}

/* Radio-button pill selector used for shared window controls */
.bb-window-selector {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bb-window-selector input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bb-window-selector label {
  border: 1px solid var(--bb-line);
  border-radius: 0.5rem;
  background: var(--bb-surface-fill);
  color: var(--bb-text-3);
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}

.bb-window-selector label:hover {
  background: var(--bb-surface-2);
  color: var(--fg-accent);
}

.bb-window-selector input[type="radio"]:checked + label {
  background: var(--fg-accent);
  border-color: var(--fg-accent);
  color: var(--fg-inverse);
}

.bb-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--bb-text-3);
}

.bb-pager button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Master data: active price source selector */
.bb-active-source-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bb-active-source-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid var(--fg-action);
  background: linear-gradient(135deg, color-mix(in srgb, var(--fg-action) 8%, transparent) 0%, color-mix(in srgb, var(--fg-action) 2%, transparent) 100%);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--fg-action) 12%, transparent);
}

.bb-active-source-banner--empty {
  border-color: var(--bb-line);
  background: var(--bb-bg-2);
  box-shadow: none;
}

.bb-active-source-banner__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--fg-action);
  color: var(--fg-inverse);
  font-size: 1.25rem;
}

.bb-active-source-banner--empty .bb-active-source-banner__icon {
  background: var(--bb-text-3);
}

.bb-active-source-banner__body {
  flex: 1;
  min-width: 0;
}

/* Second column: the forecast source. Wraps under the day-ahead source on narrow screens. */
.bb-active-source-banner__body--forecast {
  min-width: 12rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bb-line);
}

.bb-active-source-banner__name--none {
  color: var(--bb-text-3);
}

.bb-active-source-banner__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-action);
  margin-bottom: 0.25rem;
}

.bb-active-source-banner--empty .bb-active-source-banner__label {
  color: var(--bb-text-3);
}

.bb-active-source-banner__name {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--bb-text);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.bb-active-source-banner__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--bb-text-2);
}

.bb-active-source-banner__hint {
  font-size: 0.875rem;
  color: var(--bb-text-3);
  margin: 0.25rem 0 0;
}

.bb-source-type-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bb-bg-2);
  color: var(--bb-text-2);
}

.bb-table--sources tbody tr.bb-table-row-active td {
  background: color-mix(in srgb, var(--fg-action) 6%, transparent);
}

.bb-table--sources tbody tr.bb-table-row-active td:first-child {
  box-shadow: inset 3px 0 0 var(--fg-action);
}

.bb-source-row-active-tag {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--fg-action);
  color: var(--fg-inverse);
  vertical-align: middle;
}

.bb-sync-status-ok {
  color: var(--bb-green);
  font-weight: 600;
}

.bb-sync-status-failed {
  color: var(--bb-danger);
  font-weight: 600;
}

.bb-btn-table-danger:hover {
  background: var(--bb-danger-bg);
}

.bb-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ── Hamburger Button ── */

.bb-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--fg-highlight);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ── Mobile Menu Overlay ── */

.bb-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--fg-accent);
  z-index: 1000;
  flex-direction: column;
  padding: 20px;
}

.bb-mobile-menu.open {
  display: flex;
}

.bb-mobile-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--fg-highlight);
  font-size: 32px;
  cursor: pointer;
  margin-bottom: 40px;
  line-height: 1;
}

.bb-mobile-menu-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.bb-mobile-menu-logo .bb-logo-wrap {
  width: 140px;
  height: 60px;
  background: var(--bb-surface-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 0;
}

.bb-mobile-menu-logo .bb-logo-text {
  color: var(--fg-accent);
  font-weight: 800;
  font-size: 17px;
}

.bb-mobile-menu-logo .bb-logo-em {
  font-style: normal;
  color: var(--fg-highlight);
  background: var(--fg-accent);
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 2px;
  font-size: 15px;
  border: none;
}

.bb-mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 20px;
}

.bb-mobile-menu-links a {
  text-decoration: none;
  color: var(--fg-inverse);
  font-size: 18px;
  font-weight: 500;
}

.bb-mobile-menu-links a.active {
  color: var(--fg-highlight);
  font-weight: 600;
}

.bb-mobile-menu-logout {
  margin-top: 40px;
  margin-left: 20px;
  background: transparent;
  border: 2px solid var(--fg-highlight);
  border-radius: 999px;
  color: var(--fg-inverse);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 24px;
  cursor: pointer;
  font-family: inherit;
  width: fit-content;
}

/* ── Responsive: nav vs hamburger ── */

@media (max-width: 1024px) {
  .bb-nav-links {
    display: none !important;
  }
  .bb-hamburger {
    display: block !important;
  }
  .bb-content-wrap {
    padding: 20px 16px;
  }
}

@media (min-width: 1025px) {
  .bb-hamburger {
    display: none !important;
  }
  .bb-nav-links {
    display: flex !important;
  }
}

/* ── Settings Sidebar Layout ── */

.bb-settings-layout {
  display: flex;
  align-items: stretch;
  /* Hard-bounded to viewport so the sidebar and main panel scroll independently. */
  height: calc(100vh - 108px);
  min-height: 0;
  overflow: hidden;
}

.bb-settings-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bb-surface-fill);
  backdrop-filter: var(--bb-surface-blur);
  -webkit-backdrop-filter: var(--bb-surface-blur);
  border-right: 1px solid var(--bb-line);
  padding: 24px 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
}

.bb-sidebar-build {
  margin-top: auto;
  padding: 16px 20px 8px;
  border-top: 1px solid var(--bb-line);
  font-family: var(--bb-font-mono);
  text-align: left;
}

.bb-sidebar-build-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--bb-text-3);
  margin-bottom: 6px;
  font-family: inherit;
}

.bb-sidebar-build-line {
  font-size: 10px;
  line-height: 1.4;
  color: var(--bb-text-3);
  word-break: break-all;
}

.bb-sidebar-build-summary {
  font-size: 10px;
  line-height: 1.35;
  color: var(--bb-text-3);
  word-break: break-word;
}

.bb-login-build {
  margin-top: 16px;
  font-size: 11px;
  font-family: var(--bb-font-mono);
  color: var(--bb-text-3);
  opacity: 0.85;
  text-align: center;
  width: 100%;
  word-break: break-word;
}

.bb-profile-dropdown-build {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bb-line);
  font-family: var(--bb-font-mono);
  font-size: 10px;
  line-height: 1.35;
  color: var(--bb-text-3);
  word-break: break-word;
  text-align: left;
}

.bb-settings-main {
  flex: 1;
  padding: 40px;
  min-height: 0;
  overflow-y: auto;
  max-width: 1000px;
}

/* Wider main column when account settings sidebar wraps platform tool pages */
.bb-settings-main.bb-settings-main--platform-tool {
  max-width: none;
  min-width: 0;
}

/* Clients page nests bb-am-layout inside the settings main — fill parent, not viewport */
.bb-settings-main.bb-settings-main--platform-tool .bb-am-layout {
  height: 100%;
  min-height: 0;
}

.bb-settings-main.bb-settings-main--platform-tool:has(.bb-am-layout) {
  overflow: hidden;
  padding: 0;
}

.bb-data-browser-panels {
  margin-top: 1.5rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.bb-data-browser-hero-band,
.bb-etl-hero-band {
  padding-bottom: 0.25rem;
}

.bb-sidebar-section-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--bb-text-3);
  padding: 0 20px 8px;
  margin-top: 16px;
}

.bb-sidebar-section-lbl:first-child {
  margin-top: 0;
}

.bb-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bb-text-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border-left: 3px solid transparent;
  text-decoration: none;
}

.bb-sidebar-item:hover {
  background: var(--bb-bg);
  color: var(--bb-text);
}

.bb-sidebar-item.active {
  background: color-mix(in srgb, var(--fg-accent) 8%, var(--bg-1));
  color: var(--fg-accent);
  border-left-color: var(--fg-accent);
  font-weight: 600;
}

.bb-sidebar-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* Nested group under a settings section (e.g. Master data → Collectors, …) */
.bb-sidebar-group-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--bb-text-3);
  padding: 6px 20px 4px 20px;
  margin-top: 2px;
}

.bb-sidebar-item.bb-sidebar-subitem {
  padding: 8px 16px 8px 36px;
  font-size: 12px;
  font-weight: 500;
}

.bb-sidebar-item.bb-sidebar-subitem .bb-sidebar-icon {
  font-size: 14px;
  width: 18px;
}

.bb-section-panel {
  display: none;
}

.bb-section-panel.active {
  display: block;
}

.bb-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.bb-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--bb-text-3);
  margin-bottom: 6px;
}

.bb-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--bb-text);
}

/* ── Stats Bar (Dashboard KPIs) ── */

.bb-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  box-shadow: var(--bb-shadow-md);
  margin-bottom: 36px;
}

.bb-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: 28px 32px;
}

.bb-stat + .bb-stat {
  border-left: 1px solid var(--bb-line);
}

.bb-stat-value {
  font-size: 42px;
  font-weight: 700;
  color: var(--fg-accent);
  line-height: 1;
  letter-spacing: -0.03em;
}

.bb-stat-divider {
  height: 3px;
  background: currentColor;
  margin: 8px 0 6px;
  align-self: flex-end;
  border-radius: 2px;
}

.bb-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--bb-text-3);
}

@media (max-width: 768px) {
  .bb-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .bb-stat + .bb-stat {
    border-left: none;
  }
  .bb-stat:nth-child(odd) {
    border-right: 1px solid var(--bb-line);
  }
  .bb-stat:nth-child(1),
  .bb-stat:nth-child(2) {
    border-bottom: 1px solid var(--bb-line);
  }
  .bb-stat {
    padding: 20px 24px;
  }
  .bb-stat-value {
    font-size: 32px;
  }
}

/* ── Sidebar "Create" Button ── */

.bb-sidebar-create-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 16px 12px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-surface);
  background: var(--fg-action);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s;
  text-decoration: none;
}

.bb-sidebar-create-btn:hover {
  filter: brightness(0.92);
}

/* ── Status Badges (from demo settings.html) ── */

.bb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}

.bb-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bb-badge-active {
  background: color-mix(in srgb, var(--bb-success-text) 10%, transparent);
  color: var(--bb-success-text);
}
.bb-badge-active::before {
  background: var(--bb-success-text);
}

.bb-badge-inactive {
  background: color-mix(in srgb, var(--fg-accent) 5%, transparent);
  color: var(--bb-text-3);
}
.bb-badge-inactive::before {
  background: var(--bb-text-3);
}

.bb-badge-error {
  background: color-mix(in srgb, var(--bb-danger-text) 10%, transparent);
  color: var(--bb-danger-text);
}
.bb-badge-error::before {
  background: var(--bb-danger-text);
}

.bb-badge-stock {
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
  color: var(--fg-action);
}
.bb-badge-stock::before {
  background: var(--fg-action);
}

/* Edge data-freshness (issue #98): amber = stale, red = offline. */
.bb-badge-stale {
  background: var(--bb-warn-bg);
  color: var(--bb-warn-text);
}
.bb-badge-stale::before {
  background: var(--bb-warn-text);
}

.bb-badge-offline {
  background: color-mix(in srgb, var(--bb-danger-text) 10%, transparent);
  color: var(--bb-danger-text);
}
.bb-badge-offline::before {
  background: var(--bb-danger-text);
}

.bb-badge-decommissioned {
  background: color-mix(in srgb, var(--fg-accent) 5%, transparent);
  color: var(--bb-text-3);
}
.bb-badge-decommissioned::before {
  background: var(--bb-neutral-disabled);
}

/* ── Audit log event pills (settings.html prototype) ── */

.bb-audit-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.bb-audit-pill--login {
  background: var(--bb-chart-sky-bg);
  color: var(--bb-chart-sky-text);
}
.bb-audit-pill--logout {
  background: color-mix(in srgb, var(--fg-accent) 6%, transparent);
  color: var(--bb-text-2);
}
.bb-audit-pill--setting {
  background: color-mix(in srgb, var(--bb-warn-border) 35%, transparent);
  color: var(--bb-warn-text);
}
.bb-audit-pill--user-mgmt {
  background: color-mix(in srgb, var(--bb-success-text) 12%, transparent);
  color: var(--bb-success-text);
}
.bb-audit-pill--strategy {
  background: var(--bb-chart-indigo-bg);
  color: var(--bb-chart-indigo-strong);
}
.bb-audit-pill--asset {
  background: var(--bb-info-bg-2);
  color: var(--bb-info-text);
}
.bb-audit-pill--override {
  background: color-mix(in srgb, var(--bb-chart-orange-soft) 20%, transparent);
  color: var(--bb-chart-orange-text);
}
.bb-audit-pill--api {
  background: color-mix(in srgb, var(--bb-chart-pink) 20%, transparent);
  color: var(--bb-chart-pink);
}
.bb-audit-pill--default {
  background: var(--bb-surface-2);
  color: var(--bb-text-2);
}

.bb-text-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--bb-text-2);
}

.bb-btn-export-csv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Inline Form Area ── */

.bb-inline-form {
  border-bottom: 1px solid var(--bb-line);
  padding: 20px 24px;
  background: var(--bb-surface-2);
}

.bb-inline-form .bb-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-inline-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--bb-line);
  margin-top: 16px;
}

/* ── Settings organisation form (prototype form-grid) ── */

.bb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.bb-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bb-form-group-full {
  grid-column: 1 / -1;
}

.bb-form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-org-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bb-line);
  font-size: 12px;
  color: var(--bb-text-3);
}

@media (max-width: 900px) {
  .bb-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card Header (demo pattern) ── */

.bb-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--bb-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bb-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bb-text);
}

/* Compact Price Series strip (platform masterdata — electricity) */
.bb-price-series-panel .bb-section-eyebrow {
  margin-bottom: 8px;
}
.bb-price-series-table-wrap .bb-table th,
.bb-price-series-table-wrap .bb-table td {
  padding: 6px 10px;
  font-size: 12px;
}
.bb-price-series-table-wrap .bb-table thead th {
  font-size: 11px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.bb-price-series-actions-col {
  width: 1%;
  white-space: nowrap;
}

.bb-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  border: none;
  background: var(--fg-accent);
  color: var(--fg-inverse);
}

.bb-btn-add:hover {
  opacity: 0.85;
}

/* ── Clients / Organisations (availability-manager layout) ── */

.bb-page-am {
  overflow: hidden;
}

.bb-am-layout {
  display: flex;
  align-items: stretch;
  /* Hard-bounded to viewport so inner overflow:auto containers actually scroll.
     Was min-height which let the layout grow indefinitely with the form, hiding
     the Save button below the viewport with no scrollbar. */
  height: calc(100vh - 108px);
  min-height: 0;
  overflow: hidden;
}

.bb-client-list-panel {
  flex: 0 0 auto;
  width: min(400px, 38vw);
  min-width: 360px;
  max-width: min(560px, 50vw);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bb-line);
  background: var(--bb-surface-fill);
  backdrop-filter: var(--bb-surface-blur);
  -webkit-backdrop-filter: var(--bb-surface-blur);
  overflow: hidden;
  box-sizing: border-box;
}

.bb-client-list-header {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.bb-client-list-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 24px 28px 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
  min-width: min-content;
  box-sizing: border-box;
}

.bb-client-list-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--bb-text);
  letter-spacing: -0.03em;
  flex: 0 1 auto;
  min-width: 0;
}

.bb-client-list-header-row .bb-btn-am-primary {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Drag handle between organisation list and detail panel (platform accounts) */
.bb-client-list-resize-handle {
  flex: 0 0 8px;
  width: 8px;
  margin: 0 -4px;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  position: relative;
  z-index: 3;
  align-self: stretch;
}

.bb-client-list-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  border-radius: 1px;
  background: var(--bb-line);
  transition: background 0.12s;
}

.bb-client-list-resize-handle:hover::after,
.bb-client-list-resize-handle.is-dragging::after {
  background: var(--fg-accent);
  width: 3px;
  left: 2px;
}

#account-sidebar-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

#account-sidebar-list .bb-client-list-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bb-client-list-subtitle {
  padding: 0 28px 8px;
  font-size: 12px;
  color: var(--bb-text-3);
  font-weight: 500;
}

.bb-client-list-search {
  margin: 0 28px 12px;
  position: relative;
}

.bb-client-list-search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--bb-line);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--bb-text);
  background: var(--bb-bg);
}

.bb-client-list-search input:focus {
  outline: none;
  border-color: var(--fg-accent);
}

.bb-client-list-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bb-text-3);
  pointer-events: none;
}

.bb-client-list-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.bb-client-list-empty {
  padding: 24px 28px;
  font-size: 13px;
  color: var(--bb-text-3);
}

.bb-client-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--bb-line);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
  width: 100%;
  border-left: 3px solid transparent;
  box-sizing: border-box;
  background: var(--bb-surface);
  font: inherit;
}

.bb-client-row:hover {
  background: var(--bb-bg);
}

.bb-client-row.selected {
  background: var(--bg-3);
  border-left-color: var(--fg-accent);
  padding-left: 25px;
}

.bb-client-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fg-accent);
  color: var(--fg-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.bb-client-avatar--green {
  background: var(--bb-success-text);
}
.bb-client-avatar--orange {
  background: var(--bb-warn-text);
}
.bb-client-avatar--slate {
  background: var(--fg-2);
}
.bb-client-avatar--blue {
  background: var(--fg-accent);
}

.bb-client-info {
  flex: 1;
  min-width: 0;
}

.bb-client-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--bb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-client-meta {
  font-size: 11px;
  color: var(--bb-text-3);
  margin-top: 2px;
  font-weight: 500;
}

.bb-client-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.bb-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.bb-alert-badge-ok {
  background: color-mix(in srgb, var(--bb-success-text) 10%, transparent);
  color: var(--bb-success-text);
}

.bb-login-as-client {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-accent);
  background: color-mix(in srgb, var(--fg-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-accent) 18%, transparent);
  border-radius: 999px;
  padding: 4px 11px;
  pointer-events: none;
}

.bb-am-detail-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Single inner scroll container — see .bb-am-detail-root. Removing overflow here
     prevents the double-scroll trap that hid the Locations form Save button. */
  overflow: hidden;
  background: var(--bb-bg);
}

.bb-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--bb-text-3);
  text-align: center;
  padding: 40px;
}

.bb-detail-empty svg {
  margin-bottom: 16px;
  opacity: 0.4;
}

.bb-detail-empty-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--bb-text-2);
  margin-bottom: 6px;
}

.bb-detail-empty-sub {
  font-size: 13px;
  color: var(--bb-text-3);
  max-width: 360px;
}

.bb-am-detail-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.bb-detail-header {
  padding: 24px 32px 0;
  border-bottom: 1px solid var(--bb-line);
  background: var(--bb-surface);
  flex-shrink: 0;
}

.bb-detail-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.bb-detail-client-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--bb-text);
  letter-spacing: -0.03em;
}

.bb-detail-client-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--bb-text-3);
  font-weight: 500;
}

.bb-detail-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bb-btn-am-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--fg-accent);
  color: var(--fg-inverse);
  border: none;
  border-radius: 20px;
  padding: 9px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.bb-btn-am-primary:hover:not(:disabled) {
  opacity: 0.88;
}

.bb-btn-am-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bb-btn-am-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bb-bg);
  color: var(--bb-text);
  border: 1px solid var(--bb-line);
  border-radius: 20px;
  padding: 9px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.bb-btn-am-outline:hover:not(:disabled) {
  opacity: 0.88;
}

.bb-btn-am-outline:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bb-btn-am-outline-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bb-bg);
  color: var(--bb-text);
  border: 1px solid var(--bb-line);
  border-radius: 16px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bb-btn-am-outline-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bb-detail-tabs {
  display: flex;
  gap: 0;
  margin-top: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bb-detail-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-text-3);
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
}

.bb-detail-tab:hover {
  color: var(--bb-text-2);
}

.bb-detail-tab.active {
  color: var(--fg-accent);
  border-bottom-color: var(--fg-highlight);
}

.bb-detail-body {
  padding: 24px 32px 80px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.bb-detail-tab-panel[hidden] {
  display: none !important;
}

.bb-detail-tab-panel:not([hidden]) {
  display: block;
}

.bb-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.bb-am-card {
  background: var(--bb-surface-fill);
  backdrop-filter: var(--bb-surface-blur);
  -webkit-backdrop-filter: var(--bb-surface-blur);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  padding: 20px 22px;
  box-shadow: var(--bb-shadow-sm);
}

.bb-am-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-am-dl {
  margin: 0;
  display: grid;
  gap: 10px 16px;
}

.bb-am-dl dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-text-3);
}

.bb-am-dl dd {
  margin: 0;
  font-size: 14px;
  color: var(--bb-text-2);
  font-weight: 500;
}

.bb-am-dl div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  align-items: baseline;
}

.bb-am-kpi-ok {
  color: var(--bb-success-text);
  font-weight: 700;
}

.bb-am-kpi-warn {
  color: var(--bb-danger-text);
  font-weight: 700;
}

.bb-am-muted {
  margin: 0;
  font-size: 13px;
  color: var(--bb-text-3);
}

.bb-am-alerts {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  padding: 20px 22px;
}

.bb-am-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.bb-am-table-wrap {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  overflow: hidden;
}

.bb-am-create-header {
  padding: 24px 32px 0;
}

.bb-am-create-title {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--bb-text);
}

.bb-am-create-card {
  margin: 20px 32px 40px;
}

.bb-am-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bb-am-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.bb-am-form-section-title {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-text);
}

.bb-am-req {
  color: var(--bb-danger-text);
}

.bb-am-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--bb-text-3);
}

.bb-am-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 8px;
}

/* Platform accounts: nav + settings sidebar + org list + detail — bounded flex shell */
.bb-page-shell.bb-page-am {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.bb-page-shell.bb-page-am > .bb-hero-header {
  flex-shrink: 0;
}

.bb-page-shell.bb-page-am > .bb-settings-layout {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.bb-page-shell.bb-page-am .bb-settings-sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  align-self: stretch;
}

.bb-page-shell.bb-page-am .bb-settings-main.bb-settings-main--platform-tool {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: none;
}

.bb-page-shell.bb-page-am .bb-am-layout {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bb-page-shell.bb-page-am .bb-client-list-panel {
  width: 400px;
  min-width: 360px;
  max-width: min(640px, 55vw);
}

@media (max-width: 900px) {
  .bb-page-shell.bb-page-am {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .bb-page-shell.bb-page-am > .bb-settings-layout {
    flex: none;
    overflow: visible;
  }

  .bb-page-shell.bb-page-am .bb-settings-main.bb-settings-main--platform-tool {
    overflow: visible;
  }

  .bb-page-shell.bb-page-am .bb-am-layout {
    flex: none;
    height: auto;
    min-height: 0;
  }

  .bb-page-shell.bb-page-am .bb-client-list-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .bb-client-list-resize-handle {
    display: none;
  }

  .bb-am-layout {
    flex-direction: column;
    min-height: auto;
  }
  .bb-client-list-panel {
    width: 100%;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--bb-line);
  }
}

/* Operational dashboard (prototype-aligned: hero + stats strip + quick links) */
.bb-op-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bb-op-hero-card {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-surface);
  box-shadow: var(--bb-shadow-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.bb-op-hero-top {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--bb-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fg-accent) 6%, transparent) 0%, var(--bb-surface) 55%);
}

.bb-op-page-title {
  margin: 0.15rem 0 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-accent);
  line-height: 1.2;
}

.bb-op-hero-lead {
  margin-top: 0.65rem;
  max-width: 58rem;
  line-height: 1.55;
  font-size: 0.9rem;
}

.bb-op-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.bb-op-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: 1.35rem 1.5rem 1.25rem;
  min-height: 5.5rem;
  justify-content: center;
}

.bb-op-stat + .bb-op-stat {
  border-left: 1px solid var(--bb-line);
}

.bb-op-stat-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-accent);
  line-height: 1;
}

.bb-op-stat-value--accent {
  font-size: 1.85rem;
}

.bb-op-stat-label {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-op-stat-hint {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--bb-muted);
  font-weight: 500;
}

@media (max-width: 768px) {
  .bb-op-stats-bar {
    grid-template-columns: 1fr;
  }
  .bb-op-stat + .bb-op-stat {
    border-left: none;
    border-top: 1px solid var(--bb-line);
  }
  .bb-op-stat {
    align-items: flex-start;
    text-align: left;
  }
}

.bb-op-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bb-op-quick-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.15rem 1.25rem;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  box-shadow: var(--bb-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bb-op-quick-link:hover {
  border-color: color-mix(in srgb, var(--fg-accent) 28%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fg-accent) 8%, transparent);
}

.bb-op-quick-link-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
  color: var(--fg-accent);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.bb-op-quick-link-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bb-text);
}

.bb-op-quick-link-desc {
  font-size: 0.78rem;
  color: var(--bb-muted);
  line-height: 1.35;
}

.bb-op-component-wrap {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-surface);
  box-shadow: var(--bb-shadow-md);
  padding: 1.35rem 1.35rem 1.5rem;
}

.bb-op-component-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--bb-line);
}

.bb-op-section-title-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.bb-op-section-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)) 0%, color-mix(in srgb, var(--fg-action) 20%, var(--bg-1)) 100%);
  color: var(--fg-accent);
  font-size: 1.15rem;
}

.bb-op-mqtt-panel {
  border-radius: var(--bb-r);
  box-shadow: var(--bb-shadow-sm);
}

.bb-op-mqtt-panel-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-op-placeholder-card {
  border-left: 4px solid var(--fg-3);
  background: linear-gradient(180deg, var(--bb-surface-2) 0%, var(--bb-surface) 100%);
}

.bb-op-more-card .bb-op-more-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.bb-op-more-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-surface-2);
  color: var(--bb-muted);
  font-size: 1.1rem;
}

/* Legacy hero class (older templates) */
.bb-op-dashboard-hero {
  border-left: 4px solid var(--fg-action);
  background: linear-gradient(135deg, color-mix(in srgb, var(--fg-action) 6%, transparent) 0%, var(--bb-surface) 48%);
}

/* Pills: connection + feature flags */
.bb-op-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bb-line);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bb-op-pill--state {
  text-transform: none;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
}

.bb-op-pill--connected {
  background: var(--bb-chart-green-bg-2);
  color: var(--bb-chart-green-strong);
  border-color: var(--bb-chart-green-border);
}

.bb-op-pill--error {
  background: var(--bb-danger-bg);
  color: var(--bb-danger-text);
  border-color: var(--bb-danger-border);
}

.bb-op-pill--disconnected {
  background: var(--bb-surface-2);
  color: var(--fg-2);
  border-color: var(--border-2);
}

.bb-op-pill--connecting {
  background: var(--bb-warn-bg);
  color: var(--bb-warn-text);
  border-color: var(--bb-warn-border);
}

.bb-op-pill--disabled {
  background: var(--bb-surface-2);
  color: var(--fg-3);
  border-color: var(--border-1);
}

.bb-op-pill--feature-on {
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
  color: var(--fg-action);
  border-color: color-mix(in srgb, var(--fg-action) 40%, var(--bg-1));
}

.bb-op-pill--feature-off {
  background: var(--bb-surface-2);
  color: var(--bb-muted);
  border-color: var(--border-2);
}

.bb-op-pill--trace-on {
  background: var(--bb-warn-bg);
  color: var(--bb-warn-text);
  border-color: var(--bb-warn-border);
}

.bb-op-pill--anon {
  background: var(--bb-info-bg);
  color: var(--bb-info-text);
  border-color: var(--bb-info-bg-2);
  text-transform: none;
  font-weight: 600;
  font-size: 0.8125rem;
}

.bb-op-error-text {
  color: var(--bb-danger-text);
  font-weight: 600;
}

/* Event type chips */
.bb-op-event {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bb-op-event--ok {
  background: var(--bb-chart-green-bg-3);
  color: var(--bb-success-text);
}

.bb-op-event--danger {
  background: var(--bb-danger-bg);
  color: var(--bb-danger-text);
}

.bb-op-event--warn {
  background: var(--bb-warn-bg);
  color: var(--bb-warn-text);
}

.bb-op-event--info {
  background: color-mix(in srgb, var(--fg-action) 20%, var(--bg-1));
  color: var(--fg-action);
}

.bb-op-event--muted {
  background: var(--bb-surface-2);
  color: var(--bb-muted);
}

/* MQTT trace mode (operational dashboard) */
.bb-mqtt-trace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.bb-mqtt-trace-btn {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

.bb-mqtt-trace-feedback {
  margin-top: 8px;
  font-size: 0.875rem;
}

.bb-mqtt-trace-hint {
  font-size: 0.8rem;
  margin-top: 8px;
  margin-bottom: 0;
  color: var(--bb-text-2);
}

.bb-mqtt-trace-hint-inline {
  font-size: 0.8rem;
  font-weight: 400;
}

/* MQTT operational debug */
.bb-code-inline {
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bb-input-readonly-bg);
  color: var(--bb-text-2);
  font-family: ui-monospace, monospace;
}

.bb-mqtt-debug-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bb-mqtt-debug-span-2 {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .bb-mqtt-debug-grid {
    grid-template-columns: 1fr;
  }
  .bb-mqtt-debug-span-2 {
    grid-column: span 1;
  }
}

.bb-mqtt-debug-dl {
  display: grid;
  grid-template-columns: minmax(0, 140px) 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 0.875rem;
}

.bb-mqtt-debug-dl dt {
  margin: 0;
  color: var(--bb-text-3);
  font-weight: 600;
}

.bb-mqtt-debug-dl dd {
  margin: 0;
  color: var(--bb-text);
  word-break: break-word;
}

.bb-mqtt-intensity-track {
  height: 8px;
  border-radius: 4px;
  background: var(--bb-line);
  overflow: hidden;
  min-width: 80px;
}

.bb-mqtt-intensity-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--fg-action), var(--bb-chart-sky));
  min-width: 0;
  transition: width 0.2s ease;
}

.bb-mqtt-debug-table-wrap {
  max-height: 320px;
  overflow: auto;
}

.bb-mqtt-debug-nowrap {
  white-space: nowrap;
}

.bb-mqtt-debug-col-intensity {
  width: 35%;
  min-width: 120px;
}

.bb-mqtt-debug-col-count {
  width: 4.5rem;
  text-align: right;
}

.bb-mqtt-topic-full {
  display: block;
  font-size: 0.75rem;
  margin-top: 2px;
}

.bb-mqtt-debug-topic-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-mqtt-debug-payload {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}

.bb-mqtt-msg-table-hint {
  font-size: 0.8rem;
  color: var(--bb-text-2);
  margin: 0 0 10px;
}

.bb-mqtt-msg-row--clickable {
  cursor: pointer;
}

.bb-mqtt-msg-row--clickable:hover {
  background: var(--bb-input-readonly-bg);
}

.bb-mqtt-msg-row--clickable:focus-visible {
  outline: 2px solid var(--fg-action);
  outline-offset: -2px;
}

.bb-mqtt-message-detail-host {
  margin-top: 16px;
  min-height: 0;
}

.bb-mqtt-msg-detail {
  margin-top: 4px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--bb-border);
  background: var(--bb-surface-2);
}

.bb-mqtt-msg-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.bb-mqtt-msg-detail-close {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

.bb-mqtt-msg-detail-meta {
  margin-bottom: 0;
}

.bb-json-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
  background: var(--bb-input-readonly-bg);
  color: var(--bb-text);
  padding: 14px 16px;
  border-radius: 8px;
  max-height: min(55vh, 480px);
  overflow: auto;
  border: 1px solid var(--bb-border);
}

@media (max-width: 900px) {
  .bb-settings-layout {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 108px);
    overflow: visible;
  }
  .bb-settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--bb-line);
    padding: 12px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
  }
  .bb-sidebar-build {
    display: none;
  }
  .bb-sidebar-section-lbl,
  .bb-sidebar-group-lbl {
    display: none;
  }
  .bb-sidebar-item {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
  }
  .bb-sidebar-item.active {
    border-left: none;
    border-bottom-color: var(--fg-accent);
  }
  .bb-sidebar-item.bb-sidebar-subitem {
    padding-left: 14px;
  }
  .bb-settings-main {
    padding: 20px 16px 60px;
  }
}

/* ── Relational DB browser (dev-tool density) ─────────────────── */
.bb-rdb-browser .bb-rdb-layout {
  align-items: flex-start;
}

.bb-rdb-browser .bb-rdb-side-card {
  min-width: 220px;
  max-width: 280px;
  flex-shrink: 0;
  padding: 0.75rem 0.875rem;
}

.bb-rdb-browser .bb-rdb-side-card .bb-card-title {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bb-text-3);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.bb-rdb-browser .bb-rdb-table-card {
  padding: 0.875rem 1rem 1rem;
  margin-bottom: 1rem;
}

.bb-rdb-browser .bb-rdb-sql-card {
  padding: 0.875rem 1rem 1rem;
}

.bb-rdb-browser .bb-rdb-filter {
  width: 100%;
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--bb-line);
  border-radius: 0.375rem;
  font-family: var(--bb-font-mono);
}

.bb-rdb-browser .bb-rdb-table-list {
  max-height: min(65vh, 520px);
  overflow-y: auto;
}

.bb-rdb-browser .bb-db-table-item {
  padding: 4px 8px;
  margin-bottom: 1px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.1s;
}

.bb-rdb-browser .bb-db-table-item .bb-badge {
  font-size: 0.6rem;
  min-width: 22px;
  text-align: center;
}

.bb-rdb-browser .bb-db-table-item .bb-db-table-name {
  font-weight: 500;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
}

.bb-rdb-browser .bb-db-selected {
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)) !important;
  border-left: 3px solid var(--fg-action);
}

.bb-rdb-browser #sql-editor {
  font-family: var(--bb-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  tab-size: 2;
}

.bb-rdb-browser .bb-sql-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: 6px;
  box-shadow: var(--bb-shadow-md);
  z-index: 50;
  margin-bottom: 4px;
}

.bb-rdb-browser .bb-sql-item {
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--bb-font-mono);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bb-rdb-browser .bb-sql-item:hover,
.bb-rdb-browser .bb-sql-item.selected {
  background: var(--bb-surface-2);
}

.bb-rdb-browser .bb-sql-type {
  font-size: 0.65rem;
  color: var(--bb-text-3);
  text-transform: uppercase;
}

.bb-rdb-browser .bb-rdb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bb-line);
}

.bb-rdb-browser .bb-rdb-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.bb-rdb-browser .bb-rdb-toolbar-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bb-text-3);
  font-weight: 600;
  margin-right: 0.15rem;
}

.bb-rdb-browser .bb-rdb-toolbar .bb-btn-table.bb-rdb-toolbar-active {
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
  border-color: var(--fg-action);
  color: var(--fg-action);
}

.bb-rdb-browser .bb-rdb-table-scroll {
  max-height: min(70vh, 900px);
  overflow: auto;
  border: 1px solid var(--bb-line);
  border-radius: 0.5rem;
}

.bb-rdb-browser .bb-rdb-table-scroll .bb-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.bb-rdb-browser .bb-table-compact th,
.bb-rdb-browser .bb-table-compact td {
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  padding: 0.28rem 0.45rem;
  line-height: 1.35;
  vertical-align: top;
}

.bb-rdb-browser .bb-table-compact thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bb-surface-2);
  color: var(--bb-text-2);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bb-line);
  box-shadow: 0 1px 0 var(--bb-line);
}

.bb-rdb-browser .bb-table-compact tbody td {
  border-bottom: 1px solid var(--bb-line);
}

.bb-rdb-browser .bb-table-compact tbody tr:hover td {
  background: var(--bb-surface-2);
}

.bb-rdb-browser .bb-table-compact td.bb-rdb-rownum {
  color: var(--bb-text-3);
  max-width: 2.75rem;
  width: 2.75rem;
  text-align: right;
  user-select: none;
}

.bb-rdb-browser .bb-table-compact td.bb-rdb-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(24rem, 38vw);
  cursor: copy;
}

.bb-rdb-browser .bb-table-compact td.bb-rdb-cell:active {
  background: var(--bb-chart-sky-bg);
}

/* ── Shared utility classes (extracted from inline styles) ── */

.bb-text-xs   { font-size: 0.75rem; }
.bb-text-sm   { font-size: 0.8rem; }
.bb-text-muted    { color: var(--bb-text-3); }
.bb-text-muted-sm { font-size: 0.8rem; color: var(--bb-text-3); }
.bb-text-muted-xs { font-size: 0.7rem; color: var(--bb-text-3); }
.bb-text-nowrap   { white-space: nowrap; }
.bb-text-error    { color: var(--bb-danger-text); }

.bb-code-inline-xs { font-size: 0.7rem; }
.bb-code-inline-sm { font-size: 0.75rem; }
.bb-code-truncate {
  font-size: 0.7rem; max-width: 300px; overflow: hidden;
  text-overflow: ellipsis; display: inline-block; white-space: nowrap;
}
.bb-code-truncate-sm { max-width: 150px; }
.bb-code-block-pre {
  background: var(--bb-bg); padding: 0.75rem; border-radius: 0.375rem;
  overflow-x: auto; font-size: 0.75rem; margin-top: 0.5rem;
}

/* ── Form utilities ── */

.bb-form-title {
  font-size: 14px; font-weight: 700; color: var(--bb-text); margin-bottom: 16px;
}
.bb-form-grid-1col {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
.bb-form-grid-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
}
.bb-form-error-text {
  color: var(--bb-danger-text); font-size: 0.8rem; margin-top: 4px;
}
.bb-label-xs { font-size: 0.65rem; margin-bottom: 0.25rem; }
.bb-badge-xs { font-size: 0.65rem; }

/* ── Table utilities ── */

.bb-table-scrollable { max-height: 500px; overflow: auto; }
.bb-table-sm, .bb-table-sm td, .bb-table-sm th { font-size: 0.8rem; }
.bb-td-truncate {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-th-nowrap { white-space: nowrap; }
.bb-sortable-header {
  cursor: pointer; text-decoration: none; color: inherit;
  display: inline-flex; align-items: center; gap: 3px;
}
.bb-sort-icon          { font-size: 0.55rem; }
.bb-sort-icon-inactive { font-size: 0.55rem; opacity: 0.3; }

/* ── Card variants ── */

.bb-card-bordered-primary {
  border: 1px solid var(--fg-action); border-radius: 0.5rem; padding: 1rem;
}

/* ── Chart ── */

.bb-chart-wrap { height: 250px; position: relative; }

/* ── Pipeline diagram ── */

.bb-pipeline-step-sub-sm { font-size: 0.65rem; margin-top: 2px; }
.bb-pipeline-step-sub-disabled { font-size: 0.65rem; margin-top: 2px; color: var(--bb-muted); }

/* ── Summary/Details ── */

.bb-summary-toggle { cursor: pointer; color: var(--bb-text-3); font-size: 0.8rem; }

/* ── ETL tabs (moved from inline <style> in platform-etl.html) ── */

.bb-tab-bar {
  display: flex; gap: 0; border-bottom: 2px solid var(--bb-line);
}
.bb-tab {
  padding: 0.5rem 1rem; border: none; background: none; cursor: pointer;
  font-size: 0.875rem; font-weight: 500; color: var(--bb-text-3);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s; font-family: inherit;
}
.bb-tab:hover { color: var(--bb-text); }
.bb-tab.active { color: var(--fg-action); border-bottom-color: var(--fg-action); }
.bb-tab-panel { display: none; }
.bb-tab-panel.active { display: block; }

/* ── MCP "Connect your client" wizard: JS-free CSS radio tabs + scope toggle ── */

.bb-mcp-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.bb-mcp-tabs, .bb-mcp-scopes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
.bb-mcp-scope-row { margin-bottom: 0.25rem; }

/* Active-tab styling (radios precede the tab bar, so use general-sibling ~). */
#mcpw-client-code:checked    ~ .bb-mcp-tabs label[for="mcpw-client-code"],
#mcpw-client-desktop:checked ~ .bb-mcp-tabs label[for="mcpw-client-desktop"],
#mcpw-client-web:checked     ~ .bb-mcp-tabs label[for="mcpw-client-web"],
#mcpw-client-sdk:checked     ~ .bb-mcp-tabs label[for="mcpw-client-sdk"],
#mcpw-scope-user:checked     ~ .bb-mcp-scope-row label[for="mcpw-scope-user"],
#mcpw-scope-project:checked  ~ .bb-mcp-scope-row label[for="mcpw-scope-project"] {
  background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-inverse);
}

/* Client panel visibility */
.bb-mcp-panel { display: none; }
#mcpw-client-code:checked    ~ .bb-mcp-panels .bb-mcp-panel--code,
#mcpw-client-desktop:checked ~ .bb-mcp-panels .bb-mcp-panel--desktop,
#mcpw-client-web:checked     ~ .bb-mcp-panels .bb-mcp-panel--web,
#mcpw-client-sdk:checked     ~ .bb-mcp-panels .bb-mcp-panel--sdk { display: block; }

/* Scope row only matters for Claude Code — hide it for other clients */
.bb-mcp-scope-row { display: none; }
#mcpw-client-code:checked ~ .bb-mcp-scope-row { display: block; }

/* Scope-dependent blocks within the Code panel */
.bb-mcp-scope-user, .bb-mcp-scope-project { display: none; }
#mcpw-scope-user:checked    ~ .bb-mcp-panels .bb-mcp-scope-user,
#mcpw-scope-project:checked ~ .bb-mcp-panels .bb-mcp-scope-project { display: block; }

.bb-mcp-pre {
  font-size: 0.75rem; padding: 0.75rem; border-radius: 0.375rem;
  background: var(--bb-bg-2); border: 1px solid var(--bb-line);
  overflow-x: auto; line-height: 1.6; margin-bottom: 0.75rem; white-space: pre;
}
.bb-mcp-hint { font-size: 0.75rem; color: var(--bb-text-2); margin-bottom: 0.4rem; }
.bb-mcp-list { font-size: 0.75rem; color: var(--bb-text-2); margin: 0 0 0.75rem 1.1rem; line-height: 1.6; }
.bb-mcp-list li { list-style: disc; margin-bottom: 0.2rem; }
.bb-mcp-panel--web ol.bb-mcp-list li { list-style: decimal; }

/* ── ETL pipeline flow: light “energy overview” style (nodes + curved connectors) ── */

.bb-pipeline-flow--light {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem 0.2rem;
  padding: 1.25rem 1rem 1.35rem;
  border-radius: 14px;
  border: 1px solid var(--border-1);
  background-color: var(--bb-surface-2);
  background-image: radial-gradient(circle, var(--border-2) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg-inverse) 75%, transparent);
}

.bb-pipeline-step--light {
  display: flex;
  flex-direction: column;
  background: var(--bb-surface-fill);
  border: 1px solid var(--border-1);
  border-radius: 11px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--fg-1) 7%, transparent);
  min-width: 118px;
  max-width: 160px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.bb-pipeline-step--light.bb-pipeline-step--mqtt {
  border-left: 4px solid var(--bb-chart-orange);
}
.bb-pipeline-step--light.bb-pipeline-step--parser {
  border-left: 4px solid var(--bb-success-text);
}
.bb-pipeline-step--light.bb-pipeline-step--resolver {
  border-left: 4px solid var(--bb-chart-purple);
}
.bb-pipeline-step--light.bb-pipeline-step--tagger {
  border-left: 4px solid var(--bb-chart-teal);
}
.bb-pipeline-step--light.bb-pipeline-step--influx {
  border-left: 4px solid var(--fg-action);
}

.bb-pipeline-step-inner {
  padding: 0.7rem 0.85rem 0.75rem;
  text-align: left;
}

.bb-pipeline-flow--light .bb-pipeline-step-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-accent);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.bb-pipeline-flow--light .bb-pipeline-step-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bg-darker);
  line-height: 1.1;
}

.bb-pipeline-flow--light .bb-pipeline-step-sub {
  font-size: 0.68rem;
  color: var(--bb-muted);
  margin-top: 0.2rem;
  line-height: 1.3;
}

.bb-pipeline-step-external {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.75;
}

.bb-pipeline-step--light.has-errors {
  border-color: var(--bb-danger-border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bb-danger-text) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--bb-danger-text) 8%, transparent);
}

.bb-pipeline-step--light.has-errors .bb-pipeline-step-sub {
  color: var(--bb-danger-text);
}

a.bb-pipeline-step-link.bb-pipeline-step--light {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.bb-pipeline-step-link.bb-pipeline-step--light:hover {
  border-color: color-mix(in srgb, var(--fg-action) 30%, var(--bg-1));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fg-action) 12%, transparent);
}

.bb-pipeline-connector {
  position: relative;
  flex: 1 1 40px;
  min-width: 36px;
  max-width: 76px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-pipeline-connector__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--fg-3);
  pointer-events: none;
}

.bb-pipeline-connector__path {
  stroke: currentColor;
}

.bb-pipeline-connector__path--sink {
  color: var(--fg-action);
}

.bb-pipeline-connector__label {
  position: relative;
  z-index: 1;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--fg-2);
  background: var(--bb-surface-fill);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--fg-1) 6%, transparent);
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-pipeline-connector__label--sink {
  color: var(--fg-action);
  border-color: color-mix(in srgb, var(--fg-action) 30%, var(--bg-1));
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
}

/* Legacy class names (fragments / older markup) */
.bb-pipeline-flow:not(.bb-pipeline-flow--light) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.bb-pipeline-step:not(.bb-pipeline-step--light) {
  background: var(--bb-bg);
  border: 1px solid var(--bb-line);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  text-align: center;
  min-width: 120px;
}
.bb-pipeline-step:not(.bb-pipeline-step--light) .bb-pipeline-step-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bb-text-3);
  margin-bottom: 0.25rem;
}
.bb-pipeline-step:not(.bb-pipeline-step--light) .bb-pipeline-step-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bb-text);
}
.bb-pipeline-step:not(.bb-pipeline-step--light) .bb-pipeline-step-sub {
  font-size: 0.7rem;
  color: var(--bb-text-3);
}
.bb-pipeline-arrow {
  color: var(--bb-text-3);
  font-size: 1.25rem;
}
.bb-pipeline-step:not(.bb-pipeline-step--light).has-errors .bb-pipeline-step-sub {
  color: var(--bb-danger-text);
}

/* ── SQL autocomplete ── */

.bb-sql-autocomplete {
  position: absolute; bottom: 100%; left: 0; right: 0; max-height: 250px; overflow-y: auto;
  background: var(--bb-surface-fill); border: 1px solid var(--bb-line); border-radius: 6px;
  box-shadow: var(--bb-shadow-md); z-index: 50; margin-bottom: 4px;
}
.bb-sql-item {
  padding: 6px 12px; cursor: pointer; font-family: 'SF Mono',Menlo,Monaco,monospace;
  font-size: 0.8rem; display: flex; justify-content: space-between; align-items: center;
}
.bb-sql-item:hover, .bb-sql-item.selected { background: var(--bb-bg); }
.bb-sql-type { font-size: 0.65rem; color: var(--bb-text-3); text-transform: uppercase; }
.bb-sql-editor {
  font-family: 'SF Mono',Menlo,Monaco,Consolas,monospace; font-size: 0.85rem;
  line-height: 1.5; tab-size: 2; resize: vertical;
}

/* ── DB table selected highlight ── */

.bb-db-selected {
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)) !important;
  border-left: 3px solid var(--fg-action);
}

/* ── System tree view ── */

.bb-tree { padding: 0; }
.bb-tree details { margin-left: 1.25rem; }
.bb-tree summary {
  cursor: pointer; padding: 5px 0; font-size: 0.85rem; font-weight: 500;
  list-style: none; display: flex; align-items: center; gap: 2px;
}
.bb-tree summary::-webkit-details-marker { display: none; }
.bb-tree summary::before {
  content: '▸'; margin-right: 6px; font-size: 0.7rem; color: var(--bb-text-3);
  transition: transform 0.15s; display: inline-block; width: 10px;
}
.bb-tree details[open] > summary::before { transform: rotate(90deg); }
.bb-tree-leaf {
  margin-left: 1.25rem; padding: 3px 0; font-size: 0.8rem;
  display: flex; align-items: center; gap: 2px;
}
.bb-tree-icon { width: 20px; text-align: center; margin-right: 5px; font-size: 0.8rem; }
.bb-tree-badge { font-size: 0.6rem; margin-left: 6px; }
.bb-tree-muted { color: var(--bb-text-3); font-size: 0.75rem; font-weight: 400; }

/* Node type colors */
.bb-tree-icon--account  { color: var(--fg-accent); }
.bb-tree-icon--site     { color: var(--bb-danger-text); }
.bb-tree-icon--edge     { color: var(--bb-chart-purple); }
.bb-tree-icon--assets   { color: var(--bb-chart-teal); }
.bb-tree-icon--asset    { color: var(--bb-warn-text); }
.bb-tree-icon--channels { color: var(--fg-action); }
.bb-tree-icon--channel  { color: var(--bb-chart-indigo); }
.bb-tree-icon--field-ok { color: var(--bb-success-text); }
.bb-tree-icon--field    { color: var(--border-2); }
.bb-tree-icon--topics   { color: var(--bb-chart-orange); }
.bb-tree-icon--topic    { color: var(--bb-chart-orange-bright); }

/* ── CLICKABLE TABLE ROWS ── */
.bb-row-clickable { cursor: pointer; transition: background 0.15s; }
.bb-row-clickable:hover { background: color-mix(in srgb, var(--fg-action) 6%, var(--bg-1)); }

/* ── DEAD LETTER DETAIL ── */
.bb-dl-detail {
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: var(--bb-r); padding: 24px; box-shadow: var(--bb-shadow-sm);
}
.bb-dl-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--bb-line);
}
.bb-dl-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
.bb-dl-detail-field { margin-bottom: 14px; }
.bb-dl-detail-lbl {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--bb-text-3); margin-bottom: 4px;
}
.bb-dl-detail-val { font-size: 14px; color: var(--bb-text); }
.bb-dl-detail-code {
  display: block; font-size: 13px; font-family: 'SF Mono', monospace;
  background: var(--bb-bg); border: 1px solid var(--bb-line); border-radius: 8px;
  padding: 10px 14px; word-break: break-all; color: var(--bb-text);
}
.bb-dl-detail-pre {
  font-size: 13px; font-family: 'SF Mono', monospace;
  background: var(--bb-bg); border: 1px solid var(--bb-line); border-radius: 8px;
  padding: 14px; white-space: pre-wrap; word-break: break-all;
  color: var(--bb-text); margin: 0; max-height: 300px; overflow-y: auto;
}

/* ── FLOW MAP ── */
.bb-flow-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.bb-flow-stat {
  font-size: 12px; font-weight: 600; color: var(--bb-text-3);
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: 999px; padding: 4px 12px;
}
.bb-flow-stat-val { font-weight: 700; color: var(--bb-text); margin-right: 2px; }
.bb-flow-stat-warn { border-color: var(--bb-warn-border); background: var(--bb-warn-bg); color: var(--bb-warn-text); }
.bb-flow-stat-warn .bb-flow-stat-val { color: var(--bb-warn-text); }
.bb-flow-empty-state { padding: 40px 0; }

/* Status dots */
.bb-flow-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.bb-flow-dot-green { background: var(--bb-success-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb-success-text) 20%, transparent); }
.bb-flow-dot-orange { background: var(--bb-chart-orange); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb-chart-orange) 20%, transparent); }
.bb-flow-dot-gray { background: var(--bb-neutral-disabled); }

/* Device group card */
.bb-flow-device-group {
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: var(--bb-r); box-shadow: var(--bb-shadow-sm);
  margin-bottom: 24px; overflow: hidden;
}
.bb-flow-dg-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; padding: 20px 24px;
  border-bottom: 1px solid var(--bb-line); background: var(--bb-surface-2);
}
.bb-flow-dg-info { min-width: 0; }
.bb-flow-dg-title {
  display: flex; align-items: center;
  font-size: 15px; font-weight: 700; color: var(--bb-text); margin-bottom: 4px;
}
.bb-flow-dg-sub {
  font-size: 11px; color: var(--bb-text-3); display: flex; align-items: center; gap: 8px;
}
.bb-flow-dg-hw {
  font-family: 'SF Mono', monospace; font-size: 10px; background: var(--bb-bg);
  border: 1px solid var(--bb-line); border-radius: 4px; padding: 1px 6px;
}
.bb-flow-dg-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bb-flow-topic-pill {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
  color: var(--bb-chart-indigo); background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--fg-action) 30%, var(--bg-1));
  border-radius: 999px; padding: 3px 10px;
}
.bb-flow-dg-status {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--bb-text-3);
}

/* Pipeline rows */
.bb-flow-dg-body { padding: 16px 24px; }
.bb-flow-pipeline-row {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--bb-line);
}
.bb-flow-pipeline-row:last-child { border-bottom: none; }

/* Channel pill (left side) */
.bb-flow-channel-pill {
  flex: 0 0 160px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; background: var(--bb-bg); border: 1px solid var(--bb-line);
  border-radius: 8px;
}
.bb-flow-channel-pill-name {
  font-family: 'SF Mono', monospace; font-weight: 700; font-size: 12px;
  color: var(--bb-text);
}
.bb-flow-channel-pill-count {
  font-size: 9px; font-weight: 600; color: var(--bb-text-3);
}
.bb-flow-channel-pill-template {
  font-size: 10px; font-weight: 600; color: var(--bb-text-2); line-height: 1.2;
}

.bb-flow-channel-fields {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 8px 0;
  padding: 8px 10px;
  background: var(--bb-bg-subtle);
  border: 1px solid var(--bb-line);
  border-radius: 8px;
}
.bb-flow-channel-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.bb-flow-channel-field-row--open {
  color: var(--bb-warn-text);
}
.bb-flow-field-icon {
  font-size: 10px;
  color: var(--bb-success-text);
  width: 14px;
  text-align: center;
}
.bb-flow-field-icon--open {
  color: var(--bb-warn-text);
}

.bb-flow-edge-binding {
  display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.bb-flow-edge-binding-serial {
  font-size: 10px; font-weight: 600; font-family: ui-monospace, monospace; color: var(--bb-text-2);
}
.bb-flow-link-hint-edge strong {
  font-weight: 600; color: var(--bb-text-1);
}

/* Connector line (middle) */
.bb-flow-connector-line {
  flex: 0 0 60px; height: 0;
  border-top: 2px dashed var(--border-2); margin: 0 8px; align-self: center;
}
.bb-flow-connector-line.mapped {
  border-top-style: solid; border-color: var(--bb-success-text);
}

/* Inline asset card (right side, when mapped) */
.bb-flow-asset-inline {
  flex: 1; min-width: 0;
  background: var(--bb-bg); border: 1px solid var(--bb-line);
  border-radius: 10px; padding: 10px 14px;
}
.bb-flow-asset-inline-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.bb-asset-icon-sm {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.bb-asset-icon-sm.green  { background: var(--bb-success-bg); }
.bb-asset-icon-sm.orange { background: var(--bb-warn-bg); }
.bb-asset-icon-sm.blue   { background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)); }
.bb-flow-asset-inline-name {
  font-size: 13px; font-weight: 700; color: var(--bb-text);
}
.bb-flow-asset-inline-type {
  font-size: 10px; color: var(--bb-text-3);
}
.bb-flow-asset-inline-footer {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bb-line);
}

/* Inline readings */
.bb-flow-readings-inline {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 2px 16px; padding: 6px 8px; background: var(--bb-surface);
  border-radius: 6px; border: 1px solid var(--bb-line);
}
.bb-flow-reading {
  display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0;
}
.bb-flow-reading-field {
  font-size: 9px; font-family: 'SF Mono', monospace; color: var(--bb-text-3);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.bb-flow-reading-val {
  font-size: 13px; font-weight: 700; color: var(--bb-text); letter-spacing: -0.3px;
}

/* Inline link form (right side, when unmapped) */
.bb-flow-link-inline {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 8px 12px; background: var(--bb-warn-bg); border: 1px dashed var(--bb-warn-border);
  border-radius: 10px;
}
.bb-flow-link-inline-row {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.bb-flow-link-hint {
  margin: 0; font-size: 11px; color: var(--bb-text-3); line-height: 1.35;
}
.bb-flow-link-select {
  flex: 1; font-size: 11px; padding: 6px 8px; border: 1px solid var(--bb-line);
  border-radius: 6px; background: var(--bb-surface); color: var(--bb-text);
  font-family: inherit; cursor: pointer; min-width: 0;
}
.bb-flow-link-select:focus { outline: none; border-color: var(--bb-chart-indigo-focus); }
.bb-flow-link-btn {
  display: inline-flex; align-items: center;
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--fg-action) 30%, var(--bg-1)); border-radius: 6px;
  color: var(--bb-chart-indigo-text); cursor: pointer; padding: 6px 12px; font-size: 11px;
  font-weight: 600; transition: all 0.15s; flex-shrink: 0; font-family: inherit;
}
.bb-flow-link-btn:hover { background: color-mix(in srgb, var(--fg-action) 30%, var(--bg-1)); }
.bb-flow-unlink-btn {
  background: none; border: 1px solid var(--bb-line); border-radius: 6px;
  color: var(--bb-text-3); cursor: pointer; padding: 4px 10px; font-size: 11px;
  font-family: inherit; transition: all 0.15s; flex-shrink: 0;
}
.bb-flow-unlink-btn:hover { background: var(--bb-danger-bg); border-color: var(--bb-danger-border); color: var(--bb-danger-text); }

/* Classification progress */
.bb-flow-dg-footer {
  padding: 12px 24px; border-top: 1px solid var(--bb-line); background: var(--bb-surface-2);
}
.bb-flow-progress-wrap {
  display: flex; align-items: center; gap: 8px;
}
.bb-flow-progress-track {
  flex: 1; height: 4px; background: var(--bb-bg); border-radius: 999px; overflow: hidden;
}
.bb-flow-progress-fill {
  height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--bb-success-text) 60%, var(--bg-1)), var(--bb-success-text)); border-radius: 999px;
  transition: width 0.3s;
}
.bb-flow-progress-text {
  font-size: 9px; font-weight: 600; color: var(--bb-text-3); white-space: nowrap;
}

/* Unmapped section */
.bb-flow-unmapped-section {
  margin-top: 32px; padding: 20px; background: var(--bb-warn-bg);
  border: 1px solid var(--bb-warn-border); border-radius: var(--bb-r);
}
.bb-flow-unmapped-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 700;
  color: var(--bb-warn-text); margin-bottom: 16px;
  flex-wrap: wrap;
}
.bb-flow-unmapped-header .bb-window-selector {
  font-weight: 500;
}
.bb-flow-unmapped-header .bb-window-selector label {
  font-size: 11px;
  padding: 4px 10px;
}
.bb-flow-unmapped-dismiss {
  border: none; background: transparent; color: var(--bb-text-3);
  font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.bb-flow-unmapped-dismiss:hover { color: var(--bb-danger); }
.bb-flow-unmapped-ts {
  font-size: 9px; color: var(--bb-text-3); white-space: nowrap; margin-left: 6px;
}
.bb-flow-unmapped-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.bb-flow-unmapped-grid--assets {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.bb-flow-unmapped-asset-count {
  font-size: 11px;
  font-weight: 500;
}
.bb-flow-unmapped-actions {
  margin-top: 10px;
  margin-bottom: 4px;
}
.bb-flow-unmapped-create {
  width: auto;
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1.2;
}
.bb-flow-node-code--asset {
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text);
}
.bb-flow-unmapped-field-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--bb-text-3);
  white-space: nowrap;
}
.bb-flow-node-asset .bb-flow-unmapped-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: baseline;
  gap: 6px 8px;
}
.bb-flow-node-asset .bb-flow-unmapped-field-row .bb-flow-unmapped-dismiss {
  justify-self: end;
  font-size: 14px;
}
/* Unmapped node cards */
.bb-flow-node {
  position: relative; display: flex; align-items: stretch;
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: 12px; box-shadow: var(--bb-shadow-sm);
  overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s;
}
.bb-flow-node:hover { box-shadow: 0 4px 20px color-mix(in srgb, var(--fg-accent) 8%, transparent); border-color: color-mix(in srgb, var(--fg-action) 30%, var(--bg-1)); }
.bb-flow-node-accent { width: 4px; flex-shrink: 0; border-radius: 12px 0 0 12px; }
.bb-flow-node-body { flex: 1; padding: 12px 14px; min-width: 0; }
.bb-flow-node-title {
  display: flex; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--bb-text); margin-bottom: 4px;
}
.bb-flow-node-sub { font-size: 11px; color: var(--bb-text-3); margin-bottom: 6px; }
.bb-flow-node-code {
  display: block; font-size: 10px; font-family: 'SF Mono', SFMono-Regular, monospace;
  color: var(--bb-text-2); background: var(--bb-bg); border-radius: 4px;
  padding: 3px 6px; margin-bottom: 6px; word-break: break-all; border: 1px solid var(--bb-line);
}
.bb-flow-node-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--bb-text-3);
}
.bb-flow-node-unmapped { border-color: var(--bb-warn-border); }
.bb-flow-node-unmapped:hover { border-color: var(--bb-warn-text); }

.bb-flow-unmapped-fields {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bb-warn-border);
}
.bb-flow-unmapped-fields-title {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bb-text-3); margin-bottom: 6px;
}
.bb-flow-unmapped-field-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: 10px; padding: 4px 0; border-bottom: 1px solid var(--bb-line);
}
.bb-flow-unmapped-field-row:last-child { border-bottom: none; }
.bb-flow-unmapped-ch {
  font-family: 'SF Mono', SFMono-Regular, monospace; font-size: 9px; color: var(--bb-text-2);
  overflow: hidden; text-overflow: ellipsis;
}
.bb-flow-unmapped-sep { color: var(--bb-text-3); }
.bb-flow-unmapped-fld { font-weight: 600; color: var(--bb-text); overflow: hidden; text-overflow: ellipsis; }
.bb-flow-unmapped-val { font-variant-numeric: tabular-nums; color: var(--fg-action); font-weight: 600; }
.bb-flow-unmapped-hits { font-size: 9px; color: var(--bb-text-3); white-space: nowrap; }

/* Flow map responsive */
@media (max-width: 900px) {
  .bb-flow-pipeline-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .bb-flow-channel-pill { flex: none; }
  .bb-flow-connector-line { display: none; }
  .bb-flow-dg-header { padding: 16px; }
  .bb-flow-dg-body { padding: 12px 16px; }
}

/* ── DB entity diagram (flow-map–style, light nodes) ── */
.bb-erd-main-wide { max-width: min(1480px, 100%); width: 100%; }
.bb-erd-page-header { align-items: flex-start; }
.bb-erd-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bb-erd-fit-btn {
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid var(--bb-line);
  background: var(--bb-surface); color: var(--fg-action);
}
.bb-erd-fit-btn:hover { border-color: color-mix(in srgb, var(--fg-action) 40%, var(--bg-1)); background: var(--bb-surface-2); }
.bb-erd-hint {
  display: block; margin-top: 0.35rem; font-size: 0.72rem; color: var(--bb-text-3); font-weight: 500;
}
.bb-erd-hint-muted { font-weight: 400; color: var(--bb-muted); }
.bb-erd-canvas-section { margin-top: 0.5rem; margin-bottom: 1rem; }
.bb-erd-network {
  width: 100%; height: min(72vh, 720px); min-height: 420px;
  border: 1px solid var(--bb-line); border-radius: var(--bb-r);
  background: var(--bb-surface-2);
}
.bb-erd-legend {
  font-size: 0.72rem; color: var(--bb-text-3); margin: 0.5rem 0 0; max-width: 52rem; line-height: 1.45;
}
.bb-erd-details { margin-top: 1.25rem; border: 1px solid var(--bb-line); border-radius: var(--bb-r); background: var(--bb-surface); padding: 0.35rem 0.85rem; }
.bb-erd-details-summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--bb-text-2); padding: 0.35rem 0; }
.bb-erd-section-nested { margin-top: 0.75rem; }
.bb-erd-section-after-details { margin-top: 1rem; }
.bb-erd-lead { color: var(--bb-text-3); margin: 0; max-width: 36rem; }
.bb-erd-back-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; font-weight: 600; color: var(--fg-action);
  text-decoration: none; white-space: nowrap;
  padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid var(--bb-line);
  background: var(--bb-surface);
}
.bb-erd-back-link:hover { border-color: color-mix(in srgb, var(--fg-action) 40%, var(--bg-1)); background: var(--bb-surface-2); }
.bb-erd-browser-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--fg-action);
  text-decoration: none; white-space: nowrap;
  padding: 0.35rem 0.65rem; border-radius: 8px; border: 1px solid var(--bb-line);
  background: var(--bb-surface-2);
}
.bb-erd-browser-link:hover { border-color: color-mix(in srgb, var(--fg-action) 40%, var(--bg-1)); background: var(--bb-surface-2); }
.bb-erd-section { margin-top: 1.75rem; }
.bb-erd-section-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bb-text-3); margin: 0 0 0.65rem;
}
.bb-erd-lane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem;
}
.bb-erd-lane-standalone { margin-top: 0.35rem; }
.bb-erd-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.bb-erd-node {
  display: inline-flex; align-items: center;
  background: var(--bb-surface-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--bb-text-2);
  box-shadow: none;
  line-height: 1.2;
}
.bb-erd-node-accent { border-color: var(--border-2); background: var(--bg-3); color: var(--bb-text); }
.bb-erd-node-muted { border-color: var(--border-1); background: var(--bb-surface-2); color: var(--bb-text-3); font-weight: 600; }
.bb-erd-node-inline { padding: 0.15rem 0.4rem; font-size: 0.65rem; margin-right: 0.25rem; }
.bb-erd-connector {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.62rem; color: var(--bb-text-3);
  padding: 0 0.1rem;
}
.bb-erd-connector-soft { font-style: italic; opacity: 0.9; }
.bb-erd-fk { font-weight: 600; color: var(--bb-muted); }
.bb-erd-arrow { font-weight: 400; color: var(--fg-3); margin: 0 0.05rem; }
.bb-erd-note {
  font-size: 0.72rem; color: var(--bb-text-3); margin: 0.5rem 0 0; max-width: 42rem;
}
.bb-erd-note-spaced { margin-top: 0.35rem; margin-bottom: 0.65rem; }
.bb-erd-section-muted {
  margin-top: 2rem; padding: 1rem 1.1rem;
  background: var(--bb-bg); border: 1px solid var(--bb-line); border-radius: var(--bb-r);
}
.bb-erd-more-list {
  margin: 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--bb-text-2); line-height: 1.55;
}
.bb-erd-more-list li { margin-bottom: 0.35rem; }
.bb-erd-error-text { color: var(--bb-danger-text); }
.bb-erd-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.65rem;
}
.bb-erd-table-card {
  background: var(--bb-surface-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.35;
}
.bb-erd-table-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  flex-wrap: wrap; margin-bottom: 0.35rem;
}
.bb-erd-node-table { font-size: 0.65rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bb-erd-row-badge {
  font-size: 0.58rem; font-weight: 600; color: var(--bb-text-3);
  background: var(--bb-surface-fill); border: 1px solid var(--bb-line); border-radius: 6px; padding: 0.1rem 0.35rem;
  white-space: nowrap;
}
.bb-erd-table-card-block { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--border-1); }
.bb-erd-table-card-lbl {
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bb-text-3); margin-bottom: 0.2rem;
}
.bb-erd-fk-mini-list { margin: 0; padding-left: 1rem; color: var(--bb-text-2); }
.bb-erd-fk-mini-list li { margin-bottom: 0.15rem; }
.bb-erd-table-card-muted { font-size: 0.65rem; color: var(--bb-text-3); font-style: italic; margin-top: 0.25rem; }
.bb-erd-lane-fk { align-items: center; flex-wrap: wrap; gap: 0.3rem 0.45rem; }
.bb-erd-fk-code { font-size: 0.62rem !important; }
.bb-erd-constraint-name {
  font-size: 0.58rem; color: var(--bb-text-3); font-weight: 600;
  margin-left: 0.25rem; max-width: 100%; word-break: break-all;
}
@media (max-width: 900px) {
  .bb-erd-page-header { flex-direction: column; align-items: flex-start; }
  .bb-erd-back-link { margin-top: 0.35rem; }
}

/* ── ASSET CARDS ── */
.bb-section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--bb-text-3); margin-bottom: 14px;
}
.bb-asset-row-gap { margin-bottom: 28px; }

.bb-asset-card {
  background: var(--bb-surface); backdrop-filter: var(--bb-surface-blur); -webkit-backdrop-filter: var(--bb-surface-blur);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line); box-shadow: var(--bb-shadow-sm);
  overflow: hidden; margin-bottom: 24px;
}
.bb-asset-card.bb-asset-attention {
  border-color: var(--bb-danger-border);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--bb-danger-text) 10%, transparent);
}

/* Asset header */
.bb-asset-header {
  padding: 20px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bb-line);
}
.bb-asset-header-left { display: flex; align-items: center; gap: 16px; }
.bb-asset-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.bb-asset-icon.blue   { background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)); }
.bb-asset-icon.green  { background: var(--bb-success-bg); }
.bb-asset-icon.orange { background: var(--bb-warn-bg); }
.bb-asset-icon-img { width: 28px; height: 28px; display: block; }
.bb-asset-tile__icon .bb-asset-icon-img { width: 22px; height: 22px; }
.bb-asset-name { font-size: 16px; font-weight: 700; color: var(--bb-text); margin-bottom: 2px; }
.bb-asset-type { font-size: 11px; font-weight: 600; color: var(--bb-text-3); text-transform: uppercase; letter-spacing: 0.5px; }

/* Status badge */
.bb-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 14px;
}
.bb-status-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.bb-status-badge.active {
  background: var(--bb-success-bg); color: var(--bb-success-text);
}
.bb-status-badge.active::before {
  background: var(--bb-success-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb-success-text) 20%, transparent);
}
.bb-status-badge.inactive {
  background: var(--bb-surface-2); color: var(--bb-text-3);
}
.bb-status-badge.inactive::before {
  background: var(--bb-text-3);
}
.bb-status-badge.maintenance {
  background: var(--bb-warn-bg); color: var(--bb-warn-text);
}
.bb-status-badge.maintenance::before {
  background: var(--bb-warn-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb-warn-text) 20%, transparent);
}

/* Attention banner */
.bb-asset-attention-banner {
  background: var(--bb-danger-bg); border-bottom: 1px solid var(--bb-danger-border);
  padding: 10px 28px;
  display: flex; align-items: center; gap: 10px;
}
.bb-asset-attention-icon { font-size: 16px; }
.bb-asset-attention-text { font-size: 12px; font-weight: 600; color: var(--bb-danger-text); }
.bb-asset-attention-sub  { font-size: 12px; color: var(--bb-danger-text); }

/* Edge-reported asset state banner (UC9): flush to the card top, tone-coloured with a left accent */
.bb-asset-state {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 28px; font-size: 13px; line-height: 1.35;
  border-bottom: 1px solid transparent; box-shadow: inset 4px 0 0 currentColor;
}
.bb-asset-state-icon { flex: none; font-size: 15px; line-height: 1; }
.bb-asset-state-level {
  flex: none; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.7px; text-transform: uppercase; background: color-mix(in srgb, currentColor 14%, transparent);
}
.bb-asset-state-conditions { min-width: 0; font-weight: 500; }
.cl-assetcard .bb-asset-state { margin: -28px -28px 20px; }
.bb-asset-state--fault   { background: var(--bb-danger-bg); color: var(--bb-danger-text); border-bottom-color: var(--bb-danger-border); }
.bb-asset-state--warning { background: var(--bb-warn-bg);   color: var(--bb-warn-text);   border-bottom-color: var(--bb-warn-text); }
.bb-asset-state--info    { background: var(--bb-info-bg);   color: var(--bb-info-text);   border-bottom-color: var(--bb-info-text); }

/* Properties grid */
.bb-asset-body { padding: 24px 28px; }
.bb-asset-props-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px 32px;
}
.bb-asset-prop { display: flex; flex-direction: column; gap: 3px; }
.bb-asset-prop-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--bb-text-3);
}
.bb-asset-prop-val {
  font-size: 18px; font-weight: 700; color: var(--bb-text); letter-spacing: -0.3px;
}
.bb-asset-prop-sub { font-size: 11px; color: var(--bb-text-3); }

/* Highlight colors */
.bb-highlight-green  { color: var(--bb-success-text); }
.bb-highlight-blue   { color: var(--fg-action); }
.bb-highlight-orange { color: var(--bb-warn-text); }
.bb-highlight-red    { color: var(--bb-danger-text); }

/* SoC / buffer level bar */
.bb-asset-soc-wrap { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bb-line); }
.bb-asset-soc-wrap--follow { margin-top: 16px; padding-top: 16px; }
.bb-asset-soc-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bb-asset-soc-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--bb-text-3);
}
.bb-asset-soc-value { font-size: 14px; font-weight: 700; color: var(--bb-text); }
.bb-asset-soc-track { height: 10px; background: var(--bb-bg); border-radius: 999px; overflow: hidden; }
.bb-asset-soc-fill  { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.bb-asset-soc-fill.blue   { background: linear-gradient(90deg, color-mix(in srgb, var(--fg-action) 70%, var(--bg-1)), var(--fg-action)); }
.bb-asset-soc-fill.green  { background: linear-gradient(90deg, color-mix(in srgb, var(--bb-success-text) 60%, var(--bg-1)), var(--bb-success-text)); }
.bb-asset-soc-fill.orange { background: linear-gradient(90deg, var(--bb-chart-orange-soft), var(--bb-warn-text)); }
.bb-asset-soc-fill.teal   { background: linear-gradient(90deg, var(--bb-chart-teal-bright), var(--bb-chart-teal)); }

/* Telemetry summary row */
.bb-asset-telemetry-row {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bb-line);
  display: flex; gap: 0; flex-wrap: wrap;
}
.bb-asset-telemetry-item {
  flex: 1; min-width: 100px; display: flex; flex-direction: column; gap: 3px;
  padding: 0 20px 0 0;
}
.bb-asset-telemetry-item + .bb-asset-telemetry-item {
  padding-left: 20px; border-left: 1px solid var(--bb-line);
}
.bb-asset-telemetry-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--bb-text-3);
}
.bb-asset-telemetry-val { font-size: 15px; font-weight: 700; color: var(--bb-text); }

/* ── Micro-bar: thin coloured fill indicator beneath property/telemetry values ── */
.bb-microbar {
  height: 3px;
  border-radius: 2px;
  background: var(--bb-bg);
  margin-top: 5px;
  overflow: hidden;
}
.bb-microbar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--fg-action);
  transition: width 0.4s ease;
}
.bb-microbar--power  .bb-microbar-fill { background: var(--fg-action); }
.bb-microbar--temp   .bb-microbar-fill { background: linear-gradient(90deg, var(--fg-action) 0%, var(--bb-chart-orange) 100%); }
.bb-microbar--cop    .bb-microbar-fill { background: var(--bb-success-text); }
.bb-microbar--mv     .bb-microbar-fill,
.bb-microbar--volt   .bb-microbar-fill { background: var(--bb-chart-teal); }
.bb-microbar--amp    .bb-microbar-fill { background: var(--bb-chart-purple); }
.bb-microbar--freq   .bb-microbar-fill { background: var(--bb-chart-amber); }
.bb-microbar--percent .bb-microbar-fill { background: var(--fg-action); }

/* Asset cards responsive */
@media (max-width: 900px) {
  .bb-asset-header { padding: 16px 20px; }
  .bb-asset-body { padding: 20px; }
  .bb-asset-props-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .bb-asset-attention-banner { padding: 10px 20px; }
}

/* ── Asset tiles — fixed-size bento grid with inline expand (platform view) ── */
.bb-assets-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, 172px);
  grid-auto-rows: min-content;
  gap: 12px;
  align-items: start;
  justify-content: start;
}
.bb-assets-tiles .bb-platform-assets-account-header {
  grid-column: 1 / -1;
  margin-top: 12px;
}
.bb-assets-tiles .bb-platform-assets-account-header:first-child { margin-top: 0; }

/* Compact tile — button because clicking expands */
.bb-asset-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  height: 172px;
  padding: 14px 14px 12px;
  background: var(--bb-surface); backdrop-filter: var(--bb-surface-blur); -webkit-backdrop-filter: var(--bb-surface-blur);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  box-shadow: var(--bb-shadow-sm);
  text-align: left;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  overflow: hidden;
  min-width: 0;
}
.bb-asset-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fg-accent) 8%, transparent);
  border-color: var(--border-2);
}
.bb-asset-tile:focus-visible {
  outline: 2px solid var(--fg-action);
  outline-offset: 2px;
}
.bb-asset-tile--attention {
  border-color: var(--bb-danger-border);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bb-danger-text) 10%, transparent);
}

.bb-asset-tile__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.bb-asset-tile__icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.bb-asset-tile__icon.blue   { background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)); }
.bb-asset-tile__icon.green  { background: var(--bb-success-bg); }
.bb-asset-tile__icon.orange { background: var(--bb-warn-bg); }

.bb-asset-tile__status {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; margin-top: 6px;
  background: var(--bb-text-3);
}
.bb-asset-tile__status.active      { background: var(--bb-success-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-success-text) 18%, transparent); }
.bb-asset-tile__status.maintenance { background: var(--bb-warn-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-warn-text) 18%, transparent); }
.bb-asset-tile__status.inactive    { background: var(--bb-text-3); }

.bb-asset-tile__name {
  font-size: 13px; font-weight: 600; color: var(--bb-text);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bb-asset-tile__type {
  font-size: 9.5px; font-weight: 700; color: var(--bb-text-3);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.bb-asset-tile__headline {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.bb-asset-tile__value {
  font-size: 20px; font-weight: 700; color: var(--bb-text);
  letter-spacing: -0.3px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-asset-tile__label {
  font-size: 9.5px; font-weight: 700; color: var(--bb-text-3);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-asset-tile__headline .bb-microbar { margin-top: 4px; }

/* Expanded tile — reuses .bb-asset-card rich layout inside a 2-column slot */
.bb-asset-tile--expanded {
  grid-column: span 2;
  margin-bottom: 0 !important;
}
.bb-asset-tile__close {
  background: transparent; border: 1px solid var(--bb-line);
  color: var(--bb-text-3); cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.bb-asset-tile__close:hover {
  color: var(--bb-text); background: var(--bb-bg);
}

@media (max-width: 600px) {
  .bb-assets-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .bb-asset-tile--expanded { grid-column: span 2; }
}

/* ── Asset compact card view — grid of vertical tiles (customer view) ── */
.bb-assets-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-items: stretch;
}
/* Hide category eyebrow labels — type is now shown on each card */
.bb-assets-compact .bb-section-eyebrow { display: none; }
.bb-assets-compact .bb-asset-row-gap,
.bb-assets-compact .bb-asset-card { margin-bottom: 0; }

/* Hide attention banner — keep telemetry: definition-driven assets (e.g. CHP) only render
   POWER_FLOW / counter metrics in the telemetry row, so hiding it left those cards blank. */
.bb-assets-compact .bb-asset-attention-banner { display: none; }

.bb-assets-compact .bb-asset-telemetry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 10px;
}
.bb-assets-compact .bb-asset-telemetry-item {
  flex: unset;
  min-width: 0;
  padding: 0;
}
.bb-assets-compact .bb-asset-telemetry-item + .bb-asset-telemetry-item {
  padding-left: 0;
  border-left: none;
}
.bb-assets-compact .bb-asset-telemetry-lbl { font-size: 9px; }
.bb-assets-compact .bb-asset-telemetry-val { font-size: 13px; }


/* Vertical card header */
.bb-assets-compact .bb-asset-header {
  padding: 14px 16px 12px;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
}
.bb-assets-compact .bb-asset-header-left { gap: 10px; width: 100%; }
.bb-assets-compact .bb-asset-icon {
  width: 34px; height: 34px; border-radius: 9px; font-size: 17px; flex-shrink: 0;
}
.bb-assets-compact .bb-asset-name  { font-size: 13px; font-weight: 600; margin-bottom: 1px; }
.bb-assets-compact .bb-asset-type  { font-size: 10px; }
.bb-assets-compact .bb-status-badge { font-size: 11px; padding: 3px 10px; }

/* Compact body — show props + gauges, tightened up */
.bb-assets-compact .bb-asset-body { padding: 0 16px 14px; }

.bb-assets-compact .bb-asset-props-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.bb-assets-compact .bb-asset-prop-val { font-size: 15px; }

/* Gauge bar — keep it but tighten spacing */
.bb-assets-compact .bb-asset-soc-wrap {
  margin-top: 12px; padding-top: 12px;
}
.bb-assets-compact .bb-asset-soc-wrap--follow { margin-top: 10px; padding-top: 10px; }
.bb-assets-compact .bb-asset-soc-header { margin-bottom: 6px; }
.bb-assets-compact .bb-asset-soc-track { height: 8px; }
.bb-assets-compact .bb-asset-soc-value { font-size: 13px; }
.bb-assets-compact .bb-asset-soc-label { font-size: 9px; }

@media (max-width: 600px) {
  .bb-assets-compact { grid-template-columns: repeat(2, 1fr); }
}

/* ── Per-card expand / collapse ── */

/* Assets page: cards always render fully expanded, stacked one per row (prototype layout) */
#assets-host { display: block; }

.bb-asset-header--clickable { cursor: pointer; }
.bb-asset-header--clickable:hover { background: var(--bb-bg); border-radius: 8px; }
/* Controls + status must wrap inside the card: flex-shrink:0 made the Charge/Idle/…
   /History/ACTIVE cluster overflow the 2-col .cl-assetgrid and get clipped by
   .bb-asset-card { overflow:hidden }. */
.bb-asset-header-left { min-width: 0; flex: 1 1 160px; }
.bb-asset-header-left > div:last-child { min-width: 0; }
.bb-asset-header-right {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 220px; flex-wrap: wrap; min-width: 0;
  justify-content: flex-end; max-width: 100%;
}
.bb-asset-header-right .cl-health,
.bb-asset-header-right .bb-status-badge { margin-left: 0; flex-shrink: 0; }

.bb-asset-close-btn {
  display: none; /* hidden when collapsed */
  align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--bb-line); background: var(--bb-bg);
  font-size: 16px; line-height: 1; color: var(--bb-text-3);
  cursor: pointer; flex-shrink: 0;
}
.bb-asset-close-btn:hover { background: var(--bb-surface-2); color: var(--bb-text); }
.bb-asset-card.bb-expanded .bb-asset-close-btn { display: flex; }

/* Compact metric: shown when collapsed, hidden when expanded */
.bb-asset-compact-metric {
  padding: 8px 28px 16px;
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--bb-line);
}
.bb-asset-compact-metric:empty { border-top: none; }
.bb-asset-compact-metric .bb-asset-prop-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bb-text-3); }
.bb-asset-compact-metric .bb-asset-prop-val { font-size: 22px; font-weight: 700; color: var(--bb-text); }
.bb-asset-card.bb-expanded .bb-asset-compact-metric { display: none; }

/* Expandable body: hidden by default, revealed on expand */
.bb-asset-expandable {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.3s cubic-bezier(.4,0,.2,1), opacity 0.25s ease;
}
.bb-asset-card.bb-expanded .bb-asset-expandable {
  max-height: 800px; opacity: 1;
}

/* Compact grid mode overrides */
.bb-assets-compact .bb-asset-compact-metric { padding: 4px 16px 10px; }
.bb-assets-compact .bb-asset-compact-metric .bb-asset-prop-val { font-size: 17px; }
.bb-assets-compact .bb-asset-card:not(.bb-expanded) { display: flex; flex-direction: column; }
.bb-assets-compact .bb-asset-card:not(.bb-expanded) .bb-asset-compact-metric { margin-top: auto; }
.bb-assets-compact .bb-asset-card.bb-expanded { grid-column: 1 / -1; }

/* ── View toggle button group ── */
.bb-view-toggle {
  display: inline-flex; gap: 2px;
  background: var(--bb-bg); border: 1px solid var(--bb-line);
  border-radius: 8px; padding: 2px;
}
.bb-view-toggle-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--bb-text-3);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  line-height: 1;
}
.bb-view-toggle-btn.bb-active,
.bb-view-toggle-btn:hover {
  background: var(--bb-surface); color: var(--bb-text);
  box-shadow: var(--bb-shadow-sm);
}

/* ── Asset Definition Map (platform-asset-definitions) ── */

.bb-asdef-meta-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 10px;
  align-items: end;
}

.bb-asdef-meta-form .bb-label {
  margin-bottom: 2px;
  font-size: 0.75rem;
}

.bb-asdef-meta-form .bb-input,
.bb-asdef-meta-form .bb-select,
.bb-asdef-meta-form .bb-textarea {
  padding: 0.3rem 0.55rem;
  font-size: 0.813rem;
  line-height: 1.25;
}

.bb-asdef-meta-form .bb-textarea {
  min-height: 2rem;
}

.bb-asdef-meta-form .bb-btn,
.bb-asdef-meta-form .bb-btn-secondary {
  padding: 4px 14px;
  font-size: 0.813rem;
  min-height: 0;
  height: auto;
  line-height: 1.25;
}

.bb-asdef-meta-span-2 {
  grid-column: span 2;
}

.bb-asdef-meta-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding-bottom: 4px;
}

.bb-asdef-meta-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}

.bb-asdef-edit-card {
  padding: 8px 10px;
  margin-bottom: 10px;
}

.bb-asdef-edit-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-text);
  margin: 0 0 6px;
}

.bb-asdef-edit-card #asdef-edit-messages:empty {
  display: none;
}

.bb-asdef-edit-card #asdef-edit-messages:not(:empty) {
  margin-bottom: 6px;
}

@media (max-width: 900px) {
  .bb-asdef-meta-form {
    grid-template-columns: 1fr 1fr;
  }
}

.bb-asdef-list-card {
  padding: 0;
  overflow: hidden;
}

.bb-asdef-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bb-line);
}

.bb-asdef-list-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  min-width: 0;
}

.bb-asdef-console-open {
  width: auto;
  padding: 6px 14px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bb-asdef-list-toolbar .bb-input,
.bb-asdef-list-toolbar .bb-select {
  padding: 6px 12px;
  font-size: 12px;
}

.bb-asdef-list-toolbar .bb-input[type="search"] {
  min-width: 12rem;
  width: 16rem;
  flex: 0 1 16rem;
}

.bb-asdef-list-toolbar .bb-select {
  min-width: 10rem;
}

.bb-asdef-list-card .bb-table tr:last-child td {
  border-bottom: 0;
}

.bb-asdef-console-dialog {
  width: min(44rem, calc(100vw - 2rem));
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--bb-r);
  background: var(--bb-surface-fill);
  padding: 16px 20px 20px;
  box-shadow: var(--bb-shadow-lg);
}

.bb-astype-dialog {
  width: min(56rem, calc(100vw - 2rem));
}

.bb-asdef-console-dialog::backdrop {
  background: var(--bb-scrim);
}

.bb-asdef-console-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bb-asdef-console-close {
  border: 0;
  background: transparent;
  color: var(--bb-text-3);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
}

.bb-asdef-console-close:hover {
  color: var(--fg-accent);
}

.bb-asdef-console-dialog #asdef-console-messages:empty {
  display: none;
}

.bb-asdef-console-dialog #asdef-console-messages:not(:empty) {
  margin-bottom: 10px;
}

.bb-astype-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  align-items: start;
}

.bb-astype-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.bb-astype-form legend {
  padding: 0;
}

.bb-astype-form .bb-label {
  margin-bottom: 2px;
  font-size: 0.75rem;
}

.bb-astype-form .bb-input,
.bb-astype-form .bb-select {
  padding: 0.3rem 0.55rem;
  font-size: 0.813rem;
  line-height: 1.25;
}

.bb-astype-form .bb-btn,
.bb-astype-form .bb-btn-secondary {
  padding: 4px 14px;
  font-size: 0.813rem;
  min-height: 0;
  height: auto;
  line-height: 1.25;
}

.bb-astype-span-2 {
  grid-column: 1 / -1;
}

.bb-astype-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.bb-astype-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.813rem;
}

.bb-astype-icon-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bb-astype-tags-head {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--bb-line);
}

.bb-astype-tags-head .bb-asdef-edit-card-title {
  margin-bottom: 2px;
}

.bb-asdef-list-table {
  min-width: 1100px;
}

.bb-asdef-list-table th,
.bb-asdef-list-table td {
  white-space: nowrap;
}

.bb-asdef-list-name {
  font-weight: 700;
  color: var(--fg-1);
}

.bb-asdef-control-cell {
  text-align: center;
  width: 3rem;
}

.bb-asdef-control-icon {
  color: var(--fg-action);
  font-size: 0.95rem;
}

/* Asset type color chips */
.bb-asdef-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  background: var(--bb-surface-2);
  color: var(--bb-text-2);
}

.bb-asdef-type-BATTERY    { background: var(--bb-warn-bg); color: var(--bb-warn-text); }
.bb-asdef-type-HEATPUMP   { background: var(--bb-danger-bg); color: var(--bb-danger-text); }
.bb-asdef-type-BOILER     { background: var(--bb-danger-bg); color: var(--bb-danger-text); }
.bb-asdef-type-POWER_METER{ background: color-mix(in srgb, var(--fg-action) 20%, var(--bg-1)); color: var(--fg-action); }
.bb-asdef-type-INVERTER   { background: var(--bb-chart-green-bg-4); color: var(--bb-success-text); }
.bb-asdef-type-CHARGER    { background: var(--bb-chart-green-bg-3); color: var(--bb-success-text); }
.bb-asdef-type-OTHER      { background: var(--bb-info-bg-2); color: var(--bb-info-text); }

.bb-asdef-controllable {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
  color: var(--fg-action);
  border: 1px solid color-mix(in srgb, var(--fg-action) 30%, var(--bg-1));
}

/* Field list (middle panel) */
.bb-asdef-field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.bb-asdef-field-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bb-text-3);
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--bb-line);
}

.bb-asdef-field-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--bb-surface-2);
  vertical-align: middle;
}

.bb-asdef-field-table tr:last-child td { border-bottom: none; }

.bb-asdef-arrow {
  color: var(--fg-action);
  font-weight: 700;
  font-size: 14px;
}

.bb-asdef-tag-pill {
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bb-surface-2);
  color: var(--bb-text-2);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.bb-asdef-tag-pill.active {
  background: var(--fg-action);
  color: var(--fg-inverse);
}

.bb-asdef-writable-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bb-warn-bg);
  color: var(--bb-warn-text);
  margin-left: 4px;
}
.bb-asdef-write-only-badge {
  background: var(--bb-danger-bg);
  color: var(--bb-danger-text);
}

/* Tag category groups (right panel) */
.bb-asdef-cat-group {
  margin-bottom: 14px;
}

.bb-asdef-cat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bb-text-3);
  margin: 0 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bb-line);
}

.bb-asdef-cat-label-battery    { color: var(--bb-warn-text); }
.bb-asdef-cat-label-grid       { color: var(--fg-action); }
.bb-asdef-cat-label-solar      { color: var(--bb-success-text); }
.bb-asdef-cat-label-heat       { color: var(--bb-danger-text); }
.bb-asdef-cat-label-ev         { color: var(--bb-success-text); }
.bb-asdef-cat-label-chp        { color: var(--bb-info-text); }
.bb-asdef-cat-label-site       { color: var(--fg-2); }

.bb-asdef-tag-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bb-asdef-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.bb-asdef-tag-row.active {
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
}

.bb-asdef-tag-name {
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: var(--bb-text-2);
  flex: 1;
}

.bb-asdef-tag-row.active .bb-asdef-tag-name {
  color: var(--fg-action);
}

.bb-asdef-tag-unit {
  font-size: 10px;
  color: var(--bb-text-3);
  min-width: 28px;
  text-align: right;
}

.bb-asdef-widget-chip {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bb-surface-2);
  color: var(--bb-text-3);
  white-space: nowrap;
}

.bb-asdef-tag-row.active .bb-asdef-widget-chip {
  background: color-mix(in srgb, var(--fg-action) 20%, var(--bg-1));
  color: var(--fg-action);
}

.bb-asdef-empty {
  font-size: 12px;
  color: var(--bb-text-3);
  text-align: center;
  padding: 20px 0;
}

/* Add Field Mapping form inside field-list panel */
.bb-asdef-add-field-wrap {
  border-top: 1px solid var(--bb-line);
  padding-top: 10px;
  margin-top: 4px;
}

.bb-asdef-add-field-summary {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-action);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 4px 0;
}

.bb-asdef-add-field-summary::-webkit-details-marker { display: none; }

.bb-asdef-add-field-form {
  border-top: 1px solid var(--bb-line);
  padding-top: 12px;
}

.bb-asdef-add-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.bb-asdef-field-actions {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.bb-asdef-field-actions .bb-btn-table,
.bb-asdef-field-actions .bb-asdef-field-edit > summary {
  border: 0;
  background: transparent;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-text-3);
  border-radius: 0;
  box-shadow: none;
}

.bb-asdef-field-actions .bb-btn-table:hover,
.bb-asdef-field-actions .bb-asdef-field-edit > summary:hover {
  background: transparent;
  color: var(--fg-accent);
  text-decoration: underline;
}

.bb-asdef-field-actions .bb-btn-table-danger {
  color: color-mix(in srgb, var(--bb-danger-text) 70%, var(--bb-text-3));
}

.bb-asdef-field-actions .bb-btn-table-danger:hover {
  background: transparent;
  color: var(--bb-danger-text);
  text-decoration: underline;
}

.bb-asdef-field-edit {
  display: inline;
}

.bb-asdef-field-edit > summary {
  list-style: none;
  display: inline-block;
  cursor: pointer;
}

.bb-asdef-field-edit > summary::-webkit-details-marker {
  display: none;
}

.bb-asdef-field-edit[open] > summary {
  background: transparent;
  color: var(--fg-accent);
  text-decoration: underline;
}

.bb-asdef-field-edit-row {
  display: none;
}

.bb-asdef-field-row:has(.bb-asdef-field-edit[open]) + .bb-asdef-field-edit-row {
  display: table-row;
}

.bb-asdef-field-edit-row > td {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--bb-line);
  vertical-align: top;
}

.bb-asdef-field-edit-form {
  padding: 14px 16px 12px;
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
}

.bb-asdef-field-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px 16px;
}

.bb-asdef-field-edit-form .bb-label {
  text-align: left;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-asdef-add-field-form .bb-input-sm,
.bb-asdef-add-field-form .bb-select-sm,
.bb-asdef-field-edit-form .bb-input-sm,
.bb-asdef-field-edit-form .bb-select-sm {
  width: 100%;
  min-width: 0;
}

.bb-asdef-field-edit-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.bb-input-sm,
.bb-select-sm {
  font-size: 12px;
  padding: 5px 8px;
  height: auto;
}

/* Badge muted and success variants */
.bb-badge-muted {
  background: var(--bb-surface-2);
  color: var(--bb-text-3);
}

.bb-badge-success {
  background: var(--bb-chart-green-bg-4);
  color: var(--bb-success-text);
}

/* ═══════════════════════════════════════════════════════════
   DEMAND & PRICE PAGE COMPONENTS
   Ported from bb1os_demo/bb1os_data_prototype/demand-price.html
   ═══════════════════════════════════════════════════════════ */

/* ── Page tab bar ──────────────────────────────────────────── */
.bb-page-tabs-bar {
  background: var(--bb-surface);
  border-bottom: 1px solid var(--bb-line);
}

.bb-page-tabs-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
}

.bb-page-tab {
  padding: 14px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--bb-text-3);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.bb-page-tab:hover { color: var(--bb-text); }
.bb-page-tab.active { color: var(--fg-accent); border-bottom-color: var(--fg-accent); }

.bb-tab-panel { display: none; }
.bb-tab-panel.active { display: block; }

/* ── KPI metrics bar ───────────────────────────────────────── */
.bb-metrics-bar {
  display: grid;
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-md);
}

.bb-metric {
  padding: 22px 28px;
}

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

.bb-metric-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bb-text-3);
  margin-bottom: 6px;
}

.bb-metric-val {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-accent);
  line-height: 1;
}

.bb-metric-val.green  { color: var(--bb-success-text); }
.bb-metric-val.orange { color: var(--bb-warn-text); }
.bb-metric-val.red    { color: var(--bb-danger-text); }

.bb-metric-sub {
  font-size: 11px;
  color: var(--bb-text-3);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Chart card ────────────────────────────────────────────── */
.bb-chart-card {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-tile);
  overflow: hidden;
}

/* ── Time range selector ───────────────────────────────────── */
.bb-time-btn {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--bb-line);
  background: var(--bb-bg);
  color: var(--bb-text-2);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 12px;
  transition: all 0.15s;
}

.bb-time-btn.active {
  background: var(--bb-text);
  color: var(--fg-inverse);
  border-color: var(--bb-text);
}

.bb-time-btn:not(.active):hover {
  border-color: var(--bb-text-3);
}

/* ── Price table ───────────────────────────────────────────── */
.bb-price-table-card {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-sm);
  overflow: hidden;
}

.bb-price-table-head {
  display: grid;
  grid-template-columns: 80px 1fr 80px 80px 80px;
  padding: 12px 20px;
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-price-table-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 80px 80px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--bb-line);
  font-size: 13px;
  align-items: center;
  transition: background 0.1s;
}

.bb-price-table-row:last-child { border-bottom: none; }
.bb-price-table-row:hover { background: var(--bb-bg); }
.bb-price-table-row.current { background: color-mix(in srgb, var(--fg-accent) 8%, var(--bg-1)); }
.bb-price-table-row.past { color: var(--bb-text-3); }

.bb-price-bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bb-price-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--bb-line);
  border-radius: 3px;
  overflow: hidden;
}

.bb-price-bar-fill {
  height: 100%;
  border-radius: 3px;
}

/* ── Price signal pills ────────────────────────────────────── */
.bb-price-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.bb-price-pill.cheap { background: var(--bb-success-bg);  color: var(--bb-success-text); }
.bb-price-pill.mid   { background: color-mix(in srgb, var(--bb-warn-border) 25%, transparent);  color: var(--bb-warn-text); }
.bb-price-pill.peak  { background: color-mix(in srgb, var(--bb-danger-text) 12%, transparent);  color: var(--bb-danger-text); }
.bb-price-pill.now   { background: var(--fg-accent);        color: var(--fg-inverse);    }

/* ── Price scenario card ───────────────────────────────────── */
.bb-scenario-card {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-sm);
  padding: 24px;
}

.bb-scenario-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--bb-text);
  margin-bottom: 4px;
}

.bb-scenario-desc {
  font-size: 13px;
  color: var(--bb-text-3);
  line-height: 1.5;
  margin-bottom: 20px;
}

.bb-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bb-scenario-item {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--bb-line);
}

.bb-scenario-item.s-min { background: var(--bb-success-bg); border-color: color-mix(in srgb, var(--bb-success-text) 25%, transparent); }
.bb-scenario-item.s-avg { background: var(--bb-bg); border-color: var(--bb-line); }
.bb-scenario-item.s-max { background: var(--bb-warn-bg); border-color: color-mix(in srgb, var(--bb-warn-text) 25%, transparent); }

.bb-scenario-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bb-text-3);
  margin-bottom: 8px;
}

.bb-scenario-val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 4px;
}

.bb-scenario-val.green   { color: var(--bb-success-text); }
.bb-scenario-val.neutral { color: var(--bb-text); }
.bb-scenario-val.orange  { color: var(--bb-warn-text); }

.bb-scenario-note {
  font-size: 12px;
  color: var(--bb-text-3);
  line-height: 1.4;
}

/* ── Demand table ──────────────────────────────────────────── */
.bb-demand-table-card {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-sm);
  overflow: hidden;
}

.bb-demand-table-head {
  display: grid;
  grid-template-columns: 80px 1fr 100px 100px 100px;
  padding: 12px 20px;
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-demand-table-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px 100px 100px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--bb-line);
  font-size: 13px;
  align-items: center;
  transition: background 0.1s;
}

.bb-demand-table-row:last-child { border-bottom: none; }
.bb-demand-table-row:hover      { background: var(--bb-bg); }
.bb-demand-table-row.current    { background: color-mix(in srgb, var(--fg-accent) 8%, var(--bg-1)); }
.bb-demand-table-row.past       { color: var(--bb-text-3); }

/* ── Responsive adjustments ────────────────────────────────── */
@media (max-width: 900px) {
  .bb-page-tabs-inner { padding: 0 16px; }

  .bb-metric + .bb-metric { border-left: none; }
  .bb-metric:nth-child(odd)  { border-right: 1px solid var(--bb-line); }
  .bb-metric:nth-child(-n+4) { border-bottom: 1px solid var(--bb-line); }

  .bb-scenario-grid { grid-template-columns: 1fr; gap: 10px; }

  .bb-price-table-head,
  .bb-price-table-row { grid-template-columns: 70px 1fr 70px 60px; }
  .bb-price-table-head > *:nth-child(5),
  .bb-price-table-row  > *:nth-child(5) { display: none; }

  .bb-demand-table-head,
  .bb-demand-table-row { grid-template-columns: 70px 1fr 90px 90px; }
  .bb-demand-table-head > *:nth-child(5),
  .bb-demand-table-row  > *:nth-child(5) { display: none; }
}

/* ── DASHBOARD — Heat / Electricity asset tabs ── */
.bb-asset-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: 999px; box-shadow: var(--bb-shadow-sm); margin-bottom: 18px;
}
.bb-asset-tab {
  border: none; background: transparent; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--bb-text-3);
  padding: 8px 22px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.bb-asset-tab:hover:not(.active) { color: var(--bb-text); }
.bb-asset-tab.active { background: var(--fg-accent); color: var(--fg-inverse); }
.bb-asset-panel { display: none; }
.bb-asset-panel.active {
  display: block; background: var(--bb-surface-2); border: 1px solid var(--bb-line);
  border-radius: var(--bb-r); padding: 20px; box-shadow: var(--bb-shadow-sm);
}

/* ── DASHBOARD — Asset Grid ── */
.bb-asset-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.bb-asset-card {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-sm);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.bb-asset-card.winner {
  background: linear-gradient(160deg, var(--bb-success-bg) 0%, var(--bb-surface) 60%);
  border-color: color-mix(in srgb, var(--bb-success-text) 30%, transparent);
}

.bb-asset-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.bb-asset-card-title { display: flex; align-items: center; gap: 10px; }
.bb-asset-icon { font-size: 22px; }
.bb-asset-name { font-size: 17px; font-weight: 700; color: var(--bb-text); }
.bb-asset-sub  { font-size: 11px; color: var(--bb-text-3); font-weight: 500; margin-top: 1px; }

/* Status badges */
.bb-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.bb-badge-idle    { background: color-mix(in srgb, var(--fg-accent) 5%, transparent); color: var(--bb-text-2); }
.bb-badge-winner  { background: var(--bb-success-text); color: var(--fg-inverse); }
.bb-badge-standby { background: color-mix(in srgb, var(--bb-warn-text) 10%, transparent); color: var(--bb-warn-text); }
.bb-badge-battery { background: color-mix(in srgb, var(--fg-action) 10%, transparent); color: var(--fg-action); }

/* Cost bar inside asset card */
.bb-asset-cost-bar   { height: 3px; border-radius: 2px; margin-bottom: 14px; }
.bb-asset-cost-label { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--bb-text-3); margin-bottom: 4px; }
.bb-asset-cost-value { font-size: 30px; font-weight: 300; letter-spacing: -1px; line-height: 1; margin-bottom: 14px; }
.bb-asset-cost-value .bb-eur { font-size: 15px; font-weight: 400; vertical-align: super; margin-right: 1px; }
.bb-asset-cost-value.bb-green { color: var(--bb-success-text); }

/* Stats rows inside card */
.bb-asset-stats { display: flex; flex-direction: column; gap: 8px; }
.bb-asset-stat-row { display: flex; justify-content: space-between; align-items: center; }
.bb-asset-stat-lbl { font-size: 12px; color: var(--bb-text-3); font-weight: 500; }
.bb-asset-stat-val { font-size: 13px; font-weight: 600; color: var(--bb-text); }
.bb-asset-stat-val.bb-green  { color: var(--bb-success-text); }
.bb-asset-stat-val.bb-orange { color: var(--bb-warn-text); }
.bb-asset-stat-val.bb-blue   { color: var(--fg-action); }

/* Saving strip at bottom of card */
.bb-asset-saving { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bb-line); }
.bb-asset-saving-label { font-size: 11px; color: var(--bb-text-3); font-weight: 500; margin-bottom: 3px; }
.bb-asset-saving-value { font-size: 15px; font-weight: 700; }
.bb-asset-saving-value.bb-green  { color: var(--bb-success-text); }
.bb-asset-saving-value.bb-muted  { color: var(--bb-text-3); }
.bb-asset-saving-value.bb-orange { color: var(--bb-warn-text); }
.bb-asset-saving-note { font-size: 11px; color: var(--bb-text-3); margin-top: 2px; }

/* Progress bar inside card */
.bb-progress-bar  { height: 8px; background: var(--bb-line); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.bb-progress-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.bb-progress-fill.bb-green { background: var(--bb-success-text); }
.bb-progress-fill.bb-blue  { background: var(--fg-action); }
.bb-progress-fill.bb-grey  { background: var(--bb-neutral-disabled); }

/* Collapsible details inside asset card */
.bb-details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  margin: 10px 0 0;
  background: none;
  border: none;
  border-top: 1px solid var(--bb-line);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text-3);
  cursor: pointer;
  transition: color 0.15s;
  letter-spacing: 0.2px;
}
.bb-details-toggle:hover { color: var(--bb-text); }
.bb-toggle-chevron { font-size: 10px; transition: transform 0.25s cubic-bezier(.4,0,.2,1); }
.bb-details-toggle.open .bb-toggle-chevron { transform: rotate(180deg); }

.bb-asset-details {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s cubic-bezier(.4,0,.2,1), opacity 0.22s ease;
  opacity: 0;
}
.bb-asset-details.open { max-height: 320px; opacity: 1; }

/* ── DASHBOARD — Energy per m² bar ── */
.bb-energy-bar {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-sm);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.bb-energy-bar-title    { font-size: 14px; font-weight: 700; color: var(--bb-text); white-space: nowrap; flex-shrink: 0; }
.bb-energy-bar-divider  { width: 1px; align-self: stretch; background: var(--bb-line); flex-shrink: 0; }
.bb-energy-bar-metrics  { display: flex; align-items: center; gap: 40px; flex: 1; flex-wrap: wrap; }
.bb-energy-metric-val   { font-size: 20px; font-weight: 700; color: var(--bb-text); line-height: 1.2; }
.bb-energy-metric-val.bb-green { color: var(--bb-chart-green-text); }
.bb-energy-metric-val.bb-blue  { color: var(--fg-accent); }
.bb-energy-metric-lbl   { font-size: 11px; color: var(--bb-text-3); font-weight: 500; margin-top: 2px; }
.bb-energy-bar-ts       { font-size: 11px; color: var(--bb-neutral-disabled); margin-left: auto; white-space: nowrap; }

/* ── DASHBOARD — Plan summary card ── */
.bb-plan-card {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-sm);
  padding: 24px;
}
.bb-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.bb-plan-grid dt { font-size: 12px; color: var(--bb-text-3); font-weight: 500; margin-bottom: 4px; }
.bb-plan-grid dd { margin: 0; font-weight: 700; font-size: 15px; color: var(--bb-text); }

/* Responsive dashboard */
@media (max-width: 900px) {
  .bb-asset-grid { grid-template-columns: 1fr; }
  .bb-energy-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bb-energy-bar-divider { display: none; }
  .bb-energy-bar-ts { margin-left: 0; }
  .bb-plan-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Asset card control widgets ────────────────────────────────────────── */
/* In-place edit of a writable (R/W) field on the asset card — Availability Manager only. */
.bb-asset-prop > .bb-asdef-writable-badge { align-self: flex-start; margin-left: 0; }
/* Manual write state: Submitted (sent) / Accepted (edge applied it) / Refused (edge rejected it) /
   Confirmed (the asset reports the written value). */
.bb-write-state {
  align-self: flex-start; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--bb-r-pill);
}
.bb-write-state--submitted { background: var(--bb-warn-bg); color: var(--bb-warn-text); }
.bb-write-state--accepted { background: var(--bb-info-bg); color: var(--bb-info-text); }
.bb-write-state--refused { background: var(--bb-danger-bg); color: var(--bb-danger-text); }
.bb-write-state--confirmed { background: var(--bb-success-bg); color: var(--bb-success-text); }
.bb-asset-field-edit { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; flex-wrap: wrap; }
.bb-asset-field-edit .cl-segctl .cl-opt { padding: 7px 16px; }
.bb-asset-field-edit .cl-segctl .cl-opt:disabled { cursor: default; }
.bb-asset-field-edit .cl-field-set { padding: 8px 15px; font-size: 12px; }
/* Pill number field — same outline as .cl-segctl, unit inside the pill. */
.cl-numfield {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border: 1px solid var(--fg-accent); border-radius: var(--bb-r-pill); background: var(--bb-white);
  transition: box-shadow var(--bb-dur-fast) var(--bb-ease);
}
.cl-numfield:focus-within { box-shadow: 0 0 0 3px var(--bb-lightblue-25); }
.cl-numfield-input {
  width: 5rem; border: none; outline: none; background: transparent; padding: 0;
  font-family: var(--bb-font-sans); font-weight: 700; font-size: 15px; color: var(--fg-accent);
  -moz-appearance: textfield; appearance: textfield;
}
.cl-numfield-input::-webkit-outer-spin-button,
.cl-numfield-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cl-numfield-unit { font-size: 12px; font-weight: 600; color: var(--bb-text-3); }
.bb-input-sm  { width: 90px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--bb-line); border-radius: 6px; }
.bb-select-sm { padding: 4px 8px; font-size: 13px; border: 1px solid var(--bb-line); border-radius: 6px; background: var(--bb-surface); }
.bb-asset-control-feedback { font-size: 12px; min-height: 18px; margin-top: 4px; }

/* UC-4a #170/#171 — battery control-mode badge + manual override toggle.
   Matches gui-requirement-demo/assets.html: .battery-state-toggle / .control-mode-label /
   .confirm-overlay (segmented pill toggle, uppercase mode badge, custom confirm modal — not
   the native browser confirm()). */

.bb-mode-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--bb-text-3); padding: 5px 10px; border-radius: 999px; background: var(--bb-surface-2); border: 1px solid var(--bb-line); }
.bb-mode-badge--manual { color: var(--bb-warn-text); background: var(--bb-warn-bg-2); border-color: var(--bb-warn-border-2); }

/* UC-4a #172 — mode menu (navigation only). Matches gui-requirement-demo/assets.html
   .control-mode-wrap / .control-mode-menu / .control-mode-option / .control-mode-link. */
.bb-control-mode-wrap { position: relative; display: inline-block; }
.bb-control-mode-wrap > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bb-control-mode-wrap > summary::-webkit-details-marker { display: none; }
.bb-control-mode-btn { color: var(--fg-accent); background: var(--bg-3); border-color: var(--border-2); }
.bb-control-mode-btn:hover { background: var(--bg-3); border-color: var(--border-2); }
.bb-control-mode-btn.bb-mode-badge--manual { color: var(--bb-warn-text); background: var(--bb-warn-bg-2); border-color: var(--bb-warn-border-2); }
.bb-mode-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; }
.bb-control-mode-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 260px;
  background: var(--bb-surface-fill); backdrop-filter: var(--bb-surface-blur); -webkit-backdrop-filter: var(--bb-surface-blur);
  border: 1px solid var(--bb-line);
  border-radius: 12px; box-shadow: var(--bb-shadow-lg, 0 12px 32px color-mix(in srgb, var(--fg-1) 14%, transparent)); padding: 6px;
}
.bb-control-mode-wrap[open] > .bb-control-mode-menu { display: block; }
.bb-control-mode-menu-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--bb-text-3); padding: 8px 10px 4px;
}
.bb-control-mode-option {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; text-decoration: none;
  border: none; background: transparent; font-family: inherit; cursor: pointer;
  padding: 9px 10px; border-radius: 8px; color: var(--bb-text-1); box-sizing: border-box;
}
.bb-control-mode-option:hover { background: var(--bb-bg); }
.bb-control-mode-menu form { margin: 0; }
.bb-control-mode-option:disabled { opacity: 0.5; cursor: not-allowed; }
.bb-control-mode-option:disabled:hover { background: transparent; }
.bb-control-mode-option.active:disabled { opacity: 1; cursor: default; }
.bb-control-mode-option.active { background: var(--bg-3); }
.bb-control-mode-option-title { font-size: 12px; font-weight: 700; color: var(--bb-text-1); }
.bb-control-mode-option-meta { font-size: 10px; font-weight: 500; color: var(--bb-text-3); }
.bb-control-mode-option-assets { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.bb-control-mode-option-assets span {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg-accent) 10%, transparent); color: var(--fg-accent);
}
.bb-control-mode-divider { height: 1px; background: var(--bb-line); margin: 4px 6px; }
.bb-control-mode-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 8px; text-decoration: none;
  font-size: 12px; font-weight: 600; color: var(--fg-accent);
}
.bb-control-mode-link:hover { background: var(--bb-bg); }

.bb-confirm-overlay { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--fg-1) 40%, transparent); z-index: 2100; align-items: center; justify-content: center; padding: 20px; }
.bb-confirm-overlay.open { display: flex; }
.bb-confirm-box { background: var(--bb-surface-fill); backdrop-filter: var(--bb-surface-blur); -webkit-backdrop-filter: var(--bb-surface-blur); border-radius: 16px; box-shadow: 0 20px 60px color-mix(in srgb, var(--fg-1) 20%, transparent); width: 100%; max-width: 400px; padding: 28px; }
.bb-confirm-desc { font-size: 14px; color: var(--bb-text-2); line-height: 1.55; margin-bottom: 22px; }
.bb-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.bb-confirm-btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, color .15s; }
.bb-confirm-btn-no { background: var(--bb-surface); color: var(--bb-text-2); border-color: var(--bb-line); }
.bb-confirm-btn-no:hover { background: var(--bb-bg); }
.bb-confirm-btn-yes { background: var(--fg-accent); color: var(--fg-inverse); }
.bb-confirm-btn-yes:hover { opacity: 0.9; }

/* ── Platform asset overview — account grouping header ── */
.bb-platform-assets-account-header { display: flex; align-items: center; gap: 10px; margin: 24px 0 8px; padding: 10px 16px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 8px; }
.bb-platform-assets-account-name   { font-size: 13px; font-weight: 600; color: var(--bb-text-1); letter-spacing: 0.01em; }

/* When rendered inside the compact grid, account headers + eyebrows must span all columns */
.bb-assets-compact .bb-platform-assets-account-header { grid-column: 1 / -1; margin-top: 12px; }
.bb-assets-compact .bb-platform-assets-account-header:first-child { margin-top: 0; }

/* ───────── Live MQTT stream (operational dashboard) ───────── */
.bb-mqtt-live {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bb-mqtt-live-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .bb-mqtt-live-row { grid-template-columns: 1fr; }
}
.bb-mqtt-live-card {
  padding: 16px 20px;
  min-height: 120px;
}
.bb-mqtt-live-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bb-mqtt-live-card-head h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin: 0;
}
.bb-mqtt-live-card-head i { color: var(--bb-text-3); font-size: 12px; }
.bb-mqtt-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bb-chart-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-chart-green) 15%, transparent);
  animation: bbMqttPulse 1.6s ease-in-out infinite;
}
@keyframes bbMqttPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}
.bb-mqtt-live-empty {
  color: var(--bb-text-3);
  font-size: 12px;
  margin: 8px 0;
  text-align: center;
}

.bb-mqtt-stream-card {
  padding: 0;
  overflow: hidden;
}
.bb-mqtt-stream-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bb-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bb-mqtt-stream-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-mqtt-stream-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
.bb-mqtt-stream-filter i { color: var(--bb-text-3); }
.bb-mqtt-stream-filter input {
  border: none; outline: none; background: transparent;
  font-size: 12px; min-width: 180px; color: var(--bb-text-1);
}
.bb-mqtt-stream-pause {
  background: var(--bb-surface-fill);
  border: 1px solid var(--bb-line);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--bb-text-2);
}
.bb-mqtt-stream-pause[data-paused="true"] {
  background: var(--bb-warn-bg);
  border-color: var(--bb-warn-border);
  color: var(--bb-warn-text);
}

.bb-mqtt-stream-body {
  display: block;
  min-height: 420px;
}
.bb-mqtt-topic-rail {
  border-right: 1px solid var(--bb-line);
  background: var(--bb-surface-2);
  overflow: auto;
  max-height: 480px;
  padding: 8px 0;
  font-size: 11px;
}
.bb-mqtt-topic-rail table { font-size: 11px; width: 100%; }
.bb-mqtt-topic-rail th,
.bb-mqtt-topic-rail td {
  padding: 4px 10px;
  border: none;
}
.bb-mqtt-topic-rail thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-text-3);
  border-bottom: 1px solid var(--bb-line);
}
.bb-mqtt-topic-rail .bb-mqtt-debug-col-intensity { display: none; }

.bb-mqtt-stream-feed {
  background: var(--bg-darker);
  color: var(--border-1);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  max-height: 480px;
  overflow: auto;
  padding: 10px 0;
  overflow-anchor: auto;
}
.bb-mqtt-stream-feed .bb-mqtt-live-empty { color: var(--bb-muted); }
.bb-mqtt-feed-row {
  display: grid;
  grid-template-columns: 92px minmax(180px, 1fr) minmax(80px, 1fr);
  gap: 12px;
  padding: 3px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-inverse) 4%, transparent);
  cursor: pointer;
  transition: background 0.1s;
}
.bb-mqtt-feed-row:hover { background: color-mix(in srgb, var(--fg-action) 12%, transparent); }
.bb-mqtt-feed-row:focus {
  outline: none;
  background: color-mix(in srgb, var(--fg-action) 20%, transparent);
}
.bb-mqtt-feed-time  { color: var(--bb-muted); white-space: nowrap; }
.bb-mqtt-feed-topic {
  color: var(--bb-chart-sky-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-mqtt-feed-payload {
  color: var(--bb-warn-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-mqtt-stream-detail {
  border-top: 1px solid var(--bb-line);
  padding: 16px 20px;
  background: var(--bb-surface-2);
  min-height: 0;
}
.bb-mqtt-stream-detail:empty { display: none; }

/* ── Custom pages (/account/custom-pages) ─────────────────────────────────── */
.bb-cp-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.bb-cp-sidebar { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.bb-cp-pagelist { display: flex; flex-direction: column; gap: 2px; }
.bb-cp-pagelink { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px;
  color: var(--fg-accent); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.bb-cp-pagelink:hover { background: var(--bb-lightblue-25); }
.bb-cp-pagelink.is-on { background: var(--bg-dark); color: var(--bb-white); }
.bb-cp-count { font-variant-numeric: tabular-nums; opacity: .7; }
.bb-cp-newpage { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--bb-line); }
.bb-cp-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.bb-cp-message { padding: 10px 14px; border-radius: 6px; background: var(--bb-lightblue-25); color: var(--fg-accent); font-size: 13.5px; }
.bb-cp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.bb-cp-title { margin: 4px 0 0; font-size: 26px; font-weight: 700; color: var(--fg-accent); }
.bb-cp-head-actions, .bb-cp-rename { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bb-cp-rename .bb-input { width: 200px; }
.bb-cp-builderwrap { display: flex; flex-direction: column; }
.bb-cp-buildertoggle { align-self: flex-start; list-style: none; cursor: pointer; }
.bb-cp-buildertoggle::-webkit-details-marker { display: none; }
.bb-cp-builderwrap:not([open]) .bb-cp-when-open, .bb-cp-builderwrap[open] .bb-cp-when-closed { display: none; }
.bb-cp-builderwrap[open] > .bb-cp-builder { margin-top: 12px; }
.bb-cp-builder { display: flex; flex-direction: column; gap: 12px; }
.bb-cp-promptrow { display: flex; gap: 8px; }
.bb-cp-promptrow .bb-input { flex: 1; }
.bb-cp-readings { margin: 0; }
.bb-cp-catalogue summary { cursor: pointer; font-weight: 600; color: var(--fg-accent); font-size: 13.5px; }
.bb-cp-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.bb-cp-type { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--bb-line); border-radius: 8px; }
.bb-cp-type, .bb-cp-type > * { min-width: 0; max-width: 100%; }
.bb-cp-type .cl-chip, .bb-cp-suggestions .cl-chip { cursor: pointer; border: 0; text-align: left; text-transform: none;
  letter-spacing: 0; white-space: normal; line-height: 1.35; padding: 6px 10px; }
.bb-cp-type .cl-chip { margin-top: auto; }
.bb-cp-clarify p { margin: 0 0 10px; }
/* Assistant: help answers and the step-by-step builder */
.bb-cp-assist { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.bb-cp-assistbtn { padding: 8px 14px; }
.bb-cp-help { border-left: 3px solid var(--bb-accent); }
.bb-cp-help .cl-kicker { margin-bottom: 8px; }
.bb-cp-helpactions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.bb-cp-wizard { display: flex; flex-direction: column; gap: 14px; }
.bb-cp-steps-bar { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.bb-cp-steps-bar li { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--bb-surface-2); color: var(--bb-text-3); }
.bb-cp-steps-bar li.is-on { background: var(--bg-dark); color: var(--bb-white); }
.bb-cp-steps-bar li.is-done { background: var(--bb-lightblue-25); color: var(--fg-accent); }
.bb-cp-typebtn { background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.bb-cp-typebtn:hover, .bb-cp-typebtn:focus-visible { border-color: var(--fg-accent); background: var(--bb-lightblue-25); }
.bb-cp-wizardform { display: flex; flex-direction: column; gap: 14px; }
.bb-cp-wizardform > p { margin: 0; }
.bb-cp-wizardgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bb-cp-wizardgroup { border: 1px solid var(--bb-line); border-radius: 8px; padding: 10px 12px; margin: 0; }
.bb-cp-wizardgroup legend { font-weight: 700; color: var(--fg-accent); padding: 0 4px; font-size: 13.5px; }
.bb-cp-pickcount { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--fg-accent); }
.bb-cp-wizardopt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.bb-cp-wizardopt { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13.5px; cursor: pointer; }
.bb-cp-primary { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--fg-accent);
  background: var(--bb-lightblue-25); border-radius: 999px; padding: 1px 6px; }
.bb-cp-wizardrow { display: flex; gap: 16px; flex-wrap: wrap; }
.bb-cp-wizardfield { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.bb-cp-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-cp-previewwrap { display: flex; flex-direction: column; gap: 10px; }
/* Thinking bubble: hidden until HTMX marks #cp-zone with .htmx-request during a build. */
.bb-cp-zone { display: flex; flex-direction: column; gap: 12px; }
.bb-cp-thinking { display: none; align-items: center; gap: 16px; padding: 16px 20px; max-width: 520px;
  border-left: 3px solid var(--bb-accent); }
.bb-cp-zone.htmx-request .bb-cp-thinking { display: flex; }
.bb-cp-zone.htmx-request #cp-preview { opacity: .35; pointer-events: none; transition: opacity .2s; }
.bb-cp-dots { display: inline-flex; gap: 5px; }
.bb-cp-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bb-accent); animation: bb-cp-bounce 1.2s infinite ease-in-out; }
.bb-cp-dots i:nth-child(2) { animation-delay: .15s; }
.bb-cp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bb-cp-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-6px); opacity: 1; } }
.bb-cp-steps { position: relative; height: 1.4em; margin-top: 2px; }
.bb-cp-steps span { position: absolute; left: 0; white-space: nowrap; opacity: 0; animation: bb-cp-step 6s infinite; }
.bb-cp-steps span:nth-child(2) { animation-delay: 2s; }
.bb-cp-steps span:nth-child(3) { animation-delay: 4s; }
@keyframes bb-cp-step { 0% { opacity: 0; transform: translateY(4px); } 5%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bb-cp-dots i, .bb-cp-steps span { animation: none; }
  .bb-cp-steps span:first-child { opacity: 1; }
}
.bb-cp-previewactions { display: flex; gap: 8px; }
/* Tiles on the Gridstack grid fill their cell; the chart area takes whatever height is left. */
.bb-cp-gridstack { margin: 0 -8px; }
/* Gridstack clips its cells (overflow-x:hidden, selector .grid-stack>.grid-stack-item>.grid-stack-item-content),
   which crops tile shadows. Out-specify it and clip inside the card instead, so shadows can fall into the gutter. */
.bb-cp-gridstack.grid-stack > .grid-stack-item > .grid-stack-item-content { overflow: visible; }
.bb-cp-gridstack .bb-cp-card { overflow: hidden; }
.bb-cp-gridstack .bb-cp-card { height: 100%; display: flex; flex-direction: column; min-width: 0; }
.bb-cp-gridstack .bb-cp-card > .cl-pad { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px 18px; }
.bb-cp-gridstack .bb-cp-canvas { flex: 1; min-height: 80px; height: auto; }
.bb-cp-gridstack .bb-cp-heatmap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bb-cp-gridstack .bb-cp-heatmap svg { flex: 1; height: auto; min-height: 60px; }
.bb-cp-gridstack .bb-cp-gauge svg { max-height: calc(100% - 70px); }
/* Transparent strip over the card's title row; leaves the remove (×) button at the right free. */
.bb-cp-gridstack .grid-stack-item-content { position: relative; }
.bb-cp-grip { position: absolute; top: 0; left: 0; right: 44px; height: 56px; z-index: 2; cursor: move; border-radius: 12px 0 0 0; }
.bb-cp-grip::before { content: ""; position: absolute; top: 6px; left: 50%; width: 32px; height: 4px; margin-left: -16px;
  border-radius: 2px; background: var(--bb-line); opacity: 0; transition: opacity .15s; }
.bb-cp-gridstack .grid-stack-item:hover .bb-cp-grip::before { opacity: 1; }
.bb-cp-gridstack .grid-stack-placeholder > .placeholder-content { border: 2px dashed var(--bb-accent); border-radius: 12px; background: var(--bb-lightblue-25); }
.bb-cp-gridstack .ui-resizable-se { opacity: .5; }
.bb-cp-gridstack .grid-stack-item:hover .ui-resizable-se { opacity: 1; }
.bb-cp-layoutbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: -8px; }
.bb-cp-layoutstatus { color: var(--bb-success-text); }
.bb-cp-card { min-width: 0; }
/* Tile header: icon · titles · actions (✨ change, ✎ style, × remove) */
.bb-cp-card-head { display: flex; align-items: flex-start; gap: 10px; }
.bb-cp-titles { flex: 1; min-width: 0; }
.bb-cp-icon { flex: none; width: 26px; height: 26px; color: var(--cp-accent, var(--fg-accent)); }
.bb-cp-icon svg { width: 26px; height: 26px; }
.bb-cp-tileactions { display: flex; gap: 2px; position: relative; z-index: 3; }
.bb-cp-tilebtn { border: 0; background: none; width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  color: var(--bb-text-3); font-size: 15px; line-height: 1; }
.bb-cp-tilebtn:hover, .bb-cp-tilebtn:focus-visible { background: var(--bb-lightblue-25); color: var(--fg-accent); }
.bb-cp-tilebtn.bb-cp-remove:hover { color: var(--bb-danger-text); }
.bb-cp-gridstack .bb-cp-grip { right: 100px; }

/* Style tokens (TileStyle): the only styling a prompt or the style editor can set. */
.bb-cp-tile--border-none { box-shadow: var(--cp-shadow, none); border: 0 !important; }
.bb-cp-tile--border-thin { border: 1px solid var(--bb-line) !important; }
.bb-cp-tile--border-thick { border: 3px solid var(--bb-line) !important; }
.bb-cp-tile--border-accent { border: 3px solid var(--cp-accent, var(--bb-accent)) !important; }
.bb-cp-tile--shadow-none { box-shadow: none !important; }
.bb-cp-tile--shadow-soft { box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .06) !important; }
.bb-cp-tile--shadow-strong { box-shadow: 0 6px 16px rgba(15, 23, 42, .16), 0 18px 40px rgba(15, 23, 42, .14) !important; }
.bb-cp-tile--bg-light_blue { background: var(--bb-lightblue-25) !important; }
.bb-cp-tile--bg-light_green { background: color-mix(in srgb, var(--bb-success-text) 10%, var(--bb-surface)) !important; }
.bb-cp-tile--bg-light_yellow { background: color-mix(in srgb, var(--fg-highlight) 22%, var(--bb-surface)) !important; }
.bb-cp-tile--bg-light_red { background: color-mix(in srgb, var(--bb-danger-text) 9%, var(--bb-surface)) !important; }
.bb-cp-tile--bg-grey { background: var(--bb-surface-2) !important; }
.bb-cp-tile--bg-dark { background: var(--bg-dark) !important; color: var(--bb-white); }
.bb-cp-tile--bg-dark .cl-kicker, .bb-cp-tile--bg-dark .bb-hint, .bb-cp-tile--bg-dark .cl-v,
.bb-cp-tile--bg-dark .bb-cp-gauge-value, .bb-cp-tile--bg-dark .bb-cp-source { color: var(--bb-white) !important; }
.bb-cp-tile--bg-dark .bb-cp-tilebtn { color: rgba(255, 255, 255, .7); }

/* Named data colours (SeriesColor) as the tile accent: gauge arc, heatmap cells, icon, accent border. */
.bb-cp-c-blue { --cp-accent: var(--bb-accent); }
.bb-cp-c-green { --cp-accent: var(--bb-success-text); }
.bb-cp-c-yellow { --cp-accent: var(--fg-highlight); }
.bb-cp-c-orange { --cp-accent: var(--bb-lane-3); }
.bb-cp-c-red { --cp-accent: var(--bb-danger-text); }
.bb-cp-c-purple { --cp-accent: var(--bb-lane-2); }
.bb-cp-c-teal { --cp-accent: var(--bb-lane-4); }
.bb-cp-c-grey { --cp-accent: var(--bb-text-3); }

/* Style editor and "change this chart" prompt, both shown in the tile's place. */
.bb-cp-styleeditor, .bb-cp-editor { overflow: auto; }
.bb-cp-styleform { display: flex; flex-direction: column; gap: 10px; }
.bb-cp-stylegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; }
.bb-cp-stylegrid label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bb-cp-stylegrid .bb-select { padding: 6px 8px; font-size: 13px; }
.bb-cp-editor .bb-cp-suggestions .cl-chip { font-size: 11.5px; }
.bb-cp-thinking-inline { display: none; align-items: center; gap: 10px; }
.bb-cp-editor.htmx-request .bb-cp-thinking-inline { display: flex; }
.bb-cp-proposalbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bb-cp-proposalbody > .bb-cp-card { box-shadow: none; border: 0; flex: 1; }
.bb-cp-proposalactions { padding: 0 18px 14px; }
.bb-cp-previewwrap .bb-cp-card { max-width: 720px; }
.bb-cp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.bb-cp-remove { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--bb-text-3); cursor: pointer; }
.bb-cp-remove:hover { color: var(--bb-danger-text); }
.bb-cp-canvas { position: relative; height: 260px; }
.bb-cp-state { padding: 32px 0; text-align: center; }
.bb-cp-gauge { text-align: center; }
.bb-cp-gauge svg { width: 100%; max-width: 220px; }
.bb-cp-gauge-track { fill: none; stroke: var(--bb-line); stroke-width: 8; stroke-linecap: round; }
.bb-cp-gauge-fill { fill: none; stroke: var(--cp-accent, var(--bb-accent)); stroke-width: 8; stroke-linecap: round; }
.bb-cp-gauge-fill.is-negative { stroke: var(--bb-success-text); }
.bb-cp-gauge-value { font-size: 28px; font-weight: 700; color: var(--fg-accent); margin-top: -8px; }
.bb-cp-kpi-delta { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.bb-cp-heatmap svg { width: 100%; height: 220px; display: block; }
.bb-cp-heat-cell { fill: var(--cp-accent, var(--bb-accent)); }
.bb-cp-heat-axis { display: flex; justify-content: space-between; margin: 4px 0; }
/* Text card body */
.bb-cp-text { flex: 1; min-height: 0; overflow: auto; font-size: 14px; line-height: 1.55; color: var(--bb-text, inherit); }
.bb-cp-text p { margin: 0 0 8px; }
.bb-cp-text-h { margin: 4px 0 6px; font-size: 17px; font-weight: 700; color: var(--fg-accent); }
.bb-cp-text-li { position: relative; padding-left: 16px; margin-bottom: 4px !important; }
.bb-cp-text-li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cp-accent, var(--bb-accent)); }
.bb-cp-text .is-bold { font-weight: 700; }
.bb-cp-text .is-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cp-accent, var(--fg-accent));
  background: var(--bb-lightblue-25); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.bb-cp-tile--bg-dark .bb-cp-text, .bb-cp-tile--bg-dark .bb-cp-text-h { color: var(--bb-white); }
.bb-cp-tile--bg-dark .bb-cp-text .is-value { background: rgba(255, 255, 255, .14); color: var(--bb-white); }
.bb-cp-source { margin: 12px 0 0; font-size: 12px; font-style: italic; color: var(--bb-text-3); }
.bb-cp-nocharts { text-align: center; padding: 24px 0; }
@media (max-width: 900px) {
  .bb-cp-layout { grid-template-columns: 1fr; }
  .bb-cp-sidebar { position: static; }
  .bb-cp-promptrow { flex-direction: column; }
}

/* ── Voice assistant (/m/assistant) ── */

.bb-assistant-page .bb-content-wrap.bb-assistant-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
}

.bb-assistant-boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-bg);
  color: var(--bb-text-3);
  transition: opacity 0.3s;
}

.bb-assistant-boot.hidden {
  opacity: 0;
  pointer-events: none;
}

.bb-assistant-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bb-assistant-voice-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bb-assistant-voice-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--bb-track-caps);
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-assistant-voice-select {
  max-width: 12rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.bb-assistant-voice-mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--bb-line);
  border-radius: 50%;
  background: var(--bb-surface);
  color: var(--bb-text-2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.bb-assistant-voice-mute:hover {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}

.bb-assistant-voice-mute[aria-pressed="true"] {
  color: var(--bb-danger-text);
  border-color: var(--bb-danger-border);
  background: var(--bb-danger-bg);
}

.bb-assistant-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
}

@media (min-width: 900px) {
  .bb-assistant-grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
  }
}

.bb-assistant-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 16rem;
}

.bb-assistant-panel-scroll {
  flex: 1;
  min-height: 12rem;
  max-height: min(52vh, 28rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bb-assistant-empty {
  text-align: center;
  padding: 2rem 0.75rem;
  color: var(--bb-text-3);
  font-size: 0.875rem;
  line-height: 1.5;
}

.bb-assistant-empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg-accent);
}

.bb-assistant-empty p {
  margin: 0;
}

.bb-assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.bb-assistant-suggestion {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  background: var(--bb-surface-2);
  color: var(--bb-text-2);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bb-assistant-suggestion:hover,
.bb-assistant-suggestion:active {
  background: color-mix(in srgb, var(--fg-action) 12%, var(--bg-1));
  border-color: color-mix(in srgb, var(--fg-action) 35%, var(--bb-line));
  color: var(--fg-accent);
}

.bb-assistant-bubble {
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 92%;
  animation: bb-assistant-fade-in 0.25s ease-out;
}

.bb-assistant-bubble-user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--fg-action) 14%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--fg-action) 28%, var(--bb-line));
  color: var(--bb-text);
}

.bb-assistant-bubble-ai {
  align-self: flex-start;
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-line);
  color: var(--bb-text);
}

.bb-assistant-bubble-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  color: var(--bb-text-3);
}

.bb-assistant-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bb-assistant-badge-haiku {
  background: color-mix(in srgb, var(--fg-action) 12%, var(--bg-1));
  color: var(--fg-action);
  border: 1px solid color-mix(in srgb, var(--fg-action) 25%, var(--bb-line));
}

.bb-assistant-badge-sonnet {
  background: color-mix(in srgb, var(--bb-lane-2) 12%, var(--bg-1));
  color: var(--bb-lane-2);
  border: 1px solid color-mix(in srgb, var(--bb-lane-2) 25%, var(--bb-line));
}

.bb-assistant-trace {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0;
}

.bb-assistant-trace-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--bb-warn-bg);
  color: var(--bb-warn-text);
  border: 1px solid var(--bb-warn-border);
  animation: bb-assistant-fade-in 0.2s ease-out;
}

.bb-assistant-trace-chip.done {
  background: var(--bb-success-bg);
  color: var(--bb-success-text);
  border-color: var(--bb-success-border);
}

.bb-assistant-trace-spinner {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: bb-assistant-pulse 0.9s ease-in-out infinite;
}

.bb-assistant-trace-chip.done .bb-assistant-trace-spinner {
  animation: none;
}

.bb-assistant-topology-block {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bb-line);
}

.bb-assistant-topology-hint {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--bb-text-3);
  line-height: 1.4;
}

.bb-assistant-topology-empty {
  font-size: 0.8125rem;
  color: var(--bb-text-3);
  padding: 0.5rem 0;
}

.bb-assistant-topology {
  max-height: min(28vh, 14rem);
  overflow-y: auto;
  font-size: 0.75rem;
  line-height: 1.35;
}

.bb-assistant-topology-tree,
.bb-assistant-topology-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-assistant-topology-tree ul {
  padding-left: 0.875rem;
  border-left: 1px solid var(--bb-line);
  margin-left: 0.35rem;
}

.bb-assistant-topology-node {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.35rem;
  margin: 0.1rem 0;
  border-radius: 0.35rem;
  color: var(--bb-text-2);
}

.bb-assistant-topology-metrics {
  flex: 1 1 100%;
  margin-left: 3.1rem;
  font-size: 0.625rem;
  color: var(--bb-text-3);
  line-height: 1.3;
}

.bb-assistant-topology-node--focus {
  background: color-mix(in srgb, var(--fg-action) 14%, var(--bg-1));
  color: var(--fg-accent);
  font-weight: 600;
}

.bb-assistant-topology-kind {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-text-3);
  min-width: 2.75rem;
}

.bb-assistant-topology-node--focus .bb-assistant-topology-kind {
  color: var(--fg-action);
}

.bb-assistant-topology-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-assistant-viz-host {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.bb-assistant-viz-empty {
  padding: 1.5rem 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--bb-text-3);
  line-height: 1.5;
}

.bb-assistant-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.625rem;
}

.bb-assistant-kpi {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bb-line);
  border-radius: 0.75rem;
  background: var(--bb-surface-2);
  animation: bb-assistant-fade-in 0.3s ease-out;
}

.bb-assistant-kpi-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--bb-track-loose-1);
  text-transform: uppercase;
  color: var(--bb-text-3);
  margin-bottom: 0.25rem;
}

.bb-assistant-kpi-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--fg-accent);
  line-height: 1.1;
}

.bb-assistant-kpi-unit {
  margin-left: 0.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bb-text-3);
}

.bb-assistant-soc-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem;
  border: 1px solid var(--bb-line);
  border-radius: 0.75rem;
  background: var(--bb-surface-2);
  animation: bb-assistant-fade-in 0.3s ease-out;
}

.bb-assistant-soc-ring {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
}

.bb-assistant-soc-meta {
  flex: 1;
  min-width: 0;
}

.bb-assistant-soc-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-assistant-soc-sub {
  font-size: 0.6875rem;
  color: var(--bb-text-3);
}

.bb-assistant-spark-card {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bb-line);
  border-radius: 0.75rem;
  background: var(--bb-surface-2);
  animation: bb-assistant-fade-in 0.3s ease-out;
}

.bb-assistant-spark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.bb-assistant-spark-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bb-text-2);
}

.bb-assistant-spark-stat {
  font-size: 0.6875rem;
  color: var(--bb-text-3);
}

.bb-assistant-spark svg {
  display: block;
  width: 100%;
  height: 3.5rem;
}

.bb-assistant-fact-card {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bb-line);
  border-radius: 0.75rem;
  background: var(--bb-surface-2);
  font-size: 0.75rem;
  color: var(--bb-text-2);
  animation: bb-assistant-fade-in 0.3s ease-out;
}

.bb-assistant-fact-title {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--bb-track-loose-1);
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-assistant-fact-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.125rem 0;
}

.bb-assistant-fact-row span:first-child {
  color: var(--bb-text-3);
}

.bb-assistant-fact-row span:last-child {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--bb-text);
}

.bb-assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.bb-assistant-chip {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1));
  color: var(--fg-accent);
  border: 1px solid color-mix(in srgb, var(--fg-action) 22%, var(--bb-line));
}

/* Live asset board — CSS graphics driven by /account/stream/assistant-assets JSON SSE */
.bb-assistant-asset-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.bb-assistant-asset-board:not([hidden]) + .bb-assistant-viz-tool:not(:empty) + .bb-assistant-viz-empty,
.bb-assistant-asset-board:not([hidden]) + .bb-assistant-viz-empty {
  display: none;
}

.bb-assistant-viz-tool {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bb-assistant-asset-type-label {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--bb-track-caps);
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-assistant-asset-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bb-line);
  border-radius: 0.75rem;
  background: var(--bb-surface);
  min-height: 7.5rem;
  animation: bb-assistant-fade-in 0.3s ease-out;
}

.bb-assistant-asset-card--attention {
  border-color: var(--bb-warn-border);
  background: color-mix(in srgb, var(--bb-warn-bg) 40%, var(--bb-surface));
}

.bb-assistant-asset-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.375rem;
}

.bb-assistant-asset-icon {
  font-size: 1.125rem;
  line-height: 1;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.bb-assistant-asset-icon.blue   { background: color-mix(in srgb, var(--fg-action) 10%, var(--bg-1)); }
.bb-assistant-asset-icon.green  { background: var(--bb-success-bg); }
.bb-assistant-asset-icon.orange { background: var(--bb-warn-bg); }

.bb-assistant-asset-status {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.bb-assistant-asset-status.active      { background: var(--bb-success-text); }
.bb-assistant-asset-status.inactive    { background: var(--bb-text-3); }
.bb-assistant-asset-status.maintenance { background: var(--bb-warn-text); }

.bb-assistant-asset-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bb-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-assistant-asset-type {
  font-size: 0.625rem;
  color: var(--bb-text-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bb-assistant-asset-graphic {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
}

.bb-assistant-asset-soc-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.bb-assistant-asset-soc-wrap .bb-assistant-soc-ring {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}

.bb-assistant-asset-soc-wrap .bb-assistant-soc-meta {
  min-width: 0;
}

.bb-assistant-asset-soc-wrap .bb-assistant-soc-name {
  font-size: 0.6875rem;
}

.bb-assistant-asset-bar {
  width: 100%;
}

.bb-assistant-asset-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--bb-text-3);
  margin-bottom: 0.2rem;
}

.bb-assistant-asset-bar-label strong {
  color: var(--bb-text);
  font-weight: 600;
}

.bb-assistant-asset-bar-track {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--bb-surface-2);
  overflow: hidden;
}

.bb-assistant-asset-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.bb-assistant-asset-bar-fill.blue   { background: var(--fg-action); }
.bb-assistant-asset-bar-fill.green  { background: var(--bb-success-text); }
.bb-assistant-asset-bar-fill.teal   { background: var(--bb-chart-teal); }

.bb-assistant-asset-headline {
  text-align: center;
  width: 100%;
}

.bb-assistant-asset-headline-val {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg-accent);
  line-height: 1.2;
}

.bb-assistant-asset-headline-lbl {
  display: block;
  font-size: 0.625rem;
  color: var(--bb-text-3);
  margin-top: 0.125rem;
}

.bb-assistant-asset-headline .bb-microbar {
  margin-top: 0.35rem;
}

.bb-assistant-asset-foot {
  font-size: 0.625rem;
  color: var(--bb-text-3);
  text-align: right;
}

.bb-assistant-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 0 0.5rem;
  margin-top: auto;
  border-top: 1px solid var(--bb-line);
  background: linear-gradient(180deg, transparent 0%, var(--bb-bg) 24%);
}

.bb-assistant-status {
  min-height: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bb-text-3);
  text-align: center;
}

.bb-assistant-status.live { color: var(--bb-danger-text); }
.bb-assistant-status.thinking { color: var(--bb-warn-text); }
.bb-assistant-status.speaking { color: var(--bb-success-text); }

.bb-assistant-mic-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-assistant-mic {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  border: none;
  border-radius: 50%;
  background: var(--fg-accent);
  color: var(--fg-inverse);
  cursor: pointer;
  box-shadow: var(--bb-shadow-md);
  transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.bb-assistant-mic:active { transform: scale(0.94); }
.bb-assistant-mic:disabled { opacity: 0.45; cursor: not-allowed; }
.bb-assistant-mic svg { width: 2.375rem; height: 2.375rem; }

.bb-assistant-mic.listening {
  background: var(--bb-danger-text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bb-danger-text) 35%, transparent);
}

.bb-assistant-mic.thinking {
  background: var(--bb-warn-text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bb-warn-text) 35%, transparent);
}

.bb-assistant-mic.speaking {
  background: var(--bb-success-text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bb-success-text) 35%, transparent);
}

.bb-assistant-mic-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bb-assistant-mic-rings::before,
.bb-assistant-mic-rings::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bb-danger-text);
  opacity: 0;
}

.bb-assistant-mic-wrap.listening .bb-assistant-mic-rings::before {
  animation: bb-assistant-ring 1.8s ease-out infinite;
}

.bb-assistant-mic-wrap.listening .bb-assistant-mic-rings::after {
  animation: bb-assistant-ring 1.8s ease-out infinite;
  animation-delay: 0.9s;
}

.bb-assistant-mic-wrap.thinking .bb-assistant-mic-rings::before {
  border-color: var(--bb-warn-text);
  opacity: 0.45;
  animation: bb-assistant-glow 2.2s ease-in-out infinite;
}

.bb-assistant-interim {
  max-width: 90%;
  min-height: 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  background: var(--bb-surface);
  color: var(--bb-text-2);
  font-size: 0.8125rem;
  text-align: center;
  transition: padding 0.2s, border 0.2s;
}

.bb-assistant-interim:empty {
  padding: 0;
  border: 0;
}

.bb-assistant-text-fallback {
  display: none;
  width: 100%;
  max-width: 30rem;
}

.bb-assistant-page.no-speech .bb-assistant-text-fallback {
  display: block;
}

.bb-assistant-page.no-speech .bb-assistant-mic {
  display: none;
}

@keyframes bb-assistant-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bb-assistant-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.6); }
}

@keyframes bb-assistant-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes bb-assistant-glow {
  0%, 100% { transform: scale(1.05); opacity: 0.25; }
  50% { transform: scale(1.25); opacity: 0.55; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD — two-column layout + price chart + assistant panel
   ══════════════════════════════════════════════════════════ */

/* ── 1. Dashboard two-column layout ───────────────────────── */
.bb-dashboard-layout {
  display: flex;
  height: calc(100vh - 108px);
  min-height: 0;
  overflow: hidden;
}
.bb-dashboard-layout .bb-content-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg-1) 20%, transparent) transparent;
}
.bb-dashboard-layout .bb-content-wrap::-webkit-scrollbar { width: 6px; }
.bb-dashboard-layout .bb-content-wrap::-webkit-scrollbar-track { background: transparent; }
.bb-dashboard-layout .bb-content-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg-1) 18%, transparent); border-radius: 3px; }
.bb-dashboard-layout .bb-content-wrap::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fg-1) 28%, transparent); }

/* ── 2. Energy price chart card ────────────────────────────── */
.bb-price-card {
  background: var(--bb-surface);
  border-radius: 16px;
  border: 1px solid var(--bb-line);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--fg-1) 7%, transparent);
  padding: 20px 24px;
}
.bb-price-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
}
.bb-price-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bb-price-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bb-text);
}
.bb-price-sub {
  font-size: 12px;
  color: var(--bb-text-3);
  font-weight: 500;
}
.bb-price-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text-3);
  cursor: pointer;
  padding: 6px 4px;
  transition: color .15s;
}
.bb-price-toggle:hover { color: var(--bb-text); }
.bb-price-toggle-label { line-height: 1; }
.bb-price-chevron {
  font-size: 10px;
  line-height: 1;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.bb-price-card.collapsed .bb-price-chevron { transform: rotate(-90deg); }
.bb-price-body {
  overflow: hidden;
  max-height: 480px;
  opacity: 1;
  margin-top: 16px;
  transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .22s ease, margin-top .3s ease;
}
.bb-price-card.collapsed .bb-price-body { max-height: 0; opacity: 0; margin-top: 0; }
.bb-price-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.bb-price-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text-2);
}
.bb-price-legend-swatch {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.bb-price-legend-swatch.dashed {
  height: 0;
  border-top: 3px dashed var(--bb-chart-orange);
}
.bb-price-empty {
  font-size: 14px;
  color: var(--bb-text-3);
  margin: 8px 0 0;
}
.bb-price-note {
  font-size: 12px;
  color: var(--bb-text-3);
  margin: 0 0 8px;
}
.bb-price-chart-wrap { width: 100%; }

/* ── Energy Profiles per BB1Box tab (platform client detail) ── */
.bb-ep-box-card {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r, 16px);
  background: var(--bb-surface);
  margin-bottom: 14px;
  overflow: hidden;
}
.bb-ep-box-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
}
.bb-ep-box-header:hover { background: var(--bb-bg-2); }
.bb-ep-box-name { font-size: 14px; font-weight: 700; color: var(--bb-text); }
.bb-ep-box-meta { font-size: 12px; color: var(--bb-text-3); margin-top: 3px; }
.bb-ep-box-active { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--bb-text-2); margin-top: 8px; }
.bb-ep-box-active--none { color: var(--bb-text-3); font-weight: 500; }
.bb-ep-box-active-meta { color: var(--bb-text-3); font-weight: 500; }
.bb-ep-box-chevron { flex-shrink: 0; margin-top: 4px; font-size: 10px; color: var(--bb-text-3); transition: transform .15s; }
.bb-ep-box-card.open .bb-ep-box-chevron { transform: rotate(180deg); }
.bb-ep-box-body { display: none; padding: 0 18px 18px; border-top: 1px solid var(--bb-line); }
.bb-ep-box-card.open .bb-ep-box-body { display: block; padding-top: 16px; }
.bb-ep-notice {
  font-size: 12px;
  color: var(--bb-text-3);
  background: var(--bb-bg-2);
  border: 1px solid var(--bb-line);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 16px;
}
.bb-ep-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--bb-text-3); }
.bb-ep-chip {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--bb-bg-2); color: var(--bb-text-2); border: 1px solid var(--bb-line);
}
.bb-ep-master-detail { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; }
@media (max-width: 720px) { .bb-ep-master-detail { grid-template-columns: 1fr; } }
.bb-ep-profile-list { display: flex; flex-direction: column; gap: 8px; }
.bb-ep-profile-item {
  border: 1px solid var(--bb-line); border-radius: 10px; padding: 10px 12px; cursor: pointer;
}
.bb-ep-profile-item.active { border-color: var(--fg-action); background: color-mix(in srgb, var(--fg-action) 6%, var(--bg-1)); }
.bb-ep-profile-detail-panel { display: none; }
.bb-ep-profile-detail-panel.active { display: block; }
.bb-ep-mode-btn {
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-text-2); cursor: pointer;
}
.bb-ep-mode-btn.is-current { border-color: var(--bb-success-text); color: var(--bb-success-text-strong); background: var(--bb-success-bg); }
.bb-ep-mode-btn.selected { border-color: var(--fg-action); color: var(--fg-action); }
.bb-ep-activate-bar { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bb-line); }
.bb-ep-unsaved-indicator {
  font-size: 11px; font-weight: 700; color: var(--bb-warn-text);
  background: var(--bb-warn-bg); border-radius: 999px; padding: 3px 10px;
}

/* ── Customer Control Strategy ──────────────────────────────── */
.bb-cs-notice {
  background: var(--bb-warn-bg-2);
  border-color: var(--bb-warn-border);
  color: var(--bb-warn-text);
}
.bb-cs-metrics .bb-metric-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--bb-text-3);
}
.bb-cs-profile-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.bb-cs-profile-card.conflicted { opacity: 0.55; }
.bb-cs-profile-card.conflicted:hover { opacity: 0.85; }
.bb-cs-profile-card.selected { border-color: var(--fg-accent); background: var(--bg-3); }
.bb-cs-profile-card.focused:not(.selected) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg-3) 25%, transparent); }
.bb-cs-profile-body { flex: 1; min-width: 0; }
.bb-cs-check-form { margin: 0; flex-shrink: 0; }
.bb-cs-check-box {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--bb-line);
  background: var(--bb-surface); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.bb-cs-profile-card.selected .bb-cs-check-box,
.bb-cs-check-box.is-on {
  background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-inverse);
}
.bb-cs-check-box-tick {
  width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px); opacity: 0;
}
.bb-cs-profile-card.selected .bb-cs-check-box-tick,
.bb-cs-check-box.is-on .bb-cs-check-box-tick { opacity: 1; color: var(--fg-inverse); }
.bb-cs-active-pill {
  display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700;
  color: var(--bb-success-text-strong); background: color-mix(in srgb, var(--bb-success-text-strong) 10%, transparent); border-radius: 999px; padding: 3px 10px;
}
.bb-cs-block-hint {
  margin-top: 8px; font-size: 10px; font-weight: 700; color: var(--bb-warn-text);
}
.bb-cs-status-active {
  font-size: 12px; color: var(--bb-success-text-strong); font-weight: 600; margin-bottom: 12px;
}
.bb-cs-status-idle {
  font-size: 12px; color: var(--bb-text-3); font-weight: 500; margin-bottom: 12px;
}
.bb-cs-asset-list { display: flex; flex-direction: column; gap: 8px; }
.bb-cs-asset-pick {
  display: block; margin: 0; border: 1px solid var(--bb-line); border-radius: 10px;
  background: var(--bb-surface); padding: 0;
}
.bb-cs-asset-pick.selected { border-color: var(--fg-accent); background: var(--bg-3); }
.bb-cs-asset-pick-btn {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  border: none; background: transparent; font-family: inherit; cursor: pointer; padding: 12px 14px;
}
/* Read-only row (clients): no inner button, so the box itself carries the button's layout. */
div.bb-cs-asset-pick { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.bb-cs-asset-name { display: block; font-size: 13px; font-weight: 700; color: var(--bb-text); }
.bb-cs-asset-meta { display: block; font-size: 11px; color: var(--bb-text-3); margin-top: 2px; }
.bb-cs-asset-owned { display: block; font-size: 11px; font-weight: 600; color: var(--bb-warn-text); margin-top: 4px; }
.bb-cs-mode-list { display: flex; flex-direction: column; gap: 8px; }
.bb-cs-mode-card {
  border: 1px solid var(--bb-line); border-radius: 10px; padding: 0;
  background: var(--bb-surface); margin: 0;
}
.bb-cs-mode-card.selected, .bb-cs-mode-card.is-current {
  border-color: var(--fg-action);
  background: color-mix(in srgb, var(--fg-action) 6%, var(--bg-1));
}
.bb-cs-mode-btn {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  border: none; background: transparent; font-family: inherit; cursor: pointer; padding: 12px 14px;
}
.bb-cs-mode-btn:disabled { cursor: default; }
.bb-cs-radio {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--bb-line);
  margin-top: 2px; flex-shrink: 0; position: relative;
}
.bb-cs-radio.is-on { border-color: var(--fg-accent); }
.bb-cs-radio.is-on::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--fg-accent);
}
.bb-cs-mode-name { font-size: 13px; font-weight: 700; color: var(--bb-text); display: block; }
.bb-cs-mode-desc { margin-top: 4px; font-size: 12px; color: var(--bb-text-2); line-height: 1.4; display: block; }
.bb-cs-params { margin: 8px 0 0; }
.bb-cs-param-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--bb-line); font-size: 12px;
}
.bb-cs-param-row:last-child { border-bottom: 0; }
.bb-cs-param-row dt { margin: 0; color: var(--bb-text-3); font-weight: 600; }
.bb-cs-param-row dd { margin: 0; color: var(--bb-text); font-weight: 700; }
.bb-cs-activate-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bb-line);
}
.bb-cs-activate-hint { font-size: 12px; color: var(--bb-text-3); flex: 1; }
.bb-cs-activate-warning {
  flex: 1; font-size: 12px; font-weight: 600; color: var(--bb-warn-text);
  background: var(--bb-warn-bg-2); border: 1px solid var(--bb-warn-border); border-radius: 10px; padding: 10px 12px;
}
.bb-cs-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--fg-1); color: var(--fg-inverse); padding: 10px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 600; z-index: 9999; box-shadow: 0 4px 20px color-mix(in srgb, var(--fg-1) 30%, transparent);
}
.bb-cs-confirm-backdrop {
  display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--fg-1) 40%, transparent);
  z-index: 2100; align-items: center; justify-content: center; padding: 20px;
}
.bb-cs-confirm-backdrop.open { display: flex; }
.bb-cs-confirm-dialog {
  background: var(--bb-surface); border-radius: 16px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--fg-1) 20%, transparent); width: 100%; max-width: 400px; padding: 28px;
}
.bb-cs-confirm-warn {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--bb-warn-text); margin-bottom: 10px;
}
.bb-cs-confirm-body { font-size: 14px; color: var(--bb-text-2); line-height: 1.55; margin-bottom: 22px; }
.bb-cs-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.bb-cs-confirm-cancel, .bb-cs-confirm-ok {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent;
}
.bb-cs-confirm-cancel { background: var(--bb-surface); color: var(--bb-text-2); border-color: var(--bb-line); }
.bb-cs-confirm-ok { background: var(--fg-accent); color: var(--fg-inverse); border: none; }

/* ── 3. Dashboard assistant side panel ─────────────────────── */
.bb-dash-assistant {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 108px);
  min-height: 0;
  background: var(--bb-surface);
  border-left: 1px solid var(--bb-line);
  box-shadow: -4px 0 24px color-mix(in srgb, var(--fg-1) 4%, transparent);
  transition: width .25s ease, opacity .2s ease;
}
.bb-dash-assistant.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  border-left-width: 0;
}
.bb-dash-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bb-line);
  flex-shrink: 0;
}
.bb-dash-assistant-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--bb-text);
}
.bb-dash-assistant-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-dash-assistant-newchat {
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text-2);
  background: var(--bb-bg);
  border: 1px solid var(--bb-line);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
  white-space: nowrap;
}
.bb-dash-assistant-newchat:hover { opacity: 0.85; }
.bb-dash-assistant-collapse {
  background: none;
  border: none;
  color: var(--bb-text-3);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  transition: color .15s;
  flex-shrink: 0;
}
.bb-dash-assistant-collapse:hover { color: var(--bb-text); }
.bb-dash-assistant-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg-1) 20%, transparent) transparent;
}
.bb-dash-assistant-body::-webkit-scrollbar { width: 6px; }
.bb-dash-assistant-body::-webkit-scrollbar-track { background: transparent; }
.bb-dash-assistant-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg-1) 18%, transparent); border-radius: 3px; }
.bb-dash-assistant-body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fg-1) 28%, transparent); }
.bb-dash-assistant-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  min-height: 200px;
}
.bb-dash-assistant-empty.hidden { display: none; }
.bb-dash-assistant-icon {
  margin-bottom: 16px;
  color: var(--bb-text-3);
}
.bb-dash-assistant-welcome {
  font-size: 15px;
  font-weight: 600;
  color: var(--bb-text);
  margin-bottom: 20px;
  max-width: 260px;
  line-height: 1.4;
}
.bb-dash-assistant-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}
.bb-dash-assistant-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bb-text);
  background: var(--bb-bg);
  border: 1px solid var(--bb-line);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.bb-dash-assistant-chip:hover { background: var(--bb-surface-2); border-color: var(--border-2); }
.bb-dash-assistant-messages {
  display: none;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.bb-dash-assistant-messages.visible { display: flex; }
.bb-dash-assistant-msg {
  max-width: 90%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.bb-dash-assistant-msg.user {
  align-self: flex-end;
  background: var(--fg-accent);
  color: var(--fg-inverse);
}
.bb-dash-assistant-msg.assistant {
  align-self: flex-start;
  background: var(--bb-bg);
  border: 1px solid var(--bb-line);
  color: var(--bb-text);
}

/* Animated "thinking" indicator (three bouncing dots) shown on the pending bubble. */
.bb-dash-assistant-msg.pending { padding: 14px 16px; }
.bb-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 8px;
}
.bb-typing-dots > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bb-text-3);
  opacity: .4;
  animation: bb-typing-bounce 1.2s infinite ease-in-out both;
}
.bb-typing-dots > span:nth-child(1) { animation-delay: -0.24s; }
.bb-typing-dots > span:nth-child(2) { animation-delay: -0.12s; }
.bb-typing-dots > span:nth-child(3) { animation-delay: 0s; }
@keyframes bb-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-typing-dots > span { animation: bb-typing-fade 1.4s infinite ease-in-out both; }
  @keyframes bb-typing-fade { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
}

/* Light Markdown rendering inside assistant bubbles (bold, bullets, paragraphs). */
.bb-dash-assistant-msg.assistant p { margin: 0 0 8px; }
.bb-dash-assistant-msg.assistant p:last-child { margin-bottom: 0; }
.bb-dash-assistant-msg.assistant strong { font-weight: 650; }
.bb-dash-assistant-msg.assistant ul {
  margin: 4px 0 8px;
  padding-left: 20px;
}
.bb-dash-assistant-msg.assistant ul:last-child { margin-bottom: 0; }
.bb-dash-assistant-msg.assistant li { margin: 2px 0; }
.bb-dash-assistant-msg.assistant code {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 12.5px;
}
.bb-dash-assistant-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--bb-line);
  flex-shrink: 0;
}
.bb-dash-assistant-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bb-dash-assistant-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--bb-line);
  border-radius: 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--bb-text);
  background: var(--bb-surface);
  transition: border-color .15s;
}
.bb-dash-assistant-input::placeholder { color: var(--bb-text-3); }
.bb-dash-assistant-input:focus { outline: none; border-color: var(--fg-accent); }
.bb-dash-assistant-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bb-success-text);
  color: var(--fg-inverse);
  border: none;
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  flex-shrink: 0;
}
.bb-dash-assistant-send:hover { opacity: 0.9; }
.bb-dash-assistant-send svg { width: 16px; height: 16px; }
.bb-dash-assistant-reopen {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 14px 8px;
  cursor: pointer;
  box-shadow: -2px 0 12px color-mix(in srgb, var(--fg-1) 8%, transparent);
  z-index: 400;
  color: var(--bb-text-3);
  transition: color .15s, background .15s;
}
.bb-dash-assistant-reopen:hover { color: var(--bb-text); background: var(--bb-bg); }
.bb-dash-assistant-mobileopen {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bb-success-text);
  color: var(--fg-inverse);
  border: none;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--bb-success-text) 40%, transparent);
  z-index: 500;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .15s;
}
.bb-dash-assistant-mobileopen:hover { opacity: 0.9; }
.bb-dash-assistant-mobileopen svg { width: 28px; height: 28px; }
.bb-dash-assistant-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--fg-1) 40%, transparent);
  z-index: 550;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.bb-dash-assistant-backdrop.visible { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .bb-dashboard-layout { flex-direction: column; height: auto; overflow: visible; }
  .bb-dashboard-layout .bb-content-wrap { overflow-y: visible; }
  .bb-dash-assistant {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 85%;
    max-width: 360px;
    max-height: none;
    border-left: 1px solid var(--bb-line);
    box-shadow: -8px 0 32px color-mix(in srgb, var(--fg-1) 15%, transparent);
    z-index: 600;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .bb-dash-assistant.bb-dash-assistant-mobile-open { transform: translateX(0); }
  .bb-dash-assistant.collapsed { transform: translateX(100%); width: 85%; opacity: 1; overflow: visible; border-left-width: 1px; }
  .bb-dash-assistant-mobileopen { display: flex; }
  .bb-dash-assistant-mobileopen.hidden { display: none; }
  .bb-dash-assistant-backdrop { display: block; }
  .bb-dash-assistant-reopen { display: none !important; }
}
@media (min-width: 901px) {
  .bb-dash-assistant-mobileopen { display: none !important; }
  .bb-dash-assistant-backdrop.visible { display: none !important; }
}

/* Impersonation ("Log in as client") sudo banner — issue #94. Sticky, high-contrast
   warning bar shown on every customer page while a platform admin is impersonating. */
.bb-impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bb-danger-bg);
  color: var(--bb-danger-text);
  border-bottom: 1px solid var(--bb-danger-border);
  font-size: 13px;
  font-weight: 600;
}
.bb-impersonation-banner__icon { display: inline-flex; flex: 0 0 auto; }
.bb-impersonation-banner__text { flex: 1 1 auto; }
.bb-impersonation-banner__text strong { font-weight: 800; }
.bb-impersonation-banner__btn {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--bb-r, 8px);
  border: 1px solid var(--bb-danger-text);
  background: var(--bb-danger-text);
  color: var(--fg-inverse);
  font-size: 12px;
  font-weight: 700;
}
.bb-impersonation-banner__btn:hover { opacity: 0.9; }

/* ── UC-6 #144 Graph view (ported from planner.html prototype) ── */
/* Electrical power card: unit caption in the head + one-line explainer under it. */
.bb-chart-unit-caption {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bb-text-2);
}
.bb-chart-caption {
  margin: 0;
  padding: 0 24px 4px;
  font-size: 0.78rem;
  color: var(--bb-text-3);
}
.bb-plan-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.bb-day-strategy-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
}
.bb-day-strategy-link:hover { opacity: 0.8; }
.bb-strategy-caption {
  border-left: 3px solid var(--fg-action);
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-left: 3px solid var(--fg-action);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: var(--bb-shadow-sm);
}
.bb-strategy-caption-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bb-text);
}
.bb-strategy-caption-sub {
  font-size: 0.85rem;
  color: var(--bb-text-3);
  margin-top: 2px;
}
.bb-day-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--bb-text-3);
  border: 1px dashed var(--bb-line);
  border-radius: 12px;
  background: var(--bb-bg);
}
.bb-day-empty p {
  font-size: 0.95rem;
  margin: 0;
}

.bb-plan-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.bb-day-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  box-shadow: var(--bb-shadow-sm);
}
.bb-day-view-toggle button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bb-text-3);
  padding: 7px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bb-day-view-toggle button.active {
  background: var(--fg-accent);
  color: var(--fg-inverse);
}
.bb-tab-group-box {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  box-shadow: var(--bb-shadow-sm);
  padding: 20px;
  margin-top: 4px;
}

/* List view — 15-min split bars (Change 3) */
.bb-list-legend-block {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bb-line);
}
.bb-list-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  width: 100%;
  align-items: center;
}
.bb-list-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid color-mix(in srgb, var(--bb-legend-color, var(--fg-accent)) 35%, transparent);
  background: color-mix(in srgb, var(--bb-legend-color, var(--fg-accent)) 12%, var(--bg-1));
  color: var(--bb-legend-color, var(--fg-accent));
}
.bb-list-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--bb-legend-color, var(--fg-accent));
  flex-shrink: 0;
}
.bb-list-show-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text-2);
  cursor: pointer;
  user-select: none;
}
.bb-list-show-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--fg-accent);
  cursor: pointer;
  margin: 0;
}
.bb-list-strategy {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-text-3);
}
.bb-hour-list {
  display: flex;
  flex-direction: column;
  max-height: 520px;
  overflow-y: auto;
}
.bb-hour-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bb-line);
  cursor: pointer;
}
.bb-hour-row:last-child { border-bottom: none; }
.bb-hour-row-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-text-3);
}
.bb-heat-bar-wrap { width: 100%; min-width: 0; }
.bb-heat-bar-track {
  display: flex;
  width: 100%;
  height: 20px;
  align-items: stretch;
  border-radius: 6px;
  background: var(--bb-bg);
  border: 1px solid var(--bb-line);
  overflow: hidden;
}
.bb-heat-bar-track.is-empty {
  background: transparent;
  border-style: dashed;
}
.bb-heat-bar-left {
  display: none;
  flex-direction: row-reverse;
  flex: 0 1 42%;
  min-width: 0;
  max-width: 42%;
  gap: 3px;
  height: 100%;
  padding-left: 4px;
}
.bb-heat-bar-zero {
  display: none;
  flex: 0 0 2px;
  width: 2px;
  background: var(--bb-text-3);
  opacity: 0.35;
  height: 100%;
}
.bb-tab-group-box:has([data-storage-toggle]:checked) .bb-heat-bar-left,
.bb-tab-group-box:has([data-storage-toggle]:checked) .bb-heat-bar-zero {
  display: flex;
}
.bb-heat-bar-right {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
  height: 100%;
  padding-right: 4px;
}
.bb-heat-bar-left-spacer {
  height: 100%;
  min-width: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg-1) 4%, transparent);
}
.bb-heat-bar-seg {
  height: 100%;
  min-width: 0;
  border-radius: 4px;
}
.bb-heat-bar-seg-off {
  flex: 0 0 1px;
  min-width: 1px;
  border-radius: 1px;
  opacity: 0.85;
}
.bb-heat-bar-spacer {
  height: 100%;
  min-width: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg-1) 6%, transparent);
}
.bb-heat-bar-total {
  font-size: 11px;
  font-weight: 700;
  color: var(--bb-text-2);
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}
.bb-heat-unit-th,
.bb-heat-unit-el {
  font-size: 0.72em;
  font-style: italic;
  font-weight: 600;
}

/* Change 4 — hour-detail sheet (List row click) */
.bb-hour-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--fg-1) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
}
.bb-hour-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bb-hour-sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bb-surface);
  border-radius: var(--bb-r, 12px);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-md, 0 12px 40px color-mix(in srgb, var(--fg-1) 18%, transparent));
  padding: 28px;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.bb-hour-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.bb-hour-sheet-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-text-3);
  margin: 0 0 6px;
}
.bb-hour-sheet-system {
  font-size: 18px;
  font-weight: 700;
  color: var(--bb-text);
  margin: 0 0 16px;
  line-height: 1.35;
}
.bb-hour-sheet-note {
  font-size: 13px;
  color: var(--bb-text-3);
  margin: 0 0 12px;
}
.bb-hour-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.bb-hour-sheet-chip {
  border: 1px solid var(--bb-line);
  border-radius: 10px;
  background: var(--bb-bg);
  padding: 10px 12px;
}
.bb-hour-sheet-chip-wide { grid-column: 1 / -1; }
.bb-hour-sheet-chip-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-text-3);
  margin-bottom: 4px;
}
.bb-hour-sheet-chip-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--bb-text);
  word-break: break-word;
}
.bb-hour-sheet-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--bb-text-3);
}
.bb-hour-sheet-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-weight: 600;
}
.bb-hour-sheet-asset { font-size: 13px; }
.bb-hour-sheet-close {
  width: 100%;
  padding: 14px;
  background: var(--fg-accent);
  border: none;
  border-radius: 999px;
  color: var(--fg-inverse);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.bb-hour-sheet-close:hover { filter: brightness(1.05); }
.bb-hour-row:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.bb-plan-summary {
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--bb-line);
  border-radius: 12px;
  background: var(--bb-bg);
}
.bb-plan-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px 20px;
}
.bb-plan-summary-lbl {
  font-size: 0.7rem;
  color: var(--bb-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.bb-plan-summary-val {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
}
.bb-plan-summary-mono { font-family: monospace; }
.bb-plan-summary-sm { font-size: 0.82rem; line-height: 1.45; }
.bb-plan-summary-sep { color: var(--bb-text-3); font-weight: 500; }
.bb-plan-summary-unit { font-size: 0.8rem; color: var(--bb-text-3); font-weight: 500; }
.bb-plan-summary-sub { font-size: 0.72rem; color: var(--bb-text-3); margin-top: 3px; }
.bb-plan-anchor-note {
  font-size: 0.78rem;
  color: var(--bb-text-3);
  margin: -6px 0 14px 0;
  max-width: 52rem;
}
.bb-plan-anchor-note code { font-size: 0.85em; }

.bb-graph-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  box-shadow: var(--bb-shadow-sm);
  margin-bottom: 16px;
}
.bb-graph-tab {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bb-text-3);
  padding: 7px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bb-graph-tab:hover:not(.active) { color: var(--bb-text); }
.bb-graph-tab.active { background: var(--fg-accent); color: var(--fg-inverse); }

.bb-chart-card {
  background: var(--bb-surface);
  border-radius: var(--bb-r);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-tile);
  overflow: hidden;
  margin-bottom: 16px;
}
.bb-chart-card-head { padding: 12px 24px 4px; }
.bb-chart-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-accent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bb-chart-eyebrow::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: currentColor;
  border-radius: 2px;
}
.bb-chart-divider { height: 1px; background: var(--bb-line); margin: 4px 0; }
.bb-chart-body { padding: 6px 24px 16px; }
.bb-chart-legend {
  display: flex;
  gap: 16px;
  padding: 0 24px 16px;
  flex-wrap: wrap;
  font-size: 0.68rem;
  font-weight: 700;
}
.bb-chart-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--bb-text-2); }
.bb-chart-legend-swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.bb-chart-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--bb-text-3);
  font-size: 0.85rem;
}

/* Change 5 — line/area SVG charts + Now marker */
.bb-chart-body:has(.bb-svg-chart) {
  padding-bottom: 28px;
}
.bb-svg-chart {
  position: relative;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--bb-surface-2) 0%, var(--bg-3) 100%);
  border: 1px solid var(--bb-line);
  overflow: visible;
}
.bb-svg-chart-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bb-svg-chart-hits {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bb-svg-chart-hits > span {
  cursor: pointer;
  min-height: 100%;
}
.bb-svg-chart-label {
  position: absolute;
  top: 4px;
  left: 8px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--bb-text-3);
  pointer-events: none;
}
.bb-chart-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--fg-1);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.bb-chart-now span {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  font-family: var(--bb-font-sans);
}
.bb-asset-stack-chart {
  background: transparent;
  border: none;
}
.bb-asset-stack-bars {
  position: relative;
  z-index: 1;
  height: 100%;
}

/* "When each asset runs" Gantt — one row per asset, segments merged server-side
   (EnergyScheduleService#buildAssetGanttLanes). Done = filled bar; Running now = filled +
   highlighted ring; Planned = dashed border + light tinted fill, matching the advisory-board
   prototype's "solid = done, outlined = anticipated" language and its .seg.future styling. */
.bb-gantt-legend { padding: 0 0 14px; }
.bb-gantt-legend-swatch-solid { border-radius: 3px; }
.bb-gantt-legend-swatch-outline { border-radius: 3px; border-width: 1.5px; border-style: dashed; }
.bb-gantt-legend-swatch-ring { border-radius: 3px; border-width: 2px; border-style: solid; }

.bb-gantt-lanes { position: relative; padding: 6px 0 4px; }
.bb-gantt-lane { display: flex; align-items: center; gap: 12px; padding: 0; }
.bb-gantt-lane-label {
  width: 104px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--bb-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-gantt-lane-icon { flex: none; display: inline-flex; color: var(--bb-text-2); }
.bb-gantt-lane-icon svg { width: 16px; height: 16px; display: block; }
.bb-gantt-track {
  flex: 1;
  display: grid;
  align-items: center; /* lane is taller than the segment pill (spec: 76px lane, 24px pill) — center it */
  height: 76px; /* matches the advisory-board prototype's fixed PLAN_ROW lane height */
  min-width: 0;
  /* No column-gap: a per-minute grid (repeat(spanMin,1fr)) with a fixed gap would force the track
     to spanMin×gap wide (e.g. 2160×2px ≈ 4.3k px), overflowing the card and clipping the end.
     Segment separation is a 1px margin on each segment instead (stays within the grid area). */
  column-gap: 0;
}
.bb-gantt-segment {
  position: relative;
  border-radius: var(--bb-r-pill);
  height: 24px; /* inset pill, not edge-to-edge fill — matches the prototype's .seg height */
  min-width: 3px;
  margin: 0 1px; /* visual separation between segments (replaces the removed track column-gap) */
  cursor: pointer;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  transition: filter 0.12s ease;
}
.bb-gantt-segment:hover { filter: brightness(0.94); }
/* Idle/off segments use transparent fill — don't darken the white track on hover. */
.bb-gantt-segment:hover:is([style*="background: transparent"], [style*="background:transparent"]) {
  filter: none;
  cursor: default;
}

/* ── Hover popover ("When each asset runs") — spec-styled card: asset + state badge, time,
   a composed 'what' line, and the algorithm's plain explanation as the 'why'. ── */
.bb-gantt-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: none;
  width: max-content;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  box-shadow: 0 14px 38px rgba(16, 32, 58, 0.20), 0 2px 8px rgba(16, 32, 58, 0.10);
  font-family: var(--bb-font-sans);
  text-align: left;
  white-space: normal;
  pointer-events: none;
  cursor: default;
}
.bb-gantt-segment:hover > .bb-gantt-tip { display: block; }
/* Keep the popover inside the (overflow-x:clip) card: centered by default, but open rightward for
   the first few segments (near the left edge) and leftward for the last few (near the right edge). */
.bb-gantt-segment:nth-child(-n + 3) > .bb-gantt-tip { left: 0; right: auto; transform: none; }
.bb-gantt-segment:nth-last-child(-n + 4) > .bb-gantt-tip { left: auto; right: 0; transform: none; }
.bb-gantt-tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bb-gantt-tip-title { font-weight: 700; font-size: 14px; color: var(--fg-accent); }
.bb-gantt-tip-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bb-surface-2); color: var(--fg-2);
}
.bb-gantt-tip-badge.bb-tip-done { background: var(--bb-surface-2); color: var(--fg-accent); }
.bb-gantt-tip-badge.bb-tip-running { background: var(--bb-warn-bg); color: var(--bb-warn-text); }
.bb-gantt-tip-badge.bb-tip-planned { background: var(--bb-surface-2); color: var(--fg-2); }
.bb-gantt-tip-time { display: block; font-size: 11.5px; color: var(--fg-2); margin-bottom: 8px; }
.bb-gantt-tip-what { display: block; font-size: 13px; line-height: 1.4; color: var(--bb-text); margin-bottom: 6px; }
.bb-gantt-tip-why { display: block; font-size: 12.5px; line-height: 1.4; color: var(--fg-2); }
.bb-gantt-tip-pending { display: block; font-size: 12.5px; line-height: 1.4; color: var(--fg-3, var(--fg-2)); font-style: italic; }
/* The gantt card is overflow:hidden for its rounded frame; let the hover popover escape UPWARD
   (overflow-y:visible) while still clipping the very wide gantt track horizontally
   (overflow-x:clip — clip, not hidden, so it does not coerce overflow-y to auto/scroll). */
[data-testid="asset-gantt-card-unified"],
[data-testid="asset-gantt-card-unified"] .bb-chart-body { overflow-x: clip; overflow-y: visible; }

/* ── Hour gridlines: faint vertical rules every --gantt-grid (3h) across each lane's track,
   painted behind the segments (solid segments cover them; they show through gaps/planned). ── */
.bb-gantt-track {
  background-image: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--bb-line) 80%, transparent) 0 1px,
    transparent 1px var(--gantt-grid, 12.5%));
  background-repeat: repeat-x;
}
/* ── Hour axis under the lanes — a spacer that matches the label column keeps the tick row's
   track aligned 1:1 with the segment tracks (same flex layout), so ticks sit on the gridlines. ── */
.bb-gantt-axis { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.bb-gantt-axis-spacer { width: 104px; flex: none; }
.bb-gantt-axis-track { position: relative; flex: 1; min-width: 0; height: 16px; }
.bb-gantt-axis-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--bb-text-2); white-space: nowrap;
}
.bb-gantt-axis-tick.bb-gantt-axis-tick-day { transform: none; color: var(--fg-accent); font-weight: 700; }
/* Track-aligned layer for the NOW marker — left offset mirrors the lane label column
   (.bb-gantt-lane-label 104px + .bb-gantt-lane gap 12px) so nowPct% is a fraction of the track. */
.bb-gantt-nowlayer { position: absolute; top: 0; bottom: 0; left: 116px; right: 0; pointer-events: none; z-index: 3; }
/* Planned/future segments render with the same per-asset/action fill the template sets inline
   (background + border-color = seg.color()) as done/running — no separate override. Past vs.
   future is read off the dashed "Now" line, not a different fill. */
.bb-gantt-segment.bb-gantt-state-running {
  box-shadow: 0 0 0 2px var(--bb-warn-text), 0 0 0 4px color-mix(in srgb, var(--bb-warn-text) 25%, transparent);
  z-index: 1;
  position: relative;
}

/* ── UC-6 #141 pending slot (awaiting price data) — a distinct amber diagonal hatch, never a
   low-price green bar and never an off/idle grey "ghost" (UC6-EG-03). !important so it wins over
   the per-cell inline background the timeline/graph grids set. ── */
.bb-sched-pending {
  background-color: var(--bb-warn-bg) !important;
  background-image: repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--bb-warn-text) 30%, transparent),
      color-mix(in srgb, var(--bb-warn-text) 30%, transparent) 4px,
      transparent 4px,
      transparent 8px) !important;
  border: 1px dashed var(--bb-warn-text) !important;
  box-sizing: border-box;
}

/* ── Asset Historic Chart (customer Assets) ── */
.bb-history-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--fg-accent);
  background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; transition: background .15s, border-color .15s;
}
.bb-history-btn:hover { background: var(--bg-3); border-color: var(--border-2); }
.bb-history-btn svg { flex-shrink: 0; }

.bb-history-overlay {
  display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--fg-1) 45%, transparent);
  z-index: 2200; align-items: center; justify-content: center; padding: 20px;
}
.bb-history-overlay.open { display: flex; }
.bb-history-box {
  background: var(--bb-surface-fill); backdrop-filter: var(--bb-surface-blur); -webkit-backdrop-filter: var(--bb-surface-blur);
  border-radius: var(--bb-r);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--fg-1) 25%, transparent);
  width: 100%; max-width: 980px; max-height: 90vh; overflow-y: auto; padding: 28px;
}
.bb-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bb-history-title { font-size: 17px; font-weight: 700; color: var(--bb-text); }
.bb-history-sub { font-size: 12px; color: var(--bb-text-3); margin-top: 3px; }
.bb-history-close {
  background: none; border: none; color: var(--bb-text-3); font-size: 18px;
  cursor: pointer; line-height: 1; padding: 4px;
}
.bb-history-close:hover { color: var(--bb-text); }

.bb-history-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.bb-seg-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bb-bg); border: 1px solid var(--bb-line); border-radius: 999px;
}
.bb-seg-toggle button {
  border: none; background: transparent; font-family: inherit; font-size: 11px;
  font-weight: 700; color: var(--bb-text-3); padding: 6px 14px; border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s;
}
.bb-seg-toggle button:hover:not(.active) { color: var(--bb-text); background: color-mix(in srgb, var(--fg-inverse) 60%, transparent); }
.bb-seg-toggle button.active { background: var(--fg-accent); color: var(--fg-inverse); }

.bb-legend-toggle {
  cursor: pointer; user-select: none; border: none; background: transparent;
  font: inherit; padding: 0 0 2px; transition: opacity .15s, border-color .15s;
  border-bottom: 2px solid transparent;
}
.bb-legend-toggle:hover:not(.bb-legend-off),
.bb-legend-toggle:focus-visible:not(.bb-legend-off) { opacity: 1; }
.bb-legend-toggle.bb-legend-axis-live { border-bottom-color: var(--swatch, var(--fg-accent)); }
.bb-legend-toggle.bb-legend-off { opacity: 0.35; }

.bb-history-chart-wrap { width: 100%; margin-bottom: 4px; overflow: hidden; }
.bb-hist-y-axis { opacity: 0; pointer-events: none; transition: opacity .15s; }
.bb-history-chart-wrap.bb-hist-axis-live .bb-hist-y-axis { opacity: 1; }
.bb-hist-series { transition: opacity .15s; }
.bb-hist-series.bb-hist-dim { opacity: 0.22; }
#hist-zoom-layer polyline,
#hist-zoom-layer line,
#hist-zoom-layer rect {
  vector-effect: non-scaling-stroke;
}

.bb-history-brush-wrap { display: block; margin-top: 2px; user-select: none; }
.bb-history-brush-hint { font-size: 11px; color: var(--bb-text-3); margin: 0 0 2px 0; padding-left: 6%; }
.bb-history-brush-svg { display: block; width: 100%; overflow: visible; touch-action: none; }
.bb-history-brush-handle { cursor: ew-resize; }
.bb-history-brush-span { cursor: grab; }
.bb-history-brush-span.dragging { cursor: grabbing; }
.bb-history-empty {
  font-size: 14px; color: var(--bb-text-3); padding: 28px 8px; text-align: center;
}
.bb-history-status-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.bb-status-legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--bb-text-2);
}
.bb-status-legend-swatch { width: 14px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.bb-history-note { font-size: 11px; color: var(--bb-text-3); margin-top: 10px; line-height: 1.5; }
/* ── Scenario editor (#153) ─────────────────────────────────────────────────
   Prototype rule-authoring canvas. Prefixed bb-scen-editor-* rather than
   bb-scenario-* because bb-scenario-* already belongs to the price-band cards
   in demand-price-content.html. */

.bb-scen-editor-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: start;
}

.bb-scen-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bb-scen-editor-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bb-border);
}

.bb-scen-editor-tabs button {
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 8px 4px;
  margin-bottom: -1px;
}

.bb-scen-editor-tabs button.bb-scen-tab-active {
  border-bottom-color: var(--fg-accent);
  color: var(--fg-accent);
}

.bb-scen-editor-workspace {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.bb-scen-editor-palette {
  width: 200px;
  flex-shrink: 0;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-r);
  background: var(--bb-surface);
  padding: 10px;
  overflow-y: auto;
  height: 520px;
}

.bb-scen-editor-palette-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-text-3);
  margin-bottom: 8px;
}

.bb-scen-editor-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-surface-2);
  font-size: 0.8125rem;
  color: var(--bb-text-1);
  cursor: grab;
  user-select: none;
}

.bb-scen-editor-palette-item:active {
  cursor: grabbing;
}

.bb-scen-editor-palette-item[data-placed="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.bb-scen-editor-palette-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bb-scen-editor-palette-empty {
  font-size: 0.8125rem;
  color: var(--bb-text-3);
}

.bb-scen-editor-palette-title-logic {
  margin-top: 14px;
}

/* Logic blocks (AND/OR/NOT) are always draggable — unlike asset chips, they are never "placed once
   and greyed out": a scenario may need several of the same gate. */
.bb-scen-editor-palette-item--gate {
  border-left: 3px solid var(--fg-action);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bb-text-2);
}

.bb-scen-editor-cond-leaves {
  margin-bottom: 12px;
}

.bb-scen-editor-cond-leaves > .bb-label {
  display: block;
  margin-bottom: 8px;
}

/* One row per comparison feeding a logic-block condition, all shown and editable together — the
   point being that a composite rule's condition is not one field, so no single field can represent
   it; a popup per wire (the earlier design) let you configure one leaf and silently lose track of
   the others as soon as you drew the next wire. */
.bb-scen-editor-leaf-row {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-surface-2);
}

.bb-scen-editor-canvas {
  width: 100%;
  height: 520px;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-r);
  background: var(--bb-surface-2);
  overflow: hidden;
  position: relative;
}

/* ── Drawflow node editor overrides ──────────────────────────────────────
   Drawflow ships its own default palette; these rules replace it with the
   design-system tokens so the canvas follows light/dark theme like the rest
   of the app. */

/* Scoped by ID (#scen-canvas, #scen-safety-canvas), not .bb-scen-editor-canvas (a class): drawflow.min.css
   loads after company-ui.css in the page, so a same-specificity class-vs-class override would lose the
   cascade to Drawflow's own defaults — an ID selector always outranks Drawflow's class-only selectors. */
#scen-canvas .drawflow-node,
#scen-safety-canvas .drawflow-node {
  background: var(--bb-surface) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-r) !important;
  box-shadow: var(--bb-shadow-sm, 0 1px 4px rgba(0,0,0,0.08)) !important;
  width: auto !important;
  min-width: 160px !important;
  max-width: 280px !important;
  padding: 0 !important;
}

#scen-canvas .drawflow-node.selected,
#scen-safety-canvas .drawflow-node.selected {
  border-color: var(--fg-accent);
}

.bb-scen-node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bb-line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-text-1);
}

.bb-scen-node-remove {
  cursor: pointer;
  color: var(--bb-text-3);
  border: none;
  background: none;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
}

.bb-scen-node-remove:hover {
  color: var(--bb-danger-text);
}

.bb-scen-node-body {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

.bb-scen-node-port-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 0.75rem;
  color: var(--bb-text-2);
}

.bb-scen-node-port-row span:last-child {
  white-space: nowrap;
}

/* Ports are positioned absolutely against .drawflow-node's own box (already position:absolute per
   Drawflow's base CSS), with `top` set inline by scenario-editor.js from each port row's offsetTop —
   that's what lines a dot up with its label regardless of how many ports the other side has. */
#scen-canvas .drawflow-node .input,
#scen-canvas .drawflow-node .output,
#scen-safety-canvas .drawflow-node .input,
#scen-safety-canvas .drawflow-node .output {
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  background: var(--bb-surface) !important;
  border: 2px solid var(--bb-text-3) !important;
}

#scen-canvas .drawflow-node .input,
#scen-safety-canvas .drawflow-node .input {
  left: -6px !important;
}

#scen-canvas .drawflow-node .output,
#scen-safety-canvas .drawflow-node .output {
  right: -6px !important;
  background: var(--fg-accent) !important;
  border-color: var(--fg-accent) !important;
}

#scen-canvas .connection .main-path,
#scen-safety-canvas .connection .main-path {
  stroke: var(--bb-text-3) !important;
  stroke-width: 2px !important;
}

#scen-canvas .connection.selected .main-path,
#scen-safety-canvas .connection.selected .main-path {
  stroke: var(--fg-accent) !important;
}

/* Logic blocks (AND/OR/NOT): smaller and visually distinct from asset nodes — they carry no
   channel identity of their own, just a boolean operator. */
#scen-canvas .drawflow-node.bb-scen-gate-node,
#scen-safety-canvas .drawflow-node.bb-scen-gate-node {
  width: 110px !important;
  border-color: var(--fg-action) !important;
}

#scen-canvas .drawflow-node.bb-scen-gate-node .bb-scen-node-header,
#scen-safety-canvas .drawflow-node.bb-scen-gate-node .bb-scen-node-header {
  justify-content: center !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--fg-action) !important;
}

.bb-scen-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.bb-scen-editor-rules {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

.bb-scen-editor-rules li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  margin-bottom: 6px;
  font-size: 0.875rem;
  color: var(--bb-text-2);
  background: var(--bb-surface);
}

.bb-scen-editor-activate {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
}

.bb-scen-editor-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.6rem;
}

.bb-scen-editor-checkbox input {
  width: auto;
  margin: 0;
}

.bb-scen-editor-rules li .bb-scen-editor-activate {
  margin-top: 0;
  flex-shrink: 0;
}

.bb-scen-editor-live {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.bb-scen-editor-live-asset {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  padding: 12px;
  background: var(--bb-surface);
}

.bb-scen-editor-live-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bb-text-1);
}


/* ============================================================================
   CL-V2 WIDGET FAMILIES (advisory-board migration)
   ------------------------------------------------------------------------
   Source: aidocs://DOC-8TEJGD@657f6d7 (advisory-board GUI-variant prototype),
   extracted + normalized onto this app's semantic/effect token vocabulary,
   then prefixed `cl-` to avoid collision with the `bb-*` component set above.

   Theme-agnostic by construction — consumes only tokens from themes.css /
   tokens-base.css, same as every rule above this banner. cl-v2 is the first
   theme built to exercise this vocabulary, but nothing here is gated to it;
   any theme can already reskin these widgets via its own [data-theme] block.

   Per the migration plan (see /Users/jon/.claude/plans/), this is a first-pass,
   provisional namespace introduced ALONGSIDE the existing bb-* set, not a
   replacement — adopting these classes into live page templates, and
   eventually retiring the bb-* equivalents, is future work.

   ~30 widget families: tile surface (.cl-card), buttons, segmented toggle,
   chips, KPI tiles, header/nav, sub-nav jump-bar, alarm bell popover, live
   asset swimlanes (9 @keyframes), assets grid + history modal, alarms table,
   buffer status cards, settings icon-rail panel, extensions marketplace,
   market price tables, plan-control autonomy dial, override hatching, chart
   chassis (lock-step horizontal scroll), tooltips, AI assistant chat dock,
   footer. See the extraction README for the full inventory.
   ============================================================================ */

<style>
/* [token block extracted to 01-primitives.cl-css + 02-tokens.cl-css] */

/* ===== BASE =====
   Global resets (*, html/body, ::selection, :focus-visible, h1-h4, body font-size/weight)
   deliberately NOT ported here — per the migration plan, that's a global change affecting
   every theme, not a cl-v2-scoped addition, and needs its own explicit sign-off. */
.cl-mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

/* list-title / kicker — ALL CAPS Montserrat Bold, used as eyebrows */
.cl-kicker{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-accent)}
.cl-card > .cl-pad > .cl-kicker{font-size:15px; letter-spacing:.04em}   /* larger header on each graph tile */

/* ===== LAYOUT ===== */
.cl-shell{max-width:1140px; margin:0 auto; padding:0 32px}
section{padding:56px 0}
.cl-sec-head{margin-top:72px; margin-bottom:40px}
.cl-sec-head .cl-kicker{display:block; margin-bottom:16px}
/* kicker row with a quiet link on the right edge (Asset plan → Control Strategy) */
.bb-sec-head-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:16px}
.cl-sec-head .bb-sec-head-row .cl-kicker{margin-bottom:0}
.bb-sec-head-link{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); text-decoration:none; transition:color .15s}
.bb-sec-head-link:hover, .bb-sec-head-link:focus-visible{color:var(--fg-accent); text-decoration:underline; text-underline-offset:3px}
.cl-sec-head h2{font-size:clamp(24px,3vw,34px); color:var(--fg-accent); margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.2}
/* intro text runs the full content width — no ch-based measure cap, so it does not
   stop halfway across a wide section. Same for every other descriptive paragraph below. */
.cl-sec-head p{color:var(--fg-2); margin:16px 0 0; font-size:14.5px; font-weight:300; line-height:1.55; text-wrap:pretty}
.cl-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ===== THE TILE SURFACE — single source of truth =====
   Flat white, hairline border, cool shadow. Every raised surface in the app composes
   this one rule; do NOT re-declare background/border/radius/shadow on a new tile class.
   Add the selector here instead, and override only border-radius if the tile needs a
   different corner (see --bb-r-sm / --bb-r-2xs below). */
.cl-card, .cl-alarm-pop, .cl-lane, .cl-assetcard, .cl-bufcard, .cl-extcard, .cl-rev-tile, .cl-hist-card, #mkt-tip, .cl-alm-card{
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  border:1px solid var(--border-1);
  border-radius:var(--bb-r); box-shadow:var(--bb-shadow-tile)}
.cl-rev-tile{border-radius:var(--bb-r-2xs)}   /* small tile in a dense grid */
#mkt-tip{border-radius:var(--bb-r-sm)}    /* floating tooltip */
/* Dark KPI accent tile is a deliberately solid brand fill, not a frosted surface — same
   exception class as .cl-btn-primary / .cl-logo below. Revisit only if a client wants a
   dark-glass counterpart theme (none exists yet; see tokens-base.css [data-visual="glass"]). */
.cl-card.cl-dark{background:var(--bg-dark); border-color:var(--fg-accent)}
/* graph tiles break out of the centered shell to span the full screen width (24px gutters) */
.cl-card.cl-fullwidth{width:calc(100vw - 48px); max-width:none; margin-left:calc(50% - 50vw + 24px); margin-right:calc(50% - 50vw + 24px)}
.cl-pad{padding:22px}

/* buttons — pill, no shrink on press; opacity hovers */
.cl-btn{font-family:var(--bb-font-sans); font-weight:700; font-size:13px; letter-spacing:.02em; padding:11px 20px;
  border-radius:var(--bb-r-pill); border:1px solid transparent; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; gap:8px; transition:opacity var(--bb-dur-fast) var(--bb-ease)}
.cl-btn:hover{opacity:.78} .cl-btn:active{opacity:.6}
.cl-btn-primary{background:var(--bg-dark); color:var(--bb-white)}
.cl-btn-secondary{background:var(--bb-white); color:var(--fg-accent); border-color:var(--fg-accent)}
.cl-btn-secondary.cl-on{background:var(--bg-dark); color:var(--bb-white)}

/* sliding-pill toggle — every chart's 1 hr | 15 min control.
   Two equal columns (grid 1fr 1fr) so the thumb lines up even when the labels differ in width.
   The language switch used to share this; it is now two flag buttons in the header (.cl-flagbtn). */
.cl-segctl{position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:3px; border:1px solid var(--fg-accent); border-radius:var(--bb-r-pill); background:transparent; flex:none}
.cl-segctl .cl-opt{position:relative; z-index:1; min-width:32px; text-align:center; font-family:var(--bb-font-sans); font-weight:700; font-size:12px; letter-spacing:.02em; padding:5px 12px; border:none; background:transparent; color:var(--fg-accent); cursor:pointer; line-height:1; white-space:nowrap; transition:color var(--bb-dur-fast) var(--bb-ease)}
.cl-segctl .cl-opt.cl-on{color:var(--bb-white)}
.cl-seg-thumb{position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:var(--bb-r-pill); background:var(--bg-dark); transition:transform var(--bb-dur-base) var(--bb-ease); pointer-events:none}
.cl-segctl[data-pos="1"] .cl-seg-thumb{transform:translateX(100%)}
#lang-toggle{display:inline-flex; align-items:center; gap:7px; flex:none}
.cl-btn-yellow{background:var(--fg-highlight); color:var(--fg-accent)}

/* chips */
.cl-chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:5px 11px; border-radius:var(--bb-r-pill); white-space:nowrap; flex:none}
.cl-chip-blue{background:var(--bg-dark); color:var(--bb-white)}
.cl-chip-yellow{background:var(--fg-highlight); color:var(--fg-accent)}
.cl-chip-light{background:var(--bb-lightblue-25); color:var(--fg-accent)}
.cl-chip-outline{background:transparent; color:var(--fg-accent); box-shadow:inset 0 0 0 1px var(--fg-accent)}
/* the live clock in the header sits on the blue bar — yellow-outlined pill, per the design */
.cl-bbheader .cl-chip-outline{color:var(--bb-white); box-shadow:inset 0 0 0 1.5px var(--fg-highlight); padding:9px 20px; font-size:12.5px}
.cl-chip .cl-led{width:7px; height:7px; clip-path:var(--bb-hex); background:var(--fg-highlight)}

/* KPI */
.cl-kpi .cl-lbl{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-accent)}
.cl-kpi .cl-v{font-weight:700; font-variant-numeric:tabular-nums; font-size:34px; letter-spacing:-.01em; margin-top:8px; line-height:1; color:var(--fg-accent)}
.cl-kpi .cl-v .cl-u{font-size:14px; font-weight:500; color:var(--fg-3); margin-left:4px}
.cl-card.cl-dark.cl-kpi .cl-lbl{color:var(--fg-highlight)}
.cl-card.cl-dark.cl-kpi .cl-v{color:var(--bb-white)}
.cl-card.cl-dark.cl-kpi .cl-v .cl-u{color:var(--bb-lightblue-50)}
.cl-kpi .cl-sub{font-size:12px; font-variant-numeric:tabular-nums; color:var(--fg-3)}
.cl-card.cl-dark.cl-kpi .cl-sub{color:var(--bb-lightblue-50)}

/* equal-sided KPI tiles (square, rounded via --bb-r) */
.cl-kpi-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.cl-kpi-square{width:210px; aspect-ratio:1; display:flex; flex-direction:column}
.cl-kpi-ic{color:var(--bb-lightblue); margin-bottom:14px}
.cl-kpi-ic svg{width:30px; height:30px; display:block}
.cl-kpi-square .cl-lbl{min-height:28px}          /* reserve 2 lines so values align */
.cl-kpi-square .cl-v{font-size:46px; margin-top:8px; white-space:nowrap}  /* bigger numbers */
.cl-kpi-square .cl-v .cl-u{font-size:16px}
.cl-kpi-square .cl-sub{margin-top:auto; padding-top:10px}
/* "What the day needs": a card is a button that picks the carrier shown in the chart below */
.cl-kpi-pick{cursor:pointer; opacity:.78; transition:opacity .15s, box-shadow .15s}
.cl-kpi-pick:hover{opacity:1}
.cl-kpi-pick:focus-visible{outline:2px solid var(--fg-highlight); outline-offset:3px}
.cl-kpi-pick.cl-on{opacity:1; box-shadow:0 0 0 2px var(--fg-highlight)}
/* cost build-up tiles */
.cl-ct-twocol{display:flex; flex-direction:column; gap:12px; margin-top:auto}
.cl-ct-n{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-variant-numeric:tabular-nums; font-size:28px; line-height:1; color:var(--bb-white)}
.cl-ct-ic{display:inline-flex; flex:none}
.cl-ct-ic svg{width:18px; height:18px; display:block}
.cl-ct-n .cl-u{font-size:12px; font-weight:500; color:var(--bb-lightblue-50); margin-left:4px}
.cl-card.cl-dark .cl-ct-sub{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-highlight); margin-top:3px}
.cl-ct-wf{flex:1; width:100%; min-height:0; margin:6px 0 2px}
/* cost-build-up row: tiles flex to fill exactly the width of the graph above.
   squares stay square (aspect-ratio 1); CHP is wider but not double (ratio 1.6 → same height). */
.cl-cost-tiles{align-items:flex-start}
.cl-cost-tiles .cl-kpi-square{flex:0 0 224px; width:224px; height:224px; aspect-ratio:auto}
.cl-cost-tiles .cl-kpi-wide{display:flex; flex:0 1 358px; max-width:358px; min-width:0; width:auto; height:224px; aspect-ratio:auto;   /* ~1.6x a square tile, capped — not "fill whatever space is left" */
  flex-direction:row; align-items:stretch; gap:16px}
.cl-cost-tiles .cl-kpi-wide .cl-ct-wf{flex:1 1 0; width:auto; height:auto; min-width:0; margin:0}       /* waterfall fills the left, as large as possible */
.cl-chp-side{display:flex; flex-direction:column; align-items:flex-start; text-align:left; flex:none; width:92px}   /* fixed width → the waterfall keeps a constant size no matter how wide the cost number is */
.cl-chp-side .cl-v{margin-top:8px; line-height:1}                     /* number sits just below the label → aligns with heat pump / gas kettle */
/* cost-tile values (CHP · heat pump · gas kettle) show the unit stacked under the number */
.cl-cost-tiles .cl-kpi-square .cl-v .cl-u{display:block; margin-left:0; margin-top:3px}
/* live electricity + gas prices in the cost-of-heat chart header (update on hover) */
.cl-cost-prices{display:inline-flex; gap:16px; align-items:center}
.cl-cost-prices .cl-cp{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--fg-accent); font-variant-numeric:tabular-nums}
.cl-cost-prices .cl-cp .cl-u{font-size:11px; font-weight:600; color:var(--fg-3)}
.cl-cost-prices .cl-cp-ic{display:inline-flex; flex:none}
.cl-cost-prices .cl-cp-ic svg{width:15px; height:15px; display:block}

/* ===== HEADER =====
   BB Blue bar, white logo plaque hanging from the top edge, centred white nav,
   language flags + outlined pill on the right. */
/* z-index 50: the header is the stacking context of its own pop-ups (alarms, profile), so it must sit
   above every page layer (menus up to 40) — but below tooltips (60–80), the chat dock and modals. */
.cl-bbheader{position:sticky; top:0; z-index:50; background:var(--bg-dark)}
/* wider than the 1140px content shell on purpose: the logo plaque + six nav items + the
   three controls need ~1215px in Dutch, so at 1140px they could never share one row. A
   full-bleed bar with contained content below also matches the design. */
/* direct child only — the sub-nav row below also uses .cl-shell for its centring and must
   not inherit this row's min-height / gap */
/* Grid, not flex, so the menu centres on the SHELL rather than on the gap between the logo and
   the icon cluster — the two 1fr tracks are always equal, which puts the auto track's centre on
   the shell's centre. That is the same axis .cl-subnav-inner centres on, so the main menu and the
   sub-nav below it line up. (With flex + margin:0 auto the menu sat 122px left of the sub-nav,
   because the logo and the icon cluster are not the same width.) If the icon cluster ever grows
   past half the free space, grid shrinks the left track instead of overlapping. */
.cl-bbheader > .cl-shell{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:24px; padding-top:0; padding-bottom:0; min-height:92px; max-width:1400px;
  /* sit above the subnav so the alarm hover-overview (nested in .cl-hdr-ctl, which makes its own
     stacking context via transform) paints over the section jump-bar instead of behind it */
  position:relative; z-index:2}

/* white plaque holding the wordmark — square at the top edge, rounded where it hangs.
   Deliberately NOT stretched: the blue bar can grow without the plaque growing with it,
   so its height is set by its own padding (18 + 40 + 18 = 76px). */
.cl-logo{justify-self:start; align-self:start; display:flex; align-items:center; padding:18px 30px;
  /* Deliberately opaque brand plaque, not a floating tile — a logo needs guaranteed contrast
     regardless of visual language, same exception class as .cl-card.cl-dark above. */
  background:var(--bb-white); border-radius:0 0 var(--bb-r) var(--bb-r)}
.cl-logo img{display:block; height:40px; width:auto}

/* top navigation — white links on the blue bar; BB Yellow marks the active page
   (yellow is the single signal colour, same rule as "now" in the charts) */
.cl-topnav{display:flex; align-items:center; gap:26px}
.cl-navtab{position:relative; font-family:var(--bb-font-sans); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  color:var(--bb-white); background:transparent; border:none; padding:7px 0; cursor:pointer; line-height:1;
  transition:color var(--bb-dur-fast) var(--bb-ease)}
.cl-navtab:hover{color:var(--fg-highlight)}
.cl-navtab.cl-on{color:var(--fg-highlight); font-weight:700}
.cl-navtab.cl-on::after{content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--fg-highlight); border-radius:var(--bb-r-pill)}

/* ===== SUB-NAV — section jump-bar under the main menu (dashboard only) =====
   Three knobs drive the whole bar, so a new colour scheme is one place to change:
   --bb-subnav-bg (solid colour OR gradient), --bb-subnav-fg (label colour), --bb-subnav-tint
   (hover / active wash, needs to read on top of --bb-subnav-bg). */
/* Nav chrome gradient is a deliberately solid brand bar (like .cl-logo), not a surface tile. */
.cl-subnav{
  --bb-subnav-bg:linear-gradient(135deg, var(--bb-white), var(--bb-lightblue-50));
  --bb-subnav-fg:var(--fg-accent);
  --bb-subnav-tint:color-mix(in srgb, var(--fg-accent) 10%, transparent);
  background:var(--bb-subnav-bg); border-top:1px solid color-mix(in srgb, var(--bb-white) 16%, transparent); position:relative; z-index:1}
.cl-subnav[hidden]{display:none}
.cl-subnav-inner{display:flex; align-items:center; justify-content:center; gap:4px; min-height:48px; flex-wrap:wrap; max-width:1400px}
.cl-subtab{position:relative; font-family:var(--bb-font-sans); font-weight:700; font-size:12.5px; letter-spacing:.01em;
  color:var(--bb-subnav-fg); background:transparent; border:none; padding:8px 14px; border-radius:var(--bb-r-pill);
  cursor:pointer; line-height:1; white-space:nowrap}
/* No wash anywhere in this bar — hover reads through weight alone, so the active item keeps its
   clean surface when you pass over it. Montserrat is loaded as discrete weights rather than as a
   variable font, so the step is instant and there is nothing to transition. */
.cl-subtab:hover{font-weight:800}
/* active item: same weight as hover, told apart by the underline below */
.cl-subtab.cl-on{font-weight:800}
/* Going 700 -> 800 widens a label by 1-2px, which would shuffle the whole centred row every time
   the pointer crosses an item. This zero-height copy of the label is always laid out at 800, so
   each button is already as wide as its bold self and nothing moves. data-label is set in
   renderSubnav, so it follows the language switch with the visible text. */
.cl-subtab::before{content:attr(data-label); display:block; height:0; overflow:hidden;
  visibility:hidden; font-weight:800; pointer-events:none}
/* active underline uses currentColor so it stays legible on light, dark and gradient bars */
.cl-subtab.cl-on::after{content:''; position:absolute; left:14px; right:14px; bottom:3px; height:2px;
  background:currentColor; border-radius:var(--bb-r-pill)}
@media(max-width:1240px){ .cl-subnav-inner{min-height:44px; padding-top:4px; padding-bottom:4px} }

/* right-hand controls — icons, flags and clock.
   --bb-hdr-shift nudges the whole cluster further right than the shell's edge. It is a transform
   on purpose: a margin would resize the grid track and drag the centred menu along with it,
   whereas a transform moves only the pixels. 0px = flush with the shell's right content edge;
   48px puts the English flag's right edge on the right edge of the graph widgets, which sit in
   the narrower 1140px .cl-shell rather than the header's 1400px one. */
.cl-hdr-ctl{--bb-hdr-shift:48px; justify-self:end; display:flex; align-items:center; gap:13px;
  transform:translateX(var(--bb-hdr-shift))}
/* The prototype nudges this cluster 48px past the shell edge with a transform, relying on its
   fitClock() pass to hide the clock when that carries it off-screen. That measurement pass is not
   ported, so the cluster stays flush with the shell's right content edge instead. */
.cl-bbheader .cl-hdr-ctl{--bb-hdr-shift:0px; transform:none}

/* The clock trails the flags, so the 48px shift carries it past the viewport on narrower
   screens; fitClock() in the script measures its right edge and hides it there. It has to be
   measured — see the comment on fitClock() for why a media query gets this wrong.
   The reserved (invisible) clock space sticks out past the shell, so clip it away rather than
   letting it raise a horizontal scrollbar. clip on one axis leaves the other visible, so the
   alerts pop-up can still hang below the bar. */
.cl-bbheader{overflow-x:clip}
.cl-flagbtn{width:27px; height:19px; flex:none; padding:0; border:none; background:none; cursor:pointer;
  border-radius:2px; overflow:hidden; line-height:0; display:block; opacity:.45;
  transition:opacity var(--bb-dur-fast) var(--bb-ease), box-shadow var(--bb-dur-fast) var(--bb-ease)}
.cl-flagbtn:hover{opacity:.85}
.cl-flagbtn.cl-on{opacity:1; box-shadow:0 0 0 2px color-mix(in srgb, var(--bb-white) 60%, transparent)}
.cl-flagbtn svg{width:100%; height:100%; display:block}

/* below this the three groups no longer fit on one row (Dutch labels are the widest) */
@media(max-width:1240px){
  /* two columns, logo + icons on row 1, the menu on its own full-width row below — the grid
     equivalent of the flex-wrap this rule used before the row became a grid */
  .cl-bbheader > .cl-shell{grid-template-columns:auto 1fr; padding-bottom:12px}
  .cl-logo{grid-area:1/1}
  .cl-hdr-ctl{grid-area:1/2}
  .cl-topnav{grid-area:2/1/auto/-1; justify-content:center; margin:4px 0 0; gap:22px; flex-wrap:wrap}
}

/* ===== header icon buttons — the bell and the settings gear =====
   Bare glyphs: no ring, no pill, no hover fill. The only state signal is the colour, which
   shifts to BB Yellow on hover and stays there while the icon's page is open (.cl-on) — the same
   signal .cl-navtab uses, so the icons read as part of the menu. Any new header icon should join
   .cl-hdr-icon rather than restyle itself. */
.cl-hdr-icon{position:relative; flex:none; width:34px; height:34px; padding:0; border:none;
  background:transparent; color:var(--bb-white); cursor:pointer; display:grid; place-items:center; line-height:0;
  transition:color var(--bb-dur-fast) var(--bb-ease)}
.cl-hdr-icon:hover{color:var(--fg-highlight)}
.cl-hdr-icon.cl-on{color:var(--fg-highlight)}
.cl-hdr-icon svg{width:21px; height:21px; display:block}

/* settings glyph — one of three, picked by data-icon on the button */
.cl-navicon .cl-ic-var{display:none}
.cl-navicon[data-icon="1"] .cl-ic-var[data-var="1"],
.cl-navicon[data-icon="2"] .cl-ic-var[data-var="2"],
.cl-navicon[data-icon="3"] .cl-ic-var[data-var="3"]{display:block}

/* alarm bell + popup — the overview appears on HOVER (or keyboard focus); a click on the
   bell or the overview opens the full Alarms page (wired in JS). */
.cl-alarm{position:relative; flex:none}
.cl-alarm-btn{cursor:pointer}
.cl-alarm-dot{position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%; background:var(--bb-alarm-dot); border:2px solid var(--bb-white)}
.cl-alarm-pop{position:absolute; top:calc(100% + 10px); right:0; z-index:40; width:320px; max-width:86vw; overflow:hidden; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--bb-dur-fast) var(--bb-ease), transform var(--bb-dur-fast) var(--bb-ease), visibility 0s linear var(--bb-dur-fast)}
/* invisible bridge across the 10px gap so the mouse can travel bell → overview without it closing */
.cl-alarm-pop::before{content:''; position:absolute; top:-12px; left:0; right:0; height:12px}
.cl-alarm:hover .cl-alarm-pop, .cl-alarm:focus-within .cl-alarm-pop{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s}
/* After a click the mouse is still over the bell, so :hover would keep the overview open on
   top of the page we just opened. .cl-suppressed force-hides it until the pointer leaves the bell
   (JS clears it on mouseleave). Higher specificity than the hover rule so it wins. */
.cl-alarm.cl-suppressed:hover .cl-alarm-pop, .cl-alarm.cl-suppressed:focus-within .cl-alarm-pop, .cl-alarm.cl-suppressed .cl-alarm-pop{opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s}
.cl-alarm-pop-hd{padding:13px 16px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-accent); border-bottom:1px solid var(--border-1); background:var(--bb-bg-2)}
.cl-alarm-list{max-height:60vh; overflow-y:auto}
.cl-alarm-item{display:flex; gap:11px; padding:13px 16px; border-bottom:1px solid var(--border-1)}
.cl-alarm-item:last-child{border-bottom:none}
.cl-alarm-item .cl-ai-ic{flex:none; width:18px; height:18px; color:var(--bb-status-warn); margin-top:1px}
.cl-alarm-item.cl-crit .cl-ai-ic{color:var(--bb-status-crit)}
.cl-alarm-item.cl-info .cl-ai-ic{color:var(--bb-sev-notice)}   /* advisory items — informational blue, not a warning */
.cl-alarm-item.cl-crit{background:color-mix(in srgb, var(--bb-heat) 5%, transparent)}
.cl-alarm-item .cl-ai-ic svg{width:18px; height:18px; display:block}
.cl-alarm-item .cl-ai-t{font-size:13px; font-weight:700; color:var(--fg-accent)}
.cl-alarm-item .cl-ai-m{font-size:12.5px; font-weight:400; color:var(--fg-2); line-height:1.45; margin-top:3px}
.cl-alarm-item .cl-ai-m b{color:var(--fg-accent); font-weight:700}
.cl-alarm-empty{padding:20px 16px; font-size:13px; color:var(--fg-3); text-align:center}

/* page routing — only the active page's sections show; flex order controls sequence within a page */
/* the removed hero band used to provide this breathing room under the header */
main.cl-shell{display:flex; flex-direction:column; padding-top:36px}
main.cl-shell > [data-page="plan"], main.cl-shell > [data-page="assets"], main.cl-shell > [data-page="settings"], main.cl-shell > [data-page="extension"], main.cl-shell > [data-page="market"], main.cl-shell > [data-page="alarms"]{display:none}   /* dashboard is the default page */

/* ===== Chosen-strategy summary panel ===== */
.cl-strat{display:grid; grid-template-columns:1.1fr 1fr; gap:14px}
@media(max-width:760px){ .cl-strat{grid-template-columns:1fr} }
.cl-strat-obj .cl-kx{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-highlight)}
.cl-strat-obj h3{margin:6px 0 10px; font-size:24px; font-weight:700; color:var(--bb-white); line-height:1.15}
.cl-strat-obj p{margin:0; color:var(--bb-lightblue-50); font-size:13.5px; line-height:1.55; font-weight:300}
.cl-strat-prio{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.cl-strat-prio .cl-pr{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--bb-white); font-weight:500}
.cl-strat-prio .cl-pr .cl-n{width:20px; height:20px; flex:none; border-radius:var(--bb-r-pill); background:var(--bb-lightblue-25); color:var(--fg-accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center}
.cl-strat-prio .cl-pr .cl-ic{width:18px; height:18px; flex:none}
.cl-mixbar{display:flex; height:30px; border-radius:var(--bb-r-pill); overflow:hidden; margin:4px 0 14px}
.cl-mixbar > span{display:block; height:100%}
.cl-mixleg{display:flex; flex-wrap:wrap; gap:14px}
.cl-mixleg .cl-it{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--bb-lightblue-50); font-weight:500}
.cl-mixleg .cl-sw{width:12px; height:12px; border-radius:3px; flex:none}
.cl-strat-kpis{display:flex; gap:28px; margin-top:18px}
.cl-strat-kpis .cl-k .cl-v{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--bb-white); line-height:1}
.cl-strat-kpis .cl-k .cl-v .cl-u{font-size:13px; font-weight:500; color:var(--bb-lightblue-50); margin-left:3px}
.cl-strat-kpis .cl-k .cl-l{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-highlight); margin-top:6px}
/* supply→demand Sankey (light card under the strategy card) */
.cl-sankey-card{margin-top:14px}
.cl-sankey-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.cl-sankey-card .cl-sankey-title{margin:6px 0 4px; font-size:20px; font-weight:700; color:var(--fg-accent); line-height:1.15}
.cl-sankey-card .cl-sankey-sub{margin:0 0 6px; color:var(--fg-2); font-size:13.5px; font-weight:300}
.cl-sankey-card .cl-sankey-summary{margin:10px 0 0; color:var(--fg-2); font-size:13.5px; line-height:1.5}
.cl-sankey-card .cl-sankey-summary-tag{display:inline-block; margin-right:8px; padding:1px 7px; border-radius:999px; background:var(--bg-2, rgba(127,127,127,.15)); color:var(--fg-3); font-size:11px; font-weight:600; letter-spacing:.02em}
.cl-sankey-wrap{width:100%; overflow-x:auto; margin-top:8px}
.cl-sankey-wrap svg{width:100%; min-width:560px; height:auto; display:block}
.cl-sankey-wrap svg path.cl-flow{cursor:help; transition:fill-opacity var(--bb-dur-fast) var(--bb-ease)}
.cl-sankey-wrap svg:hover path.cl-flow{fill-opacity:.18}
.cl-sankey-wrap svg path.cl-flow:hover{fill-opacity:.72}
/* day navigator (top-right of the sankey card) */
.cl-sankey-nav{display:flex; align-items:center; gap:8px; flex:none; padding-top:2px}
.cl-snav-btn{width:34px; height:34px; flex:none; border:1px solid var(--border-2); border-radius:var(--bb-r-pill); background:var(--bb-control-fill);
  color:var(--fg-accent); cursor:pointer; display:grid; place-items:center; transition:background var(--bb-dur-fast) var(--bb-ease), opacity var(--bb-dur-fast) var(--bb-ease)}
.cl-snav-btn:hover{background:var(--bb-lightblue-25)} .cl-snav-btn svg{width:16px; height:16px}
.cl-snav-btn:disabled{opacity:.35; cursor:default; background:var(--bb-control-fill)}
.cl-snav-day{display:flex; align-items:center; gap:8px; border:1px solid var(--border-2); border-radius:var(--bb-r-pill); padding:5px 6px 5px 13px}
.cl-snav-day input[type="date"]{font-family:var(--bb-font-sans); font-size:13px; font-weight:600; color:var(--fg-accent); border:none; outline:none; background:transparent;
  font-variant-numeric:tabular-nums; cursor:pointer; padding:0}
.cl-snav-day input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.6}
.cl-snav-tag{flex:none; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:var(--bb-r-pill);
  background:var(--bb-lightblue-25); color:var(--fg-accent)}
.cl-snav-tag.cl-now{background:var(--fg-highlight); color:var(--fg-accent)}
.cl-snav-tag.cl-fut{background:transparent; color:var(--bb-lightblue); box-shadow:inset 0 0 0 1px var(--bb-lightblue)}

/* ===== now / next-hour swimlanes =====
   Spec: two stacked lane cards (not a side-rail label). Each .cl-lane is its own
   raised surface (see shared .cl-lane card rule above); header sits on top, assets below. */
.cl-statgrid{display:flex; flex-direction:column; gap:14px}
.cl-lane{display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:16px 18px}
.cl-lane .cl-lane-hd{display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-accent)}
.cl-lane .cl-lane-hd .cl-dot{width:10px; height:10px; border-radius:var(--bb-r-pill); flex:none}
.cl-lane.cl-now  .cl-lane-hd .cl-dot{background:var(--fg-highlight)}
.cl-lane.cl-next .cl-lane-hd .cl-dot{background:transparent; border:1.5px dashed var(--bb-lightblue)}
.cl-lane .cl-assets{display:flex; flex-wrap:wrap; gap:12px; min-width:0}
/* full square asset card — icon · name · power · charge/discharge */
.cl-acard{position:relative; width:168px; height:168px; display:flex; flex-direction:column; padding:15px 16px; border:1px solid var(--border-1); border-radius:var(--bb-r); background:var(--bb-bg-2); color:var(--fg-accent); overflow:hidden}
.cl-lane.cl-now  .cl-acard{border-top:3px solid var(--fg-highlight)}
.cl-lane.cl-next .cl-acard{background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  border-style:dashed; border-color:var(--bb-lightblue-50)}
.cl-acard .cl-ic{width:28px; height:28px; flex:none; color:var(--fg-accent)}
.cl-acard .cl-ic svg{width:28px; height:28px; display:block}
.cl-acard .cl-nm{font-size:13.5px; font-weight:700; line-height:1.2; margin-top:10px}
.cl-acard .cl-note{font-size:11.5px; line-height:1.3; color:var(--fg-3); margin-top:2px}
.cl-acard .cl-foot{margin-top:auto; display:flex; flex-direction:column; gap:9px}
.cl-acard .cl-pw{display:flex; align-items:baseline; gap:4px}
.cl-acard .cl-pw .cl-pv{font-size:25px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1}
.cl-acard .cl-pw .cl-pu{font-size:11px; font-weight:600; color:var(--fg-3)}
/* load bar — running power as a share of the asset's max capacity */
.cl-acard .cl-load{display:flex; flex-direction:column; gap:5px}
.cl-acard .cl-load .cl-lt{display:flex; justify-content:space-between; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3)}
.cl-acard .cl-load .cl-lt .cl-lp{color:var(--fg-accent); font-variant-numeric:tabular-nums}
.cl-acard .cl-bar-track{height:6px; border-radius:var(--bb-r-pill); background:var(--bb-lightblue-25); overflow:hidden}
.cl-acard .cl-bar-fill{height:100%; border-radius:var(--bb-r-pill); background:var(--bg-dark)}
.cl-lane.cl-next .cl-acard .cl-bar-fill{background:var(--bb-lightblue)}
.cl-acard .cl-ahead{display:flex; align-items:center; justify-content:space-between; gap:8px}   /* icon left · mode pill + status dot right, all on the icon's centre line */
.cl-acard .cl-ahead-r{display:flex; align-items:center; gap:8px; flex:none}
.cl-acard .cl-adot{width:10px; height:10px; border-radius:50%; flex:none}
.cl-acard .cl-adot.cl-ok{background:var(--bb-status-ok)}
.cl-acard .cl-adot.cl-warn{background:var(--bb-status-warn)}
.cl-acard .cl-adot.cl-down{background:var(--bb-status-crit)}
.cl-acard .cl-mode{flex:none; display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:var(--bb-r-pill); white-space:nowrap}
.cl-acard .cl-mode .cl-dot{width:7px; height:7px; border-radius:var(--bb-r-pill); flex:none}
.cl-acard .cl-mode.cl-charge{background:var(--bb-lightblue-25); color:var(--fg-accent)}
.cl-acard .cl-mode.cl-charge .cl-dot{background:var(--bb-lightblue)}
.cl-acard .cl-mode.cl-discharge{background:color-mix(in srgb, var(--fg-highlight) 30%, transparent); color:var(--bb-yellow-ink)}
.cl-acard .cl-mode.cl-discharge .cl-dot{background:var(--fg-highlight)}
.cl-lane .cl-none{color:var(--bb-ink-40); font-size:13px; font-weight:500; padding-top:10px}

/* ===== ASSET ICON ANIMATIONS — live cards only =====
   Everything here is scoped to .cl-lane.cl-now: those assets are actually running. The
   next-hour lane is a forecast (dashed, muted) and deliberately stays still, same
   rule as past/now/future everywhere else. No new colours — the icons keep
   currentColor, so the --asset-* data-series palette stays out of the UI chrome. */

/* heat pump — the impeller turns. The centre dot is rotationally symmetric, so the
   whole 28px icon can spin without needing a hook inside the path. */
@keyframes cl-ic-spin{to{transform:rotate(360deg)}}
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="hp"] svg{animation:cl-ic-spin 3.4s linear infinite; transform-origin:50% 50%}

/* gas kettle — the flame licks: uneven scale + brightness, pinned to its own base */
@keyframes cl-ic-flame{
  0%,100%{transform:scale(1,1);     opacity:1}
  22%    {transform:scale(.90,1.14); opacity:.82}
  46%    {transform:scale(1.07,.93); opacity:1}
  70%    {transform:scale(.94,1.09); opacity:.88}
}
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="kettle"] .cl-ic-flame{
  transform-box:fill-box; transform-origin:50% 100%; animation:cl-ic-flame 1.15s ease-in-out infinite}

/* warmtebuffer — the level fills and drains. The hidden rect gets a fill here and grows
   upward from a fixed bottom edge (SVG y/height are animatable CSS properties), while the
   existing wave line rides on top of it as the surface — same timing, so they stay glued. */
/* bottom edge stays at 20.1 (the tank floor); the level runs ~a third → nearly full, so a
   buffer that is in service never reads as empty at the bottom of the cycle */
@keyframes cl-ic-buf-fill{ from{y:16.5px; height:3.6px} to{y:10.3px; height:9.8px} }
@keyframes cl-ic-buf-wave{ from{transform:translateY(3.5px)} to{transform:translateY(-2.7px)} }
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="buffer"] .cl-ic-buf-fill{
  fill:currentColor; fill-opacity:.22; animation:cl-ic-buf-fill 5.2s ease-in-out infinite alternate}
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="buffer"] .cl-ic-buf-wave{
  animation:cl-ic-buf-wave 5.2s ease-in-out infinite alternate}

/* CHP — exhaust puffs rise off the stack and thin out. Three circles on the same 2.7s
   loop, a third of a cycle apart, so the plume is continuous rather than pulsing. */
@keyframes cl-ic-chp-puff{
  0%  {transform:translateY(0)     scale(.6);  opacity:0}
  22% {                                        opacity:.5}
  100%{transform:translateY(-6px)  scale(1.3); opacity:0}
}
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="chp"] .cl-ic-chp-puff{
  fill:currentColor; transform-box:fill-box; transform-origin:50% 50%;
  animation:cl-ic-chp-puff 2.7s ease-out infinite}
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="chp"] .cl-ic-chp-puff:nth-of-type(2){animation-delay:.9s}
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="chp"] .cl-ic-chp-puff:nth-of-type(3){animation-delay:1.8s}

/* battery — the charge bar tracks the mode pill the card is already showing: charging
   fills left→right (x pinned), discharging empties right→left (right edge pinned), then
   the bar fades out and the loop restarts. The bolt pulses either way. */
@keyframes cl-ic-bat-charge{
  0%  {x:3.2px;  width:1.6px;  fill-opacity:.26}
  78% {x:3.2px;  width:12.6px; fill-opacity:.26}
  100%{x:3.2px;  width:12.6px; fill-opacity:0}
}
@keyframes cl-ic-bat-discharge{
  0%  {x:3.2px;  width:12.6px; fill-opacity:.26}
  78% {x:14.2px; width:1.6px;  fill-opacity:.26}
  100%{x:14.2px; width:1.6px;  fill-opacity:0}
}
@keyframes cl-ic-bat-bolt{ 0%,100%{opacity:1} 50%{opacity:.4} }
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="battery"] .cl-ic-bat-fill{fill:currentColor; fill-opacity:0}
.cl-lane.cl-now .cl-acard:has(.cl-mode.cl-charge) .cl-ic[data-asset="battery"] .cl-ic-bat-fill{
  animation:cl-ic-bat-charge 3.4s ease-in-out infinite}
.cl-lane.cl-now .cl-acard:has(.cl-mode.cl-discharge) .cl-ic[data-asset="battery"] .cl-ic-bat-fill{
  animation:cl-ic-bat-discharge 3.4s ease-in-out infinite}
.cl-lane.cl-now .cl-acard .cl-ic[data-asset="battery"] .cl-ic-bat-bolt{animation:cl-ic-bat-bolt 1.4s ease-in-out infinite}

/* CO₂ dosing — molecules drift across the whole card, behind the text.
   .cl-acard is already position:relative + overflow:hidden, so they clip at the edges. */
.cl-acard .cl-mols{position:absolute; inset:0; z-index:0; pointer-events:none}
.cl-acard.cl-has-mols > :not(.cl-mols){position:relative; z-index:1}   /* keep the readout on top */
.cl-acard .cl-mol{position:absolute; left:-34px; color:var(--bb-lightblue); opacity:.5;
  animation:cl-ic-mol-drift 9s linear infinite}
.cl-acard .cl-mol svg{display:block; width:calc(22px * var(--s,1)); height:calc(22px * var(--s,1))}
@keyframes cl-ic-mol-drift{ from{transform:translateX(0)} to{transform:translateX(236px)} }

@media (prefers-reduced-motion: reduce){
  .cl-lane.cl-now .cl-acard .cl-ic svg, .cl-lane.cl-now .cl-acard .cl-ic .cl-ic-flame,
  .cl-lane.cl-now .cl-acard .cl-ic .cl-ic-buf-fill, .cl-lane.cl-now .cl-acard .cl-ic .cl-ic-buf-wave,
  .cl-lane.cl-now .cl-acard .cl-ic .cl-ic-chp-puff, .cl-lane.cl-now .cl-acard .cl-ic .cl-ic-bat-fill,
  .cl-lane.cl-now .cl-acard .cl-ic .cl-ic-bat-bolt, .cl-acard .cl-mol{animation:none}
  .cl-lane.cl-now .cl-acard .cl-ic .cl-ic-chp-puff{fill:none}   /* no plume without the rise that explains it */
  .cl-acard .cl-mols{display:none}
  .cl-assetcard .cl-running .cl-dot, .cl-assetcard.cl-crit{animation:none}
}

/* ===== assets page ===== */
/* page header row: title block left, location filter right (wraps below on narrow screens) */
.cl-asset-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; margin-bottom:24px}
.cl-asset-head .cl-sec-head{margin-bottom:0}
/* location filter — same shape as the autonomy dial (.cl-pc-dial): a muted label outside, the
   choices inside a shared .cl-segctl pill. Only the label group is local; the control is reused. */
.cl-locfilter{display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:none}
.cl-locfilter .cl-loc-lbl{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3)}
.cl-locfilter .cl-loc-ic{display:inline-flex; align-items:center; width:15px; height:15px; flex:none}
.cl-locfilter .cl-loc-ic svg{width:15px; height:15px; display:block}
.cl-locfilter .cl-segctl .cl-opt{border-radius:var(--bb-r-pill); transition:background var(--bb-dur-fast) var(--bb-ease), color var(--bb-dur-fast) var(--bb-ease)}
.cl-locfilter .cl-segctl .cl-opt.cl-on{background:var(--bg-dark); color:var(--bb-white)}
/* Assets page: site selector + purpose-category tabs share one line, mirroring the target's
   single LOCATION filter row instead of two stacked controls. */
.cl-asset-filterbar{display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap}
/* The tabs' own bottom margin (for their standalone use) would enlarge their box in this row and
   push them above the site selector's centre line; the bar's mb-4 already spaces the row. */
.cl-asset-filterbar .bb-asset-tabs{margin-bottom:0}
/* Site <select> restyled to the same compact, pill-bordered chrome as .cl-hist-custom —
   a real <select> (not segctl pills) since the site count is unbounded, unlike the fixed
   4-option purpose-category set below. */
.cl-site-select{font-family:inherit; font-size:13px; font-weight:600; color:var(--fg-accent);
  background:var(--bb-control-fill); border:1px solid var(--border-2); border-radius:var(--bb-r-pill);
  padding:6px 14px; cursor:pointer}
.cl-site-select:focus-visible{outline:2px solid var(--fg-accent); outline-offset:2px}
/* Purpose-category tabs: cl-segctl pill shape, but the selected look stays keyed off .active —
   the class the shell JS already toggles client-side (bbSyncPurposeTabActive) — rather than a
   separate .cl-on, so the highlighted pill actually moves when a user clicks a different tab. */
.bb-asset-tabs.cl-segctl .bb-asset-tab.cl-opt{border-radius:var(--bb-r-pill); transition:background var(--bb-dur-fast) var(--bb-ease), color var(--bb-dur-fast) var(--bb-ease)}
.bb-asset-tabs.cl-segctl .bb-asset-tab.cl-opt.active{background:var(--bg-dark); color:var(--bb-white)}
.cl-locfilter .cl-segctl .cl-opt:focus-visible{outline:2px solid var(--fg-accent); outline-offset:2px}
/* minmax(0,1fr) keeps the two columns equal width; grid-auto-rows:1fr makes every row the same
   height (= the tallest card), so all cards line up — calm, even grid. No aspect-ratio: the card
   height now comes from the row, not from its width (which is what made the columns unequal). */
.cl-assetgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:18px}
.cl-assetcard{padding:28px; display:flex; flex-direction:column; min-width:0}
/* Card already pads 28px — drop the legacy bb-header/body side padding so the
   control row keeps those ~56px and ACTIVE/History stay inside the frame. */
.cl-assetcard .bb-asset-header{padding-left:0; padding-right:0; padding-top:0}
.cl-assetcard .bb-asset-body{padding-left:0; padding-right:0}
.cl-assetcard .bb-asset-attention-banner{margin-left:-28px; margin-right:-28px; padding-left:28px; padding-right:28px}
.cl-assetcard .cl-top{display:flex; align-items:flex-start; gap:15px}
.cl-assetcard .cl-top .cl-ic{width:38px; height:38px; flex:none; color:var(--fg-accent)}
.cl-assetcard .cl-top .cl-ic svg{width:38px; height:38px; display:block}
.cl-assetcard .cl-top .cl-nm{font-size:20px; font-weight:700; color:var(--fg-accent); line-height:1.15}
.cl-assetcard .cl-top .cl-ty{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-top:4px}
.cl-assetcard .cl-health{margin-left:auto; flex:none; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:var(--bb-r-pill); display:inline-flex; align-items:center; gap:6px}
/* Status sits in the control cluster (not alone in .cl-top) — don't let margin-left:auto
   inflate the row past the card edge. */
.cl-assetcard .bb-asset-header-right .cl-health{margin-left:0}
.cl-health .cl-dot{width:7px; height:7px; border-radius:50%; flex:none}
.cl-health.cl-ok{background:var(--bb-status-ok-tint); color:var(--bb-status-ok)} .cl-health.cl-ok .cl-dot{background:var(--bb-status-ok)}
.cl-health.cl-warn{background:var(--bb-status-warn-tint); color:var(--bb-status-warn)} .cl-health.cl-warn .cl-dot{background:var(--bb-status-warn)}
.cl-health.cl-down{background:var(--bb-status-crit-tint); color:var(--bb-status-crit)} .cl-health.cl-down .cl-dot{background:var(--bb-status-crit)}
/* top-right column: status badges on top, performance sparkline + history button below */
.cl-assetcard .cl-top .cl-topright{margin-left:auto; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.cl-assetcard .cl-top .cl-stat{flex:none; display:flex; align-items:center; gap:8px}
.cl-assetcard .cl-top .cl-stat .cl-health{margin-left:0}
/* performance: a small sparkline "icon" + a History button, both open the history modal */
.cl-assetcard .cl-dv .cl-u{font-size:.62em; font-weight:500; color:var(--fg-3)}
.cl-assetcard .cl-cap{margin:12px 0 16px}
.cl-assetcard .cl-cap + .cl-util .bb-asset-soc-value{color:var(--fg-3)}
.cl-assetcard .cl-cap-v{font-size:26px; font-weight:700; line-height:1.1; color:var(--fg-accent); font-variant-numeric:tabular-nums}
.cl-assetcard .cl-cap-l{margin-top:6px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3)}
.cl-assetcard .cl-perf{display:flex; align-items:center; gap:10px; cursor:pointer}
.cl-assetcard .cl-perf .cl-spark{display:block; width:78px; height:26px}
.cl-assetcard .cl-perf .cl-spark .cl-ln{fill:none; stroke:var(--fg-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cl-assetcard .cl-perf .cl-spark .cl-ar{fill:url(#spark-fade); stroke:none}
.cl-assetcard .cl-perf .cl-spark .cl-pt{fill:var(--fg-accent)}
/* mirrors the .cl-health pill's box metrics; JS then forces the exact width/height of the status badge */
.cl-histbtn{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:98px; font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; color:var(--fg-accent); background:var(--bb-lightblue-25); border:1px solid var(--bb-lightblue-50); border-radius:var(--bb-r-pill); padding:4px 9px; cursor:pointer; transition:background .15s}
.cl-histbtn:hover{background:var(--bb-lightblue-50)}
.cl-histbtn svg{width:13px; height:13px; flex:none}
.cl-assetcard .cl-perf:focus-visible{outline:2px solid var(--bb-lightblue); outline-offset:3px; border-radius:6px}
/* performance-history modal */
.cl-hist-ov{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bb-scrim)}
.cl-hist-card{width:560px; max-width:100%}
.cl-hist-card.cl-wide{width:1120px; max-height:calc(100vh - 48px); display:flex; flex-direction:column}
.cl-hist-card.cl-wide .cl-hist-body{flex:1; min-height:0; overflow:auto}
.cl-hist-hd{display:flex; align-items:flex-start; gap:16px; padding:20px 22px; border-bottom:1px solid var(--border-1)}
.cl-hist-hd{flex-wrap:wrap}
.cl-hist-hd .cl-segctl.cl-hist-range{margin-left:auto; align-self:center}
/* manual look-back, next to the presets — one pill split in two: number | unit, echoing the preset pill */
.cl-hist-custom{display:inline-flex; align-items:stretch; align-self:center; flex:none; overflow:hidden;
  border:1px solid var(--border-2); border-radius:var(--bb-r-pill); background:var(--bb-control-fill)}
.cl-hist-custom:focus-within{border-color:var(--fg-accent)}
.cl-hist-custom .cl-hc-n{width:52px; padding:6px 10px; border:none; border-radius:0; background:transparent;
  font-family:var(--bb-font-sans); font-size:12px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; color:var(--fg-1);
  -moz-appearance:textfield; appearance:textfield}   /* no spinner — the value is typed */
.cl-hist-custom .cl-hc-n::-webkit-outer-spin-button, .cl-hist-custom .cl-hc-n::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.cl-hist-custom .cl-hc-u{padding:6px 8px; border:none; border-left:1px solid var(--border-2); border-radius:0; background:transparent;
  font-family:var(--bb-font-sans); font-size:12px; font-weight:700; color:var(--fg-1); cursor:pointer}
.cl-hist-custom .cl-hc-n:focus, .cl-hist-custom .cl-hc-u:focus{outline:none}
/* the bare .cl-segctl paints its selection with a 2-option sliding thumb; this control has four,
   so it paints the selected option directly — same as .cl-pc-dial / .cl-locfilter do */
.cl-hist-range .cl-opt{border-radius:var(--bb-r-pill); transition:background var(--bb-dur-fast) var(--bb-ease), color var(--bb-dur-fast) var(--bb-ease)}
.cl-hist-range .cl-opt.cl-on{background:var(--bg-dark); color:var(--bb-white)}
.cl-hist-card.cl-wide .cl-hist-x{margin-left:0}
/* scrub readout — which moment the legend values belong to */
.cl-hist-when{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-bottom:6px; min-height:14px}
.cl-hist-chart.cl-multi{width:100%; height:auto; display:block; cursor:crosshair}
.cl-hist-chart.cl-multi .cl-hist-xlab{font-size:11px; fill:var(--fg-3); font-weight:600}   /* anchor set per label, so edge labels stay inside the plot */
.cl-hist-chart.cl-multi .cl-hist-ylab{font-size:11px; fill:var(--fg-3); font-weight:600}
.cl-hist-chart.cl-multi .cl-hist-yaxis{stroke:var(--border-1); stroke-width:1}
.cl-hist-chart.cl-multi .cl-hist-runlbl{font-size:10px; fill:var(--fg-3); font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.cl-hist-chart.cl-multi .cl-hist-cross{stroke:var(--fg-accent); stroke-width:1; stroke-dasharray:3 4; opacity:.55}
/* legend doubles as the series on/off control and the value readout */
.cl-hist-legend{display:flex; flex-wrap:wrap; gap:8px; padding:14px 22px 0}
.cl-hl-chip{display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid var(--border-1);
  background:var(--bb-control-fill); border-radius:var(--bb-r-pill); cursor:pointer; font-family:inherit; text-align:left;
  transition:background var(--bb-dur-fast) var(--bb-ease), opacity var(--bb-dur-fast) var(--bb-ease)}
.cl-hl-chip:hover{background:var(--bb-lightblue-25)}
.cl-hl-chip.cl-off{opacity:.4}
.cl-hl-chip.cl-off .cl-hl-dot{background:var(--bb-ink-40)!important}
.cl-hl-dot{width:9px; height:9px; border-radius:50%; flex:none}
.cl-hl-txt{display:flex; flex-direction:column; gap:3px}
.cl-hl-lbl{font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); white-space:nowrap}
.cl-hl-val{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg-accent); line-height:1}
.cl-hl-val .cl-u{font-size:10px; font-weight:500; color:var(--fg-3); margin-left:3px}
.cl-hist-hint{padding:10px 22px 20px; margin:0}
.cl-hist-hd .cl-hti{font-size:18px; font-weight:700; color:var(--fg-accent)}
.cl-hist-hd .cl-hsub{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-top:5px}
.cl-hist-x{margin-left:auto; flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--border-1); background:var(--bb-bg-2); color:var(--fg-accent); font-size:18px; line-height:1; cursor:pointer}
.cl-hist-x:hover{background:var(--bb-lightblue-25)}
.cl-hist-body{padding:20px 22px 6px}
.cl-hist-chart{width:100%; height:auto; display:block}
.cl-hist-chart .cl-ln{fill:none; stroke:var(--fg-accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.cl-hist-chart .cl-ar{fill:url(#spark-fade); stroke:none}
.cl-hist-chart .cl-gl{stroke:var(--border-1); stroke-width:1}
.cl-hist-chart .cl-pt{fill:var(--fg-accent)}
.cl-hist-ft{display:flex; gap:28px; padding:14px 22px 22px}
.cl-hist-ft .cl-s .cl-sv{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg-accent); line-height:1}
.cl-hist-ft .cl-s .cl-sv.cl-dn{color:var(--bb-status-crit)}
.cl-hist-ft .cl-s .cl-sl{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-top:6px}
/* running now → green "live" pill with a light-green pulsing halo */
.cl-assetcard .cl-running{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:var(--bb-r-pill); background:var(--bb-status-ok-tint); color:var(--bb-status-ok)}
.cl-assetcard .cl-running .cl-dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--bb-status-ok); animation:cl-live-pulse 1.6s ease-in-out infinite}
@keyframes cl-live-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--bb-status-ok) 55%, transparent)} 70%,100%{box-shadow:0 0 0 6px color-mix(in srgb, var(--bb-status-ok) 0%, transparent)}}
/* red shadow only — same soft shape as --bb-shadow-tile, no ring/border (rgba = --bb-status-crit at alpha) */
/* Attention → static red shadow */
.cl-assetcard.cl-attn{box-shadow:0 12px 32px -8px color-mix(in srgb, var(--bb-status-crit) 40%, transparent), 0 3px 10px color-mix(in srgb, var(--bb-status-crit) 18%, transparent)}
/* Down → red shadow that pulses */
.cl-assetcard.cl-crit{animation:cl-shadow-pulse 1.8s ease-in-out infinite}
@keyframes cl-shadow-pulse{
  0%,100%{box-shadow:0 12px 30px -10px color-mix(in srgb, var(--bb-status-crit) 28%, transparent), 0 3px 10px color-mix(in srgb, var(--bb-status-crit) 12%, transparent)}
  50%{box-shadow:0 16px 40px -6px color-mix(in srgb, var(--bb-status-crit) 55%, transparent), 0 4px 14px color-mix(in srgb, var(--bb-status-crit) 28%, transparent)}
}
.cl-assetcard .cl-metrics{display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:22px}
.cl-assetcard .cl-metrics .cl-m .cl-mv{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg-accent); line-height:1}
.cl-assetcard .cl-metrics .cl-m .cl-mv .cl-u{font-size:12px; font-weight:500; color:var(--fg-3); margin-left:2px}
.cl-assetcard .cl-metrics .cl-m .cl-ml{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-top:7px}
.cl-assetcard .cl-util{margin-top:22px}
.cl-assetcard .cl-util .cl-ut{display:flex; justify-content:space-between; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px}
.cl-assetcard .cl-bar-track{height:9px; border-radius:var(--bb-r-pill); background:var(--bb-lightblue-25); overflow:hidden}
.cl-assetcard .cl-bar-fill{height:100%; border-radius:var(--bb-r-pill); background:var(--bg-dark)}
.cl-assetcard .cl-issue{margin-top:auto; padding-top:18px; border-top:1px solid var(--border-1); display:flex; gap:11px; font-size:14px; color:var(--bb-status-crit); line-height:1.5}
.cl-assetcard .cl-issue .cl-ist{flex:none; width:18px; height:18px; margin-top:1px}
.cl-assetcard .cl-issue.cl-ok{color:var(--fg-3)}
/* The attention banner reuses .cl-issue's icon/text treatment but keeps its ORIGINAL top
   position (immediately visible) instead of the target's bottom-of-card issue row — see
   .bb-asset-attention-banner above for its own background/border-bottom. Neutralize the
   bottom-stick + divider declarations, which only make sense for the true bottom issue row. */
.bb-asset-attention-banner.cl-issue{margin-top:0; padding-top:10px; border-top:none}
.cl-assetcard.cl-crit .cl-issue{font-weight:700}   /* down asset: its issue is the headline — bold red */
/* subtle "last updated" freshness stamp at the very bottom of the card */
.cl-assetcard .cl-updated{display:flex; align-items:center; gap:6px; margin-top:14px; font-size:11px; font-weight:600; color:var(--fg-3)}
.cl-assetcard .cl-updated svg{width:12px; height:12px; flex:none; opacity:.75}
/* live telemetry detail — heat pump card (sits in the open field under Utilization today) */
.cl-assetcard .cl-detail{margin-top:22px; padding-top:20px; border-top:1px solid var(--border-1); display:grid; grid-template-columns:1fr 1fr; gap:15px 22px}
.cl-assetcard .cl-detail .cl-d{display:flex; flex-direction:column; gap:5px}
.cl-assetcard .cl-detail .cl-d.cl-wide{grid-column:1 / -1}
/* daily totals row — three across, divided from the live "now" readings above */
/* padding-bottom mirrors padding-top so the gap under the totals to the next divider matches the gap above them */
.cl-assetcard .cl-detail .cl-foot3{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:15px 22px; padding-top:17px; padding-bottom:17px; margin-top:3px; border-top:1px solid var(--border-1)}
.cl-assetcard .cl-detail .cl-dl{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3)}
.cl-assetcard .cl-detail .cl-dv{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg-accent); line-height:1}
.cl-assetcard .cl-detail .cl-dv .cl-u{font-size:11px; font-weight:500; color:var(--fg-3); margin-left:3px}

/* .cl-assetgrid has no responsive fallback in the source prototype (desktop-only design) —
   collapse to one column below tablet width so cards don't get crushed on the live Assets page. */
@media (max-width: 900px) {
  .cl-assetgrid { grid-template-columns: 1fr; }
}

/* ===== ALARMS PAGE ===== */
/* overview strip — total on the left, a proportional severity bar + legend on the right.
   Deliberately not a row of boxy tiles: one calm surface, the colour ladder read at a glance. */
.cl-alm-ov{display:flex; align-items:center; gap:30px; padding:20px 26px; margin-bottom:22px;
  border:1px solid var(--border-1); border-radius:var(--bb-r-2xs);
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur)}
.cl-alm-ov-head{flex:none; display:flex; flex-direction:column; gap:3px; padding-right:30px; border-right:1px solid var(--border-1)}
.cl-alm-ov-total{font-size:38px; font-weight:700; line-height:1; color:var(--fg-accent); font-variant-numeric:tabular-nums}
.cl-alm-ov-cap{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3)}
.cl-alm-ov-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:14px}
.cl-alm-ov-bar{display:flex; gap:3px; height:12px}
/* own class name — a global .cl-seg (chart segments) sets position:absolute and would break these */
.cl-alm-ov-seg{min-width:10px; border-radius:3px}
.cl-alm-ov-seg.cl-sev-critical{background:var(--bb-sev-critical)}
.cl-alm-ov-seg.cl-sev-serious{background:var(--bb-sev-serious)}
.cl-alm-ov-seg.cl-sev-warning{background:var(--bb-sev-warning)}
.cl-alm-ov-seg.cl-sev-notice{background:var(--bb-sev-notice)}
.cl-alm-ov-legend{display:flex; flex-wrap:wrap; gap:22px}
.cl-alm-ov-legend .cl-lg{display:inline-flex; align-items:baseline; gap:8px; font-size:13px; font-weight:600; color:var(--fg-2)}
.cl-alm-ov-legend .cl-lg .cl-d{width:9px; height:9px; border-radius:2px; flex:none; align-self:center}
.cl-alm-ov-legend .cl-lg b{font-weight:700; color:var(--fg-accent); font-variant-numeric:tabular-nums}
.cl-alm-ov-legend .cl-lg.cl-sev-critical .cl-d{background:var(--bb-sev-critical)}
.cl-alm-ov-legend .cl-lg.cl-sev-serious .cl-d{background:var(--bb-sev-serious)}
.cl-alm-ov-legend .cl-lg.cl-sev-warning .cl-d{background:var(--bb-sev-warning)}
.cl-alm-ov-legend .cl-lg.cl-sev-notice .cl-d{background:var(--bb-sev-notice)}
@media(max-width:640px){
  .cl-alm-ov{flex-direction:column; align-items:stretch; gap:18px}
  .cl-alm-ov-head{flex-direction:row; align-items:baseline; gap:10px; padding-right:0; border-right:none; padding-bottom:16px; border-bottom:1px solid var(--border-1)}
}

.cl-alm-card{overflow:hidden}
.cl-alm-table{width:100%; border-collapse:collapse; font-size:14px}
.cl-alm-table thead th{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3);
  text-align:left; padding:16px 18px; border-bottom:1px solid var(--border-1); white-space:nowrap; background:var(--bb-bg-2)}
.cl-alm-table tbody td{padding:16px 18px; border-bottom:1px solid var(--border-1); vertical-align:middle; color:var(--fg-2)}
.cl-alm-table tbody tr:last-child td{border-bottom:none}
.cl-alm-table tbody tr:hover{background:var(--bb-lightblue-25)}
.cl-alm-code{font-family:var(--bb-font-sans); font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg-accent); white-space:nowrap}
.cl-alm-msg{color:var(--fg-2); line-height:1.5; max-width:38ch}
.cl-alm-when{display:block; margin-top:5px; font-size:11.5px; color:var(--bb-ink-40); font-weight:500}
.cl-alm-machine{font-weight:700; color:var(--fg-accent); white-space:nowrap}
/* machine-status pill — the .cl-health colour classes (ok/warn/down) are global; the pill
   SHAPE lives on .cl-assetcard .cl-health, so re-declare the shape here (without the card's
   margin-left:auto). Colours + tints still come from the shared status tokens. */
.cl-alm-table .cl-health{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--bb-r-pill); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}

/* severity badge — colour ladder from the --sev-* tokens */
.cl-sev{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px;
  border-radius:var(--bb-r-pill); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.cl-sev .cl-dot{width:7px; height:7px; border-radius:50%; flex:none}
.cl-sev.cl-sev-critical{background:var(--bb-sev-critical-tint); color:var(--bb-sev-critical)} .cl-sev.cl-sev-critical .cl-dot{background:var(--bb-sev-critical)}
.cl-sev.cl-sev-serious{background:var(--bb-sev-serious-tint); color:var(--bb-sev-serious)}    .cl-sev.cl-sev-serious .cl-dot{background:var(--bb-sev-serious)}
.cl-sev.cl-sev-warning{background:var(--bb-sev-warning-tint); color:var(--bb-sev-warning)}    .cl-sev.cl-sev-warning .cl-dot{background:var(--bb-sev-warning)}
.cl-sev.cl-sev-notice{background:var(--bb-sev-notice-tint); color:var(--bb-sev-notice)}       .cl-sev.cl-sev-notice .cl-dot{background:var(--bb-sev-notice)}

/* alarm workflow state — outlined pills, distinct from the filled severity badge */
.cl-astate{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px;
  border-radius:var(--bb-r-pill); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid var(--border-2); color:var(--fg-3)}
.cl-astate .cl-dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--border-2)}
.cl-astate.cl-as-new{border-color:var(--fg-accent); color:var(--fg-accent)} .cl-astate.cl-as-new .cl-dot{background:var(--bg-dark)}
.cl-astate.cl-as-prog{border-color:var(--bb-sev-warning); color:var(--bb-sev-warning); background:var(--bb-sev-warning-tint)} .cl-astate.cl-as-prog .cl-dot{background:var(--bb-sev-warning)}

/* view-all footer link in the header alarm popup */
.cl-alarm-pop-ft{display:block; width:100%; text-align:left; padding:13px 16px; font-size:12.5px; font-weight:700; color:var(--fg-accent);
  background:var(--bb-bg-2); border:none; border-top:1px solid var(--border-1); cursor:pointer; transition:background var(--bb-dur-fast) var(--bb-ease)}
.cl-alarm-pop-ft:hover{background:var(--bb-lightblue-25)}

@media(max-width:720px){
  .cl-alm-table thead{display:none}
  .cl-alm-table tbody td{display:block; border-bottom:none; padding:4px 18px}
  .cl-alm-table tbody tr{display:block; border-bottom:1px solid var(--border-1); padding:12px 0}
  .cl-alm-table tbody td[data-lbl]::before{content:attr(data-lbl); display:block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-bottom:4px}
}

/* ===== buffer status (dashboard) ===== */
.cl-bufgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:720px){ .cl-bufgrid{grid-template-columns:1fr} }
.cl-bufcard{padding:18px 20px; display:flex; flex-direction:column; aspect-ratio:1; position:relative}
.cl-bufcard .cl-bc-stamp{position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--bb-warn-text); background:var(--bb-warn-bg);
  border:1px solid var(--bb-warn-border); border-radius:var(--bb-r-xs);
  padding:3px 8px; white-space:nowrap; pointer-events:none}
.cl-bufcard .cl-bc-top{display:flex; align-items:center; gap:9px; margin-top:18px}
.cl-bufcard .cl-bc-ic{width:22px; height:22px; flex:none; color:var(--fg-accent)}
.cl-bufcard .cl-bc-ic svg{width:22px; height:22px; display:block}
.cl-bufcard .cl-bc-nm{font-size:13px; font-weight:700; color:var(--fg-accent)}
.cl-bufcard .cl-bc-pct{margin-left:auto; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.cl-bufcard .cl-bc-pct .cl-u{font-size:12px; font-weight:600; color:var(--fg-3); margin-left:1px}
.cl-bufcard .cl-bc-chart{flex:1; display:flex; min-height:0; margin:16px 0 0}
.cl-bufcard .cl-bc-yax{width:34px; flex:none; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; padding-right:7px}
.cl-bufcard .cl-bc-yax span{font-size:calc(var(--bb-chart-fs)*.9); font-weight:600; color:var(--fg-3); font-variant-numeric:tabular-nums; line-height:1}
.cl-bufcard .cl-bc-plot{flex:1; position:relative; min-width:0; border-left:1px solid var(--border-2); border-bottom:1px solid var(--border-2)}
.cl-bufcard .cl-bc-spark{position:absolute; inset:0; width:100%; height:100%; display:block}
/* Series colour per storage asset, as in the prototype: battery green, heat buffer orange, other
   storage (liquid CO₂) brand blue. The % readout, line, area, now-marker and fill bar all use it. */
.cl-bufcard{--cl-buf-c:var(--fg-accent)}
.cl-bufcard.cl-buf-bat{--cl-buf-c:var(--bb-series-charge)}
.cl-bufcard.cl-buf-heat{--cl-buf-c:var(--bb-series-boiler)}
.cl-bufcard .cl-bc-pct{color:var(--cl-buf-c)}
.cl-bufcard .cl-bc-spark .cl-bc-mid{stroke:var(--bb-ink-10); stroke-dasharray:2 3}
.cl-bufcard .cl-bc-spark .cl-bc-area{fill:var(--cl-buf-c); fill-opacity:.12}
.cl-bufcard .cl-bc-spark .cl-bc-line{fill:none; stroke:var(--cl-buf-c); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round}
.cl-bufcard .cl-bc-spark .cl-bc-now{stroke:var(--cl-buf-c); stroke-width:1.5; stroke-dasharray:2 2}
/* the planned level (right of "now") — dashed, never solid */
.cl-bufcard .cl-bc-spark .cl-bc-fcst{fill:none; stroke:var(--cl-buf-c); stroke-width:1.5; stroke-dasharray:4 4; stroke-linejoin:round; opacity:.85}
.cl-bufcard .cl-bc-now-tri{color:var(--cl-buf-c)}
.cl-bufcard .cl-bc-bar>span{background:var(--cl-buf-c)}
/* "now" marker on the mini-charts: a down-pointing triangle at the top of the dashed line. */
.cl-bufcard .cl-bc-now-tri{position:absolute; top:0; z-index:2; width:0; height:0; transform:translateX(-50%);
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor;
  pointer-events:none}
.cl-bufcard .cl-bc-xax{position:relative; height:13px; margin:5px 0 0 34px}
.cl-bufcard .cl-bc-xax span{position:absolute; transform:translateX(-50%); font-size:calc(var(--bb-chart-fs)*.9); font-weight:600; color:var(--fg-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.cl-bufcard .cl-bc-sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; font-weight:600; color:var(--fg-3); font-variant-numeric:tabular-nums; margin-top:11px}
.cl-bufcard .cl-bc-bar{height:11px; border-radius:var(--bb-r-pill); background:var(--bb-lightblue-25); overflow:hidden; margin-top:18px; margin-bottom:4px}
.cl-bufcard .cl-bc-bar>span{display:block; height:100%; border-radius:var(--bb-r-pill)}
.cl-bufcard .cl-bc-eta{font-weight:700; color:var(--fg-accent)}
.cl-bufcard .cl-bc-eta.cl-warn{color:var(--bb-status-warn)}
/* NOTE: .cl-eta / .cl-eta.cl-warn are unused — no element carries the `eta` class (only `bc-eta`,
   which does not match). Leftover from dashboard.cl-html; safe to delete. */
.cl-eta{font-size:11px; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:var(--bb-r-pill); white-space:nowrap; background:var(--bb-lightblue-25); color:var(--fg-accent)}
.cl-eta.cl-warn{background:var(--bb-status-crit-tint); color:var(--bb-status-crit)}
/* projected-empty marker inside the CO₂ chart */
.cl-empty-marker{position:absolute; top:0; bottom:0; width:0; border-left:2px dashed var(--bb-asset-boiler); z-index:3}
.cl-empty-tag{position:absolute; top:4px; transform:translateX(-50%); background:var(--bb-asset-boiler); color:var(--bb-white); font-size:10px; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:var(--bb-r-pill); white-space:nowrap; z-index:4}
/* refill warning banner */
.cl-buf-alert{display:flex; align-items:flex-start; gap:11px; background:color-mix(in srgb, var(--bb-heat) 12%, transparent); border:1px solid color-mix(in srgb, var(--bb-heat) 45%, transparent); border-radius:var(--bb-r); padding:14px 16px; margin-bottom:14px; color:var(--bb-status-crit)}
.cl-buf-alert .cl-ic{flex:none; width:20px; height:20px; margin-top:1px}
.cl-buf-alert .cl-tx{font-size:13.5px; font-weight:600; color:var(--fg-1); line-height:1.45}
.cl-buf-alert .cl-tx b{color:var(--bb-status-crit)}
.cl-buf-alert .cl-x{margin-left:auto; flex:none; background:none; border:none; cursor:pointer; color:var(--fg-3); font-size:18px; line-height:1; padding:0 2px}

/* ===== settings page — icon rail + one standing parameter panel ===== */
/* grid, not flex — equal tracks keep all eight cards exactly the same size, so their bottom
   edges line up. Column count drops on narrower screens; the cards stay square either way. */
/* column count steps down gradually: the cards keep a fixed proportion, so dropping straight from
   8 to 4 would double the tile size. These steps keep it in a sane range at every width. */
.cl-set-rail{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--bb-set-rail-gap)}
@media(max-width:960px){ .cl-set-rail{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media(max-width:760px){ .cl-set-rail{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(max-width:560px){ .cl-set-rail{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} }
.cl-set-railbtn{position:relative; aspect-ratio:var(--bb-set-tile-ratio);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
  padding:10px 8px; background:var(--bb-control-fill); border:1px solid var(--border-1); border-radius:var(--bb-r-2xs);
  font-family:var(--bb-font-sans); text-align:center; cursor:pointer;
  transition:background var(--bb-dur-fast) var(--bb-ease), border-color var(--bb-dur-fast) var(--bb-ease), box-shadow var(--bb-dur-fast) var(--bb-ease)}
.cl-set-railbtn .cl-ic{width:30px; height:30px; flex:none; color:var(--fg-accent); transition:color var(--bb-dur-fast) var(--bb-ease)}
.cl-set-railbtn .cl-ic svg{width:30px; height:30px; display:block}
.cl-set-railbtn .cl-lb{font-size:11.5px; font-weight:700; letter-spacing:.01em; color:var(--fg-2); line-height:1.3; text-wrap:balance}
.cl-set-railbtn:hover{border-color:var(--fg-accent); box-shadow:var(--bb-shadow-sm)}
.cl-set-railbtn:focus-visible{outline:2px solid var(--fg-accent); outline-offset:2px}
.cl-set-railbtn[aria-selected="true"]{background:var(--bg-dark); border-color:var(--fg-accent)}
.cl-set-railbtn[aria-selected="true"] .cl-ic{color:var(--fg-highlight)}
.cl-set-railbtn[aria-selected="true"] .cl-lb{color:var(--bb-white)}

/* one standing panel below the rail — contents swap, the frame stays put.
   Blue top line marks it as the live panel, the way .cl-lane.cl-now .cl-acard uses a yellow one */
.cl-set-detail{margin-top:18px; background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  border:1px solid var(--border-1);
  border-top:3px solid var(--fg-accent);
  border-radius:var(--bb-r); box-shadow:var(--bb-shadow-tile); overflow:hidden}
/* min-height is raised at runtime to the tallest group so the footer never shifts when you switch
   group (see lockSetPanelHeight); the value here is only the no-JS floor */
.cl-sd-body{padding:26px 24px; min-height:240px}
.cl-set-panel{display:none}
/* fixed column count — auto-fit would stretch a lone field across the whole page */
.cl-set-panel.cl-on{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 28px; align-items:start}
.cl-set-panel.cl-on > .cl-full{grid-column:1 / -1}
@media(max-width:900px){ .cl-set-panel.cl-on{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .cl-set-panel.cl-on{grid-template-columns:minmax(0,1fr)} }
.cl-set-block{display:flex; flex-direction:column; gap:7px}
.cl-set-field{display:flex; flex-direction:column; gap:7px}
.cl-set-field label{font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--fg-2)}
.cl-set-field .cl-hint, .cl-set-block .cl-hint{font-size:11.5px; font-weight:400; color:var(--fg-3); line-height:1.45; display:block}
.cl-set-battotal{font-size:12.5px; font-weight:700; color:var(--fg-accent); font-variant-numeric:tabular-nums}
.cl-set-battotal #set-bat-total-n{color:var(--fg-accent)}
.cl-set-battotal.cl-warn{color:var(--bb-asset-boiler)}
.cl-set-battotal.cl-warn #set-bat-total-n{color:var(--bb-asset-boiler)}
.cl-set-batwarn{display:flex; align-items:center; gap:7px; margin-top:8px; font-size:12px; font-weight:600; color:var(--bb-status-crit)}
.cl-set-batwarn .cl-ic{font-size:13px}
.cl-set-inp{display:flex; align-items:stretch; border:1px solid var(--border-2); border-radius:var(--bb-r-field); overflow:hidden; background:var(--bb-control-fill); transition:border-color var(--bb-dur-fast) var(--bb-ease)}
.cl-set-inp:focus-within{border-color:var(--fg-accent)}
.cl-set-inp input{flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:var(--bb-font-sans); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; color:var(--fg-1); padding:11px 13px}
.cl-set-inp .cl-unit{flex:none; font-size:12px; font-weight:700; color:var(--fg-3); padding:0 13px; border-left:1px solid var(--border-1); background:var(--bb-bg-2); display:flex; align-items:center}
.cl-set-actions{display:flex; gap:12px; align-items:center; margin-top:26px}
.cl-set-saved{font-size:13px; font-weight:600; color:var(--bb-status-ok); opacity:0; transition:opacity var(--bb-dur-base) var(--bb-ease)}
.cl-set-saved.cl-show{opacity:1}
.cl-set-note{margin:14px 0 0; font-size:12.5px; font-weight:300; color:var(--fg-3); line-height:1.5}
/* settings toggle (checkbox switch) */
.cl-set-toggle{display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer}
.cl-set-toggle .cl-tg-txt{font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--fg-2)}
.cl-set-toggle input{position:absolute; opacity:0; width:0; height:0}
.cl-set-toggle .cl-tg-sw{flex:none; width:38px; height:22px; border-radius:11px; background:var(--border-2); position:relative; transition:background var(--bb-dur-fast) var(--bb-ease)}
/* Toggle thumb is a small opaque physical affordance (needs guaranteed contrast on the track
   regardless of visual language) — same exception class as .cl-card.cl-dark / .cl-logo above. */
.cl-set-toggle .cl-tg-sw::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--bb-white); box-shadow:0 1px 2px color-mix(in srgb, var(--fg-1) 25%, transparent); transition:transform var(--bb-dur-fast) var(--bb-ease)}
.cl-set-toggle input:checked + .cl-tg-sw{background:var(--bg-dark)}
.cl-set-toggle input:checked + .cl-tg-sw::after{transform:translateX(16px)}
.cl-set-toggle input:focus-visible + .cl-tg-sw{outline:2px solid var(--fg-accent); outline-offset:2px}
.cl-set-total{padding-top:14px; border-top:1px solid var(--border-1); display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.cl-set-total .cl-lbl{font-size:12.5px; font-weight:700; color:var(--fg-accent)}
.cl-set-total .cl-val{font-size:16px; font-weight:700; color:var(--fg-accent); font-variant-numeric:tabular-nums}
.cl-gr-statusrow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cl-gr-statusrow .cl-gr-stlbl{font-size:13px; font-weight:600; color:var(--fg-2)}
.cl-gr-status{font-family:var(--bb-font-sans); font-weight:600; font-size:13px; color:var(--fg-1); background:var(--bb-control-fill); border:1px solid var(--border-2); border-radius:6px; padding:6px 10px; cursor:pointer}
.cl-gr-status:focus{outline:none; border-color:var(--fg-accent)}

/* ===== extensions page ===== */
/* exactly three widgets across on desktop; the 1fr columns keep every card the same width and
   a fixed height keeps them all the same size. Steps down to two, then one, on narrower screens
   (a full-width fixed-height card wastes space, so the last step lets the height follow content).
   padding:22px is equal on all four sides, so the gap above the top row matches the gap below
   the footer buttons. */
.cl-extgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:960px){ .cl-extgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .cl-extgrid{grid-template-columns:1fr} }
.cl-extcard{display:flex; flex-direction:column; padding:22px; height:204px; overflow:hidden; cursor:pointer; transition:box-shadow var(--bb-dur-fast) var(--bb-ease), transform var(--bb-dur-fast) var(--bb-ease)}
.cl-extcard:hover{transform:translateY(-2px); box-shadow:0 10px 30px color-mix(in srgb, var(--fg-accent) 14%, transparent)}
.cl-extcard:focus-visible{outline:2px solid var(--fg-accent); outline-offset:2px}
@media(max-width:640px){ .cl-extcard{height:auto} }
.cl-extcard .cl-top{display:flex; align-items:flex-start; gap:14px}
.cl-extcard .cl-xic{width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--bb-lightblue-25); color:var(--fg-accent)}
.cl-extcard .cl-xic svg{width:24px; height:24px; display:block}
.cl-extcard .cl-nm{font-size:16px; font-weight:700; color:var(--fg-accent); line-height:1.2}
.cl-extcard .cl-tag{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-top:5px}
.cl-extcard .cl-desc{font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:14px 0 0; font-weight:300}
.cl-extcard .cl-xfoot{margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.cl-extcard .cl-xfoot .cl-btn svg{vertical-align:-2px}
.cl-extcard .cl-meta{font-size:11.5px; font-weight:600; color:var(--fg-3); font-variant-numeric:tabular-nums}
.cl-xbadge{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:var(--bb-r-pill)}
.cl-xbadge.cl-installed{background:var(--bb-status-ok-tint); color:var(--bb-status-ok)}
.cl-xbadge.cl-soon{background:var(--bb-lightblue-25); color:var(--fg-accent)}
.cl-xprice{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:var(--bb-r-pill); background:color-mix(in srgb, var(--fg-highlight) 30%, transparent); color:var(--bb-yellow-ink)}
/* feature-request: button on the title line (top-right) + its pop-up form */
.cl-ext-head-row{display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap}
.cl-ext-head-row h2{margin:0}
.cl-ext-fr-btn{flex:none}                       /* on the same line as the title — identical in NL and EN */
#fr-modal .cl-exm-card{width:min(640px,100%)}
#fr-modal .cl-kicker{display:block; padding-right:34px}
#fr-modal .cl-fr-desc{color:var(--fg-2); font-size:13.5px; font-weight:300; line-height:1.6; margin:10px 0 2px}
.cl-fr-field{display:flex; flex-direction:column; gap:6px; margin-top:14px}
.cl-fr-lbl{font-size:12px; font-weight:700; color:var(--fg-accent)}
.cl-fr-input, #fr-modal textarea{width:100%; box-sizing:border-box; font-family:var(--bb-font-sans); font-size:14px; line-height:1.5; color:var(--fg-1); border:1px solid var(--border-2); border-radius:var(--bb-r-field); padding:10px 12px; outline:none; background:var(--bb-control-fill)}
.cl-fr-input:focus, #fr-modal textarea:focus{border-color:var(--fg-accent)}
#fr-modal textarea{min-height:120px; resize:vertical}
/* NOTE: the chevron colour (#18426e) is baked into this data URI and cannot read a CSS
   var() — a data URI is a static string. Re-colouring it correctly needs a decorative wrapper
   element with mask-image, which is an HTML change, not a CSS one; out of scope for this
   CSS-only merge. Documented limitation, not a silent gap — see the cl-v2 migration plan. */
select.cl-fr-input{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2318426e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center}
/* voice input — record a spoken request (client-side only) */
.cl-fr-voice{display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 12px; border:1px dashed var(--border-2); border-radius:var(--bb-r-field); background:var(--bb-lightblue-25)}
.cl-fr-mic{position:relative; flex:none; width:44px; height:44px; display:grid; place-items:center; border:none; border-radius:50%; background:var(--bg-dark); color:var(--bb-white); cursor:pointer; transition:background var(--bb-dur-fast) var(--bb-ease)}
.cl-fr-mic:disabled{opacity:.4; cursor:not-allowed}
.cl-fr-mic svg{width:20px; height:20px}
.cl-fr-mic.cl-rec{background:var(--bb-status-crit)}
.cl-fr-mic.cl-rec::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--bb-status-crit); animation:cl-fr-pulse 1.2s ease-out infinite}
@keyframes cl-fr-pulse{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.6); opacity:0}}
.cl-fr-voice-status{font-size:13px; font-weight:600; color:var(--fg-2); font-variant-numeric:tabular-nums}
/* let the native player keep its intrinsic height — forcing it shorter pushes the internal
   controls to the top of the box; flex centring then keeps the whole player on the row's midline */
.cl-fr-voice audio{flex:1; min-width:140px; align-self:center}
.cl-fr-voice-del{flex:none; width:34px; height:34px; display:grid; place-items:center; align-self:center; border:1px solid var(--border-2); border-radius:8px; background:var(--bb-control-fill); color:var(--fg-3); cursor:pointer; font-size:16px; line-height:1}
.cl-fr-voice-del:hover{color:var(--bb-status-crit); border-color:var(--bb-status-crit)}
.cl-fr-voice-del[hidden]{display:none}         /* author display must not defeat the hidden attribute */
/* footer: Cancel and Send request stay the same height (single line, equal padding) */
.cl-fr-foot{display:flex; align-items:center; gap:12px; margin-top:20px}
.cl-fr-foot .cl-btn{padding:9px 18px; font-size:12.5px; white-space:nowrap}
.cl-ext-req-ok{margin-right:auto; font-size:13px; font-weight:600; color:var(--bb-status-ok); opacity:0; transition:opacity var(--bb-dur-base) var(--bb-ease)}
.cl-ext-req-ok.cl-show{opacity:1}
/* ---- shared modal chassis (extension detail + feature request) ---- */
.cl-bb-modal{position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:24px}
.cl-bb-modal.cl-open{display:flex}
.cl-bb-modal .cl-exm-backdrop{position:absolute; inset:0; background:var(--bb-scrim)}
.cl-bb-modal .cl-exm-card{position:relative; z-index:1; width:min(520px,100%); max-height:88vh; overflow:auto;
  display:flex; flex-direction:column; padding:26px;
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  border:1px solid var(--border-2); border-radius:var(--bb-r-sm); box-shadow:0 24px 60px var(--bb-scrim-strong)}
.cl-bb-modal .cl-exm-x{position:absolute; top:14px; right:14px; width:34px; height:34px; display:grid; place-items:center;
  border:none; border-radius:8px; background:transparent; color:var(--fg-3); cursor:pointer; font-size:20px; line-height:1}
.cl-bb-modal .cl-exm-x:hover{background:var(--bb-lightblue-25); color:var(--fg-accent)}
#ext-modal .cl-exm-head{display:flex; align-items:flex-start; gap:16px; padding-right:34px}
#ext-modal .cl-exm-head .cl-xic{width:54px; height:54px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--bb-lightblue-25); color:var(--fg-accent)}
#ext-modal .cl-exm-head .cl-xic svg{width:28px; height:28px; display:block}
#ext-modal .cl-exm-head .cl-nm{font-size:20px; font-weight:800; color:var(--fg-accent); line-height:1.2}
#ext-modal .cl-exm-head .cl-tag{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); margin-top:5px}
#ext-modal .cl-exm-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
#ext-modal .cl-exm-desc{font-size:14.5px; color:var(--fg-2); line-height:1.6; font-weight:300; margin:16px 0 0}
#ext-modal .cl-exm-feats{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
#ext-modal .cl-exm-feats li{position:relative; padding-left:24px; font-size:13.5px; color:var(--fg-1); line-height:1.5}
#ext-modal .cl-exm-feats li svg{position:absolute; left:0; top:2px; width:15px; height:15px; color:var(--bb-status-ok)}
#ext-modal .cl-exm-meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border-1)}
#ext-modal .cl-exm-meta .cl-m{display:flex; flex-direction:column; gap:2px}
#ext-modal .cl-exm-meta .cl-m .cl-k{font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3)}
#ext-modal .cl-exm-meta .cl-m .cl-v{font-size:13px; font-weight:700; color:var(--fg-1); font-variant-numeric:tabular-nums}
#ext-modal .cl-exm-foot{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:22px}
#ext-modal .cl-exm-note{margin-right:auto; font-size:12.5px; font-weight:600; color:var(--fg-3)}
#ext-modal .cl-exm-note.cl-ok{color:var(--bb-status-ok)}

/* ===== market prices page ===== */
.cl-mkt-plot{width:100%; height:280px}
.cl-mkt-plot svg{display:block; width:100%; height:100%}
/* the market plots sit on the same chassis tokens as every other chart tile: the same
   white gutter on the right and the same band below the x-axis labels. The left keeps the
   card's 22px, because these charts carry their own y-axis inside the SVG instead of the
   116px --bb-chart-gutter-l gutter. Label sizes come from --bb-chart-fs, applied in the painters (they
   drive the geometry too, so size and layout cannot drift apart). */
.cl-mkt-plotwrap{padding:0 var(--bb-chart-gutter-r) var(--bb-chart-pad-b) 22px}
/* ===== plan control (autonomy dial · approval banner) ===== */
.cl-pc-dial{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cl-pc-dial .cl-pc-lbl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3)}
/* 3-option dial has no sliding thumb → give the active option its own blue fill so white text is readable */
.cl-pc-dial .cl-segctl .cl-opt{border-radius:var(--bb-r-pill); transition:background var(--bb-dur-fast) var(--bb-ease)}
.cl-pc-dial .cl-segctl .cl-opt.cl-on{background:var(--bg-dark); color:var(--bb-white)}
.cl-pc-dial .cl-segctl .cl-opt.cl-locked{opacity:.45; cursor:not-allowed}
.cl-opt-lock{display:inline-block; width:11px; height:11px; margin-left:5px; vertical-align:-1px}
.cl-pc-dial .cl-segctl .cl-opt.cl-locked{white-space:nowrap}
.cl-pc-window{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--fg-2)}
.cl-pc-winlbl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3)}
.cl-pc-window input{width:46px; padding:5px 4px; border:1px solid var(--border-2); border-radius:6px; font-family:var(--bb-font-sans); font-weight:600; text-align:center; font-variant-numeric:tabular-nums; color:var(--fg-1)}
.cl-pc-banner{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 18px;
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  border:1px solid var(--border-2); border-left:4px solid var(--fg-accent); border-radius:var(--bb-r); box-shadow:var(--bb-shadow-tile)}
.cl-pc-banner.cl-status-active{border-left-color:var(--fg-highlight)}
.cl-pc-banner.cl-status-acknowledged{border-left-color:var(--bb-lightblue)}
.cl-pc-banner.cl-status-overridden{border-left-color:var(--bb-asset-boiler)}
.cl-pc-status{display:flex; align-items:center; gap:8px; flex:none}
.cl-pc-dot{width:9px; height:9px; border-radius:2px; background:var(--bg-dark)}
.cl-pc-banner.cl-status-active .cl-pc-dot{background:var(--fg-highlight)}
.cl-pc-banner.cl-status-acknowledged .cl-pc-dot{background:var(--bb-lightblue)}
.cl-pc-banner.cl-status-overridden .cl-pc-dot{background:var(--bb-asset-boiler)}
.cl-pc-st{font-size:14px; font-weight:700; color:var(--fg-accent)}
a.cl-pc-st{text-decoration:none}
a.cl-pc-st:hover{opacity:.78; text-decoration:underline; text-underline-offset:2px}
.cl-pc-summary{flex:1; min-width:180px; font-size:13px; color:var(--fg-2)}
.cl-pc-acts{display:flex; gap:8px; flex-wrap:wrap}
.cl-pc-acts .cl-btn{padding:8px 15px; font-size:12px}
/* autonomy status pill on the dashboard (dark strategy card) */
.cl-auto-pill{display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; background:color-mix(in srgb, var(--bb-white) 12%, transparent); color:var(--bb-white); border:1px solid color-mix(in srgb, var(--bb-white) 28%, transparent)}
.cl-auto-pill::before{content:""; width:8px; height:8px; border-radius:2px; background:currentColor; opacity:.85}
.cl-auto-pill.cl-live{background:var(--fg-highlight); color:var(--fg-1); border-color:var(--fg-highlight)}
/* per-asset overrides on the plan timeline (non-yellow — yellow is reserved for live autonomy).
   The hatch says "an operator did this"; its colour says which way. Forcing an asset ON is --bb-status-ok,
   forcing it OFF is --bb-status-crit — the shared status tokens, never a fresh green or red. Hold keeps the
   neutral blue hatch of the base class. The forced-off pill is also dashed, so the two do not
   depend on colour alone to be told apart. The class is ovr-<action> (see renderPlan) — a bare
   `.cl-ovr.cl-off` selector matches nothing. */
.cl-ovr{position:absolute; height:30px; top:50%; transform:translateY(-50%); cursor:help; z-index:5; border:1px solid var(--fg-accent); border-radius:var(--bb-r-pill);
  background-color:color-mix(in srgb, var(--bb-white) 72%, transparent);   /* mutes the bar underneath so the striped override reads clearly on top */
  background-image:repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--fg-accent) 45%, transparent) 4px 8px)}
.cl-ovr-on{border-color:var(--bb-status-ok);
  background-image:repeating-linear-gradient(45deg, transparent 0 4px, var(--bb-status-ok-hatch) 4px 8px)}
.cl-ovr-off{border-color:var(--bb-status-crit); border-style:dashed;
  background-image:repeating-linear-gradient(45deg, transparent 0 4px, var(--bb-status-crit-hatch) 4px 8px)}
/* legend swatches — same diagonal hatch and colours as the timeline overlays above */
.cl-sw-ovr-on{border:1px solid var(--bb-status-ok); background-image:repeating-linear-gradient(45deg, transparent 0 3px, var(--bb-status-ok-hatch) 3px 6px)}
.cl-sw-ovr-off{border:1px dashed var(--bb-status-crit); background-image:repeating-linear-gradient(45deg, transparent 0 3px, var(--bb-status-crit-hatch) 3px 6px)}
.cl-ovr-sel{position:absolute; height:34px; top:50%; transform:translateY(-50%); z-index:6; pointer-events:none;
  border:1.5px solid var(--fg-accent); border-radius:4px; background:color-mix(in srgb, var(--bg-dark) 10%, transparent)}
#ovr-menu{position:fixed; z-index:1000; display:flex; flex-direction:column; min-width:150px; padding:5px; gap:2px;
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  border:1px solid var(--border-2); border-radius:8px; box-shadow:0 8px 28px color-mix(in srgb, var(--fg-accent) 18%, transparent)}
.cl-ovr-opt{font-family:var(--bb-font-sans); font-weight:600; font-size:13px; text-align:center; padding:9px 16px; border:1px solid var(--border-2); border-radius:var(--bb-r-pill); background:var(--bb-control-fill); color:var(--fg-accent); cursor:pointer; transition:background var(--bb-dur-fast) var(--bb-ease), color var(--bb-dur-fast) var(--bb-ease)}
.cl-ovr-opt:hover{background:var(--bb-lightblue-25)}
.cl-ovr-opt.cl-clear{color:var(--bb-asset-boiler)}
.cl-tip-ovr{display:block; margin-top:7px; padding-top:7px; border-top:1px solid var(--border-1); font-weight:700; color:var(--fg-accent)}
.cl-tip-gr{display:block; margin-top:7px; padding-top:7px; border-top:1px solid var(--border-1); font-weight:700; color:var(--bb-asset-boiler)}
.cl-ovr-block{display:flex; flex-direction:column; gap:8px; max-width:220px; padding:4px}
.cl-ovr-block-t{font-size:12px; font-weight:700; color:var(--bb-asset-boiler); text-transform:uppercase; letter-spacing:.03em}
.cl-ovr-block-m{font-size:12.5px; color:var(--fg-2); line-height:1.4}
/* ===== forecast-vs-actual review (Feature B) =====
   #plan-review no longer exists in the markup — the section that held it was removed. The
   renderReview() code is kept behind REVIEW_ENABLED and guards on the host being absent. */
.cl-rev-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.cl-rev-bar .cl-btn{padding:8px 15px; font-size:12px}
.cl-rev-legend{display:flex; align-items:center; gap:16px; font-size:12px; font-weight:600; color:var(--fg-2)}
.cl-rev-legend span{display:inline-flex; align-items:center; gap:7px}
.cl-rev-legend .cl-rl-fc::before{content:""; width:18px; height:0; border-top:2px dashed var(--fg-accent); opacity:.7}
.cl-rev-legend .cl-rl-ac::before{content:""; width:18px; height:0; border-top:2px solid var(--fg-accent)}
.cl-rev-none{font-size:12.5px; font-weight:600; color:var(--fg-3)}
.cl-rev-tiles{display:grid; grid-template-columns:repeat(8,1fr); gap:12px; margin-top:14px}
@media(max-width:1100px){ .cl-rev-tiles{grid-template-columns:repeat(4,1fr)} }
@media(max-width:560px){ .cl-rev-tiles{grid-template-columns:repeat(2,1fr)} }
.cl-rev-tile{padding:14px}
.cl-rev-tile .cl-rv-num{font-size:18px; font-weight:700; color:var(--fg-accent); font-variant-numeric:tabular-nums; line-height:1.1}
.cl-rev-tile .cl-rv-sub{font-size:11px; font-weight:700; color:var(--fg-3); font-variant-numeric:tabular-nums; margin-top:2px}
.cl-rev-tile .cl-rv-lbl{font-size:11.5px; font-weight:600; color:var(--fg-2); margin-top:8px}
.cl-plan-ghost{position:absolute; height:30px; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none;
  border:1.5px dashed var(--bb-lightblue); border-radius:4px; background:transparent}
.cl-mkt-yearnav{display:inline-flex}
.cl-mkt-yearnav .cl-btn:disabled{opacity:.3; cursor:default; pointer-events:none}
.cl-mkt-bars-plot{width:100%; height:300px}
.cl-mkt-bars-plot svg{display:block; width:100%; height:100%}
.cl-mkt-bars-plot rect{transition:opacity var(--bb-dur-fast) var(--bb-ease)}
.cl-mkt-bars-plot:hover rect{opacity:.55}
.cl-mkt-bars-plot rect:hover{opacity:1}
.cl-mkt-tablewrap{overflow-x:auto; padding:0 22px}
.cl-mkt-table{width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; min-width:820px}
.cl-mkt-table th, .cl-mkt-table td{padding:7px 9px; text-align:right; white-space:nowrap}
.cl-mkt-table thead th{font-weight:700; border-bottom:1px solid var(--border-1)}
.cl-mkt-table thead tr:first-child th{font-size:10px; letter-spacing:.04em; text-transform:uppercase; border-bottom:none; padding-bottom:1px; color:var(--fg-accent)}
.cl-mkt-table thead tr:first-child th[colspan]{text-align:center; border-bottom:1px solid var(--border-1); padding-bottom:5px}
.cl-mkt-table thead tr:last-child th{font-size:10.5px; color:var(--fg-3)}
.cl-mkt-table thead tr:first-child th:first-child{text-align:left}
.cl-mkt-table tbody td{color:var(--fg-2)}
.cl-mkt-table tbody td.cl-per{text-align:left; font-weight:700; color:var(--fg-accent)}
.cl-mkt-table tbody td .cl-na{color:var(--bb-ink-40)}
.cl-mkt-table tbody td.cl-coh{font-weight:700; color:var(--fg-accent)}
.cl-mkt-table tbody tr:nth-child(even){background:var(--bb-bg-2)}
.cl-mkt-table tbody tr:hover{background:var(--bb-lightblue-25)}
.cl-mkt-table tbody td:nth-child(1), .cl-mkt-table tbody td:nth-child(3), .cl-mkt-table tbody td:nth-child(5){border-right:1px solid var(--border-1)}
.cl-mkt-table tbody td:nth-child(7){border-right:2px solid var(--border-2)}   /* separate the cost-of-heat block */
/* imbalance PTU table — reuses the .cl-mkt-table chrome. The column separators above are
   positional and belong to the forward-price grid, so they are cleared for this table. */
/* line-style legend key: solid = settled, dashed = what was forecast for that period */
.cl-sw-line{display:inline-block; width:18px; height:0; border-top:2.5px solid var(--fg-3); vertical-align:middle}
.cl-sw-line.cl-dash{border-top-style:dashed; opacity:.7}
.cl-imb-tablewrap{max-height:430px; overflow:auto}
.cl-mkt-table.cl-imb-table{min-width:700px}
.cl-mkt-table.cl-imb-table tbody td:nth-child(n){border-right:none}
/* Sticky header must stay fully opaque — it needs to occlude the rows scrolling underneath it,
   which a frosted/translucent fill would defeat. Intentional exception, not an oversight. */
.cl-mkt-table.cl-imb-table thead th{position:sticky; top:0; z-index:1; background:var(--bb-white);
  font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-3);
  border-bottom:1px solid var(--border-1); padding-bottom:7px}
.cl-mkt-table.cl-imb-table thead th:first-child, .cl-mkt-table.cl-imb-table thead th:nth-child(2), .cl-mkt-table.cl-imb-table thead th:nth-child(3), .cl-mkt-table.cl-imb-table thead th:last-child{text-align:left}   /* text columns (PTU, state, situation, pricing) left; price columns stay right */
.cl-mkt-table.cl-imb-table td.cl-imb-st, .cl-mkt-table.cl-imb-table td.cl-imb-sit, .cl-mkt-table.cl-imb-table td.cl-imb-px{text-align:left; color:var(--fg-2)}
.cl-imb-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:middle}
.cl-mkt-table.cl-imb-table tr.cl-fut td{color:var(--bb-ink-40)}                         /* not settled yet */
.cl-mkt-table.cl-imb-table tr.cl-fut td.cl-per, .cl-mkt-table.cl-imb-table tr.cl-fut td.cl-coh{color:var(--fg-3)}
.cl-mkt-table.cl-imb-table tr.cl-now td{background:var(--fg-highlight); color:var(--fg-accent); font-weight:700}
.cl-imb-nowtag, .cl-imb-prov{font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-left:7px}
.cl-imb-prov{color:var(--bb-ink-40)}
/* row build-up tooltip (three mini cost-of-heat waterfalls) */
#mkt-tip{position:fixed; z-index:80; pointer-events:none; padding:12px 14px; width:430px; max-width:92vw}
#mkt-tip .cl-mt-title{font-size:13px; font-weight:700; color:var(--fg-accent); margin-bottom:8px}
#mkt-tip .cl-mt-grid{display:flex; gap:8px; align-items:stretch}
#mkt-tip .cl-mt-asset{flex:1; min-width:0; background:var(--bg-dark); border-radius:10px; padding:9px 9px 7px; color:var(--bb-white); display:flex; flex-direction:column}
#mkt-tip .cl-mt-lbl{font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-highlight); text-align:center}
#mkt-tip .cl-mt-net{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; text-align:center; margin-top:1px}
#mkt-tip .cl-mt-net .cl-u{font-size:10px; font-weight:600; color:var(--bb-lightblue-50); margin-left:2px}
#mkt-tip .cl-mt-wf{width:100%; height:84px; display:block; margin-top:3px}
#mkt-tip .cl-mt-hpcalc{font-size:9.5px; color:var(--bb-lightblue-50); text-align:center; margin-top:auto; padding-top:8px; line-height:1.45}

/* ===== electrical power chart — imbalance band + grid-connection limit lines ===== */
.cl-el-imb{position:absolute; top:0; background:color-mix(in srgb, var(--fg-highlight) 15%, transparent); pointer-events:none; z-index:0}
.cl-el-limit{position:absolute; left:0; right:0; height:0; border-top:2px dashed var(--fg-accent); z-index:4; pointer-events:none}
.cl-el-limit.cl-exp{border-top-color:var(--bb-asset-boiler)}


/* ===== CHARTS (lock-step scrolling) ===== */
/* the right gutter sits on the row, not on the scroller: the scroller viewport ends
   before the tile edge, so the plot (and its gridlines) stop short of the border and
   the last bar / label is never flush against it. */
.cl-chart{display:flex; align-items:stretch; padding-right:var(--bb-chart-gutter-r)}
.cl-chart .cl-yaxis{width:var(--bb-chart-gutter-l); flex:none; position:relative; border-right:1px solid var(--border-1)}
.cl-chart .cl-scroller{overflow-x:auto; overflow-y:hidden; flex:1; scrollbar-width:none; -ms-overflow-style:none}
.cl-chart .cl-scroller::-webkit-scrollbar{display:none}
.cl-chart .cl-inner{position:relative}

/* every chart label scales off --bb-chart-fs (10px = the sizes these rules used to hardcode),
   so one knob resizes the ticks on all charts at once instead of 12 separate font-sizes. */
.cl-ytick{position:absolute; right:10px; transform:translateY(-50%); font-size:calc(var(--bb-chart-fs)*1.05); font-weight:500; color:var(--fg-3); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
/* dual-axis ticks on the energy-prices chart */
.cl-ytick.cl-ax-elec{right:8px; left:auto; color:var(--fg-accent); font-weight:600}
.cl-ytick.cl-ax-gas{left:22px; right:auto; text-align:left; color:var(--bb-asset-boiler); font-weight:600}   /* aligned with the kicker/legend text above (card padding = 22px) */
.cl-ax-unit{position:absolute; top:2px; font-size:calc(var(--bb-chart-fs)*.9); font-weight:700; letter-spacing:.03em}
.cl-ax-unit.cl-ax-elec{right:8px; color:var(--fg-accent)}
.cl-ax-unit.cl-ax-gas{left:22px; color:var(--bb-asset-boiler)}
.cl-ylabel{position:absolute; left:22px; top:8px; font-size:var(--bb-chart-fs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-accent)}

.cl-gridline{position:absolute; left:0; right:0; height:1px; background:var(--border-1)}
.cl-gridline.cl-zero{background:var(--border-2)}

.cl-day-band{position:absolute; top:0; bottom:0}
.cl-day-band.cl-alt{background:var(--bb-bg-2); opacity:.7}
.cl-hover-col{position:absolute; top:0; bottom:0; background:var(--bb-lightblue-50); opacity:.6; pointer-events:none; z-index:0}
.cl-day-div{position:absolute; top:0; bottom:0; width:1px; background:var(--border-1)}
.cl-day-lab{position:absolute; top:6px; font-size:calc(var(--bb-chart-fs)*1.05); font-weight:700; color:var(--fg-accent); white-space:nowrap; padding-left:8px; font-variant-numeric:tabular-nums}

/* breathing room below the x-axis labels — shared by every chart card.
   The €/m² axis row is not a .cl-scroller, so it carries the same pad via .cl-xrow. */
.cl-scroller[data-axis]{padding-bottom:var(--bb-chart-pad-b)}
.cl-m2-chart.cl-xrow .cl-m2-plot{padding-bottom:var(--bb-chart-pad-b)}
/* the y-axis rule stops where the x-axis starts: the label strip keeps the same
   --bb-chart-gutter-l gutter for alignment, but draws no vertical line through it, so the
   two axes meet in a corner instead of the y-axis running on to the tile edge. */
.cl-chart.cl-xrow .cl-yaxis, .cl-m2-chart.cl-xrow .cl-yaxis{border-right:none}
.cl-xaxis{position:relative; border-top:1px solid var(--border-1)}
.cl-xtick{position:absolute; top:5px; transform:translateX(-50%); font-size:var(--bb-chart-fs); font-weight:500; color:var(--fg-3); font-variant-numeric:tabular-nums}
.cl-xtick.cl-mark{color:var(--fg-accent); font-weight:700}

/* the live "now" line — BB Blue dashed, yellow tag */
.cl-nowline{position:absolute; top:0; bottom:0; width:0; border-left:2px dashed var(--fg-accent); z-index:6; pointer-events:none}
.cl-nowtag{position:absolute; top:4px; transform:translateX(-50%); background:var(--fg-highlight); color:var(--fg-accent);
  font-size:var(--bb-chart-fs); font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:var(--bb-r-pill); white-space:nowrap; font-variant-numeric:tabular-nums; z-index:7}

/* Required CO2 bars — past:blue · now:yellow · future:lightblue dashed */
.cl-bar{position:absolute; bottom:0; border-radius:6px 6px 0 0; transform-origin:bottom; animation:cl-barIn .32s var(--bb-ease) both}
.cl-bar.cl-past{background:var(--bg-dark)}
.cl-bar.cl-now{background:var(--fg-highlight)}
.cl-bar.cl-future{background:var(--bb-lightblue-25); border:1px dashed var(--bb-lightblue); border-bottom:none}

/* Planned asset timeline */
.cl-tl-track{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:1px; background:var(--border-1)}
.cl-seg{position:absolute; height:24px; top:50%; transform:translateY(-50%); cursor:help; animation:cl-segIn .32s var(--bb-ease) both}
@keyframes cl-segIn{from{opacity:0; transform:translateY(-50%) scaleY(.4)} to{opacity:1; transform:translateY(-50%) scaleY(1)}}
@keyframes cl-barIn{from{opacity:0; transform:scaleY(.5)} to{opacity:1; transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .cl-seg, .cl-bar{animation:none} }
.cl-seg.cl-past{background:var(--bg-dark)}
.cl-seg.cl-now{background:var(--fg-highlight)}
.cl-seg.cl-future{background:var(--bb-lightblue-25); border:1px dashed var(--bb-lightblue)}
.cl-seg.cl-charge{background:var(--bb-series-charge)}
.cl-seg.cl-discharge{background:var(--bb-series-discharge)}
.cl-seg:hover{background:var(--bb-lightblue); border:1px solid var(--bb-lightblue)}

/* styled hover tooltip ("tekstballon") for asset segments */
#seg-tip{position:fixed; z-index:60; pointer-events:none; max-width:300px; color:var(--fg-2);
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  border:1px solid var(--border-1); border-radius:10px; box-shadow:var(--bb-shadow-tile); padding:12px 14px;
  font-size:12.5px; line-height:1.5; font-weight:400}
#seg-tip .cl-tip-head{display:flex; align-items:center; gap:8px}
#seg-tip .cl-tip-title{font-weight:700; color:var(--fg-accent); font-size:13.5px}
#seg-tip .cl-tip-chip{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:var(--bb-r-pill); background:var(--bb-lightblue-25); color:var(--fg-accent)}
#seg-tip .cl-tip-chip.cl-now{background:var(--fg-highlight)}
#seg-tip .cl-tip-time{font-size:11px; color:var(--fg-3); margin:3px 0 8px; font-variant-numeric:tabular-nums}
#seg-tip .cl-tip-line{margin-top:6px}
#seg-tip .cl-tip-line:first-of-type{margin-top:0}
#seg-tip b{color:var(--fg-accent); font-weight:700}
#seg-tip::after{content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%) rotate(45deg);
  width:11px; height:11px; background:var(--bb-surface-fill); border-right:1px solid var(--border-1); border-bottom:1px solid var(--border-1)}
#seg-tip.cl-below::after{top:-6px; bottom:auto; border:0; border-left:1px solid var(--border-1); border-top:1px solid var(--border-1)}

/* legends */
.cl-legend{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:16px}
.cl-legend-in{margin-top:0; padding:0 22px 14px}      /* legend placed inside the tile */
.cl-lg-ic{display:inline-flex; flex:none}
.cl-lg-ic svg{width:16px; height:16px; display:block}
.cl-legend .cl-it{display:inline-flex; align-items:center; gap:8px; font-size:calc(var(--bb-chart-fs)*1.15); font-weight:500; color:var(--fg-2)}
.cl-sw-line{width:20px; height:0; border-top:3px solid}
.cl-sw-box{width:18px; height:12px; border-radius:var(--bb-r-pill)}
.cl-sw-line{display:inline-block; width:18px; height:0; border-top:2px dashed var(--fg-2); vertical-align:middle}
.cl-sw-line.cl-budget{border-top-style:solid}
/* Average + budget reference lines on the €/m² chart.
   The two LABELS no longer track their line's y: they sit side by side in one row pinned to
   the top-centre of the plot, which is why neither can be struck through by a line any more
   (at equal z-index the later-appended budget line used to paint straight across the average
   pill). They read as a live legend for the two lines, so they are deliberately identical in
   size and shape — same font-size, same padding, same 1px border box (transparent on the
   budget pill purely so both pills are exactly as tall). Only the fill differs.
   The row lives in the plot's top headroom — renderM2's PADT reserves the space for it. */
.cl-m2-lab-row{position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex;
  align-items:center; gap:8px; pointer-events:none; z-index:4}
.cl-m2-avg-lab, .cl-m2-budget-lab{font-size:calc(var(--bb-chart-fs)*1.1); font-weight:700; line-height:1.3;
  padding:2px 8px; border-radius:var(--bb-r-pill); white-space:nowrap}
.cl-m2-avg-lab .cl-n, .cl-m2-budget-lab .cl-n{font-weight:800; font-variant-numeric:tabular-nums}
.cl-m2-avg-lab{color:var(--fg-2); border:1px solid var(--border-2); box-shadow:0 2px 6px color-mix(in srgb, var(--fg-accent) 14%, transparent);
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur)}
/* padding-box clip, not the default border-box: the average pill spends its outer 1px on a
   visible border, so its white body is 2px shorter than its box. Without the clip the navy
   fill paints under the transparent border too and the budget pill reads as the thicker of
   the two, even though both boxes measure the same height. */
.cl-m2-budget-lab{color:var(--bb-white); background:var(--fg-2); border:1px solid transparent; background-clip:padding-box}
.cl-m2-avg-line{position:absolute; height:0; border-top:2px dashed var(--fg-2); pointer-events:none; z-index:3}
.cl-m2-budget-line{position:absolute; height:0; border-top:2px solid var(--fg-2); pointer-events:none; z-index:3}
/* cost/m² day·week·month chart (self-contained, fits the card width — not lock-step scrolled) */
.cl-m2-chart{display:flex; align-items:stretch; padding-right:var(--bb-chart-gutter-r)}
.cl-m2-chart .cl-yaxis{width:var(--bb-chart-gutter-l); flex:none; position:relative; border-right:1px solid var(--border-1)}
.cl-m2-plot{flex:1; position:relative; overflow:hidden}
.cl-m2-inner{position:relative; width:100%}
.cl-m2bar{position:absolute; cursor:help}
.cl-m2bar.cl-cap{border-radius:3px 3px 0 0}
.cl-m2bar:hover{filter:brightness(1.08)}
/* Cost per m² tile, as the prototype's #sec-m2 card: header (kicker · Day/Week/Month · full width)
   and legend padded, the chart flush with the tile edges. The plot is 325px: the value range
   (.cl-m2-area) leaves 34px headroom for the Ø / budget pills and 8px below the zero line. */
.cl-m2-card{overflow:hidden}
.cl-m2-head{padding-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.cl-m2-tools, .cl-m2-range{display:flex; align-items:center; flex-wrap:nowrap}
.cl-m2-tools{gap:8px}
.cl-m2-range{gap:6px}
.cl-m2-head .cl-btn{padding:7px 14px; font-size:12px}
.cl-m2-head .cl-m2-fw{padding:7px 11px}
.cl-m2-head .cl-m2-fw svg{display:block}
.cl-m2-chart:not(.cl-xrow) .cl-m2-inner{height:325px}
.cl-m2-chart .cl-xaxis{height:22px}
.cl-m2-area{position:absolute; left:0; right:0; top:34px; bottom:8px}
/* a bucket's stacked bar: rounded top, the gas / electricity / CO₂ segments clipped inside, so the
   corners stay round however thin the top segment is */
.cl-m2stack{position:absolute; bottom:0; overflow:hidden; border-radius:6px 6px 0 0; cursor:help}
.cl-m2stack .cl-m2bar{left:0; right:0}
.cl-m2stack:hover{filter:brightness(1.08)}
.cl-m2-gas{background:var(--bb-series-boiler)}
.cl-m2-elec{background:var(--fg-accent)}
.cl-m2-co2{background:var(--bb-series-charge)}
.cl-sw-box.cl-past{background:var(--bg-dark)}
.cl-sw-box.cl-now{background:var(--fg-highlight)}
.cl-sw-box.cl-future{background:var(--bb-lightblue-25); border:1px dashed var(--bb-lightblue)}

/* footer */
/* ===== FOOTER — modelled on the beebeeone.cl-com footer =====
   Same white logo plaque as the header (reuses .cl-logo), then content columns on the blue
   field. No social links / resources / newsletter — this is the in-app footer. */
.cl-bbfooter{background:var(--bg-dark); color:var(--bb-white); margin-top:32px}
/* same max-width as .cl-bbheader > .cl-shell so the footer plaque lines up exactly with the header one */
/* Same trick as the header row: the logo sits in a 1fr track, the three columns take auto
   tracks, and a second empty 1fr track closes the row. Equal 1fr tracks put the group of
   columns on the shell's centre — the axis the header menu and the sub-nav centre on — instead
   of flush right, which is where the logo's old margin-right:auto pushed them. */
.cl-bbfooter .cl-shell{display:grid; grid-template-columns:1fr auto auto auto 1fr; align-items:start;
  gap:56px; padding-top:0; padding-bottom:38px; max-width:1400px}
/* the plaque hangs from the top edge, so it keeps .cl-logo's square-top / rounded-bottom shape.
   No margin-right:auto — the grid's trailing 1fr track now does the balancing. */
.cl-foot-col{padding-top:38px}
.cl-foot-h{font-size:15px; font-weight:700; color:var(--bb-white); margin:0 0 14px}
/* Every body line in every footer column is one .cl-foot-line, so all three columns share a
   single row rhythm (22px row box + 9px gap) and their rows line up horizontally — with or
   without a leading icon. Don't reintroduce <p>/<small> as direct column children with their
   own margins; that is what knocked the rows out of alignment. */
.cl-foot-line{display:flex; align-items:center; gap:10px; margin-top:9px; min-height:22px;
  font-size:13.5px; font-weight:400; line-height:1.65; color:var(--bb-white)}
.cl-foot-h + .cl-foot-line{margin-top:0}
.cl-foot-line .cl-ic{width:16px; height:16px; flex:none; color:var(--fg-highlight)}
.cl-foot-line .cl-ic svg{width:16px; height:16px; display:block}
.cl-bbfooter a{color:var(--bb-white); text-decoration:none; transition:color var(--bb-dur-fast) var(--bb-ease)}
.cl-bbfooter a:hover{color:var(--fg-highlight)}
.cl-foot-kvk{font-variant-numeric:tabular-nums}
.cl-bbfooter small{display:block; margin-top:0; color:var(--bb-lightblue-50); font-size:12px; font-weight:400; line-height:1.6}
.cl-foot-ver{color:var(--bb-white); font-variant-numeric:tabular-nums}
/* below this the logo + three columns no longer fit on one row — stack them in a single
   column (the grid equivalent of the flex-wrap this row used before it became a grid) */
@media(max-width:760px){ .cl-bbfooter .cl-shell{grid-template-columns:auto; gap:28px} .cl-foot-col{padding-top:0} .cl-bbfooter .cl-logo{margin-bottom:10px} }
/* the footer is the only consumer of .cl-wordmark since the header switched to the logo image */
.cl-bbfooter .cl-wordmark{font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--bb-white)}
.cl-bbfooter small{color:var(--bb-lightblue-50); font-size:12px; font-weight:400}

/* ===== AI assistant — right-side chat dock ===== */
/* settings rail tile proportion — width:height. 1 = square; higher = flatter.
   Below ~1.57 the icon + label set a min-content floor and aspect-ratio yields to it, so flatter
   values than that have no effect unless the icon shrinks or the label drops to one line. */
.cl-chat-fab{position:fixed; right:24px; bottom:24px; z-index:60; display:inline-flex; align-items:center; gap:9px;
  padding:13px 19px; border:none; border-radius:var(--bb-r-pill); cursor:pointer; background:var(--bg-dark); color:var(--bb-white);
  font-family:var(--bb-font-sans); font-weight:700; font-size:13.5px; letter-spacing:.01em;
  box-shadow:0 10px 26px -8px color-mix(in srgb, var(--fg-accent) 55%, transparent); transition:opacity var(--bb-dur-fast) var(--bb-ease), transform var(--bb-dur-base) var(--bb-ease)}
.cl-chat-fab:hover{opacity:.9} .cl-chat-fab svg{width:19px; height:19px}
.cl-chat-fab .cl-led{width:8px; height:8px; clip-path:var(--bb-hex); background:var(--fg-highlight)}
body.cl-chat-open .cl-chat-fab{transform:translateX(40px) scale(.9); opacity:0; pointer-events:none}

.cl-chat-dock{position:fixed; top:0; right:0; z-index:70; width:var(--bb-chat-w); max-width:100vw; height:100dvh;
  display:flex; flex-direction:column; border-left:1px solid var(--border-1);
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur);
  box-shadow:-18px 0 48px -20px color-mix(in srgb, var(--fg-accent) 40%, transparent); transform:translateX(100%);
  transition:transform var(--bb-dur-base) var(--bb-ease)}
body.cl-chat-open .cl-chat-dock{transform:translateX(0)}

.cl-chat-hd{flex:none; display:flex; align-items:center; gap:12px; padding:18px 18px 16px; background:var(--bg-dark); color:var(--bb-white)}
/* Ends level with the page header's dark band (--cl-hdr-dark-h, measured by cl-chrome.js). */
.cl-chat-hd{box-sizing:border-box; min-height:var(--cl-hdr-dark-h, 0px)}
.cl-chat-hd .cl-ai-mark{width:38px; height:38px; flex:none; border-radius:var(--bb-r-pill); background:color-mix(in srgb, var(--bb-white) 12%, transparent);
  display:grid; place-items:center} .cl-chat-hd .cl-ai-mark svg{width:21px; height:21px}
.cl-chat-hd .cl-ttl{font-size:15px; font-weight:700; line-height:1.1}
.cl-chat-hd .cl-sub{font-size:11px; font-weight:500; color:var(--bb-lightblue-50); margin-top:2px; display:flex; align-items:center; gap:6px}
.cl-chat-hd .cl-sub .cl-led{width:7px; height:7px; clip-path:var(--bb-hex); background:var(--fg-highlight)}
.cl-chat-hd .cl-x{margin-left:auto; flex:none; width:32px; height:32px; border:none; border-radius:var(--bb-r-pill); cursor:pointer;
  background:color-mix(in srgb, var(--bb-white) 12%, transparent); color:var(--bb-white); display:grid; place-items:center; transition:background var(--bb-dur-fast) var(--bb-ease)}
.cl-chat-hd .cl-x:hover{background:color-mix(in srgb, var(--bb-white) 22%, transparent)} .cl-chat-hd .cl-x svg{width:16px; height:16px}

.cl-chat-body{flex:1; min-height:0; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:14px; background:var(--bb-bg-2)}
.cl-msg{max-width:86%; font-size:14px; line-height:1.5; padding:11px 14px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word}
.cl-msg.cl-ai{align-self:flex-start; color:var(--fg-2); border:1px solid var(--border-1); border-bottom-left-radius:4px;
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur)}
.cl-msg.cl-me{align-self:flex-end; background:var(--bg-dark); color:var(--bb-white); border-bottom-right-radius:4px}
.cl-msg.cl-ai b{color:var(--fg-accent); font-weight:700}
.cl-msg.cl-ai .cl-h{color:var(--fg-accent); font-weight:700}
.cl-msg.cl-ai.cl-warn-line{border-left:3px solid var(--bb-asset-boiler)}
.cl-msg.cl-typing{display:inline-flex; gap:4px; align-self:flex-start; border:1px solid var(--border-1);
  background:var(--bb-surface-fill); backdrop-filter:var(--bb-surface-blur); -webkit-backdrop-filter:var(--bb-surface-blur)}
.cl-msg.cl-typing span{width:6px; height:6px; border-radius:50%; background:var(--bb-ink-40); animation:cl-chatdot 1s infinite ease-in-out}
.cl-msg.cl-typing span:nth-child(2){animation-delay:.15s} .cl-msg.cl-typing span:nth-child(3){animation-delay:.3s}
@keyframes cl-chatdot{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}

.cl-chat-sugs{flex:none; display:flex; gap:8px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--border-1); background:var(--bb-bg-2)}
.cl-chat-sugs .cl-sug{font-family:var(--bb-font-sans); font-size:12px; font-weight:600; color:var(--fg-accent); cursor:pointer;
  background:var(--bb-lightblue-25); border:1px solid transparent; border-radius:var(--bb-r-pill); padding:7px 12px; line-height:1.1;
  transition:background var(--bb-dur-fast) var(--bb-ease)}
.cl-chat-sugs .cl-sug:hover{background:var(--bb-lightblue); color:var(--bb-white)}

.cl-chat-input{flex:none; display:flex; gap:9px; align-items:flex-end; padding:14px 16px 16px; border-top:1px solid var(--border-1); background:var(--bb-bg-2)}
.cl-chat-input textarea{flex:1; resize:none; font-family:var(--bb-font-sans); font-size:14px; line-height:1.45; color:var(--fg-1);
  border:1px solid var(--border-2); border-radius:18px; padding:10px 14px; max-height:120px; outline:none; background:var(--bb-control-fill)}
.cl-chat-input textarea:focus{border-color:var(--fg-accent)}
.cl-chat-input .cl-send{flex:none; width:40px; height:40px; border:none; border-radius:var(--bb-r-pill); cursor:pointer;
  background:var(--bg-dark); color:var(--bb-white); display:grid; place-items:center; transition:opacity var(--bb-dur-fast) var(--bb-ease)}
.cl-chat-input .cl-send:hover{opacity:.85} .cl-chat-input .cl-send:disabled{opacity:.4; cursor:default} .cl-chat-input .cl-send svg{width:18px; height:18px}
/* Voice button (browser speech): outlined at rest, accent while listening or reading the answer aloud. */
.cl-chat-input .cl-voice{flex:none; width:40px; height:40px; border:1px solid var(--border-1); border-radius:var(--bb-r-pill); cursor:pointer;
  background:var(--bb-bg-2); color:var(--fg-2); display:grid; place-items:center; transition:background var(--bb-dur-fast) var(--bb-ease), color var(--bb-dur-fast) var(--bb-ease)}
.cl-chat-input .cl-voice:hover{color:var(--fg-accent); border-color:var(--fg-accent)}
.cl-chat-input .cl-voice:disabled{opacity:.4; cursor:default}
.cl-chat-input .cl-voice svg{width:18px; height:18px}
.cl-chat-input .cl-voice[data-state]{background:var(--fg-accent); border-color:var(--fg-accent); color:var(--bb-white)}
.cl-chat-input .cl-voice[data-state] .cl-wave{transform-box:fill-box; transform-origin:center; animation:cl-wave 0.9s var(--bb-ease) infinite}
.cl-chat-input .cl-voice[data-state] .cl-wave:nth-child(2){animation-delay:.15s}
.cl-chat-input .cl-voice[data-state] .cl-wave:nth-child(3){animation-delay:.3s}
.cl-chat-input .cl-voice[data-state] .cl-wave:nth-child(4){animation-delay:.45s}
.cl-chat-input .cl-voice[data-state] .cl-wave:nth-child(5){animation-delay:.6s}
@keyframes cl-wave{0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.45)}}
@media (prefers-reduced-motion: reduce){.cl-chat-input .cl-voice[data-state] .cl-wave{animation:none}}

/* Empty state + message list — this app opens the dock with a prompt rather than the
   prototype's pre-seeded greeting message, so it needs the two containers the prototype has no
   equivalent for. The messages list is a plain column so bubbles keep the dock's own gap. */
.cl-chat-empty{margin:auto 0; text-align:center; color:var(--fg-3); font-size:13.5px; line-height:1.55}
.cl-chat-empty p{margin:0}
.cl-chat-empty.hidden{display:none}
.cl-chat-msgs{display:flex; flex-direction:column; gap:14px}

.cl-chat-scrim{position:fixed; inset:0; z-index:65; background:var(--bb-scrim-soft); opacity:0; pointer-events:none;
  transition:opacity var(--bb-dur-base) var(--bb-ease)}
body.cl-chat-open .cl-chat-scrim{opacity:1; pointer-events:auto}
@media(min-width:1100px){ .cl-chat-scrim{display:none} }
@media(max-width:440px){ :root{ --bb-chat-w:100vw } }



/* ── Energy Plan lock-step chart chassis (advisory-board rollout) ──
   Mirrors the prototype's .chart[data-sync] / .yaxis / .scroller / .inner pattern: multiple
   chassis blocks share one horizontal scroll position via JS-mirrored scrollLeft, with a single
   shared x-axis row at the bottom (bb-chart-xrow). Uses the existing chart-chassis tokens so it
   stays aligned with every other chart on this page. */
.bb-chart-chassis {
  display: flex;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  overflow: hidden;
}
.bb-chart-yaxis {
  flex: none;
  width: var(--bb-chart-gutter-l);
  border-right: 1px solid var(--bb-line);
  background: var(--bb-surface-2);
}
.bb-chart-scroller {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.bb-chart-xrow {
  border-top: none;
}
.bb-chart-fullwidth {
  width: calc(100vw - 48px);
  max-width: none;
  margin-left: calc(50% - 50vw + 24px);
  margin-right: calc(50% - 50vw + 24px);
}


/* ============================================================================
   CL-APP PARITY LAYER
   ----------------------------------------------------------------------------
   Everything the prototype (app.html) sets globally but this codebase cannot yet
   apply globally, scoped to `body.cl-app`. Pages opt in by carrying that class;
   today that is the customer Dashboard and the Energy plan day view. Roll the
   class out page by page, then fold these rules into the base set and delete the
   scope.

   NOTE on box-sizing: the prototype's `*{box-sizing:border-box}` is deliberately
   NOT repeated here — head.html loads the Tailwind Play CDN, whose preflight
   already applies it document-wide.
   ============================================================================ */

/* ===== BASE — app.html lines 108-119 ===== */
body.cl-app{
  font-size:15px; font-weight:var(--bb-weight-light); line-height:1.46;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
/* :where() keeps the scope at zero specificity, so this reset behaves like the prototype's bare
   `h1,h2,h3,h4` rule: any component that sets its own heading colour (e.g. .cl-strat-obj h3 on the
   dark objective tile) still wins. Without it the blue here painted white-on-blue headings blue. */
:where(body.cl-app) h1, :where(body.cl-app) h2, :where(body.cl-app) h3, :where(body.cl-app) h4{
  font-family:var(--bb-font-sans); font-weight:var(--bb-weight-bold); line-height:1.1; margin:0;
  color:var(--fg-accent); letter-spacing:var(--bb-track-tight-1)}
body.cl-app ::selection{background:var(--fg-highlight); color:var(--fg-accent)}
body.cl-app :focus-visible{outline:2px solid var(--fg-accent); outline-offset:3px; border-radius:2px}

/* ===== LAYOUT — the 1140px content shell, sections carry the vertical rhythm ===== */
body.cl-app main.bb-content-wrap{
  max-width:1140px; padding:36px 32px 0; margin:0 auto;
  display:flex; flex-direction:column}
body.cl-app main.bb-content-wrap > section,
body.cl-app main.bb-content-wrap section.cl-section{padding:56px 0}
body.cl-app .cl-sec-head{margin-top:0; margin-bottom:24px}
body.cl-app .cl-sec-head .cl-kicker{display:block; margin-bottom:12px}
body.cl-app .cl-sec-head h2{line-height:1.1}
body.cl-app .cl-sec-head p{margin:10px 0 0; font-size:14.5px; font-weight:var(--bb-weight-light); line-height:1.46}

/* ===== TILE SURFACE — randloos: the tile shadow does the work, not a hairline ===== */
body.cl-app .cl-card,
body.cl-app .cl-card.cl-dark,
body.cl-app .cl-lane,
body.cl-app .cl-bufcard,
body.cl-app .cl-alarm-pop,
body.cl-app .bb-chart-card{border:none}
body.cl-app .bb-chart-card{
  background:var(--bb-surface-fill); border-radius:var(--bb-r);
  box-shadow:var(--bb-shadow-tile); margin-bottom:0}

/* ===== HEADER — the logo plaque + the one icon cluster ===== */
.cl-logo-img{display:block; height:40px; width:auto}
/* The profile control is not in the prototype's header (it puts Logout on the Settings page),
   but this app has nowhere else to sign out from. Render it as one more bare glyph in the icon
   cluster so it reads as part of the same row rather than as a second, competing control. */
.cl-bbheader .bb-nav-profile-wrap{position:relative; flex:none}
.cl-bbheader .bb-nav-profile{
  width:34px; height:34px; padding:0; border:none; border-radius:0; background:transparent;
  color:var(--bb-white); cursor:pointer; display:grid; place-items:center; line-height:0;
  transition:color var(--bb-dur-fast) var(--bb-ease)}
.cl-bbheader .bb-nav-profile:hover{color:var(--fg-highlight); background:transparent}
.cl-bbheader .bb-nav-profile svg{width:21px; height:21px; display:block}
.cl-bbheader .bb-hamburger{display:none}
@media(max-width:1240px){
  .cl-bbheader .bb-hamburger{display:block; grid-area:1/2; justify-self:end}
}

/* ===== ENERGY PLAN — Gantt lane labels, states and the NOW marker ===== */
/* Lane label = the prototype's .tl-rowlab: the icon sits ABOVE a right-aligned bold blue name,
   inside the same 116px gutter every other chart reserves (104px label + the lane's 12px gap). */
body.cl-app .bb-gantt-lane-label{
  flex-direction:column; align-items:flex-end; gap:5px; text-align:right;
  font-size:calc(var(--bb-chart-fs)*1.25); font-weight:700; color:var(--fg-accent);
  line-height:1.15; overflow:visible}
body.cl-app .bb-gantt-lane-icon{color:var(--fg-accent)}
body.cl-app .bb-gantt-lane-icon svg{width:24px; height:24px}
/* The prototype marks the running hour with BB Yellow — its single signal colour — not with an
   orange ring borrowed from the warning palette. */
body.cl-app .bb-gantt-segment.bb-gantt-state-running{
  box-shadow:0 0 0 2px var(--fg-highlight), 0 0 0 4px color-mix(in srgb, var(--fg-highlight) 30%, transparent)}
/* NOW marker: dashed BB Blue line with the yellow tag ABOVE the plot, as on every prototype chart
   (it used to be a thin black line with the label hanging underneath). */
body.cl-app .bb-chart-now{border-left:2px dashed var(--fg-accent)}
body.cl-app .bb-chart-now span{
  top:4px; bottom:auto; background:var(--fg-highlight); color:var(--fg-accent);
  font-size:var(--bb-chart-fs); font-weight:700; letter-spacing:.02em;
  padding:3px 8px; border-radius:var(--bb-r-pill); font-variant-numeric:tabular-nums}
/* A legend placed inside .bb-chart-body already has the body's 24px gutter. */
body.cl-app .bb-chart-body > .cl-legend-in{padding-left:0; padding-right:0}
/* The build-up title is a plain prototype kicker, not the bar-glyph eyebrow. */
body.cl-app .bb-chart-eyebrow{
  font-size:11px; letter-spacing:var(--bb-track-caps); color:var(--fg-accent)}
body.cl-app .bb-chart-eyebrow::before{display:none}
/* Cost build-up tiles fill the width of the graph above them, as in the prototype, instead of
   stopping at a 358px cap. */
body.cl-app .cl-cost-tiles .cl-kpi-wide{flex:1 1 0; max-width:none}

/* ===== LIVE LANES — the prototype's row layout ===== */
/* app.html .lane is a ROW: a fixed 120px rail carrying the dot + "RUNNING NOW" on the left, the
   asset cards filling the rest. The cl- layer was ported from an earlier prototype revision that
   stacked the header above the cards; this restores the current one. */
body.cl-app .cl-lane{flex-direction:row; align-items:flex-start; gap:18px}
body.cl-app .cl-lane .cl-lane-hd{flex:none; width:120px; padding-top:10px}
body.cl-app .cl-lane .cl-assets{flex:1}

/* ============================================================================
   LOCK-STEP TIMELINE — the Energy Plan's shared time chassis
   ----------------------------------------------------------------------------
   Three charts (asset plan, cost of heat, electrical power) show the same window
   of days and scroll it together. Geometry lives in two custom properties so a
   change moves every chart at once:

     --cl-hour-w   pixels per hour. Measured at runtime (cl-timeline.js) so one
                   day fills a normal-width card, then written back here; the
                   value below is only the pre-measurement fallback.
     --bb-chart-gutter-l   the y-axis column every chart reserves, so the lane
                   labels, the price axis and the power axis all line up.
   ============================================================================ */
:root{ --cl-hour-w:38px; }

.cl-tl{display:flex; align-items:stretch; padding-right:var(--bb-chart-gutter-r)}
/* Both columns reserve the same strip at the top for the day labels, so lane N in the scroller
   and label N in the gutter start at the same y and every row stays on its own baseline. */
:root{ --cl-tl-daystrip:26px }
.cl-tl-yaxis{width:var(--bb-chart-gutter-l); flex:none; position:relative;
  border-right:1px solid var(--border-1); display:flex; flex-direction:column;
  padding-top:var(--cl-tl-daystrip)}
/* One label per lane, matching the lane height exactly so rows stay on the same
   baseline as their track. Icon above a right-aligned name, per the design. */
.cl-tl-rowlab{height:76px; flex:none; display:flex; flex-direction:column; align-items:flex-end;
  justify-content:center; gap:5px; padding-right:10px; text-align:right; line-height:1.15}
.cl-tl-ic{color:var(--fg-accent); display:inline-flex}
.cl-tl-ic svg{width:24px; height:24px; display:block}
.cl-tl-nm{font-size:calc(var(--bb-chart-fs)*1.25); font-weight:700; color:var(--fg-accent); white-space:nowrap}

.cl-tl-scroller{overflow-x:auto; overflow-y:hidden; flex:1; scrollbar-width:none; -ms-overflow-style:none}
.cl-tl-scroller::-webkit-scrollbar{display:none}
.cl-tl-inner{position:relative; padding-top:var(--cl-tl-daystrip)}

/* Day bands: every other day gets a wash, so seven days read as seven days. */
.cl-tl-days{position:absolute; inset:0; pointer-events:none; z-index:0}
.cl-tl-day .cl-tl-daylab{top:6px}
.cl-tl-day{position:absolute; top:0; bottom:0; border-left:1px solid var(--border-1)}
.cl-tl-day.cl-alt{background:none}
.cl-tl-daylab{position:absolute; top:6px; left:8px; font-size:calc(var(--bb-chart-fs)*1.05);
  font-weight:700; color:var(--fg-accent); white-space:nowrap; font-variant-numeric:tabular-nums}
.cl-tl-day.cl-today .cl-tl-daylab{color:var(--fg-accent)}

.cl-tl-lane{position:relative; height:76px}
.cl-tl-track{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:1px; background:var(--border-1)}
/* Segments are absolutely placed on the hour scale, so a bar sits on the minute it
   actually runs rather than on its turn in a sequence. */
.cl-tl-seg{position:absolute; height:24px; top:50%; transform:translateY(-50%);
  border-radius:var(--bb-r-pill); cursor:help; z-index:1}

.cl-tl-xaxis{position:relative; height:26px; border-top:1px solid var(--border-1); margin-top:4px}
.cl-tl-xtick{position:absolute; top:5px; transform:translateX(-50%); font-size:var(--bb-chart-fs);
  font-weight:500; color:var(--fg-3); font-variant-numeric:tabular-nums}
.cl-tl-xtick.cl-mark{color:var(--fg-accent); font-weight:700}

.cl-tl-now{position:absolute; top:var(--cl-tl-daystrip); bottom:26px; width:0; border-left:2px dashed var(--fg-accent);
  z-index:6; pointer-events:none}
.cl-tl-nowtag{position:absolute; top:-22px; left:0; transform:translateX(-50%);
  background:var(--fg-highlight); color:var(--fg-accent); font-size:var(--bb-chart-fs);
  font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:var(--bb-r-pill);
  white-space:nowrap; font-variant-numeric:tabular-nums; z-index:7}

/* The two Highcharts cards ride the same scroller so they pan with the Gantt. */
.cl-chart-scroll{overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none}
.cl-chart-scroll::-webkit-scrollbar{display:none}

@media(max-width:720px){ :root{ --cl-hour-w:26px } }

/* ===== "When each asset runs" — the prototype's Assets card (app.html #sec-plan-assets) =====
   The chart runs edge to edge inside the tile; only the header and legend carry the 22px pad. */
/* Every plan chart is a bordered tile whose timeline runs edge to edge, so the three plots keep
   one width and stay pixel-aligned while they scroll together. */
body.cl-app #version-detail .bb-chart-card{border:1px solid var(--border-1)}
body.cl-app .bb-chart-body > .cl-tl:not(.cl-tl-plan){margin-left:-24px; margin-right:-24px}
[data-testid="asset-gantt-card-unified"] > .bb-chart-body{padding:0}
.cl-plan-hd{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 22px 10px}
.cl-plan-hd > .cl-kicker{font-size:15px; letter-spacing:.04em}
.cl-plan-tools{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.cl-plan-tools .cl-btn{padding:7px 15px; font-size:12px}
.cl-plan-tools .cl-plan-fw{padding:7px 11px}
.cl-plan-tools .cl-plan-fw svg{display:block}
body.cl-app [data-testid="asset-gantt-card-unified"] .bb-chart-body > .cl-legend-in{padding:0 22px 14px}
[data-testid="asset-gantt-card-unified"].cl-fullwidth{width:calc(100vw - 48px); max-width:none;
  margin-left:calc(50% - 50vw + 24px); margin-right:calc(50% - 50vw + 24px)}

/* No day-label strip and no centre track: day bands, lane gridlines and the x-axis date carry it. */
:is(.cl-tl-plan,.cl-tl-cost){--cl-tl-daystrip:0px}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-daylab{display:none}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-day{border-left:none}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-day + .cl-tl-day{border-left:1px solid var(--border-1)}
.cl-tl-plan .cl-tl-lane + .cl-tl-lane::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--border-1)}
.cl-tl-plan .cl-tl-xaxis, .cl-tl-cost .cl-tl-xaxis{height:28px; margin-top:0}
/* Every vertical rule stops at the x-axis (the axis row and the 26px below it stay white). */
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-yaxis{border-right:none}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-yaxis::after{content:""; position:absolute; right:0; top:0; bottom:54px; width:1px; background:var(--border-1)}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-scroller{padding-bottom:26px}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-days{bottom:28px}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-now{top:0; bottom:28px}
:is(.cl-tl-plan,.cl-tl-cost) .cl-tl-nowtag{top:4px}
.cl-tl-hovercol{position:absolute; top:0; bottom:28px; background:var(--bb-lightblue-50); opacity:.6; pointer-events:none; z-index:0}

/* Painted blocks — past blue · now yellow · future dashed lightblue; storage by direction. */
.cl-tl-slot{position:absolute; height:24px; top:50%; transform:translateY(-50%); z-index:1; animation:clSlotIn .32s var(--bb-ease) both}
/* Hour blocks carry their own width (a merged run); a block that is not a run end overlaps the next
   by 1px so fractional hour widths never open a hairline seam between two blocks. */
.cl-tl-slot.cl-h.cl-run-s{border-top-left-radius:12px; border-bottom-left-radius:12px}
.cl-tl-slot.cl-h.cl-run-e{border-top-right-radius:12px; border-bottom-right-radius:12px}
.cl-tl-slot.cl-q{width:max(2px, calc(var(--cl-hour-w) / 4 - 2px)); border-radius:var(--bb-r-pill)}
.cl-tl-slot.cl-past{background:var(--fg-accent)}
.cl-tl-slot.cl-now{background:var(--fg-highlight)}
.cl-tl-slot.cl-future{background:var(--bb-lightblue-25); border:1px dashed var(--bb-lightblue)}
.cl-tl-slot.cl-charge{background:var(--bb-series-charge)}
.cl-tl-slot.cl-discharge{background:var(--bb-series-discharge)}
/* Planned storage: the legend's "Planned" swatch (pale fill, dashed outline) in the direction's hue. */
.cl-tl-slot.cl-charge-planned, .cl-sw-box.cl-charge-planned{background:color-mix(in srgb, var(--bb-series-charge) 18%, transparent); border:1px dashed var(--bb-series-charge)}
.cl-tl-slot.cl-discharge-planned, .cl-sw-box.cl-discharge-planned{background:color-mix(in srgb, var(--bb-series-discharge) 18%, transparent); border:1px dashed var(--bb-series-discharge)}
.cl-tl-plan[data-step="60"] .cl-tl-slot.cl-q,
.cl-tl-plan[data-step="15"] .cl-tl-slot.cl-h{display:none}
@keyframes clSlotIn{from{opacity:0; transform:translateY(-50%) scaleY(.4)} to{opacity:1; transform:translateY(-50%) scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .cl-tl-slot{animation:none} }
/* Hover targets carry only the popover; the blocks underneath are what you see. */
.cl-tl-plan .cl-tl-hit{background:transparent; border-color:transparent; z-index:2; margin:0}
.cl-tl-plan .cl-tl-hit:hover{filter:none}
/* The popover would be clipped by the scroller and trapped under the NOW line and later lanes, so
   cl-timeline.js shows a copy of it floating on <body> instead of the in-place one. */
.cl-tl-plan .cl-tl-hit:hover > .bb-gantt-tip{display:none}
.bb-gantt-tip.cl-gantt-float{display:block; position:fixed; bottom:auto; transform:none; z-index:1000}
/* The running hour is already the yellow block; the hover target must not draw its own yellow
   ring (body.cl-app adds one to every running segment, so match that specificity). */
body.cl-app .cl-tl-plan .bb-gantt-segment.bb-gantt-state-running{box-shadow:none}

/* ===== The two time-series charts on the timeline chassis ===== */
/* Their y-axis column holds tick labels rather than lane labels, so it needs no lane rhythm. */
.cl-tl-yaxis-chart{padding-top:0; display:block}
.cl-tl-yaxis-chart .cl-tl-ytick{position:absolute; right:10px; transform:translateY(-50%);
  font-size:calc(var(--bb-chart-fs)*1.05); font-weight:500; color:var(--fg-3);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.cl-tl-yaxis-chart .cl-tl-yunit{position:absolute; top:2px; right:10px;
  font-size:calc(var(--bb-chart-fs)*.9); font-weight:700; letter-spacing:.03em; color:var(--fg-accent)}
.cl-tl-plot{display:block}
.cl-tl-gridline{stroke:var(--border-1); stroke-width:1}
.cl-tl-gridline.cl-zero{stroke:var(--border-2)}
/* Contracted grid-connection limits: dashed, import in brand blue, feed-in in the heat hue. */
.cl-tl-limit{stroke:var(--fg-accent); stroke-width:2; stroke-dasharray:6 5}
.cl-tl-limit.cl-exp{stroke:var(--bb-series-boiler)}
/* Net exchange: measured is solid ink, planned is the same line dashed. */
.cl-tl-net{stroke:var(--fg-1); stroke-width:2; fill:none}
.cl-tl-net.cl-planned{stroke-dasharray:5 4; opacity:.75}
.cl-tl-peakbox{fill:var(--bb-lightblue); fill-opacity:.55; stroke:var(--fg-accent); stroke-width:1}
/* Chart legend above the electrical power plot: row 1 series pills, row 2 the drawn marks (net line,
   dashed limits, peak-shaving box). */
/* Own class name: .cl-legend is the shared one-row legend (Gantt, dashboard) defined above; reusing it
   stacked every legend in a column. */
/* Same chassis as the prototype's #sec-plan-power card: .cl-plan-hd header (22px pad), then the
   legend-in (0 22px 14px) with its two .cl-legend rows 9px apart, then the edge-to-edge plot.
   Everything here is scoped to .cl-elec-card so the shared legend classes stay untouched. */
.cl-elec-card > .bb-chart-body{padding:0}
.cl-elec-card .cl-plan-hd{padding-bottom:10px}
body.cl-app .cl-elec-card .bb-chart-body > .cl-elegend{display:flex; flex-direction:column; gap:9px; padding:0 22px 14px}
.cl-elec-card .cl-elegend > .cl-legend{margin-top:0}
.cl-elec-card .cl-sw-box{flex:none; box-sizing:border-box}
.cl-elec-card .cl-sw-line{flex:none; width:18px; opacity:1}
.cl-elec-card .cl-sw-line.cl-el-net{border-top:2px solid var(--fg-1)}
.cl-elec-card .cl-sw-line.cl-el-imp{border-top:2px dashed var(--fg-accent)}
.cl-elec-card .cl-sw-line.cl-el-exp{border-top:2px dashed var(--bb-series-boiler)}
.cl-elec-card .cl-sw-box.cl-el-peak{background:color-mix(in srgb, var(--bb-lightblue) 60%, transparent); box-shadow:inset 0 0 0 1px var(--fg-accent)}
.cl-elec-card.cl-fullwidth{width:calc(100vw - 48px); max-width:none;
  margin-left:calc(50% - 50vw + 24px); margin-right:calc(50% - 50vw + 24px)}
.cl-tl-costline{stroke-width:2.5; fill:none; stroke-linejoin:round; stroke-linecap:round}
.cl-tl-envelope{stroke:var(--fg-2); stroke-width:2; stroke-dasharray:5 4; fill:none; opacity:.8}
/* ===== "Cost of heat" — the prototype's cost card (app.html #sec-plan-heatcost) =====
   Same chassis as the Assets card: header + legend carry the 22px pad, the plot runs edge to
   edge, and the dispatch fill / lines are painted by cl-plan-charts.js. */
.cl-cost-card > .bb-chart-body{padding:0}
.cl-cost-card .cl-plan-hd{padding-bottom:10px; flex-wrap:wrap}
.cl-cost-card .cl-plan-hd-l{display:flex; align-items:center; gap:16px}
.cl-cost-card .cl-plan-hd-l > .cl-kicker{font-size:15px; letter-spacing:.04em}
body.cl-app .cl-cost-card .bb-chart-body > .cl-legend-in{padding:0 22px 14px}
.cl-cost-card.cl-fullwidth{width:calc(100vw - 48px); max-width:none;
  margin-left:calc(50% - 50vw + 24px); margin-right:calc(50% - 50vw + 24px)}
.cl-tl-cost .cl-tl-yaxis-chart{border-right:none}
.cl-tl-cost .cl-tl-inner{z-index:0}
.cl-tl-cost .cl-tl-plot{position:relative; z-index:1}
.cl-tl-cost .cl-tl-hovercol{bottom:28px}
.cl-tl-cost .cl-tl-costline{stroke-width:2.5}
/* One dashed style for every forecast line: the past-hours forecast and the line ahead of "now". */
.cl-tl-cost .cl-tl-costline.cl-fc,
.cl-tl-cost .cl-tl-costline.cl-tl-forecast{stroke-width:2; stroke-dasharray:5 6; opacity:.6}
/* Actual vs forecast key, next to the per-source legend. */
.cl-cost-card .cl-lg-line{display:inline-block; width:22px; height:0; border-top:2.5px solid var(--fg-2)}
.cl-cost-card .cl-lg-line.cl-fc{border-top:2px dashed var(--fg-2); opacity:.7}
/* Hover-scrub crosshair (cl-plan-charts.js): hidden until the pointer enters the plot. */
.cl-tl-crosshair{stroke:var(--fg-2); stroke-width:1; pointer-events:none}
.cl-tl-hover-capture{fill:transparent; cursor:crosshair}

/* ── Assistant: rich Markdown + asset status cards ──────────────────────────
   The dock's answer bubble renders Markdown (bb-markdown.js), so it needs real block
   typography: .cl-msg sets white-space:pre-wrap for plain text, which would double every gap
   between rendered blocks. dashboard-assistant.js adds .cl-md to a bubble once it holds
   rendered Markdown, which opts it back to normal wrapping — an explicit class rather than
   :has(), so the rule does not depend on selector support.
   Colours come from semantic/chart tokens only, so a theme switch cascades. */
.cl-msg.cl-ai.cl-md{white-space:normal}
.cl-msg.cl-ai > :first-child{margin-top:0}
.cl-msg.cl-ai > :last-child{margin-bottom:0}
.cl-msg.cl-ai p{margin:0 0 9px}
.cl-msg.cl-ai h3, .cl-msg.cl-ai h4, .cl-msg.cl-ai h5, .cl-msg.cl-ai h6{
  margin:13px 0 6px; font-size:13px; font-weight:var(--bb-weight-bold); color:var(--fg-accent)}
.cl-msg.cl-ai strong{color:var(--fg-accent); font-weight:700}
.cl-msg.cl-ai ul, .cl-msg.cl-ai ol{margin:0 0 9px; padding-left:20px}
.cl-msg.cl-ai li{margin-bottom:3px}
.cl-msg.cl-ai li > ul, .cl-msg.cl-ai li > ol{margin:3px 0 0}
.cl-msg.cl-ai code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
  padding:1px 5px; border-radius:var(--bb-r-xs); background:var(--bb-bg-2)}
.cl-msg.cl-ai pre{margin:0 0 9px; padding:10px 12px; border-radius:var(--bb-r-sm);
  background:var(--bb-bg-2); overflow-x:auto}
.cl-msg.cl-ai pre code{padding:0; background:none}
.cl-msg.cl-ai blockquote{margin:0 0 9px; padding:2px 0 2px 11px; border-left:3px solid var(--border-1); color:var(--fg-3)}
.cl-msg.cl-ai hr{border:none; border-top:1px solid var(--border-1); margin:11px 0}
.cl-msg.cl-ai a{color:var(--fg-action); text-decoration:underline}
.cl-msg.cl-ai .bb-md-tablewrap{overflow-x:auto; margin:0 0 9px}
.cl-msg.cl-ai table{border-collapse:collapse; width:100%; font-size:12px}
.cl-msg.cl-ai th, .cl-msg.cl-ai td{text-align:left; padding:6px 9px; border-bottom:1px solid var(--border-1); white-space:nowrap}
.cl-msg.cl-ai th{font-weight:700; color:var(--fg-3)}

/* Asset status cards. One per asset the turn inspected; they sit in the message flow as
   evidence attached to the answer above them, so the bubble chrome is stripped off. */
.cl-msg.cl-cards{max-width:100%; padding:0; border:none; background:none; backdrop-filter:none;
  -webkit-backdrop-filter:none; white-space:normal}
/* Tables and graphics in the chat (schedule, prices, cost of heat). Plain SVG, no script. */
.cl-viz{margin:0; padding:10px 12px; border:1px solid var(--border-1); border-radius:var(--bb-r-sm);
  background:var(--bb-surface-fill)}
.cl-viz-title{font-size:12px; font-weight:700; color:var(--fg-1); margin-bottom:6px}
.cl-viz-scroll{overflow-x:auto}
.cl-viz-table{width:100%; border-collapse:collapse; font-size:11px; color:var(--fg-2)}
.cl-viz-table th{text-align:left; font-weight:700; color:var(--fg-3); padding:3px 8px 3px 0;
  border-bottom:1px solid var(--border-1); white-space:nowrap}
.cl-viz-table td{padding:3px 8px 3px 0; border-bottom:1px solid var(--border-1); white-space:nowrap}
.cl-viz-svg{width:100%; height:auto; display:block}
.cl-viz-grid line{stroke:var(--border-1); stroke-width:1}
.cl-viz-tick{font-size:9px; fill:var(--fg-3)}
.cl-viz-lane{font-size:9px; fill:var(--fg-2)}
.cl-viz-line{fill:none; stroke-width:1.8; stroke-linejoin:round}
.cl-viz-s0{stroke:var(--bb-lane-0); background:var(--bb-lane-0)}
.cl-viz-s1{stroke:var(--bb-lane-1); background:var(--bb-lane-1)}
.cl-viz-s2{stroke:var(--bb-lane-2); background:var(--bb-lane-2)}
.cl-viz-s3{stroke:var(--bb-lane-3); background:var(--bb-lane-3)}
.cl-viz-s4{stroke:var(--bb-lane-4); background:var(--bb-lane-4)}
.cl-viz-s5{stroke:var(--bb-lane-5); background:var(--bb-lane-5)}
.cl-viz-k0{fill:var(--bb-ink-40); background:var(--bb-ink-40); opacity:.35}
.cl-viz-k1{fill:var(--fg-action); background:var(--fg-action)}
.cl-viz-k2{fill:var(--bb-status-ok); background:var(--bb-status-ok)}
.cl-viz-k3{fill:var(--bb-status-warn); background:var(--bb-status-warn)}
.cl-viz-k4{fill:var(--bb-ink-40); background:var(--bb-ink-40); opacity:.6}
.cl-viz-span{rx:2}
.cl-viz-legend{display:flex; flex-wrap:wrap; gap:4px 12px; margin:6px 0 0; padding:0; list-style:none;
  font-size:10px; color:var(--fg-3)}
.cl-viz-legend li{display:inline-flex; align-items:center; gap:5px}
.cl-viz-key{width:10px; height:10px; border-radius:2px; display:inline-block}
.cl-viz-empty{font-size:11px; color:var(--fg-3); margin:4px 0 0}
.cl-chat-cards{display:flex; flex-direction:column; gap:9px}
/* Own name, not .cl-acard: that class already belongs to the fixed-size 168x168 dashboard-lane
   tile (line ~9367) — reusing it here collapsed these chat cards to that tile's dimensions. */
.cl-chat-acard{--cl-runstate:var(--fg-3);
  padding:11px 13px; border:1px solid var(--border-1); border-left:3px solid var(--cl-runstate);
  border-radius:var(--bb-r-sm); background:var(--bb-surface-fill)}
.cl-acard-hd{display:flex; align-items:flex-start; gap:9px}
.cl-acard-ic{flex:none; width:22px; height:22px; color:var(--fg-accent)}
.cl-acard-ic svg{width:22px; height:22px; display:block}
.cl-acard-ttls{display:flex; flex-direction:column; min-width:0; flex:1}
.cl-acard-name{font-size:13px; font-weight:700; color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl-acard-path{font-size:11px; color:var(--fg-3)}
.cl-acard-state{flex:none; display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--cl-runstate)}
.cl-acard-state svg{width:14px; height:14px; display:block}

/* One colour per run state, on the left border and the state chip together, so a dock full of
   cards is scannable. Mirrors AssetRunState.getCssSuffix(). */
.cl-runstate--on{--cl-runstate:var(--bb-success-text)}
.cl-runstate--producing{--cl-runstate:var(--bb-chart-amber)}
.cl-runstate--heating{--cl-runstate:var(--bb-chart-orange)}
.cl-runstate--charging{--cl-runstate:var(--bb-chart-indigo)}
.cl-runstate--discharging{--cl-runstate:var(--bb-chart-teal)}
.cl-runstate--importing{--cl-runstate:var(--bb-chart-purple)}
.cl-runstate--exporting{--cl-runstate:var(--bb-chart-sky-text)}
.cl-runstate--idle{--cl-runstate:var(--bb-warn-text)}
.cl-runstate--fault{--cl-runstate:var(--bb-danger-text)}
.cl-runstate--off, .cl-runstate--unknown{--cl-runstate:var(--fg-3)}

.cl-acard-vals{display:flex; flex-wrap:wrap; gap:13px; margin-top:9px}
.cl-acard-val{display:flex; flex-direction:column; min-width:0}
.cl-acard-val-num{font-size:14px; font-weight:700; color:var(--fg-1)}
.cl-acard-val-lbl{font-size:10px; color:var(--fg-3)}
.cl-acard-bar{margin-top:9px}
.cl-acard-bar-track{height:6px; border-radius:var(--bb-r-pill); background:var(--bb-bg-2); overflow:hidden}
.cl-acard-bar-fill{height:100%; border-radius:var(--bb-r-pill); background:var(--fg-accent)}
.cl-acard-bar-fill.cl-bar--blue{background:var(--bb-chart-indigo)}
.cl-acard-bar-fill.cl-bar--green{background:var(--bb-success-text)}
.cl-acard-bar-fill.cl-bar--orange{background:var(--bb-chart-orange)}
.cl-acard-bar-fill.cl-bar--red{background:var(--bb-danger-text)}
.cl-acard-bar-lbl{display:flex; justify-content:space-between; gap:8px; margin-top:4px; font-size:10px; color:var(--fg-3)}
.cl-acard-ft{margin-top:7px; font-size:10px; color:var(--fg-3)}

/* Shown only when the instance has no enabled LLM chain link. */
.cl-chat-unconfigured{margin-top:10px; font-size:12px; line-height:1.45; color:var(--fg-3)}

/* ── Assistant: wide mode ───────────────────────────────────────────────────
   The dock's width is --bb-chat-w; wide mode overrides it to half the viewport rather than
   restyling the dock, so the open/close transform and every child rule keep working unchanged.
   Only offered from 1100px up — that is where the dock stops covering the page anyway (below it
   the scrim is on and the dock is already near full width), so a wider toggle would be a no-op. */
.cl-chat-hd .cl-wide{margin-left:auto; flex:none; width:32px; height:32px; border:none;
  border-radius:var(--bb-r-pill); cursor:pointer; display:none; place-items:center;
  background:color-mix(in srgb, var(--bb-white) 12%, transparent); color:var(--bb-white);
  transition:background var(--bb-dur-fast) var(--bb-ease)}
.cl-chat-hd .cl-wide:hover{background:color-mix(in srgb, var(--bb-white) 22%, transparent)}
.cl-chat-hd .cl-wide svg{width:15px; height:15px}
/* The close button keeps its own margin-left:auto for the narrow case, where the expand
   button is hidden; when both show, this one pushes and the close button simply follows. */
.cl-chat-hd .cl-wide + .cl-x{margin-left:0}
/* "New conversation" leads the right-hand button group, so it takes the auto margin (#220). */
.cl-chat-hd .cl-new{margin-left:auto; flex:none; width:32px; height:32px; border:none; border-radius:var(--bb-r-pill);
  cursor:pointer; display:grid; place-items:center; background:color-mix(in srgb, var(--bb-white) 12%, transparent);
  color:var(--bb-white); transition:background var(--bb-dur-fast) var(--bb-ease)}
.cl-chat-hd .cl-new:hover{background:color-mix(in srgb, var(--bb-white) 22%, transparent)}
.cl-chat-hd .cl-new svg{width:16px; height:16px}
.cl-chat-hd .cl-new ~ .cl-wide, .cl-chat-hd .cl-new ~ .cl-x{margin-left:0}
.cl-chat-hd .cl-wide .cl-ic-shrink{display:none}
body.cl-chat-wide .cl-chat-hd .cl-wide .cl-ic-grow{display:none}
body.cl-chat-wide .cl-chat-hd .cl-wide .cl-ic-shrink{display:block}

@media(min-width:1100px){
  .cl-chat-hd .cl-wide{display:grid}
  body.cl-chat-wide .cl-chat-dock{width:50vw}
  /* A half-page dock has room for a real reading measure, so let answers use it. */
  body.cl-chat-wide .cl-msg{max-width:72%}
}

/* ===== MARKET PRICES — day-ahead electricity bars + gas line (cl-market-prices.js) =====
   Same lock-step chassis as the Energy Plan charts (one scroller, frozen y-axes). Vertical rhythm,
   top to bottom: 31px title strip · 5 × 46.6px plot rows · 29px air under the zero line · x-axis. */
.cl-mp-card .bb-chart-body{padding:0 0 22px}
/* same breakout as the Assets card: the ↔ button adds .cl-fullwidth (cl-timeline.js) */
.cl-mp-card.cl-fullwidth{width:calc(100vw - 48px); max-width:none;
  margin-left:calc(50% - 50vw + 24px); margin-right:calc(50% - 50vw + 24px)}
.cl-mp-legend{display:flex; gap:22px; align-items:center; padding:0 22px 10px}
.cl-mp-leg{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--fg-accent)}
.cl-mp-leg-gas svg{color:var(--bb-heat)}
.cl-mp{--cl-tl-daystrip:0px; --mp-gutter:105px}
/* the generic chart rule pulls .cl-tl out by 24px each side; this chart sits flush in its card */
body.cl-app .bb-chart-body > .cl-tl.cl-mp{margin-left:0; margin-right:0}
.cl-mp-yaxis{width:var(--mp-gutter); flex:none; position:relative}
.cl-mp-yaxis::after{content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background:var(--border-1)}
.cl-mp-ytick,.cl-mp-yunit{position:absolute; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.cl-mp-ytick{font-size:12px; transform:translateY(-50%)}
.cl-mp-yunit{font-size:11px; top:4px}
.cl-mp-elec{right:9px; color:var(--fg-accent)}
.cl-mp-gas{right:58px; color:var(--bb-heat)}
.cl-mp .cl-tl-inner{padding-top:0}
.cl-mp .cl-tl-day{border-left:none}
.cl-mp .cl-tl-day + .cl-tl-day{border-left:1px solid var(--border-1)}
.cl-mp .cl-tl-day.cl-alt{background:var(--bg-2)}
.cl-mp-plot{display:block; position:relative; z-index:1}
.cl-mp-grid{stroke:var(--border-1); stroke-width:1; shape-rendering:crispEdges}
/* Electricity bars by time, as the plan's blocks: past blue · now yellow · day-ahead lightblue dashed ·
   forecast hollow dashed. */
.cl-mp-b-past .cl-mp-bar-fill{fill:var(--fg-accent)}
.cl-mp-b-now .cl-mp-bar-fill{fill:var(--fg-highlight)}
.cl-mp-b-future .cl-mp-bar-fill{fill:var(--bb-lightblue-25)}
.cl-mp-b-fcst .cl-mp-bar-fill{fill:var(--bg-1); fill-opacity:.6}
.cl-mp-bar-edge{fill:none; stroke:var(--bb-lightblue); stroke-width:1; stroke-dasharray:3 2}
.cl-mp-b-fcst .cl-mp-bar-edge{stroke:var(--fg-3); stroke-dasharray:2 2}
.cl-mp .cl-tl-now{top:0; bottom:28px}
.cl-mp .cl-tl-nowtag{top:4px}
.cl-mp-sw-fcst{width:14px; height:12px; border:1px dashed var(--fg-3); border-bottom:none; border-radius:3px 3px 0 0}
.cl-mp-gasline{fill:none; stroke:var(--bb-heat); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cl-mp .cl-tl-xaxis{margin-top:0; height:28px}
.cl-mp .cl-tl-xtick{top:6px}

/* Imbalance section: legend dash samples and the settlement table */
.cl-mp-dash{width:22px; height:0; border-top:2px dashed var(--fg-3)}
.cl-mp-dash-fine{border-top-style:dotted}
.cl-mp-legend{flex-wrap:wrap}
.cl-mp-card .bb-chart-empty{padding:28px 22px}
.cl-mp-table-wrap{padding:0 22px}
.cl-mp-table th{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-accent); white-space:nowrap}
.cl-mp-table .cl-mp-num{text-align:right}

/* Imbalance chart + settlement table */
.cl-mp-line{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.cl-mp-line-feed{stroke:var(--bb-series-charge)}
.cl-mp-line-take{stroke:var(--bb-lightblue)}
.cl-mp-line-ind{stroke-dasharray:5 4; opacity:.7}
.cl-mp-table tbody tr.cl-mp-ind td.cl-mp-num{font-style:italic}
.cl-mp-future{fill:var(--bb-bg-2); opacity:.75}
.cl-mp-futureedge{stroke:var(--border-2); stroke-width:1; shape-rendering:crispEdges}
.cl-mp-ytick.cl-mp-plain{right:9px; font-weight:500; color:var(--fg-3)}
.cl-mp-table-wrap{max-height:560px; overflow-y:auto; padding-bottom:6px}
.cl-mp-table thead th{position:sticky; top:0; background:var(--bb-surface); z-index:2}
.cl-mp-table tbody tr:nth-child(even):not(.cl-mp-dayrow){background:var(--bb-bg-2)}
.cl-mp-period{font-weight:700; color:var(--fg-accent); white-space:nowrap; font-variant-numeric:tabular-nums}
.cl-mp-date{white-space:nowrap; color:var(--fg-2)}
.cl-mp-num{font-variant-numeric:tabular-nums}
.cl-mp-dayrow td{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-accent); padding-top:14px}
/* the running settlement period (ISP): yellow row with a NOW tag, as app.html; later periods muted */
.cl-mp-table tbody tr.cl-mp-now td{background:var(--fg-highlight); color:var(--fg-accent); font-weight:700}
.cl-mp-nowtag{margin-left:7px; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.cl-mp-table tbody tr.cl-mp-fut td{color:var(--fg-3)}
.cl-mp-state{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; background:var(--bb-neutral-disabled)}
.cl-mp-state-up{background:var(--bb-series-charge)}
.cl-mp-state-down{background:var(--bb-lightblue)}
.cl-mp-state-both{background:var(--fg-accent)}
/* cl-app zeroes .cl-sec-head's top margin; a section that follows a chart card needs its own air */
body.cl-app .cl-mp-card + .cl-sec-head{margin-top:64px}

/* ── Asset parameters (settings) — ported from the advisory-board prototype (.set-* / .gr-*) ── */
.bb-ap { position: relative; }
.bb-ap-head { margin-bottom: 24px; }
.bb-ap-kicker { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.46; text-transform: uppercase; color: var(--fg-accent); }
.bb-ap-head h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--fg-accent); }
.bb-ap-head p { margin: 10px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.46; color: var(--fg-2); text-wrap: pretty; }
.bb-ap-status { position: absolute; top: 0; right: 0; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.2s ease; }
.bb-ap-status.show { animation: bb-ap-status-fade 3.5s ease forwards; }
@keyframes bb-ap-status-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.bb-ap-status.ok { color: var(--bb-success-text); }
.bb-ap-status.err { color: var(--bb-danger-text); }

.bb-ap-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .bb-ap-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bb-ap-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bb-ap-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.bb-ap-railbtn { position: relative; aspect-ratio: 1.16; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 10px 8px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-2xs); font-family: inherit; text-align: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.bb-ap-railbtn .ic { width: 30px; height: 30px; flex: 0 0 auto; color: var(--fg-accent); transition: color 0.15s ease; }
.bb-ap-railbtn .ic svg { width: 30px; height: 30px; display: block; }
.bb-ap-railbtn .lb { font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--fg-2); line-height: 1.3; text-wrap: balance; }
.bb-ap-railbtn:hover { border-color: var(--fg-accent); box-shadow: var(--bb-shadow-sm); }
.bb-ap-railbtn:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.bb-ap-railbtn[aria-selected="true"] { background: var(--bg-dark); border-color: var(--bg-dark); }
.bb-ap-railbtn[aria-selected="true"] .ic { color: var(--fg-highlight); }
.bb-ap-railbtn[aria-selected="true"] .lb { color: var(--fg-inverse); }

.bb-ap-detail { margin-top: 18px; background: var(--bb-surface); border-top: 3px solid var(--fg-accent); border-radius: var(--bb-r); box-shadow: var(--bb-shadow-tile); overflow: hidden; }
.bb-ap-body { padding: 26px 24px; min-height: 240px; }
/* Per-asset tabs (CHP, Battery): instance picker above the fields */
.bb-ap-assetpick { padding: 22px 24px 20px; border-bottom: 1px solid var(--border-2); }
.bb-ap-assetpick .bb-ap-field { max-width: 360px; }
.bb-ap-assetpick .bb-ap-select { font-size: 14px; padding: 9px 12px; }
.bb-ap-empty { margin: 0; font-size: 13px; color: var(--bb-text-3); }
.bb-ap-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; align-items: start; margin: 0; }
.bb-ap-panel > .full { grid-column: 1 / -1; }
@media (max-width: 900px) { .bb-ap-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bb-ap-panel { grid-template-columns: minmax(0, 1fr); } }

.bb-ap-field, .bb-ap-block { display: flex; flex-direction: column; gap: 7px; }
.bb-ap-field > label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--fg-2); }
.bb-ap .hint { display: block; font-size: 11.5px; font-weight: 400; color: var(--bb-text-3); line-height: 1.45; }

.bb-ap-inp { display: flex; align-items: stretch; border: 1px solid var(--border-2); border-radius: var(--bb-r-field); overflow: hidden; background: var(--bb-surface); transition: border-color 0.15s ease; }
.bb-ap-inp:focus-within { border-color: var(--fg-accent); }
.bb-ap-inp input { flex: 1 1 0%; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--bb-text); padding: 11px 13px; }
.bb-ap-inp input:disabled { color: var(--bb-text-3); cursor: not-allowed; }
.bb-ap-inp .unit { flex: 0 0 auto; display: flex; align-items: center; padding: 0 13px; font-size: 12px; font-weight: 700; color: var(--bb-text-3); border-left: 1px solid var(--bb-line); background: var(--bb-bg); }

.bb-ap-battotal { font-size: 12.5px; font-weight: 700; color: var(--fg-accent); font-variant-numeric: tabular-nums; }
.bb-ap-block.warn .bb-ap-battotal { color: var(--bb-heat); }

.bb-ap-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.bb-ap-toggle .tg-txt { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--fg-2); }
.bb-ap-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bb-ap-toggle .tg-sw { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 11px; background: var(--border-2); position: relative; transition: background 0.15s ease; }
.bb-ap-toggle .tg-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bb-surface); box-shadow: var(--bb-shadow-sm); transition: transform 0.15s ease; }
.bb-ap-toggle input:checked + .tg-sw { background: var(--bg-dark); }
.bb-ap-toggle input:checked + .tg-sw::after { transform: translateX(16px); }
.bb-ap-toggle input:focus-visible + .tg-sw { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.bb-ap-toggle input:disabled + .tg-sw { opacity: 0.55; }

.bb-ap-total { padding-top: 14px; margin-bottom: 7px; border-top: 1px solid var(--bb-line); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bb-ap-total .lbl { font-size: 12.5px; font-weight: 700; color: var(--fg-accent); }
.bb-ap-total .val { font-size: 16px; font-weight: 700; color: var(--fg-accent); font-variant-numeric: tabular-nums; }

.bb-ap-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bb-ap-statusrow .stlbl { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.bb-ap-select { font-family: inherit; font-weight: 600; font-size: 13px; color: var(--bb-text); background: var(--bb-surface); border: 1px solid var(--border-2); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.bb-ap-select:focus { outline: none; border-color: var(--fg-accent); }
.bb-ap-select:disabled { color: var(--bb-text-3); cursor: not-allowed; }

.bb-ap-note { margin: 14px 0 0; font-size: 12.5px; font-weight: 300; color: var(--bb-text-3); line-height: 1.5; }

/* Knowledge base: marks stage/dev-only content (emulators, virtual edge); hidden on production hosts. */
.bb-env-stage { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; color: var(--bb-chart-amber); border: 1px solid var(--bb-chart-amber); }

/* EU AI Act Art. 50: the "AI" pill next to AI-generated content (fragments/shared/ai-mark.html).
   One look everywhere, so users learn to recognise it. */
.bb-ai-mark{display:inline-flex; align-items:center; vertical-align:middle; margin-right:6px; padding:1px 6px;
  border-radius:var(--bb-r-pill); border:1px solid var(--border-1); background:var(--bb-bg-2); color:var(--fg-3);
  font-size:10.5px; font-weight:700; letter-spacing:.04em; line-height:1.4; cursor:help; white-space:nowrap}
.cl-msg.cl-ai .bb-ai-mark{float:right; margin:0 0 4px 8px}
.cl-chat-disclosure{margin:0; padding:6px 16px 0; color:var(--fg-3); font-size:11.5px; line-height:1.4}