/* ============================================================
   Pocket Production — Design System Base
   Shared across all apps. Import before app-specific styles.
   ----------------------------------------------------
   Tokens (color, type, spacing, radii, shadows) are defined in
   `tokens.css` and pulled in via @import on line 1 below. Body /
   heading / label / numeric typography rules also live there.
   This file holds component CSS only (buttons, chips, panels,
   skeletons, navigation, etc.).

   SOURCE OF TRUTH — ui_kits/ pages in the design project are
   archive. Edit this file and tokens.css, not those.
   See DESIGN_CANON.md for design philosophy and rationale.
   ============================================================ */

@import url('tokens.css');

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Semantic Type Utility Classes ─────────────────────────── */
/* (body / h1-h6 / .label / .numeric / code rules live in tokens.css.) */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }

/* ── Loading Spinner ───────────────────────────────────────── */
.loading-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-page, #1A1D24);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loading-overlay.hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.spinner-container {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.spinner-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--accent-dim);
  border-top-color: var(--accent);
  animation: spin6d 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  display: flex; align-items: center; justify-content: center;
}
.spinner-logo {
  font-family: 'Figtree', sans-serif;
  font-weight: 700; font-size: 22px; color: var(--accent);
  letter-spacing: -0.5px;
  animation: pulse6d 1.5s ease-in-out infinite;
}
.spinner-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--text-tertiary);
  letter-spacing: 1px;
}
@keyframes spin6d { to { transform: rotate(360deg); } }
@keyframes pulse6d { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ============================================================
   Skeleton loaders — canonical loading-state primitives
   ----------------------------------------------------
   Use instead of spinner-over-blank when the shape of the
   incoming content is known (table rows, KPI cards, kanban
   cards, list items). Reads as Notion/Monday-tier polish.

   Markup pattern:
     <div class="skeleton skeleton-text"></div>
     <div class="skeleton skeleton-text skeleton--w-50"></div>
     <div class="skeleton skeleton-block" style="height: 80px"></div>

   Compose via .skeleton-row, .skeleton-card, .skeleton-kpi
   helpers below. Set aria-busy="true" + aria-live="polite"
   on the parent so screen readers announce loading correctly.

   Honors prefers-reduced-motion (animation pauses, color cue
   stays).
   ============================================================ */

.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--bg-row) 0%,
    var(--bg-row-hover) 50%,
    var(--bg-row) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-row-hover); }
}

/* Variants */
.skeleton-text {
  height: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.skeleton-text:last-child { margin-bottom: 0; }

.skeleton-text--lg { height: 18px; }
.skeleton-text--sm { height: 10px; }

.skeleton-block {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-md);
}

.skeleton-circle {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* Width helpers — use to vary line lengths so the placeholder
   doesn't look like a uniform brick. */
.skeleton--w-25  { width: 25%; }
.skeleton--w-40  { width: 40%; }
.skeleton--w-50  { width: 50%; }
.skeleton--w-60  { width: 60%; }
.skeleton--w-75  { width: 75%; }
.skeleton--w-90  { width: 90%; }

/* Compositional helpers — drop into a list/table to fake row count. */
.skeleton-row {
  display: grid;
  grid-template-columns: 24px 1fr 100px 100px 80px;
  gap: 12px;
  align-items: center;
  padding: 12px var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}
.skeleton-row .skeleton {
  height: 14px;
  margin: 0;
}
.skeleton-row .skeleton-circle { height: 24px; width: 24px; }

.skeleton-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 96px;
}
.skeleton-kpi .skeleton-text--lg { width: 60%; height: 24px; }

