/* Self-hosted Open Sans (variable, latin subset). Replaces the external
   fonts.googleapis.com dependency: no IP leak, no 503 fallback (C6 / M23). */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/ai/fonts/opensans-latin-var.woff2') format('woff2');
}

/* ── Cowork design tokens ── */
:root {
  /* Legacy Aicons palette (kept for backward compat: do not use in new code) */
  /* F-001: --aicons-hero-blue deleted; replaced everywhere with --accent or AICONS.chartBlue */
  --aicons-blue: #69B9FF;
  --aicons-anthracite: #192024;
  /* WCAG P1-5: was #6A859C (3.85:1 on white, fails AA). #566E82 clears 4.5:1 on
     white and on both grey surfaces in use (F7F9FC, EDEFF2) without per-usage
     background auditing. */
  --aicons-steel: #566E82;
  --aicons-bg: #EDEFF2;
  --aicons-hairline: #D4DAE2;
  --aicons-zebra: #F7F9FC;
  --aicons-white: #FFFFFF;
  /* F-007: --aicons-positive/negative/warning consolidated to --success/danger/warning-text */
  --aicons-positive: #437426;
  --aicons-negative: #7F2C28;
  --aicons-warning: #5A4815;

  /* Cowork canonical tokens: bind all new code to these */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F9FC;
  --bg-tertiary: #EDEFF2;
  --bg-sidebar: #F7F9FC;
  --text-primary: #192024;
  --text-secondary: #3D3D3A;
  /* WCAG P1-5: was #6A859C (3.85:1 on white, fails AA 1.4.3). #566E82 clears
     4.5:1 on white and on both grey surfaces in use (F7F9FC, EDEFF2). */
  --text-muted: #566E82;
  --accent: #B05636;
  --accent-hover: #99482D;
  /* WCAG P1-5: darker accent for text use. --accent itself is 4.31:1 on the
     EDEFF2 surface (fails AA for text below the large-text threshold); this
     token clears 4.5:1 on white and both grey surfaces in use. --accent stays
     unchanged for borders, backgrounds and non-text UI (3:1 requirement, and
     buttons already pair it with white text). */
  --accent-text: #8F4327;
  /* F-014: accent alpha composites as tokens */
  --accent-a10: rgba(176, 86, 54,0.10);
  --accent-a20: rgba(176, 86, 54,0.20);
  --border-hairline: #D4DAE2;
  --border-soft: rgba(31,30,29,0.12);
  --composer-border: #E5E0D6;
  --success-bg: #E9F1DC;
  --success-text: #437426;
  --warning-bg: #F6EEDF;
  --warning-text: #5A4815;
  --danger-bg: #F7ECEC;
  --danger-text: #7F2C28;
  --info-bg: #D6E4F6;
  --info-text: #3266AD;
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  /* Spacing scale (4px base). Foundation for consolidating ad-hoc gaps/padding. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  /* Shared height for the two bottom bars (left user chip, right © footer) so
     they line up identically across WM / PE / Research workspaces. */
  --workspace-bottombar-h: 66px;
  --shadow-hairline: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --font-primary: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  /* F-020: monospace token */
  --font-mono: 'SF Mono', 'Fira Mono', 'Consolas', monospace;
  --bg-sidebar-border: rgba(31,30,29,0.10);
  --sidebar-text: #3D3D3A;
  /* WCAG P1-5: was #6A859C (3.65:1 on the F7F9FC sidebar bg, fails AA). */
  --sidebar-text-muted: #566E82;
  --sidebar-text-active: #141413;
  --sidebar-accent-bg: rgba(176, 86, 54,0.10);
  /* F-019: on-dark tint tokens for dark-card components */
  --positive-on-dark: #87E0B0;
  --negative-on-dark: #F0958E;
  --warning-on-dark:  #F2C97A;
  /* F-audit: semantic extras for forms, overlays, indicators */
  --text-on-accent: #FFFFFF;
  --overlay-scrim: rgba(20,20,19,0.55);
  --accent-a15: rgba(176, 86, 54,0.15);
  --focus-ring: 0 0 0 2px var(--accent-a15);
  --chart-blue: #2E9DFF;
  --status-warning: #C9A227;
  --status-gap: #E67E22;
  --danger-a08: rgba(127,44,40,0.08);
  --danger-a10: rgba(127,44,40,0.10);
  --danger-a12: rgba(127,44,40,0.12);
  --danger-a35: rgba(127,44,40,0.35);
  /* WCAG P1-5 2.4.7: visible-focus ring color. 5.25:1 on white (UI component
     minimum is 3:1). */
  --focus-visible-color: #2A6FB0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* WCAG P1-5 2.4.7: global focus-visible safety net. Several component rules
   below set outline:none on :focus (mouse-click state, usually paired with a
   border-color/box-shadow swap instead). This rule guarantees a strong,
   always-visible ring on the browser's own :focus-visible heuristic (keyboard
   / programmatic focus only, never a plain mouse click), for every focusable
   element site-wide. !important is deliberate and scoped to this one
   accessibility safety-net selector so a later, more specific `x:focus {
   outline:none }` rule can never silently shadow it. */
:focus-visible {
  outline: 2px solid var(--focus-visible-color) !important;
  outline-offset: 2px !important;
}
body { font-family: var(--font-primary); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--text-primary); background: var(--bg-tertiary); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: var(--accent-text); text-decoration: none; }
/* M10: accessibility utilities. .sr-only hides content visually but keeps it for
   screen readers (headings, labels). .skip-link is off-screen until focused. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 10000; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; transition: top 0.15s ease; }
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }
/* M9: visible keyboard-focus ring on the listbox options (was mouse-only). */
.research-picker-opt:focus, .research-picker-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
h1, h2, h3, h4 { font-family: var(--font-primary); font-weight: 400; margin: 0 0 0.5em; }
h2 { color: var(--text-primary); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; padding-bottom: 3px; border-bottom: 0.5px solid var(--border-hairline); margin: 0 0 10px; }

/* === LOGIN SCREEN === */
.login-screen {
  /* Fixed dark brand gradient -- NOT theme-dependent. The middle stop must stay a
     literal dark colour; var(--text-primary) turns near-white in dark mode. */
  position: fixed; inset: 0; background: linear-gradient(135deg, #0C1014 0%, #192024 60%, #1E2A35 100%);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.login-box { background: var(--aicons-white); padding: 36px 40px; border-radius: 4px; width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); border-top: 4px solid var(--accent); }
.login-box .logo { font: 400 32px var(--font-primary); color: var(--accent-text); letter-spacing: 6px; text-align: center; }
.login-box .logo .ai { color: var(--aicons-anthracite); }
.login-box .tag { font-size: 0.75rem; color: var(--aicons-steel); letter-spacing: 2px; text-transform: uppercase; text-align: center; margin-top: 4px; margin-bottom: 24px; }
.login-box .field { margin-bottom: 14px; }
.login-box label { font-size: 0.75rem; color: var(--aicons-steel); text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 4px; }
.login-box input { width: 100%; padding: 10px 12px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); background: var(--bg-primary); }
/* F-015: focus ring coral not chart-blue */
.login-box input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.login-box .step2fa { display: none; padding: 14px; background: var(--aicons-zebra); border-left: 3px solid var(--accent); margin-bottom: 14px; font-size: 12px; color: var(--aicons-anthracite); }
.login-box .step2fa.active { display: block; }
.login-box .step2fa .code { font: 600 22px var(--font-mono); letter-spacing: 8px; color: var(--accent-text); text-align: center; padding: 8px 0; }
.login-box button.login-btn { width: 100%; padding: 11px; background: var(--accent); color: white; border: none; border-radius: 3px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; font-weight: 600; }
.login-box button.login-btn:hover { background: var(--accent-hover); }
.login-box .meta { text-align: center; margin-top: 20px; font-size: 0.75rem; color: var(--aicons-steel); letter-spacing: 1px; }
.login-box .sec-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 0.75rem; color: var(--aicons-positive); }
.login-box .sec-hint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aicons-positive); }

/* === WORKSPACE PICKER SCREEN (ADR-0006 Phase A1) === */
.workspace-picker-screen { display: none; position: fixed; inset: 0; background: linear-gradient(135deg, #0C1014 0%, #192024 60%, #1E2A35 100%); z-index: 1100; align-items: center; justify-content: center; }
.workspace-picker-screen.active { display: flex; }
.workspace-picker-box { background: var(--aicons-white); padding: 40px 44px; border-radius: 4px; width: 920px; max-width: calc(100vw - 32px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); border-top: 4px solid var(--accent); }
.workspace-picker-logo { font: 400 24px var(--font-primary); color: var(--accent-text); letter-spacing: 5px; text-align: center; }
.workspace-picker-logo .ai { color: var(--aicons-anthracite); }
.workspace-picker-title { font-size: 13px; color: var(--aicons-steel); letter-spacing: 2px; text-transform: uppercase; text-align: center; margin-top: 4px; margin-bottom: 28px; }
/* Reverted to 3 columns (Petra Novak, 2026-08-16): the Finanzuebersetzer
   workspace-picker card was removed -- it is a normal Research agent now,
   not a workspace (see wsOptionTranslate removal in index.html and the
   'finanzuebersetzer' entry in CW_RESEARCH.agents, cockpit-research.js). */
.workspace-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; align-items: stretch; }
@media (max-width: 820px) { .workspace-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .workspace-options { grid-template-columns: 1fr; } }
.workspace-option { border: 1.5px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 20px 18px; cursor: pointer; transition: all .15s; text-align: left; background: var(--bg-primary); border-top: 3px solid var(--border-hairline); display: flex; flex-direction: column; min-height: 132px; height: 100%; }
.workspace-option:hover { border-color: var(--accent); border-top-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.10); transform: translateY(-2px); }
.workspace-option .ws-label { font-size: 14px; font-weight: 600; color: var(--aicons-anthracite); margin-bottom: 6px; }
.workspace-option .ws-desc { font-size: 0.75rem; color: var(--aicons-steel); line-height: 1.45; flex: 1; }
.workspace-option .ws-icon { width: 28px; height: 28px; background: var(--accent); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.workspace-option .ws-icon svg { width: 16px; height: 16px; color: white; stroke: white; }
.workspace-picker-hint { text-align: center; font-size: 0.75rem; color: var(--aicons-steel); letter-spacing: 1px; }

/* === PE WORKSPACE (ADR-0006 Phase A - Fonds → Portco → Periode) === */
body[data-product-mode="pe"] #cwSectionRecents { display: none !important; }
body[data-product-mode="wm"] #cwSectionPeFonds,
body[data-product-mode="wm"] #cwSidebarPe { display: none !important; }
body[data-product-mode="pe"] #cwSectionPeFonds,
body[data-product-mode="pe"] #cwSidebarPe { display: block; }
body[data-product-mode="pe"] #cwModePe.active { display: flex; }
body[data-product-mode="pe"] .cw-panel-wm-only { display: none !important; }
body[data-product-mode="pe"] #cwPanelPe { display: flex; }
body[data-product-mode="pe"] .cw-mode-switcher-wm { display: none !important; }
body[data-product-mode="pe"] .cw-mode-switcher-pe { display: flex !important; }
body[data-product-mode="wm"] .cw-mode-switcher-pe { display: none !important; }
body[data-product-mode="wm"] .cw-mode-switcher-wm { display: flex !important; }

/* === RESEARCH WORKSPACE (ADR-0007) === */
body[data-product-mode="research"] #cwSectionRecents,
body[data-product-mode="research"] #cwSectionMandanten,
body[data-product-mode="research"] #cwSectionPeFonds,
body[data-product-mode="research"] #cwSectionScheduled,
body[data-product-mode="research"] #cwSidebarPe,
body[data-product-mode="research"] .cw-mode-switcher-wm,
body[data-product-mode="research"] .cw-mode-switcher-pe,
body[data-product-mode="research"] #cwMainModeBar,
body[data-product-mode="research"] .cw-panel-wm-only,
body[data-product-mode="research"] #cwPanelPe { display: none !important; }
body[data-product-mode="research"] #cwModeResearch.active { display: flex; }
/* Research-only side areas: history (left), knowledge/sources (right). */
#cwSectionResearchHistory { display: none; }
body[data-product-mode="research"] #cwSectionResearchHistory { display: block; }
#cwPanelResearch { display: none; flex-direction: column; flex: 1; overflow-y: auto; min-height: 0; }
#cwPanelResearch > .cw-panel-card { flex-shrink: 0; }
body[data-product-mode="research"] #cwPanelResearch { display: flex; }
#cwModeResearch { display: none; flex-direction: column; flex: 1; min-height: 0; min-width: 0; width: 100%; overflow: hidden; }
.research-workspace { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
.research-workspace > * { flex-shrink: 0; }
.research-placeholder { margin: auto; max-width: 460px; text-align: center; padding: 40px 24px; color: var(--text-muted); }
.research-placeholder-icon { width: 44px; height: 44px; margin: 0 auto 16px; color: var(--accent-text); }
.research-placeholder-icon svg { width: 100%; height: 100%; }
.research-placeholder-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.research-placeholder-sub { font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.research-placeholder-note { font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; text-align: left; }
.research-placeholder-note--coldstart { margin-top: 8px; border-left-color: var(--text-muted); }

/* R4: provenance-marking preview + answer rendering */
.research-preview-wrap { margin: 18px auto 0; max-width: 560px; width: 100%; }
.research-preview-hdr { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 8px; text-align: left; }
.research-msg { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-hairline); padding: 14px 16px; text-align: left; }
.research-msg-body { font-size: 13px; line-height: 1.6; color: var(--text-primary); }
.research-msg-meta { margin-top: 10px; }
/* Issue #107 (Michael 260817): Export control moved to the TOP of the answer
   bubble (cwResearchRenderAnswer) so it stays reachable on a long translation
   -- when it is the first child, swap its inline margin-top for a
   margin-bottom instead, so it reads as a small header row above the answer
   text rather than crowding the bubble's own top padding. */
.research-msg--assistant > .cw-export-menu:first-child { margin-top: 0 !important; margin-bottom: 8px !important; }
/* Issue #115 (Petra Novak, 2026-08-17): the #107 top-placed Export trigger was
   a 10px grey link-style button -- easy to miss on a long answer (Michael,
   screenshot). Restyled as a clearly-labelled, on-brand pill button. Markup
   comes from cockpit-report-export.js's exportMenuMarkup(); JS still owns
   position/display of .cw-export-menu-list (cwPositionExportMenu sets those
   inline at open time -- this file only supplies the closed-state layout and
   the open-state box/shadow/hover styling). */
.cw-export-menu { margin-top: 6px; position: relative; display: inline-block; }
/* #130 (Petra Novak, 260817): a completed TRANSLATION answer shows both
   formats as two direct download buttons instead of the Export dropdown --
   the two formats are immediately visible, no menu to open/search. Research
   answers keep the dropdown (.cw-export-menu above), unaffected. */
.cw-translate-download-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cw-translate-download-row .cw-export-trigger-btn { padding: 7px 14px; }
.cw-export-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 0.5px solid var(--accent-a20); background: var(--accent-a10); color: var(--accent-text);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.cw-export-trigger-btn:hover { background: var(--accent-a15); border-color: var(--accent); }
.cw-export-trigger-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cw-export-trigger-btn svg { flex-shrink: 0; }
.cw-export-trigger-caret { font-size: 10px; opacity: .8; }
.cw-export-menu-list {
  position: absolute; z-index: 99999; left: 0; top: 100%; margin-top: 4px;
  background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(0,0,0,.14); min-width: 140px; overflow: hidden;
}
.cw-export-menu-item { padding: 8px 12px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.cw-export-menu-item:hover { background: var(--bg-secondary); }
.cw-export-menu-item-note { color: var(--text-muted); font-size: 10px; }

/* Issue #115: export-result document card (icon + filename + type badge +
   primary "Oeffnen" + a small "..." dropdown for In-Dateien-anzeigen /
   Herunterladen). Deliberately plain -- no cloud-provider chrome, matches
   the .research-msg card shell already used for every other bubble. */
.research-msg--card { padding: 10px 12px; max-width: 420px; }
.cw-export-card { display: flex; align-items: center; gap: 10px; position: relative; }
.cw-export-card-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); color: var(--text-muted);
}
.cw-export-card-icon svg { width: 17px; height: 17px; }
.cw-export-card-icon--pdf { background: var(--danger-bg); border-color: rgba(127,44,40,0.2); color: var(--danger-text); }
.cw-export-card-icon--docx { background: var(--info-bg); border-color: rgba(50,102,173,0.25); color: var(--info-text); }
.cw-export-card-body { flex: 1; min-width: 0; }
.cw-export-card-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-export-card-badge { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 1px 7px; border-radius: var(--radius-full); }
.cw-export-card-badge--pdf { background: var(--danger-bg); color: var(--danger-text); }
.cw-export-card-badge--docx { background: var(--info-bg); color: var(--info-text); }
.cw-export-card-badge--xlsx, .cw-export-card-badge--pptx { background: var(--success-bg); color: var(--success-text); }
.cw-export-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cw-export-card-btn { font-size: 11.5px; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; }
.cw-export-card-btn--primary { padding: 6px 12px; background: var(--accent); color: #fff; border: 0.5px solid var(--accent); }
.cw-export-card-btn--primary:hover { opacity: .92; }
.cw-export-card-btn--more { width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text-secondary); border: 0.5px solid var(--border-hairline); font-size: 14px; }
.cw-export-card-btn--more:hover { color: var(--text-primary); background: var(--bg-secondary); }
.cw-export-card-menu {
  position: fixed; z-index: 99999; background: var(--bg-primary); border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: 0 4px 14px rgba(0,0,0,.14); min-width: 170px; overflow: hidden;
}
.cw-export-card-menu-item { padding: 8px 12px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.cw-export-card-menu-item:hover { background: var(--bg-secondary); }
/* Inline citation chips, by provenance class */
.research-cite { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 2px 5px; margin: 0 1px; border-radius: var(--radius-2xs); vertical-align: baseline; cursor: pointer; text-decoration: none; }
/* Citation-DeepLink-Spec (260823): cursor: help -> pointer -- the chip is now
   clickable (jumps to the source panel entry), not just a hover tooltip. The
   title attribute (tooltip) is unchanged. */
.research-cite:focus-visible { outline: 2px solid var(--accent-a20); outline-offset: 1px; }
.research-src--flash { animation: cwResearchSrcFlash 1.2s ease-out; }
@keyframes cwResearchSrcFlash {
  0%   { background: var(--accent-a20); box-shadow: 0 0 0 3px var(--accent-a15); }
  100% { background: inherit; box-shadow: none; }
}
.research-cite--internal { background: var(--accent-a15); color: var(--accent-text); border: 0.5px solid var(--accent-a20); }
.research-cite--external { background: transparent; color: var(--info-text); border: 0.5px solid var(--info-text); }
.research-cite--model { background: rgba(31,30,29,0.06); color: var(--text-muted); border: 0.5px solid var(--border-hairline); }
/* Source list under an answer */
.research-sources { margin-top: 12px; padding-top: 10px; border-top: 0.5px dashed var(--border-hairline); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* M11: raise disclosure/label legibility to WCAG AA (larger + darker than the old
   ~3.65:1 steel-on-light). */
.research-sources-hdr { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-secondary); width: 100%; margin-bottom: 2px; }
.research-src { font-size: 0.75rem; padding: 3px 8px; border-radius: var(--radius-full); text-decoration: none; }
.research-src--internal { background: var(--accent-a10); color: var(--accent-text); border: 0.5px solid var(--accent-a20); }
.research-src--external { background: var(--info-bg); color: var(--info-text); border: 0.5px solid var(--info-text); }
.research-src--external:hover { filter: brightness(0.96); }
/* Grounding ratio badge */
.research-grounding { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); }
.research-grounding::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.research-grounding--full { background: var(--success-bg); color: var(--success-text); }
.research-grounding--full::before { background: var(--success-text); }
.research-grounding--part { background: var(--warning-bg); color: var(--warning-text); }
.research-grounding--part::before { background: var(--warning-text); border-radius: 1px; }
.research-grounding--low { background: var(--danger-bg); color: var(--danger-text); }
.research-grounding--low::before { background: var(--danger-text); border-radius: 1px; }
/* M11: the single most important risk statement ("not grounded in sources") -- was
   the least legible text on the screen (11px, ~3.65:1). Now 12px and full-contrast. */
.research-model-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-secondary); border-left: 3px solid var(--danger-text, #b42318); border-radius: var(--radius-sm); padding: 8px 10px; }

/* Cowork-style chat window (middle area) */
.research-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; background: var(--bg-sidebar); position: relative; }
/* Scroll-during-streaming (260823): floating "jump to latest" pill, anchored
   to the thread area, shown only while auto-follow is paused and a
   generation is still streaming. */
.research-jump-btn { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; font-size: 0.75rem; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); border: 0.5px solid var(--accent-a20); background: var(--accent); color: var(--accent-contrast, #fff); box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: pointer; }
.research-jump-btn:hover { filter: brightness(1.05); }
.cw-chatpane-jump-btn { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 5; font-size: 0.7rem; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-full); border: 0.5px solid var(--accent-a20); background: var(--accent); color: var(--accent-contrast, #fff); box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: pointer; }
.cw-chatpane-jump-btn:hover { filter: brightness(1.05); }
.research-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.research-thread > * { flex-shrink: 0; }
.research-msg--user { align-self: flex-end; max-width: 78%; background: var(--accent-a10); border: 0.5px solid var(--accent-a20); border-radius: var(--radius-md); padding: 10px 13px; }
.research-msg--user .research-msg-body { font-size: 13px; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap; }
.research-msg--assistant { align-self: stretch; max-width: 100%; }
/* Preserve the humanizer's paragraph breaks and bullet lines in the answer bubble
   (without this, every newline collapses to a space and the answer reads as one
   wall of text). Blank lines become paragraph gaps; "- " lines become bullets. */
.research-msg--assistant .research-msg-body { white-space: pre-wrap; }
/* Audit M17: rendered-markdown elements inside an answer. Compact spacing so the
   answer stays a chat bubble, not a document. Tables scroll horizontally on narrow
   panels; code blocks keep their own whitespace. */
.research-msg--assistant .research-msg-body p { margin: 0 0 8px; white-space: normal; }
.research-msg--assistant .research-msg-body p:last-child { margin-bottom: 0; }
.research-msg-body ul.research-md-list, .research-msg-body ol.research-md-list { margin: 4px 0 8px; padding-left: 20px; white-space: normal; }
.research-msg-body li { margin: 2px 0; }
.research-md-h { font-size: 13px; font-weight: 700; margin: 10px 0 4px; }
.research-md-table { border-collapse: collapse; margin: 6px 0; font-size: 12px; display: block; max-width: 100%; overflow-x: auto; white-space: normal; }
.research-md-table th, .research-md-table td { border: 1px solid var(--border, rgba(0,0,0,0.15)); padding: 4px 8px; text-align: left; }
.research-md-table th { background: rgba(0,0,0,0.04); font-weight: 600; }
.research-msg-body pre { background: rgba(0,0,0,0.05); padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 6px 0; white-space: pre; }
.research-msg-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.research-msg-body :not(pre) > code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; }
.research-thinking { display: inline-flex; gap: 5px; align-items: center; padding: 12px 4px; }
.research-thinking-label { font-size: 12px; color: var(--text-secondary); margin-left: 8px; }
.research-stopbar { padding: 4px 4px 8px; }
.research-stop-btn { font-size: 12px; color: var(--text-secondary); background: transparent; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-full); padding: 3px 12px; cursor: pointer; }
.research-stop-btn:hover { color: var(--danger-text, #b42318); border-color: var(--danger-text, #b42318); }
/* Specialist-profile proposal bubble (task #82) */
.research-proposal { background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-md); padding: 10px 13px; }
.research-proposal .research-msg-body { font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.research-proposal-actions { display: flex; gap: 8px; margin-top: 10px; }
.research-proposal-btn { font-size: 12px; border-radius: var(--radius-full); padding: 5px 14px; cursor: pointer; }
.research-proposal-btn--confirm { background: var(--accent); color: #fff; border: 0.5px solid var(--accent); }
.research-proposal-btn--confirm:hover { opacity: 0.9; }
.research-proposal-btn--decline { background: transparent; color: var(--text-secondary); border: 0.5px solid var(--border-hairline); }
.research-proposal-btn--decline:hover { color: var(--text-primary); }
.research-proposal--resolved .research-msg-body { color: var(--text-secondary); font-style: italic; }
.research-send:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.research-thinking-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: research-blink 1.2s infinite; }
.research-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.research-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes research-blink { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 0.9; } }
.research-empty { margin: auto; max-width: 460px; text-align: center; padding: 32px 24px; color: var(--text-muted); }
.research-empty-icon { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--accent-text); }
.research-empty-icon svg { width: 100%; height: 100%; }
.research-empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.research-empty-sub { font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
/* Composer */
.research-composer { flex-shrink: 0; border-top: 0.5px solid var(--border-hairline); background: var(--bg-sidebar); padding: 10px 14px 8px; }
/* WM/PE-consistent: a bordered box with the textarea on top and a toolbar row below. */
.research-composer-inner { border: 0.5px solid var(--composer-border); border-radius: var(--radius-md); padding: 8px 10px; background: var(--bg-primary); }
.research-composer-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.research-composer-spacer { flex: 1; }
/* Clearly-visible, labelled attach control (matches the picker pills). */
.research-attach-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 0.75rem; font-weight: 600; background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-full); color: var(--text-secondary); cursor: pointer; }
.research-attach-pill:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-a10); }
.research-attach-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Icon-only toggles (Web-Recherche / Streaming): symbol + hover tooltip, no text
   label. Squarer padding so they read as icon buttons; active state (rust icon,
   rule further down) is the on/off cue. */
.research-toggle-pill--icon { padding: 5px 7px; }
/* Petra Novak, 260823: WM/PE web-research toggle greyed out, not activated
   (Michael's decision -- visible for discoverability, non-interactive).
   Applies to any research-toggle-pill carrying the native disabled attribute
   or this class; muted colour, no hover reaction, not-allowed cursor so the
   greyed-out state reads as "not available", not "broken". */
.research-toggle-pill--disabled,
.research-toggle-pill[disabled],
.cw-toggle-pill--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.research-toggle-pill--disabled:hover,
.research-toggle-pill[disabled]:hover,
.cw-toggle-pill--disabled:hover { border-color: var(--border-hairline); color: var(--text-secondary); background: var(--bg-secondary); }
.research-picker { position: relative; }
.research-picker-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 0.75rem; background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-full); cursor: pointer; color: var(--text-secondary); }
.research-picker-btn:hover { border-color: var(--accent); }
.research-picker-kind { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.75rem; color: var(--text-muted); }
.research-picker-val { font-weight: 600; color: var(--text-primary); }
.research-picker-caret { color: var(--text-muted); font-size: 0.75rem; }
.research-picker-menu { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 200px; background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 4px; z-index: 50; }
.research-picker-menu.open { display: block; }
.research-picker-opt { padding: 7px 10px; font-size: 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); }
.research-picker-opt:hover { background: var(--bg-secondary); }
.research-picker-opt.selected { color: var(--accent-text); font-weight: 600; }
.research-picker-menu#cwResearchAgentMenu { min-width: 280px; max-height: 320px; overflow-y: auto; }
.research-picker-opt--agent { padding: 8px 10px; }
.research-picker-opt-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.research-picker-opt--agent.selected .research-picker-opt-label { color: var(--accent-text); }
.research-picker-opt-desc { font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); margin-top: 2px; font-weight: 400; }
/* Residency flag badge (crisp SVG, renders identically on all platforms) */
.res-flag { display: inline-block; width: 15px; height: 15px; border-radius: 2px; overflow: hidden; vertical-align: -3px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.12); flex-shrink: 0; }
.res-flag svg { display: block; width: 100%; height: 100%; }
.research-model-res { display: flex; align-items: center; gap: 6px; }
#cwResearchModelLabel .res-flag { vertical-align: -3px; margin-right: 1px; }
/* WM/PE model picker parity (Petra Novak, 260823): same spacing rule as the
   research picker above, for #cwModelLabel (composer button) and each
   .cw-model-opt (dropdown row). */
#cwModelLabel .res-flag, .cw-model-opt .res-flag { vertical-align: -3px; margin-right: 1px; }
.research-input { display: block; width: 100%; border: none; outline: none; resize: none; overflow-y: auto; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text-primary); background: transparent; min-height: 22px; max-height: 200px; }
.research-send { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.research-send:hover { background: var(--accent-hover); }
.research-send svg { width: 16px; height: 16px; display: block; }
/* Send-slot (Petra Novak, 2026-08-20): mic + send share one fixed-size slot so
   toggling which one is visible never shifts the toolbar layout. JS
   (ai/js/cockpit-voice.js) toggles style.display on the two children based on
   whether the composer is empty -- see .cw-slot-mic/.cw-slot-send below. */
.cw-send-slot { position: relative; flex-shrink: 0; width: 30px; height: 30px; }
.cw-send-slot .cw-slot-mic, .cw-send-slot .cw-slot-send { position: absolute; top: 0; left: 0; }
.cw-slot-mic.cw-mic-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.cw-slot-mic.cw-mic-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-a10); }
.cw-slot-mic.cw-mic-btn svg { width: 16px; height: 16px; display: block; }
.research-egress-note { margin-top: 6px; font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); text-align: center; }
/* SearXNG toggle gating condition (PD-004): persistent, always-visible
   warning next to the web-search control -- not a hover-only tooltip. */
.research-web-warn { margin-top: 4px; font-size: 0.7rem; line-height: 1.4; color: var(--text-muted); text-align: center; }
/* #101: the token/cost meter (shared by #cwResearchUsage and #cwWmpeUsage)
   previously had no rule of its own -- it inherited the muted, centered
   disclaimer style verbatim and read as part of the same sentence, easy to
   miss entirely. Give it its own visual weight so it reads as a live status
   value, not decoration. */
