/* ─────────────────────────────────────────────────────────────────
   homologaciones-next — design system
   GENERATED by scripts/sync-design-system.mjs — DO NOT EDIT BY HAND.
   Edit local partials or run: npm run sync:ds -- <path-to-second-brain>
   ───────────────────────────────────────────────────────────────── */

/* ===== src/tokens.css ===== */
/*
 * Corporate design-system token snapshot.
 *
 * Token names retain the hds- prefix while Bootstrap coexists with this
 * application. The prefix is a migration boundary, not a second visual
 * language: future second-brain sync work will replace these partials.
 */
:root,
html[data-theme='light'] {
  --hds-accent: #095e84;
  --hds-accent-strong: #064361;
  --hds-accent-soft: rgb(9 94 132 / 12%);
  --hds-accent-focus: rgb(9 94 132 / 32%);
  --hds-on-accent: #ffffff;

  --hds-bg: #ffffff;
  --hds-surface-1: #ffffff;
  --hds-surface-2: #f6f7f9;
  --hds-surface-3: #ebebeb;
  --hds-surface-4: #dcdcdc;
  --hds-overlay: rgb(20 20 20 / 36%);

  --hds-text-1: #1a1a1a;
  --hds-text-2: #555555;
  --hds-text-3: #8a8a8a;
  --hds-text-disabled: #8a8a8a;
  --hds-border: #e4e4e4;
  --hds-border-strong: #c8c8c8;

  --hds-success: #047857;
  --hds-success-soft: rgb(16 185 129 / 12%);
  --hds-warning: #92400e;
  --hds-warning-soft: rgb(245 158 11 / 14%);
  --hds-danger: #b91c1c;
  --hds-danger-soft: rgb(239 68 68 / 12%);
  --hds-info: #095e84;
  --hds-info-soft: rgb(9 94 132 / 12%);

  --hds-r-xs: 4px;
  --hds-r-sm: 6px;
  --hds-r-md: 10px;
  --hds-r-lg: 14px;
  --hds-r-xl: 18px;
  --hds-r-pill: 999px;

  --hds-s-1: 4px;
  --hds-s-2: 8px;
  --hds-s-3: 12px;
  --hds-s-4: 16px;
  --hds-s-5: 20px;
  --hds-s-6: 24px;
  --hds-s-7: 32px;
  --hds-s-8: 40px;

  --hds-elev-1: 0 1px 2px rgb(20 18 12 / 6%);
  --hds-elev-2: 0 4px 12px rgb(20 18 12 / 8%);
  --hds-elev-3: 0 12px 32px rgb(20 18 12 / 12%);
  --hds-ring: 0 0 0 3px var(--hds-accent-focus);

  --hds-font-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --hds-t-xs: 11px;
  --hds-t-sm: 12px;
  --hds-t-md: 13px;
  --hds-t-base: 14px;
  --hds-t-lg: 16px;
  --hds-t-xl: 20px;
  --hds-lh-tight: 1.15;
  --hds-lh-base: 1.5;

  --hds-d-fast: 120ms;
  --hds-ease-standard: cubic-bezier(.2, 0, .2, 1);
}

html[data-theme='dark'] {
  --hds-accent: #53b8d0;
  --hds-accent-strong: #36b0c9;
  --hds-accent-soft: rgb(83 184 208 / 16%);
  --hds-accent-focus: rgb(83 184 208 / 36%);
  --hds-on-accent: #082a3a;

  --hds-bg: #0a0a0a;
  --hds-surface-1: #161616;
  --hds-surface-2: #1f1f1f;
  --hds-surface-3: #2a2a2a;
  --hds-surface-4: #393939;
  --hds-overlay: rgb(0 0 0 / 60%);

  --hds-text-1: #f4f4f4;
  --hds-text-2: #b5b5b5;
  --hds-text-3: #8a8a8a;
  --hds-text-disabled: #5a5a5a;
  --hds-border: #262626;
  --hds-border-strong: #3a3a3a;

  --hds-success: #34d399;
  --hds-success-soft: rgb(52 211 153 / 18%);
  --hds-warning: #fbbf24;
  --hds-warning-soft: rgb(251 191 36 / 18%);
  --hds-danger: #f87171;
  --hds-danger-soft: rgb(248 113 113 / 18%);
  --hds-info: #53b8d0;
  --hds-info-soft: rgb(83 184 208 / 16%);

  --hds-elev-1: 0 0 0 1px rgb(255 255 255 / 2%), 0 1px 2px rgb(0 0 0 / 30%);
  --hds-elev-2: 0 0 0 1px rgb(255 255 255 / 2%), 0 4px 12px rgb(0 0 0 / 32%);
  --hds-elev-3: 0 0 0 1px rgb(255 255 255 / 3%), 0 12px 32px rgb(0 0 0 / 40%);
}

/* ===== src/primitives/base-controls.css ===== */
/* All primitive selectors remain prefixed until Bootstrap is removed. */
.hds-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--hds-s-2); min-height: 36px; padding: 8px 14px; border: 1px solid var(--hds-border); border-radius: var(--hds-r-sm); background: var(--hds-surface-2); color: var(--hds-text-1); cursor: pointer; font: 600 var(--hds-t-md) / 1 var(--hds-font-sans); text-decoration: none; transition: background var(--hds-d-fast) var(--hds-ease-standard), border-color var(--hds-d-fast) var(--hds-ease-standard), transform var(--hds-d-fast) var(--hds-ease-standard); }
.hds-button:hover { background: var(--hds-surface-3); border-color: var(--hds-border-strong); }
.hds-button:active { transform: scale(.98); }
.hds-button:focus-visible, .hds-input:focus-visible, .hds-textarea:focus-visible, .hds-select:focus-visible { outline: 0; box-shadow: var(--hds-ring); }
.hds-button:disabled { cursor: not-allowed; opacity: .55; }
.hds-button--primary { border-color: transparent; background: var(--hds-accent-strong); color: var(--hds-on-accent); }
.hds-button--primary:hover { background: var(--hds-accent); }
.hds-button--ghost { border-color: transparent; background: transparent; color: var(--hds-text-2); }
.hds-button--danger { border-color: transparent; background: var(--hds-danger); color: #ffffff; }
.hds-button--sm { min-height: 30px; padding: 6px 10px; font-size: var(--hds-t-sm); }
.hds-button--lg { min-height: 42px; padding: 11px 18px; font-size: var(--hds-t-base); }

.hds-card { border: 1px solid var(--hds-border); border-radius: var(--hds-r-lg); background: var(--hds-surface-1); box-shadow: var(--hds-elev-1); color: var(--hds-text-1); }
.hds-card__body { padding: var(--hds-s-5); }
.hds-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--hds-s-3); padding: var(--hds-s-4) var(--hds-s-5); border-bottom: 1px solid var(--hds-border); }
.hds-card__title { margin: 0; font-size: var(--hds-t-lg); line-height: var(--hds-lh-tight); font-weight: 700; }

.hds-field { display: grid; gap: 6px; }
.hds-field__label { color: var(--hds-text-1); font-size: var(--hds-t-md); font-weight: 600; }
.hds-field__required { color: var(--hds-danger); }
.hds-field__help { color: var(--hds-text-2); font-size: var(--hds-t-sm); }
.hds-field__error { color: var(--hds-danger); font-size: var(--hds-t-sm); }
.hds-input, .hds-textarea, .hds-select { width: 100%; border: 1px solid var(--hds-border); border-radius: var(--hds-r-sm); background: var(--hds-surface-1); color: var(--hds-text-1); font: 400 var(--hds-t-base) / var(--hds-lh-base) var(--hds-font-sans); }
.hds-input, .hds-select { min-height: 38px; padding: 8px 10px; }
.hds-textarea { min-height: 96px; padding: 10px; resize: vertical; }
.hds-input:hover, .hds-textarea:hover, .hds-select:hover { border-color: var(--hds-border-strong); }
.hds-input[aria-invalid='true'], .hds-textarea[aria-invalid='true'], .hds-select[aria-invalid='true'] { border-color: var(--hds-danger); }

.hds-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--hds-r-pill); padding: 3px 8px; font: 600 var(--hds-t-xs) / 1.2 var(--hds-font-sans); white-space: nowrap; }
.hds-badge--neutral { background: var(--hds-surface-3); color: var(--hds-text-2); }
.hds-badge--info { background: var(--hds-info-soft); color: var(--hds-info); }
.hds-badge--success { background: var(--hds-success-soft); color: var(--hds-success); }
.hds-badge--warning { background: var(--hds-warning-soft); color: var(--hds-warning); }
.hds-badge--danger { background: var(--hds-danger-soft); color: var(--hds-danger); }

.hds-alert { display: flex; align-items: flex-start; gap: var(--hds-s-3); border: 1px solid var(--hds-border); border-radius: var(--hds-r-md); padding: var(--hds-s-3) var(--hds-s-4); background: var(--hds-surface-2); color: var(--hds-text-1); font-size: var(--hds-t-md); }
.hds-alert--info { border-color: var(--hds-info); background: var(--hds-info-soft); }
.hds-alert--success { border-color: var(--hds-success); background: var(--hds-success-soft); }
.hds-alert--warning { border-color: var(--hds-warning); background: var(--hds-warning-soft); }
.hds-alert--danger { border-color: var(--hds-danger); background: var(--hds-danger-soft); }

.hds-empty-state { display: grid; justify-items: center; gap: var(--hds-s-2); max-width: 420px; margin: 0 auto; padding: var(--hds-s-7) var(--hds-s-5); color: var(--hds-text-2); text-align: center; }
.hds-empty-state__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--hds-r-lg); background: var(--hds-accent-soft); color: var(--hds-accent); }
.hds-empty-state__title { margin: 0; color: var(--hds-text-1); font-size: var(--hds-t-lg); line-height: var(--hds-lh-tight); }
.hds-empty-state__description { margin: 0; font-size: var(--hds-t-base); line-height: var(--hds-lh-base); }

@media (prefers-reduced-motion: reduce) {
  .hds-button { transition-duration: 1ms; }
}

