@import url('/static/design-tokens.css');
/* Intelligence Platform — shared design system (Block 2 item 41).
   design-tokens.css is the only place where colours, fonts, sizes, radii and
   shadows are written as literals. This file turns those tokens into the
   reusable components every workspace page uses: layout, sidebar, cards,
   KPI tiles, tables, badges, chips, buttons, form controls, filter bar,
   view states, side panels, modals and the task flow bar. Page-level
   <style> blocks may only contain page-specific layout and must reference
   tokens (tests/test_item41_design_system.py). */

/* 2026-08-24: components below set an explicit `display` (flex, grid, ...)
   on classes like .sidebar-item, .btn, .card, etc. An author rule with a
   `display` declaration always wins over the UA stylesheet's own
   `[hidden] { display: none }` rule (it isn't a specificity contest --
   the UA sheet is a lower cascade origin), so `element.hidden = true` /
   the `hidden` attribute silently stopped hiding anything with its own
   `display`. This surfaced as CRM-gated sidebar links (`data-crm-module`,
   e.g. My day/Board/Activities/Sequences/Email) staying visible and
   clickable while the CRM module toggle was off, even though the
   underlying routes correctly redirected server-side. One global rule
   restores the native behavior for every `[hidden]` element platform-wide. */
[hidden] { display: none !important; }

/* ── Legacy aliases (kept so older rules and inline styles keep working) ── */
:root {
  --navy: var(--color-navy); --navy-dark: var(--color-navy-dark);
  --orange: var(--color-orange); --gold: var(--color-gold);
  --bg: var(--color-canvas); --card: var(--color-surface);
  --line: var(--color-line); --txt: var(--color-ink); --muted: var(--color-muted);
  --ok: var(--color-success); --warn: var(--color-warning); --err: var(--color-danger);
  --ink: var(--color-ink); --stripe: var(--color-surface-alt);
  --green: var(--color-success-ink); --green-bg: var(--color-success-soft);
  --yellow: var(--color-warning-ink); --yellow-bg: var(--color-warning-soft);
  --red: var(--color-danger-ink); --red-bg: var(--color-danger-soft);
  --blue: var(--color-info); --blue-bg: var(--color-info-soft);
  --font: var(--font-family);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-family); background: var(--bg); color: var(--txt); font-size: var(--font-size-base); line-height: var(--line-height-snug); }
a { color: var(--navy); }
code, pre, kbd, .mono { font-family: var(--font-family-mono); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── Anonymous authentication shell ────────────────────────────────────
   Login, forgot-password and reset-password intentionally share this
   complete component. Their templates only provide semantic form structure;
   geometry, visual states and responsive behavior live here. */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  color: var(--color-ink-strong);
}
.auth-card {
  width: min(390px, 100%);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-md);
}
.auth-locales {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
}
.auth-locales a { color: var(--color-ink-soft); }
.auth-locales a:hover { color: var(--color-navy); }
.auth-locales a[aria-current="true"] {
  color: var(--color-ink-strong);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.auth-card > h1 {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}
.auth-copy {
  margin: 0;
  color: var(--color-neutral-600);
  line-height: var(--line-height-normal);
}
.auth-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.auth-field { display: grid; gap: var(--space-2); }
.auth-field label {
  color: var(--color-ink-soft);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.auth-form .auth-field input {
  width: 100%;
  height: var(--control-height-md);
  min-height: var(--control-height-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0 var(--control-padding-inline);
  background: var(--color-surface);
  color: var(--color-ink-strong);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  appearance: none;
}
.auth-form .auth-field input:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--orange);
  box-shadow: var(--elevation-ring-accent);
}
.btn.auth-submit {
  width: 100%;
  min-height: var(--control-height-md);
  margin-top: var(--space-1);
  font-weight: var(--font-weight-bold);
}
.btn.auth-submit[aria-busy="true"] { opacity: .6; cursor: progress; }
.auth-message {
  min-height: var(--space-6);
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.auth-message[data-state="success"] { color: var(--color-success-ink); }
.auth-message[data-state="error"] { color: var(--color-danger); }
.auth-secondary, .auth-back-link {
  display: block;
  margin: 0;
  text-align: center;
  color: var(--color-ink-soft);
  font-size: var(--font-size-sm);
}
.auth-secondary a, .auth-back-link { color: inherit; }
.auth-secondary a:hover, .auth-back-link:hover { color: var(--color-navy); }
.auth-back-link { margin-top: var(--space-2); }

@media (max-width: 480px) {
  .auth-page { align-items: start; padding: var(--space-4); }
  .auth-card { margin-top: var(--space-5); padding: var(--space-6); }
}

/* ── Header + nav (geometry asserted by tests/test_shared_header_layout.py) ── */
.hdr { background: var(--navy); color: var(--color-on-dark); border-bottom: 3px solid var(--gold); padding: 14px 28px; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; overflow: visible; position: sticky; top: 0; z-index: var(--z-sticky); }
.hdr h1 { margin: 0; font-size: 18px; font-weight: var(--font-weight-semibold); }
.hdr-brand {
  display: flex; flex-direction: column; flex: 0 1 clamp(220px, 24vw, 360px);
  width: clamp(220px, 24vw, 360px); min-width: 220px; line-height: 1.2;
}
.hdr .hdr-title { color: var(--color-on-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px; }
.hdr .hdr-sub {
  color: var(--color-on-dark-faint); font-size: var(--font-size-xs);
  white-space: normal; overflow-wrap: anywhere;
}
.nav { margin-left: 0; flex: 1 1 0; min-width: 0; min-height: 30px; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--color-on-dark-muted); text-decoration: none; font-size: 12px; padding: 5px 9px; border-radius: var(--radius-sm); white-space: nowrap; flex-shrink: 0; }
.nav a:hover { background: var(--color-on-dark-wash); color: var(--color-on-dark); }
.nav a.active { background: var(--orange); color: var(--color-on-dark); }
.nav-toggle { display: none; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--color-on-dark-line-strong); background: transparent; color: var(--color-on-dark); }
.nav-toggle:hover { background: var(--color-on-dark-wash); }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
.hdr.nav-open .nav-toggle-icon { background: transparent; }
.hdr.nav-open .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.hdr.nav-open .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
.mobile-nav-backdrop { display: none; }
.mobile-nav-submenu { display: none; }
.language-switch { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); color: var(--color-on-dark); font-size: 12px; }
.language-switch select { min-width: 92px; padding: 5px 7px; border: 1px solid var(--color-on-dark-line-strong); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.header-search { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:5px 9px; border:1px solid var(--color-on-dark-line-strong); background:transparent; color:var(--color-on-dark); }
.header-search ~ .language-switch { margin-left:0; }
.header-search:hover { background:var(--color-on-dark-wash); }
.header-search-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav .nav-icon { display: none; } /* icon-only rail is a "refreshed"-mode concept; Origineel stays text-only */
.hdr-account { position: relative; margin-left: var(--space-2); flex: 0 0 auto; } /* moved out of inline JS styling so "refreshed" can reposition it into the rail */
.hdr-actions { display: flex; align-items: center; gap: var(--space-2); } /* Shared capability-filtered create actions. No margin-left:auto: .header-search owns the push to the right-hand utility cluster. */
.hdr.hdr-secondary-open { z-index: var(--z-modal); }
.hdr-secondary-wrap { position: relative; }
.hdr-secondary-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1); background: transparent; }
.hdr-secondary-menu { position: absolute; top: 100%; right: 0; margin-top: calc(var(--space-4) + 1px); width: max-content; min-width: 140px; max-width: min(180px, calc(100vw - 24px)); background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: var(--elevation-md); padding: 4px; z-index: var(--z-dropdown); }
.hdr-secondary-menu-item { display: block; width: 100%; min-height: 34px; text-align: left; white-space: nowrap; background: transparent; border: 0; border-radius: var(--radius-sm); padding: 6px 9px; font: inherit; font-size: var(--font-size-sm); line-height: 1.2; color: inherit; cursor: pointer; }
.hdr-secondary-menu-item:hover { background: var(--color-surface-tint); }
.back-link { color: var(--color-on-dark-muted); text-decoration: none; font-size: var(--font-size-sm); padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-on-dark-line); }
.back-link:hover { background: var(--color-on-dark-wash); color: var(--color-on-dark); }

/* Page-specific actions belong below the global navigation. This keeps the
   shared header stable and gives every module one predictable action zone. */
.page-toolbar { min-height: 52px; padding: var(--space-2) var(--space-6); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.page-toolbar-search { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 320px; min-width: 0; }
.page-toolbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.inline-disclosure-button { min-width: 0; min-height: 32px; margin-left: var(--space-1); padding: 0 var(--space-1); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; color: var(--color-orange); box-shadow: none; font: inherit; font-size: var(--font-size-xs); line-height: inherit; text-decoration: underline; text-underline-offset: 2px; vertical-align: middle; }
.inline-disclosure-button:hover { background: transparent; color: var(--color-navy); box-shadow: none; }
.inline-disclosure-button-muted { color: var(--color-muted); }

@media (max-width: 600px) {
  .page-toolbar { padding: var(--space-2) var(--space-3); align-items: stretch; }
  .page-toolbar-search, .page-toolbar-actions { width: 100%; flex-basis: 100%; }
  .page-toolbar-search > :first-child { flex: 1 1 auto; min-width: 0; }
  .page-toolbar-actions { margin-left: 0; }
  .page-toolbar-actions > :only-child { width: 100%; }
  body.standard-sales-workspace .inline-disclosure-button { min-width: var(--control-height-touch); min-height: var(--control-height-touch); padding: 0 var(--space-2); }
}

/* ── Error banner ─────────────────────────────────────────────────────── */
#error-banner { display: none; background: var(--color-danger-soft); color: var(--err); border-bottom: 1px solid var(--color-danger-line); padding: var(--space-2) var(--space-6); font-size: var(--font-size-sm); }
#error-banner.show { display: block; }

/* ── Workspace layout: sidebar + main ─────────────────────────────────── */
.layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: calc(100vh - 52px); }
.sidebar { background: var(--card); border-right: 1px solid var(--line); padding: var(--space-4) 0; overflow-y: auto; min-width: 0; max-width: 100%; }
.main { padding: var(--space-5) var(--space-6); overflow-y: auto; min-width: 0; }
.content { padding: var(--space-6); max-width: 1400px; margin: 0 auto; }
.screen { display: none; }
.screen.active { display: block; }
/* CRM screens reached from a host workspace (Sales/Marketing/Analytics/
   Platform Management) are embedded via iframe (crm.html?embed=1#<screen>)
   so the host's own sidebar/tab-bar never gets replaced by CRM's internal
   navigation -- see sales.html/analytics.html/content.html/admin.html. */
.crm-embed-frame { width: 100%; border: 0; display: block; height: 80vh; min-height: 560px; background: transparent; }
.sidebar-section { padding: 0 var(--space-4); margin-bottom: var(--space-5); }
.sidebar-label { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); padding: 0 var(--space-1); }
.sidebar-divider { height: 1px; background: var(--line); margin: var(--space-2) var(--space-4); }
.sidebar-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 7px var(--space-2); cursor: pointer; border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.sidebar-item:hover { background: var(--color-surface-sunken); }
.sidebar-item.active { background: var(--color-surface-tint); color: var(--blue); font-weight: var(--font-weight-semibold); }
.sidebar-item .count, .sidebar-item .cnt { margin-left: auto; font-size: var(--font-size-xs); background: var(--line); padding: 1px 6px; border-radius: var(--radius-pill); color: var(--muted); }
.sidebar-item.active .count, .sidebar-item.active .cnt { background: var(--color-info-soft); color: var(--blue); }
.sidebar-toggle { display: none; }
.sidebar-mobile-toggle { display: none; }
.pane-desc, .screen-desc { font-size: var(--font-size-sm); color: var(--muted); margin: -4px 0 var(--space-3); line-height: var(--line-height-normal); }

/* ── Management workspace contract ──────────────────────────────────────
   Admin owns the persistent left rail; Manage can also run as its embedded
   right-hand workspace. Keep page geometry and recurring management forms
   here so future management screens inherit the same spacing and controls. */
.management-workspace { min-width: 0; }
.management-workspace .management-main { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--space-6); }
.management-workspace.embedded-workspace .management-main,
html.embedded .management-workspace .management-main { max-width: none; margin: 0; }
.management-workspace .management-card { padding: var(--space-5); margin-bottom: var(--space-5); }
.management-workspace .management-card-description { margin: calc(-1 * var(--space-2)) 0 var(--space-4); color: var(--muted); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.management-workspace :where(.management-card-actions, .actions) { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.management-workspace .job-actions { display: flex; align-items: center; align-content: center; gap: var(--space-1); flex-wrap: wrap; }
.management-workspace .management-card-actions--spaced { margin-top: var(--space-3); }
.management-workspace .management-header-action { margin-left: auto; }
.management-workspace :where(button, .btn) { min-height: var(--control-height-md); }
.management-workspace :where(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) { min-height: var(--control-height-md); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; font-size: var(--font-size-sm); font-family: inherit; background: var(--color-surface); color: var(--ink); }
.management-workspace .ai-notes textarea { min-height: var(--control-height-md); }
.management-workspace :where(.management-field, .field) { margin-bottom: var(--space-3); }
.management-workspace :where(.management-field, .field) > label { display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: .05em; text-transform: uppercase; }
.management-workspace :where(.management-field, .field) :where(input:not([type="checkbox"]), select, textarea) { width: 100%; }
.management-workspace :where(.management-form-grid, .profile-grid) { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: var(--space-3) var(--space-4); }
.management-workspace :where(.management-form-grid, .profile-grid) > .wide { grid-column: 1 / -1; }
.management-workspace .management-form-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.management-workspace .management-inline-label { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); letter-spacing: 0; text-transform: none; }
.management-workspace .management-inline-label--top { align-items: flex-start; }
.management-workspace .management-inline-label input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.management-workspace .management-field-hint { margin-top: var(--space-1); color: var(--muted); font-size: var(--font-size-xs); }
.management-workspace .management-supporting-copy { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.management-workspace .management-section-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.management-workspace .management-section-head h3 { margin: 0; color: var(--navy); font-size: var(--font-size-sm); }
.management-workspace .management-filter-input { min-width: 220px; }
.management-workspace .management-table-loading { padding: var(--space-5); color: var(--muted); text-align: center; }
.management-workspace .management-option-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); max-height: 140px; overflow: auto; padding: var(--space-1) 0; }
.management-workspace .management-scroll-medium { max-height: 460px; }
.management-workspace .management-scroll-compact { max-height: 360px; margin-bottom: var(--space-5); }
.management-workspace .management-modal-spacer { flex: 1; }
.management-workspace-frame { display: block; width: 100%; min-height: calc(100vh - 150px); border: 0; background: transparent; }

