/* ============================================================================
   WORKPLAN DESIGN SYSTEM — Phase 1 foundation
   ============================================================================
   All tokens use --ds-* prefix to coexist with the existing City of Toronto
   tokens (--primary-color, --success, --border, etc.) in style.css.

   This file is loaded BEFORE style.css from base.html, but since these tokens
   are namespaced and no existing template uses them, this file produces ZERO
   visible change on existing pages.

   Dark mode is NOT defined here. Existing [data-theme="dark"] rules continue
   to govern legacy pages. New v2 templates are light-mode-only for now; we'll
   design a coherent dark mode after migration is complete (Phase 12).

   These tokens read tenant brand settings where appropriate, falling back to
   the new design's forest-green defaults when tenant settings are unset.
   ============================================================================ */

:root {
  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --ds-ink:            #0E1410;
  --ds-ink-muted:      #5C6863;
  /* --ds-ink-faint was #94A09A = 2.46:1 on --ds-bg (WCAG 1.4.3 FAIL). Any value that clears
     4.5:1 on the #F2F5F0 page bg lands within ~0.5 of muted's 5.28:1 (e.g. #63706A = 4.71),
     i.e. visually indistinguishable from muted -- so faint is ALIASED to muted rather than
     kept as a third, now-imperceptible tier. Compliant by construction (== muted, 5.28:1). */
  --ds-ink-faint:      var(--ds-ink-muted);
  --ds-bg:             #F2F5F0;
  --ds-panel:          #FFFFFF;
  --ds-panel-raised:   #FFFFFF;
  --ds-border:         #E0E5DC;
  --ds-border-strong:  #CFD4C9;
  --ds-hover:          #EFF2EC;

  /* ── Brand (overridable by tenant settings — see _base_v2.html) ───────── */
  --ds-green:          #1F5A3E;
  --ds-green-dk:       #1F2937;
  --ds-nav-bg:         #1F2937;
  --ds-green-bg:       #E6EEE9;
  --ds-teal:           #0F4F4A;

  /* ── RAG ─────────────────────────────────────────────────────────────── */
  --ds-rag-green-bg:   #E2EFE6;
  --ds-rag-green-fg:   #1F7A3B;
  --ds-rag-green-dot:  #1F7A3B;
  --ds-rag-amber-bg:   #FBE8C2;
  --ds-rag-amber-fg:   #92660A;
  --ds-rag-amber-dot:  #D89A06;
  --ds-rag-red-bg:     #F8DDDD;
  --ds-rag-red-fg:     #A8231B;
  --ds-rag-red-dot:    #C8281F;

  /* ── Audit streams ───────────────────────────────────────────────────── */
  --ds-stream-app-fg:      #0F4F4A;
  --ds-stream-app-bg:      #E2EBEA;
  --ds-stream-business-fg: #1F5A3E;
  --ds-stream-business-bg: #E6EEE9;
  --ds-stream-doc-fg:      #8A521C;
  --ds-stream-doc-bg:      #F5E8D8;
  --ds-stream-plat-fg:     #5A6578;
  --ds-stream-plat-bg:     #E7EAEF;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --ds-font-ui:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ds-font-mono:  "Geist Mono", "SF Mono", Menlo, Consolas, monospace;

  --ds-fs-h1:        24px;
  --ds-fs-h2:        16px;
  --ds-fs-h3:        15px;   /* D2.5: was 12.5px -- SMALLER than body (13), an inversion. Now
                               above body regardless of target size. NOTE: only ~4 sites read the
                               --ds-fs-* tokens, so this changes little on screen -- the scale is
                               near-vestigial (the app sizes text with hardcoded px). */
  --ds-fs-body:      13px;
  --ds-fs-body-sm:   12.5px;
  --ds-fs-meta:      11.5px;
  --ds-fs-label:     10.5px;
  --ds-fs-mono:      11.5px;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --ds-radius-sm:    3px;
  --ds-radius:       6px;
  --ds-radius-lg:    8px;
  --ds-radius-pill:  999px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --ds-nav-w:        64px;
  --ds-nav-avatar-size: 48px;   /* nav account avatar; fits the 64px collapsed rail with margin */
  --ds-rail-w:       320px;
}

/* ──────────────────────────────────────────────────────────────────────
   Legacy v1 CSS variable bridge — required by v1→v2 migrated templates
   that reference --gray-*, --primary-color, --blue-*, etc.
   Mirrors the legacy aliases from style.css (kept in sync).
   Added Session 8 (May 2026) when document_editor.html was migrated to
   _base_v2.html and lost access to style.css.
   ────────────────────────────────────────────────────────────────────── */
:root {
  /* Grays — exact values from style.css legacy aliases */
  --white:         #FFFFFF;
  --gray-50:       #F8F9FA;
  --gray-100:      #F0F2F5;
  --gray-200:      #E2E6EA;
  --gray-300:      #CBD2D9;  /* synthesized — was undefined in v1 */
  --gray-400:      #9BA3AF;
  --gray-500:      #6B7280;  /* synthesized — was undefined in v1 */
  --gray-600:      #5A6270;
  --gray-700:      #3D4551;
  --gray-800:      #2D3340;

  /* Brand color — Toronto blue, from style.css */
  --primary-color: #0072CE;
  --primary-light: #E6F2FF;

  /* Blues — synthesized scale (were undefined in v1, fell back to nothing) */
  --blue-50:       #EFF6FF;
  --blue-100:      #DBEAFE;
  --blue-200:      #BFDBFE;
  --blue-600:      #2563EB;
  --blue-700:      #1D4ED8;

  /* Other commonly-referenced surface tokens */
  --border:        var(--gray-200);
  --surface:       var(--gray-50);
  --text-primary:  #1F2937;
  --text-secondary: var(--gray-600);
  --text-muted:    var(--gray-400);
  --hover-bg:      var(--gray-50);
}

/* ──────────────────────────────────────────────────────────────────────
   DARK THEME (Phase 1, Session 10) — opt-in via [data-theme="dark"] on <html>,
   set from localStorage by no-FOUC inline script in _base_v2.html.
   Default ALWAYS light. Components using var(--ds-*) flip for free.
   Hardcoded hex outside tokens will NOT flip (Phase 2 sweep).
   ────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Enterprise dark theme — neutral elevation ramp (Material-style).
     Surfaces get LIGHTER with elevation: bg < panel < raised < overlay.
     Accent desaturated to reduce vibration; inks tuned for WCAG AA. */
  --ds-ink:            #E6E8EB;   /* body text — off-white, no halation */
  --ds-ink-muted:      #A2A8AE;   /* >=4.5:1 on panel */
  /* faint aliased to muted (was #7A8087 = 4.09:1 on panel, FAIL). Dark had room for a distinct
     compliant tier, but a token meaning "dimmer than muted" in dark yet "== muted" in light is a
     trap -- aliased in BOTH modes for consistency. == muted -> 6.80:1 on panel. */
  --ds-ink-faint:      var(--ds-ink-muted);
  --ds-bg:             #141618;   /* L0 page — darkest */
  --ds-panel:          #1E2023;   /* L1 cards/panels */
  --ds-panel-raised:   #26282C;   /* L2 modals/popovers/rail */
  --ds-border:         #3B3F44;   /* slightly more visible, consistent */
  --ds-border-strong:  #44484E;
  --ds-hover:          #2B2E32;   /* row/item hover */
  --ds-green:          #5BB98C;   /* desaturated accent (was #4BAE7E) */
  --ds-green-dk:       #4AA078;
  --ds-nav-bg:         #1B1D20;
  --ds-green-bg:       #1C2E25;   /* low-chroma green tint for subtle fills */
  --ds-teal:           #3E9C95;
  --ds-rag-green-bg:   #16301F;
  --ds-rag-green-fg:   #5FCB84;
  --ds-rag-green-dot:  #5FCB84;
  --ds-rag-amber-bg:   #3A2C0E;
  --ds-rag-amber-fg:   #E6B34D;
  --ds-rag-amber-dot:  #E6B34D;
  --ds-rag-red-bg:     #3A1A19;
  --ds-rag-red-fg:     #E87870;
  --ds-rag-red-dot:    #E87870;
  --ds-stream-app-fg:      #4FB3AC;
  --ds-stream-app-bg:      #15302E;
  --ds-stream-business-fg: #5FCB84;
  --ds-stream-business-bg: #1C2C24;
  --ds-stream-doc-fg:      #D2A06A;
  --ds-stream-doc-bg:      #332618;
  --ds-stream-plat-fg:     #9AA6BC;
  --ds-stream-plat-bg:     #1E222B;
  --white:         #1E2023;
  --gray-50:       #1E261E;
  --gray-100:      #232C23;
  --gray-200:      #2C352C;
  --gray-300:      #3A453A;
  --gray-400:      #6B7A70;
  --gray-500:      #8A968C;
  --gray-600:      #9BA89F;
  --gray-700:      #C2CBC2;
  --gray-800:      #DCE2DC;
  --primary-color: #4DA3E8;
  --primary-light: #16263A;
  --blue-50:       #16263A;
  --blue-100:      #1B3A52;
  --blue-200:      #244A6E;
  --blue-600:      #4DA3E8;
  --blue-700:      #6BB6F0;
  --text-primary:  #E4E9E4;
}



/* HTML hidden attribute should win over component display rules.
   Without this, .ds-form-field { display: flex } (and similar) override the
   browser's UA stylesheet [hidden] { display: none }, making the hidden
   attribute useless on form-field wrappers, modal sections, etc. */
[hidden] { display: none !important; }


/* Utility classes — opt-in only. No existing template uses these. */
.ds-tn { font-variant-numeric: tabular-nums; }
.ds-mono { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }

/* Material Symbols base setup. Existing pages don't use this class, so this
   has no current visual effect. New v2 templates will use it for icons. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
}

/* ─── Layout primitives (Phase 3c) ──────────────────────────────────────── */
/* These rules turn the HTML structure in _base_v2.html into a working shell.
   Scoped to v2 surfaces only via .ds-body / .ds-app so legacy pages remain
   untouched. */

.ds-body {
  margin: 0;
  padding: 0;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-fs-body);
  color: var(--ds-ink);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
}

.ds-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Left icon nav ─────────────────────────────────────────────────────────── */
.ds-nav {
  width: var(--ds-nav-w);
  flex: 0 0 var(--ds-nav-w);
  background: var(--ds-nav-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 12px;
}
.ds-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ds-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  text-decoration: none;
}
.ds-brand-letter {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.ds-nav-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex: 0 1 auto;
  /* Hide scrollbar gutter — sidebar is dark, and the default gutter renders
     as a vertical line through the centered nav items. Content still scrolls
     when needed; we just don't draw the gutter chrome. */
  scrollbar-width: none;
}
.ds-nav-items::-webkit-scrollbar { display: none; }
.ds-nav-bottom {
  padding: 8px 0;
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}
.ds-nav-item {
  width: 40px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E6E8EB;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.ds-nav-item:hover { background: #1C2E25; color: #FFFFFF; }
.ds-nav-item:hover .material-symbols-outlined { color: #5BB98C; }
/* Notification bell badge (global nav) */
.ds-nav-bell { position: relative; }
.ds-nav-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ds-rag-red-dot, #C0392B);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ds-font-mono, monospace);
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}
/* When the sidebar is expanded, the badge sits inline AFTER the label.
   order:1 places it past the ::after label (order:0); the label has flex:1
   so the badge lands flush at the row's right end. */
.ds-nav-expanded .ds-nav-bell-badge {
  position: static;
  order: 1;
  margin-left: 8px;
  flex-shrink: 0;
}
.ds-nav-item.active,
.ds-nav-item.is-active,
.ds-nav-item-active {
  background: linear-gradient(90deg, rgba(91,185,140,0.18) 0%, rgba(91,185,140,0.08) 100%);
  color: #FFFFFF;
  box-shadow: inset 3px 0 0 #5BB98C;
}
.ds-nav-item.active .material-symbols-outlined,
.ds-nav-item.is-active .material-symbols-outlined,
.ds-nav-item-active .material-symbols-outlined { color: #5BB98C; }
.ds-nav-item .material-symbols-outlined { font-size: 20px; }
/* Dark-mode nav text/icon color guard — beats style.css
   [data-theme="dark"] a:not(.sidebar a){color:var(--link)} which bleeds
   blue onto .ds-nav <a> items (they're not inside .sidebar). */
[data-theme="dark"] a.ds-nav-item:not(.sidebar a),
[data-theme="dark"] a.ds-nav-item:not(.sidebar a):visited { color: #E6E8EB; }
[data-theme="dark"] a.ds-nav-item:not(.sidebar a) .material-symbols-outlined { color: #E6E8EB; }
[data-theme="dark"] a.ds-nav-item:not(.sidebar a):hover { background: #1C2E25; color: #FFFFFF; }
[data-theme="dark"] a.ds-nav-item:not(.sidebar a):hover .material-symbols-outlined { color: #5BB98C; }
[data-theme="dark"] a.ds-nav-item.active:not(.sidebar a),
[data-theme="dark"] a.ds-nav-item.is-active:not(.sidebar a),
[data-theme="dark"] a.ds-nav-item-active:not(.sidebar a) { color: #FFFFFF; }
[data-theme="dark"] a.ds-nav-item.active:not(.sidebar a) .material-symbols-outlined,
[data-theme="dark"] a.ds-nav-item.is-active:not(.sidebar a) .material-symbols-outlined,
[data-theme="dark"] a.ds-nav-item-active:not(.sidebar a) .material-symbols-outlined { color: #5BB98C; }
.ds-nav-item-superadmin { background: rgba(255,200,0,0.12); }
.ds-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-green-dk);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.25);
  transition: box-shadow 0.15s, transform 0.12s;
}
.ds-avatar:hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 3px 10px rgba(0,0,0,0.30);
}
.ds-avatar:active { transform: scale(0.96); }
.ds-avatar { overflow: hidden; }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* Nav account avatar (tenant + platform) -- larger than the 36px base, sized from a token, circular.
   Same element in the collapsed rail and expanded nav, so both scale together. */
.ds-avatar-wrap .ds-avatar {
  width: var(--ds-nav-avatar-size);
  height: var(--ds-nav-avatar-size);
}
.ds-author-avatar { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--ds-green-dk); color:#fff; font-size:8px; font-weight:700; overflow:hidden; vertical-align:-3px; margin-right:2px; flex-shrink:0; }
.ds-author-avatar img { width:100%; height:100%; object-fit:cover; display:block; }

/* Main content area ─────────────────────────────────────────────────────── */
.ds-main {
  flex: 1;
  min-width: 0;
  /* min-height:0 lets this flex item shrink below its intrinsic content height
     so overflow-y:auto actually engages. Without it a tall page (e.g. the
     superadmin tenant-detail Subscription/Billing tabs) inherits its children's
     height, refuses to shrink, and the bottom clips below the viewport — the
     same flex min-height trap documented for .ds-modal-dialog form (~line 4935).
     The viewport-recalc on devtools-open masks the bug. */
  min-height: 0;
  overflow: auto;
  /* Horizontal content inset as a variable so a sticky/full-bleed child (.sa-tenant-header) can
     pad back to the SAME value and stay aligned with the cards if this ever changes. */
  --ds-main-pad-x: 24px;
  padding: 20px var(--ds-main-pad-x) 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Impersonation bar ─────────────────────────────────────────────────────
   Full-width danger banner shown ONLY while a super-admin is viewing a
   tenant's environment (session._super_viewing_tenant). Rendered OUTSIDE
   .ds-app so the app box's overflow:hidden can't clip it; .ds-app shrinks by
   the bar height (.is-impersonating) so the internal .ds-main scroll region
   stays whole and nothing hides behind the bar. */
.ds-impersonation-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--ds-rag-red-dot, #C0392B);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
}
.ds-impersonation-bar .ds-imp-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-impersonation-bar .ds-imp-msg .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.ds-impersonation-bar .ds-imp-tenant { font-weight: 700; text-decoration: underline; }
.ds-impersonation-bar .ds-imp-exit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  transition: background .12s;
}
.ds-impersonation-bar .ds-imp-exit:hover { background: rgba(255,255,255,0.30); }
.ds-impersonation-bar .ds-imp-reason { font-weight: 600; opacity: .92; font-style: italic; }
.ds-impersonation-bar .ds-imp-meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ds-impersonation-bar .ds-imp-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.16);
  white-space: nowrap;
}
/* Last-2-minutes warning: brighten + pulse so the operator notices before auto-return. */
.ds-impersonation-bar.ds-imp-warn { background: #8E1B14; }
[data-theme="dark"] .ds-impersonation-bar.ds-imp-warn { background: #7A1009; }
.ds-impersonation-bar.ds-imp-warn .ds-imp-countdown {
  background: #fff;
  color: var(--ds-rag-red-dot, #C0392B);
  animation: ds-imp-pulse 1s steps(1) infinite;
}
@keyframes ds-imp-pulse { 50% { opacity: .45; } }
/* Every dark-theme RAG-red token (-dot/-fg) flips to a light salmon #E87870
   tuned for small dots/badges, which kills contrast under white text on a
   full-bleed bar. No token in the family suits a dark danger fill, so pin a
   literal deep red here so the bar stays legible and unmissable in dark mode. */
[data-theme="dark"] .ds-impersonation-bar { background: #A8231B; }
/* Dark-mode link guard — beats style.css [data-theme="dark"] a{color:var(--link)} */
[data-theme="dark"] .ds-impersonation-bar .ds-imp-exit,
[data-theme="dark"] .ds-impersonation-bar .ds-imp-exit:visited { color: #fff; }
.is-impersonating .ds-app { height: calc(100vh - 44px); }

/* Right audit rail (placeholder shell — real feed lands in Phase 8) ─────── */
.ds-rail {
  width: var(--ds-rail-w);
  flex: 0 0 var(--ds-rail-w);
  background: var(--ds-panel-raised);
  border-left: 1px solid var(--ds-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ds-rail-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-rail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-rail-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-rail-subtitle {
  font-size: var(--ds-fs-meta);
  color: var(--ds-ink-muted);
  margin-top: 6px;
}
.ds-rail-chips {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ds-stream-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--ds-border);
  background: transparent;
  color: var(--ds-ink-muted);
  border-radius: var(--ds-radius-pill);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}
.ds-stream-chip.is-active { border-color: transparent; background: var(--ds-green-bg); color: var(--ds-green); }
.ds-stream-chip-count {
  font-family: var(--ds-font-mono);
  font-size: 10px;
  opacity: 0.7;
  margin-left: 3px;
}
.ds-rail-feed {
  flex: 1;
  overflow: auto;
  padding: 8px 14px 16px;
}
.ds-rail-empty {
  padding: 36px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ds-ink-muted);
  line-height: 1.5;
}
.ds-rail-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--ds-border);
  font-size: 11px;
  color: var(--ds-ink-muted);
  background: var(--ds-bg);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Cards (used across all v2 surfaces) ───────────────────────────────────── */
.ds-card {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Do NOT shrink below content height when a direct flex child of .ds-main (a bounded flex
     column). Without this, flex-shrink:1 + min-height:0 + overflow:hidden squeezes a tall card and
     CLIPS it (e.g. the plan-roles "Add Role" form cut at "Description") instead of .ds-main
     scrolling. flex-shrink:0 makes every page behave like the tabbed pages (cards keep content
     height; .ds-main scrolls). Verified safe: no .ds-card uses internal overflow:auto/scroll or a
     JS-set height. */
  flex-shrink: 0;
}
.ds-card-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-border);
  flex: 0 0 auto;
}
.ds-card-title {
  margin: 0;
  font-size: var(--ds-fs-h3);
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: -0.1px;
}
.ds-card-action { margin-left: auto; }
.ds-card-body { padding: 12px 14px; }
.ds-card-body.is-unpadded { padding: 0; }

/* Buttons ───────────────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--ds-radius);
  font-family: var(--ds-font-ui);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-panel);
  color: var(--ds-ink);
  transition: background 0.12s, border-color 0.12s;
}
.ds-btn:hover { background: var(--ds-hover); }
.ds-btn-primary {
  border-color: var(--ds-border-strong);
  background: var(--ds-panel);
  color: var(--ds-ink);
  padding: 6px 12px;
  font-weight: 600;
}
.ds-btn-primary:hover { background: var(--ds-hover); border-color: var(--ds-green); }
/* Solid green CTA — the ONE prominent create action per page (Session 10).
   Use sparingly: New project / New item. Everything else stays bordered. */
.ds-btn-cta {
  border-color: transparent;
  background: var(--ds-green);
  color: #FFFFFF;
  font-weight: 600;
}
.ds-btn-cta:hover { background: var(--ds-green-dk); border-color: transparent; }
a.ds-btn.ds-btn-cta, a.ds-btn.ds-btn-cta:hover, a.ds-btn.ds-btn-cta:visited { color: #FFFFFF; }
[data-theme="dark"] a.ds-btn-cta:not(.sidebar a),
[data-theme="dark"] a.ds-btn-cta:not(.sidebar a):hover { color: #FFFFFF; }
.ds-btn .material-symbols-outlined { font-size: 15px; }

/* Page header (dashboard, project detail, etc.) ─────────────────────────── */
.ds-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 24px;
}
.ds-page-eyebrow {
  font-size: 11px;
  color: var(--ds-ink-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.ds-page-title {
  margin: 0;
  font-size: var(--ds-fs-h1);
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.ds-page-subline {
  font-size: 12.5px;
  color: var(--ds-ink-muted);
  margin-top: 3px;
}

/* KPI strip ─────────────────────────────────────────────────────────────── */
.ds-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.ds-kpi {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 76px;
}
.ds-kpi-label {
  font-size: 11px;
  color: var(--ds-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}
.ds-kpi-value {
  font-size: 36px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.6px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
}
.ds-kpi-value.is-amber { color: var(--ds-rag-amber-fg); }
.ds-kpi-value.is-red   { color: var(--ds-rag-red-fg); }
.ds-kpi-value.is-currency {
  font-size: 26px;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-kpi-strip.is-budget {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ds-kpi-strip.is-budget .ds-kpi {
  padding: 20px 24px;
  min-height: 96px;
}
.ds-kpi-strip.is-budget .ds-kpi-value.is-currency {
  font-size: 30px;
}
.ds-kpi-sub {
  font-size: 11px;
  color: var(--ds-ink-faint, #94A09A);
  margin-top: 2px;
  letter-spacing: 0.1px;
}

/* RAG pill ──────────────────────────────────────────────────────────────── */
.ds-rag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ds-rag-pill .ds-rag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ds-rag-green { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-rag-green .ds-rag-dot { background: var(--ds-rag-green-dot); }
.ds-rag-amber { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-rag-amber .ds-rag-dot { background: var(--ds-rag-amber-dot); }
.ds-rag-red   { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }
.ds-rag-red   .ds-rag-dot { background: var(--ds-rag-red-dot); }

/* Portfolio table ──────────────────────────────────────────────────────── */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ds-table thead tr {
  background: var(--ds-bg);
  color: var(--ds-ink-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.ds-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
}
.ds-table th.is-right { text-align: right; }
.ds-table td {
  padding: 10px 10px;
  vertical-align: middle;
  border-top: 1px solid var(--ds-border);
}
.ds-table td.is-right { text-align: right; }
.ds-table tr:first-child td { border-top: none; }
.ds-table-cell-pad-l { padding-left: 14px !important; }
.ds-table-cell-pad-r { padding-right: 14px !important; }
.ds-cell-name { font-weight: 600; color: var(--ds-ink); font-size: 12.5px; }
.ds-cell-code { font-family: var(--ds-font-mono); font-size: 10.5px; color: var(--ds-ink-faint); margin-top: 1px; }
.ds-cell-muted { color: var(--ds-ink-muted); }
.ds-cell-mono { font-family: var(--ds-font-mono); font-size: 11.5px; color: var(--ds-ink); }
.ds-budget-bar {
  width: 60px;
  margin-left: auto;
  height: 3px;
  background: var(--ds-border);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.ds-budget-bar-fill { height: 100%; background: var(--ds-green); border-radius: 2px; }
.ds-budget-bar-fill.is-warn { background: var(--ds-rag-amber-dot); }

/* Awaiting your action queue ───────────────────────────────────────────── */
.ds-queue-row {
  padding: 11px 14px;
  border-top: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.ds-queue-row:first-child { border-top: none; }
.ds-queue-row:hover { background: var(--ds-hover); }
.ds-queue-stripe {
  width: 6px;
  align-self: stretch;
  background: var(--ds-rag-amber-dot);
  border-radius: 2px;
  margin: 2px 0;
}
.ds-queue-stripe.is-high { background: var(--ds-rag-red-dot); }
.ds-queue-body { flex: 1; min-width: 0; }
.ds-queue-id-row { display: flex; align-items: center; gap: 8px; }
.ds-queue-id { font-family: var(--ds-font-mono); font-size: 10.5px; color: var(--ds-green); font-weight: 600; }
.ds-queue-title { font-size: 12.5px; color: var(--ds-ink); font-weight: 500; }
.ds-queue-meta { font-size: 11.5px; color: var(--ds-ink-muted); margin-top: 2px; }
.ds-queue-due-today { color: var(--ds-rag-red-fg); font-weight: 600; }

/* Intake card rows ─────────────────────────────────────────────────────── */
.ds-intake-row {
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ds-intake-row:last-child { margin-bottom: 0; }
.ds-intake-body { flex: 1; min-width: 0; }
.ds-intake-title { font-size: 12.5px; font-weight: 500; color: var(--ds-ink); }
.ds-intake-meta { font-size: 11px; color: var(--ds-ink-muted); margin-top: 2px; }
.ds-intake-meta-mono { font-family: var(--ds-font-mono); }
.ds-status-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--ds-hover);
  color: var(--ds-ink-muted);
}
.ds-status-pill.is-ready { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-empty-state {
  padding: 32px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ds-ink-muted);
  line-height: 1.55;
}

/* Governance signals rows ──────────────────────────────────────────────── */
.ds-signal-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--ds-border);
}
.ds-signal-row:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.ds-signal-label { flex: 1; font-size: 12.5px; color: var(--ds-ink); }
.ds-signal-value { font-family: var(--ds-font-mono); font-size: 14px; font-weight: 600; color: var(--ds-green); }
.ds-signal-value.is-warn { color: var(--ds-rag-amber-fg); }
.ds-signal-trend { font-size: 11px; color: var(--ds-ink-muted); min-width: 110px; text-align: right; }

/* Row layouts (two-card splits) ────────────────────────────────────────── */
.ds-row-split-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; min-height: 0; }
.ds-row-split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Narrow widths — collapse multi-column rows on narrow viewports ───────── */
@media (max-width: 1100px) {
  .ds-row-split-2, .ds-row-split-even { grid-template-columns: 1fr; }
  .ds-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-rail { display: none; }
}

/* ─── Phase 3d.1 additions (UX polish) ──────────────────────────────────── */

/* Hover popover (used on Risk Exposure tile) */
.ds-popover-host {
  position: relative;
  display: inline-block;
}
.ds-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: 0 4px 14px rgba(15, 79, 74, 0.10);
  padding: 10px 12px;
  min-width: 220px;
  max-width: 320px;
  z-index: 50;
  display: none;
}
.ds-popover-host:hover .ds-popover,
.ds-popover-host:focus-within .ds-popover { display: block; }
.ds-popover-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
  margin-bottom: 6px;
}
.ds-popover-list { display: flex; flex-direction: column; gap: 4px; }
.ds-popover-item {
  font-size: 12px;
  color: var(--ds-ink);
  text-decoration: none;
  padding: 2px 0;
}
.ds-popover-item:hover { color: var(--ds-green); }

/* Collapsible audit rail */
.ds-rail-collapsed {
  width: 36px !important;
  flex: 0 0 36px !important;
  background: var(--ds-nav-bg);
  border-left: 1px solid var(--ds-border);
}
.ds-rail-collapsed .ds-rail-toggle {
  background: rgba(255,255,255,0.12);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.2);
}
.ds-rail-collapsed .ds-rail-toggle:hover {
  background: var(--ds-hover);
  color: var(--ds-ink);
  border-color: var(--ds-border-strong);
}
.ds-rail-collapsed .ds-rail-header,
.ds-rail-collapsed .ds-rail-feed,
.ds-rail-collapsed .ds-rail-footer,
.ds-rail-collapsed .ds-rail-tabs,
.ds-rail-collapsed .ds-rail-section { display: none; }
.ds-rail-toggle {
  position: absolute;
  top: 14px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--ds-border);
  background: var(--ds-panel);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-ink-muted);
  z-index: 5;
}
.ds-rail-toggle:hover { background: var(--ds-hover); }
.ds-rail { position: relative; }
.ds-rail-toggle .material-symbols-outlined { font-size: 16px; line-height: 1; display: block; }

/* Content overflow polish - allow titles to wrap to 2 lines with ellipsis */
.ds-cell-name,
.ds-queue-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.ds-table td { vertical-align: middle; }
.ds-table { table-layout: auto; }

/* Risks count cell in projects table */
.ds-risk-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 600;
}
.ds-risk-count.is-high { color: var(--ds-rag-red-fg); }
.ds-risk-count.is-medium { color: var(--ds-rag-amber-fg); }
.ds-risk-count.is-zero { color: var(--ds-ink-faint); font-weight: 400; }
.ds-risk-count-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Dark Mode placeholder button — visual cue it's not active yet */
.ds-btn-darkmode-placeholder {
  opacity: 0.7;
  cursor: not-allowed;
}
.ds-btn-darkmode-placeholder:hover { background: var(--ds-panel); }

/* ─── Phase 3d.1 Pass 1: Tier 1 functional bug fixes ─────────────────── */

/* FIX 1+2: Popover uses position:fixed (JS-positioned) so it escapes all
   clipping parents. Initial display:none; JS shows + positions on hover. */
.ds-popover {
  position: fixed;
  display: none;
  z-index: 200;
  /* CSS will be visually overridden when JS positions it - JS sets top/left.
     Keeping old hover-trigger as fallback if JS hasn't loaded yet but
     positioned absolutely won't escape overflow:hidden parents. */
}
/* Remove the old hover-trigger via CSS - JS handles all show/hide */
.ds-popover-host:hover .ds-popover,
.ds-popover-host:focus-within .ds-popover {
  display: none; /* JS turns this on with .is-visible */
}
.ds-popover.is-visible { display: block; }

/* FIX 3: Hover affordance on popover-host KPI tiles */
.ds-popover-host {
  cursor: help;
}
.ds-popover-host::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ds-border);
  background-image: linear-gradient(var(--ds-ink-faint), var(--ds-ink-faint));
  background-size: 2px 6px;
  background-repeat: no-repeat;
  background-position: center 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ds-popover-host:hover::after,
.ds-popover-host:focus::after { opacity: 0.6; }
/* Better: use an inline info icon via SVG mask. Replace ::after content. */
.ds-popover-host {
  position: relative;
}
.ds-popover-host .ds-popover-hint {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  color: var(--ds-ink-faint);
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.ds-popover-host:hover .ds-popover-hint,
.ds-popover-host:focus .ds-popover-hint {
  opacity: 1;
  color: var(--ds-green);
}

/* FIX 4: Rail toggle when collapsed - center the button in the 36px strip */
.ds-rail-collapsed .ds-rail-toggle {
  left: 50%;
  transform: translateX(-50%);
  top: 14px;
}
.ds-rail .ds-rail-toggle {
  position: absolute;
  top: 8px;
  left: 8px;  /* Inside the rail, clear of the main content scrollbar */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ds-border);
  background: var(--ds-panel);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-ink-muted);
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ds-rail-collapsed .ds-rail-toggle {
  left: 50%;
  transform: translateX(-50%);  /* When collapsed, button centered inside the narrow strip */
}

/* FIX 5: Dark Mode button styled as "coming soon", not broken */
.ds-btn-coming-soon {
  position: relative;
  opacity: 1;
  cursor: not-allowed;
  color: var(--ds-ink-muted);
  border-color: var(--ds-border);
  background: var(--ds-bg);
}
.ds-btn-coming-soon:hover { background: var(--ds-bg); border-color: var(--ds-border); }
.ds-btn-coming-soon .ds-btn-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--ds-green);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* ─── Phase 3d.1 Pass 2 — fix #13: tighter margins on cramped viewports */
@media (max-width: 1340px) {
  .ds-main { --ds-main-pad-x: 18px; padding: 16px var(--ds-main-pad-x) 22px; }
}

/* Pass 2 #10: My Requests as compact list */
.ds-requests-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ds-requests-list .ds-intake-row {
  margin-bottom: 0;
}

/* Pass 2 #scroll-fix: prevent dashboard cards from shrinking in flex containers,
   forcing the scrollable parent to actually scroll instead of clipping */
.ds-portfolio > .ds-card,
.ds-portfolio > section,
.ds-portfolio > div {
  flex-shrink: 0;
}

/* Pass 2 #9: cards in split rows don't stretch to match siblings */
.ds-row-split-2,
.ds-row-split-even {
  align-items: start;
}

/* Pass 2 #7: uniform breakdown layout for multi-value KPI tiles */
.ds-kpi-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.ds-kpi-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.ds-kpi-breakdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-kpi-breakdown-num {
  font-family: var(--ds-font-mono);
  font-weight: 600;
  min-width: 14px;
  font-variant-numeric: tabular-nums;
}
.ds-kpi-breakdown-label {
  color: var(--ds-ink-muted);
  font-size: 11.5px;
}

/* Pass 2 #11: primary card variant — stronger border to signal hierarchy */
.ds-card-primary {
  border-color: var(--ds-border-strong);
}

/* Pass 2 #8: My Tasks compact summary strip (replaces big bucket tiles) */
.ds-task-summary {
  display: flex;
  gap: 18px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 10px;
}
.ds-task-summary-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ds-task-summary-num {
  font-family: var(--ds-font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ds-task-summary-num.is-red { color: var(--ds-rag-red-fg); }
.ds-task-summary-num.is-amber { color: var(--ds-rag-amber-fg); }
.ds-task-summary-num.is-green { color: var(--ds-rag-green-fg); }
.ds-task-summary-label {
  font-size: 10.5px;
  color: var(--ds-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Pass 2 #6: KPI tiles uniform height + vertically center content so short tiles don't feel empty */
.ds-kpi {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Session 8: looser page header rhythm (eyebrow→title→subline) */
.ds-page-eyebrow { line-height: 1.4; margin-bottom: 8px; }
.ds-page-title { margin-top: 0; line-height: 1.2; }
.ds-page-subline { margin-top: 6px; line-height: 1.45; }

/* Pass 3 #15: card-action link — bold text with arrow, hover underline */
.ds-card-action-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-green);
  text-decoration: none;
  letter-spacing: 0.1px;
  transition: color 0.12s, gap 0.12s;
}
.ds-card-action-link:hover {
  color: var(--ds-green-dk);
  gap: 6px;
}
.ds-card-action-link .material-symbols-outlined {
  font-size: 14px;
  transition: transform 0.12s;
}
.ds-card-action-link:hover .material-symbols-outlined {
  transform: translateX(2px);
}

/* Pass 3 #17: recent-activity indicator on project rows */
.ds-cell-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2EA043;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #DCFCE7;
}
.ds-activity-dot[title] { cursor: help; }

/* Pass 3 #notifications: dedicated notifications section in audit rail */
.ds-rail-section {
  /* Tabbed rail: only one section (panel) is visible at a time, so each gets
     the full rail height with its own scrolling body. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ds-rail-section-header { flex-shrink: 0; }
.ds-rail-section-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Rail tab bar */
.ds-rail-tabs {
  display: flex;
  gap: 2px;
  /* Left padding clears the absolutely-positioned collapse toggle (left:8px,
     24px wide) so the first tab doesn't sit under the arrow. */
  padding: 8px 12px 0 40px;
  border-bottom: 1px solid var(--ds-border);
  flex-shrink: 0;
}
/* Slim action row inside a panel (Mark all read / Last 24h) */
.ds-rail-actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 14px 4px;
  flex-shrink: 0;
  min-height: 20px;
}
.ds-rail-tab {
  flex: 1;
  padding: 8px 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.12s, border-color 0.12s;
}
.ds-rail-tab:hover { color: var(--ds-ink); }
.ds-rail-tab.is-active {
  color: var(--ds-green);
  border-bottom-color: var(--ds-green);
}
.ds-rail-tab-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ds-rag-red-dot, #C0392B);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.ds-rail-section-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 16px 8px 38px;
  position: relative;
}
/* Subsequent section headers don't need toggle clearance — only the first one
   shares space with the toggle button. */
.ds-rail-section + .ds-rail-section .ds-rail-section-header {
  padding-left: 16px;
}
.ds-rail-section-header .ds-rail-section-action {
  position: absolute;
  right: 14px;
  margin-left: 0;
}
.ds-rail-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ds-rail-section-badge {
  background: var(--ds-rag-red-dot);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--ds-radius-pill);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.ds-rail-section-action {
  margin-left: auto;
  font-size: 11px;
  color: var(--ds-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
}
.ds-rail-section-action:hover { color: var(--ds-green); }
.ds-notif-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
}
.ds-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 8px 14px 8px 12px;
  border-top: 1px solid var(--ds-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
  border-left: 3px solid transparent;
}
.ds-notif-row:first-child { border-top: none; }
.ds-notif-row:hover { background: var(--ds-hover); }
.ds-notif-row.is-unread {
  background: rgba(31, 90, 62, 0.03);
  border-left-color: var(--ds-green);
}
.ds-notif-row.is-unread:hover { background: rgba(31, 90, 62, 0.07); }
.ds-notif-dot { display: none; }
.ds-notif-body { flex: 1; min-width: 0; }
.ds-notif-title {
  font-size: 12px;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
}
.ds-notif-row:not(.is-unread) .ds-notif-title {
  font-weight: 400;
  color: #000;
}
.ds-notif-message {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  margin-top: 2px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-notif-time {
  font-size: 10.5px;
  color: var(--ds-ink-faint);
  font-family: var(--ds-font-mono);
  margin-top: 3px;
}
.ds-notif-footer {
  padding: 8px 16px;
  text-align: center;
  font-size: 11.5px;
}
.ds-notif-footer a {
  color: var(--ds-green);
  text-decoration: none;
  font-weight: 600;
}
.ds-notif-footer a:hover { color: var(--ds-green-dk); }
.ds-notif-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ds-ink-muted);
}

/* ─── Phase 3d.2: Expandable nav with labels ─────────────────────────── */
.ds-nav {
  transition: width 0.18s ease, flex-basis 0.18s ease;
  position: relative;
}
.ds-nav-expanded {
  width: 200px !important;
  flex: 0 0 200px !important;
}
/* Brand row: brand mark + toggle button */
.ds-nav-brand-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px 0;
  margin-bottom: 16px;
  position: relative;
  gap: 8px;
  flex: 0 0 auto;
}
.ds-nav-expanded .ds-nav-brand-row {
  justify-content: center;
  padding: 12px 14px 0;
}
.ds-nav-expanded .ds-nav-brand-row .ds-nav-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.ds-nav-brand-row .ds-brand-mark { margin-bottom: 0; }

.ds-nav-toggle {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #A8C0B0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ds-nav-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ds-nav-toggle .material-symbols-outlined { font-size: 18px; }
.ds-nav-expanded .ds-nav-toggle { display: inline-flex; }

/* Collapsed state: small floating toggle below brand */
.ds-nav:not(.ds-nav-expanded) .ds-nav-toggle-floating { display: flex; }
.ds-nav-toggle-floating {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #A8C0B0;
  cursor: pointer;
  margin: 0 auto 14px;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ds-nav-toggle-floating:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ds-nav-toggle-floating .material-symbols-outlined { font-size: 18px; }

/* Nav items: show labels when expanded */
.ds-nav-expanded .ds-nav-items {
  align-items: stretch;
  padding: 0 8px;
  width: 100%;
}
.ds-nav-expanded .ds-nav-bottom {
  align-items: stretch;
  padding: 0 8px 4px;
  width: 100%;
}
.ds-nav-expanded .ds-nav-item {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
  height: 34px;
  border-radius: 6px;
}
.ds-nav-expanded .ds-nav-item::after {
  content: attr(title);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.ds-nav-expanded .ds-nav-item-superadmin {
  background: rgba(255,200,0,0.08);
}
.ds-nav-expanded .ds-avatar-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  justify-content: center;
  align-items: center;
}
.ds-nav-expanded .ds-avatar-wrap .ds-avatar {
  flex-shrink: 0;
}
.ds-nav-expanded .ds-avatar { align-self: center; }

/* Phase 3d.2: avatar floats at bottom of nav, larger size */
.ds-nav > .ds-avatar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  font-size: 13px;
}
.ds-nav-expanded > .ds-avatar {
  left: 50%;
}

/* ─── Phase 4: Auth pages (login, signup, change-password) ────────────── */
.ds-auth-body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  font-family: var(--ds-font-ui);
  color: var(--ds-ink);
}
.ds-auth-shell {
  display: grid;
  grid-template-columns: 40% 1fr;
  height: 100vh;
  width: 100vw;
}

/* Left brand panel */
.ds-auth-brand {
  background: var(--ds-green-dk);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
}
.ds-auth-brand-inner {
  margin: 0;
  padding-top: 8px;
  max-width: 420px;
}
.ds-auth-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 40px;
  background: rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 14px;
}
.ds-auth-brand-mark {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  background: var(--ds-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.ds-auth-brand-mark span {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
}
.ds-auth-brand-title {
  margin: 0;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.1;
}
.ds-auth-brand-tagline {
  margin: 14px 0 0;
  font-size: 15.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  max-width: 380px;
}
.ds-auth-brand-microcopy {
  margin: 32px 0 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border-left: 2px solid rgba(255,255,255,0.18);
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  max-width: 380px;
}
.ds-auth-brand-microcopy strong { color: rgba(255,255,255,0.82); font-weight: 600; }
.ds-auth-brand-footer {
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.4px;
}

/* Right form panel */
.ds-auth-main {
  background: var(--ds-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.ds-auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 44px 44px 40px;
}
.ds-auth-card-header { margin-bottom: 28px; }
.ds-auth-card-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--ds-ink);
}
.ds-auth-card-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ds-ink-muted);
  line-height: 1.4;
}

.ds-auth-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--ds-rag-red-bg);
  color: var(--ds-rag-red-fg);
  border: 1px solid rgba(168, 35, 27, 0.2);
  border-radius: var(--ds-radius);
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.ds-auth-error .material-symbols-outlined { font-size: 16px; margin-top: 1px; }

.ds-auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds-auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ds-auth-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
}
.ds-auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--ds-ink);
  background: var(--ds-panel);
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ds-auth-input:hover { border-color: var(--ds-ink-faint); }
.ds-auth-input:focus {
  outline: none;
  border-color: var(--ds-green);
  box-shadow: 0 0 0 4px rgba(31, 90, 62, 0.14);
}
.ds-auth-input-wrap { position: relative; }
.ds-auth-input-wrap .ds-auth-input { padding-right: 38px; }
.ds-auth-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-ink-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ds-auth-eye:hover { color: var(--ds-ink); background: var(--ds-hover); }
.ds-auth-eye .material-symbols-outlined { font-size: 18px; }