/* ===== src/corporate/tokens.css (second-brain) ===== */
/* ─── Light (default) ─────────────────────────────────────────────────── */
[data-design="v2"],
[data-design="v2"][data-theme="light"] {

  --accent:           #3b82f6;
  --accent-strong:    #2563eb;
  --accent-soft:      rgba(59,130,246,.10);
  --accent-focus:     rgba(59,130,246,.32);
  --gradient-accent:  linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);

  /* Canvas is pure white in light mode. Cards still read because
     surface-2/3 step a touch darker and every card carries a 1px border. */
  --bg:               #ffffff;
  --surface-1:        #ffffff;
  --surface-2:        #f6f7f9;
  --surface-3:        #ebebeb;
  --surface-4:        #dcdcdc;
  --surface-overlay:  rgba(20,20,20,.36);

  --text-1:           #1a1a1a;
  --text-2:           #555555;
  --text-3:           #8a8a8a;
  --text-disabled:    #b3b3b3;
  --text-on-accent:   #ffffff;

  --border:           #e4e4e4;
  --border-strong:    #c8c8c8;

  --success:          #047857;   --success-soft: rgba(16,185,129,.12);
  --warning:          #d97706;   --warning-soft: rgba(245,158,11,.14); --warning-fg: #92400e;
  --danger:           #b91c1c;   --danger-soft:  rgba(239,68,68,.12);
  --info:             #2563eb;   --info-soft:    rgba(59,130,246,.10);
  --purple:           #6d28d9;   --purple-soft:  rgba(139,92,246,.12);
  --pink:             #be185d;   --pink-soft:    rgba(236,72,153,.10);

  /* Mesh halo for hero blocks (Home greeting, login mark, onboarding step).
     Layered above the solid gradient via ::after so the bottom-left + top-right
     soft circles read as ambient depth. */
  --gradient-mesh:
    radial-gradient(ellipse at 80% 0%, rgba(59,130,246,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(96,165,250,.08) 0%, transparent 60%);

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;

  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    20px;
  --s-6:    24px;
  --s-7:    32px;
  --s-8:    40px;
  --s-9:    56px;
  --s-10:   72px;

  /* Padding pairs — recurring vertical/horizontal padding shorthands. */
  --p-tight:   4px 10px;
  --p-compact: 10px 14px;
  --p-card:    14px 18px;

  /* Z-index scale — tooltip ABOVE modal so it can label modal controls. */
  --z-base:    1;
  --z-sticky:  10;
  --z-panel:   90;
  --z-modal:   100;
  --z-toast:   110;
  --z-tooltip: 120;
  --z-cmdk:    130;

  --elev-0: none;
  --elev-1: 0 1px 2px rgba(20,18,12,.06);
  --elev-2: 0 4px 12px rgba(20,18,12,.08);
  --elev-3: 0 12px 32px rgba(20,18,12,.12);
  --elev-5: 0 24px 64px rgba(20,18,12,.20);

  --ring: 0 0 0 3px var(--accent-focus);

  --state-hover-opacity:    .06;
  --state-pressed-opacity:  .10;
  --state-selected-opacity: .14;

  --ease-emph:     cubic-bezier(.2,.0,.0,1);
  --ease-standard: cubic-bezier(.2,.0,.2,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --d-fast:    120ms;
  --d-base:    200ms;
  --d-slow:    320ms;
  --d-emph:    400ms;

  /* Titillium Web is loaded by index.html. System stack is the fallback. */
  --font-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs:   11px;   --t-sm:   12px;   --t-md:   13px;   --t-base: 14px;
  --t-lg:   16px;   --t-xl:   20px;   --t-2xl:  26px;   --t-3xl:  32px;
  --t-4xl:  44px;   --t-5xl:  60px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --sidebar-w-expanded: 240px;
  --sidebar-w-collapsed: 56px;
  --view-padding: 24px;

  /* ── Legacy-name aliases ──────────────────────────────────────────────
     index.css uses these older var names across ~770 references. Aliasing
     them inside the v2 scope lets legacy CSS render in v2 colors without
     rewriting every rule (Phases 2–4 still migrate to the canonical names
     as each surface is refreshed). Outside [data-design="v2"], the legacy
     [data-design="v2"] definitions in index.css apply unchanged. */
  --surface:        var(--surface-1);
  --text:           var(--text-1);
  --text-muted:     var(--text-2);
  --text-dim:       var(--text-3);
  --accent-hover:   var(--accent-strong);
  --accent-dim:     var(--accent-soft);
  --border-hover:   var(--border-strong);
  --radius:         var(--r-md);
  --radius-sm:      var(--r-sm);
  --shadow:         var(--elev-3);
  --shadow-sm:      var(--elev-1);
  --font:           var(--font-sans);
  --sidebar-w:      var(--sidebar-w-expanded);
  /* Orphan names referenced by index.css component rules but never defined in
     either palette (they resolved to inherit/initial). Map to their canonical
     v2 vars so they render correctly once these aliases are global. */
  --text-primary:   var(--text-1);
  --text-secondary: var(--text-2);
  --hover:          var(--surface-2);
  --surface-hover:  var(--surface-2);
}

/* ─── Dark (peer theme) ───────────────────────────────────────────────── */
[data-design="v2"][data-theme="dark"] {
  --accent:          #60a5fa;
  --accent-strong:   #3b82f6;
  --accent-soft:     rgba(96,165,250,.16);
  --accent-focus:    rgba(96,165,250,.36);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);

  --bg:              #0a0a0a;
  --surface-1:       #161616;
  --surface-2:       #1f1f1f;
  --surface-3:       #2a2a2a;
  --surface-4:       #393939;
  --surface-overlay: rgba(0,0,0,.60);

  --text-1:          #f4f4f4;
  --text-2:          #b5b5b5;
  --text-3:          #8a8a8a;
  --text-disabled:   #5a5a5a;

  --border:          #262626;
  --border-strong:   #3a3a3a;

  --success:         #34d399;   --success-soft: rgba(52,211,153,.18);
  --warning:         #fbbf24;   --warning-soft: rgba(251,191,36,.18); --warning-fg: #fbbf24;
  --danger:          #f87171;   --danger-soft:  rgba(248,113,113,.18);
  --info:            #60a5fa;   --info-soft:    rgba(96,165,250,.16);
  --purple:          #a78bfa;   --purple-soft:  rgba(167,139,250,.18);
  --pink:            #f472b6;   --pink-soft:    rgba(244,114,182,.16);

  --elev-1: 0 0 0 1px rgba(255,255,255,.02), 0 1px 2px rgba(0,0,0,.30);
  --elev-2: 0 0 0 1px rgba(255,255,255,.02), 0 4px 12px rgba(0,0,0,.32);
  --elev-3: 0 0 0 1px rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.40);
  --elev-5: 0 0 0 1px rgba(255,255,255,.04), 0 24px 64px rgba(0,0,0,.55);
}

/* Reduce motion — scoped so legacy surfaces are unaffected. */
@media (prefers-reduced-motion: reduce) {
  [data-design="v2"] *,
  [data-design="v2"] *::before,
  [data-design="v2"] *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  [data-design="v2"] .spinner,
  [data-design="v2"] .skeleton,
  [data-design="v2"] .progress-fill.is-striped {
    animation-duration: revert !important;
  }
  [data-design="v2"] .skeleton {
    background: var(--surface-2) !important;
    animation: none !important;
  }
}

/* Forced-colors (Windows High Contrast) — scoped so legacy chrome is unchanged. */
@media (forced-colors: active) {
  [data-design="v2"] .btn,
  [data-design="v2"] .pill,
  [data-design="v2"] .field-input,
  [data-design="v2"] .input-group,
  [data-design="v2"] .tag-input,
  [data-design="v2"] .card,
  [data-design="v2"] .menu,
  [data-design="v2"] .modal,
  [data-design="v2"] .panel,
  [data-design="v2"] .toast,
  [data-design="v2"] .crumb,
  [data-design="v2"] .alert,
  [data-design="v2"] .banner,
  [data-design="v2"] .tooltip {
    border: 1px solid CanvasText;
  }
  [data-design="v2"] .btn--primary,
  [data-design="v2"] .pill--accent,
  [data-design="v2"] .menu-item.is-active {
    forced-color-adjust: none;
  }
}

/* Inside [data-design="v2"] roots, body inherits the new font + colors.
   We don't touch body { font-family } globally — only within the v2 scope. */
[data-design="v2"] {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-1);
  font-size: var(--t-base);
  line-height: var(--lh-base);
}

/* ===== src/corporate/primitives/base-controls.css (second-brain) ===== */
/* ─── Buttons ─────────────────────────────────────────────────────────── */
[data-design="v2"] .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1;
  background: var(--surface-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  transition: background var(--d-fast) var(--ease-standard),
              border-color var(--d-fast) var(--ease-standard),
              transform var(--d-fast) var(--ease-spring);
}
[data-design="v2"] .btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
[data-design="v2"] .btn:active { transform: scale(.98); }
[data-design="v2"] .btn[disabled], [data-design="v2"] .btn:disabled { opacity: .5; pointer-events: none; }
/* If you need a tooltip explaining WHY a button is disabled, use
   aria-disabled="true" + a wrapper instead — pointer-events: none here
   prevents tooltips from firing on the button itself. */
[data-design="v2"] .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

