/* ══════════════════════════════════════════════════════════════════
   AMARAH — DESIGN SYSTEM IMPLEMENTATION
   Strict adherence to design-system/DESIGN.md
   Warm paper, navy ink, one loud green. Everything else gets out of the way.
   ══════════════════════════════════════════════════════════════════ */

@import "./design-system/styles.css";

/* Reset & Page Foundations */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--surface-app);
  background-image: var(--gradient-ambient);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-body-color);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

#app-root {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   RETRACTABLE SIDEBAR (MORPHOGLASS)
   ══════════════════════════════════════════════════════════════════ */
.sidebar {
  height: 100vh;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-glass-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-glass-strong)) saturate(150%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.5);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: width var(--dur-base) var(--ease-out);
  position: relative;
  z-index: 40;
  overflow: hidden;
  user-select: none;
}

.sidebar.expanded {
  width: var(--size-sidebar);
  min-width: var(--size-sidebar);
}

.sidebar.collapsed {
  width: var(--size-sidebar-collapsed);
  min-width: var(--size-sidebar-collapsed);
}

/* Sidebar Brand Header */
.sidebar-header {
  height: var(--size-topbar);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}

.brand-logo-img {
  width: 36px;
  height: auto;
  display: block;
  transition: width var(--dur-base) var(--ease-out);
}

.sidebar.collapsed .brand-logo-img {
  width: 26px;
}

.sidebar.collapsed .brand-info-text {
  display: none;
}

.brand-info-text {
  display: flex;
  flex-direction: column;
}

.brand-org-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-org-sub {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.btn-sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-sidebar-toggle:hover {
  background: var(--zw-ink-050);
  color: var(--text-strong);
  border-color: var(--border-default);
}

.sidebar.collapsed .btn-sidebar-toggle {
  margin: 0 auto;
}

/* Sidebar Navigation Items */
.sidebar-nav-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar.collapsed .sidebar-nav-content {
  padding: 16px 8px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-section-title {
  font-size: var(--text-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  padding: 6px 8px 4px;
  white-space: nowrap;
}

.sidebar.collapsed .nav-section-title {
  display: none;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-body-color);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-control);
  text-align: left;
  white-space: nowrap;
  position: relative;
}

.sidebar.collapsed .nav-btn {
  justify-content: center;
  padding: 0;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  color: var(--text-strong);
}

.nav-btn.active {
  background: var(--zw-navy-700);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-inverse);
  box-shadow: 0 6px 16px -10px rgba(17, 39, 73, 0.75);
  font-weight: var(--fw-semibold);
}

.nav-btn-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.nav-btn-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .nav-btn-label {
  display: none;
}

.nav-count-badge {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(17, 39, 73, 0.06);
  color: var(--text-muted);
}

.nav-btn.active .nav-count-badge {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-inverse);
}

.sidebar.collapsed .nav-count-badge {
  display: none;
}

/* Tooltips in Collapsed Sidebar */
.sidebar.collapsed .nav-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--zw-navy-700);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  z-index: 100;
}

.sidebar.collapsed .nav-btn:hover::after {
  opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar.collapsed .sidebar-footer {
  padding: 12px 6px;
  justify-content: center;
}

.sidebar.collapsed .sidebar-footer-info {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════
   TOPBAR & APPLICATION VIEWPORT
   ══════════════════════════════════════════════════════════════════ */
.main-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.topbar {
  height: var(--size-topbar);
  padding: 0 var(--gutter-page);
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--glass-fill-strong);
  backdrop-filter: blur(var(--blur-glass-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-glass-strong)) saturate(150%);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 30;
}


/* Topbar Search */
.topbar-search-box {
  width: 320px;
  position: relative;
}

.search-input-field {
  width: 100%;
  height: var(--size-control-sm);
  padding: 0 12px 0 34px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-strong);
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-fast) var(--ease-out);
}

.search-input-field:focus {
  border-color: var(--zw-navy-700);
  box-shadow: var(--shadow-focus);
}

.search-input-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Content Area */
.content-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--gutter-page);
}

.content-max-wrap {
  max-width: var(--maxw-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS & MORPHOGLASS PANELS
   ══════════════════════════════════════════════════════════════════ */
.ds-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--gutter-card);
  position: relative;
}

.ds-card.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.ds-card.navy-hero {
  background: var(--zw-navy-700);
  border-radius: var(--radius-panel);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
  padding: var(--gutter-panel);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Two-tone Headline. It is the page's h1, and the design system gives
   every h1 dark ink — on the navy hero that read as near-black on navy.
   It takes the colour of the card it sits on instead. */
.two-tone-headline {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.016em;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}

/* Deals completed fill the gauge in the brand lime — the same colour as
   the one completing action, Finalise transaction. */
.hero-gauge-fill {
  stroke: var(--action-highlight);
  transition: stroke-dashoffset 600ms var(--ease-out, ease-out);
}
@media (prefers-reduced-motion: reduce) { .hero-gauge-fill { transition: none; } }

.two-tone-line1 {
  font-weight: var(--fw-regular);
  display: block;
}

.two-tone-line2 {
  font-weight: var(--fw-light);
  opacity: 0.65;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT & RESPONSIVE GRID
   ══════════════════════════════════════════════════════════════════ */
.dashboard-grid {
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.dashboard-subgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 12px;
}

/* The dashboard: a matrix of 12 square columns. Each card is placed on it
   (grid-column / grid-row, set inline from its x, y, w, h). The cell is
   measured in app.js so rows are exactly as tall as columns are wide. */
.dash-toolbar {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 8px; margin-bottom: 10px;
}
.dash-hint { margin-right: auto; max-width: 720px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.dash-matrix {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--cell, 80px);
  gap: 12px;
  position: relative;
}
.dash-card {
  position: relative; z-index: 1;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}
/* The card's own panel fills its squares; long content scrolls inside. */
.dash-card > .ds-card, .dash-card-body > .ds-card { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; }
/* On the matrix the tiles fit the card they are in, not the screen: a
   wide card holds all four in a row. Anything taller than its squares
   scrolls inside the card rather than spilling over the one below. */
.dash-card > .stat-tiles-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-content: start;
}

/* Edit mode: the squares show, and each card has a bar to hold it by. */
.dash-sq {
  z-index: 0;
  border: 1px dashed var(--border-default);
  border-radius: 6px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
}
.dash-sq:hover { background: var(--zw-azure-100); border-color: var(--zw-azure-500); }
.dash-card.editing {
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  padding: 6px;
  outline: none;
}
.dash-card.editing.selected { border-color: var(--zw-navy-500); box-shadow: 0 0 0 3px rgba(39, 74, 125, .18); }
.dash-card.editing:focus-visible { border-color: var(--zw-navy-500); }
.dash-card.editing.lifting { opacity: .35; }
.dash-card-bar {
  display: flex; align-items: center; gap: 4px; flex: none;
  cursor: grab; touch-action: none; user-select: none;
}
.dash-card-bar:active { cursor: grabbing; }
.dash-grip { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.dash-card-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-size { font-size: 11px; color: var(--text-muted); font-feature-settings: 'tnum'; margin-right: 2px; }
.dash-ctl {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-body-color); cursor: pointer;
}
.dash-ctl svg { width: 14px; height: 14px; }
.dash-ctl:hover:not([disabled]) { border-color: var(--border-strong); color: var(--text-strong); }
.dash-ctl[disabled] { opacity: .35; cursor: default; }
/* A card being arranged is a picture of itself: nothing inside it clicks. */
.dash-card-body { flex: 1 1 auto; min-height: 0; overflow: hidden; pointer-events: none; opacity: .72;
  display: flex; flex-direction: column; }
.dash-resize {
  position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px;
  cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--zw-navy-500) 50%);
  border-radius: 0 0 var(--radius-card) 0;
}
/* Where the card will land, while it is dragged. */
.dash-ghost {
  z-index: 2;
  border: 2px dashed var(--zw-navy-500);
  border-radius: var(--radius-card);
  background: rgba(39, 74, 125, .10);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--zw-navy-700);
  pointer-events: none;
}
.dash-hidden {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; font-size: 12.5px; color: var(--text-muted);
}

/* Too narrow for the matrix: the cards stack in its reading order. */
.dash-matrix.stacked { display: flex; flex-direction: column; gap: 12px; }
.dash-matrix.stacked .dash-card { height: auto !important; }
.dash-matrix.stacked .dash-card > .ds-card { overflow: visible; }
.dash-matrix.stacked .dash-sq, .dash-matrix.stacked .dash-resize { display: none; }
.dash-matrix.stacked.editing::before {
  content: 'On a small screen the cards stack in the matrix\2019s order. Arrange them on a wider screen.';
  font-size: 12.5px; color: var(--text-muted);
}

@media (max-width: 960px) {
  .dashboard-grid,
  .dashboard-subgrid {
    /* minmax(0, …), not 1fr: a plain 1fr refuses to shrink below its
       content and pushes the column past the viewport. */
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════════
   STAT TILES ROW
   ══════════════════════════════════════════════════════════════════ */
.stat-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1360px) {
  .stat-tiles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .stat-tiles-grid {
    grid-template-columns: 1fr;
  }
}

.stat-tile-card {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-card);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.stat-tile-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.stat-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.stat-tile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.stat-tile-label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-tile-delta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 2px 7px;
  border-radius: var(--radius-chip);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  line-height: 1;
}

.stat-tile-delta.up {
  background: var(--zw-success-100);
  color: var(--zw-success-600);
}

.stat-tile-delta.down {
  background: var(--zw-danger-100);
  color: var(--zw-danger-600);
}

.stat-tile-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-tile-value {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.018em;
  font-feature-settings: var(--ff-numeric);
  color: var(--text-strong);
  white-space: nowrap;
}

.stat-tile-unit {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-muted);
}

.stat-tile-caption {
  font-size: var(--text-caption);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Viewing Row Interactive Hover */
.viewing-row-interactive {
  transition: background-color var(--dur-fast) var(--ease-out);
}

.viewing-row-interactive:hover {
  background: var(--zw-ink-050);
}

/* Activity Item Timeline */
.activity-item {
  display: flex;
  gap: 11px;
  min-width: 0;
}

.activity-item-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.activity-item-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-item-line {
  flex: 1;
  width: 1px;
  background: var(--border-subtle);
  margin-top: 4px;
  min-height: 14px;
}

.activity-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 14px;
  min-width: 0;
  flex: 1;
}

.activity-item:last-child .activity-item-content {
  padding-bottom: 0;
}

.activity-item:last-child .activity-item-line {
  display: none;
}

.activity-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.activity-item-title {
  font-size: 12.5px;
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  flex: 1;
  min-width: 0;
}

.activity-item-time {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  flex: 0 0 auto;
  letter-spacing: -0.01em;
}

.activity-item-meta {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS & CONTROLS (DESIGN SYSTEM CONFORMANT)
   ══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--size-control-md);
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--transition-control);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--action-primary);
  color: var(--text-inverse);
  border-color: var(--action-primary);
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}

.btn-secondary {
  background: var(--action-secondary);
  color: var(--text-strong);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--action-secondary-hover);
  border-color: var(--border-strong);
}

.btn-highlight {
  background: var(--action-highlight);
  color: var(--text-on-highlight);
  border-color: var(--action-highlight);
  box-shadow: var(--shadow-xs);
}

.btn-highlight:hover {
  background: var(--action-highlight-hover);
  border-color: var(--action-highlight-hover);
}

.btn-sm {
  height: var(--size-control-sm);
  padding: 0 12px;
  font-size: var(--text-body-s);
  gap: 6px;
}

/* Disabled, as the design system draws it: faded, and it does not light
   up under the pointer as if it could be pressed. */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--action-primary); border-color: var(--action-primary); }
.btn-secondary:disabled:hover { background: var(--action-secondary); border-color: var(--border-default); }
.btn-highlight:disabled:hover { background: var(--action-highlight); border-color: var(--action-highlight); }

/* Badges & Pills */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.badge.azure { background: var(--zw-navy-050); color: var(--zw-navy-600); border: 1px solid var(--zw-navy-100); }
.badge.clay { background: var(--zw-sand-100); color: var(--zw-clay-700); border: 1px solid var(--zw-sand-300); }
.badge.success { background: var(--zw-success-100); color: var(--zw-success-600); border: 1px solid var(--zw-success-200); }
.badge.warning { background: var(--zw-warning-100); color: var(--zw-warning-600); border: 1px solid var(--zw-warning-200); }

/* Highlight Pill (Scarce signal lime highlight) */
.highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--zw-lime-500);
  color: var(--text-on-highlight);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-xs);
}

/* ══════════════════════════════════════════════════════════════════
   KANBAN DEAL PIPELINE (DESIGN SYSTEM SIZED)
   ══════════════════════════════════════════════════════════════════ */
.pipeline-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}

.pipeline-summary-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow-xs);
}

/* The one deliberate accent panel on this screen: the number the desk is
   actually run on. Navy ground, white numerals, and the single lime mark
   the system allows — a value flag, per the reference kit. */
.pipeline-summary-card.highlight {
  background: var(--gradient-navy);
  border-color: var(--zw-navy-800);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* The lime flag down the leading edge. The token is --zw-lime-500;
   an earlier --zw-signal-lime never existed, so this never rendered. */
.pipeline-summary-card.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-highlight-bar);
}

/* A diagonal top-left sheen, the same one the glass surfaces carry. */
.pipeline-summary-card.highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}

.pipeline-summary-card.highlight > * { position: relative; z-index: 1; }
.pipeline-summary-card.highlight .pipeline-summary-label { color: rgba(255, 255, 255, 0.72); }
.pipeline-summary-card.highlight .pipeline-summary-val { color: var(--text-inverse); }
.pipeline-summary-card.highlight .pipeline-summary-unit { color: rgba(255, 255, 255, 0.64); }

/* The caption becomes the lime value flag — the reference's most
   distinctive data mark, and the only lime on this card. */
.pipeline-summary-card.highlight .pipeline-summary-caption {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--zw-lime-500);
  color: var(--text-on-highlight);
  font-weight: var(--fw-medium);
}

/* Hierarchy in the rest of the row: the broker's own take is warm bronze,
   context figures stay quiet. Colour only where it means something. */
.pipeline-summary-card.warm .pipeline-summary-val { color: var(--zw-clay-700); }
.pipeline-summary-card.quiet .pipeline-summary-val { color: var(--text-body-color); }

.pipeline-summary-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
}

.pipeline-summary-val-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.pipeline-summary-val {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
}

.pipeline-summary-unit {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-muted);
}

.pipeline-summary-caption {
  font-size: 11px;
  color: var(--text-muted);
}

.pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 1fr);
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 24px;
  padding-top: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.pipeline-board::-webkit-scrollbar {
  height: 7px;
}

.pipeline-board::-webkit-scrollbar-track {
  background: var(--surface-sunken);
  border-radius: 4px;
}

.pipeline-board::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

.pipeline-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 14px;
  min-height: 520px;
  box-sizing: border-box;
}

.pipeline-col-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.stage-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stage-name {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.stage-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.stage-metrics-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11.5px;
}

.stage-total {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 13px;
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
}

.stage-comm-total {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--zw-clay-700);
  font-feature-settings: var(--ff-numeric);
  background: var(--zw-clay-100);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Deal Card component styling */
.deal-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  position: relative;
  transition: all var(--dur-fast) var(--ease-out);
}

.deal-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--zw-navy-300);
  transform: translateY(-2px);
}

.deal-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.deal-stage-bar {
  width: 3.5px;
  align-self: stretch;
  min-height: 36px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.deal-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.deal-client-name {
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.deal-property-title {
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Financials Block with Prominent Commission */
.deal-financials-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 2px 0;
}

.deal-val-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.deal-val-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.deal-val-figure {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.deal-price-num {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.015em;
  font-feature-settings: var(--ff-numeric);
  color: var(--text-strong);
}

.deal-currency {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-muted);
}

.deal-comm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  border-top: 1px dashed var(--border-subtle);
}

.deal-comm-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--zw-clay-700);
  display: flex;
  align-items: center;
  gap: 4px;
}

.deal-comm-amount {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--zw-navy-900);
  font-feature-settings: var(--ff-numeric);
}

.deal-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11.5px;
}

.deal-advance-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 500;
  transition: all var(--dur-fast) var(--ease-out);
}

.deal-advance-btn:hover {
  background: var(--zw-navy-700);
  color: #fff;
  border-color: var(--zw-navy-700);
}

/* ══════════════════════════════════════════════════════════════════
   DATA TABLES & LEAD ROWS
   ══════════════════════════════════════════════════════════════════ */
.lead-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
  min-width: 0;
}

.lead-row:hover {
  background: var(--zw-ink-050);
}

.lead-row:last-child {
  border-bottom: none;
}

/* Slide-over Dossier Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,26,49,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur-base) var(--ease-out);
}

.drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.slide-drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 96vw;
  max-width: 1080px;
  height: 92vh;
  max-height: 860px;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-glass-strong, 30px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-glass-strong, 30px)) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass), var(--shadow-lg);
  border-radius: 24px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) scale(0.97) translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}

.slide-drawer.open {
  transform: translate(-50%, -50%) scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
}

.drawer-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   LEAD DOSSIER PANEL
   ══════════════════════════════════════════════════════════════════ */

.dossier-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.dossier-header-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.dossier-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--zw-navy-050);
  border: 2px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--zw-navy-700);
  flex-shrink: 0;
}

.dossier-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.dossier-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dossier-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.dossier-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.dossier-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.dossier-budget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.dossier-budget-label {
  font-size: 12px;
  color: var(--text-muted);
}

.dossier-budget-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
  line-height: 1;
}

.dossier-budget-meta {
  font-size: 11px;
  color: var(--text-faint);
}

.dossier-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.dossier-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  padding: 20px 24px;
  overflow-y: auto;
  align-items: start;
}

.dossier-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.dossier-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.dossier-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}

.dossier-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.dossier-tab:hover {
  color: var(--text-strong);
}

.dossier-tab.active {
  color: var(--text-strong);
  font-weight: 600;
  border-bottom-color: var(--zw-navy-700);
}

.dossier-tab-content {
  min-height: 200px;
}

.engagement-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.engagement-card-title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  align-self: flex-start;
}

.engagement-meter {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.engagement-meter-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.engagement-meter-label {
  color: var(--text-muted);
}

.engagement-meter-value {
  color: var(--text-strong);
  font-weight: 500;
  font-feature-settings: var(--ff-numeric);
}

.engagement-meter-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.engagement-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease-out;
}

.requirements-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.requirements-card-title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.requirements-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.requirement-pill {
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--zw-sand-200, #e8e2d8);
  color: var(--text-strong);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.requirements-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.requirements-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.requirements-meta-key {
  color: var(--text-muted);
}

.requirements-meta-val {
  color: var(--text-strong);
  font-weight: 500;
}

.commission-card {
  background: var(--zw-sand-100, #f0ebe3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.commission-card-label {
  font-size: 12px;
  color: var(--zw-clay-700);
  font-weight: 600;
}

.commission-card-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
  line-height: 1;
}

.commission-card-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.dossier-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}

