@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
  font-size: var(--text-base);
  line-height: var(--line-base);
}

/* Scrollbars (nav rail included -- its comment near .nav-menu explains it
   gets its own scroll region): without this, every browser falls back to
   its default light-mode scrollbar even on this dark-surfaced app, which
   reads as a bright, mismatched stripe against the theme. color-scheme
   gets native controls/scrollbars into the right ballpark automatically;
   the explicit WebKit rules then match the exact surface/border tokens so
   it blends into whichever theme (Light/Dark/Midnight) is active instead
   of just "less wrong". Global, not Dynamic-mode-only -- this was always
   going to look off in Classic Mode too. */
:root[data-theme="dark"], :root[data-theme="midnight"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: 0; color: var(--text-primary); margin: 0; }
h1 { font-size: var(--text-3xl); line-height: var(--line-3xl); margin: var(--space-2) 0; }
/* Blazor's <FocusOnNavigate Selector="h1" /> (App.razor) programmatically focuses the page
   heading on every route change for screen-reader announcement. Without this rule the browser's
   native `outline: auto` draws a heavy black rectangle around the heading on every page load. */
h1:focus { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
h2 { font-size: var(--text-xl); line-height: var(--line-xl); margin: var(--space-2) 0; }
.muted { color: var(--text-secondary); line-height: 1.6; }
.small-note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-4); }
.eyebrow { color: var(--accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.eyebrow.light { color: var(--accent-strong); }

/* ---------- boot / loading ---------- */
.boot-screen, .state-panel {
  min-height: 60vh; display: grid; place-content: center; gap: var(--space-4);
  text-align: center; color: var(--text-muted);
}
.spinner {
  width: 28px; height: 28px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  scroll-behavior: auto !important; transition-duration: 0.001ms !important;
}

/* ---------- app shell ---------- */
.topbar {
  height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6); background: var(--surface-raised); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; gap: var(--space-3); align-items: center; color: inherit; text-decoration: none; border-radius: 10px; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand span:last-child { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; font-size: var(--text-md); }
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 20px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

/* Logo hover: same dock-style magnification as the nav icons, sized to
   the logo's own resting size (2x it) rather than reusing their fixed
   pixel scale. */
.brand-mark {
  position: relative;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
}
.brand:hover .brand-mark {
  transform: scale(2);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  z-index: 5;
}
.topbar-search { flex: 1; max-width: 360px; margin: 0 var(--space-6); position: relative; }
.topbar-search input {
  width: 100%; padding: var(--space-1) var(--space-3); height: 30px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-size: var(--text-sm);
}
.topbar-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* --- Global Search (Implementation Gap Audit, item #5) --- */
.global-search { position: relative; }
.global-search-results {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: 0; z-index: 50;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); max-height: 70vh; overflow-y: auto; padding: var(--space-2) 0;
}
.global-search-loading, .global-search-empty { padding: var(--space-3) var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.global-search-group { padding: var(--space-1) 0; }
.global-search-group + .global-search-group { border-top: 1px solid var(--border); margin-top: var(--space-1); padding-top: var(--space-2); }
.global-search-group-label { padding: var(--space-1) var(--space-4); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; }
.global-search-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); text-decoration: none; color: var(--text-primary); font-size: var(--text-sm); }
.global-search-item:hover, .global-search-item:focus-visible { background: var(--surface-sunken); outline: none; }
.global-search-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-item-sub { flex-shrink: 0; color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-mono); }
.topbar-actions { display: flex; gap: var(--space-5); align-items: center; font-size: var(--text-sm); }
.connection-pill, .sync-count, .user-chip { display: flex; align-items: center; gap: var(--space-2); }
.connection-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.connection-pill.offline span { background: var(--warning); }
.sync-count { color: var(--warning); }
.sync-failed { border: 0; background: transparent; font: inherit; cursor: pointer; color: var(--danger); text-decoration: underline; }
.user-chip { color: var(--text-secondary); font-weight: 600; }
.user-menu { display: flex; align-items: center; gap: var(--space-3); border-inline-start: 1px solid var(--border); padding-inline-start: var(--space-5); }
.icon-button { border: 0; background: transparent; color: var(--text-secondary); font-size: var(--text-xl); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); display: inline-flex; align-items: center; justify-content: center; }
.icon-button:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* Real brand icon assets (design-mockups/erp branding delivery) -- a
   single-color SVG masked to currentColor so it inherits whatever color
   its surrounding link/button already carries (muted, hover, active
   gold), exactly like the Unicode glyphs it replaces. */
.icon-mask {
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  position: relative;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
}
.icon-button .icon-mask { width: 20px; height: 20px; }

/* Topbar icon buttons get the same dock-style hover magnification as the
   sidebar nav icons and the logo -- one consistent motion language for
   every icon in the shell. */
.icon-button:hover .icon-mask {
  transform: scale(2) translateY(-5px);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  z-index: 5;
}
.topbar-icon-badge { position: relative; }
.topbar-icon-badge .nav-attention { position: absolute; top: 2px; inset-inline-end: 2px; margin-inline-start: 0; }

.mail-recipients {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2);
  background: var(--surface-sunken);
}
.mail-recipients input { border: 0; background: transparent; flex: 1; min-width: 160px; outline: none; color: var(--text-primary); }
.mail-chip-remove { border: 0; background: transparent; color: inherit; cursor: pointer; margin-inline-start: 4px; font-weight: 700; line-height: 1; padding: 0; }
.mail-recipient-options {
  position: relative; z-index: 20; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-overlay); box-shadow: var(--shadow-md); overflow: hidden; max-height: 220px; overflow-y: auto;
}
.mail-recipient-option { display: block; width: 100%; text-align: start; padding: 8px 12px; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--text-sm); }
.mail-recipient-option:hover { background: var(--accent-soft); color: var(--accent-strong); }
.nav-toggle { display: none; margin-inline-end: var(--space-3); cursor: pointer; }

/* AXS quick switcher (topbar) */
.axs-switcher { display: flex; align-items: center; gap: var(--space-2); }
.axs-switcher select {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-size: var(--text-sm);
}
.axs-switcher select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

.workspace { min-height: calc(100vh - 48px); display: flex; }

/* ---------- navigation (intent-grouped, P2.2; collapsible rail, Visual
   Master Spec Section 6) ---------- */
.sidebar {
  width: 240px; flex: 0 0 240px; padding: var(--space-6) var(--space-4);
  background: var(--surface-raised); border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--space-1);
  /* Independent scroll regions (Premium Workspace batch): the topbar is
     already `position: sticky; top: 0`, so pinning the sidebar the same
     way against it keeps navigation visually stationary while the main
     content scrolls past it, and gives the nav its own scrollbar if its
     own content (many expanded groups) ever exceeds the viewport --
     without a nested-flex/overflow rewrite of the whole shell. */
  position: sticky; top: 48px; align-self: flex-start;
  height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden;
  transition: width 0.15s ease, padding 0.15s ease;
}
.nav-group { margin-bottom: var(--space-2); }
.nav-group-header {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 0; background: transparent; padding: var(--space-2) var(--space-2);
  color: var(--text-primary); font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-group-header:hover { color: var(--accent-strong); }
.nav-group-label-link {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1;
  color: inherit; text-decoration: none; cursor: pointer;
}
.nav-group-chevron-btn {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: var(--space-1); flex-shrink: 0; display: inline-flex;
}
.nav-group-label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.nav-group-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.nav-group-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-links { display: none; }
nav a, .nav-group-links a {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  margin: 2px 0; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 500; white-space: nowrap;
}
nav a span:first-child {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
nav a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
nav a.active span:first-child { color: var(--accent-strong); }
nav a:hover:not(.active) { background: var(--surface-sunken); }
.nav-attention {
  margin-inline-start: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff2d2d; color: #fff; font-size: 10px; font-weight: 800; font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
  /* Strong, living badge (2026-09-30): anything unread must be impossible to miss. */
  box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 10px rgba(255, 45, 45, .75);
  animation: attention-pulse 1.6s ease-in-out infinite;
}
@keyframes attention-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 6px rgba(255, 45, 45, .6); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 16px 3px rgba(255, 45, 45, .9); }
}
/* A notification just arrived: the bell rings until it is opened. */
.bell-ring .icon-mask { animation: bell-ring 1.2s ease-in-out infinite; transform-origin: 50% 10%; color: #ff2d2d; }
@keyframes bell-ring {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); }
  30% { transform: rotate(10deg); } 40% { transform: rotate(-8deg); } 50% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-attention, .bell-ring .icon-mask { animation: none; }
}
.nav-divider { border-top: 1px solid var(--border); margin: var(--space-4) var(--space-2); }
.sidebar-note { margin-top: auto; padding: var(--space-4) var(--space-2); border-top: 1px solid var(--border); }
.sidebar-note p { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.6; }

/* --- Collapsed rail (desktop-only; 240px <-> 64px, Visual Master Spec
   Section 6). Labels and group headers hide; icons + a tooltip-on-hover
   (native `title` attribute, no JS) stand in, and the toggle lives in the
   topbar via `.sidebar-collapse-toggle`. Mobile's off-canvas drawer below
   is a separate mechanism and never collapses this way. */
/* overflow-x: visible alone would still compute to `auto` (and keep
   clipping) as long as overflow-y stays `auto` -- per spec, a
   visible/non-visible axis pairing both resolve to `auto`. Collapsed
   rows are icon-only and far shorter, so dropping the sidebar's own
   vertical scroll here (the page itself can still scroll) is worth it
   to let the hover tooltip actually escape the rail. */
.sidebar.rail-collapsed { width: 64px; flex-basis: 64px; padding-inline-start: var(--space-2); padding-inline-end: var(--space-2); overflow: visible; }
.sidebar.rail-collapsed .nav-group-title,
.sidebar.rail-collapsed .nav-group-chevron,
.sidebar.rail-collapsed .nav-link-label,
.sidebar.rail-collapsed .sidebar-note,
.sidebar.rail-collapsed > nav > a > span:last-child { display: none; } /* Settings' label has no .nav-link-label class to target -- it's the bare last span */
.sidebar.rail-collapsed .nav-group-header { justify-content: center; }
.sidebar.rail-collapsed nav a, .sidebar.rail-collapsed .nav-group-links a { justify-content: center; padding: var(--space-2); }
.sidebar.rail-collapsed .nav-attention { position: absolute; top: 2px; inset-inline-end: 2px; margin-inline-start: 0; }
.sidebar.rail-collapsed .nav-group-links a { position: relative; }

/* Collapsed rail: icons rest 50% bigger than their normal (expanded)
   size -- real width/height on the mask, not font-size, since these are
   real SVG icon assets now, not text glyphs. */
.sidebar.rail-collapsed .nav-group-icon { width: 24px; height: 24px; }
.sidebar.rail-collapsed nav a span:first-child { width: 27px; height: 27px; }

/* Dock-style hover magnification (both collapsed and expanded rail) --
   a pure-transform scale so it's GPU-smooth and never reflows the row
   around it, with a spring/overshoot easing for the fluid macOS-dock
   feel. Scale is large and paired with a lift + shadow (not just a
   size change) so it reads clearly at a glance, the way a real Dock
   icon visibly pops off the row instead of nudging a few pixels; a
   z-index boost on the icon itself (not the whole row, so text/labels
   never shift) keeps it drawn on top of the rows it now overlaps. */
.nav-group-icon, nav a span:first-child {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
  transform-origin: center;
  position: relative;
}
.nav-group-label-link:hover .nav-group-icon,
nav a:hover span:first-child {
  transform: scale(2) translateY(-5px);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  z-index: 5;
}

/* Collapsed rail: hovering an icon shows its section/item name as a fast
   custom tooltip (native `title` stays too, as an accessibility/slow-
   hover fallback) instead of leaving the folded rail unlabeled. */
.sidebar.rail-collapsed .nav-group-label-link { position: relative; }
.sidebar.rail-collapsed .nav-group-label-link::after,
.sidebar.rail-collapsed .nav-group-links a::after {
  content: attr(title);
  position: absolute; inset-inline-start: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-8px) scale(0.92);
  background: var(--surface-overlay); color: var(--text-primary);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 100;
  transition: opacity 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.22s;
}
.sidebar.rail-collapsed .nav-group-label-link:hover::after,
.sidebar.rail-collapsed .nav-group-links a:hover::after {
  opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0) scale(1);
}

.sidebar-collapse-toggle {
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  border-radius: var(--radius-sm); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; margin-inline-end: var(--space-3);
}
.sidebar-collapse-toggle:hover { border-color: var(--accent); color: var(--accent-strong); }

.nav-backdrop { display: none; }

/* --- Mobile bottom tab bar (Visual Master Spec Section 7 Mobile) ---
   A native-app-style fixed bar for the four highest-frequency actions;
   the off-canvas drawer (opened by "Menu" here, or the topbar hamburger)
   remains the complete navigation surface -- this never replaces it. */