[data-design="v2"] .btn--primary { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
[data-design="v2"] .btn--primary:hover { background: var(--accent-strong); }

[data-design="v2"] .btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
[data-design="v2"] .btn--ghost:hover { background: var(--surface-2); color: var(--text-1); }

[data-design="v2"] .btn--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
[data-design="v2"] .btn--danger:hover { background: color-mix(in srgb, var(--danger) 25%, transparent); }

[data-design="v2"] .btn--gradient {
  background: var(--gradient-accent);
  color: var(--text-on-accent);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
[data-design="v2"] .btn--gradient:hover {
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent-strong) 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

[data-design="v2"] .btn--sm { padding: 5px 10px; font-size: var(--t-sm); }
[data-design="v2"] .btn--lg { padding: 11px 20px; font-size: var(--t-base); border-radius: var(--r-md); }
[data-design="v2"] .btn--icon { padding: 6px; width: 32px; height: 32px; justify-content: center; }

/* ─── Pills / Badges ──────────────────────────────────────────────────── */
[data-design="v2"] .pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600;
  line-height: 1.4; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
[data-design="v2"] .pill--accent { background: var(--accent-soft);  color: var(--accent);  }
[data-design="v2"] .pill--info { background: var(--info-soft);    color: var(--info);    }
[data-design="v2"] .pill--success { background: var(--success-soft); color: var(--success); }
[data-design="v2"] .pill--warning { background: var(--warning-soft); color: var(--warning-fg); }
[data-design="v2"] .pill--danger { background: var(--danger-soft);  color: var(--danger);  }
[data-design="v2"] .pill--outline { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
[data-design="v2"] .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }

/* ─── Card ────────────────────────────────────────────────────────────── */
[data-design="v2"] .card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--elev-1);
}
[data-design="v2"] .card--interactive {
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-standard),
              box-shadow var(--d-fast) var(--ease-standard),
              transform var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}
[data-design="v2"] .card--hero {
  background: var(--gradient-accent);
  color: var(--text-on-accent);
  border-color: transparent;
  border-radius: var(--r-xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* ─── Field ───────────────────────────────────────────────────────────── */
[data-design="v2"] .field { display: flex; flex-direction: column; gap: 6px; }
[data-design="v2"] .field-label {
  font-size: var(--t-xs);
  color: var(--text-3);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
[data-design="v2"] .field-input {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  padding: 9px 12px;
  font-size: var(--t-base);
  font-family: inherit;
  outline: none;
  transition: border-color var(--d-fast) var(--ease-standard),
              box-shadow var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .field-input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
[data-design="v2"] .field-help { font-size: var(--t-xs); color: var(--text-3); }

/* Required-field marker — drives off data attribute so consumers don't
   have to inline an asterisk span. */
[data-design="v2"] .field-label[data-required]::after { content: ' *'; color: var(--danger); margin-left: 2px; }

/* Validation messages — distinct from .field-help so a field can carry BOTH
   a passive hint AND an error message stacked. */
[data-design="v2"] .field-error, [data-design="v2"] .field-success {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 500;
  margin-top: -2px;
}
[data-design="v2"] .field-error { color: var(--danger); }
[data-design="v2"] .field-success { color: var(--success); }
[data-design="v2"] .field-error svg, [data-design="v2"] .field-success svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ─── Tabs (segmented + underlined variants) ──────────────────────────── */
[data-design="v2"] .tabs {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
[data-design="v2"] .tab {
  padding: 6px 14px;
  border-radius: calc(var(--r-md) - 4px);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--text-2);
  transition: background var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .tab:hover { color: var(--text-1); }
[data-design="v2"] .tab--active {
  background: var(--surface-1);
  color: var(--text-1);
  box-shadow: var(--elev-1);
}

[data-design="v2"] .tabs-underline { display: flex; border-bottom: 1px solid var(--border); }
[data-design="v2"] .tab-underline {
  padding: var(--p-compact); font-size: var(--t-md); color: var(--text-2);
  position: relative; cursor: pointer;
}
[data-design="v2"] .tab-underline:hover { color: var(--text-1); }
[data-design="v2"] .tab-underline.is-active { color: var(--text-1); font-weight: 600; }
[data-design="v2"] .tab-underline.is-active::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--accent);
  border-radius: 2px 2px 0 0;
}
/* Tab count chip — mockup pattern `Label · N`. Dimmed and slightly
   smaller; never wraps. Active tab inherits the tab's full-strength
   color so the count goes from --text-3 to --text-2. */
[data-design="v2"] .tab-count,
[data-design="v2"] .tab-underline .tab-count,
[data-design="v2"] .tab .tab-count {
  color: var(--text-3);
  font-size: var(--t-sm);
  font-weight: 500;
  margin-left: 6px;
  white-space: nowrap;
}
[data-design="v2"] .tab-underline.is-active .tab-count,
[data-design="v2"] .tab.tab--active .tab-count { color: var(--text-2); }

/* ─── Alert ───────────────────────────────────────────────────────────── */
[data-design="v2"] .alert {
  display: flex; gap: 10px;
  padding: var(--p-compact);
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  background: var(--info-soft);
  color: var(--text-1);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
}
[data-design="v2"] .alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
[data-design="v2"] .alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
[data-design="v2"] .alert--danger { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* ─── Avatar ──────────────────────────────────────────────────────────── */
[data-design="v2"] .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-on-accent);
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  flex-shrink: 0;
  overflow: hidden;
}
[data-design="v2"] .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-design="v2"] .avatar--xs { width: 18px; height: 18px; font-size: 9px; }
[data-design="v2"] .avatar--sm { width: 24px; height: 24px; font-size: 10px; }
[data-design="v2"] .avatar--md { width: 32px; height: 32px; font-size: var(--t-sm); }
[data-design="v2"] .avatar--lg { width: 44px; height: 44px; font-size: var(--t-lg); }
[data-design="v2"] .avatar--xl { width: 64px; height: 64px; font-size: 22px; }

/* Named gradient variants — useful for deterministic per-user colors.
   Hash the user id to pick one. Keep the count small enough to be memorable. */
[data-design="v2"] .avatar--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
[data-design="v2"] .avatar--rose { background: linear-gradient(135deg, #fb7185, #be123c); }
[data-design="v2"] .avatar--amber { background: linear-gradient(135deg, #fbbf24, #b45309); }
[data-design="v2"] .avatar--emerald { background: linear-gradient(135deg, #34d399, #047857); }
[data-design="v2"] .avatar--cyan { background: linear-gradient(135deg, #22d3ee, #0e7490); }
[data-design="v2"] .avatar--slate { background: linear-gradient(135deg, #64748b, #334155); }

[data-design="v2"] .avatar-stack { display: inline-flex; align-items: center; }
[data-design="v2"] .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface-1); margin-left: -6px; }
[data-design="v2"] .avatar-stack .avatar:first-child { margin-left: 0; }
[data-design="v2"] .avatar-stack-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
  font-size: 10px; font-weight: 600;
  box-shadow: 0 0 0 2px var(--surface-1);
  margin-left: -6px;
}

/* Group avatar — 2-4 micro-portraits in a tile for team avatars */
[data-design="v2"] .avatar--group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--surface-1);
  overflow: hidden;
  padding: 0;
}
[data-design="v2"] .avatar--group img { border-radius: 0; }

/* ─── Badge ───────────────────────────────────────────────────────────── */
/* Pill badge rendered by ui/Badge.tsx (role/status pills in Admin + Teams)
   and the kanban bulk-bar count. Consolidated here from legacy index.css
   (Phase 6) — every consumer sits inside a [data-design="v2"] scope. */
[data-design="v2"] .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .02em;
  white-space: nowrap;
}
[data-design="v2"] .badge--accent  { background: rgba(79,126,248,.15); color: var(--accent); }
[data-design="v2"] .badge--warning { background: rgba(245,158,11,.15);  color: var(--warning); }
[data-design="v2"] .badge--success { background: rgba(16,185,129,.15);  color: var(--success); }
[data-design="v2"] .badge--dim     { background: var(--surface-3);       color: var(--text-muted); }

/* ─── Divider with label ──────────────────────────────────────────────── */
[data-design="v2"] .divider { height: 1px; background: var(--border); margin: 12px 0; }
[data-design="v2"] .divider-label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  margin: 14px 0 6px;
}
[data-design="v2"] .divider-label::before, [data-design="v2"] .divider-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ─── Inbox row (Front-style list item) ───────────────────────────────── */
[data-design="v2"] .inbox-row {
  display: flex; align-items: center; gap: 12px;
  padding: var(--p-compact);
  border-radius: var(--r-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .inbox-row:hover { background: var(--surface-2); }
[data-design="v2"] .inbox-row--unread { border-left-color: var(--accent); }
[data-design="v2"] .inbox-row--unread .inbox-row-title { font-weight: 600; color: var(--text-1); }
[data-design="v2"] .inbox-row--selected { background: var(--accent-soft); border-left-color: var(--accent); }
[data-design="v2"] .inbox-row-title { color: var(--text-1); }
[data-design="v2"] .inbox-row-sub { font-size: var(--t-sm); color: var(--text-2); margin-top: 2px; }
[data-design="v2"] .inbox-row-time { font-size: var(--t-xs); color: var(--text-3); margin-left: auto; flex-shrink: 0; }

/* ===== src/corporate/primitives/modals-panels.css (second-brain) ===== */
[data-design="v2"] .modal-overlay {
  position: fixed; inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: var(--z-modal);
  animation: overlayIn var(--d-base) var(--ease-emph);
}
/* A Modal opened on top of another already-open Modal (e.g. the delete
   confirmation dialog over an in-progress IssueModal) needs an explicit
   stacking bump — both overlays otherwise share --z-modal and only stack
   correctly by DOM order. */
[data-design="v2"] .modal-overlay--stacked {
  z-index: calc(var(--z-modal) + 1);
}
[data-design="v2"] .modal {
  background: var(--surface-1);
  /* Same clean card chrome as the task modal (td-modal): a single subtle
     border + elevation shadow. The shell itself stays padding: 0 — head,
     body and foot own their gutters. */
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-5);
  padding: 0;
  /* Clip head/footer surfaces to the rounded corners so the footer's
     surface background doesn't bleed past the radius as square corners.
     The body keeps its own overflow-y: auto for scrolling. */
  overflow: hidden;
  /* Explicit width — the overlay uses display: grid; place-items: center
     which means justify-items: center, and that shrinks the item to its
     content width regardless of width: 100%. min() gives us a sensible
     default with a viewport floor. */
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  animation: modalIn var(--d-emph) var(--ease-emph);
}
[data-design="v2"] .modal.modal--wide {
  width: min(820px, calc(100vw - 32px));
}
/* Task modal — card-shaped dialog. Caps at 1000x820 so we keep
   meaningful backdrop on either side; on narrow viewports the
   100vw-96 / 100vh-96 fallback shrinks to fit while leaving a
   visible gutter so the dialog metaphor still reads. */
[data-design="v2"] .modal.td-modal {
  width: min(1000px, calc(100vw - 96px));
  height: min(820px, calc(100vh - 96px));
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 96px);
  padding: 0;
  /* Clip children to the rounded corners so the footer's surface-2
     background respects the bottom-left/bottom-right radius instead
     of bleeding past it as a square. The body keeps its own
     overflow-y: auto for vertical scroll. */
  overflow: hidden;
  /* Reuse v2 card chrome: subtle border + elevation 5 (the deepest
     shadow we have) so the card lifts off the backdrop clearly. */
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--elev-5);
  /* Disable the modalIn keyframe — its translateY(8) scale(.98) entry
     transform was leaving ~22-px slack around the edges while running
     and didn't always clear. The card-shape doesn't need a slide-up
     entrance to read as a dialog. */
  animation: none;
  transform: none;
}
[data-design="v2"] .modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
[data-design="v2"] .modal-head h2 { margin: 0; font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }

/* Optional 32-px accent-soft squircle to the left of the modal title.
   Renders any ReactNode (icon, custom mark, mono badge) inside.
   Matches the mockup-17 `.m-ico` pattern. */
[data-design="v2"] .m-ico {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-design="v2"] .m-ico--danger  { background: var(--danger-soft);  color: var(--danger);  }
[data-design="v2"] .m-ico--warning { background: var(--warning-soft); color: var(--warning-fg); }
[data-design="v2"] .m-ico--success { background: var(--success-soft); color: var(--success); }
[data-design="v2"] .m-ico--info    { background: var(--info-soft);    color: var(--info);    }

/* Title column inside .modal-head — lets the m-ico + subtitle co-exist
   without the close button getting bumped down. The header gets gap:12px
   already; this just stacks the h2 + .m-sub vertically. */
[data-design="v2"] .m-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
[data-design="v2"] .m-sub {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin-top: 2px;
}

/* Generic close button — usable in modal-head, panel-head, toast, banner, etc.
   Always pair with aria-label="Close" since the icon alone isn't a label. */
[data-design="v2"] .close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--d-fast), color var(--d-fast);
}
[data-design="v2"] .close:hover { background: var(--surface-2); color: var(--text-1); }
[data-design="v2"] .close--sm { width: 24px; height: 24px; }
[data-design="v2"] .modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  /* Legacy index.css caps .modal-body at max-height: 60vh — that
     prevented the body from claiming the full flex column, so the
     footer floated mid-modal with empty space below it. We size
     the modal explicitly via the .modal rule; the body just grows
     to fill whatever's left after head + foot. */
  max-height: none;
  min-height: 0;
}
/* The task modal carries enough vertical chrome (head, pills, multiple
   sections) that the default 16/18 padding eats too much real estate.
   Pull the body in tight so Description / Subtasks / Comments get more
   room. */