.ds-auth-submit {
  width: 100%;
  justify-content: center;
  padding: 13px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Responsive: stack on narrow screens (tablet portrait + mobile) */
@media (max-width: 900px) {
  .ds-auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ds-auth-brand { padding: 28px 24px; min-height: 180px; }
  .ds-auth-brand-inner { margin: 0; }
  .ds-auth-brand-title { font-size: 24px; }
  .ds-auth-logo, .ds-auth-brand-mark { width: 44px; height: 44px; margin-bottom: 16px; }
  .ds-auth-brand-footer { display: none; }
  .ds-auth-main { padding: 24px 16px; }
  .ds-auth-card { padding: 24px 22px; }
}

/* Phase 4 fix: bottom block on auth brand panel holds microcopy + footer */
.ds-auth-brand-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
}
.ds-auth-brand-bottom .ds-auth-brand-microcopy { margin-top: 0; }

/* Phase 4: input hint helper text (used on invite accept) */
.ds-auth-hint {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  line-height: 1.4;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 4: Admin module v2 — Tier 1-3
   Metrics strip · Setup Center · IA sections · Tiles · Onboarding
   ───────────────────────────────────────────────────────────────────────── */

/* ── Metrics strip (top of admin hub) ── */
.ds-metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
.ds-metric {
  background: var(--ds-panel);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ds-metric-value-sub {
  font-size: 12px;
  color: var(--ds-ink-muted);
  font-weight: 500;
  margin-left: 4px;
}
.ds-metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
}
.ds-metric-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ds-green);
  font-weight: 600;
}
.ds-metric-trend.is-warn { color: #B45309; }
.ds-metric-trend.is-danger { color: #A8231B; }
.ds-metric-trend .material-symbols-outlined { font-size: 13px; }
.ds-metric-health-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ds-green);
  margin-right: 6px;
  vertical-align: 1px;
}

/* ── Section dividers (richer than before) ── */
.ds-section-divider {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-section-divider:first-of-type { margin-top: 4px; }
.ds-section-divider-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ds-ink);
}
.ds-section-divider-hint {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  font-weight: 400;
}

/* ── Tile grid ── */
.ds-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.ds-admin-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ds-ink);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  position: relative;
}
.ds-admin-tile:hover {
  border-color: var(--ds-green);
  background: var(--ds-bg);
}
.ds-admin-tile:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}
.ds-admin-tile:active { transform: translateY(0); }

.ds-admin-tile-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ds-bg);
  color: var(--ds-green);
  transition: background 0.15s;
}
.ds-admin-tile:hover .ds-admin-tile-icon { background: rgba(31, 90, 62, 0.1); }
.ds-admin-tile-icon .material-symbols-outlined { font-size: 22px; }

.ds-admin-tile-body { flex: 1; min-width: 0; }
.ds-admin-tile-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.3;
  margin-bottom: 2px;
}
.ds-admin-tile-desc {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  line-height: 1.4;
}
.ds-admin-tile-meta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ds-admin-tile-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ds-bg);
  color: var(--ds-ink-muted);
  border: 1px solid var(--ds-border);
  white-space: nowrap;
}
.ds-admin-tile-badge.is-success {
  background: rgba(31, 90, 62, 0.08);
  color: var(--ds-green);
  border-color: rgba(31, 90, 62, 0.2);
}
.ds-admin-tile-badge.is-warn {
  background: rgba(180, 83, 9, 0.08);
  color: #B45309;
  border-color: rgba(180, 83, 9, 0.25);
}
.ds-admin-tile-arrow {
  flex-shrink: 0;
  color: var(--ds-ink-muted);
  transition: transform 0.15s, color 0.15s;
}
.ds-admin-tile-arrow .material-symbols-outlined { font-size: 20px; }
.ds-admin-tile:hover .ds-admin-tile-arrow { transform: translateX(3px); color: var(--ds-green); }

/* ── Readiness Center (replaces Onboarding card) ── */
.ds-readiness {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

/* Top guided strip */
.ds-readiness-top {
  padding: 20px 24px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-readiness-progress { margin-bottom: 18px; }
.ds-readiness-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ds-readiness-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
  margin: 0;
}
.ds-readiness-pct {
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
}
.ds-readiness-bar {
  height: 6px;
  background: var(--ds-border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-bottom: 6px;
}
.ds-readiness-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--ds-green);
  transform-origin: left;
  border-radius: 3px;
  transition: transform 0.4s ease;
}
.ds-readiness-progress-sub {
  font-size: 12px;
  color: var(--ds-ink-muted);
}

/* Recommended next step — accent block */
.ds-readiness-next {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ds-bg);
  border-left: 3px solid var(--ds-green);
  border-radius: 6px;
}
.ds-readiness-next-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(31, 90, 62, 0.1);
  color: var(--ds-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-readiness-next-icon .material-symbols-outlined { font-size: 20px; }
.ds-readiness-next-text { flex: 1; min-width: 0; }
.ds-readiness-next-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--ds-green);
  display: block;
  margin-bottom: 3px;
}
.ds-readiness-next-label {
  font-size: 14px;
  color: var(--ds-ink);
  font-weight: 700;
  line-height: 1.3;
}
.ds-readiness-next-hint {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  margin-top: 2px;
}
.ds-readiness-next-action { flex-shrink: 0; }
.ds-readiness-next-action .ds-btn-primary .material-symbols-outlined {
  margin-left: 4px; font-size: 16px;
}


.ds-readiness-collapse {
  background: transparent;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ds-ink-muted);
  flex-shrink: 0;
}
.ds-readiness-collapse:hover { background: var(--ds-bg); color: var(--ds-ink); }
.ds-readiness-collapse:focus-visible { outline: 2px solid var(--ds-green); outline-offset: 1px; }
.ds-readiness-collapse .material-symbols-outlined { font-size: 18px; transition: transform 0.2s; }
.ds-readiness.is-collapsed .ds-readiness-collapse .material-symbols-outlined { transform: rotate(-90deg); }
.ds-readiness.is-collapsed .ds-readiness-next,
.ds-readiness.is-collapsed .ds-readiness-phases,
.ds-readiness.is-collapsed .ds-onboarding-footer { display: none; }
.ds-readiness.is-collapsed .ds-readiness-progress { margin-bottom: 0; }

/* Phase list */
.ds-readiness-phases {
  display: flex;
  flex-direction: column;
}
.ds-readiness-phase {
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-panel);
}
.ds-readiness-phase:last-child { border-bottom: none; }

.ds-readiness-phase-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ds-ink);
  min-height: 32px;
}
.ds-readiness-phase-head:hover { background: var(--ds-bg); }
.ds-readiness-phase-head:focus-visible { outline: 2px solid var(--ds-green); outline-offset: -2px; }

.ds-readiness-phase-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--ds-bg);
  color: var(--ds-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-readiness-phase.is-done .ds-readiness-phase-icon {
  background: rgba(46, 160, 67, 0.12);
}
.ds-readiness-phase-icon .material-symbols-outlined { font-size: 16px; }

.ds-readiness-phase-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ds-readiness-phase-meta {
  flex-shrink: 0;
}
.ds-readiness-phase-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(46, 160, 67, 0.12);
  color: #1A7F2E;
}
.ds-readiness-phase-status .material-symbols-outlined { font-size: 13px; }
.ds-readiness-phase-remaining {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink-muted);
}

.ds-readiness-phase-chevron {
  color: var(--ds-ink-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.ds-readiness-phase-chevron .material-symbols-outlined { font-size: 22px; }
.ds-readiness-phase.is-collapsed .ds-readiness-phase-chevron { transform: rotate(-90deg); }
.ds-readiness-phase.is-collapsed .ds-readiness-phase-body { display: none; }

.ds-readiness-phase-body {
  padding: 0 24px 12px 56px;
  background: var(--ds-panel);
  border-top: 1px solid var(--ds-border);
}
.ds-readiness-tasks {
  display: flex;
  flex-direction: column;
}
.ds-readiness-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--ds-border);
  min-height: 28px;
}
.ds-readiness-task:first-child { border-top: none; padding-top: 6px; }
.ds-readiness-task-check { flex-shrink: 0; }
.ds-readiness-task-check .material-symbols-outlined {
  font-size: 18px;
  color: var(--ds-border);
}
.ds-readiness-task.is-done .ds-readiness-task-check .material-symbols-outlined {
  color: #2EA043;
}
.ds-readiness-task-body { flex: 1; min-width: 0; }
.ds-readiness-task-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.4;
}
.ds-readiness-task-label a {
  color: var(--ds-ink);
  text-decoration: none;
}
.ds-readiness-task-label a:hover {
  color: var(--ds-green);
  text-decoration: underline;
}
.ds-readiness-task.is-done .ds-readiness-task-label {
  color: var(--ds-ink-muted);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: rgba(46, 160, 67, 0.5);
}
.ds-readiness-task-hint {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  margin-top: 3px;
  line-height: 1.5;
}
.ds-readiness-task-action { flex-shrink: 0; align-self: center; }
.ds-readiness-task-action .ds-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-color: var(--ds-green);
  color: var(--ds-green);
}
.ds-readiness-task-action .ds-btn:hover {
  background: var(--ds-green);
  color: #fff;
  border-color: var(--ds-green);
}
.ds-readiness-task-edit {
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-ink-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.ds-readiness-task-edit:hover {
  color: var(--ds-green);
  background: var(--ds-bg);
}

/* Phase footer — primary CTA at bottom of expanded phase */
.ds-readiness-phase-footer {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-border);
  display: flex;
  justify-content: flex-end;
}
.ds-readiness-phase-footer .ds-btn-primary .material-symbols-outlined {
  margin-left: 4px;
  font-size: 16px;
}

/* "Setup complete" success banner */
.ds-onboarding-done-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(31, 90, 62, 0.06);
  border: 1px solid rgba(31, 90, 62, 0.2);
  border-radius: 8px;
  margin-bottom: 20px;
}
.ds-onboarding-done-banner .material-symbols-outlined {
  color: var(--ds-green);
  font-size: 22px;
  flex-shrink: 0;
}
.ds-onboarding-done-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--ds-ink);
  line-height: 1.4;
}
.ds-onboarding-done-banner-text strong { color: var(--ds-green); }
.ds-link-subtle {
  font-size: 12px;
  color: var(--ds-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.ds-link-subtle:hover { color: var(--ds-ink); }

/* ─────────────────────────────────────────────────────────────────────────
   Phase 4 Session 2b: Invites page v2
   Form helpers · Table · Banner · Empty state · Button variants
   ───────────────────────────────────────────────────────────────────────── */

/* Two-column layout for invite page */
.ds-invite-layout {
  display: grid;
  /* Even split. The old `380px 1fr` pinned the form narrow and handed two-thirds to the
     usually-empty Pending panel. minmax(320px, 1fr) is a FLOOR, not a fixed width -- the column
     still flexes as 1fr, so above the breakpoint both columns share the row evenly and neither
     collapses. Single-column stacking below 900px is preserved by the media query. */
  grid-template-columns: minmax(320px, 1fr) 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .ds-invite-layout { grid-template-columns: 1fr; }
}

/* ── Form fields (reusable) ── */
.ds-invite-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ds-form-row {
  display: flex;
  gap: 12px;
}
.ds-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: 0.2px;
}
.ds-form-label-optional {
  color: var(--ds-ink-muted);
  font-weight: 400;
}
.ds-form-input {
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ds-ink);
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-form-input:hover { border-color: #C8CFC4; }
.ds-form-input:focus {
  outline: none;
  border-color: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(31, 90, 62, 0.12);
}
select.ds-form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A8472' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.ds-form-help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ds-bg);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  line-height: 1.5;
}
.ds-form-help .material-symbols-outlined {
  font-size: 16px;
  color: var(--ds-ink-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.ds-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.ds-form-actions .ds-btn .material-symbols-outlined { font-size: 16px; margin-right: 2px; }

/* ── Invite-expiry setting strip (sits BELOW the tabs, its own row) ──
   Previously the setting form was a second flex child of .ds-card-header (a nowrap flex row),
   so it shared the tab row and got squeezed until the help text wrapped word-by-word and Save
   clipped at the card edge. It now owns this strip. The control row wraps (flex-wrap) so nothing
   clips at any width; only the tiny number input carries a width (intrinsically 1-2 digits), never
   the container. */
.ds-invite-settings {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-invite-expiry-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-invite-expiry-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ds-invite-expiry-input {
  width: 72px;
  flex: 0 0 auto;
}
.ds-invite-expiry-unit { font-size: 13px; color: var(--ds-ink-muted); }
.ds-invite-expiry-help {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ds-ink-muted);
}

/* ── Table (reusable) ── */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ds-table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
  padding: 10px 16px;
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-border);
}
.ds-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-border);
  vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--ds-bg); }