/* Operational management screens share one quiet, full-width surface and
   control rhythm. Jobs & Queue is the reference consumer; Services and the
   Operations Lab opt into the same contract instead of growing local shells. */
.management-operations-workspace { width: 100%; min-width: 0; }
.management-operations-workspace > .screen-desc { max-width: 78ch; margin-bottom: var(--space-4); }
.management-operations-workspace .management-card { padding: var(--space-5); margin-bottom: var(--space-5); }
.management-status-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height-lg);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.management-status-detail { color: var(--muted); font-size: var(--font-size-sm); }
.management-operations-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--font-size-sm);
}
.management-operations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-4);
}
.management-operations-workspace .list-controls { margin-top: var(--space-4); }
.management-health-workspace { min-width: 0; }
.management-health-workspace .health-results { min-width: 0; overflow: visible; }
.management-health-workspace .list-controls { margin-top: var(--space-4); }
.management-operations-workspace .table-wrap { border-radius: var(--radius-md); }

@media (max-width: 760px) {
  .management-workspace .management-main { padding: var(--space-4); }
  .management-workspace .management-card { padding: var(--space-4); }
  .management-workspace .management-form-grid,
  .management-workspace .profile-grid,
  .management-workspace .management-form-grid--compact { grid-template-columns: minmax(0, 1fr); }
  .management-workspace :where(.management-form-grid, .profile-grid) > .wide { grid-column: auto; }
  .management-workspace .management-header-action { margin-left: 0; }
  .management-workspace .management-filter-input { min-width: 0; width: 100%; }
  .management-operations-workspace .management-card { padding: var(--space-4); }
  .management-operations-workspace .management-section-head { align-items: stretch; flex-wrap: wrap; }
  .management-operations-workspace .management-section-head .management-header-action { width: 100%; }
  .management-operations-workspace .management-section-head select { width: 100%; }
  .management-status-strip { align-items: flex-start; flex-wrap: wrap; }
  .management-status-strip .management-header-action { width: 100%; }
}

/* ── Task flow bar (item 47) ──────────────────────────────────────────── */
.flow-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius-md); background: var(--card); }
.flow-bar:empty { display: none; }
.flow-bar .screen-desc { margin: 0; font-size: var(--font-size-sm); color: var(--txt); }
.flow-bar .flow-actions { display: flex; align-items: center; gap: var(--space-3); }
.flow-bar .flow-next { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--navy); text-decoration: none; white-space: nowrap; }
.flow-bar .flow-next:hover { text-decoration: underline; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); min-width: 0; max-width: 100%; }
.card-title, .card > h2 { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--navy); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--gold); display: flex; align-items: center; gap: var(--space-2); }
.card > h3 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navy); margin: 0 0 10px; }
.card-title span, .ct-meta, .card-title .sub { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: var(--font-weight-regular); }
.card-title .collapse-caret { margin-left: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-header h2 { margin: 0; font-size: var(--font-size-md); color: var(--navy); }
.card-header .card-meta { font-size: 12px; color: var(--muted); }
.section-heading-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.section-heading-row > :first-child { min-width: 0; }
.section-heading-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
@media (min-width: 601px) {
  .section-heading-row > .collapse-caret { margin-left: 0; }
}
body.standard-dossier-workspace .dossier-opportunity-heading { margin-bottom: var(--space-3); }
body.standard-dossier-workspace .dossier-opportunity-heading > strong { color: var(--navy); font-size: var(--font-size-sm); }

/* Shared, explicit truncation contracts. The complete value remains available
   through the element's title/accessible name instead of being hard-clipped. */
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { min-width: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }

/* ── KPI tiles ────────────────────────────────────────────────────────── */
.kpi-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.kpi, .kpi-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); min-width: 110px; flex: 1; }
.kpi .v, .kpi .kpi-num, .kpi-tile .kpi-num { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--navy); line-height: var(--line-height-tight); }
.kpi .l, .kpi .kpi-lbl, .kpi-tile .kpi-lbl { font-size: var(--font-size-xs); color: var(--muted); margin-top: 2px; }
.kpi .kpi-sub { font-size: var(--font-size-xs); color: var(--muted); margin-top: 2px; }
.kpi[data-tone="good"] .v, .kpi[data-tone="good"] .kpi-num { color: var(--color-success); }
.kpi[data-tone="warn"] .v, .kpi[data-tone="warn"] .kpi-num { color: var(--color-warning); }
.kpi[data-tone="bad"] .v, .kpi[data-tone="bad"] .kpi-num { color: var(--color-danger); }
@media (min-width: 901px) {
  body.standard-core-workspace .metric-tile-flow { display: flex; flex-wrap: wrap; align-items: stretch; }
  body.standard-core-workspace .metric-tile-flow > .context-help-block-button {
    flex: 0 0 var(--control-height-compact);
    width: var(--control-height-compact);
    margin: 0 calc(100% - var(--control-height-compact)) var(--space-2) 0;
  }
  body.standard-core-workspace .metric-tile-flow > :where(.home-kpi, .kpi, .kpi-tile, .card) {
    flex: 1 1 220px;
    min-width: min(100%, 220px);
  }
}
/* Interactive dashboard tiles keep their own surface on hover. A low-
   specificity outline strengthens the edge without changing border width or
   overriding page-specific borders, shadows and selected/active states. The
   shared gold :focus-visible rule above remains the keyboard indicator. */