[data-design="v2"] .modal.td-modal > .modal-body { padding: 14px 16px; }
/* The task modal has a wide header (title + subtitle breadcrumb line).
   Reduce vertical padding slightly so the head doesn't dominate the
   viewport height on smaller screens. */
[data-design="v2"] .modal.td-modal > .modal-head { padding: 14px 22px; }
[data-design="v2"] .modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
/* Left-aligned status text in the footer (mockup `.m-hint`). The buttons
   that follow it stay flush right courtesy of `margin-left: auto` on the
   first sibling — the standard pattern Modal callers already use. */
[data-design="v2"] .m-hint {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin-right: auto;
}

/* NewProjectModal — mockup 17 template tiles + slug pill ────────────── */
[data-design="v2"] .np-templates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}
[data-design="v2"] .np-template {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color var(--d-fast) var(--ease-standard),
              background var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .np-template:hover { border-color: var(--border-strong); }
[data-design="v2"] .np-template.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
[data-design="v2"] .np-template-name {
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--text-1);
}
[data-design="v2"] .np-template-sub {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: 2px;
}
[data-design="v2"] .np-slug {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-2);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

/* OwnershipModal step 2 — mockup 19 change-row + checklist ─────────────── */
[data-design="v2"] .om-change-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
[data-design="v2"] .om-change-row--tight { margin-top: 6px; }
[data-design="v2"] .om-change-side {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
}
[data-design="v2"] .om-change-info { min-width: 0; flex: 1; }
[data-design="v2"] .om-change-name {
  font-weight: 600; font-size: var(--t-md); color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-design="v2"] .om-change-role { font-size: var(--t-xs); margin-top: 2px; }
[data-design="v2"] .om-change-role--owner  { color: var(--accent); font-weight: 600; }
[data-design="v2"] .om-change-role--editor { color: var(--text-3); }
[data-design="v2"] .om-change-arrow {
  color: var(--text-3); font-size: var(--t-lg); line-height: 1; padding: 0 4px;
}
[data-design="v2"] .om-change-team {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--surface-3); color: var(--text-2);
  font-weight: 600; font-size: var(--t-xs);
  border-radius: var(--r-sm);
}
[data-design="v2"] .om-checklist {
  list-style: none;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
[data-design="v2"] .om-checklist li {
  display: flex; gap: 10px;
  font-size: var(--t-sm); color: var(--text-2);
  padding: 4px 0;
}
[data-design="v2"] .om-checklist li::before {
  content: '✓';
  color: var(--success);
  flex-shrink: 0;
  font-weight: 700;
}
[data-design="v2"] .om-checklist li.is-warning::before {
  content: '!';
  color: var(--warning-fg);
}

/* Page-level Properties bar (`.ph`) — sits between the topbar and the
   tabs strip. Replaces the old read-only pd-hero pill row + the per-tab
   Properties section. Always visible regardless of which tab is active;
   each value is view-by-default + click-to-edit. */
[data-design="v2"] .ph {
  padding: 8px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}
[data-design="v2"] .ph-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* View pill — looks like a chip / kv pair, hover hints at editability. */
[data-design="v2"] .ph-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--p-tight);
  font-size: var(--t-sm);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  transition: background var(--d-fast), border-color var(--d-fast);
}
[data-design="v2"] .ph-pill:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-design="v2"] .ph-pill:disabled { cursor: default; }
[data-design="v2"] .ph-kv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
[data-design="v2"] .ph-kv--empty { color: var(--text-3); font-style: italic; }
[data-design="v2"] .ph-tag-pill {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 500;
  margin-right: 4px;
}

/* Inline edit slot — replaces a pill in-place. */
[data-design="v2"] .ph-edit {
  display: inline-flex;
  align-items: center;
}
[data-design="v2"] .ph-input {
  padding: 4px 8px;
  font: inherit;
  font-size: var(--t-sm);
  background: var(--surface-1);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--text-1);
  outline: none;
  box-shadow: var(--ring);
}

/* Goal subtitle row — italic muted text by default, click to edit. */
[data-design="v2"] .ph-goal {
  padding: 0 8px;
}
[data-design="v2"] .ph-goal-view {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: var(--p-tight);
  font: inherit;
  font-size: var(--t-md);
  font-style: italic;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: block;
}
[data-design="v2"] .ph-goal-view:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-design="v2"] .ph-goal-view:disabled { cursor: default; }
[data-design="v2"] .ph-input--goal {
  width: 100%;
  font-style: italic;
  font-size: var(--t-md);
}

/* ProjectDetail breadcrumb + list toggle ─────────────────────────────────
   pd-breadcrumb sits as the first child of pd-topbar; contains optional
   list-toggle button and "All projects" back-link. */
[data-design="v2"] .pd-breadcrumb { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
[data-design="v2"] .pd-breadcrumb-toggle,
[data-design="v2"] .pd-breadcrumb-link {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent;
  color: var(--text-3); cursor: pointer; font-size: var(--t-sm); padding: 3px 6px; border-radius: 6px;
}
[data-design="v2"] .pd-breadcrumb-toggle:hover,
[data-design="v2"] .pd-breadcrumb-link:hover { background: var(--surface-2); color: var(--text-1); }
[data-design="v2"] .pd-breadcrumb-sep { color: var(--text-4, #94a3b8); }

/* ProjectDetail hero — mockup 10 `.hero` ─────────────────────────────────
   Sits between the pd-topbar (title + sync + share) and the tabs strip.
   Carries the meta pill cluster (status / area / priority / due) and the
   italic goal subtitle. Read-only summary; the same fields stay editable
   inside the properties grid below the tabs. */
[data-design="v2"] .pd-hero {
  padding: 4px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-design="v2"] .pd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
[data-design="v2"] .pd-hero-goal {
  margin: 0;
  font-size: var(--t-md);
  color: var(--text-2);
  font-style: italic;
  line-height: var(--lh-snug);
  max-width: 78ch;
}

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn   { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ─── Panel (right slide-over) ────────────────────────────────────────── */
[data-design="v2"] .panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--elev-3);
  display: flex; flex-direction: column;
  z-index: var(--z-panel);
  animation: panelIn var(--d-emph) var(--ease-emph);
}
[data-design="v2"] .panel-head {
  padding: var(--p-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
[data-design="v2"] .panel-body { flex: 1; overflow-y: auto; padding: var(--p-card); }
[data-design="v2"] .panel-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

@keyframes panelIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─── Icon size helper ────────────────────────────────────────────────── */
[data-design="v2"] .ico { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; }
[data-design="v2"] .ico--xs { width: 12px; height: 12px; }
[data-design="v2"] .ico--sm { width: 14px; height: 14px; }
[data-design="v2"] .ico--md { width: 16px; height: 16px; }
[data-design="v2"] .ico--lg { width: 18px; height: 18px; }
[data-design="v2"] .ico--xl { width: 22px; height: 22px; }
[data-design="v2"] .ico--2xl { width: 28px; height: 28px; }

/* ===== src/corporate/primitives/forms-widgets.css (second-brain) ===== */
/* The basic .field-input is in the Field section above. These add:
   - search input with leading icon
   - textarea
   - select chevron styling
   - input states (error, success)
   - input with prefix/suffix */
[data-design="v2"] .input-search {
  position: relative;
}
[data-design="v2"] .input-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-family: inherit; font-size: var(--t-base);
  outline: none;
}
[data-design="v2"] .input-search input:focus { border-color: var(--accent); background: var(--surface-1); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-design="v2"] .input-search .ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-3); pointer-events: none;
}

[data-design="v2"] textarea.field-input {
  resize: vertical; min-height: 80px;
  font-family: inherit; line-height: var(--lh-base);
}

[data-design="v2"] select.field-input {
  appearance: none;
  /* Chevron painted via mask + currentColor, so it tracks --text-1
     in both themes (and any host re-skin). */
  background-image: none;
  padding-right: 32px;
  position: relative;
}
/* Wrapper-less chevron — paint into the right padding via a layered linear gradient mask.
   Simpler: use background-image with currentColor via mask. We need a wrapper so the
   chevron can use currentColor. For consumers who can't wrap, fall back to a neutral
   SVG that tracks --text-2 via mask. */
[data-design="v2"] .select-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
[data-design="v2"] .select-wrap::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background: currentColor;
  color: var(--text-2);
  pointer-events: none;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
}
[data-design="v2"] .select-wrap select { width: 100%; }