.mobile-tab-bar { display: none; }

/* ---------- content ---------- */
.content { flex: 1; max-width: 1440px; padding: var(--space-10) clamp(var(--space-6), 5vw, 72px); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-8); gap: var(--space-4); }
.date-block { color: var(--accent); font-size: var(--text-sm); text-align: end; }
.date-block small { display: block; color: var(--text-muted); margin-top: var(--space-1); }

/* ---------- surfaces / cards ---------- */
.surface {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.surface-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); gap: var(--space-4); }
.status-tag {
  padding: 4px 9px; background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--font-mono); font-size: var(--text-xs); border-radius: var(--radius-sm); font-weight: 700; text-transform: uppercase;
}
.status-tag.success { background: var(--success-soft); color: var(--success); }
.status-tag.warning { background: var(--warning-soft); color: var(--warning); }
.status-tag.danger { background: var(--danger-soft); color: var(--danger); }
.quiet-surface { background: var(--surface-sunken); }

/* ---------- hero ---------- */
.hero-strip {
  background: var(--accent); color: var(--accent-text-on); padding: var(--space-8) var(--space-8);
  display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.hero-strip h2 { color: var(--accent-text-on); font-size: var(--text-2xl); }
.hero-strip p { max-width: 620px; margin: 0; opacity: 0.9; }
.hero-symbol { font-size: 88px; line-height: 1; opacity: 0.35; }

/* ---------- KPI tiles (mode-aware, P2.3) ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.metric { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.metric-label { color: var(--text-secondary); font-size: var(--text-sm); }
.attention { color: var(--danger); }

/* Task work surface: comment thread (Premium Action-Oriented Workspace batch) */
.task-comment-thread { display: flex; flex-direction: column; gap: var(--space-4); max-height: 420px; overflow-y: auto; padding-inline-end: var(--space-2); }
.task-comment { padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.task-comment-meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.task-comment p { margin: 0; color: var(--text-primary); line-height: 1.6; }
.metric strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--text-primary); }
.metric small { color: var(--accent); }
.metric.metric-headline strong { font-size: var(--text-4xl); }
.metric-trend { display: flex; align-items: baseline; gap: var(--space-2); }
.metric-trend .delta { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }
.metric-trend .delta.up { color: var(--success); }
.metric-trend .delta.down { color: var(--danger); }
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 28px; margin-top: var(--space-2); }
.sparkline span { flex: 1; background: var(--accent); opacity: 0.55; border-radius: 2px 2px 0 0; }
.sparkline span:last-child { opacity: 1; }

.dashboard-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-5); }
.domain-row { border-top: 1px solid var(--border); padding: var(--space-4) 2px; display: flex; justify-content: space-between; align-items: center; }
.domain-row div { display: flex; flex-direction: column; gap: var(--space-1); }
.domain-row span { color: var(--text-secondary); font-size: var(--text-sm); }
.domain-row .arrow { color: var(--accent); font-size: var(--text-xl); }
.progress-track { height: 6px; background: var(--surface-sunken); margin: var(--space-8) 0 var(--space-3); border-radius: var(--radius-sm); overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--accent); }
.progress-track span.syncing { width: 40%; animation: indeterminate 1.1s ease-in-out infinite; }
.progress-track span.pending { width: 100%; }
@keyframes indeterminate { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }

.dashboard-domain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.dashboard-domain-card {
  display: flex; flex-direction: column; gap: var(--space-2); min-height: 160px; padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary);
  text-decoration: none; background: var(--surface-raised);
}
.dashboard-domain-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.dashboard-domain-card .surface-heading { margin-bottom: 0; }
.dashboard-domain-card h2 { font-size: var(--text-lg); }
.dashboard-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--text-primary); margin-top: auto; }
.dashboard-unavailable { color: var(--text-muted); margin-top: auto; }
.dashboard-domain-card small { min-height: 32px; font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Flow-mode stage lanes ---------- */
.flow-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); align-items: start; }
.flow-lane { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.flow-lane-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 var(--space-2); }
.flow-card {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2);
  text-decoration: none; color: var(--text-primary);
}
.flow-card:hover { border-color: var(--accent); }
.flow-card .flow-next-action { font-weight: 700; color: var(--accent-strong); font-size: var(--text-sm); }
.flow-empty-lane { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3) var(--space-2); }

/* ---------- density (AXS Display Mode -> table/list feel) ---------- */
.density-compact .metric, .density-compact .surface { padding: var(--space-3); }
.density-compact .clients-row { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.density-compact .client-card, .density-compact .cockpit-card, .density-compact .control-domain-card { padding: var(--space-3); }
.density-compact .stage-card { padding: var(--space-3); }
.density-compact .client-gallery, .density-compact .cockpit-card-grid, .density-compact .control-domain-grid { gap: var(--space-2); }
.density-spacious .content { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.density-spacious .surface { padding: var(--space-8); }
.density-spacious .metric-grid { gap: var(--space-6); }
.density-spacious .client-card, .density-spacious .cockpit-card, .density-spacious .control-domain-card { padding: var(--space-6); }
.density-spacious .client-gallery, .density-spacious .cockpit-card-grid, .density-spacious .control-domain-grid, .density-spacious .stage-card-grid { gap: var(--space-5); }

/* ---------- settings ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.settings-section { min-height: 210px; }
.settings-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.settings-facts div { display: flex; flex-direction: column; gap: var(--space-2); }
.settings-facts strong { color: var(--text-primary); overflow-wrap: anywhere; }
.settings-control { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.settings-control label { margin: 0; }
.settings-control select { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--surface); }
.settings-check { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; font-weight: 500; }
.settings-check input { width: auto; }
.settings-save { margin-top: var(--space-3); }
.settings-saved { color: var(--accent); font-size: var(--text-xs); }
.settings-unavailable { background: var(--surface-sunken); }

/* AXS mode picker (Settings page) */
.axs-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.axs-mode-card {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);
  background: var(--surface); cursor: pointer; text-align: start; display: flex; flex-direction: column; gap: var(--space-1);
}
.axs-mode-card strong { font-family: var(--font-heading); color: var(--text-primary); }
.axs-mode-card span { color: var(--text-muted); font-size: var(--text-xs); }
.axs-mode-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--focus-ring); }
.axs-theme-row { display: flex; gap: var(--space-3); margin: var(--space-4) 0; }
.axs-theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface); cursor: pointer; flex: 1;
}
.axs-theme-swatch.selected { border-color: var(--accent); box-shadow: var(--focus-ring); }
.axs-swatch-preview { width: 100%; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ---------- login ---------- */
.login-stage {
  min-height: 100vh; display: grid; place-items: center; padding: var(--space-8);
  background: linear-gradient(135deg, var(--surface-sunken) 0 45%, var(--accent-soft) 100%);
}
.login-brand { position: absolute; top: var(--space-6); inset-inline-start: var(--space-8); display: flex; gap: var(--space-3); align-items: center; color: var(--text-primary); }
.login-card { width: min(100%, 420px); padding: var(--space-10); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.login-card h1 { font-family: var(--font-display); font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.field { margin: var(--space-5) 0; }
label { display: block; color: var(--text-primary); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); }
input, select, textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; background: var(--surface-raised); color: var(--text-primary); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---------- buttons ---------- */
.primary-button, .secondary-button {
  border: 0; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); font-weight: 700; font-size: var(--text-sm);
}
.primary-button { width: 100%; background: var(--accent); color: var(--accent-text-on); }
.primary-button:hover { background: var(--accent-strong); }
.primary-button.compact, .secondary-button { width: auto; }
.secondary-button { background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--border); }
.secondary-button:hover { border-color: var(--accent); color: var(--accent-strong); }
.secondary-button.compact { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.secondary-button.danger { color: var(--danger); border-color: var(--danger); }
.secondary-button.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.secondary-button.icon-only { padding: var(--space-2); line-height: 1; }

/* Permanent-delete trigger (Projects list): was a thin red-outline button
   with an emoji glyph -- easy to miss next to Archive, and the trash
   emoji renders inconsistently across platforms/fonts. A solid, filled
   warning-amber button with a real SVG icon makes an irreversible action
   impossible to overlook, while still reading as "caution, look before you
   click" rather than the harder "danger" red already reserved for the
   actual Yes-delete confirm step one click later. */
.icon-only-warning {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: var(--warning); color: var(--accent-text-on);
  transition: filter 0.12s ease, transform 0.12s ease;
}
.icon-only-warning:hover { filter: brightness(1.1); transform: translateY(-1px); }
.icon-only-warning:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.alert { padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.alert.error { background: var(--danger-soft); color: var(--danger); }
.login-footnote { margin: var(--space-6) 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }

.module-placeholder { min-height: 50vh; } .module-placeholder h1 { margin-bottom: var(--space-1); } .module-placeholder p { max-width: 450px; }

/* ---------- notifications ---------- */
.notifications-shell { display: flex; flex-direction: column; gap: var(--space-5); }
.notifications-toolbar { display: flex; gap: var(--space-3); margin: var(--space-3) 0 var(--space-5); flex-wrap: wrap; }
.notifications-list { display: flex; flex-direction: column; gap: var(--space-4); }
.notification-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.notification-card.unread { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent); }
.notification-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.notification-head h2 { margin: var(--space-2) 0 0; font-size: var(--text-xl); line-height: 1.3; }
.notification-meta { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }
.notification-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.notification-dot.new { background: var(--accent); }
.notification-dot.seen { background: var(--border-strong); }
.notification-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.notification-card.read .status-tag { background: var(--surface-sunken); color: var(--text-secondary); }

/* ---------- hiring tabs ---------- */
.hiring-tabs { display: flex; gap: var(--space-2); margin: 0 0 var(--space-5); border-bottom: 1px solid var(--border); }
.hiring-tab { padding: var(--space-3) var(--space-4); color: var(--text-secondary); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 700; font-size: var(--text-sm); }
.hiring-tab.active { color: var(--accent-strong); border-color: var(--accent); }
.hiring-form-surface { margin-top: var(--space-5); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.field-wide { grid-column: 1 / -1; }
.field textarea { width: 100%; min-height: 110px; resize: vertical; }
.pending-state { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); margin-top: var(--space-4); background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius-md); color: var(--warning); }
.pending-state strong { font-size: var(--text-xs); text-transform: uppercase; }
.hiring-note { margin-top: var(--space-5); background: var(--surface-sunken); }
.action-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.audit-actor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.audit-actor-grid div { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.audit-actor-grid span { color: var(--text-muted); font-size: var(--text-xs); }

/* ---------- public approval / portal ---------- */
.public-approval-shell { min-height: 100vh; background: linear-gradient(135deg, var(--surface-sunken) 0 38%, var(--accent-soft) 100%); }
.portal-content { min-height: calc(100vh - 48px); padding: var(--space-8); max-width: 960px; margin: 0 auto; }
.portal-content .surface { margin-bottom: var(--space-5); }
.public-approval-header { height: 48px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-8); color: var(--text-primary); font-family: var(--font-heading); }
.public-approval-content { min-height: calc(100vh - 48px); display: grid; place-items: center; padding: var(--space-8) var(--space-4) 60px; }
.public-approval-card { width: min(100%, 620px); padding: var(--space-8); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.public-step { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.public-inline { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); }
.public-expiry { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-xs); }

/* ---------- clients / generic list tables ---------- */
.clients-toolbar { display: flex; gap: var(--space-3); margin: var(--space-5) 0; flex-wrap: wrap; }
.clients-search { flex: 1; min-width: 220px; }
.clients-filter { min-width: 140px; }
.freshness-pill { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--accent); margin: 2px 0 var(--space-2); }
.freshness-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.freshness-banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); margin: var(--space-1) 0 var(--space-2); display: flex; flex-direction: column; gap: 2px; border: 1px solid transparent; }
.freshness-banner strong { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.freshness-banner.offline { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.freshness-banner.pending { background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary); }
.freshness-banner.error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.clients-table { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.clients-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr 1fr; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); align-items: center;
  text-decoration: none; color: var(--text-primary); font-size: var(--text-base);
  transition: background-color 0.12s ease;
}
.clients-row:first-child { border-top: 0; }
.clients-row-head { background: var(--surface-sunken); color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; }
.clients-row:not(.clients-row-head):hover { background: var(--surface-sunken); }
.clients-row a:focus-visible, a.clients-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* Work Station master reference: table-row lists (Projects, Monthly
   Plans, Tasks, Subtasks) with a variable column count -- same visual
   language as .clients-table/.clients-row but with grid-template-columns
   set per usage (inline style) instead of a fixed 5-column layout. */