/* Light mode — softer gradient on white surface */
[data-theme="light"] .skeleton {
  background: linear-gradient(
    90deg,
    #ECECE7 0%,
    #F5F5F0 50%,
    #ECECE7 100%
  );
  background-size: 200% 100%;
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 48px; right: 0;
  height: var(--topbar-height);
  background: var(--topbar);
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  transition: left 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
body.sixd-nav-open .topbar { left: 240px; }
[data-theme="light"] .topbar {
  background: #FFFFFF; color: #1A1D24;
  border-bottom: 1px solid #D8D8D3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.logo-circle {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-base); color: #fff;
  letter-spacing: -0.5px; flex-shrink: 0;
  transition: transform 0.15s ease;
}
.logo-circle:hover { transform: scale(1.06); }
.topbar .logo-circle { display: none; }

.topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.topbar-brand-name {
  font-size: var(--fs-md); font-weight: var(--fw-bold); font-family: var(--font-family);
  color: var(--text-primary); line-height: var(--lh-tight);
}
.topbar-brand-name .studio { color: #5A7F62; }

.version-badge {
  font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 400; opacity: 0.6;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 8px 16px; border-radius: 8px;
  font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer; font-family: var(--font-family);
  transition: all 0.15s ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-secondary {
  background: var(--bg-row); color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 8px 16px; border-radius: 8px;
  font-weight: 500; font-size: var(--fs-sm);
  cursor: pointer; font-family: var(--font-family);
  transition: all var(--transition);
}
.btn-secondary:hover { background: var(--bg-row-hover); border-color: var(--accent); }

.btn-icon {
  background: none; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
  transition: all var(--transition);
}
.btn-icon:hover { background: var(--bg-row-hover); color: var(--text-primary); border-color: var(--accent); }

.btn-signout {
  background: none; border: 1px solid var(--border-color);
  color: var(--text-secondary); padding: 6px 14px;
  border-radius: 8px; font-size: var(--fs-sm);
  font-weight: 500; cursor: pointer;
  font-family: var(--font-family);
  transition: all 0.15s ease;
}
.btn-signout:hover { border-color: var(--danger); color: var(--danger); }

.theme-toggle-btn {
  background: none; border: none; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; font-size: var(--fs-md); line-height: 1;
  transition: all 0.2s; display: flex; align-items: center; outline: none;
  color: var(--text-secondary);
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.1); }
.theme-toggle-btn:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
[data-theme="light"] .theme-toggle-btn { color: #1A1D24; }
[data-theme="light"] .theme-toggle-btn:hover { background: rgba(26,29,36,0.08); }

/* Topbar app-name and studio label */
.topbar .app-name {
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: #fff; line-height: var(--lh-tight);
}
[data-theme="light"] .topbar .app-name { color: var(--text-primary); }
.topbar .studio {
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--accent); line-height: var(--lh-tight);
}

/* ============================================================
   Canonical topbar components (opt-in)
   ----------------------------------------------------
   New additive classes for consistent topbar UI across apps.
   Per-app sweep will gradually adopt these and retire one-off
   button/input styles defined inline. Existing classes are NOT
   modified to avoid regressions.

   Canonical topbar layout:
     .topbar
       .topbar-left         brand + tabs (flex-shrink: 0)
       .topbar-actions      right side action group
         .topbar-search     pill input with icon
         .btn-ghost         secondary actions (Import / Export / Filter)
         .btn-primary       primary action (+ New)
         .theme-toggle-btn  icon-only theme switch
         .btn-signout       sign-out
   ============================================================ */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Ghost button — transparent fill, visible outline. The canonical
   secondary action pattern. Reads cleanly on any topbar fill. */
.btn-ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--font-family);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.36);
}
.btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-theme="light"] .btn-ghost {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: var(--text-primary);
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.32);
}

/* Danger variant — for destructive secondary actions */
.btn-ghost-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--font-family);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.btn-ghost-danger:hover {
  background: var(--danger);
  color: #fff;
}

/* P2-H: Universal press feedback + P2-F: Styled empty states */
.btn-primary:active,.btn-secondary:active,.btn-icon:active,.btn-ghost:active,.btn-ghost-danger:active,.btn-signout:active{transform:scale(0.97)}
@media (prefers-reduced-motion:reduce){.btn-primary:active,.btn-secondary:active,.btn-icon:active,.btn-ghost:active,.btn-ghost-danger:active,.btn-signout:active{transform:none}}

/* P2-F: Dotted-grid empty state — opt-in with .empty-studio on any wrapper */
.empty-studio{display:flex;flex-direction:column;align-items:center;padding:72px 32px;text-align:center;position:relative;overflow:hidden}
.empty-studio::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--border-color) 1px,transparent 1px);background-size:24px 24px;opacity:.3;pointer-events:none}
.empty-studio-icon{width:52px;height:52px;margin-bottom:16px;position:relative;z-index:1;opacity:.8;display:flex;align-items:center;justify-content:center}
.empty-studio-icon svg{width:52px;height:52px}
.empty-studio-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:8px;position:relative;z-index:1;letter-spacing:-.01em}
.empty-studio-sub{font-size:12.5px;color:var(--text-secondary);max-width:34ch;line-height:1.65;margin-bottom:22px;position:relative;z-index:1}
.empty-studio-cta{position:relative;z-index:1}