.research-usage { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
/* M13: market-data staleness banner + as-of flag. */
.cw-news-stale-banner { font-size: 12px; line-height: 1.45; color: var(--danger-text, #b42318); background: var(--danger-bg, #fef3f2); border: 0.5px solid var(--danger-text, #b42318); border-left: 3px solid var(--danger-text, #b42318); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 12px; }
.cw-news-asof--stale { color: var(--danger-text, #b42318); font-weight: 600; }
/* M20: WM empty state (no mandate yet). */
.cw-wm-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; z-index: 5; background: var(--bg-tertiary); }
.cw-wm-empty-inner { max-width: 420px; text-align: center; }
.cw-wm-empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.cw-wm-empty-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 18px; }
.cw-wm-empty-btn { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; }
.cw-wm-empty-btn:hover { filter: brightness(0.95); }
/* Uploaded-file chips (ephemeral, client-side parsed) */
/* #110: chips stack one-per-row and are contained within the composer box --
   width:100%/box-sizing so no chip can ever be wider than its parent, and
   the name gets a flexible min-width:0 slot (with meta/ext/close pinned to
   their content width) so long file names truncate with an ellipsis instead
   of squeezing the name out of view. */
.research-attachments { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.research-attachments:not(:empty) { margin-bottom: 8px; }
.research-att { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; padding: 4px 6px 4px 4px; font-size: 0.75rem; background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); }
.research-att-ext { flex-shrink: 0; font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; color: #fff; background: var(--accent); border-radius: var(--radius-2xs); padding: 2px 4px; }
.research-att--error .research-att-ext { background: var(--danger-text); }
.research-att--parsing .research-att-ext { background: var(--text-muted); }
.research-att-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.research-att-meta { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.75rem; }
.research-att--error .research-att-meta { color: var(--danger-text); }
.research-att-x { flex-shrink: 0; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0 2px; line-height: 1; }
.research-att-x:hover { color: var(--danger-text); }
/* E fix (Petra Novak, 2026-08-20): click a dropped attachment to open it in
   a new tab -- the ext/name/meta trio is its own clickable region. */
.research-att-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.research-att-open:hover .research-att-name { text-decoration: underline; }
/* No File object to open (e.g. WM/PE internal-drag-from-tree chip, cockpit-app.js) -- not clickable. */
.research-att-open--inert { cursor: default; }
.research-att-open--inert:hover .research-att-name { text-decoration: none; }
.research-drop-over { outline: 2px dashed var(--accent); outline-offset: -6px; }
/* Document provenance (uploaded file) chip - distinct from internal/external/model */
.research-cite--document { background: rgba(106,133,156,0.14); color: var(--aicons-steel); border: 0.5px solid rgba(106,133,156,0.4); }
.research-src--document { background: rgba(106,133,156,0.10); color: var(--text-secondary); border: 0.5px solid rgba(106,133,156,0.55); }
/* Left rail: research history */
.research-hist-group { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--sidebar-text-muted); padding: 8px 14px 2px; }
.research-hist-item { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; font-size: 12.5px; color: var(--sidebar-text); cursor: pointer; border-radius: var(--radius-sm); margin: 0 6px; }
.research-hist-item:hover { background: rgba(31,30,29,0.05); }
.research-hist-item.active { background: var(--sidebar-accent-bg); color: var(--accent-text); font-weight: 600; }
.research-hist-item-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Delete control: BUG FIX 2026-07-06, no affordance existed at all before this. */
.research-hist-item-del { flex-shrink: 0; border: none; background: transparent; color: var(--sidebar-text-muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: var(--radius-2xs); opacity: 0; }
.research-hist-item:hover .research-hist-item-del { opacity: 1; }
.research-hist-item-del:hover { color: var(--danger-text); background: rgba(31,30,29,0.08); }
.research-hist-empty { padding: 8px 14px; font-size: 0.75rem; color: var(--sidebar-text-muted); font-style: italic; }
/* Right panel: shared KB */
.research-kb-note { font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); margin-bottom: 8px; }
.research-kb-list { display: flex; flex-direction: column; gap: 5px; }

#cwSidebarPe { display: none; padding: 4px 0 8px; }
#cwSectionPeFonds { display: none; }
#cwModePe { display: none; flex-direction: column; flex: 1; min-height: 0; min-width: 0; width: 100%; overflow: hidden; }
#cwPanelPe { display: none; flex-direction: column; flex: 1; overflow-y: auto; min-height: 0; }
#cwPanelPe > .cw-panel-card { flex-shrink: 0; }
.pe-sidebar-block { padding: 6px 10px 10px; border-bottom: 0.5px solid var(--border-hairline); }
.pe-sidebar-block:last-child { border-bottom: none; }
.pe-sidebar-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--sidebar-text-muted); font-weight: 700; margin-bottom: 6px; padding: 0 4px; }
.pe-fund-item, .pe-portco-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; margin: 2px 4px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .1s; font-size: 12.5px; color: var(--sidebar-text);
}
.pe-fund-item:hover, .pe-portco-item:hover { background: rgba(31,30,29,0.05); }
.pe-fund-item.active, .pe-portco-item.active { background: var(--sidebar-accent-bg); color: var(--accent-text); font-weight: 600; }
.pe-fund-meta { font-size: 0.75rem; color: var(--sidebar-text-muted); font-weight: 400; margin-top: 2px; }
.pe-fund-item.active .pe-fund-meta { color: var(--accent-text); opacity: 0.75; }
.pe-portco-name { flex: 1; min-width: 0; }
.pe-portco-del {
  /* WCAG P1-5 2.5.8: was 22x22 (below the 24px target-size minimum). */
  flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--sidebar-text-muted); font-size: 16px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.pe-portco-item:hover .pe-portco-del, .pe-portco-item:focus-within .pe-portco-del { opacity: 1; }
.pe-portco-del:hover, .pe-portco-del:focus-visible { background: var(--danger-a12); color: var(--danger-text); }
.pe-portco-add {
  display: block; width: calc(100% - 8px); margin: 6px 4px 2px; padding: 6px 10px;
  border: 0.5px dashed var(--border-hairline); border-radius: var(--radius-sm);
  background: transparent; color: var(--accent-text); font: 600 0.75rem var(--font-primary); cursor: pointer; text-align: left;
}
.pe-portco-add:hover, .pe-portco-add:focus-visible { background: var(--sidebar-accent-bg); border-color: var(--accent); }
.pe-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pe-card-title-row .pe-card-title { margin-bottom: 0; }
.pe-card-title-row .pe-quick-btn { padding: 5px 11px; font-size: 0.75rem; }
.pe-row-del {
  padding: 2px 7px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm);
  background: var(--bg-secondary); color: var(--text-muted); font-size: 0.75rem; cursor: pointer;
}
.pe-row-del:hover, .pe-row-del:focus-visible { background: var(--danger-a10); border-color: var(--danger-a35); color: var(--danger-text); }
.pe-delete-btn { margin-left: auto; color: var(--danger-text); border-color: var(--danger-a35); }
.pe-delete-btn:hover, .pe-delete-btn:focus-visible { background: var(--danger-a08); border-color: var(--danger-text); color: var(--danger-text); }
.pe-rag { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
/* Non-colour cue for RAG status (colour-blind accessibility):
   green = circle, yellow = diamond, red = square. Shape carries the
   meaning alongside hue so the state survives without colour. */
.pe-rag.green { background: var(--success-text); }
.pe-rag.yellow { background: var(--status-warning); border-radius: 1px; transform: rotate(45deg); }
.pe-rag.red { background: var(--danger-text); border-radius: 1px; }
.pe-period-select {
  width: calc(100% - 8px); margin: 0 4px; padding: 6px 8px;
  border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm);
  font: 400 12px var(--font-primary); background: var(--bg-primary); color: var(--text-primary);
}
.pe-period-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pe-workspace { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; }
/* Scroll fix: as a flex column the direct children would otherwise shrink to fit
   the bounded height instead of overflowing, so the workspace never scrolls.
   Pinning flex-shrink to 0 lets the stack grow past the viewport and scroll. */
.pe-workspace > * { flex-shrink: 0; }
.pe-workspace > .pe-kpi-grid,
.pe-workspace > .pe-ops-grid,
.pe-workspace > .pe-card { width: 100%; min-width: 0; box-sizing: border-box; }
.pe-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 10px;
  width: 100%;
}
.pe-kpi-card {
  background: var(--bg-primary); border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-hairline);
  min-width: 0;
}
.pe-kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.pe-kpi-value { font-size: 18px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* C3 (PE valuation provenance): provenance bar above the KPI grid -- a
   badge (unverifiziert/verifiziert) plus who/when and the advisor's toggle.
   Advisory only, never blocks the KPI grid underneath it. */
.pe-verif-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; box-sizing: border-box;
}
.pe-verif-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  border: 0.5px solid var(--border-hairline);
}
.pe-verif-badge--unverified { background: rgba(196, 143, 33, 0.12); border-color: var(--status-warning); color: var(--status-warning); }
.pe-verif-badge--verified { background: rgba(46, 125, 92, 0.12); border-color: var(--success-text); color: var(--success-text); }
.pe-verif-meta { font-size: 0.75rem; color: var(--text-muted); }
.pe-verif-btn {
  margin-left: auto; padding: 4px 10px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm);
  background: var(--bg-secondary); color: var(--text-primary); font-size: 0.75rem; cursor: pointer;
}
.pe-verif-btn:hover, .pe-verif-btn:focus-visible { background: var(--bg-primary); border-color: var(--accent); outline: none; }
.pe-card {
  background: var(--bg-primary); border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-hairline);
}
.pe-card-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); font-weight: 700; margin-bottom: 10px; }
.pe-card--flush { border: none; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.pe-card--flush .pe-card-title { margin-top: 4px; }
.pe-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pe-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); padding: 6px 8px; border-bottom: 0.5px solid var(--border-hairline); font-weight: 600; }
.pe-table td { padding: 8px; border-bottom: 0.5px solid var(--border-hairline); vertical-align: middle; }
.pe-table tr:last-child td { border-bottom: none; }
.pe-table tr { cursor: pointer; transition: background .08s; }
.pe-table tbody tr:hover { background: var(--bg-secondary); }
.pe-table-editable tr { cursor: default; }
.pe-table-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.pe-input {
  width: 100%; padding: 6px 8px; border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm); font-size: 12px; background: var(--bg-primary);
  color: var(--text-primary); box-sizing: border-box;
}
.pe-input-compact { width: auto; min-width: 120px; }
.pe-input-date { max-width: 140px; }
.pe-textarea { resize: vertical; min-height: 72px; font-family: inherit; }
.pe-form-grid { display: flex; flex-direction: column; gap: 10px; }
.pe-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pe-form-row-deadline { align-items: center; }
.pe-form-field { flex: 1; min-width: 140px; }
.pe-form-field label {
  display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); margin-bottom: 4px;
}
.pe-form-deadlines { display: flex; flex-direction: column; gap: 8px; }
.pe-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.pe-toggle-inline { margin: 0; }
.pe-toggle-row input { accent-color: var(--accent); }
.pe-btn-xs { padding: 4px 8px !important; font-size: 0.75rem !important; }
.pe-link-btn {
  background: none; border: none; color: var(--accent-text); font-size: 0.75rem;
  cursor: pointer; text-decoration: underline; padding: 0 4px;
}
.pe-val-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pe-val-card {
  padding: 10px 12px; border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md); background: var(--bg-primary);
}
.pe-val-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pe-val-readonly { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 4px; }

/* PE Jahreskalender - Fonds + Portco Termine */
.pe-main-section,
.pe-cal-section {
  margin: 0 0 12px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--bg-primary); box-shadow: var(--shadow-hairline); overflow: hidden;
}
.pe-main-section-head,
.pe-cal-section-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
}
.pe-main-section-head:hover,
.pe-cal-section-head:hover { background: var(--bg-secondary); }
.pe-main-section-title,
.pe-cal-section-title { flex: 1; }
.pe-main-section-badge,
.pe-cal-section-badge {
  font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  background: var(--sidebar-accent-bg); color: var(--accent-text);
}
.pe-main-section-caret,
.pe-cal-section-caret { font-size: 0.75rem; transition: transform .15s; color: var(--text-muted); }
.pe-main-section.open .pe-main-section-caret,
.pe-cal-section.open .pe-cal-section-caret { transform: rotate(180deg); }
.pe-main-section-body,
.pe-cal-section-body { padding: 0 12px 12px; border-top: 0.5px solid var(--border-hairline); }
.pe-main-section-body .pe-card,
.pe-main-section-body .pe-ops-grid,
.pe-main-section-body .pe-charts-grid { margin-top: 10px; }
.pe-main-section-body .pe-card:first-child,
.pe-main-section-body .pe-ops-grid:first-child,
.pe-main-section-body .pe-charts-grid:first-child { margin-top: 10px; }
.pe-main-section--flat .pe-main-section-body { padding: 0; border-top: none; }
.pe-cal-wrap--full { padding-top: 8px; }
.pe-cal-year-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.pe-cal-nav-btn {
  width: 28px; height: 28px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm);
  background: var(--bg-primary); cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-secondary);
}
.pe-cal-nav-btn:hover { background: var(--bg-secondary); color: var(--accent-text); }
.pe-cal-year-label { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }
.pe-cal-filters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.pe-cal-filter {
  padding: 4px 10px; font-size: 0.75rem; border: 0.5px solid var(--border-hairline); border-radius: 12px;
  background: var(--bg-secondary); cursor: pointer; color: var(--text-secondary);
}
.pe-cal-filter.active { background: var(--sidebar-accent-bg); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.pe-cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 10px; }
.pe-cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.pe-cal-leg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.pe-cal-months-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-bottom: 12px;
}
.pe-cal-month { border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 8px; background: var(--bg-primary); }
.pe-cal-month-hdr { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 6px; text-align: center; }
.pe-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 2px; }
.pe-cal-weekdays span { font-size: 8px; text-align: center; color: var(--text-muted); font-weight: 600; }
.pe-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pe-cal-day {
  position: relative; min-height: 28px; padding: 2px 1px 1px; border: none; border-radius: 3px;
  background: transparent; cursor: pointer; font-size: 0.75rem; color: var(--text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.pe-cal-day.empty { pointer-events: none; }
.pe-cal-day:hover { background: var(--bg-secondary); }
.pe-cal-day.has-events { font-weight: 700; }
/* Day number stays readable (--text-primary); event type is conveyed by the
   coloured dots below it. Coloured digits failed contrast (#2E9DFF ~2.85:1). */
.pe-cal-day.has-fund .pe-cal-day-num,
.pe-cal-day.has-portco .pe-cal-day-num { color: var(--text-primary); }
.pe-cal-day.selected { background: var(--sidebar-accent-bg); outline: 1px solid var(--accent); }
.pe-cal-day-num { line-height: 1.1; }
.pe-cal-day-dots { display: flex; gap: 2px; margin-top: 1px; flex-wrap: wrap; justify-content: center; }
.pe-cal-mini-dot { width: 4px; height: 4px; border-radius: 50%; }
/* Solid type colour fills ONLY the small dots and legend swatches. Qualified to
   .pe-cal-ev-dot so the same type class on a full-width row (the day-detail row)
   does not paint the whole row and make its text unreadable. */
.pe-cal-ev-dot.pe-cal-ev-fund, .pe-cal-leg.pe-cal-ev-fund, .pe-cal-mini-dot.pe-cal-ev-fund { background: var(--accent); }
.pe-cal-ev-dot.pe-cal-ev-board, .pe-cal-leg.pe-cal-ev-board, .pe-cal-mini-dot.pe-cal-ev-board { background: var(--chart-blue); }
.pe-cal-ev-dot.pe-cal-ev-action, .pe-cal-leg.pe-cal-ev-action, .pe-cal-mini-dot.pe-cal-ev-action { background: #E8A04B; }
.pe-cal-ev-dot.pe-cal-ev-reporting, .pe-cal-mini-dot.pe-cal-ev-reporting { background: #4CB17C; }
.pe-cal-ev-dot.pe-cal-ev-scheduled, .pe-cal-mini-dot.pe-cal-ev-scheduled { background: var(--text-muted); }
.pe-cal-detail { margin-top: 8px; padding: 10px 12px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--bg-secondary); font-size: 0.75rem; }
.pe-cal-detail.empty { color: var(--text-muted); font-style: italic; }
.pe-cal-detail-hdr { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 8px; }
.pe-cal-detail-row { padding: 6px 0; border-bottom: 0.5px dashed var(--border-hairline); }
.pe-cal-detail-row:last-child { border-bottom: none; }
/* Type colour shown as a left-border accent, keeping the row background neutral
   and the text fully legible. */
.pe-cal-detail-row[class*="pe-cal-ev-"] { background: transparent; border-left: 3px solid var(--border-hairline); padding-left: 8px; }
.pe-cal-detail-row.pe-cal-ev-fund { border-left-color: var(--accent); }
.pe-cal-detail-row.pe-cal-ev-board { border-left-color: var(--chart-blue); }
.pe-cal-detail-row.pe-cal-ev-action { border-left-color: #E8A04B; }
.pe-cal-detail-row.pe-cal-ev-reporting { border-left-color: #4CB17C; }
.pe-cal-detail-row.pe-cal-ev-scheduled { border-left-color: var(--text-muted); }
.pe-cal-detail-type { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; }
.pe-cal-month-list { margin-bottom: 12px; }
.pe-cal-month-list-hdr { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 4px; padding-bottom: 4px; border-bottom: 0.5px solid var(--border-hairline); }
.pe-cal-event { display: grid; grid-template-columns: 52px 8px 1fr; gap: 6px; align-items: start; padding: 5px 2px; font-size: 0.75rem; cursor: pointer; border-radius: 3px; }
.pe-cal-event:hover { background: var(--bg-secondary); }
.pe-cal-event.rag-red .pe-cal-ev-dot { background: var(--aicons-negative) !important; border-radius: 1px; }
.pe-cal-event.rag-yellow .pe-cal-ev-dot { background: var(--aicons-warning) !important; border-radius: 1px; transform: rotate(45deg); }
.pe-cal-ev-date { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pe-cal-ev-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.pe-cal-ev-label { line-height: 1.35; }
.pe-cal-ev-scope { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.pe-cal-ev-scope.fund { color: var(--accent-text); font-weight: 600; }
.pe-cal-open-btn {
  display: block; width: 100%; margin-top: 8px; padding: 7px 10px; font-size: 0.75rem; font-weight: 600;
  border: 0.5px solid var(--accent); border-radius: var(--radius-sm); background: transparent; color: var(--accent-text); cursor: pointer;
}
.pe-cal-open-btn:hover { background: var(--sidebar-accent-bg); }
.pe-cal-open-btn--inline { width: auto; margin-top: 8px; }
.pe-cal-panel-badge {
  font-size: 0.75rem; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  background: var(--sidebar-accent-bg); color: var(--accent-text); margin-right: 4px;
}
@media (max-width: 900px) { .pe-cal-months-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pe-cal-months-grid { grid-template-columns: 1fr; } }
.pe-tab-bar { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.pe-tab-btn {
  padding: 5px 12px; border-radius: var(--radius-sm); border: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary); font-size: 0.75rem; cursor: pointer; color: var(--text-secondary);
}
.pe-tab-btn.active { background: var(--sidebar-accent-bg); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.pe-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 8px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border-hairline);
  font-size: 12px;
  align-items: center;
}
.pe-kpi-row:last-child { border-bottom: none; }
.pe-delta.ok { color: var(--success-text); }
.pe-delta.warn { color: var(--warning-text); }
.pe-delta.bad { color: var(--danger-text); }
.pe-pending-strip { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }
.pe-pending-strip li { margin: 4px 0; }
.pe-panel-card {
  background: var(--bg-primary); border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md); margin: 8px 10px; padding: 12px 14px; box-shadow: var(--shadow-hairline);
}
.pe-panel-sector-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; align-items: center; padding: 5px 0; font-size: 0.75rem; border-bottom: 0.5px solid var(--border-hairline); }
.pe-panel-sector-row:last-child { border-bottom: none; }
.pe-panel-sector-lbl { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-panel-sector-bar { height: 6px; border-radius: 3px; background: var(--bg-secondary); overflow: hidden; grid-column: 1 / -1; }
.pe-panel-sector-fill { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.pe-panel-sector-pct { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.75rem; }
#cwPanelPe .pe-deadline-row { font-size: 0.75rem; }
.pe-stage-hdr {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  box-shadow: var(--shadow-hairline);
}
.pe-stage-hdr-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.pe-stage-hdr-sub { font-size: 0.75rem; color: var(--text-muted); }
.pe-stage-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border-hairline);
}
.pe-stage-nav-btn {
  font: 600 0.75rem var(--font-primary);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.pe-stage-nav-btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 0.5px solid var(--border-hairline);
}
.pe-stage-nav-hint { font-size: 0.75rem; color: var(--text-muted); flex: 1; min-width: 120px; }
.pe-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  width: 100%;
}
.pe-ops-grid .pe-ops-card { height: 100%; min-width: 0; }
.pe-ops-kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.pe-ops-kv:last-child { border-bottom: none; }
.pe-ops-kv span:first-child { color: var(--text-secondary); }
.pe-ops-kv span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.pe-ops-text { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; word-break: break-word; }
.pe-deadline-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; padding: 5px 0; border-bottom: 0.5px solid var(--border-hairline); }
.pe-deadline-row:last-child { border-bottom: none; }
.pe-deadline-date { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.pe-checklist-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; padding: 4px 0; }
.pe-check-yes { color: var(--success-text); font-weight: 700; }
.pe-check-no { color: var(--text-muted); }
/* Breadcrumb + back-to-fund */
.pe-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; flex-wrap: wrap; }
.pe-back-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-hairline); background: var(--bg-secondary); color: var(--text-secondary);
  font: 500 0.75rem var(--font-primary); cursor: pointer;
}
.pe-back-btn:hover, .pe-back-btn:focus-visible { background: var(--sidebar-accent-bg); border-color: var(--accent); color: var(--accent-text); }
.pe-crumb-link { color: var(--accent-text); cursor: pointer; text-decoration: none; }
.pe-crumb-link:hover, .pe-crumb-link:focus-visible { text-decoration: underline; }
.pe-crumb-sep { color: var(--text-muted); }
.pe-crumb-current { color: var(--text-primary); font-weight: 600; }
/* Quick-action strip */
.pe-quick-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pe-quick-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: 600 0.75rem var(--font-primary); cursor: pointer;
}
.pe-quick-btn:hover, .pe-quick-btn:focus-visible { filter: brightness(1.06); }
.pe-quick-btn.secondary { background: transparent; color: var(--accent-text); }
.pe-quick-btn.secondary:hover, .pe-quick-btn.secondary:focus-visible { background: var(--sidebar-accent-bg); }
/* Sector breakdown - full-width stacked bar + legend */
.pe-sector-card { width: 100%; }
.pe-sector-total {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: -4px 0 12px;
  font-variant-numeric: tabular-nums;
}
.pe-sector-stack {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
  margin: 0 0 14px;
  box-shadow: inset 0 0 0 0.5px var(--border-hairline);
}
.pe-sector-stack-seg {
  position: relative;
  height: 100%;
  min-width: 4px;
  transition: filter .12s, opacity .12s;
  cursor: default;
}
.pe-sector-stack-seg:hover { filter: brightness(1.06); opacity: 0.92; }
.pe-sector-legend {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.pe-sector-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1.5fr) minmax(72px, auto) 48px;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.pe-sector-legend-row:last-child { border-bottom: none; padding-bottom: 0; }
.pe-sector-legend-row:first-child { padding-top: 0; }
.pe-sector-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.pe-sector-name { font-size: 12px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-sector-amt { font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.pe-sector-pct { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.pe-sector-mini-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.pe-sector-mini-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
}
.pe-sector-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
/* PE fund analytics charts - WM-konsistente Farben & Layout */
.pe-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-bottom: 12px;
}
.pe-charts-grid .pe-chart-wide { grid-column: 1 / -1; }
.pe-chart-sub { font-size: 0.75rem; color: var(--text-muted); margin: -2px 0 10px; line-height: 1.4; }
.pe-chart-canvas-wrap { position: relative; width: 100%; height: 220px; min-height: 180px; }
.pe-chart-canvas-wrap--tall { height: 260px; }
.pe-chart-canvas-wrap--jcurve { height: 300px; min-height: 260px; }
.pe-chart-canvas-wrap canvas { max-width: 100%; max-height: 100%; }
.pe-stack-bar-wrap { margin-top: 4px; }
.pe-stack-bar {
  display: flex; width: 100%; height: 28px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg-secondary);
  box-shadow: inset 0 0 0 0.5px var(--border-hairline); position: relative;
}
.pe-stack-bar-seg { height: 100%; min-width: 2px; transition: filter .12s; position: relative; }
.pe-stack-bar-seg:hover { filter: brightness(1.05); }
.pe-stack-bar-lbl {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 0.75rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  white-space: nowrap; pointer-events: none;
}
.pe-sector-stack-lbl {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 8.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4);
  pointer-events: none;
}
.pe-waterfall { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pe-wf-row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 8px; font-size: 0.75rem; }
.pe-wf-label { color: var(--text-muted); font-weight: 500; }
.pe-wf-bar-wrap { height: 8px; background: var(--aicons-hairline); border-radius: 4px; overflow: hidden; }
.pe-wf-bar { display: block; height: 100%; border-radius: 4px; background: var(--accent); min-width: 4px; }
.pe-wf-row.pe-wf-up .pe-wf-bar { background: var(--aicons-positive); }
.pe-wf-row.pe-wf-down .pe-wf-bar { background: var(--aicons-negative); }
.pe-wf-row.pe-wf-total .pe-wf-bar { background: #B05636; }
.pe-wf-row.pe-wf-total { font-weight: 600; border-top: 0.5px solid var(--border-hairline); padding-top: 6px; margin-top: 2px; }
.pe-wf-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.pe-stack-bar-marker {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--text-muted); opacity: 0.65; pointer-events: none; z-index: 2;
}
.pe-stack-bar-marker::after {
  content: '1.0x'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font: 600 8px var(--font-primary); color: var(--text-muted); white-space: nowrap;
}
.pe-stack-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.pe-stack-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--text-secondary); }
.pe-stack-legend-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.pe-stack-legend-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
@media (max-width: 900px) { .pe-charts-grid { grid-template-columns: 1fr; } .pe-charts-grid .pe-chart-wide { grid-column: auto; } }

/* Portco commentary + meta */
.pe-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px 18px; font-size: 12px; }
.pe-meta-grid .pe-meta-k { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.6px; }
.pe-meta-grid .pe-meta-v { color: var(--text-primary); font-weight: 600; }
.pe-commentary { font-size: 12px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; }
/* LP-Reporting stepper + lock banner */
.pe-rp-stepper { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 10px 0 4px; }
.pe-rp-step { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 14px; border: 0.5px solid var(--border-hairline); background: var(--bg-secondary); font-size: 0.75rem; color: var(--text-muted); }
.pe-rp-step .pe-rp-step-num { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; background: var(--border-hairline); color: var(--text-secondary); }
.pe-rp-step.done { border-color: var(--success-text); color: var(--success-text); }
.pe-rp-step.done .pe-rp-step-num { background: var(--success-text); color: #fff; }
.pe-rp-step.current { border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.pe-rp-step.current .pe-rp-step-num { background: var(--accent); color: #fff; }
.pe-rp-step-arrow { color: var(--text-muted); font-size: 0.75rem; }
.pe-rp-locked-banner { display: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.4); color: #8a6d12; font-size: 0.75rem; margin-top: 10px; }
.pe-rp-locked-banner.active { display: flex; }
/* PE KI-Bewertung (Fund / Portco - Phase A regelbasiert, Phase B LLM) */
.pe-ai-wrap { margin-bottom: 12px; }
.pe-ai-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border-hairline); flex-wrap: wrap; }
.pe-ai-disclaimer { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; flex: 1; min-width: 180px; }
.pe-ai-refresh-btn { font: 600 0.75rem var(--font-primary); padding: 4px 10px; border: 0.5px solid var(--border-hairline); background: var(--bg-secondary); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.pe-ai-refresh-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.pe-ai-refresh-btn:disabled { opacity: 0.5; cursor: wait; }
.pe-ai-score-pill { display: inline-flex; align-items: center; gap: 3px; font: 600 0.75rem var(--font-primary); padding: 2px 7px; border-radius: var(--radius-full); letter-spacing: 0.3px; white-space: nowrap; }
.pe-ai-score-pill.ok { background: var(--success-bg); color: var(--success-text); }
.pe-ai-score-pill.warn { background: var(--warning-bg); color: var(--warning-text); }
.pe-ai-score-pill.bad { background: var(--danger-bg); color: var(--danger-text); }
.ai-strategy-card.pe-ai-thinking { opacity: 0.72; pointer-events: none; }

/* === PE MODE BANNER === */
/* === CLIENT PICKER SCREEN === */
.picker-screen { display: none; padding: 40px 0; }
.picker-screen.active { display: block; }
.picker-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.picker-head { text-align: center; margin-bottom: 32px; }
.picker-head h1 { font-size: 28px; color: var(--aicons-anthracite); letter-spacing: 1px; text-transform: none; border: none; margin-bottom: 6px; }
.picker-head .sub { font-size: 13px; color: var(--aicons-steel); }
.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.client-card { background: var(--aicons-white); border: 1px solid var(--aicons-hairline); border-radius: 4px; padding: 20px 22px; cursor: pointer; transition: all .15s; border-top: 4px solid var(--aicons-hairline); }
.client-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); border-top-color: var(--accent); }
.client-card.new { border-style: dashed; border-color: var(--aicons-hairline); background: var(--aicons-zebra); }
.client-card.new:hover { border-color: var(--accent); border-style: solid; background: var(--bg-primary); }
.client-card .nm { font-size: 18px; font-weight: 600; color: var(--aicons-anthracite); }
.client-card .loc { font-size: 0.75rem; color: var(--aicons-steel); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.client-card .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--aicons-hairline); }
.client-card .stat .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--aicons-steel); }
.client-card .stat .v { font-size: 14px; font-weight: 600; color: var(--aicons-anthracite); margin-top: 1px; }
.client-card .stat .v.bit { color: var(--accent-text); font-size: 12px; }
.client-card .pill-row { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.client-card .pill { font-size: 0.75rem; padding: 3px 8px; border-radius: 10px; background: var(--aicons-hairline); color: var(--aicons-anthracite); letter-spacing: 0.5px; text-transform: uppercase; }
.client-card .pill.last { background: var(--accent); color: white; }
.client-card.new .icon { font-size: 36px; color: var(--aicons-steel); text-align: center; margin: 18px 0; }
.client-card.new .desc { font-size: 12px; color: var(--aicons-steel); text-align: center; line-height: 1.5; }

/* =========================================================
   COWORK SHELL: three-column layout
   ========================================================= */
.main-app { display: none; height: 100vh; }
.main-app.active { display: flex; flex-direction: column; position: relative; }

/* Outer app shell: grey canvas with separated white-card columns */
.cowork-shell {
  display: grid;
  grid-template-columns: var(--cw-sidebar-w, 240px) 1fr var(--cw-rightpane-w, 300px);
  grid-template-rows: 1fr;
  gap: 10px;
  padding: 10px;
  padding-top: 36px;
  flex: 1;
  overflow: hidden;
  height: 100%;
  background: var(--bg-sidebar);
  position: relative;
  transition: grid-template-columns .2s ease;
}
/* Resizing: no eased transition while the user is actively dragging the
   handle (see .cw-sidebar-resize below) -- the width follows the pointer
   1:1, the .2s ease is only for the collapse/reopen toggle. */
.cowork-shell.cw-resizing-sidebar { transition: none; }
.cowork-shell.cw-resizing-rightpane { transition: none; }
.cw-shell-handles {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 20px;
  z-index: 20;
  pointer-events: none;
}
.cw-shell-handles .cw-side-collapse-btn,
.cw-shell-handles .cw-sidebar-reopen,
.cw-shell-handles .cw-panel-reopen {
  pointer-events: auto;
  position: absolute;
  top: 0;
}
#cwSidebarCollapseBtn,
#cwSidebarReopen { left: 0; }
#cwPanelCollapseBtn,
#cwPanelReopen { right: 0; }

/* ── LEFT SIDEBAR ── */
.cw-sidebar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--sidebar-text);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  position: relative;
  transition: width .2s, min-width .2s, opacity .2s;
}
/* Resize handle on the right edge of the left sidebar: drag to widen/narrow
   (200-560px, persisted per user in localStorage). Same visual language as
   #cwChatPaneResizeHandle (transparent strip, accent tint on hover/drag). */