:where(button, a[href], [role="button"]):where(.card, .kpi, .kpi-tile, .report-kpi, .template-card):where(:not(.selected):not(.active):not(:disabled):not(:focus-visible):not([aria-pressed="true"]):not([aria-selected="true"])):hover {
  outline: 2px solid var(--color-line-hover);
  outline-offset: 0;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
thead th { background: var(--navy); color: var(--color-on-dark); padding: 7px 10px; text-align: left; font-size: 12px; font-weight: var(--font-weight-semibold); }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: var(--navy-dark); }
thead th.server-sortable { user-select: none; position: relative; padding: 0; }
.server-sort-trigger { position: relative; display: flex; align-items: center; width: 100%; min-height: var(--control-height-md); padding: 7px 24px 7px 10px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.server-sortable > .metric-info { position: absolute; z-index: 1; top: 50%; right: 25px; transform: translateY(-50%); color: var(--color-on-dark-muted); }
.server-sortable > .metric-info:hover, .server-sortable > .metric-info:focus-visible { color: var(--color-on-dark); transform: translateY(-50%); }
.server-sort-trigger::after { content: "↕"; position: absolute; right: 8px; color: var(--color-on-dark-faint); }
thead th.server-sortable[aria-sort="ascending"] .server-sort-trigger::after { content: "↑"; color: var(--color-on-dark); }
thead th.server-sortable[aria-sort="descending"] .server-sort-trigger::after { content: "↓"; color: var(--color-on-dark); }
thead th.server-sortable:hover { background: var(--navy-dark); }
td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:nth-child(even) td { background: var(--stripe); }
tbody tr[data-href] { cursor: pointer; }
tbody tr[data-href]:hover td, tbody tr:hover td { background: var(--color-surface-tint); }
table.tbl { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.tbl th { text-align: left; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }
.data-table-wrap { position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.data-table { width: 100%; }
.data-table-actions { white-space: nowrap; }
body.standard-sales-workspace .accounts-data-table { min-width: 1240px; }
body.standard-sales-workspace .accounts-data-table :where(th, td).data-table-actions {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 124px;
  min-width: 124px;
  background: var(--card);
  box-shadow: -8px 0 10px -12px var(--color-ink);
  white-space: nowrap;
}
body.standard-sales-workspace .accounts-data-table thead th.data-table-actions {
  z-index: 3;
  background: var(--navy);
}
body.standard-sales-workspace .accounts-data-table tbody tr:nth-child(even) td.data-table-actions { background: var(--stripe); }
body.standard-sales-workspace .accounts-data-table tbody tr:hover td.data-table-actions { background: var(--color-surface-tint); }
.scroll-list thead th { position: sticky; top: 0; z-index: 2; background: var(--navy); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 7px; border-radius: var(--radius-xs); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; line-height: 1.4; }
.badge-pill { border-radius: var(--radius-pill); }
.badge-high, .badge-hot, .badge-new, .badge-urgent { background: var(--color-orange-soft); color: var(--color-orange-dark); }
.badge-medium, .badge-qualified, .badge-warn, .badge-revision, .badge-pilot, .badge-paused, .badge-held, .badge-article, .badge-competitor, .badge-daily-brief, .badge-nl { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.badge-low, .badge-na, .badge-grey, .badge-other, .badge-disabled, .badge-draft, .badge-retired, .badge-ch, .badge-qa { background: var(--color-neutral-100); color: var(--color-ink-soft); }
.badge-yes, .badge-ok, .badge-approved, .badge-accepted, .badge-won, .badge-proposed, .badge-enabled, .badge-active, .badge-live, .badge-renewal, .badge-newsletter, .badge-be { background: var(--color-success-soft); color: var(--color-success-ink); }
.badge-no, .badge-err, .badge-fail, .badge-failed, .badge-lost, .badge-rejected, .badge-trigger, .badge-critical { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.badge-info, .badge-identified, .badge-sent, .badge-submitted, .badge-linkedin, .badge-search-visibility, .badge-de { background: var(--color-info-soft); color: var(--color-info); }
.badge-market, .badge-stakeholder, .badge-platform, .badge-lu { background: var(--color-violet-soft); color: var(--color-violet); }
.badge-at { background: var(--color-rose-soft); color: var(--color-rose); }
.badge-outline { background: var(--stripe); color: var(--muted); border: 1px solid var(--line); }

/* ── Chips ────────────────────────────────────────────────────────────── */
.chip, .prop-tag { display: inline-block; padding: 1px 7px; border-radius: var(--radius-xs); background: var(--blue-bg); color: var(--blue); font-size: var(--font-size-2xs); margin: 1px; }
.view-chip { background: var(--navy); color: var(--color-on-dark); border: none; padding: 3px 10px; border-radius: var(--radius-lg); font-size: var(--font-size-xs); cursor: pointer; }
.view-chip:hover { opacity: .85; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
button, .btn { border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: var(--font-size-sm); font-family: inherit; font-weight: var(--font-weight-medium); cursor: pointer; background: var(--navy); color: var(--color-on-dark); line-height: 1.4; transition: transform .08s ease-out, filter .08s ease-out, opacity .12s ease-out; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
button:not(:where(.card, .kpi, .kpi-tile, .report-kpi, .template-card)):hover,
.btn:not(:where(.card, .kpi, .kpi-tile, .report-kpi, .template-card)):hover { background: var(--navy-dark); }
button:disabled, .btn:disabled { opacity: .5; cursor: default; }
/* Click/press feedback (2026-09-03): buttons had no visible response to a
   click beyond the eventual result of whatever the click triggered, which
   for anything slower than instant reads as "did that register?". :active
   gives immediate feedback for a held-down mouse/touch press; .btn-pressed
   (toggled from platform.js on pointerdown, for every button/.btn on every
   page that loads platform.js) covers the very-fast tap case where :active
   never gets painted before the click handler already redrew the page;
   .btn-busy (toggled around the shared api() fetch wrapper) covers the
   in-flight case for anything that calls the API. */
button:active, .btn:active,
button.btn-pressed, .btn.btn-pressed {
  transform: translateY(1px) scale(.97);
  filter: brightness(.88);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, .24);
}
button.btn-pressed, .btn.btn-pressed { animation: btn-press-pulse .32s ease-out; }
button.btn-busy, .btn.btn-busy { opacity: .6; cursor: progress; }
@keyframes btn-press-pulse {
  0% { box-shadow: inset 0 2px 4px rgba(15, 23, 42, .24), 0 0 0 0 var(--color-accent-ring, rgba(20,40,80,.35)); }
  100% { box-shadow: inset 0 2px 4px rgba(15, 23, 42, .24), 0 0 0 7px rgba(20,40,80,0); }
}
@media (prefers-reduced-motion: reduce) {
  button, .btn { transition: none; }
  button:active, .btn:active, button.btn-pressed, .btn.btn-pressed { transform: none; }
  button.btn-pressed, .btn.btn-pressed { animation: none; }
}
.btn-primary, .btn-orange { background: var(--orange); }
.btn-primary:hover, .btn-orange:hover { background: var(--color-orange-dark); }
.btn-navy { background: var(--navy); }
.btn-secondary { background: var(--color-surface-sunken); color: var(--txt); }
.btn-secondary:hover { background: var(--color-line); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--color-surface-sunken); }
.btn-danger, .btn-red { background: var(--err); }
.btn-danger:hover, .btn-red:hover { background: var(--color-danger-ink); }
.btn-success, .btn-green { background: var(--color-success); }
.btn-success:hover, .btn-green:hover { background: var(--color-success-ink); }
.btn-warning, .btn-warn, .btn-amber { background: var(--color-warning); }
.btn-warning:hover, .btn-warn:hover, .btn-amber:hover { background: var(--color-warning-ink); }
.btn-sm { padding: 3px 10px; font-size: 12px; }

/* ── Form controls ────────────────────────────────────────────────────── */
input[type=text], input[type=search], input[type=number], input[type=email], input[type=password], input[type=date], select, textarea, .inp { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; font-size: var(--font-size-sm); font-family: inherit; background: var(--color-surface); color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--navy); }
input::placeholder, textarea::placeholder { color: var(--muted); }
label { font-size: 12px; color: var(--muted); }
.filters { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; align-items: center; }
.filters .f-count, .f-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.filter-set { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.filter-set label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { background: none; border: none; border-radius: 0; padding: 6px 14px; font-size: 12.5px; font-weight: var(--font-weight-semibold); color: var(--muted); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: none; }
.seg button.active { background: var(--navy); color: var(--color-on-dark); }
.toggle { position: relative; display: inline-block; width: 38px; height: 20px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-line-strong); border-radius: var(--radius-pill); transition: background var(--motion-slow); }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background: var(--color-surface); border-radius: var(--radius-circle); transition: transform var(--motion-slow); }
input:checked + .slider { background: var(--color-success); }
input:checked + .slider:before { transform: translateX(18px); }
.comp-bar, .comp-mini-bar { background: var(--color-neutral-200); height: 6px; border-radius: var(--radius-xs); overflow: hidden; }
.comp-fill, .comp-mini-fill { display: block; height: 100%; background: var(--navy); border-radius: var(--radius-xs); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
/* _shared_tabs_scroll_fade_v1 (2026-09-16, Richard: dossier tab menu "loopt
   door buiten het frame"): a wide tab row (many tabs, or long labels like
   "Relationships & activity") used to overflow its container on desktop --
   only mobile had overflow-x:auto (see dossier.html). .tabs is now always
   horizontally scrollable, on every page that uses it, with the native
   scrollbar hidden. Discoverability (the exact gap in the earlier
   admin.html Platform Management fix) comes from a soft inset-shadow
   affordance on whichever edge still has hidden tabs, driven by
   .tabs--has-more-left/.tabs--has-more-right (see _installTabsScrollFade
   in platform.js) -- never shown when everything already fits. */
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); border-bottom: 2px solid var(--line); overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.tabs--has-more-left { box-shadow: inset 20px 0 14px -14px var(--color-scrim-edge); }
.tabs.tabs--has-more-right { box-shadow: inset -20px 0 14px -14px var(--color-scrim-edge); }
.tabs.tabs--has-more-left.tabs--has-more-right { box-shadow: inset 20px 0 14px -14px var(--color-scrim-edge), inset -20px 0 14px -14px var(--color-scrim-edge); }
.tab-btn { background: none; color: var(--muted); border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: var(--space-2) 14px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: -2px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.tab-btn:hover { background: var(--color-surface-sunken); color: var(--navy); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--orange); background: none; }
.tab-pane { display: none; min-width: 0; max-width: 100%; }
.tab-pane.active { display: block; }

/* ── Filter bar (item 44): controls above the results, chips, reset ───── */
.filter-bar { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.filter-bar-fields { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-field > span { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--muted); font-weight: var(--font-weight-semibold); }
.filter-field input[type=text], .filter-field input[type=search], .filter-field select { min-width: 140px; min-height: var(--control-height); }
.filter-field-toggle { flex-direction: row; align-items: center; gap: var(--space-2); min-height: var(--control-height); font-size: var(--font-size-sm); color: var(--txt); }
.filter-bar-meta { margin-left: auto; font-size: 12px; color: var(--muted); align-self: center; }
.desktop-filter-bar { align-items: flex-end; }
.desktop-filter-bar > :where(label, .filter-field) { text-align: start; }
.desktop-filter-bar > :where(input, select, label) { flex: 1 1 150px; min-width: 140px; max-width: 260px; }
.filter-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; min-height: 0; }
.filter-chips:empty { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); color: var(--txt); padding: 3px 6px 3px 10px; font-size: var(--font-size-xs); line-height: 1.4; }
.filter-chip-key { color: var(--muted); }
.filter-chip-remove { border: 0; background: transparent; color: var(--muted); padding: 0 4px; font-size: 12px; line-height: 1; cursor: pointer; border-radius: var(--radius-circle); }
.filter-chip-remove:hover, .filter-chip-remove:focus-visible { color: var(--err); background: var(--color-danger-soft); }
.filter-reset { background: transparent; color: var(--navy); border: 1px solid var(--line); padding: 3px 10px; font-size: var(--font-size-xs); border-radius: var(--radius-pill); }
.filter-reset:hover { background: var(--color-surface-sunken); }

body.standard-home-workspace .inbox-queue .queue-label.clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

/* The primary Home queue uses the document scroll and its existing Load more
   control, so neither queue names nor work items disappear in a nested pane. */
body.standard-home-workspace .dashboard-grid {
  align-items: start;
}

body.standard-home-workspace .priority-card {
  height: auto;
  min-height: 520px;
}

body.standard-home-workspace .priority-card .inbox {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

body.standard-home-workspace .priority-card :where(.inbox-queues, .inbox-items) {
  min-height: 0;
  overflow-y: visible;
  scrollbar-gutter: auto;
}

body.standard-marketing-workspace select.marketing-expanded-options {
  height: auto;
  min-height: 0;
}

/* Intelligence bulk review keeps the current-page decisions prominent while
   query-wide and recovery actions occupy a predictable secondary row. */
body.standard-intelligence-workspace .signal-bulk-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  background: var(--color-surface-alt);
}
body.standard-intelligence-workspace .signal-bulk-bar:not(.active) { color: var(--muted); }
body.standard-intelligence-workspace :where(.signal-bulk-selection, .signal-bulk-primary, .signal-bulk-secondary) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}
body.standard-intelligence-workspace .signal-bulk-selection label {
  min-height: var(--control-height-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
body.standard-intelligence-workspace .signal-bulk-count { color: var(--navy); font-weight: var(--font-weight-bold); }
body.standard-intelligence-workspace .signal-bulk-primary { justify-content: flex-end; }
body.standard-intelligence-workspace .signal-bulk-secondary {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
body.standard-intelligence-workspace .overview-signal-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: ellipsis;
  line-height: var(--line-height-snug);
}

@media (max-width: 900px) {
  body.standard-intelligence-workspace .signal-bulk-bar { grid-template-columns: minmax(0, 1fr); }
  body.standard-intelligence-workspace :where(.signal-bulk-primary, .signal-bulk-secondary) {
    grid-column: 1;
    justify-content: stretch;
  }
  body.standard-intelligence-workspace :where(.signal-bulk-primary, .signal-bulk-secondary) .btn {
    flex: 1 1 220px;
  }
}

@media (max-width: 600px) {
  .section-heading-row { align-items: flex-start; flex-wrap: wrap; }
  .section-heading-actions { width: 100%; margin-left: 0; }
}

/* ── Growing-list controls: range, page size, export and navigation ─── */
.list-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.list-controls-leading, .list-controls-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.list-page-size { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--font-size-sm); }
.list-page-size select { min-width: 72px; height: var(--control-height-md); }
.list-range { min-width: 120px; color: var(--muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.list-controls .btn { min-height: var(--control-height-md); }
.list-controls .btn-icon {
  width: var(--control-height-md);
  min-width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--control-height-md);
}
.list-controls .btn-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.list-controls .btn-icon[data-list-export] { color: var(--color-success-ink); background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 35%, var(--line)); }
.list-controls .btn-icon[data-list-export]:hover { color: var(--color-on-dark); background: var(--color-success); }
.list-controls .btn-icon[aria-busy="true"] svg { animation: list-control-busy .8s ease-in-out infinite alternate; }
.collection-list-toolbar { display:flex; align-items:end; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-3) 0; }
.collection-list-toolbar label { display:grid; gap:var(--space-1); min-width:min(240px,100%); color:var(--muted); font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); }
.collection-list-toolbar input, .collection-list-toolbar select { min-height:var(--control-height-md); }
.list-controls.is-busy { opacity: .72; }
@keyframes list-control-busy { to { opacity: .35; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .list-controls .btn-icon[aria-busy="true"] svg { animation: none; transform: none; }
}

/* Shared report workspace primitives. Analytics is the reference consumer;
   future reporting screens reuse these rather than defining their own cards,
   toolbars, segmented views and KPI geometry inside a template. */
.report-hero { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.report-hero h1 { margin: 0 0 var(--space-1); color: var(--navy); font-size: var(--font-size-2xl); }
.report-hero p { margin: 0; color: var(--muted); font-size: var(--font-size-sm); }
.report-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end;
  padding: var(--space-3); margin-bottom: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--color-canvas);
}
.report-toolbar label { display: grid; gap: var(--space-1); min-width: 130px; color: var(--muted); font-size: var(--font-size-xs); }
.report-toolbar input, .report-toolbar select { min-height: var(--control-height-md); }
.report-toolbar .grow { flex: 1 1 210px; }
.report-toolbar-actions { display: flex; gap: var(--space-2); margin-left: auto; }
.report-toolbar button, .view-toggle button { min-height: var(--control-height-md); }
.view-toggle { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.view-toggle button { min-height: var(--control-height-md); padding: 4px 10px; border: 1px solid transparent; background: transparent; color: var(--txt); }
.view-toggle button:hover, .view-toggle button:focus-visible { border-color: var(--navy); background: var(--color-surface); color: var(--navy); }
.view-toggle button.active, .view-toggle button[aria-pressed="true"] { background: var(--color-surface); color: var(--navy); box-shadow: var(--elevation-card); }
.report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.report-kpi {
  position: relative; overflow: hidden; padding: 15px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--elevation-card);
}
.report-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--navy); }
.report-kpi .value { display: block; margin-top: var(--space-1); color: var(--navy); font-size: 25px; font-weight: 750; font-variant-numeric: tabular-nums; }
.report-kpi .label { color: var(--muted); font-size: var(--font-size-xs); }
.report-kpi:is(button) { width: 100%; color: inherit; text-align: left; font: inherit; }
.report-kpi:is(button):hover, .report-kpi:is(button):focus-visible, .report-kpi:is(button)[data-active="1"] {
  border-color: var(--navy); background: var(--color-surface); color: var(--txt);
  outline: 2px solid color-mix(in srgb, var(--navy) 18%, transparent); filter: none; transform: none;
}
.report-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.chart-detail { min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
.chart-detail .detail-date { color: var(--muted); font-size: var(--font-size-sm); }
.chart-detail .detail-value { margin: var(--space-1) 0 var(--space-3); color: var(--navy); font-size: 36px; font-weight: 750; }
.chart-detail .detail-note { color: var(--muted); font-size: var(--font-size-sm); line-height: 1.5; }
.report-card-spaced { margin-top: var(--space-4); }
.report-card-following { margin-bottom: var(--space-4); }
.report-supporting-text { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--font-size-sm); }
.report-visualization-field > span { display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--font-size-xs); }

@media (max-width: 900px) {
  .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .report-kpis { grid-template-columns: 1fr; }
  .report-toolbar > * { width: 100%; }
  .report-toolbar-actions { margin-left: 0; }
  .report-hero { display: block; }
}

/* Review batch shell: every decision queue shares the same spatial contract. */
.review-workspace-page .main { max-width: none; width: 100%; padding: var(--space-5); }
.review-workspace-page .tabs {
  position: sticky; top: 0; z-index: 20; padding: var(--space-2);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(18px);
}
.review-workspace-page .tab-pane > .card {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.review-workspace-page .table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); }
.review-table-fixed { width: 100%; table-layout: fixed; }
.review-select-column { width: 34px; }
.review-workspace-frame { display: block; width: 100%; height: calc(100vh - 150px); border: 0; background: transparent; }
.review-list-toolbar { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0 0; }
.review-list-toolbar > [id$="-controls"] { flex: 1 1 420px; }
.review-list-search { display: flex; flex-direction: column; gap: 3px; min-width: min(260px, 100%); }
.review-list-search > span { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--muted); font-weight: var(--font-weight-semibold); }
.review-list-search input { min-height: var(--control-height-md); }
.review-workspace-page .server-sort-trigger { width: 100%; justify-content: space-between; text-align: left; }
.review-workspace-page .modal-overlay { align-items: stretch; justify-content: flex-end; padding: 0; }
.review-workspace-page .modal-overlay .modal {
  width: min(640px, 100%); max-width: min(640px, 100%); max-height: 100vh;
  margin: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-xl); overflow: auto;
}
.review-workspace-page .salesforce-review-frame {
  display: block;
  width: 100%;
  min-height: calc(100vh - 240px);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) {
  .hdr .hdr-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .review-workspace-page .main { padding: var(--space-3); }
  .review-workspace-page .modal-overlay .modal { width: 100%; max-width: 100%; border-radius: 0; }
  .review-list-toolbar > [id$="-controls"] { flex-basis: 100%; }
}

/* Account-quality is a compact status strip, not a generic KPI row. Keeping
   its own layout prevents labels and values from being joined visually when
   shared KPI geometry changes. */
