/* ============================================================================
   BLUEPRINT DESIGN SYSTEM — COMPONENTS
   blueprint-components.css
   ----------------------------------------------------------------------------
   Requires blueprint-tokens.css to be loaded first.

   All selectors are namespaced with the `bp-` prefix to avoid collisions
   with host application styles. Components reference semantic tokens only.

   Suitable for both admin consoles and end-user frontends.
   ============================================================================ */

/* ------------------------------------------------------------------ *
 * BASE / RESET (scoped, non-destructive)                              *
 * ------------------------------------------------------------------ */
.bp-root,
.bp-root *,
.bp-root *::before,
.bp-root *::after {
  box-sizing: border-box;
}

.bp-root {
  margin: 0;
  background-color: var(--bp-bg);
  color: var(--bp-ink);
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-base);
  line-height: var(--bp-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--bp-transition), color var(--bp-transition);
}

/* optional blueprint grid texture on the canvas */
.bp-root.bp-grid {
  background-image:
    linear-gradient(var(--bp-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-line) 1px, transparent 1px);
  background-size: var(--bp-grid-size) var(--bp-grid-size);
  background-position: -1px -1px;
}

/* ------------------------------------------------------------------ *
 * TYPOGRAPHY HELPERS                                                  *
 * ------------------------------------------------------------------ */
.bp-mono { font-family: var(--bp-font-mono); }

.bp-display {
  font-size: var(--bp-text-3xl);
  font-weight: var(--bp-weight-semibold);
  letter-spacing: var(--bp-tracking-tight);
  line-height: var(--bp-leading-tight);
  margin: 0;
}
.bp-h1 {
  font-size: var(--bp-text-xl);
  font-weight: var(--bp-weight-semibold);
  letter-spacing: var(--bp-tracking-tight);
  margin: 0;
}
.bp-h2 {
  font-size: var(--bp-text-lg);
  font-weight: var(--bp-weight-semibold);
  margin: 0;
}
.bp-h3 {
  font-size: var(--bp-text-base);
  font-weight: var(--bp-weight-semibold);
  margin: 0;
}
.bp-text-dim   { color: var(--bp-ink-dim); }
.bp-text-faint { color: var(--bp-ink-faint); }
.bp-small      { font-size: var(--bp-text-sm); color: var(--bp-ink-dim); }

.bp-eyebrow {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  letter-spacing: var(--bp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bp-ink-faint);
}

.bp-code {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  background-color: var(--bp-surface-2);
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-sm);
  padding: 1px 5px;
  color: var(--bp-ink);
}

.bp-pre {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  background-color: var(--bp-surface-2);
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-sm);
  padding: var(--bp-space-4);
  line-height: var(--bp-leading-snug);
  overflow-x: auto;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * LINKS                                                               *
 * ------------------------------------------------------------------ */
.bp-link {
  color: var(--bp-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.bp-link:hover { border-bottom-color: var(--bp-accent); }

/* ------------------------------------------------------------------ *
 * BUTTONS                                                             *
 * ------------------------------------------------------------------ */
.bp-btn {
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-base);
  font-weight: var(--bp-weight-medium);
  line-height: 1;
  color: var(--bp-ink);
  background-color: transparent;
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: var(--bp-space-2) var(--bp-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-2);
  cursor: pointer;
  transition: background-color var(--bp-transition-fast),
    border-color var(--bp-transition-fast), color var(--bp-transition-fast);
}
.bp-btn:hover { border-color: var(--bp-ink-faint); }

.bp-btn--primary {
  background-color: var(--bp-accent);
  border-color: var(--bp-accent);
  color: var(--bp-on-accent);
}
.bp-btn--primary:hover {
  background-color: var(--bp-accent-hover);
  border-color: var(--bp-accent-hover);
}

.bp-btn--ghost {
  border-color: transparent;
  color: var(--bp-ink-dim);
}
.bp-btn--ghost:hover {
  color: var(--bp-ink);
  background-color: var(--bp-surface-2);
}

.bp-btn--danger {
  border-color: color-mix(in srgb, var(--bp-crit) 50%, transparent);
  color: var(--bp-crit);
}
.bp-btn--danger:hover {
  background-color: var(--bp-crit-faint);
}

.bp-btn--sm { padding: var(--bp-space-1) var(--bp-space-2); font-size: var(--bp-text-xs); }
.bp-btn--lg { padding: var(--bp-space-3) var(--bp-space-5); font-size: var(--bp-text-md); }
.bp-btn--block { width: 100%; justify-content: center; }

.bp-btn:disabled,
.bp-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.bp-btn__icon { width: 14px; height: 14px; flex: none; }

.bp-btn-row {
  display: flex;
  gap: var(--bp-space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ------------------------------------------------------------------ *
 * FORMS                                                               *
 * ------------------------------------------------------------------ */
.bp-field {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-2);
}
.bp-label {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-ink-faint);
}
.bp-input,
.bp-select,
.bp-textarea {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink);
  background-color: var(--bp-surface-2);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: var(--bp-space-2) var(--bp-space-3);
  width: 100%;
}
.bp-textarea { font-family: var(--bp-font-sans); resize: vertical; min-height: 80px; }
.bp-input::placeholder,
.bp-textarea::placeholder { color: var(--bp-ink-faint); }
.bp-input:focus,
.bp-select:focus,
.bp-textarea:focus {
  outline: var(--bp-focus-ring) solid var(--bp-accent);
  outline-offset: 1px;
  border-color: var(--bp-accent);
}
.bp-input:disabled,
.bp-select:disabled { opacity: 0.55; cursor: not-allowed; }

.bp-input--invalid { border-color: var(--bp-crit); }
.bp-field__hint  { font-size: var(--bp-text-xs); color: var(--bp-ink-faint); }
.bp-field__error { font-size: var(--bp-text-xs); color: var(--bp-crit); }