.cw-sidebar-resize {
  position: absolute;
  top: 0; right: -3px; bottom: 0;
  width: 7px;
  cursor: col-resize;
  background: transparent;
  z-index: 16;
  touch-action: none;
}
.cw-sidebar-resize:hover,
.cw-sidebar-resize.active { background: var(--accent-a20); }
.cw-logo {
  font: 700 15px var(--font-primary);
  color: var(--sidebar-text-active);
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.cw-logo .ai { color: var(--accent-text); font-weight: 700; }
/* Brand sits in the shell handle row - zero height taken from main workspace */
.cw-shell-brand {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  max-width: calc(100% - 120px);
  white-space: nowrap;
}
.cw-shell-brand .cw-logo {
  margin: 0;
  font: 300 13px var(--font-primary);
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: var(--accent-text);
}
.cw-shell-brand .cw-logo .ai {
  font-weight: 600;
  letter-spacing: 0.34em;
}
.cw-main-brand { display: none !important; }
.cw-tagline { display: none; }
.cw-client-chip { display: none; }

/* Flow section (middle of sidebar) */
.cw-sidebar-middle {
  flex: 1;
  padding: 4px 0;
  overflow-y: auto;
}
.cw-flow-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--sidebar-text-muted);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: color .12s;
  margin-top: 10px;
}
.cw-flow-header:hover { color: var(--sidebar-text); }
.cw-flow-header.active-flow { color: var(--accent-text); }

/* Vertical step list */
.cw-step-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  margin: 1px 6px;
  transition: background .1s;
  position: relative;
}
.cw-step-row:hover { background: rgba(31,30,29,0.05); }
.cw-step-row.state-active {
  background: var(--sidebar-accent-bg);
}
.cw-step-row.state-locked { opacity: 0.38; cursor: not-allowed; }
.cw-step-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.cw-step-icon svg { width: 16px; height: 16px; }
/* done: green check */
.cw-step-row.state-done .cw-step-icon { color: var(--success-text); }
/* active: coral */
.cw-step-row.state-active .cw-step-icon { color: var(--accent-text); }
/* pending: muted circle */
.cw-step-row.state-pending .cw-step-icon { color: var(--sidebar-text-muted); }
/* locked */
.cw-step-row.state-locked .cw-step-icon { color: rgba(31,30,29,0.20); }

.cw-step-body { flex: 1; min-width: 0; }
.cw-step-label {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--sidebar-text);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-step-row.state-active .cw-step-label {
  font-weight: 700;
  color: var(--sidebar-text-active);
}
.cw-step-row.state-done .cw-step-label {
  color: var(--sidebar-text-muted);
  text-decoration: line-through;
}
.cw-step-sublabel {
  font-size: 0.75rem;
  color: var(--sidebar-text-muted);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-step-row.state-active .cw-step-sublabel { color: rgba(176, 86, 54,0.75); }
/* Active indicator bar on left edge */
.cw-step-row.state-active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Progress bar below step label */
.cw-step-prog {
  height: 2px;
  background: rgba(250,249,245,0.12);
  border-radius: 1px;
  margin-top: 4px;
  overflow: hidden;
}
.cw-step-prog .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  transition: width .25s;
}
.cw-step-row.state-done .cw-step-prog .fill { background: var(--success-text); }

/* ── SIDEBAR BOTTOM: user chip ── */
.cw-sidebar-bottom {
  padding: 0 14px;
  height: var(--workspace-bottombar-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 0.5px solid var(--bg-sidebar-border);
  flex-shrink: 0;
  position: relative;
}
.cw-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  transition: background .12s;
}
.cw-user-chip:hover { background: rgba(31,30,29,0.06); }
.cw-avatar {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--accent);
  color: #FAF9F5;
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.cw-user-name {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--sidebar-text);
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-user-dots {
  color: var(--sidebar-text-muted);
  font-size: 16px;
  line-height: 1;
}

/* User menu (upward) */
.cw-user-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 10px;
  right: 10px;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  min-width: 180px;
}
.cw-user-menu.open { display: block; }
/* Compact density (2026-08-15): tight rows, small leading icon + one-line
   label, matching the reference account-menu style. Row height target
   ~30-32px (was ~38px). */
.cw-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .1s;
}
.cw-menu-item:hover { background: var(--bg-secondary); }
.cw-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.cw-menu-divider { height: 0.5px; background: var(--border-hairline); margin: 4px 0; }
.cw-menu-item.danger { color: var(--danger-text); }
.cw-menu-item.admin-item { display: none; }
.cw-menu-item.admin-item.visible { display: flex; }
/* #99: the account-menu "Dateien" item is redundant on desktop/tablet since
   the file browser is permanently docked in the left sidebar (.cw-filetree-
   dock). Hidden by default; re-shown at <=900px, where the dock itself is
   hidden (see .cw-filetree-dock { display: none; } below) and this menu item
   remains the only path to the file browser (opens the full-screen enlarge
   modal, which works at any width). */
#cwMenuFiles, #cwMenuFilesDivider { display: none; }
/* Non-interactive identity row at the top of the menu: current user's
   first name, muted/smaller, no hover state, not a menu item. */
.cw-menu-identity {
  padding: 8px 12px 6px;
  font-size: 12px;
  color: var(--sidebar-text-muted, var(--text-muted));
  cursor: default;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── File tree dock (Dateien, 2026-08-16 ADR-0015 tree revision) ──
   PERMANENTLY visible in the sidebar, docked above the account chip/menu --
   not a toggle panel (reversed from the earlier click-to-reveal design).
   Lazy-loads via fs/roots + fs/list (ai/js/filetree.js). Retires
   ai/dateien.html. The "Dateien" account-menu item and the dock's own
   enlarge button both open #cwFtEnlargeModal, a full-size modal rendering
   the SAME tree state (see .cwft-modal-lg below) for a larger workspace. */
.cw-filetree-dock {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-top: 0.5px solid var(--bg-sidebar-border);
  max-height: min(34vh, 320px);
  min-height: 96px;
}
.cwft-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px 8px 12px; border-bottom: 0.5px solid var(--border-hairline); flex: 0 0 auto;
}
.cwft-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--sidebar-text-muted); }
.cwft-close, .cwft-enlarge { border: none; background: none; cursor: pointer; color: var(--sidebar-text-muted); padding: 4px; border-radius: var(--radius-xs); display: flex; }
.cwft-close:hover, .cwft-enlarge:hover { color: var(--text-primary); background: rgba(31,30,29,0.06); }
.cwft-close svg, .cwft-enlarge svg { width: 14px; height: 14px; }
.cwft-size { flex: 0 0 auto; font-size: 11px; font-family: var(--font-primary); line-height: inherit; color: var(--sidebar-text-muted); margin-left: 4px; white-space: nowrap; }
.cwft-banner { padding: 6px 10px; font-size: 11.5px; flex: 0 0 auto; }
.cwft-banner:empty { display: none; padding: 0; }
.cwft-banner.error { background: var(--danger-bg); color: var(--danger-text); }
.cwft-banner.ok { background: var(--success-bg); color: var(--success-text); }
.cwft-banner.info { background: var(--bg-secondary); color: var(--sidebar-text-muted); }
/* No forced ellipsis: names are never truncated. .cwft-body sizes to its
   widest row (width: max-content) up to the panel's own max-width, then
   overflow-x takes over -- horizontal scroll instead of clipping the name.
   The enlarge modal (.cwft-body-lg) has much more room before that kicks in. */
.cwft-body {
  overflow-y: auto; overflow-x: auto; flex: 1 1 auto; padding: 4px 0; min-height: 60px;
  width: max-content; min-width: 100%;
}
.cwft-empty, .cwft-loading { padding: 10px 16px; font-size: 12px; color: var(--sidebar-text-muted); white-space: nowrap; }

.cwft-row {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 0;
  font-size: 12.5px; font-family: var(--font-primary); line-height: 20px; color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  margin: 0 6px;
  width: max-content;
  /* #104: fixed row height so the caret/icon/label/size baseline never
     shifts with platform font-metric differences -- Chrome/Edge on Windows
     compute default line-height from the same self-hosted Open Sans file,
     but an explicit box height removes any residual dependency on that
     computation, so the row renders identically on every platform. */
  min-height: 28px;
}
.cwft-row:hover { background: rgba(31,30,29,0.05); }
/* Internal drag = move (accent outline). External OS-file drag = upload
   (success/green outline) -- visually distinct so the user can tell which
   operation a drop will perform before releasing. */
.cwft-row.drop-target { outline: 1.5px dashed var(--accent); outline-offset: -2px; background: var(--accent-a10); }
.cwft-row.drop-target-upload { outline: 1.5px dashed var(--success-text); outline-offset: -2px; background: var(--success-bg); }
.cwft-row.dragging { opacity: .4; }
/* #130 (Petra Novak, 260817): "In Dateien anzeigen" reveal highlight -- a
   brief flash on the exact file row after ftRevealPath() expands + scrolls
   to it, so the action has a visible result instead of a silent tree
   expansion the user has to spot on their own. */
.cwft-row.cwft-row-revealed { animation: cwftRevealFlash 2.2s ease-out; }
@keyframes cwftRevealFlash {
  0%, 15% { background: var(--accent-a10); outline: 1.5px solid var(--accent); outline-offset: -2px; }
  100% { background: transparent; outline-color: transparent; }
}
/* Container-level "empty space" drop zone: external file dropped anywhere
   in the tree body/modal that isn't a specific folder row uploads into the
   currently-open (root) folder. */
.cwft-drop-zone-active { outline: 1.5px dashed var(--success-text); outline-offset: -3px; background: var(--success-bg); }
/* Explicit per-depth indentation is set inline in JS (14px * depth) -- kept
   as an inline style, not a CSS class, because it's a computed value; the
   fixed 14px-per-level step itself is the platform-robust part. */
.cwft-indent { flex: 0 0 auto; height: 1px; }
/* #104: fixed caret box (16x20) and fixed glyph size (10x10, set below via
   .cwft-caret svg with explicit width/height) -- not font-relative, so it
   cannot drift with the body font size or line-height on any platform.
   appearance:none strips the residual native <button> chrome some Windows
   Chrome/Edge builds still apply even after border/background/padding reset. */
.cwft-caret {
  width: 16px; height: 20px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; appearance: none; -webkit-appearance: none;
  cursor: pointer; padding: 0; color: var(--sidebar-text-muted);
}
.cwft-caret svg { display: block; width: 10px; height: 10px; transition: transform .12s; }
.cwft-node.expanded > .cwft-row .cwft-caret svg { transform: rotate(90deg); }
.cwft-caret.spacer { visibility: hidden; cursor: default; }
/* #104: the folder/file/shared type icon is an inline SVG with a viewBox but
   no width/height attribute (see filetree.js SVGS). Absent an explicit size
   rule on the svg itself, browsers fall back to differing default
   replaced-element sizing algorithms for such SVGs (this is the documented
   cross-browser inconsistency behind the "tree looks different on PC"
   report) -- Chrome/Edge on Windows do not always agree with Safari/macOS on
   the intrinsic box for a viewBox-only <svg>. Fixing width/height to 100% of
   the already-fixed 14x14 wrapper, plus display:block to drop the inline
   baseline gap, makes the icon render byte-identical everywhere. Scoped to
   `.cwft-row > .cwft-icon` (direct child only) so it never touches the
   .cwft-caret/.cwft-kebab icon wrappers, which set their own explicit sizes
   below and must keep them. */
.cwft-icon { width: 14px; height: 14px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--sidebar-text-muted); }
.cwft-row.is-dir .cwft-icon { color: var(--accent-text); }
.cwft-row > .cwft-icon svg,
.cwft-modal-tree .cwft-picker-icon svg {
  display: block; width: 100%; height: 100%;
}
.cwft-name-btn {
  flex: 0 0 auto; min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap;
  text-align: left; background: none; border: none; appearance: none; -webkit-appearance: none;
  font: inherit; line-height: inherit; color: inherit; cursor: pointer; padding: 3px 4px 3px 0;
}
.cwft-row.is-file .cwft-name-btn:hover { text-decoration: underline; }
.cwft-role-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--sidebar-text-muted); flex: 0 0 auto; }
.cwft-kebab {
  width: 20px; height: 20px; flex: 0 0 auto; display: none; align-items: center; justify-content: center;
  border: none; background: none; appearance: none; -webkit-appearance: none;
  cursor: pointer; color: var(--sidebar-text-muted); border-radius: var(--radius-xs);
}
.cwft-row:hover .cwft-kebab, .cwft-kebab.open { display: flex; }
.cwft-kebab:hover, .cwft-kebab.open { background: rgba(31,30,29,0.08); color: var(--text-primary); }
.cwft-kebab svg { display: block; width: 14px; height: 14px; }

/* Kebab context menu: single floating instance (id=cwFtCtxMenu), positioned
   next to whichever row's "..." was clicked. z-index above the enlarge-modal
   backdrop (500) so it still works when a row is right-clicked from inside
   the enlarged view, not just the sidebar dock. */
.cwft-ctxmenu {
  position: fixed; min-width: 172px; background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); z-index: 600; overflow: hidden; padding: 4px 0;
}
.cwft-ctxmenu .cwft-ctx-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12.5px; color: var(--text-primary); cursor: pointer;
}
.cwft-ctxmenu .cwft-ctx-item:hover { background: var(--bg-secondary); }
.cwft-ctxmenu .cwft-ctx-item.danger { color: var(--danger-text); }
.cwft-ctxmenu .cwft-ctx-item svg { width: 13px; height: 13px; flex: 0 0 auto; }
.cwft-ctxmenu .cwft-ctx-sep { height: 0.5px; background: var(--border-hairline); margin: 4px 0; }

/* Folder-picker (Verschieben) modal */
.cwft-modal-backdrop { position: fixed; inset: 0; background: var(--overlay-scrim); display: none; align-items: center; justify-content: center; z-index: 500; }
.cwft-modal-backdrop.open { display: flex; }
.cwft-modal {
  background: var(--bg-primary); border-radius: var(--radius-lg); padding: 18px; width: 380px; max-width: 92vw;
  box-shadow: var(--shadow-lg); max-height: 80vh; display: flex; flex-direction: column;
}
.cwft-modal h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-primary); }
.cwft-modal p { font-size: 12px; color: var(--sidebar-text-muted); margin: 0 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwft-modal-tree { flex: 1 1 auto; overflow-y: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 4px 0; min-height: 160px; margin-bottom: 12px; }
.cwft-modal-tree .cwft-picker-row { display: flex; align-items: center; gap: 4px; padding: 5px 10px 5px 4px; font-size: 12.5px; cursor: pointer; }
.cwft-modal-tree .cwft-picker-row:hover { background: var(--bg-secondary); }
.cwft-modal-tree .cwft-picker-row.selected { background: var(--sidebar-accent-bg); font-weight: 600; }
.cwft-modal-tree .cwft-picker-caret {
  width: 16px; height: 18px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; padding: 0; color: var(--sidebar-text-muted);
}
.cwft-modal-tree .cwft-picker-caret svg { width: 9px; height: 9px; transition: transform .12s; }
.cwft-modal-tree .cwft-picker-node.expanded > .cwft-picker-row .cwft-picker-caret svg { transform: rotate(90deg); }
.cwft-modal-tree .cwft-picker-caret.spacer { visibility: hidden; }
.cwft-modal-tree .cwft-picker-icon { width: 13px; height: 13px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--accent-text); }
.cwft-modal-tree .cwft-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwft-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.cwft-modal-actions button { border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--bg-primary); padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cwft-modal-actions button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cwft-modal-actions button.primary:disabled { opacity: .5; cursor: default; }

/* File-tree enlarge/maximize view (item 6, ADR-0015 tree revision): a much
   larger rendering of the SAME tree state as the sidebar dock, reusing the
   cwft-modal-backdrop pattern above. Genuinely grows to fit long names up to
   this generous width before its own .cwft-body-lg falls back to scroll. */
.cwft-modal-lg {
  width: min(760px, 92vw);
  max-width: none;
  height: min(78vh, 640px);
  padding: 0;
  overflow: hidden;
}
.cwft-modal-lg .cwft-head { padding: 12px 8px 12px 16px; }
.cwft-modal-lg .cwft-title { font-size: 13px; }
.cwft-body-lg {
  flex: 1 1 auto; overflow-y: auto; overflow-x: auto; padding: 6px 4px;
  width: max-content; min-width: 100%;
}
.cwft-modal-lg .cwft-row { font-size: 13px; }
.cwft-head-actions { display: flex; align-items: center; gap: 2px; }

/* Share dialog + manage-shares panel (task #59, Petra Novak 2026-08-16) --
   reuse .cwft-modal-backdrop/.cwft-modal exactly like the move-picker and
   enlarge modals above; only the content below is new. */
.cwft-share-invite-row { display: flex; gap: 6px; margin-bottom: 10px; flex: 0 0 auto; }
.cwft-share-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: 7px 10px; font-size: 12.5px; font: inherit; color: var(--text-primary); background: var(--bg-primary);
}
.cwft-share-role {
  flex: 0 0 auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: 7px 8px; font-size: 12.5px; font: inherit; color: var(--text-primary); background: var(--bg-primary);
}
.cwft-share-members { flex: 1 1 auto; overflow-y: auto; min-height: 40px; }
.cwft-share-member-row, .cwft-shares-member-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 2px; font-size: 12.5px;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cwft-share-member-row:last-child, .cwft-shares-member-row:last-child { border-bottom: none; }
.cwft-share-member-email, .cwft-shares-member-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.cwft-share-member-status { flex: 0 0 auto; font-size: 10.5px; color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: .3px; }
.cwft-share-role-toggle {
  flex: 0 0 auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--bg-primary);
  padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text-primary);
}
.cwft-share-revoke {
  flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--danger-text); padding: 3px 6px; font-size: 11px; font-weight: 600;
}
.cwft-share-revoke:hover, .cwft-share-role-toggle:hover { background: var(--bg-secondary); }
.cwft-share-empty { padding: 10px 2px; font-size: 12px; color: var(--sidebar-text-muted); }

.cwft-modal-shares { width: min(520px, 92vw); max-height: 84vh; }
.cwft-shares-section { display: flex; flex-direction: column; margin-bottom: 12px; min-height: 0; }
.cwft-shares-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sidebar-text-muted); margin-bottom: 6px; }
.cwft-shares-list { overflow-y: auto; max-height: 220px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 2px 8px; }
.cwft-shares-folder { padding: 8px 0; border-bottom: 0.5px solid var(--border-hairline); }
.cwft-shares-folder:last-child { border-bottom: none; }
.cwft-shares-folder-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.cwft-shares-folder-name { font-weight: 600; font-size: 12.5px; color: var(--text-primary); }
.cwft-shares-folder-path { font-size: 11px; color: var(--sidebar-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.cwft-shares-unshare { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--danger-text); font-size: 10.5px; font-weight: 600; }
.cwft-shares-unshare:hover { text-decoration: underline; }
.cwft-shares-invite-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.cwft-shares-invite-row button { flex: 0 0 auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--bg-primary); padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; }
.cwft-shares-invite-row button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* lang toggle within menu */
.cw-menu-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-primary);
}
.cw-menu-lang span { flex: 1; }
.cw-lang-pills { display: flex; gap: 4px; }
.cw-lang-pill {
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.75rem; font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border: 0.5px solid transparent;
  transition: all .1s;
}
.cw-lang-pill.active {
  background: rgba(176, 86, 54,0.12);
  color: var(--accent-text);
  border-color: rgba(176, 86, 54,0.3);
}

/* ── MAIN PANE ── */
/* VCO-2 (2026-06-14): canvas background unified to sidebar colour. */
.cw-main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

/* Top bar in main pane */
.cw-main-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
  background: var(--bg-sidebar);
}
.cw-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.cw-topbar-actions { display: flex; gap: 6px; align-items: center; }

/* Stage content area (scrollable) */
.cw-content-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Stage header: default (stages 1-5) */
.stage-hdr { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-left: 3px solid var(--accent); padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 16px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-hairline); }
.stage-hdr .num { font: 600 28px var(--font-primary); color: var(--accent-text); }
.stage-hdr .h { flex: 1; }
.stage-hdr .h-ttl { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.stage-hdr .h-sub { font-size: 12px; color: var(--text-muted); }
.stage-hdr .progress-meta { text-align: right; font-size: 0.75rem; color: var(--text-muted); }
.stage-hdr .progress-meta b { color: var(--accent-text); font-size: 16px; }

/* FIX I (2026-06-12): Unified stage header slot for ALL stages 1-6.
   #s6StickyHeader sits above .cw-conversation in .cw-main so it never
   scrolls away. stageHeader() updates its text/pills for stages 1-5;
   updateCockpit() updates it for stage 6. One element, one CSS rule set,
   zero structural difference between stages. Always visible when a client
   is active (display: flex; no hide/show toggling). */
/* VCO-2 (2026-06-14): sticky header uses sidebar canvas colour. */
#s6StickyHeader {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-sidebar);
  border-bottom: 0.5px solid var(--border-hairline);
  border-left: 3px solid var(--accent);
  padding: 10px 18px;
  flex-shrink: 0;
  gap: 8px;
}
.s6h-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.cw-main-mode-bar {
  display: none;
  width: 100%;
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--bg-sidebar);
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-main-mode-bar .cw-mode-switcher { margin-bottom: 0; width: 100%; }
@media (max-width: 1100px) {
  .cw-main-mode-bar { display: block; }
}
.cw-pe-mobile-bar {
  display: none;
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--bg-sidebar);
  border-bottom: 0.5px solid var(--border-hairline);
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.cw-pe-mobile-bar.visible {
  display: flex;
}
@media (min-width: 901px) {
  .cw-pe-mobile-bar { display: none !important; }
}
.cw-pe-mobile-bar .pe-period-select { width: auto; min-width: 140px; margin: 0; flex: 1; max-width: 220px; }
.cw-pe-mobile-portcos { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.cw-pe-mobile-portcos .pe-portco-item { margin: 0; padding: 5px 8px; font-size: 0.75rem; }
/* Global s6h-* layout rules: shared by #s6StickyHeader AND .stage-hdr (stages 1-5) */
.s6h-num { font: 600 22px var(--font-primary); color: var(--accent-text); flex-shrink: 0; }
.s6h-body { flex: 1; min-width: 0; }
.s6h-ttl { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s6h-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.s6h-pills { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-width: 0; }
/* Clickable pill / lens affordance */
.s6-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  background: rgba(31,30,29,0.08); color: var(--text-primary);
  cursor: pointer;
  border: 0.5px solid transparent;
  transition: all .12s;
  user-select: none;
  text-decoration: none;
}
.s6-pill:hover { background: rgba(176, 86, 54,0.10); border-color: rgba(176, 86, 54,0.3); color: var(--accent-text); }
.s6-pill svg { width: 10px; height: 10px; flex-shrink: 0; opacity: 0.6; }

/* VCO-3 (2026-06-14): Discreet AUM label for Studio + Consult sticky header.
   Replaces the mandate badge chips (profile / BIT / Risiko) which are only
   meaningful inside the advisory stage flow.  Intentionally quiet: no border,
   no background, no uppercase, just a muted small text label. */
.s6-aum-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  white-space: nowrap;
  padding: 0 2px;
}

/* Item 3: Methodology footnote on every chart panel */
.chart-footnote {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.2px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 0.5px solid var(--border-hairline);
  line-height: 1.4;
}

/* Item 2: KPI and Goals each in their own framed chart-box */
.kpi-box, .goals-box {
  /* These mirror .chart-box exactly so they sit as siblings in the chart-grid */
}

/* Item 4: Color consistency note (non-CSS: see assumptions block in build report).
   Semantic palette is already in CSS vars; JS charts use the AICONS JS object.
   aicons-hero-blue in CSS = coral brand accent (#B05636).
   AICONS.chartBlue in JS   = portfolio-mandate line (#2E9DFF, chart only).
   These serve different purposes and do not conflict. */

/* === Items list (clickable rows) === */
.items-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1024px) { .items-grid { grid-template-columns: 1fr; } }
.item-card { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; transition: all .12s; position: relative; }
.item-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.item-card.done { border-left: 2px solid var(--success-text); padding-left: 14px; }
.item-card.open-edit { border-left: 2px solid #5A4815; padding-left: 14px; }
.item-card.empty { border-left: 2px solid var(--border-hairline); padding-left: 14px; }
.item-card .ic-h { display: flex; align-items: center; gap: 10px; }
.item-card .ic-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-secondary); color: var(--text-primary); font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }
.item-card.done .ic-n { background: var(--success-bg); color: var(--success-text); }
.item-card .ic-t { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.item-card .ic-status { margin-left: auto; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.item-card.done .ic-status { color: var(--success-text); }
.item-card.open-edit .ic-status { color: #5A4815; }
.item-card .ic-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.item-card .ic-val { font-size: 12px; color: var(--text-primary); margin-top: 8px; padding-top: 8px; border-top: 0.5px dashed var(--border-hairline); font-variant-numeric: tabular-nums; }
.item-card .ic-val .empty-v { color: var(--text-muted); font-style: italic; }

/* Navigation buttons */
.nav-row { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
.nav-row .btn { padding: 10px 22px; font-size: 0.75rem; }
.nav-row .meta { font-size: 0.75rem; color: var(--aicons-steel); }
.nav-row .meta.warn { color: var(--aicons-warning); }
.nav-row .meta.ok { color: var(--aicons-positive); }

/* F-002: legacy button block deleted: canonical Cowork button block is below (~line 1479) */

/* === Info+Edit Modal === */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(25,32,36,0.6); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
.modal-bg.active { display: flex; }
.modal { background: var(--bg-primary); border-top: 4px solid var(--accent); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 26px 30px; border-radius: var(--radius-sm); box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.modal .x { float: right; cursor: pointer; font-size: 24px; color: var(--aicons-steel); line-height: 1; font-weight: 300; }
.modal .cat { font-size: 0.75rem; color: var(--accent-text); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
.modal h3 { color: var(--aicons-anthracite); font-size: 19px; font-weight: 600; margin: 6px 0 4px; text-transform: none; letter-spacing: 0; border: none; }
.modal .lead { font-size: 13px; color: var(--aicons-anthracite); line-height: 1.55; margin: 12px 0; }
.modal .why { background: var(--aicons-zebra); border-left: 3px solid var(--accent); padding: 12px 14px; margin: 14px 0; font-size: 12px; line-height: 1.55; color: var(--aicons-anthracite); }
.modal .why .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 600; margin-bottom: 4px; }
.modal .src { font-size: 0.75rem; color: var(--aicons-steel); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--aicons-hairline); }
.modal .edit-zone { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--aicons-hairline); }
.modal .edit-zone .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--aicons-anthracite); margin-bottom: 6px; font-weight: 600; }
.modal input[type=text], .modal input[type=number], .modal select, .modal textarea { width: 100%; padding: 8px 10px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); font: 400 13px var(--font-primary); color: var(--text-primary); background: var(--bg-primary); }
/* F-015 / F-audit: modal focus ring coral */
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.modal .scale-row { display: flex; gap: 4px; margin-top: 4px; }
.modal .scale-btn { flex: 1; padding: 8px 0; text-align: center; border: 0.5px solid var(--border-hairline); background: var(--bg-primary); color: var(--text-muted); cursor: pointer; font-size: 12px; border-radius: var(--radius-sm); }
.modal .scale-btn.active { background: var(--accent); color: white; border-color: var(--accent); font-weight: 600; }
.modal .scale-lbl { font-size: 0.75rem; color: var(--aicons-steel); display: flex; justify-content: space-between; margin-top: 3px; }
.modal .actions { margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end; }
.modal .show-mat { display: inline-block; margin-top: 8px; padding: 5px 10px; font-size: 0.75rem; background: var(--aicons-anthracite); color: white; border-radius: 3px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; }
.modal .show-mat:hover { background: var(--accent); }

/* BIT cards in modal */
.bit-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.bit-card { padding: 10px 12px; border: 0.5px solid var(--border-hairline); background: var(--bg-primary); cursor: pointer; border-radius: var(--radius-sm); font-size: 0.75rem; }
.bit-card:hover { background: var(--aicons-zebra); }
/* F-015: bit-card active coral not chart-blue */
.bit-card.active { background: rgba(176, 86, 54,0.08); border-color: var(--accent); border-width: 2px; padding: 9px 11px; }
.bit-card .bit-nm { font-weight: 600; color: var(--aicons-anthracite); font-size: 12px; }
.bit-card .bit-desc { color: var(--aicons-steel); font-size: 0.75rem; margin-top: 3px; line-height: 1.35; }