.account-quality-summary { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.account-quality-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: var(--space-2); }
.account-quality-stat {
  min-width: 0;
  min-height: 62px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
  color: var(--txt);
  background: var(--color-surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.account-quality-stat:not(.account-quality-stat-static):hover { color: var(--navy); background: var(--color-surface-tint); border-color: var(--color-line-hover); }
.account-quality-stat-value { flex: 0 0 auto; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.account-quality-stat-label { min-width: 0; font-size: var(--font-size-xs); line-height: 1.25; color: var(--muted); }
.account-quality-stat[data-account-quality-summary="complete"] .account-quality-stat-value { color: var(--color-success); }
.account-quality-stat[data-account-quality-summary="partial"] .account-quality-stat-value { color: var(--color-warning); }
.account-quality-stat[data-account-quality-summary="critical"] .account-quality-stat-value { color: var(--color-danger); }
.account-quality-stat-static { cursor: default; }
.account-quality-details { display: grid; gap: 3px; padding: 9px 12px; color: var(--muted); background: var(--color-surface-alt); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--font-size-xs); line-height: 1.35; }
.account-quality-detail { margin: 0; overflow-wrap: anywhere; }
.account-quality-detail strong { color: var(--txt); font-weight: var(--font-weight-semibold); }

@media (max-width: 900px) {
  .account-quality-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .list-controls, .list-controls-leading, .list-controls-actions { align-items: stretch; }
  .list-controls-leading, .list-controls-actions { width: 100%; }
  .list-controls-actions .btn:not(.btn-icon) { flex: 1 1 auto; }
  .list-page-size { flex: 1 1 auto; justify-content: space-between; }
  .account-quality-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── View states (item 45): six functionally distinct states ──────────── */
.view-state { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--radius-md); padding: var(--space-4); background: var(--card); margin: var(--space-2) 0; font-size: var(--font-size-sm); }
.view-state-icon { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--color-surface-sunken); color: var(--muted); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.view-state-body { flex: 1; min-width: 0; }
.view-state-body strong { display: block; color: var(--navy); margin-bottom: 2px; }
.view-state-body p { margin: 0; color: var(--muted); }
.view-state-action { margin-top: var(--space-2); }
.view-state-action .btn, .view-state-action button, .view-state-action a { font-size: 12px; }
.view-state[data-state="empty"] { border-left-color: var(--color-muted); }
.view-state[data-state="empty"] .view-state-icon { background: var(--color-neutral-100); color: var(--color-muted); }
.view-state[data-state="incomplete"] { border-left-color: var(--color-warning); background: var(--color-warning-tint); }
.view-state[data-state="incomplete"] .view-state-icon { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.view-state[data-state="stale"] { border-left-color: var(--color-stale); background: var(--color-stale-soft); }
.view-state[data-state="stale"] .view-state-icon { background: var(--color-gold-soft); color: var(--color-warning); }
.view-state[data-state="failed"] { border-left-color: var(--color-danger); background: var(--color-danger-tint); }
.view-state[data-state="failed"] .view-state-icon { background: var(--color-danger-soft); color: var(--color-danger); }
.view-state[data-state="no-results"] { border-left-color: var(--color-navy); background: var(--color-surface-alt); }
.view-state[data-state="no-results"] .view-state-icon { background: var(--color-info-soft); color: var(--color-info); }
.view-state[data-state="loading"] { border-left-color: var(--color-loading); border-style: dashed; color: var(--muted); }
.view-state[data-state="loading"] .view-state-icon { background: var(--color-surface-sunken); color: var(--color-loading); animation: view-state-pulse 1.2s ease-in-out infinite; }
@keyframes view-state-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.view-state-inline { padding: var(--space-2) var(--space-3); margin: 0; border-width: 0 0 0 3px; background: transparent; }
/* Legacy placeholders (no longer emitted by pages; kept for old markup) */
.empty { padding: var(--space-6); text-align: center; color: var(--muted); font-size: var(--font-size-sm); }
.loading { color: var(--muted); padding: var(--space-3) 0; font-size: var(--font-size-sm); }

/* ── Side panel (why / metric / account detail / help share this shell) ── */
.side-panel-backdrop, .why-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-side-panel) - 1); background: var(--color-backdrop); }
.side-panel, .why-panel { position: fixed; right: 0; top: 0; bottom: 0; width: min(var(--side-panel-width), 100vw); z-index: var(--z-side-panel); background: var(--card); box-shadow: var(--elevation-md); padding: var(--space-6); overflow: auto; font-size: var(--font-size-sm); color: var(--txt); }
.side-panel h2, .why-panel h2 { margin: 0 var(--space-6) var(--space-3) 0; color: var(--navy); font-size: var(--font-size-md); }
.side-panel h3, .why-panel h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--font-size-sm); color: var(--navy); text-transform: uppercase; letter-spacing: .04em; }
.side-panel-close, .why-close { position: absolute; top: var(--space-3); right: var(--space-3); border: 1px solid var(--line); background: var(--card); color: var(--muted); width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm); cursor: pointer; }
.side-panel-close:hover, .why-close:hover { background: var(--color-surface-sunken); color: var(--navy); }
.side-panel-head { background: var(--navy); color: var(--color-on-dark); padding: var(--space-4) var(--space-5); margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); }
.side-panel-head h2 { color: var(--color-on-dark); margin: 0; flex: 1; font-size: var(--font-size-md); }
.side-panel-head .side-panel-close { position: static; border-color: var(--color-on-dark-line); background: transparent; color: var(--color-on-dark); }
.side-panel-section { margin-bottom: var(--space-4); }
.side-panel-section h3 { border-bottom: 1px solid var(--line); padding-bottom: var(--space-1); }
.side-panel-row { display: flex; justify-content: space-between; gap: var(--space-2); padding: 5px 0; border-bottom: 1px solid var(--stripe); font-size: var(--font-size-sm); }
.side-panel-row .label { color: var(--muted); }
.why-subject { margin: 0 0 var(--space-2); color: var(--muted); }
.why-score { margin: 0; font-size: var(--font-size-md); }
.why-score strong { font-size: 24px; color: var(--navy); }
.why-factor { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.why-factor-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.why-factor-value { font-variant-numeric: tabular-nums; color: var(--navy); }
.why-factor-value small { color: var(--muted); font-weight: var(--font-weight-regular); }
.why-bar { height: 6px; background: var(--color-canvas); border-radius: var(--radius-pill); overflow: hidden; margin: var(--space-1) 0; }
.why-bar-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-pill); }
.why-factor[data-direction="negative"] .why-bar-fill { background: var(--color-danger); }
.why-factor[data-direction="neutral"] .why-bar-fill { background: var(--muted); }
.why-factor-detail { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--font-size-xs); }
.why-evidence { margin: 0; padding-left: var(--space-4); font-size: var(--font-size-xs); }
.why-evidence li { margin: 2px 0; }
.why-evidence-type { display: inline-block; padding: 0 5px; border-radius: var(--radius-sm); background: var(--color-canvas); color: var(--muted); text-transform: uppercase; font-size: var(--font-size-2xs); letter-spacing: .04em; }
.why-evidence-missing { margin: 0; color: var(--color-warning); font-size: var(--font-size-xs); }
.why-missing { margin: 0; padding-left: var(--space-4); color: var(--color-warning); }
.why-method { margin-top: var(--space-4); color: var(--muted); }
.why-loading { color: var(--muted); }
.why-button { border: 1px solid var(--line); background: transparent; color: var(--navy); padding: 2px 6px; font-size: var(--font-size-xs); border-radius: var(--radius-sm); cursor: pointer; line-height: 1.2; vertical-align: middle; }
.why-button:hover, .why-button:focus-visible { border-color: var(--navy); background: var(--color-canvas); outline: 2px solid var(--gold); outline-offset: 1px; }
.score { white-space: nowrap; }
.score-value { font-variant-numeric: tabular-nums; }
.metric-info { border: 0; background: transparent; color: var(--muted); padding: 0 2px; font-size: var(--font-size-xs); cursor: pointer; vertical-align: baseline; line-height: 1; }
.metric-info:hover, .metric-info:focus-visible { color: var(--navy); outline: 2px solid var(--gold); outline-offset: 1px; border-radius: var(--radius-sm); background: transparent; }
.metric-info-popover { position: absolute; z-index: var(--z-popover); width: min(330px, calc(100vw - 16px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elevation-md); padding: var(--space-4); font-size: var(--font-size-sm); color: var(--txt); }
.metric-info-popover .why-close { top: var(--space-2); right: var(--space-2); }
.metric-info-title { margin: 0 var(--space-6) var(--space-1) 0; font-size: var(--font-size-sm); color: var(--navy); }
.metric-info-description { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--font-size-xs); }
.metric-info-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; border-top: 1px solid var(--line); font-size: var(--font-size-xs); }
.metric-info-row strong { color: var(--navy); text-align: right; word-break: break-word; }
.metric-tile { display: block; }

/* ── Modal / dialog ───────────────────────────────────────────────────── */
.modal-overlay, .overlay { display: none; position: fixed; inset: 0; background: var(--color-backdrop); z-index: var(--z-modal); align-items: center; justify-content: center; padding: var(--space-4); }
.modal-overlay.open, .overlay.open { display: flex; }
.modal { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--elevation-md); width: min(640px, 100%); max-height: 90vh; overflow: auto; padding: var(--space-6); border-top: 4px solid var(--navy); }
.modal h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-md); color: var(--navy); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.modal-footer .btn { min-width: 90px; }
.msg, .o-msg, .gen-msg, .deliv-msg, .rd-msg > div { display: none; font-size: 12px; padding: var(--space-2) var(--space-3); line-height: var(--line-height-normal); margin-bottom: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); }
.msg.ok, .o-msg.ok, .gen-msg.ok, .deliv-msg.ok, .rd-msg .ok { display: block; background: var(--color-success-soft); color: var(--color-success-ink); border-color: var(--color-success-line); }
.msg.held, .o-msg.held, .gen-msg.held, .deliv-msg.held, .msg.warn { display: block; background: var(--color-warning-soft); color: var(--color-warning-ink); border-color: var(--color-warning-line); }
.msg.err, .o-msg.err, .gen-msg.err, .deliv-msg.err, .rd-msg .err { display: block; background: var(--color-danger-soft); color: var(--color-danger-ink); border-color: var(--color-danger-line); }

/* ── Markdown document rendering (dossier + content) ──────────────────── */
.md-doc { max-width: 860px; margin: 0 auto; padding: var(--space-6) var(--space-8) var(--space-12); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--ink); }
.md-doc h1, .md-doc h2 { color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: var(--space-2); margin: 26px 0 14px; font-weight: var(--font-weight-bold); }
.md-doc h1 { font-size: 24px; margin-top: 6px; }
.md-doc h2 { font-size: 19px; }
.md-doc h3 { color: var(--navy); font-size: 16px; font-weight: var(--font-weight-semibold); margin: 20px 0 8px; }
.md-doc h4 { color: var(--ink); font-size: 14.5px; font-weight: var(--font-weight-semibold); margin: 14px 0 6px; }
.md-doc p { margin: 0 0 12px; }
.md-doc a { color: var(--orange); text-decoration: none; }
.md-doc a:hover { text-decoration: underline; }
.md-doc strong { color: var(--navy); }
.md-doc ul, .md-doc ol { padding-left: 24px; margin: 0 0 12px; }
.md-doc li { margin-bottom: 4px; }
.md-doc li > ul, .md-doc li > ol { margin: 4px 0 0; }
.md-doc code { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); padding: 1px 5px; }
.md-doc pre { background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
.md-doc pre code { background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.55; }
.md-doc blockquote { border-left: 4px solid var(--gold); background: var(--color-gold-soft); margin: 0 0 14px; padding: 10px 16px; color: var(--color-neutral-600); }
.md-doc hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.md-doc .table-wrap { overflow-x: auto; margin: 0 0 16px; }
.md-doc table { font-size: var(--font-size-base); }
.md-doc thead th { padding: 9px 12px; }
.md-doc td { padding: 8px 12px; vertical-align: top; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { text-align: center; font-size: var(--font-size-xs); color: var(--muted); padding: var(--space-5) 0 var(--space-10); }
.capability-hidden { display: none !important; }

/* ── Scrollbare lijsten: max ±15-20 rijen, daarna eigen scrollbar ────────── */
.scroll-list { max-height: 620px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll-list::-webkit-scrollbar { width: 8px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--color-line-strong); border-radius: var(--radius-sm); }

/* ── Inklapbare secties (status in localStorage via platform.js) ─────────── */
.collapse-head { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.collapse-head:hover { opacity: .85; }
.collapse-caret { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--muted); }
/* Contract: de titel/header is een DIRECT kind van het [data-collapse]-element;
   ingeklapt verbergt alles behalve die header. */
[data-collapse].collapsed > *:not(.collapse-head) { display: none !important; }
[data-collapse].collapsed { padding-bottom: 10px; }

/* ── Responsive (shared, platform-wide) ─────────────────────────────────── */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); min-height: 0; align-content: start; }
  .layout .side { width: 100% !important; }

  /* Main navigation uses a left-hand off-canvas drawer on touch widths.
     The brand and hamburger own the first row; secondary header controls
     wrap below them, so the controller always remains flush right. */
  .hdr { flex-wrap: wrap; overflow: visible; padding: 10px 12px; gap: 8px; }
  .hdr-brand { order: 1; flex: 1 1 140px; width: auto; min-width: 0; }
  .nav-toggle {
    order: 1; display: inline-flex; margin-left: auto; position: relative;
    z-index: var(--z-popover);
  }
  .hdr::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  .hdr > :not(.hdr-brand):not(.nav-toggle):not(.nav) { order: 3; }
  .hdr .language-switch { margin-left: 0; }
  .hdr.nav-open { z-index: var(--z-side-panel); }
  .nav {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-side-panel);
    margin-left: 0; width: min(82vw, 360px); height: 100dvh; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: max(72px, calc(env(safe-area-inset-top) + 60px)) 16px
      max(20px, env(safe-area-inset-bottom));
    background: var(--color-navy-dark); border-right: 1px solid var(--color-on-dark-line);
    box-shadow: var(--elevation-md); visibility: hidden; pointer-events: none;
    transform: translateX(-104%);
    transition: transform var(--motion-base) var(--motion-ease),
                visibility 0s linear var(--motion-base);
  }
  .hdr.nav-open .nav {
    visibility: visible; pointer-events: auto; transform: translateX(0);
    transition-delay: 0s;
  }
  .hdr.nav-open .nav-toggle {
    position: fixed; top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
  .mobile-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: var(--z-dropdown); border: 0; padding: 0;
    background: var(--color-backdrop-strong);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--motion-base) var(--motion-ease),
                visibility 0s linear var(--motion-base);
  }
  body.mobile-nav-open { overflow: hidden; }
  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
  }
  .nav a {
    flex: 0 0 auto; width: 100%; white-space: normal;
    min-height: 44px; display: flex; align-items: center;
    padding: 11px 12px; border-bottom: 1px solid var(--color-on-dark-line);
    border-radius: 0;
  }

  /* Every workspace submenu lives inside the hamburger drawer. Page sidebars
     stay in the DOM for routing/state, but are not duplicated as separate
     mobile controls or page blocks. */
  .layout > .sidebar, .layout > .sidebar.open, .sidebar-toggle,
  .sidebar-mobile-toggle, [data-mobile-nav-source] { display: none !important; }
  .mobile-nav-workspace-group { display: flex; flex: 0 0 auto; flex-direction: column; width: 100%; }
  .mobile-nav-workspace-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: stretch; }
  .nav .mobile-nav-workspace-link { grid-column: 1 / -1; grid-row: 1; padding-right: 54px; }
  .mobile-nav-submenu-toggle {
    grid-column: 2; grid-row: 1; z-index: 1; min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 0; border-left: 1px solid var(--color-on-dark-line); border-radius: 0;
    background: transparent; color: var(--color-on-dark); cursor: pointer;
  }
  .mobile-nav-submenu-toggle:hover,
  .mobile-nav-submenu-toggle:focus-visible { background: var(--color-on-dark-wash); }
  .mobile-nav-submenu-toggle span {
    width: 9px; height: 9px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--motion-fast) var(--motion-ease);
  }
  .mobile-nav-workspace-group.submenu-open .mobile-nav-submenu-toggle span {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .mobile-nav-submenu {
    display: flex; flex-direction: column; gap: 2px; margin: -4px 0 8px 18px;
    padding: 4px 0 8px 10px; border-left: 2px solid var(--color-on-dark-line-strong);
  }
  .mobile-nav-submenu[hidden] { display: none; }
  .mobile-nav-submenu-label {
    padding: 10px 10px 4px; color: var(--color-on-dark-faint);
    font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold);
    letter-spacing: .08em; text-transform: uppercase;
  }
  .nav .mobile-nav-submenu-item {
    width: 100%; min-height: 40px; display: flex; align-items: center;
    padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-on-dark-muted); font: inherit;
    font-size: var(--font-size-xs); line-height: var(--line-height-snug);
    text-align: left; text-decoration: none; border-bottom: 0;
  }
  .nav .mobile-nav-submenu-item:hover,
  .nav .mobile-nav-submenu-item:focus-visible { background: var(--color-on-dark-wash); color: var(--color-on-dark); }
  .nav .mobile-nav-submenu-item.active {
    background: var(--color-on-dark-wash-strong); color: var(--color-on-dark);
    box-shadow: var(--elevation-inset-accent);
  }
  .nav .mobile-nav-submenu-count {
    margin-left: auto; padding: 1px 6px; border-radius: var(--radius-pill);
    background: var(--color-on-dark-wash-strong); color: var(--color-on-dark);
    font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold);
  }

  /* Tables: scroll inside their wrapper, never stretch the page */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  table.tbl { min-width: 560px; }
}