.op-table { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-3); }
.op-row { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); align-items: center; font-size: var(--text-sm); }
.op-row:first-child { border-top: 0; }
.op-row-head { background: var(--surface-sunken); color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; }
.op-row:not(.op-row-head):hover { background: var(--surface-sunken); }
.op-row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.op-archive-toggle { cursor: pointer; padding: var(--space-3) var(--space-5); font-weight: 700; color: var(--text-muted); list-style: none; }
.op-archive-toggle::-webkit-details-marker { display: none; }
.op-archive-toggle::before { content: "▸ "; }
details[open] > .op-archive-toggle::before { content: "▾ "; }
.client-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.client-detail-grid .metric-label { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-bottom: var(--space-2); }

/* ---------- responsive ---------- */
/* Below 820px the sidebar becomes a real off-canvas drawer (hidden by
   default, opened by the hamburger, closed by the backdrop or by
   navigating) instead of a permanently-visible icon-only rail that eats
   width on every page forever -- the mobile-native pattern the AXS review
   build's screenshot evidence flagged as missing. Mode/theme selects stay
   legible (no font-size:0 hack) and simply wrap onto their own row. */
@media (max-width: 820px) {
  .client-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { padding: 0 var(--space-4); flex-wrap: wrap; height: auto; min-height: 48px; row-gap: var(--space-2); padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .sidebar-collapse-toggle { display: none; }
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar-actions { gap: var(--space-3); flex-wrap: wrap; row-gap: var(--space-2); width: 100%; justify-content: flex-end; }
  .user-chip { display: none; }

  .sidebar {
    position: fixed; top: 0; inset-inline-start: 0; bottom: 0; width: min(280px, 82vw); flex: none; z-index: 40;
    transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: none;
  }
  .sidebar.nav-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 13, 8, 0.45); z-index: 35; }

  .content { padding: var(--space-8) var(--space-5); }
  .page-heading { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .date-block { text-align: start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .audit-actor-grid { grid-template-columns: 1fr; }
  .public-approval-card { padding: var(--space-6) var(--space-5); }
  .public-inline { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .mobile-tab-bar {
    display: flex; position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 30;
    background: var(--surface-raised); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-tab-bar a, .mobile-tab-bar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--space-2) 0; border: 0; background: transparent; color: var(--text-muted);
    font-size: 10px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em;
  }
  .mobile-tab-bar a span:first-child, .mobile-tab-bar button span:first-child {
    width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .mobile-tab-bar a.active { color: var(--accent-strong); }
  .content { padding-bottom: calc(var(--space-8) + 56px); }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; } .field-wide { grid-column: auto; }
  .clients-row-head { display: none; }
  .clients-row { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4); }
  .clients-row span[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
  .op-row-head { display: none; }
  .op-row { grid-template-columns: 1fr !important; gap: var(--space-1); padding: var(--space-4); }
  .op-row span[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
  .client-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .brand span:last-child { font-size: var(--text-sm); }
  .connection-pill { font-size: 0; } .content { padding: var(--space-6) var(--space-4); } h1 { font-size: var(--text-2xl); }
  .metric-grid { grid-template-columns: 1fr; } .dashboard-domain-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; } .settings-facts { grid-template-columns: 1fr; }
  .settings-control { align-items: flex-start; flex-direction: column; }
  .hero-strip { padding: var(--space-5); } .hero-symbol { display: none; }
  .login-stage { padding: var(--space-5); } .login-card { padding: var(--space-6) var(--space-5); }
}

/* ============================================================
   AXS Phase 2b -- Project Command Center / Live Project Card /
   Workflow visualization / Timeline / Action Center.
   All values are tokens; nothing here introduces a raw color.
   ============================================================ */

.command-center-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); align-items: start; }
/* Independent scroll regions (direct request, 2026-09-17): the Action
   Center side panel scrolls on its own, same sticky+overflow pattern
   already proven on .sidebar, instead of moving together with the main
   list as one page scroll. */
.command-center-layout > .surface.quiet-surface {
  position: sticky; top: calc(48px + var(--space-6));
  max-height: calc(100vh - 48px - var(--space-10)); overflow-y: auto;
}
@media (max-width: 900px) {
  .command-center-layout > .surface.quiet-surface { position: static; max-height: none; overflow-y: visible; }
}

/* --- Live Project Card --------------------------------------------- */
.project-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); }
.project-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-5); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  border-inline-start: 3px solid var(--border-strong);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.project-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.project-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.project-card.health-healthy { border-inline-start-color: var(--success); }
/* A 3px border strip was too easy to miss on a card that genuinely needs
   attention -- a project sitting alone in its own Watch/At Risk/Critical
   lane (Flow mode groups by health tier) should read as "needs action" at
   a glance, from the whole card, not from a thin edge. color-mix keeps
   the tint honest per-theme instead of a hardcoded overlay color. */
.project-card.health-watch { border-inline-start-color: var(--warning); background: color-mix(in srgb, var(--warning) 7%, var(--surface-raised)); }
.project-card.health-at-risk { border-inline-start-color: var(--warning); background: color-mix(in srgb, var(--warning) 7%, var(--surface-raised)); }
.project-card.health-critical { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface-raised)); }

.project-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.project-card-identity .client-name { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); }
.project-card-service-line { font-size: var(--text-xs); text-transform: none; letter-spacing: 0; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.project-card-identity h3 { margin: 2px 0 0; font-size: var(--text-lg); color: var(--text-primary); }
.project-card-head-badges { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.health-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.health-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.health-chip.health-healthy { background: var(--success-soft); color: var(--success); }
.health-chip.health-watch { background: var(--warning-soft); color: var(--warning); }
.health-chip.health-at-risk { background: var(--warning-soft); color: var(--warning); }
.health-chip.health-critical { background: var(--danger-soft); color: var(--danger); }

.project-card-stage-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.project-card-stage-line strong { color: var(--text-primary); }

.project-card-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.project-card-facts .fact { display: flex; flex-direction: column; gap: 2px; }
.project-card-facts .fact-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.project-card-facts .fact-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.project-card-facts .fact-value.attention { color: var(--danger); }

.project-card-blocker { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }

.project-card-next-action { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--text-primary); }
.project-card-next-action .label { color: var(--accent); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
/* Real action needed (health tier isn't Healthy) gets a colored "Next"
   label and text instead of the neutral accent tone every card uses --
   another honest, data-driven color signal, same tier semantics as the
   card's own background tint above. */
.project-card-next-action.needs-action .label { color: var(--warning); }
.project-card-next-action.needs-action span:last-child { color: var(--warning); font-weight: 600; }
.project-card.health-critical .project-card-next-action.needs-action .label,
.project-card.health-critical .project-card-next-action.needs-action span:last-child { color: var(--danger); }

.project-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--text-muted); }

/* --- Subtask grid (Blueprint correction, 2026-09-17): Subtasks under a
   Task are independent, parallel work items with no sequence between
   them, so they render as an unordered grid of cards (see .stage-card in
   the Execution section below), never as connected/arrowed steps. ---- */
.workflow-step-empty { color: var(--text-muted); font-size: var(--text-sm); }

/* --- Action Center ----------------------------------------------------- */
.action-center { display: flex; flex-direction: column; gap: var(--space-3); }
.action-item {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised);
  text-decoration: none; color: inherit;
}
.action-item:hover { border-color: var(--accent); }
.action-item .action-marker { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--text-muted); }
.action-item.urgent .action-marker { background: var(--danger); }
.action-item.watch .action-marker { background: var(--warning); }
.action-item .action-project { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.action-item .action-text { font-size: var(--text-sm); color: var(--text-primary); }
.action-center-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-4); text-align: center; }

/* --- Timeline ------------------------------------------------------- */
.timeline-feed { display: flex; flex-direction: column; }
.timeline-event { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.timeline-event:last-child { border-bottom: none; }
.timeline-event .timeline-when { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.timeline-event .timeline-headline { display: flex; align-items: baseline; gap: var(--space-2); cursor: pointer; }
.timeline-event .timeline-action { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.timeline-event .timeline-actor { font-size: 11px; color: var(--text-muted); }
.timeline-event .timeline-detail { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.timeline-empty { color: var(--text-muted); font-size: var(--text-sm); }

/* --- SLA badge -------------------------------------------------------- */
.sla-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm); }
.sla-chip.on-track { background: var(--success-soft); color: var(--success); }
.sla-chip.due-soon { background: var(--warning-soft); color: var(--warning); }
.sla-chip.breached { background: var(--danger-soft); color: var(--danger); }
.sla-chip.not-tracked { background: var(--surface-sunken); color: var(--text-muted); }

@media (max-width: 960px) {
  .command-center-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .project-card-facts { grid-template-columns: repeat(2, 1fr); }
  .timeline-event { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Portfolio health breakdown (Owner/Executive Command Center) --- */
.health-breakdown { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
.health-breakdown-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.health-breakdown-item strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--text-primary); }

/* --- Operations pipeline (Operations Coordinator workspace) --- */
.pipeline-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); align-items: start; }
/* Wider lane variant for pages that stack a richer card (e.g. LiveProjectCard,
   designed for a 340px grid) inside a lane rather than the compact
   pipeline-card -- additive modifier, not a redefinition of the base primitive. */
.pipeline-board.pipeline-board-wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pipeline-column { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-height: 80px; }
.pipeline-column-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 var(--space-1); }
/* Unassigned employees (no department_id yet) are real data and stay
   visible, but must never read as a peer of an actual department: dashed
   border instead of a solid filled column, always sorted last. */
.pipeline-column-unassigned { background: transparent; border: 1px dashed var(--border-strong); }
.pipeline-column-unassigned .pipeline-column-head { color: var(--warning); }
.pipeline-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.pipeline-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pipeline-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pipeline-card .pipeline-card-title { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); }
.pipeline-card .pipeline-card-meta { font-size: 11px; color: var(--text-muted); }
.pipeline-card.overdue { border-inline-start: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-raised)); }
.pipeline-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-2); }

.workload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.workload-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.workload-card .workload-name { font-weight: 600; font-size: var(--text-sm); }
.workload-card .workload-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xl); color: var(--text-primary); }
.workload-card .workload-count.attention { color: var(--danger); }

@media (max-width: 960px) {
  .pipeline-board { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ============================================================
   Visual Deep Polish & Command-Center Experience -- premium
   workspace primitives reused across Client Workspace, Project
   Command Center, Task Command Center, Clients Gallery, My Work,
   and Control Panel. All values are tokens.
   ============================================================ */

/* --- Workspace header (identity + real facts + actions) --- */
.workspace-header { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.workspace-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.workspace-header-identity h1 { margin-top: 4px; }
.workspace-header-subtitle { color: var(--text-secondary); font-size: var(--text-sm); margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.workspace-header-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.workspace-header-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); }
.workspace-fact { display: flex; flex-direction: column; gap: 4px; }
.workspace-fact-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.workspace-fact-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }
.workspace-fact-value.attention { color: var(--danger); }

/* --- Next required action banner (Task Command Center) --- */
.next-action-banner { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6); }
.next-action-banner .next-action-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-strong); font-weight: 700; }
.next-action-banner .next-action-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); margin-top: 4px; }
.next-action-banner .next-action-description { color: var(--text-secondary); margin: var(--space-2) 0 0; max-width: 640px; }
.next-action-banner .next-action-controls { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.next-action-banner.tone-urgent { border-color: var(--danger); background: var(--danger-soft); }
.next-action-banner.tone-urgent .next-action-label { color: var(--danger); }
.next-action-banner.tone-done { border-color: var(--success); background: var(--success-soft); }
.next-action-banner.tone-done .next-action-label { color: var(--success); }

/* --- Clients Gallery --- */
.client-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.client-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-raised); border: 1px solid var(--border); border-inline-start: 3px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-5); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.client-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.client-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.client-card.attention { border-inline-start-color: var(--warning); }
.client-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.client-card-head h3 { margin: 0; font-size: var(--text-lg); }
.client-card-tier { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.client-card-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.client-card-facts .fact-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.client-card-facts .fact-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.client-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--text-muted); }

/* --- Stage execution cards (Project Command Center) --- */
.stage-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.stage-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); border-top: 3px solid var(--border-strong); }
.stage-card.stage-current { border-top-color: var(--accent); }
.stage-card.stage-attention { border-top-color: var(--danger); }
.stage-card.stage-done { border-top-color: var(--success); }
.stage-card-title { font-weight: 700; font-size: var(--text-sm); color: var(--text-primary); }
.stage-card-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--text-primary); }
.stage-card-meta { font-size: var(--text-xs); color: var(--text-muted); }

/* --- Personal cockpit (My Work) --- */
.cockpit-section { margin-bottom: var(--space-6); }
.cockpit-section-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.cockpit-section-title .count { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--text-sm); }
.cockpit-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.cockpit-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-inline-start: 3px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-4); text-decoration: none; color: inherit; }
.cockpit-card:hover { border-color: var(--accent); }
.cockpit-card.attention { border-inline-start-color: var(--danger); }
.cockpit-card.waiting { border-inline-start-color: var(--warning); }
.cockpit-card-context { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.cockpit-card-title { font-weight: 600; color: var(--text-primary); }
.cockpit-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--text-muted); margin-top: auto; gap: var(--space-2); }