.timeline-logger {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.timeline-logger input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control, 8px);
  background: var(--surface-card);
  font-size: 13px;
  color: var(--text-body-color);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.timeline-logger input:focus {
  border-color: var(--zw-navy-700);
}

.timeline-logger input::placeholder {
  color: var(--text-faint);
}

.timeline-entry {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: 16px;
}

.timeline-entry:last-child {
  padding-bottom: 0;
}

.timeline-entry-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.timeline-entry-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}

.timeline-entry-line {
  width: 2px;
  flex: 1;
  background: var(--border-subtle);
  min-height: 12px;
}

.timeline-entry:last-child .timeline-entry-line {
  display: none;
}

.timeline-entry-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  padding-top: 5px;
}

.timeline-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.timeline-entry-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.timeline-entry-time {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.timeline-entry-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.dossier-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.note-add-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.note-add-section textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-size: 13px;
  color: var(--text-body-color);
  font-family: var(--font-sans);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.note-add-section textarea:focus {
  border-color: var(--zw-navy-700);
}

.note-add-section textarea::placeholder {
  color: var(--text-faint);
}

.note-add-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-add-controls select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control, 8px);
  background: var(--surface-card);
  font-size: 12px;
  color: var(--text-body-color);
  outline: none;
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.note-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-card-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
}

.note-card-time {
  font-size: 11px;
  color: var(--text-faint);
}

.note-card-type {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--zw-navy-050);
  color: var(--zw-navy-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.note-card-text {
  font-size: 13px;
  color: var(--text-body-color);
  line-height: 1.45;
}

.dossier-documents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-upload-zone {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-card);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.doc-upload-zone:hover {
  border-color: var(--zw-navy-700);
  background: var(--zw-ink-050);
}

.document-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.document-row:hover {
  background: var(--zw-ink-050);
}

.doc-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.doc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-meta {
  font-size: 11px;
  color: var(--text-faint);
}

.doc-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.doc-status.verified {
  background: rgba(46, 160, 67, 0.1);
  color: #1a7f37;
}

.doc-status.pending {
  background: rgba(210, 153, 34, 0.1);
  color: #9a6700;
}

.doc-status.expired {
  background: rgba(207, 34, 46, 0.1);
  color: #cf222e;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-form-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.profile-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.profile-field input,
.profile-field select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control, 8px);
  background: var(--surface-card);
  font-size: 13px;
  color: var(--text-body-color);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.profile-field input:focus,
.profile-field select:focus {
  border-color: var(--zw-navy-700);
}

.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.portfolio-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.portfolio-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  font-weight: 500;
}

.portfolio-stat-value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
}

.portfolio-asset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  margin-bottom: 8px;
}

.portfolio-asset-row:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--zw-navy-300);
}

.portfolio-asset-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.portfolio-asset-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.portfolio-asset-address {
  font-size: 11px;
  color: var(--text-muted);
}

.portfolio-asset-value {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
  text-align: right;
}

.portfolio-asset-growth {
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

.portfolio-asset-growth.positive {
  color: #1a7f37;
}

.portfolio-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-card);
}

@media (max-width: 960px) {
  .dossier-body {
    grid-template-columns: 1fr;
  }
  .dossier-right {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .engagement-card, .requirements-card, .commission-card {
    flex: 1;
    min-width: 200px;
  }
  .dossier-budget-value {
    font-size: 22px;
  }
  .portfolio-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 39, 73, 0.32);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  width: 100%;
  max-width: 540px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-warm);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Toast Notification (Sentence case, no emoji, capable colleague tone) */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 500;
  pointer-events: none;
}

.toast {
  background: var(--zw-navy-700);
  color: #FFFFFF;
  border-radius: var(--radius-card);
  padding: 12px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  pointer-events: auto;
  animation: toast-fade 0.2s ease-out;
}

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

/* ══════════════════════════════════════════════════════════════════
   FINANCIAL DEPARTMENT — COMMISSIONS & QUARTER SCORE
   ══════════════════════════════════════════════════════════════════ */

/* Finance Summary Strip */
.finance-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.finance-metric-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Clickable KPI Cards */
.clickable-kpi {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: transform var(--dur-fast, 140ms) var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 140ms) var(--ease-out, ease-out),
              border-color var(--dur-fast, 140ms) var(--ease-out, ease-out),
              background var(--dur-fast, 140ms) var(--ease-out, ease-out);
}

.clickable-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(17, 39, 73, 0.08));
  border-color: var(--zw-azure-500, #7593B6);
}

.clickable-kpi:active {
  transform: translateY(0);
}

.clickable-kpi:focus-visible {
  outline: 2px solid var(--zw-navy-700);
  outline-offset: 2px;
}

.clickable-kpi.active-kpi-filter,
.clickable-kpi.active {
  border-color: var(--zw-navy-700, #112749);
  background: rgba(17, 39, 73, 0.035);
  box-shadow: 0 0 0 1.5px var(--zw-navy-700, #112749), var(--shadow-sm);
}

.kpi-active-pill {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--zw-navy-700, #112749);
  color: #ffffff;
}

.finance-metric-card .metric-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.finance-metric-card .metric-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--text-strong);
  font-feature-settings: "tnum";
  line-height: 1.1;
}

.finance-metric-card .metric-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Market Type Badges */
.market-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.market-badge.off-plan {
  background: rgba(117, 147, 182, 0.12);
  color: #4a6a8a;
}

.market-badge.secondary {
  background: rgba(161, 135, 94, 0.12);
  color: #7a6340;
}

/* Deal card market indicator (small badge for pipeline) */
.deal-market-indicator {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.deal-market-indicator.off-plan {
  background: rgba(117, 147, 182, 0.15);
  color: #5a7a9a;
}

.deal-market-indicator.secondary {
  background: rgba(161, 135, 94, 0.15);
  color: #8a7350;
}

/* Commission Follow-up Status Badges */
.commission-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
}

.commission-status.payment_received,
.commission-status.done {
  background: rgba(46, 160, 67, 0.1);
  color: #1a7f37;
}

.commission-status.invoice_sent,
.commission-status.commission_protocoled {
  background: rgba(117, 147, 182, 0.12);
  color: #4a6a8a;
}

.commission-status.documents_received {
  background: rgba(210, 153, 34, 0.1);
  color: #9a6700;
}

.commission-status.documents_pending,
.commission-status.current {
  background: rgba(210, 153, 34, 0.1);
  color: #9a6700;
}

.commission-status.pending {
  background: rgba(117, 147, 182, 0.08);
  color: #6b8db5;
}

/* Status Dot */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.payment_received,
.status-dot.done { background: #2ea043; }
.status-dot.invoice_sent,
.status-dot.commission_protocoled { background: #7593B6; }
.status-dot.documents_received { background: #d29922; }
.status-dot.documents_pending,
.status-dot.current { background: #d29922; }
.status-dot.pending { background: #b8cce0; }

/* Commission Table */
.commission-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.commission-table th {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  background: var(--surface-card);
  z-index: 1;
}

.commission-table td {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-body-color);
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.commission-table tr:last-child td {
  border-bottom: none;
}

.commission-table tr:hover td {
  background: rgba(17, 39, 73, 0.03);
}

.commission-table .deal-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.commission-table .deal-title {
  font-weight: 500;
  color: var(--text-strong);
}

.commission-table .deal-client {
  font-size: 11px;
  color: var(--text-faint);
}

.commission-table .amount-cell {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
  font-weight: 400;
}

.commission-table .amount-gross {
  color: var(--text-strong);
  font-size: 13px;
}

.commission-table .amount-net {
  font-size: 11px;
  color: var(--text-muted);
}

/* Clickable commission row */
.commission-row-clickable {
  cursor: pointer;
  transition: background 140ms ease-out;
}

.commission-row-clickable:hover td {
  background: rgba(17, 39, 73, 0.04);
}

/* Filter Tabs */
.finance-filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 3px;
  background: var(--surface-sunken, #ede9e3);
  border-radius: 10px;
  width: fit-content;
}

.finance-filter-tab {
  padding: 6px 16px;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms ease-out;
}

.finance-filter-tab:hover {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.5);
}

.finance-filter-tab.active {
  background: var(--surface-card);
  color: var(--text-strong);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* Commission Follow-up Timeline (in drawer) */
.followup-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  position: relative;
}

.followup-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--border-subtle);
}

.followup-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}

.followup-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  border: 3px solid var(--surface-card, #fff);
}

.followup-dot.done {
  background: #2ea043;
}

.followup-dot.current {
  background: #d29922;
  animation: pulse-dot 2s ease-in-out infinite;
}

.followup-dot.pending {
  background: #b8cce0;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 153, 34, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(210, 153, 34, 0); }
}

.followup-dot i {
  color: #fff;
}

.followup-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.followup-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.followup-label.pending {
  color: var(--text-muted);
}

.followup-date {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-faint);
}

/* Quarter Score Hero Strip */
.quarter-hero-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

/* Market Comparison Cards */
.market-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.market-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 24px;
}

.market-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.market-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-card-icon.off-plan {
  background: rgba(117, 147, 182, 0.15);
  color: #5a7a9a;
}

.market-card-icon.secondary {
  background: rgba(161, 135, 94, 0.15);
  color: #8a7350;
}

.market-card-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

.market-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.market-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.market-stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.market-stat-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--text-strong);
  font-feature-settings: "tnum";
}

.market-stat-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
}

/* Quarter Bar Chart (stacked) */
.quarter-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  height: 180px;
  padding: 0 12px;
  margin-top: 16px;
}

.quarter-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.quarter-bar-stack {
  width: 100%;
  max-width: 64px;
  display: flex;
  flex-direction: column;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.quarter-bar-segment {
  width: 100%;
  transition: height 340ms cubic-bezier(.22,.61,.36,1);
}

.quarter-bar-segment.off-plan {
  background: #8fa8c4;
}

.quarter-bar-segment.secondary {
  background: #b9a07a;
}

.quarter-bar-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.quarter-bar-value {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  font-feature-settings: "tnum";
}

/* Agent Rankings Table */
.rankings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.rankings-table th {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.rankings-table td {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-body-color);
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.rankings-table tr:last-child td {
  border-bottom: none;
}

.rankings-table .rank-number {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-strong);
  font-feature-settings: "tnum";
  width: 32px;
}

.rankings-table .agent-name {
  font-weight: 500;
  color: var(--text-strong);
}

.rankings-table .tnum {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
}

/* Quarter Trend (mini) */
.quarter-trend {
  display: flex;
  gap: 16px;
}

.quarter-trend-item {
  flex: 1;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: transform var(--dur-fast, 140ms) var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 140ms) var(--ease-out, ease-out),
              border-color var(--dur-fast, 140ms) var(--ease-out, ease-out),
              background var(--dur-fast, 140ms) var(--ease-out, ease-out);
}

.quarter-trend-item.current {
  border-color: #7593B6;
  box-shadow: var(--shadow-sm);
}

.quarter-trend-item.clickable-trend,
.quarter-trend-item[data-quarter] {
  cursor: pointer;
  user-select: none;
}

.quarter-trend-item.clickable-trend:hover,
.quarter-trend-item[data-quarter]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(17, 39, 73, 0.08));
  border-color: var(--zw-azure-500, #7593B6);
}

.quarter-trend-item.clickable-trend:active,
.quarter-trend-item[data-quarter]:active {
  transform: translateY(0);
}

.quarter-trend-item.clickable-trend:focus-visible {
  outline: 2px solid var(--zw-navy-700);
  outline-offset: 2px;
}

.quarter-trend-item.selected,
.quarter-trend-item.active-quarter {
  border-color: var(--zw-navy-700, #112749);
  background: rgba(17, 39, 73, 0.035);
  box-shadow: 0 0 0 1.5px var(--zw-navy-700, #112749), var(--shadow-sm);
}

.quarter-trend-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
}

.quarter-trend-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--text-strong);
  font-feature-settings: "tnum";
}

.quarter-trend-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .finance-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .quarter-hero-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .market-comparison {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .finance-summary-strip,
  .quarter-hero-strip {
    grid-template-columns: 1fr;
  }
  .quarter-trend {
    flex-direction: column;
  }
}

.avatar-upload-target:hover .avatar-hover-overlay { opacity: 1 !important; }
 
/* Commission Drawer: Documents & Comments */
.commission-docs-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.commission-doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card, 10px);
  transition: all var(--dur-fast, 180ms) var(--ease-out, ease-out);
}

.commission-doc-card:hover {
  border-color: var(--zw-navy-300, #b8cce0);
  background: var(--zw-ink-050, rgba(17, 39, 73, 0.02));
}

.commission-comments-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.commission-comments-timeline {
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM UI COMPONENTS (CLIENT MODEL)
   ══════════════════════════════════════════════════════════════════ */

.ds-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: 16px;
}

.ds-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.ds-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
}

.ds-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-body-color);
  transition: all 0.2s;
  outline: none;
}

.ds-input:focus {
  border-color: var(--zw-navy-700);
}

.ds-input.has-error {
  border-color: #e11d48;
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.1);
}

.ds-input.with-prefix {
  padding-left: 36px;
}

.ds-input.with-suffix {
  padding-right: 48px;
}

.ds-input-prefix {
  position: absolute;
  left: 12px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.ds-input-suffix {
  position: absolute;
  right: 12px;
  font-size: 12px;
  color: var(--text-faint);
  pointer-events: none;
}

.ds-helper-error {
  font-size: 11px;
  color: #e11d48;
  margin-top: 2px;
}

/* Select */
.ds-select {
  appearance: none;
  cursor: pointer;
}
.ds-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ds-select-icon {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--text-faint);
  display: flex;
}

/* Segmented Control */
.ds-segmented {
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
}

.ds-segmented-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.ds-segmented-btn:hover {
  color: var(--text-strong);
}

.ds-segmented-btn.active {
  background: var(--surface-card);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Checkboxes */
.ds-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.ds-checkbox input {
  display: none;
}

.ds-checkbox-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-top: 2px;
}

.ds-checkbox input:checked + .ds-checkbox-box,
.ds-checkbox input.indeterminate + .ds-checkbox-box {
  background: var(--zw-navy-900);
  border-color: var(--zw-navy-900);
  color: white;
}

.ds-checkbox.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-checkbox-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-checkbox-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.ds-checkbox-sub {
  font-size: 11px;
  color: var(--text-faint);
}

/* Toggles */
.ds-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.ds-toggle input {
  display: none;
}

.ds-toggle-track {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--border-default);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
  margin-top: 1px;
}

.ds-toggle-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ds-toggle input:checked + .ds-toggle-track {
  background: var(--zw-navy-900);
}

.ds-toggle input:checked + .ds-toggle-track .ds-toggle-thumb {
  transform: translateX(18px);
}

/* ══════════════════════════════════════════════════════════════════
   PIPELINE WORKSPACE  (lib/pipeline.js)
   Warm paper, navy ink, one loud green. The board stays quiet; the
   workspace carries the detail.
   ══════════════════════════════════════════════════════════════════ */

/* ── Board chrome ──────────────────────────────────────────────── */

.pipeline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pipeline-filter-group {
  display: flex;
  gap: 2px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 2px;
}

.pipeline-alerts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pipeline-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  background: var(--zw-warning-100);
  color: var(--zw-warning-600);
  border: 1px solid var(--zw-warning-200);
}

.pipeline-alert-note {
  font-size: 12px;
  color: var(--text-faint);
}

.pipeline-col-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pipeline-col-empty {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-control);
  padding: 32px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pipeline-archive-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

/* ── Deal card ─────────────────────────────────────────────────── */
/* Objects in a column, not panels: 10px radius, shadow-xs. */

.deal-card {
  flex-direction: row;
  gap: 0;
  padding: 0;
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.deal-card .deal-stage-bar {
  min-height: 100%;
  border-radius: 0;
  margin: 0;
}

.pw-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  flex: 1;
  min-width: 0;
}

.pw-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pw-card-name {
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-card-market {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pw-card-market.off-plan { background: var(--zw-clay-100); color: var(--zw-clay-700); }
.pw-card-market.secondary { background: var(--zw-navy-050); color: var(--zw-navy-600); }

.pw-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.pw-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pw-card-meta i,
.pw-card-meta svg { width: 11px; height: 11px; }

.pw-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pw-card-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--radius-chip);
  background: var(--surface-warm);
  border: 1px solid var(--zw-sand-300);
  color: var(--zw-clay-700);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-card-flag i,
.pw-card-flag svg { width: 11px; height: 11px; flex-shrink: 0; }

.pw-card-money {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 0;
  border-top: 1px solid var(--border-subtle);
}

.pw-card-money .right { text-align: right; }

.pw-card-money-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--text-faint);
  margin-bottom: 2px;
}

.pw-card-money-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.pw-card-money-value.comm { color: var(--zw-clay-700); }

.pw-card-money-value em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-faint);
  font-family: var(--font-sans);
}

.pw-card-progress {
  display: flex;
  align-items: center;
  gap: 3px;
}

.pw-card-progress span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--chart-track, var(--zw-ink-150));
}

.pw-card-progress span.on { background: var(--zw-success-500); }

.pw-card-progress em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
  font-feature-settings: var(--ff-numeric);
}

.pw-card-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pw-card-sched {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.pw-card-sched i,
.pw-card-sched svg { width: 11px; height: 11px; }
.pw-card-sched.overdue { color: var(--zw-warning-600); font-weight: var(--fw-medium); }

.pw-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

.pw-card-agent {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-advance-btn.done {
  background: var(--zw-success-500);
  border-color: var(--zw-success-600);
  color: var(--text-inverse);
}

/* ── Workspace shell ───────────────────────────────────────────── */
/* The drawer element is reused as a centred modal; it already carries
   the morphoglass treatment. Inside it, dense reading surfaces stay
   opaque white — legibility beats effect. */

.pw-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-card);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* The one deliberate accent panel in this screen: an azure hero that
   identifies the client. Everything on it is white-on-accent. */
.pw-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 56px 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--gradient-panel);
  color: var(--text-on-accent);
  flex-shrink: 0;
  position: relative;
}

.pw-header-main {
  display: flex;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.pw-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--glass-fill-dark);
  border: 1px solid var(--glass-border-dark);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pw-identity { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pw-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pw-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-regular);
  color: var(--text-on-accent);
  letter-spacing: -0.01em;
}

.pw-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.84);
}

/* Badges sit on the accent panel, so they get the glass-dark treatment
   rather than their usual light fills. */
.pw-name-row .badge {
  background: var(--glass-fill-dark);
  border: 1px solid var(--glass-border-dark);
  color: var(--text-on-accent);
}

.pw-sub span { display: inline-flex; align-items: center; gap: 4px; }
.pw-sub i,
.pw-sub svg { width: 12px; height: 12px; }

/* The header actions, 30% smaller than a standard small button: they
   are shortcuts beside the record, not the record. */