/* Persistent workspace navigation: the chrome remains interactive while the
   content outlet gets a subtle progress state. Reduced-motion users receive
   the same feedback without a transition. */
html.workspace-navigating #workspace-outlet {
  opacity: .58;
  pointer-events: none;
  transition: opacity 80ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  html.workspace-navigating #workspace-outlet { transition: none; }
  .nav, .mobile-nav-backdrop { transition: none !important; }
}

@media (max-width: 600px) {
  .hdr { padding: 12px 16px; }

  /* KPI cards wrap two-up */
  .kpi-row { flex-wrap: wrap; }
  .kpi { flex: 1 1 40%; min-width: 0; }

  /* Touch targets; 16px input font prevents iOS focus-zoom */
  input[type=text], input[type=search], select, textarea { min-height: 40px; font-size: 16px; }
  button, .btn { min-height: 40px; }

  /* Modals / overlays never wider than the viewport */
  .modal, [role=dialog] { max-width: 100vw; margin: 8px; }
  .management-workspace :where(button, .btn, select, textarea),
  .management-workspace input:not([type="checkbox"]):not([type="hidden"]) { min-height: var(--control-height-md); }
}

/* ── Gedeeld documentpaneel (actieve viewport rechts van het submenu) ── */
body.doc-panel-open { overflow: hidden; }
#shared-doc-panel { position: fixed; top:var(--doc-panel-top,0); left:var(--doc-panel-left,0); right:0; bottom:0; margin:0; max-width:none; padding:0; background:var(--color-surface); z-index:var(--z-doc-panel); display:none; }
#shared-doc-panel.open { display: flex; }
#shared-doc-panel .sdp-dialog { width:100%; height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:var(--color-surface); border:0; border-left:1px solid var(--color-line-strong); border-radius:0; box-shadow:var(--elevation-panel); }
#shared-doc-panel .sdp-focus-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#shared-doc-panel .sdp-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--navy); color: var(--color-on-dark); flex: 0 0 auto; }
#shared-doc-panel .sdp-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#shared-doc-panel .sdp-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#shared-doc-panel .sdp-meta { font-size: 11px; opacity: .75; }
#shared-doc-panel .sdp-btn { background: none; border: none; color: var(--color-on-dark); font-size: 14px; cursor: pointer; padding: 4px 8px; flex: 0 0 auto; }
#shared-doc-panel .sdp-btn:hover { opacity: .8; }
#shared-doc-panel .sdp-body { flex: 1; overflow: auto; min-height: 0; }
#shared-doc-panel .sdp-body iframe { width: 100%; height: 100%; border: none; display: block; }
#shared-doc-panel .sdp-pre { padding: 14px; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 0; }
#shared-doc-panel .sdp-msg { padding: 20px; color: var(--color-muted); font-size: 13px; }
@media (max-width: 600px) {
  #shared-doc-panel { --doc-panel-top:0px!important; --doc-panel-left:0px!important; }
  #shared-doc-panel .sdp-dialog { border:0; }
}

/* ── Global search palette ── */
.search-backdrop { position: fixed; inset: 0; background: var(--color-backdrop); z-index: var(--z-palette); display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; }
.search-box { background: var(--color-surface); width: min(600px, 90vw); border-radius: var(--radius-sm); box-shadow: var(--elevation-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 60vh; }
.search-input-wrap { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--color-neutral-200); gap: 10px; }
.search-input-wrap span { font-size: 18px; }
#palette-input { flex: 1; font-size: 16px; border: none; outline: none; background: transparent; }
.search-results { overflow-y: auto; flex: 1; }
.search-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted-soft); padding: 10px 16px 4px; }
.search-result-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 2px; padding: 9px 16px; cursor: pointer; font-size: 13px; color: inherit; text-decoration: none; }
.search-result-item:hover, .search-result-item.selected { background: var(--color-info-tint); }
.search-result-item .sri-icon { grid-row: 1 / span 2; font-size: 16px; width: 20px; text-align: center; }
.search-result-item .sri-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.search-result-item .sri-sub { min-width: 0; color: var(--color-muted); font-size: 11px; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.search-empty { padding: 24px; text-align: center; color: var(--color-muted-soft); font-size: 13px; }

/* Contextual help: one discoverable explanation layer for every workspace. */
.context-help-button { flex-shrink:0; margin-left:8px; display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--color-on-dark-line-strong); padding:5px 9px; }
.context-help-button:hover, .context-help-button[aria-expanded="true"] { background:var(--color-on-dark-wash); }
.feedback-button { flex-shrink:0; margin-left:6px; background:transparent; border:1px solid var(--color-on-dark-line-strong); color:var(--color-on-dark); padding:5px 9px; border-radius:var(--radius-sm); cursor:pointer; }
.feedback-button:hover { background:var(--color-on-dark-wash); }
.feedback-dialog-backdrop { position:fixed; inset:0; z-index:var(--z-modal); background:var(--color-backdrop-strong); display:flex; align-items:center; justify-content:center; padding:var(--space-4); }
.feedback-dialog { width:min(600px,100%); max-height:90vh; overflow:auto; background:var(--card); border-radius:var(--radius-lg); border-top:4px solid var(--navy); box-shadow:var(--elevation-md); padding:var(--space-6); }
.feedback-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.feedback-dialog-head h2 { margin:0; color:var(--navy); font-size:var(--font-size-lg); }
.feedback-dialog-close { border:0; background:transparent; cursor:pointer; font-size:18px; }
.feedback-dialog label { display:grid; gap:5px; margin-top:var(--space-3); font-size:var(--font-size-sm); font-weight:600; }
.feedback-dialog input,.feedback-dialog select,.feedback-dialog textarea { width:100%; padding:8px; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; }
.feedback-dialog .feedback-checkbox { display:flex; grid-template-columns:auto 1fr; align-items:center; font-weight:400; }
.feedback-dialog .feedback-checkbox input { width:auto; }
.feedback-privacy { color:var(--muted); font-size:var(--font-size-xs); }
.feedback-dialog-footer { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-4); }
.feedback-dialog-status { flex:1; color:var(--muted); font-size:var(--font-size-xs); overflow-wrap:anywhere; }
.context-help-intro { margin:0 0 14px; padding:12px 14px; border:1px solid var(--color-line); border-left:4px solid var(--orange); border-radius:var(--radius-md); background:var(--color-surface-alt); color:var(--color-neutral-600); font-size:13px; line-height:1.5; }
.context-help-intro strong { color:var(--navy); }
.context-help-block-button { display:inline-grid; place-items:center; width:24px; min-width:24px; height:24px; min-height:24px; margin-left:8px; padding:0; border:1px solid var(--color-line-strong); border-radius:50%; background:var(--color-surface); color:var(--color-blue); font-size:13px; font-weight:800; line-height:1; vertical-align:middle; cursor:pointer; }
.context-help-block-button:hover,.context-help-block-button:focus-visible { border-color:var(--color-blue); background:var(--color-info-tint); outline:2px solid transparent; box-shadow:0 0 0 3px var(--color-accent-ring); }
.form > .context-help-block-button,.form-grid > .context-help-block-button,form.grid > .context-help-block-button { grid-column:1 / -1; justify-self:start; margin:0 0 var(--space-2); }
.kpi-grid > .context-help-block-button { grid-column:1 / -1; justify-self:start; margin:0 0 var(--space-2); }
.dossier-head > .context-help-block-button { flex:0 0 auto; align-self:flex-start; margin-left:0; }
.context-help-block-backdrop { position:fixed; inset:0; z-index:var(--z-help); display:grid; place-items:center; padding:var(--space-4); background:var(--color-backdrop); }
.context-help-block-dialog { width:min(520px,100%); max-height:min(560px,calc(100vh - 32px)); overflow:auto; margin:0; padding:0; border:1px solid var(--color-line-strong); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--elevation-lg); }
.context-help-block-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); padding:16px 18px; background:var(--navy); color:var(--color-on-dark); }
.context-help-block-dialog-head h2 { margin:0; font-size:18px; line-height:1.35; }
.context-help-block-close { flex:0 0 auto; min-width:32px; min-height:32px; padding:3px 8px; border:0; background:transparent; color:var(--color-on-dark); font-size:20px; cursor:pointer; }
.context-help-block-close:hover,.context-help-block-close:focus-visible { background:var(--color-on-dark-wash); outline:2px solid var(--color-on-dark); }
.context-help-block-dialog > p { margin:0; padding:20px; color:var(--color-neutral-600); font-size:14px; line-height:1.6; }
.context-help-annotated:focus-visible { outline:3px solid var(--color-accent-ring); outline-offset:2px; }
.context-help-highlight { animation:context-help-pulse 1.4s ease-out; }
@keyframes context-help-pulse { 0%,45% { box-shadow:0 0 0 4px var(--color-accent-ring); } 100% { box-shadow:none; } }
.context-help-backdrop { position:fixed; inset:0; z-index:var(--z-help); background:var(--color-backdrop); display:flex; justify-content:flex-end; }
.context-help-panel { width:min(520px,100vw); height:100%; background:var(--color-surface); box-shadow:var(--elevation-panel); display:flex; flex-direction:column; }
.context-help-head { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; background:var(--navy); color:var(--color-on-dark); }
.context-help-head-copy { flex:1; min-width:0; }
.context-help-head h2 { margin:0; font-size:18px; }
.context-help-head p { margin:5px 0 0; color:var(--color-on-dark-muted); font-size:12px; line-height:1.4; }
.context-help-head .context-help-schema { display:inline-block; margin-top:9px; padding:3px 7px; border:1px solid var(--color-on-dark-line); border-radius:999px; color:var(--color-on-dark); font-size:11px; }
.context-help-head .context-help-schema[hidden] { display:none; }
.context-help-close { background:transparent; color:var(--color-on-dark); font-size:20px; padding:2px 7px; }
.context-help-close:hover { background:var(--color-on-dark-wash); }
.context-help-visibility { display:flex; align-items:flex-start; gap:10px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--color-surface-alt); cursor:pointer; }
.context-help-visibility input { width:auto; flex:0 0 auto; margin-top:2px; }
.context-help-visibility span { display:grid; gap:2px; }
.context-help-visibility strong { color:var(--navy); font-size:13px; }
.context-help-visibility small { color:var(--muted); font-size:11px; line-height:1.35; }
html.context-help-inline-hidden .context-help-intro,
html.context-help-inline-hidden .context-help-block-button { display:none !important; }
.context-help-tabs { display:flex; gap:4px; padding:10px 20px 0; border-bottom:1px solid var(--line); background:var(--color-surface); }
.context-help-tab { padding:9px 12px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--muted); }
.context-help-tab.active { border-bottom-color:var(--orange); color:var(--navy); }
.context-help-body { flex:1; min-height:0; overflow:auto; padding:18px 20px 28px; }
.context-help-tabpanel { display:none; }
.context-help-tabpanel.active { display:block; }
.context-help-manual-loading { color:var(--muted); padding:20px 0; }
.context-help-screen { margin:0 0 18px; padding:14px; border-radius:var(--radius-md); background:var(--color-surface-alt); border:1px solid var(--line); font-size:13px; line-height:1.5; }
.context-help-screen strong { display:block; margin-bottom:4px; color:var(--navy); }
.context-help-options-title { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.context-help-block-list { margin-bottom:20px; }
.context-help-list { display:grid; gap:7px; }
.context-help-item { width:100%; text-align:left; display:block; padding:10px 12px; background:var(--color-surface); color:var(--txt); border:1px solid var(--line); }
.context-help-item:hover { background:var(--color-surface-alt); border-color:var(--color-line-hover); }
.context-help-item-name { display:block; color:var(--navy); font-weight:700; margin-bottom:3px; }
.context-help-item-desc { display:block; color:var(--color-neutral-600); font-size:12px; line-height:1.4; font-weight:400; }
.context-help-empty { color:var(--muted); font-size:13px; }
.help-manual-page { margin:0; background:var(--color-surface-alt); }
.help-manual-page[data-help-pending] { visibility:hidden; }
.help-manual { width:min(920px,100%); margin:0 auto; padding:28px 24px 48px; color:var(--txt); }
.help-manual-intro { margin-bottom:18px; }
.help-manual-intro h1 { margin:3px 0 8px; color:var(--navy); font-size:28px; }
.help-manual-intro p { max-width:760px; line-height:1.6; color:var(--color-neutral-600); }
.help-manual-kicker { margin:0; color:var(--orange) !important; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.help-manual-toc { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0; padding:14px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--color-surface); }
.help-manual-toc strong { width:100%; color:var(--navy); }
.help-manual-toc a { padding:5px 9px; border-radius:999px; background:var(--color-surface-alt); color:var(--navy); text-decoration:none; font-size:12px; }
.help-manual-chapter { scroll-margin-top:16px; margin:14px 0; padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--color-surface); }
.help-manual-chapter h2 { display:flex; align-items:center; gap:10px; margin:0 0 12px; color:var(--navy); font-size:19px; }
.help-manual-chapter h2 span { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--orange); color:white; font-size:12px; }
.help-manual-chapter h3 { margin:16px 0 5px; color:var(--navy); font-size:14px; }
.help-manual-chapter p { margin:5px 0; color:var(--color-neutral-600); font-size:13px; line-height:1.58; }
.help-manual-note { margin-top:14px; padding:11px 13px; border-left:4px solid var(--orange); background:var(--color-surface-alt); color:var(--color-neutral-600); font-size:13px; line-height:1.5; }
.help-manual-full-link { margin:16px 0 0; text-align:right; font-size:12px; }
.context-help-panel .help-manual { width:auto; margin:0; padding:0; }
.context-help-panel .help-manual-intro h1 { font-size:21px; }
.context-help-panel .help-manual-toc { margin-top:12px; }
.context-help-panel .help-manual-chapter { padding:15px; }