.ds-table-primary {
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.3;
}
.ds-table-secondary {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  margin-top: 2px;
}
.ds-th-actions,
.ds-td-actions {
  text-align: right;
  white-space: nowrap;
}
.ds-td-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Button variants ── */
.ds-btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}
.ds-btn-danger {
  color: #A8231B;
  border-color: rgba(168, 35, 27, 0.35);
}
.ds-btn-danger:hover {
  background: rgba(168, 35, 27, 0.06);
  border-color: #A8231B;
  color: #A8231B;
}

/* ── Last-invite success banner ── */
.ds-invite-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(46, 160, 67, 0.06);
  border: 1px solid rgba(46, 160, 67, 0.25);
  border-radius: 8px;
  margin-bottom: 16px;
}
.ds-invite-banner-icon {
  color: #2EA043;
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-invite-banner-body { flex: 1; min-width: 0; }
.ds-invite-banner-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.3;
}
.ds-invite-banner-hint {
  font-size: 12px;
  color: var(--ds-ink-muted);
  margin-top: 3px;
  line-height: 1.4;
}
.ds-invite-banner-url-wrap {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ds-invite-banner-url {
  flex: 1;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 8px 12px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  color: var(--ds-ink);
  min-width: 0;
}
.ds-invite-banner-url:focus { outline: 2px solid var(--ds-green); outline-offset: -1px; }
.ds-invite-banner-url-wrap .ds-btn .material-symbols-outlined { font-size: 14px; margin-right: 2px; }
.ds-invite-banner-close {
  background: transparent;
  border: none;
  color: var(--ds-ink-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-invite-banner-close:hover { background: var(--ds-bg); color: var(--ds-ink); }
.ds-invite-banner-close .material-symbols-outlined { font-size: 18px; }

/* ── Empty state ── */
.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px;
  color: var(--ds-ink-muted);
}
.ds-empty-state .material-symbols-outlined {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: 0.5;
}
.ds-empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 4px;
}
.ds-empty-state-hint {
  font-size: 12.5px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 4 Session 2b: Bulk CSV invite UI
   Tabs · File input · Step list · Preview results
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tabs ── */
.ds-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ds-border);
  margin: 0 -14px;
  padding: 0 14px;
}
.ds-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink-muted);
  cursor: pointer;
  margin-bottom: -1px;
  font-family: inherit;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.ds-tab:hover, .ds-tab:focus, .ds-tab:active, .ds-tab:visited { text-decoration: none; }
.ds-tab:hover { color: var(--ds-ink); }
.ds-tab.is-active {
  color: var(--ds-green);
  border-bottom-color: var(--ds-green);
}
.ds-tab:focus-visible { outline: 2px solid var(--ds-green); outline-offset: -4px; border-radius: 4px; }

/* ── Bulk step list ── */
.ds-bulk-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds-bulk-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ds-bulk-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  color: var(--ds-ink-muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-bulk-step-body { flex: 1; min-width: 0; }
.ds-bulk-step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 3px;
}
.ds-bulk-step-hint {
  font-size: 12px;
  color: var(--ds-ink-muted);
  line-height: 1.5;
}
.ds-bulk-step-hint code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  color: var(--ds-ink);
}
.ds-bulk-step .ds-btn .material-symbols-outlined { font-size: 16px; margin-right: 2px; }

/* ── File input ── */
.ds-file-input {
  display: block;
  position: relative;
  cursor: pointer;
}
.ds-file-input input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.ds-file-input-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ds-panel);
  border: 1px dashed var(--ds-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ds-ink-muted);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ds-file-input:hover .ds-file-input-label {
  border-color: var(--ds-green);
  color: var(--ds-ink);
}
.ds-file-input input:focus-visible + .ds-file-input-label {
  outline: 2px solid var(--ds-green);
  outline-offset: 1px;
}
.ds-file-input-label .material-symbols-outlined {
  font-size: 18px;
  color: var(--ds-green);
}

/* ── Preview results ── */
.ds-bulk-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ds-ink);
}
.ds-bulk-result.is-error {
  background: rgba(168, 35, 27, 0.06);
  border-color: rgba(168, 35, 27, 0.3);
  color: #A8231B;
}
.ds-bulk-result .material-symbols-outlined { font-size: 18px; }

.ds-bulk-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ds-bulk-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid;
}
.ds-bulk-pill strong { font-weight: 700; }
.ds-bulk-pill.is-success {
  background: rgba(46, 160, 67, 0.08);
  border-color: rgba(46, 160, 67, 0.3);
  color: #1A7F2E;
}
.ds-bulk-pill.is-warn {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.3);
  color: #B45309;
}
.ds-bulk-pill.is-danger {
  background: rgba(168, 35, 27, 0.06);
  border-color: rgba(168, 35, 27, 0.3);
  color: #A8231B;
}

.ds-bulk-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
  margin: 14px 0 6px;
}
.ds-bulk-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  font-size: 12.5px;
  max-height: 220px;
  overflow-y: auto;
}
.ds-bulk-rows li {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-ink);
  line-height: 1.4;
}
.ds-bulk-rows li:last-child { border-bottom: none; }
.ds-bulk-rows.is-danger li { color: #A8231B; }
.ds-bulk-rows.is-warn li { color: #B45309; }
.ds-bulk-rows li.is-more {
  color: var(--ds-ink-muted);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 4 Session 2c: User Management v2
   Filter bar · Icon buttons · Modal · Page header actions
   ───────────────────────────────────────────────────────────────────────── */

/* Page header actions slot (right side of page header) */
.ds-page-header > div:first-child { flex: 1; min-width: 0; }
.ds-page-header-actions { flex-shrink: 0; padding-top: 8px; }
.ds-page-header-actions .ds-btn .material-symbols-outlined { font-size: 16px; }

/* Filter bar */
.ds-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.ds-filter-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 220px;
  padding: 9px 13px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-filter-search:hover { border-color: var(--ds-border-strong); }
.ds-filter-search:focus-within { border-color: var(--ds-green); box-shadow: 0 0 0 3px var(--ds-green-bg); }
.ds-filter-search:focus-within {
  border-color: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(31, 90, 62, 0.12);
}
.ds-filter-search .material-symbols-outlined {
  font-size: 18px;
  color: var(--ds-ink-muted);
}
.ds-filter-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--ds-ink);
}
.ds-filter-search .material-symbols-outlined { color: var(--ds-ink-muted); font-size: 19px; }
.ds-filter-search input::placeholder { color: var(--ds-ink-muted); }
/* Keyboard focus indicator on the borderless search input (WCAG 2.4.7). Replaces a prior rule
   that removed the outline with !important on BOTH :focus and :focus-visible, leaving no indicator.
   .ds-filter-search input:focus-visible (0,2,0) outranks the base reset, so it wins order-free. */
.ds-filter-search input:focus-visible { outline: 2px solid var(--ds-green); outline-offset: 2px; border-radius: 4px; }
.ds-filter-count {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  font-weight: 500;
  margin-left: auto;
  padding: 0 6px;
}

/* Icon buttons (table row actions) */
.ds-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.ds-icon-btn:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
  border-color: var(--ds-border);
}
.ds-icon-btn:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 1px;
}
.ds-icon-btn.is-danger:hover {
  color: #A8231B;
  border-color: rgba(168, 35, 27, 0.3);
  background: rgba(168, 35, 27, 0.06);
}
.ds-icon-btn .material-symbols-outlined { font-size: 18px; }
/* Icon-button hover tooltip — surfaces aria-label as a styled pill (Session 11).
   aria-label remains the accessible name; this adds the VISUAL tooltip that
   aria-label alone does not provide. Applies site-wide to every .ds-icon-btn. */
.ds-icon-btn[aria-label] { position: relative; }
.ds-icon-btn[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ds-tooltip-bg, #26282C);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0.25s;
  z-index: 1000;
}
.ds-icon-btn[aria-label]:hover::after,
.ds-icon-btn[aria-label]:focus-visible::after { opacity: 1; }

/* Modal */
.ds-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 18, 0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dsModalFadeIn 0.12s ease;
}
.ds-modal-overlay.is-open { display: flex; }
@keyframes dsModalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ds-modal {
  background: var(--ds-panel);
  border-radius: 10px;
  border: 1px solid var(--ds-border);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dsModalSlideIn 0.18s ease;
}
@keyframes dsModalSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-ink);
  margin: 0;
}
.ds-modal-close {
  background: transparent;
  border: none;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-ink-muted);
  cursor: pointer;
}
.ds-modal-close:hover { background: var(--ds-bg); color: var(--ds-ink); }
.ds-modal-close:focus-visible { outline: 2px solid var(--ds-green); outline-offset: 1px; }
.ds-modal-close .material-symbols-outlined { font-size: 18px; }

.ds-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
/* Lesson 27: the <form> between .ds-modal and .ds-modal-body defaults to
   display:block and breaks the flex chain, so .ds-modal-body cannot scroll and
   the footer gets clipped on tall modals. Make the form a flex column that
   fills the dialog, then the body scrolls and header/footer stay pinned. */
.ds-modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.ds-modal-body .ds-form-field { margin-bottom: 14px; }
.ds-modal-body .ds-form-field:last-child { margin-bottom: 0; }
.ds-modal-body .ds-form-row { margin-bottom: 14px; }
.ds-modal-body .ds-form-row:last-child { margin-bottom: 0; }

.ds-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg);
}

/* ──────────────────────────────────────────────────────────────────────────
   Portfolio Shell — Phase 5
   Tab bar for the Portfolio area (Overview / Projects / Resources / Budget / Risks)
   ────────────────────────────────────────────────────────────────────────── */
.ds-portfolio-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.ds-portfolio-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 24px;
}

.ds-portfolio-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}

.ds-portfolio-tab:hover {
  color: var(--ds-ink);
}

.ds-portfolio-tab.is-active {
  color: var(--ds-green);
  border-bottom-color: var(--ds-green);
  font-weight: 600;
}

.ds-portfolio-tab-icon {
  font-size: 18px !important;
  line-height: 1;
}

.ds-portfolio-tab-legacy {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ds-ink-muted);
  background: var(--ds-hover);
  border: 1px solid var(--ds-border);
  border-radius: 3px;
  text-transform: lowercase;
  letter-spacing: .3px;
}

.ds-portfolio-content {
  /* Sub-view content area — no extra styling, sub-views own their layout */
}

/* ──────────────────────────────────────────────────────────────────────────
   Portfolio Overview — Phase 5 / Session 5a
   ────────────────────────────────────────────────────────────────────────── */

/* RAG pill color variants (extends existing .ds-rag-pill) */
.ds-rag-pill.is-red    { background: var(--ds-rag-red-bg);    color: var(--ds-rag-red-fg); }
.ds-rag-pill.is-amber  { background: var(--ds-rag-amber-bg);  color: var(--ds-rag-amber-fg); }
.ds-rag-pill.is-green  { background: var(--ds-rag-green-bg);  color: var(--ds-rag-green-fg); }
.ds-rag-pill.is-grey   { background: var(--ds-hover);         color: var(--ds-ink-muted); }

/* RAG foreground color utilities (for numbers/icons inline in cells) */
.ds-rag-fg-red   { color: var(--ds-rag-red-fg); font-weight: 600; }
.ds-rag-fg-amber { color: var(--ds-rag-amber-fg); font-weight: 600; }
.ds-rag-fg-green { color: var(--ds-rag-green-fg); }

/* Status pill color variants (extends existing .ds-status-pill) */
.ds-status-pill.is-in-progress { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-status-pill.is-approved    { background: var(--ds-green-bg);     color: var(--ds-green); }
.ds-status-pill.is-on-hold     { background: var(--ds-hover);        color: var(--ds-ink-muted); }
.ds-status-pill.is-requested   { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-status-pill.is-completed   { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }

/* KPI grid variant — multi-card row (existing .ds-kpi-strip is a 2-stat strip) */
.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.ds-kpi-grid .ds-kpi {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-kpi-grid .ds-kpi.is-red .ds-kpi-value   { color: var(--ds-rag-red-fg); }
.ds-kpi-grid .ds-kpi.is-amber .ds-kpi-value { color: var(--ds-rag-amber-fg); }
@media (max-width: 900px) {
  .ds-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Panel — generic bordered card container for sections */
.ds-panel {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.12);
}
.ds-panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ds-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-ink);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* RAG distribution bar */
.ds-rag-bar {
  display: flex;
  height: 28px;
  margin: 16px 18px 10px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
}
.ds-rag-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: 0;
  transition: opacity .15s;
  min-width: 30px;
}
.ds-rag-seg:hover { opacity: .85; }
.ds-rag-seg-red   { background: var(--ds-rag-red-fg); }
.ds-rag-seg-amber { background: var(--ds-rag-amber-fg); }
.ds-rag-seg-green { background: var(--ds-rag-green-fg); }
.ds-rag-seg-grey  { background: var(--ds-ink-faint); }
.ds-rag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 18px 16px;
}
.ds-rag-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ds-ink-muted);
}
.ds-rag-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.ds-rag-dot-red   { background: var(--ds-rag-red-fg); }
.ds-rag-dot-amber { background: var(--ds-rag-amber-fg); }
.ds-rag-dot-green { background: var(--ds-rag-green-fg); }
.ds-rag-dot-grey  { background: var(--ds-ink-faint); }

/* Attention list */
.ds-attention-panel { border-color: var(--ds-rag-red-bg); }
.ds-attention-header {
  background: var(--ds-rag-red-bg);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--ds-rag-red-bg);
}
.ds-attention-icon { color: var(--ds-rag-red-fg); font-size: 18px !important; }
.ds-attention-title { color: var(--ds-rag-red-fg); }
.ds-attention-hint { font-size: 11px; color: var(--ds-rag-red-fg); margin-left: auto; opacity: .8; }
.ds-attention-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-attention-row:last-child { border-bottom: none; }
.ds-attention-row:hover { background: var(--ds-bg); }
.ds-attention-main { min-width: 0; }
.ds-attention-name { font-weight: 600; color: var(--ds-ink); font-size: 13px; text-decoration: none; }
.ds-attention-name:hover { text-decoration: underline; }
.ds-attention-meta { font-size: 11px; color: var(--ds-ink-muted); margin-top: 2px; }
.ds-attention-notes { font-size: 11px; color: var(--ds-ink-faint); margin-top: 2px; }
.ds-attention-stat { text-align: center; min-width: 56px; }
.ds-attention-stat-value { font-size: 18px; font-weight: 700; line-height: 1; }
.ds-attention-stat-label { font-size: 10px; color: var(--ds-ink-faint); margin-top: 2px; }

/* Component badges (S/B/R mini chips) */
.ds-comp-badges { display: flex; gap: 4px; }
.ds-comp-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 18px;
  text-align: center;
}
.ds-comp-badge-red   { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }
.ds-comp-badge-amber { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-comp-badge-green { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-comp-badge-grey  { background: var(--ds-hover);        color: var(--ds-ink-muted); }

/* Overview-table chrome */
.ds-overview-table-header { flex-wrap: wrap; }
.ds-overview-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ds-overview-filters .ds-form-input,
.ds-overview-filters select.ds-form-input { padding: 5px 10px; font-size: 12px; }

/* Misc utilities */
.ds-btn-ghost { background: var(--ds-panel); }
.ds-btn-ghost:hover { background: var(--ds-hover); border-color: var(--ds-green); }
.ds-btn-secondary { background: var(--ds-bg); color: var(--ds-ink); border-color: var(--ds-border); }
.ds-btn-secondary:hover { background: var(--ds-hover); border-color: var(--ds-green); }
.ds-inline-form { display: inline-flex; }
.ds-link { color: var(--ds-green); text-decoration: none; font-size: 12px; }
.ds-link:hover { text-decoration: underline; }
.ds-link-strong { color: var(--ds-ink); font-weight: 600; text-decoration: none; }
.ds-link-strong:hover { text-decoration: underline; }
.ds-cell-sub { font-size: 11px; color: var(--ds-ink-muted); margin-top: 1px; }
.ds-cell-center { text-align: center; }
.ds-strong { font-weight: 700; }
.ds-table-empty { text-align: center; padding: 40px 20px; color: var(--ds-ink-faint); font-size: 13px; }
.ds-table-wrap { overflow-x: auto; }
.ds-page-subtitle { font-size: 13px; color: var(--ds-ink-muted); margin: 6px 0 0; }
.ds-page-header-text { min-width: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   Portfolio Projects — Phase 5 / Session 5a.3
   ────────────────────────────────────────────────────────────────────────── */

/* Banner — the single canonical .ds-banner definition. Merged from two former
   duplicate blocks (this one + a later "Session 8 v2 polish" block) whose values
   cascaded together; every property below is the value that actually rendered, so
   this merge is visually identical to the old pair. Variant classes
   (.ds-banner-danger/-warning/-info) live further down. */
.ds-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--ds-ink-muted);
  background: var(--ds-panel);
}
.ds-banner .material-symbols-outlined { font-size: 18px; color: var(--ds-ink-muted); }
/* Prose variant — a banner that is a flowing paragraph (inline <strong> phrases), NOT the
   default flex icon+text+button layout. Without this, multiple <strong> fragments become
   spread-out flex items with gaps (scattered columns). Compound selector (.ds-banner.ds-banner-prose,
   specificity 0,2,0) so it beats the single-class `.ds-banner { display:flex }` regardless of
   source order. */
.ds-banner.ds-banner-prose { display: block; line-height: 1.5; }

/* Tools row above the table */
.ds-tools-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 12px 0 8px;
}

/* Small form input — used in filter selects */
.ds-form-input-sm {
  padding: 6px 10px;
  font-size: 12.5px;
}

/* Column picker dropdown */
.ds-col-picker {
  position: relative;
}
.ds-col-picker-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 18, 0.10);
  padding: 12px;
  z-index: 100;
  min-width: 240px;
}
.ds-col-picker-panel[hidden] { display: none; }
.ds-col-picker-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-col-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.ds-col-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-ink);
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 4px;
}
.ds-col-picker-item:hover { background: var(--ds-hover); }
.ds-col-picker-item.is-required {
  cursor: not-allowed;
  color: var(--ds-ink-faint);
}
.ds-col-picker-required {
  font-size: 10px;
  color: var(--ds-ink-faint);
  font-weight: 400;
}
.ds-col-picker-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ds-border);
}
.ds-col-picker-status {
  font-size: 11px;
  color: var(--ds-ink-muted);
  margin-top: 6px;
  min-height: 14px;
}
.ds-col-picker-status.is-error { color: var(--ds-rag-red-fg); }

/* Type pill variants (extend .ds-status-pill) */
.ds-status-pill.is-capital   { background: #E6EAF8; color: #003A8F; }
.ds-status-pill.is-operating { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }

/* Priority pill */
.ds-priority-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ds-priority-pill.is-critical { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }
.ds-priority-pill.is-high     { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-priority-pill.is-medium   { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-priority-pill.is-low      { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }

/* Budget-used cell (mini progress bar + percent) */
.ds-used-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
}
.ds-used-bar {
  flex: 1;
  height: 4px;
  background: var(--ds-border);
  border-radius: 2px;
  overflow: hidden;
}
.ds-used-bar-fill {
  height: 100%;
  background: var(--ds-green);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.ds-used-bar-fill.is-warn { background: var(--ds-rag-amber-dot); }
.ds-used-pct {
  font-size: 11px;
  color: var(--ds-ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

/* Projects table — slightly tighter than the generic .ds-table */
.ds-projects-table td { vertical-align: middle; }
.ds-projects-table .ds-link-strong { font-size: 13px; }

/* Utility — nowrap cell content */
.ds-cell-nowrap { white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────────────────
   Projects v2 polish — Phase 5 / Session 5a.3
   Hierarchy, density, hover, status pill weight, less-boxed wrapper
   ────────────────────────────────────────────────────────────────────────── */

/* #3 Hierarchy — project name stronger, description lighter */
.ds-projects-table .ds-link-strong {
  font-weight: 700;
  color: var(--ds-ink);
  font-size: 13.5px;
  letter-spacing: -0.1px;
}
.ds-projects-table .ds-cell-sub {
  font-size: 11px;
  color: var(--ds-ink-faint);
  margin-top: 2px;
  line-height: 1.35;
}
.ds-projects-table .ds-cell-muted { color: var(--ds-ink-faint); font-size: 12px; }

/* #1 Density — more vertical breathing room, softer grid */
.ds-projects-table tbody td {
  padding-top: 14px;
  padding-bottom: 14px;
}
.ds-projects-table tbody tr td {
  border-top: 1px solid rgba(208, 213, 200, 0.55);
}
.ds-projects-table tbody tr:first-child td { border-top: none; }
.ds-projects-table thead th {
  border-bottom: 1px solid var(--ds-border);
}

/* #4 Hover state — subtle but visible row affordance */
.ds-projects-table tbody tr {
  transition: background 0.12s ease;
}
.ds-projects-table tbody tr:hover {
  background: var(--ds-hover);
}

/* #6 Status pill — bolder weight, cleaner spacing */
.ds-projects-table .ds-status-pill,
.ds-projects-table .ds-rag-pill,
.ds-projects-table .ds-priority-pill {
  font-weight: 700;
  padding: 3px 10px;
  font-size: 10.5px;
}

/* #8 Less-boxed — drop the wrapping panel border around the table */
.ds-projects-table-wrap {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
   Filter toolbar (Pattern 3) — Phase 5 / Session 5a.3
   Search + Status inline · More popover · Columns right-aligned · Active chips
   ────────────────────────────────────────────────────────────────────────── */
.ds-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ds-filter-toolbar .ds-filter-search {
  flex: 1;
  min-width: 200px;
  padding: 5px 10px;
  background: var(--ds-bg);
  border-color: transparent;
}
.ds-filter-toolbar .ds-filter-search:focus-within {
  background: var(--ds-panel);
}
.ds-filter-inline-select {
  min-width: 150px;
  padding: 5px 24px 5px 10px;
  font-size: 12.5px;
}

/* Spacer that pushes the next element to the right edge */
.ds-filter-spacer-left { margin-left: auto; }

/* More-filters popover */
.ds-filter-more { position: relative; }
.ds-filter-more-toggle { white-space: nowrap; }
.ds-filter-more-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 18, 0.10);
  padding: 14px;
  min-width: 260px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds-filter-more-panel[hidden] { display: none; }
.ds-filter-more-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-filter-more-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ds-ink-muted);
}
.ds-filter-more-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ds-border);
}

/* Active filter chips row */
.ds-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 12px;
}
.ds-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: var(--ds-green-bg);
  color: var(--ds-green);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.ds-filter-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--ds-green);
  text-decoration: none;
  font-size: 10px;
  line-height: 1;
  transition: background 0.12s;
}
.ds-filter-chip-x:hover {
  background: rgba(31, 90, 62, 0.18);
}
.ds-active-filters-clear {
  margin-left: 4px;
  font-size: 11.5px;
}

/* Inline link variant — matches button height when alongside buttons in a header row */
.ds-link-subtle-inline {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Projects page header + toolbar — Phase 5 / Session 5a.3 polish
   Compact, single-row, premium SaaS feel
   ────────────────────────────────────────────────────────────────────────── */

/* Page head — title + inline stats, no actions cluster */
.ds-projects-head {
  margin: 4px 0 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ds-projects-head-text { min-width: 0; }
.ds-projects-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--ds-ink);
}
.ds-projects-stats {
  margin-top: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 12.5px;
  color: var(--ds-ink-muted);
}
.ds-projects-stats-count {
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-projects-stats-sep { color: var(--ds-ink-faint); }
.ds-projects-stats-item { color: var(--ds-ink-muted); }
.ds-projects-stats-item.is-risk { color: var(--ds-rag-red-fg); font-weight: 600; }

/* Toolbar — single row, left/right clusters */
.ds-projects-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ds-projects-toolbar-left,
.ds-projects-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds-projects-toolbar-left {
  flex: 1;
  min-width: 0;
}
.ds-projects-toolbar-right {
  flex-shrink: 0;
}

/* Search inside toolbar — slightly stronger visual treatment */
.ds-projects-search {
  flex: 1;
  min-width: 160px;
  max-width: 320px;
}
.ds-projects-search input::placeholder { color: var(--ds-ink-faint); }

/* Slightly tighter inline select */
.ds-projects-toolbar .ds-filter-inline-select {
  min-width: 130px;
  padding: 5px 24px 5px 10px;
  font-size: 12.5px;
}

/* Archived-actions row (shown in archived view) */
.ds-projects-archived-actions {
  margin: 0 0 14px;
}

/* Narrow viewport: stack left/right, but keep things tight */
@media (max-width: 820px) {
  .ds-projects-toolbar-left,
  .ds-projects-toolbar-right { width: 100%; }
  .ds-projects-toolbar-right { justify-content: flex-end; }
}

/* 5a.3 polish — search width + status select width tightening */
.ds-projects-search {
  flex: 1 1 220px;
  max-width: none;
}
.ds-projects-search input {
  width: 100%;
  min-width: 0;
}
.ds-projects-toolbar .ds-filter-inline-select {
  min-width: 110px;
  max-width: 140px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Project Detail v2 — Phase 5 Session 5b.1
   Header, tab nav, dashboard tab (KPI strip + split panels + delivery items)
   ────────────────────────────────────────────────────────────────────────── */

/* Back link */
.ds-pd-backlink { margin-bottom: 14px; }
.ds-pd-backlink .ds-link-subtle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  text-decoration: none;
}
.ds-pd-backlink .ds-link-subtle:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-pd-backlink .ds-link-subtle:hover .material-symbols-outlined { text-decoration: none; }
.ds-pd-backlink .material-symbols-outlined { font-size: 16px; text-decoration: none; display: inline-block; }

/* Project header */
.ds-pd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.ds-pd-header-text { min-width: 0; flex: 1; }
.ds-pd-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--ds-ink);
}
.ds-pd-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-pd-override-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ds-rag-amber-bg);
  color: var(--ds-rag-amber-fg);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: default;
}
.ds-pd-intake-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ds-stream-app-bg);
  color: var(--ds-stream-app-fg);
  font-size: 11px;
  font-weight: 600;
}
.ds-pd-intake-badge .material-symbols-outlined { font-size: 13px; }
.ds-pd-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Tab nav */
.ds-pd-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.ds-pd-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.ds-pd-tab:hover { color: var(--ds-ink); }
.ds-pd-tab.is-active {
  color: var(--ds-green);
  border-bottom-color: var(--ds-green);
  font-weight: 600;
}
.ds-pd-tab-count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ds-hover);
  color: var(--ds-ink-muted);
  font-variant-numeric: tabular-nums;
}
.ds-pd-tab.is-active .ds-pd-tab-count {
  background: var(--ds-green-bg);
  color: var(--ds-green);
}

/* Sections */
.ds-pd-section { margin-bottom: 20px; }
.ds-pd-section[hidden] { display: none; }
.ds-pd-placeholder {
  padding: 60px 24px;
  text-align: center;
  background: var(--ds-bg);
  border: 1px dashed var(--ds-border);
  border-radius: 8px;
  color: var(--ds-ink-muted);
  font-size: 13px;
}

