/* ============================================================
   BLOCKS.CSS — Named Component Blocks (Layer B)
   All colour/spacing MUST use token references (var(--)).
   No hardcoded hex or rem values.

   CLASS NAME MAPPING (old → new):
   .navbar, .navbar-content, .navbar-nav → .site-nav, .site-nav__logo, .site-nav__item
   #app                                  → .app-shell (composition layer)
   .main-content (old flex child)        → .main-content (grid area)
   .card (generic)                       → .card (kept)
   .onboarding-wizard                    → .wizard-step-container
   .progress-bar (wizard fill)          → .progress-fill (inside .progress-track)
   .progress-bar (stat bar)             → .progress-bar (kept, data-state exceptions)

   ──────────────────────────────────────────────────────────────
   TABLE OF CONTENTS — generated from @section markers below.
   Run `bash scripts/audit-css-toc.sh` to verify this list matches.
   ──────────────────────────────────────────────────────────────
   @section base               — primitives enforcement, app shell
   @section nav                — site-nav, hamburger, breadcrumb
   @section buttons            — .btn, .btn--*, btn modifiers
   @section auth               — login/signup/password-reset
   @section forms              — b-form, form-input, form-select
   @section modals             — modal-content, modal headers
                                 (b-task-modal lives in blocks-task-modal.css)
   @section alerts             — toast, alert, notification bell + panel
   @section cards              — cards, page headers, badges, vision/wizard
   @section tasks              — task-row, task-list, task-card
   @section projects           — projects-grid, project-item
   @section api-docs           — endpoint-grid, api-docs page
   @section misc-exceptions    — data-* attribute variants, animations
   @section personality-momentum — momentum + stadium/forge/trophy/harmony top bars
   @section personality-clarity-flow — clarity + flow vertical rail
   @section adaptive-widgets   — Enneagram center dashboard widgets
   @section kpi                — KPI cards, segment control
   @section profile-nav-user   — profile, nav-user-menu, workspace switcher
   @section personality-bold   — bold personality refresh
   @section personality-zen    — zen personality + overrides
   @section personality-signatures — dashboard signature gestures per personality
   @section personality-momentum-subthemes — stadium / forge / trophy / harmony refresh
   @section axis-slider        — axis profile slider
   @section primitives-layer   — ADR-004 primitives enforcement (must remain LAST)
   ============================================================ */


/* ============================================================
   PRIMITIVES ENFORCEMENT (ADR-004)
   The bottom of this file contains a "primitives" section: a small
   set of structural rules (icon positioning, padding clearance,
   form-group narrow-viewport collapse) that no personality may
   override. They are marked with !important so they outrank any
   personality scope that accidentally redeclares them.

   We initially tried @layer primitives for this enforcement, but
   unlayered CSS rules outrank every @layer in the cascade — so for
   primitives to win without wrapping the entire stylesheet in
   @layer base, we use !important. The lint check (make audit-css)
   catches any body[data-personality=...] selector that tries to
   redeclare a primitive at PR-review time.
   ============================================================ */


/* ============================================================
   NAVIGATION
   ============================================================ */

/* ── site-nav ── */
.site-nav {
  grid-area: nav;
  width: 100%;
  height: 64px;
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-inline: var(--space-6);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.site-nav__brand {
  font-family: 'Inter Tight', sans-serif;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline-end: var(--space-5);
  border-right: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

/* Wordmark spans: abbr shown in sidebar, full wordmark hidden by default */
.site-nav__brand-wordmark { display: inline; }
.site-nav__brand-abbr    { display: none; }

.site-nav__brand-mark {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}
.site-nav__brand-mark::before,
.site-nav__brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.site-nav__brand-mark::after {
  inset: auto 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--amber);
  border-color: var(--amber);
}

/* Legacy alias: .site-nav__logo → same as .site-nav__brand */
.site-nav__logo {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--amber);
  line-height: 1;
  letter-spacing: 0.1em;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-4);
  text-decoration: none;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  height: 100%;
}

/* Right-side cluster (lang / sign-in / start-free) on the public nav.
   Default .cluster wraps when crowded, which between ~720-1180px makes the
   buttons stack vertically and overflow into the page content. Pin them to
   a single row and skip shrinking so they keep their natural widths. */
.site-nav__inner > .cluster {
  flex-wrap: nowrap;
  flex-shrink: 0;
  white-space: nowrap;
}

.site-nav__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  margin-inline: auto;
}

.site-nav__links a {
  color: var(--text-secondary);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 150ms ease;
}

.site-nav__links a:hover {
  color: var(--text-primary);
}

.site-nav__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  width: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--ease), background var(--ease);
  font-size: 0.9rem;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
}

.site-nav__item i {
  font-size: 1rem;
}

.site-nav__item i { display: none; }

.site-nav__item span {
  display: var(--nav-label-display, flex);
}

.site-nav__item:hover {
  color: var(--text-secondary);
  background: var(--bg-elevated);
}

.site-nav__item[aria-current="page"] {
  color: var(--amber);
  background: var(--amber-glow);
}

.nav-theme-select {
  width: 100%;
  padding-inline: var(--space-2);
  padding-block: var(--space-2);
}

.nav-theme-select select {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
  text-align: center;
  transition: color var(--ease), border-color var(--ease);
}

.nav-theme-select select:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.nav-theme-select select:focus {
  outline: 1px solid var(--amber);
  color: var(--amber);
}

/* ── nav-personality-select (mirrors nav-theme-select) ── */
.nav-personality-select {
  width: 100%;
  padding-inline: var(--space-2);
  padding-block: var(--space-2);
}

.nav-personality-select select {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
  text-align: center;
  transition: color var(--ease), border-color var(--ease);
}

.nav-personality-select select:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.nav-personality-select select:focus {
  outline: 1px solid var(--amber);
  color: var(--amber);
}

/* ── nav-link (legacy horizontal nav — used in navbar.html) ── */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--ease), background var(--ease);
  text-decoration: none;
}

.nav-link:hover,
.nav-link.active {
  color: var(--amber);
  background: var(--amber-glow);
}

/* ── hamburger mobile nav ── */
.hamburger-menu {
  position: fixed;
  top: 0;
  right: 0;
  inline-size: var(--mobile-menu-inline-size);
  block-size: 100dvh; /* dvh respects mobile browser chrome (URL bar) */
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  z-index: var(--z-fixed);
  transform: translateX(100%);
  transition: transform var(--ease);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--overlay-shadow);
  overflow-y: auto;
}

.hamburger-menu.open {
  transform: translateX(0);
}

.hamburger-menu-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hamburger-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg-base) 70%, transparent);
  z-index: calc(var(--z-fixed) - 1);
  display: none;
}

.hamburger-overlay.open {
  display: block;
}

.navbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--step-1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--ease);
}

.navbar-hamburger:hover {
  color: var(--amber);
}

.hamburger-menu__close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.hamburger-menu__close button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--step-1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--ease);
}

.hamburger-menu__close button:hover {
  color: var(--amber);
}

.hamburger-menu-items a,
.hamburger-menu-items button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: color var(--ease), background var(--ease);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}

.hamburger-menu-items a:hover,
.hamburger-menu-items button:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.hamburger-menu-items a[aria-current="page"],
.hamburger-menu-items a.active {
  color: var(--amber);
  background: var(--amber-glow);
}

.hamburger-menu__divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) 0;
}

/* ── top-bar ── */
.top-bar {
  grid-area: topbar;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  padding-inline: var(--space-6);
  padding-block: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.top-bar__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.top-bar__breadcrumb i {
  color: var(--amber);
}

.top-bar__breadcrumb span {
  color: var(--text-primary);
}

.top-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── breadcrumb (standalone) ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.breadcrumb a,
.breadcrumb span {
  color: var(--text-muted);
  transition: color var(--ease);
}

.breadcrumb a:hover {
  color: var(--amber);
}

.breadcrumb span:last-child {
  color: var(--text-primary);
}

/* ── main-content ── */
.main-content {
  grid-area: main;
  overflow-y: auto;
  padding: var(--space-10) var(--space-8);
}

/* Compact main-content padding under the app compact breakpoint so
   320px-wide phones don't lose half their content area to gutters. */
@media (max-width: 640px) {
  .main-content {
    padding: var(--space-6) var(--space-4);
  }
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.5em 1em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: all var(--ease);
  min-height: 2.5rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: none;
  color: var(--text-primary);
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--amber);
  outline-offset: var(--focus-ring-offset);
}

.btn:active {
  transform: translateY(1px);
  filter: brightness(0.88);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--amber);
  color: var(--bg-base);
  border-color: var(--amber);
}

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

.btn--secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn--secondary:hover {
  border-color: var(--border-light);
  background: var(--bg-surface);
}

.btn--alt {
  background: none;
  color: var(--amber);
  border-color: var(--amber-dim);
}

.btn--alt:hover {
  background: var(--amber-glow);
  border-color: var(--amber);
}

/* ghost / tertiary */
.btn--ghost {
  background: none;
  color: var(--text-secondary);
  border-color: var(--border);
}

.btn--ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* Destructive action */
.btn--danger {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
}

.btn--danger:hover {
  background: var(--red);
  color: var(--bg-base);
  border-color: var(--red);
}

.btn--info {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border);
}

.btn--info:hover {
  color: var(--amber);
  border-color: var(--amber-dim);
}

.btn--icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  padding: 0;
  min-height: unset;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

.btn--icon:hover {
  color: var(--amber);
  border-color: var(--amber-dim);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  font-size: 0.7rem;
  min-height: 2rem;
  padding: 0.3em 0.7em;
}

.btn--lg {
  font-size: var(--step-0);
  min-height: 3rem;
  padding: 0.7em 1.5em;
}

/* ============================================================
   AUTH — Login / Signup / Password-reset pages
   ============================================================ */

/* Full-height centering wrapper */
.auth-layout {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

/* Card container */
.auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--text-primary) 6%, transparent);
}

/* Form label — mono uppercase */
.form-label {
  display: block;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* Text input */
.input {
  display: block;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  font: inherit;
  color: var(--text-primary);
  font-size: var(--step-0);
  transition: border-color var(--ease), box-shadow var(--ease);
  outline: none;
}

.input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}

/* Inline text link — underline on hover */
.text-link {
  color: var(--amber);
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--ease);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

/* Wizard-specific remove buttons */
.btn--remove-objective,
.btn--remove-task {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--ease), background var(--ease);
  font-size: var(--step-0);
}

.btn--remove-objective:hover,
.btn--remove-task:hover {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* Link-button (plain anchor look) */
.link-button {
  background: none;
  border: none;
  color: var(--amber);
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  font-family: inherit;
}

.link-button:hover {
  color: var(--text-primary);
}


/* ============================================================
   AUTHENTICATION PAGES
   ============================================================ */

.auth-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh; /* dvh respects mobile browser chrome */
  padding: var(--space-8) var(--space-6);
  background: var(--bg-base);
}

.auth-container {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  width: 100%;
  max-width: 420px;
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.auth-header h1,
.auth-header h2 {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.auth-header p {
  color: var(--text-secondary);
  font-size: var(--step-0);
}

.auth-form {
  margin-bottom: var(--space-6);
}

.auth-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--step--1);
  font-family: var(--font-mono);
}

.auth-footer p {
  margin-bottom: var(--space-2);
}

.auth-footer a {
  color: var(--amber);
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-info {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--step--1);
  color: var(--text-secondary);
  margin-top: var(--space-4);
}

.auth-requirement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--text-muted);
  padding: var(--space-2) 0;
}

.auth-requirement.is-met {
  color: var(--green);
}

.auth-requirement i {
  width: 1rem;
  text-align: center;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-group {
  margin-bottom: var(--space-6);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--step--1);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-input,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  background: var(--bg-elevated);
  color: var(--text-primary);
  transition: border-color var(--ease), box-shadow var(--ease);
  min-height: 2.75rem;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--amber-dim);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.form-input:disabled,
.form-select:disabled {
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-input::placeholder {
  color: var(--text-muted);
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  height: auto;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--step-0);
  color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--amber-dim);
}

.required {
  color: var(--red);
  margin-left: var(--space-2);
}

.form-error {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--red);
  margin-top: var(--space-2);
}


/* ============================================================
   MODALS
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-base) 75%, transparent);
  cursor: pointer;
  z-index: 1;
}

.modal-content {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 90%;
  /* dvh respects mobile browser chrome (URL bar / keyboard) so the
     footer stays reachable; the named modal cap token also accounts
     for the horizontal margin around the modal. */
  max-height: var(--modal-max-block-size);
  overflow-y: auto;
  /* Safe-area-inset padding so the modal doesn't ride under the iOS
     home indicator or notch. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 10;
  box-shadow: var(--overlay-shadow);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--step-1);
  padding: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--ease), background var(--ease);
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}


/* ============================================================
   ALERTS & MESSAGES
   ============================================================ */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--step-0);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.alert--success {
  background: var(--green-dim);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green);
}

.alert--error {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
}

.error-container {
  margin-bottom: var(--space-4);
}

/* Toast container */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Mobile: toast container becomes full-width with safe-area-inset padding
   so individual toasts no longer hang off the right edge or overlap home
   indicator. */
@media (max-width: 640px) {
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
}


/* ============================================================
   TOAST — typed notification toasts
   ============================================================ */

.toast {
  /* min(280px, 100%) lets the toast shrink to fit narrow viewports
     instead of forcing a horizontal overflow on the toast-container. */
  min-width: min(280px, 100%);
  max-width: 400px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--step--1);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease, ease), transform 200ms var(--ease, ease);
  pointer-events: auto;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--leaving {
  opacity: 0;
  transform: translateY(8px);
}

.toast--ephemeral { border-left: 3px solid var(--green); }
.toast--warning   { border-left: 3px solid var(--amber); }
.toast--error     { border-left: 3px solid var(--red); }

/* ── Central notification modal (channel=primary) ──────────────
   Visual stripe by severity, mirroring the toast palette. The modal
   itself reuses the existing .modal / .modal-overlay / .modal-content
   blocks above. */
.central-notif-modal--success .modal-content { border-left: 4px solid var(--green); }
.central-notif-modal--warning .modal-content { border-left: 4px solid var(--amber); }
.central-notif-modal--error   .modal-content { border-left: 4px solid var(--red); }

.toast__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.toast__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--text-primary);
}

.toast__message {
  color: var(--text-secondary);
}

.toast__action {
  align-self: flex-start;
  margin-top: var(--space-1);
  font-size: var(--step--1);
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.toast__action:hover { color: var(--text-primary); }
.toast__action:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1;
  padding: 0 var(--space-1);
  flex-shrink: 0;
  transition: color 150ms;
}
.toast__close:hover { color: var(--text-primary); }

/* ============================================================
   NOTIFICATION BELL & PANEL
   ============================================================ */

.notif-bell {
  position: relative;
  display: flex;
  align-items: center;
}

.notif-bell__btn {
  position: relative;
}

/* Bell is icon-only — always show the icon regardless of personality */
.notif-bell__btn i {
  display: flex !important;
}

.notif-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--amber);
  color: var(--bg-base);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.notif-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 700;
  overflow: hidden;
}

.notif-panel--open {
  display: block;
}

/* Vertical site-nav (clarity, flow): panel slides out to the right of the bell */
body[data-personality="clarity"] .notif-panel,
body[data-personality="flow"] .notif-panel {
  top: 0;
  right: auto;
  left: calc(100% + var(--space-2));
}