.pw-quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pw-quick .btn {
  text-decoration: none;
  height: 22px;
  padding: 0 8px;
  gap: 4px;
  font-size: 11px;
  border-radius: 7px;
}
.pw-quick i,
.pw-quick svg { width: 11px; height: 11px; }

.pw-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.pw-stage-picker { display: flex; align-items: center; gap: 6px; }

.pw-stage-picker span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: rgba(255, 255, 255, 0.76);
}

.pw-stage-picker select {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
}

.pw-metric { display: flex; align-items: baseline; gap: 5px; }

.pw-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: rgba(255, 255, 255, 0.76);
  margin-right: 4px;
}

.pw-metric-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-light);
  color: var(--text-on-accent);
  letter-spacing: -0.02em;
  font-feature-settings: var(--ff-numeric);
}

.pw-metric-unit { font-size: 11px; color: rgba(255, 255, 255, 0.76); }

.pw-metric-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.9);
}

.pw-metric-sub i,
.pw-metric-sub svg { width: 11px; height: 11px; }

.pw-followup {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-on-accent);
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  background: var(--glass-fill-dark);
  border: 1px solid var(--glass-border-dark);
}

/* Overdue still reads as a warning, but light enough to sit on navy. */
.pw-followup.overdue {
  background: var(--zw-warning-100);
  color: var(--zw-warning-600);
  border: 1px solid var(--zw-warning-200);
}

.pw-followup i,
.pw-followup svg { width: 11px; height: 11px; }

.pw-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-control);
  border: 1px solid var(--glass-border-dark);
  background: var(--glass-fill-dark);
  color: var(--text-on-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.pw-close:hover { background: rgba(11, 26, 49, 0.62); }
.pw-close i,
.pw-close svg { width: 15px; height: 15px; }

/* Header actions are all white on the accent panel — the one lime action
   in this workspace is "Finalise transaction". */
.pw-quick .btn,
.pw-quick .btn-primary,
.pw-quick .btn-secondary {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-strong);
}

.pw-quick .btn:hover { background: var(--zw-sand-100); }
.pw-quick .btn.pw-danger { color: var(--zw-danger-600); }

/* ── Body: nav + content ───────────────────────────────────────── */

.pw-body { display: flex; flex: 1; min-height: 0; }

.pw-nav {
  width: 228px;
  flex-shrink: 0;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-subtle);
  padding: 10px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.pw-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 18px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.pw-nav-item:hover { background: var(--action-ghost-hover); }

.pw-nav-item.active {
  border-left-color: var(--zw-navy-700);
  background: var(--surface-card);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

.pw-nav-item i,
.pw-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.pw-nav-item span { flex: 1; min-width: 0; }

.pw-nav-badge {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-chip);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-feature-settings: var(--ff-numeric);
}

.pw-nav-badge.warning { background: var(--zw-warning-100); color: var(--zw-warning-600); }
.pw-nav-badge.success { background: var(--zw-success-100); color: var(--zw-success-600); }

.pw-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface-card);
  padding: 22px 26px 40px;
}

/* ── Sections ──────────────────────────────────────────────────── */

.pw-section { margin-bottom: 22px; }

.pw-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pw-section-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-regular);
  color: var(--text-strong);
}

.pw-count {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-faint);
  font-feature-settings: var(--ff-numeric);
}

.pw-note {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 8px;
}

/* A note that carries a reason something failed. It has to be readable
   at a glance without becoming the loudest thing in the dialog. */
.pw-note.bad {
  color: var(--zw-danger-600);
  background: var(--zw-danger-100);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin: 10px 0 0;
}

.pw-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--zw-navy-050);
  border: 1px solid var(--zw-navy-100);
  color: var(--zw-navy-700);
  font-size: 12.5px;
  margin-bottom: 14px;
}

.pw-banner i,
.pw-banner svg { width: 15px; height: 15px; flex-shrink: 0; }
.pw-banner.warning { background: var(--zw-warning-100); border-color: var(--zw-warning-200); color: var(--zw-warning-600); }
.pw-banner.success { background: var(--zw-success-100); border-color: var(--zw-success-200); color: var(--zw-success-600); }

.pw-overdue { color: var(--zw-warning-600); font-weight: var(--fw-medium); }
.pw-danger, .pw-icon-btn.pw-danger { color: var(--zw-danger-600); }
.pw-danger-btn { background: var(--zw-danger-600); border-color: var(--zw-danger-600); }
.pw-danger-btn:hover { background: var(--zw-danger-500); border-color: var(--zw-danger-500); }

/* ── Tiles ─────────────────────────────────────────────────────── */

.pw-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.pw-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tiles in a dialog have far less width to play with. */
.pw-dialog .pw-tile { padding: 11px 12px; }
.pw-dialog .pw-tile-value { font-size: 18px; }

.pw-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.pw-tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--text-faint);
}

.pw-tile-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-light);
  color: var(--text-strong);
  letter-spacing: -0.02em;
  font-feature-settings: var(--ff-numeric);
  display: flex;
  align-items: baseline;
  gap: 5px;
  /* A thin-spaced figure must never break across lines. */
  white-space: nowrap;
}

.pw-tile-unit { font-size: 11px; color: var(--text-faint); font-family: var(--font-sans); }
.pw-tile-caption { font-size: 11px; color: var(--text-muted); }

.pw-stage-chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--chip) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip) 34%, transparent);
}

/* ── Key / value grids ─────────────────────────────────────────── */

.pw-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 4px 16px;
  background: var(--surface-card);
}

.pw-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
}

.pw-kv:last-child, .pw-kv:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.pw-kv > span:first-child { color: var(--text-muted); flex-shrink: 0; }
.pw-kv > span:last-child { color: var(--text-strong); text-align: right; font-weight: var(--fw-medium); }
.pw-kv a { color: var(--text-link); text-decoration: none; }
.pw-kv a:hover { text-decoration: underline; }

.pw-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.pw-chip i,
.pw-chip svg { width: 11px; height: 11px; }
.pw-chip.success { background: var(--zw-success-100); color: var(--zw-success-600); border-color: var(--zw-success-200); }
.pw-chip.warning { background: var(--zw-warning-100); color: var(--zw-warning-600); border-color: var(--zw-warning-200); }
.pw-chip.azure { background: var(--zw-navy-050); color: var(--zw-navy-600); border-color: var(--zw-navy-100); }
.pw-chip.muted { background: var(--surface-sunken); color: var(--text-muted); }

/* ── Forms ─────────────────────────────────────────────────────── */

.pw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.pw-grid.two { grid-template-columns: repeat(2, 1fr); }
.pw-grid.three { grid-template-columns: repeat(3, 1fr); }

.pw-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pw-field.wide { grid-column: 1 / -1; }

.pw-field > span:first-child {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}

.pw-input-wrap { position: relative; display: flex; align-items: center; }

.pw-field input,
.pw-field select,
.pw-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.pw-field input[type="number"] {
  font-family: var(--font-display);
  font-feature-settings: var(--ff-numeric);
}

.pw-field textarea { resize: vertical; line-height: 1.5; font-size: 13px; }

.pw-field input:focus,
.pw-field select:focus,
.pw-field textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.pw-field select { cursor: pointer; }

.pw-suffix {
  position: absolute;
  right: 10px;
  font-size: 11px;
  color: var(--text-faint);
  pointer-events: none;
}

.pw-input-wrap input { padding-right: 46px; }

.pw-confirm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-size: 12.5px;
  color: var(--text-body-color);
  cursor: pointer;
}

.pw-confirm.on {
  background: var(--zw-success-100);
  border-color: var(--zw-success-200);
  color: var(--zw-success-600);
}

.pw-confirm input { width: 15px; height: 15px; accent-color: var(--zw-navy-700); cursor: pointer; }

.pw-delta {
  margin-top: 10px;
  font-size: 12px;
  color: var(--zw-clay-700);
  font-family: var(--font-display);
  font-feature-settings: var(--ff-numeric);
}

/* ── Quick logger and action chips ─────────────────────────────── */

.pw-logger { display: flex; gap: 8px; margin-bottom: 12px; }

.pw-logger input {
  flex: 1;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-strong);
}

.pw-logger input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

.pw-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.pw-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-body-color);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.pw-action:hover { background: var(--zw-ink-050); border-color: var(--zw-navy-300); }
.pw-action i,
.pw-action svg { width: 12px; height: 12px; }

/* ── Timeline ──────────────────────────────────────────────────── */

.pw-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.pw-act { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.pw-act:last-child { border-bottom: none; }

.pw-act-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pw-act-icon i,
.pw-act-icon svg { width: 14px; height: 14px; }

.pw-act-body { flex: 1; min-width: 0; position: relative; padding-right: 26px; }

.pw-act-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.pw-act-title { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-strong); }

.pw-act-time {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  font-family: var(--font-display);
  font-feature-settings: var(--ff-numeric);
}

.pw-act-meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.pw-act-notes {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-body-color);
  line-height: 1.55;
  white-space: pre-wrap;
}

.pw-act-row { display: flex; gap: 8px; font-size: 12px; margin-top: 4px; }
.pw-act-row > span:first-child { color: var(--text-faint); min-width: 84px; }
.pw-act-row > span:last-child { color: var(--text-body-color); }
.pw-act-row a { color: var(--text-link); }

.pw-act-del {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.pw-act:hover .pw-act-del { opacity: 1; }
.pw-act-del:hover { color: var(--zw-danger-600); }
.pw-act-del i,
.pw-act-del svg { width: 12px; height: 12px; }

/* ── Lists ─────────────────────────────────────────────────────── */

.pw-list { display: flex; flex-direction: column; gap: 8px; }

.pw-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.pw-list-row:hover { border-color: var(--zw-navy-300); }
.pw-list-row.current { border-color: var(--zw-navy-500); background: var(--zw-navy-050); }

.pw-list-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: var(--zw-navy-050);
  color: var(--zw-navy-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pw-list-icon i,
.pw-list-icon svg { width: 15px; height: 15px; }
.pw-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.pw-list-title {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pw-list-sub { font-size: 11.5px; color: var(--text-muted); }

.pw-list-meta {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--text-strong);
  text-align: right;
  white-space: nowrap;
  font-feature-settings: var(--ff-numeric);
}

.pw-list-faint { font-size: 11px; color: var(--text-faint); }
.pw-list-actions { display: flex; gap: 5px; flex-shrink: 0; }

/* ── Attached property panel ───────────────────────────────────── */

.pw-attached {
  margin-top: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-card);
}

.pw-attached-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}

.pw-attached-head i,
.pw-attached-head svg { width: 15px; height: 15px; color: var(--zw-clay-700); }
.pw-attached-head .pw-chip { margin-left: auto; }
.pw-attached .pw-kv-grid { border: none; border-radius: 0; }
.pw-attached .pw-tiles, .pw-attached .pw-list { margin: 14px 16px; }
.pw-attached .pw-note { margin: 12px 16px; }

/* ── Commission calculator ─────────────────────────────────────── */

.pw-calc {
  margin-top: 14px;
  border: 1px solid var(--zw-clay-300);
  border-radius: var(--radius-card);
  background: var(--zw-clay-100);
  padding: 4px 16px;
}

.pw-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--zw-clay-200);
  font-size: 12.5px;
}

.pw-calc-row:last-child { border-bottom: none; }
.pw-calc-row > span:first-child { color: var(--zw-clay-700); }

.pw-calc-row > span:last-child {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
}

.pw-calc-row.strong > span:last-child { font-size: 15px; }
.pw-calc-row.minus > span:last-child { color: var(--zw-danger-600); }

.pw-calc-row.net > span:last-child {
  font-size: 20px;
  font-weight: var(--fw-regular);
  color: var(--zw-success-600);
}

.pw-calc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pw-calc-actions .pw-confirm { flex: 1; min-width: 240px; }
.pw-calc-actions .pw-note { margin: 0; }

.pw-history { margin-top: 14px; }

.pw-history summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* ── Tables ────────────────────────────────────────────────────── */

.pw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.pw-table th {
  text-align: left;
  padding: 9px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.pw-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body-color);
  font-family: var(--font-display);
  font-feature-settings: var(--ff-numeric);
}

.pw-table tbody tr:last-child td { border-bottom: none; }
.pw-table td.center { text-align: center; white-space: nowrap; }
.pw-table tr.received { background: var(--zw-success-100); }
.pw-table tr.overdue { background: var(--zw-warning-100); }
/* What a document's date means when it is not in yet (expected, or late). */
.pw-date-note { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.pw-date-note.overdue { color: var(--zw-danger-600); font-weight: 500; }

.pw-table input[type="text"],
.pw-table input[type="number"],
.pw-table input[type="date"],
.pw-table select {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-strong);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
}

.pw-table input:hover, .pw-table select:hover { border-color: var(--border-default); }

.pw-table input:focus, .pw-table select:focus {
  outline: none;
  background: var(--surface-card);
  border-color: var(--border-focus);
}

.pw-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--zw-navy-700); }

/* Give the free-text columns the room; dates and status only need enough
   for their own content. */
.pw-table { table-layout: fixed; }
.pw-table th:first-child, .pw-table td:first-child { width: auto; min-width: 150px; }
.pw-table th:last-child, .pw-table td:last-child { width: 64px; }
.pw-table select { min-width: 0; }
.pw-table input[type="date"] { width: 100%; min-width: 118px; font-size: 11.5px; }
.pw-table.docs th:nth-child(2), .pw-table.docs td:nth-child(2) { width: 112px; }
.pw-table.docs th:nth-child(4), .pw-table.docs td:nth-child(4) { width: 62px; }
.pw-table.payments th:nth-child(2), .pw-table.payments td:nth-child(2) { width: 104px; }
.pw-table.payments th:nth-child(5), .pw-table.payments td:nth-child(5) { width: 104px; }

.pw-doc-file td { font-family: var(--font-sans); font-size: 11.5px; color: var(--text-muted); }
.pw-doc-file i,
.pw-doc-file svg { width: 12px; height: 12px; vertical-align: -2px; }
.pw-doc-file a { color: var(--text-link); }

.pw-icon-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
}

.pw-icon-btn:hover { background: var(--action-ghost-hover); }
.pw-icon-btn i,
.pw-icon-btn svg { width: 12px; height: 12px; }

/* ── Checklist ─────────────────────────────────────────────────── */

.pw-checklist {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  padding: 16px;
}

.pw-progress {
  height: 5px;
  border-radius: 3px;
  background: var(--chart-track, var(--zw-ink-150));
  overflow: hidden;
  margin-bottom: 6px;
}

.pw-progress-bar {
  height: 100%;
  background: var(--zw-success-500);
  transition: width var(--dur-slow, 340ms) var(--ease-out);
}

.pw-progress-label { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }

.pw-check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.pw-check-item i,
.pw-check-item svg { width: 16px; height: 16px; color: var(--border-strong); }
.pw-check-item.done { color: var(--text-strong); }
.pw-check-item.done i,
.pw-check-item.done svg { color: var(--zw-success-500); }

/* ── Empty state ───────────────────────────────────────────────── */

.pw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  font-size: 12.5px;
  color: var(--text-faint);
}

.pw-empty i,
.pw-empty svg { width: 22px; height: 22px; opacity: 0.4; }

/* ── Picker row ────────────────────────────────────────────────── */

.pw-picker { display: flex; gap: 8px; flex-wrap: wrap; }

.pw-picker select, .pw-picker input {
  flex: 1;
  min-width: 150px;
  padding: 8px 11px;
  font-family: var(--font-sans);
  font-size: 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-strong);
}

.pw-picker select { flex: 2; }
.pw-picker select:focus, .pw-picker input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

/* ── Stacked dialog ────────────────────────────────────────────── */

.pw-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(var(--blur-veil, 6px));
  -webkit-backdrop-filter: blur(var(--blur-veil, 6px));
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}

.pw-dialog-backdrop.open { opacity: 1; visibility: visible; }

.pw-dialog {
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sheet, 24px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.pw-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.pw-dialog-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--text-strong);
}

.pw-dialog-head .pw-close {
  position: static;
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

.pw-dialog-head .pw-close:hover { background: var(--action-ghost-hover); }

.pw-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pw-dialog-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.pw-dialog-section:first-child { border-top: none; padding-top: 0; }

.pw-dialog-section h4 {
  margin: 0 0 10px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}

.pw-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.pw-doc-check { display: flex; flex-direction: column; gap: 6px; }

.pw-doc-check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-card);
}

.pw-doc-check-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--zw-navy-700); }

.pw-doc-check-item .pw-doc-name {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-strong);
  padding: 2px 0;
}

.pw-doc-check-item .pw-doc-name:focus { outline: none; border-bottom: 1px solid var(--border-focus); }

/* ── Narrow screens ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pw-nav { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 6px; }
  .pw-nav-item { width: auto; white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .pw-nav-item.active { border-left-color: transparent; border-bottom-color: var(--zw-navy-700); }
  .pw-nav-item span { display: none; }
  .pw-header { flex-direction: column; padding-right: 24px; }
  .pw-header-side { align-items: flex-start; }
  .pw-tiles, .pw-tiles.three { grid-template-columns: repeat(2, 1fr); }
  .pw-grid, .pw-grid.two, .pw-grid.three { grid-template-columns: 1fr; }
  .pw-kv-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pw-progress-bar, .pw-action, .pw-nav-item, .pw-close, .pw-dialog-backdrop { transition: none; }
}

/* ── Switch ────────────────────────────────────────────────────── */
/* Matches design-system/components/forms/Switch: 42×24 pill, navy when
   on, ink-200 when off, 18px white knob inset 3px. For binary choices
   whose effect is immediate — the referral fee recalculates on flip. */

.pw-switch {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  user-select: none;
}

.pw-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pw-switch-track {
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--zw-ink-200);
  position: relative;
  transition: background-color var(--dur-base) var(--ease-out);
}

.pw-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--zw-white);
  box-shadow: var(--shadow-xs);
  transition: left var(--dur-base) var(--ease-out);
}

.pw-switch input:checked + .pw-switch-track { background: var(--zw-navy-700); }
.pw-switch input:checked + .pw-switch-track .pw-switch-knob { left: 21px; }
.pw-switch input:focus-visible + .pw-switch-track { box-shadow: var(--shadow-focus); }

.pw-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pw-switch-label {
  font-size: 13px;
  color: var(--text-strong);
  line-height: 1.3;
}

.pw-switch-desc {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Inside a form grid the switch replaces an input, so it inherits the
   field's label treatment and sits on the same baseline. */
.pw-field.switch { justify-content: flex-end; }
.pw-field.switch .pw-switch { min-height: 36px; }

@media (prefers-reduced-motion: reduce) {
  .pw-switch-track, .pw-switch-knob { transition: none; }
}

/* ── Timeline filters ──────────────────────────────────────────── */

.pw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.pw-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.pw-chip-btn:hover { background: var(--zw-ink-050); }

.pw-chip-btn.on {
  background: var(--zw-navy-700);
  border-color: var(--zw-navy-700);
  color: var(--text-inverse);
}

.pw-chip-btn em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 10.5px;
  opacity: 0.6;
  font-feature-settings: var(--ff-numeric);
}