/* KPI strip — 5 cards on dashboard */
.ds-pd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.ds-pd-kpi {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-pd-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
}
.ds-pd-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.ds-pd-kpi-value.is-red { color: var(--ds-rag-red-fg); }
.ds-pd-kpi-value.is-amber { color: var(--ds-rag-amber-fg); }
.ds-pd-kpi-value-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink-muted);
  margin-left: 4px;
}
.ds-pd-kpi-rag.is-red { color: var(--ds-rag-red-fg); }
.ds-pd-kpi-rag.is-amber { color: var(--ds-rag-amber-fg); }
.ds-pd-kpi-rag.is-green { color: var(--ds-rag-green-fg); }
.ds-pd-kpi-rag.is-grey { color: var(--ds-ink-faint); }
.ds-pd-kpi-bar {
  height: 6px;
  background: var(--ds-border);
  border-radius: 3px;
  overflow: hidden;
}
.ds-pd-kpi-bar-fill {
  height: 100%;
  background: var(--ds-rag-green-fg);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ds-pd-kpi-bar-fill.is-red { background: var(--ds-rag-red-fg); }
.ds-pd-kpi-bar-fill.is-amber { background: var(--ds-rag-amber-fg); }
.ds-pd-kpi-meta {
  font-size: 11px;
  color: var(--ds-ink-muted);
}
.ds-pd-kpi-meta.is-warn { color: var(--ds-rag-red-fg); font-weight: 600; }
.ds-pd-kpi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ds-pd-kpi-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--ds-hover);
  color: var(--ds-ink-muted);
}
.ds-pd-kpi-chip.is-blue { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-pd-kpi-chip.is-red { background: var(--ds-rag-red-bg); color: var(--ds-rag-red-fg); }
.ds-pd-kpi-chip.is-amber { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }

/* Two-column split for Details + Timeline */
.ds-pd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .ds-pd-split { grid-template-columns: 1fr; }
}
.ds-pd-panel-body { padding: 16px 18px; }
.ds-pd-description {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-ink);
}
.ds-pd-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ds-pd-field { min-width: 0; }
.ds-pd-field-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ds-ink-faint);
}
.ds-pd-field-value {
  font-size: 13px;
  color: var(--ds-ink);
  margin-top: 2px;
}
.ds-pd-strategic {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-border);
}
.ds-pd-strategic-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-ink);
  margin-top: 4px;
}
.ds-pd-override-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--ds-rag-amber-bg);
  color: var(--ds-rag-amber-fg);
  font-size: 12px;
}
.ds-pd-override-note .material-symbols-outlined { font-size: 16px; }
.ds-pd-gantt {
  min-height: 60px;
}
.ds-pd-gantt-empty {
  padding: 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ds-ink-faint);
}

/* Active delivery items */
.ds-pd-delivery-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-pd-delivery-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--ds-bg);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color 0.12s, background 0.12s;
}
.ds-pd-delivery-item:hover {
  background: var(--ds-hover);
  border-color: var(--ds-green);
  text-decoration: none;
}
.ds-pd-delivery-stripe {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--ds-stream-app-fg);
}
.ds-pd-delivery-stripe.is-critical { background: var(--ds-rag-red-fg); }
.ds-pd-delivery-stripe.is-high { background: var(--ds-rag-amber-fg); }
.ds-pd-delivery-stripe.is-medium { background: var(--ds-stream-app-fg); }
.ds-pd-delivery-stripe.is-low { background: var(--ds-rag-green-fg); }
.ds-pd-delivery-body { flex: 1; min-width: 0; }
.ds-pd-delivery-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-pd-delivery-meta {
  font-size: 11px;
  color: var(--ds-ink-muted);
  margin-top: 1px;
}
.ds-pd-delivery-type {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--ds-hover);
  color: var(--ds-ink-muted);
  flex-shrink: 0;
}
.ds-pd-delivery-type.is-defect { background: var(--ds-rag-red-bg); color: var(--ds-rag-red-fg); }
.ds-pd-delivery-type.is-blocker { background: var(--ds-rag-red-bg); color: var(--ds-rag-red-fg); font-weight: 700; }
.ds-pd-delivery-type.is-idea { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }

/* ──────────────────────────────────────────────────────────────────────────
   Project Detail v2 — Plan & Track tab (5b.2a)
   Blocker banner + delivery stats grid
   ────────────────────────────────────────────────────────────────────────── */

.ds-pd-blocker-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--ds-rag-red-bg);
  border: 1px solid rgba(168, 35, 27, 0.25);
  border-radius: 8px;
  color: var(--ds-rag-red-fg);
  font-size: 13px;
}
.ds-pd-blocker-banner .material-symbols-outlined {
  font-size: 18px;
  color: var(--ds-rag-red-fg);
}
.ds-pd-blocker-banner-hint {
  color: var(--ds-rag-red-fg);
  opacity: 0.85;
  font-size: 12px;
  margin-left: 4px;
}

/* Delivery 4-stat grid */
.ds-pd-delivery-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  .ds-pd-delivery-stats { grid-template-columns: repeat(2, 1fr); }
}
.ds-pd-delivery-stat {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-ink-faint);
  border-radius: 8px;
  padding: 14px 16px;
}
.ds-pd-delivery-stat.is-total    { border-left-color: var(--ds-stream-app-fg); }
.ds-pd-delivery-stat.is-progress { border-left-color: var(--ds-rag-amber-fg); }
.ds-pd-delivery-stat.is-overdue  { border-left-color: var(--ds-rag-red-fg); }
.ds-pd-delivery-stat.is-done     { border-left-color: var(--ds-rag-green-fg); }

.ds-pd-delivery-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ds-pd-delivery-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
  margin-top: 5px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Project Detail v2 — Requirements (5b.2b)
   Type-grouped, collapsible, with traceability + linked-work-items
   ────────────────────────────────────────────────────────────────────────── */

/* Toolbar header */
.ds-pd-req-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ds-pd-req-count {
  font-size: 12.5px;
  color: var(--ds-ink-muted);
}

/* Type group container — neutral surface, no accent border */
.ds-pd-req-group {
  margin-bottom: 12px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Group header (button — clickable to collapse/expand) */
.ds-pd-req-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--ds-bg);
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.ds-pd-req-group-header:hover { background: var(--ds-hover); }
.ds-pd-req-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: 0.1px;
}
/* Type accent lives on the group's top border only; titles stay neutral so requirement titles win the eye */
.ds-pd-req-group-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--ds-hover);
  color: var(--ds-ink-muted);
  font-variant-numeric: tabular-nums;
}
.ds-pd-req-group-chevron {
  margin-left: auto;
  font-size: 20px;
  color: var(--ds-ink-muted);
  transition: transform 0.18s ease;
}
.ds-pd-req-group.is-collapsed .ds-pd-req-group-chevron { transform: rotate(-90deg); }
.ds-pd-req-group.is-collapsed .ds-pd-req-group-body { display: none; }

/* Requirement card row */
.ds-pd-req-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-pd-req-card:last-child { border-bottom: none; }
.ds-pd-req-card-main { flex: 1; min-width: 0; }

/* Badge row */
.ds-pd-req-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ds-pd-req-id {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ds-bg);
  color: var(--ds-ink);
}
.ds-pd-req-status-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--ds-hover);
  color: var(--ds-ink-muted);
}
.ds-pd-req-version {
  font-size: 10px;
  color: var(--ds-ink-faint);
}

/* Title */
.ds-pd-req-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color 0.12s;
}
.ds-pd-req-title:hover { color: var(--ds-green); }

/* Description */
.ds-pd-req-desc {
  font-size: 13px;
  color: var(--ds-ink);
  line-height: 1.55;
  margin-bottom: 6px;
}

/* Acceptance criteria */
.ds-pd-req-ac {
  padding: 8px 12px;
  background: var(--ds-bg);
  border-left: 3px solid var(--ds-border-strong);
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}

.ds-pd-req-ac-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-faint);
  margin-bottom: 4px;
}
.ds-pd-req-ac-text {
  font-size: 12px;
  color: var(--ds-ink);
  line-height: 1.55;
  white-space: pre-line;
}

/* Meta row */
.ds-pd-req-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ds-ink-muted);
}
.ds-pd-req-meta strong { color: var(--ds-ink); font-weight: 600; }

/* Traceability chips */
.ds-pd-req-trace {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ds-pd-req-trace-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.ds-pd-req-trace-chip .material-symbols-outlined { font-size: 12px; }
.ds-pd-req-trace-chip.is-risk { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-pd-req-trace-chip.is-ms   { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-pd-req-trace-meta { opacity: 0.7; font-weight: 400; }

/* Linked work items panel */
.ds-pd-req-linked {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
}
.ds-pd-req-linked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ds-pd-req-linked-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
}
.ds-pd-req-linked-count {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--ds-stream-app-fg);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.ds-pd-req-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ds-ink-muted);
  cursor: pointer;
}
.ds-pd-req-link-btn:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-pd-req-link-btn .material-symbols-outlined { font-size: 13px; }
.ds-pd-req-linked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-pd-req-linked-row:last-of-type { border-bottom: none; }
.ds-pd-req-linked-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.ds-pd-req-linked-title {
  font-size: 12px;
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-pd-req-linked-x {
  background: none;
  border: 0;
  color: var(--ds-rag-red-fg);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  line-height: 1;
}
.ds-pd-req-linked-x:hover { color: #7f1d1d; }
.ds-pd-req-linked-empty {
  font-size: 12px;
  color: var(--ds-ink-faint);
  font-style: italic;
}
.ds-pd-req-link-form { margin-top: 8px; }
.ds-pd-req-link-form[hidden] { display: none; }
.ds-pd-req-link-form-inner {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ds-pd-req-link-form-inner .ds-form-input { flex: 1; }



/* ──────────────────────────────────────────────────────────────────────────
   Requirement card — collapsed/expanded states (5b.2b polish)
   ────────────────────────────────────────────────────────────────────────── */

/* The card itself shifts to flex-column once it contains a summary button */
.ds-pd-req-card[data-req-card] { display: block; }

/* Collapsed summary — always visible, click target */
.ds-pd-req-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ds-pd-req-summary:hover .ds-pd-req-title { color: var(--ds-green); }
.ds-pd-req-summary-main { flex: 1; min-width: 0; }
.ds-pd-req-summary .ds-pd-req-card-badges { margin-bottom: 6px; }
.ds-pd-req-summary .ds-pd-req-title {
  margin-bottom: 0;
  transition: color 0.12s;
}
.ds-pd-req-summary-link-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ds-stream-app-bg);
  color: var(--ds-stream-app-fg);
}
.ds-pd-req-summary-chevron {
  font-size: 20px;
  color: var(--ds-ink-faint);
  flex-shrink: 0;
  transition: transform 0.18s ease;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-pd-req-card.is-expanded .ds-pd-req-summary-chevron {
  transform: rotate(180deg);
}

/* Detail block — hidden until card has .is-expanded */
.ds-pd-req-detail {
  display: none;
  margin-top: 10px;
}
.ds-pd-req-card.is-expanded .ds-pd-req-detail { display: block; }



/* Adjust card padding now that the title-row is the click target */
.ds-pd-req-card { padding: 12px 14px; }




/* ── Summary row layout (5b.2b refinement) ─────────────────────────────── */
.ds-pd-req-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ds-pd-req-summary-row .ds-pd-req-summary {
  flex: 1;
  min-width: 0;
}
.ds-pd-req-summary-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-top: 2px;  /* nudge to align with badges */
}

/* Icon-ghost action button */
.ds-pd-req-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ds-pd-req-act:hover {
  background: var(--ds-hover);
  color: var(--ds-ink);
  border-color: var(--ds-border);
}
.ds-pd-req-act .material-symbols-outlined {
  font-size: 17px;
}
.ds-pd-req-act.is-danger:hover {
  background: var(--ds-rag-red-bg);
  color: var(--ds-rag-red-fg);
  border-color: transparent;
}
.ds-pd-req-summary-actions .ds-inline-form { display: inline-flex; }

/* ──────────────────────────────────────────────────────────────────────────
   Project Detail v2 — Governance (5b.3)
   Decision cards, stakeholder rows
   ────────────────────────────────────────────────────────────────────────── */

/* Stakeholder email (sub-line in Name cell) */
.ds-pd-stakeholder-email {
  font-size: 11px;
  color: var(--ds-ink-muted);
  margin-top: 2px;
}
/* Stakeholder Internal/External badge sits on its own line under the name (not run into it). */
.ds-pd-stakeholder-tags {
  margin-top: 4px;
}

/* Decision list */
.ds-pd-decision-list {
  display: flex;
  flex-direction: column;
}
.ds-pd-decision {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-pd-decision:last-child { border-bottom: none; }

.ds-pd-decision-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ds-pd-decision-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ds-pd-decision-type,
.ds-pd-decision-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--ds-hover);
  color: var(--ds-ink);
}
.ds-pd-decision-type.is-strategic { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-pd-decision-type.is-technical { background: var(--ds-stream-plat-bg); color: var(--ds-stream-plat-fg); }
.ds-pd-decision-type.is-financial { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }

.ds-pd-decision-status.is-open      { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-pd-decision-status.is-approved  { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-pd-decision-status.is-rejected  { background: var(--ds-rag-red-bg); color: var(--ds-rag-red-fg); }

.ds-pd-decision-meta {
  flex-shrink: 0;
  text-align: right;
}
.ds-pd-decision-by {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-pd-decision-date {
  font-size: 11px;
  color: var(--ds-ink-muted);
}

.ds-pd-decision-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 6px;
}

.ds-pd-decision-outcome {
  font-size: 13px;
  color: var(--ds-ink);
  margin-bottom: 6px;
  padding: 8px 12px;
  background: var(--ds-bg);
  border-radius: 6px;
  border-left: 3px solid var(--ds-stream-app-fg);
}
.ds-pd-decision-outcome strong { color: var(--ds-ink); }

.ds-pd-decision-line {
  font-size: 12px;
  color: var(--ds-ink-muted);
  margin-bottom: 4px;
}
.ds-pd-decision-line strong { color: var(--ds-ink); font-weight: 600; }

.ds-pd-decision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
}

/* Truncated table cell — for mitigation/notes columns */
.ds-cell-truncate {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tighter cap for register cells that would otherwise push the table past the panel (the Compliance
   Register has two wide text columns -- Item and External Contact -- so each is capped smaller to keep
   the whole table inside the panel with no horizontal scroll from ~1280px up). */
.ds-cell-truncate-sm {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* (The Compliance-specific actions-column rule was migrated to the shared .ds-table-register rule in the
   budget-tab CSS block; the Compliance table now carries .ds-table-register like every register table.) */

/* ──────────────────────────────────────────────────────────────────────────
   Project Detail v2 — Strategy (5b.4)
   Themes (with coverage + req sub-lists), Value Drivers (by category)
   ────────────────────────────────────────────────────────────────────────── */

/* Section header (themes + value-drivers shared) */
.ds-pd-strat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ds-pd-strat-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-pd-strat-sub {
  margin: 0;
  font-size: 12px;
  color: var(--ds-ink-muted);
  max-width: 680px;
}

/* Theme list */
.ds-pd-theme-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds-pd-theme {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-left: 4px solid var(--theme-color, var(--ds-stream-app-fg));
  border-radius: 10px;
  padding: 16px 18px;
}

.ds-pd-theme-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ds-pd-theme-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ds-pd-theme-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--theme-color, var(--ds-stream-app-fg));
  flex-shrink: 0;
}
.ds-pd-theme-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-pd-theme-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.ds-pd-theme-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--ds-hover);
  color: var(--ds-ink);
}
.ds-pd-theme-status.is-active    { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-pd-theme-status.is-completed { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-pd-theme-status.is-deferred  { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-pd-theme-status.is-cancelled { background: var(--ds-rag-red-bg); color: var(--ds-rag-red-fg); }
.ds-pd-theme-req-count {
  font-size: 11px;
  color: var(--ds-ink-muted);
  align-self: center;
}
.ds-pd-theme-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ds-pd-theme-desc {
  font-size: 12.5px;
  color: var(--ds-ink);
  line-height: 1.55;
  margin-bottom: 12px;
}

/* Coverage bar */
.ds-pd-theme-coverage { margin-top: 4px; }
.ds-pd-theme-coverage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ds-pd-theme-coverage-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ds-pd-theme-coverage-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-ink-muted);
  font-variant-numeric: tabular-nums;
}
.ds-pd-theme-coverage-pct.is-full    { color: var(--ds-rag-green-fg); }
.ds-pd-theme-coverage-pct.is-partial { color: var(--ds-rag-amber-fg); }
.ds-pd-theme-coverage-pct.is-low     { color: var(--ds-rag-red-fg); }
.ds-pd-theme-coverage-bar {
  height: 6px;
  background: var(--ds-border);
  border-radius: 3px;
  overflow: hidden;
}
.ds-pd-theme-coverage-fill {
  height: 100%;
  background: var(--ds-stream-app-fg);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ds-pd-theme-coverage-fill.is-full    { background: var(--ds-rag-green-fg); }
.ds-pd-theme-coverage-fill.is-partial { background: var(--ds-rag-amber-fg); }
.ds-pd-theme-coverage-fill.is-low     { background: var(--ds-stream-app-fg); }

/* Theme requirement sub-groups */
.ds-pd-theme-reqgroup { margin-top: 12px; }
.ds-pd-theme-reqgroup-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 6px;
}
.ds-pd-theme-reqlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-pd-theme-reqitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  text-decoration: none;
  transition: background 0.1s;
}
.ds-pd-theme-reqitem:hover { background: var(--ds-hover); }
.ds-pd-theme-reqitem-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ds-pd-theme-reqitem-title {
  font-size: 12px;
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-pd-theme-reqitem-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 8px;
}
.ds-pd-theme-empty {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ds-ink-muted);
  font-style: italic;
}

/* Unassigned requirements warning panel */
.ds-pd-unassigned {
  margin-top: 16px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-left: 4px solid var(--ds-rag-amber-fg);
  border-radius: 10px;
  overflow: hidden;
}
.ds-pd-unassigned-head {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: #FEF3C7;
  border-bottom: 1px solid var(--ds-border);
}
.ds-pd-unassigned-head .material-symbols-outlined {
  color: var(--ds-rag-amber-fg);
  font-size: 20px;
  margin-top: 2px;
}
.ds-pd-unassigned-title {
  font-size: 13px;
  font-weight: 700;
  color: #92400E;
}
.ds-pd-unassigned-sub {
  font-size: 11.5px;
  color: #78350F;
  margin-top: 1px;
}
.ds-pd-unassigned-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
}
.ds-pd-unassigned-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
}
.ds-pd-unassigned-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ds-ink);
  font-size: 12px;
  flex: 1;
  min-width: 0;
}
.ds-pd-unassigned-link:hover { color: var(--ds-green); }

/* Warning button variant (used for Assign-theme CTAs) */
.ds-btn.ds-btn-warning {
  background: var(--ds-rag-amber-fg);
  color: #fff;
  border-color: var(--ds-rag-amber-fg);
}
.ds-btn.ds-btn-warning:hover { background: #C2410C; }

/* ── Value Drivers ── */
.ds-pd-vd-cat { margin-bottom: 22px; }
.ds-pd-vd-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-pd-vd-cat-icon { font-size: 16px; }
.ds-pd-vd-cat-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-pd-vd-cat-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ds-ink-muted);
}

.ds-pd-vd {
  display: flex;
  gap: 12px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-stream-app-fg);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.ds-pd-vd.is-high   { border-left-color: var(--ds-rag-green-fg); }
.ds-pd-vd.is-medium { border-left-color: var(--ds-rag-amber-fg); }
.ds-pd-vd.is-low    { border-left-color: var(--ds-stream-app-fg); }
.ds-pd-vd-main { flex: 1; min-width: 0; }
.ds-pd-vd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ds-pd-vd-title {
  font-size: 13px;
  color: var(--ds-ink);
}
.ds-pd-vd-conf {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--ds-hover);
  color: var(--ds-ink);
}
.ds-pd-vd-conf.is-high   { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-pd-vd-conf.is-medium { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-pd-vd-conf.is-low    { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-pd-vd-desc {
  font-size: 12px;
  color: var(--ds-ink);
  margin: 0 0 8px;
  line-height: 1.6;
}
.ds-pd-vd-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 6px;
  font-size: 12px;
  color: #065F46;
  font-weight: 600;
}
.ds-pd-vd-metric .material-symbols-outlined { font-size: 14px; }
.ds-pd-vd-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* ──────────────────────────────────────────────────────────────────────────
   Project Detail v2 — Resources & Finance (5b.5)
   Allocation bar, budget filter strip + totals
   ────────────────────────────────────────────────────────────────────────── */

/* Numeric table cells — right-aligned with tabular numerals */
.ds-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ds-ink);
  font-weight: 500;
}
.ds-cell-num.is-over  { color: var(--ds-rag-red-fg); font-weight: 600; }
.ds-cell-num.is-under { color: var(--ds-rag-green-fg); font-weight: 600; }

/* Allocation % bar in the Staff Allocations table */
.ds-pd-alloc-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-pd-alloc-bar {
  flex: 1;
  max-width: 100px;
  height: 6px;
  background: var(--ds-border);
  border-radius: 3px;
  overflow: hidden;
}
.ds-pd-alloc-fill {
  height: 100%;
  background: var(--ds-stream-app-fg);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ds-pd-alloc-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink);
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}

/* Budget filter + totals strip (above the budget table) */
.ds-pd-budget-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-border);
  flex-wrap: wrap;
}
.ds-pd-budget-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-pd-budget-filter label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
}
.ds-pd-budget-totals {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.ds-pd-budget-total {
  min-width: 100px;
}
.ds-pd-budget-total-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
}
.ds-pd-budget-total-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ds-pd-budget-total-value.is-over  { color: var(--ds-rag-red-fg); }
.ds-pd-budget-total-value.is-under { color: var(--ds-rag-green-fg); }

/* ──────────────────────────────────────────────────────────────────────────
   Modal / Dialog (5b.6a)
   Generic component for any v2 modal — backdrop, dialog body, header, form
   ────────────────────────────────────────────────────────────────────────── */

.ds-modal-dialog {
  background: var(--ds-panel-raised);
  border-radius: 12px;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  box-sizing: border-box;
}
.ds-modal-dialog *, .ds-modal-dialog *::before, .ds-modal-dialog *::after { box-sizing: border-box; }
.ds-modal-dialog input,
.ds-modal-dialog select,
.ds-modal-dialog textarea { max-width: 100%; min-width: 0; }
.ds-modal-dialog.is-wide { max-width: 720px; }

/* Form between dialog and body must also be a flex container so .ds-modal-body's
   flex:1 + min-height:0 + overflow-y:auto actually resolve. Without this, the form
   inherits intrinsic height from its children, the body can't shrink, and content
   clips below the viewport (the viewport-recalc on devtools-open masks the bug). */
.ds-modal-dialog form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
  flex-shrink: 0;
}
.ds-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ds-ink-muted);
  cursor: pointer;
}
.ds-modal-close:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-modal-close .material-symbols-outlined { font-size: 20px; }

.ds-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.ds-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg);
  flex-shrink: 0;
}

/* Form bits inside modals */
.ds-form-field {
  margin-bottom: 14px;
}
.ds-form-field:last-child { margin-bottom: 0; }
.ds-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 4px;
}
.ds-form-label .ds-required { color: var(--ds-rag-red-fg); }
.ds-form-input,
.ds-form-textarea,
.ds-form-select {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: var(--ds-ink);
  padding: 8px 10px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  box-sizing: border-box;
}
.ds-form-input:focus,
.ds-form-textarea:focus,
.ds-form-select:focus {
  outline: none;
  border-color: var(--ds-stream-app-fg);
  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.15);
}
.ds-form-textarea { resize: vertical; min-height: 70px; }
.ds-form-input.ds-form-input-sm { padding: 5px 8px; font-size: 12px; }
.ds-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ds-form-row.is-3 { grid-template-columns: 1fr 1fr 1fr; }
.ds-form-hint {
  font-size: 11px;
  color: var(--ds-ink-muted);
  margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Project Detail v2 — Assign Theme modal (5b.6d)
   Radio-card picker for assigning a strategic theme to a requirement
   ────────────────────────────────────────────────────────────────────────── */

.ds-pd-assign-req-title {
  font-size: 12.5px;
  color: var(--ds-ink-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-pd-assign-req-title:empty { display: none; }

.ds-pd-theme-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-pd-theme-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 2px solid var(--ds-border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--ds-panel);
}
.ds-pd-theme-radio-card:hover {
  border-color: var(--ds-stream-app-fg);
  background: var(--ds-bg);
}
.ds-pd-theme-radio-card input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--ds-stream-app-fg);
  cursor: pointer;
}
.ds-pd-theme-radio-card:has(input[type="radio"]:checked) {
  border-color: var(--ds-stream-app-fg);
  background: var(--ds-bg);
}
.ds-pd-theme-radio-content {
  flex: 1;
  min-width: 0;
}
.ds-pd-theme-radio-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-pd-theme-radio-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-pd-theme-radio-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-pd-theme-radio-desc {
  font-size: 11px;
  color: var(--ds-ink-muted);
  margin-top: 3px;
  padding-left: 20px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Avatar account menu (base v2 — pops up from sidebar avatar)
   ────────────────────────────────────────────────────────────────────────── */
.ds-avatar-wrap {
  position: relative;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  display: flex;
  justify-content: center;
}
.ds-avatar[data-avatar-toggle] {
  border: none;
  cursor: pointer;
  font: inherit;
}
.ds-avatar-menu {
  position: fixed;        /* escapes the nav's overflow:hidden clipping */
  top: 0; left: 0;        /* JS sets real top/left on open */
  width: 248px;
  max-width: none;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18),
              0 20px 40px -8px rgba(0, 0, 0, 0.30);
  padding: 6px;
  z-index: 1200;
  transform-origin: bottom left;
  animation: dsAvatarMenuIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dsAvatarMenuIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* When the sidebar is collapsed, the menu would otherwise clip on the LEFT
   (avatar is centered, very little space to the left). Pop it to the right
   of the avatar instead. */
/* Collapsed-state offsets removed: menu is position:fixed and JS-anchored. */
.ds-avatar-menu-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 6px;
}
.ds-avatar-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 2px;
}
.ds-avatar-menu-email {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  word-break: break-word;
}
.ds-avatar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ds-ink);
  text-decoration: none;
  transition: background 0.12s;
}
.ds-avatar-menu-item + .ds-avatar-menu-item.is-danger {
  margin-top: 4px;
  border-top: 1px solid var(--ds-border);
  padding-top: 10px;
  border-radius: 0 0 6px 6px;
}
.ds-avatar-menu-item:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
  text-decoration: none;
}
.ds-avatar-menu-item .material-symbols-outlined {
  font-size: 18px;
  color: var(--ds-ink-muted);
}
.ds-avatar-menu-item.is-danger {
  color: var(--ds-rag-red-fg);
}
.ds-avatar-menu-item.is-danger .material-symbols-outlined {
  color: var(--ds-rag-red-fg);
}
.ds-avatar-menu-item.is-danger:hover {
  background: var(--ds-rag-red-bg);
  color: var(--ds-rag-red-fg);
}
/* Avatar-menu link color guard (beats style.css a{color:var(--link)}) */
[data-theme="dark"] a.ds-avatar-menu-item:not(.sidebar a),
[data-theme="dark"] a.ds-avatar-menu-item:not(.sidebar a):visited { color: var(--ds-ink); }
[data-theme="dark"] a.ds-avatar-menu-item.is-danger:not(.sidebar a) { color: var(--ds-rag-red-fg); }


/* ──────────────────────────────────────────────────────────────────────────
   Global confirm modal (replaces native window.confirm())
   ────────────────────────────────────────────────────────────────────────── */
.ds-confirm-dialog {
  max-width: 440px;
  /* Hug content vertically — don't stretch to max-height like a regular form modal */
  max-height: none;
  height: auto;
}
.ds-confirm-dialog .ds-modal-body {
  flex: 0 0 auto;
  padding: 16px 20px 8px;
}
.ds-confirm-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-ink);
}