.notif-panel__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-panel__heading {
  font-family: var(--font-display);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.notif-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
}

.notif-panel__empty {
  padding: var(--space-5) var(--space-4);
  color: var(--text-muted);
  font-size: var(--step--1);
  text-align: center;
  font-family: var(--font-mono);
}

.notif-panel__item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.notif-panel__item:last-child {
  border-bottom: none;
}

.notif-panel__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.notif-panel__title {
  font-size: var(--step--1);
  font-family: var(--font-display);
  color: var(--text-primary);
}

.notif-panel__msg {
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.notif-panel__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  align-items: center;
}

.btn--xs {
  font-size: var(--step--2);
  padding: var(--space-1) var(--space-2);
}


/* ============================================================
   CARDS
   ============================================================ */

/* ── vision-card ── */
.vision-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}

.vision-card__label {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber-dim);
  margin-bottom: var(--space-2);
}

.vision-card__title {
  font-family: var(--font-display, var(--font-serif));
  font-size: var(--step-2);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.3;
}

.vision-card__meta {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* ── stat-card ── */
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--ease);
}

button.stat-card {
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
}

.stat-card:hover {
  border-color: var(--border-light);
}

.stat-card__icon {
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: var(--radius-sm);
  background: var(--amber-glow);
  border: 1px solid var(--amber-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--amber);
}

.stat-card__title,
.stat-card__value {
  font-family: var(--font-mono);
  font-size: var(--step-3);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1;
  margin-top: var(--space-2);
}

.stat-card__title sup,
.stat-card__value sup {
  font-size: var(--step-0);
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 2px;
}

.stat-card__label {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.stat-card__trend {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--green);
  margin-top: auto;
}

/* ── b-activity: compact dashboard activity feed ── */
.b-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.b-activity__row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--step--1);
  line-height: 1.3;
}

.b-activity__row:last-child {
  border-bottom: 0;
}

.b-activity__icon {
  color: var(--amber);
  font-size: 0.85em;
  width: 1em;
  text-align: center;
}

.b-activity__label {
  color: var(--text-muted);
  white-space: nowrap;
}

.b-activity__title {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.b-activity__time {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.85em;
  white-space: nowrap;
}

/* ── activity-card (legacy, kept for other consumers) ── */
.activity-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--ease);
  cursor: pointer;
}

.activity-card:hover {
  border-color: var(--border-light);
}

.activity-card__type {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.activity-card__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--text-primary);
  line-height: 1.3;
}

.activity-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.activity-card__meta-item {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.activity-card__date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ── generic card ── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--ease);
}

.card:hover {
  border-color: var(--border-light);
}

.card__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.card-content {
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}

.card-description {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-secondary);
  line-height: 1.5;
  font-family: var(--font-mono);
}

/* ── quote-section ── */
.quote-section {
  border-left: 3px solid var(--amber-dim);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.quote-text {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
}

.quote-author {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.quote-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}

.quote-empty {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-style: italic;
}


/* ============================================================
   PAGE HEADERS
   ============================================================ */

.page-header {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-header__eyebrow {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.page-header__title {
  font-family: var(--font-display, var(--font-serif));
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--text-primary);
}

.page-header__subtitle {
  font-size: var(--step-0);
  color: var(--text-secondary);
  font-weight: 300;
  margin-top: var(--space-2);
  max-width: 60ch;
  line-height: 1.5;
}


/* ============================================================
   PROGRESS BARS
   ============================================================ */

.progress {
  background: var(--bg-elevated);
  border-radius: 999px;
  height: var(--progress-height);
  overflow: hidden;
}

.progress-track {
  height: var(--progress-height);
  background: var(--bg-elevated);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--amber);
  transition: width var(--ease);
}

/* Exception: data-state on progress-bar */
.progress-bar[data-state="warning"] { background: var(--red); }
.progress-bar[data-state="done"]    { background: var(--green); }

/* Legacy wizard progress fill */
.progress-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 999px;
  transition: width var(--ease);
}

/* Progress item (advancement blocks) */
.progress-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.progress-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.progress-item__name {
  font-size: var(--step-0);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
}

.progress-item__name i {
  color: var(--text-muted);
  font-size: 0.8em;
}

.progress-item__ratio {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.progress-text {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--space-2);
}


/* ============================================================
   BADGE / CONTEXT BADGE
   ============================================================ */

.badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.badge--amber { color: var(--amber); background: var(--amber-glow); }
.badge--green { color: var(--green); background: var(--green-dim); }

.context-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2em 0.6em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.priority-badge--high   { color: var(--priority-high);   background: color-mix(in srgb, var(--priority-high)   20%, transparent); }
.priority-badge--medium { color: var(--priority-medium); background: color-mix(in srgb, var(--priority-medium) 20%, transparent); }
.priority-badge--low    { color: var(--priority-low);    background: color-mix(in srgb, var(--priority-low)    20%, transparent); }


/* ============================================================
   VISION DETAIL / EMPTY STATES
   ============================================================ */

.vision-container {
  max-width: 56rem;
}

.vision-detail {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.vision-detail-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.vision-detail-description {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.7;
}

.vision-detail-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

.vision-detail-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.vision-empty-icon {
  font-size: 3rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-4);
}

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--text-muted);
}

.empty-state i {
  font-size: var(--step-2);
  margin-bottom: var(--space-3);
  display: block;
}

.empty-state p {
  font-size: var(--step-0);
  line-height: 1.5;
}


/* ============================================================
   WIZARD
   ============================================================ */

.wizard-step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.wizard-step-title {
  font-family: var(--font-display, var(--font-serif));
  font-size: var(--step-3);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.wizard-step-subtitle {
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.wizard-step-description {
  font-size: var(--step-0);
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: var(--space-6);
}

.wizard-progress {
  margin-bottom: var(--space-8);
}

.wizard-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.wizard-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.wizard-content {
  margin-top: var(--space-6);
}

/* Wizard step progress bar */
.progress-steps {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.step {
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  transition: all var(--ease);
  max-width: 2.5rem;
}

.step.active {
  background: var(--amber);
  color: var(--bg-base);
  border-color: var(--amber);
}

.step.completed {
  background: var(--green);
  color: var(--bg-base);
  border-color: var(--green);
}

/* Objectives list container in wizard */
.objectives-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Wizard success page wrapper */
.onboarding-success {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* Objective and task input items in wizard */
.objective-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.objective-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.task-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.task-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Wizard success */
.celebration-icon {
  font-size: var(--step-4);
  color: var(--amber);
  display: block;
  margin-bottom: var(--space-4);
  text-align: center;
}

.onboarding-wizard {
  padding: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.review-summary {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}

.review-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.review-item:last-child {
  border-bottom: none;
}

/* Wizard success page legacy */
.success-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.success-header h1 {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  color: var(--amber);
  margin-bottom: var(--space-2);
}

.success-header p {
  color: var(--text-secondary);
  font-size: var(--step-0);
}

.success-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.summary-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--ease);
}

.summary-card:hover {
  border-color: var(--border-light);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--step-1);
  color: var(--amber);
}

.card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}


/* ============================================================
   TASKS
   ============================================================ */

/* ============================================================
   TASKS — Base layout (all personalities)
   ============================================================ */

.task-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  position: relative;
  transition: border-color var(--ease), background var(--ease);
}

/* Compact task-row layout under the app compact breakpoint: keep the
   checkbox on the same row as the title, but let metadata + actions
   wrap underneath instead of competing for horizontal space and
   pushing the title into ellipsis. */
@media (max-width: 640px) {
  .task-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "check  title"
      "meta   meta"
      "actions actions";
    row-gap: var(--space-2);
  }
  .task-row > .task-row__check    { grid-area: check; }
  .task-row > .task-row-title,
  .task-row > .task-row__title    { grid-area: title; }
  .task-row > .task-row__meta     { grid-area: meta; }
  .task-row > .task-row__actions  { grid-area: actions; justify-self: end; }
}
.task-row:hover { border-color: var(--border-light); }

.task-row[data-priority="high"]   { border-left-color: var(--priority-high); }
.task-row[data-priority="medium"] { border-left-color: var(--priority-medium); }
.task-row[data-priority="low"]    { border-left-color: var(--priority-low); }

.task-row[data-state="completed"] { opacity: 0.62; }
.task-row[data-state="completed"] .task-row-title {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}
.task-row[data-state="completed"] .task-row__check {
  background: var(--green);
  border-color: var(--green);
  color: var(--bg-base);
}

.task-row__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-light);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--ease);
  flex-shrink: 0;
  padding: 0;
}
.task-row__check:hover { border-color: var(--amber); color: var(--amber-dim); }

.task-row__body {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer;
}

.task-row-title {
  font-size: var(--step-0);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.35;
}

.task-row__meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.task-row__meta i { color: var(--amber-dim); margin-right: 0.3em; }
.task-row__meta--overdue { color: var(--red); }
.task-row__meta--overdue i { color: var(--red); }

.task-row__due { /* inherits __meta font/color */ }
.task-row__due--done { color: var(--green); }

.task-row__note {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30ch;
}

.task-row__contexts { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.task-row__actions {
  display: flex; gap: var(--space-2);
  opacity: 0;
  transition: opacity var(--ease);
}
.task-row:hover .task-row__actions { opacity: 1; }

.task-row__drag {
  position: absolute; left: -1rem; top: 50%; transform: translateY(-50%);
  opacity: 0; color: var(--text-muted); font-size: 0.75rem;
  cursor: grab; transition: opacity var(--ease);
}
.task-row:hover .task-row__drag { opacity: 0.4; }

.project-row__drag {
  color: var(--text-muted); font-size: 0.85rem;
  cursor: grab; opacity: 0.25; transition: opacity var(--ease);
  margin-right: var(--space-2);
}
.is-active-project:hover .project-row__drag { opacity: 0.7; }

/* back-compat flat aliases */
.task-row-icon    { color: var(--text-muted); font-size: var(--step-0); flex-shrink: 0; }
.task-row-content { flex: 1; min-width: 0; }
.task-row-deadline,
.task-due-date {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted);
}
.task-row-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Priority chip */
.b-chip--priority {
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
}
.b-chip--priority[data-prio="high"]   { color: var(--priority-high); }
.b-chip--priority[data-prio="medium"] { color: var(--priority-medium); }
.b-chip--priority[data-prio="low"]    { color: var(--priority-low); }