/* ── Properties presented ──────────────────────────────────────── */

.pw-presented-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-card);
}

.pw-presented {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.pw-presented:last-child { border-bottom: none; }
.pw-presented-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.pw-presented-title {
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}

.pw-presented-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-presented-meta {
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  font-feature-settings: var(--ff-numeric);
}

.pw-presented-actions { display: flex; gap: 2px; flex-shrink: 0; }

/* ── Folded-away detail ────────────────────────────────────────── */

.pw-more {
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

.pw-more summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 4px 0;
  list-style: none;
}

.pw-more summary::-webkit-details-marker { display: none; }
.pw-more summary::before { content: "+ "; color: var(--text-faint); }
.pw-more[open] summary::before { content: "− "; }
.pw-more > *:not(summary) { margin-top: 10px; }

/* ── Documents carried over from the client file ───────────────── */

.pw-doc-check-item.carried {
  background: var(--zw-success-100);
  border-color: var(--zw-success-200);
}

.pw-doc-from {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--zw-success-600);
  flex-shrink: 0;
}

/* ── Card: days in stage ───────────────────────────────────────── */

.pw-card-stagedays { color: var(--text-faint); }
.pw-card-stagedays.stale { color: var(--zw-warning-600); font-weight: var(--fw-medium); }

/* ── Icon sizing, belt and braces ──────────────────────────────── */
/* Lucide swaps each <i data-lucide> for an <svg>, which arrives at its
   own 24px default. Rules therefore have to name `svg`, not just `i`,
   or the icon silently renders at double size. These catch the buttons
   that sit outside the component rules above. */

.deal-advance-btn i,
.deal-advance-btn svg { width: 11px; height: 11px; }

.pw-shell .btn i,
.pw-shell .btn svg,
.pw-dialog .btn i,
.pw-dialog .btn svg { width: 12px; height: 12px; flex-shrink: 0; }

.pw-empty .btn i,
.pw-empty .btn svg { width: 12px; height: 12px; }

/* Nothing inside the pipeline workspace should ever reach the 24px
   default; this is the floor if a new icon lands without its own rule. */
.pw-shell svg.lucide,
.pw-dialog svg.lucide { max-width: 16px; max-height: 16px; }

/* ── Signal queues ─────────────────────────────────────────────── */
/* Each chip is a list you can work, not a notification. Clicking one
   narrows the board to it; clicking it again clears. Nothing here acts
   on a deal by itself — the call stays the agent's. */

.pipeline-signals {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pipeline-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.pipeline-signal:hover { border-color: var(--border-strong); }
.pipeline-signal:active { transform: scale(0.985); }

.pipeline-signal em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 0 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  font-feature-settings: var(--ff-numeric);
}

/* Resting tones carry the meaning: amber needs chasing, green is money
   waiting, bronze is money owed, grey is a nudge. */
.pipeline-signal.warning { background: var(--zw-warning-100); border-color: var(--zw-warning-200); color: var(--zw-warning-600); }
.pipeline-signal.warning em { background: rgba(154, 106, 18, 0.12); }
.pipeline-signal.success { background: var(--zw-success-100); border-color: var(--zw-success-200); color: var(--zw-success-600); }
.pipeline-signal.success em { background: rgba(31, 107, 78, 0.12); }
.pipeline-signal.clay { background: var(--zw-clay-100); border-color: var(--zw-clay-300); color: var(--zw-clay-700); }
.pipeline-signal.clay em { background: rgba(107, 87, 60, 0.12); }
.pipeline-signal.azure { background: var(--zw-navy-050); border-color: var(--zw-navy-100); color: var(--zw-navy-600); }
.pipeline-signal.azure em { background: rgba(26, 54, 96, 0.1); }
.pipeline-signal.muted { background: var(--surface-card); border-color: var(--border-default); color: var(--text-muted); }

/* Selected is the system's one selected treatment: solid navy, white content. */
.pipeline-signal.on,
.pipeline-signal.on.warning,
.pipeline-signal.on.success,
.pipeline-signal.on.clay,
.pipeline-signal.on.azure,
.pipeline-signal.on.muted {
  background: var(--zw-navy-700);
  border-color: var(--zw-navy-700);
  color: var(--text-inverse);
}

.pipeline-signal.on em { background: rgba(255, 255, 255, 0.16); color: var(--text-inverse); }

.pipeline-signal i,
.pipeline-signal svg { width: 13px; height: 13px; flex-shrink: 0; }

.pipeline-signal-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.pipeline-signal-reset:hover { background: var(--action-ghost-hover); color: var(--text-strong); }

.pipeline-signal-reset i,
.pipeline-signal-reset svg { width: 12px; height: 12px; }

.pipeline-signal-note { font-size: 12px; color: var(--text-faint); }

.pipeline-signal-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--zw-success-600);
}

.pipeline-signal-clear i,
.pipeline-signal-clear svg { width: 13px; height: 13px; }

/* ── Monthly quota strip (Commissions) ─────────────────────────── */
/* Carried over from the Performance screen, which buried this number
   under XP points and a leaderboard. On its own it answers the only
   question that changes what you do today: am I on target. */

.quota-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
  padding: 12px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

.quota-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.quota-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}

.quota-pct {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-light);
  color: var(--text-strong);
  letter-spacing: -0.02em;
  font-feature-settings: var(--ff-numeric);
}

.quota-pct span { font-size: 11px; color: var(--text-faint); margin-left: 1px; }

.quota-track {
  height: 5px;
  border-radius: 3px;
  background: var(--chart-track, var(--zw-ink-150));
  overflow: hidden;
}

.quota-bar {
  height: 100%;
  background: var(--zw-navy-700);
  transition: width var(--dur-slow, 340ms) var(--ease-out);
}

.quota-sub { font-size: 11.5px; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) { .quota-bar { transition: none; } }

/* ── Pipeline header ───────────────────────────────────────────── */
/* Title first, then the numbers that describe it. The figures are set
   in the display face so they carry the line, per the system's rule
   that numbers carry the message and words annotate it. */

.pipeline-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pipeline-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.pipeline-stats {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.pipeline-stats b {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE
   Per design-system/DESIGN.md and ui-kits/crm-mobile: a 68px glass tab
   bar replaces the sidebar, the page gutter drops to 16px, the pipeline
   keeps its columns and scroll-snaps rather than flattening, tables
   become stacked cards, and every target is at least 44px.
   ══════════════════════════════════════════════════════════════════ */

.mobile-tabbar { display: none; }
.sidebar-scrim { display: none; }

@media (max-width: 768px) {

  /* ── Shell ─────────────────────────────────────────────────── */
  /* The sidebar becomes an off-canvas sheet so all thirteen routes
     stay reachable; the tab bar carries the four used in the field. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }

  .sidebar.expanded,
  .sidebar.collapsed {
    width: min(280px, 82vw);
    min-width: 0;
  }

  .sidebar.mobile-open { transform: translateX(0); }

  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 119;
    background: var(--surface-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
  }

  /* Lighter by about a quarter (owner, 26 Sep): the dimmed page shows
     through the sheet's glass, so both the dimming and the glass change. */
  .sidebar-scrim.open { opacity: 0.75; visibility: visible; }
  .sidebar.mobile-open { background: rgba(255, 255, 255, 0.70); }

  /* The collapse toggle is meaningless on a phone — More opens the sheet. */
  #sidebar-collapse-btn { display: none; }

  .main-wrapper { width: 100%; min-width: 0; }

  /* 16px gutter on mobile, and room for the tab bar plus the home bar. */
  .content-area {
    padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* No top bar on a phone: the tab bar and More already reach everything
     on it, and it cost 64px of every screen. Its search moves to the top
     of More (placeSearch in app.js); the overdue count rides on the
     Agenda tab. */
  .topbar { display: none; }
  .content-area { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .sidebar-search-slot { padding: 4px 16px 12px; }
  .sidebar-search-slot .topbar-search-box { width: 100%; }
  /* What it says reads at the menu's size; what is typed stays at 16px,
     because an iPhone zooms the page into any field set smaller. */
  .sidebar-search-slot .search-input-field { height: 44px; font-size: 16px; }
  .sidebar-search-slot .search-input-field::placeholder { font-size: var(--text-body); }
  .sidebar-search-slot .search-results { left: 0; right: 0; width: auto; min-width: 0; z-index: 5; }

  .mtab { position: relative; }
  .mtab-badge {
    position: absolute;
    top: 5px;
    left: calc(50% + 5px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--zw-danger-500);
    color: #fff;
    font: 700 10px/17px var(--font-sans);
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface-app);
  }
  .mtab-badge[hidden] { display: none; }

  /* ── Tab bar ───────────────────────────────────────────────── */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 118;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: center;
    justify-content: space-around;
    background: var(--glass-fill-strong);
    backdrop-filter: blur(var(--blur-glass-strong)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-glass-strong)) saturate(150%);
    border-top: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
  }

  .mtab {
    flex: 1;
    min-width: 0;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
  }

  .mtab i, .mtab svg { width: 20px; height: 20px; }
  .mtab.active { color: var(--zw-navy-700); font-weight: var(--fw-semibold); }
  .mtab.active svg { stroke-width: 2; }

  /* The raised create button: lime with a navy +, the same as New lead
     on the desktop, so adding a lead looks the same everywhere. */
  .mtab-create {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-top: -18px;
    border-radius: var(--radius-circle);
    border: 3px solid var(--surface-app);
    background: var(--action-highlight);
    color: var(--zw-navy-700);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }

  .mtab-create:hover { background: var(--action-highlight-hover); }
  .mtab-create:active { transform: scale(0.96); }
  .mtab-create i, .mtab-create svg { width: 22px; height: 22px; stroke-width: 2.5; }

  /* A full-screen workspace owns the screen; the bar would only cover its
     last 68px and offer a tap that navigates behind it. */
  body.pw-workspace-open .mobile-tabbar { display: none; }

  /* ── Targets ───────────────────────────────────────────────── */
  /* Everything a thumb has to hit clears 44px. */
  .btn, .btn-sm,
  .pipeline-signal, .pipeline-signal-reset,
  .deal-advance-btn, .pw-action, .pw-chip-btn {
    min-height: 44px;
  }

  .search-input-field, .pw-field input, .pw-field select, .pw-field textarea,
  .pw-logger input, .pw-picker input, .pw-picker select, .pw-stage-picker select {
    min-height: 44px;
  }

  .pw-icon-btn, .pw-act-del { min-width: 44px; min-height: 44px; }
  /* Hover has no meaning on a touch screen, so the delete affordance
     cannot hide behind one. */
  .pw-act-del { opacity: 1; }

  /* The sheet's own rows are thumb targets too. */
  .nav-btn { min-height: 44px; }
  .btn-sidebar-toggle { min-width: 44px; min-height: 44px; }

  /* ── Pipeline ──────────────────────────────────────────────── */
  /* The board stays a board. Columns scroll-snap so stage context
     survives on a phone, rather than flattening into one list. */
  .pipeline-board {
    grid-auto-columns: 264px;
    gap: 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .pipeline-col { scroll-snap-align: start; min-height: 0; }

  .pipeline-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-summary-val { font-size: 21px; }
  .pipeline-title h1 { font-size: 21px; }
  .pipeline-actions { width: 100%; }
  .pipeline-filter-group { flex: 1; }
  .pipeline-filter-group .btn { flex: 1; padding: 0 8px; }
  .pipeline-signal-note { display: none; }

  /* The create action already lives in the tab bar as the raised +,
     so the header does not repeat it on a phone. */
  .pipeline-actions .btn-highlight { display: none; }

  /* ── Workspace ─────────────────────────────────────────────── */
  /* A modal that is 96vw of a phone is just a cramped page; make it
     the page, with the tab bar still reachable underneath. */
  .slide-drawer {
    top: 0;
    left: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    transform: translate(0, 0) scale(1) translateY(12px);
  }

  .slide-drawer.open { transform: translate(0, 0); }
  .pw-shell { border-radius: 0; }
  .pw-content { padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .pw-header { padding: 16px 52px 14px 16px; }
  .pw-metric-value { font-size: 22px; }

  .pw-dialog-backdrop { padding: 0; align-items: flex-end; }

  .pw-dialog {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }

  .pw-dialog-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .pw-dialog-foot .btn { flex: 1; }

  /* ── Tables become stacked cards ───────────────────────────── */
  /* DESIGN.md: tables never scroll horizontally on mobile. */
  .pw-table, .pw-table thead, .pw-table tbody,
  .pw-table tr, .pw-table th, .pw-table td { display: block; }

  .pw-table { table-layout: auto; border: none; background: transparent; }
  .pw-table thead { display: none; }

  .pw-table tbody tr {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    margin-bottom: 8px;
  }

  .pw-table tbody tr.pw-doc-file { padding: 6px 12px; }

  .pw-table td {
    width: auto !important;
    border: none;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* The column header moves onto the row as a label. */
  .pw-table td::before {
    content: attr(data-label);
    flex: 0 0 96px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--ls-micro);
    font-weight: var(--fw-semibold);
    color: var(--text-faint);
    font-family: var(--font-sans);
  }

  .pw-table td:first-child::before { display: none; }
  .pw-table td:first-child input { font-weight: var(--fw-medium); }
  .pw-table td.center { justify-content: flex-start; }
  .pw-table td.center::before { display: none; }
  .pw-table input, .pw-table select { flex: 1; min-width: 0; }

  /* ── Everything else that was built for a desk ─────────────── */
  /* Two-column splits stack; title-and-button headers wrap instead of
     shunting the button off the edge. */
  .split-2col { grid-template-columns: minmax(0, 1fr) !important; }
  .screen-head { flex-wrap: wrap; }
  .content-max-wrap { min-width: 0; }
  .content-max-wrap > div { min-width: 0; }

  .pw-tiles, .pw-tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-summary-strip, .quarter-hero-strip { grid-template-columns: 1fr; }
  .quota-strip { width: 100%; }
  .pipeline-archive-list { grid-template-columns: 1fr; }
}

/* Very narrow phones: one KPI per row rather than two cramped ones. */
@media (max-width: 400px) {
  .pipeline-summary-strip { grid-template-columns: 1fr; }
  .pw-tiles, .pw-tiles.three { grid-template-columns: 1fr; }
  .mtab span { font-size: 9px; }
}

/* ── Team & access ─────────────────────────────────────────────── */

.roster { display: flex; flex-direction: column; gap: 16px; }

.roster-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  overflow: hidden;
}

.roster-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}

.roster-group-note { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; }

.roster-group-count {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-faint);
  font-feature-settings: var(--ff-numeric);
}

.roster-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.roster-row:last-child { border-bottom: none; }
.roster-row.pending { background: var(--zw-sand-100); }

.roster-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--zw-navy-050);
  color: var(--zw-navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}

.roster-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.roster-name {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.roster-name em {
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--text-faint);
  margin-left: 6px;
}

.roster-sub { font-size: 11.5px; color: var(--text-muted); }

.roster-email {
  flex: 0 1 210px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-deals {
  flex: 0 0 68px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
  font-feature-settings: var(--ff-numeric);
}

.roster-status {
  flex: 0 0 82px;   /* "Not invited" is longer than "Invited" */
  font-size: 11.5px;
  color: var(--text-faint);
}

.roster-status.on { color: var(--zw-success-600); }

/* Added, but the email never went out. Distinct from Invited, because
   the difference decides whether anybody is waiting on a reply. */
.roster-row .roster-status:not(.on) { color: var(--text-faint); }
.roster-status.unsent { color: var(--zw-danger-600); }
.roster-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.roster-locked {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--text-faint);
}

.roster-role-select {
  height: 30px;
  padding: 0 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
}

/* Role chips use the tones the rest of the system already speaks. */
.role-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 2px 9px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.role-chip.navy  { background: var(--zw-navy-700); border-color: var(--zw-navy-700); color: var(--text-inverse); }
.role-chip.azure { background: var(--zw-navy-050); border-color: var(--zw-navy-100); color: var(--zw-navy-600); }
.role-chip.clay  { background: var(--zw-clay-100); border-color: var(--zw-clay-300); color: var(--zw-clay-700); }
.role-chip.muted { background: var(--surface-sunken); color: var(--text-muted); }

/* ── Capability matrix ─────────────────────────────────────────── */

.access-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.access-matrix th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.access-matrix th:not(:first-child) { text-align: center; }

.access-matrix td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body-color);
}

.access-matrix tbody tr:last-child td { border-bottom: none; }
.access-matrix td.center { text-align: center; }
.access-matrix .cap-yes { width: 15px; height: 15px; color: var(--zw-success-500); }
.access-matrix .cap-no { color: var(--border-strong); }

.pw-banner code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--surface-card);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

@media (max-width: 768px) {
  .roster-row { flex-wrap: wrap; }
  .roster-email, .roster-deals, .roster-status { flex: 1 1 auto; }
  .roster-actions { width: 100%; }
  .roster-role-select { flex: 1; min-height: 44px; }
  .access-matrix th, .access-matrix td { padding: 8px 10px; }
}

/* ── Sidebar footer: who you are, and the two things you do there ── */

.sidebar-footer-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--zw-navy-700);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
}