/* toggle / switch */
.bp-toggle {
  width: 36px;
  height: 20px;
  border: var(--bp-border-width) solid var(--bp-line-strong);
  background-color: var(--bp-surface-2);
  border-radius: var(--bp-radius-sm);
  position: relative;
  cursor: pointer;
  flex: none;
  padding: 0;
  transition: border-color var(--bp-transition-fast),
    background-color var(--bp-transition-fast);
}
.bp-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background-color: var(--bp-ink-faint);
  transition: left var(--bp-transition-fast), background-color var(--bp-transition-fast);
}
.bp-toggle[aria-checked="true"] {
  border-color: var(--bp-accent);
  background-color: var(--bp-accent-faint);
}
.bp-toggle[aria-checked="true"]::after {
  left: 18px;
  background-color: var(--bp-accent);
}

/* checkbox / radio accent */
.bp-checkbox,
.bp-radio { accent-color: var(--bp-accent); width: 15px; height: 15px; }

/* ------------------------------------------------------------------ *
 * PANELS / CARDS                                                      *
 * ------------------------------------------------------------------ */
.bp-panel {
  border: var(--bp-border-width) solid var(--bp-line);
  background-color: var(--bp-surface);
  border-radius: var(--bp-radius-md);
}
.bp-panel__head {
  padding: var(--bp-space-3) var(--bp-space-4);
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
}
.bp-panel__head .bp-eyebrow { margin-left: auto; }
.bp-panel__body { padding: var(--bp-space-4); }
.bp-panel__foot {
  padding: var(--bp-space-3) var(--bp-space-4);
  border-top: var(--bp-border-width) solid var(--bp-line);
}

.bp-tag-num {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-accent);
  border: var(--bp-border-width) solid var(--bp-accent);
  border-radius: var(--bp-radius-sm);
  padding: 1px 6px;
}

/* ------------------------------------------------------------------ *
 * STAT STRIP                                                          *
 * ------------------------------------------------------------------ */
.bp-stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: var(--bp-border-width) solid var(--bp-line);
  background-color: var(--bp-surface);
  border-radius: var(--bp-radius-md);
  overflow: hidden;
}
.bp-stat {
  padding: var(--bp-space-4) var(--bp-space-5);
  border-right: var(--bp-border-width) solid var(--bp-line);
}
.bp-stat:last-child { border-right: none; }
.bp-stat__label { display: block; margin-bottom: var(--bp-space-2); }
.bp-stat__value {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xl);
  font-weight: var(--bp-weight-semibold);
  line-height: 1;
  letter-spacing: var(--bp-tracking-tight);
}
.bp-stat__meta {
  margin-top: var(--bp-space-2);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink-dim);
  display: flex;
  align-items: center;
  gap: var(--bp-space-1);
}
.bp-delta--up   { color: var(--bp-ok); font-family: var(--bp-font-mono); }
.bp-delta--down { color: var(--bp-crit); font-family: var(--bp-font-mono); }

/* ------------------------------------------------------------------ *
 * STATUS — PILLS, DOTS, TAGS                                          *
 * ------------------------------------------------------------------ */
.bp-pill {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  letter-spacing: 0.04em;
  color: var(--bp-ink-dim);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-pill);
  padding: 2px var(--bp-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-1);
}
.bp-pill--ok   { color: var(--bp-ok);   border-color: color-mix(in srgb, var(--bp-ok) 45%, transparent); }
.bp-pill--warn { color: var(--bp-warn); border-color: color-mix(in srgb, var(--bp-warn) 45%, transparent); }
.bp-pill--crit { color: var(--bp-crit); border-color: color-mix(in srgb, var(--bp-crit) 45%, transparent); }

.bp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.bp-dot--ok   { background-color: var(--bp-ok); }
.bp-dot--warn { background-color: var(--bp-warn); }
.bp-dot--crit { background-color: var(--bp-crit); }

.bp-tag {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  color: var(--bp-ink-dim);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: 1px var(--bp-space-2);
  display: inline-block;
}

/* ------------------------------------------------------------------ *
 * METER / PROGRESS BAR                                                *
 * ------------------------------------------------------------------ */
.bp-bar {
  height: 6px;
  background-color: var(--bp-surface-2);
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-sm);
  position: relative;
  overflow: hidden;
}
.bp-bar__fill { position: absolute; top: 0; left: 0; bottom: 0; background-color: var(--bp-accent); }
.bp-bar__fill--ok   { background-color: var(--bp-ok); }
.bp-bar__fill--warn { background-color: var(--bp-warn); }
.bp-bar__fill--crit { background-color: var(--bp-crit); }

/* ------------------------------------------------------------------ *
 * TABLES                                                              *
 * ------------------------------------------------------------------ */