.b-chip--zombie {
  background-color: var(--amber, #f59e0b);
  color: var(--bg, #fff);
  font-size: var(--text-xs, 0.75rem);
}

/* Task card (grid view) */
.task-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.task-card-title {
  font-size: var(--step-0);
  color: var(--text-primary);
  font-weight: 500;
}

.task-card-title-section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.task-card-status {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.task-status-icon {
  color: var(--text-muted);
}

.task-title {
  font-size: var(--step-0);
  color: var(--text-primary);
}

.task-card-contexts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.task-card-deadline {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  margin-top: var(--space-3);
}

.task-card-actions {
  display: flex;
  gap: var(--space-2);
}

/* Tasks page controls */
.tasks-controls {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-6);
}

.tasks-search {
  flex: 1;
  min-width: 200px;
}

.tasks-sort {
  min-width: 200px;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tasks-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tasks-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tasks-context-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}


/* ============================================================
   PROJECTS
   ============================================================ */

.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.projects-grid {
  display: grid;
  /* Intrinsic responsive grid: the inner `min(20rem, 100%)` collapses
     the minimum to the container's width on viewports narrower than
     20rem, so the grid doesn't force a horizontal overflow at 320px. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-6);
}

.project-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: border-color var(--ease);
}

.project-item:hover {
  border-color: var(--border-light);
}

.project-item-icon {
  color: var(--amber-dim);
  font-size: var(--step-1);
  flex-shrink: 0;
}

.project-item-content {
  flex: 1;
  min-width: 0;
}

.project-item-title {
  font-size: var(--step-0);
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.project-item-description {
  font-size: var(--step--1);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.project-item-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Advancement stats (dashboard) */
.advancement-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.advancement-stat-icon {
  color: var(--amber);
  font-size: var(--step-0);
  width: 1.5rem;
  text-align: center;
}

.advancement-stat-number {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--text-primary);
  font-weight: 500;
}

.advancement-stat-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ============================================================
   API DOCS PAGE
   ============================================================ */

.api-docs {
  max-width: 64rem;
  margin: 0 auto;
}

.api-version-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.7em;
  background: var(--amber-glow);
  border: 1px solid var(--amber-dim);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.endpoint-grid {
  display: grid;
  /* Intrinsic responsive grid: the inner `min(20rem, 100%)` collapses
     the minimum to the container's width on viewports narrower than
     20rem, so the grid doesn't force a horizontal overflow at 320px. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-6);
}

.endpoint-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  transition: border-color var(--ease);
}

.endpoint-card:hover {
  border-color: var(--border-light);
}

.endpoint-method {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.method-get    { background: var(--green-dim); color: var(--green); }
.method-post   { background: var(--amber-glow); color: var(--amber); }
.method-put    { background: color-mix(in srgb, var(--priority-medium) 15%, transparent); color: var(--priority-medium); }
.method-delete { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }

.endpoint-path {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.status-codes {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.status-code {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.status-code-number {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--amber);
  min-width: 2.5rem;
}

.status-code-desc {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.code-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-secondary);
  overflow-x: auto;
}

/* Table responsive */
.table-responsive {
  overflow-x: auto;
}

.api-docs table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.api-docs th {
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--space-3);
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.api-docs td {
  border-bottom: 1px solid var(--border);
  padding: var(--space-3);
  color: var(--text-secondary);
}

.api-docs tr:nth-child(even) {
  background: var(--bg-surface);
}

.api-docs__banner {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border-left: var(--space-1) solid var(--amber);
}

.api-docs__banner pre {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-secondary);
  border-left: var(--space-1) solid var(--amber-dim);
}

.api-docs__banner code {
  background: var(--bg-surface);
  color: var(--amber);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.api-docs__auth-note {
  display: block;
  background: var(--bg-elevated);
  border-left: var(--space-1) solid var(--amber-dim);
  padding: var(--space-3) var(--space-4);
  font-size: var(--step--1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.api-docs__resources {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.api-docs__resources a {
  color: var(--amber);
  transition: color var(--ease);
}

.api-docs__resources a:hover {
  color: var(--text-primary);
}

.api-docs__footer {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.api-docs__footer a {
  color: var(--amber);
}


/* ============================================================
   MISC / SHARED
   ============================================================ */

.loading {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.divider {
  height: 1px;
  background: var(--border);
}

.avatar {
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--amber);
  font-weight: 500;
  flex-shrink: 0;
}

.quick-start,
.buttons-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.section {
  margin-bottom: var(--space-8);
}

/* ── section-title block (dashboard section headers) ── */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.section-title__label {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-title__label::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--amber);
}

.section-title__action {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.8em;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}

.section-title__action:hover {
  color: var(--amber);
  border-color: var(--amber-dim);
}

/* ── info / misc alerts ── */
.info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* ── activity-date (legacy dashboard) ── */
.activity-date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Legacy classes still referenced in templates (to be cleaned up in plans 02-03) */
.advancements {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.last-activities {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.vision {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}


/* ============================================================
   EXCEPTIONS (data-* attribute variants)
   ============================================================ */

/* Stat card featured (green accent) */
[data-featured] .stat-card__icon {
  background: var(--green-dim);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green);
}

[data-featured] .stat-card__value,
[data-featured] .stat-card__title {
  color: var(--green);
}

/* Compact layout */
[data-compact] { --stack-space: var(--space-3); }

/* Stats grid tight */
[data-stats-grid] { --grid-min: 10rem; --grid-gap: var(--space-4); }

/* Narrow sidebar */
[data-narrow-sidebar] {
  --sidebar-width: 20rem;
  --sidebar-content-min: 52%;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}

.stat-card { animation: fade-up var(--duration-normal) ease both; }
.stat-card:nth-child(1) { animation-delay: calc(var(--duration-fast) / 3); }
.stat-card:nth-child(2) { animation-delay: calc(var(--duration-fast) * 2 / 3); }
.stat-card:nth-child(3) { animation-delay: var(--duration-fast); }
.stat-card:nth-child(4) { animation-delay: calc(var(--duration-fast) * 4 / 3); }

.vision-card  { animation: fade-up var(--duration-slow) ease both; }
.activity-card { animation: fade-up var(--duration-normal) ease both; }

.celebration-icon { animation: pulse 1s ease-in-out; }


/* ============================================================
   PERSONALITY: momentum — horizontal top bar
   Overrides the left-rail to a sticky top bar with icon-only items.
   Must come BEFORE the mobile @media block so mobile rules win.
   ============================================================ */

body[data-personality="momentum"] .app-shell {
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "main";
}

body[data-personality="momentum"] .site-nav {
  width: 100%;
  height: auto;
  flex-direction: row;
  align-items: center;
  padding-block: 0;
  padding-inline: var(--space-4);
  border-right: none;
  border-bottom: 1px solid var(--border);
}

body[data-personality="momentum"] .site-nav__brand {
  width: auto;
  border-bottom: none;
  border-right: 1px solid var(--border);
  margin-bottom: 0;
  padding-inline: var(--space-4);
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
}

body[data-personality="momentum"] .site-nav__links {
  flex-direction: row;
  width: auto;
  flex: 0;
}

body[data-personality="momentum"] .site-nav__item {
  flex-direction: row;
  width: auto;
  padding: var(--space-2) var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.75rem;
}

body[data-personality="momentum"] .nav-theme-select,
body[data-personality="momentum"] .nav-personality-select {
  width: auto;
}

/* ============================================================
   PERSONALITY: stadium / forge / trophy / harmony — horizontal top bar
   Same layout as momentum (topbar + icon-only items), different tokens.
   ============================================================ */

body[data-personality="stadium"] .app-shell,
body[data-personality="forge"] .app-shell,
body[data-personality="trophy"] .app-shell,
body[data-personality="harmony"] .app-shell {
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "main";
}

body[data-personality="stadium"] .site-nav,
body[data-personality="forge"] .site-nav,
body[data-personality="trophy"] .site-nav,
body[data-personality="harmony"] .site-nav {
  width: 100%;
  height: auto;
  flex-direction: row;
  align-items: center;
  padding-block: 0;
  padding-inline: var(--space-4);
  border-right: none;
  border-bottom: 1px solid var(--border);
}

/* Trophy: the gallery aesthetic needs a brass hairline on the top nav,
   not the default neutral border. */
body[data-personality="trophy"] .site-nav {
  border-bottom-color: color-mix(in srgb, var(--trophy-brass) 40%, transparent);
}
body[data-personality="trophy"] .site-nav__brand {
  border-right-color: color-mix(in srgb, var(--trophy-brass) 40%, transparent);
}

body[data-personality="stadium"] .site-nav__brand,
body[data-personality="forge"] .site-nav__brand,
body[data-personality="trophy"] .site-nav__brand,
body[data-personality="harmony"] .site-nav__brand {
  width: auto;
  border-bottom: none;
  border-right: 1px solid var(--border);
  margin-bottom: 0;
  padding-inline: var(--space-4);
  font-family: var(--font-serif);
}

/* Stadium / Forge / Trophy: display font brand, uppercase nav items */
body[data-personality="stadium"] .site-nav__brand,
body[data-personality="forge"] .site-nav__brand,
body[data-personality="trophy"] .site-nav__brand {
  letter-spacing: 0.04em;
}

body[data-personality="stadium"] .site-nav__links,
body[data-personality="forge"] .site-nav__links,
body[data-personality="trophy"] .site-nav__links,
body[data-personality="harmony"] .site-nav__links {
  flex-direction: row;
  width: auto;
  flex: 0;
}

body[data-personality="stadium"] .site-nav__item,
body[data-personality="forge"] .site-nav__item,
body[data-personality="trophy"] .site-nav__item {
  flex-direction: row;
  width: auto;
  padding: var(--space-2) var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Trophy: brass underline marks the active nav item instead of the
   default amber-glow background pill. Relative positioning is needed
   for the ::after pseudo-element. */
body[data-personality="trophy"] .site-nav__item {
  position: relative;
}
body[data-personality="trophy"] .site-nav__item[aria-current="page"] {
  background: transparent;
  color: var(--trophy-brass);
}
body[data-personality="trophy"] .site-nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  height: 2px;
  background: var(--trophy-brass);
}

/* Harmony: serif italic brand, spaced-not-shouted nav labels */
body[data-personality="harmony"] .site-nav__brand {
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}

body[data-personality="harmony"] .site-nav__item {
  flex-direction: row;
  width: auto;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  text-transform: none;
}

body[data-personality="stadium"] .nav-theme-select,
body[data-personality="stadium"] .nav-personality-select,
body[data-personality="forge"] .nav-theme-select,
body[data-personality="forge"] .nav-personality-select,
body[data-personality="trophy"] .nav-theme-select,
body[data-personality="trophy"] .nav-personality-select,
body[data-personality="harmony"] .nav-theme-select,
body[data-personality="harmony"] .nav-personality-select {
  width: auto;
}

/* ============================================================
   PERSONALITY: default — horizontal top bar with text labels
   Same grid re-flow as momentum, but keeps labels (--nav-label-display: flex)
   and uses Inter Tight for a landing-page-style editorial look.
   ============================================================ */

body[data-personality="bold"] .app-shell {
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "main";
}

body[data-personality="bold"] .site-nav {
  width: 100%;
  height: auto;
  flex-direction: row;
  align-items: center;
  padding-block: 0;
  padding-inline: var(--space-6);
  border-right: none;
  border-bottom: 1px solid var(--border);
}

body[data-personality="bold"] .site-nav__brand {
  width: auto;
  border-bottom: none;
  border-right: 1px solid var(--border);
  margin-bottom: 0;
  padding-block: var(--space-4);
  padding-inline: 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: none;
}

/* bold .site-nav__brand-abbr / wordmark: identical to base — removed (ADR-004 cleanup) */

body[data-personality="bold"] .site-nav__links {
  flex-direction: row;
  width: auto;
  flex: 0;
}

body[data-personality="bold"] .site-nav__item {
  flex-direction: row;
  width: auto;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-2);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: -0.01em;
}

body[data-personality="bold"] .nav-theme-select,
body[data-personality="bold"] .nav-personality-select {
  width: auto;
}

/* ============================================================
   PERSONALITY: clarity + flow — restore left sidebar layout
   Base is now top-bar; these personalities explicitly revert
   to the original 56px vertical rail.
   ============================================================ */

body[data-personality="clarity"] .app-shell,
body[data-personality="flow"] .app-shell {
  grid-template-rows: 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas: "nav main";
}

body[data-personality="clarity"] .site-nav,
body[data-personality="flow"] .site-nav {
  width: 56px;
  height: 100dvh; /* dvh respects mobile browser chrome (URL bar) */
  display: grid;
  /* Single column constrained to the rail width — without an explicit
     column, the auto-column would size to the widest child's content
     and force a horizontal overflow when children use `width: 100%`. */
  grid-template-columns: minmax(0, 1fr);
  /* row 1: brand
     row 2: workspace badge
     row 3: links (1fr — absorbs excess height; scrolls internally if items
            don't fit; popups still escape because overflow lives on the
            cell, not the rail)
     row 4: notif-bell
     row 5: nav-user-menu (pinned to the bottom of the viewport) */
  grid-template-rows: auto auto 1fr auto auto;
  justify-items: center;
  padding-block: var(--space-4);
  padding-inline: 0;
  row-gap: var(--space-2);
  border-right: 1px solid var(--border);
  border-bottom: none;
  backdrop-filter: none;
  background: var(--bg-surface);
  /* IMPORTANT: rail overflow stays visible so .nav-user-menu__popup (and
     submenu popup) can escape sideways into the page area. */
  overflow: visible;
}

body[data-personality="clarity"] .site-nav__links,
body[data-personality="flow"] .site-nav__links {
  /* Scoped overflow on the items cell only — when items don't fit the
     1fr cell, they scroll WITHIN this container; the trailing cluster
     in rows 4/5 stays pinned at the bottom of the viewport. */
  overflow-y: auto;
  align-self: stretch;
  /* Hide the scrollbar visually but keep keyboard/wheel scrolling. */
  scrollbar-width: none;
}
body[data-personality="clarity"] .site-nav__links::-webkit-scrollbar,
body[data-personality="flow"] .site-nav__links::-webkit-scrollbar {
  display: none;
}

/* Clarity uses uppercase monospace labels under each icon; the 56px default
   width clips longer labels (e.g. OBJECTIVES, DASHBOARD). Bump width and
   constrain the label span so any future longer label degrades gracefully. */
body[data-personality="clarity"] .site-nav {
  width: 76px;
}

body[data-personality="clarity"] .site-nav__item span {
  display: block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline: var(--space-1);
  box-sizing: border-box;
}

body[data-personality="clarity"] .site-nav__brand,
body[data-personality="flow"] .site-nav__brand {
  font-family: var(--font-sans);
  font-weight: normal;
  letter-spacing: 0.1em;
  width: 100%;
  text-align: center;
  padding-inline-end: 0;
  padding-block: var(--space-3);
  border-right: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body[data-personality="clarity"] .site-nav__brand-wordmark,
body[data-personality="flow"] .site-nav__brand-wordmark { display: none; }

/* Workspace badge sits under the brand in the 76px vertical rail; the default
   margin-left + max-width: 12rem overflow the column. Center it and cap the
   width to the rail so the name ellipses gracefully. */
body[data-personality="clarity"] .workspace-badge,
body[data-personality="flow"] .workspace-badge {
  margin-left: 0;
  max-width: calc(100% - var(--space-2));
  align-self: center;
  padding-inline: var(--space-2);
  box-sizing: border-box;
}

body[data-personality="clarity"] .site-nav__brand-abbr,
body[data-personality="flow"] .site-nav__brand-abbr { display: inline; }

body[data-personality="clarity"] .site-nav__brand-mark,
body[data-personality="flow"] .site-nav__brand-mark { display: none; }

body[data-personality="clarity"] .site-nav__links,
body[data-personality="flow"] .site-nav__links {
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-inline: 0;
  /* No flex-grow: the parent grid (auto auto 1fr auto auto) handles
     vertical distribution, and overflow:auto on this container handles
     the short-viewport case. The previous `flex: 1` pushed the trailing
     cluster below the fold on viewports under ~700px tall. */
}

body[data-personality="clarity"] .site-nav__item,
body[data-personality="flow"] .site-nav__item {
  flex-direction: column;
  width: 100%;
  font-size: 0.65rem;
  font-weight: normal;
  color: var(--text-muted);
}

/* Clarity: monospace uppercase — analytical, terminal feel */
body[data-personality="clarity"] .site-nav__item {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Flow: serif italic — warm, atelier feel; no uppercase shouting */
body[data-personality="flow"] .site-nav__item {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
}

body[data-personality="clarity"] .site-nav__item i,
body[data-personality="flow"] .site-nav__item i,
body[data-personality="momentum"] .site-nav__item i,
body[data-personality="stadium"] .site-nav__item i,
body[data-personality="forge"] .site-nav__item i,
body[data-personality="trophy"] .site-nav__item i { display: flex; }

/* harmony .site-nav__item i: identical to base — removed (ADR-004 cleanup) */
body[data-personality="harmony"] .site-nav__item span { display: flex; }

body[data-personality="clarity"] .nav-user-menu,
body[data-personality="flow"] .nav-user-menu {
  width: 100%;
}

/* Account menu sits at the bottom of the rail → popup anchored to the bottom
   of the trigger so it stays inside the viewport. */
body[data-personality="clarity"] .nav-user-menu__popup,
body[data-personality="flow"] .nav-user-menu__popup {
  left: calc(100% + var(--space-2));
  right: auto;
  bottom: 0;
  top: auto;
}

/* Workspace badge sits at the top of the rail → popup anchored to the top
   of the trigger so it drops down (or rather, pops to the right) without
   running off the top of the viewport. */
body[data-personality="clarity"] .nav-workspace-menu__popup,
body[data-personality="flow"] .nav-workspace-menu__popup {
  left: calc(100% + var(--space-2));
  right: auto;
  top: 0;
  bottom: auto;
}

/* ============================================================
   MOBILE: hamburger menu replaces nav links at ≤880px
   Only @media here is for the one acceptable layout override.
   ============================================================ */

@media (max-width: 880px) {
  .site-nav__links,
  body[data-personality="clarity"] .site-nav__links,
  body[data-personality="flow"] .site-nav__links,
  body[data-personality="bold"] .site-nav__links,
  body[data-personality="stadium"] .site-nav__links,
  body[data-personality="forge"] .site-nav__links,
  body[data-personality="trophy"] .site-nav__links,
  body[data-personality="harmony"] .site-nav__links {
    display: none;
  }

  .nav-user-menu,
  body[data-personality="clarity"] .nav-user-menu,
  body[data-personality="flow"] .nav-user-menu,
  body[data-personality="bold"] .nav-user-menu,
  body[data-personality="stadium"] .nav-user-menu,
  body[data-personality="forge"] .nav-user-menu,
  body[data-personality="trophy"] .nav-user-menu,
  body[data-personality="harmony"] .nav-user-menu,
  .nav-workspace-menu,
  body[data-personality="clarity"] .nav-workspace-menu,
  body[data-personality="flow"] .nav-workspace-menu,
  body[data-personality="bold"] .nav-workspace-menu,
  body[data-personality="stadium"] .nav-workspace-menu,
  body[data-personality="forge"] .nav-workspace-menu,
  body[data-personality="trophy"] .nav-workspace-menu,
  body[data-personality="harmony"] .nav-workspace-menu {
    display: none;
  }

  .navbar-hamburger {
    display: flex;
  }
}


/* ============================================================
   ADAPTIVE DASHBOARD WIDGETS — Phase 05 (Enneagram center layouts)
   All values use var(--*) references — zero hardcoded hex.
   ============================================================ */

/* -- NOW card (Momentum / Body center) -- */
.now-card {
  background: var(--bg-surface);
  border: 2px solid var(--amber);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
}
.now-card__label {
  color: var(--text-secondary);
  letter-spacing: 0.12em;
}
.now-card__title {
  margin-top: var(--space-4);
  color: var(--text-primary);
}
.now-card__action {
  margin-top: var(--space-6);
  font-size: var(--step-1);
  padding: var(--space-4) var(--space-8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -- Analytics panel (Clarity / Head center) -- */
.analytics-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.analytics-panel__grid {
  margin-top: var(--space-4);
}

/* -- Stat card (Clarity / Head center) -- */
.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: center;
}
.stat-card__value {
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat-card__label {
  display: block;
  margin-top: var(--space-2);
}

/* -- Mood entry (Flow / Heart center) -- */
.mood-entry {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-default, none);
}
.mood-entry__question {
  color: var(--text-primary);
}
.mood-entry__options {
  margin-top: var(--space-4);
  justify-content: center;
}

/* -- Fuel gauge (Momentum / Body center) -- */
.fuel-gauge {
  padding: var(--space-4) 0;
}
.fuel-gauge__bar {
  height: 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fuel-gauge__fill {
  height: 100%;
  background: var(--amber);
  border-radius: var(--radius-md);
  transition: width var(--ease, 0.3s ease);
}
.fuel-gauge__label {
  display: block;
  margin-top: var(--space-2);
}

/* ── selectable card (radio/checkbox inside label) ── */
.card--selectable {
  min-height: 2.75rem;
  cursor: pointer;
}

.card--selectable:has(input:checked) {
  border-color: var(--amber);
  background: var(--bg-elevated);
}

.card--selectable:hover {
  border-color: var(--border-light);
}

.card--selectable:has(:focus-visible) {
  box-shadow: var(--focus-ring);
}

/* -- Keyboard badge (Clarity / Head center) -- */
.kbd-badge {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-secondary);
  line-height: 1;
}

/* ============================================================
   KPI CARDS
   ============================================================ */

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: fade-up var(--duration-normal) ease both;
}

.kpi-card--loading {
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.kpi-card__spinner {
  font-size: var(--step-2);
  color: var(--text-muted);
}

.kpi-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-card__title {
  color: inherit;
}

.kpi-card__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.kpi-card__value sup {
  font-size: var(--step-0);
  color: var(--text-muted);
  font-weight: 400;
}

.kpi-card__badge {
  display: inline-block;
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-badge--green {
  background: var(--green-dim);
  color: var(--green);
}

.kpi-badge--orange {
  background: color-mix(in srgb, var(--priority-medium) 15%, transparent);
  color: var(--priority-medium);
}

.kpi-badge--red {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
}

.kpi-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.kpi-card__warning {
  color: var(--priority-medium);
}

.kpi-card__highlight {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.kpi-card__distribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-secondary);
  padding-top: var(--space-2);
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.kpi-card__bucket {
  white-space: nowrap;
}

.kpi-card__sparkline {
  margin-top: auto;
  width: 100%;
  height: var(--space-8, 2rem);
  overflow: hidden;
}

.kpi-card__sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kpi-card__period {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-tertiary, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dist-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-secondary);
}

.dist-bar::before {
  content: '';
  display: block;
  height: var(--space-2);
  width: var(--bar-w, 0%);
  min-width: 2px;
  background: var(--color-accent);
  opacity: 0.5;
  border-radius: var(--radius-sm);
  transition: width var(--duration-normal, 0.2s) ease;
}

.kpi-period-selector {
  gap: var(--space-2);
}

/* Level border accents */
.kpi-card[data-level="green"] { border-left: 3px solid var(--green); }
.kpi-card[data-level="orange"] { border-left: 3px solid var(--priority-medium); }

/* ============================================================
   Segment control — tab-like switcher (CUBE: Block)
   Usage: <div class="segment-control" role="tablist">
            <button class="segment-control__item" aria-selected="true">…</button>
          </div>
   ============================================================ */
.segment-control {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}

.segment-control__item {
  flex: 1;
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.segment-control__item[aria-selected="true"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.segment-control__item:hover:not([aria-selected="true"]) {
  color: var(--text-primary);
}
.kpi-card[data-level="red"] { border-left: 3px solid var(--red); }


/* ============================================================
   PROFILE
   ============================================================ */

.b-profile-dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.b-profile-dl__row {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}

.b-profile-dl__row dt {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
  min-width: 5rem;
}

.b-profile-dl__row dd {
  color: var(--text-primary);
}

/* ============================================================
   NAV USER MENU — submenu attached to the user trigger
   ============================================================ */

.nav-user-menu,
.nav-workspace-menu {
  position: relative;
  width: auto;
}

.nav-user-menu__popup,
.nav-workspace-menu__popup {
  display: none;
  position: absolute;
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + var(--space-2));
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 130px;
  z-index: var(--z-fixed);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.nav-user-menu--open .nav-user-menu__popup,
.nav-workspace-menu--open .nav-workspace-menu__popup {
  display: flex;
}

/* ── b-password-field — input with a show/hide visibility toggle ──── */
.b-password-field { position: relative; }
.b-password-field .form-input {
  /* Reserve room for the toggle so the eye icon does not overlap text. */
  padding-right: calc(var(--space-7) + var(--space-2));
}
.b-password-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}
.b-password-field__toggle:hover { color: var(--text-primary); background: var(--bg-elevated); }
.b-password-field__toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Nested admin submenu inside the user-menu popup. The submenu popup
   inherits the parent popup's per-personality positioning (e.g. flies to
   the right of its trigger on clarity/flow's left-rail nav), so this
   block only handles wrapper position context + visibility — not the
   directional flyout, which the inherited rule already gets right. */
.nav-user-menu__submenu { position: relative; }
.nav-user-menu__submenu-chev {
  margin-left: auto;
  font-size: 0.75em;
  color: var(--text-muted);
}
/* The nested popup also carries .nav-user-menu__popup, so the parent's
   --open rule would force display:flex when the user menu is open even
   though the submenu trigger has not been clicked yet. Pin it back to
   display:none until the submenu wrapper itself is --open. */
.nav-user-menu--open .nav-user-menu__submenu-popup { display: none; }
/* Hover (mouse) or explicit toggle (.nav-user-menu__submenu--open, set by
   the click handler in app.js — Phase 5.3, ADR-013) opens the submenu.
   :focus-within is not used because tabbing onto the trigger should not
   reveal the submenu unintentionally; keyboard users open it with
   Enter/Space, which triggers the JS toggle and adds --open. */
.nav-user-menu--open .nav-user-menu__submenu:hover .nav-user-menu__submenu-popup,
.nav-user-menu--open .nav-user-menu__submenu--open .nav-user-menu__submenu-popup {
  display: flex;
}

.nav-user-menu__item,
.nav-workspace-menu__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
}

.nav-user-menu__item:hover,
.nav-workspace-menu__item:hover {
  color: var(--text-secondary);
  background: var(--bg-surface);
}

/* Top-bar personalities: popup drops downward from the right edge */
body[data-personality="momentum"] .nav-user-menu,
body[data-personality="bold"] .nav-user-menu,
body[data-personality="momentum"] .nav-workspace-menu,
body[data-personality="bold"] .nav-workspace-menu {
  width: auto;
}

body[data-personality="momentum"] .nav-user-menu__popup,
body[data-personality="bold"] .nav-user-menu__popup,
body[data-personality="momentum"] .nav-workspace-menu__popup,
body[data-personality="bold"] .nav-workspace-menu__popup {
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + var(--space-2));
}

/* ============================================================
   BOLD PERSONALITY REFRESH — new blocks & enhancements
   Global blocks (no personality scope): b-today, b-stat-row,
   b-kpi-grid, b-kpi-cell, b-tabs, b-toolbar, b-chips, b-chip.
   Bold-scoped enhancements: page-header, task-row, b-project-card,
   section-title, segment-control, main-content, b-form, b-prio,
   b-ctx-pick, b-state-pick, b-obj-pick.
   ============================================================ */

/* ── b-today (dashboard hero band) ──────────────────────────── */
.b-today {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 880px) {
  .b-today { grid-template-columns: 1fr; }
}
.b-today__pane {
  background: var(--bg-surface);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}
.b-today__pane--accent {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--amber) 6%, var(--bg-surface)) 0%,
    var(--bg-surface) 70%);
}
.b-today__eyebrow {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.b-today__eyebrow .b-today__dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--amber);
  animation: b-today-pulse 2.4s ease-in-out infinite;
}
@keyframes b-today-pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 50%, transparent); }
  50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 0%, transparent); }
}
.b-today__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.b-today__quote-author {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.b-today__action {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.25;
}
.b-today__action-meta {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.b-today__action-meta span { display: inline-flex; align-items: center; gap: 0.4em; }
.b-today__action-meta i { color: var(--amber); }
.b-today__cta {
  margin-top: auto;
  display: flex;
  gap: var(--space-3);
}

/* ── b-stat-row (weekly vitals strip) ───────────────────────── */
.b-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 720px) { .b-stat-row { grid-template-columns: repeat(2, 1fr); } }
.b-stat-row__cell {
  background: var(--bg-surface);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background var(--ease);
}
.b-stat-row__cell:hover { background: var(--bg-elevated); }
.b-stat-row__label {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.b-stat-row__value {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 700;
  font-size: var(--step-3);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-primary);
}
.b-stat-row__delta {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.b-stat-row__delta[data-trend="up"]   { color: var(--green); }
.b-stat-row__delta[data-trend="down"] { color: var(--red); }

/* ── b-kpi-grid + b-kpi-cell ────────────────────────────────── */
.b-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}
.b-kpi-cell {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--ease), transform var(--ease);
  position: relative;
  overflow: hidden;
}
.b-kpi-cell:hover { border-color: var(--border-light); }
.b-kpi-cell__label {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.b-kpi-cell__value {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}
.b-kpi-cell__value sup {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  font-family: 'JetBrains Mono', var(--font-mono);
}
.b-kpi-cell__sparkline {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: auto;
  color: var(--amber);
  opacity: 0.85;
}
.b-kpi-cell__delta {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.b-kpi-cell__delta[data-trend="up"]   { color: var(--green); }
.b-kpi-cell__delta[data-trend="down"] { color: var(--red); }
.b-kpi-cell__delta[data-trend="flat"] { color: var(--text-muted); }
.b-kpi-cell[data-level="green"]  { border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.b-kpi-cell[data-level="amber"]  { border-color: color-mix(in srgb, var(--amber) 30%, var(--border)); }
.b-kpi-cell[data-level="red"]    { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.b-kpi-cell[data-level="green"] .b-kpi-cell__sparkline { color: var(--green); }
.b-kpi-cell[data-level="red"]   .b-kpi-cell__sparkline { color: var(--red); }
.b-kpi-cell[data-emphasis="hero"] {
  grid-column: span 2;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--amber) 8%, var(--bg-surface)) 0%,
    var(--bg-surface) 65%);
  border-color: color-mix(in srgb, var(--amber) 25%, var(--border));
}
.b-kpi-cell[data-emphasis="hero"] .b-kpi-cell__value {
  font-size: clamp(2.6rem, 1.8rem + 2vw, 4rem);
}

/* ── b-stat-row sparkline (4-up dashboard stat strip) ──────────── */
.b-stat-row__cell small {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.55em;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 0.2em;
  font-weight: 500;
}
.b-stat-row__spark {
  display: flex;
  align-items: flex-end;
  height: 24px;
  gap: 2px;
  margin-top: var(--space-1);
}
.b-stat-row__spark span {
  flex: 1;
  background: color-mix(in srgb, var(--amber) 28%, transparent);
  border-radius: 1px;
  min-height: 2px;
}
.b-stat-row__spark span.lit { background: var(--amber); }

/* ── b-kpi-cell head / hint / bar / foot / section-title ─────── */
.b-kpi-cell__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b-kpi-cell__hint {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.b-kpi-cell__bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-elevated);
  overflow: hidden;
  margin-top: auto;
}
.b-kpi-cell__bar > i {
  display: block;
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(.4, 0, .2, 1);
}
.b-kpi-cell__foot {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.b-kpi-cell[data-level="green"] .b-kpi-cell__bar > i { background: var(--green); }
.b-kpi-cell[data-level="red"]   .b-kpi-cell__bar > i { background: var(--red); }

.b-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
  margin-top: var(--space-2);
}
.b-section-title small {
  font-family: 'JetBrains Mono', var(--font-mono);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Per-personality KPI bar treatments ───────────────────────── */
body[data-personality="clarity"] .b-kpi-cell__bar { border-radius: 2px; }
body[data-personality="clarity"] .b-kpi-cell__bar > i { background: var(--amber); }

body[data-personality="bold"] .b-kpi-cell__bar { height: 5px; }

body[data-personality="flow"] .b-kpi-cell__bar { height: 6px; border-radius: 999px; }
body[data-personality="flow"] .b-kpi-cell__bar > i {
  background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 60%, purple));
}