.sidebar-footer-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sidebar-footer-name {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer-role { font-size: 11px; color: var(--text-faint); }

.sidebar-footer-actions { display: flex; gap: 2px; flex: 0 0 auto; }

.footer-icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.footer-icon-btn:hover { background: var(--action-ghost-hover); color: var(--text-strong); }
.footer-icon-btn.danger:hover { background: var(--zw-danger-100); color: var(--zw-danger-600); }
.footer-icon-btn i, .footer-icon-btn svg { width: 15px; height: 15px; }

/* Collapsed, the footer is just the avatar — it stays clickable. */
.sidebar.collapsed .sidebar-footer-actions { display: none; }

@media (max-width: 768px) {
  .footer-icon-btn { width: 40px; height: 40px; }
}

/* ── Assignment ────────────────────────────────────────────────── */

.pw-header-selects { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* On a card the agent's name becomes the control, so nothing new is
   added to look at — it only becomes editable for the role that can. */
.pw-card-assign {
  flex: 1;
  min-width: 0;
  max-width: 128px;
  height: 24px;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.pw-card-assign:hover {
  border-color: var(--border-default);
  background: var(--surface-card);
  color: var(--text-strong);
}

.pw-card-assign:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--surface-card);
  color: var(--text-strong);
}

@media (max-width: 768px) {
  .pw-header-selects { justify-content: flex-start; }
  .pw-card-assign { height: 40px; max-width: none; font-size: 12px; border-color: var(--border-subtle); }
}

/* ── Roster: what each person is carrying ──────────────────────── */

.roster-book {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 92px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.roster-book b {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
}

.roster-book.muted { color: var(--text-faint); justify-content: center; }
.roster-book-value { color: var(--zw-clay-700); font-family: var(--font-display); font-feature-settings: var(--ff-numeric); }

.roster-split {
  flex: 0 0 62px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-muted);
  font-feature-settings: var(--ff-numeric);
  white-space: nowrap;
}

.roster-split b { font-size: 16px; color: var(--text-strong); font-weight: var(--fw-regular); }
.roster-split span { font-size: 11px; color: var(--text-faint); margin-left: 2px; }

/* ── Settings ──────────────────────────────────────────────────── */

.profile-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.profile-save-bar .pw-note { margin: 0; }

@media (max-width: 768px) {
  .roster-book, .roster-split { flex: 1 1 auto; min-width: 0; }
  .roster-book { flex-direction: row; gap: 10px; flex-wrap: wrap; }
  .profile-save-bar { flex-direction: column; align-items: stretch; }
  .profile-save-bar .btn { width: 100%; }
}

/* ── Floor plan ────────────────────────────────────────────────── */

.floorplan-frame {
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.floorplan-frame img {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   BOOT SCREEN
   Warm paper, navy ink, one loud green — the same three the rest of the
   system uses. Shown from the first paint, removed once the app draws.
   ══════════════════════════════════════════════════════════════════ */

#boot-screen {
  position: fixed;
  inset: 0;
  /* Above the sign-in screen, which is 9999 — while the app is still
     deciding what to show, the boot screen covers everything. */
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--surface-app, #F6F3EE);
  background-image: var(--gradient-ambient);
  opacity: 1;
  transition: opacity 260ms cubic-bezier(.22, .61, .36, 1);
}

#boot-screen.done {
  opacity: 0;
  pointer-events: none;
}

.boot-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boot-mark img {
  display: block;
  width: 40px;
  height: auto;
  position: relative;
  z-index: 1;
}

/* A single lime ring breathing out from the mark — the one loud green. */
.boot-pulse {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid var(--zw-lime-500, #D8F23F);
  opacity: 0;
  animation: boot-pulse 1900ms cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes boot-pulse {
  0%   { transform: scale(0.72); opacity: 0; }
  35%  { opacity: 0.85; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* The bar is grey, and the thing travelling along it is navy with a lime
   leading edge — so the accent reads as progress, not decoration. */
.boot-track {
  position: relative;
  width: 168px;
  height: 3px;
  border-radius: 2px;
  background: var(--zw-ink-150, #DED9D1);
  overflow: hidden;
}

.boot-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 42%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--zw-navy-700, #112749) 0%,
    var(--zw-navy-500, #274A7D) 62%,
    var(--zw-lime-500, #D8F23F) 100%
  );
  animation: boot-sweep 1400ms cubic-bezier(.45, .05, .35, 1) infinite;
}

@keyframes boot-sweep {
  0%   { left: -45%; }
  100% { left: 100%; }
}

.boot-label {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px;
  color: var(--text-muted, #6E7073);
  letter-spacing: 0.01em;
}

/* Something went wrong and the app never drew: say so rather than
   spinning at the person indefinitely. */
#boot-screen.stalled .boot-bar { animation: none; width: 100%; background: var(--zw-warning-500, #BF8418); }
#boot-screen.stalled .boot-pulse { animation: none; opacity: 0; }
#boot-screen.stalled .boot-label { color: var(--zw-warning-600, #9A6A12); }

@media (prefers-reduced-motion: reduce) {
  .boot-pulse { animation: none; opacity: 0.5; }
  .boot-bar { animation: none; width: 100%; }
  #boot-screen { transition: none; }
}

/* ── Button icons, one standard everywhere ─────────────────────── */
/* Lucide replaces each <i data-lucide> with an <svg> carrying its own
   24px default, so an icon is 24px unless something names `svg`. The
   earlier rules did that only inside the workspace and its dialogs, which
   left every other screen's buttons at double size.
   12px is the pipeline's standard; the specific rules above still win
   where a button wants 11 or 13, and inline styles win over both. */

.btn i,
.btn svg,
.footer-icon-btn i,
.footer-icon-btn svg,
.roster-actions .btn i,
.roster-actions .btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Nothing in the app is a 24px icon. An empty state is the largest at 22,
   and it sets that itself — so this is a ceiling, not a size. */
#content-viewport svg.lucide,
.roster-row svg.lucide,
.access-matrix svg.lucide {
  max-width: 22px;
  max-height: 22px;
}

/* ══════════════════════════════════════════════════════════════════
   THE AGENDA
   One list of everything scheduled, grouped by when you act on it.
   Density matters more than decoration here: this is a page you scan
   between calls, not one you sit and read.
   ══════════════════════════════════════════════════════════════════ */

.agenda-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

/* A commission whose deal is still in Payment (no completion date yet),
   and one whose deal went back a stage (on hold, not counted). */
.commission-inpayment { color: var(--zw-azure-700); font-weight: 500; }
.commission-onhold td { opacity: .62; }

/* The birthday: one date field; how far off it is shows in its label. */
.pw-field .pw-label-error { color: var(--zw-danger-600); }
.pw-birthday-note {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 6px; font-size: 12px; color: var(--text-muted);
}
.pw-birthday-note svg { width: 14px; height: 14px; color: var(--zw-clay-600); }
.pw-birthday-note.error { color: var(--zw-danger-600); }
.pw-birthday-clear {
  border: 0; background: none; padding: 2px 0; font: inherit; cursor: pointer;
  color: var(--text-body-color); text-decoration: underline; text-underline-offset: 2px;
}
.pw-card-sched.birthday { color: var(--zw-clay-700); }
.pw-card-sched.birthday svg { color: var(--zw-clay-600); }
/* The pipeline at a glance — counted from the board (M-03, M-11). */
.glance-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.glance-head { display: flex; flex-direction: column; gap: 2px; }
.glance-title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.glance-sub { font-size: 12px; color: var(--text-muted); }
.glance-stages { display: flex; flex-direction: column; gap: 8px; }
.glance-stage { display: grid; grid-template-columns: 108px 1fr 28px; align-items: center; gap: 10px; font-size: 12.5px; }
.glance-stage-label { color: var(--text-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glance-bar { height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.glance-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--chart-1, var(--zw-navy-500)); }
.glance-stage-count { text-align: right; font-feature-settings: var(--ff-numeric); color: var(--text-strong); }
.glance-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
.glance-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 4px; border: 0; background: none; font: inherit; text-align: left;
  color: var(--text-body-color); cursor: pointer; border-radius: var(--radius-sm);
}
.glance-row:hover { background: var(--surface-sunken); }
.glance-icon { display: inline-flex; color: var(--text-muted); }
.glance-icon svg { width: 14px; height: 14px; }
.glance-label { flex: 1; font-size: 13px; }
.glance-count { font-feature-settings: var(--ff-numeric); font-weight: 600; color: var(--text-strong); }

/* A dashboard tile is a way into the records it counts (M-03). */
.stat-tile-link {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.stat-tile-link:hover { border-color: var(--border-strong, var(--border-subtle)); }
.stat-tile-link:focus-visible { outline: 2px solid var(--zw-navy-500, currentColor); outline-offset: 2px; }
.stat-tile-go { width: 14px; height: 14px; color: var(--text-muted); }
.stat-tiles-asof {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Where an Agenda item came from, when that is not the CRM (M-05). */
.agenda-origin {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-default);
  font-size: 11px;
  line-height: 18px;
  vertical-align: 1px;
}

.agenda-row[role="button"]:focus-visible {
  outline: 2px solid var(--zw-navy-500, currentColor);
  outline-offset: 2px;
}

/* The bell counts what is overdue in the Agenda — it used to say "No
   unread alerts" whatever was true (M-04). */
.bell-btn { position: relative; }
.bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--zw-danger-600);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.bell-count[hidden] { display: none; }

/* When the calendar last synced, in words, where people look (H-07). */
.gcal-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.gcal-line svg { width: 14px; height: 14px; flex: none; }
.gcal-line.warn { color: var(--zw-warning-600); }
.gcal-how {
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  color: var(--text-body-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.gcal-how:hover { color: var(--text-strong); }
.gcal-how:focus-visible { outline: 2px solid var(--zw-navy-500, currentColor); outline-offset: 2px; border-radius: 2px; }

.agenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.agenda-chip svg { width: 12px; height: 12px; }
.agenda-chip b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
}

.agenda-chip:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-strong); }

.agenda-chip.on {
  background: var(--zw-navy-700);
  border-color: var(--zw-navy-700);
  color: #fff;
}
.agenda-chip.on b { color: rgba(255, 255, 255, 0.7); }

/* A chip with nothing behind it stays visible but unclickable, so the
   set of kinds reads as a fixed vocabulary rather than a shifting menu. */
.agenda-chip:disabled { opacity: 0.4; cursor: default; }

.agenda-group { margin-bottom: 18px; }

.agenda-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px 7px;
}

.agenda-group-label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--text-muted);
}

.agenda-group.overdue .agenda-group-label { color: var(--zw-danger-600); }

.agenda-group-note { font-size: 11.5px; color: var(--text-faint); }
.agenda-group-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

.agenda-list { padding: 0; overflow: hidden; }

.agenda-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.12s ease;
}

.agenda-row:last-child { border-bottom: none; }
.agenda-row:hover { background: var(--surface-sunken); }

/* Overdue earns a mark, not a colour wash: the row still has to be as
   readable as every other one. */
.agenda-row.overdue { box-shadow: inset 2px 0 0 var(--zw-danger-600); }

.agenda-time {
  flex: 0 0 62px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.agenda-time b {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.agenda-time em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-faint);
}

.agenda-kind {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.agenda-kind svg { width: 13px; height: 13px; }
.agenda-kind.clay    { background: var(--zw-clay-100);    color: var(--zw-clay-600); }
.agenda-kind.azure   { background: var(--zw-azure-100);   color: var(--zw-azure-700); }
.agenda-kind.navy    { background: var(--zw-navy-050);    color: var(--zw-navy-600); }
.agenda-kind.success { background: var(--zw-success-100); color: var(--zw-success-600); }

.agenda-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }

.agenda-title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-go { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }

@media (max-width: 720px) {
  .agenda-row { gap: 9px; padding: 10px; }
  .agenda-time { flex-basis: 58px; }
  .agenda-sub { white-space: normal; }
  .agenda-chips { gap: 5px; }
  .agenda-chip { padding: 5px 8px; font-size: 11.5px; }
}

/* A card whose stage the database would not accept. It sits where you
   put it, and says plainly that the move has not left this browser —
   otherwise it looks identical to one that saved, right up until the
   next reload moves it back. */
.deal-card.unsaved { box-shadow: inset 0 0 0 1px var(--zw-warning-500, #B8860B); }

.pw-card-unsaved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--radius-chip);
  background: var(--zw-warning-100, #FBF3E2);
  color: var(--zw-warning-600, #8A6A16);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.pw-card-unsaved svg { width: 10px; height: 10px; }

/* The unsaved badge is a button: the only useful response to "this did
   not save" is a way to save it, not a label. */
.pw-card-unsaved { border: none; cursor: pointer; font-family: inherit; }
.pw-card-unsaved:hover { background: var(--zw-warning-200, #F2E4C4); }

/* ══════════════════════════════════════════════════════════════════
   GLOBAL SEARCH RESULTS
   Built from tokens rather than inline Tailwind greys, and made of real
   buttons so the list works from the keyboard.
   ══════════════════════════════════════════════════════════════════ */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 300px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(17, 39, 73, 0.12));
  z-index: 1000;
  padding: 4px 0;
}
.search-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--text-muted);
}
.search-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.search-item:hover, .search-item:focus-visible { background: var(--surface-sunken); outline: none; }
.search-title { font-size: 13px; font-weight: 500; color: var(--text-strong); }
.search-sub { font-size: 11.5px; color: var(--text-muted); }
.search-empty { padding: 12px; font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ══════════════════════════════════════════════════════════════════
   TAP TARGETS ON A PHONE  (audit M-14)
   At 375px, 24 of 44 targets on Listings, 10 of 23 on the Dashboard and
   9 of 24 on the Agenda were under 32px. On a phone every control is at
   least 44px in each direction it can be missed in. min-height wins over
   an inline height, so the small desktop buttons need no rewrite.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  button, .btn, [role="button"], a.btn, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .agenda-chip, .search-item, .gcal-how {
    min-height: 44px;
  }
  /* Icon-only controls get the width too. */
  button:has(> svg:only-child), button:has(> i:only-child),
  .btn-sidebar-toggle, .pw-close {
    min-width: 44px;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 22px;
    height: 22px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   COMMISSIONS — a board of collection stages, a list, and a drawer
   where each commission is moved, dated and noted.
   ══════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.finance-metric-card .metric-unit {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-faint);
  margin-left: 6px;
  letter-spacing: 0.02em;
}
.finance-metric-card.good .metric-value { color: var(--zw-success-600); }
.finance-metric-card.late .metric-value { color: var(--zw-danger-600); }

/* Stage colours, in order: waiting, in, protocoled, invoiced, paid. */
.comm-s-documents_pending { background: var(--zw-warning-500); }
.comm-s-documents_received { background: var(--zw-clay-500); }
.comm-s-commission_protocoled { background: var(--zw-azure-500); }
.comm-s-invoice_sent { background: var(--zw-navy-500); }
.comm-s-payment_received { background: var(--zw-success-500); }

.comm-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.comm-toolbar .finance-filter-tabs { margin-bottom: 0; }
.comm-tab-count {
  font-style: normal;
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 2px;
  font-feature-settings: "tnum";
}
.comm-focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--zw-navy-700);
  background: rgba(17, 39, 73, 0.06);
  color: var(--zw-navy-700);
  font: 600 12px var(--font-sans);
  cursor: pointer;
}
.comm-focus-chip i, .comm-focus-chip svg { width: 12px; height: 12px; }
.comm-hint { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 180px; }
.comm-view-toggle { display: flex; gap: 4px; margin-left: auto; }
.comm-view-toggle .btn { height: 30px; }
.comm-view-toggle i, .comm-view-toggle svg { width: 13px; height: 13px; }

/* ── Board ─────────────────────────────────────────────────────── */
.comm-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 14px;
  align-items: start;
  overflow-x: auto;
  padding: 4px 0 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.comm-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 12px;
  min-height: 360px;
  transition: border-color var(--dur-fast, 140ms) var(--ease-out, ease-out),
              background var(--dur-fast, 140ms) var(--ease-out, ease-out),
              opacity var(--dur-fast, 140ms) var(--ease-out, ease-out);
}
.comm-col.drag-over {
  border-color: var(--zw-navy-700);
  background: rgba(17, 39, 73, 0.05);
  box-shadow: inset 0 0 0 1px var(--zw-navy-700);
}
.comm-col.no-drop { opacity: 0.45; }
.comm-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.comm-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.comm-col-name { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.comm-col-total {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
}
.comm-col-cards { display: flex; flex-direction: column; gap: 10px; }
.comm-col-empty {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-control);
  padding: 22px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}
.comm-col-more {
  border: none;
  background: none;
  color: var(--zw-navy-600);
  font: 500 12px var(--font-sans);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
}

.comm-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 12px 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--dur-fast, 140ms) var(--ease-out, ease-out),
              transform var(--dur-fast, 140ms) var(--ease-out, ease-out);
}
.comm-card:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(17, 39, 73, 0.08)); }
.comm-card[draggable="true"] { cursor: grab; }
.comm-card.dragging { opacity: 0.45; transform: scale(0.98); }
.comm-card.late { box-shadow: inset 3px 0 0 var(--zw-danger-500), var(--shadow-xs); }
.comm-card.onhold { opacity: 0.6; border-style: dashed; }
.comm-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.comm-card-client {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: var(--fw-semibold) 13.5px var(--font-sans);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comm-card-client:hover { text-decoration: underline; }
.comm-card-head .market-badge { margin-left: auto; flex-shrink: 0; }
.comm-card-deal {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comm-card-amount { font-size: 11px; color: var(--text-faint); font-feature-settings: "tnum"; }
.comm-card-amount b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-strong);
}
.comm-card-amount em { font-style: normal; margin-left: 4px; }

.comm-stepper { display: inline-flex; gap: 4px; align-items: center; }
.comm-pip {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--zw-ink-150, #e3e0da);
}
.comm-pip.done { background: var(--zw-success-500); }
.comm-pip.current { background: var(--zw-warning-500); }

.comm-next {
  font-size: 12px;
  color: var(--text-body-color, var(--text-muted));
  line-height: 1.35;
}
.comm-next b { font-weight: 600; color: var(--text-strong); }
.comm-next.undated b { color: var(--text-faint); font-weight: 500; }
.comm-next.late, .comm-next.late b { color: var(--zw-danger-600); }
.comm-next.done { color: var(--zw-success-600); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.comm-next.done i, .comm-next.done svg { width: 13px; height: 13px; }

.comm-card-foot { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.comm-card-age { font-size: 11px; color: var(--text-faint); margin-right: auto; }
.comm-back {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
}
.comm-back:hover { color: var(--text-strong); border-color: var(--border-strong); }
.comm-back i, .comm-back svg { width: 14px; height: 14px; }
.comm-advance { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.comm-advance i, .comm-advance svg { width: 13px; height: 13px; }

/* ── List ──────────────────────────────────────────────────────── */
.comm-list-wrap { padding: 0; overflow-x: auto; }
.comm-list { min-width: 820px; }
.comm-list tr.late td:first-child { box-shadow: inset 3px 0 0 var(--zw-danger-500); }
.comm-row-open {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.comm-row-open:hover { text-decoration: underline; }
.comm-stage-name { font-size: 11.5px; color: var(--text-muted); }
.comm-col-act { text-align: right; width: 1%; white-space: nowrap; }
.comm-aed { font-size: 11px; color: var(--text-faint); }
.comm-empty-row { text-align: center; padding: 36px !important; color: var(--text-faint); font-size: 13px; }
.commission-onhold td { opacity: 0.6; }

.comm-empty {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.comm-empty > i, .comm-empty > svg { width: 26px; height: 26px; color: var(--text-faint); }
.comm-empty-title { font-size: 15px; color: var(--text-strong); font-weight: 600; }
.comm-empty-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }

/* ── Drawer ────────────────────────────────────────────────────── */
.slide-drawer.comm-drawer-open { max-width: 640px; }
.comm-drawer {
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  overflow-y: auto;
}
.comm-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.comm-drawer-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comm-drawer-title h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--text-strong);
  margin: 0;
}
.comm-drawer-title > span:last-child { font-size: 13px; color: var(--text-muted); }
.comm-drawer-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.comm-drawer-actions .btn i, .comm-drawer-actions .btn svg { width: 13px; height: 13px; }

.comm-now {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-sunken);
}
.comm-now-stage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-strong);
}
.comm-now-text { font-size: 12.5px; color: var(--text-muted); margin-left: auto; }

.comm-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.comm-figures > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-card);
  min-width: 0;
}
.comm-figures span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 500;
}
.comm-figures b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 17px;
  color: var(--text-strong);
  font-feature-settings: "tnum";
}
.comm-figures small { font-size: 11px; color: var(--text-faint); }
.comm-figures em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }

.comm-section { display: flex; flex-direction: column; gap: 10px; }
.comm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.comm-section-head h3 {
  font-family: var(--font-ui, var(--font-sans));
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-strong);
  margin: 0;
}
.comm-section-head span { font-size: 12px; color: var(--text-faint); }
.comm-muted { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

.comm-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.comm-steps::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--border-subtle);
}
.comm-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.comm-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--surface-card, #fff);
  background: var(--zw-ink-150, #e3e0da);
  color: #fff;
  z-index: 1;
}
.comm-step-dot i, .comm-step-dot svg { width: 13px; height: 13px; }
.comm-step.done .comm-step-dot { background: var(--zw-success-500); }
.comm-step.current .comm-step-dot { background: var(--zw-warning-500); box-shadow: 0 0 0 4px var(--zw-warning-100); }
.comm-step.late .comm-step-dot { background: var(--zw-danger-500); box-shadow: 0 0 0 4px var(--zw-danger-100); }
.comm-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.comm-step-title { font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.comm-step.pending .comm-step-title { color: var(--text-muted); }
.comm-step-state { font-size: 11px; color: var(--text-faint); }
.comm-step-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.comm-step-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.comm-step-field input {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  font: 12.5px var(--font-sans);
  color: var(--text-strong);
}
.comm-late { font-size: 11.5px; font-weight: 600; color: var(--zw-danger-600); }
.comm-step-done { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 4px; }
.comm-step-done i, .comm-step-done svg { width: 13px; height: 13px; }
.comm-steps-foot { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.comm-undo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 4px 0;
  font: 500 12px var(--font-sans);
  color: var(--zw-navy-600);
  cursor: pointer;
}
.comm-undo:hover { text-decoration: underline; }
.comm-undo i, .comm-undo svg { width: 13px; height: 13px; }

.comm-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.comm-docs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-strong);
}
.comm-docs li i, .comm-docs li svg { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.comm-docs li.in i, .comm-docs li.in svg { color: var(--zw-success-500); }
.comm-docs li em { font-style: normal; margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.comm-section > .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.comm-section > .btn i, .comm-section > .btn svg { width: 13px; height: 13px; }

.comm-note-input { display: flex; gap: 8px; }
.comm-note-input input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font: 13px var(--font-sans);
  color: var(--text-strong);
}
.comm-note-input .btn { display: inline-flex; align-items: center; gap: 6px; }
.comm-note-input .btn i, .comm-note-input .btn svg { width: 12px; height: 12px; }
.comm-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comm-entry { display: flex; gap: 10px; align-items: flex-start; }
.comm-entry > i, .comm-entry > svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--zw-navy-050);
  color: var(--zw-navy-600);
  box-sizing: border-box;
}
.comm-entry.stage > i, .comm-entry.stage > svg { background: var(--zw-success-100); color: var(--zw-success-600); }
.comm-entry > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.comm-entry-text { font-size: 13px; color: var(--text-strong); line-height: 1.45; overflow-wrap: anywhere; }
.comm-entry-meta { font-size: 11px; color: var(--text-faint); }

@media (max-width: 767px) {
  .comm-board { grid-auto-columns: minmax(82vw, 1fr); scroll-snap-type: x mandatory; }
  .comm-col { scroll-snap-align: start; min-height: 240px; }
  .comm-hint { display: none; }
  .comm-view-toggle { margin-left: 0; }
  .comm-back { width: 44px; height: 44px; }
  .comm-advance, .comm-step-done, .comm-view-toggle .btn, .comm-focus-chip { min-height: 44px; }
  .comm-card-client, .comm-row-open, .comm-undo, .comm-col-more { min-height: 44px; }
  .comm-drawer { padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .comm-figures { grid-template-columns: 1fr 1fr; }
  .comm-figures > div:last-child { grid-column: 1 / -1; }
  .comm-step { flex-wrap: wrap; }
  .comm-step-done { width: 100%; justify-content: center; margin-left: 40px; width: calc(100% - 40px); }
  .comm-step-field input, .comm-note-input input { height: 44px; font-size: 16px; }
  .comm-note-input .btn { min-height: 44px; }
  .comm-now-text { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .comm-card, .comm-col { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   DEAL WORKSPACE — a third for the head, two thirds for the fields.
   The head (who, where the deal stands, what to do) and the sections
   under it take the left third; the fields being filled in take the
   rest, full height. Narrow screens keep the stacked layout.
   ══════════════════════════════════════════════════════════════════ */

.pw-side { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; }
.pw-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.pw-main-head { display: none; }

@media (min-width: 901px) {
  .pw-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .pw-side {
    min-height: 0;
    overflow-y: auto;
    background: var(--surface-sunken);
    border-right: 1px solid var(--border-subtle);
    scrollbar-width: thin;
  }

  .pw-side .pw-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: none;
  }
  .pw-close-head { display: none; }

  /* Avatar beside the name; the details and actions under both. */
  .pw-side .pw-header-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 9px;
    align-items: center;
    flex: none;
  }
  .pw-side .pw-identity { display: contents; }
  .pw-side .pw-name-row { grid-column: 2; }
  .pw-side .pw-sub,
  .pw-side .pw-quick { grid-column: 1 / -1; }
  .pw-side .pw-sub { flex-direction: column; gap: 3px; }
  .pw-side .pw-sub span { overflow-wrap: anywhere; }
  .pw-side .pw-quick { margin-top: 0; }

  .pw-side .pw-header-side {
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .pw-side .pw-header-selects { flex-direction: column; gap: 8px; justify-content: flex-start; }
  .pw-side .pw-stage-picker { display: grid; grid-template-columns: 84px minmax(0, 1fr); }
  .pw-side .pw-stage-picker select { width: 100%; min-width: 0; }
  .pw-side .pw-metric-sub,
  .pw-side .pw-followup { align-self: flex-start; }

  .pw-side .pw-nav {
    width: auto;
    flex: 1 0 auto;
    border-right: none;
    padding: 6px 0 12px;
    overflow: visible;
  }
  .pw-side .pw-nav-item { padding: 7px 18px; }

  .pw-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 26px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-card);
    flex-shrink: 0;
  }
  .pw-main-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: var(--fw-regular);
    color: var(--text-strong);
  }
  .pw-main-title i,
  .pw-main-title svg { width: 16px; height: 16px; color: var(--text-muted); }

  /* Over the white fields, not the navy head: a light button. */
  .pw-close-main {
    position: static;
    flex-shrink: 0;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-strong);
  }
  .pw-close-main:hover { background: var(--surface-sunken); }
}

/* Narrow screens: one page. The head scrolls away, the section tabs stay
   pinned to the top, and the fields get the screen — the head was more
   than half a phone's height and never moved. */
@media (max-width: 900px) {
  .pw-shell { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .pw-side { display: contents; }
  .pw-shell > .pw-side > .pw-header,
  .pw-header { flex-shrink: 0; }
  .pw-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
    background: var(--surface-sunken);
    padding-right: 64px;   /* room for the close button pinned above it */
  }
  .pw-nav-item { padding: 10px 15px; justify-content: center; }
  .pw-main { flex: none; min-height: auto; }
  .pw-content { flex: none; overflow: visible; }
  .pw-close-head {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 5;
  }
}

/* ── Booked activities (Activity tab) ──────────────────────────── */
/* A viewing, call or meeting booked ahead: when, what, and Done. */
.pw-act-plan-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pw-act-plan-actions .btn { display: inline-flex; align-items: center; gap: 5px; }
.pw-act-plan-actions .btn i,
.pw-act-plan-actions .btn svg { width: 12px; height: 12px; }
.pw-act-plan-actions .pw-act-del { position: static; opacity: 1; width: 30px; height: 30px; }
.pw-act-planned.late .pw-act-time { color: var(--zw-danger-600); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   THE EXECUTION CARD (dashboard) — done, still to do, missed; today
   and this week; and the next thing to do. White on navy; lime is
   progress and completion; red only for what was missed.
   ══════════════════════════════════════════════════════════════════ */
.navy-hero { gap: 12px; }

.exec-today { display: flex; align-items: center; gap: 16px; }
.exec-ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.exec-ring svg { width: 76px; height: 76px; }
.exec-ring svg { transform: rotate(-90deg); display: block; }
.exec-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 7; }
.exec-ring-fill {
  fill: none;
  stroke: var(--action-highlight);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms var(--ease-out, ease-out);
}
.exec-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 20px;
  font-feature-settings: "tnum";
}
.exec-today-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exec-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.exec-today-text b { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 19px; }
.exec-today-text span:last-child { font-size: 12.5px; opacity: 0.8; }

.exec-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exec-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast, 140ms) var(--ease-out, ease-out);
}
.exec-tile:hover { background: rgba(255, 255, 255, 0.14); }
.exec-tile b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.exec-tile span { font-size: 11px; opacity: 0.8; line-height: 1.25; }
.exec-tile.late { background: rgba(188, 66, 52, 0.22); border-color: rgba(239, 208, 203, 0.45); }
.exec-tile.late b, .exec-tile.late span { color: var(--zw-danger-200); opacity: 1; }
.exec-tile.late b i, .exec-tile.late b svg { width: 16px; height: 16px; }

.exec-week { display: flex; flex-direction: column; gap: 6px; }
.exec-week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; }
.exec-week-head > span:first-child { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; opacity: 0.7; }
.exec-trend { opacity: 0.85; }
.exec-trend b.up { color: var(--action-highlight); font-weight: 600; }
.exec-trend b.down { color: var(--zw-danger-200); font-weight: 600; }
.exec-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 44px; align-items: end; }
.exec-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.exec-bar .exec-fill {
  display: block;
  width: 100%;
  max-width: 22px;
  border-radius: 4px 4px 2px 2px;
  background: rgba(255, 255, 255, 0.55);
  min-height: 2px;
}
.exec-bar.today .exec-fill { background: var(--action-highlight); }
.exec-bar.ahead .exec-fill { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.3); height: 8px !important; }
.exec-bar em { font-style: normal; font-size: 10px; opacity: 0.65; line-height: 1; }
.exec-bar.today em { opacity: 1; font-weight: 600; }

.exec-next {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: auto;
}
.exec-next.late { border-color: rgba(239, 208, 203, 0.45); }
.exec-next-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
}
.exec-next.late .exec-next-label { background: var(--zw-danger-500); color: #fff; }
.exec-next-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.exec-next-open > i, .exec-next-open > svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
.exec-next-text { display: flex; flex-direction: column; min-width: 0; }
.exec-next-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exec-next.empty .exec-next-title { font-weight: 400; opacity: 0.85; }
.exec-next-when { font-size: 11.5px; opacity: 0.75; }
.exec-next-done {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--action-highlight);
  color: var(--zw-navy-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.exec-next-done:hover { background: var(--action-highlight-hover); }
.exec-next-done i, .exec-next-done svg { width: 16px; height: 16px; stroke-width: 2.5; }

@media (max-width: 768px) {
  .exec-tile, .exec-next-open { min-height: 44px; }
  .exec-next-done { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .exec-ring-fill { transition: none; } }

/* ── Agenda filters on a phone ────────────────────────────────────
   Every filter stays, in one row that scrolls sideways instead of five
   rows before the first item. The ones with something behind them come
   first; the empty ones follow, as they were. On a wide screen the set
   wraps in its fixed order. */
@media (max-width: 767px) {
  .agenda-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px 12px;
    padding: 2px 16px 4px;
    scroll-padding-left: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }
  .agenda-chips::-webkit-scrollbar { display: none; }
  .agenda-chip { flex: 0 0 auto; white-space: nowrap; }
  .agenda-chip.empty { order: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   LISTINGS — the inventory
   Cards follow design-system/components/realty/PropertyCard: 16:10
   media with the status top-left, the price leading in Jost light and
   larger than the title, the warm gradient when there is no photo.
   Actions sit in one small "⋯" menu instead of buttons on every photo.
   ══════════════════════════════════════════════════════════════════ */

/* Status tones the listing vocabulary uses (DS Badge: navy = active,
   neutral = out of play). */
.badge.navy { background: var(--zw-navy-050); color: var(--zw-navy-700); border: 1px solid var(--zw-navy-100); }
.badge.neutral { background: var(--zw-ink-100); color: var(--text-body-color); border: 1px solid var(--zw-ink-150); }
.market-badge.penthouse { background: rgba(17, 39, 73, 0.08); color: var(--zw-navy-700); }
.market-badge.unset { background: transparent; color: var(--text-faint); border: 1px dashed var(--border-default); }

.lst-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.lst-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lst-head h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-light);
  color: var(--text-strong);
  margin: 0;
}
.lst-sub { font-size: 13px; color: var(--text-muted); }
.lst-head-actions { display: flex; gap: 8px; align-items: center; }
.lst-head-actions .btn i, .lst-head-actions .btn svg { width: 13px; height: 13px; }
.lst-banner { margin: 0 0 16px; align-items: flex-start; }
.lst-banner > span { flex: 1; min-width: 0; }
.lst-banner .btn { flex-shrink: 0; }

/* ── Toolbar ─────────────────────────────────────────────────────── */
.lst-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lst-toolbar .finance-filter-tabs { margin-bottom: 0; }
.lst-tabs .finance-filter-tab { white-space: nowrap; }
.lst-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lst-select select {
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background-color: var(--surface-card);
  font: var(--fw-medium) 12.5px var(--font-sans);
  color: var(--text-strong);
  cursor: pointer;
}
.lst-select select:focus, .lst-search input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.lst-search { position: relative; flex: 1 1 140px; max-width: 260px; min-width: 120px; }
.lst-search svg, .lst-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  pointer-events: none;
}
.lst-search input {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font: 12.5px var(--font-sans);
  color: var(--text-strong);
}
.lst-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-control);
  flex-shrink: 0;
}
.lst-seg button {
  height: 24px;
  min-width: 34px;
  padding: 0 9px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font: var(--fw-medium) 12px var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: var(--transition-control);
}
.lst-seg button:hover { color: var(--text-strong); }
.lst-seg button[aria-pressed="true"] {
  background: var(--surface-card);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-xs);
}
.lst-seg svg { width: 14px; height: 14px; }
.lst-display { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Desktop: two tidy rows. On top, what you are looking at (the type)
   and how it is shown (currency, cards or table); beneath, the search
   and the two filters, their right edges lined up with the switches.
   Phones keep their own stacked order, below. */
@media (min-width: 768px) {
  .lst-toolbar {
    display: grid;
    /* The search keeps a usable width on a narrow screen; the filters
       give way first. */
    grid-template-columns: minmax(200px, 1fr) minmax(140px, 190px) minmax(150px, 190px);
    grid-template-areas:
      "tabs   tabs    display"
      "search status  loc";
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
  }
  .lst-filters { display: contents; }
  .lst-tabs { grid-area: tabs; justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .lst-tabs::-webkit-scrollbar { display: none; }
  .lst-display { grid-area: display; justify-self: end; }
  .lst-search { grid-area: search; max-width: none; min-width: 0; }
  .lst-status { grid-area: status; }
  .lst-loc { grid-area: loc; }
  .lst-select select { width: 100%; height: 36px; }
  .lst-search input { height: 36px; }
  /* The switches sit at the height of the type tabs beside them. */
  .lst-seg button { height: 26px; }
}
.lst-showing {
  margin: -4px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lst-link {
  border: none;
  background: none;
  padding: 0;
  font: var(--fw-semibold) 12px var(--font-sans);
  color: var(--zw-navy-600);
  cursor: pointer;
}
.lst-link:hover { text-decoration: underline; }

/* ── Cards ───────────────────────────────────────────────────────── */
.lst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.lst-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-surface);
  min-width: 0;
}
.lst-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lst-card.is-sold .lst-cover img { filter: saturate(0.55); }
.lst-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--zw-ink-100);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lst-cover.empty { background: var(--gradient-warm); color: var(--zw-sand-600); }
.lst-cover > svg { width: 26px; height: 26px; opacity: 0.7; display: none; }
.lst-cover.empty > svg { display: block; }
.lst-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-cover-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 56px);
}
.lst-cover-tags .badge { box-shadow: var(--shadow-xs); }
.lst-more {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.lst-more:hover { background: var(--surface-card); border-color: var(--border-strong); }
.lst-more svg { width: 16px; height: 16px; }
.lst-cover .lst-more { position: absolute; top: 8px; right: 8px; }
.lst-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--gutter-card-tight);
  flex: 1;
  min-width: 0;
}
.lst-price { display: flex; align-items: baseline; gap: 5px; }
.lst-price b {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--text-metric-m);
  line-height: 1;
  letter-spacing: -0.015em;
  font-feature-settings: var(--ff-numeric);
  color: var(--text-strong);
}
.lst-price span { font-family: var(--font-display); font-size: 13px; color: var(--text-muted); }
.lst-price b.lst-noprice { font-size: 17px; color: var(--text-muted); letter-spacing: 0; }
.lst-price-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  font-feature-settings: var(--ff-numeric);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
}
.lst-vs { font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.lst-vs.down { color: var(--zw-success-600); }
.lst-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}
.lst-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  min-width: 0;
}
.lst-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.lst-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  font-size: 11.5px;
  color: var(--text-muted);
  min-width: 0;
}
.lst-body .lst-foot { margin-top: 8px; }
.lst-foot > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Off-plan: units under their project, like a developer's price list. */
.lst-group { margin-bottom: 22px; }
.lst-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.lst-group-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-regular);
  color: var(--text-strong);
}
.lst-group-head div > span { font-size: 12px; color: var(--text-muted); }
.lst-group-count { font-size: 12px; color: var(--text-faint); white-space: nowrap; font-feature-settings: var(--ff-numeric); }

.lst-empty {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.lst-empty > i, .lst-empty > svg { width: 26px; height: 26px; color: var(--text-faint); }
.lst-empty-title { font-size: 15px; color: var(--text-strong); font-weight: var(--fw-semibold); }
.lst-empty-sub { font-size: 13px; color: var(--text-muted); max-width: 420px; margin-bottom: 6px; }

/* ── Table ───────────────────────────────────────────────────────── */
.lst-table-wrap { padding: 0; overflow: hidden; }
.lst-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.lst-table th {
  padding: 10px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.lst-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-body-color); vertical-align: middle; }