/* ── Vendor-link modal: mode toggle pills ────────────────────────────────── */
.vl-mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--ds-bg);
  border-radius: 8px;
}
.vl-mode-pill {
  flex: 1;
  text-align: center;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  user-select: none;
}
.vl-mode-pill:hover { color: var(--ds-ink); }
.vl-mode-pill.is-active {
  background: var(--ds-panel);
  border-color: var(--ds-border);
  color: var(--ds-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 18, 0.06);
}
.vl-mode-pill input[type="radio"] { display: none; }

/* ── Compliance attachments list (used inside modal-compliance) ───────────── */
.cmp-att-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-att-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  font-size: 13px;
}
.cmp-att-list li .cmp-att-icon {
  color: var(--ds-ink-muted);
  flex-shrink: 0;
}
.cmp-att-list li .cmp-att-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-att-list li .cmp-att-meta {
  color: var(--ds-ink-muted);
  font-size: 11.5px;
  flex-shrink: 0;
}
.cmp-att-list li.cmp-att-empty {
  color: var(--ds-ink-muted);
  font-style: italic;
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--ds-border);
}
.cmp-att-list li .cmp-att-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.cmp-att-upload {
  display: flex;
  align-items: center;
}
.cmp-att-uploading {
  color: var(--ds-ink-muted);
  font-style: italic;
}
.cmp-att-error {
  color: #B91C1C;
}
.cmp-att-success {
  color: #047857;
}

/* ── Read-first modal: read view styling ─────────────────────────────────── */
.cmp-read-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cmp-read-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-border);
  align-items: start;
}
.cmp-read-row:last-child { border-bottom: none; }
.cmp-read-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.cmp-read-value {
  font-size: 13.5px;
  color: var(--ds-ink);
  word-break: break-word;
}
.cmp-read-value.cmp-read-strong {
  font-weight: 600;
}
.cmp-read-value.cmp-read-multiline {
  white-space: pre-wrap;
  line-height: 1.5;
}
.cmp-read-value a { color: inherit; }
.cmp-read-empty {
  color: var(--ds-ink-muted);
  font-style: italic;
}

/* Legacy semantic color aliases for v2-ported pages (capacity planner, etc.) */
:root {
  --blue: #0072CE;
}
[data-theme="dark"] {
  --blue: #4DA3E8;
}

/* Permissions: locked admin/admin row — visually grayed + lock indicator */
.ds-perm-card-locked {
  opacity: 0.62;
  position: relative;
}
.ds-perm-card-locked::after {
  content: "🔒 Locked — admin role retains full admin access";
  display: block;
  font-size: 11px;
  color: var(--ds-ink-muted);
  font-style: italic;
  padding: 6px 12px 8px;
}
.ds-perm-card-locked input[type="checkbox"] {
  cursor: not-allowed;
}


/* Active nav item bleed fix: clip overflow + ensure consistent box-sizing */
.ds-nav { overflow: hidden; box-sizing: border-box; }
.ds-nav * { box-sizing: border-box; }


/* ─────────────────────────────────────────────────────────────────────
   Vendor status-pill variants (added for Procurement v2 vendor detail)
   ───────────────────────────────────────────────────────────────────── */
.ds-status-pill.is-active        { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-status-pill.is-inactive      { background: var(--ds-hover);        color: var(--ds-ink-muted); }
.ds-status-pill.is-under-review  { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-status-pill.is-blacklisted   { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }

.ds-status-pill.is-risk-low     { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-status-pill.is-risk-medium  { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-status-pill.is-risk-high    { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }

.ds-status-pill.is-compliant      { background: var(--ds-rag-green-bg); color: var(--ds-rag-green-fg); }
.ds-status-pill.is-noncompliant   { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }
.ds-status-pill.is-exempt         { background: var(--ds-hover);        color: var(--ds-ink-muted); }


/* ─────────────────────────────────────────────────────────────────────
   Vendor detail polish (added for Procurement v2)
   Header spacing, "+ add" CTAs, compact KPI strip, dense field grid
   ───────────────────────────────────────────────────────────────────── */

/* Header pills row gets bottom spacing so it doesn't crash into the title */
.ds-pd-header-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Title gets a tighter line height so the page header feels balanced */
.ds-pd-title {
  margin: 0 0 14px;
  line-height: 1.2;
}

/* Subtitle / description gets breathing room from the title */
.ds-pd-description {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ds-ink-muted);
}

/* Compact KPI strip — half the height of the default */
.ds-kpi.is-compact {
  min-height: 0;
  padding: 10px 14px;
}
.ds-kpi.is-compact .ds-kpi-value {
  font-size: 20px;
  margin-top: 2px;
}
.ds-kpi.is-compact .ds-kpi-sub {
  font-size: 11px;
  margin-top: 1px;
}

/* "+ add" CTA inline with field-grid empty values */
.ds-field-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--ds-ink-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.ds-field-add:hover {
  color: var(--ds-green);
}
.ds-field-add .material-symbols-outlined {
  font-size: 14px;
}

/* Tighter field-grid spacing inside cards */
.ds-pd-field-grid.is-dense {
  row-gap: 12px;
}

/* Footer-style metadata strip for record info (replaces full card) */
.ds-pd-record-footer {
  display: flex;
  gap: 18px;
  padding: 8px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--ds-border);
  font-size: 11.5px;
  color: var(--ds-ink-muted);
}
.ds-pd-record-footer-item strong {
  color: var(--ds-ink);
  font-weight: 500;
}


/* Compliance attestation rows on vendor detail */
.ds-att-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-att-row:last-child { border-bottom: none; }
.ds-att-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-att-required {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--ds-hover);
}
.ds-att-row-desc {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  margin-top: 2px;
}
.ds-att-row-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-att-row-form .ds-form-input {
  max-width: 160px;
}
.ds-att-row-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Clickable rows via JS data-href — gives proper pointer cursor */
tr[data-href] { cursor: pointer; }
/* Section divider inside modal forms (e.g. "Vendor details", "Primary contact") */
.ds-form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
  margin: 18px 0 10px;
}
.ds-form-section-title:first-child {
  margin-top: 4px;
}
/* Evaluation matrix status pill variants */
.ds-status-pill.is-draft {
  background: var(--ds-warn-bg);
  color: var(--ds-warn-fg);
}
.ds-status-pill.is-scoring {
  background: var(--ds-info-bg);
  color: var(--ds-info-fg);
}
.ds-status-pill.is-closed {
  background: var(--ds-rag-green-bg);
  color: var(--ds-rag-green-fg);
}
.ds-status-pill.is-archived {
  background: var(--ds-hover);
  color: var(--ds-ink-muted);
}

/* Smaller variant for empty-state CTAs and subdued actions (added Session 4) */
.ds-btn-xs {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
}
.ds-btn-xs .material-symbols-outlined { font-size: 13px; }

/* Green-tinted ghost button — for empty-state CTAs that should still hint at the brand action color */
.ds-btn-ghost.is-green {
  background: transparent;
  color: var(--ds-green);
  border-color: var(--ds-green);
}
.ds-btn-ghost.is-green:hover {
  background: var(--ds-green-bg);
  color: var(--ds-green);
}

/* Workflow picker cards — enterprise-restrained styling (Session 4 Phase 4) */
.ds-wf-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ds-wf-picker-card-form { margin: 0; }
.ds-wf-picker-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ds-wf-picker-card:hover {
  background: var(--ds-bg);
  border-color: var(--ds-green);
  box-shadow: 0 2px 8px rgba(31, 90, 62, 0.08);
}
/* Hover-only left accent stripe (subtle selection cue) */
.ds-wf-picker-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ds-green);
  border-radius: 8px 0 0 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ds-wf-picker-card:hover::before { opacity: 1; }
.ds-wf-picker-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ds-wf-picker-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ds-wf-picker-card-icon {
  font-size: 18px;
  color: var(--ds-ink-muted);
  flex-shrink: 0;
}
.ds-wf-picker-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ds-ink);
  line-height: 1.3;
}
.ds-wf-picker-card-stages-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-ink-muted);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 2px 9px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds-wf-picker-card-desc {
  font-size: 12px;
  color: var(--ds-ink-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.ds-wf-picker-card-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ds-wf-picker-card-segment {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ds-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid var(--ds-border);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}



/* ─────────────────────────────────────────────────────────────
   Session 5 Phase 3 — Procurement card grid + pills
   ───────────────────────────────────────────────────────────── */
.ds-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 480px));
  gap: 12px;
  justify-content: start;
}
.ds-card-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.ds-card-link .ds-card-chevron {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--ds-ink-faint);
  font-size: 18px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.ds-card-link:hover .ds-card-chevron {
  color: var(--ds-green);
  transform: translateX(2px);
}
.ds-card-link:hover {
  border-color: var(--ds-border-strong);
  box-shadow: 0 2px 8px rgba(14, 20, 16, 0.06);
  text-decoration: none;
}
.ds-card-link .ds-card-title {
  text-decoration: none;
  color: var(--ds-ink);
}
.ds-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--ds-ink-muted);
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg);
}
.ds-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ds-card-meta-item .material-symbols-outlined {
  font-size: 16px;
  color: var(--ds-ink-faint);
}
.ds-card-meta-label {
  color: var(--ds-ink-faint);
  margin-right: 2px;
}
.ds-card-meta-value {
  color: var(--ds-ink);
  font-weight: 500;
}

/* Superadmin home — clickable KPI tile (work-queue drill-down) */
.ds-kpi-link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-kpi-link:hover {
  border-color: var(--ds-border-strong);
  box-shadow: 0 2px 8px rgba(14, 20, 16, 0.06);
}

/* Superadmin home — primary nav feature cards (built on .ds-card-link) */
.ds-feature-cards { display: flex; flex-direction: column; gap: 12px; }
.ds-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ds-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}
.ds-feature-card .ds-feature-icon {
  font-size: 26px;
  color: var(--ds-green);
  flex: none;
  line-height: 1;
}
.ds-feature-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-feature-card .ds-card-title { font-size: 14px; font-weight: 600; }
.ds-feature-desc {
  font-size: 12px;
  color: var(--ds-ink-muted);
  line-height: 1.45;
}
.ds-feature-card--dominant {
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--ds-green-bg) 0%, var(--ds-panel) 70%);
  border-color: var(--ds-green);
}
.ds-feature-card--dominant .ds-feature-icon { font-size: 34px; }
.ds-feature-card--dominant .ds-card-title { font-size: 17px; }
.ds-feature-card--dominant .ds-feature-desc { font-size: 13px; }
@media (max-width: 720px) {
  .ds-feature-row { grid-template-columns: 1fr; }
}

/* Superadmin home — table toolbar seam (future search/filter chips) + attention flag */
.ds-table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0 4px 10px;
}
.ds-table-toolbar:empty { display: none; }
/* Push trailing list-level actions (e.g. Export List) to the right edge of the toolbar. */
.ds-table-toolbar-end { margin-left: auto; }
.ds-table tr.is-attention td:first-child {
  box-shadow: inset 3px 0 0 var(--ds-rag-amber-fg, #A35200);
}
.ds-table tr.is-attention { background: rgba(163, 82, 0, 0.035); }

/* Pills (semantic chips) */
.ds-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  background: var(--ds-green-bg);
  color: var(--ds-green);
  white-space: nowrap;
}
.ds-pill-priority-low      { background: #EDF1ED; color: #5C6863; }
.ds-pill-priority-medium   { background: #EFF2EC; color: #5C6863; }
.ds-pill-priority-high     { background: #F8DDDD; color: #A8231B; }
.ds-pill-priority-critical { background: #A8231B; color: #FFFFFF; }
.ds-pill-stage {
  background: var(--ds-green);
  color: #FFFFFF;
}
.ds-pill-muted {
  background: var(--ds-bg);
  color: var(--ds-ink-muted);
}
/* Integrity (soft-lock) pill — amber, reusing the existing warn tokens. Marks a core module
   in the entitlement panel; the control stays a real toggle (warn-then-allow). */
.ds-pill-warn {
  background: var(--ds-warn-bg);
  color: var(--ds-warn-fg);
}

/* Workflow line inside a procurement card */
.ds-wf-stack {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-wf-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-ink);
}
.ds-wf-line .ds-wf-template-name {
  font-weight: 500;
}
.ds-wf-line .ds-wf-notes {
  color: var(--ds-ink-muted);
  font-size: 12px;
}

/* Procurement initiatives — full-width list rows (Session 10) */
.ds-proc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-proc-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-panel);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ds-proc-row:hover {
  border-color: var(--ds-green);
  background: var(--ds-hover);
  text-decoration: none;
}
.ds-proc-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-proc-row-titleline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-proc-row-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-proc-row-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.ds-proc-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ds-ink);
}
.ds-proc-stage-tmpl { color: var(--ds-ink-muted); }
.ds-proc-pick-hint {
  color: var(--ds-green);
  font-size: 12.5px;
  font-weight: 500;
}
.ds-proc-row-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}
.ds-proc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ds-ink);
}
.ds-proc-meta-item .material-symbols-outlined {
  font-size: 16px;
  color: var(--ds-ink-muted);
}
.ds-proc-meta-na { color: var(--ds-ink-muted); }
.ds-proc-row-chevron {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--ds-ink-faint);
  transition: color 0.15s ease, transform 0.15s ease;
}
.ds-proc-row:hover .ds-proc-row-chevron {
  color: var(--ds-green);
  transform: translateX(2px);
}
@media (max-width: 880px) {
  .ds-proc-row { flex-wrap: wrap; gap: 12px; }
  .ds-proc-row-meta { flex-wrap: wrap; gap: 12px; }
}

.ds-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ds-section-head-count {
  font-size: 13px;
  color: var(--ds-ink-muted);
  font-weight: 500;
}


/* ─── my_tasks.html v2 additions (Session 8) ────────────────────────────── */
/* Due-date status pill modifiers */
.ds-status-pill.is-overdue {
  background: var(--ds-rag-red-bg);
  color: var(--ds-rag-red-fg);
}
.ds-status-pill.is-today {
  background: var(--ds-rag-amber-bg);
  color: var(--ds-rag-amber-fg);
}

/* KPI cards used as clickable filters (Overdue/Due today/This week/Later/All) */
.ds-kpi-button {
  font: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.ds-kpi-button:hover {
  border-color: var(--ds-green);
}
.ds-kpi-button:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}
.ds-kpi-button:active {
  transform: translateY(1px);
}
.ds-kpi-button.is-active-filter {
  border-color: var(--ds-green);
  box-shadow: 0 0 0 1px var(--ds-green) inset;
}
/* ─── /my_tasks additions ─────────────────────────────────────────────── */

.ds-priority-pill.is-urgent { background: var(--ds-rag-red-bg); color: var(--ds-rag-red-fg); font-weight: 600; }

.ds-bucket-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 4px 4px;
  color: var(--ds-ink-muted);
  font-size: 12.5px;
}

.ds-priority-pill.is-high { font-weight: 700; padding: 3px 10px; }

.ds-section-head.is-bucket {
  border-bottom: 1px solid var(--ds-border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.ds-section-head.is-bucket h2 { line-height: 1.2; }

/* notifications_inbox v2 (Session 8) ─────────────────────────────────── */
.ds-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border);
  transition: background 0.12s ease;
}
.ds-notif-row:last-child { border-bottom: none; }
.ds-notif-row:hover { background: var(--ds-bg); }
.ds-notif-row.is-unread { background: rgba(46, 90, 60, 0.025); }

.ds-notif-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-bg);
}
.ds-notif-icon .material-symbols-outlined { font-size: 18px; }

/* Category color system — soft tint backgrounds, contrast foreground */
.ds-notif-cat-approval-icon  { background: rgba(46, 90, 60, 0.08); color: var(--ds-green); }
.ds-notif-cat-submitted-icon { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-notif-cat-update-icon    { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-notif-cat-mention-icon   { background: rgba(46, 90, 60, 0.08); color: var(--ds-green); }
.ds-notif-cat-warning-icon   { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-notif-cat-error-icon     { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }
.ds-notif-cat-info-icon      { background: var(--ds-bg);            color: var(--ds-ink-muted); }

.ds-notif-body { flex: 1; min-width: 0; }

.ds-notif-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ds-notif-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink);
  line-height: 1.4;
}
.ds-notif-title.is-unread { font-weight: 600; }

/* Category pill — small, bold, color-tinted to match icon */
.ds-notif-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.7;
}
.ds-notif-cat-approval-pill  { background: rgba(46, 90, 60, 0.10); color: var(--ds-green); }
.ds-notif-cat-submitted-pill { background: var(--ds-stream-app-bg); color: var(--ds-stream-app-fg); }
.ds-notif-cat-update-pill    { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-notif-cat-mention-pill   { background: rgba(46, 90, 60, 0.10); color: var(--ds-green); }
.ds-notif-cat-warning-pill   { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); }
.ds-notif-cat-error-pill     { background: var(--ds-rag-red-bg);   color: var(--ds-rag-red-fg); }
.ds-notif-cat-info-pill      { background: var(--ds-bg);            color: var(--ds-ink-muted); }

.ds-notif-message {
  font-size: 12.5px;
  color: var(--ds-ink-muted);
  line-height: 1.45;
  margin-bottom: 6px;
}

.ds-notif-meta {
  font-size: 11px;
  color: var(--ds-ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-notif-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.ds-notif-actions .ds-btn {
  font-size: 12px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* /notifications_inbox v2 ─────────────────────────────────────────────── */

/* Dashboard rail v2 partial (Session 8) ────────────────────────────── */

/* ── Notification rows in the rail ── */
.ds-rail-notif-list { margin: 0; padding: 0; list-style: none; }
.ds-rail-notif-row {
  border-bottom: 1px solid var(--ds-border);
  transition: background 0.12s ease;
}
.ds-rail-notif-row:last-child { border-bottom: none; }
.ds-rail-notif-row:hover { background: var(--ds-bg); }
.ds-rail-notif-row.is-unread { background: var(--ds-green-bg); }
.ds-rail-notif-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
}
.ds-rail-notif-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-rail-notif-icon .material-symbols-outlined { font-size: 16px; }
.ds-rail-notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-rail-notif-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-rail-notif-title.is-unread { font-weight: 600; }
.ds-rail-notif-time {
  font-size: 11px;
  color: var(--ds-ink-muted);
}
.ds-rail-notif-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--ds-ink-muted);
  text-align: center;
}
.ds-rail-notif-footer {
  padding: 8px 14px;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid var(--ds-border);
}
.ds-rail-notif-footer a {
  color: var(--ds-green);
  text-decoration: none;
  font-weight: 500;
}
.ds-rail-notif-footer a:hover { text-decoration: underline; }

/* ── Activity rows in the rail ── */
.ds-rail-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-rail-activity-row:last-child { border-bottom: none; }
.ds-rail-activity-row:hover { background: var(--ds-bg); }
.ds-rail-activity-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.ds-rail-activity-body { flex: 1; min-width: 0; }
.ds-rail-activity-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.35;
}
.ds-rail-activity-action {
  font-weight: 500;
  color: var(--ds-ink);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
}
.ds-rail-activity-target {
  color: var(--ds-ink-muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.ds-rail-activity-meta {
  font-size: 10.5px;
  color: var(--ds-ink-faint);
  margin-top: 2px;
}

/* ── Stream dot colors (used by activity dots + chip indicator) ── */
.ds-stream-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}
.ds-stream-app-dot      { background: var(--ds-stream-app-fg); }
.ds-stream-business-dot { background: var(--ds-stream-business-fg); }
.ds-stream-document-dot { background: var(--ds-stream-doc-fg); }
.ds-stream-platform-dot { background: var(--ds-stream-plat-fg); }

/* ── Section sub-label (next to "My activity" heading) ── */
.ds-rail-section-sub { font-weight: 400; }

/* ── Overflow fix: ensure the rail scrolls internally rather than the page ── */
/* Internal scroll for rail content — but NOT when collapsed (avoids
   a phantom scrollbar gutter line inside the narrow 36px dark strip). */
.ds-rail:not(.ds-rail-collapsed) {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.ds-rail-collapsed {
  overflow: hidden;
}
/* /Dashboard rail v2 ────────────────────────────────────────────────── */

.ds-rail-activity-bucket {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  padding: 10px 14px 4px;
}

.ds-rail-activity-sentence {
  font-size: 12.5px;
  color: var(--ds-ink);
  line-height: 1.4;
}
.ds-rail-activity-target-name {
  font-weight: 600;
  color: var(--ds-ink);
}

/* Library v2 (Session 8) ────────────────────────────────────────────── */

/* ── Two-column layout: 220px sidebar + main ── */
.ds-lib-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}
.ds-lib-sidebar { position: sticky; top: 16px; }
.ds-lib-main { min-width: 0; }

/* ── Sidebar nav ── */
.ds-lib-nav {
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  padding: 8px 0;
}
.ds-lib-nav-section { padding: 10px 0 2px; }
.ds-lib-nav-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ds-ink-muted);
  padding: 0 14px;
}
.ds-lib-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ds-ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ds-lib-nav-item:hover {
  background: var(--ds-bg);
  text-decoration: none;
}
.ds-lib-nav-item.is-active {
  background: var(--ds-green-bg);
  color: var(--ds-green);
  border-left-color: var(--ds-green);
  font-weight: 600;
}
.ds-lib-nav-item .material-symbols-outlined {
  font-size: 18px;
  color: var(--ds-ink-muted);
}
.ds-lib-nav-item.is-active .material-symbols-outlined { color: var(--ds-green); }
.ds-lib-nav-item.is-indent { padding-left: 32px; font-size: 12.5px; }
.ds-lib-nav-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-lib-nav-count {
  font-size: 10.5px;
  color: var(--ds-ink-muted);
  background: var(--ds-bg);
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  font-weight: 500;
}
.ds-lib-nav-item.is-active .ds-lib-nav-count {
  background: var(--ds-green);
  color: #fff;
}
.ds-lib-nav-sep {
  border-top: 1px solid var(--ds-border);
  margin: 8px 12px;
}

/* ── Document rows ── */
.ds-lib-doc-list { background: transparent; }
.ds-lib-doc-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
  position: relative;
}
.ds-lib-doc-row:last-child { border-bottom: none; }
.ds-lib-doc-row:hover { background: var(--ds-hover); }
.ds-lib-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
}
.ds-lib-doc-link:hover { text-decoration: none; }
.ds-lib-doc-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-lib-doc-icon .material-symbols-outlined { font-size: 18px; }
.ds-lib-doc-icon-rich {
  background: var(--ds-stream-app-bg);
  color: var(--ds-stream-app-fg);
}
.ds-lib-doc-icon-file {
  background: var(--ds-rag-amber-bg);
  color: var(--ds-rag-amber-fg);
}
.ds-lib-doc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-lib-doc-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-lib-doc-meta {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  line-height: 1.35;
}
.ds-lib-doc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-right: 12px;
}

/* ── Per-row action menu ── */
.ds-lib-doc-menu-wrap { position: relative; }
.ds-lib-doc-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  min-width: 200px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  padding: 4px 0;
  margin-top: 4px;
}
.ds-lib-doc-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ds-ink);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ds-lib-doc-menu-item:hover {
  background: var(--ds-bg);
  text-decoration: none;
}
.ds-lib-doc-menu-item .material-symbols-outlined {
  font-size: 16px;
  color: var(--ds-ink-muted);
}
.ds-lib-doc-menu-item.is-danger { color: var(--ds-rag-red-fg); }
.ds-lib-doc-menu-item.is-danger .material-symbols-outlined { color: var(--ds-rag-red-fg); }
.ds-lib-doc-menu-item.is-success { color: var(--ds-green); }
.ds-lib-doc-menu-item.is-success .material-symbols-outlined { color: var(--ds-green); }
.ds-lib-doc-menu-sep {
  border-top: 1px solid var(--ds-border);
  margin: 4px 0;
}

/* ── Inline rename editor ── */
.ds-lib-rename-input {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border: 2px solid var(--ds-green);
  border-radius: 4px;
  width: 100%;
  outline: none;
}

/* ── Sidebar scrollbar gutter fix (mirrors .ds-nav-items fix) ── */
.ds-lib-nav {
  scrollbar-width: thin;
}
/* /Library v2 ─────────────────────────────────────────────────────── */

/* Library Tier 1 enrichments (Session 8) ─────────────────────────────── */

/* Bulk action bar */
.ds-lib-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--ds-green-bg);
  border: 1px solid var(--ds-green);
  border-radius: var(--ds-radius-lg);
}
.ds-lib-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-green);
}
.ds-lib-bulk-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ds-lib-bulk-actions .ds-btn {
  font-size: 12.5px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ds-lib-bulk-actions .ds-btn .material-symbols-outlined { font-size: 14px; }

/* Row checkbox */
.ds-lib-doc-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  padding-left: 12px;
}
.ds-lib-doc-checkbox-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ds-green);
}
.ds-lib-doc-checkbox-input:disabled { cursor: not-allowed; opacity: 0.4; }
.ds-lib-doc-row.is-selected { background: var(--ds-green-bg); }

/* Title row (title + recency pill inline) */
.ds-lib-doc-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Recency pills */
.ds-lib-recency-today {
  background: var(--ds-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px;
}

/* Type pill — small subtle tag preceding metadata */
.ds-lib-doc-type-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ds-ink-muted);
  background: var(--ds-bg);
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 4px;
}
/* /Library Tier 1 ────────────────────────────────────────────────────── */

/* template_picker v2 (Session 8) ────────────────────────────────────── */

/* Parent-doc banner (creating a subpage) */
.ds-tp-parent-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 16px;
  background: var(--ds-green-bg);
  border: 1px solid var(--ds-green);
  border-radius: var(--ds-radius-lg);
  font-size: 13px;
  color: var(--ds-green);
}
.ds-tp-parent-banner .material-symbols-outlined { font-size: 18px; }

/* Category filter pills */
.ds-tp-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 16px;
}
.ds-tp-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--ds-border);
  background: var(--ds-panel);
  color: var(--ds-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  font-family: inherit;
}
.ds-tp-pill:hover {
  border-color: var(--ds-green);
  color: var(--ds-ink);
}
.ds-tp-pill.is-active {
  background: var(--ds-green);
  color: #fff;
  border-color: var(--ds-green);
}

/* Card grid */
.ds-tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ds-tp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-panel);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  min-height: 160px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
.ds-tp-card:hover {
  border-color: var(--ds-green);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  text-decoration: none;
}
.ds-tp-card:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}
.ds-tp-card-stripe {
  height: 3px;
  width: 100%;
}
.ds-tp-card-body {
  padding: 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-tp-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-bg);
  margin-bottom: 4px;
}
.ds-tp-card-icon .material-symbols-outlined { font-size: 18px; }
.ds-tp-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.3;
}
.ds-tp-card-desc {
  font-size: 12px;
  color: var(--ds-ink-muted);
  line-height: 1.5;
  flex: 1;
}
.ds-tp-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Blank-document card — dashed border */
.ds-tp-card-blank {
  border: 2px dashed var(--ds-border);
  text-align: center;
  background: transparent;
}
.ds-tp-card-blank:hover {
  border-color: var(--ds-green);
  background: var(--ds-bg);
}
.ds-tp-card-blank .ds-tp-card-body {
  align-items: center;
  justify-content: center;
}
.ds-tp-blank-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ds-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-ink-muted);
}
.ds-tp-blank-icon .material-symbols-outlined { font-size: 22px; }
/* /template_picker v2 ──────────────────────────────────────────────── */

/* Editor v2 (Session 8 Phase A) ────────────────────────────────────── */
/* These are TipTap/ProseMirror-bound styles — selectors preserved verbatim   */
/* from the original inline <style> block. DO NOT rename .doc-editor,         */
/* .doc-toolbar, .doc-meta, etc. — the 3000-line JS module references them.  */