body[data-personality="momentum"] .b-kpi-cell__bar { height: 6px; border-radius: 999px; }

body[data-personality="stadium"] .b-kpi-cell__bar {
  height: 5px;
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--text-primary);
}
body[data-personality="stadium"] .b-kpi-cell__bar > i { background: var(--amber); border-radius: 0; }

body[data-personality="forge"] .b-kpi-cell__bar { height: 6px; }
body[data-personality="forge"] .b-kpi-cell__bar > i {
  background: linear-gradient(90deg, #ffb547, #e85a18);
}

body[data-personality="trophy"] .b-kpi-cell__bar { height: 4px; border-radius: 1px; }
body[data-personality="trophy"] .b-kpi-cell__bar > i {
  background: linear-gradient(90deg, #b8893a, #a8331c);
}

body[data-personality="harmony"] .b-kpi-cell__bar {
  height: 1px;
  background: transparent;
  border-bottom: 1px solid var(--border-light, var(--border));
  border-radius: 0;
}
body[data-personality="harmony"] .b-kpi-cell__bar > i {
  background: var(--amber);
  height: 1px;
  margin-top: -1px;
  border-radius: 0;
}

body[data-personality="zen"] .b-kpi-cell__bar {
  height: 1px;
  background: transparent;
  border-bottom: 1px solid var(--border-light, var(--border));
  border-radius: 0;
}
body[data-personality="zen"] .b-kpi-cell__bar > i {
  background: var(--amber);
  height: 1px;
  margin-top: -1px;
  border-radius: 0;
}

/* ── b-tabs (pill tab switcher) ─────────────────────────────── */
.b-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  background: var(--bg-surface);
  gap: 0;
}
.b-tabs button {
  border: 0;
  background: transparent;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0.45em 1.1em;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--ease);
}
.b-tabs button[aria-selected="true"] {
  background: var(--amber);
  color: var(--bg-base);
}

/* ── b-chips / b-chip — global base (all themes) ────────────── */
.b-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.b-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2em var(--space-2);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--ease);
}
.b-chip:hover { border-color: var(--amber); color: var(--text-primary); }
/* Active state — single visual rule for two semantic ARIA attributes:
   - aria-pressed="true" for toggle <button> chips (e.g. duration picker)
   - aria-current="page" for filter <a> chips (e.g. journal filters)
   Never key active state off a class — see audit-chip-state.sh. */
.b-chip[aria-pressed="true"],
.b-chip[aria-current="page"] {
  background: var(--amber);
  color: var(--bg-base);
  border-color: var(--amber);
}

/* ── Bold-scoped: page-header ───────────────────────────────── */
body[data-personality="bold"] .page-header {
  align-items: end;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}
body[data-personality="bold"] .page-header__title {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.05;
  color: var(--text-primary);
}
body[data-personality="bold"] .page-header__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
}
body[data-personality="bold"] .page-header__eyebrow {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
body[data-personality="bold"] .page-header__eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--amber);
  border-radius: 50%;
  margin-right: 0.6em;
  vertical-align: middle;
}
/* Bold draws an amber-dot pseudo as the eyebrow marker — the icon-hide
   rule lives in the primitives section at the bottom of this file, so
   any future personality that also draws a ::before marker (e.g. zen's
   hairline) inherits the hide without redeclaring. See ADR-004. */