/* Goals editor in modal */
.goal-entry { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 10px; position: relative; }
.goal-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.goal-entry .kind-row { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-secondary); border-radius: var(--radius-sm); flex-shrink: 0; }
.goal-entry .kind-btn { padding: 5px 10px; font-size: 0.75rem; border: none; background: transparent; border-radius: 3px; cursor: pointer; flex: none; text-align: center; white-space: nowrap; color: var(--aicons-steel); font-weight: 600; }
.goal-entry .kind-btn.active.protect { background: var(--aicons-positive); color: white; }
.goal-entry .kind-btn.active.lifestyle { background: var(--accent); color: white; }
.goal-entry .kind-btn.active.aspire { background: var(--aicons-warning); color: white; }
.goal-entry .rm { position: static; flex-shrink: 0; color: var(--aicons-steel); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; border: none; background: none; }
.goal-entry .rm:hover { color: var(--aicons-negative); }
.goal-entry input[type=text] { width: 100%; box-sizing: border-box; }
#inlineGoalList { display: flex; flex-direction: column; gap: 0; }
.add-goal-btn { width: 100%; padding: 8px; border: 1px dashed var(--aicons-hairline); background: var(--aicons-zebra); color: var(--aicons-steel); cursor: pointer; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 3px; }
.add-goal-btn:hover { background: var(--accent); color: white; border-style: solid; }

/* Material chart in modal */
.material-chart-wrap { margin-top: 12px; padding: 10px; background: var(--aicons-zebra); border: 1px solid var(--aicons-hairline); border-radius: 3px; }
.material-chart-wrap canvas { max-width: 100%; height: 200px !important; }

/* === Show-Client Fullscreen === */
.show-bg { display: none; position: fixed; inset: 0; background: rgba(25,32,36,0.95); z-index: 220; align-items: center; justify-content: center; padding: 30px; }
.show-bg.active { display: flex; }
.show-modal { background: var(--bg-primary); width: 100%; max-width: 1200px; max-height: 92vh; overflow-y: auto; padding: 36px 44px; border-radius: var(--radius-sm); border-top: 4px solid var(--accent); position: relative; }
.show-modal h2 { font-size: 28px; color: var(--aicons-anthracite); text-transform: none; letter-spacing: 0; border: none; margin-bottom: 6px; }
.show-modal .sub { color: var(--aicons-steel); font-size: 14px; margin-bottom: 24px; }
.show-modal canvas { max-width: 100%; height: 460px !important; }
.show-bg .close-x { position: absolute; top: 24px; right: 30px; color: white; font-size: 36px; cursor: pointer; font-weight: 300; z-index: 230; }

/* === STAGE 6: Master Cockpit === */
.cockpit-grid { display: grid; grid-template-columns: 280px minmax(0,1fr) 320px; gap: 14px; }
@media (max-width: 1280px) { .cockpit-grid { grid-template-columns: 260px minmax(0,1fr) 300px; } }
@media (max-width: 1100px) { .cockpit-grid { grid-template-columns: 1fr; } }
/* F-003: first .panel definition removed: canonical definition is below (~line 1623) */

.slider-row { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--aicons-hairline); }
.slider-row:last-child { border-bottom: none; }
.slider-row label { font-size: 0.75rem; color: var(--aicons-anthracite); }
.slider-row .val { font-weight: 600; color: var(--accent-text); text-align: right; font-size: 0.75rem; min-width: 38px; font-variant-numeric: tabular-nums; }
.slider-row input[type=range] { grid-column: 1/-1; width: 100%; margin: 0; accent-color: var(--accent); }
.slider-with-marker { padding-bottom: 14px; }
.slider-with-marker input[type=range] {
  width: 100%; margin: 0; accent-color: var(--accent);
  display: block; position: relative; z-index: 2; background: transparent;
}
.ips-marker {
  position: absolute;
  top: 4px;
  width: 2px;
  height: 14px;
  background: var(--aicons-negative);
  pointer-events: none;
  transform: translateX(-1px);
  z-index: 1;
  opacity: 0.85;
}
.ips-marker::before {
  content: 'IPS';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  color: var(--aicons-negative);
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: var(--bg-primary);
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.3;
  z-index: 3;
}

/* Item 2: KPI block is 2×2 grid, matching Goals block height.
   VCO-1 (2026-06-14): gap reduced to 6px, matching compact Markt-Wirkung density. */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
/* F-004: border-left coral, border-radius token */
.kpi { background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); border-left: 3px solid var(--accent); padding: 7px 10px; border-radius: var(--radius-xs); display: flex; flex-direction: column; justify-content: center; }
.kpi .num { font: 400 18px var(--font-primary); color: var(--aicons-anthracite); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .num.pos { color: var(--aicons-positive); }
.kpi .num.neg { color: var(--aicons-negative); }
/* VF-003: 9.5px → 11px for WCAG AA at this color/background combo */
.kpi .lbl { font-size: 0.75rem; color: var(--aicons-steel); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
/* Item 5 + Item 10: Slider thumb vertically centered on track: webkit + moz */
/* The thumb (14px) must sit centered on the 4px track.
   -webkit-slider-thumb margin is relative to the track, not the input box.
   Setting the container height to the thumb height and using vertical-align:middle
   is the reliable cross-browser fix. */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;            /* match thumb height so the track centers naturally */
  background: transparent; /* track painted via ::-webkit-slider-runnable-track */
  border-radius: 0;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-hairline);
  /* vertical centering inside the 14px input height is automatic when height=trackH */
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: box-shadow .1s;
  /* margin-top: centers thumb (-thumb/2 + track/2) = -(14/2)+(4/2) = -5px */
  margin-top: -5px;
}
input[type=range]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px rgba(176, 86, 54,0.18); }
input[type=range]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--border-hairline);
}
input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer;
  /* Firefox centers the thumb automatically on the track: no margin needed */
}

/* Goals must visually match KPI tiles: same card style, aligned heights.
   VCO-1 (2026-06-14): compact padding, bg-secondary to match kpi tiles. */
.goal-mini { padding: 8px 10px 9px; background: var(--bg-secondary); border: 0.5px solid var(--border-hairline); border-left: 3px solid var(--accent); border-radius: var(--radius-xs); margin-bottom: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.goal-mini.protect { border-left-color: var(--aicons-positive); }
.goal-mini.aspire { border-left-color: var(--aicons-warning); }
.goal-mini-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.goal-status {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-primary);
  color: var(--text-muted);
}
.goal-status--ontrack { color: var(--aicons-positive); border-color: rgba(76,177,124,0.35); background: rgba(76,177,124,0.08); }
.goal-status--under { color: var(--aicons-negative); border-color: rgba(201,76,76,0.35); background: rgba(201,76,76,0.06); }
.goal-status--watch { color: var(--aicons-warning); border-color: rgba(176, 86, 54,0.35); background: rgba(176, 86, 54,0.06); }
.goal-rows { display: flex; flex-direction: column; gap: 2px; }
.goal-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 6px; font-size: 0.75rem; line-height: 1.35; }
.goal-lbl { color: var(--aicons-steel); font-weight: 500; }
.goal-val { color: var(--aicons-anthracite); font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-tag { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.goal-tag-muted { font-weight: 400; }
.goal-tag-over { color: var(--aicons-positive); font-weight: 600; }
.goal-bar-track {
  position: relative;
  height: 8px;
  background: var(--aicons-hairline);
  border-radius: 4px;
  overflow: hidden;
}
.goal-bar-proj {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(176, 86, 54,0.22);
  border-radius: 4px;
  pointer-events: none;
  transition: width .25s;
}
.goal-mini.protect .goal-bar-proj { background: rgba(76,177,124,0.18); }
.goal-mini.aspire .goal-bar-proj { background: rgba(176, 86, 54,0.22); }
.goal-bar-today {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 4px 0 0 4px;
  z-index: 1;
  transition: width .25s;
  min-width: 0;
}
.goal-mini.protect .goal-bar-today { background: var(--aicons-positive); }
.goal-mini.aspire .goal-bar-today { background: var(--aicons-warning); }
.goal-bar-target {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(25,32,36,0.25);
  z-index: 2;
  pointer-events: none;
}

.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chart-grid .full { grid-column: 1 / -1; }
/* VCO-1 (2026-06-14): chart-box is the canonical white card on the grey canvas. */
.chart-box { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); padding: 12px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-hairline); }
.chart-box canvas { max-width: 100%; height: 200px !important; }
.chart-box.full canvas { height: 230px !important; }

/* VCO-2 / Part B (2026-06-14): canonical box-header component.
   Canonical structure: title on left, context/info string on right, hairline underneath.
   Model: Lebenszyklus-Projektion header. Applied to every white card tool-wide. */
.cw-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  margin-bottom: 9px;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-card-header-title {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.cw-card-header-info {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
  text-align: right;
}

/* Goal cards (Stage 6): styled to match KPI tiles (see .kpi above; canonical rules in new block) */
/* NOTE: .goal-mini base + .protect/.aspire overrides are declared above, co-located with .kpi */
.goal-mini .nm { font-weight: 600; font-size: 0.75rem; color: var(--aicons-anthracite); line-height: 1.25; }
.goal-mini .meta { font-size: 0.75rem; color: var(--aicons-steel); margin-top: 1px; }
.goal-mini .bar { height: 5px; background: var(--aicons-hairline); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.goal-mini .fill { height: 100%; background: var(--accent); transition: width .25s; }
.goal-mini.protect .fill { background: var(--aicons-positive); }
.goal-mini.aspire .fill { background: var(--aicons-warning); }
.goal-mini .prob,
.goal-mini .goal-prob { font-size: 0.75rem; color: var(--aicons-steel); margin-top: 1px; }
.goal-mini .prob b,
.goal-mini .goal-prob b { font-weight: 700; }

.footer { background: var(--aicons-anthracite); color: rgba(255,255,255,0.6); padding: 12px 24px; font-size: 0.75rem; letter-spacing: 1px; text-align: center; margin-top: 24px; }
.footer a { color: var(--accent-text); }

.empty-msg { padding: 30px; text-align: center; color: var(--aicons-steel); font-size: 12.5px; line-height: 1.6; }

/* === Right-aligned numbers === */
.num, td.num, th.num, .v, .kpi .num, .fmt-num { text-align: right; font-variant-numeric: tabular-nums; }
input.fmt-num { text-align: right; font-variant-numeric: tabular-nums; }

/* === API Status Strip (Cowork panel - legacy dark strip removed F-audit) === */
/* === AI Model Badge === */
/* F-015: ai-badge coral not chart-blue */
.ai-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 8px; background: linear-gradient(135deg, rgba(176, 86, 54,0.08), rgba(176, 86, 54,0.04)); border: 0.5px solid rgba(176, 86, 54,0.25); font-size: 0.75rem; color: var(--accent-text); letter-spacing: 0.3px; font-weight: 600; cursor: help; vertical-align: middle; }
.ai-badge::before { content: '◆'; font-size: 7px; }
.ai-badge .ai-lat { color: var(--aicons-steel); font-weight: 400; font-variant-numeric: tabular-nums; }
.ai-badge .ai-conf { color: var(--aicons-positive); font-weight: 700; }
.ai-badge.local { background: linear-gradient(135deg, rgba(76,177,124,0.12), rgba(76,177,124,0.04)); border-color: rgba(76,177,124,0.3); color: var(--aicons-positive); }

/* === AI Disclosure banner (Nadia M6 / EU AI Act Art.50 / FINMA 08/2024) === */
.cw-ai-disclosure {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);
  background: var(--accent-a10);
  border: 1px solid var(--accent-a20);
  border-radius: 6px;
  padding: 6px 10px 6px 10px;
  margin: 0 0 6px 0;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
/* Once-per-session: banner is hidden after the user dismisses or on return visits
   within the same browser session. sessionStorage cleared on tab/window close. */
.cw-ai-disclosure--hidden { display: none !important; }
.cw-ai-disclosure__text { flex: 1; }
.cw-ai-disclosure__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
  margin-top: -1px;
}
.cw-ai-disclosure__dismiss:hover { opacity: 1; }
.cw-ai-disclosure strong { color: var(--text-secondary); }

/* === AI Chat: Cowork Composer Style (bottom of main pane) === */
/* FAB hidden: replaced by inline composer toggle in topbar */

/* Composer panel sits at the bottom of .cw-main */
.cw-composer {
  border-top: 0.5px solid var(--composer-border);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.cw-composer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-muted);
  user-select: none;
  transition: color .12s;
}
.cw-composer-toggle:hover { color: var(--accent-text); }
.cw-composer-toggle svg { width: 14px; height: 14px; }
.cw-composer-toggle .cw-composer-lbl { font-weight: 500; }

/* The actual chat panel, collapsible: item 9: ~33% taller */
.ai-msg { margin-bottom: 10px; }
.ai-msg.user { text-align: right; }
.ai-msg .bubble {
  display: inline-block; padding: 7px 11px;
  border-radius: var(--radius-xl); max-width: 85%;
  line-height: 1.45; font-size: 12px;
}
.ai-msg.user .bubble {
  background: var(--accent); color: white;
  border-bottom-right-radius: var(--radius-xs);
  text-align: left;
}
.ai-msg.ai .bubble {
  background: var(--bg-primary); color: var(--text-primary);
  border-bottom-left-radius: var(--radius-xs);
  border: 0.5px solid var(--border-hairline);
}
.ai-msg .meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; padding: 0 4px; }
.ai-msg.user .meta { text-align: right; }
.ai-msg.ai .action-row { margin-top: 6px; display: flex; gap: 4px; }
.ai-msg.ai .action-row button { padding: 3px 8px; font-size: 0.75rem; letter-spacing: 0.5px; }
.ai-typing {
  display: inline-flex; gap: 3px; padding: 8px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  border: 0.5px solid var(--border-hairline);
}
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted); animation: typing 1.4s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-typing span { animation: none; opacity: 0.7; }
}
.ai-chat-suggestion {
  display: inline-block; padding: 4px 9px;
  background: var(--bg-primary);
  border: 0.5px solid var(--composer-border);
  border-radius: 12px; font-size: 0.75rem;
  color: var(--accent-text); cursor: pointer; margin: 2px 3px;
  transition: all .1s;
}
.ai-chat-suggestion:hover { background: var(--accent); color: white; border-color: var(--accent); }

/* === Inline Edit Cards (Stage 1 redesign) === */
.inline-card { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; transition: box-shadow .12s, border-color .12s; width: 100%; box-sizing: border-box; }
.inline-card.done { border-left: 3px solid var(--aicons-positive); }
.inline-card.empty { border-left: 3px solid var(--aicons-hairline); }
/* F-015: inline-card open coral shadow */
.inline-card.open { box-shadow: 0 2px 12px rgba(176, 86, 54,0.15); border-left-color: var(--accent); z-index: 1; position: relative; }
.inline-card:not(.open) .inline-head { opacity: 1; }
.inline-head { padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; user-select: none; min-width: 0; }
.inline-head .ic-n { margin-top: 1px; }
.inline-head .caret { margin-top: 6px; }
.inline-head:hover { background: var(--aicons-zebra); }
.inline-head .ic-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--aicons-hairline); color: var(--aicons-anthracite); font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }
.inline-card.done .ic-n { background: var(--aicons-positive); color: white; }
.inline-card.open .ic-n { background: var(--accent); color: white; }
.inline-head .ic-t { font-weight: 600; color: var(--aicons-anthracite); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; }
.inline-head .ic-t > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-head .ic-v { font-size: 0.75rem; color: var(--aicons-anthracite); margin-right: 4px; flex-shrink: 1; min-width: 0; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.inline-card.open .inline-head .ic-v { display: none; }
.inline-head .ic-v .empty-v { color: var(--aicons-steel); font-style: italic; }
.inline-head .caret { font-size: 0.75rem; color: var(--aicons-steel); transition: transform .15s; flex-shrink: 0; }
.inline-card.open .inline-head .caret { transform: rotate(180deg); color: var(--accent-text); }
.inline-head .info-btn { /* WCAG P1-5 2.5.8: was 22x22 (below 24px minimum). */ width: 24px; height: 24px; border-radius: 50%; background: var(--aicons-hairline); color: var(--aicons-anthracite); border: none; cursor: pointer; font-weight: 700; font-size: 0.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.inline-head .info-btn:hover { background: var(--accent); color: white; }
.inline-body { display: none; padding: 14px 16px; border-top: 1px solid var(--aicons-hairline); background: var(--aicons-zebra); overflow: visible; }
.inline-card.open .inline-body { display: block; }
.inline-body .lifecycle-chart-wrap {
  margin-top: 14px;
  min-height: 260px;
  width: 100%;
  box-sizing: border-box;
}
.inline-body .lifecycle-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 220px !important;
  max-width: 100%;
}
.lifecycle-chart-empty {
  margin-top: 14px;
  padding: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-primary);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-sm);
}
.inline-body .lifecycle-summary { margin-top: 10px; }
.stage-content .inline-card:last-child { margin-bottom: 0; }
.inline-body .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--aicons-steel); margin: 6px 0 3px; font-weight: 600; }
.inline-body .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.inline-body .field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.inline-body input[type=text], .inline-body input[type=number], .inline-body input.fmt-num,
.inline-body select, .inline-body textarea {
  width: 100%; padding: 7px 10px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm);
  font: 400 12.5px var(--font-primary); background: var(--bg-primary); color: var(--text-primary);
}
.inline-body textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.inline-body select { cursor: pointer; }
/* F-015 / F-audit: inline-body focus ring coral */
.inline-body input:focus, .inline-body select:focus, .inline-body textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.inline-body .scale-row { display: flex; gap: 4px; margin-top: 4px; }
.inline-body .scale-btn { flex: 1; padding: 7px 0; text-align: center; border: 0.5px solid var(--border-hairline); background: var(--bg-primary); color: var(--text-muted); cursor: pointer; font-size: 12px; border-radius: var(--radius-sm); }
.inline-body .scale-btn.active { background: var(--accent); color: white; border-color: var(--accent); font-weight: 600; }
.inline-body .scale-lbl { font-size: 0.75rem; color: var(--aicons-steel); display: flex; justify-content: space-between; margin-top: 2px; }
/* F-015: ai-hint coral not chart-blue */
.inline-body .ai-hint { margin-top: 10px; padding: 8px 10px; background: linear-gradient(135deg, rgba(176, 86, 54,0.06), rgba(176, 86, 54,0.02)); border-left: 2px solid var(--accent); font-size: 0.75rem; color: var(--aicons-anthracite); line-height: 1.45; border-radius: 0 3px 3px 0; }
.inline-body .ai-hint .lbl { font-size: 0.75rem; color: var(--accent-text); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 2px; }

/* === Stage 2: kompakte Schieberegler-Zeilen === */
.ips-slider-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--aicons-hairline); align-items: center; transition: background .12s; }
.ips-slider-row:last-child { border-bottom: none; }
.ips-slider-row:hover { background: var(--aicons-zebra); }
.ips-slider-row.warn { background: rgba(217,84,77,0.04); border-left: 3px solid var(--aicons-negative); padding-left: 13px; }
.ips-slider-info { min-width: 0; }
.ips-slider-label { font-size: 12.5px; font-weight: 600; color: var(--aicons-anthracite); display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; line-height: 1.35; }
.ips-slider-sub { font-size: 0.75rem; color: var(--aicons-steel); margin-top: 2px; line-height: 1.4; word-wrap: break-word; }
.ips-warn-pill { display: inline-flex; align-items: center; padding: 2px 7px; background: rgba(217,84,77,0.12); color: var(--aicons-negative); font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 600; border-radius: 8px; text-transform: uppercase; }
/* F-018/VF-001: chart-blue #2E9DFF (semantic: system-managed, not user-editable) */
.ips-auto-pill { display: inline-flex; align-items: center; padding: 2px 7px; background: rgba(46,157,255,0.18); color: var(--chart-blue); font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 600; border-radius: 8px; text-transform: uppercase; }
.ips-slider-row.readonly { background: rgba(46,157,255,0.04); }
.ips-slider-row.readonly:hover { background: rgba(46,157,255,0.08); }
.ips-slider-readonly { display: flex; align-items: center; gap: 12px; flex: 1; width: 100%; }
.ips-readonly-track { flex: 1; height: 6px; background: var(--aicons-hairline); border-radius: 3px; overflow: hidden; position: relative; }
.ips-readonly-fill { height: 100%; border-radius: 3px; transition: width .2s; }

/* === KI-Strategie-Bewertung in Stufe 2 === */
.ai-strategy-card {
  background: var(--aicons-white);
  color: var(--aicons-anthracite);
  border: 1px solid var(--aicons-hairline);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 16px 18px;
  margin-top: 12px;
  position: relative;
  overflow: visible;
  box-shadow: 0 1px 4px rgba(25,32,36,0.06);
}
.ai-strategy-card::before { display: none; }
.ai-strategy-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--aicons-hairline); }
.ai-strategy-head .ttl { font-size: 0.75rem; font-weight: 700; color: var(--accent-text); letter-spacing: 1.5px; text-transform: uppercase; }
.ai-strategy-head .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aicons-positive); box-shadow: 0 0 6px rgba(76,177,124,0.45); animation: aipulse 2s infinite; flex-shrink: 0; }
@keyframes aipulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.ai-strategy-head .models { margin-left: auto; display: flex; gap: 4px; align-items: center; font-size: 0.75rem; color: var(--aicons-steel); flex-wrap: wrap; }
.ai-strategy-head .models .badge { padding: 2px 7px; background: rgba(46,157,255,0.08); border: 1px solid rgba(46,157,255,0.22); border-radius: 8px; color: var(--accent-text); font-weight: 600; letter-spacing: 0.5px; }
.ai-strategy-head .models .badge.local { background: rgba(76,177,124,0.1); border-color: rgba(76,177,124,0.25); color: var(--aicons-positive); }

/* VF-006: allow column content to expand (no hidden overflow truncation) */
.ai-strategy-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .ai-strategy-grid { grid-template-columns: 1fr; } }

.ai-section { background: var(--aicons-zebra); border-radius: 3px; padding: 12px 14px; border-left: 3px solid var(--accent); min-width: 0; }
.ai-section.impact { border-left-color: var(--accent); }
.ai-section.conflict { border-left-color: var(--aicons-negative); }
.ai-section.conflict.none { border-left-color: var(--aicons-positive); }
.ai-section.recom { border-left-color: var(--aicons-warning); }
.ai-section .ai-lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; margin-bottom: 6px; }
.ai-section.conflict .ai-lbl { color: var(--aicons-negative); }
.ai-section.conflict.none .ai-lbl { color: var(--aicons-positive); }
.ai-section.recom .ai-lbl { color: var(--aicons-warning); }
.ai-section .ai-body { font-size: 0.75rem; line-height: 1.5; color: var(--aicons-anthracite); }
.ai-section .ai-body ul { margin: 4px 0 0; padding-left: 16px; }
.ai-section .ai-body li { margin-bottom: 4px; }
.ai-section .ai-body strong { color: var(--aicons-anthracite); font-weight: 600; }
.ai-section .ai-body .pos { color: var(--aicons-positive); font-weight: 600; }
.ai-section .ai-body .neg { color: var(--aicons-negative); font-weight: 600; }
.ai-section .ai-body .warn { color: var(--aicons-warning); font-weight: 600; }
.ai-section .ai-empty { font-size: 0.75rem; color: var(--aicons-steel); font-style: italic; }

.ai-confidence-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--aicons-hairline); font-size: 0.75rem; color: var(--aicons-steel); flex-wrap: wrap; }
.ai-confidence-bar .cv-lbl { letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--aicons-steel); }
.ai-confidence-bar .cv-val { color: var(--aicons-positive); font-weight: 700; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
/* M15: planned (not-yet-live) cross-validation marker, not a computed green score. */
.ai-confidence-bar .cv-val--planned { color: var(--aicons-steel); font-variant-numeric: normal; }
.ai-confidence-bar .cv-detail { color: var(--aicons-steel); margin-left: auto; font-size: 0.75rem; }
@media (max-width: 700px) { .ai-confidence-bar .cv-detail { margin-left: 0; width: 100%; } }

/* === Drei-Achsen-Visualisierung === */
.risk3-viz {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 14px;
}
.risk3-viz-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.risk3-viz-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.risk3-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px; align-items: center; }
@media (max-width: 700px) { .risk3-grid { grid-template-columns: 1fr; } }

/* Bars-Layout (links) */
.risk3-bars { display: flex; flex-direction: column; gap: 12px; }
.risk3-axis { }
.risk3-axis-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.risk3-axis-nm { font-size: 0.75rem; font-weight: 600; color: var(--aicons-anthracite); }
.risk3-axis-sub { font-size: 0.75rem; color: var(--aicons-steel); margin-left: 6px; font-weight: 400; letter-spacing: 0.3px; }
.risk3-axis-val { font-size: 13px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.risk3-axis-bar { height: 16px; background: var(--aicons-hairline); border-radius: 8px; overflow: hidden; position: relative; }
.risk3-axis-bar .fill {
  height: 100%; border-radius: 8px; transition: width .25s;
  background: linear-gradient(90deg, var(--aicons-positive) 0%, var(--aicons-warning) 60%, var(--aicons-negative) 100%);
}
.risk3-axis-bar .ticks { position: absolute; top: 0; left: 0; right: 0; height: 100%; display: flex; pointer-events: none; }
.risk3-axis-bar .tick { flex: 1; border-right: 1px solid rgba(255,255,255,0.4); }
.risk3-axis-bar .tick:last-child { border-right: none; }
.risk3-axis.empty .risk3-axis-val { color: var(--aicons-steel); }
.risk3-axis.empty .risk3-axis-bar .fill { background: var(--aicons-hairline); }

/* Triangle (rechts): SVG Radar/Triangle */
.risk3-triangle { position: relative; width: 100%; max-width: 220px; aspect-ratio: 1; margin: 0 auto; }
.risk3-triangle svg { width: 100%; height: 100%; display: block; }
.risk3-axis-label { font-size: 10px; fill: var(--aicons-anthracite); font-weight: 600; }
.risk3-axis-sublabel { font-size: 8px; fill: var(--aicons-steel); }

/* Insight-Box */
.risk3-insight {
  margin-top: 14px;
  background: var(--aicons-zebra);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: 0 3px 3px 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--aicons-anthracite);
}
.risk3-insight.bind { border-left-color: var(--aicons-positive); }
.risk3-insight.warn { border-left-color: var(--aicons-warning); background: rgba(232,160,75,0.08); }
.risk3-insight.crit { border-left-color: var(--aicons-negative); background: rgba(217,84,77,0.08); }
.risk3-insight .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; margin-bottom: 3px; }
.risk3-insight.bind .lbl { color: var(--aicons-positive); }
.risk3-insight.warn .lbl { color: var(--aicons-warning); }
.risk3-insight.crit .lbl { color: var(--aicons-negative); }
.risk3-insight strong { color: var(--aicons-anthracite); }

/* === Mental-Account-Pyramide === */
.mental-pyramid { width: 100%; max-width: 320px; margin: 0 auto; }
.mental-pyramid svg { width: 100%; height: auto; display: block; }
.pyramid-band-label { font-size: 10px; fill: white; font-weight: 700; letter-spacing: 0.5px; pointer-events: none; }
.pyramid-band-amount { font-size: 9px; fill: rgba(255,255,255,0.85); font-weight: 400; pointer-events: none; }
.pyramid-axis-label { font-size: 9px; fill: var(--aicons-steel); }

/* === Drawdown-Recovery-Visualisierung === */
.dd-recovery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; position: relative; z-index: 1; }
.mental-arch-grid { position: relative; z-index: 1; }
@media (max-width: 900px) { .dd-recovery { grid-template-columns: 1fr; } }
.dd-scenario { background: var(--aicons-white); border: 1px solid var(--aicons-hairline); border-radius: 4px; padding: 12px 14px; }
.dd-scenario .dd-name { font-size: 0.75rem; font-weight: 700; color: var(--aicons-anthracite); letter-spacing: 0.5px; text-transform: uppercase; }
.dd-scenario .dd-year { font-size: 0.75rem; color: var(--aicons-steel); margin-top: 1px; letter-spacing: 1px; }
.dd-scenario .dd-amounts { display: flex; justify-content: space-between; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.dd-scenario .dd-from { font-size: 12px; color: var(--aicons-steel); }
.dd-scenario .dd-to { font-size: 14px; font-weight: 700; color: var(--aicons-negative); }
.dd-scenario .dd-bar-wrap { position: relative; height: 8px; background: rgba(217,84,77,0.12); border-radius: 4px; overflow: visible; margin-top: 14px; margin-bottom: 8px; }
.dd-scenario .dd-bar-lbl { position: absolute; bottom: calc(100% + 3px); left: 0; font-size: 0.75rem; font-weight: 700; color: var(--aicons-negative); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.dd-scenario .dd-bar { height: 100%; background: linear-gradient(90deg, var(--aicons-negative), var(--aicons-warning)); transition: width .3s; border-radius: 4px; }
.dd-scenario .dd-stats { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--aicons-anthracite); }
.dd-scenario .dd-stats .lbl { color: var(--aicons-steel); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; display: block; }
.dd-scenario .dd-stats strong { font-variant-numeric: tabular-nums; }
.dd-scenario .dd-tol-ok { color: var(--aicons-positive); font-weight: 600; }
.dd-scenario .dd-tol-warn { color: var(--aicons-warning); font-weight: 600; }
.dd-scenario .dd-tol-bad { color: var(--aicons-negative); font-weight: 700; }
.dd-mitigations { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--aicons-hairline); }
.dd-mitigations .dd-mit-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--aicons-warning); font-weight: 700; margin-bottom: 4px; }
.dd-mitigations ul { margin: 0; padding-left: 14px; font-size: 0.75rem; color: var(--aicons-anthracite); line-height: 1.4; }
.dd-mitigations li { margin-bottom: 3px; }

.dd-overall-warn { margin-top: 14px; padding: 14px 16px; background: linear-gradient(135deg, rgba(217,84,77,0.10), rgba(217,84,77,0.04)); border-left: 3px solid var(--aicons-negative); border-radius: 0 3px 3px 0; }
.dd-overall-warn.warn { background: linear-gradient(135deg, rgba(232,160,75,0.10), rgba(232,160,75,0.04)); border-left-color: var(--aicons-warning); }
.dd-overall-warn.ok { background: linear-gradient(135deg, rgba(76,177,124,0.08), rgba(76,177,124,0.02)); border-left-color: var(--aicons-positive); }
.dd-overall-warn .dd-overall-head { font-size: 12px; font-weight: 700; color: var(--aicons-negative); letter-spacing: 0.3px; margin-bottom: 6px; }
.dd-overall-warn.warn .dd-overall-head { color: var(--aicons-warning); }
.dd-overall-warn.ok .dd-overall-head { color: var(--aicons-positive); }
.dd-overall-warn .dd-overall-body { font-size: 0.75rem; line-height: 1.55; color: var(--aicons-anthracite); }
.dd-overall-warn .dd-overall-body ul { margin: 6px 0; padding-left: 20px; }
.dd-overall-warn .dd-overall-body li { margin-bottom: 3px; }