/* --- Control Panel domain cards --- */
.control-domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.control-domain-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); text-decoration: none; color: inherit; }
.control-domain-card:hover { border-color: var(--accent); }
.control-domain-category { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-strong); font-weight: 700; }
.control-domain-card h3 { margin: 2px 0 0; font-size: var(--text-lg); }
.control-domain-card p { color: var(--text-secondary); font-size: var(--text-sm); flex: 1; }
.control-domain-status { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: auto; }

/* --- Deliverable / file gallery (Task Command Center attachments) --- */
.deliverable-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.deliverable-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); text-decoration: none; color: inherit; }
.deliverable-card:hover { border-color: var(--accent); }
.deliverable-card-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); }
.deliverable-card-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.deliverable-card-meta { font-size: 11px; color: var(--text-muted); margin-top: auto; }

/* --- Approval card (visually distinct decision surface) --- */
.approval-card { border: 1px solid var(--warning); background: var(--warning-soft); border-radius: var(--radius-md); padding: var(--space-5); }
.approval-card .eyebrow { color: var(--warning); }

@media (max-width: 640px) {
  .workspace-header-facts { grid-template-columns: repeat(2, 1fr); }
  .client-card-facts { grid-template-columns: repeat(2, 1fr); }
  .deliverable-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   DYNAMIC EXPERIENCE MODE
   An optional, user-selectable Experience Mode (Settings -> AXS -> Experience
   Mode). Everything below is scoped under .experience-dynamic (set on
   .app-frame in MainLayout from Axs.Experience) so Classic Mode's CSS above
   is never touched by a single rule here. Dynamic Mode reuses the exact
   same component classes Classic Mode already renders (.project-card,
   .stage-card, .client-card, .action-item, .pipeline-card, .metric, ...) --
   it never duplicates markup or business logic, only adds motion, depth,
   and a real breadcrumb trail on top of the same real data. Every
   animation here is disabled by .reduced-motion (already global, see line
   38).
   ========================================================================= */

:root {
  --dyn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dyn-fast: 140ms;
  --dyn-base: 220ms;
  --dyn-slow: 380ms;
}

/* --- The single highest-leverage rule in this file: tokens.css defines
   --radius-sm/md/lg, --shadow-sm/md/lg, --accent*, and --focus-ring once,
   and every surface, card, button, tag, link, and focus state in the
   ENTIRE app is built from them. Redeclaring them here, scoped to
   .experience-dynamic on the app root, re-skins literally every one of
   those components at once with zero markup changes and zero risk to
   business logic, because CSS custom properties resolve to whichever
   declaration is closest up the DOM tree; this one is closer than
   tokens.css's :root, so it wins for everything inside .app-frame.
   Classic Mode is untouched -- --accent there still resolves to
   tokens.css's own gold per theme, exactly as before; this block only
   ever applies inside .experience-dynamic. Charcoal/black base surfaces
   are deliberately NOT overridden here -- Experience Mode and Theme stay
   independent axes (a user can run Dynamic on Dark or Midnight, both
   already near-black); pick Dark or Midnight in Settings for the intended
   charcoal ground this accent is designed against. */
.experience-dynamic {
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Recolor #3: back to gold, matching the approved reference mockup's own
     exact palette (--accent: #C9A961, --accent-light: #D4AF37) instead of
     the copper/neon-blue experiments that preceded it. Every component
     that already reads var(--accent)/--accent-strong/--accent-soft/
     --accent-text-on -- buttons, links, status tags, focus rings, the
     health ring's own accent uses, badges, progress bars, breadcrumbs --
     re-tints automatically, with no per-component change. */
  --accent: #c9a961;
  --accent-strong: #d4af37;
  --accent-soft: #2a2312;
  --accent-text-on: #0f0a05;
  --focus-ring: 0 0 0 3px rgba(201, 169, 97, 0.40);

  --shadow-sm: 0 2px 10px rgba(201, 169, 97, 0.16), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 16px 40px rgba(201, 169, 97, 0.22), 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 32px 80px rgba(201, 169, 97, 0.28), 0 10px 28px rgba(0, 0, 0, 0.42);
}

/* --- Reference mode's own defining visual DNA (approved mockup): a
   diagonal near-black gradient ground (not flat), and EVERY surface/card
   carrying a real, visible 2px gold border plus a gold-tinted gradient
   fill -- not the hairline border + flat fill Dynamic Mode used before.
   This is the single biggest lever for matching that reference's specific
   look, applied the same way every other Dynamic Mode restyle has been:
   scoped tokens/rules, zero markup changes, zero business-logic risk. */
.experience-dynamic { background: linear-gradient(135deg, #05050a 0%, #0d0d0d 50%, #0f0a05 100%); }
.experience-dynamic .surface,
.experience-dynamic .project-card,
.experience-dynamic .client-card,
.experience-dynamic .stage-card,
.experience-dynamic .pipeline-card,
.experience-dynamic .metric,
.experience-dynamic .hero-strip {
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, color-mix(in srgb, black 25%, transparent) 100%), var(--surface-raised);
}

@keyframes dyn-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Opacity-only entrance for anything that ALSO has its own :hover/:focus
   transform (cards, action items) -- a CSS `animation` holds its final
   keyframe value on the properties it animates for as long as the
   animation is in effect (animation-fill-mode: both never lets go), which
   silently overrides ANY other rule for that same property, including a
   more specific :hover selector, regardless of source order. dyn-rise's
   own `transform: translateY(0)` end-state was doing exactly that, which
   is why the hover-lift on cards was never actually visible. dyn-fade
   only ever animates opacity, so it can never fight a hover transform. */
@keyframes dyn-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dyn-pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* --- Breadcrumb trail: the "how did I get here" spatial context for the
   Client -> Project -> Task drill-down (Shared/Dynamic/DynBreadcrumb.razor).
   Rendered only by pages that opt in via Axs.Experience, so it never
   appears stacked with Classic Mode's own inline nav. -------------------- */
.dyn-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2);
  animation: dyn-rise var(--dyn-base) var(--dyn-ease) both;
}
.dyn-breadcrumb-crumb { color: var(--text-muted); text-decoration: none; }
.dyn-breadcrumb-crumb:hover { color: var(--accent-strong); text-decoration: underline; }
.dyn-breadcrumb-current { color: var(--text-secondary); font-weight: 600; }
.dyn-breadcrumb-sep { color: var(--border-strong); }
.workspace-header-breadcrumb { order: -1; }

/* --- Badge + dropdown styles, still used by the header Language switcher
   (Shared/LanguageSwitcher.razor). The Experience Mode switch now uses the
   compact .mode-switch (UNIFIED VISUAL SYSTEM, end of file).
   Originally: Topbar indicator: a permanent, page-independent signal that THIS
   user's session is in Dynamic Mode right now -- present in MainLayout on
   every single page (Company Overview, Work Station, list views included),
   so switching modes in Settings is never invisible even on a page that
   otherwise has little to animate. Read-only; the real toggle stays in
   Settings, this is just "you are here". ---------------------------------- */
.dyn-mode-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-strong);
  border: 1px solid var(--accent);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.dyn-mode-badge::before { content: '◆'; font-size: 9px; }
.dyn-mode-switcher { position: relative; }
.dyn-mode-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 50; min-width: 130px;
  background: var(--surface-overlay); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); overflow: hidden; padding: 4px;
  animation: dyn-fade var(--dyn-fast) var(--dyn-ease) both;
}
.dyn-mode-menu-item {
  display: block; width: 100%; text-align: start; padding: 8px 10px; border: 0; background: transparent;
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-sm);
}
.dyn-mode-menu-item:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-strong); }
.dyn-mode-menu-item-active { color: var(--accent-strong); cursor: default; }
.dyn-mode-menu-item-active::before { content: '✓ '; }

/* --- Workspace entrance: every workspace-header/surface a page mounts with
   is real, freshly-loaded content for that level of the hierarchy -- a
   single restrained rise-in on mount reads as "arriving here", not as
   decoration, and is skipped entirely under .reduced-motion. ------------- */
.experience-dynamic .workspace-header { animation: dyn-rise var(--dyn-base) var(--dyn-ease) both; }
.experience-dynamic .hero-strip {
  animation: dyn-rise var(--dyn-slow) var(--dyn-ease) both;
  position: relative; overflow: hidden;
  /* .hero-strip's base color (--accent-text-on, dark near-black) assumes
     Classic Mode's solid bright-gold background, where dark text is
     correct. Dynamic Mode replaces that background with a dark gradient
     a few rules up, but never reset the text color to match -- leaving
     dark text on a dark background. Reset it here to the normal light
     text token, scoped to Dynamic only so Classic's solid-gold hero
     strip keeps its correct dark text. */
  color: var(--text-primary);
}
.experience-dynamic .hero-strip h2 { color: var(--text-primary); }
/* Reference mode's ambient floating glow -- a soft radial blob drifting
   behind the hero content, never over it (z-index below .hero-strip's own
   text/actions, which already establish their own stacking context).
   Pure decoration, so it's the one dynamic-only effect not tied to real
   data -- kept to a single slow, small-amplitude drift, not a distraction
   from the real headline/stats next to it. */
.experience-dynamic .hero-strip::before {
  content: ''; position: absolute; top: -50%; right: -8%; width: 320px; height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  animation: dyn-float 7s ease-in-out infinite; pointer-events: none; z-index: 0;
}
.experience-dynamic .hero-strip > * { position: relative; z-index: 1; }
@keyframes dyn-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -18px); }
}

/* --- Surfaces: G-Empire's single most-reused container. The full 2px
   border + gradient fill is set above (the reference mode's defining
   trait); this just adds the entrance rise and the deeper resting shadow
   so the difference from Classic Mode is visible at rest, not only
   mid-transition. -------------------------------------------------------- */
.experience-dynamic .surface {
  animation: dyn-rise var(--dyn-slow) var(--dyn-ease) both;
  box-shadow: var(--shadow-md);
}

/* --- Smart cards: the same real ProjectCardViewModel / StageInstance /
   Client data Classic Mode renders, given depth at rest (not only on hover)
   and a staggered arrival instead of appearing all at once -- "objects in a
   workspace", not database rows. Sharp-cornered geometry and the restrained
   shadow/color scale from tokens.css are kept exactly as-is. -------------- */
.experience-dynamic .project-card,
.experience-dynamic .stage-card,
.experience-dynamic .client-card,
.experience-dynamic .pipeline-card,
.experience-dynamic .deliverable-card {
  animation: dyn-fade var(--dyn-base) var(--dyn-ease) both;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dyn-fast) var(--dyn-ease), box-shadow var(--dyn-fast) var(--dyn-ease), border-color var(--dyn-fast) var(--dyn-ease);
}
.experience-dynamic .project-card:hover,
.experience-dynamic .client-card:hover,
.experience-dynamic .pipeline-card:hover,
.experience-dynamic .deliverable-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.experience-dynamic .stage-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* --- Glossy pointer-tracked highlight (wwwroot/js/dynamicMode.js: attach()
   creates one of these per tilted card, onPointerMove repositions its
   radial-gradient center to the exact cursor position). border-radius:
   inherit clips the highlight to the card's own rounded shape without
   forcing overflow:hidden on the card itself, which would otherwise clip
   the approval-celebration ring (Task Approval Queue) that deliberately
   scales past the card's edge. mix-blend-mode:screen lightens whatever
   color is underneath rather than painting a flat white circle over it. */
.dyn-card-shine {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transition: opacity 200ms ease;
}

/* --- Layered card depth: paired with dynamicMode.js's attach(), which
   sets transform-style:preserve-3d on the card itself. Each of these is
   already a flex item of its own tilted card (blockified by the flex
   layout, so a 3D transform applies with no extra display change needed)
   -- lifting it toward the viewer on its own Z plane means it visibly
   separates from the card's background and swings through a wider arc
   than the rest of the card as the pointer moves, instead of the whole
   card tilting as one flat plane. This is what actually reads as "a 3D
   object with depth" rather than "a card that leans". --------------------- */
.experience-dynamic .project-card-identity,
.experience-dynamic .client-card-head,
.experience-dynamic .pipeline-card-title,
.experience-dynamic .stage-card-title,
.experience-dynamic .deliverable-card-name {
  transform: translateZ(22px);
}

/* Staggered arrival for card grids -- capped so a long list doesn't keep
   animating for seconds; anything past the 6th card arrives together with
   it rather than queuing further. */