.bp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bp-text-base);
}
.bp-table thead th {
  text-align: left;
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-ink-faint);
  font-weight: var(--bp-weight-medium);
  padding: var(--bp-space-3) var(--bp-space-3) var(--bp-space-3);
  border-bottom: var(--bp-border-width) solid var(--bp-line);
}
.bp-table tbody td {
  padding: var(--bp-space-3);
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  vertical-align: middle;
}
.bp-table tbody tr:last-child td { border-bottom: none; }
.bp-table--hover tbody tr { cursor: pointer; }
.bp-table--hover tbody tr:hover td { background-color: var(--bp-surface-2); }
.bp-table__id {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink);
}
.bp-table__id small {
  display: block;
  color: var(--bp-ink-faint);
  font-size: var(--bp-text-2xs);
  margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * ALERTS / BANNERS                                                    *
 * ------------------------------------------------------------------ */
.bp-alert {
  display: flex;
  gap: var(--bp-space-3);
  align-items: flex-start;
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-left-width: 3px;
  background-color: var(--bp-surface);
  border-radius: var(--bp-radius-sm);
  padding: var(--bp-space-3) var(--bp-space-4);
  font-size: var(--bp-text-base);
}
.bp-alert--info { border-left-color: var(--bp-accent); }
.bp-alert--ok   { border-left-color: var(--bp-ok); }
.bp-alert--warn { border-left-color: var(--bp-warn); }
.bp-alert--crit { border-left-color: var(--bp-crit); }
.bp-alert__icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.bp-alert__body b { font-weight: var(--bp-weight-semibold); }
.bp-alert__body small { display: block; color: var(--bp-ink-dim); margin-top: 2px; }

/* ------------------------------------------------------------------ *
 * EMPTY STATE                                                         *
 * ------------------------------------------------------------------ */
.bp-empty {
  border: 1px dashed var(--bp-line-strong);
  border-radius: var(--bp-radius-md);
  padding: var(--bp-space-8);
  text-align: center;
}
.bp-empty__icon { width: 28px; height: 28px; stroke: var(--bp-ink-faint); margin-bottom: var(--bp-space-3); }
.bp-empty h4 { margin: 0 0 var(--bp-space-1); font-size: var(--bp-text-base); }
.bp-empty p  { margin: 0 0 var(--bp-space-4); color: var(--bp-ink-dim); font-size: var(--bp-text-sm); }

/* ------------------------------------------------------------------ *
 * BADGES / COUNTERS                                                   *
 * ------------------------------------------------------------------ */
.bp-badge {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  color: var(--bp-on-accent);
  background-color: var(--bp-accent);
  border-radius: var(--bp-radius-sm);
  padding: 1px 6px;
  display: inline-block;
}
.bp-badge--quiet {
  color: var(--bp-ink-faint);
  background-color: transparent;
}

/* ------------------------------------------------------------------ *
 * APP SHELL — SIDEBAR + TOPBAR (admin layout)                         *
 * ------------------------------------------------------------------ */
.bp-app {
  display: grid;
  grid-template-columns: var(--bp-sidebar-width) 1fr;
  min-height: 100vh;
}
.bp-sidebar {
  border-right: var(--bp-border-width) solid var(--bp-line);
  background-color: var(--bp-surface);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.bp-sidebar__brand {
  padding: var(--bp-space-4);
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
}
.bp-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border: var(--bp-border-width) solid var(--bp-accent);
  border-radius: var(--bp-radius-sm);
  display: grid;
  place-items: center;
  font-family: var(--bp-font-mono);
  font-weight: var(--bp-weight-bold);
  font-size: var(--bp-text-xs);
  color: var(--bp-accent);
  background-color: var(--bp-accent-faint);
}
.bp-nav { padding: var(--bp-space-2) 0; flex: 1; overflow-y: auto; }
.bp-nav__group { padding: var(--bp-space-2) var(--bp-space-4) var(--bp-space-1); }
.bp-nav__link {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  padding: var(--bp-space-2) var(--bp-space-4);
  color: var(--bp-ink-dim);
  text-decoration: none;
  font-size: var(--bp-text-base);
  border-left: var(--bp-border-width-accent) solid transparent;
  cursor: pointer;
}
.bp-nav__link:hover { color: var(--bp-ink); background-color: var(--bp-surface-2); }
.bp-nav__link.is-active {
  color: var(--bp-ink);
  background-color: var(--bp-surface-2);
  border-left-color: var(--bp-accent);
}
.bp-nav__link .bp-nav__count {
  margin-left: auto;
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink-faint);
}
.bp-nav__icon { width: 15px; height: 15px; flex: none; opacity: 0.85; }

.bp-main { min-width: 0; display: flex; flex-direction: column; }
.bp-topbar {
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  background-color: var(--bp-surface);
  padding: 0 var(--bp-space-6);
  height: var(--bp-topbar-height);
  display: flex;
  align-items: center;
  gap: var(--bp-space-4);
  position: sticky;
  top: 0;
  z-index: var(--bp-z-sticky);
}
.bp-crumb { font-family: var(--bp-font-mono); font-size: var(--bp-text-xs); color: var(--bp-ink-faint); }
.bp-crumb b { color: var(--bp-ink); font-weight: var(--bp-weight-semibold); }
.bp-crumb__sep { color: var(--bp-line-strong); margin: 0 var(--bp-space-2); }
.bp-topbar__spacer { flex: 1; }
.bp-content {
  padding: var(--bp-space-6) var(--bp-space-6) var(--bp-space-16);
  max-width: var(--bp-content-max);
  width: 100%;
}

/* environment chip */
.bp-env {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: 3px var(--bp-space-2);
  color: var(--bp-ink-dim);
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-2);
}

/* avatar */
.bp-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  display: grid;
  place-items: center;
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink-dim);
}

/* ------------------------------------------------------------------ *
 * USER-FRONTEND LAYOUT — centered, single column                     *
 * ------------------------------------------------------------------ */
.bp-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--bp-space-6) var(--bp-space-6) var(--bp-space-16);
}
.bp-shell--narrow { max-width: 560px; }

.bp-header {
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
  padding: var(--bp-space-4) 0;
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  margin-bottom: var(--bp-space-6);
}
.bp-header__spacer { flex: 1; }

/* card grid for user dashboards */
.bp-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--bp-space-5);
}

/* ------------------------------------------------------------------ *
 * THEME SWITCH                                                        *
 * ------------------------------------------------------------------ */
.bp-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-2);
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink-dim);
}
.bp-switch {
  width: 46px;
  height: 24px;
  border: var(--bp-border-width) solid var(--bp-line-strong);
  background-color: var(--bp-surface-2);
  border-radius: var(--bp-radius-sm);
  position: relative;
  cursor: pointer;
  padding: 0;
}
.bp-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--bp-accent);
  transition: left var(--bp-transition-fast);
}
[data-theme="light"] .bp-switch::after { left: 24px; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .bp-switch::after { left: 24px; }
}

/* ------------------------------------------------------------------ *
 * DIVIDERS / UTILITIES                                                *
 * ------------------------------------------------------------------ */
.bp-divider { height: 1px; background-color: var(--bp-line); border: 0; margin: var(--bp-space-4) 0; }
.bp-stack   { display: flex; flex-direction: column; gap: var(--bp-space-4); }
.bp-row     { display: flex; align-items: center; gap: var(--bp-space-3); }
.bp-row--between { justify-content: space-between; }
.bp-spacer  { flex: 1; }
.bp-cols-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bp-space-5); }
.bp-cols-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bp-space-5); }

/* ------------------------------------------------------------------ *
 * KEY-VALUE CHIP                                                      *
 *   Compact label/value pair for topbars and meta strips.             *
 * ------------------------------------------------------------------ */