[data-design="v2"] .field-input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
[data-design="v2"] .field-input.is-success { border-color: var(--success); }
/* Combobox showing a placeholder-like option (e.g. "Todos los tipos") instead
   of a real selection — dimmed like native input placeholder text. */
[data-design="v2"] .combobox-input.is-placeholder { color: var(--text-3); }
[data-design="v2"] .field-help.is-error { color: var(--danger); }
[data-design="v2"] .field-help.is-success { color: var(--success); }
[data-design="v2"] .field-input:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }

/* Input with prefix/suffix */
[data-design="v2"] .input-group {
  display: flex; align-items: stretch;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .input-group:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
[data-design="v2"] .input-group input {
  flex: 1; background: transparent; border: 0; outline: none;
  padding: 9px 12px; color: var(--text-1); font-family: inherit; font-size: var(--t-base);
}
[data-design="v2"] .input-group .input-prefix, [data-design="v2"] .input-group .input-suffix, [data-design="v2"] .input-group .prefix, [data-design="v2"] .input-group .suffix {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  background: var(--surface-2);
  color: var(--text-3); font-size: var(--t-sm); font-family: var(--font-mono);
  white-space: nowrap;
}
[data-design="v2"] .input-group .input-prefix, [data-design="v2"] .input-group .prefix { border-right: 1px solid var(--border); }
[data-design="v2"] .input-group .input-suffix, [data-design="v2"] .input-group .suffix { border-left: 1px solid var(--border); }
/* A button placed in the suffix slot (eg "Copy") gets borderless treatment */
[data-design="v2"] .input-group .input-suffix .btn { padding: 6px 10px; border-radius: 0; }

/* ─── Toggle controls ─────────────────────────────────────────────────── */
/* Checkbox — paint via :checked + ::after */
[data-design="v2"] .check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: var(--t-sm); color: var(--text-1);
  user-select: none;
}
[data-design="v2"] .check input[type="checkbox"] { display: none; }
[data-design="v2"] .check .check-box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  background: var(--surface-1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--d-fast), border-color var(--d-fast);
}
[data-design="v2"] .check input:checked + .check-box {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
[data-design="v2"] .check input:checked + .check-box::after { content: '✓'; font-size: var(--t-xs); font-weight: 700; line-height: 1; }
[data-design="v2"] .check input:disabled + .check-box { opacity: .5; }

/* Radio — paint via :checked + ::after */
[data-design="v2"] .radio {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: var(--t-sm); color: var(--text-1);
  user-select: none;
}
[data-design="v2"] .radio input[type="radio"] { display: none; }
[data-design="v2"] .radio .radio-circle {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong); border-radius: 50%;
  background: var(--surface-1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--d-fast);
}
[data-design="v2"] .radio input:checked + .radio-circle { border-color: var(--accent); }
[data-design="v2"] .radio input:checked + .radio-circle::after {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}

/* Switch — sliding toggle. Built around a real <input type="checkbox"> so it's
   keyboard-accessible (Space toggles), tabbable, and form-submits.
   Markup:  <label class="switch"><input type="checkbox"><span class="switch-track"></span></label> */
[data-design="v2"] .switch {
  position: relative; display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
[data-design="v2"] .switch input[type="checkbox"] {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
[data-design="v2"] .switch .switch-track {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  transition: background var(--d-fast);
}
[data-design="v2"] .switch .switch-track::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--surface-1); border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform var(--d-fast) var(--ease-spring), background var(--d-fast);
}
[data-design="v2"] .switch input:checked + .switch-track { background: var(--accent); }
[data-design="v2"] .switch input:checked + .switch-track::after { transform: translateX(16px); background: #fff; }
[data-design="v2"] .switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
[data-design="v2"] .switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }

/* ─── Dropdown menu (popover) ────────────────────────────────────────── */
[data-design="v2"] .menu {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  padding: 6px;
  min-width: 200px;
  display: flex; flex-direction: column; gap: 1px;
  animation: menuIn var(--d-fast) var(--ease-emph);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
[data-design="v2"] .menu-section {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 10px 4px;
}
[data-design="v2"] .menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--text-1);
  cursor: pointer; text-decoration: none;
}
[data-design="v2"] .menu-item:hover { background: var(--surface-2); }
[data-design="v2"] .menu-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
[data-design="v2"] .menu-item.is-danger { color: var(--danger); }
[data-design="v2"] .menu-item.is-danger:hover { background: var(--danger-soft); }
[data-design="v2"] .menu-item .menu-item-icon { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
[data-design="v2"] .menu-item.is-danger .menu-item-icon { color: var(--danger); }
[data-design="v2"] .menu-item .menu-item-shortcut {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--text-3);
}
[data-design="v2"] .menu-divider { height: 1px; background: var(--border); margin: 4px -6px; }

/* ─── Tooltip ─────────────────────────────────────────────────────────── */
/* Tooltip sits ABOVE modals (z-tooltip > z-modal) so it can label modal controls.
   Pair the trigger with aria-describedby pointing at the tooltip id. */
[data-design="v2"] .tooltip {
  display: inline-flex; align-items: center;
  padding: var(--p-tight);
  background: var(--text-1); color: var(--bg);
  border-radius: var(--r-xs);
  font-size: var(--t-xs); font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  position: absolute;
  z-index: var(--z-tooltip);
  box-shadow: var(--elev-2);
}
[data-design="v2"] .tooltip::after {
  content: ''; position: absolute;
  width: 0; height: 0;
}
[data-design="v2"] .tooltip.is-top { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
[data-design="v2"] .tooltip.is-top::after {
  top: 100%; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--text-1);
}
[data-design="v2"] .tooltip.is-bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
[data-design="v2"] .tooltip.is-bottom::after {
  bottom: 100%; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid var(--text-1);
}
[data-design="v2"] .tooltip.is-left { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
[data-design="v2"] .tooltip.is-left::after {
  left: 100%; top: 50%; transform: translateY(-50%);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 5px solid var(--text-1);
}
[data-design="v2"] .tooltip.is-right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
[data-design="v2"] .tooltip.is-right::after {
  right: 100%; top: 50%; transform: translateY(-50%);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-right: 5px solid var(--text-1);
}

/* ─── Toast (bottom-right notification) ───────────────────────────────── */
[data-design="v2"] .toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px;
  background: var(--text-1); color: var(--bg);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  font-size: var(--t-sm);
  max-width: 380px;
  animation: toastIn var(--d-emph) var(--ease-emph);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-design="v2"] .toast-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
[data-design="v2"] .toast.is-success .toast-icon { color: var(--success); }
[data-design="v2"] .toast.is-warning .toast-icon { color: var(--warning); }
[data-design="v2"] .toast.is-danger  .toast-icon { color: var(--danger); }
[data-design="v2"] .toast-msg { flex: 1; line-height: 1.4; }
[data-design="v2"] .toast-action { color: var(--accent); font-weight: 600; cursor: pointer; padding: 2px 8px; border-radius: var(--r-xs); }
[data-design="v2"] .toast-action:hover { background: var(--surface-3); }
[data-design="v2"] .toast-close { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); cursor: pointer; border-radius: var(--r-xs); }
[data-design="v2"] .toast-close:hover { color: var(--bg); background: rgba(255,255,255,.08); }

/* Lighter "surface" variant for less aggressive notifications */
[data-design="v2"] .toast--surface {
  background: var(--surface-1); color: var(--text-1);
  border: 1px solid var(--border);
  box-shadow: var(--elev-3);
}
[data-design="v2"] .toast--surface .toast-close { color: var(--text-3); }
[data-design="v2"] .toast--surface .toast-close:hover { background: var(--surface-2); color: var(--text-1); }

[data-design="v2"] .toast-region {
  position: fixed; bottom: 22px; right: 22px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}
[data-design="v2"] .toast-region .toast { pointer-events: auto; }