@media (max-width: 600px) {
  .header-search span { display:none; }
  .header-search { padding:6px 9px; }
  .context-help-button { padding:6px 9px; }
  .context-help-body { padding:14px; }
  .help-manual { padding:20px 14px 36px; }
}

/* Guarded action preview modal (item 49) */
.action-modal-backdrop { position:fixed; inset:0; background:var(--color-backdrop-strong); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:var(--space-4); }
.action-modal { background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--elevation-md); width:min(640px,100%); max-height:90vh; overflow:auto; padding:var(--space-6); border-top:4px solid var(--navy); }
.action-modal h2 { margin:0 0 var(--space-2); font-size:17px; color:var(--navy); }
.action-modal h3 { margin:var(--space-4) 0 var(--space-2); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.action-modal .action-description { color:var(--muted); margin:0 0 var(--space-3); font-size:13px; }
.action-kind { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--radius-sm); background:var(--bg); color:var(--navy); }
.action-kind[data-kind="destructive"] { background:var(--color-danger-soft); color:var(--err); }
.action-table-wrap { max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.action-table td { padding:6px 10px; font-size:13px; border-bottom:1px solid var(--line); }
.action-table .action-meta { color:var(--muted); font-size:11px; }
.action-deps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; font-size:13px; }
.action-deps li { display:flex; justify-content:space-between; gap:8px; border-bottom:1px dotted var(--line); padding:3px 0; }
.action-warnings { margin:var(--space-3) 0 0; padding-left:18px; color:var(--warn); font-size:13px; }
.action-cost, .action-more, .action-empty { font-size:13px; color:var(--muted); margin:var(--space-2) 0 0; }
.action-error { color:var(--err); font-size:13px; min-height:0; margin-top:var(--space-3); }
.action-error:empty { display:none; }
.action-confirm { margin-top:var(--space-4); display:flex; flex-direction:column; gap:6px; font-size:13px; }
.action-confirm label { font-weight:600; }
.action-confirm-row { display:flex; gap:8px; align-items:stretch; }
.action-confirm input { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); flex:1 1 auto; min-width:0; }
.action-confirm-row button { flex:0 0 auto; }
.action-confirm-hint { margin:0; color:var(--err); min-height:16px; }
.action-confirm-hint:empty { display:none; }
.action-confirm-hint.action-confirm-hint-ok { color:var(--ok); }
.action-buttons { display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-4); }
.action-buttons button[disabled] { opacity:.5; cursor:not-allowed; }

/* ── Interfaceversie: "Vernieuwd" shell refinements (UI-PLAN.md Fase 2 slice) ──
   Gated entirely behind html[data-ui-layout="refreshed"] (see
   platform.js applyUiLayout()), so "Origineel" is simply the absence of
   this block -- nothing above this point changes for it. Additive only:
   layers depth/motion/focus refinement on top of the existing header and
   nav rules rather than replacing them, so a rollback to Origineel (or a
   browser that never applies this file at all) is pixel-identical to
   today. Built entirely from existing tokens (Fase 1 delta audit: no new
   colour, radius, shadow or motion values were needed for this slice). */
html[data-ui-layout="refreshed"] .hdr {
  box-shadow: var(--elevation-sm);
}
html[data-ui-layout="refreshed"] .nav a {
  border-radius: var(--radius-md);
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
html[data-ui-layout="refreshed"] .nav a:hover {
  background: var(--color-on-dark-wash-strong);
}
html[data-ui-layout="refreshed"] .nav a.active {
  /* Status/active-state is already colour (background) in Origineel; this
     adds a shape cue (inset accent bar) so the active workspace is never
     communicated by colour alone, per UI-PLAN.md Sec. 10. */
  box-shadow: var(--elevation-inset-accent);
}
html[data-ui-layout="refreshed"] .nav a:focus-visible,
html[data-ui-layout="refreshed"] .header-search:focus-visible {
  outline: 2px solid var(--color-on-dark);
  outline-offset: 2px;
}
html[data-ui-layout="refreshed"] .header-search {
  border-radius: var(--radius-md);
  transition: background var(--motion-fast) var(--motion-ease);
}

/* ── Refreshed: global rail (UI-PLAN.md Sec. 4, Fase 2) ─────────────────
   #nav becomes a fixed-position vertical icon rail (~64px), matching the
   Pipedrive-style brief: one icon per workspace, a coloured/shaped cue for
   the active one, an expand-on-hover/focus state that reveals real text
   labels (not tooltips), and visible focus states for keyboard use.
   body gets matching left padding so page content (including .hdr, which
   stays a normal sticky-top bar) never sits under the rail. This holds
   regardless of a page's own inner layout, since it reserves space at the
   body level rather than assuming any particular content wrapper. */
html[data-ui-layout="refreshed"] body {
  padding-left: 64px;
}
/* Embedded workspace documents (crm.html?embed=1, analytics?embed=1, ...)
   hide their own .hdr and therefore the rail inside it; the host page
   already reserves the rail. Without this the frame kept a blank 64px
   gutter on the left, so its content sat off-centre and the right-hand
   cards ran out of room (qqy33 Commercial Performance, 2026-10-23). */
html[data-ui-layout="refreshed"]:is(.embedded,.analytics-embedded,.crm-embedded,.content-embedded,.flow-embedded,.survey-embedded,.time-embedded) body {
  padding-left: 0;
}
html[data-ui-layout="refreshed"] .nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-side-panel);
  width: 64px;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-navy-dark);
  border-right: 1px solid var(--color-on-dark-line);
  padding: var(--space-4) 0;
}
/* _rail_hover_shows_one_label_not_the_whole_bar_v1 (2026-08-31, Richard:
   "als je nu over het linkermenu hoovert, klapt het helemaal uit... ik
   wil dat niet de hele balk uitschuift, maar dat alleen de naam van het
   menu item eruit springt"): the rail used to widen from 64px to 200px on
   :hover/:focus-within of the WHOLE .nav, revealing every item's label at
   once. Rail width is now fixed at 64px always; each link's own label
   floats out as a small tooltip-like chip next to just that icon instead
   (see .nav-label rules below), so hovering one item no longer moves or
   reveals anything about its neighbours. */
html[data-ui-layout="refreshed"] .nav .nav-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* The rail-* sprite symbols (platform.js) are line icons with no fill/
     stroke of their own -- without this they render as solid black
     shapes (barely visible on navy) instead of following the link's own
     text colour through hover/active states. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-ui-layout="refreshed"] .nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 48px;
  height: 48px;
  margin: 0 8px;
  padding: 0 14px;
  overflow: hidden;
}
/* Labels stay in the accessibility tree even while visually collapsed
   (clipped off-screen, not display:none) -- belt-and-braces alongside the
   aria-label platform.js already sets on every link, per UI-PLAN.md Sec.
   4 ("toegankelijke labels voor screenreaders... tooltips zijn geen
   vervanging"). The visible, sighted-mouse-user reveal on hover/focus is
   #nav-tooltip below (platform.js) instead of un-clipping this label in
   place: .nav has overflow-y:auto for its own vertical scrolling, and any
   overflow other than visible on an ancestor clips absolutely-positioned
   descendants too, so a label revealed here would still be cut off at the
   rail's 64px edge. #nav-tooltip is appended to <body>, outside the
   rail's clipped box, and JS positions it from the hovered link's live
   bounding rect -- same escape-the-clip approach platform.js already uses
   for #hdr-account-card. */
html[data-ui-layout="refreshed"] .nav .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#nav-tooltip {
  position: fixed;
  transform: translateY(-50%);
  z-index: var(--z-popover);
  background: var(--color-navy-dark);
  color: var(--color-on-dark);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  pointer-events: none;
}
#nav-tooltip[hidden] {
  display: none;
}
/* "profiel en relevante beheeracties onderaan" (UI-PLAN.md Sec. 4): the
   account control (username, password change, sign out -- built by
   platform.js's _installAccountControl) moves from the header's top-right
   into the bottom of the rail. Its dropdown card still positions itself
   from the button's live bounding rect, so no JS change was needed beyond
   giving the wrapper a class to hang this override on. */
html[data-ui-layout="refreshed"] .hdr-account {
  position: fixed;
  left: 0;
  bottom: var(--space-3);
  width: 64px;
  margin-left: 0;
  display: flex;
  justify-content: center;
  z-index: var(--z-side-panel);
}
html[data-ui-layout="refreshed"] .hdr-actions {
  display: flex;
}

/* Rail collapses into the shared labelled hamburger menu below the existing
   breakpoint. Touch/mobile navigation never relies on hover. */
@media (max-width: 900px) {
  html[data-ui-layout="refreshed"] body {
    padding-left: 0;
  }
  html[data-ui-layout="refreshed"] .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: min(82vw, 360px);
    height: 100dvh;
    flex-direction: column;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--color-on-dark-line);
    padding: max(72px, calc(env(safe-area-inset-top) + 60px)) 16px
      max(20px, env(safe-area-inset-bottom));
  }
  html[data-ui-layout="refreshed"] .nav a {
    width: 100%;
    height: 44px;
    margin: 0;
  }
  html[data-ui-layout="refreshed"] .nav .mobile-nav-submenu-item {
    width: 100%; height: auto; min-height: 40px; margin: 0; padding: 8px 10px;
    border-radius: var(--radius-sm); border-bottom: 0;
  }
  html[data-ui-layout="refreshed"] .nav .mobile-nav-submenu-item.active {
    background: var(--color-on-dark-wash-strong); color: var(--color-on-dark);
  }
  html[data-ui-layout="refreshed"] .nav .nav-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    font-size: var(--font-size-xs);
  }
  html[data-ui-layout="refreshed"] .hdr-account {
    position: static;
    width: auto;
    margin-left: var(--space-2);
    /* Reset the desktop rail stacking level. Otherwise this flex item keeps
       z-index: var(--z-side-panel) and can paint over the equally layered
       open mobile drawer because it occurs later in the header. */
    z-index: auto;
  }
}
/* Shared full-viewport opportunity record. The host lives in the outermost
   workspace document, so embedded CRM/Analytics frames never centre a dialog
   against their (potentially very tall) document instead of the visible UI. */
.opportunity-workspace-host{position:fixed;z-index:120;inset:var(--opportunity-workspace-top,0) 0 0;background:var(--color-surface);overflow:hidden}
.opportunity-workspace-host[hidden]{display:none!important}
.opportunity-workspace-frame{display:block;width:100%;height:100%;border:0;background:var(--color-surface-alt)}
html.opportunity-workspace-open,html.opportunity-workspace-open body{overflow:hidden!important}

/* ── CRM activity, task and call workspace (crm_activity_workspace.js) ────
   _crm_activity_workspace_v1 (2026-10-25). One dialog surface in the top-level
   document that covers the complete visible content area to the right of the
   host navigation (--activity-workspace-left) and below a sticky header
   (--activity-workspace-top); both are measured by the controller, see
   docs/crm_activity_workspace.md. Sticky header + sticky action footer, one
   internal scroller. At <= 900px the surface is the full viewport. */