body[data-personality="bold"] .page-header__subtitle {
  font-size: var(--step-1);
  color: var(--text-secondary);
  font-weight: 300;
  max-width: 60ch;
  line-height: 1.5;
  margin-top: var(--space-3);
}
body[data-personality="bold"] .page-header__meta {
  display: flex;
  gap: var(--space-6);
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-4);
}
body[data-personality="bold"] .page-header__meta strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Bold-scoped: task-row visual overrides ─────────────────── */
body[data-personality="bold"] .task-row:hover {
  background: color-mix(in srgb, var(--bg-elevated) 60%, var(--bg-surface));
}
body[data-personality="bold"] .task-row[data-state="completed"] {
  background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
  border-left-color: var(--green);
}
body[data-personality="bold"] .task-row-title {
  font-family: 'JetBrains Mono', var(--font-mono);
  letter-spacing: -0.005em;
}
body[data-personality="bold"] .task-row__meta {
  font-family: 'JetBrains Mono', var(--font-mono);
}

/* ── Bold-scoped: b-project-card ────────────────────────────── */
body[data-personality="bold"] .b-project-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: border-color var(--ease), transform var(--ease);
  position: relative;
}
body[data-personality="bold"] .b-project-card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}
body[data-personality="bold"] .b-project-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
body[data-personality="bold"] .b-project-card__title {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.25;
}
body[data-personality="bold"] .b-project-card__objective {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
body[data-personality="bold"] .b-project-card__objective::before {
  content: "";
  display: inline-block;
  width: 0.7em; height: 1px;
  background: var(--amber);
}
body[data-personality="bold"] .b-project-card__desc {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.55;
}
body[data-personality="bold"] .b-project-card__next {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
body[data-personality="bold"] .b-project-card__next-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
body[data-personality="bold"] .b-project-card__next-arrow { color: var(--amber); }
body[data-personality="bold"] .b-project-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
body[data-personality="bold"] .b-project-card__stats {
  display: flex;
  gap: var(--space-4);
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-personality="bold"] .b-project-card__stats strong {
  color: var(--text-primary);
  font-weight: 500;
  margin-right: 0.3em;
}
body[data-personality="bold"] .b-project-card__progress {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: 999px;
  overflow: hidden;
  margin-top: var(--space-2);
}
body[data-personality="bold"] .b-project-card__progress-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 999px;
  transition: width var(--ease);
}
body[data-personality="bold"] .b-project-card[data-state="pause"] .b-project-card__progress-fill { background: var(--priority-medium); }
body[data-personality="bold"] .b-project-card[data-state="terminated"] .b-project-card__progress-fill { background: var(--text-muted); }

/* ── Bold-scoped: section-title ─────────────────────────────── */
body[data-personality="bold"] .section-title {
  margin-bottom: var(--space-6);
  align-items: end;
}
body[data-personality="bold"] .section-title__heading {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.1;
}
body[data-personality="bold"] .section-title__heading em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
}
body[data-personality="bold"] .section-title__sub {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
body[data-personality="bold"] .section-title__action {
  background: none;
  border: none;
  color: var(--amber);
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ease);
}
body[data-personality="bold"] .section-title__action:hover {
  color: var(--text-primary);
}

/* ── Bold-scoped: segment-control ───────────────────────────── */
body[data-personality="bold"] .segment-control {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 0;
}
body[data-personality="bold"] .segment-control__item {
  background: transparent;
  border: 0;
  padding: 0.4em 0.9em;
  font-family: 'Inter Tight', var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: all var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
body[data-personality="bold"] .segment-control__item[aria-selected="true"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ── b-toolbar (filter band) — base default (ADR-004 PR 2/3)
   Promoted from the former bold-scoped rules. Personalities that
   declared their own .b-toolbar (zen, stadium, forge) keep their
   existing scope and override base. Personalities that had no
   .b-toolbar rule (clarity, flow, harmony, trophy, momentum) now
   inherit this layout instead of falling back to display:block —
   fixing the "toolbar search icon floats outside the input"
   regression class.

   Primitive rules (icon positioning, input padding-left clearance)
   live near the bottom of this file flagged with !important. See
   ADR-004 and the asheeve-design-system skill for why.
   ─────────────────────────────────────────────────────────────── */
.b-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.b-toolbar .form-input,
.b-toolbar .form-select {
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
}
.b-toolbar__search {
  flex: 1;
  min-width: 200px;
}
.b-toolbar__search i {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ── Bold-scoped: context-badge override ────────────────────── */
body[data-personality="bold"] .context-badge {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 0.2em 0.6em;
}
body[data-personality="bold"] .context-badge::before {
  content: "@";
  color: var(--amber);
  margin-right: 0.15em;
}

/* ── Bold-scoped: site-nav current page indicator ───────────── */
body[data-personality="bold"] .site-nav__item { position: relative; }
body[data-personality="bold"] .site-nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--amber);
  border-radius: 2px 2px 0 0;
}

/* ── Bold-scoped: main-content spacing ──────────────────────── */
body[data-personality="bold"] .main-content {
  padding: var(--space-12) var(--space-10);
  max-width: 84rem;
  margin-inline: auto;
  width: 100%;
}

/* ── Bold-scoped: b-form (modal/page edit forms) ────────────── */
body[data-personality="bold"] .b-form-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 980px) {
  body[data-personality="bold"] .b-form-page { grid-template-columns: 1fr; }
}
body[data-personality="bold"] .b-form {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
body[data-personality="bold"] .b-form__group {
  padding: var(--space-7) var(--space-7);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 720px) {
  body[data-personality="bold"] .b-form__group { grid-template-columns: 1fr; gap: var(--space-3); }
}
body[data-personality="bold"] .b-form__group:last-of-type { border-bottom: 0; }
body[data-personality="bold"] .b-form__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: calc(0.5em + 1px) 0;
}
body[data-personality="bold"] .b-form__legend label {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
}
body[data-personality="bold"] .b-form__legend-hint {
  font-family: 'Inter Tight', var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 400;
}
body[data-personality="bold"] .b-form__field { display: flex; flex-direction: column; gap: var(--space-3); }
body[data-personality="bold"] .b-form__field .form-input,
body[data-personality="bold"] .b-form__field .form-select {
  padding: 0.5em 0.75em;
  min-height: 2.25rem;
  font-size: 0.88rem;
  background: var(--bg-elevated);
}
body[data-personality="bold"] .b-form__field textarea.form-input {
  padding: 0.65em 0.85em;
  line-height: 1.5;
}
body[data-personality="bold"] .b-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-7);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  gap: var(--space-3);
  flex-wrap: wrap;
}
body[data-personality="bold"] .b-form__rail {
  position: sticky;
  top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
body[data-personality="bold"] .b-form__rail-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* ── Bold-scoped: b-chips (quick-pick pills) ────────────────── */
body[data-personality="bold"] .b-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.2em var(--space-2);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--ease);
}
body[data-personality="bold"] .b-chip:hover { border-color: var(--amber-dim); color: var(--text-primary); }
/* Personality-scoped base rule above (0,0,2,1) outranks the unscoped
   .b-chip[aria-pressed="true"] (0,0,2,0). Re-declare the active state at
   bold's specificity so the visual flips correctly. */
body[data-personality="bold"] .b-chip[aria-pressed="true"],
body[data-personality="bold"] .b-chip[aria-current="page"] {
  background: var(--amber);
  color: var(--bg-base);
  border-color: var(--amber);
}

/* ── Bold-scoped: b-prio (priority radio cards) ─────────────── */
body[data-personality="bold"] .b-prio { display: flex; gap: var(--space-2); flex-wrap: wrap; }
body[data-personality="bold"] .b-prio__opt {
  flex: 1;
  min-width: 5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
body[data-personality="bold"] .b-prio__opt::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--text-muted);
}
body[data-personality="bold"] .b-prio__opt[data-prio="high"]::before   { background: var(--priority-high); }
/* bold .b-prio__opt[data-prio="medium"]::before: identical to base — removed (ADR-004 cleanup) */
body[data-personality="bold"] .b-prio__opt[data-prio="low"]::before    { background: var(--priority-low); }
body[data-personality="bold"] .b-prio__opt[aria-pressed="true"] {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--bg-elevated));
}
body[data-personality="bold"] .b-prio__label {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  padding-left: 6px;
}

/* ── Bold-scoped: b-obj-pick (objective picker rows) ────────── */
body[data-personality="bold"] .b-obj-pick { display: flex; flex-direction: column; gap: var(--space-2); }
body[data-personality="bold"] .b-obj-pick__row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  transition: all var(--ease);
  min-height: 2.5rem;
}
body[data-personality="bold"] .b-obj-pick__row:has(input:checked) {
  background: color-mix(in srgb, var(--amber) 8%, var(--bg-elevated));
  border-color: var(--amber);
}
body[data-personality="bold"] .b-obj-pick__title {
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-primary);
  flex: 1;
}

/* ── Bold-scoped: b-state-pick (project state selector) ─────── */
body[data-personality="bold"] .b-state-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
body[data-personality="bold"] .b-state-pick__opt {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Inter Tight', var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  min-height: 2.25rem;
}
body[data-personality="bold"] .b-state-pick__opt i { color: var(--text-muted); }
body[data-personality="bold"] .b-state-pick__opt[aria-pressed="true"][data-state="active"]     { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
body[data-personality="bold"] .b-state-pick__opt[aria-pressed="true"][data-state="pause"]      { border-color: var(--priority-medium); background: color-mix(in srgb, var(--priority-medium) 10%, transparent); }
body[data-personality="bold"] .b-state-pick__opt[aria-pressed="true"][data-state="terminated"] { border-color: var(--text-muted); background: var(--bg-elevated); }
body[data-personality="bold"] .b-state-pick__opt[aria-pressed="true"] i { color: currentColor; }

/* ============================================================
   PERSONALITY: zen — "le bureau silencieux"
   Serif-journal aesthetic. Cormorant Garamond. Cool stone + moss.
   Same horizontal top-nav layout as bold.
   ============================================================ */

/* ── App shell: same horizontal top-bar as bold ── */
body[data-personality="zen"] .app-shell {
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "main";
}

body[data-personality="zen"] .site-nav {
  width: 100%;
  height: auto;
  flex-direction: row;
  align-items: center;
  padding-block: 0;
  padding-inline: var(--space-6);
  border-right: none;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-base) 90%, transparent);
  backdrop-filter: blur(8px);
}

body[data-personality="zen"] .site-nav__brand {
  width: auto;
  border-bottom: none;
  border-right: 1px solid var(--border);
  margin-bottom: 0;
  padding-block: var(--space-4);
  padding-inline: 0 var(--space-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* zen .site-nav__brand-abbr / wordmark: identical to base — removed (ADR-004 cleanup) */

body[data-personality="zen"] .site-nav__links {
  flex-direction: row;
  width: auto;
  flex: 0;
}

body[data-personality="zen"] .site-nav__item {
  flex-direction: row;
  width: auto;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  transition: color var(--ease);
}

body[data-personality="zen"] .site-nav__item:hover { color: var(--text-primary); }
body[data-personality="zen"] .site-nav__item[aria-current="page"] {
  color: var(--text-primary);
  position: relative;
}
body[data-personality="zen"] .site-nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--space-3);
  right: var(--space-3);
  height: 1px;
  background: var(--amber);
}

body[data-personality="zen"] .nav-theme-select,
body[data-personality="zen"] .nav-personality-select { width: auto; }

/* ── Main content ── */
body[data-personality="zen"] .main-content {
  padding: var(--space-12) var(--space-10);
  max-width: 80rem;
  margin-inline: auto;
  width: 100%;
}

/* ── Base typography ── */
body[data-personality="zen"] h1,
body[data-personality="zen"] h2,
body[data-personality="zen"] h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ── Page header ── */
body[data-personality="zen"] .page-header {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

body[data-personality="zen"] .page-header__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

body[data-personality="zen"] .page-header__eyebrow::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--amber);
  opacity: 0.7;
}

body[data-personality="zen"] .page-header__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  line-height: 1.1;
  color: var(--text-primary);
}

body[data-personality="zen"] .page-header__title em {
  font-style: normal;
  color: var(--amber);
}

body[data-personality="zen"] .page-header__subtitle {
  font-size: var(--step-1);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 65ch;
}

body[data-personality="zen"] .page-header__meta {
  display: flex;
  gap: var(--space-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-muted);
}

body[data-personality="zen"] .page-header__meta strong {
  color: var(--text-primary);
  font-weight: 600;
  font-style: normal;
}

/* ── Section title ── */
body[data-personality="zen"] .section-title {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

body[data-personality="zen"] .section-title__heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}

body[data-personality="zen"] .section-title__heading em {
  font-style: normal;
  color: var(--amber);
}

body[data-personality="zen"] .section-title__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

body[data-personality="zen"] .section-title__action {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--amber);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ── Buttons ── */
body[data-personality="zen"] .btn {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  padding: 0.5em 1.4em;
  transition: all 320ms cubic-bezier(.2,.7,.2,1);
}

body[data-personality="zen"] .btn--primary {
  background: var(--text-primary);
  color: var(--bg-base);
  border-color: var(--text-primary);
}
body[data-personality="zen"] .btn--primary:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg-base);
}

body[data-personality="zen"] .btn--ghost {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}
body[data-personality="zen"] .btn--ghost:hover {
  border-color: var(--text-primary);
}

body[data-personality="zen"] .btn--secondary {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

body[data-personality="zen"] .btn--sm { padding: 0.35em 1em; font-size: 0.92rem; }

/* ── Zen-scoped: task-row geometry overrides ─────────────────── */
body[data-personality="zen"] .task-row {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: var(--space-4) var(--space-2);
  transition: background var(--ease);
}
body[data-personality="zen"] .task-row:hover {
  background: color-mix(in srgb, var(--amber) 3%, transparent);
}
body[data-personality="zen"] .task-row[data-state="completed"] { opacity: 0.55; }
body[data-personality="zen"] .task-row__check {
  width: 18px; height: 18px;
  border-width: 1px;
  font-size: 10px;
}
body[data-personality="zen"] .task-row__check:hover {
  border-color: var(--amber); color: var(--amber);
}
body[data-personality="zen"] .task-row[data-state="completed"] .task-row__check {
  background: var(--amber); border-color: var(--amber); color: var(--bg-base);
}
body[data-personality="zen"] .task-row__body { gap: 3px; }
body[data-personality="zen"] .task-row-title {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 400; letter-spacing: 0;
}
body[data-personality="zen"] .task-row__meta {
  font-family: var(--font-serif);
  font-style: italic; font-size: 0.85rem;
}

/* ── Context badges ── */
body[data-personality="zen"] .context-badge {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: 0;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Segment control ── */
body[data-personality="zen"] .segment-control {
  display: inline-flex;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  gap: var(--space-5);
}

body[data-personality="zen"] .segment-control__item {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.6em 0;
  margin-bottom: -1px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--ease);
}
body[data-personality="zen"] .segment-control__item:hover { color: var(--text-primary); }
body[data-personality="zen"] .segment-control__item[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--amber);
  box-shadow: none;
}