/* ─── Skeleton (loading placeholder) ─────────────────────────────────── */
[data-design="v2"] .skeleton {
  display: block;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-xs);
}
[data-design="v2"] .skeleton--text { height: 12px; }
[data-design="v2"] .skeleton--h { height: 20px; }
[data-design="v2"] .skeleton--block { height: 80px; border-radius: var(--r-sm); }
[data-design="v2"] .skeleton--circle { border-radius: 50%; aspect-ratio: 1; width: 32px; }
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Spinner ─────────────────────────────────────────────────────────── */
[data-design="v2"] .spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}
[data-design="v2"] .spinner--lg { width: 24px; height: 24px; border-width: 3px; }
[data-design="v2"] .spinner--xl { width: 36px; height: 36px; border-width: 3.5px; }
/* For use inside .btn--primary / accent surfaces — flips the contrast */
[data-design="v2"] .spinner--on-accent {
  border-color: rgba(255,255,255,.3);
  border-top-color: #fff;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Progress (linear) ──────────────────────────────────────────────── */
[data-design="v2"] .progress {
  width: 100%; height: 6px;
  background: var(--surface-3); border-radius: var(--r-pill);
  overflow: hidden;
}
[data-design="v2"] .progress-fill {
  height: 100%; background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--d-base) var(--ease-standard);
}
[data-design="v2"] .progress--lg { height: 10px; }
[data-design="v2"] .progress--sm { height: 4px; }
[data-design="v2"] .progress-fill.is-success { background: var(--success); }
[data-design="v2"] .progress-fill.is-warning { background: var(--warning); }
[data-design="v2"] .progress-fill.is-danger { background: var(--danger); }
[data-design="v2"] .progress-fill.is-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent);
  background-size: 14px 14px;
  animation: progressStripe 1s linear infinite;
}
@keyframes progressStripe { from { background-position: 0 0; } to { background-position: 14px 0; } }

/* ─── Status dot ──────────────────────────────────────────────────────── */
[data-design="v2"] .status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  vertical-align: middle;
}
[data-design="v2"] .status-dot.is-online { background: var(--success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent); }
[data-design="v2"] .status-dot.is-busy { background: var(--danger); }
[data-design="v2"] .status-dot.is-away { background: var(--warning); }
[data-design="v2"] .status-dot.is-offline { background: var(--text-3); }

/* ─── Tag input (chips + free text) ──────────────────────────────────── */
[data-design="v2"] .tag-input {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 6px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  min-height: 36px; align-items: center;
}
[data-design="v2"] .tag-input:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
[data-design="v2"] .tag-input .tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-xs);
  font-size: var(--t-xs); font-weight: 600;
}
[data-design="v2"] .tag-input .tag .x { cursor: pointer; opacity: .65; }
[data-design="v2"] .tag-input .tag .x:hover { opacity: 1; }
[data-design="v2"] .tag-input input {
  flex: 1; min-width: 80px;
  border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: var(--t-sm); color: var(--text-1);
  padding: 4px;
}

/* ─── Keyboard shortcut (kbd) ────────────────────────────────────────── */
[data-design="v2"] .kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  color: var(--text-2);
  line-height: 1.4;
}

/* ─── Code (inline + block) ──────────────────────────────────────────── */
[data-design="v2"] .code-inline, [data-design="v2"] :not(pre) > code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--text-1);
}
[data-design="v2"] .code-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--font-mono); font-size: var(--t-md);
  line-height: 1.6;
  overflow-x: auto;
  color: var(--text-1);
}
[data-design="v2"] .code-block .c-keyword { color: var(--accent); font-weight: 600; }
[data-design="v2"] .code-block .c-string { color: var(--success); }
[data-design="v2"] .code-block .c-comment { color: var(--text-3); font-style: italic; }
[data-design="v2"] .code-block .c-number { color: var(--warning); }

/* ─── Empty state ────────────────────────────────────────────────────── */
[data-design="v2"] .empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-3);
}
[data-design="v2"] .empty-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
[data-design="v2"] .empty-icon svg { width: 24px; height: 24px; }
[data-design="v2"] .empty-title { font-size: var(--t-lg); font-weight: 700; color: var(--text-1); }
[data-design="v2"] .empty-sub { font-size: var(--t-sm); color: var(--text-2); max-width: 360px; line-height: 1.5; }
[data-design="v2"] .empty-cta { margin-top: 6px; }

/* ─── Table ──────────────────────────────────────────────────────────── */
[data-design="v2"] .tbl {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm);
}
[data-design="v2"] .tbl thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: var(--p-compact); text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
  z-index: 1;
}
[data-design="v2"] .tbl thead th.is-sortable { cursor: pointer; }
[data-design="v2"] .tbl thead th.is-sortable:hover { color: var(--text-2); }
[data-design="v2"] .tbl thead th.is-sortable::after {
  content: '↕'; margin-left: 6px; opacity: .4;
}
[data-design="v2"] .tbl thead th.is-sorted-asc::after { content: '↑'; opacity: 1; color: var(--accent); }
[data-design="v2"] .tbl thead th.is-sorted-desc::after { content: '↓'; opacity: 1; color: var(--accent); }
[data-design="v2"] .tbl tbody td { padding: var(--p-compact); border-bottom: 1px solid var(--border); }
[data-design="v2"] .tbl tbody tr:hover { background: var(--surface-2); cursor: pointer; }
[data-design="v2"] .tbl tbody tr.is-selected { background: var(--accent-soft); }
[data-design="v2"] .tbl tbody tr:last-child td { border-bottom: 0; }

/* ─── Breadcrumb ─────────────────────────────────────────────────────── */
[data-design="v2"] .crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); color: var(--text-3);
}
[data-design="v2"] .crumb a { color: var(--text-3); text-decoration: none; }
[data-design="v2"] .crumb a:hover { color: var(--text-1); text-decoration: underline; }
[data-design="v2"] .crumb .sep { color: var(--text-disabled); }
[data-design="v2"] .crumb .crumb-active { color: var(--text-2); font-weight: 600; }

/* ─── Pagination ─────────────────────────────────────────────────────── */
[data-design="v2"] .pagination {
  display: flex; align-items: center; gap: 4px;
}
[data-design="v2"] .pagination button {
  min-width: 32px; height: 32px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--t-sm); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-design="v2"] .pagination button:hover { color: var(--text-1); border-color: var(--border-strong); }
[data-design="v2"] .pagination button.is-active { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
[data-design="v2"] .pagination button:disabled { opacity: .4; pointer-events: none; }
[data-design="v2"] .pagination .ellipsis { color: var(--text-3); padding: 0 4px; }

/* ─── Banner (full-width notice at top of canvas) ────────────────────── */
[data-design="v2"] .banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--accent-soft); color: var(--text-1);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: var(--t-sm);
}
[data-design="v2"] .banner.is-warning { background: var(--warning-soft); border-bottom-color: color-mix(in srgb, var(--warning) 30%, transparent); }
[data-design="v2"] .banner.is-danger { background: var(--danger-soft); border-bottom-color: color-mix(in srgb, var(--danger) 30%, transparent); }
[data-design="v2"] .banner .banner-action { margin-left: auto; }

/* ─── Step indicator (progress dots) ─────────────────────────────────── */
[data-design="v2"] .steps {
  display: flex; gap: 6px;
}
[data-design="v2"] .steps .step {
  height: 4px; flex: 1; max-width: 60px;
  background: var(--surface-3);
  border-radius: 2px;
}
[data-design="v2"] .steps .step.is-done { background: var(--accent); }
[data-design="v2"] .steps .step.is-current { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─── Accordion / collapsible ────────────────────────────────────────── */
[data-design="v2"] .accordion-item {
  border-bottom: 1px solid var(--border);
}
[data-design="v2"] .accordion-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 600;
}
[data-design="v2"] .accordion-head .chev {
  width: 14px; height: 14px; color: var(--text-3);
  transition: transform var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .accordion-item.is-open .accordion-head .chev { transform: rotate(90deg); }
[data-design="v2"] .accordion-body {
  display: none;
  padding: 0 0 12px;
  font-size: var(--t-sm); color: var(--text-2); line-height: var(--lh-loose);
}
[data-design="v2"] .accordion-item.is-open .accordion-body { display: block; }

/* ─── Table density + striping + sticky-col (extends .tbl above) ───────── */
[data-design="v2"] .tbl--compact thead th, [data-design="v2"] .tbl--compact tbody td { padding: 6px 12px; font-size: var(--t-sm); }
[data-design="v2"] .tbl--spacious thead th, [data-design="v2"] .tbl--spacious tbody td { padding: var(--p-card); }
[data-design="v2"] .tbl--striped tbody tr:nth-child(even) { background: var(--surface-2); }
[data-design="v2"] .tbl--striped tbody tr:hover { background: var(--surface-3); }
[data-design="v2"] .tbl--bordered { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
[data-design="v2"] .tbl--bordered td, [data-design="v2"] .tbl--bordered th { border-right: 1px solid var(--border); }
[data-design="v2"] .tbl--bordered td:last-child, [data-design="v2"] .tbl--bordered th:last-child { border-right: 0; }
[data-design="v2"] .tbl .tbl-sticky-col { position: sticky; left: 0; background: inherit; z-index: 1; }
[data-design="v2"] .tbl tbody tr.is-expanded + tr.tbl-expanded-row > td {
  background: var(--surface-2);
  padding: var(--p-card);
  border-top: 0;
}
[data-design="v2"] .tbl tbody td.tbl-row--full {
  background: var(--surface-2);
  padding: var(--p-compact);
}

/* ─── Banner (sub-1024 degraded mode) ─────────────────────────────────── */
/* Add this manually to your layout — it doesn't auto-mount. */
[data-design="v2"] .banner--degraded {
  display: none;
  background: var(--warning-soft); color: var(--warning-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  padding: 8px 16px; font-size: var(--t-sm); text-align: center;
}
@media (max-width: 1023px) {
  [data-design="v2"] .banner--degraded { display: block; }
}

/* ─── Mention chip (inline @user) ─────────────────────────────────────── */
[data-design="v2"] .mention {
  display: inline-flex; align-items: baseline;
  padding: 0 4px; border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent);
  font-weight: 600; text-decoration: none;
  font-size: .95em;
}
[data-design="v2"] .mention:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ─── Date input + mini-calendar grid ─────────────────────────────────── */
/* Easiest path: style native <input type="date"> as a .field-input — done.
   For range pickers / mini-calendars, use the .calendar grid below. */
[data-design="v2"] input[type="date"].field-input, [data-design="v2"] input[type="time"].field-input, [data-design="v2"] input[type="datetime-local"].field-input {
  font-family: inherit;
  /* Reserve room for the native picker icon, keep height consistent */
  min-height: 38px;
}
/* Hide the native chevron in webkit (it tints poorly in dark mode), keep
   click target intact via the input itself */
[data-design="v2"] input[type="date"].field-input::-webkit-calendar-picker-indicator, [data-design="v2"] input[type="time"].field-input::-webkit-calendar-picker-indicator, [data-design="v2"] input[type="datetime-local"].field-input::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; filter: invert(0);
}
[data-design="v2"][data-theme="dark"] input[type="date"].field-input::-webkit-calendar-picker-indicator, [data-design="v2"][data-theme="dark"] input[type="time"].field-input::-webkit-calendar-picker-indicator, [data-design="v2"][data-theme="dark"] input[type="datetime-local"].field-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Mini-calendar — drop inside a .popover to make a custom date picker.
   Pure CSS scaffold; JS owns "what day is selected / today". */
[data-design="v2"] .calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 10px;
  background: var(--surface-1);
  border-radius: var(--r-md);
  width: 252px;
}
[data-design="v2"] .calendar-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 8px;
  font-weight: 600;
}
[data-design="v2"] .calendar-head .nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--r-sm); color: var(--text-3);
}
[data-design="v2"] .calendar-head .nav:hover { background: var(--surface-2); color: var(--text-1); }
[data-design="v2"] .calendar-dow {
  font-size: 10px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em;
  text-align: center; padding: 4px 0;
}
[data-design="v2"] .calendar-day {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--text-1);
  cursor: pointer;
}
[data-design="v2"] .calendar-day:hover { background: var(--surface-2); }
[data-design="v2"] .calendar-day.is-other-month { color: var(--text-disabled); }
[data-design="v2"] .calendar-day.is-today { border: 1px solid var(--accent); }
[data-design="v2"] .calendar-day.is-selected { background: var(--accent); color: var(--text-on-accent); font-weight: 600; }
[data-design="v2"] .calendar-day.is-in-range { background: var(--accent-soft); color: var(--accent); border-radius: 0; }
[data-design="v2"] .calendar-day:disabled { color: var(--text-disabled); cursor: not-allowed; }