.bp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bp-space-2);
  padding: 3px var(--bp-space-2);
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-sm);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink);
  white-space: nowrap;
}
.bp-chip__label {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  letter-spacing: var(--bp-tracking-wide);
  text-transform: uppercase;
  color: var(--bp-ink-faint);
}
.bp-chip__value {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  font-weight: var(--bp-weight-medium);
  color: var(--bp-ink);
}
.bp-chip--muted .bp-chip__value { color: var(--bp-ink-dim); }

/* ------------------------------------------------------------------ *
 * DROPDOWN MENU                                                       *
 *   Anchored action menu (toolbar exports, row actions).              *
 * ------------------------------------------------------------------ */
.bp-menu { position: relative; display: inline-block; }
.bp-menu__items {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  min-width: 150px;
  z-index: var(--bp-z-overlay);
  padding: var(--bp-space-1) 0;
}
.bp-menu__items[hidden] { display: none; }
.bp-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--bp-space-2) var(--bp-space-3);
  color: var(--bp-ink);
  background-color: transparent;
  border: none;
  text-decoration: none;
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-sm);
  cursor: pointer;
}
.bp-menu__item:hover { background-color: var(--bp-surface-2); }

/* ------------------------------------------------------------------ *
 * MODAL DIALOG                                                        *
 *   For native <dialog> elements.                                     *
 * ------------------------------------------------------------------ */
.bp-modal {
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-md);
  background-color: var(--bp-surface);
  color: var(--bp-ink);
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-base);
  line-height: var(--bp-leading-normal);
  padding: 0;
  max-width: 560px;
  width: 90vw;
}
.bp-modal--wide { max-width: 680px; }
.bp-modal::backdrop { background: var(--bp-scrim); }
.bp-modal__head {
  padding: var(--bp-space-4) var(--bp-space-5);
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
}
.bp-modal__body {
  padding: var(--bp-space-4) var(--bp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-4);
}
.bp-modal__foot {
  padding: var(--bp-space-3) var(--bp-space-5);
  border-top: var(--bp-border-width) solid var(--bp-line);
  display: flex;
  justify-content: flex-end;
  gap: var(--bp-space-2);
}

/* ------------------------------------------------------------------ *
 * PAGINATION                                                          *
 *   Compose with .bp-btn--sm buttons and .bp-select--auto.            *
 * ------------------------------------------------------------------ */
.bp-pager {
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
  padding: var(--bp-space-2) var(--bp-space-3);
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink-dim);
  flex-wrap: wrap;
}
.bp-pager__total { margin-left: auto; }

/* ------------------------------------------------------------------ *
 * TABLE EXTENSIONS                                                    *
 *   Sortable headers, sticky header, group/divider rows, detail       *
 *   rows, selection cells, empty cells, action cells.                 *
 * ------------------------------------------------------------------ */
.bp-table--sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
.bp-table--sortable thead th:hover { color: var(--bp-ink); background-color: var(--bp-surface-2); }
.bp-sort-indicator { margin-left: 4px; color: var(--bp-accent); font-family: var(--bp-font-mono); }

.bp-table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: var(--bp-z-base);
  background-color: var(--bp-surface); /* opaque: rows scroll underneath */
}

.bp-table__group td {
  background-color: var(--bp-surface-2);
  cursor: pointer;
  user-select: none;
  font-weight: var(--bp-weight-medium);
  color: var(--bp-ink);
}
.bp-table__group:hover td { background-color: var(--bp-surface-3); }
.bp-table__group-toggle {
  display: inline-block;
  width: 14px;
  color: var(--bp-ink-dim);
  margin-right: var(--bp-space-1);
  font-family: var(--bp-font-mono);
}
.bp-table__group-meta {
  color: var(--bp-ink-dim);
  font-weight: var(--bp-weight-regular);
  margin-left: var(--bp-space-1);
  font-size: var(--bp-text-xs);
}

.bp-table__detail > td { background-color: var(--bp-bg); }

.bp-table__select { width: 28px; }
.bp-table__select input[type="checkbox"] { cursor: pointer; }
.bp-table__select input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }

.bp-table__empty {
  text-align: center;
  padding: var(--bp-space-8);
  color: var(--bp-ink-dim);
}

.bp-table__actions {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ *
 * KEY-VALUE GRID                                                      *
 *   Definition-list layout for detail panes.                          *
 * ------------------------------------------------------------------ */
.bp-kv {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: var(--bp-space-2) var(--bp-space-4);
  align-items: start;
}
.bp-kv__key { color: var(--bp-ink-dim); }

/* ------------------------------------------------------------------ *
 * ACTIVITY PULSE                                                      *
 *   Live-activity indicator (compose with .bp-chip).                  *
 * ------------------------------------------------------------------ */
.bp-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bp-accent);
  flex: none;
  animation: bp-pulse 1.2s infinite ease-in-out;
}
@keyframes bp-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * DISCLOSURE                                                          *
 *   For native <details>/<summary>.                                   *
 * ------------------------------------------------------------------ */
.bp-details {
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  background-color: var(--bp-surface);
}
.bp-details > summary {
  padding: var(--bp-space-2) var(--bp-space-3);
  cursor: pointer;
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink-dim);
  user-select: none;
}
.bp-details > summary:hover { color: var(--bp-ink); }
.bp-details[open] > summary { border-bottom: var(--bp-border-width) solid var(--bp-line); }
.bp-details__body { padding: var(--bp-space-3); }

/* ------------------------------------------------------------------ *
 * INLINE FEEDBACK                                                     *
 *   Transient status lines under forms and actions.                   *
 * ------------------------------------------------------------------ */
.bp-feedback { font-size: var(--bp-text-xs); min-height: 16px; color: var(--bp-ink-dim); }
.bp-feedback--ok   { color: var(--bp-ok); }
.bp-feedback--warn { color: var(--bp-warn); }
.bp-feedback--crit { color: var(--bp-crit); }

/* ------------------------------------------------------------------ *
 * RANGE SLIDER                                                        *
 * ------------------------------------------------------------------ */