/* ── Access panel ── */
.access-option { display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:8px;cursor:pointer;transition:all .15s;margin:0 }
.access-option:hover { border-color:var(--gray-300);background:var(--gray-50) }
.access-option:has(input:checked) { border-color:var(--primary-color,#3730A3);background:var(--primary-light,#EEF2FF) }
.access-option input[type=radio] { margin-top:2px;accent-color:var(--primary-color) }
.access-option-body { display:flex;align-items:flex-start;gap:8px }
.access-option-body svg { flex-shrink:0;margin-top:1px;color:var(--gray-500) }
.access-option:has(input:checked) .access-option-body svg { color:var(--primary-color) }
.access-option-title { font-size:13px;font-weight:600;color:var(--gray-800) }
.access-option-desc { font-size:11px;color:var(--gray-500);margin-top:1px }
/* ── Editor chrome ─────────────────────────────────────────────── */
.doc-editor-wrap { max-width:860px; margin:0 auto; }
.doc-toolbar {
  display:flex; flex-wrap:wrap; gap:1px; padding:8px 12px;
  background:var(--gray-50, #F9FAFB); border:1px solid var(--gray-200, #E5E7EB);
  border-radius:8px 8px 0 0; position:sticky; top:0; z-index:10;
  align-items:center;
}
.doc-toolbar button {
  padding:5px 7px; border:1px solid transparent; border-radius:4px;
  background:none; cursor:pointer; font-size:13px; color:var(--gray-500, #6B7280);
  font-weight:400; line-height:1; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
}
.doc-toolbar button:hover { background:var(--gray-100, #F3F4F6); }
.doc-toolbar button.is-active {
  background:var(--blue-50, #EFF6FF); color:var(--blue-600, #2563EB);
  border-color:var(--blue-200, #BFDBFE);
}
.doc-toolbar .sep {
  width:1px; background:var(--gray-200, #E5E7EB); margin:0 6px; align-self:stretch; min-height:22px;
}
.doc-toolbar select {
  padding:3px 6px; border:1px solid var(--gray-200); border-radius:4px;
  font-size:12px; background:var(--ds-panel); cursor:pointer; color:var(--gray-600);
}
.doc-toolbar input[type="color"] {
  width:24px; height:24px; border:1px solid var(--gray-200); border-radius:4px;
  cursor:pointer; padding:1px;
}
.doc-editor {
  border:1px solid var(--gray-200, #E5E7EB); border-top:none;
  border-radius:0 0 8px 8px; min-height:500px; padding:24px 32px;
  font-size:15px; line-height:1.7; color:#1a1a1a;
  background:var(--ds-panel);
}
/* ── ProseMirror content styles ────────────────────────────────── */
.doc-editor .ProseMirror { outline:none; min-height:460px; }
.doc-editor .ProseMirror > *+* { margin-top:0.5em; }
.doc-editor h1 { font-size:1.8em; font-weight:700; margin-top:1em; }
.doc-editor h2 { font-size:1.4em; font-weight:600; margin-top:0.8em; }
.doc-editor h3 { font-size:1.15em; font-weight:600; margin-top:0.6em; }
.doc-editor ul, .doc-editor ol { padding-left:1.5em; }
.doc-editor blockquote {
  border-left:3px solid var(--gray-300, #D1D5DB); margin-left:0;
  padding-left:1em; color:var(--gray-500, #6B7280); font-style:italic;
}
.doc-editor s { text-decoration:line-through; }
.doc-editor code {
  background:var(--gray-100, #F3F4F6); padding:2px 6px; border-radius:3px;
  font-size:0.9em; font-family:'SFMono-Regular',Consolas,monospace; color:#e01e5a;
}
.doc-editor pre {
  background:#1e1e1e; color:#d4d4d4; padding:16px 20px; border-radius:8px;
  overflow-x:auto; font-family:'SFMono-Regular',Consolas,monospace; font-size:13px;
  line-height:1.5; margin:0.5em 0;
}
.doc-editor pre code { background:none; color:inherit; padding:0; font-size:inherit; }
.doc-editor hr { border:none; border-top:2px solid var(--gray-200); margin:1.5em 0; }
.doc-editor mark { background:#fef08a; padding:1px 2px; border-radius:2px; }
.doc-editor sub { font-size:0.75em; }
.doc-editor sup { font-size:0.75em; }
.doc-editor a { color:var(--primary-color, #1b7a3e); text-decoration:underline; cursor:pointer; }

/* ── Editor dark mode (Notion model: dark paper, light text) — Session 11 ── */
[data-theme="dark"] .doc-editor { color: var(--ds-ink); background: var(--ds-panel-raised); border-color: var(--ds-border); }
[data-theme="dark"] .doc-editor-wrap { color: var(--ds-ink); }
[data-theme="dark"] .doc-editor blockquote { border-left-color: var(--ds-border-strong); color: var(--ds-ink-muted); }
[data-theme="dark"] .doc-editor code { background: var(--ds-panel); color: #FF7AA2; }
[data-theme="dark"] .doc-editor hr { border-top-color: var(--ds-border); }
[data-theme="dark"] .doc-editor mark { background: #5A4A12; color: var(--ds-ink); }
[data-theme="dark"] .doc-editor a { color: var(--ds-green); }
/* Toolbar chrome */
[data-theme="dark"] .doc-toolbar { background: var(--ds-panel); border-color: var(--ds-border); }
[data-theme="dark"] .doc-toolbar button { color: var(--ds-ink-muted); }
[data-theme="dark"] .doc-toolbar button:hover { background: var(--ds-hover); }
[data-theme="dark"] .doc-toolbar button.is-active { background: var(--ds-green-bg); color: var(--ds-green); border-color: var(--ds-green); }
[data-theme="dark"] .doc-toolbar .sep { background: var(--ds-border); }
[data-theme="dark"] .doc-toolbar select { background: var(--ds-panel-raised); color: var(--ds-ink); border-color: var(--ds-border); }
/* Inline user-applied near-black text colors are NOT auto-inverted (would mangle
   intentional color choices). Only the default/unstyled body text flips above. */
/* Task list */
.doc-editor ul[data-type="taskList"] { list-style:none; padding-left:0; }
.doc-editor ul[data-type="taskList"] li { display:flex; align-items:flex-start; gap:8px; margin-bottom:4px; }
.doc-editor ul[data-type="taskList"] li label { margin-top:3px; }
.doc-editor ul[data-type="taskList"] li div { flex:1; }
.doc-editor ul[data-type="taskList"] li[data-checked="true"] > div > p { text-decoration:line-through; color:var(--gray-400); }
/* Tables */
/* Table grid picker — Notion-style hover grid for insert-table UX (Session 8) */
.ds-editor-tgrid {
  position: absolute;
  z-index: 1000;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border, #E0E5DC);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 12px;
  user-select: none;
}
.ds-editor-tgrid-grid {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  grid-template-rows: repeat(8, 18px);
  gap: 3px;
}
.ds-editor-tgrid-cell {
  width: 18px;
  height: 18px;
  background: var(--ds-bg, #F2F5F0);
  border: 1px solid var(--ds-border, #E0E5DC);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.05s;
}
.ds-editor-tgrid-cell.is-hot {
  background: var(--ds-green-bg, #E6EEE9);
  border-color: var(--ds-green, #1F5A3E);
}
.ds-editor-tgrid-label {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-ink-muted, #5C6863);
  text-align: center;
}

/* Draft pill — shown next to current breadcrumb until first save (Session 8 drafts) */
.ds-editor-draft-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #92660A;
  background: #FBE8C2;
  border-radius: 4px;
  vertical-align: middle;
  user-select: none;
}

.doc-editor table { border-collapse:collapse; width:100%; margin:0.5em 0; table-layout:fixed; }
.doc-editor td, .doc-editor th {
  /* Border color tuned for white-bg editor surface (Session 8): #E2E6EA was
     too faint at ~4% gray. #C8CDD0 reads as "professional document" similar
     to Google Docs / Confluence / Linear. */
  border:1px solid #C8CDD0; padding:8px 12px; vertical-align:top;
  position:relative; min-width:80px;
}
.doc-editor th {
  background:var(--gray-50); font-weight:600;
  /* Header anchored by a darker bottom border — Google Docs convention */
  border-bottom:1px solid #9AA0A6;
}
.doc-editor .selectedCell { background:#e8f4fd; }
/* Image */
.doc-editor img { max-width:100%; height:auto; border-radius:6px; margin:0.5em 0; }
.doc-editor img.ProseMirror-selectednode { outline:2px solid var(--primary-color); }
/* Placeholder */
.doc-editor p.is-editor-empty:first-child::before {
  content:attr(data-placeholder); float:left; color:var(--gray-300);
  pointer-events:none; height:0;
}
/* Text alignment */
.doc-editor .has-text-align-center { text-align:center; }
.doc-editor .has-text-align-right { text-align:right; }
.doc-editor .has-text-align-justify { text-align:justify; }
/* ── Mentions ───────────────────────────────────────────────── */
.mention {
  background:var(--blue-50, #EFF6FF); color:var(--blue-600, #2563EB);
  border-radius:4px; padding:1px 4px; font-weight:600; font-size:0.95em;
  text-decoration:none; cursor:default;
}
.mention-suggestions {
  position:fixed; background:var(--ds-panel); border:1px solid var(--gray-200);
  border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:200;
  max-height:200px; overflow-y:auto; min-width:200px;
}
.mention-suggestions .mention-item {
  display:block; width:100%; text-align:left; padding:8px 12px;
  border:none; background:none; cursor:pointer; font-size:13px;
}
.mention-suggestions .mention-item:hover,
.mention-suggestions .mention-item.is-selected {
  background:var(--blue-50, #EFF6FF);
}
.mention-suggestions .mention-item .mention-email {
  font-size:11px; color:var(--gray-400); margin-left:6px;
}
/* ── Meta fields ───────────────────────────────────────────────── */
.doc-meta { margin-bottom:16px; }
.doc-meta input, .doc-meta select {
  width:100%; padding:8px 12px; border:1px solid var(--gray-200);
  border-radius:6px; font-size:14px; margin-top:4px;
}
.doc-meta label { font-size:12px; font-weight:600; color:var(--gray-500); }
.doc-meta-row { display:flex; gap:16px; margin-bottom:12px; }
.doc-meta-row > div { flex:1; }
/* ── Link popup ────────────────────────────────────────────────── */
.link-popup {
  position:fixed; background:var(--ds-panel); border:1px solid var(--gray-200); border-radius:8px;
  padding:12px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:100;
  display:none;
}
.link-popup input { width:280px; padding:6px 10px; border:1px solid var(--gray-200); border-radius:4px; font-size:13px; }
.link-popup button { padding:6px 14px; border:none; border-radius:4px; cursor:pointer; font-size:12px; font-weight:600; margin-left:6px; }
/* ── Table menu ────────────────────────────────────────────────── */
.table-menu {
  position:fixed; background:var(--ds-panel); border:1px solid var(--gray-200); border-radius:8px;
  padding:6px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:100; display:none;
}
.table-menu button {
  display:block; width:100%; text-align:left; padding:6px 12px; border:none;
  background:none; cursor:pointer; font-size:12px; border-radius:4px; white-space:nowrap;
}
.table-menu button:hover { background:var(--gray-100); }

/* /Editor v2 ────────────────────────────────────────────────────────── */

/* Editor topbar v2 (Phase A.3.1) ──────────────────────────────────── */
.ds-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ds-editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ds-ink-muted);
  min-width: 0;
  flex: 1;
}
.ds-editor-breadcrumb .material-symbols-outlined { font-size: 14px; }
.ds-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ds-ink-muted);
  text-decoration: none;
}
.ds-editor-back:hover { color: var(--ds-ink); }
.ds-editor-bc-link {
  color: var(--ds-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.ds-editor-bc-link:hover { color: var(--ds-ink); text-decoration: underline; }
.ds-editor-bc-sep { color: var(--ds-border); }
.ds-editor-bc-current {
  color: var(--ds-ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.ds-editor-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Standard topbar action button — used for star, history, read, comments, export */
.ds-editor-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 5px;
  background: var(--ds-panel);
  color: var(--ds-ink-muted);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ds-editor-action-btn:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
  border-color: var(--ds-ink-muted);
}
.ds-editor-action-btn .material-symbols-outlined {
  font-size: 14px;
}

/* Star variant: shows amber when filled */
.ds-editor-star-btn .material-symbols-outlined { font-size: 16px; }
.ds-editor-star-btn.is-starred {
  color: #F59E0B;
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.08);
}

/* Compact button-size variant — for Save in the topbar */
.ds-btn.ds-btn-sm {
  font-size: 11.5px;
  padding: 5px 14px;
}

/* Export dropdown menu */
.ds-editor-export-wrap { position: relative; }
.ds-editor-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 160px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.ds-editor-export-item {
  display: block;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--ds-ink);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ds-editor-export-item:hover {
  background: var(--ds-bg);
  text-decoration: none;
}
/* /Editor topbar v2 ──────────────────────────────────────────────── */

/* Editor title + pills v2 (Phase A.3.2) ──────────────────────────── */
.ds-editor-meta { padding: 0; }
.ds-editor-meta-row { display: flex; }
.ds-editor-title-input {
  font-size: 22px;
  font-weight: 600;
  border: none;
  padding: 4px 0;
  width: 100%;
  color: var(--ds-ink);
  outline: none;
  background: transparent;
  font-family: inherit;
}
.ds-editor-title-input:focus { color: var(--ds-ink); }
.ds-editor-title-input::placeholder { color: var(--ds-ink-muted); }
.ds-editor-title-input[readonly] { cursor: default; }

.ds-editor-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 4px;
  font-size: 12px;
  color: var(--ds-ink-muted);
}
.ds-editor-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ds-green-bg);
  color: var(--ds-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.ds-editor-author-sep { color: var(--ds-border); }

.ds-editor-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 12px;
  flex-wrap: wrap;
}

/* Pill base — used for access, category, share, tag chips */
.ds-editor-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  font-size: 12px;
  background: var(--ds-panel);
  color: var(--ds-ink-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ds-editor-pill:hover {
  border-color: var(--ds-ink-muted);
  color: var(--ds-ink);
}
.ds-editor-pill.is-readonly { cursor: default; }
.ds-editor-pill.is-readonly:hover {
  border-color: var(--ds-border);
  color: var(--ds-ink-muted);
}
.ds-editor-pill .material-symbols-outlined { font-size: 14px; }
.ds-editor-pill-chevron {
  font-size: 12px !important;
  color: var(--ds-ink-muted);
}

/* Primary pill — share */
.ds-editor-pill-primary {
  border-color: var(--ds-green);
  background: var(--ds-green-bg);
  color: var(--ds-green);
}
.ds-editor-pill-primary:hover {
  border-color: var(--ds-green);
  color: var(--ds-green);
  background: var(--ds-green-bg);
  filter: brightness(0.97);
}

/* Tag pill (read-only) */
.ds-editor-pill-tag {
  padding: 3px 8px;
  font-size: 11px;
}

/* Access pill — visibility icons hidden via [hidden] attr, ds.css has global rule */

/* Category dropdown */
.ds-editor-cat-wrap { position: relative; display: inline-block; }
.ds-editor-cat-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  z-index: 25;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.ds-editor-cat-opt {
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--ds-ink);
  cursor: pointer;
  transition: background 0.1s ease;
}
.ds-editor-cat-opt:hover { background: var(--ds-bg); }
.ds-editor-cat-opt.is-clear {
  color: var(--ds-ink-muted);
  font-style: italic;
  border-bottom: 1px solid var(--ds-border);
}

/* Tags container — empty by default, JS populates */
.ds-editor-tags-container {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* /Editor title + pills v2 ──────────────────────────────────────── */

/* Editor access panel v2 (Phase A.3.3) ───────────────────────────── */
.ds-editor-access-panel {
  margin-bottom: 12px;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  padding: 14px 16px;
  position: relative;
  z-index: 20;
}
.ds-editor-access-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ds-editor-access-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-editor-access-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-ink-muted);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.ds-editor-access-close:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
}
.ds-editor-access-close .material-symbols-outlined { font-size: 18px; }

.ds-editor-access-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-editor-access-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--ds-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  margin: 0;
}
.ds-editor-access-option:hover {
  border-color: var(--ds-ink-muted);
  background: var(--ds-bg);
}
.ds-editor-access-option:has(input:checked) {
  border-color: var(--ds-green);
  background: var(--ds-green-bg);
}
.ds-editor-access-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--ds-green);
  flex-shrink: 0;
}
.ds-editor-access-option-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}
.ds-editor-access-option-body .material-symbols-outlined {
  font-size: 18px;
  margin-top: 1px;
  color: var(--ds-ink-muted);
  flex-shrink: 0;
}
.ds-editor-access-option:has(input:checked) .ds-editor-access-option-body .material-symbols-outlined {
  color: var(--ds-green);
}
.ds-editor-access-option-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-editor-access-option-desc {
  font-size: 11.5px;
  color: var(--ds-ink-muted);
  margin-top: 2px;
}

/* Share-people sub-section (revealed when "Restricted" selected) */
.ds-editor-share-section {
  border-top: 1px solid var(--ds-border);
  padding-top: 12px;
  margin-top: 10px;
}
.ds-editor-share-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 8px;
}
.ds-editor-share-search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.ds-editor-share-search {
  width: 100%;
  padding-left: 32px;
}
.ds-editor-share-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--ds-ink-muted);
  pointer-events: none;
}
.ds-editor-share-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
}
.ds-editor-share-list {
  font-size: 12px;
  color: var(--ds-ink-muted);
}
.ds-editor-share-empty {
  color: var(--ds-ink-muted);
  font-size: 11.5px;
  font-style: italic;
}
/* /Editor access panel v2 ────────────────────────────────────────── */

/* Editor lock + link + table-menu v2 (Phase A.3.4) ───────────────── */

/* Lock banner — shown when another user holds the doc lock */
.ds-editor-lock-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--ds-rag-amber-bg);
  border: 1px solid var(--ds-rag-amber-fg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ds-rag-amber-fg);
}
.ds-editor-lock-banner .material-symbols-outlined {
  font-size: 18px;
  color: var(--ds-rag-amber-fg);
  flex-shrink: 0;
}
.ds-editor-lock-banner-text {
  flex: 1;
  min-width: 0;
}
.ds-editor-lock-banner-btn {
  margin-left: auto;
  padding: 5px 14px;
  border: 1px solid var(--ds-rag-amber-fg);
  border-radius: 6px;
  background: var(--ds-rag-amber-bg);
  color: var(--ds-rag-amber-fg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s ease;
}
.ds-editor-lock-banner-btn:hover {
  filter: brightness(0.95);
}

/* Link popup — floats near an inline link selection */
.ds-editor-link-popup {
  /* Preserves .link-popup positioning logic from existing JS (top/left set inline by code) */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
}
.ds-editor-link-input {
  flex: 1;
  min-width: 200px;
  font-size: 12.5px;
  padding: 5px 10px;
}
.ds-editor-link-close {
  background: none;
  border: none;
  color: var(--ds-ink-muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.ds-editor-link-close:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
}
.ds-editor-link-close .material-symbols-outlined { font-size: 16px; }

/* Table context menu */
.ds-editor-table-menu {
  /* Preserves .table-menu positioning logic — appears next to table on context */
  padding: 4px 0;
}
.ds-editor-table-menu-item {
  display: block;
  width: 100%;
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--ds-ink);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ds-editor-table-menu-item:hover {
  background: var(--ds-bg);
}
.ds-editor-table-menu-item.is-danger { color: var(--ds-rag-red-fg); }
.ds-editor-table-menu-sep {
  border-top: 1px solid var(--ds-border);
  margin: 4px 0;
}
/* /Editor lock + link + table-menu v2 ────────────────────────────── */

/* Editor related + parent + version-preview + version-panel v2 (Phase A.3.5) */

/* Related-documents card */
.ds-editor-related {
  max-width: 860px;
  margin: 16px auto 0;
  background: var(--ds-panel);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  overflow: hidden;
}
.ds-editor-related-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink-muted);
  border-bottom: 1px solid var(--ds-border);
}
.ds-editor-related-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ds-green);
  text-decoration: none;
}
.ds-editor-related-add:hover { text-decoration: underline; }
.ds-editor-related-add .material-symbols-outlined { font-size: 14px; }
.ds-editor-related-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.ds-editor-related-row:last-child { border-bottom: none; }
.ds-editor-related-row:hover { background: var(--ds-bg); text-decoration: none; }
.ds-editor-related-icon {
  font-size: 16px;
  color: var(--ds-green);
  flex-shrink: 0;
}
.ds-editor-related-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink);
}
.ds-editor-related-chevron {
  font-size: 14px;
  color: var(--ds-border);
}
.ds-editor-related-empty {
  max-width: 860px;
  margin: 12px auto 0;
}

/* Parent-section breadcrumb link */
.ds-editor-parent-link {
  max-width: 860px;
  margin: 8px auto 16px;
  padding: 10px 14px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ds-ink-muted);
}
.ds-editor-parent-link .material-symbols-outlined { font-size: 14px; }
.ds-editor-parent-bc {
  color: var(--ds-green);
  font-weight: 600;
  text-decoration: none;
}
.ds-editor-parent-bc:hover { text-decoration: underline; }
.ds-editor-parent-sep { color: var(--ds-border); }

/* Version-preview modal (large doc-preview dialog) */
.ds-editor-vpreview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100000;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
}
.ds-editor-vpreview-dialog {
  width: 100%;
  max-width: 800px;
  background: var(--ds-panel);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-editor-vpreview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg);
}
.ds-editor-vpreview-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-editor-vpreview-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ds-ink-muted);
}
.ds-editor-vpreview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ds-editor-vpreview-close {
  background: none;
  border: none;
  color: var(--ds-ink-muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.ds-editor-vpreview-close:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
}
.ds-editor-vpreview-close .material-symbols-outlined { font-size: 18px; }
.ds-editor-vpreview-content {
  padding: 24px 32px;
  min-height: 300px;
  max-height: 70vh;
  overflow: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink);
}

/* Version-history side panel (smaller side drawer) */
.ds-editor-vpanel {
  /* Preserves .version-panel positioning that the existing JS expects */
}
.ds-editor-vpanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-editor-vpanel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-editor-vpanel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-ink-muted);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.ds-editor-vpanel-close:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
}
.ds-editor-vpanel-close .material-symbols-outlined { font-size: 18px; }
.ds-editor-vpanel-list { padding: 6px 0; }
.ds-editor-vpanel-loading {
  padding: 20px;
  text-align: center;
  color: var(--ds-ink-muted);
  font-size: 12.5px;
}
.ds-editor-vpanel-audit {
  border-top: 1px solid var(--ds-border);
  padding: 12px 14px;
}
.ds-editor-vpanel-audit-label {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-ink-muted);
}
.ds-editor-vpanel-audit-list {
  font-size: 12px;
  color: var(--ds-ink-muted);
}
/* /Editor related + parent + version-preview + version-panel v2 ───── */

/* Editor float-panel + page-comments v2 (Phase A.3.6) ────────────── */

/* Comment actions row — used in float panel and page comments */
.ds-editor-comment-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}

/* Page-level comments section */
.ds-editor-page-comments {
  max-width: 860px;
  margin: 16px auto 32px;
}
.ds-editor-page-comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ds-editor-page-comments-count {
  font-size: 11px;
  color: var(--ds-ink-muted);
  font-weight: 500;
}
.ds-editor-page-comments-input-wrap {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-editor-page-comments-cancel {
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--ds-ink-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
}
.ds-editor-page-comments-cancel:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
}
/* /Editor float-panel + page-comments v2 ─────────────────────────── */