/* ── Toolbar ── */
body[data-personality="zen"] .b-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  flex-wrap: wrap;
}

body[data-personality="zen"] .b-toolbar .form-input,
body[data-personality="zen"] .b-toolbar .form-select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: 0.4em 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-primary);
}

body[data-personality="zen"] .b-toolbar .form-input:focus,
body[data-personality="zen"] .b-toolbar .form-select:focus {
  outline: none;
  border-bottom-color: var(--amber);
}

/* ── Form inputs — journal-line style ── */
body[data-personality="zen"] .form-input,
body[data-personality="zen"] .form-select {
  font-family: var(--font-serif);
  font-size: 1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: 0.55em 0;
  color: var(--text-primary);
  transition: border-color var(--ease), background var(--ease);
}
body[data-personality="zen"] .form-input:focus,
body[data-personality="zen"] .form-select:focus {
  outline: none;
  border-bottom-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 3%, transparent);
}
body[data-personality="zen"] .form-input::placeholder {
  font-style: italic;
  color: var(--text-muted);
}
body[data-personality="zen"] textarea.form-input {
  padding: 0.55em 0;
  line-height: 1.7;
}

/* Title-scale inputs get a serif display treatment */
body[data-personality="zen"] input[name="description"].form-input,
body[data-personality="zen"] input[name="title"].form-input {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 0.3em 0;
}

/* ── b-form layout ── */
body[data-personality="zen"] .b-form {
  background: transparent;
  border: none;
  border-radius: 0;
}

body[data-personality="zen"] .b-form__group {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-8);
  align-items: start;
}

body[data-personality="zen"] .b-form__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: calc(0.55em) 0;
}

body[data-personality="zen"] .b-form__legend label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-primary);
}

body[data-personality="zen"] .b-form__legend-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

body[data-personality="zen"] .b-form__field { display: flex; flex-direction: column; gap: var(--space-3); }

body[data-personality="zen"] .b-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  background: transparent;
  border-top: 1px solid var(--border);
  gap: var(--space-3);
  flex-wrap: wrap;
}

body[data-personality="zen"] .b-form__footer-meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-muted);
}

body[data-personality="zen"] .b-form__rail-card {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-4) var(--space-5);
}

body[data-personality="zen"] .b-form__rail-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}

/* ── Chips ── */
body[data-personality="zen"] .b-chip {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: 0.2em 0.4em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--ease);
}
body[data-personality="zen"] .b-chip:hover { color: var(--text-primary); border-bottom-color: var(--amber); }
body[data-personality="zen"] .b-chip[aria-pressed="true"],
body[data-personality="zen"] .b-chip[aria-current="page"] {
  color: var(--amber);
  border-bottom-color: var(--amber);
  background: transparent;
}

/* ── Priority radio cards ── */
body[data-personality="zen"] .b-prio {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
body[data-personality="zen"] .b-prio__opt {
  flex: 1;
  min-width: 4rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: var(--space-1) 0;
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body[data-personality="zen"] .b-prio__opt::before { display: none; }
body[data-personality="zen"] .b-prio__opt[aria-pressed="true"] {
  border-bottom-color: var(--amber);
}
body[data-personality="zen"] .b-prio__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-primary);
  padding-left: 0;
}
body[data-personality="zen"] .b-prio__opt[aria-pressed="true"] .b-prio__label { color: var(--amber); }
body[data-personality="zen"] .b-prio__hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-left: 0;
  letter-spacing: 0;
}

/* ── Context pick ── */
body[data-personality="zen"] .b-ctx-pick {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
body[data-personality="zen"] .b-ctx-pick__chip {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: 0.15em 0.3em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--ease);
}
body[data-personality="zen"] .b-ctx-pick__chip::before { color: var(--amber); }
body[data-personality="zen"] .b-ctx-pick__chip[aria-pressed="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--amber);
  background: transparent;
}

/* ── Objective pick ── */
body[data-personality="zen"] .b-obj-pick__row {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-2) 0;
  gap: var(--space-3);
  min-height: auto;
}
body[data-personality="zen"] .b-obj-pick__row:has(input:checked) {
  border-bottom-color: var(--amber);
}
body[data-personality="zen"] .b-obj-pick__check {
  border-radius: 50%;
  border-color: var(--border-light);
}
body[data-personality="zen"] .b-obj-pick__row:has(input:checked) .b-obj-pick__check {
  background: var(--amber);
  border-color: var(--amber);
}
body[data-personality="zen"] .b-obj-pick__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
}
body[data-personality="zen"] .b-obj-pick__vision {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* ── State pick ── */
body[data-personality="zen"] .b-state-pick {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
body[data-personality="zen"] .b-state-pick__opt {
  flex: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: var(--space-1) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  min-height: auto;
}
body[data-personality="zen"] .b-state-pick__opt[aria-pressed="true"][data-state="active"]     { border-bottom-color: var(--green); color: var(--green); }
body[data-personality="zen"] .b-state-pick__opt[aria-pressed="true"][data-state="pause"]      { border-bottom-color: var(--priority-medium); color: var(--priority-medium); }
body[data-personality="zen"] .b-state-pick__opt[aria-pressed="true"][data-state="terminated"] { border-bottom-color: var(--text-muted); }

/* ── KPI cells ── */
body[data-personality="zen"] .b-kpi-cell {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-5) 0;
}
body[data-personality="zen"] .b-kpi-cell:hover { border-bottom-color: var(--amber); }
body[data-personality="zen"] .b-kpi-cell__label {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
}
body[data-personality="zen"] .b-kpi-cell__value {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
body[data-personality="zen"] .b-kpi-cell__delta {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
body[data-personality="zen"] .b-kpi-cell[data-emphasis="hero"] {
  background: transparent;
  border-left: 2px solid var(--amber);
  padding-left: var(--space-5);
}

/* ── Project cards ── */
body[data-personality="zen"] .b-project-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-6) 0;
}
body[data-personality="zen"] .b-project-card:hover {
  transform: none;
  border-bottom-color: var(--amber);
}
body[data-personality="zen"] .b-project-card__objective {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}
body[data-personality="zen"] .b-project-card__objective::before { display: none; }
body[data-personality="zen"] .b-project-card__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.01em;
}
body[data-personality="zen"] .b-project-card__desc {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.65;
}
body[data-personality="zen"] .b-project-card__next {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-1) var(--space-4);
  font-family: var(--font-serif);
  font-style: italic;
}
body[data-personality="zen"] .b-project-card__footer {
  border-top-color: var(--border);
}
body[data-personality="zen"] .b-project-card__stats {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
body[data-personality="zen"] .b-project-card__progress { height: 1px; }
body[data-personality="zen"] .b-project-card__progress-fill { background: var(--amber); }

/* ── Tabs ── */
body[data-personality="zen"] .b-tabs {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  gap: var(--space-5);
}
body[data-personality="zen"] .b-tabs button {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  padding: 0.5em 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text-muted);
  transition: all var(--ease);
}
body[data-personality="zen"] .b-tabs button[aria-selected="true"] {
  background: transparent;
  color: var(--text-primary);
  border-bottom-color: var(--amber);
}

/* ── Today band ── */
body[data-personality="zen"] .b-today {
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 0;
}
body[data-personality="zen"] .b-today__pane {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: var(--space-6) 0;
}
body[data-personality="zen"] .b-today__pane--accent {
  background: transparent;
  border-right: 1px solid var(--border);
  padding-right: var(--space-8);
}
body[data-personality="zen"] .b-today__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
}
body[data-personality="zen"] .b-today__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.8rem);
}
body[data-personality="zen"] .b-today__action {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.01em;
}

/* ── Stat row ── */
body[data-personality="zen"] .b-stat-row {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  gap: 0;
}
body[data-personality="zen"] .b-stat-row__cell {
  background: transparent;
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
}
body[data-personality="zen"] .b-stat-row__cell:last-child { border-right: none; }
body[data-personality="zen"] .b-stat-row__label {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}
body[data-personality="zen"] .b-stat-row__value {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
body[data-personality="zen"] .b-stat-row__delta {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
}

/* ── KPI cards (existing) ── */
body[data-personality="zen"] .kpi-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-5) 0;
  box-shadow: none;
}
body[data-personality="zen"] .kpi-card__label {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
body[data-personality="zen"] .kpi-card__value {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ── Modal ── */
body[data-personality="zen"] .modal-content {
  border-radius: var(--radius-md);
  border-color: var(--border);
  background: var(--bg-surface);
}
body[data-personality="zen"] .modal-header {
  border-bottom-color: var(--border);
  font-family: var(--font-serif);
  font-style: italic;
}
body[data-personality="zen"] .modal-footer {
  border-top-color: var(--border);
  background: transparent;
}

/* ── Badges ── */
body[data-personality="zen"] .badge {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  border-radius: 999px;
}

/* ── Quote card ── */
body[data-personality="zen"] .quote-card {
  background: transparent;
  border: none;
  border-left: 2px solid var(--amber);
  border-radius: 0;
  padding: var(--space-2) var(--space-5);
}

/* ── Selection highlight ── */
body[data-personality="zen"] ::selection {
  background: color-mix(in srgb, var(--amber) 20%, transparent);
  color: var(--text-primary);
}

/* ============================================================
   PERSONALITY SIGNATURE GESTURES: dashboard component overrides
   Scoped per data-personality — no new class names.
   ============================================================ */

/* ── Bold: editorial serif accents, flat rule-divided sections ── */
body[data-personality="bold"] .b-today__pane--accent {
  background-image: linear-gradient(135deg, rgba(245,185,74,.06), transparent 60%);
  border-color: rgba(245,185,74,.4);
}
body[data-personality="bold"] .b-stat-row {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
body[data-personality="bold"] .b-stat-row__value {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ── Clarity: monospace data-table, flat borders, ticker stats ── */
body[data-personality="clarity"] .b-today {
  border-radius: 0;
  border: 1px solid var(--border);
  gap: 0;
}
body[data-personality="clarity"] .b-today__pane {
  border-radius: 0;
}
body[data-personality="clarity"] .b-today__pane--accent {
  background: var(--bg-surface);
  border-color: var(--amber-dim);
}
body[data-personality="clarity"] .b-stat-row {
  border-radius: 0;
  gap: 0;
}
body[data-personality="clarity"] .b-stat-row__cell {
  border-right: 1px solid var(--border);
}
body[data-personality="clarity"] .b-stat-row__cell:last-child {
  border-right: none;
}
body[data-personality="clarity"] .b-stat-row__value {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body[data-personality="clarity"] .b-stat-row__label {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
}

/* ── Flow: radial purple gradient on accent pane, italic serif title ── */
body[data-personality="flow"] .b-today__pane--accent {
  background-image: radial-gradient(120% 100% at 0% 0%, rgba(176,138,255,.12), transparent 60%);
  border-color: rgba(176,138,255,.4);
}
body[data-personality="flow"] .b-stat-row {
  gap: var(--space-6);
}
body[data-personality="flow"] .b-stat-row__value {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body[data-personality="flow"] .b-stat-row__label {
  font-family: 'Lora', serif;
}

/* Flow: the legacy /htmx/dashboard/stats wrapper grid is no longer
   needed — the new partial emits .b-stat-row which carries its own
   4-column grid. Keep the wrapper a plain block so b-stat-row spans
   full width. */

/* ── Flow: toolbar search icon — chrome-only ──
   Positioning, padding-left clearance and pointer-events live in the
   primitives section. flow's only delta is a slightly larger icon
   (0.85rem vs base 0.8rem). flex/min-width/color match base. */
body[data-personality="flow"] .b-toolbar__search i {
  font-size: 0.85rem;
}

/* ── Stadium: uppercase labels, hard 3px shadow on stat cards ── */
body[data-personality="stadium"] .b-today__pane--accent {
  background: #0e1116;
  border-color: #0e1116;
  color: #f3f0e8;
}
body[data-personality="stadium"] .b-today__pane--accent .b-today__eyebrow,
body[data-personality="stadium"] .b-today__pane--accent .color-muted {
  color: rgba(243,240,232,.6);
}
body[data-personality="stadium"] .stat-card {
  box-shadow: var(--shadow-default);
  border-radius: 0;
}
body[data-personality="stadium"] .stat-card .stat-card__label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.62rem;
}
body[data-personality="stadium"] .stat-card .stat-card__value {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.02em;
  font-size: 2.4rem;
}
body[data-personality="stadium"] .b-stat-row {
  border-radius: 0;
  box-shadow: var(--shadow-default);
}
body[data-personality="stadium"] .b-stat-row__value {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.02em;
  font-size: 1.9rem;
}
body[data-personality="stadium"] .b-stat-row__label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
}

/* ── Forge: warm ember gradient on progress elements ──
   Reference the --amber token so the gradient tracks the dark-mode
   ember hue (#ff6a28) instead of the hardcoded light-mode #e85a18. */
body[data-personality="forge"] .b-today__pane--accent {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--amber) 18%, transparent),
    color-mix(in srgb, var(--amber) 4%, transparent) 60%,
    transparent);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}
body[data-personality="forge"] .stat-card .stat-card__value {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
}
body[data-personality="forge"] .b-stat-row__value {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
}
body[data-personality="forge"] .kpi-card .kpi-card__bar-fill {
  background: linear-gradient(90deg, #ffb547, #e85a18);
}

/* ── Trophy: brass top-border dividers on cards ── */
body[data-personality="trophy"] .b-today__pane {
  border-top: 2px solid var(--trophy-brass);
}
body[data-personality="trophy"] .stat-card {
  border-top: 2px solid var(--trophy-brass);
}
body[data-personality="trophy"] .b-stat-row__cell {
  border-right: 1px solid var(--trophy-brass);
}
body[data-personality="trophy"] .b-stat-row__cell:last-child {
  border-right: none;
}
body[data-personality="trophy"] .b-stat-row__value {
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.01em;
}
body[data-personality="trophy"] .b-stat-row__label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
  color: var(--trophy-brass);
}
body[data-personality="trophy"] .kpi-card {
  border-top: 2px solid var(--trophy-brass);
}
body[data-personality="trophy"] .kpi-card .kpi-card__bar-fill {
  background: linear-gradient(90deg, var(--trophy-brass), var(--amber));
}

/* Trophy: Anton (used as --font-serif) has no italic glyphs. Templates
   like /tasks "Inbox to <em>action</em>." render the emphasis with a
   synthesized oblique on a display font, which looks broken. Restyle
   the em as brass-coloured upright Anton for a placard-engraving feel. */
body[data-personality="trophy"] .page-header__title em {
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--trophy-brass);
  letter-spacing: 0.02em;
}

/* Trophy: legacy wrapper grid removed — the new partial renders .b-stat-row
   which carries its own 4-column layout. */