.bp-range { accent-color: var(--bp-accent); width: 100%; max-width: 240px; }

/* ------------------------------------------------------------------ *
 * FORM LAYOUTS + WIDTH MODIFIERS                                      *
 * ------------------------------------------------------------------ */
.bp-form-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bp-space-3) var(--bp-space-4);
  align-items: center;
}
.bp-form-row {
  display: flex;
  gap: var(--bp-space-2);
  flex-wrap: wrap;
  align-items: center;
}
.bp-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-2);
  font-size: var(--bp-text-base);
  color: var(--bp-ink);
  cursor: pointer;
}
.bp-input--xs { width: 80px; }
.bp-input--sm { width: 140px; }
.bp-input--md { width: 240px; }
.bp-select--auto { width: auto; }

/* ------------------------------------------------------------------ *
 * TAG EXTENSIONS                                                      *
 * ------------------------------------------------------------------ */
.bp-tag__count { color: var(--bp-ink-faint); margin-left: var(--bp-space-1); }
.bp-tag--info {
  color: var(--bp-accent);
  border-color: color-mix(in srgb, var(--bp-accent) 45%, transparent);
}
.bp-tag-btn {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  color: var(--bp-ink-dim);
  background-color: transparent;
  border: var(--bp-border-width) dashed var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: 1px var(--bp-space-2);
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
.bp-tag-btn:hover { color: var(--bp-ink); border-color: var(--bp-ink-faint); }
.bp-tag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-2);
  align-items: center;
}

/* ------------------------------------------------------------------ *
 * STATUS EXTENSIONS                                                   *
 *   Info (accent) and neutral variants for dots and pills.            *
 *   "high" is the fourth severity level (between crit and warn),     *
 *   used by vulnerability-management surfaces (CVSS High).            *
 * ------------------------------------------------------------------ */
.bp-dot--info    { background-color: var(--bp-accent); }
.bp-dot--neutral { background-color: var(--bp-ink-faint); }
.bp-dot--high    { background-color: var(--bp-high); }
.bp-pill--info {
  color: var(--bp-accent);
  border-color: color-mix(in srgb, var(--bp-accent) 45%, transparent);
}
.bp-pill--high {
  color: var(--bp-high);
  border-color: color-mix(in srgb, var(--bp-high) 45%, transparent);
}
.bp-tag--high {
  color: var(--bp-high);
  border-color: color-mix(in srgb, var(--bp-high) 45%, transparent);
}
.bp-alert--high    { border-left-color: var(--bp-high); }
.bp-bar__fill--high { background-color: var(--bp-high); }
.bp-feedback--high { color: var(--bp-high); }

/* ------------------------------------------------------------------ *
 * ICON BUTTON                                                         *
 *   Square icon-only action button (toolbars, topbars, table rows).   *
 *   Compose with .bp-btn--ghost for borderless variant.               *
 * ------------------------------------------------------------------ */
.bp-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}
.bp-btn--icon.bp-btn--lg { width: 40px; height: 40px; }
.bp-btn--icon.bp-btn--sm { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ *
 * ANCHORED BADGE                                                      *
 *   Counter pinned to the corner of an icon button or avatar.         *
 *   <span class="bp-badge-anchor"><button class="bp-btn bp-btn--icon">
 *     …</button><span class="bp-badge bp-badge--float">3</span></span> *
 * ------------------------------------------------------------------ */
.bp-badge-anchor { position: relative; display: inline-flex; }
.bp-badge--float {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: var(--bp-z-base);
  pointer-events: none;
}
.bp-badge--crit { background-color: var(--bp-crit); color: #ffffff; }

/* ------------------------------------------------------------------ *
 * TABS                                                                *
 *   Underline tab bar. Buttons or links; mark active with .is-active  *
 *   and aria-selected="true".                                         *
 * ------------------------------------------------------------------ */
.bp-tabs {
  display: flex;
  gap: var(--bp-space-1);
  border-bottom: var(--bp-border-width) solid var(--bp-line);
}
.bp-tab {
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-base);
  font-weight: var(--bp-weight-medium);
  color: var(--bp-ink-dim);
  background-color: transparent;
  border: none;
  border-bottom: var(--bp-border-width-accent) solid transparent;
  margin-bottom: calc(-1 * var(--bp-border-width));
  padding: var(--bp-space-2) var(--bp-space-4) var(--bp-space-3);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bp-transition-fast),
    border-color var(--bp-transition-fast),
    background-color var(--bp-transition-fast);
}
.bp-tab:hover { color: var(--bp-ink); background-color: var(--bp-surface-2); }
.bp-tab.is-active {
  color: var(--bp-accent);
  border-bottom-color: var(--bp-accent);
}
.bp-tabs--scroll {
  overflow-x: auto;
  scrollbar-width: none;
}
.bp-tabs--scroll::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------ *
 * NAV RAIL                                                            *
 *   Compact icon-first vertical navigation (alternative to            *
 *   .bp-sidebar for dense admin surfaces). Items stack icon over      *
 *   label; active item gets the accent edge.                          *
 * ------------------------------------------------------------------ */