.lst-table tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.lst-table tbody tr:hover { background: var(--zw-ink-050); }
.lst-table tbody tr:last-child td { border-bottom: none; }
.lst-table .num { text-align: right; font-feature-settings: var(--ff-numeric); white-space: nowrap; }
.lst-table td.num b { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 14px; color: var(--text-strong); }
.lst-table small { font-size: 11px; color: var(--text-faint); }
.lst-table td .lst-vs { display: block; font-size: 11px; }
.lst-cell-prop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lst-thumb {
  flex: 0 0 48px;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--zw-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lst-thumb.empty { background: var(--gradient-warm); color: var(--zw-sand-600); }
.lst-thumb svg { width: 14px; height: 14px; display: none; }
.lst-thumb.empty svg { display: block; }
.lst-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-cell-name { display: flex; flex-direction: column; min-width: 0; }
.lst-cell-name b { font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.lst-col-act { width: 1%; text-align: right; }

/* ── The "⋯" menu ────────────────────────────────────────────────── */
.lst-menu {
  position: fixed;
  z-index: 150;
  min-width: 200px;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.lst-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font: var(--fw-medium) 13px var(--font-sans);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}
.lst-menu button:hover, .lst-menu button:focus-visible { background: var(--action-ghost-hover); outline: none; }
.lst-menu svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

/* ── Drawer ──────────────────────────────────────────────────────── */
.slide-drawer.lst-drawer-open { max-width: 720px; }
.lst-drawer {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 28px;
}
/* A column with a fixed height squeezes its children instead of
   scrolling them unless they are told not to shrink. */
.lst-drawer > * { flex-shrink: 0; }
.lst-drawer > :not(.lst-dr-cover) { margin-left: 24px; margin-right: 24px; }
.lst-dr-cover {
  position: relative;
  flex-shrink: 0;
  height: 240px;
  background: var(--zw-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lst-dr-cover.empty { background: var(--gradient-warm); color: var(--zw-sand-600); height: 150px; }
.lst-dr-cover > svg { width: 30px; height: 30px; opacity: 0.7; display: none; }
.lst-dr-cover.empty > svg { display: block; }
.lst-dr-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-dr-tags { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.lst-dr-tags .badge, .lst-dr-tags .market-badge { box-shadow: var(--shadow-xs); }
.lst-dr-tags .market-badge { background: var(--surface-card); }
.lst-dr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lst-dr-close svg { width: 16px; height: 16px; }
.lst-dr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lst-dr-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lst-dr-ref { font-size: 11px; color: var(--text-faint); letter-spacing: 0.03em; }
.lst-dr-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-light);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.lst-dr-loc { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); }
.lst-dr-loc svg { width: 13px; height: 13px; flex-shrink: 0; }
.lst-dr-actions { display: flex; gap: 8px; flex-shrink: 0; }
.lst-dr-actions .btn i, .lst-dr-actions .btn svg { width: 13px; height: 13px; }
.lst-dr-more { padding: 0; width: 30px; }
.lst-dr-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-sunken);
}
.lst-dr-figures { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lst-dr-price .lst-seg { background: var(--surface-card); }
.lst-dr-price .lst-seg button[aria-pressed="true"] { background: var(--surface-sunken); box-shadow: none; }

.lst-sold {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--zw-success-100);
  color: var(--zw-success-600);
}
.lst-sold > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.lst-sold div { display: flex; flex-direction: column; gap: 2px; }
.lst-sold b { font-size: 13.5px; }
.lst-sold span { font-size: 12.5px; color: var(--text-body-color); }

.lst-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.lst-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-card);
  min-width: 0;
}
.lst-facts span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--text-faint);
  font-weight: var(--fw-medium);
}
.lst-facts b {
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  font-feature-settings: var(--ff-numeric);
  overflow-wrap: anywhere;
}
.lst-facts b a { color: inherit; }
.lst-facts small { font-size: 11px; color: var(--text-muted); }

.lst-sec { display: flex; flex-direction: column; gap: 10px; }
.lst-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lst-sec-head h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-strong);
}
.lst-sec-head > span { font-size: 12px; color: var(--text-faint); font-feature-settings: var(--ff-numeric); }
.lst-sec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lst-sec-actions .btn i, .lst-sec-actions .btn svg, .lst-sec-btn i, .lst-sec-btn svg { width: 13px; height: 13px; }
.lst-sec-actions a.btn { text-decoration: none; }
.lst-sec-btn { align-self: flex-start; }
.lst-muted { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.lst-small { font-size: 11.5px; }

/* ── A draft from an offer: what Claude read and what to check ───── */
.lst-ai {
  padding: 14px 16px;
  border: 1px solid var(--zw-warning-200);
  border-radius: 14px;
  background: var(--zw-warning-100);
}
.lst-ai .lst-sec-head h3 { color: var(--text-strong); }
.lst-ai-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lst-ai-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-strong); }
.lst-ai-checks li > svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--zw-warning-600); }
.lst-ai-sources { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); }
.lst-ai-sources span { font-weight: var(--fw-semibold); color: var(--text-muted); }
.lst-ai-sources a { color: var(--zw-navy-700); overflow-wrap: anywhere; }

/* ── The offer dialog ─────────────────────────────────────────────── */
.lst-offer { display: flex; flex-direction: column; gap: 12px; }
.lst-offer .pw-note { margin: 0; }
.lst-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 1.5px dashed var(--border-default);
  border-radius: 14px;
  background: var(--surface-sunken);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.lst-drop:hover, .lst-drop.over, .lst-drop:focus-within { border-color: var(--zw-navy-700); background: var(--surface-card); }
.lst-drop > svg { width: 22px; height: 22px; color: var(--text-faint); margin-bottom: 4px; }
.lst-drop b { font-size: 13.5px; color: var(--text-strong); font-weight: var(--fw-semibold); }
.lst-drop span { font-size: 12px; color: var(--text-muted); }
.lst-offer-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lst-offer-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-strong);
}
.lst-offer-files li > svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); }
.lst-offer-files li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-offer-files li > em { font-style: normal; font-size: 12px; color: var(--text-muted); font-feature-settings: var(--ff-numeric); }
.lst-offer-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.lst-offer-wait b { font-size: 14px; color: var(--text-strong); font-weight: var(--fw-semibold); }
.lst-offer-wait .wal-spinner { margin-bottom: 6px; }
.lst-offer-tg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
  color: var(--text-muted);
}
.lst-offer-tg > svg { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.lst-offer-tg em { font-style: normal; font-size: 12px; flex-basis: 100%; }
.lst-warn { color: var(--zw-danger-600); font-weight: var(--fw-semibold); }
.lst-soon { color: var(--zw-warning-600); font-weight: var(--fw-semibold); }
.lst-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-body-color); white-space: pre-line; }
.lst-highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.lst-highlights li { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; color: var(--text-strong); }
.lst-highlights svg { width: 14px; height: 14px; color: var(--zw-success-600); flex-shrink: 0; margin-top: 2px; }

.lst-plan-table-wrap { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
.lst-plan-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lst-plan-table th {
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  background: var(--surface-sunken);
  text-align: left;
}
.lst-plan-table td { padding: 8px 10px; border-top: 1px solid var(--border-subtle); color: var(--text-strong); }
.lst-plan-table .num { text-align: right; font-feature-settings: var(--ff-numeric); white-space: nowrap; }
.lst-plan-table td small { display: none; font-size: 11px; color: var(--text-muted); }
.lst-checked {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--zw-success-600);
}
.lst-checked.stale { color: var(--zw-warning-600); }
.lst-checked > svg { width: 15px; height: 15px; flex-shrink: 0; }
.lst-checked span { flex: 1; min-width: 160px; }

.lst-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lst-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-card);
}
.lst-doc > svg { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; }
.lst-doc.in > svg { color: var(--zw-success-600); }
.lst-doc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lst-doc-body b { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.lst-doc-body > span { font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.lst-doc-body em { font-style: normal; font-size: 11.5px; }
.lst-doc-exp { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.lst-doc-exp input {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  font: 12px var(--font-sans);
  color: var(--text-strong);
}
.lst-doc-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lst-doc-actions .btn i, .lst-doc-actions .btn svg { width: 12px; height: 12px; }
.lst-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.lst-icon-btn:hover { background: var(--action-ghost-hover); color: var(--text-strong); }
.lst-icon-btn svg { width: 14px; height: 14px; }

.lst-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.lst-strip-item {
  flex: 0 0 132px;
  height: 88px;
  border: none;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--zw-ink-100);
  cursor: zoom-in;
  scroll-snap-align: start;
}
.lst-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lst-deals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lst-deal {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-card);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lst-deal:hover { border-color: var(--border-strong); }
.lst-deal b { font-size: 13px; color: var(--text-strong); }
.lst-deal span { font-size: 12px; color: var(--text-muted); flex: 1; }
.lst-deal svg { width: 14px; height: 14px; color: var(--text-faint); }

/* The client page's address, readable at a glance. */
.lst-page-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--zw-navy-050);
  color: var(--zw-navy-700);
  font: var(--fw-medium) 12.5px var(--font-mono);
  overflow-wrap: anywhere;
}
.lst-page-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.lst-page-off { align-self: flex-start; color: var(--text-muted); }

/* ── Form ────────────────────────────────────────────────────────── */
.lst-form { display: flex; flex-direction: column; gap: 14px; }
.lst-form .pw-note.bad { margin: 0; }
.lst-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; font-feature-settings: var(--ff-numeric); }
.lst-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lst-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-card);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-control);
}
.lst-type:hover { border-color: var(--border-strong); }
.lst-type svg { width: 18px; height: 18px; color: var(--text-muted); margin-bottom: 4px; }
.lst-type b { font-size: 13.5px; color: var(--text-strong); }
.lst-type span { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.lst-type.on { border-color: var(--zw-navy-700); box-shadow: inset 0 0 0 1px var(--zw-navy-700); background: var(--zw-navy-050); }
.lst-type.on svg { color: var(--zw-navy-700); }
.lst-type-hint { margin: 0; }

.lst-plan { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lst-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lst-plan-head > span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}
.lst-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.lst-presets .btn { height: 28px; padding: 0 10px; font-feature-settings: var(--ff-numeric); }
.lst-plan-rows { display: flex; flex-direction: column; gap: 6px; }
.lst-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 82px minmax(0, 1.3fr) 138px 30px;
  gap: 6px;
  align-items: center;
}
.lst-plan-row input, .lst-plan-row select {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font: 13px var(--font-sans);
  color: var(--text-strong);
}
.lst-plan-row input:focus, .lst-plan-row select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.lst-plan-pct { position: relative; display: flex; align-items: center; }
.lst-plan-pct input { padding-right: 22px; text-align: right; font-feature-settings: var(--ff-numeric); }
.lst-plan-pct em { position: absolute; right: 8px; font-style: normal; font-size: 11px; color: var(--text-faint); pointer-events: none; }
.lst-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lst-plan-foot .btn i, .lst-plan-foot .btn svg { width: 12px; height: 12px; }
.lst-plan-total { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: var(--fw-semibold); font-feature-settings: var(--ff-numeric); }
.lst-plan-total.ok { color: var(--zw-success-600); }
.lst-plan-total.bad { color: var(--zw-danger-600); }
.lst-plan-total svg { width: 13px; height: 13px; }

.lst-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.lst-media {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-card);
  min-width: 0;
}
.lst-media-preview {
  flex: 0 0 88px;
  height: 62px;
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--zw-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lst-media-preview.empty { background: var(--gradient-warm); color: var(--zw-sand-600); }
.lst-media-preview svg { width: 20px; height: 20px; opacity: 0.8; display: none; }
.lst-media-preview.empty svg { display: block; }
.lst-media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-media-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lst-media-body b { font-size: 13px; color: var(--text-strong); }
.lst-media-body > span { font-size: 11.5px; color: var(--text-muted); }
.lst-media-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.lst-gallery { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lst-gallery-item {
  position: relative;
  width: 88px;
  height: 62px;
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--zw-ink-100);
}
.lst-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-gallery-item .lst-icon-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border-subtle);
}
.lst-gallery-item .lst-icon-btn svg { width: 12px; height: 12px; }
.lst-gallery-add {
  width: 88px;
  height: 62px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
  background: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: var(--fw-medium) 10.5px var(--font-sans);
  cursor: pointer;
}
.lst-gallery-add:hover { color: var(--text-strong); border-color: var(--zw-navy-500); }
.lst-gallery-add svg { width: 16px; height: 16px; }

/* ── Phones ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .lst-head-actions { width: 100%; }
  .lst-head-actions .btn { flex: 1; }
  .lst-toolbar { gap: 8px; }
  .lst-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .lst-tabs::-webkit-scrollbar { display: none; }
  .lst-filters { justify-content: flex-start; }
  .lst-select { flex: 1 1 40%; }
  .lst-select select { width: 100%; height: 44px; font-size: 14px; }
  .lst-search { flex: 1 1 180px; max-width: none; }
  .lst-search input { height: 44px; font-size: 16px; }
  .lst-seg button { height: 38px; min-width: 52px; }
  .lst-viewseg { display: none; }
  .lst-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .lst-more { width: 44px; height: 44px; }
  .lst-cover .lst-more { top: 6px; right: 6px; }
  .lst-menu button { height: 44px; }

  .lst-table, .lst-table thead, .lst-table tbody, .lst-table tr, .lst-table th, .lst-table td { display: block; }
  .lst-table thead { display: none; }
  .lst-table-wrap { background: transparent; border: none; box-shadow: none; }
  .lst-table tbody tr {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .lst-table td { border: none; padding: 4px 0; display: flex; align-items: center; gap: 10px; text-align: left; }
  .lst-table td::before {
    content: attr(data-label);
    flex: 0 0 88px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--ls-micro);
    font-weight: var(--fw-semibold);
    color: var(--text-faint);
  }
  .lst-table td:first-child::before, .lst-table td.lst-col-act::before { display: none; }
  .lst-table td.lst-col-act { position: absolute; top: 6px; right: 6px; padding: 0; width: auto; }
  .lst-table td:first-child { padding-right: 52px; }
  .lst-cell-name b { max-width: none; white-space: normal; }

  .lst-drawer { gap: 16px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .lst-drawer > :not(.lst-dr-cover) { margin-left: 16px; margin-right: 16px; }
  .lst-dr-cover { height: 200px; }
  .lst-dr-close { width: 44px; height: 44px; }
  .lst-dr-head { flex-direction: column; }
  .lst-dr-actions { width: 100%; }
  .lst-dr-actions .btn:first-child { flex: 1; }
  .lst-dr-more { width: 44px; }
  .lst-facts { grid-template-columns: 1fr 1fr; }
  .lst-doc { flex-wrap: wrap; }
  .lst-doc-actions { width: 100%; justify-content: flex-end; }
  .lst-drop { padding: 18px 12px; }
  .lst-offer-files .lst-icon-btn { width: 44px; height: 44px; }
  .lst-offer-tg .lst-link, .lst-offer-tg .btn { min-height: 44px; }
  .lst-doc-exp input { height: 44px; font-size: 16px; }
  .lst-icon-btn { width: 44px; height: 44px; }
  .lst-strip-item { flex-basis: 150px; height: 100px; }
  /* The plan's dates move under each milestone, so both currencies fit. */
  .lst-plan-table .lst-when { display: none; }
  .lst-plan-table td small { display: block; }
  .lst-plan-table th, .lst-plan-table td { padding-left: 8px; padding-right: 8px; }

  .lst-types { grid-template-columns: 1fr; }
  .lst-type { flex-direction: row; align-items: center; gap: 10px; }
  .lst-type svg { margin-bottom: 0; }
  .lst-type span { display: none; }
  /* Two lines a row: what and how much, then when. */
  .lst-plan-row {
    grid-template-columns: minmax(0, 1fr) 84px 44px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .lst-plan-row [data-plan-f="label"] { grid-row: 1; grid-column: 1; }
  .lst-plan-row .lst-plan-pct { grid-row: 1; grid-column: 2; }
  .lst-plan-row [data-plan-del] { grid-row: 1; grid-column: 3; }
  .lst-plan-row select { grid-row: 2; grid-column: 1; }
  .lst-plan-row input[type="date"] { grid-row: 2; grid-column: 2 / 4; }
  .lst-plan-row input, .lst-plan-row select { height: 44px; font-size: 16px; }
  .lst-presets .btn { min-height: 38px; height: 38px; }
  .lst-media-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lst-card, .lst-seg button, .lst-type { transition: none; }
  .lst-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PROPERTY WALLET — the investors' portfolios
   Built on the Listings pieces (.lst-*): the same toolbar, cards,
   table, "⋯" menu and drawer. Answers first — value, gain, rent,
   occupancy — then what needs attention. Numbers in Jost light; gains
   in the success colour, losses in the danger one with a true minus.
   ══════════════════════════════════════════════════════════════════ */
.wal-up { color: var(--zw-success-600); }
.wal-down { color: var(--zw-danger-600); }

/* The four answers. 4-up on a desktop, 2 × 2 on a phone. */
.stat-tiles-grid.wal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .stat-tiles-grid.wal-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wal-tile .stat-tile-meta svg { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.wal-tile .stat-tile-caption b { font-weight: var(--fw-semibold); }
.wal-tile .wal-meter { margin: 2px 0 0; }
.wal-meter {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--chart-track);
  overflow: hidden;
}
.wal-meter i { display: block; height: 100%; border-radius: inherit; background: var(--zw-navy-700); }

/* What needs attention, as filters. */
.wal-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 16px; }
.wal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-chip);
  background: var(--surface-card);
  font: var(--fw-medium) 12.5px var(--font-sans);
  color: var(--text-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-control);
}
.wal-chip svg { width: 14px; height: 14px; color: var(--text-muted); }
.wal-chip.lease svg, .wal-chip.vacant svg { color: var(--zw-warning-600); }
.wal-chip:hover { border-color: var(--border-strong); }
.wal-chip.on { background: var(--zw-navy-050); border-color: var(--zw-navy-700); color: var(--zw-navy-700); }
.wal-calm { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; color: var(--zw-success-600); }
.wal-calm svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Without the Agent filter the search takes its place. */
@media (min-width: 768px) {
  .wal-toolbar.no-agent { grid-template-areas: "tabs tabs display" "search search loc"; }
  .wal-asset-toolbar { grid-template-areas: "tabs tabs display"; }
}

/* ── A client, as a card ─────────────────────────────────────────── */
.wal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--gutter-card-tight);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-surface);
  min-width: 0;
}
.wal-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.wal-card:focus-visible, .wal-asset:focus-visible { outline: 2px solid var(--zw-navy-500); outline-offset: 2px; }
.wal-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 6px; }
.wal-card-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.wal-card-who b { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wal-card-who span { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wal-card-head .badge { flex-shrink: 0; }
.wal-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
}
.wal-card-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wal-card-stats span { font-size: 11px; color: var(--text-faint); }
.wal-card-stats b {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 16px;
  font-feature-settings: var(--ff-numeric);
  color: var(--text-strong);
}
.wal-card-stats b.wal-up { color: var(--zw-success-600); }
.wal-card-stats b.wal-down { color: var(--zw-danger-600); }
.wal-occ { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.wal-occ b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.wal-card-foot { margin-top: auto; }
.wal-att { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wal-att svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-faint); }
.wal-att.lease svg, .wal-att.vacant svg { color: var(--zw-warning-600); }
.wal-att span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The design system's avatar: initials on a tint picked from the name. */
.wal-av {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-semibold) 13px var(--font-sans);
  letter-spacing: 0.02em;
}
.wal-av.lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 18px; }
.wal-av.t0 { background: var(--zw-azure-200); color: var(--zw-azure-700); }
.wal-av.t1 { background: var(--zw-sand-300); color: var(--zw-sand-600); }
.wal-av.t2 { background: var(--zw-navy-100); color: var(--zw-navy-600); }
.wal-av.t3 { background: var(--zw-clay-200); color: var(--zw-clay-700); }
.wal-av.t4 { background: var(--zw-lime-300); color: var(--zw-lime-600); }
.wal-table .lst-cell-prop .badge { margin-left: 4px; }