.experience-dynamic .project-card-grid > *,
.experience-dynamic .stage-card-grid > *,
.experience-dynamic .client-gallery > * {
  animation-name: dyn-fade; animation-duration: var(--dyn-base); animation-timing-function: var(--dyn-ease); animation-fill-mode: both;
}
.experience-dynamic .project-card-grid > *:nth-child(1), .experience-dynamic .stage-card-grid > *:nth-child(1), .experience-dynamic .client-gallery > *:nth-child(1) { animation-delay: 0ms; }
.experience-dynamic .project-card-grid > *:nth-child(2), .experience-dynamic .stage-card-grid > *:nth-child(2), .experience-dynamic .client-gallery > *:nth-child(2) { animation-delay: 30ms; }
.experience-dynamic .project-card-grid > *:nth-child(3), .experience-dynamic .stage-card-grid > *:nth-child(3), .experience-dynamic .client-gallery > *:nth-child(3) { animation-delay: 60ms; }
.experience-dynamic .project-card-grid > *:nth-child(4), .experience-dynamic .stage-card-grid > *:nth-child(4), .experience-dynamic .client-gallery > *:nth-child(4) { animation-delay: 90ms; }
.experience-dynamic .project-card-grid > *:nth-child(5), .experience-dynamic .stage-card-grid > *:nth-child(5), .experience-dynamic .client-gallery > *:nth-child(5) { animation-delay: 120ms; }
.experience-dynamic .project-card-grid > *:nth-child(n+6), .experience-dynamic .stage-card-grid > *:nth-child(n+6), .experience-dynamic .client-gallery > *:nth-child(n+6) { animation-delay: 150ms; }

/* --- Actions Needed: this is the command-center's single most important
   list (ActionCenterPanel), so an urgent item gets a slow, restrained
   attention pulse on its marker only -- never the whole row -- and the list
   itself arrives top-first. ------------------------------------------------ */
.experience-dynamic .action-item {
  animation: dyn-fade var(--dyn-fast) var(--dyn-ease) both;
  transition: transform var(--dyn-fast) var(--dyn-ease), border-color var(--dyn-fast) var(--dyn-ease);
}
.experience-dynamic .action-item:hover { transform: translateX(2px); }
.experience-dynamic .action-item.urgent .action-marker { animation: dyn-pulse-soft 2.2s ease-in-out infinite; }
/* Reference mode's shimmer sweep, reserved for the single most urgent
   real state (a breached SLA / critical item), matching its "spotlight
   card" treatment -- not applied broadly, so it still reads as "this one
   specifically" rather than becoming ambient noise across the page. */
.experience-dynamic .action-item.urgent { position: relative; overflow: hidden; }
.experience-dynamic .action-item.urgent::after {
  content: ''; position: absolute; inset: 0; width: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-strong) 22%, transparent), transparent);
  transform: translateX(-100%); animation: dyn-shimmer 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes dyn-shimmer { to { transform: translateX(100%); } }

/* --- Task lifecycle stepper (Shared/Dynamic/DynLifecycleStepper.razor):
   the one real, honest connected-line flow diagram in Dynamic Mode -- a
   Task's own task.status IS genuinely sequential (Task -> In Progress ->
   Under Review -> Ready to Publish -> At Publishing Station -> Published),
   unlike a Task's Subtasks (deliberately NOT connected, see
   WorkflowStepper.razor). Gold/dark, matching the rest of Dynamic Mode --
   never the rainbow-gradient infographic look this was extracted from. */
.dyn-lifeline { display: flex; align-items: flex-start; overflow-x: auto; padding: var(--space-2) 0; }
.dyn-lifeline-node { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0; width: 96px; }
.dyn-lifeline-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface-sunken); }
.dyn-lifeline-label { font-size: 11px; color: var(--text-muted); text-align: center; line-height: 1.3; }
.dyn-lifeline-connector { flex: 1 0 20px; height: 2px; margin-top: 7px; background: repeating-linear-gradient(to right, var(--border-strong) 0 4px, transparent 4px 8px); min-width: 20px; }
.dyn-lifeline-connector-done { background: var(--accent); }
.dyn-lifeline-node.dyn-lifeline-done .dyn-lifeline-dot { background: var(--accent); border-color: var(--accent); }
.dyn-lifeline-node.dyn-lifeline-done .dyn-lifeline-label { color: var(--text-secondary); }
.dyn-lifeline-node.dyn-lifeline-current .dyn-lifeline-dot {
  background: var(--accent-strong); border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 30%, transparent);
  animation: dyn-pulse-soft 2s ease-in-out infinite;
}
.dyn-lifeline-node.dyn-lifeline-current .dyn-lifeline-label { color: var(--text-primary); font-weight: 700; }
.experience-dynamic .dyn-lifeline-node { animation: dyn-fade var(--dyn-base) var(--dyn-ease) both; }
.experience-dynamic .dyn-lifeline-node:nth-child(1) { animation-delay: 0ms; }
.experience-dynamic .dyn-lifeline-node:nth-child(3) { animation-delay: 60ms; }
.experience-dynamic .dyn-lifeline-node:nth-child(5) { animation-delay: 120ms; }
.experience-dynamic .dyn-lifeline-node:nth-child(7) { animation-delay: 180ms; }
.experience-dynamic .dyn-lifeline-node:nth-child(9) { animation-delay: 240ms; }
.experience-dynamic .dyn-lifeline-node:nth-child(11) { animation-delay: 300ms; }
.dyn-lifeline-exception { display: flex; align-items: center; gap: var(--space-3); }

/* --- Ambient urgency: a slow, restrained breathing glow on real
   attention/critical states (Subtask cards flagged NeedsAttention, the
   Critical segment of the health ring) -- ongoing but quiet motion that
   signals "this needs you" without stealing focus from work, distinct
   from the one-shot entrance/hover motion everything else uses. --------- */
.experience-dynamic .stage-card.stage-attention { animation: dyn-attention-glow 2.6s ease-in-out infinite; }
.experience-dynamic .dyn-health-ring-seg.dyn-ring-critical { animation: dyn-ring-glow 2.6s ease-in-out infinite; }
@keyframes dyn-attention-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 35%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 0%, transparent); }
}
@keyframes dyn-ring-glow {
  0%, 100% { stroke-width: 14; opacity: 1; }
  50% { stroke-width: 16; opacity: 0.85; }
}

/* --- Denser, smaller project cards: more of them fit on screen at once,
   which reads as a working command center rather than a handful of
   oversized tiles. Kept to spacing/type-scale changes only -- the card's
   real content, actions, and links are untouched. ------------------------- */
.experience-dynamic .project-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.experience-dynamic .project-card { padding: var(--space-3); gap: var(--space-2); }
.experience-dynamic .project-card-identity h3 { font-size: var(--text-sm); }
.experience-dynamic .project-card-facts { padding: var(--space-2) 0; }
.experience-dynamic .client-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.experience-dynamic .client-card,
.experience-dynamic .stage-card,
.experience-dynamic .pipeline-card { padding: var(--space-3); }
.experience-dynamic .stage-card-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.experience-dynamic .project-card-facts .fact-value { font-size: var(--text-xs); }

/* --- Client identity badge: a colored initial mark ahead of the client
   name, the same "who is this" cue avatar-driven dashboards use, built
   from a real field (the client's own name) rather than a placeholder
   image this app has no real asset for. CSS attr()-driven, so it needs no
   markup change beyond the one data-initial attribute LiveProjectCard
   already carries. ---------------------------------------------------------- */
.experience-dynamic .project-card-identity .client-name { display: flex; align-items: center; gap: var(--space-2); }
.experience-dynamic .project-card-identity .client-name[data-initial]::before {
  content: attr(data-initial);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--font-mono); font-weight: 700; font-size: 10px; text-transform: uppercase;
}

/* --- Metrics / KPI tiles: a quiet rise-in only, no pulsing numbers -- the
   Dashboard should feel alive because of what it prioritizes (Actions
   Needed first), not because static numbers move. ------------------------- */
.experience-dynamic .metric, .experience-dynamic .health-breakdown-item { animation: dyn-rise var(--dyn-base) var(--dyn-ease) both; }

/* --- Focus affordance: a layered "halo" ring (a gap of real background,
   then an accent ring around it) instead of a plain glow -- the specific
   focus-ring shape used across HeroUI's own component kit, adopted here
   as one of the structural patterns pulled from that reference (colors
   stay this app's own gold, not HeroUI's default blue/purple -- see the
   recolor history above this file's Dynamic Mode section). -------------- */
.experience-dynamic a:focus-visible,
.experience-dynamic button:focus-visible,
.experience-dynamic input:focus-visible,
.experience-dynamic .project-card:focus-visible,
.experience-dynamic .stage-card:focus-visible,
.experience-dynamic .client-card:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-strong);
}

/* --- Pill-shaped chips: HeroUI's status/tag components read as small
   pills, not sharp-cornered labels -- applied to the same real status
   tags/health chips this app already renders, no new component. -------- */
.experience-dynamic .status-tag,
.experience-dynamic .health-chip,
.experience-dynamic .dyn-mode-badge { border-radius: 999px; }

/* --- Tactile press feedback: HeroUI's isPressable components visibly
   compress on click, which reads as "the interface responded to you"
   more immediately than a hover state alone. Scoped to plain buttons
   only (not the GSAP-tilted cards) -- those cards' transform is already
   owned by wwwroot/js/dynamicMode.js each frame, and a CSS :active
   transform would just be silently overwritten by the next pointermove
   tick, the same inline-style-wins conflict the tilt fix itself
   resolved earlier; buttons have no competing JS transform, so this is
   conflict-free. ----------------------------------------------------------- */
.experience-dynamic .primary-button:active,
.experience-dynamic .secondary-button:active,
.experience-dynamic .icon-only-warning:active { transform: scale(0.96); }
.experience-dynamic .primary-button,
.experience-dynamic .secondary-button { transition: transform var(--dyn-fast) var(--dyn-ease), background-color var(--dyn-fast) var(--dyn-ease), border-color var(--dyn-fast) var(--dyn-ease); }

/* --- Animated toggle switch: replaces the native checkbox look on
   Settings' "Reduce motion" / "Show sync diagnostics" rows with a real
   sliding pill switch (HeroUI's most recognizable component), built
   entirely from the existing <input type="checkbox"> already in
   Pages/Settings.razor -- no markup change, appearance:none plus a
   ::before thumb. Falls back to a plain (still functional) checkbox in
   any browser that doesn't support styling replaced-element pseudo-
   elements; the underlying checkbox/label semantics never change. ------- */
.experience-dynamic .settings-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 40px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-sunken); border: 1px solid var(--border-strong);
  position: relative; cursor: pointer;
  transition: background var(--dyn-fast) var(--dyn-ease), border-color var(--dyn-fast) var(--dyn-ease);
}
.experience-dynamic .settings-check input[type="checkbox"]::before {
  content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-muted);
  transition: transform var(--dyn-base) var(--dyn-ease), background var(--dyn-fast) var(--dyn-ease);
}
.experience-dynamic .settings-check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.experience-dynamic .settings-check input[type="checkbox"]:checked::before { transform: translateX(18px); background: var(--accent-text-on); }

/* --- Collapsed nav rail: bigger, clearer section icons. Classic Mode's
   collapsed rail keeps its existing 18px icon size (see nav a span:first-
   child above) -- this only enlarges them in Dynamic Mode, plus widens
   the rail itself a little so the bigger glyphs still have breathing
   room instead of touching the rail's edges. Real content/routes are
   untouched -- this is purely how big the same icons render. ----------- */
.experience-dynamic .sidebar.rail-collapsed { width: 72px; flex-basis: 72px; }
.experience-dynamic .sidebar.rail-collapsed .nav-group-header,
.experience-dynamic .sidebar.rail-collapsed nav a,
.experience-dynamic .sidebar.rail-collapsed .nav-group-links a {
  padding: var(--space-3) var(--space-1);
}

/* --- Chrome vs. content: a command center gives its real content the
   room, not its own chrome. The topbar and its search field shrink, and
   the generous top margins under page/workspace headers tighten, so more
   of the viewport goes to the actual dashboard/workspace on first paint.
   Classic Mode's topbar is untouched -- this is scoped to Dynamic only. */