.bp-rail {
  width: 72px;
  border-right: var(--bp-border-width) solid var(--bp-line);
  background-color: var(--bp-surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--bp-space-2) 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.bp-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--bp-space-2) var(--bp-space-1);
  color: var(--bp-ink-dim);
  background-color: transparent;
  border: none;
  border-left: var(--bp-border-width-accent) solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--bp-font-sans);
  transition: background-color var(--bp-transition-fast),
    color var(--bp-transition-fast);
}
.bp-rail__item:hover { color: var(--bp-ink); background-color: var(--bp-surface-2); }
.bp-rail__item.is-active {
  color: var(--bp-accent);
  background-color: var(--bp-accent-faint);
  border-left-color: var(--bp-accent);
}
.bp-rail__icon { width: 18px; height: 18px; flex: none; }
.bp-rail__label {
  font-size: var(--bp-text-2xs);
  font-weight: var(--bp-weight-medium);
  line-height: var(--bp-leading-tight);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.bp-rail__divider {
  height: 1px;
  background-color: var(--bp-line);
  border: 0;
  margin: var(--bp-space-2) var(--bp-space-3);
}

/* ------------------------------------------------------------------ *
 * DRAWER / SLIDE-OVER                                                 *
 *   Edge-anchored panel over a scrim (contextual help, mobile nav,    *
 *   detail panes). Toggle visibility with the .is-open class.         *
 * ------------------------------------------------------------------ */
.bp-drawer-scrim {
  position: fixed;
  inset: 0;
  background-color: var(--bp-scrim);
  z-index: var(--bp-z-overlay);
  display: none;
}
.bp-drawer-scrim.is-open { display: block; }
.bp-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 420px;
  max-width: 92vw;
  background-color: var(--bp-surface);
  border-left: var(--bp-border-width) solid var(--bp-line-strong);
  z-index: calc(var(--bp-z-overlay) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--bp-transition);
}
.bp-drawer--left {
  right: auto;
  left: 0;
  border-left: none;
  border-right: var(--bp-border-width) solid var(--bp-line-strong);
  transform: translateX(-100%);
}
.bp-drawer.is-open { transform: translateX(0); }
.bp-drawer__head {
  padding: var(--bp-space-4) var(--bp-space-5);
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
  flex: none;
}
.bp-drawer__head .bp-spacer { flex: 1; }
.bp-drawer__body {
  padding: var(--bp-space-4) var(--bp-space-5);
  overflow-y: auto;
  flex: 1;
}
.bp-drawer__foot {
  padding: var(--bp-space-3) var(--bp-space-5);
  border-top: var(--bp-border-width) solid var(--bp-line);
  flex: none;
}

/* ------------------------------------------------------------------ *
 * COMBOBOX / AUTOCOMPLETE                                             *
 *   Suggestion list anchored under a .bp-input. Wrap the input in     *
 *   .bp-combobox; toggle the list with [hidden].                      *
 * ------------------------------------------------------------------ */
.bp-combobox { position: relative; }
.bp-combobox__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  max-height: 240px;
  overflow-y: auto;
  z-index: var(--bp-z-overlay);
  margin: 0;
  padding: var(--bp-space-1) 0;
  list-style: none;
}
.bp-combobox__list[hidden] { display: none; }
.bp-combobox__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-space-3);
  width: 100%;
  text-align: left;
  padding: var(--bp-space-2) var(--bp-space-3);
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-sm);
  color: var(--bp-ink);
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.bp-combobox__item:hover,
.bp-combobox__item.is-active { background-color: var(--bp-surface-2); }
.bp-combobox__meta {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  color: var(--bp-ink-faint);
}

/* ------------------------------------------------------------------ *
 * SPINNER                                                             *
 *   Indeterminate loading indicator. Pair with .bp-visually-hidden    *
 *   text or aria-label for screen readers.                            *
 * ------------------------------------------------------------------ */
.bp-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--bp-line-strong);
  border-top-color: var(--bp-accent);
  border-radius: 50%;
  animation: bp-spin 0.8s linear infinite;
  flex: none;
}
.bp-spinner--lg { width: 28px; height: 28px; }
@keyframes bp-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ *
 * ACCESSIBILITY                                                       *
 * ------------------------------------------------------------------ */
.bp-root :focus-visible,
.bp-btn:focus-visible,
.bp-toggle:focus-visible,
.bp-switch:focus-visible,
.bp-nav__link:focus-visible,
.bp-tab:focus-visible,
.bp-rail__item:focus-visible,
.bp-combobox__item:focus-visible,
.bp-cal__day:focus-visible,
.bp-command__item:focus-visible,
.bp-toast__close:focus-visible,
.bp-token__remove:focus-visible,
.bp-link:focus-visible {
  outline: var(--bp-focus-ring) solid var(--bp-accent);
  outline-offset: 2px;
}

.bp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * RESPONSIVE                                                          *
 * ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .bp-stat-strip { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; }
  .bp-stat { border-right: none; border-bottom: var(--bp-border-width) solid var(--bp-line); }
  .bp-cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .bp-app { grid-template-columns: 1fr; }
  .bp-sidebar { position: static; height: auto; }
  .bp-cols-2, .bp-cols-3 { grid-template-columns: 1fr; }
  .bp-stat-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-root *,
  .bp-root *::before,
  .bp-root *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * TOOLTIP                                                             *
 *   Small anchored hint. Position with your JS lib of choice or       *
 *   wrap the trigger in a relatively positioned container.            *
 * ------------------------------------------------------------------ */
.bp-tooltip {
  background-color: var(--bp-surface-3);
  color: var(--bp-ink);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-xs);
  line-height: var(--bp-leading-snug);
  padding: var(--bp-space-1) var(--bp-space-2);
  max-width: 280px;
  z-index: var(--bp-z-toast);
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * POPOVER                                                             *
 *   Generic anchored surface (filters, pickers, rich hover cards).    *
 *   Position relative to a .bp-popover-anchor wrapper; toggle with    *
 *   [hidden].                                                         *
 * ------------------------------------------------------------------ */
.bp-popover-anchor { position: relative; display: inline-block; }
.bp-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: var(--bp-space-4);
  min-width: 220px;
  z-index: var(--bp-z-overlay);
}
.bp-popover[hidden] { display: none; }
.bp-popover--right { left: auto; right: 0; }

/* ------------------------------------------------------------------ *
 * SKELETON                                                            *
 *   Loading placeholder. Flat pulse — no gradient shimmer, in line    *
 *   with the no-gradients rule.                                       *
 * ------------------------------------------------------------------ */
.bp-skeleton {
  background-color: var(--bp-surface-3);
  border-radius: var(--bp-radius-sm);
  animation: bp-skeleton-pulse 1.4s infinite ease-in-out;
}
.bp-skeleton--text   { height: 0.9em; width: 100%; }
.bp-skeleton--circle { border-radius: 50%; }
@keyframes bp-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ------------------------------------------------------------------ *
 * TOASTS                                                              *
 *   Transient notifications. Fixed stack bottom-right; severity via   *
 *   the same left-edge language as .bp-alert.                         *
 * ------------------------------------------------------------------ */