/* ── Harmony: hairline rules instead of card borders, italic serif ── */
body[data-personality="harmony"] .b-today {
  border: none;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  gap: 0;
}
body[data-personality="harmony"] .b-today__pane {
  border: none;
  border-right: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
}
body[data-personality="harmony"] .b-today__pane:last-child {
  border-right: none;
}
body[data-personality="harmony"] .b-today__pane--accent {
  border-top: 1px solid var(--amber-dim);
  background-color: var(--bg-surface);
}
body[data-personality="harmony"] .b-stat-row {
  border: none;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  gap: 0;
}
body[data-personality="harmony"] .b-stat-row__cell {
  border-right: 1px solid var(--border-light);
  background: transparent;
}
body[data-personality="harmony"] .b-stat-row__cell:last-child {
  border-right: none;
}
body[data-personality="harmony"] .b-stat-row__value {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body[data-personality="harmony"] .b-stat-row__label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* Harmony: legacy stat-card wrapper rules removed — the new partial renders
   .b-stat-row whose hairline harmony overrides live in the .b-stat-row
   harmony block above. */

/* ============================================================
   MOMENTUM SUB-THEMES: stadium / forge / trophy / harmony
   Modal, form, chip, priority, and button overrides.
   ============================================================ */

/* ── Shared: modal-header display font + footer background ── */
body[data-personality="stadium"] .modal-header h3,
body[data-personality="forge"] .modal-header h3,
body[data-personality="trophy"] .modal-header h3,
body[data-personality="harmony"] .modal-header h3 {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  letter-spacing: -0.01em;
  line-height: 1;
}

body[data-personality="stadium"] .modal-footer,
body[data-personality="forge"] .modal-footer,
body[data-personality="trophy"] .modal-footer,
body[data-personality="harmony"] .modal-footer {
  background: var(--bg-base);
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}

/* ── Shared: field labels — mono uppercase with right-aligned hint ── */
body[data-personality="stadium"] .b-form__legend label,
body[data-personality="forge"] .b-form__legend label,
body[data-personality="trophy"] .b-form__legend label,
body[data-personality="harmony"] .b-form__legend label {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

body[data-personality="stadium"] .b-form__legend-hint,
body[data-personality="forge"] .b-form__legend-hint,
body[data-personality="trophy"] .b-form__legend-hint,
body[data-personality="harmony"] .b-form__legend-hint {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ── Shared: b-prio — segmented control with color dots ── */
.b-prio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  background: var(--bg-elevated);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}

.b-prio__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-radius: calc(var(--radius-sm) - 1px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}

.b-prio__opt[aria-pressed="true"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.b-prio__opt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--text-muted) 50%, transparent);
}

.b-prio__opt[data-prio="high"]::before { background: var(--red); }
.b-prio__opt[data-prio="medium"]::before { background: var(--priority-medium); }
.b-prio__opt[data-prio="low"]::before { background: var(--green); }

.b-prio__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Shared: b-chips (quick-pick pills) ── */
body[data-personality="stadium"] .b-chip,
body[data-personality="forge"] .b-chip,
body[data-personality="trophy"] .b-chip,
body[data-personality="harmony"] .b-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2em var(--space-2);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: all var(--ease);
}

body[data-personality="stadium"] .b-chip:hover,
body[data-personality="forge"] .b-chip:hover,
body[data-personality="trophy"] .b-chip:hover,
body[data-personality="harmony"] .b-chip:hover {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}

body[data-personality="stadium"] .b-chip[aria-pressed="true"],
body[data-personality="stadium"] .b-chip[aria-current="page"],
body[data-personality="forge"] .b-chip[aria-pressed="true"],
body[data-personality="forge"] .b-chip[aria-current="page"],
body[data-personality="trophy"] .b-chip[aria-pressed="true"],
body[data-personality="trophy"] .b-chip[aria-current="page"],
body[data-personality="harmony"] .b-chip[aria-pressed="true"],
body[data-personality="harmony"] .b-chip[aria-current="page"] {
  background: var(--amber);
  color: #fff;
  border-color: color-mix(in srgb, var(--amber) 80%, #000);
}

/* ── STADIUM: scoreboard chrome, hard shadows ── */
body[data-personality="stadium"] .modal-content {
  border-radius: var(--radius-md);
  border: 2px solid var(--text-primary);
  box-shadow: 6px 6px 0 var(--text-primary);
}

body[data-personality="stadium"] .modal-header {
  border-bottom: 2px solid var(--text-primary);
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 12px, transparent 12px 24px),
    var(--bg-surface);
}

body[data-personality="stadium"] .modal-header h3 { text-transform: uppercase; }

body[data-personality="stadium"] .form-input,
body[data-personality="stadium"] .form-select {
  border-color: color-mix(in srgb, var(--text-primary) 25%, transparent);
  border-radius: var(--radius-sm);
}

body[data-personality="stadium"] .form-input:focus,
body[data-personality="stadium"] .form-select:focus {
  border-color: var(--amber);
  box-shadow: 3px 3px 0 var(--text-primary);
}

body[data-personality="stadium"] .btn {
  border-radius: var(--radius-sm);
}
body[data-personality="stadium"] .btn--primary {
  border: 2px solid var(--text-primary);
  box-shadow: 3px 3px 0 var(--text-primary);
}
body[data-personality="stadium"] .btn--primary:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--text-primary); }

body[data-personality="stadium"] .b-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block: var(--space-4);
}

/* Stadium: toolbar search — chrome-only. Positioning + padding-left
   live in the primitives section. Stadium's deltas: a narrower
   flex-basis (12rem vs base 200px) and width:100% on the input. */
body[data-personality="stadium"] .b-toolbar__search {
  flex: 1 1 12rem;
  min-width: 12rem;
}
body[data-personality="stadium"] .b-toolbar__search .form-input {
  width: 100%;
}

body[data-personality="stadium"] .b-toolbar .form-input,
body[data-personality="stadium"] .b-toolbar .form-select {
  width: auto;
  min-width: 10rem;
}

body[data-personality="stadium"] .b-chip {
  border-radius: var(--radius-sm);
}

body[data-personality="stadium"] .b-chip[aria-pressed="true"],
body[data-personality="stadium"] .b-chip[aria-current="page"] {
  border: 2px solid var(--text-primary);
  box-shadow: 2px 2px 0 var(--text-primary);
  border-radius: var(--radius-sm);
}

body[data-personality="stadium"] .b-prio__opt[aria-pressed="true"][data-prio="high"] {
  background: color-mix(in srgb, var(--red) 12%, var(--bg-surface));
  color: var(--red);
}

/* ── FORGE: ember glow, slab heads ── */
body[data-personality="forge"] .modal-content {
  border-radius: var(--radius-md);
  border-top: 4px solid var(--amber);
}

body[data-personality="forge"] .modal-header h3 { text-transform: uppercase; font-weight: 900; }

body[data-personality="forge"] .form-input,
body[data-personality="forge"] .form-select {
  background: var(--bg-elevated);
  border-color: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

body[data-personality="forge"] .form-input:focus,
body[data-personality="forge"] .form-select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
  background: var(--bg-surface);
}

body[data-personality="forge"] .btn--primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--amber) 80%, #fff) 0%, var(--amber) 60%, color-mix(in srgb, var(--amber) 70%, #000) 100%);
  background-color: var(--amber);
  box-shadow: 0 6px 14px var(--amber-glow);
  color: #fff;
}

body[data-personality="forge"] .b-prio__opt[aria-pressed="true"][data-prio="high"] {
  background: color-mix(in srgb, var(--red) 12%, var(--bg-surface));
  color: var(--red);
}

/* ── Forge-scoped: b-toolbar (filter band) — position search icon inside input
   The default .b-toolbar__search has no positioning rules (only 'bold' and
   'stadium' define them), so the magnifying glass <i> on /tasks renders
   above the search input as an orphan icon under forge. */
body[data-personality="forge"] .b-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
/* Forge: toolbar search — all primitives + chrome already covered by
   base and the primitives section. Forge's only toolbar-level delta is
   .b-toolbar padding (var(--space-3) var(--space-4) vs base
   var(--space-4)), retained in the .b-toolbar block above. */

/* ── TROPHY: brass accents, oxblood primary ── */
body[data-personality="trophy"] .modal-content {
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--trophy-brass) 35%, transparent);
  border-top: 4px solid var(--trophy-brass);
  border-bottom: 4px solid var(--trophy-brass);
}

body[data-personality="trophy"] .modal-header {
  border-bottom: 1px solid color-mix(in srgb, var(--trophy-brass) 30%, transparent);
}

body[data-personality="trophy"] .modal-header h3 { text-transform: uppercase; letter-spacing: 0.02em; }

body[data-personality="trophy"] .modal-footer {
  border-top: 1px solid color-mix(in srgb, var(--trophy-brass) 30%, transparent);
  background: var(--bg-elevated);
}

body[data-personality="trophy"] .form-input,
body[data-personality="trophy"] .form-select {
  border-color: color-mix(in srgb, var(--trophy-brass) 30%, transparent);
}

body[data-personality="trophy"] .form-input:focus,
body[data-personality="trophy"] .form-select:focus {
  border-color: var(--trophy-brass);
  box-shadow: 0 0 0 1px var(--trophy-brass);
}

body[data-personality="trophy"] .b-chip[aria-pressed="true"],
body[data-personality="trophy"] .b-chip[aria-current="page"] {
  background: var(--trophy-brass);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--trophy-brass) 80%, #000);
}

body[data-personality="trophy"] .b-prio__opt[aria-pressed="true"][data-prio="high"] {
  background: color-mix(in srgb, var(--red) 12%, var(--bg-surface));
  color: var(--red);
}

/* ── HARMONY: hairline inputs, serif, no radius, generous air ── */
body[data-personality="harmony"] .modal-content {
  border-radius: 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.14);
}

body[data-personality="harmony"] .modal-header {
  padding: var(--space-10) var(--space-8) var(--space-6);
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

body[data-personality="harmony"] .modal-close {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-radius: 0;
}

body[data-personality="harmony"] .modal-body { padding: var(--space-8) var(--space-8) var(--space-4); }
body[data-personality="harmony"] .modal-footer { padding: var(--space-6) var(--space-8) var(--space-8); }

body[data-personality="harmony"] .form-input,
body[data-personality="harmony"] .form-select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 16%, transparent);
  border-radius: 0;
  padding-inline: 0;
}

body[data-personality="harmony"] .form-input:focus,
body[data-personality="harmony"] .form-select:focus {
  background: transparent;
  border-bottom-color: var(--amber);
  box-shadow: 0 1px 0 0 var(--amber);
}

body[data-personality="harmony"] .b-prio {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-radius: 0;
  padding: 0;
  gap: 0;
}

body[data-personality="harmony"] .b-prio__opt {
  border-radius: 0;
  font-weight: 500;
  padding: var(--space-3) var(--space-2);
}

body[data-personality="harmony"] .b-prio__opt + .b-prio__opt {
  border-left: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

body[data-personality="harmony"] .b-prio__opt[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--bg-base);
  box-shadow: none;
}

body[data-personality="harmony"] .b-prio__opt[aria-pressed="true"]::before { background: var(--bg-base); }

body[data-personality="harmony"] .b-prio__opt[aria-pressed="true"][data-prio="high"] {
  background: var(--red);
  color: var(--bg-surface);
}

body[data-personality="harmony"] .b-chip {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
}

body[data-personality="harmony"] .b-chip[aria-pressed="true"] {
  background: transparent;
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}

body[data-personality="harmony"] .btn--primary {
  border-radius: 0;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

/* ── HARMONY: nav vertical breathing room (design: 22px top/bottom) ── */
body[data-personality="harmony"] .site-nav {
  padding-block: var(--space-6);
  height: auto;
}

/* ── HARMONY: task/card rows — hairline list, not boxed cards ── */
body[data-personality="harmony"] .card.box {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: 0;
  padding: var(--space-3) var(--space-1);
  box-shadow: none;
}

body[data-personality="harmony"] .card.box:first-child {
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}

body[data-personality="harmony"] .card.box:hover {
  background: var(--bg-elevated);
}

body[data-personality="harmony"] .card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
}

body[data-personality="harmony"] .btn--primary:hover { transform: none; }

body[data-personality="harmony"] .btn--secondary {
  border-radius: 0;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

body[data-personality="harmony"] .btn--secondary:hover { transform: none; }

/* Toggleable context chips — checkbox hidden, label acts as toggle. */
.b-chip--toggle {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.b-chip__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.b-chip--toggle:has(.b-chip__input:checked) {
  background: var(--amber);
  color: var(--bg-base);
  border-color: var(--amber);
}

/* ============================================================
   Axis slider — neutral track, no directional color bias
   ============================================================ */
.axis-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-sm);
  background: var(--border);
  outline: none;
}

.axis-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-sm);
  background: var(--border);
}

/* ── KPI all-page: override personality-specific kpi-card styles so every
   card is always visible regardless of which theme is active.
   This selector wins over body[data-personality="*"] .kpi-card because it
   appears later in the cascade with equal specificity. ─────────────────── */
.kpi-all-page .kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: none;
}

/* Stadium: restore hard scoreboard shadow on KPI all-page cards.
   The .kpi-all-page selector above wipes box-shadow universally; for
   stadium the design demands a 3px hard shadow on every surface to
   keep the scoreboard energy. */
body[data-personality="stadium"] .kpi-all-page .kpi-card {
  box-shadow: var(--shadow-default);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-sm);
}

.axis-slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-sm);
  background: var(--border);
}

.axis-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px; /* center thumb on 4px track: (4px - 18px) / 2 */
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--amber);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.axis-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--amber);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ============================================================
   ZEN — page-header eyebrow glitch fix.
   Several page templates render the eyebrow as a raw
   <span class="uppercase text-sm"> inside .page-header (vision,
   objectives, projects, dashboard, etc.). The existing
   body[data-personality="zen"] .page-header__eyebrow rule does not
   match, so the eyebrow stays uppercase sans-serif against the
   surrounding zen serif voice. Style the bare utility spans too.
   ============================================================ */
body[data-personality="zen"] .page-header > .uppercase,
body[data-personality="zen"] .page-header .uppercase.text-sm,
body[data-personality="zen"] .page-header .text-xs.uppercase {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* Profile indicator banner ("View: analytical") sits above the primary
   KPI widget and uses the same uppercase utility. */
body[data-personality="zen"] .profile-indicator .uppercase {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

/* Section heading variant — <h6 class="uppercase text-sm color-muted">. */
body[data-personality="zen"] h6.uppercase {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--text-muted);
}

/* ============================================================
   ZEN — dashboard stat-card overrides.
   /htmx/dashboard/stats renders three .stat-card elements (PROJECTS,
   TASKS, COMPLETION). The base .stat-card style is the clarity look —
   monospace value, uppercase tracked label, amber-glow icon tile,
   rounded surface card. Under zen this clashes with the surrounding
   serif-italic, flat journal-row aesthetic and the icon background
   reads as a hard amber square instead of a soft accent.
   ============================================================ */
body[data-personality="zen"] .stat-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-5) 0;
  gap: var(--space-3);
}
body[data-personality="zen"] .stat-card:hover {
  border-bottom-color: var(--amber);
}
body[data-personality="zen"] .stat-card__icon {
  background: transparent;
  border: none;
  color: var(--amber);
  width: auto;
  height: auto;
}
body[data-personality="zen"] .stat-card__value,
body[data-personality="zen"] .stat-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
body[data-personality="zen"] .stat-card__value sup,
body[data-personality="zen"] .stat-card__title sup {
  font-family: var(--font-serif);
  font-style: italic;
}
body[data-personality="zen"] .stat-card__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
body[data-personality="zen"] .stat-card__trend {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
}
body[data-personality="zen"] .stat-card[data-featured] {
  border-left: 2px solid var(--amber);
  padding-left: var(--space-5);
}