/* === Lebenszyklus-Projektion === */
.lifecycle-chart-wrap { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 14px; overflow: hidden; }
.lifecycle-chart-canvas-host { position: relative; width: 100%; height: 240px; max-height: 240px; overflow: hidden; }
.lifecycle-chart-wrap canvas { display: block; max-width: 100%; height: 240px !important; max-height: 240px !important; }
.lifecycle-summary { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--aicons-hairline); flex-wrap: wrap; font-size: 0.75rem; }
.lifecycle-summary .stat { flex: 1; min-width: 100px; }
.lifecycle-summary .stat .lbl { font-size: 0.75rem; color: var(--aicons-steel); text-transform: uppercase; letter-spacing: 1px; }
.lifecycle-summary .stat .v { font-size: 14px; font-weight: 700; color: var(--aicons-anthracite); font-variant-numeric: tabular-nums; margin-top: 2px; }
.lifecycle-summary .stat .v.pos { color: var(--aicons-positive); }

/* === Goal-Funnel Sankey === */
.goal-funnel { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 16px; margin-top: 14px; }
.goal-funnel-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.goal-funnel-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.goal-funnel svg { width: 100%; height: auto; display: block; }
.sankey-source-label { font-size: 11px; font-weight: 600; fill: var(--aicons-anthracite); }
.sankey-source-sub { font-size: 9.5px; fill: var(--aicons-steel); }
.sankey-target-label { font-size: 11px; font-weight: 600; fill: white; }
.sankey-target-amount { font-size: 9.5px; fill: rgba(255,255,255,0.92); }
.sankey-flow { opacity: 0.55; transition: opacity .2s; }
.sankey-flow:hover { opacity: 0.85; }

/* === Effizienzfront === */
.efficient-frontier { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 16px; margin-top: 14px; }
.efficient-frontier-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.efficient-frontier-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.efficient-frontier-sub { font-size: 0.75rem; color: var(--aicons-steel); margin-bottom: 10px; }
.efficient-frontier svg { width: 100%; height: auto; display: block; }
.ef-grid line { stroke: var(--aicons-hairline); stroke-width: 0.6; }
.ef-axis-label { font-size: 9px; fill: var(--aicons-steel); }
.ef-cap-line { stroke: var(--aicons-negative); stroke-width: 1.2; stroke-dasharray: 4,3; }
.ef-cap-label { font-size: 9px; fill: var(--aicons-negative); font-weight: 600; }
.ef-current-dot { fill: var(--accent); stroke: white; stroke-width: 2.5; }
.ef-current-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.4; }
.ef-optimal-dot { fill: var(--aicons-positive); stroke: white; stroke-width: 2; }
.ef-current-label, .ef-optimal-label { font-size: 0.75rem; font-weight: 700; }
.ef-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 0.75rem; color: var(--aicons-steel); flex-wrap: wrap; }
.ef-legend-item { display: flex; align-items: center; gap: 4px; }
.ef-legend-item .swatch { width: 10px; height: 10px; border-radius: 50%; }

/* === Korrelations-Heatmap === */
.corr-heatmap { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 16px; margin-top: 14px; }
.corr-heatmap-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.corr-heatmap-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.corr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; justify-items: center; }
.corr-grid > div { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; }
.corr-grid > div .corr-matrix-label { width: 100%; }
@media (max-width: 768px) { .corr-grid { grid-template-columns: 1fr; } }
.corr-matrix-label { font-size: 0.75rem; color: var(--aicons-steel); text-transform: uppercase; letter-spacing: 1px; text-align: center; margin-bottom: 8px; font-weight: 600; }
.corr-matrix-label.regime { color: var(--aicons-negative); }
.corr-matrix, table.corr-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
.corr-matrix th, .corr-matrix td { padding: 6px 4px; text-align: center; font-size: 0.75rem; border: 1px solid white; font-variant-numeric: tabular-nums; }
.corr-matrix th { color: var(--aicons-anthracite); font-weight: 700; font-size: 0.75rem; background: var(--aicons-zebra); }
.corr-matrix .corr-h { background: var(--aicons-zebra); color: var(--aicons-anthracite); font-weight: 700; font-size: 0.75rem; }
.corr-insight { margin-top: 12px; padding: 10px 12px; background: var(--aicons-zebra); border-left: 3px solid var(--accent); font-size: 0.75rem; line-height: 1.5; color: var(--aicons-anthracite); border-radius: 0 3px 3px 0; }
.corr-insight strong { color: var(--aicons-anthracite); }
.ips-slider-control { display: flex; align-items: center; gap: 12px; }
.ips-slider-control input[type=range] { flex: 1; accent-color: var(--accent); height: 4px; }
.ips-slider-row.warn .ips-slider-control input[type=range] { accent-color: var(--aicons-negative); }
.ips-slider-val { min-width: 78px; text-align: right; font-size: 16px; font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ips-slider-row.warn .ips-slider-val { color: var(--aicons-negative); }
/* IPS-ANNOTATE (2026-06-14): explicit IPS-target annotation badge shown next to the value
   in the Anlagestrategie sliders. The badge confirms to the advisor that the displayed
   value IS the IPS target (not a deviation). Keeps label tight with tabular-nums. */
.ips-target-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-a10);
  border: 1px solid var(--accent-a20);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.ips-slider-row.warn .ips-target-badge { color: var(--danger-text); background: var(--danger-bg); border-color: rgba(127,44,40,0.2); }
.ips-slider-row.readonly .ips-target-badge { display: none; }

/* 3-STATE MANDATE MODEL: sim vs IPS reference indicators (2026-06-14) */
/* Agreed-IPS reference badge shown in Stage-6 slider rows and right-panel card */
.ips-agreed-ref {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  white-space: nowrap;
}
.ips-agreed-ref .ips-ref-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.8px; }
/* Sim marker on drift chart: a subtle orange line at sim position */
.sim-mode-banner {
  display: none;
  background: rgba(176, 86, 54,0.08);
  border: 1px solid rgba(176, 86, 54,0.25);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: var(--accent-text);
  font-weight: 600;
  margin-bottom: 8px;
  align-items: center;
  gap: 8px;
}
.sim-mode-banner.active { display: flex; }
/* Stage-2 pending-change indicator */
.s2-pending-banner {
  background: rgba(176, 86, 54,0.07);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 8px 0 4px;
  display: none;
}
.s2-pending-banner.active { display: block; }
.s2-pending-banner .s2-pending-vals { font-weight: 600; color: var(--accent-text); margin-top: 2px; font-size: 0.75rem; }
/* Mandate buttons: distinct styling for each action tier */
.btn-mandate-commit {
  background: var(--accent); color: #fff; border: none; border-radius: 4px;
  font-size: 0.75rem; font-weight: 700; padding: 7px 12px; cursor: pointer;
  font-family: var(--font-primary); letter-spacing: 0.3px;
}
.btn-mandate-commit:hover { background: var(--accent-hover); }
.btn-mandate-commit:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sim-reset {
  background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-hairline);
  border-radius: 4px; font-size: 0.75rem; font-weight: 600; padding: 6px 10px; cursor: pointer;
  font-family: var(--font-primary);
}
.btn-sim-reset:hover { background: var(--bg-secondary); }
.btn-rebalance-actual {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border-hairline);
  border-radius: 4px; font-size: 0.75rem; font-weight: 500; padding: 5px 10px; cursor: pointer;
  font-family: var(--font-primary);
}
.btn-rebalance-actual:hover { color: var(--text-secondary); border-color: var(--text-muted); }
/* Stage-2 save bar */
.s2-save-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-secondary);
  margin-top: 4px;
  flex-wrap: wrap;
}
.s2-save-bar-hint { font-size: 0.75rem; color: var(--text-muted); flex: 1; min-width: 0; }

@media (max-width: 768px) {
  .ips-slider-row { grid-template-columns: 1fr; gap: 8px; }
}

/* === Stage 3: Briefing-Karten === */
.brief-card { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; }
.brief-card .brief-head { padding: 12px 16px; background: var(--aicons-anthracite); color: white; display: flex; align-items: center; gap: 12px; }
.brief-card .brief-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: white; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.brief-card .brief-title { font-size: 14px; font-weight: 600; flex: 1; }
.brief-card .brief-status { font-size: 0.75rem; padding: 3px 8px; border-radius: 10px; background: rgba(255,255,255,0.15); letter-spacing: 0.5px; text-transform: uppercase; }
/* F-019: on-dark tokens for status badge colors */
.brief-card .brief-status.green { background: rgba(76,177,124,0.25); color: var(--positive-on-dark); }
.brief-card .brief-status.yellow { background: rgba(232,160,75,0.25); color: var(--warning-on-dark); }
.brief-card .brief-status.red { background: rgba(217,84,77,0.25); color: var(--negative-on-dark); }
/* VF-005: brief-status min-height for tap target accessibility */
.brief-card .brief-status { min-height: 32px; display: inline-flex; align-items: center; }
.brief-content { padding: 16px; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) { .brief-grid { grid-template-columns: 1fr; } }
.brief-block { background: var(--aicons-zebra); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 0 3px 3px 0; }
.brief-block.goal { border-left-color: var(--aicons-positive); }
.brief-block.recom { border-left-color: var(--aicons-warning); }
.brief-block .bb-lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; margin-bottom: 4px; }
.brief-block.goal .bb-lbl { color: var(--aicons-positive); }
.brief-block.recom .bb-lbl { color: var(--aicons-warning); }
.brief-block .bb-body { font-size: 0.75rem; color: var(--aicons-anthracite); line-height: 1.55; }
.brief-block ul { margin: 4px 0 0; padding-left: 18px; }
.brief-block li { margin-bottom: 3px; font-size: 0.75rem; line-height: 1.5; }

.brief-note-wrap { background: var(--bg-primary); border: 1.5px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 12px; }
/* F-015: evaluating border/glow coral */
.brief-note-wrap.evaluating { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(176, 86, 54,0.10); }
.brief-note-wrap .note-lbl { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--aicons-steel); font-weight: 600; margin-bottom: 6px; }
.brief-note-wrap textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--aicons-hairline); border-radius: 3px; font: 400 12px var(--font-primary); resize: vertical; min-height: 70px; outline: none; }
/* VF-004/F-015: textarea focus coral */
.brief-note-wrap textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(176, 86, 54,0.15); }

/* F-015: ai-eval default coral not chart-blue */
.ai-eval { margin-top: 10px; padding: 10px 12px; background: linear-gradient(135deg, rgba(176, 86, 54,0.06), rgba(176, 86, 54,0.02)); border-left: 3px solid var(--accent); border-radius: 0 3px 3px 0; font-size: 0.75rem; line-height: 1.5; min-height: 50px; }
.ai-eval.green { background: linear-gradient(135deg, rgba(76,177,124,0.08), rgba(76,177,124,0.02)); border-left-color: var(--aicons-positive); }
.ai-eval.yellow { background: linear-gradient(135deg, rgba(232,160,75,0.08), rgba(232,160,75,0.02)); border-left-color: var(--aicons-warning); }
.ai-eval.red { background: linear-gradient(135deg, rgba(217,84,77,0.08), rgba(217,84,77,0.02)); border-left-color: var(--aicons-negative); }
.ai-eval.thinking { background: rgba(176, 86, 54,0.04); }
.ai-eval-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ai-eval-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-text); font-weight: 700; }
.ai-eval.green .ai-eval-title { color: var(--aicons-positive); }
.ai-eval.yellow .ai-eval-title { color: var(--aicons-warning); }
.ai-eval.red .ai-eval-title { color: var(--aicons-negative); }
.ai-eval-score { margin-left: auto; font-weight: 700; font-size: 12px; color: var(--aicons-anthracite); }
.ai-eval-body { color: var(--aicons-anthracite); }
.ai-eval-body strong { color: var(--aicons-anthracite); }
.ai-eval-empty { color: var(--aicons-steel); font-style: italic; font-size: 0.75rem; }

/* ====================================================================
   RESPONSIVE: Tablet (iPad Querformat 1024px) + Touch-Optimierung
   ==================================================================== */

/* Hover-Effekte nur auf echten Pointer-Geräten (Maus) */
@media (hover: none) {
  .item-card:hover, .inline-head:hover, .bit-card:hover, .goal-mini:hover,
  .client-card:hover, .ai-strategy-card:hover, .api-item:hover,
  .stage:hover, .brief-card:hover, .scale-btn:hover, .kind-btn:hover,
  .brand-bar .client-chip:hover { transform: none; box-shadow: none; }
  /* Buttons reagieren auf Aktivierung statt Hover */
  button:hover, .btn:hover { background: inherit; color: inherit; }
  button:active, .btn:active { background: var(--accent); color: white; }
}

/* Grössere Touch-Targets auf Touch-Geräten */
@media (pointer: coarse) {
  button, .btn { min-height: 44px; padding: 10px 18px; }
  .scale-btn, .kind-btn, .bit-card { min-height: 44px; }
  .inline-head { min-height: 60px; }
  .item-card { min-height: 90px; }
  .step { min-height: 56px; }
  .api-item { padding: 6px 12px; min-height: 32px; }
  /* Slider-Thumb grösser */
  input[type=range]::-webkit-slider-thumb { width: 24px !important; height: 24px !important; }
  input[type=range]::-moz-range-thumb { width: 24px !important; height: 24px !important; }
  input[type=range] { height: 32px; }
  /* Dropdown-Optionen grösser */
  .mandate-dd-list .opt, select option { min-height: 44px; padding: 12px; }
  /* Tabs */
  .tab { padding: 12px 16px; min-height: 44px; }
  /* Sov-Bar Items */
  .sov-item { padding: 4px 8px; min-height: 32px; }
}

/* === Tablet Querformat: 1024px - 1280px === */
/* VF-007: narrow right-panel slider label fix */
@media (max-width: 1400px) {
  .slider-row .val { font-size: 0.75rem; }
}
@media (max-width: 1280px) {
  /* Layout-Spalten enger */
  .layout { padding: 10px 16px; gap: 10px; }
  .brand-bar { padding: 8px 16px; gap: 12px; }
  .brand-bar .tagline { display: none; } /* Tagline weg auf Tablet */
  .sov-bar { padding: 6px 16px; gap: 10px; font-size: 0.75rem; }
  .sov-item .lbl { display: none; } /* Nur Werte zeigen */
  .api-strip { padding: 5px 16px; gap: 10px; }
  .stepper { padding: 10px 16px; gap: 0; }
  .stage { min-width: 130px; padding: 6px 10px; }
  .stage .sub { display: none; } /* Sub-Beschriftung weg */
  .stage-sep { width: 8px; }
  .stage-content { padding: 14px 16px; }
}

/* === Tablet Hochformat + kleines Tablet: 1024px → 2-spaltig === */
@media (max-width: 1100px) {
  /* Cockpit 3 → 1 Spalte: Slider oben, Charts mitte, Inspector unten */
  .cockpit-grid { grid-template-columns: 1fr !important; }
  .layout { grid-template-columns: 1fr !important; }
  /* Items-Grid bleibt 2-spaltig */
  .items-grid { grid-template-columns: 1fr 1fr; }
  /* Drei-Achsen-Viz: Bars + Triangle untereinander */
  .risk3-grid { grid-template-columns: 1fr; gap: 16px; }
  .risk3-triangle { max-width: 280px; }
  /* KI-Strategie 3 Sektionen untereinander */
  .ai-strategy-grid { grid-template-columns: 1fr !important; }
  /* Brief-Karten Inhalt einspaltig */
  .brief-grid { grid-template-columns: 1fr; }
  /* Modal kompakter */
  .modal { max-width: 100%; padding: 20px 22px; }
  }

/* === Schmales Tablet / iPad Hochformat: 900px === */
@media (max-width: 900px) {
  /* Items-Grid auch einspaltig */
  .items-grid { grid-template-columns: 1fr; }
  /* Cockpit-Slider-Block volle Breite */
  .ips-slider-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
  .ips-slider-control { width: 100%; }
  /* KPI-Grid 2-spaltig */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  /* Chart-Grid einspaltig */
  .chart-grid { grid-template-columns: 1fr; }
  /* Client-Picker Cards kompakter */
  .client-grid { grid-template-columns: 1fr; gap: 12px; }
  /* Login-Box Vollbild */
  .login-box { width: calc(100vw - 30px); max-width: 380px; padding: 26px 24px; }
  /* Goals-Grid */
  .goals-grid { grid-template-columns: 1fr !important; }
  /* Modal voll */
  .modal-bg { padding: 12px; }
  .modal { padding: 18px 18px; max-height: calc(100vh - 24px); }
  /* Stage-Header kompakter */
  .stage-hdr { padding: 12px 14px; gap: 10px; }
  .stage-hdr .num { font-size: 26px; }
  .stage-hdr .h-ttl { font-size: 16px; }
  /* Brand-Bar minimal */
  .brand-bar .right { gap: 6px; }
  .brand-bar .user-chip { display: none; }
}

/* === Sehr schmal: optional Smartphone-Notfall === */
@media (max-width: 640px) {
  .stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; }
  .stage { min-width: 110px; }
  .stage-content { padding: 12px 12px; }
  .layout { padding: 8px 10px; }
  .brand-bar { padding: 8px 12px; flex-wrap: wrap; }
  .brand-bar .logo { font-size: 18px; letter-spacing: 3px; }
  .sov-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .sov-bar .clock { display: none; }
  /* KPI einspaltig */
  .kpi-grid, .kpi-row { grid-template-columns: 1fr !important; }
  /* Show-modal voll */
  .show-modal { padding: 20px 16px; }
  /* Composer fills full width */
}

/* =========================================================
   RIGHT PANEL (Souveränität + Datenquellen + Footer info)
   ========================================================= */
/* VCO-2 (2026-06-14): right rail background unified to sidebar colour. */
.cw-panel {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  position: relative;
}
/* Resize handle on the left edge of the right panel: drag to widen/narrow
   (240-560px, persisted per user in localStorage). Same visual language as
   .cw-sidebar-resize. Hidden at <=1100px, where .cw-panel leaves the grid
   and becomes a fixed bottom sheet (see COWORK RESPONSIVE below). */
.cw-panel-resize {
  position: absolute;
  top: 0; left: -3px; bottom: 0;
  width: 7px;
  cursor: col-resize;
  background: transparent;
  z-index: 16;
  touch-action: none;
}
.cw-panel-resize:hover,
.cw-panel-resize.active { background: var(--accent-a20); }
.cw-panel-section {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
}
.cw-panel-section:last-child { border-bottom: none; }
.cw-panel-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.cw-panel-heading svg { width: 13px; height: 13px; }

/* Sovereignty items in panel */
.sov-bar {
  display: flex; flex-direction: column; gap: 5px;
  background: transparent; color: var(--text-primary);
  padding: 0; font-size: 0.75rem;
}
.sov-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s;
  border: 0.5px solid transparent;
}
.sov-item:hover {
  background: var(--bg-secondary);
  border-color: var(--border-hairline);
}
.sov-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success-text);
  box-shadow: 0 0 4px rgba(67,116,38,0.5);
  flex-shrink: 0;
}
/* C3: approval buttons that are planned for the live stage render disabled. */
.cw-rp-approve-btn:disabled,
.cw-studio-tool-action-btn:disabled,
.pe-quick-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Planned (not-yet-live) marker: grey, no green "live" glow. Used for feeds and
   sovereignty rows whose capability is on the roadmap, not active today. */
.sov-dot.planned { background: var(--text-muted); box-shadow: none; }
.sov-item.planned .lbl,
.sov-item.planned .val { color: var(--text-muted); }
.sov-item.planned .val { font-weight: 600; }
.sov-item .lbl { color: var(--text-secondary); font-size: 0.75rem; flex: 1; }
.sov-item .val { color: var(--text-primary); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.3px; }
.sov-bar .clock {
  margin-top: 6px; text-align: center;
  color: var(--text-muted); font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

/* API strip in panel */
.api-strip {
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  font-size: 0.75rem;
  display: flex; flex-direction: column; gap: 4px;
  border-bottom: none;
  white-space: normal;
}
.api-strip .api-label {
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  padding-right: 0; border-right: none;
  display: none; /* heading is in cw-panel-heading */
}
.api-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  cursor: help;
  border: 0.5px solid var(--border-hairline);
  transition: background .1s;
}
.api-item:hover { background: var(--bg-primary); }
.api-item .api-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success-text);
  box-shadow: 0 0 4px rgba(67,116,38,0.4);
  flex-shrink: 0;
}
.api-item .api-dot.warn {
  background: var(--status-warning);
  box-shadow: 0 0 4px rgba(201,162,39,0.4);
}
.api-item .api-dot.err { background: var(--danger-text); }
.api-item .api-nm { color: var(--text-primary); font-weight: 600; flex: 1; font-size: 0.75rem; }
.api-item .api-lat { color: var(--accent-text); font-variant-numeric: tabular-nums; font-size: 0.75rem; }

/* AI Model Badge (Cowork style) */
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-xs);
  background: rgba(176, 86, 54,0.08);
  border: 0.5px solid rgba(176, 86, 54,0.25);
  font-size: 0.75rem; color: var(--accent-text);
  letter-spacing: 0.3px; font-weight: 600; cursor: help;
  vertical-align: middle;
}
.ai-badge::before { content: '◆'; font-size: 7px; }
.ai-badge .ai-lat { color: var(--text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.ai-badge .ai-conf { color: var(--success-text); font-weight: 700; }
.ai-badge.local {
  background: rgba(67,116,38,0.08);
  border-color: rgba(67,116,38,0.25);
  color: var(--success-text);
}

/* Panel footer info */
.cw-panel-footer {
  padding: 0 14px;
  height: var(--workspace-bottombar-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.75rem; color: var(--text-muted);
  line-height: 1.5;
  border-top: 0.5px solid var(--border-hairline);
  margin-top: auto;
  flex-shrink: 0;
}
.cw-panel-footer a { color: var(--accent-text); }

/* Right panel top: brand + mode switcher (WM + PE) */
.cw-panel-top {
  padding: 14px 14px 10px;
  flex-shrink: 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-panel-top .cw-mode-switcher { margin-bottom: 0; }

/* Wissensdatenbank stats badge row at the top of the right panel (WM/PE). */
.cw-kb-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-kb-stats-ttl { font-weight: 600; color: var(--text-primary); }
.cw-kb-stats-badge {
  background: rgba(176, 86, 54, 0.08);
  border-radius: 10px;
  padding: 2px 8px;
}
.cw-kb-stats-badge strong { color: var(--accent, #B05636); font-weight: 700; }

/* =========================================================
   GENERIC BUTTONS: Cowork style
   ========================================================= */
button, .btn {
  display: inline-block; padding: 7px 14px;
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: 500 0.75rem var(--font-primary);
  letter-spacing: 0.3px;
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all .12s;
}
button:hover, .btn:hover {
  background: var(--bg-primary);
  border-color: var(--accent);
  color: var(--accent-text);
}
button.primary, .btn.primary {
  background: var(--accent); color: white;
  border-color: var(--accent);
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.ghost { border-color: var(--border-hairline); color: var(--text-muted); background: transparent; }
button.ghost:hover { border-color: var(--text-muted); color: var(--text-primary); background: transparent; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================
   FORM FIELDS: unified Cowork controls (F-audit)
   ========================================================= */
.cw-field-input,
.cw-field-select,
.cw-field-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  font: 400 13px var(--font-primary);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color .12s, box-shadow .12s;
}
.cw-field-input--compact { padding: 6px 8px; font-size: 12px; }
.cw-field-textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
.cw-field-select { cursor: pointer; }
.cw-field-input:focus,
.cw-field-select:focus,
.cw-field-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.cw-field-label {
  display: block;
  font: 600 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
}

/* =========================================================
   SETTINGS OVERLAY (full-page, Cowork style)
   ========================================================= */
.cw-settings-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay-scrim);
  z-index: 500;
  align-items: stretch;
  justify-content: center;
}
.cw-settings-overlay.open { display: flex; }
.cw-settings-modal {
  background: var(--bg-tertiary);
  width: 100%; max-width: 640px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  align-self: stretch;
  margin: 20px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.cw-settings-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
}
.cw-settings-header h2 {
  font-size: 16px; font-weight: 600;
  color: var(--text-primary);
  margin: 0; border: none; text-transform: none;
  letter-spacing: 0; flex: 1;
}
.cw-settings-header .cw-close {
  width: 30px; height: 30px; border-radius: var(--radius-full);
  border: none; background: var(--bg-secondary);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; padding: 0;
  transition: all .1s;
}
.cw-settings-header .cw-close:hover { background: var(--border-hairline); color: var(--text-primary); }
.cw-settings-body { display: flex; flex: 1; overflow: hidden; }
/* Single-page layout (tab bar removed 2026-08-15, Petra Novak): all sections
   render stacked and visible at once, so the settings body is just the
   scrollable content column now -- no left nav / tab bar. openSettings(tab)
   still scroll-jumps to a section via switchSettingsTab() in cockpit-app.js. */
.cw-settings-content {
  flex: 1; overflow-y: auto; padding: 16px 18px;
}
.cw-settings-panel { display: block; padding-top: 0; margin-bottom: 18px; scroll-margin-top: 8px; }
.cw-settings-panel:last-child { margin-bottom: 0; }
.cw-settings-section-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-setting-group { margin-bottom: 16px; }
.cw-setting-group h3 {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted);
  font-weight: 600; margin-bottom: 8px;
  border: none;
}
.cw-setting-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-setting-row:last-child { border-bottom: none; }
.cw-setting-lbl { flex: 1; font-size: 13px; color: var(--text-primary); }
.cw-setting-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.cw-lang-set-pills { display: flex; gap: 6px; }
.cw-lang-set-pill {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-hairline);
  font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--text-muted);
  transition: all .1s;
}
.cw-lang-set-pill.active {
  background: var(--accent); color: white; border-color: var(--accent);
}

/* Settings -> Sicherheit: self-service 2FA (TOTP) enrolment. */
.cw-2fa-badge {
  font: 700 0.75rem var(--font-primary);
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.cw-2fa-badge--on { background: var(--success-bg); color: var(--success-text); border: 1px solid rgba(67,116,38,0.3); }
.cw-2fa-badge--off { background: var(--danger-bg); color: var(--danger-text); border: 1px solid rgba(127,44,40,0.25); }
.cw-2fa-qr-card { background: #fff; padding: 12px; border-radius: var(--radius-sm); display: inline-block; line-height: 0; }
.cw-2fa-qr-card canvas { display: block; }
.cw-2fa-manual-key { font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: 1px; padding: 8px 10px; background: var(--bg-secondary); border-radius: var(--radius-sm); word-break: break-all; margin-top: 8px; }
.cw-2fa-code-input { width: 140px; font-size: 18px; letter-spacing: 4px; text-align: center; padding: 8px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--bg-primary); }
.cw-2fa-pw-input { width: 100%; max-width: 280px; padding: 8px 10px; border: 0.5px solid var(--border-hairline); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); background: var(--bg-primary); }
.cw-2fa-recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-family: var(--font-mono, monospace); font-size: 13px; background: var(--bg-secondary); padding: 12px; border-radius: var(--radius-sm); margin: 10px 0; }
.cw-2fa-warn { font-size: 12px; color: var(--warning-text); background: var(--warning-bg); border-radius: var(--radius-sm); padding: 8px 10px; margin: 10px 0; }
.cw-2fa-error { font-size: 12px; color: var(--danger-text); background: var(--danger-bg); border-radius: var(--radius-sm); padding: 8px 10px; margin: 8px 0; }
.cw-2fa-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }
.cw-2fa-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Cockpit lang pills (now hidden in brand-bar, visible in user menu only) */
.cockpit-lang { display: none; }

/* =========================================================
   FOOTER (inside right panel now: .cw-panel-footer handles it)
   Keep .footer for legacy references from renderStage functions
   ========================================================= */
.footer {
  background: transparent;
  color: var(--text-muted);
  padding: 10px 0 4px;
  font-size: 0.75rem; letter-spacing: 0.5px;
  text-align: center; margin-top: 24px;
  border-top: 0.5px solid var(--border-hairline);
}
.footer a { color: var(--accent-text); }

/* =========================================================
   COCKPIT GRID (Stage 6: keep but remap colors)
   ========================================================= */
/* VCO-1 (2026-06-14): .panel is the white card on grey canvas, margin-bottom is now the gap token. */
.panel { background: var(--bg-primary); border: 0.5px solid var(--border-hairline); padding: 12px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-hairline); margin-bottom: 10px; min-width: 0; }
.panel:last-child { margin-bottom: 0; }

/* F-017: PDF loading overlay: CSS class replaces inline-style hex */
.pdf-loading-box {
  background: var(--aicons-anthracite);
  padding: 24px 32px;
  border-radius: var(--radius-md);
  border-top: 3px solid var(--accent);
  min-width: 280px;
  color: white;
}
.pdf-loading-status { font-size: 0.75rem; color: var(--aicons-steel); margin-top: 8px; }

/* =========================================================
   COWORK RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .cowork-shell { grid-template-columns: var(--cw-sidebar-w, 240px) 1fr; }
  .cw-panel {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: 100% !important;
    max-width: 100%;
    height: min(72vh, 560px);
    max-height: 72vh;
    z-index: 520;
    transform: translateY(calc(100% + 24px));
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(25,32,36,0.18);
    border-left: none;
    border-top: 0.5px solid var(--border-hairline);
    opacity: 1;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Panel is a fixed bottom sheet below 1100px, not a grid column -- the
     width drag handle has nothing to resize here. */
  .cw-panel-resize { display: none; }
  body.cw-panel-mobile-open .cw-panel { transform: translateY(0); }
  .cw-mobile-context-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(25,32,36,0.45);
    z-index: 510;
  }
  body.cw-panel-mobile-open .cw-mobile-context-backdrop { display: block; }
  .cw-context-fab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
    z-index: 505;
    padding: 10px 14px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border-hairline);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: 600 0.75rem var(--font-primary);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }
  .cw-context-fab svg { width: 16px; height: 16px; color: var(--accent-text); }
  body.cw-panel-mobile-open .cw-context-fab { display: none; }
  .cw-panel::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border-hairline);
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  .cw-panel-top { padding-top: 0; }
}
.cw-context-fab, .cw-mobile-context-backdrop { display: none; }