/* ─── Popover (shared base for menus / pickers / mention pickers) ────── */
[data-design="v2"] .popover {
  position: absolute;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  z-index: var(--z-modal);
  animation: menuIn var(--d-fast) var(--ease-emph);
}

/* ─── Command palette (.cmdk) ────────────────────────────────────────── */
/* Cmd+K style overlay. Renders centered, narrower than .modal.
   Compose: .cmdk-overlay > .cmdk > .cmdk-input + .cmdk-body + .cmdk-foot */
[data-design="v2"] .cmdk-overlay {
  position: fixed; inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  display: grid; place-items: start center;
  padding-top: 14vh;
  z-index: var(--z-cmdk);
  animation: overlayIn var(--d-base) var(--ease-emph);
}
[data-design="v2"] .cmdk {
  width: 100%; max-width: 600px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-5);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
  animation: modalIn var(--d-emph) var(--ease-emph);
}
[data-design="v2"] .cmdk-input {
  display: flex; align-items: center; gap: 10px;
  padding: var(--p-card);
  border-bottom: 1px solid var(--border);
}
[data-design="v2"] .cmdk-input svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
[data-design="v2"] .cmdk-input input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: var(--t-lg); color: var(--text-1);
}
[data-design="v2"] .cmdk-input .kbd { margin-left: auto; }
[data-design="v2"] .cmdk-body { flex: 1; overflow-y: auto; padding: 6px; }
[data-design="v2"] .cmdk-empty { padding: 32px 18px; text-align: center; color: var(--text-3); font-size: var(--t-sm); }
[data-design="v2"] .cmdk-section {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); padding: 12px 10px 4px;
}
[data-design="v2"] .cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: var(--t-md); color: var(--text-1);
  cursor: pointer;
}
[data-design="v2"] .cmdk-item:hover, [data-design="v2"] .cmdk-item.is-focused { background: var(--surface-2); }
/* Keyboard focus uses a ring rather than a bg color, so it can be told
   apart from mouse hover (esp. when both are present). */
[data-design="v2"] .cmdk-item.is-focused { background: var(--accent-soft); }
[data-design="v2"] .cmdk-item .cmdk-icon { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
[data-design="v2"] .cmdk-item.is-focused .cmdk-icon { color: var(--accent); }
[data-design="v2"] .cmdk-item .cmdk-meta { margin-left: auto; font-size: var(--t-xs); color: var(--text-3); }
[data-design="v2"] .cmdk-item .cmdk-hl { color: var(--accent); font-weight: 700; }
[data-design="v2"] .cmdk-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--t-xs); color: var(--text-3);
}
[data-design="v2"] .cmdk-foot .hint { display: inline-flex; align-items: center; gap: 6px; }

/* ─── Dropzone + file tiles (uploads) ────────────────────────────────── */
[data-design="v2"] .dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 28px 20px;
  text-align: center;
  color: var(--text-2);
  transition: border-color var(--d-fast), background var(--d-fast);
}
[data-design="v2"] .dropzone:hover { border-color: var(--accent); }
[data-design="v2"] .dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
[data-design="v2"] .dropzone-icon {
  width: 36px; height: 36px;
  color: var(--text-3);
  margin: 0 auto 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-design="v2"] .dropzone-title { font-weight: 600; color: var(--text-1); font-size: var(--t-md); }
[data-design="v2"] .dropzone-sub { font-size: var(--t-xs); color: var(--text-3); margin-top: 4px; }

[data-design="v2"] .upload-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
[data-design="v2"] .upload-tile-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-design="v2"] .upload-tile-body { flex: 1; min-width: 0; }
[data-design="v2"] .upload-tile-name { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-design="v2"] .upload-tile-meta { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; }
[data-design="v2"] .upload-tile .progress { margin-top: 6px; }

/* File tile (after upload — image/doc/etc thumbnail) */
[data-design="v2"] .file-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
[data-design="v2"] .file-tile:hover { border-color: var(--border-strong); box-shadow: var(--elev-1); }
[data-design="v2"] .file-tile-thumb {
  aspect-ratio: 4 / 3; border-radius: var(--r-sm);
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
}
[data-design="v2"] .file-tile-thumb svg { width: 32px; height: 32px; }
[data-design="v2"] .file-tile-name { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-design="v2"] .file-tile-meta { font-size: var(--t-xs); color: var(--text-3); }

/* ─── Segmented control (radio-as-tabs) ──────────────────────────────── */
[data-design="v2"] .segmented {
  display: inline-flex;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 3px; gap: 2px;
}
[data-design="v2"] .segmented label {
  position: relative;
  padding: 6px 14px;
  border-radius: calc(var(--r-md) - 4px);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--text-2); cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
}
[data-design="v2"] .segmented label:hover { color: var(--text-1); }
[data-design="v2"] .segmented input { position: absolute; opacity: 0; pointer-events: none; }
[data-design="v2"] .segmented label:has(input:checked), [data-design="v2"] .segmented input:checked + label {
  background: var(--surface-1); color: var(--text-1);
  box-shadow: var(--elev-1);
}

/* ─── Stepper (numeric +/-) ──────────────────────────────────────────── */
[data-design="v2"] .stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden;
}
[data-design="v2"] .stepper button {
  width: 32px;
  background: var(--surface-2); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-base); font-weight: 700;
}
[data-design="v2"] .stepper button:hover { background: var(--surface-3); color: var(--text-1); }
[data-design="v2"] .stepper input {
  width: 56px; text-align: center; border: 0; outline: none;
  background: var(--surface-1); color: var(--text-1);
  font-family: inherit; font-size: var(--t-md);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
[data-design="v2"] .stepper:focus-within { border-color: var(--accent); box-shadow: var(--ring); }

/* ===== src/corporate/primitives/sidebar.css (second-brain) ===== */
/* ─── Sidebar ─────────────────────────────────────────────────────────── */
.corporate-sidebar[data-design="v2"] {
  position: relative;             /* anchor for .sidebar-collapse */
  /* Vertical rhythm defined once. Every row and group-label slot uses these
     fixed heights, so nothing content-driven (label text, count badge, fonts)
     can change a row's height — the collapsed and expanded icon columns line
     up by construction; collapsed only changes width. */
  --sb-item-h: 32px;
  --sb-label-h: 30px;
  width: var(--sidebar-w-expanded);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 14px 10px;
  gap: 4px;
  flex-shrink: 0;
  transition: width var(--d-base) var(--ease-standard);
  /* Keep overflow visible so the .sidebar-collapse chevron (which sits at
     right: -9px) isn't clipped. Scroll happens on the inner .sidebar-scroll
     wrapper, OR — if you don't need scroll — leave as-is. */
  overflow: visible;
}
/* Optional scroll wrapper. Use this when sidebar content overflows. */
[data-design="v2"] .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
/* Collapsed mode — the sidebar is ALWAYS position: absolute when collapsed
   (whether hovered or not). Width is the only thing that animates between
   the two collapsed states (56 → 220 on hover). Without this, swapping
   position: relative ↔ absolute mid-transition produced a layout jump as
   the spacer slid in/out — that's what looked weird. The phantom spacer
   below holds the layout slot the whole time the sidebar is collapsed. */
.corporate-sidebar[data-design="v2"][data-collapsed="true"],
.corporate-sidebar[data-design="v2"].is-hover-expanded {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: var(--z-panel);
  padding: 14px 0;
  align-items: center;
  /* Only width transitions — keep it tight so the user doesn't feel a
     drag on the cursor entering/leaving. */
  transition: width var(--d-fast) var(--ease-standard),
              box-shadow var(--d-fast) var(--ease-standard),
              padding var(--d-fast) var(--ease-standard);
}
.corporate-sidebar[data-design="v2"][data-collapsed="true"] {
  width: var(--sidebar-w-collapsed);
  box-shadow: none;
}
.corporate-sidebar[data-design="v2"].is-hover-expanded {
  /* hover overlay — raise it with a shadow so it reads as a panel
     floating over the canvas. width comes from the inline `style.width`
     (the user's preferred expanded width). */
  padding: 14px 10px;
  align-items: stretch;
  box-shadow: var(--elev-3);
}
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-item-label, .corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-title, .corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-workspace, .corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-item-count, .corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-cmd-label, .corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-cmd-kbd { display: none; }
/* Group labels (Work, Knowledge…) keep their box when collapsed so the
   nav icons in both states sit at the same vertical position — no
   visual jump when the sidebar expands. The text is hidden but the
   padding + line-height still reserve the slot. */
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-group-label { visibility: hidden; }
/* Collapsed differs from the base row only horizontally — same padding and
   (icon-pinned) height, just centred. Keeping vertical metrics defined once,
   above, is what makes the collapsed/expanded icon columns line up exactly. */
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-item { justify-content: center; }
/* The user-menu (avatar) trigger isn't a .sidebar-item, and its existing
   centring rule keys on the legacy `.sidebar--collapsed` class, which the v2
   sidebar never sets — so the avatar sat left-aligned when collapsed. Centre it
   here under [data-collapsed] like the icon rows above it. */
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .user-menu-trigger { justify-content: center; padding: 6px; }
/* When the sidebar is collapsed it switches to align-items: center, which
   removes the default cross-axis stretch — so .sidebar-scroll / .sidebar-foot
   would otherwise take their intrinsic width (driven by the hidden group
   labels' text), spilling past the 56-px column and making the active
   item's pill bleed into the canvas. Force them back to full sidebar width. */
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-scroll,
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-foot,
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-group {
  width: 100%;
  align-self: stretch;
}
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-cmd { padding: 8px; }
.corporate-sidebar[data-design="v2"].is-hover-expanded .sidebar-item {
  justify-content: flex-start;
  padding: 7px 10px;
}

/* Phantom spacer — holds the collapsed 56-px slot in flex flow while
   the real sidebar is in hover-overlay mode (position: absolute). */
[data-design="v2"] .sidebar-spacer {
  width: var(--sidebar-w-collapsed);
  min-width: var(--sidebar-w-collapsed);
  flex-shrink: 0;
  height: 100vh;
}

/* Unread dot — sits on the icon when the sidebar is collapsed and a
   nav row has a count > 0 (e.g. Inbox unread). The icon span gets
   position: relative inside the sidebar-item so this can pin top-right. */
[data-design="v2"] .sidebar-item .sidebar-item-icon { position: relative; }
[data-design="v2"] .sidebar-item-dot {
  position: absolute;
  top: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface-1);
  box-sizing: content-box;
  pointer-events: none;
}