.experience-dynamic .topbar { height: 56px; padding: 0 var(--space-4); gap: var(--space-3); }
.experience-dynamic .brand-mark { width: 34px; height: 22px; }
.experience-dynamic .brand span:last-child { font-size: var(--text-md); }
.experience-dynamic .topbar-search { max-width: 260px; margin: 0 var(--space-4); }
.experience-dynamic .topbar-search input { height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.experience-dynamic .topbar .icon-button { font-size: var(--text-xl); padding: var(--space-1) var(--space-2); }
.experience-dynamic .topbar .dyn-mode-badge { padding: 4px 10px; font-size: var(--text-xs); }
.experience-dynamic .topbar .connection-pill,
.experience-dynamic .topbar .user-chip { font-size: var(--text-xs); }
/* Everything below the (now taller) header stays compact -- the header
   itself is the one piece of chrome allowed real presence; the space
   between it and content, and the sections/surfaces themselves, all
   tighten further so the page still reads as dense overall. */
.experience-dynamic .page-heading { margin-bottom: var(--space-2); }
.experience-dynamic .workspace-header { margin-bottom: var(--space-2); }
.experience-dynamic .surface { padding: var(--space-3); }
.experience-dynamic .surface-heading { margin-bottom: var(--space-2); }

/* --- Company Overview's health ring: a real SVG summary of the exact same
   overview.HealthCounts the chip list below it already shows -- genuinely
   new visual content (not a CSS reskin of an existing element), because a
   command-center dashboard needs at least one real visualization to read
   as a dashboard rather than a document. Segment order/colors match the
   existing .health-chip semantics exactly (success/warning/warning/danger)
   so it never introduces a second, inconsistent color language for health. */
.dyn-health-layout { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.dyn-health-ring-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.dyn-health-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dyn-health-ring-track { fill: none; stroke: var(--surface-sunken); stroke-width: 14; }
.dyn-health-ring-seg { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dasharray var(--dyn-slow) var(--dyn-ease); }
.dyn-health-ring-seg.dyn-ring-healthy { stroke: var(--success); }
.dyn-health-ring-seg.dyn-ring-watch, .dyn-health-ring-seg.dyn-ring-at-risk { stroke: var(--warning); }
.dyn-health-ring-seg.dyn-ring-critical { stroke: var(--danger); }
.dyn-health-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.dyn-health-ring-center strong { font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--text-primary); line-height: 1; }
.dyn-health-ring-center span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* --- Progress bars (LiveProjectCard): the reference dashboards show
   progress as a visible bar on nearly every card, not just a fraction in
   text. This is the exact same CompletedStageCount/TotalStageCount the
   text next to it already states -- one real number, two representations,
   never a separate/invented completion metric. --------------------------- */
.dyn-progress-track { height: 5px; background: var(--surface-sunken); border-radius: 999px; overflow: hidden; margin: var(--space-2) 0; }
.dyn-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: inherit; transition: width var(--dyn-slow) var(--dyn-ease); }
/* Grows from 0 to its real width (set inline by LiveProjectCard.razor from
   CompletedStageCount/TotalStageCount) on mount, matching the reference
   mode's own progress-bar entrance. No "to" keyframe needed -- a CSS
   animation with only a "from" value implicitly animates to the element's
   own specified (inline) width. */
.experience-dynamic .dyn-progress-fill { animation: dyn-progress-grow var(--dyn-slow) var(--dyn-ease) both; animation-delay: 200ms; }
@keyframes dyn-progress-grow { from { width: 0; } }

/* --- Delivery bar chart (Company Overview): a second, comparative view of
   the exact same four KPI numbers already shown as tiles above it --
   "which of these is the real problem" reads off relative bar length in
   under a second, which four separate cards don't give you. Semantic
   color only (danger/warning/accent), same as the KPI tiles and health
   ring -- never a rainbow legend for four numbers. ------------------------ */
.dyn-bar-chart { display: flex; flex-direction: column; gap: var(--space-3); }
.dyn-bar-row { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: var(--space-3); }
.dyn-bar-label { font-size: var(--text-sm); color: var(--text-secondary); }
.dyn-bar-track { height: 10px; background: var(--surface-sunken); border-radius: 999px; overflow: hidden; }
.dyn-bar-fill { height: 100%; border-radius: inherit; width: var(--dyn-bar-target, 0%); }
.dyn-bar-fill.dyn-bar-danger { background: var(--danger); }
.dyn-bar-fill.dyn-bar-warning { background: var(--warning); }
.dyn-bar-fill.dyn-bar-accent { background: var(--accent); }
.dyn-bar-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; color: var(--text-primary); font-weight: 600; }
.experience-dynamic .dyn-bar-fill { animation: dyn-bar-grow var(--dyn-slow) var(--dyn-ease) both; animation-delay: 150ms; }
@keyframes dyn-bar-grow { from { width: 0; } to { width: var(--dyn-bar-target, 0%); } }

@media (max-width: 640px) {
  .dyn-bar-row { grid-template-columns: 110px 1fr 36px; gap: var(--space-2); }
}

/* --- Subtask grid label: reinforces in words what the unordered grid
   layout (see WorkflowStepper.razor, Blueprint correction 2026-09-17)
   already implies visually -- Subtasks under a Main Task are independent
   parallel work, never a pipeline with a "current" step. ------------------ */
.dyn-parallel-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-2); }

/* --- Client Gallery: reverted from an overlapping "fanned deck" (dropped
   per explicit feedback -- it read as a gimmick, not a premium motion) back
   to a plain grid. It still isn't static: the same GSAP pointer-tracking
   3D tilt + glossy pointer-tracked highlight every other smart card gets
   (see wwwroot/js/dynamicMode.js -- .client-card is already in
   TILT_SELECTOR) is the "better movement" here -- real depth driven by
   where the cursor actually is, not a permanently rotated stack. --------- */
.experience-dynamic .client-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4);
  padding-top: var(--space-3);
}

@media (max-width: 640px) {
  .dyn-breadcrumb { font-size: 11px; }
  .dyn-health-layout { flex-direction: column; align-items: flex-start; }
}

/* ---------- Sticky section header ----------
   The row carrying the section/page name (page-heading on list pages,
   workspace-header-top on client/project/task workspaces) stays pinned
   under the topbar while the rest of the page scrolls normally.
   `.workspace-header` becomes display:contents so its title row is a
   direct child of the (tall) page container -- a sticky element can only
   stay pinned inside its parent's box, and the small wrapper would have
   released it as soon as the wrapper scrolled away. */
:root { --topbar-h: 48px; }
.experience-dynamic { --topbar-h: 56px; }
@media (min-width: 769px) {
  .page-heading,
  .workspace-header-top {
    position: sticky; top: var(--topbar-h); z-index: 9;
    padding-block: var(--space-3);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .page-heading { margin-bottom: var(--space-5); }
  .workspace-header { display: contents; }
  .workspace-header-breadcrumb { margin-bottom: var(--space-2); }
  .workspace-header-top { margin-bottom: var(--space-4); }
  .workspace-header-facts { margin-bottom: var(--space-6); }
}

/* ---------- Pinned header: scrolled state ----------
   Once the page scrolls (html.page-scrolled, set by platform.js) the
   sticky heading row gets a pinned look -- deeper glass, accent glow
   line, drop shadow -- and its descriptive text collapses away so the
   pinned row takes less vertical space. */
@media (min-width: 769px) {
  .page-heading,
  .workspace-header-top {
    transition: padding .25s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
  }
  .page-heading::after,
  .workspace-header-top::after {
    content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent-strong) 50%, var(--accent) 80%, transparent);
    opacity: 0; transform: scaleX(.3); transform-origin: center;
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .page-heading h1,
  .workspace-header-identity h1 { transition: font-size .25s ease; }
  .page-heading > div:first-child > p,
  .page-heading > div:first-child > .eyebrow,
  .workspace-header-identity > .eyebrow,
  .workspace-header-subtitle {
    display: block; overflow: hidden; max-height: 4em; opacity: 1;
    transition: max-height .25s ease, opacity .2s ease, margin .25s ease;
  }
  .workspace-header-subtitle { display: flex; }

  .page-scrolled .page-heading,
  .page-scrolled .workspace-header-top {
    padding-block: var(--space-2);
    align-items: center;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45), 0 1px 0 color-mix(in srgb, var(--accent) 25%, transparent);
  }
  .page-scrolled .page-heading::after,
  .page-scrolled .workspace-header-top::after { opacity: .9; transform: scaleX(1); }
  .page-scrolled .page-heading h1,
  .page-scrolled .workspace-header-identity h1 { font-size: 1.25rem; margin-top: 0; }
  .page-scrolled .page-heading > div:first-child > p,
  .page-scrolled .page-heading > div:first-child > .eyebrow,
  .page-scrolled .workspace-header-identity > .eyebrow,
  .page-scrolled .workspace-header-subtitle {
    max-height: 0; opacity: 0; margin: 0;
  }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .page-heading, .workspace-header-top, .page-heading::after, .workspace-header-top::after,
  .page-heading h1, .workspace-header-identity h1,
  .page-heading > div:first-child > p, .workspace-header-subtitle { transition: none; }
}

/* Room below the last group so ANY opened group can be scrolled to the
   vertical middle of the rail (gempireNav.centerGroup); only while a
   group is open, and not for the folded icon rail. */
.sidebar.has-open-group:not(.rail-collapsed) { padding-bottom: 45vh; }


/* ---------------------------------------------------------------------
   Arabic / RTL (Localization/Loc.cs). Layout already uses logical
   properties (inline-start/end), so dir="rtl" mirrors the shell; these
   rules only cover what logical properties can't: transforms, directional
   icons, and the Arabic typeface.
   --------------------------------------------------------------------- */