/* iPad / tablet landscape: touch-friendly mode switcher in right panel */
@media (min-width: 901px) and (max-width: 1280px) {
  .cw-mode-btn { min-height: 44px; padding: 10px 14px; font-size: 12px; }
}

/* ── Tablet / narrow phone: horizontal top-bar sidebar ── */
@media (max-width: 900px) {
  .cowork-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cw-sidebar {
    grid-column: 1; grid-row: 1;
    flex-direction: row; align-items: center;
    height: auto; max-height: none;
    padding: 0;
    overflow-x: auto; overflow-y: hidden;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  /* Logo + mode-switcher block stays compact */
    /* Mode switcher in horizontal bar */
  .cw-mode-switcher {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  /* Nav items scroll horizontally; keep them as a flex row */
  .cw-sidebar-middle {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    gap: 0;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  /* Sidebar sections in horizontal mode: compact button-like rows */
  .cw-sidebar-section { flex-shrink: 0; }
  .cw-sidebar-section-header {
    padding: 6px 10px;
    margin: 2px 2px;
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }
  /* Hide caret; bodies collapse unless section is open (dropdown) */
  .cw-sidebar-section { position: relative; }
  .cw-sidebar-section-caret { display: none; }
  .cw-sidebar-section-body { display: none !important; }
  .cw-sidebar-section.section-open .cw-sidebar-section-body {
    display: block !important;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 120;
    min-width: 240px;
    max-width: min(320px, 92vw);
    max-height: min(320px, 45vh);
    overflow-y: auto;
    background: var(--bg-primary);
    border: 0.5px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hairline);
    padding: 6px 0;
  }
  .cw-step-row { flex-direction: row; padding: 6px 10px; margin: 2px; white-space: nowrap; flex-shrink: 0; }
  .cw-step-body { display: none; }
  .cw-sidebar-bottom {
    display: flex !important;
    position: fixed;
    bottom: 14px;
    right: 14px;
    z-index: 200;
    padding: 0;
    border: none;
    background: transparent;
  }
  .cw-sidebar-bottom .cw-user-chip {
    padding: 6px 10px;
    box-shadow: var(--shadow-hairline);
    border: 0.5px solid var(--border-hairline);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
  }
  .cw-sidebar-bottom .cw-user-name { display: none; }
  .cw-sidebar-bottom .cw-user-menu { bottom: calc(100% + 8px); right: 0; left: auto; }
  /* Permanently-docked tree (item 5) doesn't fit the narrow horizontal-bar
     sidebar on mobile -- hidden here; still reachable via the account-menu
     "Dateien" item, which opens the full-screen enlarge modal (works fine
     at any width, see .cwft-modal-lg). */
  .cw-filetree-dock { display: none; }
  /* #99: dock is hidden above -- reveal the account-menu "Dateien" item (and
     its leading divider) as the only remaining path to the file browser on
     mobile. */
  #cwMenuFiles { display: flex; }
  #cwMenuFilesDivider { display: block; }
  /* Sidebar is a horizontal top bar on mobile (see .cw-sidebar rule above) --
     the vertical resize handle has no meaning there. */
  .cw-sidebar-resize { display: none; }
  .cwft-modal-lg { width: 100vw; height: 100dvh; max-height: 100vh; border-radius: 0; }
  .cw-main { grid-column: 1; grid-row: 2; overflow: hidden; }
  .cowork-shell { padding-top: 32px; }
  .cw-shell-handles { display: none; }
  .cw-shell-brand { top: 6px; height: 18px; max-width: calc(100% - 24px); }
  /* PE period/portco blocks belong in main pane on narrow viewports, not the top bar */
  #cwSidebarPe { display: none !important; }
  /* Hide the sidebar re-open button on small screens (sidebar is always visible as topbar) */
  #cwSidebarReopen { display: none !important; }
  /* s6StickyHeader pills: allow wrapping on tablet */
  .s6h-pills { flex-wrap: wrap; gap: 4px; }
}

/* ── Phone portrait: further compress ── */
@media (max-width: 480px) {
  /* #101: the token meter's nowrap (cockpit.css, desktop rule above) would
     force horizontal overflow on a narrow phone -- allow it to wrap here. */
  .research-usage { white-space: normal; display: inline-block; margin-top: 2px; }
  .cw-shell-brand .cw-logo { font-size: 0.75rem; letter-spacing: 0.18em; }
  .cw-shell-brand .cw-logo .ai { letter-spacing: 0.18em; }
  .cowork-shell { padding-top: 28px; }
  /* Make sidebar top even more compact */
    /* Mode buttons smaller */
  .cw-mode-btn { padding: 3px 7px; font-size: 0.75rem; }
  /* Section headers in horizontal bar: smaller */
  .cw-sidebar-section-header { font-size: 12px; padding: 5px 8px; }

  /* s6StickyHeader: at phone width the sub-text wraps per-word because the
     pills row consumes most of the flex space. Fix: hide sub-text (redundant
     at phone: the title alone gives enough context), allow the header to
     wrap so pills flow onto a second row below the title row. */
  .s6h-sub { display: none; }
  #s6StickyHeader { flex-wrap: wrap; padding: 7px 12px; gap: 6px; }
  .s6h-body { width: 100%; min-width: 0; }
  .s6h-pills { justify-content: flex-start; gap: 4px; }
  .s6-pill { font-size: 0.75rem; padding: 2px 7px; }

  /* Mental-accounts / wealth-architecture 2-column grid: stack to 1-column
     on phone so pyramid and sankey are not cramped side-by-side. */
  .mental-arch-grid { grid-template-columns: 1fr !important; }

  /* Compare panel 3-column edge grid: stack to 1-column on phone */
  .compare-edge-grid { grid-template-columns: 1fr !important; }

  /* kpi-grid with inline grid-template override: force 1-column on phone */
  .kpi-grid[style*="repeat(3"] { grid-template-columns: 1fr !important; }
}

/* =========================================================
   TOP MODE SWITCHER (Chat | Cowork | Code)
   ========================================================= */
.cw-mode-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(31,30,29,0.10);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  /* Item 4: overflow:hidden clips child button backgrounds to the rounded corners,
     preventing the active-state or hover background from bleeding outside and
     making "Studio" render dirty against the sidebar background. */
  overflow: hidden;
}
.cw-mode-btn {
  flex: 1;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sidebar-text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all .1s;
  text-align: center;
  letter-spacing: 0.2px;
}
.cw-mode-btn:hover { color: var(--sidebar-text); background: rgba(31,30,29,0.05); }
.cw-mode-btn.active {
  background: var(--bg-primary);
  color: var(--sidebar-text-active);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* =========================================================
   SIDEBAR NAV ITEMS (nav rows above stepper)
   ========================================================= */
.cw-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--sidebar-text);
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 1px 6px;
  transition: background .1s;
  user-select: none;
}
.cw-nav-item:hover { background: rgba(31,30,29,0.05); }
.cw-nav-item.active {
  background: var(--sidebar-accent-bg);
  color: var(--accent-text);
  font-weight: 700;
}
.cw-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sidebar-text-muted); }
.cw-nav-item.active svg { color: var(--accent-text); }
.cw-nav-beta {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-text);
  background: rgba(176, 86, 54,0.12);
  border-radius: 3px;
  padding: 1px 4px;
  text-transform: uppercase;
}
.cw-nav-recents-header {
  padding: 8px 14px 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--sidebar-text-muted);
  font-weight: 700;
}
.cw-nav-recent-item {
  padding: 5px 14px;
  font-size: 0.75rem;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-xs);
  margin: 0 6px;
  transition: background .1s;
}
.cw-nav-recent-item:hover { background: rgba(31,30,29,0.05); color: var(--sidebar-text); }

/* =========================================================
   MAIN TOP BAR v2: mode switcher + task title + actions
   ========================================================= */
.cw-main-topbar-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
  background: var(--bg-primary);
  min-height: 44px;
}
.cw-topbar-mode-seg {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: rgba(31,30,29,0.08);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.cw-topbar-mode-btn {
  padding: 3px 9px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all .1s;
}
.cw-topbar-mode-btn.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.cw-topbar-task-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 0;
}
.cw-topbar-task-title .title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-topbar-task-title .caret {
  color: var(--text-muted);
  flex-shrink: 0;
}
.cw-topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cw-topbar-icon-btn {
  width: 28px; height: 28px;
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: all .12s; padding: 0;
  flex-shrink: 0;
}
.cw-topbar-icon-btn:hover { background: var(--bg-primary); color: var(--text-primary); border-color: var(--text-muted); }
.cw-topbar-icon-btn svg { width: 14px; height: 14px; }
/* Overflow actions menu */
.cw-overflow-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 200;
  min-width: 180px;
  overflow: hidden;
}
.cw-overflow-menu.open { display: block; }
.cw-overflow-wrap { position: relative; }

/* =========================================================
   CONVERSATION AREA (chat-style main pane content)
   ========================================================= */
/* VCO-1 (2026-06-14): Consult main area is the grey canvas; sections are white cards on top. */
/* VCO-2 (2026-06-14): conversation canvas uses sidebar colour. */
.cw-conversation {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cw-conversation .stage-content-wrap {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
/* VCO-2 (2026-06-14): stage-content is a flex column so the Markt-Wirkung card
   and the cockpit-main-grid share the same 10px gap as all other section pairs. */
.stage-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
/* Stage 1 Erstaufnahme: let accordion grow naturally inside scroll area */
.stage-content:has(.inline-card) {
  flex: none;
  min-height: auto;
}
.cw-conversation .stage-content-wrap:has(.inline-card) {
  flex: none;
  min-height: auto;
}
body[data-cw-mode="consult"] .cockpit-main-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body[data-cw-mode="consult"] .cockpit-row1 {
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body[data-cw-mode="consult"] .cockpit-lifecycle-panel {
  flex: none;
  overflow: hidden;
  min-height: 0;
}
body[data-cw-mode="consult"] #lifecycleS6Wrap {
  flex: none;
  overflow: hidden;
  min-height: 0;
  max-height: none;
}
body[data-cw-mode="consult"] .lifecycle-chart-wrap {
  display: block;
  overflow: hidden;
  max-height: 320px;
  margin-top: 0;
}
body[data-cw-mode="consult"] .lifecycle-chart-canvas-host {
  position: relative;
  width: 100%;
  height: 240px;
  max-height: 240px;
  overflow: hidden;
}
body[data-cw-mode="consult"] .lifecycle-chart-wrap canvas,
body[data-cw-mode="consult"] #lifecycleStage6Chart {
  display: block;
  width: 100% !important;
  height: 240px !important;
  max-height: 240px !important;
}
/* User message bubble */
.cw-msg-user {
  display: flex;
  justify-content: flex-end;
}
.cw-msg-user .cw-bubble {
  max-width: 72%;
  background: rgba(31,30,29,0.07);
  color: var(--text-primary);
  padding: 9px 14px;
  border-radius: 16px 16px 4px 16px;
  font-size: 13px;
  line-height: 1.5;
}
/* Assistant/content message: full width, plain text */
.cw-msg-assistant {
  width: 100%;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* =========================================================
   CHAT PANE (Q+A panel above composer, grows dynamically)
   =========================================================
   Design decision (2026-06-12, Petra, Tier A):
     Resting height: 0px -- invisible when no chat messages exist.
     Expanded height: 380px -- just under 3x the composer block (~132px).
       3x exact = 396px; 380px gives 16px breathing room from viewport edges.
     Default height: min(190px, 100vh-260px): half the previous 380px default.
     User can drag the resize handle on the top edge to change height (90px min,
     100vh-160px max). Chosen height persists to localStorage (aicons_chat_pane_h).
     Collapsed state (header visible, body hidden) persists to localStorage
     (aicons_chat_pane_collapsed).
     Transition: height 0.28s ease + opacity 0.2s ease for perceptible but fast growth.
     Internal scroll: overflow-y auto on #cwChatPaneBody handles long conversations.
   This keeps the Q and A co-located with the composer and out of the stage-content
   scroll area. Stage content is undisturbed above. */
/* KI-Assistent: chat pane + composer use light (white) canvas. */
#cwChatPane {
  flex-shrink: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: relative; /* 260823: anchors .cw-chatpane-jump-btn to the pane, not the scrolling body */
  background: var(--bg-primary);
  border-top: 0 solid var(--border-hairline);
  transition: height 0.28s ease, opacity 0.2s ease, border-top-width 0s 0.28s;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}
/* Resize handle on top edge: only shown when pane is open and not collapsed */
#cwChatPaneResizeHandle {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  cursor: ns-resize;
  background: transparent;
  z-index: 10;
}
#cwChatPaneResizeHandle:hover,
#cwChatPaneResizeHandle.dragging {
  background: var(--accent-a20);
}
/* Collapse/expand header bar: always shown when pane is open */
#cwChatPaneHeader {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 4px 16px;
  border-bottom: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  min-height: 26px;
}
#cwChatPaneHeader:hover { background: var(--bg-tertiary); }
#cwChatPaneHeader .cph-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 700;
}
#cwChatPaneHeader .cph-chevron {
  color: var(--text-muted);
  transition: transform 0.18s ease;
  line-height: 0;
  padding: 2px;
}
#cwChatPane.cw-chat-pane-collapsed #cwChatPaneHeader .cph-chevron {
  transform: rotate(180deg);
}
/* Scrollable body inside the pane */
#cwChatPaneBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 20px 8px;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}
#cwChatPane.cw-chat-pane-open {
  height: 190px;
  height: min(190px, calc(100vh - 260px));
  opacity: 1;
  border-top-width: 0.5px;
  transition: height 0.28s ease, opacity 0.2s ease;
}
#cwChatPane.cw-chat-pane-open #cwChatPaneResizeHandle { display: block; }
#cwChatPane.cw-chat-pane-open #cwChatPaneHeader { display: flex; }
/* Collapsed: body hidden, only header visible */
#cwChatPane.cw-chat-pane-open.cw-chat-pane-collapsed {
  height: 26px !important;
  transition: height 0.18s ease, opacity 0.2s ease;
}
#cwChatPane.cw-chat-pane-collapsed #cwChatPaneBody { display: none; }
#cwChatPane.cw-chat-pane-collapsed #cwChatPaneResizeHandle { display: none; }
/* Confirmation card for parameter actions (used in Ask before acting mode) */
.cw-param-confirm-card {
  background: var(--warning-bg);
  border: 1px solid rgba(90,72,21,0.20);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 6px 0;
  font-size: 12px;
}
.cw-param-confirm-card .cpc-title {
  font-weight: 700;
  color: var(--warning-text);
  margin-bottom: 6px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.cw-param-confirm-card .cpc-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.cw-param-confirm-card .cpc-label { color: var(--text-secondary); min-width: 120px; }
.cw-param-confirm-card .cpc-old { color: var(--text-muted); text-decoration: line-through; }
.cw-param-confirm-card .cpc-new { color: var(--accent-text); font-weight: 700; }
.cw-param-confirm-card .cpc-actions { display: flex; gap: 6px; margin-top: 8px; }
.cw-param-confirm-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.cw-param-confirm-btn.apply {
  background: var(--accent);
  color: white;
}
.cw-param-confirm-btn.apply:hover { background: var(--accent-hover); }
.cw-param-confirm-btn.cancel {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 0.5px solid var(--border-hairline);
}
.cw-param-confirm-btn.cancel:hover { background: var(--bg-tertiary); }
#aiChatBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#aiChatBody .cw-msg-assistant {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-hairline);
}

/* =========================================================
   NEW COMPOSER (always visible at bottom)
   =========================================================
   Item 9: composer area ~33% larger overall */
.cw-composer-v2 {
  flex-shrink: 0;
  background: var(--bg-primary);
  border-top: 0.5px solid var(--border-hairline);
  padding: 12px 16px 10px;
}
.cw-composer-inner {
  border: 1px solid var(--composer-border);
  border-radius: 14px;
  background: var(--bg-primary);
  /* Petra Novak, 260823: overflow:hidden here clipped every toolbar popup
     (model picker, agent picker, folder menu -- all position:absolute,
     bottom:calc(100% + Npx), i.e. rendered ABOVE this box) to zero visible
     height, since they live inside this element in the DOM. Michael's
     "Popups sind nicht sichtbar" report. Research's equivalent container
     (.research-composer-inner, this file) never had overflow:hidden, which
     is why research's pickers were never affected -- this is the one real
     structural difference between the two composers. Only the textarea
     (background: transparent) and the toolbar (border-top only, no fill)
     sit inside this box, so dropping the clip does not expose any bleed
     past the rounded corners it was presumably added for.
     -- Aicons Frontend-Bugfix, WM/PE popup visibility. */
  transition: border-color .12s;
}
.cw-composer-inner:focus-within {
  border-color: rgba(176, 86, 54,0.4);
}
/* Item 9: larger composer input area */
.cw-composer-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 14px 8px;
  font: 400 13px var(--font-primary);
  color: var(--text-primary);
  background: transparent;
  resize: none;
  min-height: 52px;
  max-height: 160px;
  line-height: 1.5;
}
.cw-composer-input::placeholder { color: var(--text-muted); }
.cw-composer-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 6px;
  border-top: 0.5px solid rgba(31,30,29,0.07);
}
.cw-composer-tool-btn {
  height: 26px;
  padding: 0 8px;
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: all .1s;
  flex-shrink: 0;
}
.cw-composer-tool-btn:hover { background: var(--bg-primary); color: var(--text-primary); border-color: var(--text-muted); }
.cw-composer-tool-btn svg { width: 12px; height: 12px; }
.cw-composer-tool-btn.icon-only { padding: 0 7px; }
/* Ask dropdown button */
.cw-ask-btn {
  height: 26px;
  padding: 0 8px;
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; gap: 3px;
  transition: all .1s;
  flex-shrink: 0;
  position: relative;
}
.cw-ask-btn:hover { background: var(--bg-primary); color: var(--text-primary); }
.cw-ask-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 300;
  /* Petra Novak, 260823: was min-width:130px with no explicit width. The
     trigger button sits in a flex-item wrapper with no fixed width, so the
     browser's shrink-to-fit sizing for this absolutely positioned menu
     collapsed to the 130px min-width floor regardless of content length --
     German agent labels ("Reporting & Kommunikation", "Portfolio &
     Allokation") then wrapped to two ragged lines inside that narrow box,
     which is the "nicht richtig aliniert und nicht lesbar" Michael reported.
     width:max-content forces sizing off the actual content instead of the
     containing block; min-width raised to 200px + max-width cap matches the
     known-good .research-picker-menu pattern (min-width 200-280px) so long
     single-line labels never wrap. Verified via a real-markup Puppeteer
     render (headless Chrome), not assumed. */
  min-width: 200px;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  overflow: hidden;
}
.cw-ask-dropdown.open { display: block; }
.cw-ask-opt {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .1s;
}
.cw-ask-opt:hover { background: var(--bg-secondary); }
.cw-ask-opt.selected { color: var(--accent-text); font-weight: 700; }
/* Model selector */
.cw-model-btn {
  height: 26px;
  padding: 0 8px;
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; gap: 3px;
  transition: all .1s;
  flex-shrink: 0;
  position: relative;
}
.cw-model-btn:hover { background: var(--bg-primary); color: var(--text-primary); }
.cw-model-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 300;
  min-width: 160px;
  overflow: hidden;
}
.cw-model-dropdown.open { display: block; }
.cw-model-opt {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .1s;
}
.cw-model-opt:hover { background: var(--bg-secondary); }
.cw-model-opt.selected { color: var(--accent-text); font-weight: 700; }
/* File chip */
.cw-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 6px;
  background: rgba(176, 86, 54,0.10);
  border: 0.5px solid rgba(176, 86, 54,0.25);
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  color: var(--accent-text);
  cursor: default;
}
.cw-file-chip .rm { cursor: pointer; opacity: 0.6; }
.cw-file-chip .rm:hover { opacity: 1; }
.cw-file-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 0; }
/* Spacer */
.cw-composer-spacer { flex: 1; }
/* Send button */
.cw-send-btn {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background .1s;
}
.cw-send-btn:hover { background: var(--accent-hover); }
.cw-send-btn svg { width: 13px; height: 13px; }
/* Send-slot, small variant (WM/PE composer, 26x26 to match .cw-send-btn) --
   see .cw-send-slot / .cw-slot-mic in the research-composer rules above for
   the shared mechanism. */
.cw-send-slot--sm { width: 26px; height: 26px; }
.cw-send-slot--sm .cw-slot-mic.cw-mic-btn { width: 26px; height: 26px; }
.cw-send-slot--sm .cw-slot-mic.cw-mic-btn svg { width: 13px; height: 13px; }
.cw-composer-disclaimer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 4px 0 2px;
  letter-spacing: 0.2px;
}
/* Composer responsive adjustments for narrow screens */
@media (max-width: 480px) {
  .cw-composer-v2 { padding: 8px 10px 6px; }
  .cw-composer-toolbar { gap: 3px; padding: 4px 8px 5px; flex-wrap: nowrap; }
  /* Truncate the ask-mode label on phone */
  .cw-ask-btn #cwAgentLabel { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Make model button show only short text on very narrow */
  .cw-model-btn #cwModelLabel { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
  /* Tighten the toolbar buttons */
  .cw-composer-tool-btn.icon-only { padding: 0 5px; }
}

/* =========================================================
   RIGHT PANEL: COLLAPSIBLE CARDS v2
   ========================================================= */
.cw-panel-card {
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-panel-card:last-child { border-bottom: none; }
.cw-panel-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.cw-panel-card-header:hover { background: rgba(31,30,29,0.03); }
.cw-panel-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.cw-panel-card-caret {
  color: var(--text-muted);
  transition: transform .15s;
  flex-shrink: 0;
}
.cw-panel-card-caret svg { width: 13px; height: 13px; display: block; }
.cw-panel-card.collapsed .cw-panel-card-caret { transform: rotate(-90deg); }
.cw-panel-card-body {
  padding: 0 14px 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.cw-panel-card.collapsed .cw-panel-card-body { display: none; }
.cw-panel-card-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* (i) info button next to a right-panel card title (e.g. "Geteilte
   Wissensbasis", task #67) -- opens the cw-kbinfo-modal below. */
.cw-kb-info-btn {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-hairline);
  background: var(--bg-primary);
  color: var(--text-muted);
  font: 700 10px/1 var(--font-primary);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.cw-kb-info-btn:hover {
  color: var(--accent, #B05636);
  border-color: var(--accent, #B05636);
}

/* KB-info summary modal (task #67), same shell as .cw-chart-modal. */
.cw-kbinfo-modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,20,19,0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.cw-kbinfo-modal-bg.active { display: flex; }
.cw-kbinfo-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: min(520px, 95vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cw-kbinfo-modal-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-hairline);
  flex-shrink: 0;
}
.cw-kbinfo-modal-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  flex: 1;
}
.cw-kbinfo-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
  margin-left: 8px;
  flex-shrink: 0;
}
.cw-kbinfo-modal-close:hover { color: var(--text-primary); }
.cw-kbinfo-modal-body {
  flex: 1;
  padding: 16px 18px 18px;
  overflow-y: auto;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.cw-kbinfo-section { margin-bottom: 14px; }
.cw-kbinfo-section-title {
  font: 700 11px var(--font-primary);
  color: var(--text-primary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.cw-kbinfo-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
.cw-kbinfo-row-label { color: var(--text-secondary); }
.cw-kbinfo-row-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cw-kbinfo-new7-note {
  background: var(--accent-a10, rgba(176,86,54,.08));
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  font-size: 0.75rem;
  color: var(--text-primary);
}
.cw-kbinfo-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--accent, #B05636);
  cursor: pointer;
  text-decoration: underline;
}

/* Progress step list (right panel): v5: slim, clickable with affordance */
.cw-progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin: 1px -6px;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background .1s;
  user-select: none;
}
.cw-progress-step:hover { background: rgba(31,30,29,0.05); }
.cw-progress-step:hover .cw-progress-label { color: var(--accent-text); text-decoration: underline; }
.cw-progress-step.locked-flash { animation: lockedFlash .4s ease-out; }
@keyframes lockedFlash { 0%,100% { background: transparent; } 50% { background: rgba(176, 86, 54,0.18); } }
.cw-progress-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 7px; font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-primary);
}
.cw-progress-dot.done {
  background: var(--success-bg);
  border-color: var(--success-text);
  color: var(--success-text);
}
.cw-progress-dot.active {
  border-color: var(--accent);
  background: rgba(176, 86, 54,0.08);
  color: var(--accent-text);
  animation: progresspulse 1.6s infinite;
}
@keyframes progresspulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.cw-progress-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
  flex: 1;
}
.cw-progress-label.active { color: var(--text-primary); font-weight: 600; }
.cw-progress-label.done { color: var(--text-muted); }

/* Working folder items */
.cw-folder-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background .1s;
  position: relative;
}
.cw-folder-item:hover { background: var(--bg-secondary); }
.cw-folder-item svg { width: 12px; height: 12px; color: var(--text-muted); flex-shrink: 0; }

/* Document action popover (v4) */
.cw-doc-popover {
  display: none;
  position: absolute;
  z-index: 400;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  min-width: 160px;
  overflow: hidden;
  animation: docPopIn .12s ease-out;
}
.cw-doc-popover.open { display: block; }
@keyframes docPopIn { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.cw-doc-popover-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .08s;
}
.cw-doc-popover-item:hover { background: var(--bg-secondary); }
.cw-doc-popover-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }

/* =========================================================
   V3 ADDITIONS
   ========================================================= */

/* Compact sov rows in Context card */
.cw-sov-compact {
  padding: 3px 6px !important;
  font-size: 0.75rem;
}
.cw-sov-compact .lbl { font-size: 0.75rem !important; }
.cw-sov-compact .val { font-size: 0.75rem !important; }

/* Projects folder tree: mandate child entries */
.cw-mandate-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 32px;
  font-size: 12px;
  color: var(--sidebar-text);
  cursor: pointer;
  border-radius: var(--radius-xs);
  margin: 1px 6px;
  transition: background .1s;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-mandate-child:hover { background: rgba(31,30,29,0.05); }
.cw-mandate-child.active { background: var(--sidebar-accent-bg); color: var(--accent-text); font-weight: 600; }
.cw-mandate-child svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--sidebar-text-muted); }
.cw-mandate-child.active svg { color: var(--accent-text); }

/* Projects folder row: chevron rotation */
.cw-nav-folder .cw-folder-chevron.open { transform: rotate(90deg); }

/* Schedule child entries: same structure as .cw-mandate-child */
.cw-schedule-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 32px;
  font-size: 12px;
  color: var(--sidebar-text);
  cursor: pointer;
  border-radius: var(--radius-xs);
  margin: 1px 6px;
  transition: background .1s;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-schedule-child:hover { background: rgba(31,30,29,0.05); }