/* Error pages (403/404/500) — v2 migration Session 8 */
.ds-error-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 24px;
}
.ds-error-content {
  text-align: center;
  max-width: 480px;
}
.ds-error-code {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ds-border-strong, #CFD4C9);
  margin-bottom: 1rem;
  font-feature-settings: "tnum";
}
.ds-error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ds-ink, #0E1410);
  margin-bottom: 0.75rem;
}
.ds-error-message {
  color: var(--ds-ink-muted, #5C6863);
  margin-bottom: 2rem;
  line-height: 1.5;
}
.ds-error-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────────
   Delivery Board v2 (Session 8 — migrated from delivery/board.html
   inline <style>). Original class names preserved (.db-*, .stat-card,
   .toolbar, .list-view, .kanban-board, etc.) since the page's own JS
   module references them by selector. To be renamed to ds-* in a later
   pass when the JS module is refactored.
   ────────────────────────────────────────────────────────────────────── */
  .db-header { background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 100%); color: #fff; padding: 1.5rem 2rem; border-radius: 12px; margin-bottom: 1.5rem; }
  .db-header h2 { margin: 0 0 0.25rem 0; font-size: 1.4rem; }
  .db-header p { margin: 0; opacity: 0.8; font-size: 0.9rem; }
  .stat-cards { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
  .stat-card { background: var(--ds-panel); border-radius: 10px; padding: 1rem 1.5rem; flex: 1; min-width: 140px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border-left: 4px solid var(--ds-border); }
  .stat-card.blockers { border-left-color: #dc3545; }
  .stat-card.overdue { border-left-color: #fd7e14; }
  .stat-card.done { border-left-color: #28a745; }
  .stat-card.total { border-left-color: #2d6a9f; }
  .stat-card .num { font-size: 1.8rem; font-weight: 700; line-height: 1; }
  .stat-card .lbl { font-size: 0.78rem; color: var(--ds-ink-muted); margin-top: 0.2rem; }
  .toolbar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
  .toolbar select, .toolbar input { border-radius: 6px; border: 1px solid #ced4da; padding: 0.4rem 0.75rem; font-size: 0.875rem; }
  .view-toggle { display: flex; border: 1px solid #ced4da; border-radius: 6px; overflow: hidden; margin-left: auto; }
  .view-toggle button { border: none; background: var(--ds-panel); padding: 0.4rem 0.9rem; font-size: 0.875rem; cursor: pointer; }
  .view-toggle button.active { background: var(--ds-green, #1F5A3E); color: #fff; }
  .btn-new { background: var(--ds-green, #1F5A3E); color: #fff; border: none; border-radius: 6px; padding: 0.4rem 1rem; font-size: 0.875rem; cursor: pointer; white-space: nowrap; }
  .btn-new:hover { background: var(--ds-green-dk, #173E2C); }
  .list-view { background: var(--ds-panel); border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; }
  .list-view table { width: 100%; border-collapse: collapse; }
  .list-view th { background: var(--ds-hover); padding: 0.75rem 1rem; text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ds-ink-muted); border-bottom: 1px solid var(--ds-border); white-space: nowrap; }
  .list-view td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--ds-border); font-size: 0.875rem; vertical-align: middle; }
  .list-view tr:last-child td { border-bottom: none; }
  .list-view tr:hover td { background: var(--ds-hover); cursor: pointer; }
  .list-view tr.overdue td { background: var(--ds-rag-red-bg); }
  .type-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  .type-work_item { background: #e3f0fb; color: #1a5f9e; }
  .type-defect { background: #fff3cd; color: #856404; }
  .type-blocker { background: #fde8e8; color: #c62828; }
  .pri-badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }
  .pri-high { background: #fd7e14; color: #fff; }
  .pri-medium { background: #ffc107; color: #333; }
  .pri-low { background: var(--ds-border); color: var(--ds-ink-muted); }
  .status-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
  .status-todo { background: var(--ds-border); color: var(--ds-ink-muted); }
  .status-in_progress { background: #cce5ff; color: #004085; }
  .status-in_review { background: #e2d9f3; color: #4a1d7e; }
  .status-delivered { background: #d4edda; color: #155724; }
  .status-blocked { background: #fde8e8; color: #842029; }
  .stale-badge { background: var(--ds-rag-amber-bg); color: var(--ds-rag-amber-fg); font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 10px; margin-left: 0.4rem; }
  .assignee-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
  .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--ds-green, #1F5A3E); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
  .due-overdue { color: #dc3545; font-weight: 600; }
  .empty-state { text-align: center; padding: 3rem; color: var(--ds-ink-muted); }
  .empty-state i { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
  .kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; }
  .kanban-col { background: var(--ds-panel); border: 1px solid var(--ds-border, #E0E5DC); border-radius: 12px; padding: 14px; min-height: 200px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .kanban-col-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ds-ink, #0E1410); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ds-border, #E0E5DC); display: flex; align-items: center; justify-content: space-between; }
  .kanban-col-header .col-count { background: var(--ds-bg, #F2F5F0); color: var(--ds-ink-muted, #5C6863); border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
  .kanban-card { background: var(--ds-panel); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.6rem; box-shadow: 0 1px 3px rgba(0,0,0,0.07); cursor: pointer; border-left: 3px solid transparent; transition: box-shadow 0.15s; }
  .kanban-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
  .kanban-card-ghost { opacity: 0.4; background: var(--ds-green-bg, #E6EEE9); border: 2px dashed var(--ds-green, #1F5A3E); }
  .kanban-card-dragging { box-shadow: 0 8px 24px rgba(0,0,0,0.18); transform: rotate(1deg); cursor: grabbing; }
  .kanban-col.sortable-over { background: #eef4fb; }
  .kanban-card.blocker-card { border-left-color: #dc3545; }
  .kanban-card .card-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: #212529; }
  .kanban-card .card-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
  .modal-backdrop-custom { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1060; align-items: center; justify-content: center; }
  .modal-backdrop-custom.open { display: flex; }
  .modal-box { background: var(--ds-panel); border-radius: 12px; padding: 1.75rem; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
  .modal-box h5 { margin: 0 0 1.25rem 0; font-size: 1rem; font-weight: 700; }
  .form-group { margin-bottom: 1rem; }
  .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: #555; margin-bottom: 0.3rem; }
  .form-group input, .form-group select, .form-group textarea { width: 100%; border: 1px solid #ced4da; border-radius: 6px; padding: 0.45rem 0.75rem; font-size: 0.875rem; box-sizing: border-box; }
  .form-group textarea { resize: vertical; min-height: 80px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .modal-footer { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; }
  .modal-footer button { border-radius: 6px; padding: 0.45rem 1.1rem; font-size: 0.875rem; cursor: pointer; border: 1px solid; }
  .btn-cancel { background: #f0f0f0; color: #444; border-color: #ddd; }
  .btn-submit { background: var(--ds-green, #1F5A3E); color: #fff; border-color: var(--ds-green, #1F5A3E); }
  .btn-submit:hover { background: var(--ds-green-dk, #173E2C); }

/* ──────────────────────────────────────────────────────────────────────
   Delivery Home v2 (Session 8 — migrated from delivery/home.html).
   Original class names preserved (.db-home-header, .board-card, etc.)
   since the page has no JS module touching them.
   ────────────────────────────────────────────────────────────────────── */
  .db-home-header { background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 100%); color: #fff; padding: 1.75rem 2rem; border-radius: 12px; margin-bottom: 1.75rem; }
  .db-home-header h2 { margin: 0 0 0.25rem 0; font-size: 1.5rem; font-weight: 700; }
  .db-home-header p { margin: 0; opacity: 0.8; font-size: 0.9rem; }
  .boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
  .board-card { background: var(--ds-panel); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border: 1px solid var(--ds-border); overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; }
  .board-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
  .board-card-header { padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid #f0f0f0; }
  .board-card-header h5 { margin: 0 0 0.25rem 0; font-size: 0.95rem; font-weight: 700; color: var(--ds-ink, #0E1410); }
  .board-card-header .meta { font-size: 0.78rem; color: var(--ds-ink-muted); display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
  .status-pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; }
  .board-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.85rem 1.25rem; gap: 0.5rem; border-bottom: 1px solid #f0f0f0; }
  .stat { text-align: center; }
  .stat .num { font-size: 1.4rem; font-weight: 700; line-height: 1; color: #212529; }
  .stat .lbl { font-size: 0.65rem; color: var(--ds-ink-muted); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .stat.red .num { color: #dc3545; }
  .stat.orange .num { color: #fd7e14; }
  .stat.green .num { color: #28a745; }
  .board-card-footer { padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
  .btn-open { background: var(--ds-green, #1F5A3E); color: #fff; border: none; border-radius: 6px; padding: 0.4rem 1rem; font-size: 0.82rem; cursor: pointer; text-decoration: none; display: inline-block; }
  .btn-open:hover { background: var(--ds-green-dk, #173E2C); color: #fff; text-decoration: none; }
  .blocker-pill { background: #fde8e8; color: #c62828; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 10px; }
  .empty-state { text-align: center; padding: 4rem 2rem; color: var(--ds-ink-muted); background: var(--ds-panel); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .empty-state .icon { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* Page header right-aligned meta label (e.g. "1 project") — Session 8 */
.ds-page-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink-muted, #5C6863);
  white-space: nowrap;
  align-self: center;
}

/* Delivery Board home — v2 row-list pattern (Session 8 enterprise polish) */
.ds-delivery-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ds-delivery-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  background: var(--ds-panel, #FFFFFF);
  border: 1px solid var(--ds-border, #E0E5DC);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  cursor: pointer;
}
.ds-delivery-row:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-hover);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-decoration: none;
}
.ds-delivery-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.ds-delivery-row-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-ink, #0E1410);
  margin-bottom: 4px;
  line-height: 1.3;
}
.ds-delivery-row-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--ds-ink-muted, #5C6863);
}
.ds-delivery-row-meta .ds-pill {
  font-size: 11px;
}
.ds-delivery-row-stats {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-shrink: 0;
}
.ds-delivery-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.ds-delivery-stat-num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--ds-ink, #0E1410);
  font-feature-settings: "tnum";
}
.ds-delivery-stat-lbl {
  font-size: 10px;
  font-weight: 500;
  color: var(--ds-ink-muted, #5C6863);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.ds-delivery-stat.is-warn .ds-delivery-stat-num   { color: var(--ds-rag-amber-fg, #A35200); }
.ds-delivery-stat.is-danger .ds-delivery-stat-num { color: var(--ds-rag-red-fg, #B11C1C); }
.ds-delivery-stat.is-success .ds-delivery-stat-num{ color: var(--ds-green, #2E5A3C); }
.ds-delivery-row-chevron {
  color: var(--ds-ink-faint, #94A09A);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ds-delivery-row:hover .ds-delivery-row-chevron {
  color: var(--ds-green, #2E5A3C);
}

/* Status pills (lightweight — used in delivery row meta and elsewhere) */
.ds-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--ds-bg, #F2F5F0);
  color: var(--ds-ink-muted, #5C6863);
  white-space: nowrap;
}
.ds-pill-status-in-progress { background:#E1ECF8; color:#1E4A82; }
.ds-pill-status-completed   { background:#E1F0E3; color:#2A5C36; }
.ds-pill-status-on-hold     { background:#FBE8C2; color:#8A5B0F; }
.ds-pill-status-approved    { background:#E7E0F4; color:#4C2D7F; }
.ds-pill-status-draft       { background:#E5E7EA; color:#4A5560; }
.ds-pill-status-cancelled   { background:#E5E7EA; color:#4A5560; }

/* Column header strip for delivery list (Session 8 enterprise polish) */
.ds-delivery-colhead {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 20px;
  margin-top: 20px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ds-ink-muted, #5C6863);
}
.ds-delivery-colhead-main {
  flex: 1 1 auto;
}
.ds-delivery-colhead-stats {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-shrink: 0;
}
.ds-delivery-colhead-cell {
  min-width: 44px;
  text-align: center;
}
.ds-delivery-colhead-chevron {
  width: 24px;
  flex-shrink: 0;
}

/* When columns are labeled in the header, the per-row labels become redundant */
.ds-delivery-row-stats .ds-delivery-stat-lbl { display: none; }
.ds-delivery-row-stats .ds-delivery-stat-num { font-size: 18px; }

/* KPI semantic modifiers (used in Delivery Board KPIs and elsewhere) */
.ds-kpi.is-danger  .ds-kpi-value { color: var(--ds-rag-red-fg, #B11C1C); }
.ds-kpi.is-warn    .ds-kpi-value { color: var(--ds-rag-amber-fg, #A35200); }
.ds-kpi.is-success .ds-kpi-value { color: var(--ds-green, #2E5A3C); }

/* Specific spacing tweak for the Delivery KPI strip */
.ds-delivery-kpis {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ──────────────────────────────────────────────────────────────────────
   Delivery Item Detail v2 (Session 8 — migrated from delivery/item_detail.html
   inline <style>). Original class names preserved (.wi-*, .card, .badge-*,
   .comment-item, etc.) since the page's own JS module references them by
   selector. Will be enterprise-polished in slice 4.
   ────────────────────────────────────────────────────────────────────── */
  .wi-header { background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 100%); color: #fff; padding: 1.5rem 2rem; border-radius: 12px; margin-bottom: 1.5rem; }
  .wi-header h2 { margin: 0 0 0.4rem 0; font-size: 1.3rem; }
  .wi-header .meta { opacity: 0.8; font-size: 0.85rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
  .wi-body { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
  @media(max-width:900px){ .wi-body { grid-template-columns: 1fr; } }
  .card { background: var(--ds-panel); border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
  .card h5 { margin: 0 0 1rem 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-ink-muted); }
  .badge-type { display:inline-block; padding: 0.25rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
  .badge-work_item { background:#E1ECF8; color:#1E4A82; }
  .badge-defect     { background:#fff3cd; color:#856404; }
  .badge-blocker    { background:#fde8e8; color:#842029; }
  .badge-status { display:inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
  .badge-todo       { background:#f0f0f0; color:#444; }
  .badge-in_progress{ background:#cfe2ff; color:#084298; }
  .badge-in_review  { background:#fff3cd; color:#856404; }
  .badge-delivered  { background:#d1e7dd; color:#0a3622; }
  .badge-blocked    { background:#fde8e8; color:#842029; }
  .badge-priority { display:inline-block; padding: 0.2rem 0.55rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
  .badge-high   { background:#fde8e8; color:#842029; }
  .badge-medium { background:#fff3cd; color:#856404; }
  .badge-low    { background:#d1e7dd; color:#0a3622; }
  .meta-row { display: flex; flex-direction: column; gap: 0.6rem; }
  .meta-item { display: flex; justify-content: space-between; align-items: flex-start; font-size: 0.875rem; padding: 0.15rem 0; }
  
  .meta-label { color: var(--ds-ink-muted); font-size: 0.8rem; flex-shrink: 0; margin-right: 0.5rem; }
  .meta-val { text-align: right; font-weight: 500; color: var(--ds-ink); }
  .req-link { background: #f0f4ff; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; }
  .req-link .ref { font-size: 0.75rem; color: var(--ds-ink-muted); margin-bottom: 0.2rem; }
  .req-link .rtitle { font-weight: 600; color: var(--ds-ink, #0E1410); }
  .req-link .rstatus { font-size: 0.75rem; color: var(--ds-ink-muted); margin-top: 0.2rem; }
  .theme-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; }
  .comment-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ds-border); }
  .comment-item:last-child { border-bottom: none; }
  .comment-author { font-weight: 600; font-size: 0.85rem; color: var(--ds-ink); }
  .comment-time { font-size: 0.75rem; color: var(--ds-ink-faint); margin-left: 0.5rem; }
  .comment-text { font-size: 0.875rem; margin-top: 0.3rem; color: var(--ds-ink); line-height: 1.5; white-space: pre-wrap; }
  .comment-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ds-green-dk); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
  .comment-body { flex: 1; min-width: 0; }
  .comment-head { display: flex; align-items: baseline; }
  .history-item { display: flex; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.82rem; }
  .history-item:last-child { border-bottom: none; }
  .history-field { font-weight: 600; color: var(--ds-ink, #0E1410); min-width: 80px; }
  .history-arrow { color: #aaa; }
  .history-time { color: #aaa; margin-left: auto; white-space: nowrap; }
  .btn-edit { background: var(--ds-green, #1F5A3E); color: #fff; border: none; border-radius: 6px; padding: 0.45rem 1.1rem; font-size: 0.875rem; cursor: pointer; }
  .btn-edit:hover { background: var(--ds-green-dk, #173E2C); }
  .btn-back { background: #f0f0f0; color: #444; border: none; border-radius: 6px; padding: 0.45rem 1rem; font-size: 0.875rem; cursor: pointer; text-decoration: none; display: inline-block; }
  .btn-back:hover { background: #e0e0e0; color: #222; }
  .desc-block { font-size: 0.9rem; color: var(--ds-ink); line-height: 1.6; white-space: pre-wrap; min-height: 2rem; }
  .empty-text { color: #aaa; font-style: italic; font-size: 0.875rem; }
  .tag-pill { display:inline-block; background:var(--ds-border); border-radius:20px; padding:0.2rem 0.6rem; font-size:0.75rem; margin:0.1rem; }
  /* Edit modal */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1000; align-items:center; justify-content:center; }
  .modal-overlay.open { display:flex; }
  .modal-box { background:var(--ds-panel); border-radius:12px; width:100%; max-width:600px; max-height:90vh; overflow-y:auto; padding:2rem; box-shadow:0 8px 32px rgba(0,0,0,0.18); }
  .modal-box h4 { margin:0 0 1.25rem 0; font-size:1.1rem; }
  .form-group { margin-bottom:1rem; }
  .form-group label { display:block; font-size:0.82rem; font-weight:600; color:#555; margin-bottom:0.3rem; }
  .form-group input, .form-group select, .form-group textarea { width:100%; border:1px solid #ced4da; border-radius:6px; padding:0.45rem 0.75rem; font-size:0.875rem; box-sizing:border-box; }
  .form-group textarea { resize:vertical; min-height:80px; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .modal-actions { display:flex; justify-content:flex-end; gap:0.75rem; margin-top:1.25rem; }
  .btn-cancel { background:#f0f0f0; color:#444; border:none; border-radius:6px; padding:0.45rem 1rem; cursor:pointer; font-size:0.875rem; }
  .btn-save { background: var(--ds-green, #1F5A3E); color:#fff; border:none; border-radius:6px; padding:0.45rem 1.1rem; cursor:pointer; font-size:0.875rem; }
  .alert-inline { padding:0.6rem 1rem; border-radius:6px; font-size:0.85rem; margin-bottom:1rem; display:none; }
  .alert-success { background:#d1e7dd; color:#0a3622; }
  .alert-error   { background:#fde8e8; color:#842029; }

/* Page header layout helpers — pills row + actions row (Session 8) */
.ds-page-header-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}
.ds-page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Item-type pills */
.ds-pill-type-work_item { background:#E1ECF8; color:#1E4A82; }
.ds-pill-type-defect    { background:#FBE8C2; color:#8A5B0F; }
.ds-pill-type-blocker   { background:#FCE2E2; color:#8B1F1F; }

/* Status pills (extends the .ds-pill-status-* set already in CSS) */
.ds-pill-status-todo        { background:#E5E7EA; color:#4A5560; }
.ds-pill-status-in-progress { background:#CFE2FF; color:#0E3F82; }
.ds-pill-status-in-review   { background:#FBE8C2; color:#8A5B0F; }
.ds-pill-status-delivered   { background:#D6EEDA; color:#1F5A30; }
.ds-pill-status-blocked     { background:#FCE2E2; color:#8B1F1F; }

/* Priority pills */
.ds-pill-priority-high   { background:#FCE2E2; color:#8B1F1F; }
.ds-pill-priority-medium { background:#FBE8C2; color:#8A5B0F; }
.ds-pill-priority-low    { background:#D6EEDA; color:#1F5A30; }

/* Inline page banner variants (warning/info) — Session 8 v2 polish. The base
   .ds-banner rule that used to sit here was merged into the canonical block above
   to remove a duplicate-selector footgun. */
.ds-banner-danger {
  background: #FCE2E2;
  color: #8B1F1F;
  border-color: #F0BABA;
}
.ds-banner-warning {
  background: #FBE8C2;
  color: #8A5B0F;
  border-color: #F0D699;
}
.ds-banner-info {
  background: #E1ECF8;
  color: #1E4A82;
  border-color: #BCD0EA;
}

/* ── Entitlement override panel (Super Admin tenant-detail) ──────────────────
   Reusable rows for the Entitlements tab. Inherited rows are quiet; overridden
   rows get the amber left-rail + accent badge (the ds-banner-warning family);
   cascade-disabled rows (parent module off) are dimmed. */
.ds-ent-group { margin-bottom: 16px; }
.ds-ent-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
}
.ds-ent-group > summary::-webkit-details-marker { display: none; }
.ds-ent-group > summary::marker { content: ''; }
.ds-ent-group-meta { font-size: 11px; color: var(--ds-ink-muted); font-weight: 400; }

.ds-ent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--ds-panel); border: 1px solid var(--ds-border); border-radius: 8px;
}
.ds-ent-row:last-child { margin-bottom: 0; }
.ds-ent-row-name { flex: 1 1 auto; min-width: 0; }
.ds-ent-row-label { font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.ds-ent-row-note { font-size: 11px; color: var(--ds-ink-muted); margin-top: 2px; }
.ds-ent-row-state { flex: 0 0 auto; }
.ds-ent-row-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* Overridden: amber left-rail (the #F0D699 warning border) + accent badge. */
.ds-ent-row.is-overridden { border-left: 3px solid #F0D699; }
.ds-ent-badge-override { background: #FBE8C2; color: #8A5B0F; border: 1px solid #F0D699; }

/* Cascade-disabled (parent Projects module off): dim the row; controls are disabled. */
.ds-ent-row.is-cascade-off { opacity: .6; }
.ds-ent-lock { font-size: 18px; color: var(--ds-ink-muted); }

/* ── Plan-editor entitlement rows (checkbox interaction — plan DEFAULTS, not overrides) ──
   Reuses .ds-ent-group for the collapsible wrapper; the rows are checkboxes, so they get
   their own lighter treatment (no toggle/reset controls like the per-tenant panel). */
.ds-plan-ent-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--ds-panel); border: 1px solid var(--ds-border); border-radius: 7px;
  cursor: pointer; font-size: 13px;
}
.ds-plan-ent-row:last-child { margin-bottom: 0; }
.ds-plan-ent-row input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.ds-plan-ent-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ds-plan-ent-label { font-weight: 500; color: var(--ds-ink); }
.ds-plan-ent-sub { font-size: 10px; color: var(--ds-ink-muted); }
.ds-plan-ent-requires { font-size: 10px; font-weight: 500; color: var(--ds-warn-fg); }
/* Integrity soft-lock badge converged on the app-wide pill (.ds-pill .ds-pill-warn, shield +
   "Core") shared with the per-tenant panel (Slice 4.3) — the editor-only .ds-plan-ent-tag* rules
   it replaced are retired. The amber row background stays. */
.ds-plan-ent-row.is-integrity { background: var(--ds-warn-bg); }
/* Locked Core row — not a checkbox; lock glyph + muted bg. */
.ds-plan-ent-row.is-locked { cursor: default; background: var(--ds-bg, #F4F6F5); }
.ds-plan-ent-lock { font-size: 16px; color: var(--ds-ink-muted); flex: 0 0 auto; }
/* Sub-feature rows nest indented under Projects; greyed + disabled when Projects is off. */
.ds-plan-ent-row.is-indent { margin-left: 24px; }
.ds-plan-ent-row.is-cascade-off { opacity: .5; cursor: default; }
.ds-plan-ent-subnote { font-size: 11px; color: var(--ds-ink-muted); margin: 2px 0 6px 24px; }

/* Kanban card — slightly tighter badges (Session 8 polish) */
.kanban-card .badge-type,
.kanban-card .badge-status,
.kanban-card .badge-priority {
  font-size: 10px !important;
  padding: 2px 6px !important;
  letter-spacing: 0.2px;
}
.kanban-card .card-title {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ds-ink, #0E1410);
  margin-bottom: 6px;
}

/* Global no-underline override (Session 9) — tool chrome links never underline.
   Document-body links (.doc-editor a) intentionally excluded. */
.ds-link:hover,
.ds-link-strong:hover,
.ds-attention-name:hover,
.ds-pd-backlink .ds-link-subtle:hover,
.ds-rail-notif-footer a:hover,
.ds-editor-bc-link:hover,
.ds-editor-related-add:hover,
.ds-editor-parent-bc:hover,
.ds-readiness-task-label a:hover,
.ds-link-subtle,
.ds-link-subtle:hover {
  text-decoration: none !important;
}

/* Superadmin dashboard density preview (Session 9) — scoped, no shared-token impact.
   Remove or promote to base ds-kpi if approved system-wide. */
.sa-dense .ds-kpi {
  min-height: 64px;
  padding: 10px 16px;
  gap: 1px;
}
.sa-dense .ds-kpi-value {
  font-size: 38px;
  line-height: 1.0;
  margin-top: 0;
}
.sa-dense .ds-kpi-label {
  font-size: 10px;
  letter-spacing: 0.7px;
}
.sa-dense .ds-kpi-sub {
  font-size: 11px;
  color: var(--ds-ink-muted);
  margin-top: 1px;
}
.sa-dense .ds-table thead th {
  color: var(--ds-ink);
  font-weight: 700;
  font-size: 11px;
}
.sa-dense .ds-table tbody td {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* superadmin_tenant_detail v2 (Session 9 migration) — tab + plan-card chrome */
.sa-tab-btn { padding:10px 18px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--ds-ink-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s; }
.sa-tab-btn.active { color:var(--ds-green); border-bottom-color:var(--ds-green); }
.sa-tab-strip { display:flex; gap:0; border-bottom:2px solid var(--ds-border); margin-bottom:20px; }
.sa-plan-card { display:flex; flex-direction:column; padding:14px; border:2px solid var(--ds-border); border-radius:10px; cursor:pointer; background:var(--ds-panel); transition:all .15s; }
.sa-plan-card.is-selected { border-color:var(--ds-green); background:var(--ds-bg,#F4F6F5); }
.sa-plan-card:hover { border-color:var(--ds-green); }

/* ── Sticky tenant header (superadmin slice 2a). Sits INSIDE .ds-main's scroll region, so top:0
   pins it below the body-level impersonation bar (a flex sibling above .ds-main) — no overlap;
   the impersonation banner stays visible during an active impersonation. ── */
/* Sticky bar sharing the cards' horizontal inset. It is a normal in-flow child of .ds-main, so
   .ds-main's --ds-main-pad-x padding insets its box to card width -- left edge lines up with the
   cards, actions get the same right inset. Own horizontal padding is 0 (content sits at the box edge
   == the card edge). No negative margins (that would full-bleed it) and no hardcoded inset (it
   inherits .ds-main's, so it stays aligned if that value changes). box-sizing:border-box guards the
   width against any inherited content-box. */
.sa-tenant-header { position:sticky; top:0; z-index:20; box-sizing:border-box; width:100%; background:var(--ds-panel);
  border-bottom:1px solid var(--ds-border); padding:12px 0 10px; margin-bottom:16px; }
.sa-tenant-header-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sa-tenant-id { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sa-tenant-slug { font-family:monospace; font-size:11px; color:var(--ds-ink-muted); }
.sa-tenant-actions { display:flex; gap:8px; flex-wrap:wrap; }
.sa-tenant-kpis { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--ds-ink-muted); }
.sa-kpi strong { color:var(--ds-ink); font-size:15px; }
.sa-kpi.is-warn strong { color:var(--ds-rag-red-dot,#C0392B); }
.sa-kpi-label { text-transform:uppercase; letter-spacing:.04em; font-size:10px; }

/* ── Danger zone (named pattern; composed only from existing --ds-rag-red-* tokens, no new look) ── */
.sa-danger-zone { border:1px solid var(--ds-rag-red-dot,#C0392B); border-left-width:4px; border-radius:10px; background:var(--ds-rag-red-bg,#FBEAE8); padding:18px 20px; }
.sa-danger-zone-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.sa-danger-zone-head .material-symbols-outlined { color:var(--ds-rag-red-dot,#C0392B); }
.sa-danger-zone-title { font-weight:700; color:var(--ds-rag-red-fg,#7A1C14); }
.sa-danger-zone-sub { font-size:12px; color:var(--ds-ink-muted); }
.sa-danger-zone-actions { display:flex; gap:12px; flex-wrap:wrap; }
.sa-tab-btn-danger.active { color:var(--ds-rag-red-dot,#C0392B); border-bottom-color:var(--ds-rag-red-dot,#C0392B); }

/* profile.html v2 (Session 9 migration) — password strength + eye toggle */
.pw-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; color:var(--ds-ink-muted); padding:0; line-height:1; }
.pw-eye:hover { color:var(--ds-ink); }
.pw-strength-bar { height:5px; border-radius:3px; margin-top:8px; width:100%; background:var(--ds-bg,#EEF1F0); overflow:hidden; }
.pw-strength-fill { height:100%; width:0%; border-radius:3px; transition:width .3s, background .3s; }
.pw-strength-label { font-size:11px; margin-top:3px; font-weight:600; }
.pw-match-ok { font-size:11px; color:#27ae60; margin-top:4px; display:block; font-weight:500; }
.pw-match-err { font-size:11px; color:#c0392b; margin-top:4px; display:block; font-weight:500; }
.pw-rules { list-style:none; padding:8px 10px; margin:8px 0 0 0; background:var(--ds-bg,#F4F6F5); border:1px solid var(--ds-border); border-radius:6px; font-size:11px; line-height:2; }
.pw-rules li { display:flex; align-items:center; gap:6px; color:var(--ds-ink-muted); }
.pw-rules li.pass { color:#27ae60; }
.pw-rules li.fail { color:#c0392b; }
.pw-rule-icon { font-size:12px; width:14px; text-align:center; }

/* profile identity card + rule chips (Session 9) */
.pf-identity { display:flex; align-items:center; gap:16px; }
.pf-avatar { width:56px; height:56px; border-radius:50%; background:var(--ds-green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; flex-shrink:0; letter-spacing:.5px; }
.pf-identity-name { font-size:18px; font-weight:700; color:var(--ds-ink); line-height:1.2; }
.pf-identity-sub { font-size:13px; color:var(--ds-ink-muted); margin-top:3px; }
.pf-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-top:18px; padding-top:16px; border-top:1px solid var(--ds-border); }
.pf-detail { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; border-bottom:1px solid var(--ds-border); }
.pf-detail-label { font-size:12px; color:var(--ds-ink-muted); flex-shrink:0; }
.pf-detail-val { font-weight:500; font-size:13px; color:var(--ds-ink); text-align:right; min-width:0; word-break:break-word; }
/* Profile page — two-column layout + avatar upload + activity (Session 11) */
.pf-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:900px){ .pf-layout { grid-template-columns:1fr; } }
.pf-col { display:flex; flex-direction:column; gap:28px; min-width:0; }
/* Profile page spacing/rhythm — page-scoped so the rest of the app's forms are
   untouched (Session 11). */
.pf-layout .ds-card-body { padding:18px 20px; }
.pf-layout .ds-card-header { padding:14px 20px; }
.pf-col .ds-form-group { margin-bottom:18px; }
.pf-col .ds-form-group:last-of-type { margin-bottom:0; }
.pf-col form .pf-detail-grid { margin-top:18px; padding-top:16px; border-top:1px solid var(--ds-border); }
.pf-col .pf-act-row { padding:11px 0; }
.pf-avatar-lg { width:72px; height:72px; font-size:26px; overflow:hidden; }
.pf-avatar-lg img { width:100%; height:100%; object-fit:cover; display:block; }
.pf-avatar-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.pf-avatar-actions .ds-btn { font-size:12px; padding:5px 11px; }
.pf-avatar-hint { font-size:11.5px; color:var(--ds-ink-muted); margin-top:7px; }
.pf-act-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--ds-border); }
.pf-act-row:last-child { border-bottom:none; }
.pf-act-label { font-size:12px; color:var(--ds-ink-muted); }
.pf-act-val { font-size:13px; font-weight:500; color:var(--ds-ink); text-align:right; }
.pf-act-sub { font-size:11px; color:var(--ds-ink-muted); font-weight:400; display:block; margin-top:2px; }
.pw-rules.pw-chips { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; background:none; border:none; padding:0; }
.pw-rules.pw-chips { gap:6px 10px; }
.pw-rules.pw-chips li { padding:3px 0; font-size:11.5px; line-height:1.5; background:none; border:none; border-radius:0; }
.pw-rules.pw-chips li.pass { background:none; }
.pw-rules.pw-chips li.fail { background:none; }

/* profile password-requirements group (Session 9 refinement) */
.pf-pw-requirements { margin:14px 0 4px; padding:12px 14px; background:var(--ds-bg); border:1px solid var(--ds-border); border-radius:8px; }
.pf-pw-req-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--ds-ink-muted); margin-bottom:9px; }
.pf-pw-requirements .pw-rule-icon { font-size:11px; }
/* consistent vertical rhythm for the change-password form groups */
#pw_new, #pw_current, #pw_confirm { margin:0; }

/* searchable combobox (Session 9) — used on project create owner/sponsor */
.ds-combobox { position:relative; }
.ds-combobox-input { width:100%; }
.ds-combobox-list { position:absolute; z-index:50; top:calc(100% + 2px); left:0; right:0; max-height:240px; overflow-y:auto; background:var(--ds-panel); border:1px solid var(--ds-border); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.08); padding:4px; display:none; }
.ds-combobox-list.is-open { display:block; }
.ds-combobox-option { padding:7px 10px; font-size:13px; border-radius:6px; cursor:pointer; color:var(--ds-ink); }
.ds-combobox-option:hover, .ds-combobox-option.is-active { background:var(--ds-bg,#F4F6F5); }
.ds-combobox-option.is-hidden { display:none; }
.ds-combobox-empty { padding:7px 10px; font-size:12px; color:var(--ds-ink-muted); }

/* Shared USER PICKER (makeUserPicker) -- ONE searchable people-picker for every task user dropdown, built
   on .ds-combobox above. Avatars in the list; flip-up near a container's bottom edge; long names truncate
   (never change row height). A --sm variant for compact contexts (the modal per-subtask row). */
.ds-user-picker .ds-combobox-input { padding:6px 10px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-md,8px); background:var(--ds-bg); color:var(--ds-ink); font-size:13px; }
.ds-user-picker .ds-combobox-list.flip-up { top:auto; bottom:calc(100% + 2px); }
.ds-user-picker .ds-combobox-option { display:flex; align-items:center; gap:8px; }
/* is-hidden MUST beat the display:flex above -- both are (0,2,0) and the flex rule comes later, so a plain
   .ds-combobox-option.is-hidden{display:none} loses the tie and filtered-out options stay visible. This
   scoped rule is (0,3,0) so the hide wins; without it, typing narrows the highlight but hides nothing. */
.ds-user-picker .ds-combobox-option.is-hidden { display:none; }
.ds-user-picker .ds-user-picker-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-user-picker-sm { min-width:140px; }
.ds-user-picker-sm .ds-combobox-input { padding:3px 7px; font-size:12px; }
.ds-user-picker-sm .ds-combobox-list { max-height:200px; }
.ds-user-picker-sm .ds-combobox-option { padding:5px 8px; font-size:12px; }

/* Subtask checklist rows (task detail modal). At rest a row is [glyph][title ...][avatar] on one line,
   identical height for every viewer. The per-row controls (status select + reassign picker) live in an
   ABSOLUTELY positioned box over the empty gap left of the avatar, hidden at rest and revealed on hover /
   keyboard focus -- so nothing reflows and the row height never changes with what the viewer can edit. */
.ds-subtask-row { border-radius:6px; transition:background .08s; }
.ds-subtask-row:hover { background:var(--ds-bg); }
.ds-subtask-row-controls { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .08s; }
.ds-subtask-row:hover .ds-subtask-row-controls,
.ds-subtask-row:focus-within .ds-subtask-row-controls { opacity:1; visibility:visible; pointer-events:auto; }

/* workflow my-requests v2 (Session 9) */
.wmr-filter-btn { padding:8px 18px; border:none; background:none; font-size:13px; font-weight:600; color:var(--ds-ink-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; }
.wmr-filter-btn.is-active { color:var(--ds-green); border-bottom-color:var(--ds-green); }
.wmr-card { display:flex; align-items:stretch; background:var(--ds-panel); border:1px solid var(--ds-border); border-radius:10px; text-decoration:none; transition:border-color .15s, box-shadow .15s; overflow:hidden; }
.wmr-card:hover { border-color:var(--ds-green); box-shadow:0 2px 8px rgba(0,0,0,.07); }
.wmr-card.is-warn { border-color:var(--ds-border); }
.wmr-card.is-overdue { border-color:var(--ds-border); }
.wmr-stat { padding:10px 18px; border-radius:8px; background:var(--ds-panel); border:1px solid var(--ds-border); display:flex; align-items:center; gap:10px; }
.wmr-tabbar { display:flex; gap:0; border-bottom:2px solid var(--ds-border); margin-bottom:20px; }
.wmr-typecard { display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--ds-border); border-radius:10px; text-decoration:none; transition:border-color .15s, background .15s; cursor:pointer; }
.wmr-typecard:hover { border-color:var(--ds-green); background:var(--ds-bg,#F4F6F5); }

/* workflows.html new-workflow modal tabs (Session 9) */
.wf-nwtab { padding:12px 16px; font-size:13px; font-weight:600; border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; color:var(--ds-ink-muted); }
.wf-nwtab.is-active { border-bottom-color:var(--ds-green); color:var(--ds-green); }

/* priority_list board card (Session 9) */
.pl-board-card { background:var(--ds-panel); border:1px solid var(--ds-border); border-radius:10px; padding:20px; cursor:pointer; transition:border-color .15s, box-shadow .15s; position:relative; overflow:hidden; }
.pl-board-card:hover { border-color:var(--ds-green); box-shadow:0 4px 16px rgba(0,0,0,.10); }

/* workflow_requests filter pills (Session 9) */
.wr-pill { padding:5px 14px; border-radius:20px; border:1.5px solid var(--ds-border); background:var(--ds-panel); font-size:12px; font-weight:600; cursor:pointer; color:var(--ds-ink-muted); transition:all .15s; }
.wr-pill.is-active { background:var(--ds-green); border-color:var(--ds-green); color:#fff; }

/* requirement_detail: prevent section cards collapsing as flex children of ds-main (Session 9) */
.rd-wrap { display:block; flex:0 0 auto; }


/* ── Button text-color guard (Session 10) ──────────────────────────────
   style.css sets a{color:var(--link)} incl. a dark-mode override that
   bleeds blue text onto anchor-based buttons (<a class="ds-btn">).
   Force buttons to own their text color in both themes. */
a.ds-btn, a.ds-btn:hover, a.ds-btn:visited { color: var(--ds-ink); }
a.ds-btn-primary, a.ds-btn-primary:hover, a.ds-btn-primary:visited { color: var(--ds-ink); }
a.ds-btn-ghost, a.ds-btn-secondary { color: var(--ds-ink); }
[data-theme="dark"] a.ds-btn-primary { color: var(--ds-ink); }
/* Dark-mode button text MUST be white, beating style.css
   [data-theme="dark"] a:not(.sidebar a):hover { color: var(--link-hover) }.
   Match its specificity with :not() + theme scope, force white all states. */
[data-theme="dark"] a.ds-btn:not(.sidebar a),
[data-theme="dark"] a.ds-btn:not(.sidebar a):hover,
[data-theme="dark"] a.ds-btn:not(.sidebar a):visited,
[data-theme="dark"] a.ds-btn:not(.sidebar a):focus { color: #FFFFFF; }


/* Field-builder type tiles (Session 10) — explicit classes so dark tokens resolve reliably */
.fbm-tile { padding:8px 4px; border-radius:8px; border:2px solid var(--ds-border); background:var(--ds-panel); cursor:pointer; text-align:center; transition:all .15s; }
.fbm-tile-label { font-size:10px; font-weight:600; color:var(--ds-ink-muted); }
.fbm-tile.is-active { border-color:var(--ds-green); background:var(--ds-green-bg); }
.fbm-tile.is-active .fbm-tile-label { color:var(--ds-green); }
[data-theme="dark"] .fbm-tile { background:#1E2023; border-color:#3B3F44; }
[data-theme="dark"] .fbm-tile .fbm-tile-label { color:#A2A8AE; }
[data-theme="dark"] .fbm-tile.is-active { background:#1C2E25; border-color:#5BB98C; }
[data-theme="dark"] .fbm-tile.is-active .fbm-tile-label { color:#5BB98C; }


/* Dashboard notification rail (Session 10) — Linear/GitHub unread pattern: neutral bg + green dot, no row fill */
.ds-rail-notif-row { background: var(--ds-panel); }
.ds-rail-notif-row.is-unread { background: var(--ds-panel); }       /* unread NOT colored — dot carries the signal */
.ds-rail-notif-row:hover { background: var(--ds-bg); }
.ds-rail-notif-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-green); flex-shrink: 0; margin-top: 11px; }
.ds-rail-notif-dot.is-hidden { visibility: hidden; }   /* read rows: keep the space so icon/text align */
.ds-rail-notif-footer a { color: var(--ds-green); }
/* Dark-mode explicit values (some tokens resolve light in this subtree; see Session 10 notes) */
[data-theme="dark"] .ds-rail-notif-row,
[data-theme="dark"] .ds-rail-notif-row.is-unread { background: #1E2023; }
[data-theme="dark"] .ds-rail-notif-row:hover { background: #26282C; }
[data-theme="dark"] .ds-rail-notif-title { color: #E6E8EB; }
[data-theme="dark"] .ds-rail-notif-time { color: #A2A8AE; }
[data-theme="dark"] .ds-rail-notif-dot { background: #5BB98C; }
[data-theme="dark"] .ds-rail-notif-footer a { color: #5BB98C; }

/* ============================================================================
   ACCESSIBILITY BASELINE (D2.5 Tier 1) — placed LAST so it wins over base
   `outline: none` resets on keyboard focus, while component `.class:focus-visible`
   rules (specificity >= 0,2,0, e.g. .ds-tab / .ds-modal-close) still override it
   and keep their tuned offsets.
   ============================================================================ */

/* WCAG 2.4.7 Focus Visible — one baseline indicator on every interactive element that
   does not define its own. :focus-visible (not :focus) so a mouse click shows nothing,
   keyboard/AT navigation shows the ring. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}

/* WCAG 2.4.1 Bypass Blocks — skip link. Off-screen until focused, then the first thing a
   keyboard user lands on; jumps past the nav to <main id="main-content">. */
.ds-skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ds-green);
  color: #FFFFFF;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.ds-skip-link:focus {
  top: 8px;
}

/* Visually-hidden label utility (AODA): present for screen readers, off-screen visually. */
.ds-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Requirement-status flag toggle buttons (Workflow Config). */
.wc-flag-btn {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-bg);
  color: var(--ds-ink-muted);
  cursor: pointer;
}
.wc-flag-btn.is-on {
  background: var(--ds-green, #00843D);
  border-color: var(--ds-green, #00843D);
  color: #fff;
}
.wc-flag-btn:focus-visible { outline: 2px solid var(--ds-focus, #0072CE); outline-offset: 1px; }
.wc-inline-form { display: inline-flex; align-items: center; gap: 4px; }

/* ───────────────────────────────────────────────────────────────────────────
   Shared audit / activity table (audit-display consolidation).
   ONE source for every audit panel: Admin Audit Trail, project Team & access
   history, override "Recent changes", role History. Panels include
   templates/_audit_table.html (+ _audit_table_js.html) and style NOTHING inline.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-audit-table { width:100%; border-collapse:collapse; font-size:14px; margin-top:10px; }
.ds-audit-table th { text-align:left; font-size:11px; font-weight:700; color:var(--ds-ink-muted);
  text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--ds-border); }
.ds-audit-table td { padding:9px 10px; border-bottom:1px solid var(--ds-border); vertical-align:top; color:var(--ds-ink); }
.ds-audit-row { cursor:pointer; }
.ds-audit-row:hover td { background:rgba(31,90,62,0.03); }
.ds-audit-day td { background:var(--ds-bg); color:var(--ds-ink); font-weight:600; padding-top:10px; }
.ds-audit-when { white-space:nowrap; color:var(--ds-ink-muted); font-size:12.5px; }
.ds-audit-chevron { color:var(--ds-ink-muted); float:right; transition:transform .15s; }
.ds-audit-row.is-open .ds-audit-chevron { transform:rotate(90deg); }
.ds-audit-detail td { color:var(--ds-ink-muted); font-size:12px; background:var(--ds-bg); }
.ds-audit-empty td { color:var(--ds-ink-muted); padding:16px 10px; }
.ds-audit-compact .ds-audit-table td { padding:5px 10px; font-size:12.5px; }
.ds-audit-compact .ds-audit-table th { padding:5px 10px; }
/* Comfortable / Compact density toggle used above every audit table */
.ds-au-density { display:inline-flex; background:var(--ds-bg); border:1px solid var(--ds-border); border-radius:6px; padding:2px; }
.ds-au-density-btn { background:transparent; border:none; padding:5px 11px; font-size:11.5px; font-weight:600;
  color:var(--ds-ink-muted); cursor:pointer; border-radius:4px; font-family:inherit; }
.ds-au-density-btn.is-active { background:var(--ds-panel); color:var(--ds-ink); box-shadow:0 1px 2px rgba(0,0,0,.04); }
/* Small audit panel (override "Recent changes", role History): density toggle above the shared table. */
.ds-au-panel-head { display:flex; justify-content:flex-end; margin-bottom:6px; }
/* Team & access history panel header: title left, density toggle right (no inline styles on the page). */
.ds-au-panel-head-left { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ds-au-panel-head-left h2 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin:0; }
.ds-au-panel-head-left .ds-au-density { margin-left:auto; }

/* Team & access -- add-member dialog: per-section starting defaults grid (item 1a per-section enforcement). */
.tm-addsec-note { margin: 2px 0 8px; }
.tm-addsec-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.tm-addsec-grid > select { min-width: 120px; }

/* Per-section summaries (item 1a Slice 2): the shared "Restricted" label for a section figure the viewer
   may not see on a project -- muted + italic so it reads as "no access", never as a zero/empty value. */
.ds-restricted { color: var(--ds-ink-muted); font-style: italic; font-weight: 400; }

/* Projects list — scope subline + My/All segmented control (item 1a UX). Styles here, no inline style=. */
.ds-projects-subline { font-size: 12.5px; color: var(--ds-ink-muted); margin-top: 2px; }
.ds-seg { display: inline-flex; border: 1px solid var(--ds-border); border-radius: 6px; overflow: hidden;
          margin: 0; padding: 0; min-inline-size: auto; }
.ds-seg-opt { position: relative; display: inline-flex; margin: 0; }
.ds-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ds-seg-label { display: inline-block; padding: 6px 12px; font-size: 12.5px; color: var(--ds-ink);
                white-space: nowrap; user-select: none; }
.ds-seg-opt + .ds-seg-opt .ds-seg-label { border-left: 1px solid var(--ds-border); }
.ds-seg-opt input:checked + .ds-seg-label { background: var(--ds-accent, #2563eb); color: #fff; }
.ds-seg-opt input:focus-visible + .ds-seg-label { outline: 2px solid var(--ds-accent, #2563eb); outline-offset: -2px; }
.ds-seg-count { margin-left: 4px; font-weight: 600; opacity: .8; }
.ds-empty-title { margin-bottom: 10px; }
.ds-empty-cta { text-decoration: none; }

/* Column-header hint (ⓘ): a focusable info marker that reveals a short description on hover AND keyboard
   focus (Budget tab Forecast / Approved / Actual headers). The bubble opens DOWNWARD -- the headers sit
   at the top of a .ds-table-wrap whose overflow-x:auto also clips the y-axis, so an upward bubble would be
   cut off. The visible bubble is aria-hidden; the focusable trigger carries the text via aria-label for
   screen readers. No inline style=; keyboard accessible with a visible focus ring. */
.ds-th-hint { position: relative; display: inline-flex; align-items: center; margin-left: 4px;
              color: var(--ds-ink-muted); cursor: help; vertical-align: middle; border-radius: 50%; }
.ds-th-hint .material-symbols-outlined { font-size: 15px; }
.ds-th-hint:focus-visible { outline: 2px solid var(--ds-focus, #0072CE); outline-offset: 2px; }
.ds-th-hint-bubble { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
                     width: max-content; max-width: 220px; padding: 6px 9px;
                     border-radius: var(--ds-radius-md, 8px); background: var(--ds-tooltip-bg, #26282C);
                     color: #fff; font-size: 12px; font-weight: 400; line-height: 1.35; text-align: left;
                     text-transform: none; letter-spacing: normal; white-space: normal; opacity: 0;
                     visibility: hidden; pointer-events: none; transition: opacity .12s ease; z-index: 60; }
.ds-th-hint:hover .ds-th-hint-bubble,
.ds-th-hint:focus .ds-th-hint-bubble,
.ds-th-hint:focus-visible .ds-th-hint-bubble { opacity: 1; visibility: visible; }

/* Acceptance-criteria rows (B3). Editor: one row per criterion (ACn label, auto-growing textarea, ✕
   remove) with a "+ Add criterion" button; read-only list: numbered AC items under the fixed subtitle. */
.ds-ac-editor { display: flex; flex-direction: column; gap: 8px; }
.ds-ac-row { display: flex; align-items: flex-start; gap: 8px; }
.ds-ac-label { flex: 0 0 auto; min-width: 34px; padding-top: 9px; font-size: 11px; font-weight: 700;
               color: var(--ds-ink-muted); text-transform: none; letter-spacing: .3px; }
.ds-ac-body { flex: 1 1 auto; min-width: 0; }
.ds-ac-text { width: 100%; resize: none; overflow-y: hidden; min-height: 40px; line-height: 1.5; }
.ds-ac-counter { margin-top: 2px; font-size: 11px; color: var(--ds-ink-muted); text-align: right; }
.ds-ac-remove { flex: 0 0 auto; margin-top: 4px; width: 30px; height: 30px; display: inline-flex;
                align-items: center; justify-content: center; border: 1px solid var(--ds-border);
                border-radius: var(--ds-radius-md, 8px); background: transparent; color: var(--ds-ink-muted);
                cursor: pointer; }
.ds-ac-remove:hover { color: #CC0000; border-color: #CC0000; }
.ds-ac-remove:focus-visible { outline: 2px solid var(--ds-focus, #0072CE); outline-offset: 2px; }
.ds-ac-remove .material-symbols-outlined { font-size: 18px; }
.ds-ac-add { margin-top: 2px; align-self: flex-start; }
/* Read-only numbered list */
.ds-ac-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-ac-item { display: flex; gap: 8px; font-size: 13px; color: var(--ds-ink); line-height: 1.5; }
.ds-ac-item-label { flex: 0 0 auto; min-width: 34px; font-size: 11px; font-weight: 700;
                    color: var(--ds-ink-muted); padding-top: 1px; }
.ds-ac-item-text { flex: 1 1 auto; white-space: pre-line; word-break: break-word; }
.ds-ac-empty { font-size: 12px; color: var(--ds-ink-muted); font-style: italic; }

/* Budget tab (Slice A): category group-header rows, year-column nowrap, the forecast-vs-estimate
   caption, and a small inline edit icon. Uses existing is-over/is-under for red/green variances. */
.ds-table tr.ds-budget-group > td,
.ds-table tr.ds-budget-group > th { background: var(--ds-bg, #F4F6F5); font-weight: 600;
                                     border-top: 1px solid var(--ds-border); }
.ds-table tr.ds-budget-group > th strong { font-weight: 700; }
.ds-budget-group-head { text-align: left; text-transform: none; letter-spacing: 0; font-size: 13px;
  font-weight: 600; color: var(--ds-ink); }
.ds-budget-group-caption { margin-left: 8px; font-size: 11px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--ds-ink-muted); }
.ds-cell-nowrap { white-space: nowrap; }
.ds-icon-btn-sm { width: 24px; height: 24px; padding: 0; vertical-align: middle; }
.ds-icon-btn-sm .material-symbols-outlined { font-size: 16px; }
.ds-pd-estimate-delta { margin-top: 2px; font-size: 11px; line-height: 1.3; }
.ds-est-neutral { color: var(--ds-ink-muted); }
.ds-est-amber   { color: #E57200; }
.ds-est-red     { color: #CC0000; }

/* Year filter moved into the Budget card header (next to + Add item) */
.ds-pd-budget-filter-header { gap: 6px; }
.ds-pd-budget-filter-header label { white-space: nowrap; }

/* Summary strip -- five equal-width stat tiles (identical label/value styles) */
.ds-pd-budget-summary {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--ds-bg); border-bottom: 1px solid var(--ds-border);
}
.ds-pd-stat-tile { flex: 1 1 0; min-width: 118px; }
.ds-pd-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ds-ink-muted); display: flex; align-items: center; gap: 2px; min-height: 18px; }
.ds-pd-stat-value { font-size: 18px; font-weight: 700; color: var(--ds-ink); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.ds-pd-stat-value .is-over  { color: var(--ds-rag-red-fg); }
.ds-pd-stat-value .is-under { color: var(--ds-rag-green-fg); }
.ds-pd-stat-note { margin-top: 3px; font-size: 11px; line-height: 1.3; }

/* Budget table density + money-header alignment (tabular-nums on values is on .ds-cell-num) */
.ds-table-budget td, .ds-table-budget th { font-size: 13px; }
.ds-table-budget tbody td { padding-top: 9px; padding-bottom: 9px; }
.ds-table-budget tr.ds-budget-group > th,
.ds-table-budget tr.ds-budget-group > td { padding-top: 11px; padding-bottom: 11px; }
.ds-table-budget th.is-right { text-align: right; }
.ds-table-budget .ds-budget-year-col { text-align: left; white-space: nowrap; }
.ds-table-budget .ds-budget-item-name { max-width: 240px; }
/* Fixed layout + explicit column widths: the budget table can never overflow its panel (truncating
   cells clip cleanly); the Item column takes the remaining width. Columns re-flow when Notes is hidden
   (<1280) because a display:none column drops out of the fixed grid. */
.ds-table-budget { table-layout: fixed; width: 100%; }
.ds-table-budget .ds-budget-year-col { width: 74px; }
.ds-table-budget th.is-right:not(.ds-col-actions) { width: 108px; }
.ds-table-budget .ds-budget-notes-col { width: 180px; max-width: 180px; }
.ds-table-budget .ds-col-actions { width: 84px; }
/* the fixed Actions column holds two icon buttons; clip so their flex box can't extend the table */
.ds-table-budget td.ds-td-actions { overflow: hidden; }

/* Shared register-table overflow guard (migrated from the Compliance-specific rule): the Actions column
   shrinks to its buttons so the flexible text columns absorb the rest -- no register table overflows the
   panel from ~1280px up. Applied to every register table on the project page. */
.ds-table-register th.is-right:last-child,
.ds-table-register td.ds-td-actions { width: 1%; white-space: nowrap; }

/* 1024-1279 (and 768-1023): hide the Notes column -- still in the hover tooltip + the edit modal. */
@media (max-width: 1279px) {
  .ds-table-budget .ds-budget-notes-col { display: none; }
}

/* <768: each budget line becomes a compact card (2x2 money grid); group headers become section headers
   with their subtotals. The table keeps its <td>/<th> semantics; labels come from data-label (no
   anonymous divs that lose column meaning). */
@media (max-width: 767px) {
  .ds-table-budget, .ds-table-budget tbody { display: block; }
  /* undo the desktop fixed-layout column widths -- in card mode cells fill their grid tracks */
  .ds-table-budget { table-layout: auto; }
  .ds-table-budget td, .ds-table-budget th { width: auto; max-width: none; }
  .ds-table-budget thead { display: none; }
  .ds-table-budget tr.ds-budget-group {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
    padding: 8px 12px; margin-top: 12px; border-radius: 6px;
  }
  .ds-table-budget tr.ds-budget-group > th { grid-column: 1 / -1; }
  .ds-table-budget tr.ds-budget-group > td:not([data-grp]) { display: none; }
  .ds-table-budget tr.ds-budget-group > td[data-grp] { text-align: left; }
  .ds-table-budget tr.ds-budget-group > td[data-grp]::before {
    content: attr(data-grp); display: block; text-transform: capitalize;
    font-size: 9px; font-weight: 700; color: var(--ds-ink-muted);
  }
  .ds-table-budget tbody tr[data-group] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
    padding: 10px 12px; margin: 8px 0; border: 1px solid var(--ds-border); border-radius: 8px;
  }
  .ds-table-budget tbody tr[data-group] > td { text-align: left; }
  .ds-table-budget tbody tr[data-group] > td[data-label="Item"] { grid-column: 1 / -1; font-weight: 600;
    max-width: none; white-space: normal; overflow: visible; }
  .ds-table-budget tbody tr[data-group] > td[data-label="Year"] { grid-column: 1 / -1; }
  .ds-table-budget tbody tr[data-group] > td.ds-td-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ds-table-budget tbody tr[data-group] > td[data-label]::before {
    content: attr(data-label); display: block; font-size: 9px; font-weight: 700;
    text-transform: uppercase; color: var(--ds-ink-muted);
  }
  .ds-table-budget tbody tr[data-group] > td[data-label="Item"]::before,
  .ds-table-budget tbody tr[data-group] > td[data-label="Year"]::before,
  .ds-table-budget tbody tr[data-group] > td.ds-td-actions::before { content: none; }
}

/* Very narrow (phone, or a wide fixed sidebar leaving little content): the money 2x2 collapses to a
   single stacked column so a budget card never needs a horizontal scrollbar. */
@media (max-width: 480px) {
  .ds-table-budget tr.ds-budget-group,
  .ds-table-budget tbody tr[data-group] { grid-template-columns: 1fr !important; }
  .ds-table-budget td.ds-td-actions { overflow: visible; }
  /* content fits a single stacked column; don't let the wrap show an internal scrollbar */
  #pd-budget-detail .ds-table-wrap { overflow-x: hidden; }
}

/* Print (Budget tab): hide controls + the actions column, keep each group with its lines, black on
   white, show the full column set incl. Notes (wrapping allowed). */
@media print {
  .ds-pd-budget-header-actions .ds-btn,
  .ds-pd-budget-filter,
  .ds-col-actions { display: none !important; }
  .ds-table-budget .ds-budget-notes-col { display: table-cell !important; max-width: none; white-space: normal; }
  .ds-table-budget .ds-cell-truncate,
  .ds-table-budget .ds-cell-truncate-sm { overflow: visible; white-space: normal; max-width: none; }
  .ds-budget-group-body { break-inside: avoid; page-break-inside: avoid; }
  .ds-table-budget, .ds-table-budget td, .ds-table-budget th,
  .ds-pd-stat-value, .ds-pd-stat-label { color: #000 !important; background: #fff !important; }
  .ds-pd-stat-value .is-over, .ds-pd-stat-value .is-under,
  .ds-table-budget .is-over, .ds-table-budget .is-under { color: #000 !important; }
}