/* Topbar search — pill input with leading icon. Opt in by wrapping
   <input> in a .topbar-search div with an SVG <svg class="topbar-search-icon">. */
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 7px 12px;
  min-height: 36px;
  max-width: 280px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.topbar-search:focus-within {
  border-color: var(--accent);
  background: rgba(255,255,255,0.10);
}
.topbar-search-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color var(--transition-fast);
}
.topbar-search:focus-within .topbar-search-icon {
  color: var(--text-secondary);
}
.topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  width: 100%;
  min-width: 80px;
}
.topbar-search input::placeholder {
  color: var(--text-tertiary);
}
[data-theme="light"] .topbar-search {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .topbar-search:focus-within {
  background: rgba(0,0,0,0.05);
  border-color: var(--accent);
}

/* ============================================================
   Chip pill — canonical status / category / tag component
   ----------------------------------------------------
   Use for status fields (Draft/Sent/Paid), categories, tags,
   format labels, person initials, etc. Replaces the bespoke
   .status-*, .badge, .deal-status-badge etc. patterns each
   studio rolls today.

   Usage:
     <span class="chip-pill chip-pill--success">Paid</span>
     <span class="chip-pill chip-pill--info">Sent</span>
     <span class="chip-pill chip-pill--neutral">Draft</span>
     <button class="chip-pill chip-pill--editable chip-pill--warning">
       In progress
     </button>

   Color variants: --neutral, --success, --warning, --danger,
                   --info, --accent, --gold, --teal, --olive,
                   --slate, --coral, --pink, --purple
   Modifiers:      --editable (hover ring + click cursor)
                   --sm (smaller), --lg (larger)
   ============================================================ */

.chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  background: var(--bg-row-hover);
  color: var(--text-secondary);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Size variants */
.chip-pill--sm { height: 18px; padding: 0 8px; font-size: 10px; gap: 4px; }
.chip-pill--lg { height: 26px; padding: 0 12px; font-size: var(--fs-sm); gap: 8px; }

/* Color variants — use semantic + extended palette */
.chip-pill--neutral { background: var(--bg-row-hover); color: var(--text-secondary); }
.chip-pill--success { background: var(--success-bg); color: var(--success); }
.chip-pill--warning { background: var(--warning-bg); color: var(--warning); }
.chip-pill--danger  { background: var(--danger-bg);  color: var(--danger);  }
.chip-pill--info    { background: var(--blue-bg);    color: var(--blue);    }
.chip-pill--accent  { background: var(--accent-dim); color: var(--accent);  }

/* Extended palette — for category/tag chips */
.chip-pill--gold    { background: rgba(212,162,76,0.18);  color: #D4A24C; }
.chip-pill--teal    { background: rgba(74,155,142,0.18);  color: #4A9B8E; }
.chip-pill--olive   { background: rgba(139,154,90,0.18);  color: #8B9A5A; }
.chip-pill--slate   { background: rgba(122,136,152,0.18); color: #7A8898; }
.chip-pill--coral   { background: rgba(212,114,106,0.18); color: #D4726A; }
.chip-pill--pink    { background: rgba(216,138,174,0.18); color: #D88AAE; }
.chip-pill--purple  { background: rgba(139,123,196,0.18); color: #8B7BC4; }
.chip-pill--red     { background: rgba(200,90,90,0.18);   color: #C85A5A; }

/* Editable — adds hover ring + click affordance for inline-edit cells */
.chip-pill--editable {
  cursor: pointer;
}
.chip-pill--editable:hover {
  border-color: currentColor;
  filter: brightness(1.08);
}
.chip-pill--editable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Light mode — slightly more saturated backgrounds since we have white surface */
[data-theme="light"] .chip-pill--success { background: rgba(74,143,114,0.14); }
[data-theme="light"] .chip-pill--warning { background: rgba(184,134,43,0.14); }
[data-theme="light"] .chip-pill--danger  { background: rgba(200,90,90,0.10); }
[data-theme="light"] .chip-pill--info    { background: rgba(74,111,184,0.12); }
[data-theme="light"] .chip-pill--accent  { background: var(--accent-dim); }

/* Dot prefix — useful for status indicators */
.chip-pill .chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   Bulk action bar — canonical multi-select toolbar
   ----------------------------------------------------
   Slides up from bottom of viewport when 1+ rows are selected.
   First implemented inline in Pipeline (commit fc68564); promoted
   here so Invoice / Rolodex / etc. can adopt without duplicating.

   Markup pattern:
     <div class="bulk-action-bar" id="bulkActionBar" role="toolbar">
       <div class="bulk-action-count">
         <span class="num" id="bulkCount">0</span> selected
       </div>
       <div class="bulk-action-divider"></div>
       <button class="bulk-action-btn">…Export</button>
       <button class="bulk-action-btn danger">…Delete</button>
       <div class="bulk-action-divider"></div>
       <button class="bulk-action-btn">✕ Clear</button>
     </div>

   App JS toggles `.visible` on the bar based on selection count.
   Selected rows get `.selected` class — see .row.selected below.
   ============================================================ */

.bulk-action-bar {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px 10px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: bottom 0.25s cubic-bezier(0.22,0.61,0.36,1), opacity 0.2s ease;
  font-family: var(--font-family);
  white-space: nowrap;
}
.bulk-action-bar.visible {
  bottom: max(24px, env(safe-area-inset-bottom));
  opacity: 1;
  pointer-events: auto;
}
.bulk-action-count {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.bulk-action-count .num {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bulk-action-divider {
  width: 1px;
  height: 22px;
  background: var(--border-color);
}
.bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.bulk-action-btn:hover {
  background: var(--bg-row-hover);
  color: var(--text-primary);
}
.bulk-action-btn.danger {
  color: var(--danger);
}
.bulk-action-btn.danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}
.bulk-action-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Selected row tint — additive, app .row class still wins layout. */
.row.selected,
tr.selected,
.invoice-row.selected,
.contact-row.selected {
  background-color: var(--accent-dim) !important;
}

/* ============================================================
   Detail panel — canonical right-slide-over inspector
   ----------------------------------------------------
   First implemented inline in Pipeline (CSS ~3064, JS ~8406);
   Rolodex has a smaller variant (400px). Promoted here so every
   app uses one pattern: row-title click slides a panel in from
   the right with the record's full detail.

   Markup pattern (minimum):
     <div class="detail-panel-overlay" id="detailPanelOverlay"></div>
     <aside class="detail-panel" id="detailPanel" role="dialog"
            aria-modal="true" aria-labelledby="detailPanelTitle">
       <header class="detail-panel-header">
         <h2 class="detail-panel-title" id="detailPanelTitle">…</h2>
         <button class="detail-panel-close" aria-label="Close">×</button>
       </header>
       <nav class="detail-panel-tabs" role="tablist">
         <button class="detail-tab active" data-detail-tab="info">Info</button>
         <button class="detail-tab" data-detail-tab="activity">Activity</button>
       </nav>
       <div class="detail-panel-body">…</div>
       <footer class="detail-panel-footer">
         <button class="btn-ghost">Edit</button>
         <button class="btn-primary">Save</button>
       </footer>
     </aside>

   App JS toggles `.open` on both .detail-panel-overlay and
   .detail-panel together. Click overlay or .detail-panel-close
   or press Escape to close.

   Width: defaults to 560px via --detail-panel-w. Apps can
   override per-app by setting that custom prop on :root or on
   the panel element. Mobile/tablet stretches to full width.
   ============================================================ */

:root {
  --detail-panel-w: 560px;
}

.detail-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 399;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.detail-panel-overlay.open {
  opacity: 1;
  visibility: visible;
}

.detail-panel {
  position: fixed;
  top: 0;
  right: calc(var(--detail-panel-w) * -1);
  width: var(--detail-panel-w);
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
  z-index: 400;
  display: flex;
  flex-direction: column;
  transition: right var(--transition-slow);
  font-family: var(--font-family);
}
.detail-panel.open { right: 0; }

[data-theme="light"] .detail-panel {
  border-left-color: var(--border-color);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
}

/* Header — title + close. Sticky at the top of the panel. */
.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-row);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.detail-panel-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.detail-panel-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.detail-panel-close:hover {
  background: var(--bg-row-hover);
  color: var(--text-primary);
}
.detail-panel-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tabs — flex row, scroll-x on overflow, scrollbar hidden. */
.detail-panel-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.detail-panel-tabs::-webkit-scrollbar { display: none; }

.detail-tab {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.detail-tab:hover { color: var(--text-primary); }
.detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.detail-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Body — flex:1, scrollable */
.detail-panel-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}

/* Footer — sticky at the bottom of the panel. Hosts action buttons. */
.detail-panel-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-row);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}
.detail-panel-footer .btn-primary,
.detail-panel-footer .btn-secondary,
.detail-panel-footer .btn-ghost,
.detail-panel-footer .btn-ghost-danger {
  flex: 1;
  text-align: center;
  justify-content: center;
}

/* Field-group / field-grid / field — reusable inner blocks lifted from
   Pipeline so every app's panel body has the same rhythm. */
.detail-field-group { margin-bottom: 22px; }
.detail-field-group:last-child { margin-bottom: 0; }
.detail-field-group-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.detail-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.detail-field.full-width { grid-column: 1 / -1; }
.detail-field-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.detail-field-value {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  background: var(--bg-row);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.detail-field-value:hover {
  border-color: var(--accent);
  background: var(--bg-row-hover);
}
.detail-field-value.empty {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Tablet: clamp width so it never dominates the screen on narrow desktops. */
@media (max-width: 1024px) {
  :root { --detail-panel-w: 480px; }
}

/* Phone: bottom sheet — slides up from the bottom edge, full width, rounded top. */
@media (max-width: 768px) {
  :root { --detail-panel-w: 100vw; }
  .detail-panel {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100vw; height: 92vh;
    transform: translateY(100%);
    transition: transform var(--transition-slow);
    border-left: none; border-top: 1px solid var(--border-color);
    border-top-left-radius: 14px; border-top-right-radius: 14px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  }
  .detail-panel.open { right: 0; transform: translateY(0); }
  .detail-panel-header { padding: 12px 16px; }
  .detail-panel-body { padding: 16px; }
  .detail-panel-footer { padding: 10px 16px; flex-direction: column; }
  .detail-panel-footer .btn-primary,
  .detail-panel-footer .btn-secondary,
  .detail-panel-footer .btn-ghost,
  .detail-panel-footer .btn-ghost-danger { width: 100%; }
  .detail-field-grid { grid-template-columns: 1fr; }
}

/* ── Mobile table utilities ─────────────────────────────────── */
/* Wrap any <table> in .table-wrap to get horizontal scroll with
   momentum on iOS. Combine with .sticky-col on first th/td. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* First column stays visible during horizontal table scroll. */
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-surface);
  box-shadow: 1px 0 0 var(--border-color-lt);
}
/* Mobile-only elements: close buttons on bottom sheets, drag handles, etc.
   Hide on desktop with this class; show by removing it at max 768px. */
@media (min-width: 769px) {
  .m-only { display: none !important; }
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-label {
  display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-secondary); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-row); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-family: var(--font-family); font-size: var(--fs-base);
  transition: border-color 0.2s, background 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); }

/* ── Cards ─────────────────────────────────────────────────── */
.card, .kanban-card, .deal-card, .grid-card, .kpi-card, .stat-card, .chart-card, .clause-card, .template-card, .update-card {
  border-radius: var(--radius-md);
}
.card {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: var(--space-xl);
  transition: all 0.2s;
}
.card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Table Headers (standardized) ─────────────────────────── */
th { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 500;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: var(--space-xl);
  box-shadow: var(--shadow-lg); max-width: 560px; width: 90%;
  max-height: 80vh; overflow-y: auto;
}
.modal-title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

/* ── P0-2: date/time inputs — dark-mode color-scheme ───────── */
input[type="date"],
input[type="time"] {
  color-scheme: dark;
}
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"] {
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 10px 20px;
  box-shadow: var(--shadow-md); z-index: 9000;
  font-size: var(--fs-sm); color: var(--text-primary);
  animation: toastIn 0.3s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }

/* ── Theme Toggle ──────────────────────────────────────────── */
.theme-toggle {
  background: none; border: none; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; font-size: var(--fs-md); line-height: 1;
  transition: all 0.2s; display: flex; align-items: center; outline: none;
  color: var(--text-secondary);
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); }
.theme-toggle:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
[data-theme="light"] .theme-toggle { color: #1A1D24; }
[data-theme="light"] .theme-toggle:hover { background: rgba(26,29,36,0.08); }

/* ── Accessibility ─────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Empty State ───────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 48px 24px;
  color: var(--text-secondary);
}
.empty-state-icon {
  font-size: 40px; margin-bottom: 12px; opacity: 0.3;
}
.empty-state-title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: 6px;
  color: var(--text-primary);
}
.empty-state-text {
  font-size: var(--fs-sm); margin-bottom: 16px; max-width: 360px; margin-inline: auto;
}
.empty-state-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  text-decoration: none; cursor: pointer;
  transition: opacity 0.15s;
}
.empty-state-cta:hover { opacity: 0.8; }

/* ── Empty State — Enhancements ───────────────────────────── */

/* Compact empty state for inline use (kanban columns, table groups) */
.empty-state.compact {
  padding: 20px 12px;
}
.empty-state.compact .empty-state-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
.empty-state.compact .empty-state-title {
  font-size: var(--fs-sm);
}
.empty-state.compact .empty-state-text {
  font-size: var(--fs-xs);
}

/* KPI card empty accent text */
.hero-card .stat[style*="color:var(--accent)"] {
  font-weight: 500;
}

/* ── Mobile Responsive ─────────────────────────────────────── */

/* Hamburger button — hidden by default, shown on mobile */
.sixd-mobile-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: none; border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.sixd-mobile-hamburger:hover { background: var(--bg-row-hover); }
.sixd-mobile-hamburger svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Mobile nav backdrop */
.sixd-nav-backdrop {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 250;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sixd-nav-backdrop.visible { display: block; }

/* Tablet: ≤ 768px */
@media (max-width: 768px) {
  /* Hide the fixed sidebar */
  .sixd-nav { display: none !important; }

  /* Remove body margin that the sidebar creates */
  body { margin-left: 0 !important; }
  body.sixd-nav-open { margin-left: 0 !important; }

  /* Topbar: reset left offset; pad left for hamburger overlay */
  .topbar { left: 0 !important; padding: 0 12px 0 56px; }
  body.sixd-nav-open .topbar { left: 0 !important; }

  /* Show hamburger */
  .sixd-mobile-hamburger { display: flex; }
  /* When the drawer is open the hamburger sits behind it — hide so the
     close-via-backdrop-tap is the obvious gesture. */
  body:has(.sixd-nav.mobile-open) .sixd-mobile-hamburger { display: none; }

  /* Per-studio fixed headers (.topbar variants) — same left clearance */
  header.topbar, .top-bar, .tb { padding-left: 56px !important; }

  /* Mobile nav overlay */
  .sixd-nav.sixd-mobile-nav {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    max-width: 80vw;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sixd-nav.sixd-mobile-nav.expanded {
    width: 240px;
  }
  .sixd-nav.sixd-mobile-nav .nav-label {
    opacity: 1; width: auto;
  }
  .sixd-nav.sixd-mobile-nav.mobile-open {
    transform: translateX(0);
  }

  /* Modal: full-width on mobile */
  .modal { max-width: 100% !important; width: calc(100% - 24px) !important; }

  /* Toast: fit to screen */
  .toast { max-width: calc(100vw - 32px); }
}

/* Small mobile: ≤ 480px */
@media (max-width: 480px) {
  .topbar { font-size: 13px; min-height: 44px; }
  .topbar-right { gap: 4px; }
  .topbar-brand-name { font-size: var(--fs-sm); }
  .version-badge { display: none; }

  /* iOS Safari zooms into form fields when font-size < 16px. Force 16px on
     phones globally for any text-entry input. Studios that override this
     for a specific input can opt back in to a smaller size with !important. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px;
  }

  /* Cards: tighter padding */
  .card { padding: var(--space-lg); }

  /* Forms: larger touch targets */
  .form-input, .form-select, .form-textarea { min-height: 40px; font-size: 16px !important; }
  .btn-primary, .btn-secondary { min-height: 40px; }

  /* P0-3: bulk-action-btn 44px tap target (Apple HIG) */
  .bulk-action-btn { min-height: 44px; padding: 10px 14px; }
}

/* P1-5: honor prefers-reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   ─── Claude Design Patterns ──────────────────────────────────
   Shared visual language ported from _design-handoff/. Every
   studio inherits these by linking 6d-base.css. Per-studio CSS
   only adds what's specific to that app.
   ============================================================ */

/* ── Brand mark (gradient logo + wordmark + sub) ─── */
.six-mark{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font:800 12px/1 var(--font-family);color:#0F0F0E;letter-spacing:-.5px;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent-hover))}
.b-name,.brand-name-cd{color:var(--text-primary);font-size:14px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.b-name .studio,.brand-name-cd .studio{color:var(--accent)}
.b-sub,.brand-sub-cd{color:var(--text-tertiary);font-size:11px;margin-left:6px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.save-tag{font-size:10px;color:var(--success);font-weight:600;margin-left:14px;font-family:var(--font-data);font-variant-numeric:tabular-nums}

/* ── Card primitive (Claude Design) ─── */
.cd-card{background:var(--bg-surface);border:var(--bw,1px) solid var(--border-color);border-radius:var(--r-lg,14px);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.cd-card-h{padding:14px 20px;border-bottom:1px solid var(--border-color-lt);display:flex;justify-content:space-between;align-items:center;gap:10px}
.cd-card-h .t{font-size:14px;font-weight:700;color:var(--text-primary)}
.cd-card-h .m{font-size:11px;color:var(--text-secondary);font-family:var(--font-data);font-variant-numeric:tabular-nums}
.cd-card-body{padding:18px 20px;flex:1}

/* ── KPI cards (colored left border) ─── */
.kpi{background:var(--bg-surface);border:1px solid var(--border-color);border-left:3px solid var(--accent);border-radius:var(--r-lg,14px);padding:18px 20px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-sm);min-width:0}
.kpi.green{border-left-color:var(--success)}
.kpi.warn{border-left-color:var(--warning)}
.kpi.red{border-left-color:var(--danger)}
.kpi.blue{border-left-color:var(--info,var(--blue))}
.kpi .l{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}
.kpi .v{font-size:24px;font-weight:800;line-height:1.1;margin-top:4px;font-family:var(--font-data);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.kpi .s{font-size:11px;color:var(--text-secondary);margin-top:3px;display:flex;align-items:center;gap:4px;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.delta-up{color:var(--success);font-weight:700;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.delta-dn{color:var(--danger);font-weight:700;font-family:var(--font-data);font-variant-numeric:tabular-nums}

/* ── Status / app pills (universal) ─── */
.pill-cd{display:inline-block;font:700 9.5px/1 var(--font-family);letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:3px 7px;background:var(--bg-row);color:var(--text-secondary)}
.pill-cd.p-info{background:var(--info-bg,var(--blue-bg));color:var(--info,var(--blue))}
.pill-cd.p-success{background:var(--success-bg);color:var(--success)}
.pill-cd.p-warning{background:var(--warning-bg);color:var(--warning)}
.pill-cd.p-danger{background:var(--danger-bg);color:var(--danger)}
.pill-cd.app-pip{background:rgba(200,90,90,0.15);color:var(--danger)}
.pill-cd.app-bid{background:rgba(212,162,76,0.15);color:var(--gold,#D4A24C)}
.pill-cd.app-cal{background:rgba(204,136,68,0.15);color:#CC8844}
.pill-cd.app-sht{background:rgba(74,155,142,0.15);color:var(--sheet,#4A9B8E)}
.pill-cd.app-rol{background:rgba(139,154,90,0.15);color:#8B9A5A}
.pill-cd.app-inv{background:rgba(139,123,196,0.15);color:#8B7BC4}
.pill-cd.app-deal{background:rgba(122,136,152,0.15);color:#7A8898}

/* ── Segmented switcher (period / view) ─── */
.seg{display:inline-flex;background:var(--bg-row-alt);border-radius:6px;padding:2px;border:1px solid var(--border-color)}
.seg button,.seg .btn-seg{background:transparent;border:0;color:var(--text-tertiary);font:600 11px var(--font-family);padding:5px 10px;border-radius:4px;cursor:pointer;line-height:1.6}
.seg button.on,.seg .btn-seg.on,.seg button:hover{background:var(--accent-dim);color:var(--accent)}
.seg button.on,.seg .btn-seg.on{background:var(--accent);color:var(--text-inverse,#0F0F0E)}

/* ── Filter bar (Pipeline-style) ─── */
.filterbar{background:var(--bg-surface);padding:14px 24px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filterbar .search-wrap{flex:1;max-width:340px;position:relative}
.filterbar .search-wrap input{width:100%;background:var(--bg-row);border:1.5px solid var(--border-color);border-radius:6px;padding:8px 12px 8px 32px;font:500 13px var(--font-family);color:var(--text-primary);outline:none;font-family:var(--font-family)}
.filterbar .search-wrap input:focus{border-color:var(--accent)}
.filterbar .search-wrap::before{content:'⌕';position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);font-size:14px;pointer-events:none}
.chip-cd{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:var(--bg-row-alt);border:1.5px solid var(--border-color);font:600 11px var(--font-family);color:var(--text-secondary);cursor:pointer;line-height:1;white-space:nowrap}
.chip-cd:hover{border-color:var(--accent);color:var(--text-primary)}
.chip-cd.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.chip-cd .x{font-size:10px;opacity:.7}
.filterbar .meta-counts{margin-left:auto;font-size:11.5px;color:var(--text-secondary);font-family:var(--font-data);font-variant-numeric:tabular-nums}
.filterbar .meta-counts strong{color:var(--text-primary);font-weight:700}

/* ── Funnel (Hub Dashboard) ─── */
.funnel{display:flex;flex-direction:column;gap:6px}
.funnel-row{display:flex;align-items:center;gap:10px;font-size:12px}
.funnel-row .label{width:140px;font-weight:600;font-size:11.5px;color:var(--text-primary);flex-shrink:0}
.funnel-row .track{flex:1;background:var(--bg-row-alt);border-radius:99px;height:22px;position:relative;overflow:hidden;min-width:40px}
.funnel-row .fill{height:100%;border-radius:99px;display:flex;align-items:center;padding:0 10px;color:#fff;font-weight:700;font-size:11px;font-family:var(--font-data);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:24px}
.funnel-row .val{width:130px;text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-primary);font-size:12px;flex-shrink:0}

/* ── AR Aging (Hub Dashboard) ─── */
.aging{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.aging .b{background:var(--bg-row-alt);border:1px solid transparent;border-radius:8px;padding:14px;text-align:center}
.aging .b .l{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.aging .b .v{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;margin-top:6px;color:var(--text-primary)}
.aging .b.warn{border-color:var(--warning);background:var(--warning-bg)}
.aging .b.warn .v{color:var(--warning)}
.aging .b.red{border-color:var(--danger);background:var(--danger-bg)}
.aging .b.red .v{color:var(--danger)}

/* ── Kanban (Pipeline) — Claude Design pattern ─── */
.cd-kanban{padding:18px 18px 80px;display:flex;gap:14px;overflow-x:auto;align-items:flex-start}
.cd-col{min-width:280px;width:280px;background:var(--bg-row-alt);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;flex-shrink:0;max-height:calc(100vh - 200px)}
.cd-col-h{padding:12px 14px;border-bottom:1.5px solid var(--border-color);display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--bg-row-alt);border-radius:12px 12px 0 0;z-index:1}
.cd-col-h .stage{flex:1;font:800 10.5px/1 var(--font-family);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.cd-col-h .stage::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.cd-col-h .count{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:11px;color:var(--text-tertiary);background:var(--bg-surface);padding:2px 7px;border-radius:99px;font-weight:700}
.cd-col-h .add{background:transparent;border:0;color:var(--text-tertiary);font:700 14px var(--font-family);cursor:pointer;padding:0 4px;line-height:1}
.cd-col-h .add:hover{color:var(--accent)}
.cd-col-body{padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.cd-pcard{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;cursor:grab;transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}
.cd-pcard:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cd-pcard .name{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.3}
.cd-pcard .client{font-size:11px;color:var(--text-secondary)}
.cd-pcard .row{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--text-tertiary);margin-top:4px}
.cd-pcard .budget{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-primary);font-size:11.5px}
.cd-pcard .due{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:600}
.cd-pcard .due.warn{color:var(--warning)}
.cd-pcard .due.red{color:var(--danger)}
.cd-pcard.ghost{background:transparent;border:1.5px dashed var(--border-color);text-align:center;padding:14px;font-size:11.5px;color:var(--text-tertiary);cursor:pointer;font-weight:600}
.cd-pcard.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Per-stage colors on .cd-col[data-stage] (text-color for the stage label dot) */
.cd-col[data-stage="spec"] .cd-col-h .stage,.cd-col[data-stage="briefs"] .cd-col-h .stage{color:#7C9A82}
.cd-col[data-stage="proactive"] .cd-col-h .stage{color:#6B8FD4}
.cd-col[data-stage="bids"] .cd-col-h .stage,.cd-col[data-stage="bid"] .cd-col-h .stage{color:#D4A24C}
.cd-col[data-stage="preproduction"] .cd-col-h .stage,.cd-col[data-stage="prep"] .cd-col-h .stage{color:#CC8844}
.cd-col[data-stage="production"] .cd-col-h .stage{color:#C85A5A}
.cd-col[data-stage="postproduction"] .cd-col-h .stage,.cd-col[data-stage="post"] .cd-col-h .stage{color:#8B7BC4}
.cd-col[data-stage="delivered"] .cd-col-h .stage,.cd-col[data-stage="invoiced"] .cd-col-h .stage{color:#4A9B8E}

/* ── Strip — Recent Activity / Tasks side-by-side ─── */
.strip-cd{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.strip-cd .s-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-lg,14px);overflow:hidden}
.strip-cd .s-card-h{padding:14px 20px;border-bottom:1px solid var(--border-color-lt);display:flex;justify-content:space-between;align-items:center}
.strip-cd .s-card-h .t{font-size:14px;font-weight:700;color:var(--text-primary)}
.strip-cd .s-card-h .m{font-size:11px;color:var(--text-secondary)}
.strip-cd .s-card-b{padding:6px 20px;min-height:200px}
.strip-cd .s-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-color-lt);font-size:13px;color:var(--text-primary)}
.strip-cd .s-row:last-child{border-bottom:0}
.strip-cd .s-row .l{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.strip-cd .s-row .l .body{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip-cd .s-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.strip-cd .s-row .ts{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--text-secondary);flex-shrink:0;white-space:nowrap}
.strip-cd .s-row .ts.overdue{color:var(--danger);font-weight:600}
@media (max-width:768px){.strip-cd{grid-template-columns:1fr}}

/* ── Empty state primitive ─── */
.empty-cd{padding:32px 0;text-align:center;color:var(--text-tertiary);font-size:12.5px;line-height:1.55}
.empty-cd a{color:var(--accent);text-decoration:none;font-weight:600}
.empty-cd a:hover{text-decoration:underline}