html[lang="ar"] {
  --font-body: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-heading: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea { font-family: var(--font-body); }
html[lang="ar"] .eyebrow, html[lang="ar"] .nav-group-header { letter-spacing: 0; }
[dir="rtl"] .sidebar-collapse-toggle .icon-mask { transform: scaleX(-1); }
[dir="rtl"] .experience-dynamic .action-item:hover { transform: translateX(-2px); }
[dir="rtl"] .experience-dynamic .settings-check input[type="checkbox"]:checked::before { transform: translateX(-18px); }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"] { direction: ltr; text-align: end; }
@media (max-width: 900px) {
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  [dir="rtl"] .sidebar.nav-open { transform: translateX(0); }
}
.login-lang { position: absolute; top: var(--space-6); inset-inline-end: var(--space-8); z-index: 2; }
.lang-badge::before { content: '🌐' !important; font-size: 11px !important; }

/* Language switch motion: panels slide in along the new reading
   direction -- left->right into Arabic, right->left into English --
   with menu items staggered so the sidebar reads as re-flowing. */
@keyframes lang-in-ar { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes lang-in-en { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes lang-fade { from { opacity: 0.2; } to { opacity: 1; } }
.lang-anim-ar .topbar, .lang-anim-en .topbar { animation: lang-fade 0.45s ease both; }
.lang-anim-ar .sidebar .nav-group, .lang-anim-ar .sidebar > nav > a,
.lang-anim-ar .content > *, .lang-anim-ar .portal-content > *, .lang-anim-ar .public-approval-content > *,
.lang-anim-ar .login-stage > *, .lang-anim-ar .mobile-tab-bar > *, .lang-anim-ar .topbar-actions > * {
  animation: lang-in-ar 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lang-anim-en .sidebar .nav-group, .lang-anim-en .sidebar > nav > a,
.lang-anim-en .content > *, .lang-anim-en .portal-content > *, .lang-anim-en .public-approval-content > *,
.lang-anim-en .login-stage > *, .lang-anim-en .mobile-tab-bar > *, .lang-anim-en .topbar-actions > * {
  animation: lang-in-en 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
:is(.lang-anim-ar, .lang-anim-en) .sidebar .nav-group:nth-child(1) { animation-delay: 0.03s; }
:is(.lang-anim-ar, .lang-anim-en) .sidebar .nav-group:nth-child(2) { animation-delay: 0.07s; }
:is(.lang-anim-ar, .lang-anim-en) .sidebar .nav-group:nth-child(3) { animation-delay: 0.11s; }
:is(.lang-anim-ar, .lang-anim-en) .sidebar .nav-group:nth-child(4) { animation-delay: 0.15s; }
:is(.lang-anim-ar, .lang-anim-en) .sidebar .nav-group:nth-child(5) { animation-delay: 0.19s; }
:is(.lang-anim-ar, .lang-anim-en) .sidebar .nav-group:nth-child(6) { animation-delay: 0.23s; }
:is(.lang-anim-ar, .lang-anim-en) .sidebar .nav-group:nth-child(n+7) { animation-delay: 0.27s; }
:is(.lang-anim-ar, .lang-anim-en) .content > *:nth-child(2) { animation-delay: 0.08s; }
:is(.lang-anim-ar, .lang-anim-en) .content > *:nth-child(3) { animation-delay: 0.14s; }
:is(.lang-anim-ar, .lang-anim-en) .content > *:nth-child(n+4) { animation-delay: 0.2s; }

/* RTL: directional arrows (dashboard attention tiles, "open" links) point
   the other way so they still read as "go forward". */
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }


/* ---- Offline sync status + panel ------------------------------------------------ */
.sync-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-status .sync-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.sync-status-pending .sync-dot, .sync-status-offline .sync-dot { background: var(--warning); }
.sync-status-failed .sync-dot, .sync-status-conflict .sync-dot { background: var(--danger, #d64545); }
.sync-status-syncing .sync-dot { background: var(--accent); animation: sync-pulse 1s ease-in-out infinite; }
@keyframes sync-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sync-status-syncing .sync-dot { animation: none; } }
@media (max-width: 720px) { .sync-status { max-width: 40px; font-size: 0; padding: 6px; } }
.sync-panel-actions { display: flex; gap: var(--space-2); }
.sync-note { margin: var(--space-2) 0; }
.sync-note.warning { color: var(--warning); }
.sync-item { border-top: 1px solid var(--border); padding: var(--space-3) 0; display: grid; gap: var(--space-2); }
.sync-item-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.sync-chip { font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.sync-chip-conflict, .sync-chip-rejected, .sync-chip-blocked { color: var(--danger, #d64545); border-color: currentColor; }
.sync-chip-pending { color: var(--warning); border-color: currentColor; }
.sync-diff { display: grid; gap: 2px; font-size: var(--text-sm); overflow-x: auto; }
.sync-diff-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 2fr; gap: var(--space-3); padding: 4px 0; }
.sync-diff-head { color: var(--text-muted, inherit); font-weight: 600; }
.sync-item-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.pending-tag { margin-inline-start: var(--space-2); color: var(--warning); border-color: currentColor; }

/* Entity avatars (clients / employees / projects) -- same pictures as the mobile app. */
.entity-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; overflow: visible; vertical-align: middle; }
.entity-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.entity-avatar-initials { line-height: 1; }
.entity-avatar-edit { position: absolute; inset-inline-end: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--border-strong); }
.entity-avatar-edit:hover { background: var(--accent-soft); }
.entity-name-with-avatar { display: inline-flex; align-items: center; gap: var(--space-2); }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }

/* Access Permissions: per-employee summary + section grid */
.access-summary { margin: var(--space-2) 0 0; padding-inline-start: 1.1em; display: grid; gap: 2px; }
.access-summary li { color: var(--text-muted); font-size: var(--text-sm); }
.access-summary li strong { color: var(--text-primary); font-weight: 600; }
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.section-row { display: flex; flex-direction: column; gap: 4px; }
.section-row select { width: 100%; }
.section-row .source-note { font-size: var(--text-xs); color: var(--text-muted); }
.access-tree { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.access-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.access-group-head { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); }
.access-group-head > input[type="checkbox"] { width: 18px; height: 18px; flex: none; cursor: pointer; }
.access-group-toggle { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: start; }
.access-group-title { flex: 1; font-weight: 600; }
.access-count { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.access-chevron { color: var(--text-muted); transition: transform .15s ease; }
.access-group.open .access-chevron { transform: rotate(180deg); }
.access-group-body { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding: var(--space-2) var(--space-3); padding-inline-start: calc(var(--space-3) + 18px + var(--space-3)); }
.access-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; min-height: 40px; }
.access-item { padding: var(--space-1) 0; border-bottom: 1px dashed var(--border); }
.access-item:last-child { border-bottom: 0; }
.access-item select { width: auto; min-width: 150px; }
.access-item-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.access-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Detailed actions (2026-09-30): the page row on top, then one line per
   operation -- tick, name, broad-family tag and what it allows. */
.access-item { flex-direction: column; align-items: stretch; }
.access-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.access-view-note { font-size: var(--text-xs); color: var(--text-muted); margin-inline-start: 6px; }
.access-action-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px var(--space-3); padding: var(--space-2) 0 var(--space-2); padding-inline-start: 26px; }
.access-action-list.disabled { opacity: .45; }
.access-action { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 6px 8px; border-radius: var(--radius-sm, 8px); cursor: pointer; }
.access-action:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.access-action-list.disabled .access-action { cursor: not-allowed; }
.access-action input { margin-top: 3px; flex: none; width: auto; padding: 0; }
.access-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.access-action-label { font-weight: 600; font-size: var(--text-sm); }
.access-action-text small { color: var(--text-muted); line-height: 1.45; }
.access-kind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; margin-inline-start: 4px; vertical-align: 1px; border: 1px solid currentColor; }
.access-kind-add { color: var(--success, #2e9d5b); }
.access-kind-edit { color: var(--accent); }
.access-kind-approve { color: var(--warning, #c98a12); }
.access-kind-delete { color: var(--danger, #d64545); }
.access-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--text-sm); cursor: pointer; user-select: none; }
.access-chip:has(input:checked) { border-color: var(--accent, currentColor); }
.access-chip.disabled { opacity: .45; cursor: not-allowed; }

/* Employee card */
.employee-card-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.card-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.card-table th, .card-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: start; }
.card-table-wrap { overflow-x: auto; }
.workspace-header-avatar { flex: none; }
.workspace-header-avatar + .workspace-header-identity { flex: 1; min-width: 200px; }

/* ---- Sleep Screen (2026-09-26): privacy cover while the employee is away.
   Always dark and opaque; shows only the chosen look and the time. ---- */
.sleep-screen { position: fixed; inset: 0; z-index: 2147483000; background: #06070a; color: #f4efe1; display: grid; place-items: center; overflow: hidden; cursor: pointer; outline: none; animation: sleep-in .35s ease-out; }
@keyframes sleep-in { from { opacity: 0; } to { opacity: 1; } }
.sleep-center { position: relative; z-index: 2; text-align: center; padding: 24px; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.sleep-clock { font-family: var(--font-display); font-size: clamp(64px, 14vw, 150px); font-weight: 300; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.sleep-date { margin-top: 10px; font-size: clamp(15px, 2.4vw, 22px); opacity: .8; }
.sleep-hint { margin-top: 36px; font-size: 14px; opacity: .6; animation: sleep-breathe 3.2s ease-in-out infinite; }
@keyframes sleep-breathe { 50% { opacity: .25; } }
.sleep-unlock { margin: 32px auto 0; display: grid; gap: 10px; width: min(300px, 80vw); cursor: default; }
.sleep-unlock input { text-align: center; background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 10px 12px; }
.sleep-unlock p { margin: 0; color: #ffb4a8; font-size: 13px; }
.sleep-unlock .link-button { color: inherit; opacity: .7; }
.sleep-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sleep-image + .sleep-center { background: rgba(0,0,0,.35); border-radius: 24px; backdrop-filter: blur(4px); }
.sleep-screen.sleep-clock .sleep-clock { font-size: clamp(90px, 22vw, 240px); }
.sleep-screen.sleep-clock .sleep-center { animation: sleep-drift 40s ease-in-out infinite alternate; }
@keyframes sleep-drift { from { transform: translate(-6vw, -4vh); } to { transform: translate(6vw, 4vh); } }

.sleep-aurora { position: absolute; inset: -20%; filter: blur(70px); opacity: .75; }
.sleep-aurora i { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; animation: sleep-float 22s ease-in-out infinite alternate; }
.sleep-aurora i:nth-child(1) { background: #c9a961; left: 5%; top: 10%; }
.sleep-aurora i:nth-child(2) { background: #2b4c7e; right: 0; top: 30%; animation-duration: 28s; }
.sleep-aurora i:nth-child(3) { background: #5b2a6e; left: 30%; bottom: 0; animation-duration: 34s; }
@keyframes sleep-float { to { transform: translate(12vw, -10vh) scale(1.25); } }

.sleep-orbit { position: absolute; width: min(70vmin, 560px); aspect-ratio: 1; display: grid; place-items: center; opacity: .55; }
.sleep-orbit img { width: 22%; filter: drop-shadow(0 0 30px rgba(201,169,97,.6)); animation: sleep-breathe 4s ease-in-out infinite; }
.sleep-orbit .ring { position: absolute; border: 1px solid rgba(201,169,97,.35); border-radius: 50%; animation: sleep-spin 18s linear infinite; }
.sleep-orbit .ring i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #d4af37; box-shadow: 0 0 14px #d4af37; }
.sleep-orbit .r1 { inset: 20%; } .sleep-orbit .r2 { inset: 8%; animation-duration: 28s; animation-direction: reverse; } .sleep-orbit .r3 { inset: -4%; animation-duration: 42s; }
@keyframes sleep-spin { to { transform: rotate(360deg); } }

.sleep-stars { position: absolute; inset: 0; background: radial-gradient(ellipse at bottom, #111a2e 0%, #06070a 70%); }
.sleep-stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; animation: sleep-twinkle 4s ease-in-out infinite; }
@keyframes sleep-twinkle { 50% { opacity: .15; } }

.reduced-motion .sleep-screen *, .reduced-motion .sleep-screen { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sleep-screen, .sleep-screen * { animation: none !important; } }

/* Settings: administrator picks the look */
.sleep-admin { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.sleep-admin h3 { margin: 0 0 var(--space-3); }
.sleep-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.sleep-choice { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.sleep-choice.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.sleep-thumb { position: relative; height: 80px; border-radius: 8px; overflow: hidden; background: #06070a; display: grid; place-items: center; }
.sleep-thumb i { position: absolute; width: 50%; aspect-ratio: 1; border-radius: 50%; filter: blur(14px); }
.sleep-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sleep-image-thumb span { font-size: 28px; }
.thumb-aurora i:nth-child(1) { background: #c9a961; left: 0; top: 0; }
.thumb-aurora i:nth-child(2) { background: #2b4c7e; right: 0; }
.thumb-aurora i:nth-child(3) { background: #5b2a6e; bottom: -20%; }
.thumb-orbit i { width: 30%; filter: none; border: 1px solid #c9a961; }
.thumb-orbit i:nth-child(2) { width: 55%; }
.thumb-orbit i:nth-child(3) { width: 80%; }
.thumb-stars { background: radial-gradient(ellipse at bottom, #111a2e 0%, #06070a 70%); }
.thumb-stars i { width: 3px; filter: none; background: #fff; }
.thumb-stars i:nth-child(1) { left: 20%; top: 30%; }
.thumb-stars i:nth-child(2) { left: 60%; top: 20%; }
.thumb-stars i:nth-child(3) { left: 45%; top: 65%; }
.thumb-clock i { display: none; }
.thumb-clock::after { content: "12:00"; color: #f4efe1; font-size: 26px; font-weight: 300; }


/* =========================================================================
   UNIFIED VISUAL SYSTEM (UX/IA consolidation, 2026-09-26)
   The mobile app is the visual reference: the same palette (tokens.css --
   no new colors), a translucent "glass" surface with a light rim over a
   faint gold ambient glow, softer corners, and one motion scale
   (--motion-*, --ease-out) for every page. Applies to Classic Mode (the
   default) as a restrained baseline; Dynamic Mode keeps its own, richer
   rules above (they are more specific and win where both apply). All
   entrance motion animates the independent `translate` property, never
   `transform`, so it can never fight a hover lift or Dynamic Mode's tilt.
   Switched off by .reduced-motion and prefers-reduced-motion.
   ========================================================================= */

/* --- Ambient depth: a faint gold glow behind the workspace (Dynamic Mode
   paints its own gradient ground). ------------------------------------------ */
.app-frame:not(.experience-dynamic) {
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--ambient-glow), transparent 62%),
    radial-gradient(900px 480px at -10% 105%, var(--ambient-glow), transparent 60%),
    var(--surface);
  background-attachment: fixed;
}

/* --- Glass top bar ---------------------------------------------------------- */
.topbar {
  background: var(--glass-bar);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--glass-border);
}

/* --- Logo: a larger, deeper "rise" than before -- it lifts slightly out of
   the bar with a soft gold-tinted depth shadow, springing back on leave. --- */
.brand-mark { transition: transform 0.42s var(--ease-spring), filter 0.42s var(--ease-out); }
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  transform: translateY(5px) scale(2.35);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px var(--ambient-glow));
}

/* --- Search: clearly distinguishable, never loud. A distinct field fill, a
   visible rim, readable placeholder, and a search glyph -- all from tokens. */
.topbar-search input {
  height: 32px; padding-inline-start: 34px; border-radius: var(--radius-md);
  background: var(--search-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 15px 15px;
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
[dir="rtl"] .topbar-search input { background-position: calc(100% - 11px) center; }
.topbar-search input::placeholder { color: var(--text-secondary); opacity: 1; }
.topbar-search input:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
.topbar-search input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* --- Tooltips: ONE consistent style, delay and position for every icon or
   status that needs a short explanation (data-tip + aria-label on the same
   element). Hover or keyboard focus shows it; nothing opens on its own. --- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); inset-inline-start: 50%; translate: -50% 4px;
  z-index: 80; width: max-content; max-width: 260px; padding: 6px 10px;
  background: var(--surface-overlay); color: var(--text-primary);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  font: 500 var(--text-xs)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; white-space: normal; text-align: start;
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-out) 0s, translate var(--motion-fast) var(--ease-out) 0s;
}
[dir="rtl"] [data-tip]::after { translate: 50% 4px; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1; translate: -50% 0;
  transition-delay: 420ms;
}
[dir="rtl"] [data-tip]:hover::after, [dir="rtl"] [data-tip]:focus-visible::after { translate: 50% 0; }
/* Header items sit near the window edge: anchor their tips to the end. */
.topbar-actions [data-tip]::after { inset-inline-start: auto; inset-inline-end: 0; translate: 0 4px; }
.topbar-actions [data-tip]:hover::after, .topbar-actions [data-tip]:focus-visible::after { translate: 0 0; }
.sidebar-collapse-toggle[data-tip]::after { inset-inline-start: 0; translate: 0 4px; }
.sidebar-collapse-toggle[data-tip]:hover::after, .sidebar-collapse-toggle[data-tip]:focus-visible::after { translate: 0 0; }
/* the magnified header icons already rise; keep the tip above them */
.icon-button[data-tip]:hover::after { z-index: 90; }

/* --- Experience Mode: compact two-icon switch ------------------------------ */
.mode-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.mode-switch-option {
  display: inline-grid; place-items: center; width: 28px; height: 24px; padding: 0;
  border: 0; border-radius: calc(var(--radius-md) - 3px); background: transparent; color: var(--text-muted);
  cursor: pointer; transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.mode-switch-option .icon-mask { width: 15px; height: 15px; }
.mode-switch-option:hover { color: var(--text-primary); }
.mode-switch-option.active { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.mode-switch-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- Status hierarchy: connection is a quiet indicator (dot + short word),
   synchronization is the primary chip. Both explain themselves on hover. -- */
.status-cluster { display: inline-flex; align-items: center; gap: var(--space-3); }
.status-cluster .connection-pill {
  gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: var(--text-xs); color: var(--text-secondary);
  border: 1px solid transparent; cursor: default;
}
.status-cluster .connection-pill:hover, .status-cluster .connection-pill:focus-visible { border-color: var(--glass-border); outline: none; }
.status-cluster .connection-pill.online span:first-child { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.status-cluster .connection-pill.offline { color: var(--warning); }
.status-cluster .connection-pill.offline span:first-child { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 25%, transparent); }
@media (max-width: 1180px) { .status-cluster .connection-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* --- Surfaces: the mobile app's layered depth -- a light top highlight and
   a softer rim at rest (Dynamic Mode's gold-bordered surfaces win there). -- */
.surface {
  border-color: var(--glass-border);
  background: linear-gradient(180deg, var(--glass-highlight), transparent 38%), var(--surface-raised);
}

/* --- Cards: one interaction language for every card on Home and in Work
   Station (metrics, domain tiles, project/pipeline/stage/approval/flow/
   workload/deliverable cards, Access Permissions switch cards). ---------- */
.metric, .dashboard-domain-card, .project-card, .pipeline-card, .stage-card, .approval-card,
.flow-card, .workload-card, .deliverable-card, .access-switch-card {
  border-color: var(--glass-border);
  background: linear-gradient(180deg, var(--glass-highlight), transparent 45%), var(--surface-raised);
  transition:
    transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
/* Clickable cards lift and grow a touch; information-only metrics just
   brighten their rim, so a static figure never pretends to be a button. */
.app-frame:not(.experience-dynamic) :is(a, button, [role="button"], [role="link"]):is(.dashboard-domain-card, .project-card, .pipeline-card, .stage-card, .approval-card, .flow-card, .workload-card, .deliverable-card):hover,
.app-frame:not(.experience-dynamic) :is(.project-card, .pipeline-card, .approval-card, .deliverable-card)[tabindex]:hover,
.access-switch-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}
.app-frame:not(.experience-dynamic) .metric:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); box-shadow: var(--shadow-md); }
.app-frame:not(.experience-dynamic) .dashboard-domain-card:hover { background: linear-gradient(180deg, var(--glass-highlight), transparent 45%), var(--surface-raised); }
.dashboard-domain-card .arrow { transition: translate var(--motion-base) var(--ease-out); }
.dashboard-domain-card:hover .arrow { translate: 4px 0; }
[dir="rtl"] .dashboard-domain-card:hover .arrow { translate: -4px 0; }
:is(.dashboard-domain-card, .project-card, .pipeline-card, .stage-card, .approval-card, .deliverable-card, .access-switch-card):active { transform: translateY(-1px) scale(0.995); transition-duration: 90ms; }

/* --- Entrance: page sections and grid items arrive with a short rise;
   grids stagger (capped at the 8th item). Uses `translate`, so hover
   transforms stay free. Dynamic Mode keeps its own entrance rules. ------- */
@keyframes gx-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.app-frame:not(.experience-dynamic) .content > .page-heading,
.app-frame:not(.experience-dynamic) .content > .surface,
.app-frame:not(.experience-dynamic) .content > section,
.app-frame:not(.experience-dynamic) .content > .access-switch,
.app-frame:not(.experience-dynamic) .content > .access-layout {
  animation: gx-rise var(--motion-slow) var(--ease-out) backwards;
}
.app-frame:not(.experience-dynamic) :is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > * {
  animation: gx-rise var(--motion-slow) var(--ease-out) backwards;
}
:is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > :nth-child(2) { animation-delay: 40ms; }
:is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > :nth-child(3) { animation-delay: 80ms; }
:is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > :nth-child(4) { animation-delay: 120ms; }
:is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > :nth-child(5) { animation-delay: 160ms; }
:is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > :nth-child(6) { animation-delay: 200ms; }
:is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > :nth-child(7) { animation-delay: 240ms; }
:is(.metric-grid, .dashboard-domain-grid, .project-card-grid, .stage-card-grid) > :nth-child(n+8) { animation-delay: 280ms; }
.content > section:nth-of-type(2) { animation-delay: 50ms; }
.content > section:nth-of-type(3) { animation-delay: 100ms; }
.content > section:nth-of-type(n+4) { animation-delay: 150ms; }

/* --- Buttons: the same tactile feedback everywhere ------------------------- */
.primary-button, .secondary-button { transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.primary-button:not(:disabled):active, .secondary-button:not(:disabled):active { transform: scale(0.97); }

/* --- Access Permissions: two matching entry cards + Department -> employee
   directory (primary selector) beside the selected context. ------------- */
.access-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.access-switch-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4);
  min-height: 92px; padding: var(--space-4) var(--space-5); text-align: start; cursor: pointer;
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg); color: var(--text-primary); font: inherit;
}
.access-switch-card > .icon-mask { width: 26px; height: 26px; color: var(--text-secondary); }
.access-switch-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.access-switch-text strong { font-size: var(--text-lg); font-weight: 700; }
.access-switch-text small { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--line-sm); }
.access-switch-count { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--text-muted); }
.access-switch-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-md); }
.access-switch-card.active > .icon-mask, .access-switch-card.active .access-switch-count { color: var(--accent-strong); }
.access-switch-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.access-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.access-directory { position: sticky; top: 64px; max-height: calc(100vh - 96px); overflow: auto; padding: var(--space-4); }
.access-directory-head h2 { margin: 2px 0 var(--space-3); font-size: var(--text-lg); }
.access-quick-find {
  width: 100%; height: 30px; padding: 0 var(--space-3); margin-bottom: var(--space-3);
  font-size: var(--text-sm); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary);
}
.access-quick-find::placeholder { color: var(--text-muted); }
.access-quick-find:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.access-dir-tree { display: flex; flex-direction: column; gap: 2px; }
.access-dir-dept {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary);
  font: 600 var(--text-sm) var(--font-body); text-align: start; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out);
}
.access-dir-dept:hover { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.access-dir-dept:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.access-dir-dept-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-dir-group .access-chevron { transition: rotate var(--motion-base) var(--ease-out); color: var(--text-muted); }
.access-dir-group.open .access-chevron { rotate: 180deg; }
.access-dir-list { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 var(--space-2); }
.access-dir-group .access-dir-list { padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--border); margin-inline-start: var(--space-3); animation: gx-rise var(--motion-base) var(--ease-out) backwards; }
.access-dir-person {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary);
  font: 500 var(--text-sm) var(--font-body); text-align: start; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.access-dir-person:hover { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.access-dir-person:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.access-dir-person.selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.access-dir-person.inactive { opacity: 0.6; }
.access-dir-person-name { display: flex; flex-direction: column; min-width: 0; }
.access-dir-person-name small { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-context { min-width: 0; }
.access-related { margin-top: var(--space-3); }

/* --- Accounts & Security: account + sessions open in place --------------- */
.clients-row.row-open { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.account-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  animation: gx-rise var(--motion-base) var(--ease-out) backwards;
}
.account-panel-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.account-panel-title { margin: 0; font-size: var(--text-md); }
.account-panel-message { grid-column: 1 / -1; margin: 0; }
.session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.session-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }

.field-link { margin-inline-start: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--accent-strong); }

/* --- Avatar editor (zoom / pan / crop before upload) ----------------------- */
.avatar-editor-backdrop {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-4);
  background: color-mix(in srgb, black 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: gx-fade var(--motion-base) var(--ease-out) both;
}
@keyframes gx-fade { from { opacity: 0; } to { opacity: 1; } }
.avatar-editor {
  width: min(420px, 100%); padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg);
  animation: gx-rise var(--motion-slow) var(--ease-out) backwards;
}
.avatar-editor h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.avatar-editor-stage {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md);
  background: var(--surface-sunken); touch-action: none; cursor: grab; user-select: none;
}
.avatar-editor-stage:active { cursor: grabbing; }
.avatar-editor-stage canvas { width: 100%; height: 100%; display: block; }
.avatar-editor-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, transparent 49.5%, color-mix(in srgb, black 55%, transparent) 50%);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.avatar-editor-controls { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.avatar-editor-controls input[type="range"] { flex: 1; accent-color: var(--accent); }
.avatar-editor-preview { display: flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }
.avatar-editor-preview canvas { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--glass-border); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .access-switch { grid-template-columns: 1fr; }
  .access-layout { grid-template-columns: 1fr; }
  .access-directory { position: static; max-height: 360px; }
  .account-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .access-switch-card { grid-template-columns: auto 1fr; min-height: 0; }
  .access-switch-count { display: none; }
  .mode-switch { display: none; }
}

/* --- Reduced motion: no entrance, no lift, no logo spring ------------------ */
.reduced-motion :is(.metric, .dashboard-domain-card, .project-card, .pipeline-card, .stage-card, .approval-card, .flow-card, .workload-card, .deliverable-card, .access-switch-card):hover { transform: none; }
.reduced-motion .brand:hover .brand-mark { transform: scale(1.4); }
@media (prefers-reduced-motion: reduce) {
  .app-frame :is(.content > *, .metric-grid > *, .dashboard-domain-grid > *, .project-card-grid > *, .stage-card-grid > *, .account-panel, .access-dir-list) { animation: none !important; }
  :is(.metric, .dashboard-domain-card, .project-card, .pipeline-card, .stage-card, .approval-card, .flow-card, .workload-card, .deliverable-card, .access-switch-card):hover { transform: none !important; }
  .brand:hover .brand-mark { transform: scale(1.4); }
  [data-tip]::after { transition: none; }
}
/* the connection pill's base rule styles every <span> as the status dot; its text label is not one */
.connection-pill .connection-label { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }
/* The sticky page heading used a solid surface fill that matched the old flat
   background; over the ambient glow it read as a box. At rest it is now
   transparent -- it takes its glass only once the page scrolls under it. */
@media (min-width: 769px) {
  html:not(.page-scrolled) .app-frame:not(.experience-dynamic) :is(.page-heading, .workspace-header-top) {
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.avatar-editor .action-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); margin-top: var(--space-3); }
.avatar-editor .action-row > * { margin: 0; }

/* ---- Quick access on Home (2026-09-30): pinned pages as big icons. ---- */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-3); }
.quick-tile-wrap { position: relative; }
.quick-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--space-3) var(--space-2); border-radius: 14px; color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer; width: 100%; font: inherit; transition: background .15s ease, transform .15s ease; }
.quick-tile:hover { background: var(--surface-sunken); transform: translateY(-2px); }
.quick-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: 28px; font-weight: 300; }
.quick-icon .icon-mask { width: 28px; height: 28px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.quick-label { font-size: var(--text-sm); font-weight: 600; text-align: center; line-height: 1.3; }
.quick-add .quick-icon { background: none; border: 1.5px dashed var(--accent); }
.quick-grid.editing .quick-tile-wrap .quick-tile { animation: quick-wiggle .28s ease-in-out infinite alternate; }
@keyframes quick-wiggle { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.quick-remove { position: absolute; top: 2px; inset-inline-start: 10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface, #fff); background: var(--danger); color: #fff; font-weight: 800; line-height: 1; cursor: pointer; }
.quick-picker-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 900; }
.quick-picker { position: fixed; z-index: 901; left: 50%; top: 8vh; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 84vh; overflow-y: auto; }
.quick-picker-group { font-size: var(--text-sm); color: var(--accent-strong); margin: var(--space-4) 0 var(--space-2); }
.quick-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px var(--space-3); }
.quick-picker-icon { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@media (prefers-reduced-motion: reduce) { .quick-grid.editing .quick-tile-wrap .quick-tile { animation: none; } }