.cw-schedule-child.active { background: var(--sidebar-accent-bg); color: var(--accent-text); font-weight: 600; }
.cw-schedule-child svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--sidebar-text-muted); }
.cw-schedule-child .cadence {
  font-size: 0.75rem;
  color: var(--sidebar-text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

/* Schedule detail toast */
.cw-schedule-toast {
  display: none;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px 20px;
  min-width: 340px;
  max-width: 480px;
  z-index: 700;
  font-size: 12px;
}
.cw-schedule-toast.open { display: block; }
.cw-schedule-toast .st-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-schedule-toast .st-row {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.cw-schedule-toast .st-kv { display: flex; flex-direction: column; gap: 1px; }
.cw-schedule-toast .st-k { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.cw-schedule-toast .st-v { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cw-schedule-toast .st-close {
  float: right;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1;
  margin-left: 8px;
}

/* Audit D3: mandate auto-save-failed banner. Non-blocking, top-of-screen, stays
   visible until dismissed or a retry succeeds -- a dropped change must be seen. */
.cw-save-fail-banner {
  display: none;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 12px;
  background: var(--danger-bg, #F7ECEC);
  border: 0.5px solid var(--danger-text, #7F2C28);
  border-left: 3px solid var(--danger-text, #7F2C28);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  min-width: 320px;
  max-width: 560px;
  z-index: 900;
  font-size: 12px;
  color: var(--danger-text, #7F2C28);
}
.cw-save-fail-banner.open { display: flex; }
.cw-save-fail-banner .sfb-msg { flex: 1; font-weight: 500; }
.cw-save-fail-banner .sfb-retry {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--danger-text, #7F2C28);
  background: transparent;
  color: var(--danger-text, #7F2C28);
  border-radius: var(--radius-sm, 6px);
  padding: 4px 10px;
  cursor: pointer;
}
.cw-save-fail-banner .sfb-close {
  cursor: pointer;
  font-size: 15px;
  color: var(--danger-text, #7F2C28);
  background: transparent;
  border: none;
  line-height: 1;
}

/* New schedule modal: composer-style (items 3.1, 3.2, 3.3) */
.cw-newsched-modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,20,19,0.5);
  z-index: 650;
  align-items: center;
  justify-content: center;
}
.cw-newsched-modal-bg.open { display: flex; }
.cw-newsched-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 0.5px solid var(--border-hairline);
  width: 520px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
}
.cw-newsched-header {
  padding: 18px 22px 12px;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-newsched-heading {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cw-newsched-heading svg { width: 18px; height: 18px; color: var(--accent-text); }
.cw-newsched-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
/* Composer input area */
.cw-newsched-composer {
  margin: 16px 22px 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cw-newsched-composer:focus-within {
  border-color: var(--accent);
}
.cw-newsched-composer-input {
  width: 100%;
  min-height: 60px;
  padding: 12px 14px 8px;
  border: none;
  outline: none;
  font: 400 13px var(--font-primary);
  color: var(--text-primary);
  background: var(--bg-primary);
  resize: none;
  box-sizing: border-box;
}
.cw-newsched-composer-input::placeholder { color: var(--text-muted); }
.cw-newsched-composer-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 8px;
  border-top: 0.5px solid var(--border-hairline);
  background: var(--bg-secondary);
}
.cw-newsched-composer-icons button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 3px;
  font-size: 0.75rem;
}
.cw-newsched-composer-icons button:hover { background: var(--bg-primary); color: var(--text-primary); }
.cw-newsched-composer-icons button svg { width: 14px; height: 14px; }
.cw-newsched-composer-icons .ic-attach { font-size: 16px; font-weight: 400; color: var(--text-muted); padding: 2px 6px; }
.cw-newsched-composer-icons .ic-mic svg { width: 13px; height: 13px; }
/* Toolbar row */
.cw-newsched-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px 14px;
  flex-wrap: wrap;
}
.cw-newsched-toolbar select {
  padding: 5px 8px;
  border: 0.5px solid var(--border-hairline);
  border-radius: 20px;
  font: 400 0.75rem var(--font-primary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}
.cw-newsched-toolbar select:focus { border-color: var(--accent); }
.cw-newsched-model-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-hairline);
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
}
/* Active schedules section */
.cw-newsched-active {
  border-top: 0.5px solid var(--border-hairline);
  padding: 10px 22px 16px;
}
.cw-newsched-active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cw-newsched-active-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 700;
}
.cw-newsched-active-clear {
  font-size: 0.75rem;
  color: var(--aicons-negative);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.cw-newsched-active-clear:hover { text-decoration: underline; }
.cw-newsched-active-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--border-hairline);
  font-size: 0.75rem;
  color: var(--text-primary);
}
.cw-newsched-active-row:last-child { border-bottom: none; }
.cw-newsched-active-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aicons-positive);
  flex-shrink: 0;
}
.cw-newsched-active-time {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.cw-newsched-footer {
  padding: 10px 22px 14px;
  border-top: 0.5px solid var(--border-hairline);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Goal probability color coding */
.goal-mini .prob b.prob-full  { color: var(--aicons-positive); }
.goal-mini .prob b.prob-part  { color: var(--aicons-warning); }
.goal-mini .prob b.prob-none  { color: var(--aicons-negative); }

/* Action buttons horizontal 3-in-a-row */
.actions-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.actions-panel-row button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  padding: 8px 6px;
}

/* Mode stub panes (News / Studio panes).
   VCO-2 (2026-06-14): canvas unified to sidebar colour. */
.cw-mode-stub {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.3px;
  background: var(--bg-sidebar);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.cw-mode-stub.active { display: flex; }

/* VCO-2 (2026-06-14): Studio canvas unified to sidebar colour. */
#cwModeStudio {
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-sidebar);
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  align-items: stretch;
}
#cwModeStudio.active { display: flex; }

/* Planung pane: middle-area schedule workspace (WM + PE) */
#cwModePlanung {
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-sidebar);
  width: 100%;
  min-width: 0;
}
#cwModePlanung.active { display: flex; }
.cw-planung-header {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px 8px;
  border-bottom: 0.5px solid var(--border-hairline);
  background: var(--bg-sidebar);
}
.cw-planung-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cw-planung-sub {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
.cw-planung-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}
.cw-planung-inner {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
  /* Don't shrink to fit the scroll body: let the schedule list grow so the
     parent .cw-planung-body scrolls instead of clipping (overflow:hidden). */
  flex-shrink: 0;
}
.cw-planung-detail {
  display: none;
  border-top: 0.5px solid var(--border-hairline);
  padding: 14px 22px 16px;
  background: var(--bg-secondary);
}
.cw-planung-detail.open { display: block; }
.cw-planung-detail-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-planung-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 10px;
}
.cw-planung-detail-kv .k {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.cw-planung-detail-kv .v {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
}
.cw-schedule-toast { display: none !important; }

/* VCO-2 (2026-06-14): studio header on sidebar canvas. */
.cw-studio-header {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px 8px;
  border-bottom: 0.5px solid var(--border-hairline);
  background: var(--bg-sidebar);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cw-studio-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cw-studio-sub {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
/* VCO-2 (2026-06-14): studio body on sidebar canvas. */
.cw-studio-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cw-studio-body > .cw-studio-shelf,
.cw-studio-body > .cw-studio-quick-block,
.cw-studio-body > .cw-studio-brief,
.cw-studio-body > .cw-rp-panel,
.cw-studio-body > .cw-kyc-panel,
.cw-studio-body > .cw-analytics-panel {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Tool shelf: responsive equal-width cards (WM + PE). */
.cw-studio-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
  align-items: stretch;
}
.cw-studio-quick-block {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cw-studio-quick-block .cw-studio-quick-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.cw-studio-tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
  height: 100%;
}
.cw-studio-tool-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(46,157,255,0.12);
}
.cw-studio-tool-card--soon {
  cursor: default;
  opacity: 0.5;
}
.cw-studio-tool-card--soon:hover {
  border-color: var(--border-hairline);
  box-shadow: none;
}
.cw-studio-tool-icon {
  width: 32px;
  height: 32px;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-studio-tool-icon svg { width: 22px; height: 22px; }
.cw-studio-tool-icon--muted { color: var(--text-muted); }
.cw-studio-tool-label {
  font: 600 12px var(--font-primary);
  color: var(--text-primary);
}
.cw-studio-tool-desc {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  line-height: 1.45;
}

/* VCO-1 (2026-06-14): Inline tool action bar - primary CTAs in tool header, not only right panel.
   Governance gates (approve-before-export, field-confirm) are preserved in the JS logic;
   these buttons are just new access points to the same gated functions. */
.cw-studio-tool-action-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cw-studio-tool-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font: 600 0.75rem var(--font-primary);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  white-space: nowrap;
}
.cw-studio-tool-action-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--bg-secondary); }
.cw-studio-tool-action-btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cw-studio-tool-action-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* Meeting-Prep Brief panel: white card on grey canvas. VCO-1 (2026-06-14). */
.cw-studio-brief {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.cw-studio-brief-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
  background: var(--bg-primary);
  flex-wrap: wrap;
  min-width: 0;
}
.cw-studio-back {
  background: none;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.cw-studio-back:hover { border-color: var(--accent); color: var(--accent-text); }
.cw-studio-brief-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  letter-spacing: 0.3px;
  flex: 1;
}
.cw-studio-refresh-btn,
.cw-studio-print-btn {
  background: none;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: border-color 0.12s, color 0.12s;
}
.cw-studio-refresh-btn:hover,
.cw-studio-print-btn:hover { border-color: var(--accent); color: var(--accent-text); }

.cw-studio-brief-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
}
.cw-studio-brief-loading {
  color: var(--text-muted);
  font: 400 12px var(--font-primary);
  padding: 24px 0;
  text-align: center;
}
.cw-studio-brief-error {
  color: var(--aicons-negative);
  font: 400 12px var(--font-primary);
  padding: 16px 0;
}
/* Brief section blocks */
.cw-studio-section {
  margin-bottom: 18px;
}
.cw-studio-section-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-hairline);
}
.cw-studio-section-title {
  font: 600 0.75rem var(--font-primary);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cw-studio-section-sub {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
/* IPS parameter rows */
.cw-studio-ips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 8px;
  margin-top: 6px;
  width: 100%;
}
.cw-studio-ips-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.cw-studio-ips-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cw-studio-ips-value {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
}
/* Macro indicator rows */
.cw-studio-macro-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.cw-studio-macro-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
}
.cw-studio-macro-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-primary);
  flex: 1;
}
.cw-studio-macro-value {
  font: 600 12px var(--font-primary);
  color: var(--text-primary);
  text-align: right;
  min-width: 80px;
}
.cw-studio-macro-stub {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
}
/* Narrative block */
.cw-studio-narrative {
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: 400 12px var(--font-primary);
  color: var(--text-primary);
  line-height: 1.6;
  margin-top: 6px;
}
.cw-studio-internal-badge {
  display: inline-block;
  font: 600 0.75rem var(--font-primary);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
/* Meeting-Prep: narrative verification gate (Nadia ruling, synthesise path). */
.cw-studio-narrative-wrap { display: flex; flex-direction: column; gap: 8px; }
.cw-studio-narrative-pending-badge {
  display: inline-block;
  font: 600 0.75rem var(--font-primary);
  color: #9B6B00;
  background: #FFF7E0;
  border: 1px solid #E5C000;
  border-radius: 3px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cw-studio-narrative-verified-badge {
  display: inline-block;
  font: 600 0.75rem var(--font-primary);
  color: #437426;
  background: #F0F7EA;
  border: 1px solid #437426;
  border-radius: 3px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cw-studio-narrative-verify-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #FFFBF0;
  border: 1px solid #E5C000;
  border-radius: 4px;
  font: 400 0.75rem var(--font-primary);
  color: #6A5A00;
}
.cw-studio-narrative-verify-btn {
  padding: 4px 10px;
  font: 600 0.75rem var(--font-primary);
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.cw-studio-narrative-verify-btn:hover { background: var(--accent-hover); }

/* ── Mandatsreporting panel (Tool 2, formerly Review-Pack): white card on grey canvas. VCO-1 (2026-06-14). ── */
.cw-rp-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
}
.cw-rp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
  background: var(--bg-primary);
  flex-wrap: wrap;
  min-width: 0;
}
.cw-rp-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  letter-spacing: 0.3px;
  flex: 1;
}
.cw-rp-status-badge {
  display: inline-block;
  font: 600 0.75rem var(--font-primary);
  border-radius: 3px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cw-rp-status-badge--draft {
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid rgba(90,72,21,0.2);
}
.cw-rp-status-badge--approved {
  color: var(--success-text);
  background: var(--success-bg);
  border: 1px solid rgba(67,116,38,0.2);
}
.cw-rp-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
/* Config row: period picker + generate button */
.cw-rp-config {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.cw-rp-config label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  white-space: nowrap;
}
.cw-rp-period-select {
  font: 400 12px var(--font-primary);
  padding: 5px 8px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}
.cw-rp-generate-btn {
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background 0.12s;
}
.cw-rp-generate-btn:hover { background: var(--accent-hover); }
.cw-rp-generate-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}
/* Governance label: always visible */
.cw-rp-governance-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--danger-text);
  background: var(--danger-bg);
  border: 1px solid rgba(127,44,40,0.18);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
/* Loading state */
.cw-rp-loading {
  color: var(--text-muted);
  font: 400 12px var(--font-primary);
  padding: 20px 0;
  text-align: center;
  display: none;
}
.cw-rp-loading.active { display: block; }
/* Draft editable area */
.cw-rp-draft-wrap {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.cw-rp-draft-wrap.active { display: flex; }
.cw-rp-draft-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.cw-rp-draft-section-title {
  font: 700 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.cw-rp-draft-textarea {
  width: 100%;
  min-height: 80px;
  font: 400 12px var(--font-primary);
  color: var(--text-primary);
  line-height: 1.55;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  background: var(--bg-primary);
  resize: vertical;
  box-sizing: border-box;
}
.cw-rp-draft-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-a10);
}
.cw-rp-draft-textarea:disabled {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Gate-1 approve bar */
.cw-rp-approve-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--info-bg);
  border: 1px solid rgba(50,102,173,0.2);
  border-radius: var(--radius-sm);
}
.cw-rp-approve-bar.active { display: flex; }
.cw-rp-approve-hint {
  font: 400 0.75rem var(--font-primary);
  color: var(--info-text);
  flex: 1;
}
.cw-rp-approve-btn {
  padding: 6px 14px;
  background: var(--success-text);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
}
.cw-rp-approve-btn:hover { opacity: 0.88; }
/* Export bar (Gate 1 cleared) */
.cw-rp-export-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--success-bg);
  border: 1px solid rgba(67,116,38,0.2);
  border-radius: var(--radius-sm);
}
.cw-rp-export-bar.active { display: flex; }
.cw-rp-export-hint {
  font: 400 0.75rem var(--font-primary);
  color: var(--success-text);
  flex: 1;
}
.cw-rp-export-btn {
  padding: 6px 14px;
  background: var(--success-text);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
}
.cw-rp-export-btn:hover { opacity: 0.88; }
/* Audit info chip */
.cw-rp-audit-chip {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  margin-top: 2px;
}

/* =========================================================
   STUDIO TOOL 4: Stress-Test (Analytics)
   STUDIO TOOL 5: Scenario-Simulation / Monte Carlo (Analytics)
   Jonas Keller methodology, 2026-06-14.
   ========================================================= */
.cw-analytics-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
}
.cw-analytics-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
  background: var(--bg-primary);
  flex-wrap: wrap;
  min-width: 0;
}
.cw-analytics-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  letter-spacing: 0.3px;
  flex: 1;
}
.cw-analytics-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Mandatory disclaimer box: never hidden */
.cw-analytics-disclaimer {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-secondary);
  line-height: 1.55;
}
/* Methodology limits: collapsible, but never removable */
.cw-analytics-limits {
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  overflow: hidden;
}
.cw-analytics-limits-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font: 600 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.cw-analytics-limits-toggle:hover { color: var(--accent-text); }
.cw-analytics-limits-body {
  padding: 0 11px 9px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-secondary);
  line-height: 1.6;
  display: none;
}
.cw-analytics-limits-body.open { display: block; }
.cw-analytics-limits-body ol { margin: 4px 0 0 14px; padding: 0; }
.cw-analytics-limits-body li { margin-bottom: 4px; }
/* Sign-off line: mandatory */
.cw-analytics-signoff {
  font: 600 0.75rem var(--font-primary);
  color: var(--text-muted);
  border-top: 0.5px solid var(--border-hairline);
  padding-top: 9px;
  font-style: italic;
}
/* Stress-test scenario card */
.cw-stress-scenario-card {
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
}
.cw-stress-scenario-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px 7px;
  border-bottom: 0.5px solid var(--border-hairline);
  background: var(--bg-primary);
}
.cw-stress-scenario-name {
  font: 700 0.75rem var(--font-primary);
  color: var(--text-primary);
  flex: 1;
}
.cw-stress-scenario-period {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
.cw-stress-scenario-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-stress-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
  gap: 14px;
}
.cw-stress-kpi {
  min-width: 0;
}
.cw-stress-kpi-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.cw-stress-kpi-value {
  font: 700 18px var(--font-primary);
  font-variant-numeric: tabular-nums;
}
.cw-stress-kpi-value--neg { color: var(--aicons-negative); }
.cw-stress-kpi-value--pos { color: var(--aicons-positive); }
.cw-stress-kpi-value--neu { color: var(--text-secondary); }
/* C5: scenario basis badge (illustrative / synthetic / custom) */
.cw-stress-scenario-basis {
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-hairline);
  border-radius: 3px;
  padding: 2px 6px;
}
/* C5: shock matrix (sector x scenario), overridable + custom scenarios */
.pe-stress-matrix-card { margin-bottom: 10px; }
.pe-stress-matrix-scroll { overflow-x: auto; margin-top: 6px; }
.pe-stress-matrix-table { min-width: 480px; }
.pe-stress-matrix-table th, .pe-stress-matrix-table td { white-space: nowrap; }
.pe-stress-matrix-input {
  width: 56px;
  min-width: 56px;
  padding: 3px 4px;
  font-size: 0.75rem;
  text-align: right;
}
.pe-stress-matrix-name {
  width: 100px;
  min-width: 100px;
  font-size: 0.75rem;
  margin-bottom: 3px;
}
.pe-stress-matrix-basecell { margin-top: 3px; font-size: 0.75rem; color: var(--text-muted); }
.pe-stress-matrix-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Per-asset-class breakdown table */
.cw-stress-breakdown {
  font: 400 0.75rem var(--font-primary);
  border-collapse: collapse;
  width: 100%;
}
.cw-stress-breakdown th {
  font: 600 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: left;
  padding: 3px 6px 3px 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-stress-breakdown td {
  padding: 3px 6px 3px 0;
  color: var(--text-primary);
  border-bottom: 0.5px solid var(--bg-secondary);
  font-variant-numeric: tabular-nums;
}
.cw-stress-breakdown tr:last-child td { border-bottom: none; }
.cw-stress-breakdown .total-row td { font-weight: 700; border-top: 0.5px solid var(--border-hairline); padding-top: 5px; }
/* PE Fund / Portco stress test */
.pe-stress-scenarios { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pe-stress-portco-table { font: 400 0.75rem var(--font-primary); border-collapse: collapse; width: 100%; margin-top: 6px; }
.pe-stress-portco-table th { font: 600 0.75rem var(--font-primary); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; text-align: left; padding: 4px 8px 4px 0; border-bottom: 0.5px solid var(--border-hairline); }
.pe-stress-portco-table td { padding: 4px 8px 4px 0; color: var(--text-primary); border-bottom: 0.5px solid var(--bg-secondary); font-variant-numeric: tabular-nums; vertical-align: middle; }
.pe-stress-portco-table tr:last-child td { border-bottom: none; }
.pe-stress-portco-table .pe-stress-worst { font-weight: 700; color: var(--aicons-negative); }
.pe-stress-summary-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 0.75rem; color: var(--text-secondary); }
.pe-stress-worst-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; background: rgba(217,84,77,0.1); color: var(--aicons-negative); }
/* No-mandate warning */
.cw-analytics-no-mandate {
  text-align: center;
  color: var(--text-muted);
  font: 400 12px var(--font-primary);
  padding: 32px 0;
}
/* MC chart container */
.cw-mc-chart-wrap {
  width: 100%;
  height: 260px;
  position: relative;
}
.cw-mc-fan-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}
/* CMA table */
.cw-mc-cma-table {
  font: 400 0.75rem var(--font-primary);
  border-collapse: collapse;
  width: 100%;
}
.cw-mc-cma-table th {
  font: 600 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: left;
  padding: 3px 8px 3px 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-mc-cma-table td {
  padding: 3px 8px 3px 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  border-bottom: 0.5px solid var(--bg-secondary);
}
.cw-mc-cma-table tr:last-child td { border-bottom: none; }
.cw-mc-terminal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 90px), 1fr));
  gap: 10px;
  margin-top: 6px;
}
.cw-mc-terminal-kpi {
  min-width: 0;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.cw-mc-terminal-kpi-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cw-mc-terminal-kpi-value {
  font: 700 13px var(--font-primary);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cw-mc-house-note {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}
/* Running indicator */
.cw-analytics-running {
  color: var(--accent-text);
  font: 400 0.75rem var(--font-primary);
  padding: 12px 0;
  text-align: center;
}

/* =========================================================
   STUDIO TOOL 6: Dokumentenverwaltung / Document Management
   (2026-06-14): dynamic doc list, upload, delete-with-confirm.
   ========================================================= */
.cw-docmgmt-section-title {
  font: 700 0.75rem var(--font-primary);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.cw-docmgmt-upload-zone {
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font: 400 0.75rem var(--font-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  transition: border-color 0.15s, color 0.15s;
}
.cw-docmgmt-upload-zone:hover,
.cw-docmgmt-upload-zone.over {
  border-color: var(--accent);
  color: var(--accent-text);
  background: rgba(46,157,255,0.04);
}
.cw-docmgmt-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cw-docmgmt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-wrap: wrap;
  min-width: 0;
}
.cw-docmgmt-item:last-child { border-bottom: 0; }
.cw-docmgmt-item-name {
  flex: 1 1 160px;
  font: 500 12px var(--font-primary);
  color: var(--text-primary);
  word-break: break-word;
  min-width: 0;
}
.cw-docmgmt-item-meta {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  margin-top: 2px;
}
.cw-docmgmt-item-kind {
  font: 700 0.75rem var(--font-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 3px;
  white-space: nowrap;
}
.cw-docmgmt-btn {
  font: 500 0.75rem var(--font-primary);
  padding: 3px 8px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-primary);
  color: var(--text-muted);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.cw-docmgmt-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.cw-docmgmt-btn--del:hover { border-color: var(--danger-text); color: var(--danger-text); }
.cw-docmgmt-empty {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-align: center;
  padding: 24px 0;
  font-style: italic;
}
.cw-docmgmt-count {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  margin-left: auto;
}
/* KYC-status indicator for Erstaufnahme (Stage 1) */
.cw-kyc-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
.cw-kyc-status-badge {
  font: 700 0.75rem var(--font-primary);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.cw-kyc-status-badge--ok {
  background: rgba(39,174,96,0.12);
  color: var(--success-text);
  border: 1px solid rgba(39,174,96,0.3);
}
.cw-kyc-status-badge--incomplete {
  background: rgba(230,126,34,0.1);
  color: #c0662a;
  border: 1px solid rgba(230,126,34,0.25);
}
.cw-kyc-status-pointer {
  flex: 1;
  color: var(--text-muted);
  font: 400 0.75rem var(--font-primary);
}

/* =========================================================
   STUDIO TOOL 3: Onboarding / KYC helper
   Spec: 260613_Aicons_Studio-Tool3-Onboarding-KYC-Spec.md
   VCO-1 (2026-06-14): white card on grey canvas.
   ========================================================= */
.cw-kyc-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
}
.cw-kyc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
  background: var(--bg-primary);
  flex-wrap: wrap;
  min-width: 0;
}
.cw-kyc-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  flex: 1;
}
.cw-kyc-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.cw-kyc-body .pe-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
}
.cw-kyc-governance-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  background: #FFFBF0;
  border: 1px solid #F5E6B0;
  border-radius: 4px;
  padding: 7px 10px;
  line-height: 1.45;
}
.cw-kyc-mode-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cw-kyc-mode-label {
  font: 600 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 4px;
}
.cw-kyc-mode-btn {
  font: 600 0.75rem var(--font-primary);
  color: var(--text-muted);
  background: var(--bg-primary);
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all .1s;
}
.cw-kyc-mode-btn.active, .cw-kyc-mode-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.cw-kyc-upload-zone {
  border: 1px dashed var(--border-hairline);
  border-radius: 5px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.cw-kyc-upload-zone:hover, .cw-kyc-upload-zone.over {
  border-color: var(--accent);
  background: var(--accent-a10);
}
.cw-kyc-upload-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cw-kyc-file-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.cw-kyc-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-primary);
}
.cw-kyc-file-item .k {
  font-size: 0.75rem;
  padding: 1px 5px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cw-kyc-extract-btn {
  font: 600 0.75rem var(--font-primary);
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity .1s;
  align-self: flex-start;
}
.cw-kyc-extract-btn:hover { opacity: 0.88; }
.cw-kyc-extract-btn:disabled { opacity: 0.45; cursor: default; }
.cw-kyc-loading {
  display: none;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 0;
}
.cw-kyc-loading.active { display: block; }
.cw-kyc-section-title {
  font: 700 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
/* Field confirm gate table: wrapped for horizontal scroll on narrow screens */
.cw-kyc-fields-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cw-kyc-fields-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font: 400 0.75rem var(--font-primary);
}
.cw-kyc-fields-table th {
  font: 700 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-align: left;
  padding: 0 6px 6px;
  border-bottom: 1px solid var(--border-hairline);
}
.cw-kyc-fields-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}
.cw-kyc-field-name { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.cw-kyc-field-value { color: var(--text-primary); }
.cw-kyc-field-value.missing { color: var(--danger-text); font-style: italic; }
.cw-kyc-field-source { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.cw-kyc-field-confirm-btn {
  font: 600 0.75rem var(--font-primary);
  color: var(--accent-text);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 2px 7px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.cw-kyc-field-confirm-btn:hover { background: var(--accent-a10); }
.cw-kyc-field-confirmed {
  font: 600 0.75rem var(--font-primary);
  color: var(--success-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Completeness checklist */
.cw-kyc-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cw-kyc-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 0.75rem var(--font-primary);
}
.cw-kyc-check-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cw-kyc-check-item.ok .dot { background: var(--success-text); }
.cw-kyc-check-item.gap .dot { background: var(--status-gap); border-radius: 1px; transform: rotate(45deg); }
.cw-kyc-check-item.missing .dot { background: var(--danger-text); border-radius: 1px; }
.cw-kyc-check-item.ok .lbl { color: var(--text-primary); }
.cw-kyc-check-item.gap .lbl, .cw-kyc-check-item.missing .lbl { color: var(--text-muted); }
/* Screening boundary indicator */
.cw-kyc-screening-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--info-bg);
  border: 1px solid rgba(50,102,173,0.25);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: 400 0.75rem var(--font-primary);
  color: var(--info-text);
  line-height: 1.45;
}
.cw-kyc-screening-banner .icon { flex-shrink: 0; font-size: 13px; margin-top: 1px; }
/* IPS skeleton */
.cw-kyc-ips-skeleton {
  background: var(--bg-secondary);
  border-radius: 5px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cw-kyc-ips-row {
  display: flex;
  gap: 8px;
  font: 400 0.75rem var(--font-primary);
}
.cw-kyc-ips-row .k { color: var(--text-muted); min-width: 140px; }
.cw-kyc-ips-row .v { color: var(--text-primary); }
.cw-kyc-ips-row .v.missing { color: var(--danger-text); font-style: italic; }
/* Batch mode */
.cw-kyc-batch-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cw-kyc-batch-input {
  font: 400 0.75rem var(--font-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  width: 60px;
  color: var(--text-primary);
  background: var(--bg-primary);
}
.cw-kyc-batch-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.cw-kyc-metric-chip {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  padding: 3px 8px;
  display: inline-block;
}
.cw-kyc-confirm-all-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.cw-kyc-confirm-all-bar.active { display: flex; }
.cw-kyc-confirm-all-btn {
  font: 600 0.75rem var(--font-primary);
  color: var(--text-on-accent);
  background: var(--success-text);
  border: none;
  border-radius: 3px;
  padding: 5px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cw-kyc-confirm-all-btn:hover { opacity: 0.88; }
.cw-kyc-results-wrap {
  display: none;
  flex-direction: column;
  gap: 14px;
}
.cw-kyc-results-wrap.active { display: flex; }

/* ACCORDION: right panel: open card is white card on grey canvas; collapsed = inherits sidebar grey.
   VCO-3 (2026-06-14): removed #cwCardContext {background:var(--bg-primary)} override that caused the Context
   panel header to appear white when collapsed. All panel cards now inherit var(--bg-sidebar) from
   .cw-panel when collapsed; panel-open adds the white-card state only when expanded. */
.cw-panel-card.panel-open { background: var(--bg-primary); }

/* =========================================================
   SIDEBAR SECTIONS: collapsible with white-when-open style
   ========================================================= */
.cw-sidebar-section {
  /* Section header row, same height/padding as .cw-nav-item */
}
.cw-sidebar-section-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--sidebar-text);
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 1px 6px;
  transition: background .1s;
  user-select: none;
  position: relative;
}
.cw-sidebar-section-header:hover { background: rgba(31,30,29,0.05); }
/* Open state: white background + accent text, same as panel-card.panel-open */
.cw-sidebar-section.section-open > .cw-sidebar-section-header {
  background: var(--bg-primary);
  color: var(--sidebar-text-active);
}
.cw-sidebar-section-header svg.section-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--sidebar-text-muted); }
.cw-sidebar-section.section-open > .cw-sidebar-section-header svg.section-icon { color: var(--accent-text); }
.cw-sidebar-section-header .section-label { flex: 1; }
.cw-sidebar-section-caret {
  color: var(--sidebar-text-muted);
  transition: transform .15s;
  flex-shrink: 0;
}
.cw-sidebar-section-caret svg { width: 13px; height: 13px; display: block; }
.cw-sidebar-section.section-open > .cw-sidebar-section-header .cw-sidebar-section-caret { transform: none; }
.cw-sidebar-section:not(.section-open) > .cw-sidebar-section-header .cw-sidebar-section-caret { transform: rotate(-90deg); }
.cw-sidebar-section-body { display: none; }
.cw-sidebar-section.section-open > .cw-sidebar-section-body { display: block; }

/* New-task action section: clicking the header fires the action directly (no expand).
   Explicitly override the section-open white-background rule so it stays sidebar-colour. */
.cw-sidebar-section.action-section > .cw-sidebar-section-header { cursor: pointer; }
.cw-sidebar-section.action-section.section-open > .cw-sidebar-section-header {
  background: transparent;
  color: var(--sidebar-text);
}
.cw-sidebar-section.action-section.section-open > .cw-sidebar-section-header:hover {
  background: rgba(31,30,29,0.05);
}
.cw-sidebar-section.action-section .section-label::before {
  content: '+ ';
  font-weight: 700;
  color: var(--accent-text);
}

/* Create mandate / fund modal (replaces full-screen picker overview) */
.cw-create-scope-modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,20,19,0.45);
  z-index: 610;
  align-items: center;
  justify-content: center;
}
.cw-create-scope-modal-bg.open { display: flex; }
.cw-create-scope-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 0.5px solid var(--border-hairline);
  width: 420px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
}
.cw-create-scope-header {
  padding: 20px 22px 14px;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-create-scope-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cw-create-scope-sub { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.cw-create-scope-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.cw-create-scope-field label {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.cw-create-scope-field input,
.cw-create-scope-field select {
  width: 100%; padding: 8px 10px; border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-sm); font: 400 13px var(--font-primary);
  background: var(--bg-primary); color: var(--text-primary);
}
.cw-create-scope-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cw-create-scope-footer {
  padding: 12px 22px; border-top: 0.5px solid var(--border-hairline);
  display: flex; justify-content: flex-end; gap: 8px;
}
.cw-create-scope-footer button {
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer;
  border: 0.5px solid var(--border-hairline); background: var(--bg-secondary); color: var(--text-primary);
}
.cw-create-scope-footer button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.cw-create-scope-footer button.primary:hover { background: var(--accent-hover); }

/* Mandate/fund overview screen - retired; scope switch via sidebar tree only */
.picker-screen { display: none !important; }

/* =========================================================
   SIDE COLLAPSE TOGGLES: fold entire sidebar or panel
   ========================================================= */
.cw-side-collapse-btn {
  /* WCAG P1-5 2.5.8: was 20x20 (below the 24px target-size minimum). */
  width: 24px; height: 24px;
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-primary);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: all .12s; padding: 0;
  flex-shrink: 0;
  z-index: 10;
  font-size: 0.75rem;
}
.cw-side-collapse-btn:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-muted); }
.cw-side-collapse-btn svg { width: 11px; height: 11px; }

/* Sidebar collapsed state */
.cowork-shell.sidebar-collapsed { grid-template-columns: 0 1fr var(--cw-rightpane-w, 300px); }
.cowork-shell.sidebar-collapsed .cw-sidebar {
  width: 0; overflow: hidden; min-width: 0;
  opacity: 0; padding: 0; border: none; box-shadow: none;
}
.cowork-shell.sidebar-collapsed .cw-sidebar-resize { display: none; }
/* Panel collapsed state */
.cowork-shell.panel-collapsed { grid-template-columns: var(--cw-sidebar-w, 240px) 1fr 0; }
.cowork-shell.panel-collapsed .cw-panel {
  width: 0; overflow: hidden; min-width: 0;
  opacity: 0; padding: 0; border: none; box-shadow: none;
}
.cowork-shell.panel-collapsed .cw-panel-resize { display: none; }

/* Re-open buttons share handle row (top-left / top-right, not vertically centered) */
.cw-sidebar-reopen,
.cw-panel-reopen { display: none; }

/* =========================================================
   V5 ADDITIONS
   ========================================================= */