.activity-workspace { position: fixed; z-index: var(--z-modal); top: var(--activity-workspace-top, 0); left: var(--activity-workspace-left, 0); right: 0; bottom: 0; overscroll-behavior: contain; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--color-surface); color: var(--color-ink); border-left: 1px solid var(--color-line); box-shadow: var(--elevation-panel); overflow: hidden; }
.activity-workspace[hidden] { display: none !important; }
.activity-workspace-head { grid-row: 1; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.activity-workspace-title-wrap { flex: 1 1 auto; min-width: 0; }
.activity-workspace-title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-navy); overflow-wrap: anywhere; outline: none; }
.activity-workspace-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.activity-workspace-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-muted); }
.activity-workspace-badge { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .02em; }
.activity-workspace-sep { color: var(--color-muted-soft); }
.activity-workspace-muted { color: var(--color-muted); }
.activity-workspace-close { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-ink-soft); font-size: var(--font-size-xl); line-height: 1; }
.activity-workspace-close:hover { background: var(--color-surface-sunken) !important; }
.activity-workspace-banner { grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-size: var(--font-size-sm); border-bottom: 1px solid var(--color-line); }
.activity-workspace-banner[hidden] { display: none; }
.activity-workspace-banner-warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.activity-workspace-banner-danger { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.activity-workspace-banner-actions { display: flex; gap: var(--space-2); }
.activity-workspace-body { grid-row: 3; overflow: auto; overscroll-behavior: contain; padding: var(--space-5) var(--space-6) var(--space-8); outline: none; -webkit-overflow-scrolling: touch; }
.activity-workspace-form, .activity-workspace-detail { max-width: 980px; }
.activity-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.activity-workspace-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.activity-workspace-field[hidden] { display: none; }
.activity-workspace-field-wide { grid-column: 1 / -1; }
.activity-workspace-field > label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; }
.activity-workspace-required { color: var(--color-orange); }
.activity-workspace-field input:not([type=checkbox]), .activity-workspace-field select, .activity-workspace-field textarea { width: 100%; min-height: 44px; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font: inherit; background: var(--color-surface); color: var(--color-ink); }
.activity-workspace-field textarea { min-height: 120px; resize: vertical; }
.activity-workspace-field [aria-invalid="true"] { border-color: var(--color-danger); }
.activity-workspace-hint { color: var(--color-muted); font-size: var(--font-size-xs); }
.activity-workspace-field-error { color: var(--color-danger); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.activity-workspace-field-error[hidden] { display: none; }
.activity-workspace-readonly { min-height: 44px; display: flex; align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.activity-workspace-switch label { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.activity-workspace-switch input { width: 20px; height: 20px; margin: 0; }
.activity-workspace-followup, .activity-workspace-calldetails { margin: 0; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.activity-workspace-followup[hidden] { display: none; }
.activity-workspace-followup legend, .activity-workspace-calldetails legend { padding: 0 var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-navy); }
.activity-workspace-reminder-at { margin-top: var(--space-2); }
.activity-workspace-reminder-at[hidden] { display: none; }
.activity-workspace-documents, .activity-workspace-more { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.activity-workspace-documents summary, .activity-workspace-more summary, .activity-workspace-system summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-navy); }
.activity-workspace-documents > *:not(summary) { margin-top: var(--space-3); }
.activity-workspace-more > .activity-workspace-grid { margin-top: var(--space-3); }
.activity-workspace-doc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.activity-workspace-doc-chips:empty { display: none; }
.activity-workspace-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius: var(--radius-xl); background: var(--color-surface-tint); color: var(--color-navy); font-size: var(--font-size-sm); }
.activity-workspace-chip button { width: 28px; height: 28px; padding: 0; border-radius: var(--radius-xl); background: transparent; color: var(--color-navy); font-size: var(--font-size-md); }
.activity-workspace-chip button:hover { background: var(--color-blue-soft) !important; }
.activity-workspace-doc-search { width: 100%; min-height: 40px; }
.activity-workspace-doc-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); }
.activity-workspace-doc-list:empty { display: none; }
.activity-workspace-doc-list li label { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border-bottom: 1px solid var(--color-line-soft); font-size: var(--font-size-sm); text-transform: none; letter-spacing: 0; color: var(--color-ink); cursor: pointer; }
.activity-workspace-doc-list li:last-child label { border-bottom: 0; }
.activity-workspace-link { font-size: var(--font-size-sm); color: var(--color-blue); }
.activity-workspace-foot { grid-row: 4; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--color-line); background: var(--color-surface); box-shadow: var(--elevation-top); }
.activity-workspace-foot .btn, .activity-workspace-foot button { min-height: 44px; }
.activity-workspace-foot-spacer { flex: 1 1 auto; }
.activity-workspace-danger { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.activity-workspace-danger:hover { background: var(--color-danger-line) !important; }
.activity-workspace-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.activity-workspace-loading, .activity-workspace-error { padding: var(--space-6); color: var(--color-muted); text-align: center; }
.activity-workspace-error { color: var(--color-danger-ink); background: var(--color-danger-tint); border-radius: var(--radius-md); }
/* detail mode */
.activity-workspace-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.activity-workspace-summary .pill { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-xl); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); background: var(--color-surface-sunken); color: var(--color-ink-soft); }
.activity-workspace-summary .pill-open { background: var(--color-info-soft); color: var(--color-info-ink); }
.activity-workspace-summary .pill-done { background: var(--color-success-soft); color: var(--color-success-ink); }
.activity-workspace-summary .pill-cancelled { background: var(--color-surface-sunken); color: var(--color-muted); }
.activity-workspace-summary .stale-flag { color: var(--color-orange-dark); font-weight: var(--font-weight-bold); }
.activity-workspace-reminder-flag { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-xl); background: var(--color-warning-soft); color: var(--color-warning-ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.activity-workspace-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.activity-workspace-actions .btn { min-height: 40px; }
.activity-workspace-section { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-line-soft); }
.activity-workspace-section h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.activity-workspace-section dl { margin: 0; display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.activity-workspace-row { display: contents; }
.activity-workspace-section dt { color: var(--color-muted); font-size: var(--font-size-sm); }
.activity-workspace-section dd { margin: 0; font-size: var(--font-size-base); overflow-wrap: anywhere; }
.activity-workspace-notes { white-space: pre-wrap; margin: 0; }
.activity-workspace-doc-links, .activity-workspace-related { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.activity-workspace-link-button { background: none; border: 0; padding: 0; color: var(--color-blue); font: inherit; text-decoration: underline; cursor: pointer; min-height: 32px; }
.activity-workspace-link-button:hover { background: none !important; color: var(--color-navy); }
.activity-workspace-system { border-bottom: 0; }
.activity-workspace-system dl { margin-top: var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
  .activity-workspace { animation: activity-workspace-in var(--motion-base) var(--motion-ease); }
  @keyframes activity-workspace-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 900px) {
  .activity-workspace, .activity-workspace.activity-workspace-mobile { top: 0; left: 0; border-left: 0; box-shadow: none; height: 100dvh; margin: 0; max-width: none; }
  .activity-workspace-head, .activity-workspace-banner, .activity-workspace-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .activity-workspace-body { padding: var(--space-4) var(--space-4) var(--space-8); }
  .activity-workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .activity-workspace-section dl { grid-template-columns: minmax(0, 1fr); }
  .activity-workspace-foot { flex-wrap: wrap; }
  .activity-workspace-foot .btn, .activity-workspace-foot button { flex: 1 1 auto; }
}

/* Phase 4 / group B: shared medium-workspace contract. These templates keep
   their domain-specific canvas and forms, while geometry, controls and
   interaction states come from one shared layer. */
body.standard-workspace {
  min-width: 0;
  background: var(--color-surface-alt);
  color: var(--color-ink);
}
body.standard-workspace :where(.hdr, header.top) {
  min-height: 64px;
}
body.standard-workspace :where(button:not(.link), .btn:not(.link), input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
  min-height: var(--control-height-md);
}
body.standard-workspace :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--font-size-base);
}
body.standard-workspace :where(label) {
  display: grid;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}
body.standard-workspace :where(button:not(.link), .btn:not(.link)) {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
body.standard-workspace :where(button, .btn).primary {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-on-dark);
}
body.standard-workspace :where(button, .btn).btn-primary,
body.standard-workspace :where(button, .btn).btn-orange {
  border-color: var(--color-orange);
  background: var(--color-orange);
  color: var(--color-on-dark);
}
body.standard-workspace :where(button, .btn).btn-secondary {
  border-color: var(--color-line);
  background: var(--color-surface-sunken);
  color: var(--color-ink);
}
body.standard-workspace :where(button, .btn).btn-ghost {
  border-color: var(--color-line);
  background: transparent;
  color: var(--color-ink);
}
body.standard-workspace :where(button, .btn).danger {
  border-color: var(--color-danger);
  background: var(--color-surface);
  color: var(--color-danger);
}
body.standard-workspace :where(button, .btn).btn-danger,
body.standard-workspace :where(button, .btn).btn-red {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-on-dark);
}
body.standard-workspace :where(button, .btn).warn {
  border-color: var(--color-warning);
  background: var(--color-surface);
  color: var(--color-warning-ink);
}
body.standard-workspace :where(button:not(.link), .btn:not(.link)):not(:disabled):hover {
  background: var(--color-surface-sunken);
  color: var(--color-ink);
  border-color: var(--color-navy);
  box-shadow: var(--elevation-sm);
}
body.standard-workspace :where(button, .btn).primary:not(:disabled):hover {
  background: var(--color-navy-dark);
  color: var(--color-on-dark);
}
body.standard-workspace :where(button, .btn).btn-primary:not(:disabled):hover,
body.standard-workspace :where(button, .btn).btn-orange:not(:disabled):hover {
  background: var(--color-orange-dark);
  color: var(--color-on-dark);
}
body.standard-workspace :where(button, .btn).btn-danger:not(:disabled):hover,
body.standard-workspace :where(button, .btn).btn-red:not(:disabled):hover {
  background: var(--color-danger-ink);
  color: var(--color-on-dark);
}
body.standard-workspace :where(button:not(.link), .btn:not(.link)):not(:disabled):active {
  box-shadow: var(--elevation-inset-accent);
  transform: translateY(1px);
}
/* The dossier opportunity hit target covers the card for mouse/touch input.
   It must remain visually transparent; shared button paint would otherwise
   hide the opportunity content behind a white full-card overlay. */
body.standard-workspace.standard-core-workspace.standard-dossier-workspace .opp-card-hit,
body.standard-workspace.standard-core-workspace.standard-dossier-workspace .opp-card-hit:hover,
body.standard-workspace.standard-core-workspace.standard-dossier-workspace .opp-card-hit:active {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body.standard-workspace :where(button:not(.link), .btn:not(.link)):focus-visible,
body.standard-workspace :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
body.standard-workspace :where(.card, .panel) {
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
body.standard-workspace :where(.tabs, .toolbar, .actions, .bar) {
  gap: var(--space-2);
}
body.standard-workspace :where(table) {
  width: 100%;
}
body.standard-workspace :where(th) {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.standard-workspace :where(thead th) {
  color: var(--color-on-dark);
}
body.standard-workspace.standard-crm-workspace :where(.tbl thead th) {
  background: var(--navy);
  color: var(--color-on-dark);
}
body.standard-workspace.standard-delivery-workspace :where(.pf-table thead th) {
  background: var(--color-surface);
  color: var(--color-ink);
}
body.standard-workspace.standard-delivery-workspace :where(.pf-table thead .pf-subhead th) {
  color: var(--color-muted);
}
html.content-focus-search .content-tabs {
  display: none;
}
.search-term-review-section {
  margin-top: var(--space-2);
}
.search-term-config-diff-output {
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
}
/* Sort triggers are controls for the header itself, not standalone buttons.
   Keep the navy header continuous instead of applying the shared white button
   surface to the dynamically installed trigger. */
body.standard-workspace :where(thead th .server-sort-trigger) {
  padding: 7px 24px 7px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
body.standard-workspace :where(thead th .server-sort-trigger):not(:disabled):hover {
  border-color: transparent;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
body.standard-workspace :where(thead th .server-sort-trigger):not(:disabled):active {
  box-shadow: none;
  transform: none;
}
/* List pagination is a compact horizontal control, not a stacked form field.
   Table help remains available from the workspace Help panel, so avoid a
   second generated question-mark row between the controls and the header. */
body.standard-workspace :where(.list-page-size) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
body.standard-workspace :where(.table-wrap > .context-help-block-button) {
  display: none;
}
/* Final specialist-workspace contract. Content, Documents and Intelligence
   keep their domain-specific structures while sharing the same viewport,
   control and responsive guarantees as the migrated primary workspaces. */
body.standard-specialist-workspace {
  min-width: 0;
  overflow-x: hidden;
}
body.standard-specialist-workspace :where(.layout, .docs-layout, .main) {
  min-width: 0;
  width: 100%;
}
body.standard-content-workspace :where(.layout-single) {
  grid-template-columns: minmax(0, 1fr);
}
body.standard-content-workspace :where(.row, .rd-actions .btn) {
  min-height: var(--control-height-md);
}
body.standard-documents-workspace :where(.tree-row) {
  min-height: var(--control-height-md);
}
body.standard-documents-workspace :where(.docs-layout) {
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
}
body.standard-documents-workspace :where(.toolbar, .ask, .head, .doc-foot) {
  min-width: 0;
}
body.standard-intelligence-workspace :where(.sidebar-item) {
  min-height: var(--control-height-md);
  display: flex;
  align-items: center;
}
body.standard-intelligence-workspace :where(.signal-card, .signal-board-card) {
  border-radius: var(--radius-md);
}
body.standard-intelligence-workspace .signal-list {
  gap: var(--space-6);
}
body.standard-intelligence-workspace .signal-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-navy);
  background: var(--color-surface);
  box-shadow: var(--elevation-card);
}
body.standard-intelligence-workspace .signal-card-head {
  min-height: var(--control-height-md);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}
body.standard-intelligence-workspace .signal-card-primary {
  padding: var(--space-4);
}
body.standard-intelligence-workspace .signal-card-text {
  max-width: none;
}
body.standard-intelligence-workspace .signal-card-key-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr) minmax(0, 1fr);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}
body.standard-intelligence-workspace .signal-card-key-fact {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--color-line);
}
body.standard-intelligence-workspace .signal-card-key-fact:last-child {
  border-right: 0;
}
body.standard-intelligence-workspace .signal-card-key-fact > strong,
body.standard-intelligence-workspace .signal-card-key-fact > span {
  display: block;
}
body.standard-intelligence-workspace .signal-card-key-fact > strong {
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
}
body.standard-intelligence-workspace .signal-card-key-fact > span {
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
body.standard-intelligence-workspace .signal-card-details {
  border-top: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}
body.standard-intelligence-workspace .signal-card-details > summary {
  min-height: var(--control-height-md);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  cursor: pointer;
  color: var(--color-navy);
  font-weight: var(--font-weight-semibold);
}
body.standard-intelligence-workspace .signal-card-details > summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--font-size-lg);
}
body.standard-intelligence-workspace .signal-card-details[open] > summary::after {
  content: "−";
}
body.standard-intelligence-workspace .signal-card-details > summary:hover {
  background: var(--color-control-hover);
}
body.standard-intelligence-workspace .signal-card-detail-body {
  padding: 0 var(--space-4) var(--space-4);
}
body.standard-intelligence-workspace .signal-card-topic,
body.standard-intelligence-workspace .signal-card-source-meta {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}
body.standard-intelligence-workspace .signal-card-actions {
  min-height: var(--control-height-md);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  align-items: center;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
body.standard-intelligence-workspace .signal-card.selected {
  border-color: var(--color-orange);
}
@media (max-width: 800px) {
  body.standard-intelligence-workspace .signal-list {
    gap: var(--space-4);
  }
  body.standard-intelligence-workspace .signal-card-head {
    align-items: flex-start;
  }
  body.standard-intelligence-workspace .signal-card-key-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  body.standard-intelligence-workspace .signal-card-key-fact {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }
  body.standard-intelligence-workspace .signal-card-key-fact:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 800px) {
  body.standard-documents-workspace :where(.docs-layout) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.redirect-fallback-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--color-canvas);
  color: var(--color-ink);
}
.redirect-fallback-page a {
  min-height: var(--control-height-md);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--control-padding-inline);
  border-radius: var(--radius-control);
  background: var(--color-navy);
  color: var(--color-on-dark);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
/* Preserve the production Home mobile-card and control geometry without
   reintroducing page-local shared-component definitions. */