/* Pin button — small icon button in the sidebar head. */
[data-design="v2"] .sidebar-pin {
  margin-left: auto;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  padding: 4px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-standard), color var(--d-fast);
}
[data-design="v2"] .sidebar-pin:hover { background: var(--surface-2); color: var(--text-1); }
[data-design="v2"] .sidebar-pin.is-pinned { color: var(--accent); }

[data-design="v2"] .sidebar-head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 14px;
}
[data-design="v2"] .sidebar-mark {
  width: 32px; height: 32px;
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-design="v2"] .sidebar-mark svg { width: 100%; height: 100%; }
[data-design="v2"] .sidebar-title { font-weight: 600; letter-spacing: -.01em; font-size: var(--t-base); }
[data-design="v2"] .sidebar-workspace {
  font-size: var(--t-xs); color: var(--text-3);
  padding: 4px 8px; border-radius: var(--r-sm);
  cursor: pointer;
}

/* Sidebar command-bar trigger */
[data-design="v2"] .sidebar-cmd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  margin: 4px 4px 14px;
  /* Override <button>'s default center alignment so the "Search" label
     sits flush-left after the magnifier icon. */
  text-align: left;
}
[data-design="v2"] .sidebar-cmd:hover { border-color: var(--border-strong); }
[data-design="v2"] .sidebar-cmd-icon { width: 14px; height: 14px; flex-shrink: 0; }
[data-design="v2"] .sidebar-cmd-label { flex: 1; font-size: var(--t-sm); }
[data-design="v2"] .sidebar-cmd-kbd {
  font-family: var(--font-mono); font-size: var(--t-xs);
  background: var(--surface-3); padding: 2px 6px; border-radius: var(--r-xs);
  color: var(--text-2);
}

/* Sidebar groups + items */
[data-design="v2"] .sidebar-group { display: flex; flex-direction: column; gap: 1px; }
[data-design="v2"] .sidebar-group-label {
  /* Fixed-height slot: reserves exactly the same vertical space in both states
     (collapsed merely hides the text via visibility:hidden). Text is one line,
     bottom-aligned, so it can never wrap or change the box height. */
  height: var(--sb-label-h);
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 0 12px 6px;
  font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
[data-design="v2"] .sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-md);
  /* Fixed height (not content-driven): a row is exactly --sb-item-h in every
     state — with or without its label/badge. This is what guarantees the
     collapsed and expanded icon columns line up; collapsed only changes width,
     never box height. */
  height: var(--sb-item-h);
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  /* <button> defaults to text-align: center in user-agent stylesheets.
     Override so .sidebar-item-label sits flush-left after the icon. */
  text-align: left;
  width: 100%;
}
[data-design="v2"] .sidebar-item:hover { background: var(--surface-2); color: var(--text-1); }
[data-design="v2"] .sidebar-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
[data-design="v2"] .sidebar-item-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: .9;
}
[data-design="v2"] .sidebar-item.is-active .sidebar-item-icon { opacity: 1; }
[data-design="v2"] .sidebar-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-design="v2"] .sidebar-item-count {
  font-size: var(--t-xs); color: var(--text-3);
  background: var(--surface-3); padding: 1px 7px; border-radius: var(--r-pill);
  /* Keep the badge within the 18px row box so the one row that has a count
     (Inbox) isn't taller when expanded (badge shown) than when collapsed
     (badge hidden). */
  line-height: 14px;
}
[data-design="v2"] .sidebar-item.is-active .sidebar-item-count { background: var(--accent); color: var(--text-on-accent); }
/* The avatar (user-menu) trigger isn't a .sidebar-item. Pin its height and keep
   the name/role block within the 32px avatar so the trigger is the SAME height
   expanded (avatar + info) as collapsed (avatar only) — otherwise the taller
   info text shifts the foot icons above it between states. */
.corporate-sidebar[data-design="v2"] .user-menu-trigger { box-sizing: border-box; min-height: 44px; }
.corporate-sidebar[data-design="v2"] .user-menu-trigger-info { line-height: 1.25; }
[data-design="v2"] .sidebar-item-badge {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-left: auto;
}

/* Sidebar collapse toggle — anchored to .sidebar (position: relative above).
   z-index has to clear the adjacent .resize-handle (z-index:10 + an
   ::after hit area that overhangs 4px into the sidebar's right edge),
   otherwise the handle swallows the chevron's click target. z-panel
   (=90) puts the chevron clearly above the handle without entering
   modal/tooltip territory. */
[data-design="v2"] .sidebar-collapse {
  position: absolute; top: 18px; right: -9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: var(--z-panel);
  transition: transform var(--d-fast) var(--ease-standard);
}
[data-design="v2"] .sidebar-collapse:hover { color: var(--text-1); border-color: var(--border-strong); }
.corporate-sidebar[data-design="v2"][data-collapsed="true"] .sidebar-collapse { transform: rotate(180deg); }

/* Sidebar footer */
[data-design="v2"] .sidebar-foot {
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ===== src/tokens.local.css (overlay) ===== */
/*
 * Project-owned token overrides belong here. This file is deliberately empty
 * in the first extraction so the current visual output remains unchanged.
 */

/* ===== src/primitives.local.css (overlay) ===== */
/*
 * Project-owned primitive overrides belong here. Keep selectors hds-prefixed
 * until the Bootstrap migration is complete.
 */

/* The legacy vendor stylesheet used to provide a global box-sizing reset.
 * Corporate primitives must own that invariant inside their v2 boundary so
 * inputs, grids and modal panels do not grow beyond their allocated width. */
[data-design="v2"],
[data-design="v2"] *,
[data-design="v2"] *::before,
[data-design="v2"] *::after {
  box-sizing: border-box;
}

/* Native buttons do not inherit the surrounding font in every browser.
 * Keep corporate Button labels aligned with the typography of each v2
 * surface, including modal footers. */
[data-design="v2"] .btn {
  font-family: inherit;
}

/*
 * Bootstrap's global `.modal` makes every matching element fixed at (0, 0).
 * The corporate Modal intentionally uses the same semantic class, but lives
 * inside its own `.modal-overlay`; reset Bootstrap's layout-only properties
 * within the v2 boundary so the overlay grid can center the dialog.
 */
[data-design="v2"] .modal {
  bottom: auto;
  height: auto;
  inset: auto;
  margin: 0;
  position: relative;
  right: auto;
  top: auto;
}

/*
 * The corporate close control is a native <button>. Reset the browser button
 * chrome inside v2 surfaces so it follows the token-driven hover treatment
 * declared by the synchronized modal primitive.
 */
[data-design="v2"] .close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

[data-design="v2"] .close:focus-visible {
  outline: 0;
  box-shadow: var(--ring);
}

/*
 * The synced primitive paints the checkbox tick with the text glyph '✓'
 * (U+2713). Titillium Web — the font every v2 surface inherits — is served by
 * Google Fonts in the `latin` and `latin-ext` subsets only, and neither
 * `unicode-range` covers U+2713, so the tick was never drawn by the page font:
 * it fell through to whatever the OS offered for that codepoint. The checked
 * state therefore rendered differently per browser, and where the fallback
 * resolved to a font without the glyph it drew no visible tick at all.
 * Draw the tick geometrically so it depends on neither font coverage nor the
 * fallback's baseline metrics.
 */
[data-design="v2"] .check input:checked + .check-box::after {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  content: '';
  display: block;
  height: 8px;
  transform: rotate(45deg) translate(-1px, -1px);
  width: 4px;
}