.bp-toasts {
  position: fixed;
  bottom: var(--bp-space-5);
  right: var(--bp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-2);
  z-index: var(--bp-z-toast);
  width: 340px;
  max-width: calc(100vw - 2 * var(--bp-space-5));
}
.bp-toast {
  display: flex;
  gap: var(--bp-space-3);
  align-items: flex-start;
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-left-width: 3px;
  border-left-color: var(--bp-accent);
  border-radius: var(--bp-radius-sm);
  padding: var(--bp-space-3) var(--bp-space-4);
  font-size: var(--bp-text-sm);
}
.bp-toast--ok   { border-left-color: var(--bp-ok); }
.bp-toast--warn { border-left-color: var(--bp-warn); }
.bp-toast--crit { border-left-color: var(--bp-crit); }
.bp-toast__body { flex: 1; min-width: 0; }
.bp-toast__body b { font-weight: var(--bp-weight-semibold); display: block; }
.bp-toast__body small { color: var(--bp-ink-dim); }
.bp-toast__close {
  background: transparent;
  border: none;
  color: var(--bp-ink-faint);
  cursor: pointer;
  padding: 0;
  font-size: var(--bp-text-base);
  line-height: 1;
  flex: none;
}
.bp-toast__close:hover { color: var(--bp-ink); }

/* ------------------------------------------------------------------ *
 * CALENDAR / DATE PICKER                                              *
 *   7-column day grid. Compose the header nav with .bp-btn--icon      *
 *   .bp-btn--sm .bp-btn--ghost. Mark states with .is-today,           *
 *   .is-selected, .is-range, .is-outside.                             *
 * ------------------------------------------------------------------ */
.bp-cal {
  display: inline-block;
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  padding: var(--bp-space-3);
}
.bp-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-space-2);
  margin-bottom: var(--bp-space-2);
}
.bp-cal__month {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  letter-spacing: var(--bp-tracking-wide);
  text-transform: uppercase;
  color: var(--bp-ink-dim);
}
.bp-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  gap: 2px;
}
.bp-cal__dow {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  color: var(--bp-ink-faint);
  text-align: center;
  padding: var(--bp-space-1) 0;
  text-transform: uppercase;
}
.bp-cal__day {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink);
  background-color: transparent;
  border: var(--bp-border-width) solid transparent;
  border-radius: var(--bp-radius-sm);
  cursor: pointer;
  padding: 0;
}
.bp-cal__day:hover { background-color: var(--bp-surface-2); }
.bp-cal__day.is-outside { color: var(--bp-ink-faint); }
.bp-cal__day.is-today { border-color: var(--bp-accent); color: var(--bp-accent); }
.bp-cal__day.is-range { background-color: var(--bp-accent-faint); }
.bp-cal__day.is-selected {
  background-color: var(--bp-accent);
  color: var(--bp-on-accent);
}
.bp-cal__day:disabled { color: var(--bp-ink-faint); opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------------ *
 * KBD                                                                 *
 *   Keyboard hint chip (shortcuts, command palettes).                 *
 * ------------------------------------------------------------------ */
.bp-kbd {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  color: var(--bp-ink-dim);
  background-color: var(--bp-surface-2);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--bp-radius-sm);
  padding: 1px 5px;
  display: inline-block;
  line-height: var(--bp-leading-tight);
}

/* ------------------------------------------------------------------ *
 * COMMAND PALETTE                                                     *
 *   Searchable action list (open inside .bp-modal or a fixed          *
 *   overlay). Group headings reuse the eyebrow language; items        *
 *   mirror .bp-combobox__item.                                        *
 * ------------------------------------------------------------------ */
.bp-command {
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-md);
  width: 560px;
  max-width: 92vw;
  overflow: hidden;
}
.bp-command__input {
  width: 100%;
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-sm);
  color: var(--bp-ink);
  background-color: transparent;
  border: none;
  border-bottom: var(--bp-border-width) solid var(--bp-line);
  padding: var(--bp-space-3) var(--bp-space-4);
  outline: none;
}
.bp-command__input::placeholder { color: var(--bp-ink-faint); }
.bp-command__list {
  max-height: 320px;
  overflow-y: auto;
  padding: var(--bp-space-1) 0 var(--bp-space-2);
  margin: 0;
  list-style: none;
}
.bp-command__group {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  letter-spacing: var(--bp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bp-ink-faint);
  padding: var(--bp-space-3) var(--bp-space-4) var(--bp-space-1);
}
.bp-command__item {
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
  width: 100%;
  text-align: left;
  padding: var(--bp-space-2) var(--bp-space-4);
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-sm);
  color: var(--bp-ink);
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.bp-command__item:hover,
.bp-command__item.is-active { background-color: var(--bp-surface-2); }
.bp-command__item .bp-kbd { margin-left: auto; }
.bp-command__empty {
  padding: var(--bp-space-6);
  text-align: center;
  color: var(--bp-ink-dim);
  font-size: var(--bp-text-sm);
}

/* ------------------------------------------------------------------ *
 * TOKEN FIELD (MULTI-SELECT)                                          *
 *   Input-like wrapper holding removable value tokens plus a bare     *
 *   text input. Pair with .bp-combobox for suggestions.               *
 * ------------------------------------------------------------------ */
.bp-token-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-1);
  align-items: center;
  background-color: var(--bp-surface-2);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: var(--bp-space-1) var(--bp-space-2);
  min-height: 34px;
  cursor: text;
}
.bp-token-field:focus-within {
  outline: var(--bp-focus-ring) solid var(--bp-accent);
  outline-offset: 1px;
  border-color: var(--bp-accent);
}
.bp-token-field__input {
  flex: 1;
  min-width: 80px;
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  color: var(--bp-ink);
  background: transparent;
  border: none;
  outline: none;
  padding: var(--bp-space-1);
}
.bp-token {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-1);
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-2xs);
  color: var(--bp-ink);
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  padding: 1px var(--bp-space-2);
}
.bp-token__remove {
  background: transparent;
  border: none;
  color: var(--bp-ink-faint);
  cursor: pointer;
  padding: 0;
  font-size: var(--bp-text-xs);
  line-height: 1;
}
.bp-token__remove:hover { color: var(--bp-crit); }