/* Right-panel compact live cards (Compliance, Audit, Agent) */
.cw-panel-live-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-hairline);
  font-size: 0.75rem;
}
.cw-panel-live-row:last-child { border-bottom: none; }
.cw-panel-live-key { color: var(--text-muted); flex: 1; padding-right: 6px; }
.cw-panel-live-val { font-weight: 600; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cw-panel-live-val.ok   { color: var(--success-text); }
.cw-panel-live-val.warn { color: var(--danger-text); }
.cw-panel-live-val.pend { color: var(--warning-text); }

.cw-panel-agent-row {
  padding: 5px 6px;
  border-left: 2px solid var(--success-text);
  background: var(--bg-secondary);
  margin-bottom: 3px;
  border-radius: 0 3px 3px 0;
  font-size: 0.75rem;
}
.cw-panel-agent-row.warn { border-left-color: var(--warning-text); }
.cw-panel-agent-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cw-panel-agent-row-head strong { color: var(--text-primary); font-weight: 600; }
.cw-panel-agent-msg { color: var(--text-secondary); margin-top: 1px; font-size: 0.75rem; }

.cw-panel-audit-row {
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-hairline);
  font-size: 0.75rem;
}
.cw-panel-audit-row:last-child { border-bottom: none; }
.cw-panel-audit-time { font-size: 0.75rem; color: var(--text-muted); }
.cw-panel-audit-action { color: var(--text-secondary); margin-top: 1px; }
/* F-020: use mono token */
.cw-panel-audit-hash { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-muted); margin-top: 1px; }

/* Life-Cycle Projection modal */
.cw-lifecycle-modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,20,19,0.6);
  z-index: 700;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cw-lifecycle-modal-bg.open { display: flex; }
.cw-lifecycle-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 0.5px solid var(--border-hairline);
  width: 100%;
  max-width: 820px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.cw-lifecycle-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--border-hairline);
  flex-shrink: 0;
}
.cw-lifecycle-modal-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  text-transform: none;
  letter-spacing: 0;
  border: none;
}
.cw-lifecycle-modal-body {
  padding: 20px;
  flex: 1;
}

/* Item 3: Allocation donut: enforce square canvas so the chart is always circular.
   The wrapper is square (fixed size); the canvas fills it exactly. Chart.js
   maintainAspectRatio:true + aspectRatio:1 then keeps width == height regardless
   of grid resizing.
   Reduced from 320px to 240px for a more compact card pair (Fix 2, 2026-06-13). */
.alloc-donut-wrap {
  width: 240px;
  height: 240px;
  margin: 0 auto;
  position: relative;
}
.alloc-donut-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
/* Alloc legend: compact two-column grid below the ring */
.alloc-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
  margin: 8px auto 0;
  max-width: 300px;
}
.alloc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-primary);
  min-width: 0;
}
.alloc-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.alloc-legend-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}
.alloc-legend-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  flex-shrink: 0;
}
/* Narrower viewports: scale ring back so it fits single-column layout */
@media (max-width: 900px) {
  .alloc-donut-wrap { width: 180px; height: 180px; }
  .alloc-legend { max-width: 240px; }
}

/* Stage-6 two-row grid: rows instead of 3 fixed columns.
   VCO-1 (2026-06-14): unified 10px gap throughout. */
.cockpit-main-grid {
  display: grid;
  gap: 10px;
}
/* Row 1: client+overview full width */
.cockpit-row1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
/* Row 2: side-by-side sub-columns within the grid */
.cockpit-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
/* Controls sub-grid: sliders half-width + actions half-width */
.cockpit-controls-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
/* Overview row: KPIs + charts in dense grid */
.cockpit-overview-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
  align-items: start;
}
/* Goals column stays inline with sliders/actions (left of overview) */
.cockpit-left-col { min-width: 0; }

/* =========================================================
   NEWS PANE
   ========================================================= */
/* VCO-2 (2026-06-14): News canvas unified to sidebar colour (var(--bg-secondary) = bg-sidebar). */
#cwModeNews {
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: var(--bg-sidebar);
  padding: 0;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
#cwModeNews.active { display: flex; }

/* VCO-2 (2026-06-14): news header on sidebar canvas. */
.cw-news-header {
  background: var(--bg-sidebar);
  border-bottom: 0.5px solid var(--border-hairline);
  padding: 8px 10px 7px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-height: 0;
}
.cw-news-title {
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--text-primary);
}
.cw-news-asof {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.cw-news-refresh {
  margin-left: auto;
  font: 400 0.75rem var(--font-primary);
  color: var(--accent-text);
  cursor: pointer;
  letter-spacing: 0.2px;
  background: none;
  border: none;
  padding: 0;
}
.cw-news-refresh:hover { color: var(--accent-hover); }

/* The body is the scroll container; min-height: 0 prevents flex item from
   expanding beyond the pane and silently hiding the top content block.
   padding-top: 14px gives breathing room above the situation summary.
   Children (situation, sections, mandate) must have flex-shrink: 0 so they
   keep their natural height and the body's overflow-y: auto kicks in to scroll. */
/* VCO-2 (2026-06-14): news body on sidebar canvas. */
.cw-news-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 10px 10px 20px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Situation summary block: unified card. VCO-1 (2026-06-14). */
.cw-news-situation {
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  padding: 9px 12px 10px;
}
.cw-news-situation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cw-news-situation-label {
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.cw-news-situation-source {
  font: 400 0.75rem var(--font-primary);
  color: var(--aicons-steel);
  background: var(--bg-secondary);
  border-radius: 2px;
  padding: 1px 5px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.cw-news-situation-text {
  font: 400 12px var(--font-primary);
  color: var(--text-primary);
  line-height: 1.55;
}

/* Loading / error states */
.cw-news-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.3px;
}
.cw-news-error {
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--aicons-negative);
  border-radius: 3px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--aicons-negative);
}

/* Section card - white card on grey canvas. VCO-1 (2026-06-14). */
.cw-news-section {
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
}
.cw-news-section-header {
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-news-section-label {
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.cw-news-section-badge {
  font: 400 0.75rem var(--font-primary);
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 2px;
  padding: 1px 5px;
  letter-spacing: 0.2px;
}
.cw-news-section-badge.badge-live {
  color: var(--aicons-positive);
  background: rgba(67,116,38,0.08);
}

/* Indicator grid - 2-column on narrow, 3-column wider, 4-column on wide */
.cw-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 700px) {
  .cw-news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .cw-news-grid { grid-template-columns: repeat(4, 1fr); }
}

/* KPI tile - denser: reduced padding and value size */
.cw-kpi {
  padding: 7px 11px 7px;
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cw-kpi:nth-child(2n) { border-right: none; }
@media (min-width: 700px) {
  .cw-kpi:nth-child(2n) { border-right: 1px solid var(--border-hairline); }
  .cw-kpi:nth-child(3n) { border-right: none; }
}
@media (min-width: 1100px) {
  .cw-kpi:nth-child(3n) { border-right: 1px solid var(--border-hairline); }
  .cw-kpi:nth-child(4n) { border-right: none; }
}
.cw-kpi-label {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cw-kpi-value {
  font: 600 15px var(--font-primary);
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.cw-kpi-unit {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
.cw-kpi-trend {
  font-size: 0.75rem;
  line-height: 1;
}
.cw-kpi-trend.rising  { color: var(--aicons-negative); }
.cw-kpi-trend.falling { color: var(--aicons-positive); }
.cw-kpi-trend.flat    { color: var(--text-muted); }
.cw-kpi-meta {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  letter-spacing: 0.2px;
  margin-top: 1px;
}
.cw-kpi-pct {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 2px;
  font: 600 8.5px var(--font-primary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.cw-kpi-pct.pct-low   { background: rgba(67,116,38,0.10);  color: var(--aicons-positive);  }
.cw-kpi-pct.pct-mid   { background: rgba(90,72,21,0.10);   color: var(--aicons-warning);   }
.cw-kpi-pct.pct-high  { background: rgba(127,44,40,0.10);  color: var(--aicons-negative);  }

/* Pending tile (stub) */
.cw-kpi-pending {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
}
.cw-kpi-acq-hint {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  opacity: 0.72;
  line-height: 1.35;
  margin-top: 3px;
  white-space: normal;
  word-break: break-word;
}

/* Mandate-impact section - denser */
.cw-news-mandate {
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  overflow: hidden;
}
.cw-news-mandate-header {
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-news-mandate-label {
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.cw-news-mandate-name {
  font: 400 0.75rem var(--font-primary);
  color: var(--accent-text);
  letter-spacing: 0.2px;
}
.cw-news-mandate-body {
  padding: 8px 12px 10px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  line-height: 1.5;
}
.cw-mandate-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 10px;
  margin-top: 6px;
}
@media (min-width: 500px) {
  .cw-mandate-row { grid-template-columns: repeat(4, 1fr); }
}
.cw-mandate-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cw-mandate-item-label {
  font: 400 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.cw-mandate-item-value {
  font: 600 12px var(--font-primary);
  color: var(--text-primary);
}
.cw-news-mandate-none {
  padding: 10px 12px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
}

/* ── Consult view: Market Impact and Recommendations section ── */
/* ── Market-impact section: compact grid layout ── */
/* VCO-1 (2026-06-14): mktimpact card uses unified card token, no margin-bottom (gap handles spacing). */
.cw-mktimpact {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
  margin-bottom: 0;
}
/* TITLE-FIX (2026-06-14): .cw-mktimpact-header is now always co-classed with .cw-card-header
   so font/colour/size inherit from that canonical rule. This selector adds only the spatial
   padding to place the header inside the card's overflow:hidden container, and suppresses
   the default margin-bottom so the disclaimer stripe follows immediately.
   The old .cw-mktimpact-title (coral, 10px) is superseded; .cw-card-header-title (anthracite,
   11px, 700, uppercase, 1.5px tracking) is used in the HTML instead. */
.cw-mktimpact-header {
  padding: 6px 12px 5px;
  margin-bottom: 0;
}
.cw-mktimpact-mandate {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
/* VCO-2 (2026-06-14): disclaimer stripe is part of the white card; hairline for separation. */
.cw-mktimpact-disclaimer {
  padding: 4px 12px 4px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  line-height: 1.4;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-primary);
}
/* Compact grid: one row per asset class, columns: badge | class-label | cur% | tgt% | band | text+meta */
/* On narrow viewports, wrap the table in a horizontal scroll container. */
.cw-mktimpact-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1px; /* bleed to container edge */
}
.cw-mktimpact-table {
  width: 100%;
  min-width: 480px; /* ensure table is readable even if it needs scroll */
  border-collapse: collapse;
  font: 400 0.75rem var(--font-primary);
}
.cw-mktimpact-table td {
  padding: 4px 6px;
  vertical-align: middle;
  border-bottom: 1px solid var(--aicons-hairline);
  color: var(--text-primary);
  white-space: nowrap;
}
.cw-mktimpact-table tr:last-child td { border-bottom: none; }
.cw-mktimpact-table td.cw-mki-badge-cell { padding: 4px 4px 4px 12px; width: 1%; }
.cw-mktimpact-table td.cw-mki-class-cell {
  font-weight: 600;
  color: var(--text-primary);
  width: 1%;
  padding-right: 8px;
}
.cw-mktimpact-table td.cw-mki-num {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.75rem;
  width: 1%;
}
.cw-mktimpact-table td.cw-mki-text-cell {
  white-space: normal;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
  padding-right: 12px;
}
/* VCO-2 (2026-06-14): table header row is part of the white card. */
.cw-mktimpact-table th {
  font: 700 8.5px var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 3px 6px 3px;
  text-align: right;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-primary);
  white-space: nowrap;
}
.cw-mktimpact-table th:first-child,
.cw-mktimpact-table th.cw-mki-th-badge { padding-left: 12px; text-align: left; }
.cw-mktimpact-table th.cw-mki-th-class { text-align: left; }
.cw-mktimpact-table th.cw-mki-th-text { text-align: left; }
.cw-mktimpact-badge {
  display: inline-block;
  font: 700 8px var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 2px;
  padding: 2px 5px;
  min-width: 52px;
  text-align: center;
}
.cw-mktimpact-badge.hold {
  background: rgba(106,133,156,0.12);
  color: var(--text-muted);
  border: 1px solid rgba(106,133,156,0.25);
}
.cw-mktimpact-badge.amber {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid rgba(90,72,21,0.18);
}
/* Legacy block classes kept for no-mandate fallback only */
.cw-mktimpact-block-body { flex: 1; min-width: 0; }
.cw-mktimpact-block-text { font: 400 0.75rem var(--font-primary); color: var(--text-primary); line-height: 1.5; }
.cw-mktimpact-block-meta { font: 400 0.75rem var(--font-primary); color: var(--text-muted); margin-top: 2px; }
/* VCO-2 (2026-06-14): Marktkontext block is white; hairline-top for delineation. */
.cw-mktimpact-context {
  padding: 6px 12px 6px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-hairline);
}
.cw-mktimpact-context-label {
  font: 700 8.5px var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.cw-mktimpact-context-text {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  line-height: 1.45;
}
/* VCO-2 (2026-06-14): sign-off band is white; border-top and text colour signal the advisory tone. */
.cw-mktimpact-signoff {
  padding: 5px 12px 5px;
  font: 600 0.75rem var(--font-primary);
  color: var(--warning-text);
  background: var(--bg-primary);
  border-top: 1px solid rgba(90,72,21,0.18);
  letter-spacing: 0.1px;
}
.cw-mktimpact-none {
  padding: 8px 12px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
}

/* ── News section caption (static educational text below section header) ── */
/* VCO-2 (2026-06-14): caption is part of the white card; remove tinted fill.
   Hairline border-bottom provides visual separation without a grey stripe. */
.cw-news-section-caption {
  padding: 5px 12px 7px;
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  line-height: 1.5;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-primary);
}

/* ── ETF Illustration block (News section) ── */
.cw-etf-illus {
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  overflow: hidden; /* clips border-radius */
}
/* Allow ETF region tables to scroll horizontally on narrow screens */
.cw-etf-illus-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  /* On phone, give the ETF table a minimum width so it stays readable */
  .cw-etf-illus-table { min-width: 420px; }
}
.cw-etf-illus-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 5px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-tertiary);
}
.cw-etf-illus-title {
  font: 600 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.cw-etf-illus-badge {
  font: 700 8px var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(90,72,21,0.10);
  color: var(--warning-text);
  border: 1px solid rgba(90,72,21,0.22);
  border-radius: 2px;
  padding: 2px 5px;
}
.cw-etf-illus-asof {
  margin-left: auto;
  font: 400 0.75rem var(--font-primary);
  color: var(--aicons-steel);
}
.cw-etf-illus-region {
  border-top: 1px solid var(--border-hairline);
}
.cw-etf-illus-region:first-of-type { border-top: none; }
.cw-etf-illus-region-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 4px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-hairline);
}
.cw-etf-illus-region-label {
  font: 700 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-text);
}
.cw-etf-illus-region-sub {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
.cw-etf-illus-table {
  width: 100%;
  border-collapse: collapse;
  /* Fixed layout: all three region tables share identical column proportions */
  table-layout: fixed;
}
/* Column widths: Name 44% | Ticker 12% | Börse 20% | AUM 13% | TER 11% */
.cw-etf-illus-table col.col-name    { width: 44%; }
.cw-etf-illus-table col.col-ticker  { width: 12%; }
.cw-etf-illus-table col.col-listing { width: 20%; }
.cw-etf-illus-table col.col-aum     { width: 13%; }
.cw-etf-illus-table col.col-ter     { width: 11%; }
.cw-etf-illus-table th {
  font: 700 8.5px var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  padding: 3px 10px 3px;
  text-align: right;
  border-bottom: 1px solid var(--border-hairline);
  white-space: nowrap;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.cw-etf-illus-table th:first-child { text-align: left; }
.cw-etf-illus-table td {
  font: 400 0.75rem var(--font-primary);
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-primary);
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-etf-illus-table td:not(:first-child) { text-align: right; }
.cw-etf-illus-table tr:last-child td { border-bottom: none; }
/* Name cell: allow wrap, tabular numbers for AUM/TER alignment */
.cw-etf-illus-table td.cw-etf-name { font-weight: 500; white-space: normal; overflow: visible; }
.cw-etf-illus-table td.cw-etf-ticker {
  font: 600 0.75rem var(--font-mono, monospace);
  color: var(--accent-text);
}
.cw-etf-illus-table td.cw-etf-muted { color: var(--text-muted); font-size: 0.75rem; }
/* Numeric columns: tabular figures so decimal points align */
.cw-etf-illus-table td:nth-child(4),
.cw-etf-illus-table td:nth-child(5) { font-variant-numeric: tabular-nums; }
.cw-etf-illus-rank {
  display: inline-block;
  font: 700 8.5px var(--font-primary);
  color: var(--text-muted);
  min-width: 14px;
  margin-right: 3px;
}
.cw-etf-illus-footer {
  padding: 5px 12px 6px;
  font: 400 0.75rem var(--font-primary);
  color: var(--aicons-steel);
  line-height: 1.4;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-tertiary);
}

/* ── KPI tile: source link and sparkline affordances ── */
.cw-kpi-linked {
  cursor: pointer;
}
.cw-kpi-linked:hover {
  background: rgba(176, 86, 54,0.04);
}
.cw-kpi-source-hint {
  font: 400 8.5px var(--font-primary);
  color: var(--text-muted);
  letter-spacing: 0.2px;
  margin-top: 2px;
  opacity: 0;
  transition: opacity .12s;
}
.cw-kpi-linked:hover .cw-kpi-source-hint {
  opacity: 1;
}

/* ── Inline sparkline SVG ── */
.cw-kpi-sparkline {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 3px;
  overflow: visible;
}
.cw-kpi-sparkline-pending {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
  margin-top: 3px;
}

/* ── Expandable chart modal ── */
.cw-chart-modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,20,19,0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.cw-chart-modal-bg.active {
  display: flex;
}
.cw-chart-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: min(760px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cw-chart-modal-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-hairline);
  flex-shrink: 0;
}
.cw-chart-modal-title {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
  flex: 1;
}
.cw-chart-modal-meta {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
}
.cw-chart-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
  margin-left: 8px;
  flex-shrink: 0;
}
.cw-chart-modal-close:hover { color: var(--text-primary); }
.cw-chart-modal-body {
  flex: 1;
  padding: 16px 18px 18px;
  overflow-y: auto;
  min-height: 300px;
}
.cw-chart-svg-wrap {
  width: 100%;
  overflow: hidden;
}
.cw-chart-svg {
  display: block;
  width: 100%;
  height: 220px;
}
.cw-chart-source-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cw-chart-source-link {
  font: 400 0.75rem var(--font-primary);
  color: var(--accent-text);
  text-decoration: none;
}
.cw-chart-source-link:hover { text-decoration: underline; }
.cw-chart-attribution {
  font: 400 0.75rem var(--font-primary);
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-chart-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
  flex-wrap: wrap;
}
.cw-chart-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cw-chart-stat-label {
  font: 400 0.75rem var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.cw-chart-stat-value {
  font: 600 13px var(--font-primary);
  color: var(--text-primary);
}

/* Stage 1 Erstaufnahme: section stepper + Weiter footer */
.s1-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
}
.s1-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  font: 500 0.75rem var(--font-primary);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.s1-step:hover { border-color: var(--accent); color: var(--text-primary); }
.s1-step.active {
  border-color: var(--accent);
  background: rgba(176, 86, 54,0.08);
  color: var(--text-primary);
}
.s1-step.done:not(.active) { color: var(--text-secondary); }
.s1-step-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
}
.s1-step.done .s1-step-dot { background: rgba(46,125,50,0.12); border-color: var(--success-text); color: var(--success-text); }
.s1-complete-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 0.5px solid rgba(46,125,50,0.35);
  background: rgba(46,125,50,0.06);
  font-size: 12.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cw-kyc-upload-btn {
  margin-left: 8px;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-hairline);
  background: var(--bg-primary);
  color: var(--accent-text);
  cursor: pointer;
}
.cw-kyc-upload-btn:hover { border-color: var(--accent); }
.inline-section-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--border-hairline);
}
.inline-section-status.ok { color: var(--success-text); font-weight: 600; }
.inline-section-status.warn { color: var(--text-muted); }
.inline-section-next { min-width: 140px; }

/* ── Glossar ── */
.cw-gloss-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  vertical-align: baseline;
}
.cw-gloss-link:hover { color: var(--text-primary); text-decoration-style: solid; }
.cw-gloss-modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0,0,0,0.45);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cw-gloss-modal-bg.active { display: flex; }
.cw-gloss-modal {
  width: min(640px, 100%);
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
  overflow: hidden;
}
.cw-gloss-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-gloss-modal-title { font: 600 15px var(--font-primary); color: var(--text-primary); }
.cw-gloss-modal-sub { font: 400 0.75rem var(--font-primary); color: var(--text-muted); margin-top: 2px; }
.cw-gloss-close {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
}
.cw-gloss-close:hover { color: var(--text-primary); }
.cw-gloss-modal-search-wrap { padding: 10px 18px 0; }
.cw-gloss-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  font: 400 13px var(--font-primary);
  color: var(--text-primary);
}
.cw-gloss-search:focus { outline: none; border-color: var(--accent); }
.cw-gloss-modal-body,
.cw-gloss-studio-body {
  overflow-y: auto;
  padding: 12px 18px 18px;
  flex: 1;
}
.cw-gloss-studio-body { max-height: calc(100vh - 220px); }
.cw-gloss-entry {
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.cw-gloss-entry:last-child { border-bottom: none; }
.cw-gloss-entry.highlight {
  background: rgba(176, 86, 54,0.06);
  margin: 0 -10px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
}
.cw-gloss-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cw-gloss-abbr {
  font: 700 13px var(--font-primary);
  color: var(--accent-text);
  letter-spacing: 0.02em;
}
.cw-gloss-cat {
  font: 500 0.75rem var(--font-primary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cw-gloss-name { font: 600 12.5px var(--font-primary); color: var(--text-primary); margin-bottom: 6px; }
.cw-gloss-def { font: 400 12.5px/1.55 var(--font-primary); color: var(--text-secondary); }
.cw-gloss-formula,
.cw-gloss-source {
  margin-top: 8px;
  font: 400 0.75rem/1.5 var(--font-mono, var(--font-primary));
  color: var(--text-muted);
}
.cw-gloss-lbl { font-weight: 600; color: var(--text-secondary); }
.cw-gloss-empty { padding: 24px 0; text-align: center; color: var(--text-muted); font-size: 13px; }
.cw-gloss-studio-panel { flex-direction: column; }

/* ── Arbeitsordner fuer den Agenten (WM/PE/Research) ─────────────────────── */
.cw-folder-menu{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--bg-primary);border:1px solid var(--border-hairline);border-radius:10px;box-shadow:0 8px 26px rgba(25,32,36,.18);padding:11px;width:238px;display:none;z-index:70}
.cw-folder-menu.open{display:block}
.cw-folder-menu .fm-title{font-size: 0.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.cw-folder-menu .fm-hint{font-size: 0.75rem;color:var(--text-muted);margin-bottom:8px;line-height:1.35}
.cw-folder-menu input{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid var(--border-hairline);border-radius:7px;font-size:12.5px;font-family:inherit;margin-bottom:8px}
.cw-folder-menu input:focus{outline:none;border-color:#2E9DFF}
.cw-folder-actions{display:flex;gap:6px}
.cw-folder-actions button{flex:1;font-size:12px;font-family:inherit;padding:6px 8px;border-radius:7px;border:1px solid var(--border-hairline);background:var(--bg-primary);color:var(--text-primary);cursor:pointer}
.cw-folder-actions button.primary{background:#B5532A;color:#fff;border-color:#B5532A}
.cw-folder-actions button:hover{filter:brightness(.97)}
.cw-composer-tool-btn.active,.research-attach-pill.active{color:#B5532A;border-color:#E7C6B2}
/* Voice-Input mic button recording/disabled state (Petra Novak, 2026-08-19,
   per 5000 Aicons Technology/260819_Aicons_Voice-Input-Whisper-STT-ADR.md).
   Applies to #cwResearchMicBtn (research-attach-pill) and #cwWmpeMicBtn
   (cw-composer-tool-btn) alike -- both carry the shared cw-mic-btn class. */
.cw-mic-btn.cw-mic-recording{background:#FBEAEA!important;border-color:#E2AFAF!important;color:#7F2C28!important;animation:cwMicPulse 1.4s infinite}
.cw-mic-btn.cw-mic-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
@keyframes cwMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(127,44,40,.35)}50%{box-shadow:0 0 0 5px rgba(127,44,40,0)}}
@media (prefers-reduced-motion: reduce){.cw-mic-btn.cw-mic-recording{animation:none}}
.cw-folder-chip{display:inline-flex;align-items:center;gap:6px;background:#FFF3EC;color:#B5532A;border:1px solid #F0CBB4;border-radius:14px;padding:3px 10px;font-size:12px;font-weight:600;margin:0 0 6px}
.cw-folder-chip .x{cursor:pointer;opacity:.7;font-weight:700;margin-left:2px;font-size:14px}
.cw-folder-chip .x:hover{opacity:1}
/* Arbeitsordner-Liste (verbunden mit der Dokumentenverwaltung) */
.cw-folder-list{max-height:184px;overflow-y:auto;margin:6px 0 8px}
.cw-folder-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--text-primary)}
.cw-folder-item:hover{background:var(--bg-secondary)}
.cw-folder-item.active{background:#FFF3EC;color:#B5532A;font-weight:600}
.cw-folder-item .fi-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-folder-item .fi-count{flex:none;font-size: 0.75rem;color:var(--text-muted);background:#EEF2F6;border-radius:10px;padding:1px 7px}
.cw-folder-item.active .fi-count{background:#F0CBB4;color:#B5532A}
/* Kategorie-Filter der Dokumentenverwaltung (synchron mit dem Chat-Ordner) */
.cw-docmgmt-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.cw-docmgmt-fchip{font-size:12px;font-family:inherit;padding:4px 10px;border-radius:14px;border:1px solid var(--border-hairline);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cw-docmgmt-fchip:hover{border-color:#B5532A}
.cw-docmgmt-fchip.active{background:#FFF3EC;border-color:#E7C6B2;color:#B5532A;font-weight:600}
.cw-docmgmt-fchip .fc-n{font-size: 0.75rem;color:var(--text-muted);background:#EEF2F6;border-radius:9px;padding:0 6px}
.cw-docmgmt-fchip.active .fc-n{background:#F0CBB4;color:#B5532A}
/* Research: Ordner-Baum-Picker */
.cw-folder-menu--tree{width:264px}
.cw-folder-tree{max-height:214px;overflow-y:auto;margin:6px 0 8px}
.rft-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--text-primary);white-space:nowrap}
.rft-row:hover{background:var(--bg-secondary)}
.rft-row.active{background:#FFF3EC;color:#B5532A;font-weight:600}
.rft-caret{flex:none;width:14px;height:14px;line-height:14px;text-align:center;font-size: 0.75rem;color:var(--text-muted);cursor:pointer;display:inline-block;transition:transform .12s}
.rft-caret.open{transform:rotate(90deg)}
.rft-caret--none{visibility:hidden}
.rft-ic{flex:none;color:var(--text-muted)}
.rft-row.active .rft-ic{color:#B5532A}
.rft-name{flex:1;overflow:hidden;text-overflow:ellipsis}

/* ============================================================================
   M25: functional Settings - dark theme, text size, density.
   Dark theme overrides the ~30 colour tokens; token-driven UI follows
   automatically. Targeted overrides below cover the most common hardcoded
   light values so dark mode reads cleanly across screens.
   ============================================================================ */
:root[data-theme="dark"] {
  --aicons-bg: #0f1419;
  --aicons-white: #1a2028;
  --aicons-hairline: #2a333d;
  --aicons-zebra: #171d24;
  --aicons-anthracite: #e6ebf0;
  --bg-primary: #1a2028;
  --bg-secondary: #151b22;
  --bg-tertiary: #0f1419;
  --bg-sidebar: #12171d;
  --text-primary: #e6ebf0;
  --text-secondary: #b8c2cc;
  --text-muted: #8a99a8;
  --border-hairline: #2a333d;
  --border-soft: rgba(255,255,255,0.12);
  --composer-border: #2a333d;
  --success-bg: #16301c; --success-text: #7fd89f;
  --warning-bg: #322a12; --warning-text: #e0b85f;
  --danger-bg: #331a19;  --danger-text: #ef8f88;
  --info-bg: #16283f;    --info-text: #8fb8ea;
  --sidebar-text: #b8c2cc; --sidebar-text-muted: #8a99a8; --sidebar-text-active: #f0f4f8;
  --bg-sidebar-border: rgba(255,255,255,0.08);
  --sidebar-accent-bg: rgba(176,86,54,0.22);
  --shadow-hairline: 0 1px 2px 0 rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
}
/* Dark theme: common hardcoded light surfaces/text mapped to tokens. */
:root[data-theme="dark"] body { background: var(--bg-tertiary); color: var(--text-primary); }
:root[data-theme="dark"] .login-box,
:root[data-theme="dark"] .cw-settings-modal,
:root[data-theme="dark"] .cw-create-scope-modal { background: var(--bg-primary); color: var(--text-primary); }
:root[data-theme="dark"] .macro-row { background: var(--bg-secondary) !important; }
:root[data-theme="dark"] .research-msg-body pre,
:root[data-theme="dark"] .research-msg-body :not(pre) > code { background: rgba(255,255,255,0.07); }
:root[data-theme="dark"] .research-md-table th { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .cw-wm-empty { background: var(--bg-tertiary); }
:root[data-theme="dark"] img.service-card__img { opacity: 0.9; }

/* M25: text size - zoom-scales the app (works with the px-based stylesheet). */
:root[data-textsize="s"] #mainApp, :root[data-textsize="s"] #loginScreen { zoom: 0.92; }
:root[data-textsize="l"] #mainApp, :root[data-textsize="l"] #loginScreen { zoom: 1.12; }

/* M25: density - tightens the spacing tokens (affects token-driven padding/gaps). */
:root[data-density="compact"] {
  --space-1: 3px; --space-2: 6px; --space-3: 9px; --space-4: 12px; --space-5: 15px; --space-6: 18px;
}

/* M25: settings control pills (mirror the language pills). */
.cw-set-pills { display: inline-flex; gap: 4px; }
.cw-set-pill { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-full); border: 0.5px solid var(--border-hairline); color: var(--text-secondary); cursor: pointer; background: transparent; user-select: none; }
.cw-set-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cw-set-pill:hover:not(.active) { border-color: var(--accent); color: var(--accent-text); }