body.standard-home-workspace .card-count {
  min-width: var(--control-height-compact);
  height: var(--control-height-compact);
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  color: var(--color-on-dark);
  background: var(--color-orange);
  font-size: 12px;
  font-weight: 700;
}
body.standard-home-workspace .card-heading > .inbox-link {
  align-self: flex-start;
  min-height: var(--control-height-compact);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: var(--radius-control-compact);
  color: var(--color-blue);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
body.standard-home-workspace .card-heading > .inbox-link:hover {
  background: var(--color-control-hover);
  color: var(--color-navy);
}
body.standard-home-workspace .card-heading > .card-count,
body.standard-home-workspace .card-heading > .context-help-block-button {
  align-self: flex-start;
}
body.standard-workspace.standard-home-workspace .card-heading > .context-help-block-button {
  width: var(--control-height-compact);
  min-width: var(--control-height-compact);
  height: var(--control-height-compact);
  min-height: var(--control-height-compact);
}
body.standard-home-workspace :where(.inbox-toolbar button, .inbox-item-actions button, .inbox-item-actions a.inbox-link, .inbox-form button) {
  min-width: 72px;
  min-height: var(--control-height-regular);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: 5px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 620;
  line-height: 1.35;
  cursor: pointer;
}
body.standard-home-workspace .inbox-item-actions a.inbox-link {
  text-decoration: none;
}
body.standard-service-workspace .card {
  padding: 18px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  body.standard-home-workspace :where(.priority-card, .intel-card) .card-heading {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    align-items: start;
  }
  body.standard-home-workspace :where(.priority-card, .intel-card) .card-heading > .card-heading-icon {
    grid-column: 1;
    grid-row: 1;
  }
  body.standard-home-workspace :where(.priority-card, .intel-card) .card-heading > .card-title-wrap {
    grid-column: 2 / -1;
    grid-row: 1;
  }
  body.standard-home-workspace .card-heading > :where(.inbox-link, .card-count, .context-help-block-button) {
    height: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }
  body.standard-home-workspace :where(.priority-card, .intel-card) .card-heading > .inbox-link {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  body.standard-home-workspace :where(.priority-card, .intel-card) .card-heading > .card-count {
    grid-column: 3;
    grid-row: 2;
    min-width: var(--control-height-touch);
  }
  body.standard-home-workspace :where(.priority-card, .intel-card) .card-heading > .context-help-block-button {
    grid-column: 4;
    grid-row: 2;
  }
  body.standard-workspace.standard-home-workspace .card-heading > .context-help-block-button {
    width: var(--control-height-touch);
    min-width: var(--control-height-touch);
    height: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }
  body.standard-home-workspace :where(.inbox-toolbar button, .inbox-item-actions button, .inbox-item-actions a.inbox-link, .inbox-form button) {
    min-height: var(--control-height-touch);
  }
}
body.standard-campaign-workspace .shell {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  min-height: calc(100vh - 64px);
}
body.standard-campaign-workspace .main,
body.standard-subscriptions-workspace .main,
body.standard-time-workspace .sheet,
body.standard-surveys-workspace .main.page {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-6);
}
body.standard-service-user-workspace .portal {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: var(--space-6);
}
body.standard-flow-workspace .toolbar {
  min-height: 60px;
  padding: var(--space-2) var(--space-4);
}
body.standard-flow-workspace .toolbar :where(.btn, button, select, input[type="text"]) {
  min-height: var(--control-height-md);
}
body.standard-flow-workspace .workspace {
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(280px, 320px);
}
body.standard-flow-workspace .workspace > .panel {
  border-radius: 0;
}
body.standard-time-workspace .sheet.wide {
  max-width: 1600px;
}
body.standard-time-workspace :where(.tab, .vt),
body.standard-service-user-workspace .tab,
body.standard-surveys-workspace .tabs button {
  min-height: var(--control-height-md);
}
body.standard-surveys-workspace .grid {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}
body.standard-subscriptions-workspace :where(.billing-form, .budget-fields, .invoice-tools, .feedback-editor) :where(input, select, textarea),
body.standard-time-workspace .grid-table td :where(input, select, button:not(.link)) {
  min-height: var(--control-height-md);
  font-size: var(--font-size-base);
}
body.standard-subscriptions-workspace.standard-workspace :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
  min-height: var(--control-height-md);
  font-size: var(--font-size-base);
}

/* Phase 4 / core workspaces: one layout and interaction contract for the
   platform's primary CRM, dossier, delivery, service, home, sales,
   opportunity and marketing screens. Domain canvases remain template-owned. */
body.standard-core-workspace {
  min-width: 0;
  overflow-x: hidden;
}
body.standard-core-workspace :where(.layout, .main, .wrap, .home-shell, .ow, .ow-body, .ow-main, .ow-side) {
  min-width: 0;
  max-width: 100%;
}
body.standard-workspace.standard-core-workspace:is(.standard-crm-workspace, .standard-dossier-workspace, .standard-delivery-workspace, .standard-service-workspace, .standard-home-workspace, .standard-sales-workspace, .standard-opportunity-workspace, .standard-marketing-workspace) :where(button:not(.link), .btn:not(.link), input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
  min-height: var(--control-height-md);
  font-size: var(--font-size-base);
}
/* Scan segments are visualization controls, not ordinary action buttons.
   Keep them out of the shared 40px control-height contract: applying that
   minimum makes the 20px scan tracks overlap vertically. */
body.standard-workspace.standard-core-workspace.standard-home-workspace .scan-segment {
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
}
body.standard-core-workspace :where(.crm-main, .delivery-main, .service-main, .marketing-main, #main-content) {
  width: 100%;
  max-width: none;
  padding: var(--space-6);
}
body.standard-dossier-workspace .wrap {
  width: 100%;
  max-width: 1600px;
  padding: var(--space-5) var(--space-6);
}
body.standard-home-workspace .home-shell {
  width: min(1440px, calc(100% - 48px));
}
body.standard-opportunity-workspace .ow {
  width: 100%;
}
body.standard-opportunity-workspace .ow-body {
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
}
body.standard-core-workspace :where(.crm-head, .screen-head, .head, .toolbar, .actions, .ow-head, .ow-actions, .ow-section-head) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
body.standard-core-workspace :where(.table-wrap, .table-scroll, .ow-path) {
  max-width: 100%;
  overflow-x: auto;
}
/* Account bulk editing is a compact toolbar on desktop. The general
   standard-workspace form contract makes standalone fields full width; these
   controls are peers in one action row and must not expand to the frame. */
body.standard-sales-workspace .account-bulk-update-controls > strong {
  flex: 0 0 auto;
}
body.standard-sales-workspace .account-bulk-update-controls .account-bulk-field-select {
  width: min(100%, 200px);
  min-width: 180px;
  flex: 0 1 200px;
}
body.standard-sales-workspace .account-bulk-update-controls :where(.account-bulk-value-control, .account-bulk-owner-select) {
  width: min(100%, 260px);
  min-width: 200px;
  flex: 0 1 260px;
}

@media (max-width: 900px) {
  body.standard-workspace :where(.hdr, header.top) { min-height: 56px; }
  body.standard-campaign-workspace .main,
  body.standard-subscriptions-workspace .main,
  body.standard-time-workspace .sheet,
  body.standard-surveys-workspace .main.page,
  body.standard-service-user-workspace .portal { padding: var(--space-4); }
  body.standard-campaign-workspace .shell,
  body.standard-surveys-workspace .grid { grid-template-columns: minmax(0, 1fr); }
  body.standard-flow-workspace .workspace,
  body.standard-flow-workspace .workspace.hide-library,
  body.standard-flow-workspace .workspace.hide-props { grid-template-columns: minmax(0, 1fr); }
  body.standard-flow-workspace .designer,
  body.standard-flow-workspace .designer > *,
  body.standard-flow-workspace .toolbar,
  body.standard-flow-workspace .toolbar .group,
  body.standard-flow-workspace .banner { min-width: 0; max-width: 100%; }
  body.standard-flow-workspace .designer > :first-child { overflow-x: auto; }
  body.standard-flow-workspace .workspace { width: 100%; }
  body.standard-flow-workspace .bottom { min-width: 0; max-width: 100%; }
  body.standard-flow-workspace .bottom-tabs { min-width: 0; max-width: 100%; overflow-x: auto; }
  body.standard-flow-workspace .toolbar .group { flex: 1 1 240px; flex-wrap: wrap; }
  body.standard-flow-workspace .toolbar .group.push { margin-left: 0; }
  body.standard-flow-workspace .toolbar .flow-name { min-width: 0; width: 100%; flex: 1 1 180px; }
  body.standard-flow-workspace .banner > span { min-width: 0; overflow-wrap: anywhere; }
  body.standard-workspace :where(.actions, .bar) > :where(button, .btn) { min-height: var(--control-height-md); }
  body.standard-core-workspace :where(.crm-main, .delivery-main, .service-main, .marketing-main, #main-content) {
    padding: var(--space-4);
  }
  body.standard-dossier-workspace .wrap { padding: var(--space-4); }
  body.standard-home-workspace .home-shell { width: min(100% - 28px, 1440px); }
  body.standard-opportunity-workspace .ow-body { grid-template-columns: minmax(0, 1fr); }
  body.standard-core-workspace :where(.grid, .form-grid) { min-width: 0; }
  body.standard-sales-workspace .account-bulk-update-controls > strong { width: 100%; }
  body.standard-sales-workspace .account-bulk-update-controls .account-bulk-field-select,
  body.standard-sales-workspace .account-bulk-update-controls .account-bulk-value-control,
  body.standard-sales-workspace .account-bulk-update-controls .account-bulk-owner-select {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  body.standard-workspace :where(.actions, .bar) > :where(button, .btn) { flex: 1 1 140px; }
  body.standard-workspace :where(.card) { border-radius: var(--radius-md); }
  body.standard-core-workspace :where(.crm-main, .delivery-main, .service-main, .marketing-main, #main-content),
  body.standard-dossier-workspace .wrap { padding: var(--space-3); }
  body.standard-home-workspace .home-shell { width: min(100% - 20px, 1440px); }
  body.standard-core-workspace :where(.actions, .toolbar) > :where(button:not(.link), .btn:not(.link)) { flex: 1 1 140px; }
  body.standard-opportunity-workspace .ow-head { padding: var(--space-3); }
  body.standard-opportunity-workspace .ow-body { padding: var(--space-3); }
}

/* Responsive shell contract. Navigation controls are structural chrome, not
   page actions. Keep them immune to the shared button treatment used by
   standard and management workspaces, and keep page content inside the
   viewport on phones, landscape phones and tablets. */
html body .hdr :where(.header-search, .hdr-primary-action, .hdr-secondary-button, .context-help-button, .feedback-button, #hdr-account-button) {
  min-height: 36px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-dark);
  box-shadow: none;
  transform: none;
}
/* A workspace-scoped .btn-ghost rule has deliberately higher specificity
   than the grouped chrome contract above. Keep the compact create trigger
   in the header palette as well: white glyph, transparent paint, no box. */
html body .hdr .hdr-secondary-button.btn-ghost {
  border: 0;
  background: transparent;
  color: var(--color-on-dark);
}
html body .hdr .hdr-secondary-button.btn-ghost:hover,
html body .hdr .hdr-secondary-button.btn-ghost:active,
html body .hdr .hdr-secondary-button.btn-ghost:focus-visible {
  border: 0;
  color: var(--color-on-dark);
}
html body .hdr :where(.header-search, .hdr-primary-action, .hdr-secondary-button, .context-help-button, .feedback-button, #hdr-account-button):hover,
html body .hdr :where(.header-search, .hdr-primary-action, .hdr-secondary-button, .context-help-button, .feedback-button, #hdr-account-button):active {
  background: var(--color-on-dark-wash);
  color: var(--color-on-dark);
  box-shadow: none;
  transform: none;
}
html body .hdr .language-switch select {
  min-height: 36px;
  border-color: var(--color-on-dark-line-strong);
  background: var(--color-navy);
  color: var(--color-on-dark);
}
@media (max-width: 900px) {
  html body .hdr .nav-toggle,
  html body .hdr .mobile-nav-submenu-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-on-dark);
    box-shadow: none;
    transform: none;
  }
  html body .hdr .nav-toggle {
    border: 1px solid var(--color-on-dark-line-strong);
    border-radius: var(--radius-sm);
  }
  html body .hdr .mobile-nav-submenu-toggle {
    border: 0;
    border-left: 1px solid var(--color-on-dark-line);
  }
  html body .hdr :where(.nav-toggle, .mobile-nav-submenu-toggle):hover,
  html body .hdr :where(.nav-toggle, .mobile-nav-submenu-toggle):active,
  html body .hdr :where(.nav-toggle, .mobile-nav-submenu-toggle).btn-pressed {
    background: var(--color-on-dark-wash);
    color: var(--color-on-dark);
    box-shadow: none;
    transform: none;
  }
  html body .hdr .mobile-nav-submenu-toggle span {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }
  html body .hdr .nav {
    max-width: 100vw;
  }
  html body .hdr .mobile-nav-workspace-row,
  html body .hdr .mobile-nav-workspace-link,
  html body .hdr .mobile-nav-submenu,
  html body .hdr .mobile-nav-submenu-item {
    max-width: 100%;
  }
  html body .hdr .mobile-nav-workspace-link {
    border-radius: 0;
    box-shadow: none;
  }
  html body .hdr .mobile-nav-workspace-link.active {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }
  html body :where(.table-wrap, .table-scroll, .scroll-list) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.standard-workspace :where(.toolbar, .actions, .bar, .filters),
  body.management-workspace :where(.toolbar, .actions, .filters, .management-card-actions) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  html body .hdr .nav,
  html[data-ui-layout="refreshed"] body .hdr .nav {
    width: 100vw;
    max-width: none;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  html body .hdr.nav-open .nav-toggle {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
  .hdr .header-search,
  .hdr .context-help-button,
  .hdr .feedback-button,
  .hdr .language-switch select,
  .hdr #hdr-account-button,
  .hdr .hdr-primary-action,
  .hdr .hdr-secondary-button {
    min-height: 44px;
  }
  .hdr .header-search,
  .hdr #hdr-account {
    margin-left: 0;
  }
  .hdr .language-switch { flex: 1 1 92px; min-width: 92px; }
  .hdr .language-switch select { width: 100%; min-width: 0; }
  .hdr .context-help-button,
  .hdr .feedback-button { margin-left: 0; }
  .hdr .hdr-secondary-menu { left: 0; right: auto; }
  .list-controls-leading,
  .list-controls-actions { min-width: 0; }
  .list-range { min-width: 0; flex: 1 1 120px; }
}