/* ============================================================
   ZEN — quote-card author + empty-state typography fixes.
   .quote-author has font-mono + uppercase + letter-spacing in its
   base rule, so "— VICTOR HUGO" reads as a clarity ticker tag against
   the surrounding zen italic serif quote text. Empty-state boxes
   ("Welcome to Asheeve", "No vision yet", "No tasks found") also fall
   through to default sans-serif headings.
   ============================================================ */
body[data-personality="zen"] .quote-author {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
}
body[data-personality="zen"] .quote-text,
body[data-personality="zen"] .b-today__quote-author {
  font-family: var(--font-serif);
}

/* Empty-state boxes — small/h4/h5/h6 inside .box use default sans-serif. */
body[data-personality="zen"] .box h4,
body[data-personality="zen"] .box h5,
body[data-personality="zen"] .box h6 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body[data-personality="zen"] .box small,
body[data-personality="zen"] .box .color-muted,
body[data-personality="zen"] .box p {
  font-family: var(--font-serif);
}

/* Empty-state titles rendered outside .box (tasks page "No tasks found",
   vision/objectives "No vision yet"). */
body[data-personality="zen"] .empty-state h3,
body[data-personality="zen"] .empty-state p {
  font-family: var(--font-serif);
}

/* ============================================================
   ZEN — explorer/momentum dashboard widget overrides.
   Several archetype-specific widgets (mood entry, fuel gauge,
   now-card label, ⌘N keyboard badge) inherit clarity/momentum
   defaults. Wrap them in the zen serif voice and strip uppercase
   tracked letterforms.
   ============================================================ */
body[data-personality="zen"] .mood-entry {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-6) 0;
}
body[data-personality="zen"] .mood-entry__question {
  font-family: var(--font-serif);
  font-style: italic;
  text-align: center;
}
body[data-personality="zen"] .mood-entry__option {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

body[data-personality="zen"] .fuel-gauge__label {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

body[data-personality="zen"] .now-card__label {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

body[data-personality="zen"] .kbd-badge {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0;
}

/* ============================================================
   ZEN — b-form__group responsive collapse.
   The zen b-form__group uses a fixed 13rem | 1fr grid for the
   label rail + field column. On narrow viewports (modal forms on
   phones, embedded forms in side rails) the label rail steals too
   much horizontal space and the field column becomes unusable.
   Collapse to a single column under 700px so modal forms stay
   legible without affecting the desktop two-column journal layout.
   ============================================================ */
@media (max-width: 700px) {
  body[data-personality="zen"] .b-form__group {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}


/* ============================================================
   PRIMITIVES (ADR-004)
   Structural invariants no personality may override. Declared with
   !important so they outrank any personality scope that
   accidentally redeclares them. The lint check (make audit-css)
   catches such redeclarations at PR review.

   Populated by future block-migration PRs:
   - PR 3: .b-toolbar__search positioning + .form-input padding-left
   - PR 4: .stat-card overflow/min-width sanity
   - PR 5: .page-header__eyebrow icon-hide for personalities with
           an ::before marker
   - PR 6: .b-form__group < 700px single-column collapse
   ============================================================ */

/* ── .b-toolbar__search (filter-band search wrapper) ──
   The icon must sit inside the input. position:relative on the
   wrapper anchors the absolutely-positioned icon and the input's
   left-padding clears it. Was historically redeclared by every
   personality that happened to use a search box — and forgotten by
   several others, producing the 5× regression class fixed across
   2026-05-15..22. Locking it here as a primitive eliminates the
   class. */
.b-toolbar__search { position: relative !important; }
.b-toolbar__search i {
  position: absolute !important;
  left: var(--space-3) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
.b-toolbar__search .form-input { padding-left: 2.2rem !important; }

/* ── .stat-card — overflow / shrink sanity ──
   .stat-card is rendered as a child of a grid/flex container (the
   dashboard stats row). Default `min-width: auto` is computed from
   the intrinsic content size, which prevents the card from shrinking
   below its longest line — overflowing the column on narrow viewports
   or when multiple cards share a row. min-width:0 lets the card honour
   the column it was placed in. Was historically masked by per-
   personality container rules; locking the primitive here means new
   personalities don't have to think about it. */
.stat-card { min-width: 0 !important; }

/* ── .page-header__eyebrow — anti-double-marker ──
   Personalities that draw their own eyebrow marker via ::before (an
   amber dot, hairline rule, brass underline, etc.) collide with the
   shared FA icon embedded in page templates, producing two markers
   side-by-side. Hide the FA icon for every such personality. Covers
   both nested (.page-header__eyebrow > i.fas) and flat
   (.page-header > i.fas) template patterns.

   This selector list extends as new personalities add ::before
   markers. Bold's fix shipped twice historically (1a60515 + be26768)
   because the flat-markup case was missed first time. Zen had the
   identical latent bug — never fixed before because the rule was
   bold-scoped. */
body[data-personality="bold"] .page-header__eyebrow > i.fas,
body[data-personality="bold"] .page-header > i.fas,
body[data-personality="zen"] .page-header__eyebrow > i.fas,
body[data-personality="zen"] .page-header > i.fas {
  display: none !important;
}

/* ── .b-form__group — narrow viewport single-column collapse ──
   Personalities that lay out b-form__group as a two-column grid
   (label rail | field) become unusable on phones: the rail eats most
   of the modal width and inputs shrink below a typable size. Below
   700px, force a single column.

   No-op for personalities that use display:block (they don't grid in
   the first place). Bold and zen both shipped their own variant of
   this rule before — keep theirs in place but rely on the primitive
   so any future grid-using personality inherits the collapse. */
@media (max-width: 700px) {
  .b-form__group { grid-template-columns: 1fr !important; }
}

/* ============================================================
   WORKSPACE SWITCHER
   Minimal badge near the brand + section inside the user menu.
   ============================================================ */
.workspace-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-left: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, var(--bg-surface));
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  max-width: 12rem;
}

.workspace-badge:hover {
  color: var(--text-primary);
  border-color: var(--amber);
}

.workspace-badge__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-menu__section-label {
  padding: var(--space-2) var(--space-4);
  font-size: 0.65rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.7;
}

.nav-user-menu__divider,
.nav-workspace-menu__divider {
  height: 1px;
  background: var(--bg-surface);
  margin: var(--space-2) 0;
}

.nav-user-menu__workspace.is-active,
.nav-workspace-menu__workspace.is-active {
  color: var(--text-primary);
}

.nav-user-menu__check,
.nav-workspace-menu__check {
  margin-left: auto;
  color: var(--amber);
}

.hamburger-menu__section-label {
  padding: var(--space-2) var(--space-4);
  font-size: 0.65rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Mirrors the desktop nav-user-menu submenu pattern inside the mobile drawer. */
.hamburger-menu__group { width: 100%; }
.hamburger-menu__group-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans);
  transition: color var(--ease), background var(--ease);
}
.hamburger-menu__group-summary::-webkit-details-marker { display: none; }
.hamburger-menu__group-summary:hover { color: var(--text-primary); background: var(--bg-elevated); }
.hamburger-menu__group-chev {
  margin-left: auto;
  transition: transform var(--ease);
  font-size: 0.7rem;
}
.hamburger-menu__group[open] > .hamburger-menu__group-summary .hamburger-menu__group-chev {
  transform: rotate(180deg);
}
.hamburger-menu__group-items {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-3);
}

.hamburger-menu__workspace.is-active {
  color: var(--text-primary);
}

.hamburger-menu__check {
  margin-left: auto;
  color: var(--amber);
}


/* ── goals-tree — workspace-scoped Vision/Objective/Project tree ───── */
/* Uses native <details>/<summary> for expand/collapse; the chevron       */
/* rotates via the [open] selector — no JS needed for the disclosure.    */
/* Indent steps from the design-system spacing scale: 24px desktop,      */
/* 8px mobile (the doc's mobile guidance for tree-readable indent).      */
.goals-tree { list-style: none; }
.goals-tree__node {
  border: none;
  background: transparent;
}
.goals-tree__node summary {
  list-style: none;
  cursor: pointer;
}
.goals-tree__node summary::-webkit-details-marker { display: none; }

.goals-tree__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  min-height: 2.25rem;
}
.goals-tree__row--description {
  padding-left: var(--space-6);
  padding-top: 0;
  padding-bottom: var(--space-2);
  font-size: var(--text-sm, 0.875rem);
}
.goals-tree__row--empty {
  padding-left: var(--space-6);
  padding-top: var(--space-1);
}

.goals-tree__chevron {
  width: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.goals-tree__node[open] > summary .goals-tree__chevron {
  transform: rotate(0deg);
}
.goals-tree__node:not([open]) > summary .goals-tree__chevron {
  transform: rotate(-90deg);
}
/* Vision-level chevron defaults to "down" already (node opens by default). */
.goals-tree__node--vision[open] > summary .fa-chevron-down.goals-tree__chevron,
.goals-tree__node--objective[open] > summary .fa-chevron-right.goals-tree__chevron {
  transform: rotate(0deg);
}

.goals-tree__icon {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  color: var(--text-muted);
}
.goals-tree__icon--vision { color: var(--amber); font-size: 1.1rem; }
.goals-tree__icon--objective { color: var(--accent, var(--amber)); }
.goals-tree__icon--project { color: var(--text-secondary); }
.goals-tree__icon--description { color: var(--text-muted); opacity: 0.6; }

.goals-tree__title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}
.goals-tree__row--vision .goals-tree__title {
  font-size: var(--step-1, 1.125rem);
  font-weight: 600;
}
.goals-tree__row--objective .goals-tree__title {
  font-size: 1rem;
}
a.goals-tree__title:hover { color: var(--amber); }

/* Title-as-button (Q3): the title row delegates editing to a button     */
/* element so click events do not bubble to <summary> and toggle the    */
/* parent <details>. The button keeps the visual weight of text — no    */
/* background, no border, no padding — and adopts a left-aligned text   */
/* flex container so wrapping mirrors a plain <span>. Hover surfaces a  */
/* subtle amber underline so the affordance reads as "this opens the    */
/* editor" without shouting.                                             */
.goals-tree__title--edit {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.goals-tree__title--edit:hover {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--amber) 50%, transparent);
  text-underline-offset: 0.2em;
}
.goals-tree__title--edit:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inline + Add at the end of each open list. Lower visual weight than  */
/* an entity row so the existing children remain the eye's first stop.   */
.goals-tree__row--add {
  padding: var(--space-1) 0;
}
.goals-tree__add {
  opacity: 0.7;
}
.goals-tree__add:hover,
.goals-tree__add:focus-visible {
  opacity: 1;
}

.goals-tree__badges {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* Hide the collapsed badges when the parent <details> is open — children */
/* are visible inline, no need to summarize. */
.goals-tree__node[open] > summary .goals-tree__badges[data-when="collapsed"] {
  display: none;
}

.goals-tree__children {
  padding-left: var(--space-6);
  border-left: 1px solid var(--border);
  margin-left: 0.6rem;
}

/* b-chip variants for the tree badges. The base .b-chip already provides */
/* shape, font, padding; the variant adds an icon-color hint. */
.b-chip--objective { color: var(--accent, var(--amber)); }
.b-chip--project   { color: var(--text-secondary); }
.b-chip--task      { color: var(--text-secondary); text-decoration: none; }
.b-chip--task:hover { color: var(--amber); }

/* Health bands (P8.4 populates these via server-side rollup). Tokens   */
/* --green / --priority-medium / --red all exist in both light + dark   */
/* theme scopes; using them keeps the bands theme-aware without raw     */
/* hex literals (ADR-013 token contract).                               */
.b-chip--ok        { border-color: var(--green); color: var(--green); }
.b-chip--watch     { border-color: var(--priority-medium); color: var(--priority-medium); }
.b-chip--drifting  { border-color: var(--red); color: var(--red); }

/* Mobile: tighter indent for the tree to stay readable.                */
/* 640 = App compact shell breakpoint (ADR-013 allowlist).              */
@media (max-width: 640px) {
  .goals-tree__children { padding-left: var(--space-2); margin-left: 0.4rem; }
  .goals-tree__row--description,
  .goals-tree__row--empty { padding-left: var(--space-2); }
  .goals-tree__row {
    flex-wrap: wrap;
  }
  .goals-tree__badges {
    flex-basis: 100%;
    padding-left: 2rem;
  }
}

/* ── signals-hero — top-3 actionable signal cards (Phase 3) ────────── */
/* Severity-banded left border keeps the card scannable without a chip:  */
/* the card IS the signal, the band IS the verdict.                     */
.signal-card {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-md, 6px);
}
.signal-card--ok        { border-left-color: var(--green); }
.signal-card--watch     { border-left-color: var(--priority-medium); }
.signal-card--drifting  { border-left-color: var(--red); }

.signal-card__title {
  font-size: var(--step-1, 1.125rem);
  font-weight: 600;
  margin: 0;
}
.signal-card__desc {
  font-size: var(--text-sm, 0.875rem);
  margin: 0;
  max-width: 60ch;
}
.signal-card__cta { flex-shrink: 0; }

/* "See all diagnostics" disclosure — wraps the existing KPI grid so    */
/* power users keep the full view in one click without forcing it on   */
/* first-time visitors.                                                 */
.signals-diagnostics summary { list-style: none; }
.signals-diagnostics summary::-webkit-details-marker { display: none; }
.signals-diagnostics[open] > summary .signals-diagnostics__chev {
  transform: rotate(90deg);
}
.signals-diagnostics__chev { transition: transform 0.15s ease; }

@media (max-width: 640px) {
  .signal-card { flex-direction: column; align-items: stretch; }
  .signal-card__cta { align-self: flex-start; }
}

/* ── settings-section — disclosure-driven Settings page (Phase 5) ──── */
/* Each Settings section is a native <details> wrapped in a box. The   */
/* chevron rotates on open, the title carries the section name. The    */
/* summary stays clickable across the whole row.                        */
.settings-section { padding: var(--space-4); }
.settings-section[open] { padding-bottom: var(--space-5); }
.settings-section summary { list-style: none; }
.settings-section summary::-webkit-details-marker { display: none; }
.settings-section__title {
  font-size: var(--step-0);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.settings-section__chev {
  width: 0.85rem;
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}
.settings-section[open] > summary .fa-chevron-right.settings-section__chev,
.settings-section:not([open]) > summary .fa-chevron-down.settings-section__chev {
  transform: rotate(90deg);
}


/* ── b-table — admin/data tables with mobile card-row collapse ─────── */
.b-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.b-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.b-table thead {
  background: var(--bg-elevated);
}

.b-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.b-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.b-table tbody tr:last-child td { border-bottom: none; }
.b-table tbody tr:hover { background: var(--bg-elevated); }

/* Mobile: collapse each row into a card; surface column labels via
   data-label so chips (admin/status badges) stay visible alongside the
   email instead of being clipped off-screen. */
@media (max-width: 640px) {
  .b-table-wrapper {
    border: none;
    background: transparent;
    overflow-x: visible;
  }
  .b-table,
  .b-table tbody,
  .b-table tr,
  .b-table td {
    display: block;
    width: 100%;
  }
  .b-table thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .b-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }
  .b-table tbody tr:hover { background: var(--bg-surface); }
  .b-table td {
    border-bottom: 1px dashed var(--border);
    padding: var(--space-2) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    text-align: right;
  }
  .b-table tr td:last-child { border-bottom: none; }
  .b-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    flex-shrink: 0;
  }
  .b-table td:not([data-label])::before { content: none; }
  .b-table td.b-table__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
    padding-top: var(--space-3);
  }
}