/* ── A client's page ─────────────────────────────────────────────── */
.wal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 4px 0;
  margin-bottom: 12px;
  font: var(--fw-medium) 13px var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
}
.wal-back:hover { color: var(--text-strong); }
.wal-back svg { width: 14px; height: 14px; }
.wal-client-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.wal-client-who { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 240px; }
.wal-client-who h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-light);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.wal-client-who h1 .badge { vertical-align: middle; margin-left: 6px; font-family: var(--font-sans); }
.wal-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; }
.wal-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-body-color); text-decoration: none; }
.wal-contact a:hover { color: var(--text-strong); text-decoration: underline; }
.wal-contact svg { width: 14px; height: 14px; color: var(--text-muted); }
.wal-client-who .pw-birthday-note { margin-top: 2px; }
.wal-client-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wal-client-actions .btn i, .wal-client-actions .btn svg { width: 13px; height: 13px; }
.wal-equity { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); font-feature-settings: var(--ff-numeric); }
.wal-equity b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.wal-equity span { color: var(--text-faint); }
.wal-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 18px; }
.wal-panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Where the money sits: one bar, a 2px gap between the parts, and every
   part named with its value and share beside it. */
.wal-alloc { display: flex; gap: 2px; height: 14px; border-radius: var(--radius-pill); overflow: hidden; }
.wal-alloc span { display: block; flex-basis: 0; min-width: 4px; }
.wal-alloc .c1, .wal-legend .c1 { background: var(--chart-1); }
.wal-alloc .c2, .wal-legend .c2 { background: var(--chart-2); }
.wal-alloc .c3, .wal-legend .c3 { background: var(--chart-3); }
.wal-alloc .c4, .wal-legend .c4 { background: var(--chart-4); }
.wal-alloc .c5, .wal-legend .c5 { background: var(--chart-5); }
.wal-alloc .c0, .wal-legend .c0 { background: var(--zw-ink-300); }
.wal-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wal-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-body-color);
}
.wal-legend .wal-swatch { width: 10px; height: 10px; border-radius: 3px; }
.wal-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wal-legend b { font-weight: var(--fw-semibold); color: var(--text-strong); font-feature-settings: var(--ff-numeric); white-space: nowrap; }
.wal-legend em { font-style: normal; color: var(--text-muted); text-align: right; font-feature-settings: var(--ff-numeric); }

.wal-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wal-next li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-strong);
}
.wal-next li > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-faint); }
.wal-next li.lease > svg, .wal-next li.vacant > svg { color: var(--zw-warning-600); }
.wal-next li > span { flex: 1; min-width: 0; }
.wal-panel .lst-link { align-self: flex-start; }

/* ── The drawer ──────────────────────────────────────────────────── */
.wal-share { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.wal-share input { width: 16px; height: 16px; margin: 0; accent-color: var(--zw-navy-700); }
.wal-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wal-history li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-body-color);
}
.wal-history li:last-child { border-bottom: none; }
.wal-history b { color: var(--text-strong); font-weight: var(--fw-semibold); font-feature-settings: var(--ff-numeric); }
.wal-menu button.danger, .wal-menu button.danger svg { color: var(--zw-danger-600); }

/* ── A document, looked at or sent on (the platform's dialog) ────── */
.wal-doc { display: flex; flex-direction: column; gap: 12px; }
.wal-doc .pw-note { margin: 0; }
.wal-doc-name { margin: 0; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
/* The viewer takes the dialog's full height, and the file fills what the
   header and footer leave — no scrolling around a frame that scrolls. */
.pw-dialog:has(.wal-doc.viewer) { height: 88vh; }
.pw-dialog-body:has(.wal-doc.viewer) { overflow: hidden; }
.wal-doc.viewer { flex: 1; min-height: 0; }
.wal-doc.viewer .wal-doc-wait { flex: 1; }
.wal-doc-pdf {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-sunken);
}
.wal-doc-img {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: scale-down;
  border-radius: 12px;
  background: var(--surface-sunken);
}
.wal-doc-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  padding: 24px 16px;
  border: 1px dashed var(--border-default);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.wal-doc-wait > svg { color: var(--text-faint); }
.wal-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--zw-navy-700);
  border-radius: 50%;
  animation: wal-spin 0.8s linear infinite;
}
@keyframes wal-spin { to { transform: rotate(360deg); } }
.wal-doc-share { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wal-doc-share .btn-primary { grid-column: 1 / -1; }

/* ── Preview as client: the one navy panel ───────────────────────── */
.wal-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--zw-navy-800);
  color: #fff;
}
.wal-preview-panel > span, .wal-preview-panel small { font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.wal-preview-panel > b {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 28px;
  font-feature-settings: var(--ff-numeric);
}
.wal-preview-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 4px; }
.wal-preview-row div { display: flex; flex-direction: column; gap: 2px; }
.wal-preview-row span { font-size: 11px; color: rgba(255, 255, 255, 0.72); }
.wal-preview-row b { font-size: 15px; font-weight: var(--fw-semibold); font-feature-settings: var(--ff-numeric); }
.wal-preview-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wal-preview-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.wal-preview-list li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wal-preview-list b { font-size: 13px; color: var(--text-strong); }
.wal-preview-list span { font-size: 11.5px; color: var(--text-muted); }
.wal-preview-list em { font-style: normal; font-size: 12.5px; color: var(--text-strong); white-space: nowrap; font-feature-settings: var(--ff-numeric); }

/* ── Portal access ───────────────────────────────────────────────── */
.wal-portal { display: flex; flex-direction: column; gap: 12px; }
.wal-access { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wal-access li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.wal-access li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wal-access b { font-size: 13px; color: var(--text-strong); overflow-wrap: anywhere; }
.wal-access span { font-size: 12px; color: var(--text-muted); }
.wal-access li.off b { color: var(--text-muted); }

/* ── Phones ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .wal-access li { flex-wrap: wrap; }
  .wal-access .btn { min-height: 40px; }
  .stat-tiles-grid.wal-kpis { gap: 8px; }
  .wal-kpis .stat-tile-card { padding: 11px 12px; gap: 6px; }
  .wal-kpis .stat-tile-value { font-size: 20px; }
  .wal-kpis .stat-tile-unit { font-size: 12px; }
  .wal-kpis .stat-tile-caption { white-space: normal; }
  .wal-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wal-chips::-webkit-scrollbar { display: none; }
  .wal-chip { flex: 0 0 auto; height: 38px; }
  .wal-grid { grid-template-columns: 1fr; }
  .wal-two { grid-template-columns: 1fr; }
  .wal-client-head { gap: 12px; }
  .wal-client-who { min-width: 0; flex-basis: calc(100% - 72px); }
  .wal-client-actions { width: 100%; }
  .wal-client-actions .btn-highlight { flex: 1; }
  .wal-back { min-height: 44px; }
  .wal-contact a { min-height: 36px; }
  .wal-share { min-height: 36px; }
  .wal-share input { width: 20px; height: 20px; }
  .pw-dialog:has(.wal-doc.viewer) { height: 92dvh; }
  .wal-doc-share { grid-template-columns: 1fr; }
  .wal-doc-share .btn, .wal-doc-wait .btn { min-height: 44px; }
  .wal-next li { flex-wrap: wrap; }
  .wal-next li > span { flex-basis: calc(100% - 30px); }
  .wal-next li .btn { margin-left: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .wal-spinner { animation-duration: 2s; }
  .wal-card, .wal-chip { transition: none; }
  .wal-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   JARVIS — the assistant's panel (lib/jarvis-ui.js)
   A reading surface: opaque white, a hairline edge, under the top bar on
   a desktop (so its button still closes it) and beneath any drawer a
   record opens in; the whole screen on a phone, above the tab bar.
   ══════════════════════════════════════════════════════════════════ */
[data-jv-toggle][hidden], .jv-dot[hidden] { display: none !important; }

.jv-top-btn { position: relative; }
.jv-top-btn[aria-expanded="true"] { background: var(--zw-navy-050); border-color: var(--zw-navy-200); }
.jv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zw-navy-500);
  box-shadow: 0 0 0 2px var(--surface-card);
  flex: 0 0 auto;
}
.jv-top-btn .jv-dot { position: absolute; top: -3px; right: -3px; }

/* The sidebar entry, drawn as the routes above it are. */
.jarvis-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-body-color);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-control);
  text-align: left;
  white-space: nowrap;
  position: relative;
}
.jarvis-nav:hover { background: rgba(255, 255, 255, 0.65); color: var(--text-strong); }
.jarvis-nav[aria-expanded="true"] { background: rgba(255, 255, 255, 0.75); color: var(--text-strong); border-color: var(--border-subtle); }
.sidebar.collapsed .jarvis-nav { justify-content: center; padding: 0; }
.sidebar.collapsed .jarvis-nav .jv-dot { position: absolute; top: 6px; right: 14px; }

.jv-panel {
  position: fixed;
  top: var(--size-topbar);
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  z-index: 96;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}
.jv-panel.open { transform: none; visibility: visible; }

.jv-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.jv-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zw-navy-700);
  color: var(--zw-lime-500);
  flex: 0 0 auto;
}
.jv-mark svg { width: 16px; height: 16px; }
.jv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jv-title b { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-medium); color: var(--text-strong); letter-spacing: var(--ls-h3); }
.jv-title span { font-size: var(--text-caption); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jv-menu {
  position: absolute;
  top: calc(100% - 6px);
  right: 12px;
  z-index: 2;
  min-width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.jv-menu[hidden] { display: none; }
.jv-menu-label { padding: 6px 10px 4px; font-size: var(--text-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--text-faint); }
.jv-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-body-color);
  font: var(--fw-medium) var(--text-body-s) / 1 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.jv-menu-item:hover { background: var(--action-ghost-hover); color: var(--text-strong); }
.jv-menu-item svg { width: 15px; height: 15px; color: var(--text-faint); }
.jv-menu-item.on { color: var(--text-strong); font-weight: var(--fw-semibold); }
.jv-menu-item.on svg { color: var(--zw-navy-600); }
.jv-menu-sep { height: 1px; margin: 6px 4px; background: var(--border-subtle); }
.jv-menu-note { padding: 6px 10px 4px; font-size: var(--text-caption); color: var(--text-faint); }

.jv-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overscroll-behavior: contain;
}

.jv-msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.jv-msg.jv-me { align-self: flex-end; align-items: flex-end; }
.jv-msg.jv-them { align-self: flex-start; }
.jv-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-body-color);
  overflow-wrap: anywhere;
}
.jv-me .jv-bubble { background: var(--zw-navy-700); color: var(--text-inverse); border-bottom-right-radius: 4px; }
.jv-me.pending .jv-bubble { opacity: 0.6; }
.jv-them .jv-bubble { background: var(--surface-app); border: 1px solid var(--border-subtle); border-bottom-left-radius: 4px; }
.jv-them.failed .jv-bubble { background: var(--zw-warning-100); border-color: var(--zw-warning-200); }
.jv-bubble p { margin: 0; }
.jv-bubble p + p, .jv-bubble p + ul, .jv-bubble ul + p { margin-top: 8px; }
.jv-bubble ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.jv-ref {
  color: var(--text-link);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--zw-navy-200);
  text-underline-offset: 2px;
}
.jv-ref:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
.jv-meta { font-size: var(--text-micro); color: var(--text-faint); padding: 0 4px; font-variant-numeric: tabular-nums; }
.jv-event { align-self: center; max-width: 90%; font-size: var(--text-caption); color: var(--text-faint); text-align: center; }

.jv-empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px 8px; }
.jv-empty-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zw-navy-700);
  color: var(--zw-lime-500);
  margin-bottom: 4px;
}
.jv-empty-mark svg { width: 20px; height: 20px; }
.jv-empty b { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-medium); color: var(--text-strong); }
.jv-empty p { margin: 0; max-width: 34ch; font-size: var(--text-body-s); color: var(--text-muted); }
.jv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.jv-chip {
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--fw-medium) var(--text-body-s) / 1 var(--font-sans);
  cursor: pointer;
  transition: var(--transition-control);
}
.jv-chip:hover { background: var(--action-secondary-hover); border-color: var(--border-strong); }

.jv-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.jv-status[hidden] { display: none; }
.jv-dots { display: inline-flex; gap: 3px; }
.jv-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--zw-navy-400); animation: jv-dot 1.1s var(--ease-in-out) infinite; }
.jv-dots span:nth-child(2) { animation-delay: 0.15s; }
.jv-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes jv-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.jv-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 12px 14px 16px;
  border-top: 1px solid var(--border-subtle);
}
.jv-compose textarea {
  flex: 1;
  min-height: var(--size-control-md);
  max-height: 140px;
  padding: 9px 12px;
  resize: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--fw-regular) var(--text-body) / 1.4 var(--font-sans);
  transition: var(--transition-control);
}
.jv-compose textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.jv-send { width: var(--size-control-md); padding: 0; flex: 0 0 auto; }
.jv-send svg { width: 16px; height: 16px; }

/* ── Phones: the whole screen, above the tab bar and More ────────── */
@media (max-width: 768px) {
  .jv-panel {
    top: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 121;
    border-left: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .jv-head { padding: 10px 8px 10px 16px; }
  .jv-head .btn-sidebar-toggle { width: 40px; height: 40px; }
  .jv-msg { max-width: 92%; }
  /* What is typed stays at 16px: an iPhone zooms into anything smaller. */
  .jv-compose textarea { font-size: 16px; min-height: 44px; }
  .jv-send { width: 44px; height: 44px; }
  .jv-chip { min-height: 40px; }
  .jv-menu-item { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .jv-panel { transition: none; }
  .jv-dots span { animation: none; opacity: 0.6; }
}

/* ── Jarvis's cards: a change waiting for the owner's tap ────────── */
.jv-card {
  align-self: flex-start;
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}
.jv-card-kind { font-size: var(--text-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--text-faint); }
.jv-card-text { margin: 0; font-size: var(--text-body-s); line-height: var(--lh-body-s); color: var(--text-strong); font-weight: var(--fw-medium); }
.jv-card-draft {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--zw-navy-200);
  border-radius: 4px;
  background: var(--surface-app);
  font-size: var(--text-body-s);
  color: var(--text-body-color);
  overflow-wrap: anywhere;
}
.jv-card-to { font-size: var(--text-caption); color: var(--text-muted); overflow-wrap: anywhere; }
.jv-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.jv-card-state { font-size: var(--text-caption); font-weight: var(--fw-semibold); color: var(--text-muted); }
.jv-card.done .jv-card-state { color: var(--zw-success-600); }
.jv-card.failed { border-color: var(--zw-danger-200); }
.jv-card.failed .jv-card-state { color: var(--zw-danger-600); }
.jv-card.cancelled, .jv-card.expired { box-shadow: none; background: var(--surface-app); }
.jv-card.cancelled .jv-card-text, .jv-card.expired .jv-card-text { color: var(--text-muted); }
.jv-card .jv-ref { font-size: var(--text-caption); }

@media (max-width: 768px) {
  .jv-card { width: 100%; }
  .jv-card-actions .btn { min-height: 40px; flex: 1 1 auto; }
}

/* ── Website: the panel on a property and the connection in Settings
   (lib/website-ui.js). Lime and navy for Send, a completion gauge in lime. ── */
.ws-panel .lst-sec-head { align-items: center; flex-wrap: wrap; }
.ws-aside { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ws-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ws-facts a { color: var(--zw-navy-700); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; font-weight: var(--fw-medium); }
.ws-facts b { overflow-wrap: anywhere; }
.ws-connect span { flex: 1; }
.ws-progress { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--zw-navy-050); border: 1px solid var(--zw-navy-100); }
.ws-progress-text { font-size: 13px; font-weight: var(--fw-medium); color: var(--zw-navy-700); font-feature-settings: var(--ff-numeric); }
.ws-bar { height: 8px; border-radius: 999px; background: var(--zw-navy-700); overflow: hidden; }
.ws-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--zw-lime-500); transition: width 300ms ease; }
.ws-bar-wait > span { animation: ws-slide 1.4s ease-in-out infinite; }
@keyframes ws-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .ws-bar-wait > span { animation: none; } .ws-bar > span { transition: none; } }
.ws-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--zw-danger-100); color: var(--zw-danger-600); border: 1px solid var(--zw-danger-200); }
.ws-error-text { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ws-error-text svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.ws-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: start; }
.ws-act { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-act .btn { width: 100%; }
.ws-act .btn i, .ws-act .btn svg { width: 14px; height: 14px; }
.ws-why { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.ws-unpublish { color: var(--zw-danger-600); }
.ws-reload { align-self: flex-start; }
.ws-notice { color: var(--zw-navy-700); }

.ws-settings { display: flex; flex-direction: column; gap: 4px; }
.ws-settings .pw-section-head { margin-bottom: 4px; }
.ws-settings [hidden] { display: none; }
.ws-grid { margin-top: 6px; }
.ws-help { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.ws-help:empty { display: none; }
.ws-set-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ws-set-actions .btn i, .ws-set-actions .btn svg { width: 14px; height: 14px; }
.ws-test { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.ws-test svg { width: 15px; height: 15px; flex-shrink: 0; }
.ws-test.ok { color: var(--zw-success-600); }
.ws-test.bad { color: var(--zw-danger-600); }

@media (max-width: 768px) {
  .ws-actions { grid-template-columns: 1fr; }
  .ws-act .btn, .ws-set-actions .btn, .ws-error .btn { min-height: 44px; }
  .ws-set-actions .btn { flex: 1 1 100%; }
  .ws-grid { grid-template-columns: 1fr; }
  .ws-settings input, .ws-settings select { font-size: 16px; }
  .ws-panel .lst-link { min-height: 44px; }
}

/* ── Team: a person who has been removed stays in the roster, greyed, below the active ones
   (lib/team-remove.js). Their actions stay at full strength so Restore access is easy to find. ── */
.roster-row.inactive { background: var(--zw-sand-100); }
.roster-row.inactive > :not(.roster-actions):not(.roster-status) { opacity: 0.5; }
.roster-row.inactive .roster-avatar { filter: grayscale(1); }
.roster-status.off {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  flex: 0 0 auto; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--zw-sand-100); border: 1px solid var(--zw-sand-300); color: var(--zw-clay-700);
  font-weight: var(--fw-medium);
}
.roster-row .roster-status.off { color: var(--zw-clay-700); }
.roster-remove i, .roster-remove svg { width: 14px; height: 14px; }
.roster-restore span { white-space: nowrap; }
@media (max-width: 768px) {
  .roster-actions .btn { min-height: 44px; min-width: 44px; }
}