/* ------------------------------------------------------------------ *
 * SLIDER (CUSTOM)                                                     *
 *   Track/fill/thumb parts for JS-driven sliders. For native          *
 *   input[type=range] use .bp-range instead.                          *
 * ------------------------------------------------------------------ */
.bp-slider {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
  touch-action: none;
  user-select: none;
}
.bp-slider__track {
  position: relative;
  flex: 1;
  height: 4px;
  background-color: var(--bp-surface-3);
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-sm);
  overflow: hidden;
}
.bp-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: var(--bp-accent);
}
.bp-slider__thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--bp-surface);
  border: var(--bp-border-width-accent) solid var(--bp-accent);
  border-radius: var(--bp-radius-sm);
  transform: translateX(-50%);
  cursor: grab;
}
.bp-slider__thumb:active { cursor: grabbing; }
.bp-slider__thumb:focus-visible {
  outline: var(--bp-focus-ring) solid var(--bp-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * SPLITTER                                                            *
 *   Resizable-pane divider handle. Vertical by default (between       *
 *   columns); add --h for horizontal (between rows).                  *
 * ------------------------------------------------------------------ */
.bp-splitter {
  flex: none;
  width: 5px;
  cursor: col-resize;
  background-color: transparent;
  border-left: var(--bp-border-width) solid var(--bp-line);
  transition: background-color var(--bp-transition-fast),
    border-color var(--bp-transition-fast);
}
.bp-splitter--h {
  width: auto;
  height: 5px;
  cursor: row-resize;
  border-left: none;
  border-top: var(--bp-border-width) solid var(--bp-line);
}
.bp-splitter:hover,
.bp-splitter.is-dragging {
  background-color: var(--bp-accent-faint);
  border-color: var(--bp-accent);
}

/* ------------------------------------------------------------------ *
 * APP SHELL — RAIL VARIANT                                            *
 *   Use with .bp-rail as the first grid column instead of             *
 *   .bp-sidebar: <div class="bp-app bp-app--rail">.                   *
 * ------------------------------------------------------------------ */
.bp-app--rail {
  grid-template-columns: var(--bp-rail-width) 1fr;
}
.bp-app--rail .bp-rail {
  position: sticky;
  top: 0;
  height: 100vh;
}

/* ------------------------------------------------------------------ *
 * TABBAR (MOBILE BOTTOM NAV)                                          *
 *   Fixed bottom icon+label navigation for small viewports. Hidden    *
 *   on desktop; below 860px it replaces .bp-rail (pair both in the    *
 *   same shell). Mark the current item with .is-active.               *
 * ------------------------------------------------------------------ */
.bp-tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: var(--bp-tabbar-height);
  background-color: var(--bp-surface);
  border-top: var(--bp-border-width) solid var(--bp-line);
  z-index: var(--bp-z-sticky);
}
.bp-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--bp-space-2) var(--bp-space-1);
  color: var(--bp-ink-dim);
  background-color: transparent;
  border: none;
  border-top: var(--bp-border-width-accent) solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--bp-font-sans);
  font-size: var(--bp-text-2xs);
  font-weight: var(--bp-weight-medium);
  line-height: var(--bp-leading-tight);
  transition: color var(--bp-transition-fast),
    background-color var(--bp-transition-fast);
}
.bp-tabbar__item:hover { color: var(--bp-ink); background-color: var(--bp-surface-2); }
.bp-tabbar__item.is-active {
  color: var(--bp-accent);
  background-color: var(--bp-accent-faint);
  border-top-color: var(--bp-accent);
}
.bp-tabbar__icon { width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) {
  .bp-tabbar { display: flex; }
  .bp-rail { display: none; }
  .bp-app--rail { grid-template-columns: 1fr; }
  .bp-app--rail .bp-content { padding-bottom: calc(var(--bp-tabbar-height) + var(--bp-space-8)); }
}

/* ------------------------------------------------------------------ *
 * FOOTER                                                              *
 *   Quiet page footer for user-facing surfaces.                       *
 * ------------------------------------------------------------------ */
.bp-footer {
  border-top: var(--bp-border-width) solid var(--bp-line);
  background-color: var(--bp-surface);
  padding: var(--bp-space-4) var(--bp-space-6);
  text-align: center;
  font-size: var(--bp-text-xs);
  color: var(--bp-ink-faint);
}

/* ------------------------------------------------------------------ *
 * AUTH CANVAS                                                         *
 *   Full-viewport centered layout for sign-in, MFA, and setup         *
 *   screens: brand header on top, a single centered card, optional    *
 *   .bp-footer at the bottom.                                         *
 * ------------------------------------------------------------------ */
.bp-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.bp-auth__brand {
  padding: var(--bp-space-6);
  text-align: center;
  font-size: var(--bp-text-lg);
  font-weight: var(--bp-weight-bold);
  letter-spacing: var(--bp-tracking-tight);
  color: var(--bp-ink);
}
.bp-auth__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bp-space-4);
}
.bp-auth__card { width: 100%; max-width: 400px; }
.bp-auth__card--wide { max-width: 560px; }

/* ------------------------------------------------------------------ *
 * OTP INPUT                                                           *
 *   One-time-code entry (TOTP, backup codes). Compose with            *
 *   .bp-input: <input class="bp-input bp-input--otp" inputmode=       *
 *   "numeric" autocomplete="one-time-code">.                          *
 * ------------------------------------------------------------------ */
.bp-input--otp {
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-lg);
  letter-spacing: 0.35em;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * CODE GRID                                                           *
 *   Grid of short one-time codes (recovery / backup codes). Items     *
 *   reuse the .bp-code language at a readable size.                   *
 * ------------------------------------------------------------------ */
.bp-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bp-space-2);
}
.bp-code-grid .bp-code {
  display: block;
  text-align: center;
  font-size: var(--bp-text-sm);
  padding: var(--bp-space-2) var(--bp-space-3);
}