/*
 * Traden Product System
 * Shared product tokens and component contracts. This file intentionally loads
 * after the legacy stylesheet so screens can migrate without a production-wide
 * route or data-model change.
 */

:root {
  color-scheme: dark;
  --ds-canvas: #06080b;
  --ds-base: #090c10;
  --ds-surface-1: #11151a;
  --ds-surface-2: #171c22;
  --ds-surface-3: #1d232b;
  --ds-overlay: rgba(11, 15, 21, 0.97);
  --ds-surface-solid: #11161d;
  --ds-surface-solid-2: #171d26;
  --ds-border: rgba(255, 255, 255, 0.08);
  --ds-border-high: rgba(255, 255, 255, 0.14);
  --ds-highlight: rgba(255, 255, 255, 0.035);
  --ds-text: #f5f7f2;
  --ds-text-soft: #c7d0c2;
  --ds-muted: #a5afbc;
  --ds-muted-2: #8994a2;
  --ds-lime: #c8ff16;
  --ds-lime-ink: #101500;
  --ds-lime-soft: rgba(200, 255, 22, 0.10);
  --ds-lime-border: rgba(200, 255, 22, 0.34);
  --ds-warning: #f7bd55;
  --ds-warning-soft: rgba(247, 189, 85, 0.11);
  --ds-danger: #ff6678;
  --ds-danger-soft: rgba(255, 102, 120, 0.11);
  --ds-info: #70c8ff;
  --ds-success: #7cdb8d;

  --ds-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.8125rem;
  --ds-text-md: 0.875rem;
  --ds-text-lg: 0.9375rem;
  --ds-text-xl: 1.125rem;
  --ds-control-height: 40px;
  --ds-touch-height: 48px;
  --ds-layer-modal: 11000;
  --ds-title: clamp(1.65rem, 2.7vw, 2.125rem);
  --ds-display: clamp(2rem, 4vw, 3rem);

  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;

  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 0.75rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 0.875rem;
  --ds-radius-pill: 999px;

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.12);
  --ds-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
  --ds-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.46), 0 8px 28px rgba(0, 0, 0, 0.28);
  --ds-shadow-lime: 0 12px 32px rgba(200, 255, 22, 0.12);
  --ds-blur-panel: 16px;
  --ds-blur-overlay: 28px;

  --ds-fast: 120ms;
  --ds-standard: 180ms;
  --ds-emphasised: 260ms;
  --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-sidebar-width: 224px;

  /* Workspace architecture: one sizing contract across current product screens. */
  --app-page-max: 980px;
  --app-detail-max: 720px;
  --app-job-detail-max: 512px;
  --app-page-x: clamp(1rem, 2.5vw, 2rem);
  --app-mobile-x: 0.8rem;
  --app-card-radius: var(--ds-radius-xl);
  --app-card-padding: 0.7rem;
  --app-card-min-h: 82px;
  --app-icon-size: 46px;
  --app-icon-size-mobile: 38px;
  --app-title-size: var(--ds-text-lg);
  --app-meta-size: var(--ds-text-xs);
  --app-detail-size: var(--ds-text-xs);
  --app-page-title-size: 1.35rem;
  --app-page-title-size-mobile: 1.18rem;
  --app-page-subtitle-size: var(--ds-text-sm);
  --app-page-subtitle-size-mobile: var(--ds-text-sm);
  --app-section-title-size: var(--ds-text-lg);
  --app-body-size: var(--ds-text-md);
  --app-control-font-size: var(--ds-text-md);
  --app-pill-height: 24px;
  --app-pill-font-size: var(--ds-text-xs);
  --app-section-gap: 0.8rem;
  --app-control-height: var(--ds-control-height);
  --app-search-height: 46px;
  --app-header-height: 56px;

  /* Compatibility aliases used by the existing product and public site. */
  --black: var(--ds-canvas);
  --off-black: var(--ds-base);
  --card: var(--ds-surface-solid);
  --card-hover: var(--ds-surface-solid-2);
  --border: #202731;
  --border-lit: #333c48;
  --white: var(--ds-text);
  --lime: var(--ds-lime);
  --lime-dim: var(--ds-lime-soft);
  --lime-glow: rgba(200, 255, 22, 0.16);
  --sans: var(--ds-font);
}

[data-theme='light'] {
  color-scheme: light;
  --ds-canvas: #f4f6f8;
  --ds-base: #eef1f4;
  --ds-surface-1: #ffffff;
  --ds-surface-2: #f7f9fb;
  --ds-surface-3: #ffffff;
  --ds-overlay: rgba(255, 255, 255, 0.97);
  --ds-surface-solid: #ffffff;
  --ds-surface-solid-2: #f7f9fb;
  --ds-border: rgba(16, 24, 40, 0.10);
  --ds-border-high: rgba(16, 24, 40, 0.18);
  --ds-highlight: rgba(255, 255, 255, 0.7);
  --ds-text: #10151c;
  --ds-text-soft: #344054;
  --ds-muted: #667085;
  --ds-muted-2: #697586;
  /* This is used for action labels and active navigation as well as fills.
     Keep it dark enough to retain AA contrast on the light canvas and with
     white control text. */
  --ds-lime: #557300;
  --ds-lime-ink: #ffffff;
  --ds-lime-soft: rgba(85, 115, 0, 0.10);
  --ds-lime-border: rgba(85, 115, 0, 0.32);
  --ds-warning: #9a5a00;
  --ds-warning-soft: rgba(154, 90, 0, 0.09);
  --ds-danger: #c43549;
  --ds-danger-soft: rgba(196, 53, 73, 0.09);
  --ds-info: #176ba5;
  --ds-success: #18784a;
  --ds-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px rgba(16, 24, 40, 0.06);
  --ds-shadow-md: 0 16px 40px rgba(16, 24, 40, 0.10), 0 2px 8px rgba(16, 24, 40, 0.05);
  --ds-shadow-lg: 0 30px 80px rgba(16, 24, 40, 0.16), 0 8px 28px rgba(16, 24, 40, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  accent-color: var(--ds-lime);
}

body {
  font-family: var(--ds-font);
  background: var(--ds-canvas);
  color: var(--ds-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ds-canvas);
  box-shadow: 0 0 0 4px var(--ds-lime);
  position: relative;
  z-index: 3;
}

::selection {
  background: var(--ds-lime);
  color: var(--ds-lime-ink);
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: var(--ds-space-3);
  left: var(--ds-space-3);
  padding: 0.75rem 1rem;
  border-radius: var(--ds-radius-md);
  background: var(--ds-lime);
  color: var(--ds-lime-ink);
  font-size: var(--ds-text-md);
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform var(--ds-fast) var(--ds-ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[hidden] {
  display: none !important;
}

/* LLM intake additions: composed from the existing card/list primitives. */
.ready-trader-card {
  border-color: var(--ds-lime-border);
  background: linear-gradient(135deg, var(--ds-lime-soft), var(--ds-surface-1));
}

.job-brief-list {
  display: grid;
  gap: var(--ds-space-2);
  margin: var(--ds-space-3) 0 0;
}

.job-brief-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--ds-space-3);
  padding-top: var(--ds-space-2);
  border-top: 1px solid var(--ds-border);
}

.job-brief-list dt {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.job-brief-list dd {
  margin: 0;
  color: var(--ds-text-soft);
  overflow-wrap: anywhere;
}

.manual-action-panel {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
}

.snapshot-summary-card,
.snapshot-actions-card,
.snapshot-job-details {
  border-radius: var(--ds-radius-lg);
}

.ai-analysis-grid .snapshot-summary-card {
  grid-column: 1 / -1;
  padding: var(--ds-space-4);
}

.snapshot-summary-card #ai-summary {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  line-height: 1.5;
}

.snapshot-actions-card {
  grid-column: 1 / -1;
}

.snapshot-action-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-2);
}

.snapshot-action-pill {
  display: inline-grid;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0 0.55rem;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-2);
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.snapshot-action-pill--quote.is-active,
.snapshot-action-pill--book.is-active,
.snapshot-action-pill--invoice.is-active {
  border-color: rgba(200, 255, 22, 0.72);
  background: #c8ff16;
  color: #101500;
  box-shadow: 0 0 22px rgba(200, 255, 22, 0.28);
}

.snapshot-action-pill--take-over.is-active {
  border-color: rgba(255, 122, 0, 0.72);
  background: #ff7a00;
  color: #ffffff;
  box-shadow: 0 0 22px rgba(255, 122, 0, 0.26);
}

.snapshot-job-details {
  margin-top: var(--ds-space-3);
}

.snapshot-job-details #ai-insights {
  color: var(--ds-text-soft);
}

.snapshot-job-list {
  gap: 0;
}

.snapshot-job-list > div {
  align-items: start;
  padding: 0.72rem 0;
}

.snapshot-job-list > div:first-child {
  border-top: 0;
}

.snapshot-job-list dd {
  color: var(--ds-text);
  font-weight: 700;
}

.setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-5);
}

.setup-actions .btn {
  min-width: 8rem;
}

.schedule-builder,
.setup-readiness-grid,
.today-recent-list {
  display: grid;
  gap: var(--ds-space-3);
}

.schedule-row,
.setup-readiness-card,
.today-recent-row {
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
  box-shadow: inset 0 1px 0 var(--ds-highlight);
}

.schedule-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.65fr) minmax(0, 1.35fr);
  gap: var(--ds-space-4);
  padding: var(--ds-space-3);
  align-items: center;
}

.schedule-row.active {
  border-color: var(--ds-lime-border);
  background: linear-gradient(145deg, var(--ds-lime-soft), var(--ds-surface-1));
}

.schedule-row__day,
.schedule-row__hours {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--ds-space-3);
}

.schedule-row__day input {
  flex: 0 0 auto;
}

.schedule-row__day strong {
  color: var(--ds-text);
  font-size: var(--ds-text-lg);
}

.schedule-row__day small,
.today-recent-row small,
.setup-readiness-card p {
  color: var(--ds-muted);
  line-height: 1.45;
}

.schedule-row__hours {
  justify-content: flex-end;
}

.schedule-row__hours .auth-input {
  width: min(7rem, 100%);
}

.setup-readiness-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-readiness-card {
  display: grid;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
}

.setup-readiness-card--ready {
  border-color: var(--ds-lime-border);
  background: linear-gradient(145deg, var(--ds-lime-soft), var(--ds-surface-1));
}

.setup-readiness-card strong {
  color: var(--ds-text);
  font-size: var(--ds-text-lg);
}

.crm-dashboard-grid--balanced {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: var(--ds-space-4);
  align-items: start;
}

.today-recent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--ds-space-3);
  align-items: center;
  gap: var(--ds-space-3);
  color: inherit;
  text-decoration: none;
}

.today-recent-row:hover {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
}

.today-recent-row__body {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.today-recent-row__body strong,
.today-recent-row__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-recent-row__body strong {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
}

@media (max-width: 980px) {
  .crm-dashboard-grid--balanced,
  .setup-readiness-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .schedule-row {
    grid-template-columns: 1fr;
  }

  .schedule-row__hours {
    justify-content: stretch;
  }

  .schedule-row__hours .auth-input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .today-recent-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .today-recent-row .status-pill {
    grid-column: 2;
    justify-self: start;
  }
}

.job-ticket--intake .job-ticket__value-card strong {
  color: var(--ds-lime);
}

@media (max-width: 560px) {
  .inbox-detail .ai-analysis-grid {
    grid-template-columns: 1fr;
  }

  .ai-analysis-grid .snapshot-summary-card,
  .snapshot-actions-card,
  .snapshot-job-details {
    grid-column: 1 / -1;
  }

  .snapshot-summary-card #ai-summary {
    font-size: 0.94rem;
  }

  .snapshot-action-pills {
    gap: 0.45rem;
  }

  .snapshot-action-pill {
    min-height: 2.6rem;
    padding-inline: 0.4rem;
    font-size: 0.72rem;
  }

  .job-brief-list > div {
    grid-template-columns: 1fr;
    gap: var(--ds-space-1);
  }

  .manual-action-panel .workspace-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .setup-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .setup-actions .btn {
    width: 100%;
  }
}

/* Workspace canvas and navigation */

body:has(.workspace-shell) {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 76% -15%, rgba(200, 255, 22, 0.055), transparent 32rem),
    radial-gradient(circle at 8% 100%, rgba(74, 112, 160, 0.045), transparent 30rem),
    var(--ds-canvas);
}

body:has(.workspace-shell) > .nav,
body:has(.workspace-shell) > .footer {
  display: none !important;
}

.workspace-shell {
  --crm-bg: var(--ds-canvas);
  --crm-bg-soft: var(--ds-base);
  --crm-sidebar: var(--ds-base);
  --crm-surface: var(--ds-surface-solid);
  --crm-surface-2: var(--ds-surface-solid-2);
  --crm-surface-3: var(--ds-surface-3);
  --crm-elevated: var(--ds-surface-3);
  --crm-border: var(--ds-border);
  --crm-border-soft: var(--ds-border);
  --crm-border-strong: var(--ds-border-high);
  --crm-text: var(--ds-text);
  --crm-text-soft: var(--ds-text-soft);
  --crm-muted: var(--ds-muted);
  --crm-muted-2: var(--ds-muted-2);
  --crm-primary: var(--ds-lime);
  --crm-primary-soft: var(--ds-lime-soft);
  --crm-primary-border: var(--ds-lime-border);
  --crm-success: var(--ds-success);
  --crm-warning: var(--ds-warning);
  --crm-danger: var(--ds-danger);
  --crm-info: var(--ds-info);
  --crm-radius-sm: var(--ds-radius-sm);
  --crm-radius: var(--ds-radius-md);
  --crm-radius-lg: var(--ds-radius-lg);
  --crm-shadow: var(--ds-shadow-md);
  --crm-focus: 0 0 0 3px var(--ds-lime-soft);
  --crm-sidebar-w: var(--ds-sidebar-width);
  min-height: 100dvh;
  color: var(--ds-text);
  background: transparent;
}

.ws-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  display: flex;
  width: var(--ds-sidebar-width);
  min-height: 100dvh;
  padding: 1rem 0.875rem 0.875rem;
  flex-direction: column;
  border-right: 1px solid var(--ds-border);
  background: #0b0e12;
  box-shadow: none;
}

[data-theme='light'] .ws-sidebar {
  background: #ffffff;
}

.ws-sidebar__brand {
  display: inline-flex;
  width: max-content;
  min-height: 42px;
  padding: 0 0.5rem;
  align-items: center;
  gap: 0.65rem;
  border-radius: var(--ds-radius-md);
  color: var(--ds-text);
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.ws-sidebar__brand-mark,
.ws-mobile-brand img,
.traden-logo-lockup__img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.traden-logo-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ws-command-trigger {
  display: flex;
  width: 100%;
  min-height: 40px;
  margin-top: 0.875rem;
  padding: 0 0.65rem;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-1);
  color: var(--ds-muted);
  cursor: pointer;
  transition: border-color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}

.ws-command-trigger:hover {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
  color: var(--ds-text-soft);
}

.ws-command-trigger span {
  flex: 1;
  text-align: left;
  font-size: var(--ds-text-sm);
  font-weight: 600;
}

.ws-command-trigger kbd,
.command-palette kbd {
  border: 1px solid var(--ds-border);
  border-bottom-color: var(--ds-border-high);
  border-radius: 0.375rem;
  background: var(--ds-highlight);
  color: var(--ds-muted-2);
  font-family: inherit;
  font-size: 0.625rem;
  line-height: 1;
  padding: 0.3rem 0.4rem;
}

.ws-nav {
  display: flex;
  min-height: 0;
  margin-top: 1rem;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ws-nav__section-label {
  display: block;
  margin: 0.7rem 0.65rem 0.35rem;
  color: var(--ds-muted-2);
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.ws-nav__section-label--spaced {
  margin-top: 1.25rem;
}

.ws-nav__item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 0 0.7rem;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-muted);
  font-size: 0.8125rem;
  font-weight: 620;
  text-decoration: none;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease);
}

.ws-nav__item svg {
  flex: 0 0 auto;
  color: var(--ds-muted-2);
  transition: color var(--ds-fast) var(--ds-ease);
}

.ws-nav__item > span:not(.ws-nav__badge) {
  flex: 1;
}

.ws-nav__item:hover {
  background: var(--ds-highlight);
  color: var(--ds-text-soft);
}

.ws-nav__item--active {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
  color: var(--ds-text);
  box-shadow: inset 3px 0 0 var(--ds-lime);
}

.ws-nav__item--active svg {
  color: var(--ds-lime);
}

.ws-nav__badge {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.32rem;
  place-items: center;
  border-radius: var(--ds-radius-pill);
  background: #ff7a00;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 14px rgba(255, 122, 0, 0.28);
}

.ws-nav__badge--warn {
  background: #ff7a00;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 122, 0, 0.28);
}

.ws-nav__badge--lime {
  background: var(--ds-lime);
  color: var(--ds-lime-ink);
}

.ws-sidebar__footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ds-border);
}

.workspace-shell .ws-help-card {
  display: grid;
  margin-top: 0.85rem;
  padding: 0.7rem 0.85rem 0.75rem;
  gap: 0.35rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: linear-gradient(145deg, var(--ds-surface-1), var(--ds-surface-2));
  box-shadow: inset 0 1px 0 var(--ds-highlight);
}

.workspace-shell .ws-help-card span {
  color: var(--ds-text);
  font-size: var(--ds-text-sm);
  font-weight: 760;
  line-height: 1.25;
}

.workspace-shell .ws-help-card a {
  color: var(--ds-lime);
  font-size: var(--ds-text-sm);
  font-weight: 720;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.workspace-shell .ws-help-card a:hover {
  color: var(--ds-text);
  text-decoration: underline;
  text-decoration-color: var(--ds-lime);
  text-underline-offset: 3px;
}

.ws-sidebar__footer .ws-help-card {
  margin: 0 0.35rem 0.85rem;
}

.ws-sidebar__account {
  display: flex;
  min-height: 54px;
  padding: 0.5rem;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  color: var(--ds-text);
  text-decoration: none;
  transition: background var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

.ws-sidebar__account:hover,
.ws-sidebar__account[aria-current='page'] {
  border-color: var(--ds-border);
  background: var(--ds-surface-1);
}

/* Settings shares the flat directory-page language used by Jobs and Customers. */
.settings-page {
  --settings-row-padding: 1rem 1.1rem;
  grid-template-columns: minmax(0, 1fr);
}

.settings-page-header {
  align-items: flex-end;
}

.settings-workspace {
  min-width: 0;
}

.settings-section-selector {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--ds-border);
}

.settings-section-tabs {
  display: flex;
  min-width: 0;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.settings-section-tabs::-webkit-scrollbar {
  display: none;
}

.settings-section-tabs a {
  display: inline-flex;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.settings-section-tabs a:hover,
.settings-section-tabs a:focus-visible {
  color: var(--ds-text);
}

.settings-section-tabs a.is-active,
.settings-section-tabs a[aria-selected='true'],
.settings-section-tabs a:active {
  border-bottom-color: var(--ds-lime);
  background: transparent;
  color: var(--ds-text);
}

.settings-section-tabs a:focus-visible,
.settings-switch input:focus-visible + span,
.settings-checkbox-row input:focus-visible {
  outline: 2px solid var(--ds-lime);
  outline-offset: 2px;
}

.settings-section-menu {
  display: none;
}

.settings-panel {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
}

.settings-panel[hidden] {
  display: none !important;
}

.settings-panel__head {
  min-height: 72px;
  padding: var(--settings-row-padding);
  align-items: center;
}

.settings-panel__head h2,
.settings-section-heading h3 {
  margin: 0;
  letter-spacing: 0;
}

.settings-panel__head p,
.settings-section-heading p {
  margin: 0.25rem 0 0;
  color: var(--ds-muted);
  line-height: 1.45;
}

.settings-form {
  min-width: 0;
}

.settings-form-section {
  padding: 1.1rem;
}

.settings-form-section--bordered {
  border-top: 1px solid var(--ds-border);
}

.settings-section-heading {
  margin-bottom: 1rem;
}

.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.settings-field-grid .form-field,
.settings-field-grid .auth-input {
  min-width: 0;
}

.settings-field-grid .form-field--full {
  grid-column: 1 / -1;
}

.settings-weekdays {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.settings-weekdays .weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.45rem;
  justify-content: center;
}

.settings-weekdays .weekday-card {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0.55rem 0.35rem;
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
}

.settings-input-suffix {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.settings-input-suffix .auth-input {
  width: 100%;
  padding-right: 4.25rem;
}

.settings-input-suffix > span:last-child {
  position: absolute;
  right: 0.85rem;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  pointer-events: none;
}

.settings-toggle-list,
.settings-row-list,
.settings-destination-list {
  border-top: 1px solid var(--ds-border);
}

.settings-toggle-row,
.settings-action-row,
.settings-data-row,
.settings-destination-list > a,
.settings-checkbox-row {
  display: flex;
  min-width: 0;
  min-height: 66px;
  padding: var(--settings-row-padding);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.settings-toggle-row > span:first-child,
.settings-action-row > span,
.settings-destination-list > a > span:first-child,
.settings-checkbox-row > span {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.settings-toggle-row small,
.settings-action-row small,
.settings-destination-list small,
.settings-checkbox-row small {
  color: var(--ds-muted);
  line-height: 1.4;
}

.settings-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.settings-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-switch > span {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border: 1px solid var(--ds-border-high);
  border-radius: 999px;
  background: var(--ds-surface-solid-2);
  cursor: pointer;
}

.settings-switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ds-muted);
  content: '';
  transition: transform 140ms ease, background-color 140ms ease;
}

.settings-switch input:checked + span {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
}

.settings-switch input:checked + span::after {
  background: var(--ds-lime);
  transform: translateX(20px);
}

.settings-form-actions,
.settings-panel-actions {
  display: flex;
  padding: 1rem 1.1rem;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  border-top: 1px solid var(--ds-border);
}

.settings-account-logout > div { display: grid; margin-right: auto; gap: 0.2rem; }
.settings-account-logout small { color: var(--ds-muted); line-height: 1.4; }
.settings-account-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.settings-account-buttons form { margin: 0; }
.workspace-shell .settings-account-buttons .btn--danger { color: #a82b39; border-color: #e5bac0; background: #fff7f8; }
.workspace-shell .settings-account-buttons .btn--danger:hover { background: #fce8eb; }

@media (max-width: 760px) {
  .settings-account-logout { align-items: stretch; flex-direction: column; }
  .settings-account-logout .btn { width: 100%; }
  .settings-account-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.settings-advanced {
  border-top: 1px solid var(--ds-border);
}

.settings-advanced > summary {
  display: flex;
  min-height: 66px;
  padding: var(--settings-row-padding);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.settings-advanced > summary::-webkit-details-marker {
  display: none;
}

.settings-advanced > summary > span:first-child {
  display: grid;
  gap: 0.2rem;
}

.settings-advanced > summary small,
.settings-sensitive-note,
.settings-muted-action {
  color: var(--ds-muted);
}

.settings-advanced[open] > summary {
  border-bottom: 1px solid var(--ds-border);
}

.settings-advanced > .settings-field-grid {
  padding: 1.1rem;
}

.settings-destination-list > a,
.settings-action-row--link {
  color: var(--ds-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.settings-destination-list > a:hover,
.settings-action-row--link:hover {
  background: var(--ds-highlight);
}

.settings-destination-list > a:active,
.settings-action-row--link:active {
  background: transparent;
}

.settings-destination-list--standalone {
  border-top: 0;
}

.settings-action-row__control {
  display: grid;
  justify-items: end;
}

.settings-data-row span {
  color: var(--ds-muted);
}

.settings-data-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.settings-sensitive-note {
  margin: 0 0 1rem;
  font-size: var(--ds-text-sm);
}

.settings-checkbox-row {
  margin: 1rem -1.1rem -1.1rem;
  justify-content: flex-start;
  cursor: pointer;
}

.settings-checkbox-row input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--ds-lime);
}

@media (prefers-reduced-motion: reduce) {
  .settings-switch > span::after {
    transition: none;
  }
}

@media (max-width: 760px) {
  .settings-page {
    --settings-row-padding: 0.9rem;
    padding-bottom: calc(6.25rem + env(safe-area-inset-bottom));
  }

  .settings-page-header {
    align-items: flex-start;
  }

  .settings-section-tabs {
    display: none;
  }

  .settings-section-selector {
    border-bottom: 0;
  }

  .settings-section-menu {
    display: block;
  }

  .settings-section-menu .auth-input {
    width: 100%;
    min-height: 46px;
  }

  .settings-panel__head,
  .settings-action-row,
  .settings-destination-list > a {
    align-items: flex-start;
  }

  .settings-panel__head {
    min-height: 0;
  }

  .settings-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-field-grid .form-field--full {
    grid-column: auto;
  }

  .settings-weekdays .weekday-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .settings-toggle-row {
    align-items: flex-start;
  }

  .settings-action-row {
    flex-direction: column;
  }

  .settings-action-row__control {
    width: 100%;
    justify-items: start;
  }

  .settings-data-row {
    min-height: 54px;
  }

  .settings-form-actions,
  .settings-panel-actions {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-form-actions .btn,
  .settings-panel-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }

  .settings-panel-actions.settings-account-logout {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-account-logout > div {
    margin-right: 0;
  }

  .document-settings-page .crm-page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ws-sidebar__logout {
  margin: 0.35rem 0.35rem 0;
}

.ws-sidebar__logout .ws-nav__item--logout {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--ds-danger) 32%, transparent);
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.ws-sidebar__logout .ws-nav__item--logout svg {
  color: var(--ds-danger);
}

.ws-sidebar__logout .ws-nav__item--logout:hover {
  border-color: color-mix(in srgb, var(--ds-danger) 52%, transparent);
  background: color-mix(in srgb, var(--ds-danger) 16%, transparent);
  color: var(--ds-danger);
}

.ws-user-avatar {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border-high);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--ds-surface-3), var(--ds-surface-solid));
  color: var(--ds-text);
  font-size: var(--ds-text-sm);
  font-weight: 750;
}

.ws-user-info {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.1rem;
}

.ws-user-info strong,
.ws-user-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-user-info strong {
  font-size: 0.75rem;
  font-weight: 650;
}

.ws-user-info small {
  color: var(--ds-muted);
  font-size: 0.6875rem;
}

.ws-main {
  min-width: 0;
  min-height: 100dvh;
  margin-left: var(--ds-sidebar-width);
  background: transparent;
}

.ws-content,
.crm-page {
  width: min(100%, 1600px);
  max-width: none;
  margin: 0 auto;
  padding: 1.5rem clamp(1.5rem, 3vw, 3rem) 3rem;
}

.ws-mobile-topbar,
.ws-bottom-nav {
  display: none;
}

/* Shared typography, surfaces, controls, and state */

.account-eyebrow,
.ds-eyebrow {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.account-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.account-eyebrow a:hover {
  color: var(--ds-text-soft);
}

.crm-page-header,
.ds-page-header {
  display: flex;
  min-height: auto;
  margin: 0 0 1.25rem;
  padding: 0.25rem 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.crm-page-header h1,
.ds-page-header h1 {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-title);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.crm-page-header p,
.ds-page-header p {
  max-width: 48rem;
  margin: 0.5rem 0 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-md);
  line-height: 1.55;
}

.crm-page-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.today-connect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 1rem;
}

.workspace-shell :where(.btn, .btn-card),
.command-palette :where(button, a) {
  min-height: 42px;
  border-radius: var(--ds-radius-md);
  font-size: 0.75rem;
  font-weight: 680;
  transition: transform var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}

.workspace-shell :where(.btn, .btn-card):active {
  transform: translateY(1px) scale(0.99);
}

.workspace-shell .btn--primary,
.workspace-shell .btn-approve,
.workspace-shell .inbox-composer__send {
  border-color: var(--ds-lime);
  background: var(--ds-lime);
  color: var(--ds-lime-ink);
  box-shadow: var(--ds-shadow-lime);
}

.workspace-shell .btn--primary:hover,
.workspace-shell .btn-approve:hover,
.workspace-shell .inbox-composer__send:hover {
  border-color: #d5ff45;
  background: #d5ff45;
  color: var(--ds-lime-ink);
  box-shadow: 0 14px 34px rgba(200, 255, 22, 0.17);
}

.workspace-shell .today-connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 999px;
  color: #061016;
  box-shadow: none;
  white-space: nowrap;
}

.workspace-shell .today-connect-btn--calendar {
  border-color: rgba(199, 213, 234, 0.42);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  padding-inline: 0.85rem;
}

.workspace-shell .today-connect-btn--calendar:hover {
  border-color: rgba(160, 184, 222, 0.56);
  background: #f8fbff;
}

.workspace-shell .calendar-logo-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-shell .calendar-logo-lockup__img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.workspace-shell .today-connect-btn--meta {
  border-color: rgba(27, 77, 162, 0.16);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(11, 24, 44, 0.10);
  padding-inline: 0.95rem;
}

.workspace-shell .today-connect-btn--meta:hover {
  border-color: rgba(27, 77, 162, 0.24);
  background: #f7fbff;
}

.workspace-shell .meta-logo-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.workspace-shell .meta-logo-lockup__img {
  display: block;
  width: clamp(4.15rem, 10vw, 5rem);
  height: auto;
  max-width: 100%;
}

.workspace-shell .meta-logo-lockup__img--light-ui {
  display: none;
}

.workspace-shell .meta-logo-lockup__img--dark-ui {
  display: none;
}

.workspace-shell .meta-logo-lockup__img--light-ui {
  display: block;
}

html[data-theme="light"] .workspace-shell .today-connect-btn--meta {
  border-color: rgba(116, 154, 255, 0.30);
  background: linear-gradient(135deg, rgba(12, 21, 37, 0.96), rgba(10, 30, 54, 0.94));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] .workspace-shell .today-connect-btn--meta:hover {
  border-color: rgba(126, 183, 255, 0.42);
  background: linear-gradient(135deg, rgba(14, 30, 54, 0.98), rgba(8, 38, 69, 0.96));
}

html[data-theme="light"] .workspace-shell .meta-logo-lockup__img--dark-ui {
  display: block;
}

html[data-theme="light"] .workspace-shell .meta-logo-lockup__img--light-ui {
  display: none;
}

/* The same secondary-action contrast contract applies outside the workspace,
   including cookie consent, public documents and confirmation overlays. */
[data-theme='light'] .btn--ghost {
  border-color: var(--ds-border-high);
  background: transparent;
  color: var(--ds-text-soft);
}

[data-theme='light'] .btn--ghost:hover {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
  color: var(--ds-text);
}

.workspace-shell .btn--ghost,
.workspace-shell .btn-edit,
.workspace-shell .btn-card:not(.btn-approve):not(.btn-reject):not(.btn-takeover) {
  border-color: var(--ds-border);
  background: var(--ds-highlight);
  color: var(--ds-text-soft);
  box-shadow: none;
}

.workspace-shell .btn--ghost:hover,
.workspace-shell .btn-edit:hover,
.workspace-shell .btn-card:not(.btn-approve):not(.btn-reject):not(.btn-takeover):hover {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
  color: var(--ds-text);
}

.workspace-shell .btn-reject {
  border-color: rgba(255, 102, 120, 0.22);
  background: var(--ds-danger-soft);
  color: #ff9aa6;
}

.workspace-shell :where(.crm-panel, .account-section, .app-card),
.ds-panel {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(145deg, var(--ds-surface-1), rgba(13, 17, 23, 0.90));
  box-shadow: var(--ds-shadow-sm), inset 0 1px 0 var(--ds-highlight);
  backdrop-filter: blur(var(--ds-blur-panel)) saturate(112%);
}

[data-theme='light'] .workspace-shell :where(.crm-panel, .account-section, .app-card),
[data-theme='light'] .ds-panel {
  background: var(--ds-surface-1);
}

.crm-panel__head,
.account-section__head {
  min-height: 64px;
  padding: 1rem 1.125rem;
  align-items: center;
  border-bottom-color: var(--ds-border);
}

.crm-panel__head h2,
.account-section__head h2 {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-text-xl);
  font-weight: 720;
  letter-spacing: -0.025em;
}

.crm-panel__head p,
.account-section__head p {
  margin: 0.3rem 0 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.45;
}

.crm-kpi-strip,
.ds-summary-strip {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.crm-kpi,
.ds-summary-card {
  min-width: 0;
  min-height: 86px;
  padding: 1rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(145deg, var(--ds-surface-2), var(--ds-surface-1));
  box-shadow: var(--ds-shadow-sm), inset 0 1px 0 var(--ds-highlight);
}

.crm-kpi > span,
.ds-summary-card > span {
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.crm-kpi > strong,
.ds-summary-card > strong {
  margin-top: 0.3rem;
  color: var(--ds-text);
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1;
}

.crm-kpi > small,
.ds-summary-card > small {
  margin-top: 0.35rem;
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
}

.ds-summary-card--attention,
.jobs-stat--attention {
  border-color: rgba(247, 189, 85, 0.25);
  background: linear-gradient(145deg, var(--ds-warning-soft), var(--ds-surface-1));
}

.status-pill,
.account-status,
.job-priority {
  display: inline-flex;
  min-height: 28px;
  padding: 0 0.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-highlight);
  color: var(--ds-text-soft);
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.status-pill--lime,
.account-status--active {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
}

.status-pill--warn {
  border-color: rgba(247, 189, 85, 0.30);
  background: var(--ds-warning-soft);
  color: var(--ds-warning);
}

.auth-input,
.workspace-textarea,
.inbox-search,
.inbox-composer__input,
.ds-search-field input,
.command-palette__search input {
  min-height: 46px;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-md);
  background: rgba(5, 8, 12, 0.55);
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease);
}

[data-theme='light'] :where(.auth-input, .workspace-textarea, .inbox-search, .inbox-composer__input, .ds-search-field input, .command-palette__search input) {
  background: rgba(255, 255, 255, 0.85);
}

:where(.auth-input, .workspace-textarea, .inbox-search, .inbox-composer__input, .ds-search-field input):focus {
  border-color: var(--ds-lime-border);
  background: var(--ds-surface-1);
  box-shadow: 0 0 0 3px var(--ds-lime-soft);
}

:where(.auth-input, .workspace-textarea, .inbox-search, .inbox-composer__input, .ds-search-field input)::placeholder {
  color: var(--ds-muted-2);
}

.form-label,
.auth-label {
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  font-weight: 650;
}

.ds-directory-toolbar {
  display: flex;
  min-height: 62px;
  margin: 0 0 0.875rem;
  padding: 0.5rem;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
  box-shadow: inset 0 1px 0 var(--ds-highlight);
  backdrop-filter: blur(var(--ds-blur-panel));
}

.ds-search-field {
  position: relative;
  display: flex;
  min-width: 16rem;
  flex: 1;
  align-items: center;
}

.ds-search-field svg {
  position: absolute;
  left: 0.9rem;
  z-index: 1;
  color: var(--ds-muted);
  pointer-events: none;
}

.ds-search-field input {
  width: 100%;
  padding: 0 1rem 0 2.65rem;
}

.ds-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ds-filter-tabs button,
.inbox-tab,
.calendar-view-switch a,
.calendar-view-switch button {
  min-height: 42px;
  padding: 0 0.85rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 650;
  cursor: pointer;
}

.ds-filter-tabs button:hover,
.inbox-tab:hover {
  color: var(--ds-text-soft);
  background: var(--ds-highlight);
}

.ds-filter-tabs button.is-active,
.inbox-tab--active {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
}

.ds-filter-empty {
  margin: 1rem;
}

.ws-empty {
  min-height: 120px;
  padding: 1.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px dashed var(--ds-border-high);
  border-radius: var(--ds-radius-md);
  background: var(--ds-highlight);
  color: var(--ds-muted);
  text-align: center;
}

.ws-empty strong {
  color: var(--ds-text-soft);
  font-size: var(--ds-text-md);
}

.crm-table__head {
  min-height: 46px;
  padding: 0 1rem;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-muted-2);
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.crm-table__row {
  border-color: var(--ds-border);
  color: var(--ds-text-soft);
  transition: background var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

.crm-table__row:hover {
  background: var(--ds-highlight);
}

.crm-cell {
  min-width: 0;
  align-items: center;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-md);
  line-height: 1.35;
}

.crm-cell strong {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  font-weight: 680;
}

.crm-cell small,
.crm-muted-text {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.4;
}

/* Command palette */

.command-palette {
  position: fixed;
  inset: 0;
  z-index: var(--ds-layer-modal);
  display: grid;
  padding: min(12vh, 7rem) 1rem 1rem;
  align-items: start;
  justify-items: center;
}

.command-palette__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(2, 4, 7, 0.66);
  backdrop-filter: blur(10px);
}

.command-palette__panel {
  position: relative;
  padding: 0;
  width: min(100%, 600px);
  max-height: min(680px, 78dvh);
  overflow: hidden auto;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-overlay);
  box-shadow: var(--ds-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--ds-blur-overlay)) saturate(125%);
  animation: command-in var(--ds-emphasised) var(--ds-ease) both;
}

@keyframes command-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.command-palette__header {
  display: flex;
  padding: 1.1rem 1.1rem 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.command-palette__header h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.ds-icon-button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-highlight);
  color: var(--ds-text-soft);
  cursor: pointer;
}

.command-palette__search {
  position: relative;
  display: flex;
  margin: 0 0.75rem 0.75rem;
  align-items: center;
}

.command-palette__search svg {
  position: absolute;
  left: 1rem;
  color: var(--ds-muted);
}

.command-palette__search input {
  width: 100%;
  min-height: 52px;
  padding: 0 3.4rem 0 2.9rem;
}

.command-palette__search kbd {
  position: absolute;
  right: 0.7rem;
}

.command-palette__list {
  display: grid;
  padding: 0 0.75rem 0.75rem;
  gap: 0.25rem;
}

.command-palette__list a {
  display: grid;
  min-height: 56px;
  padding: 0.65rem 0.8rem;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  border: 1px solid transparent;
  color: var(--ds-text);
  text-decoration: none;
}

.command-palette__list a:hover,
.command-palette__list a:focus-visible {
  border-color: var(--ds-border);
  background: var(--ds-surface-2);
}

.command-palette__list a span {
  font-size: var(--ds-text-md);
  font-weight: 680;
}

.command-palette__list a small {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.command-palette__empty {
  margin: 0;
  padding: 2rem;
  color: var(--ds-muted);
  text-align: center;
}

.has-command-palette,
.has-mobile-more {
  overflow: hidden;
}

/* Today */

.crm-today .crm-page-header {
  margin-bottom: 1rem;
}

.crm-today .ds-summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.today-priority-panel {
  border-color: var(--ds-border-high);
}

.today-action-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 24rem);
  padding: 0.75rem;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.today-action-carousel::-webkit-scrollbar {
  display: none;
}

.today-action-carousel > * {
  min-width: 0;
  scroll-snap-align: start;
}

.today-action-carousel > .ws-empty {
  grid-auto-columns: auto;
}

.today-schedule-panel {
  margin-top: var(--ds-space-4);
}

.today-priority-card {
  display: grid;
  min-height: 100%;
  padding: 1rem;
  gap: 0.9rem;
  align-content: start;
  border-left: 1px solid var(--ds-border);
}

.today-priority-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.today-priority-pill {
  display: inline-flex;
  min-height: 28px;
  padding: 0 0.75rem;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.today-priority-pill--needs-you {
  border-color: rgba(255, 122, 0, 0.46);
  background: rgba(255, 122, 0, 0.14);
  color: #b65500;
}

.today-priority-pill--take-over {
  border-color: rgba(255, 122, 0, 0.68);
  background: rgba(255, 122, 0, 0.2);
  color: #9a4300;
  box-shadow: 0 0 14px rgba(255, 122, 0, 0.16);
}

.today-priority-pill--ready {
  border-color: rgba(115, 155, 0, 0.4);
  background: rgba(197, 255, 0, 0.22);
  color: #587600;
}

.today-priority-card__time {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 680;
  white-space: nowrap;
}

.today-priority-card__body {
  display: grid;
  gap: 0.5rem;
}

.today-priority-card__body strong {
  color: var(--ds-text);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.15;
}

.today-priority-card__meta,
.today-priority-card__detail {
  margin: 0;
}

.today-priority-card__meta {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.today-priority-card__detail {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.55;
}

.today-priority-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.15rem;
}

.today-priority-card__actions .btn-card {
  min-width: 0;
}

.today-schedule-list {
  display: grid;
  gap: var(--ds-space-3);
}

.today-schedule-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
  box-shadow: inset 0 1px 0 var(--ds-highlight);
  color: inherit;
  text-decoration: none;
}

.today-schedule-row:hover {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
}

.today-schedule-row__time {
  color: var(--ds-lime);
  font-size: var(--ds-text-sm);
  font-weight: 760;
  white-space: nowrap;
}

.today-schedule-row__body {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.today-schedule-row__body strong {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
}

.today-schedule-row__body small {
  color: var(--ds-muted);
  line-height: 1.45;
}

.action-card {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-lime);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-1);
  box-shadow: none;
}

.action-card.risk-high,
.action-card.risk-urgent {
  border-left-color: var(--ds-danger);
}

.action-card.risk-medium {
  border-left-color: var(--ds-warning);
}

.action-card__compact {
  display: flex !important;
  min-height: 76px;
  padding: 0.8rem 0.9rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
}

.action-card__compact::-webkit-details-marker {
  display: none;
}

.action-card__compact-main {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem 0.75rem;
}

.action-card__compact-main strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-card__compact-main small {
  grid-column: 2;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.action-card__compact-main .action-card__next {
  color: var(--ds-text-secondary);
  line-height: 1.45;
}

.action-card__compact-main .action-card__next strong {
  display: inline;
  color: var(--ds-text);
  font-size: inherit;
  white-space: normal;
}

.card-type-badge {
  min-height: 24px;
  padding: 0 0.55rem;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
  font-size: 0.59rem;
  font-weight: 780;
  line-height: 24px;
  white-space: nowrap;
}

.action-card__plus {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border);
  border-radius: 50%;
  color: var(--ds-muted);
  transition: transform var(--ds-standard) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}

.action-card[open] .action-card__plus {
  color: var(--ds-lime);
  transform: rotate(45deg);
}

.action-card__detail {
  padding: 0.9rem;
  border-top: 1px solid var(--ds-border);
}

.action-card:not([open]) .action-card__detail {
  display: none;
}

.action-card__detail .card-summary {
  margin: 0;
  padding: 0;
}

.card-actions,
.workspace-actions {
  gap: 0.5rem;
}

/* Inbox conversation content. Its shell and scrolling contract live with the
   shared workspace architecture near the end of this file. */

.msg-date-separator {
  display: flex;
  justify-content: center;
  margin: 0.35rem 0 0.9rem;
}

.msg-date-separator span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0 0.7rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: rgba(13, 17, 24, 0.78);
  color: var(--ds-muted);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.01em;
}

.msg__bubble {
  max-width: min(76%, 620px);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ds-border);
  border-radius: 15px 15px 15px 5px;
  background: var(--ds-surface-1);
  color: var(--ds-text-soft);
  font-size: var(--ds-text-md);
  line-height: 1.5;
  box-shadow: var(--ds-shadow-sm);
}

.form-message-icon {
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  vertical-align: -3px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--ds-lime);
  opacity: 0.95;
  place-items: center;
}

.form-message-icon::before {
  content: "";
  width: 9px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  box-shadow: 0 3px 0 -2px currentColor;
}

.msg--out .msg__bubble {
  border-color: var(--ds-lime-border);
  border-radius: 15px 15px 5px 15px;
  background: var(--ds-lime-soft);
  color: var(--ds-text);
}

.msg__meta {
  color: var(--ds-muted-2);
  font-size: 0.625rem;
}

/* Jobs */

.jobs-page {
  --jobs-grid: minmax(240px, 1.65fr) minmax(140px, 0.95fr) minmax(150px, 0.95fr) minmax(180px, 1.1fr) minmax(110px, 0.72fr) minmax(140px, 0.9fr);
}

.jobs-page .jobs-table {
  --jobs-grid: minmax(240px, 1.65fr) minmax(140px, 0.95fr) minmax(150px, 0.95fr) minmax(180px, 1.1fr) minmax(110px, 0.72fr) minmax(140px, 0.9fr);
  width: 100%;
  min-width: 0;
}

.jobs-hero {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: transparent;
  box-shadow: none;
}

.jobs-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jobs-stat {
  min-height: 80px;
  padding: 0.9rem 1rem;
}

.jobs-stat > strong {
  font-size: 1.55rem;
}

.jobs-stat--primary {
  border-color: var(--ds-lime-border);
  background: linear-gradient(145deg, var(--ds-lime-soft), var(--ds-surface-1));
}

.jobs-board {
  border-radius: var(--ds-radius-lg);
}

.jobs-board__head {
  min-height: 62px;
}

.jobs-board__count {
  min-height: 28px;
  padding: 0 0.7rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-highlight);
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  line-height: 26px;
}

.jobs-table__head,
.jobs-row {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: var(--jobs-grid);
  column-gap: 0.8rem;
}

.jobs-page .jobs-table .crm-table__head,
.jobs-page .jobs-table .crm-table__row {
  width: 100%;
  min-width: 0;
  grid-template-columns: var(--jobs-grid);
  gap: 0.8rem;
}

.jobs-table__head {
  min-height: 44px;
  padding: 0 1rem;
}

.jobs-row {
  min-height: 94px;
  margin: 0;
  padding: 0.85rem 1rem;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.jobs-row:last-child {
  border-bottom: 0;
}

.jobs-row--attention {
  background: linear-gradient(90deg, var(--ds-warning-soft), transparent 40%);
  box-shadow: inset 3px 0 0 var(--ds-warning);
}

.jobs-work__title-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.jobs-work__title-line strong {
  color: var(--ds-text);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.job-next-action {
  display: -webkit-box;
  margin-top: 0.3rem;
  overflow: hidden;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jobs-location span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ds-text-soft);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jobs-status {
  align-items: center;
  justify-content: center;
}

.jobs-status-pill {
  width: 92px;
  height: 30px;
}

.jobs-when small {
  display: block;
  margin-top: 0.2rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  line-height: 1.35;
}

.jobs-unread {
  margin-top: 0.3rem;
  color: var(--ds-warning) !important;
  font-size: 0.58rem !important;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crm-cell-link {
  margin-top: 0.25rem;
  color: var(--ds-lime);
  font-size: var(--ds-text-xs);
  font-weight: 650;
  text-decoration: none;
}

.jobs-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.jobs-action {
  width: 100%;
  min-height: 36px !important;
  padding: 0 0.55rem;
}

/* Customers and customer profile */

.customers-directory-toolbar {
  width: 100%;
}

.inbox-automation-control {
  display: flex;
  min-height: 48px;
  padding: 0.45rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface-1);
}

.inbox-automation-control[hidden] {
  display: none;
}

.inbox-automation-control span {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  font-weight: 760;
}

/* Canonical job workflow and customer document response */
.job-workflow-panel {
  border-color: rgba(143, 188, 0, 0.4);
  background:
    linear-gradient(135deg, rgba(204, 255, 0, 0.1), transparent 42%),
    var(--ds-surface, #fff);
}

.job-workflow-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.booking-review-modal__box {
  width: min(100%, 42rem);
}

.booking-review-modal__content {
  display: grid;
  gap: 1rem;
}

.booking-review-modal__eyebrow {
  color: #6c8d00;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.booking-review-modal__copy {
  margin: -0.45rem 0 0;
  color: #65705d;
  line-height: 1.6;
}

.booking-review-modal__slots {
  display: grid;
  border-block: 1px solid var(--ds-border);
}

.booking-review-slot {
  display: grid;
  min-width: 0;
  padding: 0.8rem 0.2rem;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text);
  cursor: pointer;
}

.booking-review-slot:last-child {
  border-bottom: 0;
}

.booking-review-slot > input {
  position: absolute;
  opacity: 0;
}

.booking-review-slot__check {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  border: 2px solid var(--ds-border);
  border-radius: 4px;
  background: var(--ds-surface-solid);
}

.booking-review-slot > input:checked + .booking-review-slot__check {
  border-color: var(--ds-lime);
  background: var(--ds-lime);
  box-shadow: inset 0 0 0 3px var(--ds-surface-solid);
}

.booking-review-slot > input:focus-visible + .booking-review-slot__check {
  outline: 2px solid var(--ds-lime);
  outline-offset: 2px;
}

.booking-review-slot__body {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.booking-review-slot__index {
  color: #6b8d00;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.booking-review-slot strong {
  color: var(--ds-text);
  font-size: 1rem;
}

.booking-review-slot small {
  overflow-wrap: anywhere;
  color: var(--ds-muted);
  line-height: 1.35;
}

.booking-review-modal__field {
  display: grid;
  gap: 0.4rem;
}

.booking-review-modal__field span {
  color: #273124;
  font-size: 0.8rem;
  font-weight: 800;
}

.booking-review-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem;
}

.job-ticket__payment-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
}

.job-ticket__payment-fields label,
.public-document-actions label {
  display: grid;
  gap: 0.35rem;
  color: #2f3440;
  font-size: 0.78rem;
  font-weight: 700;
}

.job-workflow-timeline {
  margin-top: 0.9rem;
  border-top: 1px solid rgba(24, 28, 36, 0.1);
  padding-top: 0.75rem;
}

.job-workflow-timeline summary {
  cursor: pointer;
  color: #3e4655;
  font-weight: 750;
}

.job-workflow-timeline ol {
  display: grid;
  gap: 0.55rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.job-workflow-timeline li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-left: 3px solid #9bc000;
  padding-left: 0.65rem;
}

.job-workflow-timeline small {
  color: #697180;
  text-align: right;
}

.settings-subsection {
  display: grid;
  gap: 0.8rem;
  border: 1px solid rgba(24, 28, 36, 0.1);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(248, 249, 244, 0.82);
}

.settings-subsection h3 {
  margin: 0;
  color: #11151d;
  font-size: 1rem;
}

.document-editor__fields {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.document-editor__fields:disabled .auth-input {
  opacity: 1;
  color: var(--ds-text-soft);
  background: var(--ds-surface-2);
}

/* Manual, approved and read-only documents use the shared workspace scale. */
.workspace-shell .ws-content.document-review-compact {
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--app-section-gap);
  scroll-padding-block: 1rem calc(var(--ds-touch-height) + 3rem);
}

.document-review-page .document-review-header { display: flex; align-items: center; margin: 0; }
.document-review-header > div:first-child { min-width: 0; }
.document-review-header h1 { font-size: var(--app-page-title-size); line-height: 1.2; overflow-wrap: anywhere; }
.document-review-header .account-eyebrow { font-size: var(--ds-text-xs); }
.document-review-header p { font-size: var(--ds-text-sm); }
.document-review-header .crm-page-actions { min-width: 0; }
.document-review-header .crm-page-actions form { margin: 0; }

.workspace-shell .document-review-page :is(.document-completion-panel, .quote-recommendation) {
  margin: 0;
  padding: var(--app-card-padding);
  border-radius: var(--app-card-radius);
}
.document-review-page .document-completion-panel__head h2 { font-size: var(--ds-text-xl); }
.document-review-page .document-completion-panel .app-status-pill { max-width: 100%; white-space: normal; font-weight: 700; }
.document-review-page .document-completion-panel .account-eyebrow { font-size: var(--ds-text-xs); }
.document-review-page .document-summary-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--app-card-radius); }
.document-review-page .document-summary-strip span { font-size: var(--ds-text-xs); font-weight: 700; }
.document-review-page .document-summary-strip strong { font-size: var(--ds-text-md); white-space: normal; overflow-wrap: anywhere; }
.document-review-page .quote-recommendation__summary p { font-size: var(--ds-text-sm); }

.document-review-page .document-editor__fields { gap: var(--app-section-gap); }
.document-review-page .document-review-section { margin: 0; border-radius: var(--app-card-radius); }
.document-review-page .document-review-section > summary {
  display: grid !important; /* Override the legacy mobile disclosure's forced flex layout. */
  grid-template-columns: minmax(0, 1fr) auto 24px;
  min-height: var(--ds-touch-height);
  align-items: center;
  gap: var(--ds-space-2);
}
.document-review-page .document-review-section > summary::after { content: "+" / ""; text-align: center; font-size: var(--ds-text-xl); }
.document-review-page .document-review-section[open] > summary::after { content: "−" / ""; }
.document-review-page .document-review-section > summary:focus-visible { outline: 2px solid var(--ds-lime); outline-offset: -3px; }
.document-review-page .document-review-section h2 { font-size: var(--ds-text-lg); font-weight: 700; }
.document-review-page .document-review-section .account-section__head p { font-size: var(--ds-text-sm); }
.document-review-page .section-completion { font-size: var(--ds-text-xs); }
.document-review-page .document-review-section .document-field { display: grid; gap: var(--ds-space-2); min-width: 0; margin: 0; padding: 0; }
.document-review-page .document-review-section > .document-field { margin: 0 14px 14px; }
.document-review-page .document-line-item > .document-field,
.document-review-page .form-grid > .document-field { grid-column: auto; }
.document-review-page .document-field > span:first-child,
.document-review-page .form-grid > label > span { color: var(--ds-text-soft); font-size: var(--ds-text-sm); font-weight: 700; }
.document-review-page .document-field > .document-readonly-value { display: block; min-width: 0; color: var(--ds-text); font-size: var(--ds-text-md); font-weight: 400; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.document-review-page .document-line-item { align-items: start; gap: var(--ds-space-3); }
.document-review-page .auth-input { min-width: 0; min-height: var(--ds-control-height); font-size: var(--ds-text-md); border-radius: var(--ds-radius-md); }
.document-review-page :is(.document-sticky-actions, .crm-page-actions) .btn { min-height: var(--ds-control-height); font-size: var(--ds-text-md); border-radius: var(--ds-radius-md); }
.document-review-page .document-sticky-actions { bottom: 0; z-index: 6; border-radius: var(--app-card-radius); }
.document-review-page .document-sticky-actions:empty { display: none; }

@media (max-width: 900px) {
  body .workspace-shell .ws-content.app-page.document-review-compact { padding-bottom: var(--ds-space-2); }
  .document-review-page .document-review-header { align-items: stretch; flex-direction: column; gap: var(--ds-space-3); }
  .document-review-page .document-review-header h1 { font-size: var(--app-page-title-size-mobile); }
  .document-review-page .document-review-header .crm-page-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-review-page .document-review-header .crm-page-actions:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .document-review-page .crm-page-actions form .btn { width: 100%; }
  .document-review-page :is(.document-sticky-actions, .crm-page-actions) .btn { min-height: var(--ds-touch-height); }
  .document-review-page .document-sticky-actions { display: flex; flex-wrap: wrap; }
  .document-review-page .document-sticky-actions .btn { flex: 1 1 135px; width: auto; }
  .document-review-page .auth-input { min-height: var(--ds-touch-height); font-size: 1rem; }
}

@media (max-width: 560px) {
  .document-review-page .document-review-header .crm-page-actions:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-review-page .crm-page-actions > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .document-review-page .document-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-review-page .document-summary-strip > div { border: 0; }
  .document-review-page .document-summary-strip > div:nth-child(even) { border-left: 1px solid var(--ds-border); }
  .document-review-page .document-summary-strip > div:nth-child(n + 3) { border-top: 1px solid var(--ds-border); }
  .document-review-page .document-line-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-review-page .document-line-item > :nth-child(-n + 2) { grid-column: 1 / -1; }
}

.public-document-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow-x: clip;
  background: var(--ds-canvas);
}

.public-document-card {
  width: min(100%, 34rem);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}

.public-document-card__head,
.public-document-actions,
.public-document-result {
  padding: 1.5rem;
}

.public-document-card__head h1 {
  margin: 0.25rem 0;
  color: var(--ds-text);
  font-size: var(--ds-title);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.public-document-card__head p,
.public-document-result p {
  margin: 0;
  color: var(--ds-muted);
}

.public-document-card__eyebrow {
  color: var(--ds-lime);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.public-document-card__amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--ds-lime-soft);
  color: var(--ds-text);
  flex-wrap: wrap;
}

.public-document-card__amount strong {
  color: var(--ds-lime);
  font-size: var(--ds-title);
  overflow-wrap: anywhere;
}

.public-document-actions {
  display: grid;
  gap: 0.8rem;
}

.public-document-actions .btn--ghost {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-solid);
  color: var(--ds-text-soft);
}

.public-document-actions .btn--ghost:hover {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
  color: var(--ds-text);
}

.public-document-actions .btn {
  min-height: var(--ds-touch-height);
  padding-inline: var(--ds-space-2);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-md);
  white-space: normal;
}

.public-document-actions .auth-input {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-color: var(--ds-border-high);
  border-radius: var(--ds-radius-md);
}

.public-document-actions .btn:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }

.public-document-alternatives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); }
.public-document-help { margin: 0; color: var(--ds-muted); font-size: var(--ds-text-xs); line-height: 1.5; }
.public-document-actions :is(button, textarea):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 3px; }
.quote-swipe[hidden], .public-document-help[hidden] { display: none; }

.quote-swipe {
  position: relative;
  width: 100%;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--ds-lime-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-lime-soft);
  color: var(--ds-text-soft);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.quote-swipe:focus-visible {
  outline: 2px solid var(--ds-lime);
  outline-offset: 3px;
}

.quote-swipe__label {
  position: absolute;
  inset: 0 0 0 60px;
  display: grid;
  place-items: center;
  padding-inline: 0.75rem;
  font-size: var(--ds-text-md);
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.quote-swipe__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-lime);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 800;
  transform: translateX(0);
  will-change: transform;
  pointer-events: none;
}

.quote-swipe.is-resetting .quote-swipe__thumb,
.quote-swipe.is-submitting .quote-swipe__thumb {
  transition: transform 180ms ease;
}

.quote-swipe.is-ready,
.quote-swipe.is-submitting {
  border-color: var(--ds-lime);
  background: var(--ds-lime-soft);
}

.quote-swipe.is-submitting {
  cursor: wait;
}

.public-document-download {
  display: block;
  margin: 0 1.5rem 1.25rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-md);
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-document-download:focus-visible {
  outline: 2px solid var(--ds-lime);
  outline-offset: 3px;
}

.public-document-result--success {
  border-left: 5px solid var(--ds-lime);
}

.public-document-result strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ds-text);
  font-size: var(--ds-text-xl);
}

.public-document-card__foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ds-border);
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .quote-swipe__thumb {
    transition: none !important;
  }
}

@media (max-width: 680px) {
  .public-document-page {
    place-items: start center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }

  .public-document-card {
    border-radius: var(--ds-radius-xl);
  }

  .public-document-card__head,
  .public-document-actions,
  .public-document-result {
    padding: 1.25rem;
  }

  .public-document-card__amount {
    padding: 1rem 1.25rem;
  }

  .public-document-download {
    margin-inline: 1.25rem;
  }

  .public-document-card__foot {
    padding-inline: 1.25rem;
  }

  .job-ticket__payment-fields {
    grid-template-columns: 1fr;
  }

  .job-workflow-panel__actions > * {
    width: 100%;
  }

  .booking-review-modal__actions > * {
    width: 100%;
  }
}

.customers-page .customers-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr);
  min-height: 0;
  margin-bottom: 1rem;
  padding: 0;
  gap: 0.7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.customers-page .customers-directory-toolbar .ds-search-field {
  min-width: 0;
}

.customers-page .customers-directory-toolbar .ds-filter-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  padding: 0.45rem 0;
  gap: 0.2rem;
  border-bottom: 1px solid var(--ds-border);
}

.customers-page .customers-directory-toolbar .ds-filter-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 0 0.45rem;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.customers-table {
  --customers-grid: var(--jobs-grid);
  width: 100%;
  min-width: 0;
}

.customers-table__head,
.customer-row {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: var(--customers-grid);
  column-gap: 0.8rem;
}

.customers-list-panel .customers-table .crm-table__head,
.customers-list-panel .customers-table .crm-table__row {
  width: 100%;
  min-width: 0;
  grid-template-columns: var(--customers-grid);
  gap: 0.8rem;
}

.customers-table__head {
  min-height: 44px;
  padding: 0 1rem;
}

.customer-row {
  position: relative;
}

.customer-row:last-child {
  border-bottom: 0;
}

.customer-row--attention {
  background: linear-gradient(90deg, var(--ds-warning-soft), transparent 40%);
  box-shadow: inset 3px 0 0 var(--ds-warning);
}

.customer-profile-hero__name {
  display: block;
  margin-top: 0.55rem;
  color: var(--ds-text);
  font-size: 1.1rem;
  font-weight: 680;
}

.customer-profile-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  align-items: start;
  gap: 1rem;
}

.customer-profile-page > .customer-profile-hero,
.customer-profile-page > .customer-jobs-panel {
  grid-column: 1 / -1;
}

.customer-overview-panel,
.customer-contacts-panel,
.customer-jobs-panel {
  margin: 0;
}

.customer-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-overview-item {
  min-height: 78px;
  padding: 1rem;
  border-color: var(--ds-border);
}

.customer-overview-item span,
.customer-notes > span {
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-overview-item strong {
  margin-top: 0.35rem;
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  font-weight: 660;
}

.customer-notes {
  padding: 1rem;
  border-top: 1px solid var(--ds-border);
}

.customer-notes p {
  margin: 0.45rem 0 0;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-md);
  line-height: 1.55;
}

.customer-contact-card {
  display: grid;
  min-height: 72px;
  padding: 0.9rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.75rem;
  border-color: var(--ds-border);
}

.customer-contact-card > div {
  min-width: 0;
}

.customer-contact-card > div:first-child strong,
.customer-contact-card > div:nth-child(2) span,
.customer-contact-card > div:nth-child(2) small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  white-space: nowrap;
}

.customer-contact-card > div:nth-child(2) {
  grid-column: 1;
}

.customer-contact-card > .status-pill {
  grid-column: 2;
  grid-row: 1 / 3;
}

.customer-job-group {
  padding: 0.75rem;
}

.customer-job-group h3 {
  margin: 0.35rem 0 0.75rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-md);
  font-weight: 680;
}

/* Calendar */

.calendar-page .crm-page-header {
  align-items: flex-start;
}

.calendar-kpis,
.calendar-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-layout {
  gap: 1rem;
}

.calendar-board,
.calendar-panel,
.calendar-agenda,
.calendar-history {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
  box-shadow: var(--ds-shadow-sm);
}

.calendar-toolbar :where(a, button) {
  min-width: 42px;
  min-height: 42px;
}


.calendar-mobile-switch,
.calendar-mobile-panels {
  display: none;
}

.calendar-event,
.calendar-mobile-event {
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
}

/* Documents */

.document-kpis {
  width: min(100%, 720px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px 180px auto;
  min-height: 64px;
}

.document-toolbar .auth-input {
  width: 100%;
}

.document-list {
  display: grid;
}

.document-group {
  border-bottom: 1px solid var(--ds-border);
}

.document-group:last-child {
  border-bottom: 0;
}

.document-group__head {
  display: flex;
  min-height: 52px;
  padding: 0.7rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ds-highlight);
  color: var(--ds-text);
  list-style: none;
  cursor: pointer;
}

.document-group__head::-webkit-details-marker {
  display: none;
}

.document-group__head > span:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.55rem;
}

.document-group__head strong {
  font-size: var(--ds-text-md);
  font-weight: 680;
}

.document-group__head small {
  overflow: hidden;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-group__count {
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  white-space: nowrap;
}

.document-row {
  display: grid;
  min-height: 82px;
  padding: 0.75rem 1rem;
  grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.38fr) max-content;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--ds-border);
  background: transparent;
}

.document-row__main {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 0.25rem 0.65rem;
  color: var(--ds-text);
  text-decoration: none;
}

.document-row__main small {
  grid-column: 2;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.document-row__meta {
  display: grid;
  gap: 0.18rem;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.document-row__meta strong {
  color: var(--ds-text-soft);
}

.document-row__actions {
  display: flex;
  gap: 0.4rem;
}

/* Services, settings, documents, and job-ticket detail surfaces */

.services-mobile .crm-page-header,
.setup-account .crm-page-header {
  margin-bottom: 1rem;
}

.service-config-list {
  display: grid;
}

.service-config {
  border-color: var(--ds-border);
  background: transparent;
}

.service-config__summary {
  min-height: 70px;
  padding: 0.7rem 1rem;
  gap: 0.8rem;
}

.service-config__summary:hover {
  background: var(--ds-highlight);
}

.service-row__num {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-lime-border);
  border-radius: 9px;
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
  font-size: var(--ds-text-xs);
  font-weight: 750;
}

.service-config__main strong {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  font-weight: 680;
}

.service-config__main small {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.service-traits > span {
  border-color: var(--ds-border-high);
  background: var(--ds-highlight);
  color: var(--ds-text-soft);
}

.service-config__body {
  padding: 1rem;
  border-top: 1px solid var(--ds-border);
  background: rgba(5, 8, 12, 0.28);
}

.setup-account:not(.services-mobile) {
  max-width: 1500px;
}

.account-nav {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
}

.account-nav a {
  min-height: 40px;
  border-radius: 0.55rem;
  color: var(--ds-muted);
}

.account-nav a:hover,
.account-nav a.is-active {
  background: var(--ds-lime-soft);
  color: var(--ds-text);
}

.account-section {
  margin-bottom: 0.75rem;
}

.account-row {
  min-height: 58px;
  padding: 0.8rem 1rem;
  border-color: var(--ds-border);
}

.account-row > span {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.account-row > strong {
  color: var(--ds-text-soft);
  font-size: var(--ds-text-md);
  font-weight: 650;
}

.document-review-page .account-section,
.document-review-page .document-review-summary {
  border-radius: var(--ds-radius-lg);
}

.ws-modal__backdrop {
  background: rgba(2, 4, 7, 0.74);
  backdrop-filter: blur(10px);
}

.ws-modal__box {
  width: min(1180px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-overlay);
  box-shadow: var(--ds-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--ds-blur-overlay));
}

.clear-inbox-modal__box {
  width: min(390px, calc(100vw - 2rem));
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.24);
  text-align: left;
  backdrop-filter: none;
}

#clear-inbox-modal {
  min-height: 100dvh;
  padding: 1rem;
  align-items: center;
  justify-content: center;
}

.clear-inbox-modal__title {
  margin: 0;
  color: #111827;
  font-size: clamp(1.05rem, 3.6vw, 1.2rem);
  font-weight: 800;
  line-height: 1.25;
}

.clear-inbox-modal__content {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
}

.clear-inbox-modal__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.clear-inbox-modal__icon svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.clear-inbox-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid rgba(16, 24, 40, 0.10);
}

.clear-inbox-modal__button {
  appearance: none;
  min-width: 0;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #6b7280;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 800;
  box-shadow: none;
  cursor: pointer;
}

.clear-inbox-modal__button + .clear-inbox-modal__button {
  border-left: 1px solid rgba(16, 24, 40, 0.10);
}

.clear-inbox-modal__button:hover,
.clear-inbox-modal__button:focus-visible {
  background: #4b5563;
  color: #ffffff;
}

.clear-inbox-modal__button--delete {
  background: #ef4444;
  color: #ffffff;
}

.clear-inbox-modal__button--delete:hover,
.clear-inbox-modal__button--delete:focus-visible {
  background: #dc2626;
  color: #ffffff;
}

.clear-inbox-modal__warning {
  margin: 0.32rem 0 0;
  color: #667085;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}

#clear-inbox-modal .ws-modal__backdrop {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
}

#clear-inbox-feedback:empty {
  display: none;
}

html[data-theme="dark"] .clear-inbox-modal__box {
  background: #ffffff;
}

html[data-theme="dark"] .clear-inbox-modal__title {
  color: #111827;
}

@media (max-width: 520px) {
  #clear-inbox-modal {
    min-height: 100svh;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  }

  .clear-inbox-modal__box {
    width: min(320px, calc(100vw - 2rem));
    margin: auto;
  }

  .clear-inbox-modal__content {
    grid-template-columns: 3.35rem minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1rem;
  }

  .clear-inbox-modal__button {
    min-height: 52px;
    font-size: 0.95rem;
  }
}

.ws-modal__close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
  color: var(--ds-text-soft);
}

.job-ticket {
  color: var(--ds-text);
}

.job-ticket__hero {
  padding: 1.25rem;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-xl);
  background: linear-gradient(135deg, var(--ds-lime-soft), var(--ds-surface-2) 45%, var(--ds-surface-1));
  box-shadow: var(--ds-shadow-md), inset 0 1px 0 var(--ds-highlight);
}

.job-ticket__status {
  min-height: 28px;
  border-radius: var(--ds-radius-pill);
}

.job-ticket__quick-grid {
  gap: 0.75rem;
}

.job-ticket__quick-card,
.job-ticket__panel,
.job-ticket__value-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
  box-shadow: var(--ds-shadow-sm), inset 0 1px 0 var(--ds-highlight);
}

.job-ticket__workspace {
  gap: 1rem;
}

.job-ticket__panel {
  padding: 1rem;
}

.job-ticket__actions {
  position: sticky;
  bottom: -1px;
  z-index: 4;
  padding: 0.75rem;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-lg);
  background: rgba(11, 15, 21, 0.92);
  box-shadow: var(--ds-shadow-md);
  backdrop-filter: blur(20px);
}

/* Auth, onboarding, public surfaces, errors, and cookies */

.auth-page,
.setup-shell {
  background:
    radial-gradient(circle at 70% 0%, rgba(200, 255, 22, 0.07), transparent 28rem),
    radial-gradient(circle at 0% 100%, rgba(112, 200, 255, 0.05), transparent 26rem),
    var(--ds-canvas);
}

.auth-card,
.setup-card {
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-1);
  box-shadow: var(--ds-shadow-lg), inset 0 1px 0 var(--ds-highlight);
  backdrop-filter: blur(20px);
}

.auth-card__title,
.setup-title {
  color: var(--ds-text);
  font-weight: 760;
  letter-spacing: -0.045em;
}

.auth-card__subtitle,
.setup-copy {
  color: var(--ds-muted);
  line-height: 1.6;
}

.setup-card {
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

.setup-header {
  margin-bottom: 1.5rem;
}

.step-track {
  gap: 0.35rem;
}

.step-dot {
  width: clamp(22px, 5vw, 42px);
  height: 4px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-border-high);
}

.step-dot--done,
.step-dot--active {
  background: var(--ds-lime);
}

.weekday-card {
  min-height: 56px;
  border-color: var(--ds-border-high);
  border-radius: var(--ds-radius-md);
  background: var(--ds-highlight);
}

.weekday-card.active,
.weekday-card:has(input:checked) {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
}

.integration-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-2);
  box-shadow: var(--ds-shadow-sm);
}

.integrations-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}

.integrations-summary__stat {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 0.85rem;
}

.integrations-summary__icon {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-lime-soft);
  color: #638200;
}

.integrations-summary__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.integrations-summary__icon--muted {
  background: var(--ds-surface-2);
  color: var(--ds-muted);
}

.integrations-summary__stat strong {
  display: block;
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  font-weight: 800;
}

.integrations-summary__stat p {
  margin: 0.15rem 0 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  line-height: 1.4;
}

.integrations-summary__divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  background: var(--ds-border);
}

.integrations-summary__secure {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.integration-card {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem 1.1rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
  text-align: center;
}

.integration-card--paused {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
}

.integration-card--paused .integration-card__icon img {
  filter: grayscale(1);
  opacity: 0.75;
}

.integration-card__icon {
  display: grid;
  width: 60px;
  height: 60px;
  margin-bottom: 0.15rem;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}

.integration-card__icon img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.integration-card__title {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  font-weight: 800;
}

.integration-card__desc {
  margin: 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  line-height: 1.45;
}

.integration-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-2);
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  font-weight: 700;
}

.integration-card__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.integration-card__status--connected {
  background: var(--ds-lime-soft);
  color: #638200;
}

.integration-card__status--paused {
  border: 1px solid var(--ds-border-high);
  color: var(--ds-text);
}

.integration-card__btn {
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  margin-top: 0.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1.5px solid var(--ds-lime);
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: #638200;
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease);
}

.integration-card__btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.integration-card__btn:hover,
.integration-card__btn:focus-visible {
  background: var(--ds-lime-soft);
}

.integration-card__btn--unavailable {
  border-color: var(--ds-border-high);
  background: var(--ds-surface-2);
  color: var(--ds-muted);
  cursor: not-allowed;
}

.integration-card__btn--unavailable:hover {
  background: var(--ds-surface-2);
}

.integration-card__action-form {
  width: 100%;
  margin: 0;
}

.integration-card__btn--disconnect {
  border-color: var(--ds-border);
  color: var(--ds-muted);
}

.integration-card__btn--disconnect:hover,
.integration-card__btn--disconnect:focus-visible {
  border-color: var(--ds-danger);
  background: transparent;
  color: var(--ds-danger);
}

.integrations-sync-list {
  margin-top: 1.5rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-2);
  overflow: hidden;
}

.cookie-consent {
  border-color: var(--ds-border-high);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-overlay);
  box-shadow: var(--ds-shadow-lg);
  backdrop-filter: blur(var(--ds-blur-overlay));
}

.error-card__title {
  letter-spacing: -0.04em;
}

/* Admin */

.admin-overview-grid,
.admin-recovery-grid,
.admin-access-grid,
.admin-records-grid {
  gap: 1rem;
}

.admin-filter-form {
  padding: 1rem;
  gap: 0.75rem;
  border-block: 1px solid var(--ds-border);
  background: var(--ds-highlight);
}

.admin-log-row,
.admin-priority-row {
  min-height: 64px;
  padding: 0.75rem 1rem;
  border-color: var(--ds-border);
}

/* Tablet */

@media (max-width: 1180px) {
  :root {
    --ds-sidebar-width: 218px;
  }

  .ws-sidebar {
    padding-inline: 0.7rem;
  }

  .ws-content,
  .crm-page {
    padding-inline: 1.5rem;
  }

  .jobs-page {
    --jobs-grid: minmax(200px, 1.6fr) minmax(120px, 0.95fr) minmax(126px, 0.95fr) minmax(150px, 1.05fr) minmax(98px, 0.72fr) minmax(124px, 0.9fr);
  }

  .jobs-page .jobs-table {
    --jobs-grid: minmax(200px, 1.6fr) minmax(120px, 0.95fr) minmax(126px, 0.95fr) minmax(150px, 1.05fr) minmax(98px, 0.72fr) minmax(124px, 0.9fr);
  }

  .job-priority {
    display: none;
  }

  .document-toolbar {
    grid-template-columns: minmax(220px, 1fr) 150px 150px auto;
  }
}

@media (max-width: 980px) {
  .jobs-table__head {
    display: none;
  }

  .jobs-row {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) auto;
    grid-template-areas:
      'work customer status'
      'when location location'
      'actions actions actions';
    row-gap: 0.8rem;
  }

  .jobs-page .jobs-table .crm-table__row {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) auto;
    grid-template-areas:
      'work customer status'
      'when location location'
      'actions actions actions';
    gap: 0.8rem;
  }

  .jobs-customer { grid-area: customer; }
  .jobs-work { grid-area: work; }
  .jobs-when { grid-area: when; }
  .jobs-location { grid-area: location; }
  .jobs-status { grid-area: status; }
  .jobs-actions { grid-area: actions; }

  .jobs-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jobs-action {
    min-height: 42px !important;
  }

  .customer-profile-page {
    grid-template-columns: 1fr;
  }

  .customer-profile-page > * {
    grid-column: 1;
  }
}

/* Mobile product shell */

@media (max-width: 900px) {
  :root {
    --ds-sidebar-width: 0px;
    --ws-mobile-nav-base-height: 96px;
    --ws-mobile-nav-item-height: 88px;
    --ws-mobile-nav-top-clearance: 8px;
    --ws-mobile-nav-motion-ms: 280;
    --ws-mobile-nav-ease: cubic-bezier(0.22, 0.75, 0.25, 1);
    --ws-mobile-nav-inline-start: max(0.5rem, env(safe-area-inset-left, 0px));
    --ws-mobile-nav-inline-end: max(0.5rem, env(safe-area-inset-right, 0px));
    --ws-mobile-safe-top: env(safe-area-inset-top, 0px);
    --ws-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ws-mobile-nav-fill-bottom: var(--ws-mobile-safe-bottom);
    --ws-mobile-topbar-base-height: 64px;
    --ws-mobile-topbar-height: calc(var(--ws-mobile-topbar-base-height) + var(--ws-mobile-safe-top));
    --ws-mobile-nav-visual-height: calc(var(--ws-mobile-nav-base-height) + var(--ws-mobile-nav-fill-bottom));
    --ws-mobile-nav-height: var(--ws-mobile-nav-visual-height);
  }

  body:has(.workspace-shell > .ws-main) {
    padding: 0;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .workspace-shell:has(> .ws-main) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .ws-sidebar {
    display: none;
  }

  .ws-mobile-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    display: flex;
    height: var(--ws-mobile-topbar-height);
    padding: var(--ws-mobile-safe-top) max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
    align-items: center;
    gap: 0.65rem;
    border-bottom: 1px solid var(--ds-border);
    background: rgba(7, 10, 14, 0.90);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(20px) saturate(125%);
  }

  [data-theme='light'] .ws-mobile-topbar {
    background: rgba(255, 255, 255, 0.91);
  }

  .ws-mobile-brand {
    display: flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }

  .ws-mobile-topbar__identity {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 0.05rem;
  }

  .ws-mobile-topbar__identity strong,
  .ws-mobile-topbar__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ws-mobile-topbar__identity strong {
    color: var(--ds-text);
    font-size: var(--ds-text-md);
    font-weight: 700;
  }

  .ws-mobile-topbar__identity small {
    color: var(--ds-muted);
    font-size: var(--ds-text-xs);
  }

  .ws-mobile-search {
    width: 44px !important;
    height: 44px;
    min-width: 44px !important;
    min-height: 44px;
  }

  .ws-main {
    display: flex;
    height: 100%;
    min-height: 0;
    margin-left: 0;
    padding-top: var(--ws-mobile-topbar-height);
    padding-bottom: calc(var(--ws-mobile-nav-height) + 0.75rem);
  }

  .ws-content,
  .crm-page {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 1rem 1rem 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ws-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: block;
    height: var(--ws-mobile-nav-height);
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--ds-canvas);
    isolation: isolate;
  }

  .ws-bottom-nav__viewport {
    position: relative;
    z-index: 2;
    width: auto;
    height: 100%;
    margin-inline: var(--ws-mobile-nav-inline-start) var(--ws-mobile-nav-inline-end);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 100%);
    mask-image: linear-gradient(to right, black 0%, black 100%);
  }

  .ws-bottom-nav__scroller {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    padding: var(--ws-mobile-nav-top-clearance) 0 var(--ws-mobile-nav-fill-bottom);
    align-items: flex-start;
    gap: 0.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 0;
  }

  .ws-bottom-nav__scroller::-webkit-scrollbar {
    display: none;
  }

  /* Fade the tray and its contents together. A clear outer gutter keeps icons
     inside the rounded edge, including during momentum scrolling. */
  .ws-bottom-nav.show-left-fade .ws-bottom-nav__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 8px, black 36px, black 100%);
    mask-image: linear-gradient(to right, transparent 8px, black 36px, black 100%);
  }

  .ws-bottom-nav.show-right-fade .ws-bottom-nav__viewport {
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 36px), transparent calc(100% - 8px));
    mask-image: linear-gradient(to right, black 0, black calc(100% - 36px), transparent calc(100% - 8px));
  }

  .ws-bottom-nav.show-left-fade.show-right-fade .ws-bottom-nav__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 8px, black 36px, black calc(100% - 36px), transparent calc(100% - 8px));
    mask-image: linear-gradient(to right, transparent 8px, black 36px, black calc(100% - 36px), transparent calc(100% - 8px));
  }

  .ws-bottom-nav__viewport::before {
    content: '';
    position: absolute;
    inset: calc(16px + var(--ws-mobile-nav-top-clearance)) 0 0;
    z-index: 0;
    border: 1px solid var(--ds-border);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    background: var(--ds-surface-solid);
    pointer-events: none;
  }

  .ws-bottom-nav::after {
    display: none;
  }

  .ws-bottom-nav__item {
    position: relative;
    display: flex;
    flex: 0 0 clamp(72px, calc(20vw - 6px), 78px);
    width: clamp(72px, calc(20vw - 6px), 78px);
    min-width: 0;
    height: var(--ws-mobile-nav-item-height);
    min-height: var(--ws-mobile-nav-item-height);
    padding: 1.35rem 0.25rem 0.35rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.38rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--ds-muted);
    font-size: 0.625rem;
    font-weight: 650;
    text-decoration: none;
    list-style: none;
    transition: color calc(var(--ws-mobile-nav-motion-ms) * 1ms) var(--ws-mobile-nav-ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .ws-bottom-nav__item::-webkit-details-marker {
    display: none;
  }

  .ws-bottom-nav__item svg {
    position: absolute;
    z-index: 3;
    top: 20px;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translateX(-50%);
    transition: color calc(var(--ws-mobile-nav-motion-ms) * 1ms) var(--ws-mobile-nav-ease);
    pointer-events: none;
  }

  .ws-bottom-nav__item span {
    position: absolute;
    z-index: 3;
    top: 48px;
    left: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    padding-inline: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    transform: translateY(0);
    transition: transform calc(var(--ws-mobile-nav-motion-ms) * 1ms) var(--ws-mobile-nav-ease);
  }

  .ws-bottom-nav__item.is-active,
  .ws-bottom-nav__item.is-pending {
    background: transparent;
    color: var(--ds-lime);
  }

  .ws-bottom-nav__item::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 50%;
    width: 72px;
    height: 36px;
    transform: translateX(-50%);
    border-radius: 0 0 36px 36px;
    background: var(--ds-canvas);
    opacity: 0;
    transition: opacity calc(var(--ws-mobile-nav-motion-ms) * 1ms) var(--ws-mobile-nav-ease);
    pointer-events: none;
  }

  /* Keep the circular surface separate from the SVG. Resizing a shadowed SVG
     on deselection leaves a square compositor frame on mobile browsers. */
  .ws-bottom-nav__item::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 50%;
    width: 52px;
    height: 52px;
    transform: translateX(-50%) scale(0.65);
    border-radius: 50%;
    background: linear-gradient(145deg, #91bf08, #6d9e00);
    box-shadow: 0 7px 18px rgba(111, 151, 0, 0.28), 0 0 0 4px var(--ds-surface-solid);
    opacity: 0;
    transition: transform calc(var(--ws-mobile-nav-motion-ms) * 1ms) var(--ws-mobile-nav-ease), opacity calc(var(--ws-mobile-nav-motion-ms) * 1ms) var(--ws-mobile-nav-ease);
    pointer-events: none;
  }

  .ws-bottom-nav__item:is(.is-active, .is-pending)::before,
  .ws-bottom-nav__item:is(.is-active, .is-pending)::after {
    opacity: 1;
  }

  .ws-bottom-nav__item:is(.is-active, .is-pending)::after {
    transform: translateX(-50%) scale(1);
  }

  .ws-bottom-nav__item:is(.is-active, .is-pending) svg {
    color: #fff;
  }

  .ws-bottom-nav__item.is-active span,
  .ws-bottom-nav__item.is-pending span {
    color: var(--ds-lime);
    font-weight: 800;
    transform: translateY(20px);
  }

  .ws-bottom-nav__item:focus-visible {
    outline: 2px solid var(--ds-lime);
    outline-offset: -3px;
  }

  .ws-bottom-nav__item b {
    position: absolute;
    z-index: 5;
    top: 0.75rem;
    left: calc(50% + 0.55rem);
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.2rem;
    place-items: center;
    border: 2px solid var(--ds-surface-solid);
    border-radius: var(--ds-radius-pill);
    background: #ff7a00;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 12px rgba(255, 122, 0, 0.26);
    transform: translateY(0);
    transition: transform calc(var(--ws-mobile-nav-motion-ms) * 1ms) var(--ws-mobile-nav-ease);
  }

  .ws-bottom-nav__item:is(.is-active, .is-pending) b {
    transform: translateY(-8px);
  }

  /* Initial paint and history restoration must not animate from browser link
     defaults. Only a deliberate tab switch enables the shared transitions. */
  .ws-bottom-nav:not(.is-switching) .ws-bottom-nav__item,
  .ws-bottom-nav:not(.is-switching) .ws-bottom-nav__item::before,
  .ws-bottom-nav:not(.is-switching) .ws-bottom-nav__item::after,
  .ws-bottom-nav:not(.is-switching) .ws-bottom-nav__item :is(svg, span, b) {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ws-route-skeleton :is(span, i, b, time):empty { animation: none; }
    .ws-bottom-nav__item,
    .ws-bottom-nav__item::before,
    .ws-bottom-nav__item::after,
    .ws-bottom-nav__item :is(svg, span, b) { transition: none; }
    .ws-route-loader { transition: none; }
  }

  .workspace-shell :where(.btn, .btn-card, button, select),
  .workspace-shell :where(input:not([type='hidden']):not([type='checkbox']):not([type='radio']), textarea) {
    min-height: 48px;
  }

  .workspace-shell :where(.auth-input, .workspace-textarea, .inbox-search, .inbox-composer__input),
  .workspace-shell :where(input:not([type='hidden']):not([type='checkbox']):not([type='radio']), select, textarea),
  .workspace-shell .ds-search-field input,
  .workspace-shell .command-palette__search input {
    font-size: 16px;
  }

  .crm-page-header,
  .ds-page-header {
    margin-bottom: 1rem;
    align-items: flex-start;
  }

  .crm-page-header h1,
  .ds-page-header h1 {
    font-size: 1.65rem;
  }

  .crm-page-header p,
  .ds-page-header p {
    margin-top: 0.4rem;
    font-size: 0.8125rem;
  }

  .crm-kpi,
  .ds-summary-card {
    min-height: 78px;
    padding: 0.8rem;
  }

  .crm-kpi > strong,
  .ds-summary-card > strong {
    font-size: 1.35rem;
  }

  .crm-kpi > small,
  .ds-summary-card > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-palette {
    padding: 4rem 0.75rem 5.5rem;
    align-items: start;
  }

  .command-palette__panel {
    max-height: calc(100dvh - 10rem);
    border-radius: var(--ds-radius-lg);
  }

  .command-palette__list a {
    min-height: 60px;
    grid-template-columns: 6.5rem 1fr;
  }
}

@media (max-width: 760px) {
  .crm-page-header,
  .ds-page-header {
    display: grid;
    gap: 0.85rem;
  }

  .crm-page-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .ds-directory-toolbar {
    display: grid;
    padding: 0.5rem;
  }

  .ds-search-field {
    min-width: 0;
  }

  .ds-filter-tabs {
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 0.1rem;
    overflow-x: visible;
    scrollbar-width: none;
  }

  .ds-filter-tabs button {
    min-height: 44px;
    flex: 1 1 max-content;
  }

  .crm-today .ds-summary-strip,
  .jobs-summary-grid,
  .document-kpis,
  .calendar-kpis,
  .calendar-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .today-priority-panel .crm-panel__head {
    align-items: flex-start;
  }

  .today-action-carousel {
    grid-auto-columns: 86%;
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .today-priority-card {
    padding: 0.85rem;
    gap: 0.8rem;
  }

  .today-priority-card__head {
    align-items: flex-start;
  }

  .today-priority-pill {
    min-height: 26px;
    padding-inline: 0.65rem;
    font-size: 0.68rem;
  }

  .today-priority-card__body strong {
    font-size: 1rem;
  }

  .today-priority-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-card__compact {
    min-height: 82px;
    padding: 0.7rem;
  }

  .action-card__compact-main {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .action-card__compact-main .card-type-badge {
    width: max-content;
  }

  .today-schedule-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .today-schedule-row__time {
    font-size: 0.76rem;
  }

  .action-card__compact-main small {
    grid-column: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .jobs-summary-grid {
    grid-template-columns: repeat(4, minmax(104px, 1fr));
    margin-inline: -1rem;
    padding: 0 1rem 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .jobs-stat {
    min-height: 76px;
    scroll-snap-align: start;
  }

  .jobs-board__head p {
    display: none;
  }

  .jobs-row {
    display: grid;
    min-height: 0;
    margin: 0.5rem;
    padding: 0.85rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'work status'
      'customer customer'
      'when when'
      'location location'
      'actions actions';
    align-items: start;
    gap: 0.7rem 0.8rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-1);
    box-shadow: var(--ds-shadow-sm);
  }


  .jobs-page .jobs-table .crm-table__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'work status'
      'customer customer'
      'when when'
      'location location'
      'actions actions';
    gap: 0.7rem 0.8rem;
  }

  .jobs-row--attention {
    border-color: rgba(247, 189, 85, 0.26);
    box-shadow: inset 3px 0 0 var(--ds-warning), var(--ds-shadow-sm);
  }

  .jobs-customer,
  .jobs-work,
  .jobs-when,
  .jobs-location,
  .jobs-status,
  .jobs-actions {
    min-width: 0;
    padding: 0;
  }

  .jobs-page .jobs-table .crm-cell:not(.crm-cell--actions) {
    height: auto;
    align-self: start;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    align-content: start;
    gap: 0.2rem;
  }

  .jobs-customer::before,
  .jobs-work::before,
  .jobs-when::before,
  .jobs-location::before,
  .jobs-status::before,
  .jobs-actions::before {
    display: none !important;
  }

  .jobs-customer strong {
    font-size: 0.82rem;
    font-weight: 700;
  }

  .jobs-customer small {
    color: var(--ds-muted);
    font-size: 0.74rem;
  }

  .jobs-status {
    justify-self: end;
  }

  .jobs-status-pill {
    width: auto;
    min-width: 84px;
  }

  .jobs-work {
    padding: 0.78rem 0;
    border-block: 1px solid var(--ds-border);
  }

  .jobs-work__title-line strong {
    font-size: 1.05rem;
  }

  .job-next-action {
    margin-top: 0.38rem;
    -webkit-line-clamp: 2;
  }

  .jobs-when strong {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .jobs-when small {
    margin-top: 0.16rem;
    font-size: 0.76rem;
  }

  .jobs-location span {
    -webkit-line-clamp: 2;
    font-size: var(--ds-text-sm);
  }

  .jobs-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.1rem;
  }

  .jobs-action {
    min-height: 48px !important;
  }

  .customers-list-panel .crm-table__head {
    display: none;
  }

  .customers-list-panel .crm-table__row {
    display: grid;
    min-height: 0;
    margin: 0.5rem;
    padding: 0.85rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-1);
  }

  .customer-identity-cell,
  .customer-job-summary-cell,
  .customer-money-cell,
  .customers-list-panel .crm-cell--actions {
    padding: 0;
  }

  .customer-identity-cell {
    grid-column: 1;
  }

  .customer-job-summary-cell {
    grid-column: 1;
  }

  .customers-list-panel .crm-cell--actions {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .customers-list-panel .crm-cell--actions .btn-card {
    min-width: 96px;
  }

  .customer-overview-grid {
    grid-template-columns: 1fr;
  }

  .customer-overview-item {
    min-height: 70px;
  }

  .customer-contact-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
  }

  .customer-contact-card > div:nth-child(2) {
    grid-column: 1;
  }

  .customer-contact-card > .status-pill {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .customer-job-group .crm-table__head {
    display: none;
  }

  .customer-job-group .crm-table__row {
    display: grid;
    margin-bottom: 0.6rem;
    padding: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-1);
  }

  .customer-job-group .crm-cell {
    padding: 0;
  }

  .customer-job-group .crm-cell:nth-child(2),
  .customer-job-group .crm-cell--actions {
    grid-column: 1 / -1;
  }

  .customer-job-group .crm-cell--actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.5rem;
  }

  .calendar-view-switch {
    grid-column: 1 / -1;
  }

  .calendar-toolbar :where(a, button) {
    min-width: 48px;
    min-height: 48px !important;
    height: 48px;
  }

  .calendar-view-switch :where(a, button) {
    min-height: 48px !important;
    height: 48px;
  }

  .document-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .document-toolbar input[type='search'] {
    grid-column: 1 / -1;
  }

  .document-toolbar .btn {
    grid-column: 1 / -1;
  }

  .document-group__head {
    min-height: 64px;
  }

  .document-group__head::after {
    content: '+';
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    color: var(--ds-muted);
  }

  .document-group[open] > .document-group__head::after {
    color: var(--ds-lime);
    transform: rotate(45deg);
  }

  .document-group__head > span:first-child {
    display: grid;
    flex: 1;
    gap: 0.2rem;
  }

  .document-group__count {
    display: none;
  }

  .document-row {
    min-height: 0;
    padding: 0.85rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .document-row__main {
    grid-template-columns: 1fr;
  }

  .document-row__main .account-status {
    width: max-content;
  }

  .document-row__main small {
    grid-column: 1;
  }

  .document-row__meta {
    justify-items: end;
    text-align: right;
  }

  .document-row__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .document-row__actions .btn-card,
  .document-row__actions form,
  .document-row__actions form .btn-card {
    width: 100%;
  }

  .service-config__summary {
    min-height: 72px;
  }

  .ws-modal__box {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  #clear-inbox-modal .clear-inbox-modal__box {
    width: min(320px, calc(100vw - 2rem));
    height: auto;
    max-height: calc(100dvh - 2rem);
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 18px;
  }

  .job-ticket__hero {
    border-radius: var(--ds-radius-lg);
  }

  .job-ticket__quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-ticket__workspace {
    display: block;
  }

  .job-ticket__side-column {
    margin-top: 1rem;
  }

  .job-ticket__actions {
    bottom: 0;
    border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
  }
}

@media (max-width: 480px) {
  .crm-today .ds-summary-strip,
  .document-kpis,
  .calendar-kpis,
  .calendar-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-kpi > span,
  .ds-summary-card > span {
    display: -webkit-box;
    min-height: 1.65rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .crm-kpi > small,
  .ds-summary-card > small {
    display: none;
  }

  .customers-list-panel .crm-table__row {
    grid-template-columns: 1fr;
  }

  .customers-list-panel .crm-cell--actions {
    grid-column: 1;
    grid-row: auto;
  }

  .customers-list-panel .crm-cell--actions .btn-card {
    width: 100%;
  }

  .document-toolbar {
    grid-template-columns: 1fr;
  }

  .document-toolbar :where(input, select, button) {
    grid-column: 1 !important;
  }

  .document-row__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-row__actions form:last-child {
    grid-column: 1 / -1;
  }

  .job-ticket__quick-grid {
    grid-template-columns: 1fr;
  }

  .command-palette__list a {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 2026 operational redesign: calm surfaces, semantic states and compact data views. */

.status-pill--attention,
.status-pill--warn {
  border-color: color-mix(in srgb, var(--ds-warning) 42%, transparent);
  background: var(--ds-warning-soft);
  color: var(--ds-warning);
}

.status-pill--danger {
  border-color: color-mix(in srgb, var(--ds-danger) 42%, transparent);
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.status-pill--info {
  border-color: color-mix(in srgb, var(--ds-info) 40%, transparent);
  background: color-mix(in srgb, var(--ds-info) 11%, transparent);
  color: var(--ds-info);
}

.status-pill--success,
.account-status--active {
  border-color: color-mix(in srgb, var(--ds-success) 40%, transparent);
  background: color-mix(in srgb, var(--ds-success) 11%, transparent);
  color: var(--ds-success);
}

.status-pill--neutral {
  border-color: var(--ds-border-high);
  background: var(--ds-highlight);
  color: var(--ds-text-soft);
}

.status-pill,
.account-status,
.job-priority {
  min-height: 30px;
  font-size: 0.75rem;
}

.crm-panel,
.ds-panel,
.account-section,
.calendar-board,
.calendar-panel,
.calendar-agenda,
.calendar-history,
.crm-kpi,
.ds-summary-card {
  box-shadow: none;
}

.crm-kpi,
.ds-summary-card {
  background: var(--ds-surface-1);
}

.command-palette {
  padding-top: min(8vh, 4rem);
}

.command-palette__panel {
  max-height: min(620px, 84dvh);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-overlay);
  backdrop-filter: none;
}

.command-palette__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

.command-palette__list a {
  min-height: 62px;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-sm);
}

.jobs-summary-bar,
.document-summary-chips,
.business-profile-summary {
  display: grid;
  margin-bottom: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
  overflow: hidden;
}

.jobs-summary-bar .jobs-stat,
.document-summary-chips .crm-kpi {
  min-height: 58px;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 0;
  border-right: 1px solid var(--ds-border);
  border-radius: 0;
  background: transparent;
}

.jobs-summary-bar > :last-child,
.document-summary-chips > :last-child {
  border-right: 0;
}

.jobs-summary-bar .jobs-stat > strong,
.document-summary-chips .crm-kpi > strong {
  font-size: 1.2rem;
}

.jobs-summary-bar .jobs-stat--primary {
  box-shadow: inset 3px 0 0 var(--ds-lime);
}

.jobs-summary-bar .jobs-stat--attention {
  box-shadow: inset 3px 0 0 var(--ds-warning);
}

.today-more-actions {
  display: grid;
  padding: 0.75rem 1rem;
  gap: 0.2rem;
  border-top: 1px solid var(--ds-border);
  color: var(--ds-text);
  text-decoration: none;
}

.today-more-actions span { color: var(--ds-muted); font-size: var(--ds-text-sm); }

.jobs-sort {
  display: flex;
  margin-left: auto;
  padding: 0.2rem;
  gap: 0.2rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
}

.jobs-sort a {
  display: inline-flex;
  min-height: 34px;
  padding: 0 0.65rem;
  align-items: center;
  border-radius: 6px;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.jobs-sort a.is-active { background: var(--ds-highlight); color: var(--ds-text); }

.jobs-page .jobs-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  min-height: 0;
  margin-bottom: 1rem;
  padding: 0;
  gap: 0.7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.jobs-page .jobs-directory-toolbar .ds-search-field {
  grid-column: 1 / 2;
  min-width: 0;
}

.jobs-page .jobs-directory-toolbar .ds-filter-tabs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  padding: 0.45rem 0;
  gap: 0.2rem;
  border-bottom: 1px solid var(--ds-border);
}

.jobs-page .jobs-directory-toolbar .ds-filter-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 0 0.45rem;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.jobs-page .jobs-sort {
  grid-column: 2 / 3;
  align-self: center;
  margin-left: 0;
}

.customers-directory-toolbar {
  width: 100%;
}

@media (max-width: 900px) and (display-mode: standalone) {
  :root {
    --ws-mobile-safe-top: max(env(safe-area-inset-top, 0px), 20px);
    --ws-mobile-nav-fill-bottom: env(safe-area-inset-bottom, 0px);
  }
}

.crm-directory-create {
  grid-column: 3 / 4;
  align-self: center;
  min-height: 44px;
  gap: 0.45rem;
  white-space: nowrap;
}

.crm-directory-create svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.crm-create-modal {
  position: fixed;
  z-index: var(--ds-layer-modal);
  inset: 0;
  display: grid;
  padding: 1.25rem;
  place-items: center;
}

.crm-create-modal[hidden] { display: none; }

.crm-create-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgb(0 0 0 / 68%);
  cursor: default;
}

.crm-create-modal__sheet {
  position: relative;
  display: flex;
  width: min(720px, 100%);
  max-height: min(860px, calc(100vh - 2.5rem));
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-1);
  box-shadow: 0 24px 80px rgb(0 0 0 / 40%);
}

.crm-create-modal__sheet--compact { width: min(560px, 100%); }

.crm-create-modal__head {
  display: flex;
  min-height: 76px;
  padding: 1rem 1.15rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.crm-create-modal__head h2 {
  margin: 0.15rem 0 0;
  font-size: var(--ds-text-xl);
  letter-spacing: 0;
}

.crm-create-modal__close {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-text);
  font-size: 1.7rem;
  line-height: 1;
}

body.has-crm-create-modal { overflow: hidden; }

.crm-create-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  padding: 1.15rem;
}

.crm-create-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.crm-create-field {
  display: grid;
  align-content: start;
  align-self: start;
  min-width: 0;
  gap: 0.4rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  font-weight: 650;
}

.crm-create-field--wide { grid-column: 1 / -1; }
.crm-create-field b { color: var(--ds-lime); }
.crm-create-field .auth-input { width: 100%; }
.crm-create-field textarea.auth-input { min-height: 78px; resize: vertical; }
.crm-create-field [aria-invalid="true"] { border-color: var(--ds-danger); }

.crm-create-field__error {
  color: var(--ds-danger);
  font-size: var(--ds-text-xs);
  font-weight: 600;
}

.crm-create-form__locked-value {
  min-height: 44px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
  background: var(--ds-highlight);
}

.crm-create-money { position: relative; display: block; }
.crm-create-money > span { position: absolute; z-index: 1; top: 50%; left: 0.75rem; transform: translateY(-50%); color: var(--ds-muted); }
.crm-create-money .auth-input { padding-left: 1.7rem; }

.crm-create-form__hint {
  margin: 0 0 1rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  line-height: 1.5;
}

.crm-create-form__actions {
  display: flex;
  margin-top: 1.25rem;
  padding-top: 1rem;
  justify-content: flex-end;
  gap: 0.65rem;
  border-top: 1px solid var(--ds-border);
}

.crm-create-form__actions .btn { min-height: 44px; }

.crm-create-form__actions .btn--ghost {
  border-color: var(--ds-border-high);
  background: transparent;
  color: var(--ds-text);
}

@media (max-width: 760px) {
  .jobs-page .jobs-directory-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jobs-page .jobs-directory-toolbar .ds-search-field { grid-column: 1 / -1; }
  .jobs-page .jobs-sort { grid-column: 1 / 2; }
  .crm-directory-create { grid-column: 2 / 3; }

  .crm-create-modal {
    padding: max(env(safe-area-inset-top), 0px) 0 0;
    place-items: stretch;
  }

  .crm-create-modal__sheet,
  .crm-create-modal__sheet--compact {
    width: 100%;
    max-height: none;
    height: 100%;
    border-width: 0;
    border-radius: 0;
  }

  .crm-create-form { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .crm-create-form__grid { grid-template-columns: 1fr; }
  .crm-create-field--wide { grid-column: auto; }
  .crm-create-form__actions {
    position: sticky;
    bottom: calc(-1rem - env(safe-area-inset-bottom));
    margin-inline: -1rem;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    background: var(--ds-surface-1);
  }

  .crm-create-form__actions .btn { flex: 1; }
}

@media (max-width: 390px) {
  .crm-directory-create { padding-inline: 0.75rem; }
}

.customers-table .customer-row__link {
  width: auto;
  max-width: 100%;
  color: var(--ds-lime);
  text-decoration: none;
}

.customers-table .customer-row__link strong { overflow-wrap: break-word; }

.customers-table .customer-identity-cell {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

.customer-row :where(a, button) {
  position: relative;
  z-index: 1;
}

.customer-identity-cell strong,
.customer-job-summary-cell strong,
.customer-money-cell strong {
  color: var(--ds-text);
}

.customer-identity-cell small,
.customer-job-summary-cell small,
.customer-money-cell small {
  display: block;
  margin-top: 0.25rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  line-height: 1.4;
}

.customer-recent-jobs {
  display: grid;
  gap: 0.18rem;
  margin: 0.45rem 0 0;
  padding: 0 0 0 1rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  line-height: 1.35;
}

.customer-recent-jobs li::marker {
  color: var(--ds-lime);
}

.customer-recent-jobs span {
  color: var(--ds-muted);
}

.customer-recent-jobs span::before {
  content: ' - ';
}

.customer-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.customer-timeline {
  padding: 0.25rem 1rem 0.75rem;
}

.customer-timeline__item {
  position: relative;
  display: grid;
  min-height: 62px;
  padding: 0.8rem 0 0.8rem 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.customer-timeline__item:last-child { border-bottom: 0; }
.customer-timeline__item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.35rem;
  width: 1px;
  background: var(--ds-border-high);
}

.customer-timeline__marker {
  position: absolute;
  top: 1.2rem;
  left: 0.1rem;
  width: 9px;
  height: 9px;
  border: 2px solid var(--ds-surface-1);
  border-radius: 50%;
  background: var(--ds-info);
}

.customer-timeline__item a { color: var(--ds-text); text-decoration: none; }
.customer-timeline__item small { display: block; margin-top: 0.2rem; color: var(--ds-muted); }
.customer-timeline__item time { color: var(--ds-muted); font-size: var(--ds-text-sm); }

.setup-checklist {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-checklist li {
  display: grid;
  min-height: 72px;
  padding: 0.8rem;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ds-border);
}

.setup-checklist li > span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-info);
  font-weight: 700;
}

.setup-checklist strong,
.setup-checklist small { display: block; }
.setup-checklist small { margin-top: 0.2rem; color: var(--ds-muted); }

.calendar-connect-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.calendar-connect-action {
  display: grid;
  padding: 1.25rem;
  align-content: center;
  justify-items: start;
  gap: 0.75rem;
  border-left: 1px solid var(--ds-border);
}

.calendar-connect-action p { margin: 0; color: var(--ds-muted); line-height: 1.5; }

.document-completion-panel {
  margin-bottom: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
}

.document-completion-panel.has-missing { border-left: 3px solid var(--ds-warning); }
.document-completion-panel.is-complete { border-left: 3px solid var(--ds-success); }
.document-completion-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.document-completion-panel__head h2 { margin: 0; font-size: 1.125rem; }
.document-completion-bar { display: block; width: 100%; height: 5px; margin-top: 0.8rem; overflow: hidden; border: 0; border-radius: 99px; background: var(--ds-border); appearance: none; }
.document-completion-bar::-webkit-progress-bar { border-radius: 99px; background: var(--ds-border); }
.document-completion-bar::-webkit-progress-value { border-radius: 99px; background: var(--ds-success); }
.document-completion-bar::-moz-progress-bar { border-radius: 99px; background: var(--ds-success); }
.document-missing-checklist { display: flex; margin: 0.8rem 0 0; padding: 0; flex-wrap: wrap; gap: 0.4rem; list-style: none; }
.document-missing-checklist li { display: inline-flex; min-height: 34px; padding: 0 0.65rem; align-items: center; gap: 0.4rem; border-radius: var(--ds-radius-sm); background: var(--ds-warning-soft); color: var(--ds-warning); font-size: var(--ds-text-sm); }
.document-missing-checklist li span { font-weight: 800; }
.section-completion { margin-left: auto; font-size: var(--ds-text-sm); font-weight: 700; white-space: nowrap; }
.section-completion.is-missing { color: var(--ds-warning); }
.section-completion.is-complete { color: var(--ds-success); }
.document-sticky-actions button:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none; }

.document-summary-chips {
  width: max-content;
  min-width: min(100%, 540px);
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.business-profile-nav {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  margin: 0 0 0.75rem;
  padding: 0.5rem;
  gap: 0.25rem;
  overflow-x: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-solid);
}

.business-profile-nav a {
  min-height: 38px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.business-profile-nav a:hover { background: var(--ds-highlight); color: var(--ds-text); }
.business-profile-nav a.is-active,
.business-profile-nav a[aria-current='page'] {
  border-color: rgba(176, 255, 0, 0.45);
  background: var(--ds-lime-soft);
  color: var(--ds-text);
  box-shadow: inset 0 0 0 1px rgba(176, 255, 0, 0.24);
}
.business-profile-summary > div { min-height: 68px; padding: 0.8rem 1rem; border-right: 1px solid var(--ds-border); }
.business-profile-summary > div:last-child { border-right: 0; }
.business-profile-summary span,
.business-profile-summary strong { display: block; }
.business-profile-summary span { color: var(--ds-muted); font-size: var(--ds-text-sm); }
.business-profile-summary strong { margin-top: 0.25rem; color: var(--ds-text); }
.business-profile-catalogue { border-top: 1px solid var(--ds-border); }
.business-profile-catalogue > summary { display: flex; min-height: 58px; padding: 0.75rem 1rem; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.business-profile-catalogue > summary span:first-child { display: grid; gap: 0.15rem; }
.business-profile-catalogue > summary small { color: var(--ds-muted); }

.system-state-page {
  display: grid;
  min-height: 100dvh;
  padding: 1.5rem;
  place-items: center;
  background: var(--ds-canvas);
}

.system-state {
  width: min(100%, 540px);
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-1);
  text-align: center;
}

.system-state__brand { display: inline-flex; margin-bottom: 2rem; align-items: center; gap: 0.6rem; color: var(--ds-text); text-decoration: none; }
.system-state__brand span { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: var(--ds-radius-sm); background: var(--ds-lime); color: var(--ds-lime-ink); font-weight: 800; }
.system-state h1 { margin: 1rem 0 0.5rem; font-size: var(--ds-title); }
.system-state p { margin: 0 auto; color: var(--ds-muted); font-size: var(--ds-text-md); line-height: 1.6; }
.system-state__actions { display: flex; margin-top: 1.5rem; justify-content: center; gap: 0.5rem; }

.settings-rail a { justify-content: space-between; text-decoration: none; }
.settings-rail a.is-active { background: var(--ds-lime-soft); color: var(--ds-text); box-shadow: inset 3px 0 0 var(--ds-lime); }
.settings-rail__state { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-muted-2); }
.settings-rail__state.is-ok { background: var(--ds-success); }
.settings-rail__state.needs-attention { background: var(--ds-warning); }

.push-control__actions {
  display: flex;
  margin-top: 0.65rem;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.push-control[aria-busy='true'] .push-control__actions {
  opacity: 0.65;
  pointer-events: none;
}

.push-control[data-push-state='enabled'] [data-push-status] { color: var(--ds-success); }
.push-control[data-push-state='blocked'] [data-push-status],
.push-control[data-push-state='error'] [data-push-status] { color: var(--ds-danger); }
.push-control[data-push-state='install_required'] [data-push-status] { color: var(--ds-warning); }

@media (max-width: 560px) {
  .push-control__actions .btn {
    min-height: 42px;
    flex: 1 1 calc(50% - 0.45rem);
  }
}

@media (min-width: 901px) {
  [data-settings-tabs] [data-settings-panel] { display: none; }
  [data-settings-tabs] [data-settings-panel].is-active { display: block; }
  [data-settings-tabs] [data-settings-panel] > summary { cursor: default; }
  [data-settings-tabs] [data-settings-panel] > summary .mobile-accordion__chevron { display: none; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .customers-table {
    --customers-grid: var(--jobs-grid);
  }
  .customers-list-panel .customers-table .crm-table__head,
  .customers-list-panel .customers-table .crm-table__row {
    grid-template-columns: var(--customers-grid);
  }
  .customer-actions { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ws-content,
  .crm-page { padding-top: 0.85rem; }

  .crm-page-header { margin-bottom: 0.75rem; gap: 0.5rem; }
  .crm-page-header p { margin-top: 0.35rem; line-height: 1.4; }
  .today-connect-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.15rem;
    margin-bottom: 0.9rem;
  }
  .today-connect-grid .btn {
    min-width: 0;
    width: 100%;
    padding-inline: 0.6rem;
    justify-content: center;
    text-align: center;
  }
  .today-connect-grid .today-connect-btn {
    white-space: normal;
    line-height: 1.15;
    min-height: 3.25rem;
  }

  .today-connect-grid .today-connect-btn--meta .meta-logo-lockup__img {
    width: clamp(3.5rem, 14vw, 4.1rem);
  }

  .command-palette__list { grid-template-columns: 1fr; }
  .command-palette__list a { min-height: 54px; }

  .jobs-summary-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.5rem;
  }

  .jobs-summary-bar .jobs-stat { min-height: 48px; padding: 0.45rem 0.55rem; }
  .jobs-summary-bar .jobs-stat > span { min-height: 0; font-size: 0.68rem; }
  .jobs-summary-bar .jobs-stat > strong { margin-top: 0.1rem; font-size: 1rem; }
  .jobs-page .jobs-directory-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.45rem;
    gap: 0.7rem;
  }
  .jobs-page .jobs-directory-toolbar .ds-search-field {
    grid-column: 1;
    width: 100%;
  }
  .jobs-page .jobs-directory-toolbar .ds-search-field input {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .jobs-page .jobs-directory-toolbar .ds-filter-tabs {
    grid-column: 1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0.25rem;
    gap: 0.22rem;
    overflow: visible;
  }
  .jobs-page .jobs-directory-toolbar .ds-filter-tabs button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 0.28rem;
    font-size: clamp(0.66rem, 2.9vw, 0.78rem);
  }
  .customers-page .customers-directory-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.45rem;
    gap: 0.7rem;
  }
  .customers-page .customers-directory-toolbar .ds-search-field {
    width: 100%;
  }
  .customers-page .customers-directory-toolbar .ds-search-field input {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .customers-page .customers-directory-toolbar .ds-filter-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0.25rem;
    gap: 0.22rem;
    overflow: visible;
  }
  .customers-page .customers-directory-toolbar .ds-filter-tabs button {
    min-height: 44px;
    padding: 0 0.28rem;
    font-size: clamp(0.66rem, 2.9vw, 0.78rem);
  }
  .jobs-page .jobs-sort {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    margin-left: 0;
    padding: 0.25rem;
  }
  .jobs-page .jobs-sort a {
    flex: 1;
    justify-content: center;
    padding: 0 0.4rem;
  }
  .jobs-board__head { min-height: 46px; padding: 0.55rem 0.75rem; }
  .jobs-row { margin: 0; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .jobs-row--attention { border-left: 3px solid var(--ds-warning); }
  .jobs-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .customers-list-panel .customers-table .crm-table__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'work status'
      'customer customer'
      'when location'
      'actions actions';
    gap: 0.7rem 0.8rem;
  }
  .customer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customers-list-panel .customers-table .crm-table__row .crm-cell {
    min-width: 0;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    align-content: start;
    gap: 0.15rem;
  }
  .customers-list-panel .crm-cell::before { display: none; }

  .customer-profile-page { display: block; }
  .customer-timeline__item { grid-template-columns: 1fr; }
  .customer-timeline__item time { grid-column: 1; }

  .calendar-connect-layout { grid-template-columns: 1fr; }
  .calendar-connect-action { border-top: 1px solid var(--ds-border); border-left: 0; }
  .calendar-connect-action .btn { width: 100%; }

  .document-summary-chips { width: 100%; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .document-summary-chips .crm-kpi { min-height: 50px; padding: 0.45rem; }
  .document-summary-chips .crm-kpi small { display: none; }
  .document-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .document-toolbar input[type='search'] { grid-column: 1 / -1 !important; }
  .document-toolbar .btn-card { grid-column: 1 / -1; text-align: center; }
  .document-completion-panel__head { align-items: flex-start; flex-direction: column; }
  .section-completion { margin-left: 0; }
  .document-review-section > summary { flex-wrap: wrap; }

  .business-profile-nav { top: 64px; margin-inline: -0.25rem; }
  .business-profile-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-profile-summary > div:nth-child(2) { border-right: 0; }
  .business-profile-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--ds-border); }

  .system-state-page { padding: 0.75rem; }
  .system-state__actions { display: grid; }
}
body[data-documents-ui-enabled="0"] .job-ticket__document-card:has(a[href^="/documents"]),
body[data-documents-ui-enabled="0"] .job-ticket__document-card:has(form[action="/documents/new"]) {
  display: none;
}

.inbox-item__context .status-pill {
  box-sizing: border-box;
  min-height: 20px;
  height: auto;
}

.inbox-item[data-state~="ready_to_quote_book"] .inbox-item__context .status-pill {
  border-color: rgba(204,255,0,0.45);
  background: rgba(204,255,0,0.13);
  color: var(--crm-primary);
}

/* Light mode polish: keep late legacy/product rules from leaking dark surfaces. */
[data-theme='light'] {
  --ds-input-bg: #ffffff;
  --ds-input-bg-muted: #f8fafc;
  --ds-input-border: #cfd8e3;
  --ds-input-border-focus: rgba(85, 115, 0, 0.46);
  --ds-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(16, 24, 40, 0.04);
  --ds-glass-surface: rgba(255, 255, 255, 0.94);
  --ds-glass-surface-strong: rgba(255, 255, 255, 0.98);
}

[data-theme='light'] .workspace-shell :where(.auth-input, .workspace-textarea, .inbox-search, .inbox-composer__input),
[data-theme='light'] .workspace-shell :where(input.auth-input, select.auth-input, textarea.auth-input),
[data-theme='light'] .ds-search-field input,
[data-theme='light'] .command-palette__search input {
  border-color: var(--ds-input-border);
  background: var(--ds-input-bg);
  color: var(--ds-text);
  box-shadow: var(--ds-input-shadow);
}

[data-theme='light'] .workspace-shell :where(.auth-input, .workspace-textarea, .inbox-search, .inbox-composer__input)::placeholder,
[data-theme='light'] .ds-search-field input::placeholder,
[data-theme='light'] .command-palette__search input::placeholder {
  color: #7c8796;
}

[data-theme='light'] .workspace-shell :where(.auth-input, .workspace-textarea, .inbox-search, .inbox-composer__input):focus,
[data-theme='light'] .ds-search-field input:focus,
[data-theme='light'] .command-palette__search input:focus {
  border-color: var(--ds-input-border-focus);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--ds-lime-soft), var(--ds-input-shadow);
}

[data-theme='light'] .form-label,
[data-theme='light'] .auth-label,
[data-theme='light'] .document-field > span,
[data-theme='light'] .profile-form-grid label > span,
[data-theme='light'] .crm-form-stack label > span,
[data-theme='light'] .workspace-label {
  color: #344054;
}

[data-theme='light'] .ds-directory-toolbar,
[data-theme='light'] .jobs-sort,
[data-theme='light'] .business-profile-nav {
  background: var(--ds-glass-surface-strong);
  box-shadow: var(--ds-shadow-sm);
}

[data-theme='light'] .ds-icon-button,
[data-theme='light'] .workspace-shell .btn--ghost,
[data-theme='light'] .workspace-shell .btn-edit,
[data-theme='light'] .workspace-shell .btn-card:not(.btn-approve):not(.btn-reject):not(.btn-takeover),
[data-theme='light'] .ws-command-trigger {
  background: #ffffff;
  color: var(--ds-text-soft);
}

[data-theme='light'] .workspace-shell .btn--primary:hover,
[data-theme='light'] .workspace-shell .btn-approve:hover,
[data-theme='light'] .workspace-shell .inbox-composer__send:hover {
  border-color: #4b6600;
  background: #4b6600;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(85, 115, 0, 0.16);
}

[data-theme='light'] .workspace-shell .btn-reject {
  border-color: rgba(196, 53, 73, 0.30);
  color: #a62538;
}

[data-theme='light'] .inbox-list,
[data-theme='light'] .inbox-detail {
  background: var(--ds-surface-1);
}

[data-theme='light'] .inbox-list__head,
[data-theme='light'] .inbox-detail__head,
[data-theme='light'] .inbox-composer,
[data-theme='light'] .inbox-tabs {
  background: var(--ds-glass-surface);
  backdrop-filter: blur(18px) saturate(125%);
}

[data-theme='light'] .conversation-area {
  background: linear-gradient(180deg, rgba(238, 242, 247, 0.72), transparent 11rem);
}

[data-theme='light'] .ai-panel,
[data-theme='light'] .ai-drawer,
[data-theme='light'] .inbox-detail__body > .ai-analysis-panel {
  background: #f8fafc !important;
}

[data-theme='light'] .msg__bubble {
  background: #ffffff;
  color: var(--ds-text-soft);
  box-shadow: var(--ds-shadow-sm);
}

[data-theme='light'] .msg-date-separator span {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.78);
  color: rgba(255, 255, 255, 0.9);
}

[data-theme='light'] .msg--out .msg__bubble {
  background: rgba(115, 155, 0, 0.12);
  color: var(--ds-text);
}

[data-theme='light'] .ws-empty {
  background: #f8fafc;
  color: var(--ds-muted);
}

[data-theme='light'] .inbox-empty-state {
  color: var(--ds-muted);
}

[data-theme='light'] .inbox-empty-state__icon {
  color: rgba(115, 155, 0, 0.24);
}

[data-theme='light'] .inbox-empty-state h3 {
  color: var(--ds-text);
}

[data-theme='light'] .inbox-empty-state p {
  color: var(--ds-muted);
}

@media (max-width: 760px) {
  [data-theme='light'] .inbox-tabs {
    background: var(--ds-glass-surface);
  }
}

[data-theme='light'] .cookie-consent {
  background: linear-gradient(180deg, rgba(16, 24, 40, 0), rgba(16, 24, 40, 0.10));
}

[data-theme='light'] .cookie-consent__panel {
  border-color: rgba(16, 24, 40, 0.12);
  background: rgba(255, 255, 255, 0.98);
  color: var(--ds-text);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.18);
}

[data-theme='light'] .cookie-consent__copy h2 {
  color: var(--ds-text);
}

[data-theme='light'] .cookie-consent__copy p {
  color: var(--ds-muted);
}

[data-theme='light'] .cookie-consent__copy .section-label,
[data-theme='light'] .cookie-consent__policy {
  color: var(--ds-lime);
}

/* Mobile workspace polish for dense JC detailing data. */
@media (max-width: 760px) {
  .ws-content,
  .crm-page {
    padding-inline: 1rem;
  }

  .crm-page-header h1,
  .ds-page-header h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    letter-spacing: -0.035em;
  }

  .crm-page-header p,
  .ds-page-header p {
    max-width: 36rem;
    overflow-wrap: anywhere;
  }

  .ds-directory-toolbar {
    gap: 0.55rem;
    overflow: hidden;
  }

  .ds-search-field input {
    min-width: 0;
  }

  .jobs-directory-toolbar .ds-filter-tabs,
  .customers-directory-toolbar .ds-filter-tabs {
    flex-wrap: wrap;
    overflow-x: hidden;
  }

  .inbox-tabs {
    display: flex;
    width: calc(100dvw - 2rem);
    max-width: calc(100dvw - 2rem);
    margin-left: 0;
    margin-right: 0;
    flex-wrap: nowrap;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .jobs-directory-toolbar .ds-filter-tabs button,
  .customers-directory-toolbar .ds-filter-tabs button,
  .inbox-tab {
    min-width: 0;
    flex: 1 1 max(7.5rem, calc(50% - 0.35rem));
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .inbox-tab {
    flex: 1 1 0;
    width: 100%;
    min-height: 40px;
    white-space: nowrap;
  }

  .jobs-sort {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jobs-sort a {
    min-height: 42px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .jobs-page .jobs-directory-toolbar {
    gap: 0.35rem;
    overflow: visible;
  }

  .jobs-page .jobs-directory-toolbar .ds-search-field {
    margin-bottom: 0.2rem;
  }

  .jobs-page .jobs-directory-toolbar .ds-filter-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    padding: 0.28rem;
    gap: 0.24rem;
    overflow: visible;
    border-bottom: 1px solid var(--ds-border);
  }

  .jobs-page .jobs-directory-toolbar .ds-filter-tabs button {
    flex: 0 1 auto;
    width: 100%;
    min-height: 40px;
    padding: 0 0.32rem;
    font-size: clamp(0.66rem, 2.9vw, 0.79rem);
    line-height: 1.08;
    white-space: nowrap;
  }

  .jobs-page .jobs-sort {
    margin-top: 0.35rem;
    padding: 0.25rem;
  }

  .jobs-page .jobs-sort a {
    min-height: 40px;
    padding: 0 0.6rem;
    white-space: nowrap;
    line-height: 1.08;
  }

  .action-card__compact-main small,
  .today-recent-row__body small,
  .inbox-item__preview,
  .job-next-action,
  .crm-cell small,
  .crm-row__main small,
  .calendar-mobile-event__meta,
  .calendar-mobile-event__time {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .job-next-action,
  .action-card__compact-main small,
  .inbox-item__preview {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .crm-data-row {
    gap: 0.65rem;
  }
}

.services-mobile {
  gap: 1rem;
}

.services-mobile .account-section,
.services-mobile .business-profile-summary,
.services-mobile .business-profile-nav {
  border-color: var(--ds-border);
  background: var(--ds-surface-1);
  box-shadow: var(--ds-shadow-sm);
}

.services-mobile .account-section {
  overflow: hidden;
}

.services-mobile .account-section__head {
  padding: 1rem;
}

.services-mobile .account-section__head h2 {
  overflow-wrap: anywhere;
}

.services-mobile .account-section__head p {
  max-width: 68ch;
  color: var(--ds-muted);
  overflow-wrap: anywhere;
}

.services-mobile .account-editor-form .account-section {
  padding-bottom: 1rem;
}

.services-mobile .form-grid,
.services-mobile .form-grid--compact {
  padding: 0 1rem 1rem;
  gap: 0.875rem;
}

.services-mobile .form-field {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
}

.services-mobile fieldset.form-field {
  padding: 0.8rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
}

.services-mobile fieldset.form-field label {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 0.55rem;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
}

.services-mobile textarea.auth-input {
  min-height: 11rem;
  padding-block: 0.8rem;
  color: var(--ds-text);
  line-height: 1.45;
  field-sizing: content;
  resize: vertical;
}

.services-mobile .form-field--full textarea.auth-input {
  min-height: 14rem;
}

.services-mobile select.auth-input {
  min-height: 46px;
}

.services-mobile .account-editor-form .btn {
  margin-inline: 1rem;
}

.services-mobile .business-profile-summary {
  overflow: hidden;
}

.services-mobile .business-profile-catalogue {
  border-top: 1px solid var(--ds-border);
}

.services-mobile .business-profile-catalogue > summary,
.services-mobile .service-config__summary {
  min-width: 0;
  list-style: none;
}

.services-mobile .business-profile-catalogue > summary::-webkit-details-marker,
.services-mobile .service-config__summary::-webkit-details-marker {
  display: none;
}

.services-mobile .service-config-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-2);
}

.services-mobile .service-config {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-1);
}

.services-mobile .service-config__summary {
  display: grid;
  min-height: 68px;
  padding: 0.75rem;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.65rem;
}

.services-mobile .service-row__num {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
  font-size: var(--ds-text-xs);
  font-weight: 800;
}

.services-mobile .service-config__main {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.services-mobile .service-config__main strong,
.services-mobile .service-config__main small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.services-mobile .service-config__main strong {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  line-height: 1.25;
}

.services-mobile .service-config__main small {
  display: -webkit-box;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.services-mobile .service-config[open] .service-config__main small {
  display: block;
  overflow: visible;
}

.services-mobile .service-config__toggle,
.services-mobile .business-profile-catalogue > summary > span:last-child {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-highlight);
  color: var(--ds-text-soft);
  font-weight: 800;
}

.services-mobile .service-config__body {
  display: grid;
  gap: 0.6rem;
  padding: 0 0.75rem 0.85rem 3.4rem;
}

.services-mobile .service-config__body p {
  margin: 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.services-mobile .service-config__body strong {
  color: var(--ds-text-soft);
}

.business-profile-section-strip,
.business-profile-nav--swipe {
  display: flex;
  gap: 0.5rem;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.business-profile-section-strip::-webkit-scrollbar,
.business-profile-nav--swipe::-webkit-scrollbar {
  display: none;
}

.business-profile-section-strip {
  margin: 0 1rem 1rem;
  padding-bottom: 0.25rem;
}

.business-profile-section-strip a,
.business-profile-nav--swipe a {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  white-space: nowrap;
}

.business-profile-section-strip a {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-2);
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  font-weight: 760;
  text-decoration: none;
}

.business-profile-edit-flow .account-section--nested {
  margin: 1rem;
}

.business-profile-page-stack {
  display: block;
}

.business-profile-page-panel[hidden],
.business-profile-save-bar[hidden] {
  display: none !important;
}

.business-profile-page-panel {
  scroll-margin-top: 6rem;
  animation: businessProfilePageIn 180ms ease-out;
}

.business-profile-edit-page,
.business-profile-edit-hub {
  min-height: min(58dvh, 620px);
}

.business-profile-edit-cards {
  display: grid;
  padding: 0 1rem 1rem;
  gap: 0.75rem;
}

.business-profile-edit-card {
  display: grid;
  min-height: 86px;
  padding: 1rem;
  align-content: center;
  gap: 0.35rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
  color: var(--ds-text);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.business-profile-edit-card:hover {
  transform: translateY(-1px);
  border-color: var(--ds-border-high);
  background: var(--ds-highlight);
}

.business-profile-edit-card span {
  color: var(--ds-lime);
  font-size: var(--ds-text-sm);
  font-weight: 820;
}

.business-profile-edit-card strong {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  line-height: 1.35;
}

.business-profile-save-bar {
  position: sticky;
  bottom: 0.75rem;
  z-index: 7;
  display: flex;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 1rem auto 0;
  padding: 0.5rem;
  gap: 0.5rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: color-mix(in srgb, var(--ds-surface-solid) 92%, transparent);
  box-shadow: var(--ds-shadow-md);
  backdrop-filter: blur(16px);
}

/* Business profile uses the same flat panel and row language as Jobs and Customers. */
.business-profile-page {
  overflow-x: clip;
}

.business-profile-toolbar {
  align-items: flex-end;
}

.business-profile-toolbar__actions,
.business-profile-rebuild-form {
  margin: 0;
}

.business-profile-page .business-profile-nav {
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  margin: 0 0 1rem;
  padding: 0.35rem 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.2rem;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.business-profile-page .business-profile-nav a {
  min-width: 0;
  min-height: 42px;
  padding: 0 0.6rem;
  justify-content: center;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.business-profile-page .business-profile-nav a:active {
  background: transparent;
}

.business-profile-page .business-profile-nav a.is-active,
.business-profile-page .business-profile-nav a[aria-current='page'] {
  background: var(--ds-lime-soft);
}

.business-profile-page .business-profile-page-panel {
  min-height: 0;
  margin: 0;
  animation: none;
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
  backdrop-filter: none;
}

html[data-theme='light'] .business-profile-page .business-profile-page-panel {
  background: var(--ds-surface-solid);
}

.business-profile-surface__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.business-profile-surface__status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

.business-services-table__head,
.business-service-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(9rem, 0.24fr) 6.5rem;
  align-items: center;
}

.business-services-table__head {
  min-height: 42px;
  padding: 0 1.125rem;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
  font-weight: 750;
  text-transform: uppercase;
}

.business-service-row {
  min-height: 76px;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text);
  -webkit-tap-highlight-color: transparent;
}

.business-service-row:last-child {
  border-bottom: 0;
}

.business-service-row:hover {
  background: var(--ds-highlight);
}

.business-service-row:active {
  background: transparent;
}

.business-service-row__number {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.business-service-row__identity {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.business-service-row__identity strong {
  color: var(--ds-text);
  font-size: var(--ds-text-md);
}

.business-service-row__identity small {
  display: -webkit-box;
  max-width: 68ch;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.business-service-row__price {
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  font-weight: 700;
}

.business-service-row__action {
  display: flex;
  justify-content: flex-end;
}

.business-service-row__action .btn-card {
  min-width: 4.75rem;
}

.business-profile-empty {
  min-height: 220px;
}

.business-profile-edit-form {
  display: block;
}

.business-profile-fields {
  display: grid;
  padding: 1rem 1.125rem 1.25rem;
  gap: 1rem;
}

.business-profile-fields--two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-profile-fields .form-field {
  display: grid;
  min-width: 0;
  gap: 0.45rem;
}

.business-profile-fields .form-field--full {
  grid-column: 1 / -1;
}

.business-profile-fields textarea.auth-input {
  min-height: 7rem;
  padding-block: 0.8rem;
  line-height: 1.45;
  resize: vertical;
}

.business-profile-fields textarea.auth-input[rows='7'] {
  min-height: 10rem;
}

.business-profile-page .business-profile-save-bar {
  bottom: 0.75rem;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-md);
  backdrop-filter: none;
}

.service-editor__form {
  display: grid;
}

.service-pricing-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.service-pricing-segments {
  display: grid;
  margin-top: 0.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.service-pricing-segments label {
  position: relative;
  min-width: 0;
}

.service-pricing-segments input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.service-pricing-segments span {
  display: flex;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-soft);
  background: var(--ds-surface-solid);
  font-size: var(--ds-text-sm);
  font-weight: 700;
  text-align: center;
}

.service-pricing-segments input:checked + span {
  border-color: var(--ds-lime);
  color: var(--ds-text);
  background: var(--ds-lime-soft);
}

.service-pricing-segments input:focus-visible + span {
  outline: 2px solid var(--ds-lime);
  outline-offset: 2px;
}

.service-price-input,
.service-number-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.service-number-input {
  grid-template-columns: minmax(0, 1fr) auto;
}

.service-price-input > span,
.service-number-input > span {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 700;
}

.service-price-input.is-disabled {
  opacity: 0.55;
}

.quote-recommendation {
  display: grid;
  padding: 1rem 0;
  gap: 0.8rem;
  border-block: 1px solid var(--ds-border);
}

.quote-recommendation__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.quote-recommendation__summary h2 {
  margin: 0.15rem 0 0.3rem;
  font-size: var(--ds-text-lg);
}

.quote-recommendation__summary p {
  max-width: 66ch;
  margin: 0;
  color: var(--ds-muted);
}

.quote-recommendation__amount {
  display: grid;
  flex: 0 0 auto;
  min-width: 10rem;
  gap: 0.15rem;
  text-align: right;
}

.quote-recommendation__amount span,
.quote-recommendation__amount small {
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
}

.quote-recommendation__amount strong {
  color: var(--ds-text);
  font-size: var(--ds-text-xl);
}

.quote-recommendation__factors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.quote-recommendation__factors span {
  min-width: 0;
}

.quote-recommendation__factors strong {
  margin-right: 0.2rem;
  color: var(--ds-text-soft);
}

.job-quote-recommendation {
  display: grid;
  padding: 0.8rem 0;
  gap: 0.2rem;
  border-bottom: 1px solid var(--ds-border);
}

.job-quote-recommendation > span,
.job-quote-recommendation p {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.job-quote-recommendation strong {
  color: var(--ds-text);
  font-size: var(--ds-text-xl);
}

.job-quote-recommendation p {
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .business-profile-toolbar {
    display: grid;
    gap: 0.85rem;
  }

  .business-profile-toolbar__actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-profile-toolbar__actions .btn,
  .business-profile-rebuild-form,
  .business-profile-rebuild-form .btn {
    width: 100%;
  }

  .business-profile-page .business-profile-nav {
    position: static;
    margin-inline: -0.25rem;
    padding: 0.35rem 0.25rem;
    background: transparent;
  }

  .business-profile-page .business-profile-nav a {
    min-height: 40px;
    padding: 0 0.2rem;
    font-size: 0.7rem;
  }

  .business-profile-surface__head {
    display: grid;
  }

  .business-profile-surface__status {
    justify-content: space-between;
  }

  .business-services-table__head {
    display: none;
  }

  .business-service-row {
    min-height: 82px;
    padding: 0.8rem 0.9rem;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.3rem 0.65rem;
  }

  .business-service-row__number {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 0.15rem;
  }

  .business-service-row__identity {
    grid-column: 2;
    grid-row: 1;
  }

  .business-service-row__identity small {
    -webkit-line-clamp: 1;
  }

  .business-service-row__price {
    grid-column: 2;
    grid-row: 2;
  }

  .business-service-row__action {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .business-profile-fields,
  .business-profile-fields--two-column {
    padding: 0.9rem;
    grid-template-columns: 1fr;
  }

  .business-profile-fields .form-field--full {
    grid-column: auto;
  }

  .business-profile-fields textarea.auth-input,
  .business-profile-fields textarea.auth-input[rows='7'] {
    min-height: 7rem;
  }

  .business-profile-page .business-profile-save-bar {
    width: calc(100% - 1.5rem);
    max-width: none;
    bottom: calc(72px + env(safe-area-inset-bottom) + 0.75rem);
  }

  .business-profile-page .business-profile-save-bar .btn {
    flex: 1;
    margin: 0;
  }

  .service-pricing-segments {
    grid-template-columns: 1fr;
  }

  .quote-recommendation__summary {
    display: grid;
  }

  .quote-recommendation__amount {
    min-width: 0;
    text-align: left;
  }
}

/* Current Business Profile composition: shared Traden primitives provide the
 * chrome; these selectors only describe profile-specific content. */
.business-profile-page {
  max-width: var(--app-page-max);
  overflow-x: clip;
}

.business-profile-header {
  align-items: center;
}

.business-profile-page .business-profile-nav {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0 0 1rem;
  padding: 0.25rem 0 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.business-profile-page .business-profile-nav a {
  min-height: 38px;
  padding-inline: 0.4rem;
  border-color: transparent;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.business-profile-page .business-profile-nav a.is-active,
.business-profile-page .business-profile-nav a[aria-current='page'] {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
}

.business-profile-page-panel {
  min-width: 0;
  animation: none;
  backdrop-filter: none;
}

.business-profile-intro {
  padding: 0.45rem 0.15rem 1rem;
}

.business-profile-intro h2,
.business-profile-section-heading h2,
.service-editor__panel h2 {
  margin: 0;
  color: var(--ds-text);
  letter-spacing: -0.035em;
}

.business-profile-intro h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.8rem);
  line-height: 1.12;
}

.business-profile-ai-card {
  border-color: var(--ds-lime-border);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ds-lime-soft) 74%, var(--ds-surface-solid)), var(--ds-surface-solid));
}

.business-profile-ai-card__top {
  position: relative;
  display: grid;
  min-height: 190px;
  padding: 1.15rem;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 1rem;
}

.business-profile-ai-card__top > div:first-child {
  position: relative;
  z-index: 1;
  max-width: 38rem;
}

.business-profile-ai-card__top > div:first-child p {
  display: -webkit-box;
  max-width: 34rem;
  margin: 1.1rem 0 0;
  overflow: hidden;
  color: var(--ds-text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.business-profile-live-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ds-lime);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.business-profile-live-state i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-lime);
  box-shadow: 0 0 0 4px var(--ds-lime-soft);
}

.business-profile-progress {
  position: relative;
  display: grid;
  width: 94px;
  height: 94px;
  margin-top: auto;
  place-items: center;
  align-self: end;
  justify-self: end;
}

.business-profile-progress svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.business-profile-progress circle {
  fill: var(--ds-surface-solid);
  stroke: color-mix(in srgb, var(--ds-lime) 20%, transparent);
  stroke-width: 3.5;
}

.business-profile-progress .business-profile-progress__value {
  fill: transparent;
  stroke: var(--ds-lime);
  stroke-linecap: round;
}

.business-profile-progress strong {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ds-text);
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.business-profile-ai-card__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ds-lime-border);
}

.business-profile-ai-card__stats a {
  display: grid;
  min-width: 0;
  min-height: 68px;
  padding: 0.7rem 0.35rem;
  place-content: center;
  gap: 0.15rem;
  border-right: 1px solid var(--ds-lime-border);
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.business-profile-ai-card__stats a:last-child { border-right: 0; }
.business-profile-ai-card__stats strong { color: var(--ds-text); font-size: 0.9rem; }
.business-profile-ai-card__stats span { overflow: hidden; color: var(--ds-muted); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }

.business-profile-ai-card__review {
  display: grid;
  margin: 0 0.9rem 0.9rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--ds-border);
  border-radius: 11px;
  background: var(--ds-surface-solid);
}

.business-profile-ai-card__review > a {
  display: flex;
  min-height: 44px;
  padding: 0 0.8rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ds-text);
  font-size: var(--app-title-size);
  font-weight: 750;
  text-decoration: none;
}

.business-profile-ai-card__review svg,
.business-profile-link-row__chevron svg,
.business-service-card__chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.business-profile-rebuild-form { padding-right: 0.35rem; }
.business-profile-rebuild-form button {
  min-height: 32px;
  padding: 0 0.65rem;
  border: 0;
  border-radius: 8px;
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 750;
  cursor: pointer;
}

.business-profile-at-glance { margin-top: 1rem; }
.business-profile-at-glance > .app-section__header { padding-inline: 0.15rem; }
.business-profile-link-list { overflow: hidden; }

.business-profile-link-row {
  display: grid;
  min-height: 68px;
  padding: 0.65rem 0.8rem;
  grid-template-columns: var(--app-icon-size-mobile) minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  box-shadow: none;
}

.business-profile-link-row:last-child { border-bottom: 0; }
.business-profile-link-row .app-row-card__icon { width: var(--app-icon-size-mobile); height: var(--app-icon-size-mobile); border-radius: 10px; }
.business-profile-link-row__state { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--ds-lime); border-radius: 50%; color: var(--ds-lime); font-size: 0.66rem; font-weight: 800; }
.business-profile-link-row__chevron { display: grid; color: var(--ds-muted); }

.business-profile-section-heading {
  display: flex;
  min-height: 74px;
  padding: 0.4rem 0.15rem 0.9rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.business-profile-section-heading h2 { font-size: 1.2rem; }
.business-profile-section-heading p { max-width: 32rem; margin: 0.3rem 0 0; color: var(--ds-muted); font-size: var(--app-meta-size); line-height: 1.45; }
.business-profile-section-heading--stack { flex-wrap: wrap; }

.business-profile-add-button {
  display: inline-flex;
  min-height: var(--app-control-height);
  padding: 0 0.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--ds-lime-border);
  border-radius: 11px;
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
  font-size: var(--app-control-font-size);
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.business-profile-add-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.business-profile-service-list { display: grid; gap: 0.7rem; }

.business-service-card {
  display: grid;
  min-height: 128px;
  padding: 0.9rem;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 0.8rem;
}

.business-service-card__icon {
  display: grid;
  width: 58px;
  height: 58px;
  grid-row: 1 / 3;
  place-items: center;
  color: var(--ds-text-soft);
}

.business-service-card__icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.business-service-card__body { align-self: stretch; align-content: center; }
.business-service-card__body .app-row-card__meta { display: -webkit-box; margin-top: 0.2rem; overflow: hidden; line-height: 1.4; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.business-service-card__footer { display: flex; margin-top: 0.55rem; align-items: center; gap: 0.5rem; color: var(--ds-muted); font-size: var(--app-detail-size); }
.business-service-card__footer i { color: var(--ds-lime); font-style: normal; }
.business-service-card__chevron { grid-column: 3; grid-row: 1; color: var(--ds-muted); }
.business-service-card__state { grid-column: 2 / 4; grid-row: 2; justify-self: end; max-width: none; text-transform: none; }

.business-profile-question-list,
.business-profile-rule-list { display: grid; gap: 0.45rem; }

.business-profile-question {
  display: grid;
  min-height: 60px;
  padding: 0.65rem 0.8rem;
  grid-template-columns: 34px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 0.65rem;
}

.business-profile-question__icon { display: grid; color: var(--ds-text-soft); }
.business-profile-question__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.business-profile-question .app-status-pill { max-width: none; text-transform: none; }
.business-profile-question__drag { color: var(--ds-muted-2); font-size: 1.1rem; line-height: 1; transform: rotate(90deg); }
.business-profile-tip { display: flex; margin: 1rem 0.1rem 0; align-items: center; gap: 0.35rem; color: var(--ds-muted); font-size: var(--app-detail-size); }
.business-profile-tip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }

.business-profile-rule-list .business-profile-link-row {
  border: 1px solid var(--ds-border);
  border-radius: var(--app-card-radius);
  box-shadow: var(--ds-shadow-sm);
}

.business-profile-rule-list .business-profile-link-row .app-row-card__icon { background: transparent; }

.business-profile-page.is-service-editor .business-profile-header,
.business-profile-page.is-service-editor .business-profile-nav,
.business-profile-page.is-profile-editor .business-profile-nav { display: none; }

.service-editor { max-width: 620px; margin-inline: auto; padding-inline: 0.5rem; }
.service-editor__form { display: grid; gap: 0.8rem; padding-bottom: 0.75rem; }
.service-editor__header { margin-bottom: 0.25rem; }
.service-editor__delete { color: var(--ds-danger); }
.service-editor__hero { display: grid; padding: 0.2rem 1rem 0.85rem; justify-items: center; text-align: center; }

.service-editor__hero-icon {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 0.55rem;
  place-items: center;
  border: 1px dashed var(--ds-border-high);
  border-radius: 50%;
  color: var(--ds-text-soft);
}

.service-editor__hero-icon > svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.55; }
.service-editor__hero-icon i { position: absolute; right: -1px; bottom: -1px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--ds-border); border-radius: 50%; background: var(--ds-surface-solid); }
.service-editor__hero-icon i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
.service-editor__hero label { width: min(100%, 420px); }
.service-editor__hero input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ds-text); font: inherit; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.035em; text-align: center; }
.service-editor__hero .app-status-pill { margin-top: 0.45rem; text-transform: none; }
.service-editor__hero p { max-width: 28rem; margin: 0.55rem 0 0; color: var(--ds-muted); font-size: var(--app-meta-size); line-height: 1.5; }

/* .workspace-shell section (styles.css) resets all <section> padding to 0
   with higher specificity (element+ancestor-class) than a single class
   selector can beat — qualify with .workspace-shell so the panel's own
   padding actually applies instead of silently landing at 0. */
.workspace-shell .service-editor__panel { display: grid; padding: 1rem; gap: 0.8rem; }
.service-editor__panel h2 { font-size: 1rem; }
.service-editor__panel > p { margin: -0.5rem 0 0; color: var(--ds-muted); font-size: var(--app-meta-size); }
.service-editor__panel .form-field { display: grid; gap: 0.4rem; }
.service-editor__panel textarea.auth-input { min-height: 112px; padding: 0.8rem; line-height: 1.5; resize: vertical; }
.service-editor__price { max-width: 260px; }
.service-editor__hint { padding: 0.65rem 0.75rem; border-radius: 9px; background: var(--ds-lime-soft); color: var(--ds-text-soft) !important; }

.service-stepper { display: grid; gap: 0.4rem; color: var(--ds-text-soft); font-size: var(--app-meta-size); font-weight: 700; }
.service-stepper > span:last-child { display: grid; min-height: 48px; grid-template-columns: 44px minmax(0, 1fr) auto 44px; align-items: center; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface-solid); }
.service-stepper button { height: 100%; border: 0; background: transparent; color: var(--ds-lime); font: inherit; font-size: 1.4rem; cursor: pointer; }
.service-stepper input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ds-text); font: inherit; font-size: 1rem; font-weight: 750; text-align: right; appearance: textfield; }
.service-stepper input::-webkit-inner-spin-button { appearance: none; }
.service-stepper em { padding-left: 0.25rem; color: var(--ds-text); font-size: 0.72rem; font-style: normal; font-weight: 750; }

.service-editor__ai-copy { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 0.45rem; border: 0; border-radius: 9px; background: var(--ds-lime-soft); color: var(--ds-lime); font: inherit; font-size: var(--app-control-font-size); font-weight: 750; cursor: pointer; }
.service-editor__ai-copy svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.service-editor__checklist { display: grid; }
.service-editor__checklist label { display: flex; min-height: 42px; align-items: center; gap: 0.65rem; border-bottom: 1px solid var(--ds-border); color: var(--ds-text-soft); font-size: var(--app-body-size); font-weight: 650; cursor: pointer; }
.service-editor__checklist input { position: absolute; opacity: 0; }
.service-editor__checklist label > span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--ds-border-high); border-radius: 6px; color: transparent; }
.service-editor__checklist label > span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.service-editor__checklist input:checked + span { border-color: var(--ds-lime); background: var(--ds-lime); color: var(--ds-surface-solid); }
.service-editor__checklist input:focus-visible + span { outline: 2px solid var(--ds-lime); outline-offset: 2px; }
.service-editor__custom-info { display: grid; gap: 0.45rem; color: var(--ds-lime); font-size: var(--app-control-font-size); font-weight: 750; }
.service-editor__custom-info > span { display: flex; align-items: center; gap: 0.35rem; }
.service-editor__custom-info svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.service-editor__custom-info input { min-height: 40px; padding: 0 0.7rem; border: 1px solid var(--ds-border); border-radius: 9px; background: var(--ds-surface-solid); color: var(--ds-text); font: inherit; }

.service-editor__delete-btn { width: 100%; margin-top: 0.4rem; }
/* .workspace-shell .btn (styles.css) is a 2-class selector that otherwise
   beats the single-class .btn--danger and flattens it to the neutral
   button surface — match its specificity to keep this one red. */
.workspace-shell .service-editor__delete-btn.btn--danger {
  border-color: rgba(212, 72, 82, 0.24);
  background: #d44852;
  color: #fff;
}
.workspace-shell .service-editor__delete-btn.btn--danger:hover { background: #bf333f; }
.service-editor__actions { display: grid; margin-top: 0.4rem; padding: 0.65rem; grid-template-columns: minmax(100px, 0.35fr) minmax(0, 1fr); gap: 0.5rem; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface-solid); box-shadow: var(--ds-shadow-md); }
.service-editor__actions .btn { width: 100%; min-height: 46px; }

.business-profile-edit-panel { margin-top: 0.4rem; }
.business-profile-page .business-profile-save-bar { z-index: 6; }

@media (max-width: 760px) {
  .business-profile-page .business-profile-nav { position: static; z-index: auto; margin-inline: 0; padding-inline: 0; }
  .business-profile-page .business-profile-nav a { min-height: 38px; padding-inline: 0.15rem; font-size: 0.65rem; }
  .business-profile-ai-card__top { min-height: 174px; padding: 1rem; grid-template-columns: minmax(0, 1fr) 82px; }
  .business-profile-ai-card__top > div:first-child p { margin-top: 0.9rem; font-size: 0.8rem; }
  .business-profile-progress { width: 78px; height: 78px; }
  .business-profile-progress strong { font-size: 1.05rem; }
  .business-profile-ai-card__stats a { min-height: 62px; }
  .business-profile-ai-card__review { grid-template-columns: 1fr; }
  .business-profile-ai-card__review > a { border-bottom: 1px solid var(--ds-border); }
  .business-profile-rebuild-form { padding: 0.35rem; }
  .business-profile-rebuild-form button { width: 100%; }
  .business-profile-section-heading { min-height: 68px; }
  .business-profile-section-heading h2 { font-size: 1.05rem; }
  .business-service-card { min-height: 116px; padding: 0.8rem; grid-template-columns: 50px minmax(0, 1fr) 16px; gap: 0.45rem 0.65rem; }
  .business-service-card__icon { width: 50px; height: 50px; }
  .business-service-card__icon svg { width: 32px; height: 32px; }
  .business-service-card__state { font-size: 0.52rem; }
  .business-profile-question { min-height: 56px; padding-inline: 0.7rem; grid-template-columns: 30px minmax(0, 1fr) auto 18px; gap: 0.5rem; }
  .business-profile-question__icon svg { width: 21px; height: 21px; }
  .business-profile-rule-list .business-profile-link-row { min-height: 72px; }
  .business-profile-page.is-service-editor { padding-top: max(0.25rem, env(safe-area-inset-top)); }
  /* .app-page:not(...) (below) independently reserves calc(nav height +
     1.25rem) of bottom padding for pages that manage their own chrome —
     but this page also sits inside .ws-main, which already reserves nav
     clearance itself, so the two stack and leave a large empty gap after
     the last card. Override with matching specificity down to a small
     cosmetic trailing gap now that the form no longer needs extra room
     for a floating action bar. */
  .business-profile-page.is-service-editor:not(.app-page--record):not(.app-page--detail):not(.app-page--split) {
    padding-bottom: 1.25rem;
  }
  .service-editor__header { min-height: 52px; }
  .service-editor__hero { padding-inline: 0.5rem; }
  .workspace-shell .service-editor__panel { padding: 0.85rem; }
  .service-pricing-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-pricing-segments span { min-height: 42px; padding-inline: 0.25rem; font-size: 0.62rem; }
}

@media (max-width: 380px) {
  .business-profile-ai-card__stats span { font-size: 0.52rem; }
  .business-profile-add-button { padding-inline: 0.55rem; }
  .business-profile-question .app-status-pill { min-height: 21px; padding-inline: 0.32rem; font-size: 0.5rem; }
}

@keyframes businessProfilePageIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.setup-alert--info {
  border-color: rgba(118, 169, 250, 0.25);
  background: rgba(118, 169, 250, 0.08);
}

[data-theme='light'] .services-mobile .business-profile-catalogue .service-config__body {
  background: var(--ds-surface-1);
  color: var(--ds-text-soft);
}

[data-theme='light'] .services-mobile .business-profile-catalogue .service-config__body p {
  color: var(--ds-muted);
}

[data-theme='light'] .services-mobile .business-profile-catalogue .service-config__body strong {
  color: var(--ds-text);
}

@media (max-width: 760px) {
  .services-mobile .crm-page-header {
    padding: 0.25rem 0 0;
  }

  .services-mobile .business-profile-nav:not(.business-profile-nav--swipe) {
    position: static;
    display: grid;
    margin: 0;
    padding: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    overflow: visible;
    border-radius: var(--ds-radius-lg);
  }

  .services-mobile .business-profile-nav:not(.business-profile-nav--swipe) a {
    min-height: 42px;
    padding: 0.45rem 0.55rem;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .services-mobile .business-profile-nav--swipe {
    position: sticky;
    top: 64px;
    z-index: 8;
    margin-inline: -0.25rem;
    padding: 0.5rem 0.25rem;
    background: var(--ds-bg);
  }

  .services-mobile .business-profile-nav--swipe a {
    padding-inline: 0.8rem;
  }

  .services-mobile .business-profile-pager-nav a.is-active,
  .services-mobile .business-profile-pager-nav a[aria-current='page'] {
    min-width: max-content;
  }

  .services-mobile .business-profile-page-panel {
    scroll-margin-top: 8.25rem;
  }

  .services-mobile .business-profile-edit-page,
  .services-mobile .business-profile-edit-hub {
    min-height: calc(100dvh - 230px);
  }

  .services-mobile .business-profile-edit-cards {
    padding-inline: 0.75rem;
  }

  .services-mobile .business-profile-edit-card {
    min-height: 82px;
    padding: 0.9rem;
  }

  .services-mobile .business-profile-save-bar {
    width: calc(100% - 1.5rem);
    max-width: none;
    bottom: 5.25rem;
  }

  .services-mobile .business-profile-save-bar .btn {
    flex: 1;
    margin-inline: 0;
  }

  .business-profile-section-strip {
    margin-inline: 0.75rem;
  }

  .services-mobile .business-profile-summary {
    margin: 0;
  }

  .services-mobile .business-profile-summary > div {
    min-width: 0;
    padding: 0.8rem;
  }

  .services-mobile .account-section__head {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
  }

  .services-mobile .account-section__head .account-status {
    justify-self: start;
  }

  .services-mobile .business-profile-catalogue > summary {
    min-height: 64px;
    padding: 0.85rem 1rem;
    gap: 0.75rem;
  }

  .services-mobile .business-profile-catalogue > summary span:first-child {
    min-width: 0;
  }

  .services-mobile .business-profile-catalogue > summary small {
    white-space: normal;
    line-height: 1.35;
  }

  .services-mobile .form-grid,
  .services-mobile .form-grid--compact {
    grid-template-columns: 1fr;
    padding-inline: 0.75rem;
  }

  .services-mobile textarea.auth-input {
    min-height: 12rem;
  }

  .services-mobile .form-field--full textarea.auth-input {
    min-height: 15rem;
  }

  .services-mobile .service-config__summary {
    grid-template-columns: 1.85rem minmax(0, 1fr) 1.85rem;
    padding: 0.75rem;
  }

  .services-mobile .service-row__num,
  .services-mobile .service-config__toggle,
  .services-mobile .business-profile-catalogue > summary > span:last-child {
    width: 1.85rem;
    height: 1.85rem;
  }

  .services-mobile .service-config__body {
    padding-left: 0.75rem;
  }
}

/* Vivid semantic pills: stage and attention colours remain independent. */
.workspace-shell .status-pill--info,
.workspace-shell .status-pill--cyan,
.app-shell .status-pill--info,
.app-shell .status-pill--cyan {
  border-color: rgba(0, 209, 255, 0.88) !important;
  background: rgba(0, 209, 255, 0.22) !important;
  color: #2eeaff !important;
  box-shadow: 0 0 16px rgba(0, 209, 255, 0.28) !important;
}

.workspace-shell .status-pill--attention,
.workspace-shell .status-pill--warn,
.app-shell .status-pill--attention,
.app-shell .status-pill--warn {
  border-color: rgba(255, 122, 0, 0.92) !important;
  background: rgba(255, 122, 0, 0.24) !important;
  color: #ff9a1f !important;
  box-shadow: 0 0 16px rgba(255, 122, 0, 0.30) !important;
}

.workspace-shell .status-pill--success,
.workspace-shell .status-pill--lime,
.app-shell .status-pill--success,
.app-shell .status-pill--lime {
  border-color: rgba(197, 255, 0, 0.92) !important;
  background: rgba(197, 255, 0, 0.28) !important;
  color: #c5ff00 !important;
  box-shadow: 0 0 16px rgba(197, 255, 0, 0.32) !important;
}

html[data-theme="light"] .workspace-shell .status-pill--info,
html[data-theme="light"] .workspace-shell .status-pill--cyan,
html[data-theme="light"] .app-shell .status-pill--info,
html[data-theme="light"] .app-shell .status-pill--cyan {
  border-color: color-mix(in srgb, var(--ds-info) 22%, transparent) !important;
  background: #e8f1ff !important;
  color: var(--ds-info) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .workspace-shell .status-pill--attention,
html[data-theme="light"] .workspace-shell .status-pill--warn,
html[data-theme="light"] .app-shell .status-pill--attention,
html[data-theme="light"] .app-shell .status-pill--warn {
  border-color: color-mix(in srgb, var(--ds-warning) 22%, transparent) !important;
  background: #fff0db !important;
  color: var(--ds-warning) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .workspace-shell .status-pill--success,
html[data-theme="light"] .workspace-shell .status-pill--lime,
html[data-theme="light"] .app-shell .status-pill--success,
html[data-theme="light"] .app-shell .status-pill--lime {
  border-color: var(--ds-lime-border) !important;
  background: #edf4df !important;
  color: var(--ds-lime) !important;
  box-shadow: none !important;
}

.status-pill-stack,
.inbox-owner-statuses {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.jobs-status .status-pill-stack {
  flex-direction: column;
}

.status-pill--owner-attention {
  width: auto;
  min-width: 0;
  min-height: 24px;
  height: auto;
  padding: 0.28rem 0.5rem;
  font-size: 0.6rem;
  line-height: 1.05;
  white-space: nowrap;
}

.owner-attention-note,
.snapshot-attention-note {
  color: var(--crm-primary, var(--ds-lime));
  font-weight: 850;
}

.snapshot-waiting-line {
  color: var(--crm-muted, var(--ds-muted));
}

/* Calendar matrix redesign and light-mode job snapshot contrast pass. */
html[data-theme="light"] .ai-panel,
html[data-theme="light"] .ai-analysis-panel {
  background: #f8fafc;
  color: #111827;
}

html[data-theme="light"] .ai-panel__label,
html[data-theme="light"] .ai-section__label,
html[data-theme="light"] .ai-analysis-block .ai-section__label {
  color: #5b6880;
}

html[data-theme="light"] .ai-analysis-block,
html[data-theme="light"] .manual-action-panel {
  background: #ffffff;
  border-color: #cbd5e1;
}

html[data-theme="light"] .ai-analysis-block p,
html[data-theme="light"] .ai-row__value,
html[data-theme="light"] .ai-row__value strong,
html[data-theme="light"] #ai-summary,
html[data-theme="light"] #owner-reason,
html[data-theme="light"] #ai-insights,
html[data-theme="light"] #ai-service,
html[data-theme="light"] #ai-next-action {
  color: #172033;
}

html[data-theme="light"] .ai-row__label,
html[data-theme="light"] .job-brief-list dt {
  color: #66748a;
}

html[data-theme="light"] .job-brief-list dd {
  color: #172033;
}

.calendar-toolbar--matrix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: nowrap;
  width: 100%;
}

.calendar-toolbar__month-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

.calendar-layout--matrix {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.calendar-board--matrix {
  overflow: hidden;
}

.calendar-matrix-head {
  align-items: center;
}

.calendar-page__header {
  align-items: center;
}

.calendar-page__header .calendar-toolbar--matrix {
  margin-left: 0;
}

.calendar-week-nav__label {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}

.calendar-week-nav__label span {
  display: none;
}

.calendar-week-nav__today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 42px;
  padding: 0 0.9rem;
  border: 1px solid var(--ds-lime-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-lime);
  color: var(--ds-lime-ink);
  box-shadow: var(--ds-shadow-lime);
  font-weight: 800;
  text-decoration: none;
}

.calendar-week-nav__today:hover,
.calendar-week-nav__today:focus-visible {
  color: var(--ds-lime-ink);
  filter: brightness(0.98);
}

.calendar-board--matrix .calendar-board__body {
  padding: 0;
}

.calendar-matrix {
  display: grid;
  gap: 0;
}

.calendar-matrix__weekdays,
.calendar-matrix__grid {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
}

.calendar-matrix__weekdays {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 38px;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
  background: color-mix(in srgb, var(--ds-panel) 94%, transparent);
}

.calendar-matrix__weekdays span {
  padding: 0.65rem 0.45rem;
  color: var(--ds-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
}

.calendar-matrix__grid {
  gap: 1px;
  background: var(--ds-border);
}

.calendar-week-label,
.calendar-day-cell {
  min-width: 0;
  text-decoration: none;
  background: var(--ds-panel);
}

.calendar-week-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  color: var(--ds-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.calendar-day-cell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.45rem;
  min-height: 88px;
  padding: 0.62rem;
  color: var(--ds-text);
  outline: 0;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.calendar-day-cell:hover,
.calendar-day-cell:focus-visible {
  z-index: 1;
  background: var(--ds-elevated);
  box-shadow: inset 0 0 0 1px var(--ds-border-strong);
}

.calendar-day-cell:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ds-lime);
}

.calendar-day-cell.is-muted {
  color: var(--ds-muted);
  background: color-mix(in srgb, var(--ds-panel) 70%, var(--ds-bg));
}

.calendar-day-cell.is-past:not(.is-selected) {
  opacity: 0.78;
}

.calendar-day-cell.is-selected {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--ds-lime) 22%, transparent), transparent 56%),
    var(--ds-elevated);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-lime) 64%, transparent);
}

.calendar-day-cell--light,
.calendar-day-cell--medium,
.calendar-day-cell--heavy {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-lime) 8%, transparent), transparent 58%),
    var(--ds-panel);
}

.calendar-day-cell--medium {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-lime) 14%, transparent), transparent 64%),
    var(--ds-panel);
}

.calendar-day-cell--heavy {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-lime) 20%, transparent), transparent 68%),
    var(--ds-panel);
}

.calendar-day-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.calendar-day-cell__top strong {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: currentColor;
  font-size: 0.84rem;
  font-weight: 850;
}

.calendar-day-cell.is-today .calendar-day-cell__top strong {
  background: var(--ds-lime);
  color: var(--ds-lime-ink);
}

.calendar-day-cell__top small {
  color: var(--ds-lime);
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-day-cell__heat {
  display: flex;
  align-items: end;
  gap: 0.2rem;
  min-height: 1.2rem;
}

.calendar-day-cell__heat i {
  display: block;
  width: 100%;
  max-width: 1.2rem;
  height: 0.22rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-border-strong) 80%, transparent);
  opacity: 0.5;
}

.calendar-day-cell--light .calendar-day-cell__heat i:first-child,
.calendar-day-cell--medium .calendar-day-cell__heat i:nth-child(-n + 2),
.calendar-day-cell--heavy .calendar-day-cell__heat i {
  background: var(--ds-lime);
  opacity: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--ds-lime) 26%, transparent);
}

.calendar-day-cell__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  min-height: 1.25rem;
}

.calendar-day-cell__meta b,
.calendar-day-cell__meta em {
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

.calendar-day-cell__meta b {
  background: var(--ds-lime);
  color: var(--ds-lime-ink);
}

.calendar-day-cell__meta em {
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-highlight);
  color: var(--ds-muted);
}

.calendar-agenda-rail {
  min-width: 0;
}

.calendar-agenda-list,
.calendar-week-agenda__list {
  display: grid;
  gap: 0.6rem;
}

.calendar-agenda-card,
.calendar-mini-event {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 0.22rem;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-panel);
  color: var(--ds-text);
  text-align: left;
}

.calendar-agenda-card {
  padding: 0.78rem 0.82rem;
}

.calendar-mini-event {
  padding: 0.58rem 0.65rem;
}

.calendar-agenda-card--traden,
.calendar-mini-event--traden {
  border-left: 3px solid var(--ds-lime);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-lime) 11%, transparent), transparent 42%),
    var(--ds-panel);
}

.calendar-agenda-card--external,
.calendar-mini-event--external {
  border-left: 3px solid var(--ds-info);
}

.calendar-agenda-card--conflict,
.calendar-mini-event--conflict {
  border-color: color-mix(in srgb, var(--ds-danger) 42%, var(--ds-border));
  border-left-color: var(--ds-danger);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-danger) 10%, transparent), transparent 48%),
    var(--ds-panel);
}

.calendar-agenda-card__time,
.calendar-mini-event span {
  color: var(--ds-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.calendar-agenda-card strong,
.calendar-mini-event strong {
  min-width: 0;
  color: var(--ds-text);
  font-size: 0.9rem;
  line-height: 1.2;
}

.calendar-agenda-card small,
.calendar-agenda-card > span:last-child,
.calendar-mini-event small {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: 0.76rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-week-day {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-panel);
  overflow: hidden;
}

.calendar-week-day summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.68rem 0.78rem;
  cursor: pointer;
  list-style: none;
}

.calendar-week-day summary::-webkit-details-marker {
  display: none;
}

.calendar-week-day summary span {
  color: var(--ds-text);
  font-weight: 820;
}

.calendar-week-day summary strong {
  color: var(--ds-muted);
  font-size: 0.72rem;
}

.calendar-week-day > div {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.65rem 0.65rem;
}

.calendar-week-day p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.78rem;
}

html[data-theme="light"] .calendar-day-cell,
html[data-theme="light"] .calendar-week-label,
html[data-theme="light"] .calendar-agenda-card,
html[data-theme="light"] .calendar-mini-event,
html[data-theme="light"] .calendar-week-day {
  background-color: #ffffff;
}

html[data-theme="light"] .calendar-matrix__weekdays {
  background: rgba(248, 250, 252, 0.95);
}

html[data-theme="light"] .calendar-day-cell.is-muted {
  background: #f4f7fb;
}

html[data-theme="light"] .calendar-day-cell--light,
html[data-theme="light"] .calendar-day-cell--medium,
html[data-theme="light"] .calendar-day-cell--heavy {
  background:
    linear-gradient(180deg, rgba(197, 255, 0, 0.20), transparent 62%),
    #ffffff;
}

html[data-theme="light"] .calendar-day-cell--heavy {
  background:
    linear-gradient(180deg, rgba(197, 255, 0, 0.30), transparent 68%),
    #ffffff;
}

html[data-theme="light"] .calendar-agenda-card--traden,
html[data-theme="light"] .calendar-mini-event--traden {
  background:
    linear-gradient(90deg, rgba(197, 255, 0, 0.22), transparent 48%),
    #ffffff;
}

html[data-theme="light"] .calendar-agenda-card--conflict,
html[data-theme="light"] .calendar-mini-event--conflict {
  background:
    linear-gradient(90deg, rgba(255, 107, 122, 0.14), transparent 48%),
    #ffffff;
}

html[data-theme="dark"] .calendar-board--matrix {
  border-color: rgba(226, 232, 240, 0.14);
  background: #070a0f;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .calendar-matrix__weekdays {
  border-bottom-color: rgba(226, 232, 240, 0.16);
  background: rgba(10, 15, 22, 0.98);
}

html[data-theme="dark"] .calendar-matrix__weekdays span,
html[data-theme="dark"] .calendar-week-label {
  color: #aeb9c7;
}

html[data-theme="dark"] .calendar-matrix__grid {
  background: rgba(226, 232, 240, 0.13);
}

html[data-theme="dark"] .calendar-day-cell,
html[data-theme="dark"] .calendar-week-label,
html[data-theme="dark"] .calendar-agenda-card,
html[data-theme="dark"] .calendar-mini-event,
html[data-theme="dark"] .calendar-week-day {
  background-color: #101720;
  color: #f8fafc;
}

html[data-theme="dark"] .calendar-day-cell:hover,
html[data-theme="dark"] .calendar-day-cell:focus-visible {
  background: #16202b;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.22);
}

html[data-theme="dark"] .calendar-day-cell.is-muted {
  background: #0b1118;
  color: #7f8b9a;
}

html[data-theme="dark"] .calendar-day-cell.is-past:not(.is-selected) {
  opacity: 0.66;
}

html[data-theme="dark"] .calendar-day-cell--light,
html[data-theme="dark"] .calendar-day-cell--medium,
html[data-theme="dark"] .calendar-day-cell--heavy {
  background:
    linear-gradient(180deg, rgba(200, 255, 22, 0.15), transparent 62%),
    #101720;
}

html[data-theme="dark"] .calendar-day-cell--medium {
  background:
    linear-gradient(180deg, rgba(200, 255, 22, 0.22), transparent 66%),
    #101720;
}

html[data-theme="dark"] .calendar-day-cell--heavy {
  background:
    linear-gradient(180deg, rgba(200, 255, 22, 0.30), transparent 70%),
    #101720;
}

html[data-theme="dark"] .calendar-day-cell.is-muted:not(.is-selected) {
  background:
    linear-gradient(180deg, rgba(200, 255, 22, 0.07), transparent 62%),
    #0b1118;
}

html[data-theme="dark"] .calendar-day-cell.is-selected {
  background:
    radial-gradient(circle at 50% 0, rgba(200, 255, 22, 0.24), transparent 58%),
    #172232;
  box-shadow: inset 0 0 0 2px rgba(200, 255, 22, 0.72);
}

html[data-theme="dark"] .calendar-day-cell__top small {
  color: #d5ff45;
}

html[data-theme="dark"] .calendar-day-cell__heat i {
  background: rgba(174, 185, 199, 0.42);
  opacity: 1;
}

html[data-theme="dark"] .calendar-day-cell--light .calendar-day-cell__heat i:first-child,
html[data-theme="dark"] .calendar-day-cell--medium .calendar-day-cell__heat i:nth-child(-n + 2),
html[data-theme="dark"] .calendar-day-cell--heavy .calendar-day-cell__heat i {
  background: #c8ff16;
  box-shadow: 0 0 12px rgba(200, 255, 22, 0.36);
}

html[data-theme="dark"] .calendar-day-cell__meta b {
  background: #c8ff16;
  color: #101500;
}

html[data-theme="dark"] .calendar-day-cell__meta em {
  border-color: rgba(174, 185, 199, 0.36);
  background: rgba(248, 250, 252, 0.08);
  color: #cbd5e1;
}

html[data-theme="dark"] .calendar-week-nav__btn {
  border-color: rgba(226, 232, 240, 0.16);
  background: #101720;
  color: #f8fafc;
}

html[data-theme="dark"] .calendar-week-nav__btn:hover,
html[data-theme="dark"] .calendar-week-nav__btn:focus-visible {
  border-color: rgba(200, 255, 22, 0.38);
  background: #16202b;
}

html[data-theme="dark"] .calendar-agenda-card--traden,
html[data-theme="dark"] .calendar-mini-event--traden {
  background:
    linear-gradient(90deg, rgba(200, 255, 22, 0.18), transparent 48%),
    #101720;
}

html[data-theme="dark"] .calendar-agenda-card--conflict,
html[data-theme="dark"] .calendar-mini-event--conflict {
  background:
    linear-gradient(90deg, rgba(255, 102, 120, 0.16), transparent 48%),
    #101720;
}

@media (max-width: 1180px) {
  .calendar-layout--matrix {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-agenda-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .calendar-mobile-switch {
    display: inline-flex;
    margin-bottom: 0.8rem;
  }

  .calendar-mobile-panels {
    display: block;
  }

  .calendar-mobile-panel[hidden] {
    display: none !important;
  }

  .calendar-layout--matrix {
    display: none;
  }

  .calendar-page .crm-page-header {
    gap: 0.9rem;
  }

  .calendar-page__header:has(.calendar-toolbar--matrix) {
    display: grid;
    width: auto;
    margin-inline: 0;
    padding-inline: 0;
    gap: 0.85rem;
  }

  .calendar-toolbar--matrix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(86px, 0.32fr);
    justify-content: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: none;
  }

  .calendar-toolbar__month-nav {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    gap: 0.55rem;
    width: 100%;
    flex: none;
  }

  .calendar-toolbar__month-nav .calendar-week-nav__btn {
    width: 100%;
  }

  .calendar-week-nav__today {
    width: 100%;
    flex: none;
    min-width: 0;
    padding: 0 0.75rem;
  }

  .calendar-matrix__weekdays,
  .calendar-matrix__grid {
    grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  }

  .calendar-matrix__weekdays span {
    padding: 0.48rem 0.1rem;
    font-size: 0.58rem;
  }

  .calendar-week-label {
    padding: 0.25rem;
    font-size: 0.56rem;
  }

  .calendar-day-cell {
    min-height: 62px;
    padding: 0.38rem 0.28rem;
    gap: 0.22rem;
  }

  .calendar-matrix--mobile .calendar-day-cell {
    background: var(--ds-surface-1, #ffffff);
    min-height: 76px;
    opacity: 1;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
  }

  .calendar-matrix--mobile .calendar-day-cell.is-past:not(.is-selected) {
    opacity: 1;
  }

  html[data-theme="light"] .calendar-matrix--mobile .calendar-day-cell--light,
  html[data-theme="light"] .calendar-matrix--mobile .calendar-day-cell--medium,
  html[data-theme="light"] .calendar-matrix--mobile .calendar-day-cell--heavy,
  html[data-theme="dark"] .calendar-matrix--mobile .calendar-day-cell--light,
  html[data-theme="dark"] .calendar-matrix--mobile .calendar-day-cell--medium,
  html[data-theme="dark"] .calendar-matrix--mobile .calendar-day-cell--heavy {
    background: var(--ds-surface-1, #ffffff);
  }

  .calendar-day-cell__top {
    justify-content: center;
  }

  .calendar-day-cell__top strong {
    width: 1.48rem;
    height: 1.48rem;
    font-size: 0.72rem;
  }

  .calendar-day-cell__top small {
    position: absolute;
    inset: auto 0.2rem 0.2rem auto;
    font-size: 0;
  }

  .calendar-day-cell__top small::after {
    content: "";
    width: 0.34rem;
    height: 0.34rem;
    display: block;
    border-radius: 999px;
    background: var(--ds-lime);
  }

  .calendar-day-cell__heat {
    justify-content: center;
    gap: 0.12rem;
    min-height: 0.72rem;
  }

  .calendar-matrix--mobile .calendar-day-cell__heat,
  .calendar-matrix--mobile .calendar-day-cell__meta {
    display: none;
  }

  .calendar-day-cell__job-dot {
    width: 0.42rem;
    height: 0.42rem;
    display: block;
    border-radius: 999px;
    background: transparent;
  }

  .calendar-day-cell.has-traden-job .calendar-day-cell__job-dot {
    background: var(--ds-lime);
    box-shadow: 0 0 10px color-mix(in srgb, var(--ds-lime) 32%, transparent);
  }

  .calendar-day-cell__heat i {
    max-width: 0.58rem;
    height: 0.18rem;
  }

  .calendar-day-cell__meta {
    justify-content: center;
  }

  .calendar-day-cell__meta b,
  .calendar-day-cell__meta em {
    min-width: 1rem;
    height: 1rem;
    font-size: 0.56rem;
  }

  .calendar-agenda-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-mobile-panel--week,
  .calendar-mobile-panel--day {
    display: grid;
    gap: 0.8rem;
  }

  .calendar-mobile-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.22rem;
    padding: 0.35rem;
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    background: var(--ds-surface-1, #ffffff);
    box-shadow: var(--ds-shadow-sm);
  }

  .calendar-mobile-week-strip a {
    min-width: 0;
    min-height: 56px;
    display: grid;
    place-items: center;
    gap: 0.15rem;
    border-radius: 999px;
    color: var(--ds-muted);
    text-decoration: none;
  }

  .calendar-mobile-week-strip a span {
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .calendar-mobile-week-strip a strong {
    color: var(--ds-text);
    font-size: 0.9rem;
    font-weight: 850;
  }

  .calendar-mobile-week-strip a i {
    width: 0.28rem;
    height: 0.28rem;
    display: block;
    border-radius: 999px;
    background: var(--ds-lime);
  }

  .calendar-mobile-week-strip a.is-selected {
    background: var(--ds-lime);
    color: var(--ds-lime-ink);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ds-lime) 28%, transparent);
  }

  .calendar-mobile-week-strip a.is-selected strong {
    color: var(--ds-lime-ink);
  }

  .calendar-mobile-week-strip a.is-selected i {
    background: var(--ds-lime-ink);
  }

  .calendar-mobile-day-card .crm-panel__head {
    align-items: center;
  }

  .calendar-mobile-day-list {
    display: grid;
    gap: 0.55rem;
  }

  .calendar-mobile-job-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px 8px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: var(--ds-surface-1, #ffffff);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-sm);
  }

  .calendar-mobile-job-card--traden {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--ds-lime) 18%, transparent), transparent 48%),
      var(--ds-surface-1, #ffffff);
  }

  .calendar-mobile-job-card--conflict {
    border-color: color-mix(in srgb, var(--ds-danger) 44%, var(--ds-border));
  }

  .calendar-mobile-job-card time {
    display: grid;
    gap: 0.12rem;
    color: var(--ds-text);
    font-size: 0.86rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
  }

  .calendar-mobile-job-card time small {
    color: var(--ds-muted);
    font-size: 0.62rem;
    font-weight: 800;
  }

  .calendar-mobile-job-card > span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--ds-lime);
    box-shadow: 0 0 12px color-mix(in srgb, var(--ds-lime) 34%, transparent);
  }

  .calendar-mobile-job-card--external > span {
    background: var(--ds-info);
  }

  .calendar-mobile-job-card div {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
  }

  .calendar-mobile-job-card strong,
  .calendar-mobile-job-card small,
  .calendar-mobile-job-card em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-mobile-job-card strong {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .calendar-mobile-job-card small,
  .calendar-mobile-job-card em {
    color: var(--ds-muted);
    font-size: 0.72rem;
    font-style: normal;
    line-height: 1.25;
  }

  .calendar-matrix-head {
    align-items: flex-start;
  }

  .calendar-legend {
    justify-content: flex-start;
  }
}

/* Mobile-first scan view for job tickets opened from the calendar/jobs modal. */
.ws-modal__box:has(.job-ticket--scan) {
  width: min(760px, calc(100vw - 24px));
  max-height: min(92dvh, 860px);
  padding: 0;
  overflow: auto;
  border-radius: 18px;
  background: var(--ds-canvas);
}

.ws-modal__box:has(.job-ticket--scan) #modal-body {
  min-height: 0;
}

/* The preceding brief needs the same gutter as the padded job ticket. */
.ws-modal__box:has(.job-ticket--scan) #modal-body > .evolving-brief {
  padding-inline: 0.85rem;
}

.job-ticket--scan {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ds-primary) 12%, transparent), transparent 18rem),
    var(--ds-canvas);
  color: var(--ds-text);
  box-shadow: none;
}

.job-ticket--scan .job-ticket__scan-head,
.job-ticket--scan .job-ticket__scan-card,
.job-ticket--scan .job-ticket__summary-panel,
.job-ticket--scan .job-ticket__scan-section {
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-panel);
  box-shadow: inset 0 1px 0 var(--ds-highlight);
}

.job-ticket--scan .job-ticket__scan-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
  padding: 1rem;
}

.job-ticket--scan .job-ticket__eyebrow {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ds-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-ticket--scan h3 {
  margin: 0;
  color: var(--ds-text);
  font-size: clamp(1.55rem, 7vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0;
}

.job-ticket--scan .job-ticket__scan-head p,
.job-ticket--scan .job-ticket__summary-panel p {
  margin: 0.65rem 0 0;
  color: var(--ds-text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.job-ticket--scan .job-ticket__status {
  align-self: start;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--ds-primary) 54%, var(--ds-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-primary) 18%, var(--ds-panel));
  color: var(--ds-primary);
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
}

.job-ticket--scan .job-ticket__scan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.job-ticket--scan .job-ticket__scan-card {
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 0.28rem;
  padding: 0.78rem;
}

.job-ticket--scan .job-ticket__scan-card--primary {
  grid-column: 1 / -1;
  min-height: 82px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ds-primary) 11%, transparent), transparent 62%),
    var(--ds-panel);
}

.job-ticket--scan .job-ticket__scan-card span,
.job-ticket--scan .job-ticket__summary-panel > span,
.job-ticket--scan .job-ticket__mini-row span,
.job-ticket--scan .job-ticket__detail-block > span {
  color: var(--ds-muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.job-ticket--scan .job-ticket__scan-card strong,
.job-ticket--scan .job-ticket__mini-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ds-text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.job-ticket--scan .job-ticket__scan-card small {
  min-width: 0;
  color: var(--ds-text-soft);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.job-ticket--scan .job-ticket__summary-panel {
  padding: 0.9rem;
}

.job-ticket--scan .job-ticket__summary-panel strong {
  display: block;
  margin-top: 0.7rem;
  color: var(--ds-text);
  font-size: 0.88rem;
  line-height: 1.35;
}

.job-ticket--scan .job-ticket__scan-section {
  overflow: hidden;
}

.job-ticket--scan .job-ticket__scan-section summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.78rem 0.9rem;
  color: var(--ds-text);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 850;
  list-style: none;
}

.job-ticket--scan .job-ticket__scan-section summary::-webkit-details-marker {
  display: none;
}

.job-ticket--scan .job-ticket__scan-section summary span {
  color: var(--ds-muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.job-ticket--scan .job-ticket__messages,
.job-ticket--scan .job-ticket__mini-list,
.job-ticket--scan .job-ticket__document-rail {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0 0.75rem 0.75rem;
}

.job-ticket--scan .job-ticket__message {
  max-width: 100%;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface-1);
}

.job-ticket--scan .job-ticket__message--out {
  margin-left: 1.1rem;
  border-color: color-mix(in srgb, var(--ds-primary) 34%, var(--ds-border));
  background: color-mix(in srgb, var(--ds-primary) 10%, var(--ds-surface-1));
}

.job-ticket--scan .job-ticket__message span {
  color: var(--ds-muted);
  font-size: 0.68rem;
  font-weight: 820;
}

.job-ticket--scan .job-ticket__message p,
.job-ticket--scan .job-ticket__empty {
  margin: 0.25rem 0 0;
  color: var(--ds-text);
  font-size: 0.86rem;
  line-height: 1.4;
}

.job-ticket--scan .job-ticket__mini-row,
.job-ticket--scan .job-ticket__document-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.68rem;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface-1);
}

.job-ticket--scan .job-ticket__actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.75rem 0 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, var(--ds-canvas) 22%);
  box-shadow: none;
  backdrop-filter: none;
}

.job-ticket--scan .job-ticket__actions .btn-card {
  width: 100%;
  min-height: 46px;
}

.job-ticket--scan .job-ticket__actions .btn-edit {
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-panel);
  color: var(--ds-text);
}

html[data-theme="light"] .ws-modal__box:has(.job-ticket--scan),
html[data-theme="light"] .job-ticket--scan {
  background:
    radial-gradient(circle at 0 0, rgba(197, 255, 0, 0.16), transparent 17rem),
    #f6f8fb;
  color: #111827;
}

html[data-theme="light"] .job-ticket--scan .job-ticket__scan-head,
html[data-theme="light"] .job-ticket--scan .job-ticket__scan-card,
html[data-theme="light"] .job-ticket--scan .job-ticket__summary-panel,
html[data-theme="light"] .job-ticket--scan .job-ticket__scan-section {
  border-color: #d4dce8;
  background: #ffffff;
}

html[data-theme="light"] .job-ticket--scan h3,
html[data-theme="light"] .job-ticket--scan .job-ticket__scan-card strong,
html[data-theme="light"] .job-ticket--scan .job-ticket__summary-panel strong,
html[data-theme="light"] .job-ticket--scan .job-ticket__message p,
html[data-theme="light"] .job-ticket--scan .job-ticket__mini-row strong {
  color: #111827;
}

html[data-theme="light"] .job-ticket--scan .job-ticket__scan-head p,
html[data-theme="light"] .job-ticket--scan .job-ticket__summary-panel p,
html[data-theme="light"] .job-ticket--scan .job-ticket__scan-card small {
  color: #475569;
}

html[data-theme="light"] .job-ticket--scan .job-ticket__message,
html[data-theme="light"] .job-ticket--scan .job-ticket__mini-row,
html[data-theme="light"] .job-ticket--scan .job-ticket__document-card {
  border-color: #dbe3ee;
  background: #fbfdff;
}

html[data-theme="light"] .job-ticket--scan .job-ticket__message--out {
  border-color: rgba(125, 174, 0, 0.34);
  background: rgba(197, 255, 0, 0.16);
}

html[data-theme="light"] .job-ticket--scan .job-ticket__actions {
  background: linear-gradient(180deg, transparent, #f6f8fb 22%);
}

html[data-theme="light"] .job-ticket--scan .job-ticket__actions .btn-edit {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #111827 !important;
}

@media (max-width: 760px) {
  .ws-modal__box:has(.job-ticket--scan) {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .job-ticket--scan {
    min-height: auto;
    padding: 0.75rem;
    padding-top: 3.25rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .job-ticket--scan .job-ticket__scan-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.9rem;
  }

  .job-ticket--scan .job-ticket__status {
    justify-self: start;
  }

  .job-ticket--scan .job-ticket__scan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .job-ticket--scan .job-ticket__scan-card,
  .job-ticket--scan .job-ticket__scan-card--primary {
    grid-column: auto;
    min-height: 68px;
    padding: 0.65rem;
  }

  .job-ticket--scan .job-ticket__scan-head p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Business profile source-answer spacing and compact text areas. */
.business-profile-edit-flow .business-profile-section-strip,
.onboarding-refined .business-profile-section-strip {
  margin-bottom: 1.25rem;
}

.business-profile-edit-flow .account-section--nested,
.onboarding-refined .onboarding-profile-section {
  margin-top: 1rem;
}

.business-profile-edit-flow .account-section--nested:first-of-type,
.onboarding-refined .business-profile-section-strip + .onboarding-profile-section {
  margin-top: 1.25rem;
}

.business-profile-edit-flow .account-section--nested > summary,
.onboarding-refined .onboarding-profile-section > .account-section__head {
  padding-bottom: 1rem;
}

.business-profile-edit-flow .account-section--nested .form-grid,
.onboarding-refined .onboarding-profile-section .form-grid {
  padding-top: 0.75rem;
}

.business-profile-edit-flow .form-label,
.onboarding-refined .form-label {
  margin-bottom: 0.45rem;
}

.business-profile-edit-flow textarea.auth-input,
.onboarding-refined textarea.auth-input {
  min-height: 7.5rem;
}

.business-profile-edit-flow textarea.auth-input[rows="3"],
.onboarding-refined textarea.auth-input[rows="3"] {
  min-height: 6.25rem;
}

.business-profile-edit-flow textarea.auth-input[rows="4"],
.onboarding-refined textarea.auth-input[rows="4"] {
  min-height: 7rem;
}

.business-profile-edit-flow textarea.auth-input[rows="5"],
.onboarding-refined textarea.auth-input[rows="5"] {
  min-height: 8rem;
}

@media (max-width: 760px) {
  .business-profile-edit-flow .business-profile-section-strip,
  .onboarding-refined .business-profile-section-strip {
    margin-bottom: 1rem;
  }

  .business-profile-edit-flow .account-section--nested,
  .onboarding-refined .onboarding-profile-section {
    margin-top: 0.9rem;
  }

  .business-profile-edit-flow .account-section--nested > summary,
  .onboarding-refined .onboarding-profile-section > .account-section__head {
    padding-bottom: 0.85rem;
  }

  .services-mobile textarea.auth-input,
  .business-profile-edit-flow textarea.auth-input,
  .onboarding-refined textarea.auth-input,
  .services-mobile .form-field--full textarea.auth-input,
  .business-profile-edit-flow .form-field--full textarea.auth-input,
  .onboarding-refined .form-field--full textarea.auth-input {
    min-height: 6.25rem;
  }

  .business-profile-edit-flow textarea.auth-input[rows="3"],
  .onboarding-refined textarea.auth-input[rows="3"] {
    min-height: 5.5rem;
  }

  .business-profile-edit-flow textarea.auth-input[rows="5"],
  .onboarding-refined textarea.auth-input[rows="5"] {
    min-height: 6.75rem;
  }
}

/* Public nav, auth, and onboarding light-mode polish. */
body:not(:has(.workspace-shell)) > .nav {
  padding-top: 0.5rem;
  height: calc(var(--nav-h) + 0.5rem);
}

body:not(:has(.workspace-shell)) > .nav .nav__inner {
  height: calc(100% - 0.5rem);
}

body:not(:has(.workspace-shell)) > .mobile-nav {
  top: calc(var(--nav-h) + 0.5rem);
}

[data-theme='light'] body:not(:has(.workspace-shell)) > .nav,
[data-theme='light'] .home-refresh .nav {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(17, 21, 13, 0.12);
}

[data-theme='light'] body:not(:has(.workspace-shell)) .nav__logo-text,
[data-theme='light'] body:not(:has(.workspace-shell)) .nav__links a,
[data-theme='light'] body:not(:has(.workspace-shell)) .mobile-nav a,
[data-theme='light'] .home-refresh .nav__logo-text,
[data-theme='light'] .home-refresh .nav__links a,
[data-theme='light'] .home-refresh .mobile-nav a {
  color: #11150d;
}

[data-theme='light'] body:not(:has(.workspace-shell)) .nav__links a:hover,
[data-theme='light'] body:not(:has(.workspace-shell)) .mobile-nav a:hover,
[data-theme='light'] .home-refresh .nav__links a:hover,
[data-theme='light'] .home-refresh .mobile-nav a:hover {
  color: #5f7d00;
}

[data-theme='light'] body:not(:has(.workspace-shell)) .nav__burger span,
[data-theme='light'] .home-refresh .nav__burger span {
  background: #11150d;
}

[data-theme='light'] body:not(:has(.workspace-shell)) .theme-switch,
[data-theme='light'] .home-refresh .theme-switch {
  color: #11150d;
}

[data-theme='light'] body:not(:has(.workspace-shell)) > .nav .btn--ghost,
[data-theme='light'] body:not(:has(.workspace-shell)) > .nav .nav__actions .btn--ghost,
[data-theme='light'] .home-refresh .nav .btn--ghost,
[data-theme='light'] .home-refresh .nav .nav__actions .btn--ghost {
  border-color: rgba(17, 21, 13, 0.28);
  background: rgba(255, 255, 255, 0.86);
  color: #11150d;
}

[data-theme='light'] body:not(:has(.workspace-shell)) > .nav .btn--ghost:hover,
[data-theme='light'] .home-refresh .nav .btn--ghost:hover {
  border-color: rgba(95, 125, 0, 0.36);
  background: #f5f8ef;
  color: #405900;
}

[data-theme='light'] .auth-card__sub,
[data-theme='light'] .auth-card__footer,
[data-theme='light'] .auth-footer,
[data-theme='light'] .auth-card__footer a,
[data-theme='light'] .auth-footer a,
[data-theme='light'] .auth-check,
[data-theme='light'] .auth-forgot {
  color: #334155;
}

[data-theme='light'] .auth-card__footer a,
[data-theme='light'] .auth-footer a,
[data-theme='light'] .auth-forgot {
  font-weight: 700;
}

[data-theme='light'] .auth-input {
  border-color: #cfd8bf;
  background: #ffffff;
  color: #11150d;
}

[data-theme='light'] .auth-input::placeholder {
  color: #7b866f;
}

[data-theme='light'] .setup-effort {
  border-color: #cfd8bf;
  background: #ffffff;
  color: #334155;
}

[data-theme='light'] .setup-shell .auth-card__logo,
[data-theme='light'] .setup-shell .nav__logo-text,
[data-theme='light'] .auth-page .auth-card__logo,
[data-theme='light'] .auth-page .nav__logo-text {
  color: #11150d;
}

[data-theme='light'] .setup-shell .btn--primary,
[data-theme='light'] .auth-page .btn--primary {
  border-color: #4f6900;
  background: #5f7d00;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(95, 125, 0, 0.18);
}

[data-theme='light'] .setup-shell .btn--primary:hover,
[data-theme='light'] .auth-page .btn--primary:hover {
  border-color: #405900;
  background: #4f6900;
  color: #ffffff;
}

[data-theme='light'] .setup-shell .btn--ghost,
[data-theme='light'] .auth-page .btn--ghost {
  border-color: #b8c4aa;
  background: #ffffff;
  color: #11150d;
}

[data-theme='light'] .setup-shell .btn--ghost:hover,
[data-theme='light'] .auth-page .btn--ghost:hover {
  border-color: rgba(95, 125, 0, 0.42);
  background: #f5f8ef;
  color: #405900;
}

[data-theme='light'] .setup-shell .field-help,
[data-theme='light'] .setup-shell .setup-readiness-card p,
[data-theme='light'] .setup-shell .schedule-row__day small,
[data-theme='light'] .auth-page .field-help {
  color: #475467;
}

[data-theme='light'] .setup-shell .account-status {
  border-color: #c7d1ba;
  background: #ffffff;
  color: #334155;
}

[data-theme='light'] .setup-shell .account-status--active {
  border-color: rgba(95, 125, 0, 0.42);
  background: rgba(95, 125, 0, 0.12);
  color: #405900;
}

.onboarding-refined form.auth-form {
  gap: 1rem;
}

.onboarding-refined .onboarding-profile-section {
  margin-top: 0;
  border: 1px solid var(--ds-border-high);
  border-radius: var(--ds-radius-xl);
  background: linear-gradient(145deg, var(--ds-surface-2), var(--ds-surface-1));
  box-shadow: var(--ds-shadow-sm), inset 0 1px 0 var(--ds-highlight);
}

.onboarding-refined .onboarding-profile-section + .onboarding-profile-section {
  margin-top: 0.9rem;
}

.onboarding-refined .onboarding-profile-section > .account-section__head {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding-bottom: 0.85rem;
}

.onboarding-refined .onboarding-profile-section > .account-section__head > div {
  width: 100%;
}

.onboarding-refined #onboarding-work {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(145deg, var(--ds-surface-1), rgba(255, 255, 255, 0.025));
}

.onboarding-refined #onboarding-enquiries {
  border-color: rgba(200, 255, 22, 0.18);
  background: linear-gradient(145deg, rgba(200, 255, 22, 0.07), var(--ds-surface-1));
}

.onboarding-refined #onboarding-attention {
  border-color: rgba(112, 200, 255, 0.16);
  background: linear-gradient(145deg, rgba(112, 200, 255, 0.06), var(--ds-surface-1));
}

[data-theme='light'] .onboarding-refined .onboarding-profile-section {
  border-color: rgba(16, 24, 40, 0.12);
  background: linear-gradient(145deg, #ffffff, #f8faf7);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme='light'] .onboarding-refined #onboarding-work {
  border-color: rgba(16, 24, 40, 0.12);
  background: linear-gradient(145deg, #ffffff, #f7f9f6);
}

[data-theme='light'] .onboarding-refined #onboarding-enquiries {
  border-color: rgba(95, 125, 0, 0.18);
  background: linear-gradient(145deg, rgba(95, 125, 0, 0.08), #fbfcf8);
}

[data-theme='light'] .onboarding-refined #onboarding-attention {
  border-color: rgba(106, 118, 95, 0.18);
  background: linear-gradient(145deg, rgba(106, 118, 95, 0.09), #fafbf8);
}

.onboarding-refined .onboarding-profile-section .form-grid {
  padding: 0.85rem 1rem 1rem;
  gap: 0.85rem;
  align-items: start;
}

.onboarding-refined .form-field {
  align-content: start;
}

.onboarding-refined .form-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ds-text-soft);
}

.onboarding-refined .form-example {
  display: block;
  margin: -0.1rem 0 0.55rem;
  color: #6a765f;
  font-size: 0.84rem;
  line-height: 1.45;
}

.onboarding-refined [data-onboarding-complete-form] :is(input.auth-input, select.auth-input, textarea.auth-input).is-filled {
  border-color: var(--ds-lime-border);
  box-shadow: 0 0 0 1px var(--ds-lime-border), 0 12px 28px rgba(200, 255, 22, 0.08);
}

[data-theme='light'] .onboarding-refined [data-onboarding-complete-form] :is(input.auth-input, select.auth-input, textarea.auth-input).is-filled {
  border-color: rgba(95, 125, 0, 0.58);
  box-shadow: 0 0 0 1px rgba(95, 125, 0, 0.36), 0 12px 28px rgba(95, 125, 0, 0.10);
}

.onboarding-refined [data-onboarding-complete-form] .input-with-suffix.is-filled {
  border-color: var(--ds-lime-border);
  box-shadow: 0 0 0 1px var(--ds-lime-border), 0 12px 28px rgba(200, 255, 22, 0.08);
}

[data-theme='light'] .onboarding-refined [data-onboarding-complete-form] .input-with-suffix.is-filled {
  border-color: rgba(95, 125, 0, 0.58);
  box-shadow: 0 0 0 1px rgba(95, 125, 0, 0.36), 0 12px 28px rgba(95, 125, 0, 0.10);
}

.onboarding-refined [data-onboarding-schedule-row].is-filled {
  border-color: var(--ds-lime-border);
  background: linear-gradient(145deg, var(--ds-lime-soft), var(--ds-surface-1));
  box-shadow: inset 0 1px 0 var(--ds-highlight), 0 12px 28px rgba(200, 255, 22, 0.08);
}

[data-theme='light'] .onboarding-refined [data-onboarding-schedule-row].is-filled {
  border-color: rgba(95, 125, 0, 0.34);
  background: linear-gradient(145deg, rgba(95, 125, 0, 0.10), var(--ds-surface-1));
  box-shadow: inset 0 1px 0 var(--ds-highlight), 0 12px 28px rgba(95, 125, 0, 0.10);
}

.onboarding-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.onboarding-loader[hidden] {
  display: none;
}

.onboarding-loader__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(22px) saturate(128%);
}

.onboarding-loader__dialog {
  position: relative;
  display: grid;
  place-items: center;
}

.onboarding-loader__logo {
  display: block;
  width: min(104px, 30vw);
  margin: 0 auto;
}

body.onboarding-loader-active {
  overflow: hidden;
}

@media (max-width: 760px) {
  body:not(:has(.workspace-shell)) > .nav {
    padding-top: 0.65rem;
    height: calc(var(--nav-h) + 0.65rem);
  }

  body:not(:has(.workspace-shell)) > .nav .container {
    padding-inline: 1rem;
  }

  body:not(:has(.workspace-shell)) > .mobile-nav {
    top: calc(var(--nav-h) + 0.65rem);
  }

  .onboarding-refined .setup-card--wide {
    width: min(100%, calc(100% - 16px));
    padding-inline: 14px;
  }

  .onboarding-refined .setup-header {
    padding-inline: 0.15rem;
  }

  .onboarding-refined .onboarding-profile-section > .account-section__head {
    padding-inline: 0.85rem;
  }

  .onboarding-refined .onboarding-profile-section .form-grid {
    padding-inline: 0.75rem;
    grid-template-columns: 1fr;
  }

  .onboarding-refined .onboarding-profile-section + .onboarding-profile-section {
    margin-top: 0.75rem;
  }

  .onboarding-refined .form-example {
    font-size: 0.82rem;
  }

  .onboarding-loader__dialog {
    width: auto;
  }

  .onboarding-loader__logo {
    width: min(104px, 29vw);
  }
}

/* Keep creation actions aligned after the legacy directory breakpoints above. */
@media (min-width: 761px) {
  .jobs-page .jobs-directory-toolbar {
    grid-template-columns: minmax(14rem, 1fr) auto auto;
  }
  .jobs-page .jobs-sort { grid-column: 2 / 3; }
  .jobs-page .crm-directory-create { grid-column: 3 / 4; }
}

@media (max-width: 760px) {
  .jobs-page .jobs-directory-toolbar,
  .customers-page .customers-directory-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .jobs-page .jobs-directory-toolbar .ds-search-field,
  .customers-page .customers-directory-toolbar .ds-search-field,
  .jobs-page .jobs-directory-toolbar .ds-filter-tabs,
  .customers-page .customers-directory-toolbar .ds-filter-tabs {
    grid-column: 1 / -1;
  }
  .jobs-page .jobs-sort {
    grid-column: 1 / 2;
    grid-row: auto;
    margin-top: 0;
  }
  .jobs-page .crm-directory-create,
  .customers-page .crm-directory-create {
    grid-column: 2 / 3;
    grid-row: auto;
  }
}

@media (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body :where(
    input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
    select,
    textarea,
    [contenteditable='true']
  ) {
    font-size: 16px !important;
  }
}

/* Customer directory and focused customer record */

.customer-sort-row,
.customer-section__header {
  display: flex;
  align-items: center;
}


.customer-sort-row {
  min-height: 52px;
  padding: 0 0.9rem;
  gap: 0.3rem;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface-solid);
  color: var(--ds-text-soft);
}
.customer-sort-row label { font-size: 0.78rem; font-weight: 600; }
.customer-sort-row select {
  min-width: 0;
  padding: 0.2rem 1.4rem 0.2rem 0;
  flex: 1;
  border: 0;
  outline: 0;
  background-color: transparent;
  color: var(--ds-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}
.customer-sort-row > svg { margin-left: auto; color: var(--ds-muted); }

.customer-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.4rem;
}
.customer-section { min-width: 0; }
.customer-section__header { min-height: 34px; padding: 0 0.55rem; justify-content: space-between; }
.customer-section__header h2 { margin: 0; color: var(--ds-text-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.customer-section__header h2 span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  place-items: center;
  border-radius: 999px;
  background: var(--ds-lime);
  color: #172000;
  font-size: 0.68rem;
}
.customer-section__header button {
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  color: var(--ds-lime);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 750;
  cursor: pointer;
}
.customer-section__list {
  overflow: hidden;
}
.customer-card {
  display: grid;
  padding: 0.95rem 0.8rem 0.95rem 1rem;
  grid-template-columns: 48px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ds-border);
}
.customer-card:last-child { border-bottom: 0; }
.customer-card__body small { margin-top: 0.08rem; }
.customer-card__body small i { padding: 0 0.18rem; font-style: normal; }
.customer-card__chevron { color: var(--ds-muted-2); }
.customer-section__empty { margin: 0; padding: 1.1rem; color: var(--ds-muted); font-size: 0.76rem; text-align: center; }
.customer-filter-empty { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; }
.customer-filter-empty strong,
.customer-filter-empty span { display: block; }
.customer-filter-empty span { margin-top: 0.35rem; color: var(--ds-muted); font-size: 0.82rem; }

.customer-record-shell {
  display: block;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(2.5rem, env(safe-area-inset-bottom));
  background: var(--ds-canvas);
}
.customer-record {
  width: min(100%, var(--app-detail-max));
}
.customer-record__menu { position: relative; }
.customer-record__menu > summary { list-style: none; }
.customer-record__menu > summary::-webkit-details-marker { display: none; }
.customer-record__menu > div {
  position: absolute;
  z-index: 5;
  top: 46px;
  right: 0;
  display: grid;
  width: 170px;
  padding: 0.35rem;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-lg);
}
.customer-record__menu :is(button, a) { display: flex; padding: 0.7rem; align-items: center; gap: 0.55rem; border: 0; border-radius: 8px; background: transparent; color: var(--ds-text); font: inherit; font-size: 0.8rem; text-align: left; text-decoration: none; cursor: pointer; }
.customer-record__menu :is(button, a) svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.customer-record__menu :is(button, a):hover { background: var(--ds-surface-3); }
.customer-record__hero { display: flex; min-height: 132px; padding: 1rem 1.25rem; align-items: center; gap: 1.25rem; }
.customer-record__avatar { display: grid; width: 82px; height: 82px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #ffe1ea; color: #a6194b; font-size: 1.35rem; font-weight: 800; }
.customer-record__hero h1 { margin: 0 0 0.45rem; color: var(--ds-text); font-size: clamp(1.55rem, 4vw, 2rem); letter-spacing: -0.045em; }

.customer-contact-actions { display: grid; margin: 0 1rem 1.1rem; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.customer-contact-actions > :is(a, button, span) { display: grid; padding: 0; justify-items: center; gap: 0.4rem; border: 0; background: transparent; color: var(--ds-text-soft); text-decoration: none; font: inherit; cursor: pointer; }
.customer-contact-actions > .is-disabled { opacity: 0.42; cursor: default; }
.customer-contact-actions > :is(a, button, span) > span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid var(--ds-border); border-radius: 14px; background: var(--ds-surface-solid); color: #82aa00; }
.customer-contact-actions svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; }
.customer-contact-actions strong { font-size: 0.74rem; font-weight: 650; }

.customer-record-card {
  margin: 0 0 0.8rem;
}

.customer-finances { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.customer-finances > div { display: grid; min-height: 118px; padding: 1.15rem; align-content: center; gap: 0.35rem; }
.customer-finances > div + div { border-left: 1px solid var(--ds-border); }
.customer-finances span,
.customer-finances small { color: var(--ds-muted); font-size: 0.76rem; }
.customer-finances strong { color: var(--ds-text); font-size: 1.35rem; letter-spacing: -0.03em; }
.customer-finances strong.is-due { color: #d03560; }
.customer-finances > a { position: absolute; right: 0.8rem; top: 50%; display: grid; width: 30px; height: 30px; transform: translateY(-50%); place-items: center; color: var(--ds-muted); }
.customer-finances > a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.customer-active-work__job,
.customer-history-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.customer-active-work__job { display: grid; padding: 0.65rem 1rem 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.7rem 1rem; }
.customer-active-work__job > span:first-child { display: grid; gap: 0.2rem; }
.customer-active-work__job strong { font-size: 1rem; }
.customer-active-work__job small { color: var(--ds-muted); font-size: 0.75rem; }
.customer-active-work__date { display: flex; grid-column: 1 / -1; align-items: center; gap: 0.5rem; color: var(--ds-text-soft); font-size: 0.76rem; }
.customer-active-work__date svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.customer-active-work__more { margin: 0; padding: 0 1rem 0.9rem; color: var(--ds-muted); font-size: 0.72rem; }

.customer-details dl { display: grid; margin: 0; padding: 0.45rem 1rem 0.9rem; gap: 0.75rem; }
.customer-details dl div { display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 0.65rem; }
.customer-details dt,
.customer-details dd { margin: 0; }
.customer-details dt svg { display: block; width: 20px; height: 20px; fill: none; stroke: var(--ds-muted); stroke-width: 1.8; }
.customer-details dd,
.customer-details dd a { overflow-wrap: anywhere; color: var(--ds-text-soft); font-size: 0.8rem; text-decoration: none; }
.customer-details footer { display: flex; padding: 0.7rem 1rem; justify-content: space-between; gap: 0.8rem; border-top: 1px solid var(--ds-border); color: var(--ds-muted); font-size: 0.66rem; }
.customer-record-notes p { margin: 0; padding: 0.5rem 1rem 1.1rem; color: var(--ds-text-soft); font-size: 0.8rem; line-height: 1.55; }
.customer-record-card__empty { display: flex; padding: 1rem; align-items: center; justify-content: space-between; color: var(--ds-muted); font-size: 0.78rem; }
.customer-record-card__empty button { border: 0; background: transparent; color: var(--ds-lime); font: inherit; font-weight: 750; cursor: pointer; }

.customer-job-history > div,
.customer-activity > div { border-top: 1px solid var(--ds-border); }
.customer-history-row { display: grid; min-height: 76px; padding: 0.8rem 1rem; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--ds-border); }
.customer-history-row:last-child { border-bottom: 0; }
.customer-history-row:hover { background: var(--ds-surface-solid-2); }
.customer-history-row > span { display: grid; min-width: 0; gap: 0.25rem; }
.customer-history-row > span:nth-child(2) { justify-items: end; }
.customer-history-row strong,
.customer-history-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-history-row strong { font-size: 0.82rem; }
.customer-history-row small { color: var(--ds-muted); font-size: 0.68rem; }
.customer-history-row > svg { width: 18px; height: 18px; fill: none; stroke: var(--ds-muted-2); stroke-width: 2; }

.customer-activity article { position: relative; display: grid; min-height: 68px; padding: 0.8rem 1rem; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; border-bottom: 1px solid var(--ds-border); }
.customer-activity article:last-child { border-bottom: 0; }
.customer-activity article > span { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-lime); }
.customer-activity article div { display: grid; min-width: 0; gap: 0.2rem; }
.customer-activity article strong { overflow: hidden; color: var(--ds-text); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-activity article small,
.customer-activity article time { color: var(--ds-muted); font-size: 0.65rem; }

[data-theme='light'] .customer-record-shell { background: #f7f8f5; }

@media (max-width: 900px) {
  .customer-sections { grid-template-columns: 1fr; gap: 1.15rem; }
}

@media (max-width: 560px) {
  .customer-card { min-height: 94px; padding: 0.85rem 0.65rem 0.85rem 0.8rem; grid-template-columns: 45px minmax(0, 1fr) auto 15px; gap: 0.58rem; }
  .customer-card__status { max-width: 90px; text-align: center; }
  .customer-card__chevron { width: 15px; }
  .customer-record-shell { padding: max(0.35rem, env(safe-area-inset-top)) 0.75rem max(1.5rem, env(safe-area-inset-bottom)); }
  .customer-record { padding-top: 0; }
  .customer-record__hero { min-height: 122px; padding-inline: 1rem; }
  .customer-record__avatar { width: 72px; height: 72px; font-size: 1.2rem; }
  .customer-contact-actions { margin-inline: 0.4rem; gap: 0.45rem; }
  .customer-contact-actions > :is(a, button, span) > span { width: 52px; height: 52px; }
  .customer-finances > div { min-height: 110px; padding: 1rem; }
  .customer-finances strong { font-size: 1.2rem; }
  .customer-details footer { flex-direction: column; gap: 0.25rem; }
  .customer-activity article { grid-template-columns: 10px minmax(0, 1fr); }
  .customer-activity article time { grid-column: 2; }
}

/* Focused Today dashboard */

.today-dashboard__header { margin-bottom: 1.2rem; }

.today-hero {
  display: grid;
  margin-bottom: 0.9rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}

.today-hero span,
.today-section-head h2 {
  color: var(--ds-lime);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.today-hero h2 {
  margin: 0.22rem 0 0.25rem;
  color: var(--ds-text);
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.today-hero p {
  margin: 0;
  color: var(--ds-text-soft);
  font-size: 0.92rem;
}

.today-date-pill {
  display: inline-flex;
  min-height: 46px;
  padding: 0.5rem 0.8rem;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--ds-lime-border);
  border-radius: 12px;
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
  font-size: 0.8rem;
  font-weight: 850;
  white-space: nowrap;
}

.today-date-pill svg,
.today-metric svg,
.today-action-card svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.today-metrics {
  display: grid;
  margin-bottom: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}

.today-metric {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 86px;
  padding: 1rem 0.85rem;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 0.7rem;
  border-right: 1px solid var(--ds-border);
  color: inherit;
  text-decoration: none;
}

.today-metric:last-child { border-right: 0; }
.today-metric > svg { width: 18px; height: 18px; color: var(--ds-muted); }

.today-metric__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #fff2e6;
  color: #cc6f1b;
}

.today-metric--unread .today-metric__icon { background: #edf4ff; color: #2575c9; }
.today-metric--money .today-metric__icon { background: #f1f7e4; color: var(--ds-lime); }

.today-metric small {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--ds-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.today-metric strong {
  display: block;
  color: var(--ds-text);
  font-size: 1.34rem;
  line-height: 1;
  white-space: nowrap;
}

.today-metric--attention strong { color: #d86f14; }
.today-metric--unread strong { color: #2272c4; }
.today-metric--money strong { color: var(--ds-lime); }

.today-panel {
  margin-top: 0.9rem;
}

.today-section-head h2 {
  margin: 0;
  color: var(--ds-text-soft);
}

.today-section-head :is(span, a) {
  color: var(--ds-lime);
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
}

.today-action-list { display: grid; }

.today-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.today-action-card__main {
  display: grid;
  min-width: 0;
  min-height: 98px;
  padding: 0.7rem 0.85rem;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.today-action-pill {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  font-style: normal;
}

.today-action-card__body > strong {
  margin-top: 0.16rem;
}

.today-action-card__body > small,
.today-action-card__body > em {
  font-style: normal;
}

.today-action-card__main time {
  align-self: start;
  color: var(--ds-muted);
  font-size: 0.72rem;
  font-weight: 740;
  white-space: nowrap;
}

.today-action-card__cta {
  display: inline-flex;
  min-width: 112px;
  margin: auto 0.85rem auto 0;
  min-height: 40px;
  padding: 0.45rem 0.6rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 820;
  text-decoration: none;
  white-space: nowrap;
}

.today-action-card__cta svg { width: 16px; height: 16px; }

.today-schedule { padding-bottom: 0.9rem; }
.today-schedule-timeline { display: grid; padding: 0 1rem 0.45rem; }

.today-schedule-item {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 52px 15px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.today-schedule-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58px;
  width: 1px;
  background: var(--ds-border);
}

.today-schedule-item:first-child::before { top: 50%; }
.today-schedule-item:last-child::before { bottom: 50%; }

.today-schedule-item > time {
  padding-top: 1.08rem;
  color: var(--ds-text-soft);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.today-schedule-item__dot {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  margin: 1.26rem auto 0;
  border-radius: 50%;
  background: var(--app-tone-fg, var(--ds-lime));
  box-shadow: 0 0 0 3px var(--ds-surface-solid);
}

.today-schedule-item__card {
  display: flex;
  min-height: 74px;
  margin-bottom: 0.48rem;
  padding: 0.72rem 0.8rem 0.72rem 0.95rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--app-tone-fg, var(--ds-lime));
  border-radius: 12px;
  background: var(--ds-surface-solid);
  box-shadow: inset 0 1px 0 var(--ds-highlight);
}

.today-schedule-item__card span {
  display: grid;
  min-width: 0;
  gap: 0.16rem;
}

.today-schedule-item__card strong {
  color: var(--ds-text);
  font-size: 0.82rem;
}

.today-schedule-item__card small {
  color: var(--ds-text-soft);
  font-size: 0.68rem;
  line-height: 1.35;
}

.today-schedule-item__card small span {
  display: inline-flex;
  margin-top: 0.16rem;
  align-items: center;
  gap: 0.22rem;
  color: var(--ds-muted);
}

.today-schedule-item__card small svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.today-schedule-item__card em {
  display: inline-flex;
  min-height: 24px;
  padding: 0.25rem 0.5rem;
  align-items: center;
  border-radius: 8px;
  background: var(--app-tone-bg, #edf4df);
  color: var(--app-tone-fg, #638200);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.today-add-work {
  display: flex;
  width: calc(100% - 2rem);
  min-height: 48px;
  margin: 0.3rem auto 0;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: transparent;
  color: var(--ds-lime);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  cursor: pointer;
}

.today-add-work span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-lime-soft);
  font-size: 1.35rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .today-dashboard__header { margin-bottom: 1rem; }
  .today-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .today-hero h2 { font-size: 1.78rem; }
  .today-hero p { font-size: 0.76rem; }
  .today-date-pill { min-height: 36px; padding-inline: 0.55rem; font-size: 0.66rem; }
  .today-metric { min-height: 70px; padding: 0.65rem 0.45rem; grid-template-columns: 36px minmax(0, 1fr) 12px; gap: 0.36rem; }
  .today-metric__icon { width: 34px; height: 34px; }
  .today-metric small { font-size: clamp(0.54rem, 2.35vw, 0.62rem); }
  .today-metric strong { font-size: clamp(0.96rem, 4.1vw, 1.18rem); }
  .today-metric > svg { width: 14px; height: 14px; }
  .today-action-card { position: relative; grid-template-columns: 1fr; }
  .today-action-card__main { min-height: 94px; padding: 0.65rem 6.85rem 0.65rem 0.65rem; grid-template-columns: 42px minmax(0, 1fr); gap: 0.5rem; }
  .today-action-card__main time { position: absolute; top: 1.25rem; right: 0.8rem; }
  .today-action-card__cta { position: absolute; right: 0.65rem; bottom: 0.65rem; min-width: 100px; min-height: 38px; margin: 0; }
  .today-schedule-timeline { padding-inline: 0.7rem; }
}

@media (max-width: 420px) {
  .today-hero { align-items: start; }
  .today-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today-metric { padding-right: 0.85rem; grid-template-columns: 34px minmax(0, 1fr); justify-items: start; text-align: left; }
  .today-metric > svg { position: absolute; right: 0.35rem; }
  .today-action-card__main { grid-template-columns: 38px minmax(0, 1fr); }
  .today-action-card__cta { min-width: 94px; padding-inline: 0.5rem; }
  .today-schedule-item { grid-template-columns: 46px 12px minmax(0, 1fr); gap: 0.45rem; }
  .today-schedule-item::before { left: 51px; }
}

/* Dedicated quote and invoice creation workspace. */
.document-create-page {
  width: min(100%, 860px);
  padding-bottom: 2rem;
}

.document-create-header { align-items: center; }
.document-create-header__identity { min-width: 0; color: inherit; text-decoration: none; }
.document-create-header__actions { display: flex; align-items: center; gap: 0.65rem; }
.document-create-save {
  min-height: var(--app-control-height);
  padding-inline: 1.15rem;
  border: 1px solid var(--ds-border);
  background: var(--ds-panel);
  color: var(--ds-text-soft);
}
.document-create-more { position: relative; }
.document-create-more > summary { list-style: none; }
.document-create-more > summary::-webkit-details-marker { display: none; }
.document-create-more > nav {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  width: 190px;
  padding: 0.4rem;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-panel);
  box-shadow: var(--ds-shadow-lg);
}
.document-create-more > nav a { padding: 0.7rem 0.75rem; border-radius: 8px; color: var(--ds-text); font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.document-create-more > nav a:hover { background: var(--ds-canvas-soft); }

.document-create-type-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-panel);
  box-shadow: var(--ds-shadow-sm);
}
.document-create-type-tabs a {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--ds-text);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.document-create-type-tabs a:active { transform: scale(0.985); }
.document-create-type-tabs svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.document-create-type-tabs a.is-active { border-color: color-mix(in srgb, var(--ds-lime) 42%, var(--ds-border)); background: var(--ds-lime-soft); color: var(--ds-lime); }

.document-create-error { margin-top: 0.85rem; }
.document-create-form { display: grid; gap: 0.75rem; margin-top: 0.8rem; }
.document-create-section > header,
.document-create-line-items > header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; padding: 0 0.3rem; }
.document-create-section > header h2,
.document-create-line-items > header h2 { margin: 0; color: var(--ds-text); font-size: 1rem; letter-spacing: -0.025em; }
.document-create-edit,
.document-create-add-item { display: inline-flex; align-items: center; gap: 0.25rem; border: 0; background: transparent; color: var(--ds-lime); font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.document-create-add-item { flex: 0 0 auto; white-space: nowrap; }
.document-create-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.document-create-customer-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
.document-create-avatar { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: var(--ds-lime-soft); color: var(--ds-lime); font-size: 1.25rem; font-weight: 850; }
.document-create-customer-card > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.28rem 0.65rem; }
.document-create-customer-card label { grid-column: 1 / -1; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 0.4rem; color: var(--ds-muted); }
.document-create-customer-card label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.document-create-customer-card input,
.document-create-job-card input,
.document-create-job-card textarea,
.document-create-item input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ds-text); font: inherit; }
.document-create-primary-field { grid-column: 1 !important; grid-template-columns: 1fr !important; }
.document-create-primary-field input { font-size: 0.98rem; font-weight: 850; letter-spacing: -0.02em; }
.document-create-new-pill { grid-column: 2; grid-row: 1; padding: 0.25rem 0.45rem; border-radius: 7px; background: var(--ds-lime-soft); color: var(--ds-lime); font-size: 0.6rem; font-weight: 800; white-space: nowrap; }
.document-create-customer-card label:not(.document-create-primary-field) input { overflow: hidden; color: var(--ds-text-soft); font-size: 0.73rem; text-overflow: ellipsis; white-space: nowrap; }

.document-create-picker { display: grid; gap: 0.45rem; margin-bottom: 0.5rem; padding: 0.85rem; }
.document-create-picker[hidden] { display: none; }
.document-create-picker label { display: grid; gap: 0.35rem; color: var(--ds-text-soft); font-size: 0.66rem; font-weight: 750; }
.document-create-picker small { grid-column: 1 / -1; color: var(--ds-muted); font-size: 0.63rem; }

.document-create-job-card { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(185px, 0.7fr); gap: 0.9rem; align-items: center; padding: 1rem; }
.document-create-job-icon,
.document-create-item-icon { display: grid; place-items: center; border-radius: 13px; background: var(--ds-lime-soft); color: var(--ds-lime); }
.document-create-job-icon { width: 58px; height: 58px; }
.document-create-job-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.document-create-job-copy { display: grid; gap: 0.28rem; }
.document-create-job-copy label { display: block; }
.document-create-job-card textarea { min-height: 44px; overflow: hidden; resize: none; color: var(--ds-text-soft); font-size: 0.72rem; line-height: 1.45; }
.document-create-job-card dl { display: grid; gap: 0.48rem; margin: 0; padding-left: 1rem; border-left: 1px solid var(--ds-border); }
.document-create-job-card dl div { display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: start; gap: 0.45rem; }
.document-create-job-card dl svg { width: 17px; height: 17px; fill: none; stroke: var(--ds-text-soft); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.document-create-job-card dd { margin: 0; overflow: hidden; color: var(--ds-text-soft); font-size: 0.68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.document-create-page .document-create-line-items { padding: 0.35rem 0.75rem 0.75rem; }
.document-create-item-list { border-top: 1px solid var(--ds-border); }
.document-create-item { display: grid; grid-template-columns: 18px 42px minmax(0, 1fr) 70px 105px 40px; min-height: 68px; align-items: center; gap: 0.55rem; border-bottom: 1px solid var(--ds-border); }
.document-create-grip { color: var(--ds-muted); font-size: 1.15rem; cursor: grab; }
.document-create-item-icon { width: 40px; height: 40px; }
.document-create-item-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.document-create-item-description input { overflow: hidden; font-size: 0.78rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.document-create-item-quantity,
.document-create-item-price { display: flex; align-items: center; gap: 0.25rem; color: var(--ds-muted); font-size: 0.65rem; }
.document-create-item-quantity input { text-align: center; }
.document-create-item-price { color: var(--ds-text); font-size: 0.78rem; font-weight: 800; }
.document-create-item-price input { appearance: textfield; font-weight: 800; text-align: right; }
.document-create-item-price input::-webkit-inner-spin-button,
.document-create-item-price input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.document-create-item-delete { width: 36px; height: 36px; }
.document-create-item-delete svg { width: 18px; height: 18px; }
.document-create-adjustments { margin-top: 0.65rem; border: 1px solid color-mix(in srgb, var(--ds-lime) 35%, var(--ds-border)); border-radius: 10px; background: color-mix(in srgb, var(--ds-lime-soft) 70%, transparent); }
.document-create-adjustments > summary { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; min-height: 44px; align-items: center; gap: 0.45rem; padding: 0 0.75rem; color: var(--ds-lime); font-size: 0.7rem; font-weight: 800; cursor: pointer; list-style: none; }
.document-create-adjustments > summary::-webkit-details-marker { display: none; }
.document-create-adjustments > summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.document-create-adjustments[open] > summary svg:last-child { transform: rotate(90deg); }
.document-create-adjustments > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 0.1rem 0.75rem 0.75rem; }
.document-create-adjustments label { display: grid; gap: 0.3rem; color: var(--ds-text-soft); font-size: 0.63rem; font-weight: 750; }
.document-create-notes { grid-column: 1 / -1; }

.document-create-page .document-create-totals { padding: 0.85rem 1rem; }
.document-create-totals dl { display: grid; gap: 0.42rem; margin: 0; }
.document-create-totals dl > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ds-text-soft); font-size: 0.74rem; }
.document-create-totals dt,
.document-create-totals dd { margin: 0; }
.document-create-totals dl > div:last-child { margin-top: 0.35rem; padding-top: 0.7rem; border-top: 1px solid var(--ds-border); color: var(--ds-text); font-size: 1.05rem; font-weight: 850; }
.document-create-totals dl > div:last-child dd { color: var(--ds-lime); font-size: 1.35rem; }

.document-create-actions { position: static; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 0.7rem; margin-top: 0.15rem; padding: 0.65rem; border: 1px solid var(--ds-border); border-radius: 15px; background: var(--ds-panel); box-shadow: var(--ds-shadow-sm); }
.document-create-actions .btn { min-height: 48px; }
.document-create-page button[type="submit"][aria-disabled="true"] { opacity: 0.65; pointer-events: none; }
.document-create-action-secondary { border: 1px solid var(--ds-border); background: var(--ds-panel); color: var(--ds-text); }
.document-create-action-primary { display: flex; justify-content: space-between; padding-inline: 1.5rem; }
.document-create-action-primary > span:last-child { font-size: 1.35rem; font-weight: 400; }
.document-create-page .document-create-empty { display: grid; justify-items: center; gap: 0.65rem; margin-top: 1rem; padding: 2.5rem 1.5rem; text-align: center; }
.document-create-empty p { max-width: 30rem; margin: 0; color: var(--ds-muted); font-size: 0.76rem; line-height: 1.5; }

@media (max-width: 760px) {
  body:has(.document-create-page) .ws-bottom-nav { display: none; }
  body:has(.document-create-page) .ws-main { padding-bottom: 0; }
  .document-create-page { padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .document-create-header { padding-top: max(0.3rem, env(safe-area-inset-top)); }
  .document-create-header__actions { gap: 0.35rem; }
  .document-create-save { padding-inline: 0.75rem; }
  .document-create-type-tabs a { min-height: 54px; font-size: 0.78rem; }
  .document-create-customer-card { grid-template-columns: 48px minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem; }
  .document-create-avatar { width: 46px; height: 46px; font-size: 1rem; }
  .document-create-job-card { grid-template-columns: 48px minmax(0, 1fr); gap: 0.7rem; padding: 0.85rem; }
  .document-create-job-icon { width: 46px; height: 46px; }
  .document-create-job-card dl { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.6rem 0 0; border-top: 1px solid var(--ds-border); border-left: 0; }
  .document-create-job-card dl div:last-child { grid-column: 1 / -1; }
  .document-create-item { grid-template-columns: 14px 36px minmax(0, 1fr) 84px 40px; gap: 0.4rem; padding-block: 0.45rem; }
  .document-create-item-icon { width: 34px; height: 34px; }
  .document-create-item-quantity { grid-column: 3; justify-self: start; width: 75px; }
  .document-create-item-price { grid-column: 4; grid-row: 1 / span 2; }
  .document-create-item-delete { grid-column: 5; grid-row: 1 / span 2; }
  .document-create-item-description { align-self: end; }
  .document-create-adjustments > div { grid-template-columns: 1fr; }
  .document-create-notes { grid-column: 1; }
}

@media (max-width: 900px) {
  body:has(.whatsapp-connect-page) .ws-bottom-nav { display: none; }
  body:has(.whatsapp-connect-page) .ws-main { padding-bottom: 0; }
}

@media (max-width: 420px) {
  .document-create-header__identity img { width: 38px; height: 38px; }
  .document-create-header__identity h1 { font-size: 1.05rem; }
  .document-create-save { font-size: 0.65rem; }
  .document-create-type-tabs svg { width: 21px; height: 21px; }
  .document-create-customer-card > div { gap-column: 0.35rem; }
  .document-create-new-pill { font-size: 0.52rem; }
  .document-create-page .document-create-line-items { padding-inline: 0.55rem; }
  .document-create-item { grid-template-columns: 10px 32px minmax(0, 1fr) 72px 40px; }
  .document-create-item-icon { width: 30px; height: 30px; }
  .document-create-item-price { font-size: 0.68rem; }
  .document-create-item-delete { width: 30px; height: 30px; }
}

@media (max-width: 360px) {
  .document-create-header .document-create-save { display: none; }
}

/* Compact jobs directory and focused job record */

.job-date-controls > button,
.job-directory-filter > summary {
  min-width: 0;
  min-height: 40px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface-solid);
  color: var(--ds-text-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}
.job-status-tabs button span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  place-items: center;
  border-radius: 999px;
  background: var(--ds-surface-3);
  color: var(--ds-muted);
  font-size: 0.68rem;
}
.job-date-controls > button.is-active {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
}
.job-status-tabs button.is-active span { background: color-mix(in srgb, var(--ds-lime) 18%, transparent); color: var(--ds-lime); }

.job-date-controls { position: relative; display: grid; grid-template-columns: 42px repeat(3, minmax(0, 1fr)) 42px; gap: 0.4rem; }
.job-date-controls > button { min-height: 42px; }
.job-date-controls__icon,
.job-directory-filter > summary { display: grid; padding: 0; place-items: center; }
.job-date-controls svg,
.job-directory-filter svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.job-directory-filter { position: relative; }
.job-directory-filter > summary { width: 42px; height: 42px; list-style: none; }
.job-directory-filter > summary::-webkit-details-marker { display: none; }
.job-directory-filter > div {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  width: 180px;
  padding: 0.45rem;
  gap: 0.2rem;
  border: 1px solid var(--ds-border);
  border-radius: 13px;
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-lg);
}
.job-directory-filter > div span { padding: 0.45rem 0.55rem 0.25rem; color: var(--ds-muted); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }
.job-directory-filter > div a { padding: 0.65rem; border-radius: 9px; color: var(--ds-text-soft); font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.job-directory-filter > div a:hover,
.job-directory-filter > div a.is-active { background: var(--ds-lime-soft); color: var(--ds-lime); }

.job-directory__sections { display: grid; gap: 0.85rem; }
.job-directory-section { min-width: 0; }
.job-directory-section > summary {
  display: flex;
  min-height: 38px;
  padding: 0 0.35rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ds-text-soft);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  list-style: none;
  text-transform: uppercase;
}
.job-directory-section > summary::-webkit-details-marker { display: none; }
.job-directory-section > summary b { margin-left: 0.25rem; color: var(--ds-text); font-size: 0.72rem; }
.job-directory-section > summary svg { width: 18px; height: 18px; fill: none; stroke: var(--ds-muted); stroke-width: 2; transition: transform 150ms ease; }
.job-directory-section:not([open]) > summary svg { transform: rotate(180deg); }
.job-directory-section__list { display: grid; gap: 0.45rem; }

.job-directory-card__link {
  display: grid;
  min-height: 82px;
  padding: 0.65rem 3.3rem 0.65rem 0.65rem;
  grid-template-columns: 42px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}
.job-directory-card__time { color: var(--ds-text-soft); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.job-directory-card__body > small i { padding: 0 0.28rem; font-style: normal; }
.job-directory-card__body > span { display: flex; margin-top: 0.08rem; align-items: center; gap: 0.28rem; }
.job-directory-card__body > span svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.job-directory-card__more {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0.55rem;
  display: grid;
  width: 36px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ds-text-soft);
  cursor: pointer;
}
.job-directory-card__more:hover { background: var(--ds-surface-3); color: var(--ds-text); }
.job-directory-card__more svg { width: 21px; height: 21px; fill: currentColor; }
.job-directory-empty { display: grid; min-height: 150px; padding: 2rem; place-items: center; align-content: center; gap: 0.75rem; color: var(--ds-muted); text-align: center; }
.job-directory-empty strong { color: var(--ds-text); }

.job-actions-sheet { position: fixed; z-index: var(--ds-layer-modal); inset: 0; display: grid; align-items: end; overscroll-behavior: contain; }
.job-actions-sheet[hidden] { display: none; }
.job-actions-sheet__backdrop { position: absolute; inset: 0; border: 0; background: rgba(3, 5, 7, 0.58); backdrop-filter: blur(3px); }
.job-actions-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  max-height: calc(100dvh - 1rem);
  margin: 0 auto;
  padding: 0 0 max(0.5rem, env(safe-area-inset-bottom));
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 20px 20px 0 0;
  outline: 0;
  background: var(--ds-surface-solid);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.24);
}
.job-actions-sheet__panel > header { position: relative; display: flex; min-height: 56px; padding: 0 1rem; flex: 0 0 auto; align-items: center; justify-content: center; border-bottom: 1px solid var(--ds-border); }
.job-actions-sheet__panel > header h2 { margin: 0; color: var(--ds-text); font-size: 0.95rem; }
.job-actions-sheet__panel > header button { position: absolute; right: 0.75rem; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--ds-surface-3); color: var(--ds-muted); font: inherit; font-size: 1.35rem; cursor: pointer; }
.job-actions-sheet nav { display: grid; flex: 1 1 auto; min-height: 0; padding: 0 1rem max(1rem, env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.job-actions-sheet nav > :is(a, button) { display: grid; min-height: 68px; padding: 0.55rem 0; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 0.75rem; border: 0; border-bottom: 1px solid var(--ds-border); background: transparent; color: var(--ds-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.job-actions-sheet nav > :is(a, button):last-child { border-bottom: 0; }
.job-actions-sheet nav > :is(a, button) > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--ds-surface-3); color: var(--ds-text-soft); }
.job-actions-sheet nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.job-actions-sheet nav strong { display: grid; gap: 0.18rem; font-size: 0.82rem; }
.job-actions-sheet nav small { color: var(--ds-muted); font-size: 0.7rem; font-weight: 500; }
.job-actions-sheet nav .is-danger { color: #d44852; }
.job-actions-sheet nav .is-danger > span { background: rgba(212, 72, 82, 0.09); color: #d44852; }
.has-job-actions-open { overflow: hidden; }

.job-record-shell { display: block; min-height: 100dvh; padding: max(0.75rem, env(safe-area-inset-top)) clamp(1rem, 5vw, 2.5rem) max(2.5rem, env(safe-area-inset-bottom)); background: var(--ds-canvas); }
.job-record__notice { margin: 0.4rem 0 0.75rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--ds-lime-soft); color: var(--ds-lime); font-size: 0.76rem; font-weight: 700; }
.job-record__notice--error { background: rgba(212, 72, 82, 0.1); color: #d44852; }
.job-record__hero { display: grid; min-height: 214px; padding: 1.75rem 0 1.8rem; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 1.75rem; }
.job-record__icon { width: 68px; height: 68px; border-radius: 50%; background: var(--app-tone-bg, #edf4df); color: var(--app-tone-fg, #739600); }
.job-record__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.job-record__hero > div { display: grid; min-width: 0; justify-items: start; gap: 0.48rem; }
.job-record__pill { max-width: 100%; }
.job-record__hero h2 { margin: 0.22rem 0 0; color: var(--ds-text); font-size: 1.72rem; line-height: 1.12; letter-spacing: 0; }
.job-record__hero strong { color: var(--ds-text); font-size: 0.96rem; }
.job-record__hero p { display: flex; min-width: 0; margin: 0; align-items: center; gap: 0.4rem; color: var(--ds-muted); font-size: 0.84rem; line-height: 1.35; }
.job-record__hero p svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.job-record__hero p span { min-width: 0; overflow-wrap: anywhere; }
.job-record .job-record-card { margin-bottom: 0.9rem; padding: 1.15rem 1.2rem; }
.job-record-request > p { margin: 0.75rem 0 0.62rem; color: var(--ds-text-soft); font-size: 0.94rem; line-height: 1.45; }
.job-record-request > small { color: var(--ds-muted); font-size: 0.76rem; }
.job-record-request__actions { display: grid; margin-top: 1.1rem; gap: 0.55rem; }
.job-record__primary,
.job-record__secondary { display: flex; min-height: 52px; padding: 0.65rem 1rem; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: 12px; font: inherit; font-size: 0.88rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.job-record__primary { background: linear-gradient(135deg, #89b500, #72a800); color: #fff; box-shadow: 0 7px 16px rgba(111, 151, 0, 0.2); }
.job-record__secondary { border: 1px solid var(--ds-border); background: transparent; color: var(--ds-text); }
.job-record__secondary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.app-danger-zone { display: grid; gap: 0.9rem; border-color: rgba(212, 72, 82, 0.22); background: rgba(212, 72, 82, 0.05); }
.app-panel.app-delete-section { margin-top: 0.35rem; padding: 1.15rem 1.2rem; }
.app-delete-section .btn--danger { width: 100%; }
.app-danger-zone h2 { margin: 0; color: #d44852; font-size: 0.9rem; }
.app-danger-zone p { margin: 0.35rem 0 0; color: var(--ds-text-soft); font-size: 0.8rem; line-height: 1.4; }
.app-danger-zone form { margin: 0; }
.btn--danger { display: inline-flex; min-height: 44px; padding: 0.65rem 0.95rem; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid rgba(212, 72, 82, 0.24); border-radius: 12px; background: #d44852; color: #fff; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.btn--danger:hover { background: #bf333f; }
.btn--danger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.job-record-overview dl { display: grid; margin: 1rem 0 0; gap: 0.82rem; }
.job-record-overview dl div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1rem; }
.job-record-overview dt,
.job-record-overview dd { min-width: 0; margin: 0; font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; }
.job-record-overview dt { color: var(--ds-muted); }
.job-record-overview dd { color: var(--ds-text-soft); text-align: right; }
.job-record-overview dd.is-accent { color: var(--ds-lime); font-weight: 750; }
.job-record .job-record-insights { position: relative; padding: 1.15rem 1.25rem; border-color: #dceab8; background: linear-gradient(135deg, #f1f9df 0%, #fbfff0 100%); box-shadow: 0 12px 24px rgba(91, 122, 0, 0.08); }
.job-record-insights header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.job-record-insights header > div { display: flex; min-width: 0; align-items: center; gap: 0.65rem; }
.job-record-insights h2 { font-size: 0.9rem; }
.job-record-insights__spark { display: grid; width: 24px; height: 24px; place-items: center; color: var(--ds-lime); }
.job-record-insights__spark svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 0.7; }
.job-record-insights__badge { display: inline-flex; min-width: 32px; height: 32px; padding-inline: 0.5rem; align-items: center; justify-content: center; border-radius: 9px; background: #edf8c9; color: var(--ds-lime); font-size: 0.76rem; font-weight: 850; }
.job-record-insights__list { display: grid; margin-top: 1.05rem; }
.job-record-insight { display: grid; min-width: 0; padding: 0.65rem 0; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 0.75rem; border-top: 1px solid rgba(113, 145, 22, 0.12); }
.job-record-insight:first-child { padding-top: 0; border-top: 0; }
.job-record-insight:last-child { padding-bottom: 0; }
.job-record-insight__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: rgba(135, 185, 0, 0.12); color: var(--ds-lime); }
.job-record-insight__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.job-record-insight div { display: grid; min-width: 0; gap: 0.18rem; }
.job-record-insight strong { color: var(--ds-text); font-size: 0.82rem; line-height: 1.25; }
.job-record-insight p { margin: 0; color: var(--ds-text-soft); font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; }
.job-record-customer { display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.job-record-customer h2 { grid-column: 1 / -1; margin-bottom: 0.35rem; }
.job-record-customer > span:nth-child(3) { display: grid; gap: 0.18rem; }
.job-record-customer > svg { width: 20px; height: 20px; fill: none; stroke: var(--ds-muted); stroke-width: 2; }
.job-record .job-record-notes { padding: 0; overflow: hidden; }
.job-record-notes p { margin: 0; padding: 0.45rem 1.2rem 1rem; color: var(--ds-text-soft); font-size: 0.8rem; }

.job-edit-modal { position: fixed; z-index: var(--ds-layer-modal); inset: 0; display: none; align-items: end; }
.job-edit-modal:target, .job-edit-modal.is-open { display: grid; }
.job-edit-modal[hidden] { display: none; }
.job-edit-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 5, 7, 0.58); backdrop-filter: blur(3px); }
.job-edit-modal__sheet { position: relative; width: min(100%, 660px); max-height: 92dvh; margin: 0 auto; overflow: auto; border: 1px solid var(--ds-border); border-radius: 20px 20px 0 0; background: var(--ds-surface-solid); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.24); }
.job-edit-modal__sheet > header { display: flex; min-height: 64px; padding: 0.75rem 1rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ds-border); }
.job-edit-modal__sheet > header span { color: var(--ds-lime); font-size: var(--ds-text-xs); font-weight: 700; text-transform: uppercase; }
.job-edit-modal__sheet > header h2 { margin: 0.15rem 0 0; color: var(--ds-text); font-size: 1.1rem; }
.job-edit-modal__sheet > header > a { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--ds-surface-3); color: var(--ds-muted); font-size: 1.35rem; text-decoration: none; }
.job-edit-modal form { display: grid; padding: 1rem; gap: 0.85rem; }
.job-edit-modal form label { display: grid; gap: var(--ds-space-2); color: var(--ds-text-soft); font-size: var(--ds-text-sm); font-weight: 700; }
.job-edit-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.job-edit-modal footer { display: flex; padding-top: 0.35rem; justify-content: flex-end; gap: 0.65rem; }
body.has-job-edit-modal { overflow: hidden; }
.job-edit-modal :is(.auth-input, .btn), .crm-create-modal :is(.auth-input, .btn) { min-height: var(--ds-control-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
.job-edit-modal textarea.auth-input, .crm-create-modal textarea.auth-input { min-height: 80px; }
.job-edit-modal .auth-input, .crm-create-modal .auth-input { font-weight: 400; }
.crm-create-modal .auth-input[aria-invalid='true'] { border-color: var(--ds-danger); }
:is(.job-edit-modal, .crm-create-modal, .command-palette, .job-actions-sheet) :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 2px; }
.job-edit-modal__sheet { padding: 0; border-radius: var(--app-card-radius) var(--app-card-radius) 0 0; box-shadow: var(--ds-shadow-lg); }
.crm-create-modal__sheet { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); }
.customer-filter-empty[data-directory-first-use] .btn { justify-self: center; }
@media (max-width: 900px) {
  .job-edit-modal :is(.auth-input, .btn), .crm-create-modal :is(.auth-input, .btn) { min-height: var(--ds-touch-height); }
  .job-edit-modal .auth-input, .crm-create-modal .auth-input { font-size: 1rem; }
  .job-edit-modal__sheet > header > a { width: var(--ds-touch-height); height: var(--ds-touch-height); border-radius: var(--ds-radius-md); }
}

[data-theme='light'] .job-record-shell { background: #f7f8f5; }

@media (min-width: 700px) {
  .job-directory__sections { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .job-directory-section[data-job-section='needs_attention'],
  .job-directory-section[data-job-section='today'] { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .job-status-tabs button span { min-width: 19px; height: 19px; margin-left: 0.1rem; padding-inline: 0.25rem; font-size: 0.61rem; }
  .job-date-controls { grid-template-columns: 38px repeat(3, minmax(0, 1fr)) 38px; gap: 0.25rem; }
  .job-date-controls > button,
  .job-directory-filter > summary { min-height: 38px; height: 38px; font-size: clamp(0.56rem, 2.45vw, 0.65rem); }
  .job-directory-card__link { min-height: 78px; padding: 0.58rem 2.95rem 0.58rem 0.5rem; grid-template-columns: 30px 38px minmax(0, 1fr) auto; gap: 0.45rem; }
  .job-directory-card__time { font-size: 0.63rem; }
  .job-directory-card__icon { border-radius: 12px; }
  .job-directory-card__icon svg { width: 19px; height: 19px; }
  .job-directory-card__pill { max-width: 70px; }
  .job-directory-card__more { right: 0.2rem; width: 32px; }
  .job-record-shell { padding: max(0.35rem, env(safe-area-inset-top)) clamp(1rem, 5vw, 1.35rem) max(1.5rem, env(safe-area-inset-bottom)); }
  .job-record__topbar { min-height: 60px; }
  .job-record__hero { min-height: 192px; padding: 1.35rem 0 1.55rem; grid-template-columns: 70px minmax(0, 1fr); gap: 0.95rem; }
  .job-record__icon svg { width: 27px; height: 27px; }
  .job-record__hero h2 { font-size: 1.55rem; }
  .job-record__hero strong { font-size: 0.9rem; }
  .job-record__hero p { font-size: 0.8rem; }
  .job-actions-sheet__panel { border-radius: 18px 18px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .job-directory-section > summary svg { transition: none; }
}

/* Shared workspace architecture
 *
 * These primitives are the canonical component layer for Today, Jobs,
 * Customers and their focused records. Page selectors outside this contract
 * are reserved for composition that is genuinely unique to a screen.
 */

.app-page {
  width: min(100%, var(--app-page-max));
  margin-inline: auto;
  padding: 1.25rem var(--app-page-x) 2.5rem;
}

.app-page--record,
.app-page--detail {
  padding: 0.5rem 0 2rem;
}

.app-page--record { max-width: var(--app-detail-max); }
.app-page--detail { max-width: var(--app-job-detail-max); }
.app-page--split {
  display: grid;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.app-page__header,
.app-page__identity,
.app-page__actions,
.app-detail-header,
.app-section__header {
  display: flex;
  align-items: center;
}

.app-page__header {
  min-height: var(--app-header-height);
  margin-bottom: 0.9rem;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.8rem;
}

.app-page__identity { min-width: 0; gap: 0.65rem; }
.app-page__identity img { width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain; }
.app-page__identity h1,
.app-page__identity p { margin: 0; }
.app-page__identity h1 { color: var(--ds-text); font-size: var(--app-page-title-size); line-height: 1.12; letter-spacing: -0.035em; }
.app-page__identity p { margin-top: 0.15rem; overflow: hidden; color: var(--ds-muted); font-size: var(--app-page-subtitle-size); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.app-page__actions { flex: 0 0 auto; gap: 0.45rem; }
.app-page__controls { display: grid; margin-bottom: 0.95rem; gap: 0.6rem; }
.app-page__header--no-actions .app-page__actions { display: none; }
.app-icon-button {
  display: grid;
  width: var(--app-control-height);
  height: var(--app-control-height);
  padding: 0;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-solid);
  color: var(--ds-text-soft);
  cursor: pointer;
}
.app-icon-button:hover { border-color: var(--ds-border-high); color: var(--ds-text); }
.app-icon-button--accent { color: #91b600; }
.app-icon-button--ghost { border-color: transparent; background: transparent; color: var(--ds-text); }
.app-icon-button--ghost:hover { border-color: transparent; background: var(--ds-surface-solid); }
.app-icon-button svg,
.app-search > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.app-icon-button--accent svg { width: 20px; height: 20px; stroke-width: 2.4; }
.app-icon-button.job-record__more svg,
.customer-record__menu .app-icon-button svg,
.job-directory-card__more svg { fill: currentColor; stroke: none; }

.app-detail-header {
  min-height: var(--app-header-height);
  justify-content: space-between;
}
.app-detail-header--centered {
  display: grid;
  grid-template-columns: var(--app-control-height) minmax(0, 1fr) var(--app-control-height);
}
.app-detail-header > h1 { margin: 0; color: var(--ds-text); font-size: 1rem; text-align: center; }

.app-search {
  display: flex;
  min-height: var(--app-search-height);
  padding: 0 0.85rem;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-solid);
  color: var(--ds-muted);
  box-shadow: var(--ds-shadow-sm);
}
.app-search:focus-within { border-color: var(--ds-lime-border); box-shadow: 0 0 0 3px var(--ds-lime-soft); }
.app-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ds-text);
  font: inherit;
}
.app-search input::placeholder { color: var(--ds-muted-2); }
.app-search--compact { min-height: 44px; padding-inline: 0.75rem; border-radius: 12px; box-shadow: none; }

.app-filter-tabs {
  display: grid;
  gap: 0.35rem;
}
.app-filter-tabs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-filter-tabs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-filter-tabs--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-filter-tabs--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app-filter-tabs :is(a, button) {
  display: inline-flex;
  min-width: 0;
  min-height: var(--ds-control-height);
  padding: 0.45rem 0.55rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface-solid);
  color: var(--ds-text-soft);
  font: inherit;
  font-size: var(--app-control-font-size);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.app-filter-tabs :is(a, button):hover { color: var(--ds-text); }
.app-filter-tabs :is(a, button).is-active,
.app-filter-tabs :is(a, button)[aria-current='page'],
.app-filter-tabs :is(a, button)[aria-selected='true'] {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
}
.app-filter-tabs--compact :is(a, button) {
  min-height: var(--ds-control-height);
  padding-block: 0.35rem;
  font-size: var(--ds-text-sm);
}
.app-filter-tabs--scroll {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-filter-tabs--scroll::-webkit-scrollbar { display: none; }
.app-filter-tabs--scroll :is(a, button) { flex: 0 0 auto; }

.app-section { min-width: 0; }
.app-section__header {
  min-height: 40px;
  padding: 0.65rem 0.85rem 0.25rem;
  justify-content: space-between;
  gap: 1rem;
}
.app-section__header h2 { margin: 0; color: var(--ds-text); font-size: var(--app-section-title-size); letter-spacing: -0.015em; }
.app-section__header :is(a, button) {
  display: inline-flex;
  min-height: var(--ds-control-height);
  padding: 0 var(--ds-space-1);
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ds-lime);
  font: inherit;
  font-size: var(--ds-text-xs);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.app-panel {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--app-card-radius);
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}
.app-panel > h2 { margin: 0; color: var(--ds-text); font-size: var(--app-title-size); letter-spacing: -0.015em; }
.app-panel--flush {
  border-radius: 0;
  box-shadow: none;
}

.app-row-card {
  position: relative;
  min-width: 0;
  min-height: var(--app-card-min-h);
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--app-card-radius);
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}
.app-row-card__link {
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease;
}
.app-row-card__link:hover { background: var(--ds-surface-solid-2); }
.app-row-card__link:focus-visible { z-index: 1; outline: 2px solid var(--ds-lime); outline-offset: -3px; }
.app-row-card--grouped {
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  box-shadow: none;
}
.app-row-card--grouped:last-child { border-bottom: 0; }
.app-row-card__icon,
.app-row-card__avatar {
  display: grid;
  width: var(--app-icon-size);
  height: var(--app-icon-size);
  flex: 0 0 auto;
  place-items: center;
}
.app-row-card__icon {
  border-radius: 12px;
  background: var(--app-tone-bg, #edf4df);
  color: var(--app-tone-fg, #638200);
}
.app-row-card__avatar {
  border: 0;
  border-radius: 50%;
  background: var(--app-tone-bg, #e5eed2);
  color: var(--app-tone-fg, #557100);
  font-size: var(--ds-text-xs);
  font-weight: 700;
}
.app-row-card__avatar--compact {
  width: var(--app-icon-size-mobile);
  height: var(--app-icon-size-mobile);
  flex-basis: var(--app-icon-size-mobile);
}
.app-row-card__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.app-row-card__body { display: grid; min-width: 0; gap: 0.14rem; }
.app-row-card__title,
.app-row-card__meta,
.app-row-card__detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row-card__title { color: var(--ds-text); font-size: var(--app-title-size); font-weight: 700; letter-spacing: -0.018em; }
.app-row-card__meta { color: var(--ds-text-soft); font-size: var(--app-meta-size); }
.app-row-card__detail { color: var(--ds-muted); font-size: var(--app-detail-size); }

.app-status-pill {
  display: inline-flex;
  min-height: var(--app-pill-height);
  max-width: 104px;
  padding: 0.28rem 0.55rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  background: var(--app-tone-bg, #edf4df);
  color: var(--app-tone-fg, #638200);
  font-size: var(--app-pill-font-size);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
  white-space: normal;
}
.app-status-pill--outlined { border-color: var(--app-tone-border, rgba(114, 168, 0, 0.16)); border-radius: var(--ds-radius-pill); }
.app-status-pill--compact { min-height: var(--app-pill-height); padding: 0.24rem 0.45rem; font-size: var(--app-pill-font-size); }

.app-tone--reply,
.app-tone--attention,
.app-tone--awaiting,
.app-tone--customer-reply {
  --app-tone-bg: #fff0db;
  --app-tone-fg: var(--ds-warning);
  --app-tone-border: rgba(170, 105, 17, 0.18);
}
.app-tone--quote {
  --app-tone-bg: #edf4df;
  --app-tone-fg: var(--ds-lime);
  --app-tone-border: rgba(99, 130, 0, 0.18);
}
.app-tone--booking {
  --app-tone-bg: #f2e8ff;
  --app-tone-fg: #7444b9;
  --app-tone-border: rgba(116, 68, 185, 0.18);
}
.app-tone--booked,
.app-tone--active,
.app-tone--working,
.app-tone--customer-booked,
.app-tone--customer-active {
  --app-tone-bg: #edf4df;
  --app-tone-fg: var(--ds-lime);
  --app-tone-border: rgba(91, 121, 0, 0.18);
}
.app-tone--payment,
.app-tone--invoice,
.app-tone--customer-payment {
  --app-tone-bg: #ffe5ed;
  --app-tone-fg: #b32055;
  --app-tone-border: rgba(179, 32, 85, 0.18);
}
.app-tone--completed,
.app-tone--inactive,
.app-tone--lost,
.app-tone--customer-completed,
.app-tone--customer-idle {
  --app-tone-bg: var(--ds-surface-3);
  --app-tone-fg: var(--ds-muted);
  --app-tone-border: var(--ds-border);
}
.app-tone--external {
  --app-tone-bg: #e8f1ff;
  --app-tone-fg: var(--ds-info);
  --app-tone-border: rgba(49, 121, 219, 0.18);
}
.app-tone--ai,
.app-tone--insight {
  --app-tone-bg: #edf8c9;
  --app-tone-fg: var(--ds-lime);
  --app-tone-border: #dceab8;
}

/* Backend workflow classes participate in the same tone contract. */
.app-status-pill:is(.status-pill--attention, .status-pill--warn) {
  border-color: rgba(170, 105, 17, 0.18) !important;
  background: #fff0db !important;
  color: var(--ds-warning) !important;
  box-shadow: none !important;
}
.app-status-pill:is(.status-pill--success, .status-pill--lime) {
  border-color: rgba(91, 121, 0, 0.18) !important;
  background: #edf4df !important;
  color: var(--ds-lime) !important;
  box-shadow: none !important;
}
.app-status-pill:is(.status-pill--info, .status-pill--cyan) {
  border-color: rgba(49, 121, 219, 0.18) !important;
  background: #e8f1ff !important;
  color: var(--ds-info) !important;
  box-shadow: none !important;
}
.app-status-pill.status-pill--danger {
  border-color: rgba(179, 32, 85, 0.18) !important;
  background: #ffe5ed !important;
  color: #b32055 !important;
  box-shadow: none !important;
}
.app-status-pill.status-pill--neutral {
  border-color: var(--ds-border) !important;
  background: var(--ds-surface-3) !important;
  color: var(--ds-muted) !important;
  box-shadow: none !important;
}

.app-timeline { display: grid; }
.app-timeline__item { position: relative; min-width: 0; }
.app-pound-icon { font-size: 1.3rem; font-weight: 800; line-height: 1; }

/* Shared architecture aliases for settings, business profile, integrations and calendar. */
.settings-page,
.business-profile-page,
.integrations-page,
.calendar-page {
  gap: var(--app-section-gap);
}

/* The legacy directory selector remains for document settings compatibility;
 * current workspace pages defer their width to the canonical app shell. */
.settings-page.app-page,
.business-profile-page.app-page,
.integrations-page.app-page {
  width: min(100%, var(--app-page-max));
}

.settings-page .setup-alert,
.business-profile-page .setup-alert,
.integrations-page .setup-alert,
.calendar-page .setup-alert {
  margin-bottom: 0.75rem;
}

.settings-section-selector,
.business-profile-nav {
  margin-bottom: 0.85rem;
}

.settings-section-tabs.app-filter-tabs {
  border-bottom: 0;
}

.settings-section-tabs.app-filter-tabs a {
  min-width: 94px;
}

.settings-panel,
.business-profile-surface.app-panel,
.integrations-logo-panel.app-panel,
.calendar-page .app-panel {
  border-radius: var(--app-card-radius);
  background: var(--ds-surface-solid);
}

.settings-panel__head.app-section__header,
.business-profile-page .app-section__header,
.calendar-page .app-section__header {
  min-height: 58px;
  padding: var(--app-card-padding) 1rem;
}

.settings-panel__head.app-section__header p,
.business-profile-page .app-section__header p,
.calendar-page .app-section__header p {
  margin-top: 0.2rem;
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
  line-height: 1.35;
}

.settings-toggle-row,
.settings-action-row,
.settings-data-row,
.settings-destination-list > a,
.settings-checkbox-row,
.account-row {
  min-height: 64px;
  padding: var(--app-card-padding) 1rem;
}

.settings-toggle-row strong,
.settings-action-row strong,
.settings-data-row strong,
.settings-destination-list strong,
.account-row strong,
.business-service-row__identity strong {
  font-size: var(--app-title-size);
  line-height: 1.25;
}

.settings-toggle-row small,
.settings-action-row small,
.settings-destination-list small,
.account-row span,
.business-service-row__identity small {
  font-size: var(--app-meta-size);
}

.business-profile-nav.app-filter-tabs {
  position: static;
  top: auto;
  z-index: auto;
}

.business-profile-page .business-service-row.app-row-card {
  border-radius: 0;
  background: transparent;
}

.integrations-sync-list.app-panel {
  margin-top: 0.85rem;
}

.whatsapp-connect-page {
  width: min(100%, 720px);
  gap: 0;
}

.whatsapp-connect-header {
  min-height: 78px;
  margin: 0 0 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.whatsapp-connect-header .app-icon-button svg {
  width: 22px;
  height: 22px;
}

.whatsapp-connect-back {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 1.35rem;
  align-items: center;
  gap: 0.35rem;
  color: var(--ds-lime);
  font-size: var(--app-meta-size);
  font-weight: 800;
  text-decoration: none;
}

.whatsapp-connect-back svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.whatsapp-connect-hero {
  display: grid;
  margin-bottom: 1.5rem;
  gap: 0.6rem;
}

.whatsapp-connect-hero h2,
.whatsapp-connect-hero p {
  margin: 0;
}

.whatsapp-connect-hero h2 {
  color: var(--ds-text);
  font-size: clamp(1.95rem, 4vw, 2.55rem);
  font-weight: 850;
  line-height: 1.08;
}

.whatsapp-connect-hero p {
  max-width: 540px;
  color: var(--ds-muted);
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  line-height: 1.55;
}

.whatsapp-connect-stack {
  display: grid;
  gap: 1.25rem;
}

.whatsapp-connect-card {
  margin: 0;
  padding: 1.5rem;
  border-radius: 18px;
}

.whatsapp-connect-card__head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.95rem;
}

.whatsapp-connect-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: var(--app-tone-bg, var(--ds-lime-soft));
  color: var(--app-tone-fg, var(--ds-lime));
}

.whatsapp-connect-card__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.whatsapp-connect-card__head h2,
.whatsapp-connect-card__head p {
  margin: 0;
}

.whatsapp-connect-card__head h2 {
  color: var(--ds-text);
  font-size: 1.22rem;
  font-weight: 850;
  line-height: 1.18;
}

.whatsapp-connect-card__head p {
  margin-top: 0.45rem;
  color: var(--ds-muted);
  font-size: var(--app-body-size);
  line-height: 1.55;
}

.whatsapp-connect-required {
  align-self: start;
  margin-top: 0.05rem;
}

.whatsapp-consent-card {
  display: grid;
  margin: 1.1rem 0 0;
  padding: 1rem;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
  border: 1px solid var(--ds-lime-border);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(144, 184, 0, 0.13), rgba(255, 255, 255, 0.78));
  color: var(--ds-text-soft);
  cursor: pointer;
}

.whatsapp-consent-card input {
  appearance: none;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid var(--ds-lime-border);
  border-radius: 7px;
  background: var(--ds-lime);
}

.whatsapp-consent-card input:checked {
  background: var(--ds-lime);
}

.whatsapp-consent-card input:checked::after {
  content: '';
  display: block;
  width: 14px;
  height: 8px;
  margin: 8px auto 0;
  transform: rotate(-45deg);
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
}

.whatsapp-consent-card span {
  font-size: var(--app-body-size);
  font-weight: 700;
  line-height: 1.48;
}

.whatsapp-connect-actions {
  display: grid;
  margin-top: 1rem;
  gap: 0.65rem;
}

.whatsapp-connect-primary,
.whatsapp-connect-secondary {
  min-height: 58px;
  border-radius: 13px;
  font-size: 1rem;
  font-weight: 850;
}

.whatsapp-connect-secondary {
  border-color: var(--ds-border);
  background: var(--ds-surface-solid);
  color: var(--ds-text);
}

.whatsapp-connect-note {
  display: grid;
  margin-top: 1.15rem;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  color: var(--ds-muted);
}

.whatsapp-connect-note > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1;
}

.whatsapp-connect-note p {
  margin: 0;
  font-size: var(--app-body-size);
  line-height: 1.5;
}

.whatsapp-connect-steps ol {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.whatsapp-connect-steps li {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0.25rem 0.8rem 0;
  justify-items: center;
  gap: 0.45rem;
  color: var(--ds-muted);
  text-align: center;
}

.whatsapp-connect-steps li + li {
  border-left: 1px solid var(--ds-border);
}

.whatsapp-connect-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 2px;
  background: var(--ds-border);
}

.whatsapp-connect-steps li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-surface-2);
  color: var(--ds-text-soft);
  font-weight: 850;
}

.whatsapp-connect-steps li.is-active > span {
  background: var(--ds-lime);
  color: #fff;
}

.whatsapp-connect-steps strong {
  color: var(--ds-text);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
}

.whatsapp-connect-steps small {
  max-width: 150px;
  font-size: 0.7rem;
  line-height: 1.45;
}

.whatsapp-connect-diagnostics {
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface-solid);
}

.whatsapp-connect-diagnostics > summary {
  min-height: 46px;
  padding: 0 1rem;
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
  font-weight: 800;
  line-height: 46px;
  list-style-position: inside;
}

.whatsapp-connect-diagnostics > .account-section {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0 0 14px 14px;
  box-shadow: none;
}

@media (max-width: 560px) {
  .whatsapp-connect-page {
    --whatsapp-connect-x: var(--app-mobile-x);
  }

  .whatsapp-connect-header {
    min-height: 68px;
    margin: 0 0 1rem;
    padding: 0 0 0.75rem;
  }

  .whatsapp-connect-header .app-page__identity {
    gap: 0.6rem;
  }

  .whatsapp-connect-header .app-page__identity img {
    width: 32px;
    height: 32px;
  }

  .whatsapp-connect-header .app-page__identity h1 {
    font-size: 1rem;
  }

  .whatsapp-connect-header .app-page__identity p {
    font-size: 0.68rem;
  }

  .whatsapp-connect-header .app-icon-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .whatsapp-connect-back {
    margin-bottom: 1rem;
    font-size: 0.7rem;
  }

  .whatsapp-connect-hero {
    margin-bottom: 1.2rem;
    gap: 0.45rem;
  }

  .whatsapp-connect-hero h2 {
    font-size: clamp(1.45rem, 6.35vw, 1.6rem);
    line-height: 1.12;
  }

  .whatsapp-connect-hero p {
    max-width: 340px;
    font-size: 0.86rem;
    line-height: 1.48;
  }

  .whatsapp-connect-card {
    padding: 1rem;
    border-radius: 16px;
  }

  .whatsapp-connect-card__head {
    position: relative;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .whatsapp-connect-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .whatsapp-connect-card__icon svg {
    width: 21px;
    height: 21px;
  }

  .whatsapp-connect-card__head h2 {
    font-size: 1.04rem;
  }

  .whatsapp-connect-card__head p {
    margin-top: 0.3rem;
    padding-right: 0.15rem;
    font-size: 0.79rem;
    line-height: 1.48;
  }

  .whatsapp-connect-required {
    position: static;
    grid-column: 2;
    justify-self: start;
    margin: 0;
    padding-inline: 0.6rem;
    font-size: 0.65rem;
  }

  .whatsapp-consent-card {
    margin-top: 0.85rem;
    padding: 0.8rem;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.65rem;
    border-radius: 12px;
  }

  .whatsapp-consent-card input {
    width: 27px;
    height: 27px;
  }

  .whatsapp-consent-card input:checked::after {
    width: 12px;
    height: 7px;
    margin-top: 7px;
  }

  .whatsapp-consent-card span {
    font-size: 0.78rem;
    line-height: 1.42;
  }

  .whatsapp-connect-actions {
    margin-top: 0.65rem;
    gap: 0.5rem;
  }

  .whatsapp-connect-primary,
  .whatsapp-connect-secondary {
    min-height: 48px;
    border-radius: 11px;
    font-size: 0.82rem;
  }

  .whatsapp-connect-note {
    margin-top: 0.85rem;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 0.6rem;
  }

  .whatsapp-connect-note > span {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
  }

  .whatsapp-connect-note p {
    font-size: 0.75rem;
    line-height: 1.48;
  }

  .whatsapp-connect-steps ol {
    margin-top: 1rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .whatsapp-connect-steps li {
    grid-template-columns: 31px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .whatsapp-connect-steps li + li {
    border-left: 0;
  }

  .whatsapp-connect-steps li > span {
    grid-row: 1 / 3;
  }

  .whatsapp-connect-steps li:not(:last-child)::after {
    display: none;
  }

  .whatsapp-connect-steps small {
    max-width: none;
    font-size: 0.75rem;
  }

  .whatsapp-connect-steps li {
    padding-inline: 0.3rem;
    gap: 0.35rem;
  }

  .whatsapp-connect-steps li > span {
    width: 31px;
    height: 31px;
    font-size: 0.72rem;
  }

  .whatsapp-connect-steps li:not(:last-child)::after {
    top: 16px;
    left: calc(50% + 21px);
    width: calc(100% - 42px);
  }

  .whatsapp-connect-steps strong {
    font-size: 0.82rem;
  }

  .whatsapp-connect-steps small {
    font-size: 0.75rem;
    line-height: 1.42;
  }
}


/* Keep the focused WhatsApp setup aligned at every workspace breakpoint. */
.app-page.whatsapp-connect-page {
  width: min(100%, 800px);
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-top: 1.5rem;
}

.whatsapp-connect-page > .setup-alert {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  line-height: 1.6;
}

.whatsapp-connect-page .whatsapp-connect-card__head > div {
  min-width: 0;
}

.whatsapp-connect-page .whatsapp-connect-note {
  padding: 1rem;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface-2);
  line-height: 1.6;
}

.whatsapp-connect-note[data-state="error"] {
  color: var(--ds-danger);
}

.whatsapp-connect-note[data-state="success"] {
  color: var(--ds-success);
}

.whatsapp-connect-page .whatsapp-connect-steps small {
  font-size: 0.8rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .app-page.whatsapp-connect-page:not(.app-page--record):not(.app-page--detail):not(.app-page--split) {
    padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .whatsapp-connect-page .whatsapp-connect-card { padding: 1.25rem; }
  .whatsapp-connect-page .whatsapp-connect-card__head p,
  .whatsapp-connect-page .whatsapp-consent-card span,
  .whatsapp-connect-page .whatsapp-connect-note p { font-size: 0.85rem; line-height: 1.6; }
  .whatsapp-connect-page .whatsapp-connect-actions { margin-top: 1rem; gap: 0.75rem; }
  .whatsapp-connect-page .whatsapp-connect-stack { gap: 1.25rem; }
}

.calendar-toolbar.app-page__actions {
  width: min(100%, 500px);
  flex: 0 1 500px;
  justify-content: flex-end;
}

.calendar-mobile-switch.app-filter-tabs :is(a, button) {
  border-radius: 12px;
}

.calendar-page .calendar-mini-event,
.calendar-page .calendar-agenda-card,
.calendar-page .calendar-week-day {
  border-radius: 8px;
}

/* Page composition: shared primitives above own all repeated visual sizing. */
.customer-card__chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.customer-card__avatar--1 { background: #e5eed2; color: #557100; }
.customer-card__avatar--2 { background: #f8e0e7; color: #a32350; }
.customer-card__avatar--3 { background: #f8eadc; color: #98541d; }
.customer-card__avatar--4 { background: #dce8f2; color: #315f83; }
.today-action-card__cta { background: var(--app-tone-bg, #fff0db); color: var(--app-tone-fg, #aa6911); }
.job-record__icon { width: 68px; height: 68px; }

@media (max-width: 900px) {
  body:has(.app-page:not(.app-page--record):not(.app-page--detail)) .ws-mobile-topbar { display: none; }
  body:has(.app-page:not(.app-page--record):not(.app-page--detail)) .ws-main { padding-top: 0; }
  .app-page:not(.app-page--record):not(.app-page--detail):not(.app-page--split) {
    padding: max(0.6rem, env(safe-area-inset-top)) var(--app-mobile-x) calc(var(--ws-mobile-nav-height) + 1.25rem);
  }
  .app-page.whatsapp-connect-page:not(.app-page--record):not(.app-page--detail):not(.app-page--split) {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
  .app-page__header { margin-bottom: 0.7rem; }
  .app-page__identity img { width: 34px; height: 34px; }
  .app-page__identity h1 { font-size: var(--app-page-title-size-mobile); }
  .app-page__identity p { font-size: var(--app-page-subtitle-size-mobile); }
}

@media (max-width: 560px) {
  .app-page--record,
  .app-page--detail { padding-inline: 0; }
  .app-search { min-height: 44px; }
  .app-filter-tabs { gap: 0.28rem; }
  .app-filter-tabs :is(a, button) { min-height: var(--ds-touch-height); padding-inline: 0.22rem; font-size: var(--ds-text-xs); }
  .app-row-card__icon,
  .app-row-card__avatar,
  .job-directory-card__icon,
  .today-action-card__icon { width: var(--app-icon-size-mobile); height: var(--app-icon-size-mobile); }
  .job-record__icon { width: 56px; height: 56px; }
  .app-row-card__title { font-size: var(--app-title-size); }
  .app-row-card__meta { font-size: var(--app-meta-size); }
  .app-row-card__detail { font-size: var(--app-detail-size); }
  .app-status-pill { min-height: var(--app-pill-height); padding-inline: 0.4rem; font-size: var(--app-pill-font-size); }
}

@media (max-width: 760px) {
  .settings-section-tabs.app-filter-tabs {
    display: none;
  }

  .settings-section-selector {
    margin-bottom: 0.75rem;
  }

  .business-profile-nav.app-filter-tabs {
    position: static;
    margin-inline: 0;
  }

  .calendar-page__header.app-page__header {
    align-items: center;
  }

  .calendar-page__header .calendar-toolbar.app-page__actions {
    width: 100%;
  }

  .app-page__header--stack-mobile {
    display: grid;
    gap: 0.85rem;
  }

  .app-page__header--stack-mobile .app-page__actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .app-page.app-page--split {
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
}

/* Documents workspace. Shared app primitives own the controls, panels, pills,
 * rows and responsive shell; these selectors only compose the document data. */
.documents-page {
  display: grid;
  gap: 0.9rem;
}

.documents-page__header {
  margin-bottom: 0;
}

.documents-page__intro {
  margin: -0.35rem 0 0.15rem;
  color: var(--ds-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.documents-header-menu,
.documents-row__menu {
  position: relative;
}

.documents-header-menu > summary,
.documents-row__menu > summary {
  list-style: none;
}

.documents-header-menu > summary::-webkit-details-marker,
.documents-row__menu > summary::-webkit-details-marker {
  display: none;
}

.documents-header-menu[open] > summary:not(.documents-new-button),
.documents-row__menu[open] > summary {
  color: var(--ds-lime);
}

.documents-new-button {
  display: inline-flex;
  min-height: var(--app-control-height);
  padding: 0.55rem 0.9rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--ds-lime);
  border-radius: var(--ds-radius-md);
  background: var(--ds-lime);
  color: #fff;
  cursor: pointer;
  font-size: var(--ds-text-sm);
  font-weight: 800;
  box-shadow: 0 7px 15px rgba(104, 143, 4, 0.18);
}

.documents-new-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.documents-search-popover,
.documents-new-menu > nav,
.documents-row__menu > nav {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.45rem);
  right: 0;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-lg);
}

.documents-search-popover {
  display: grid;
  width: min(330px, calc(100vw - 2rem));
  padding: 0.75rem;
  gap: 0.55rem;
}

.documents-search-popover > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.documents-search-popover .auth-input {
  min-width: 0;
  min-height: 40px;
  padding: 0.45rem 0.55rem;
  font-size: 0.7rem;
}

.documents-search-clear {
  color: var(--ds-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.documents-new-menu > nav {
  display: grid;
  width: 245px;
  padding: 0.4rem;
}

.documents-new-menu > nav a {
  display: grid;
  min-height: 62px;
  padding: 0.55rem;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  border-radius: 10px;
  color: var(--ds-text);
  text-decoration: none;
}

.documents-new-menu > nav a:hover {
  background: var(--ds-surface-3);
}

.documents-new-menu .app-row-card__icon {
  width: 38px;
  height: 38px;
}

.documents-new-menu nav a > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.documents-new-menu nav strong {
  font-size: 0.76rem;
}

.documents-new-menu nav small {
  color: var(--ds-muted);
  font-size: 0.64rem;
}

.documents-type-tabs {
  min-height: 58px;
  padding: 0.32rem;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}

.documents-type-tabs a {
  min-height: 48px;
  gap: 0.55rem;
  border-color: transparent;
  border-radius: 11px;
  background: transparent;
}

.documents-type-tabs a b {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding-inline: 0.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-surface-3);
  color: var(--ds-muted);
  font-size: 0.65rem;
}

.documents-type-tabs a.is-active b {
  background: rgba(113, 157, 8, 0.13);
  color: var(--ds-lime);
}

.documents-tab-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
}

.documents-tab-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.documents-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.documents-overview-card {
  display: grid;
  min-height: 154px;
  padding: 0.9rem;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
}

.documents-overview-card--quote {
  border-color: var(--ds-lime-border);
  background: linear-gradient(145deg, var(--ds-surface-solid) 30%, rgba(224, 239, 188, 0.45));
}

.documents-overview-card__heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 0.55rem;
}

.documents-overview-card__heading .app-row-card__icon {
  width: 38px;
  height: 38px;
}

.documents-overview-card__heading > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ds-muted);
  stroke-width: 2;
}

.documents-overview-card__heading > strong {
  font-size: 0.78rem;
}

.documents-overview-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
}

.documents-overview-card__body > div,
.documents-overview-card__body ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.3rem;
}

.documents-overview-card__body > div strong {
  color: var(--ds-text);
  font-size: 1.25rem;
  line-height: 1;
}

.documents-overview-card__body > div span {
  color: var(--ds-muted);
  font-size: 0.64rem;
}

.documents-overview-card__body li {
  display: grid;
  grid-template-columns: 7px 18px auto;
  align-items: center;
  gap: 0.25rem;
  color: var(--ds-muted);
  font-size: 0.62rem;
  list-style: none;
}

.documents-overview-card__body li i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-muted-2);
}

.documents-overview-card__body li i.is-success { background: #4caf25; }
.documents-overview-card__body li i.is-info { background: #3c94df; }
.documents-overview-card__body li i.is-warning { background: #f2a510; }
.documents-overview-card__body li i.is-danger { background: #dd4652; }
.documents-overview-card__body li b { color: var(--ds-text-soft); }

.documents-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.documents-quick-action {
  display: grid;
  min-height: 108px;
  padding: 0.8rem 0.45rem;
  place-items: center;
  align-content: center;
  gap: 0.28rem;
  color: var(--ds-text);
  font: inherit;
  text-align: center;
  text-decoration: none;
}

.documents-quick-action > span {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 0.18rem;
  place-items: center;
  color: var(--ds-text-soft);
}

.documents-quick-action svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.documents-quick-action strong { font-size: 0.7rem; }
.documents-quick-action small { color: var(--ds-muted); font-size: 0.6rem; }
.documents-quick-action--primary { border-color: var(--ds-lime-border); background: var(--ds-lime-soft); }
.documents-quick-action--primary > span { color: var(--ds-lime); }
.documents-quick-action:disabled { opacity: 0.66; cursor: not-allowed; }

.documents-recent__header {
  padding-inline: 0.15rem;
}

.documents-recent__header > div {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.documents-recent__header small {
  color: var(--ds-muted);
  font-size: 0.62rem;
}

.documents-recent__header a {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.documents-recent__header a svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.documents-list {
  display: grid;
  gap: 0.48rem;
}

.documents-row {
  overflow: visible;
}

.documents-row__link {
  display: grid;
  min-height: 76px;
  padding: 0.65rem 3.1rem 0.65rem 0.7rem;
  grid-template-columns: var(--app-icon-size) minmax(0, 1fr) auto minmax(68px, auto);
  align-items: center;
  gap: 0.7rem;
  border-radius: inherit;
}

.documents-row__amount {
  color: var(--ds-text);
  font-size: 0.78rem;
  text-align: right;
  white-space: nowrap;
}

.documents-row__menu {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
}

.documents-row__menu > summary {
  display: grid;
  width: 34px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  color: var(--ds-muted);
  cursor: pointer;
}

.documents-row__menu > summary:hover { background: var(--ds-surface-3); }
.documents-row__menu > summary svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }

.documents-row__menu > nav {
  display: grid;
  top: calc(50% + 1.5rem);
  width: 170px;
  padding: 0.35rem;
}

.documents-row__menu nav :is(a, button) {
  display: flex;
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.6rem;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-text-soft);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.documents-row__menu nav :is(a, button):hover { background: var(--ds-surface-3); color: var(--ds-text); }
.documents-row__menu nav .documents-row__delete { color: var(--ds-danger); }
.documents-row__menu nav .documents-row__delete:hover { color: var(--ds-danger); }
.documents-row__menu form { margin: 0; }

.documents-empty {
  display: grid;
  min-height: 210px;
  padding: 1.5rem;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  text-align: center;
}

.documents-empty p {
  max-width: 330px;
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.72rem;
}

.documents-security-strip {
  display: grid;
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--ds-lime-border);
  border-radius: 12px;
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
  text-decoration: none;
}

.documents-security-strip span { display: grid; place-items: center; }
.documents-security-strip small { color: var(--ds-text-soft); font-size: 0.64rem; }
.documents-security-strip svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; }

@media (max-width: 760px) {
  .documents-page {
    padding: max(0.85rem, env(safe-area-inset-top)) 0.95rem calc(var(--ws-mobile-nav-height) + 1.25rem);
    gap: 0.72rem;
  }

  .documents-page__header { min-height: 62px; }
  .documents-page__header .app-page__identity img { width: 38px; height: 38px; }
  .documents-page__header .app-page__identity h1 { font-size: 1.08rem; }
  .documents-page__header .app-page__identity p { max-width: 145px; font-size: 0.72rem; }
  .documents-page__intro { margin-top: -0.28rem; font-size: 0.7rem; }
  .documents-new-button { min-height: var(--ds-touch-height); padding-inline: 0.75rem; }
  .documents-search-popover { right: -5.2rem; }
  .documents-type-tabs { min-height: 54px; }
  .documents-type-tabs a { min-height: 44px; font-size: 0.7rem; }
  .documents-overview-card { min-height: 145px; padding: 0.72rem; gap: 0.65rem; }
  .documents-overview-card__heading { grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 0.4rem; }
  .documents-overview-card__heading .app-row-card__icon { width: 34px; height: 34px; border-radius: 10px; }
  .documents-overview-card__body { gap: 0.45rem; }
  .documents-overview-card__body > div strong { font-size: 1.08rem; }
  .documents-overview-card__body li { grid-template-columns: 7px 15px auto; font-size: 0.57rem; }
  .documents-quick-actions { gap: 0.45rem; }
  .documents-quick-action { min-height: 100px; padding-inline: 0.25rem; }
  .documents-quick-action > span { width: 34px; height: 34px; }
  .documents-quick-action svg { width: 24px; height: 24px; }
  .documents-quick-action strong { font-size: clamp(0.58rem, 2.7vw, 0.68rem); }
  .documents-quick-action small { font-size: clamp(0.51rem, 2.3vw, 0.58rem); }
  .documents-row__link { min-height: 74px; padding: 0.58rem 2.7rem 0.58rem 0.55rem; grid-template-columns: var(--app-icon-size-mobile) minmax(0, 1fr) auto minmax(55px, auto); gap: 0.48rem; }
  .documents-row__status { max-width: 64px; }
  .documents-row__amount { font-size: 0.68rem; }
  .documents-row__menu { right: 0.15rem; }
  .documents-row__menu > nav { right: 0; }
}

@media (max-width: 430px) {
  .documents-row__link { grid-template-columns: var(--app-icon-size-mobile) minmax(0, 1fr) minmax(54px, auto); }
  .documents-row__status { position: absolute; right: 2.85rem; bottom: 0.45rem; min-height: 18px; font-size: 0.46rem; }
  .documents-row__amount { align-self: start; padding-top: 0.18rem; }
  .documents-row__body { padding-right: 0.1rem; }
  .documents-row__body .app-row-card__detail { padding-right: 64px; }
}

/* Settings mobile hub and reference-matched detail compositions. The forms,
 * status controls and panels still use the shared Traden settings contract. */
.settings-mobile-hub,
.settings-mobile-detail-head,
.settings-mobile-hero,
.settings-mobile-section-label {
  display: none;
}

.settings-general-hours-card,
.settings-mobile-value-card,
.settings-booking-list,
.settings-notification-card,
.settings-notification-row,
.settings-billing-actions {
  min-width: 0;
}

.settings-general-hours-card {
  padding: 1.1rem;
}

.settings-card-heading h3,
.settings-card-heading p {
  margin: 0;
}

.settings-card-heading p {
  margin-top: 0.2rem;
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
}

.settings-time-grid,
.settings-mobile-value-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.settings-time-grid label,
.settings-mobile-value-row {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
}

.settings-time-grid input,
.settings-day-slot input,
.settings-mobile-control input,
.settings-booking-control input {
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-solid);
  color: var(--ds-text);
}

.settings-day-slots {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ds-border);
}

.settings-day-slot {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ds-text-soft);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.settings-day-slot.is-active {
  border-color: var(--ds-border-strong);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ds-text);
}

.settings-day-slot > span:first-child {
  display: grid;
  gap: 0.1rem;
}

.settings-day-slot small {
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
}

.settings-day-slot__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
}

.settings-day-slot__controls input {
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-weight: 750;
}

.settings-mobile-value-card,
.settings-booking-list,
.settings-notification-card,
.settings-notification-row,
.settings-plan-list {
  border: 1px solid var(--ds-border);
  border-radius: var(--app-card-radius);
  background: var(--ds-surface-solid);
}

.settings-mobile-value-row {
  display: flex;
  min-height: 68px;
  padding: 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-mobile-control,
.settings-booking-control {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

.settings-mobile-control input {
  width: min(150px, 20vw);
  min-height: 38px;
  padding: 0.45rem 0.6rem;
  text-align: right;
}

.settings-mobile-control svg,
.settings-mobile-chevron svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.settings-mobile-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
}

.settings-mobile-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.settings-booking-list {
  display: grid;
}

.settings-booking-row {
  display: grid;
  min-width: 0;
  min-height: 68px;
  padding: 0.75rem 1rem;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid var(--ds-border);
}

.settings-booking-row:last-child {
  border-bottom: 0;
}

.settings-booking-row > span:nth-child(2),
.settings-notification-row > span,
.settings-notification-card__row > span {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.settings-booking-row small,
.settings-notification-row small,
.settings-notification-card small {
  color: var(--ds-muted);
}

.settings-booking-control {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.settings-booking-control input {
  width: 72px;
  min-height: 38px;
  padding: 0.4rem;
  text-align: right;
}

.settings-booking-control input[type='time'] {
  width: 96px;
}

.settings-notification-card,
.settings-notification-row {
  color: var(--ds-text);
  text-decoration: none;
}

.settings-notification-card__row,
.settings-notification-row {
  display: flex;
  min-height: 72px;
  padding: 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-notification-state,
.settings-notification-row > span:last-child {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
}

.settings-notification-state svg,
.settings-notification-row svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
}

.settings-billing-actions {
  display: grid;
  padding: 1rem 0 0;
  gap: 0.65rem;
}

.settings-billing-actions .btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

@media (max-width: 760px) {
  .settings-page.app-page {
    --settings-mobile-card-radius: 17px;
    padding: max(0.85rem, env(safe-area-inset-top)) 0.95rem calc(var(--ws-mobile-nav-height) + 1.25rem);
    gap: 0;
  }

  .settings-page-header {
    min-height: 62px;
    margin-bottom: 1rem;
  }

  .settings-page-header .app-page__identity img {
    width: 38px;
    height: 38px;
  }

  .settings-page-header .app-page__identity h1 {
    font-size: 1.08rem;
  }

  .settings-page-header .app-page__identity p {
    max-width: 220px;
    font-size: 0.72rem;
  }

  .settings-page.is-settings-detail > .settings-page-header {
    display: none;
  }

  .settings-page.is-settings-detail > .setup-alert {
    margin-top: 0.5rem;
  }

  .settings-page:has([data-settings-hub]) .settings-section-selector {
    display: none;
  }

  .settings-mobile-hub {
    display: block;
  }

  .settings-mobile-hub[hidden],
  .settings-workspace.is-mobile-detail .settings-mobile-hub {
    display: none !important;
  }

  .settings-workspace:not(.is-mobile-detail) .settings-panel {
    display: none !important;
  }

  .settings-mobile-hub__head {
    margin: 0 0 1.1rem;
  }

  .settings-mobile-hub__head h2,
  .settings-mobile-hub__head p {
    margin: 0;
  }

  .settings-mobile-hub__head h2 {
    color: var(--ds-text);
    font-size: clamp(1.55rem, 7vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
  }

  .settings-mobile-hub__head p {
    margin-top: 0.4rem;
    color: var(--ds-muted);
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .settings-mobile-menu {
    display: grid;
    gap: 0.65rem;
  }

  .settings-mobile-menu > a {
    display: grid;
    min-width: 0;
    min-height: 76px;
    padding: 0.75rem 0.85rem;
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid #e7e9e4;
    border-radius: var(--settings-mobile-card-radius);
    background: var(--ds-surface-solid);
    color: var(--ds-text);
    text-decoration: none;
    box-shadow: 0 5px 18px rgba(32, 39, 49, 0.045);
    -webkit-tap-highlight-color: transparent;
  }

  .settings-mobile-menu > a:active {
    background: var(--ds-highlight);
    transform: scale(0.99);
  }

  .settings-mobile-menu > a > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
  }

  .settings-mobile-menu strong,
  .settings-mobile-hero strong,
  .settings-booking-row strong,
  .settings-notification-card strong,
  .settings-notification-row strong {
    color: var(--ds-text);
    font-size: 0.88rem;
    line-height: 1.25;
  }

  .settings-mobile-menu small,
  .settings-mobile-hero small,
  .settings-booking-row small,
  .settings-notification-card small,
  .settings-notification-row small {
    overflow: hidden;
    color: var(--ds-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
  }

  .settings-mobile-icon {
    display: inline-grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    background: #f1f7e2;
    color: #668b00;
  }

  .settings-mobile-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .settings-mobile-icon--small {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .settings-mobile-icon--small svg {
    width: 20px;
    height: 20px;
  }

  .settings-mobile-chevron {
    display: inline-grid;
    color: var(--ds-text-soft);
    place-items: center;
  }

  .settings-mobile-chevron svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .settings-panel {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }

  .settings-panel__head--desktop {
    display: none !important;
  }

  .settings-mobile-detail-head {
    position: relative;
    display: grid;
    min-height: 54px;
    margin: -0.15rem 0 0.75rem;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
  }

  .settings-mobile-detail-head h2 {
    margin: 0;
    color: var(--ds-text);
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-align: center;
  }

  .settings-mobile-back {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: var(--ds-text);
    text-decoration: none;
  }

  .settings-mobile-back:active {
    background: var(--ds-highlight);
  }

  .settings-mobile-back svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .settings-mobile-hero {
    display: grid;
    min-width: 0;
    min-height: 88px;
    margin-bottom: 1.35rem;
    padding: 0.9rem;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid #e7e9e4;
    border-radius: var(--settings-mobile-card-radius);
    background: var(--ds-surface-solid);
    color: var(--ds-text);
    text-decoration: none;
    box-shadow: 0 5px 18px rgba(32, 39, 49, 0.04);
  }

  .settings-mobile-hero .settings-mobile-icon {
    width: 52px;
    height: 52px;
  }

  .settings-mobile-hero__copy {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
  }

  .settings-mobile-state {
    display: inline-flex;
    min-height: 27px;
    padding: 0.3rem 0.65rem;
    align-items: center;
    border: 1px solid #e2ebc7;
    border-radius: 999px;
    background: #f4f8e9;
    color: #719700;
    font-size: 0.7rem;
    font-weight: 800;
  }

  .settings-mobile-section-label {
    display: block;
    margin: 0 0 0.6rem 0.15rem;
    color: var(--ds-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .settings-general-hours-card,
  .settings-mobile-value-card,
  .settings-toggle-list,
  .settings-booking-list,
  .settings-notification-card,
  .settings-notification-row,
  .settings-plan-list,
  .settings-follow-up,
  .settings-advanced,
  .settings-account-list,
  .settings-destination-list--standalone {
    overflow: hidden;
    border: 1px solid #e7e9e4;
    border-radius: var(--settings-mobile-card-radius);
    background: var(--ds-surface-solid);
    box-shadow: 0 5px 18px rgba(32, 39, 49, 0.035);
  }

  .settings-general-hours-card {
    padding: 1.05rem;
  }

  .settings-card-heading h3 {
    color: var(--ds-text);
    font-size: 0.9rem;
  }

  .settings-card-heading p {
    font-size: 0.72rem;
  }

  .settings-weekdays {
    margin: 1rem 0 1.1rem;
  }

  .settings-weekdays .weekday-grid {
    display: flex;
    max-width: calc((46px * 5) + (0.65rem * 4));
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
  }

  .settings-weekdays .weekday-card {
    position: relative;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    justify-self: center;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    background: #f5f6f7;
    color: var(--ds-text-soft);
    font-size: 0.7rem;
    box-shadow: none;
  }

  .settings-weekdays .weekday-card:nth-child(6) {
    grid-column: auto;
  }

  .settings-weekdays .weekday-card.active,
  .settings-weekdays .weekday-card:has(input:checked) {
    border-color: #d7dbd2;
    background: #f5f6f7;
    color: var(--ds-text);
    box-shadow: none;
  }

  .settings-weekdays .weekday-card span {
    padding: 0;
    color: inherit;
  }

  .settings-day-slots {
    gap: 0;
    padding-top: 0.75rem;
  }

  .settings-day-slot {
    grid-template-columns: minmax(68px, 0.72fr) minmax(0, 1.28fr);
    gap: 0.65rem;
    padding: 0.58rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .settings-day-slot.is-active {
    border-color: transparent;
    background: transparent;
  }

  .settings-day-slot + .settings-day-slot {
    border-top: 1px solid var(--ds-border);
  }

  .settings-day-slot:not(.is-active) {
    opacity: 0.54;
  }

  .settings-day-slot > span:first-child {
    gap: 0;
  }

  .settings-day-slot > span:first-child strong {
    font-size: 0.75rem;
  }

  .settings-day-slot > span:first-child small,
  .settings-day-slot__controls small {
    font-size: 0.64rem;
  }

  .settings-day-slot__controls {
    gap: 0.38rem;
  }

  .settings-day-slot__controls input {
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.78rem;
    text-align: center;
  }

  .settings-day-slot__controls input[type='time'] {
    appearance: none;
  }

  .settings-day-slot__controls input[type='time']::-webkit-calendar-picker-indicator {
    display: none;
  }

  .settings-time-grid {
    display: grid;
    padding-top: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ds-border);
  }

  .settings-time-grid label {
    min-width: 0;
    padding-left: 0;
  }

  .settings-time-grid label + label {
    padding-left: 1rem;
    border-left: 1px solid var(--ds-border);
  }

  .settings-time-grid label > span {
    color: var(--ds-muted);
    font-size: 0.68rem;
    font-weight: 700;
  }

  .settings-time-grid input {
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
  }

  .settings-time-grid input[type='time'],
  .settings-booking-control input[type='time'] {
    appearance: none;
  }

  .settings-time-grid input[type='time']::-webkit-calendar-picker-indicator,
  .settings-booking-control input[type='time']::-webkit-calendar-picker-indicator {
    display: none;
  }

  .settings-general-area-card {
    display: grid;
    margin-top: 1rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .settings-mobile-value-row {
    display: flex;
    min-height: 62px;
    padding: 0.85rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--ds-border);
  }

  .settings-mobile-value-row:last-child {
    border-bottom: 0;
  }

  .settings-mobile-value-row strong {
    font-size: 0.79rem;
  }

  .settings-mobile-control {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
  }

  .settings-mobile-control input {
    width: min(110px, 32vw);
    min-height: 36px;
    padding: 0.3rem 0;
    border: 0;
    background: transparent;
    color: #7da300;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: right;
  }

  .settings-mobile-control small {
    color: #7da300;
    font-size: 0.75rem;
    font-weight: 800;
  }

  .settings-mobile-control svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--ds-text-soft);
  }

  .settings-form-actions {
    margin-top: 1rem;
    padding: 0;
    border-top: 0;
  }

  .settings-toggle-list {
    border-top: 0;
  }

  .settings-toggle-row {
    min-height: 66px;
    padding: 0.8rem 0.9rem;
    align-items: center;
  }

  .settings-toggle-row strong {
    font-size: 0.78rem;
  }

  .settings-toggle-row small {
    font-size: 0.68rem;
  }

  .settings-switch > span {
    width: 48px;
    height: 28px;
    border-color: #cbd0d8;
    background: #d7dce4;
  }

  .settings-switch > span::after {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(31, 38, 50, 0.24);
  }

  .settings-switch input:checked + span {
    border-color: #6f9900;
    background: linear-gradient(145deg, #91bc12, #6f9d00);
  }

  .settings-switch input:checked + span::after {
    background: #fff;
    transform: translateX(20px);
  }

  .settings-follow-up {
    margin-top: 1rem;
    border-top: 1px solid #e7e9e4;
  }

  .settings-advanced {
    margin-top: 1rem;
    border-top: 1px solid #e7e9e4;
  }

  .settings-booking-row {
    min-height: 70px;
    padding: 0.7rem 0.75rem;
    grid-template-columns: 36px minmax(0, 1fr) auto 16px;
    gap: 0.55rem;
  }

  .settings-booking-control input {
    width: 44px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text-soft);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: right;
    appearance: textfield;
  }

  .settings-booking-control input[type='time'] {
    width: 70px;
  }

  .settings-booking-control small {
    color: var(--ds-text-soft);
    font-size: 0.7rem;
    font-weight: 800;
  }

  .settings-booking-control input::-webkit-inner-spin-button,
  .settings-mobile-control input::-webkit-inner-spin-button {
    appearance: none;
  }

  .settings-notification-card,
  .settings-notification-row {
    border-radius: var(--settings-mobile-card-radius);
  }

  .settings-notification-card__row,
  .settings-notification-row {
    min-height: 72px;
    padding: 0.9rem 1rem;
  }

  .settings-notification-state strong,
  .settings-notification-row > span:last-child strong,
  .settings-positive {
    color: var(--ds-lime) !important;
  }

  .settings-notification-card__row > .settings-notification-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .settings-notification-card .push-control__actions {
    display: grid;
    margin: 0;
    padding: 0 1rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .settings-notification-card .push-control__actions .btn {
    min-height: 44px;
    margin: 0;
    justify-content: center;
  }

  .settings-notification-card .push-control__actions .btn[hidden] {
    display: none !important;
  }

  .settings-notification-card .push-control__actions .btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
  }

  .settings-panel--notifications .settings-mobile-section-label:not(:first-of-type) {
    margin-top: 1.25rem;
  }

  .settings-plan-list {
    border-top: 1px solid #e7e9e4;
  }

  .settings-plan-list .settings-data-row {
    min-height: 58px;
    padding: 0.8rem 1rem;
  }

  .settings-plan-list .settings-data-row:last-child {
    border-bottom: 0;
  }

  .settings-plan-list .settings-data-row span,
  .settings-plan-list .settings-data-row strong {
    font-size: 0.76rem;
  }

  .settings-billing-actions {
    padding: 1rem 0 0;
  }

  .settings-billing-actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .settings-billing-actions .btn--primary {
    border-color: #d7e4ae;
    background: #f4f8e9;
    color: #678b00;
  }

  .settings-account-list {
    border-top: 1px solid #e7e9e4;
  }

  .settings-account-logout {
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid #e7e9e4;
    border-radius: var(--settings-mobile-card-radius);
    background: var(--ds-surface-solid);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-row-card__link { transition: none; }
}

/* Inbox composition
 *
 * Inbox keeps its purpose-built split conversation layout. Repeated chrome,
 * controls, rows, type, avatars, panels, and workflow pills come from the
 * shared app primitives above.
 */
.inbox-workspace {
  --inbox-list-width: clamp(340px, 27vw, 380px);
  height: 100dvh;
  overflow: hidden;
}

.inbox-workspace .ws-main {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.inbox-workspace .inbox-shell__inner {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  grid-template-columns: var(--inbox-list-width) minmax(0, 1fr);
  background: var(--ds-canvas);
}

.inbox-workspace .inbox-list,
.inbox-workspace .inbox-detail {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-color: var(--ds-border);
  background: var(--ds-surface-solid);
}

.inbox-workspace .inbox-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ds-border);
}

.inbox-workspace .inbox-list__head {
  padding: 1.25rem var(--app-page-x) 0.8rem;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface-solid);
  backdrop-filter: none;
}

.inbox-workspace .inbox-page-header {
  margin-bottom: 0;
}

.inbox-workspace .inbox-search-field {
  margin-top: 0.75rem;
}

.inbox-workspace .inbox-search-field[hidden] {
  display: none;
}

.customer-directory__controls > .app-search[hidden],
.job-directory__controls > .app-search[hidden] {
  display: none;
}

.inbox-workspace .inbox-search {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ds-text);
  font: inherit;
}

.inbox-workspace .inbox-tabs {
  position: static;
  width: 100%;
  min-width: 0;
  margin-top: 0.75rem;
  padding: 0;
  gap: 0.35rem;
  overflow: visible;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.inbox-workspace .inbox-tab {
  min-width: 0;
  padding-inline: 0.35rem;
  flex: initial;
  white-space: normal;
}

.inbox-workspace .inbox-tab--active {
  border-color: var(--ds-lime-border);
  background: var(--ds-lime-soft);
  color: var(--ds-lime);
}

.inbox-workspace .inbox-items {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.inbox-workspace .inbox-item-shell {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ds-border-subtle, rgba(16, 24, 40, 0.08));
}

.inbox-workspace .inbox-item-shell__action {
  position: absolute;
  inset: 0 0 0 auto;
  width: 6.25rem;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: linear-gradient(180deg, #ef3129 0%, #dc2626 100%);
  transform: translateX(100%);
  transition: transform 180ms ease;
  pointer-events: none;
}

.inbox-workspace .inbox-item-shell__clear {
  width: 6.25rem;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.inbox-workspace .inbox-item-shell__clear svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
}

.inbox-workspace .inbox-item {
  display: flex;
  width: 100%;
  min-height: var(--app-card-min-h);
  padding: var(--app-card-padding) 0.9rem 1.85rem;
  align-items: flex-start;
  gap: 0.75rem;
  overflow: visible;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform 180ms ease, background 160ms ease;
}

.inbox-workspace .inbox-item:hover {
  background: var(--ds-surface-solid-2);
}

.inbox-workspace .inbox-item-shell.is-swipe-open .inbox-item {
  transform: translateX(-6.25rem);
}

.inbox-workspace .inbox-item-shell.is-swipe-open .inbox-item-shell__action {
  transform: translateX(0);
  pointer-events: auto;
}

.inbox-workspace .inbox-item--active {
  background: var(--ds-lime-soft);
  box-shadow: inset 3px 0 0 var(--ds-lime);
}

.inbox-workspace .inbox-item__avatar-wrap {
  position: relative;
  width: var(--app-icon-size-mobile);
  height: var(--app-icon-size-mobile);
  flex: 0 0 var(--app-icon-size-mobile);
}

.inbox-workspace .inbox-item__channel-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: inline-flex;
}

.inbox-workspace .inbox-item__body {
  padding-right: 2.25rem;
  gap: 0.16rem;
}

.inbox-workspace .inbox-item__row {
  gap: 0.55rem;
}

.inbox-workspace .inbox-item__preview {
  max-width: calc(100% - 1.75rem);
}

.inbox-workspace .inbox-item__context > span:first-child {
  padding-left: 0;
  max-width: calc(100% - 7.5rem);
}

.inbox-workspace .inbox-item__context .app-status-pill {
  right: 0.9rem;
  bottom: 0.5rem;
  max-width: 116px;
}

.inbox-workspace .inbox-item__badge {
  top: 2.1rem;
  right: 0.9rem;
}

.inbox-workspace .inbox-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-width: 0;
}

.inbox-workspace .inbox-detail__head {
  min-height: var(--app-header-height);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface-solid);
  backdrop-filter: none;
}

.inbox-workspace .inbox-detail__back {
  display: none;
}

.inbox-workspace .inbox-detail__identity {
  min-width: 0;
  gap: 0.7rem;
}

.inbox-workspace .inbox-detail__sub {
  margin-top: 0.15rem;
}

.inbox-workspace .inbox-detail__actions .btn-card,
.inbox-workspace .inbox-composer__send {
  min-height: var(--app-control-height);
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 800;
}

.inbox-workspace .inbox-detail__view-toggle {
  display: none;
}

.inbox-workspace .inbox-detail__body {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  overflow: hidden;
}

.inbox-workspace .conversation-area {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
  background: var(--ds-canvas);
}

.inbox-workspace .conversation-messages {
  min-height: 0;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 1.1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.inbox-workspace .msg__bubble {
  border-radius: var(--app-card-radius) var(--app-card-radius) var(--app-card-radius) 5px;
  font-size: 0.82rem;
}

.inbox-workspace .msg--out .msg__bubble {
  border-radius: var(--app-card-radius) var(--app-card-radius) 5px var(--app-card-radius);
}

.inbox-workspace .inbox-composer {
  display: flex;
  padding: 0.65rem 0.9rem 0.9rem;
  gap: 0.5rem;
  border-color: var(--ds-border);
  background: var(--ds-surface-solid);
  backdrop-filter: none;
}

.inbox-workspace .inbox-composer__input {
  min-height: var(--app-control-height);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface-solid-2);
  color: var(--ds-text);
  font: inherit;
  font-size: var(--app-body-size);
  resize: none;
}

.inbox-workspace .ai-analysis-panel {
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  margin: 0;
  align-self: stretch;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 1rem;
  border-width: 0 0 0 1px;
  border-color: var(--ds-border);
  background: var(--ds-surface-solid);
}

.inbox-workspace .ai-analysis-panel .ai-panel__head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: var(--app-header-height);
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface-solid);
}

.inbox-workspace .ai-analysis-panel #owner-work-state {
  max-width: 116px;
}

.inbox-workspace .ai-analysis-panel .ai-analysis-body {
  min-height: 0;
  height: auto;
  max-height: none;
  flex: 1 1 auto;
  overflow: visible;
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem;
}

/* Snapshot cards share one scroller so a long fact or expanded evidence stays reachable. */
.inbox-workspace .snapshot-card {
  --snapshot-text: #23352a;
  --snapshot-muted: #5c6d61;
  --snapshot-icon: #527618;
  --snapshot-icon-bg: #e3f1d6;
  margin: 0;
  padding: 1rem;
  min-width: 0;
  border: 1px solid #dce9d4;
  border-radius: 18px;
  background: linear-gradient(135deg, #f0f8e9, #f5faf2);
  color: var(--snapshot-text);
}

.inbox-workspace .snapshot-card--data {
  --snapshot-text: #21354f;
  --snapshot-muted: #5c6e83;
  --snapshot-icon: #2169b6;
  --snapshot-icon-bg: #dcecff;
  --snapshot-value-bg: #e5effa;
  --snapshot-row-border: #dce8f5;
  border-color: #d9e7f7;
  background: linear-gradient(135deg, #eef6ff, #f4f8fe);
}

.inbox-workspace .snapshot-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.inbox-workspace .snapshot-card__header > div { min-width: 0; }
.inbox-workspace .snapshot-card__header h3 {
  margin: 0 0 0.2rem;
  color: var(--snapshot-text);
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -0.025em;
}
.inbox-workspace .snapshot-card__header p {
  margin: 0;
  color: var(--snapshot-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.inbox-workspace :is(.snapshot-card__icon, .snapshot-fact-icon) {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  color: var(--snapshot-icon);
  background: var(--snapshot-icon-bg);
}
.inbox-workspace :is(.snapshot-card__icon, .snapshot-fact-icon) svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inbox-workspace .snapshot-card--insights .snapshot-card__icon svg { fill: currentColor; stroke-width: 1; }

.inbox-workspace #ai-insights.snapshot-insights {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--snapshot-text);
}
.inbox-workspace .snapshot-insights > li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.inbox-workspace .snapshot-insights > li > div { min-width: 0; padding-top: 0.3rem; }
.inbox-workspace .snapshot-insights strong { font-weight: 700; }
.inbox-workspace .snapshot-fact-icon { width: 2rem; height: 2rem; }
.inbox-workspace .snapshot-fact-icon svg { width: 1.15rem; height: 1.15rem; }
.inbox-workspace .snapshot-fact-origin {
  display: block;
  margin-top: 0.2rem;
  color: var(--snapshot-muted);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
}
.inbox-workspace .snapshot-empty { color: var(--snapshot-muted); }

.inbox-workspace .snapshot-data-list { display: grid; gap: 0; margin: 0; }
.inbox-workspace .snapshot-data-list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.22rem 0;
  border-top: 1px solid var(--snapshot-row-border);
}
.inbox-workspace .snapshot-data-list > div:first-child { border-top: 0; }
.inbox-workspace .snapshot-data-list :is(dt, dd) {
  min-width: 0;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.inbox-workspace .snapshot-data-list dt { padding: 0.4rem 0; color: var(--snapshot-muted); }
.inbox-workspace .snapshot-data-list dd {
  padding: 0.4rem 0.65rem;
  border-radius: 7px;
  background: var(--snapshot-value-bg);
  color: var(--snapshot-text);
  font-weight: 650;
}

.inbox-workspace .snapshot-evidence {
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface-solid);
}
.inbox-workspace .snapshot-evidence > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem;
  color: var(--ds-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.inbox-workspace .snapshot-evidence > summary::-webkit-details-marker { display: none; }
.inbox-workspace .snapshot-evidence > summary svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.inbox-workspace .snapshot-evidence[open] > summary svg { transform: rotate(90deg); }
.inbox-workspace .snapshot-evidence #evolving-job-brief { padding: 0 0.9rem 0.9rem; }
.inbox-workspace .snapshot-evidence:focus-within { outline: 2px solid var(--ds-lime-border); outline-offset: 2px; }

/* Collapse releases the brief's column instead of leaving an empty sidebar. */
.inbox-workspace .inbox-detail__body:has(> .ai-analysis-panel:not([open])) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.inbox-workspace .ai-analysis-panel:not([open]) { width: auto; height: auto; }

/* The existing view tabs also serve tablets where two detail columns cannot fit. */
@media (max-width: 1180px) {
  .inbox-workspace .inbox-detail { grid-template-rows: auto auto minmax(0, 1fr); }
  .inbox-workspace .inbox-detail__body,
  .inbox-workspace .inbox-detail__body:has(> .ai-analysis-panel:not([open])) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: auto;
  }
  .inbox-workspace .inbox-detail__view-toggle {
    display: grid; margin: 0; padding: 0.45rem var(--app-mobile-x); gap: 0.35rem;
    border-bottom: 1px solid var(--ds-border); background: var(--ds-surface-solid);
  }
  .inbox-workspace .inbox-detail[data-inbox-view='conversation'] .ai-analysis-panel,
  .inbox-workspace .inbox-detail[data-inbox-view='snapshot'] .conversation-area { display: none; }
  .inbox-workspace .inbox-detail[data-inbox-view='snapshot'] .ai-analysis-panel {
    display: block; width: 100%; height: 100%; border: 0;
  }
}

@media (max-width: 900px) {
  body:has(.inbox-workspace) .ws-mobile-topbar {
    display: none;
  }

  body:has(.inbox-workspace) .ws-main {
    height: calc(var(--inbox-viewport-height, 100dvh) - var(--ws-mobile-nav-height));
    min-height: 0;
    max-height: calc(var(--inbox-viewport-height, 100dvh) - var(--ws-mobile-nav-height));
    padding: 0;
    overflow: hidden;
  }

  .inbox-workspace .inbox-shell__inner {
    height: 100%;
    min-height: 0;
    padding: max(0.6rem, env(safe-area-inset-top)) 0 0;
    grid-template-columns: minmax(0, 1fr);
  }

  /* The page shell already owns the mobile inset; the list head must not add it again. */
  .inbox-workspace .inbox-list__head {
    padding: 0 var(--app-mobile-x) 0.8rem;
  }

  .inbox-workspace .inbox-list,
  .inbox-workspace .inbox-detail {
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .inbox-workspace .inbox-list {
    display: flex;
  }

  .inbox-workspace .inbox-items {
    min-height: 0;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--ws-mobile-nav-height) + env(safe-area-inset-bottom) + 1rem);
    scroll-padding-bottom: calc(var(--ws-mobile-nav-height) + env(safe-area-inset-bottom) + 1rem);
    -webkit-overflow-scrolling: touch;
  }

  .inbox-workspace .inbox-detail {
    display: none;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-list {
    display: none;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .inbox-workspace .inbox-page-header {
    min-height: var(--app-header-height);
  }

  .inbox-workspace .inbox-tabs {
    margin-top: 0.65rem;
  }

  .inbox-workspace .inbox-tab {
    min-height: 40px;
  }

  .inbox-workspace .inbox-item {
    min-height: var(--app-card-min-h);
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail__back {
    display: grid;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail__head {
    min-height: var(--app-header-height);
    padding: 0.55rem var(--app-mobile-x);
  }

  .inbox-workspace .inbox-detail__identity {
    flex: 1 1 0;
    overflow: hidden;
  }

  .inbox-workspace .inbox-detail__name { white-space: normal; overflow-wrap: anywhere; }
  .inbox-workspace .inbox-detail__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail__actions {
    display: flex;
    flex: 0 0 auto;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail__actions .btn-card {
    min-height: 34px;
    padding-inline: 0.6rem;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .inbox-workspace .inbox-detail__view-toggle {
    display: grid;
    margin: 0;
    padding: 0.45rem var(--app-mobile-x);
    gap: 0.35rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-solid);
  }

  .inbox-workspace .inbox-detail__view-pill {
    min-height: 36px;
  }

  .inbox-workspace .inbox-detail__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-workspace .msg__bubble {
    max-width: 88%;
  }

  .inbox-workspace.inbox-shell--conversation-open .conversation-messages {
    padding: 1rem var(--app-mobile-x);
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-composer {
    padding: 0.55rem var(--app-mobile-x) 0.65rem;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail[data-inbox-view='conversation'] .ai-analysis-panel,
  .inbox-workspace.inbox-shell--conversation-open .inbox-detail[data-inbox-view='snapshot'] .conversation-area {
    display: none;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail[data-inbox-view='snapshot'] .ai-analysis-panel {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail[data-inbox-view='snapshot'] .ai-panel__head {
    display: none;
  }

  .inbox-workspace.inbox-shell--conversation-open .inbox-detail[data-inbox-view='snapshot'] .ai-analysis-body {
    padding-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inbox-workspace .inbox-item {
    transition: none;
  }

  .inbox-workspace .inbox-item-shell__action {
    transition: none;
  }
}

/* Business Profile density overrides intentionally follow the canonical
 * shared component layer so page composition cannot be reset by base cards. */
.business-profile-page .business-profile-link-row.app-row-card { min-height: 68px; }
.business-profile-page .business-service-card.app-row-card { min-height: 128px; }
.business-profile-page .business-profile-question.app-row-card { min-height: 60px; }
.business-profile-page .business-profile-rule-list .business-profile-link-row.app-row-card { min-height: 72px; }

@media (max-width: 760px) {
  .business-profile-page .business-service-card.app-row-card { min-height: 116px; }
  .business-profile-page .business-profile-question.app-row-card { min-height: 56px; }
}

/* Calendar experience
 * Shared Traden primitives own the page shell, header, controls and tones.
 * This section only defines the month, week timeline and day-route structures. */
.calendar-page {
  --calendar-minute: 1px;
}

.calendar-page__header .app-icon-button {
  position: relative;
}

.calendar-notification-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--ds-surface-solid);
  border-radius: 999px;
  background: var(--ds-danger);
}

.calendar-experience {
  width: min(100%, 820px);
  margin-inline: auto;
  display: grid;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
}

.calendar-period-nav {
  display: grid;
  grid-template-columns: var(--app-control-height) minmax(0, 1fr) var(--app-control-height);
  align-items: center;
  gap: 0.75rem;
}

.calendar-period-nav__button,
.calendar-day-nav a,
.calendar-route-locate {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-solid);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
}

.calendar-period-nav__button {
  width: var(--app-control-height);
  height: var(--app-control-height);
  border-radius: 12px;
}

.calendar-period-nav__button svg,
.calendar-day-nav a svg,
.calendar-route-locate svg,
.calendar-today-button svg,
.calendar-fab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-period-nav__label {
  min-width: 0;
  min-height: var(--app-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--ds-text);
  text-decoration: none;
}

.calendar-period-nav__label strong {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.calendar-period-nav__label span {
  color: var(--ds-muted);
  font-size: 1rem;
  font-weight: 800;
}

.calendar-today-button {
  min-height: 40px;
  width: fit-content;
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.48rem 1rem;
  border: 1px solid var(--app-tone-border, #dceab8);
  border-radius: var(--ds-radius-pill);
  background: var(--app-tone-bg, #f3f8e6);
  color: var(--app-tone-fg, #668600);
  font-size: var(--app-body-size);
  font-weight: 820;
  text-decoration: none;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--ds-lime) 10%, transparent);
}

.calendar-view-tabs.app-filter-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.calendar-view-tabs.app-filter-tabs a {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-solid);
  color: var(--ds-text);
  font-size: var(--app-body-size);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--ds-shadow-sm);
}

.calendar-view-tabs.app-filter-tabs a:is(.is-active, .crm-segmented__item--active) {
  border-color: color-mix(in srgb, var(--ds-lime) 65%, var(--ds-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ds-lime) 80%, #4f7600), var(--ds-lime));
  color: var(--ds-lime-ink);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ds-lime) 22%, transparent);
}

.calendar-view[hidden] {
  display: none !important;
}

.calendar-view {
  position: relative;
  min-width: 0;
}

.calendar-view--month,
.calendar-view--week,
.calendar-view--day {
  display: grid;
  gap: 0.9rem;
}

.calendar-month-card {
  padding: 1rem;
  overflow: hidden;
}

.calendar-month-weekdays,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-month-weekdays span {
  padding: 0.35rem 0.15rem 0.7rem;
  color: var(--ds-muted);
  font-size: 0.64rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-month-day {
  min-width: 0;
  min-height: 74px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.36rem;
  border-radius: 14px;
  color: var(--ds-text);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.calendar-month-day:hover,
.calendar-month-day:focus-visible {
  background: var(--ds-surface-solid-2);
  outline: none;
}

.calendar-month-day strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 850;
}

.calendar-month-day.is-selected strong {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ds-lime) 80%, #557900), var(--ds-lime));
  color: var(--ds-lime-ink);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ds-lime) 28%, transparent);
}

.calendar-month-day.is-today:not(.is-selected) strong {
  box-shadow: inset 0 0 0 2px var(--ds-lime);
}

.calendar-month-day.is-muted {
  color: color-mix(in srgb, var(--ds-muted) 45%, transparent);
}

.calendar-month-day__dots,
.calendar-month-legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.calendar-month-day__dots {
  min-height: 5px;
}

.calendar-month-day__dots i,
.calendar-month-legend i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ds-lime);
}

.calendar-month-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.15rem;
  padding-top: 0.85rem;
  color: var(--ds-muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.calendar-upcoming {
  overflow: hidden;
}

.calendar-upcoming > .app-section__header {
  min-height: 54px;
  padding: 0.85rem 1rem;
}

.calendar-upcoming > .app-section__header h2 {
  font-size: var(--app-section-title-size);
}

.calendar-upcoming > .app-section__header h2 span {
  color: var(--ds-muted);
  font-weight: 750;
}

.calendar-upcoming > .app-section__header a {
  color: var(--ds-lime);
  font-size: var(--app-meta-size);
  font-weight: 850;
  text-decoration: none;
}

.calendar-upcoming__list {
  display: grid;
}

.calendar-upcoming-row,
.calendar-route-stop {
  width: 100%;
  min-width: 0;
  border: 0;
  border-top: 1px solid var(--ds-border);
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  text-align: left;
}

.calendar-upcoming-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 1rem;
}

.calendar-upcoming-row.is-clickable,
.calendar-route-stop.is-clickable,
.calendar-timeline-event[data-lead-id] {
  cursor: pointer;
}

.calendar-upcoming-row.is-clickable:hover,
.calendar-route-stop.is-clickable:hover {
  background: var(--ds-surface-solid-2);
}

.calendar-upcoming-row time,
.calendar-route-stop time {
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.calendar-upcoming-row__body,
.calendar-route-stop__body {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.calendar-upcoming-row__body strong,
.calendar-route-stop__body strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--app-title-size);
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-upcoming-row__body small,
.calendar-route-stop__body small,
.calendar-route-stop__body em {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
  font-style: normal;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-empty-state,
.calendar-timeline-empty {
  padding: 1.25rem;
  color: var(--ds-muted);
  font-size: var(--app-body-size);
  text-align: center;
}

.calendar-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.calendar-week-strip a {
  min-width: 0;
  min-height: 66px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.16rem;
  border-radius: var(--ds-radius-pill);
  color: var(--ds-muted);
  text-decoration: none;
}

.calendar-week-strip a span {
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-week-strip a strong {
  color: var(--ds-text);
  font-size: 0.9rem;
  font-weight: 850;
}

.calendar-week-strip a i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ds-lime);
}

.calendar-week-strip a.is-selected {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ds-lime) 80%, #557900), var(--ds-lime));
  color: var(--ds-lime-ink);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ds-lime) 25%, transparent);
}

.calendar-week-strip a.is-selected strong {
  color: var(--ds-lime-ink);
}

.calendar-week-strip a.is-selected i {
  background: var(--ds-lime-ink);
}

.calendar-week-timeline {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 1rem;
  overflow: hidden;
}

.calendar-outside-hours {
  overflow: hidden;
}

.calendar-outside-hours > header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
}

.calendar-outside-hours > header strong {
  font-size: var(--app-meta-size);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-outside-hours > header span {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--app-tone-bg, #edf4df);
  color: var(--app-tone-fg, #638200);
  font-size: 0.62rem;
  font-weight: 850;
}

.calendar-week-timeline__hours {
  display: grid;
  grid-template-rows: repeat(10, 60px);
}

.calendar-week-timeline__hours span {
  padding-top: 0.1rem;
  color: var(--ds-muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.calendar-week-timeline__track {
  position: relative;
  min-width: 0;
  height: 600px;
  border-left: 1px solid var(--ds-border);
}

.calendar-week-timeline__line {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--ds-border);
}

.calendar-week-timeline__line:nth-child(2) { top: 60px; }
.calendar-week-timeline__line:nth-child(3) { top: 120px; }
.calendar-week-timeline__line:nth-child(4) { top: 180px; }
.calendar-week-timeline__line:nth-child(5) { top: 240px; }
.calendar-week-timeline__line:nth-child(6) { top: 300px; }
.calendar-week-timeline__line:nth-child(7) { top: 360px; }
.calendar-week-timeline__line:nth-child(8) { top: 420px; }
.calendar-week-timeline__line:nth-child(9) { top: 480px; }
.calendar-week-timeline__line:nth-child(10) { top: 540px; }

.calendar-timeline-event {
  position: absolute;
  z-index: 1;
  top: calc(var(--calendar-start) * var(--calendar-minute));
  right: 0;
  left: 0;
  height: max(54px, calc(var(--calendar-duration) * var(--calendar-minute)));
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title pill"
    "time pill"
    "customer pill";
  align-content: center;
  gap: 0.16rem 0.65rem;
  padding: 0.65rem 0.75rem;
  overflow: hidden;
  border: 1px solid var(--app-tone-border, var(--ds-border));
  border-left: 3px solid var(--app-tone-fg, var(--ds-lime));
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-tone-bg, #edf4df) 82%, var(--ds-surface-solid));
  color: var(--ds-text);
  font: inherit;
  text-align: left;
  box-shadow: var(--ds-shadow-sm);
}

.calendar-timeline-event.has-conflict {
  border-color: color-mix(in srgb, var(--ds-danger) 54%, var(--ds-border));
}

.calendar-timeline-event strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  font-size: var(--app-title-size);
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-timeline-event > span,
.calendar-timeline-event > small {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-timeline-event > span { grid-area: time; }
.calendar-timeline-event > small { grid-area: customer; }

.calendar-timeline-event > em {
  grid-area: pill;
  align-self: end;
  font-style: normal;
}

.calendar-timeline-event.is-compact {
  grid-template-areas:
    "title pill"
    "time pill";
  padding-block: 0.42rem;
}

.calendar-timeline-event.is-compact > small {
  display: none;
}

.calendar-timeline-event.starts-before::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--app-tone-fg, var(--ds-lime)) 0 7px, transparent 7px 11px);
}

.calendar-day-nav {
  min-height: 44px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 0.5rem;
}

.calendar-day-nav a {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.calendar-day-nav strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--app-title-size);
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-route-map-shell {
  position: relative;
}

.calendar-route-map {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--app-card-radius);
  background:
    linear-gradient(28deg, transparent 0 36%, color-mix(in srgb, #ffffff 78%, transparent) 36% 39%, transparent 39%),
    linear-gradient(118deg, transparent 0 50%, color-mix(in srgb, #ffffff 82%, transparent) 50% 54%, transparent 54%),
    repeating-linear-gradient(0deg, transparent 0 44px, color-mix(in srgb, #ffffff 38%, transparent) 44px 46px),
    repeating-linear-gradient(90deg, transparent 0 58px, color-mix(in srgb, #ffffff 32%, transparent) 58px 60px),
    #eaf1e0;
  box-shadow: var(--ds-shadow-sm);
}

.calendar-route-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 350;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.5)),
    color-mix(in srgb, var(--ds-surface-solid) 32%, transparent);
  pointer-events: none;
}

.calendar-route-map .leaflet-marker-pane {
  z-index: 410;
}

.calendar-route-map .leaflet-popup-pane {
  z-index: 420;
}

.calendar-route-map .leaflet-top,
.calendar-route-map .leaflet-bottom {
  z-index: 430;
}

.calendar-route-map .leaflet-tile-pane {
  filter: grayscale(0.18) saturate(0.26) contrast(0.56) brightness(1.24);
  opacity: 0.5;
}

.calendar-map-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
  font-weight: 750;
  text-align: center;
  pointer-events: none;
}

.calendar-route-map.is-map-initialized .calendar-map-fallback,
.calendar-route-map.is-live-map .calendar-map-fallback {
  display: none;
}

.calendar-route-map.is-map-offline .calendar-map-fallback {
  display: grid;
  z-index: 500;
  background: color-mix(in srgb, var(--ds-surface-solid) 88%, transparent);
}

.calendar-route-map .leaflet-control-attribution {
  max-width: calc(100% - 4.5rem);
  font-size: 0.56rem;
  line-height: 1.25;
}

.calendar-route-map .leaflet-popup-content-wrapper,
.calendar-route-map .leaflet-popup-tip {
  background: var(--ds-surface-solid);
  color: var(--ds-text);
}

.calendar-route-map .leaflet-popup-content-wrapper {
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  box-shadow: var(--ds-shadow-md);
}

.calendar-leaflet-div-icon {
  border: 0;
  background: transparent;
}

.calendar-map-marker {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid color-mix(in srgb, var(--app-tone-bg, #edf4df) 86%, #ffffff);
  border-radius: 999px;
  background: var(--app-tone-fg, var(--ds-lime));
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 850;
  box-shadow: 0 9px 20px color-mix(in srgb, var(--app-tone-fg, var(--ds-lime)) 28%, transparent);
}

.calendar-map-popup {
  min-width: 170px;
  display: grid;
  gap: 0.2rem;
  font-family: inherit;
}

.calendar-map-popup strong {
  font-size: var(--app-title-size);
  line-height: 1.25;
}

.calendar-map-popup span,
.calendar-map-popup small {
  color: var(--ds-muted);
  font-size: var(--app-meta-size);
  line-height: 1.35;
}

.calendar-route-locate {
  position: absolute;
  z-index: 500;
  right: 1rem;
  bottom: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  box-shadow: var(--ds-shadow-sm);
}

.calendar-route-list {
  overflow: hidden;
}

.calendar-route-stop {
  min-height: 96px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
}

.calendar-route-stop:first-child {
  border-top: 0;
}

.calendar-route-stop.is-map-selected {
  background: color-mix(in srgb, var(--ds-lime-soft) 62%, var(--ds-surface-solid));
  box-shadow: inset 3px 0 0 var(--ds-lime);
}

.calendar-route-stop__number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--app-tone-fg, var(--ds-lime));
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
}

.calendar-route-stop__body {
  gap: 0.18rem;
}

.calendar-route-stop__body em {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.calendar-route-stop__body em svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.calendar-route-stop > .app-status-pill {
  align-self: center;
}

.calendar-fab {
  position: sticky;
  z-index: 4;
  right: 0;
  bottom: 0.75rem;
  width: 54px;
  height: 54px;
  margin: -4.2rem 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ds-lime) 76%, #426700), var(--ds-lime));
  color: var(--ds-lime-ink);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--ds-lime) 34%, transparent);
  cursor: pointer;
}

@media (max-width: 760px) {
  .calendar-experience {
    gap: 0.75rem;
    padding-bottom: 1rem;
  }

  .calendar-period-nav {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 0.45rem;
  }

  .calendar-period-nav__button {
    width: 48px;
    height: 48px;
  }

  .calendar-period-nav__label {
    min-height: 48px;
  }

  .calendar-view-tabs.app-filter-tabs a {
    min-height: 40px;
    padding-inline: 0.5rem;
  }

  .calendar-month-card {
    padding: 0.75rem 0.45rem;
  }

  .calendar-month-day {
    min-height: 56px;
    gap: 0.2rem;
    border-radius: 11px;
  }

  .calendar-month-day strong {
    width: 31px;
    height: 31px;
    font-size: 0.76rem;
  }

  .calendar-month-weekdays span {
    padding-bottom: 0.4rem;
    font-size: 0.58rem;
  }

  .calendar-month-legend {
    gap: 0.75rem;
    padding-top: 0.65rem;
    font-size: 0.6rem;
  }

  .calendar-upcoming > .app-section__header {
    min-height: 50px;
    padding: 0.75rem 0.8rem;
  }

  .calendar-upcoming-row {
    min-height: 64px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.65rem 0.8rem;
  }

  .calendar-week-strip a {
    min-height: 58px;
  }

  .calendar-week-timeline {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 0.75rem 0.55rem;
  }

  .calendar-timeline-event {
    gap: 0.12rem 0.45rem;
    padding: 0.55rem 0.6rem;
  }

  .calendar-timeline-event > em {
    min-height: 22px;
    padding: 0.24rem 0.42rem;
    font-size: 0.54rem;
  }

  .calendar-day-nav {
    margin-inline: -0.15rem;
  }

  .calendar-day-nav strong {
    font-size: 0.82rem;
  }

  .calendar-route-map {
    min-height: 300px;
  }

  .calendar-map-marker {
    width: 38px;
    height: 38px;
  }

  .calendar-route-stop {
    min-height: 88px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 0.6rem;
    padding: 0.75rem 0.8rem;
  }

  .calendar-route-stop__number {
    width: 28px;
    height: 28px;
  }

  .calendar-fab {
    position: fixed;
    z-index: 30;
    right: var(--app-mobile-x);
    bottom: calc(var(--ws-mobile-nav-height) + 0.75rem);
    width: 50px;
    height: 50px;
    margin: 0;
  }
}

@media (max-width: 420px) {
  .calendar-upcoming-row > .app-status-pill,
  .calendar-route-stop > .app-status-pill {
    min-height: 22px;
    padding: 0.22rem 0.4rem;
    font-size: 0.52rem;
  }

  .calendar-route-stop {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .calendar-route-stop > .app-status-pill {
    grid-column: 2;
    justify-self: start;
  }
}

/* Keep the create workspace overrides after the shared app-page contract. */
body .workspace-shell .ws-content.app-page.document-create-page {
  width: min(100%, 860px);
  padding-bottom: 2rem;
}

@media (max-width: 760px) {
  body .workspace-shell .ws-content.app-page.document-create-page {
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/*
 * WebKit standalone PWAs currently calculate 100dvh without the lower safe-area
 * strip on some iPhones. Keep dynamic viewport units in browsers and Android,
 * but use WebKit's full standalone 100vh containing block so fixed bottom UI is
 * anchored to the physical screen edge. The nav itself still owns safe padding.
 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) and (display-mode: standalone) {
    html {
      height: 100vh;
      min-height: 100vh;
    }

    body:has(.workspace-shell > .ws-main),
    .workspace-shell:has(> .ws-main) {
      height: 100vh;
      min-height: 100vh;
    }

    body:has(.workspace-shell > .ws-main) .ws-main {
      height: 100%;
      max-height: 100%;
    }

    body:has(.inbox-workspace) .ws-main {
      height: calc(100vh - var(--ws-mobile-nav-height));
      max-height: calc(100vh - var(--ws-mobile-nav-height));
    }
  }
}

/* AI-generated quote review ------------------------------------------------ */
.quote-approval-page { width: min(100%, 760px); margin-inline: auto; padding-bottom: 2rem; }
.quote-approval-header .app-page__identity { text-decoration: none; }
.quote-approval-more { position: relative; }
.quote-approval-more > summary { list-style: none; }
.quote-approval-more > summary::-webkit-details-marker { display: none; }
.quote-approval-more > nav { position: absolute; z-index: 30; top: calc(100% + .4rem); right: 0; display: grid; width: 175px; padding: .4rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-solid); box-shadow: var(--ds-shadow-lg); }
.quote-approval-more > nav a { padding: .68rem .72rem; border-radius: var(--ds-radius-sm); color: var(--ds-text); font-size: var(--ds-text-sm); font-weight: 700; text-decoration: none; }
.quote-approval-more > nav a:hover { background: var(--ds-surface-2); }

.quote-approval-page .quote-review-summary { margin-top: .75rem; padding: 1.1rem 1.2rem 0; }
.quote-review-summary__title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--ds-border); }
.quote-review-summary__title > div { min-width: 0; }
.quote-review-summary__title h2 { margin: 0; color: var(--ds-text); font-size: var(--app-page-title-size); letter-spacing: -.04em; }
.quote-review-summary__title p { margin: .25rem 0 0; color: var(--ds-muted); font-size: var(--ds-text-sm); overflow-wrap: anywhere; }
.quote-review-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; margin-top: .15rem; padding: .42rem .62rem; border-radius: 999px; font-size: var(--ds-text-xs); font-weight: 700; white-space: nowrap; }
.quote-review-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.quote-review-status.is-ready { background: var(--ds-lime-soft); color: var(--ds-lime); }
.quote-review-status.needs-attention { background: var(--ds-warning-soft); color: var(--ds-warning); }
.quote-review-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.quote-review-metadata > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; min-height: 76px; align-content: center; padding: .65rem .75rem; border-right: 1px solid var(--ds-border); }
.quote-review-metadata > div:first-child { padding-left: 0; }
.quote-review-metadata > div:last-child { border-right: 0; }
.quote-review-metadata svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--ds-muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.quote-review-metadata dt { display: flex; align-items: center; gap: .35rem; color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 700; }
.quote-review-metadata dd { margin: .08rem 0 0; color: var(--ds-text-soft); font-size: var(--ds-text-sm); font-weight: 700; }

.quote-review-history { margin-top: .65rem; padding: 0; overflow: visible; }
.quote-review-history > summary { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; min-height: 52px; align-items: center; gap: .6rem; padding: 0 1rem; color: var(--ds-text); cursor: pointer; list-style: none; }
.quote-review-history > summary::-webkit-details-marker { display: none; }
.quote-review-history > summary svg { width: 19px; height: 19px; fill: none; stroke: var(--ds-muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.quote-review-history > summary > span svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.quote-review-history[open] > summary > span svg { transform: rotate(90deg); }
.quote-review-history > summary strong { font-size: var(--ds-text-sm); }
.quote-review-history__list { display: grid; gap: .55rem; padding: .1rem 1rem .9rem 3.15rem; }
.quote-review-history__list article { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: .55rem; }
.quote-review-history__list article > i { width: 7px; height: 7px; margin-top: .3rem; border-radius: 50%; background: var(--ds-lime); }
.quote-review-history__list article strong { display: block; color: var(--ds-text-soft); font-size: var(--ds-text-xs); }
.quote-review-history__list article small { display: block; margin-top: .12rem; color: var(--ds-muted); font-size: var(--ds-text-xs); }
.quote-review-history__list article p { margin: .25rem 0 0; color: var(--ds-muted); font-size: var(--ds-text-xs); }

.quote-approval-page .quote-readiness { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: .65rem; padding: 1rem 1.15rem; border-left: 4px solid var(--ds-lime); }
.quote-readiness.needs-attention { border-left-color: var(--ds-warning); }
.quote-readiness__ring { position: relative; display: grid; width: 86px; height: 86px; place-items: center; }
.quote-readiness__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.quote-readiness__ring circle { fill: none; stroke: var(--ds-border); stroke-width: 6; }
.quote-readiness__ring .quote-readiness__value { stroke: var(--ds-lime); stroke-linecap: round; transition: stroke-dashoffset 400ms ease; }
.quote-readiness.needs-attention .quote-readiness__value { stroke: var(--ds-warning); }
.quote-readiness__ring strong { color: var(--ds-lime); font-size: 1rem; }
.quote-readiness.needs-attention .quote-readiness__ring strong { color: var(--ds-warning); }
.quote-readiness__copy h2 { margin: 0; color: var(--ds-text); font-size: var(--ds-text-md); }
.quote-readiness__copy p { margin: .2rem 0 .55rem; color: var(--ds-muted); font-size: var(--ds-text-sm); }
.quote-readiness__copy progress { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 99px; background: var(--ds-border); }
.quote-readiness__copy progress::-webkit-progress-bar { border-radius: 99px; background: var(--ds-border); }
.quote-readiness__copy progress::-webkit-progress-value { border-radius: 99px; background: var(--ds-lime); }
.quote-readiness__copy progress::-moz-progress-bar { border-radius: 99px; background: var(--ds-lime); }
.quote-readiness.needs-attention progress::-webkit-progress-value { background: var(--ds-warning); }
.quote-readiness.needs-attention progress::-moz-progress-bar { background: var(--ds-warning); }
.quote-readiness > ul { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35rem; margin: -.25rem 0 0; padding: 0; list-style: none; }
.quote-readiness > ul li { padding: .26rem .42rem; border-radius: var(--ds-radius-sm); background: var(--ds-warning-soft); color: var(--ds-warning); font-size: var(--ds-text-xs); font-weight: 700; }

.quote-approval-page .quote-service-recommendation { margin-top: .65rem; padding: .85rem 1rem 0; }
.quote-service-recommendation > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.quote-review-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--ds-radius-md); background: var(--ds-lime-soft); color: var(--ds-lime); }
.quote-review-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.quote-service-recommendation > header h2 { margin: 0; color: var(--ds-text); font-size: var(--ds-text-md); }
.quote-review-edit { display: inline-flex; align-items: center; gap: .28rem; padding: .42rem .58rem; border: 1px solid color-mix(in srgb, var(--ds-lime) 45%, var(--ds-border)); border-radius: var(--ds-radius-sm); color: var(--ds-lime); font-size: var(--ds-text-xs); font-weight: 700; text-decoration: none; }
.quote-review-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.quote-service-recommendation__body { padding: .75rem 0 .85rem; }
.quote-service-recommendation__body h3 { margin: 0; color: var(--ds-text); font-size: var(--ds-text-sm); }
.quote-service-recommendation__body p { max-width: 36rem; margin: .22rem 0 0; color: var(--ds-muted); font-size: var(--ds-text-xs); line-height: 1.45; }
.quote-service-recommendation > footer { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--ds-border); }
.quote-service-recommendation > footer span { color: var(--ds-muted); font-size: var(--ds-text-xs); }
.quote-service-recommendation > footer strong { color: var(--ds-text); font-size: var(--ds-text-xl); }

.quote-approval-page .quote-review-details { margin-top: .65rem; padding: .65rem; }
.quote-review-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--ds-border); }
.quote-review-tabs button { position: relative; display: flex; min-width: 0; height: 44px; align-items: center; justify-content: center; gap: .35rem; border: 0; background: transparent; color: var(--ds-muted); font: inherit; font-size: var(--ds-text-xs); font-weight: 700; cursor: pointer; }
.quote-review-tabs button::after { content: ''; position: absolute; right: .2rem; bottom: -1px; left: .2rem; height: 2px; border-radius: 99px; background: transparent; }
.quote-review-tabs button[aria-selected="true"] { color: var(--ds-lime); }
.quote-review-tabs button[aria-selected="true"]::after { background: var(--ds-lime); }
.quote-review-tabs svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.quote-review-tab-panel[hidden] { display: none; }
.quote-review-table-head { display: flex; min-height: 38px; align-items: center; justify-content: space-between; padding: 0 .75rem; border-bottom: 1px solid var(--ds-border); color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 700; }
.quote-review-line-items article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 68px; align-items: center; gap: .65rem; padding: .55rem .75rem; border-bottom: 1px solid var(--ds-border); }
.quote-review-line-items article strong { display: block; color: var(--ds-text); font-size: var(--ds-text-md); line-height: 1.5; overflow-wrap: anywhere; }
.quote-review-line-items article small { display: block; margin-top: .16rem; color: var(--ds-muted); font-size: var(--ds-text-xs); }
.quote-review-line-items article b { white-space: nowrap; color: var(--ds-text); font-size: var(--ds-text-sm); }
.quote-review-adjustments { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: .35rem; margin: .65rem; border: 1px dashed color-mix(in srgb, var(--ds-lime) 42%, var(--ds-border)); border-radius: var(--ds-radius-sm); background: var(--ds-lime-soft); color: var(--ds-lime); font-size: var(--ds-text-xs); font-weight: 700; text-decoration: none; }
.quote-review-adjustments svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.quote-review-totals, .quote-review-customer { display: grid; margin: 0; padding: .55rem .75rem; }
.quote-review-totals > div, .quote-review-customer > div { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ds-border); }
.quote-review-totals > div:last-child, .quote-review-customer > div:last-child { border-bottom: 0; }
.quote-review-totals dt, .quote-review-customer dt { color: var(--ds-muted); font-size: var(--ds-text-xs); }
.quote-review-totals dd, .quote-review-customer dd { min-width: 0; max-width: 68%; overflow-wrap: anywhere; margin: 0; color: var(--ds-text); font-size: var(--ds-text-sm); font-weight: 700; text-align: right; }
.quote-review-totals > div:last-child dd { color: var(--ds-lime); font-size: var(--ds-text-md); }
.quote-review-notes, .quote-review-empty { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 1rem; color: var(--ds-muted); font-size: var(--ds-text-xs); line-height: 1.5; }
.quote-review-edit-notes { display: inline-flex; align-items: center; gap: .35rem; margin: 0 1rem 1rem; color: var(--ds-lime); font-size: var(--ds-text-xs); font-weight: 700; text-decoration: none; }
.quote-review-edit-notes svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.quote-review-actions { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: .65rem; margin-top: .65rem; padding: .75rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-surface-solid); }
.quote-review-actions form, .quote-review-actions button { width: 100%; }
.quote-review-actions .btn { display: flex; min-height: var(--ds-touch-height); font-size: var(--ds-text-md); white-space: normal; align-items: center; justify-content: center; gap: .42rem; }
.quote-review-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.quote-review-save { border: 1px solid var(--ds-border-high); background: var(--ds-surface-solid); color: var(--ds-text); }
.quote-review-approve:disabled { cursor: not-allowed; opacity: .52; }

.quote-approval-dialog { margin: auto; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; width: min(calc(100% - 2rem), 440px); padding: 1.3rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-surface-solid); color: var(--ds-text); box-shadow: var(--ds-shadow-lg); text-align: center; }
.quote-approval-dialog::backdrop { background: rgba(10, 14, 20, .54); backdrop-filter: blur(3px); }
.quote-approval-dialog > form:first-child { position: absolute; top: .65rem; right: .65rem; }
.quote-approval-dialog__icon { display: grid; width: 52px; height: 52px; margin: 0 auto .75rem; place-items: center; border-radius: 50%; background: var(--ds-lime-soft); color: var(--ds-lime); }
.quote-approval-dialog__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.quote-approval-dialog h2 { margin: 0; font-size: var(--ds-text-xl); }
.quote-approval-dialog > p { margin: .45rem auto 1rem; color: var(--ds-muted); font-size: var(--ds-text-sm); line-height: 1.5; }
.quote-approval-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.quote-approval-dialog > div form, .quote-approval-dialog > div button { min-width: 0; width: 100%; }
.quote-approval-dialog .btn { min-height: var(--ds-touch-height); padding-inline: .65rem; border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); white-space: normal; }
.quote-approval-dialog :focus-visible, .quote-approval-page :is(button, a, summary):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 3px; }
.quote-review-tab-panel:focus-visible { outline: 2px solid var(--ds-lime); outline-offset: -2px; }

.quote-review-loading { position: fixed; z-index: 8500; inset: 0; overflow: auto; padding: max(1rem, env(safe-area-inset-top)) max(1rem, calc((100vw - 760px) / 2)) 2rem; background: var(--ds-canvas); opacity: 0; transition: opacity 120ms ease; }
.quote-review-loading.is-visible { opacity: 1; }
.quote-review-loading > header { display: grid; grid-template-columns: 48px minmax(0, 1fr) 42px 42px; gap: .65rem; align-items: center; min-height: 68px; }
.quote-review-loading > header > i:first-child { width: 44px; height: 44px; border-radius: var(--ds-radius-md); }
.quote-review-loading header span { display: grid; gap: .35rem; }
.quote-review-loading header b:first-child { width: 140px; height: 14px; }
.quote-review-loading header b:last-child { width: 95px; height: 9px; }
.quote-review-loading > header > i:not(:first-child) { width: 38px; height: 38px; border-radius: var(--ds-radius-md); }
.quote-review-loading section { margin-top: .65rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-surface-solid); }
.quote-review-loading__summary { display: grid; gap: .55rem; min-height: 145px; padding: 1rem; }
.quote-review-loading__summary > b { width: 45%; height: 20px; }
.quote-review-loading__summary > span { width: 64%; height: 10px; }
.quote-review-loading__summary > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; border-top: 1px solid var(--ds-border); padding-top: .8rem; }
.quote-review-loading__summary i { width: 72%; height: 30px; }
.quote-review-loading__history { display: flex; min-height: 52px; align-items: center; gap: .65rem; padding: 0 1rem; }
.quote-review-loading__history i { width: 20px; height: 20px; border-radius: 50%; }
.quote-review-loading__history b { width: 100px; height: 11px; }
.quote-review-loading__readiness { display: grid; grid-template-columns: 86px 1fr; gap: 1rem; align-items: center; min-height: 118px; padding: 1rem; }
.quote-review-loading__readiness > i { width: 82px; height: 82px; border-radius: 50%; }
.quote-review-loading__readiness span { display: grid; gap: .55rem; }
.quote-review-loading__readiness b:nth-child(1) { width: 42%; height: 13px; }
.quote-review-loading__readiness b:nth-child(2) { width: 58%; height: 10px; }
.quote-review-loading__readiness b:nth-child(3) { width: 100%; height: 6px; }
.quote-review-loading__recommendation { display: grid; gap: .6rem; min-height: 125px; padding: 1rem; }
.quote-review-loading__recommendation b { width: 45%; height: 14px; }
.quote-review-loading__recommendation span:nth-child(2) { width: 34%; height: 12px; }
.quote-review-loading__recommendation span:last-child { width: 72%; height: 10px; }
.quote-review-loading__details { padding: .65rem; }
.quote-review-loading__details nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; min-height: 44px; border-bottom: 1px solid var(--ds-border); }
.quote-review-loading__details nav i { width: 70%; height: 10px; place-self: center; }
.quote-review-loading__details > div { display: grid; grid-template-columns: 38px 1fr 72px; gap: .65rem; align-items: center; min-height: 66px; border-bottom: 1px solid var(--ds-border); }
.quote-review-loading__details > div i { width: 36px; height: 36px; border-radius: var(--ds-radius-md); }
.quote-review-loading__details > div span { display: grid; gap: .35rem; }
.quote-review-loading__details > div b:first-child { width: 60%; height: 10px; }
.quote-review-loading__details > div b:last-child { width: 80%; height: 8px; }
.quote-review-loading__details > div strong { width: 68px; height: 11px; }
.quote-review-loading i, .quote-review-loading b, .quote-review-loading strong, .quote-review-loading section > span { display: block; border-radius: 999px; background: var(--ds-border); animation: ws-skeleton-pulse 1.3s ease-in-out infinite; }

@keyframes ws-skeleton-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  body .workspace-shell .ws-content.app-page.quote-approval-page { padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); padding-bottom: var(--ds-space-2); scroll-padding-block: 1rem calc(var(--ds-touch-height) + 3rem); }
  .quote-review-actions { position: sticky; bottom: 0; z-index: 6; box-shadow: var(--ds-shadow-sm); }
  .quote-approval-header { padding-top: max(.3rem, env(safe-area-inset-top)); }
  .quote-review-loading { padding-inline: var(--app-mobile-x); padding-bottom: calc(var(--ws-mobile-nav-height, 92px) + env(safe-area-inset-bottom) + 1rem); }
}
@media (max-width: 560px) {
  .quote-approval-page .quote-review-summary { padding-inline: 1rem; }
  .quote-review-summary__title { gap: .55rem; }
  .quote-review-summary__title h2 { font-size: var(--app-page-title-size-mobile); }
  .quote-review-summary__title p { font-size: var(--ds-text-xs); }
  .quote-review-status { padding-inline: .48rem; font-size: var(--ds-text-xs); }
  .quote-review-metadata > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; min-height: 70px; padding-inline: .42rem; }
  .quote-review-metadata svg { display: none; }
  .quote-review-metadata dt { font-size: var(--ds-text-xs); }
  .quote-review-metadata dd { font-size: var(--ds-text-xs); }
  .quote-approval-page .quote-readiness { grid-template-columns: 76px minmax(0, 1fr); gap: .75rem; padding: 1rem; }
  .quote-readiness__ring { width: 72px; height: 72px; }
  .quote-readiness__ring strong { font-size: var(--ds-text-md); }
  .quote-readiness > ul { grid-column: 1 / -1; }
  .quote-approval-page .quote-service-recommendation { padding-inline: 1rem; }
  .quote-approval-page .quote-review-details { padding: .75rem; }
  .quote-review-tabs button { gap: .22rem; min-height: var(--ds-touch-height); font-size: var(--ds-text-xs); }
  .quote-review-tabs svg { width: 15px; height: 15px; }
  .quote-review-line-items article { grid-template-columns: 38px minmax(0, 1fr) auto; padding-inline: .55rem; }
  .quote-review-actions { grid-template-columns: 1fr 1fr; }
  .quote-review-actions .btn { padding-inline: .45rem; font-size: var(--ds-text-md); }
}
@media (max-width: 400px) {
  .quote-review-tabs svg { display: none; }
  .quote-review-line-items article { grid-template-columns: minmax(0, 1fr) auto; }
  .quote-review-line-items article > .quote-review-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-review-loading :is(i, b, strong, span) { animation: none; }
  .quote-readiness__ring .quote-readiness__value, .quote-review-history > summary > span svg, .quote-review-loading { transition: none; }
}

/* Legacy workspace overlays use the same control and focus system as new dialogs. */
.ws-modal { z-index: var(--ds-layer-modal); }
body.ws-modal-open { overflow: hidden; }
.ws-modal .ws-modal__box { border-radius: var(--ds-radius-xl); background: var(--ds-surface-solid); color: var(--ds-text); }
.ws-modal .ws-modal__backdrop { background: rgb(16 24 40 / 32%); backdrop-filter: none; }
.ws-modal .ws-modal__close { position: absolute; top: var(--ds-space-3); right: var(--ds-space-3); left: auto; width: var(--ds-touch-height); height: var(--ds-touch-height); margin: 0; font-size: var(--ds-text-md); z-index: 2; }
.ws-modal :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 2px; }
.ws-modal .ws-modal__box--narrow { width: min(34rem, calc(100vw - 2rem)); padding: var(--ds-space-6); }
.ws-modal .clear-inbox-modal__box { width: min(26rem, calc(100vw - 2rem)); padding: 0; }
.ws-modal .clear-inbox-modal__actions { gap: var(--ds-space-2); padding: var(--ds-space-3); }
.ws-modal .clear-inbox-modal__button { min-height: var(--ds-touch-height); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-solid); color: var(--ds-text); font-size: var(--ds-text-md); }
.ws-modal .clear-inbox-modal__button--delete { border-color: var(--ds-danger); background: var(--ds-danger); color: white; }
.ws-modal .clear-inbox-modal__button:hover { filter: brightness(.96); }
.ws-modal .clear-inbox-modal__button:disabled { opacity: .55; cursor: not-allowed; }
.ws-modal .workspace-title { padding-right: 3rem; font-size: var(--ds-text-xl); }
.ws-modal .workspace-textarea { width: 100%; margin-block: var(--ds-space-4); font-size: 1rem; border-radius: var(--ds-radius-md); }
.ws-modal :is(.btn-card, .btn) { min-height: var(--ds-control-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
.ws-modal :is(.btn-card.btn-edit, .btn-card.btn-reject) { border: 1px solid var(--ds-border); background: var(--ds-surface-solid); color: var(--ds-text-soft); }
.ws-modal .job-ticket--scan .job-ticket__scan-head { padding-right: 4rem; }
.ws-modal .job-ticket--scan { padding: var(--ds-space-4); }
.ws-modal .job-ticket--scan :is(.job-ticket__eyebrow, .job-ticket__scan-card span, .job-ticket__scan-card small, .job-ticket__mini-row span, .job-ticket__message span, .job-ticket__scan-section summary span) { font-size: var(--ds-text-xs); }
@media (max-width: 900px) {
  .ws-modal :is(.btn-card, .btn) { min-height: var(--ds-touch-height); }
}

/* Public account screens share one light, readable form architecture. */
[data-theme='light'] :is(.auth-page, .auth-wrap) {
  display: grid;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 2rem) var(--ds-space-4) var(--ds-space-8);
  place-items: center;
  background: var(--ds-canvas);
}
.auth-card.reveal { opacity: 1; transform: none; transition: none; }
:is(.auth-page, .auth-wrap) .auth-card {
  width: min(100%, 28rem);
  min-width: 0;
  padding: var(--ds-space-8);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-solid);
  box-shadow: var(--ds-shadow-sm);
}
.auth-card .auth-card__title { font-size: var(--ds-title); line-height: 1.2; }
.auth-card .auth-card__sub { font-size: var(--ds-text-md); }
.auth-card .auth-card__eyebrow { margin-bottom: var(--ds-space-2); color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 700; }
.auth-card .auth-form { display: grid; gap: var(--ds-space-4); }
.auth-card .auth-card__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.auth-card .auth-card__actions .btn { flex: 1 1 135px; }
.auth-card .auth-field { display: grid; gap: var(--ds-space-2); }
.auth-card .auth-label { margin: 0; color: var(--ds-text-soft); font-size: var(--ds-text-sm); }
.auth-card .auth-input { min-height: var(--ds-touch-height); border-radius: var(--ds-radius-md); }
.auth-card .auth-input::placeholder { color: var(--ds-muted-2); }
.auth-card .btn { min-height: var(--ds-touch-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
.auth-card :is(.auth-check, .auth-forgot, .auth-footer, .auth-card__footer, .auth-footnote, .auth-field__hint) { font-size: var(--ds-text-sm); line-height: 1.5; }
.auth-card :is(.auth-footer, .auth-card__footer, .auth-footnote) { margin-top: var(--ds-space-4); color: var(--ds-muted); text-align: center; }
.auth-card .auth-footnote a { color: var(--ds-lime); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.auth-card :is(.auth-form__error, .auth-form__success) { margin: 0; padding: var(--ds-space-3); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-sm); line-height: 1.5; }
.auth-card :is(.auth-form__error, .auth-field__hint[role='alert']) { color: var(--ds-danger); background: var(--ds-danger-soft); }
[data-theme='light'] .auth-card .auth-field__hint[role='alert'] { color: var(--ds-danger); padding: var(--ds-space-2); border-radius: var(--ds-radius-sm); }
[data-theme='light'] body .mobile-nav a.btn--primary { color: #fff; background: var(--ds-lime); }
[data-theme='light'] body .mobile-nav a.btn--ghost { color: var(--ds-text); background: var(--ds-surface-solid); }
.mobile-nav a.btn { min-height: var(--ds-touch-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
[data-theme='light'] :is(.job-record-shell, .customer-record-shell) { background: var(--ds-canvas); }
.workspace-shell :is(.job-record__primary, .job-record__secondary) { min-height: var(--ds-touch-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
.workspace-shell .job-record__primary { background: var(--ds-lime); color: #fff; box-shadow: var(--ds-shadow-sm); }
.workspace-shell .job-record__primary:disabled { opacity: .55; cursor: not-allowed; }
.auth-card .auth-form__success { color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 9%, transparent); }
.auth-card :is(a, button, input):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 3px; }
.auth-card .auth-check { min-height: var(--ds-touch-height); }
.auth-card .auth-check input[type='checkbox'] { width: 20px; height: 20px; flex: 0 0 auto; }
.is-public .section-label { font-size: var(--ds-text-xs); }
.home-refresh :is(.phone-channel, .badge-auto, .demo-pill, .channel-chip, .inbox-showcase small) { font-size: var(--ds-text-xs); }

/* All workspace consumers share readable labels; route layouts can stay bespoke. */
@media (max-width: 560px) {
  /* Let job details use the row width instead of competing with a long status. */
  .workspace-shell .job-directory-card__link {
    grid-template-columns: 24px 38px minmax(0, 1fr);
    row-gap: 0.35rem;
  }
  .workspace-shell :is(.job-directory-card__time, .job-directory-card__icon) { grid-row: 1 / 3; }
  .workspace-shell .job-directory-card__body { grid-column: 3; }
  .workspace-shell .job-directory-card__pill { grid-column: 3; justify-self: start; }
}
@media (max-width: 400px) {
  .workspace-shell .job-status-tabs button { flex-direction: column; gap: 0.15rem; }
}
.workspace-shell .app-status-pill { font-size: var(--app-pill-font-size) !important; height: auto; min-height: var(--app-pill-height); line-height: 1.2; white-space: normal; }
.app-page .app-page__identity p { font-size: var(--app-page-subtitle-size); }
.workspace-shell :is(.app-filter-tabs button, .app-filter-tabs a) { font-size: var(--ds-text-md); }
.workspace-shell :is(.app-filter-tabs button span, .customer-section__header h2 span, .today-section-head > span, .today-schedule-item__card small, .today-schedule-item__card small span, .msg-date-separator span, .msg__meta, .msg__meta span, .ai-panel__label, .ai-section__label, .ws-badge, .calendar-month-legend span) { font-size: var(--ds-text-xs); }
.workspace-shell .today-action-card__cta { min-height: var(--ds-control-height); font-size: var(--ds-text-sm); }
/* List statuses are compact labels, not full-size action buttons. */
.workspace-shell :is(.today-action-pill, .job-directory-card__pill, .inbox-item__context .app-status-pill) {
  --app-pill-font-size: 0.6875rem;
  min-height: 24px;
  max-width: none;
  padding: 0.2rem 0.45rem;
  border-radius: var(--ds-radius-sm);
  line-height: 1.2;
  white-space: nowrap;
}
.workspace-shell .job-date-controls > button { min-height: var(--ds-control-height); font-size: var(--ds-text-xs); }
.workspace-shell .documents-page__intro { font-size: var(--ds-text-sm); }
.workspace-shell .documents-overview-card__body :is(li, span) { font-size: var(--ds-text-xs); }
.workspace-shell .documents-quick-action strong { font-size: var(--ds-text-sm); }
.workspace-shell .documents-quick-action small, .workspace-shell .documents-security-strip small { font-size: var(--ds-text-xs); }
.workspace-shell .documents-row__amount { font-size: var(--ds-text-md); }
.workspace-shell .documents-row__status { max-width: 110px; }
.workspace-shell :is(.document-create-edit, .document-create-add-item) { min-height: var(--ds-control-height); font-size: var(--ds-text-sm); }
.workspace-shell :is(.document-create-new-pill, .document-create-item-quantity > span, .document-create-item-price > span, .document-create-adjustments summary span, .document-create-job-card dd, .document-create-totals :is(dt, dd)) { font-size: var(--ds-text-sm); }
.workspace-shell .document-create-totals dl > div:last-child :is(dt, dd) { font-size: var(--ds-text-xl); }
.workspace-shell .business-profile-live-state, .workspace-shell .business-profile-summary span { font-size: var(--ds-text-xs); }
.workspace-shell .business-profile-ai-card__stats span { font-size: var(--ds-text-xs); white-space: normal; overflow-wrap: anywhere; }
.workspace-shell .today-metric small, .workspace-shell .today-hero > div > span { font-size: var(--ds-text-xs); }
.workspace-shell .document-create-header__identity { min-width: 0; flex: 1; }
.workspace-shell .document-create-header__identity > div { min-width: 0; }
.workspace-shell .document-create-header__identity p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-shell .business-profile-rebuild-form button { min-height: var(--ds-control-height); font-size: var(--ds-text-sm); border-radius: var(--ds-radius-md); }
.workspace-shell .ws-content.business-profile-page:is(.is-service-editor, .is-profile-editor) { padding-bottom: var(--ds-space-2); scroll-padding-bottom: 6rem; }
.workspace-shell .service-editor .service-editor__panel { padding: var(--ds-space-4); border-radius: var(--app-card-radius); }
.workspace-shell .service-editor__actions, .workspace-shell .business-profile-page .business-profile-save-bar { bottom: 0; border-radius: var(--app-card-radius); }
.workspace-shell .service-pricing-segments span { min-height: var(--ds-control-height); font-size: var(--ds-text-xs); }
.workspace-shell .service-stepper em { font-size: var(--ds-text-xs); }
.workspace-shell .service-editor__checklist label { min-height: var(--ds-touch-height); }
.workspace-shell .service-editor__checklist input:focus-visible + span { outline: 2px solid var(--ds-lime); outline-offset: 3px; }
.workspace-shell .service-editor :is(input, textarea, button, a):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 2px; }
.workspace-shell .service-editor__panel .auth-input, .workspace-shell .service-editor__custom-info input { font-size: var(--ds-text-md); }
.workspace-shell .settings-mobile-control small { font-size: var(--ds-text-xs); }
.workspace-shell .settings-notification-row :is(input[type='time'], select) { flex: 0 0 auto; width: 7rem; min-height: var(--ds-control-height); padding: var(--ds-space-2); border: 1px solid var(--ds-border-high); border-radius: var(--ds-radius-md); background: var(--ds-surface-solid); color: var(--ds-text); font: inherit; font-size: var(--ds-text-md); }
.workspace-shell .settings-notification-row :is(input, select):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 2px; }
.workspace-shell .whatsapp-connect-steps :is(span, strong, small), .workspace-shell .whatsapp-connect-back span { font-size: var(--ds-text-xs); }
.workspace-shell .settings-mobile-hub small { font-size: var(--ds-text-sm); }
.job-actions-sheet nav strong { font-size: var(--ds-text-md); }
.job-actions-sheet nav small { font-size: var(--ds-text-xs); }
.job-actions-sheet__panel > header button { width: var(--ds-touch-height); height: var(--ds-touch-height); border-radius: var(--ds-radius-md); }
.command-palette__list a small { font-size: var(--ds-text-sm); font-weight: 400; }
.workspace-shell .sandbox-evaluation { padding: var(--ds-space-6); border-radius: var(--app-card-radius); background: var(--ds-surface-solid); box-shadow: var(--ds-shadow-sm); }
.bot-sandbox-shell .bot-sandbox { display: block; }
.bot-sandbox .bot-sandbox-inner { flex: none; grid-template-areas: none; }
.bot-sandbox .bot-sandbox-inner > :is(.inbox-list, .inbox-detail) { grid-area: auto; }
.bot-sandbox .inbox-list__title { font-size: var(--app-page-title-size); }
.bot-sandbox .sandbox-evaluation { flex: none; }
.workspace-shell .ws-content:is(.admin-crm-page, .settings-page, .integrations-page, .document-settings-page, .business-profile-page, .calendar-page) { grid-auto-rows: max-content; align-content: start; }
.workspace-shell .admin-crm-page .crm-kpi-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.workspace-shell .admin-user-table .crm-cell--identity > span:last-child { display: grid; min-width: 0; gap: var(--ds-space-1); }
.workspace-shell .admin-user-table .crm-cell--identity :is(strong, small) { overflow-wrap: anywhere; }
.workspace-shell .calendar-map-fallback { z-index: 355; }
.workspace-shell .calendar-fab { position: relative; right: auto; bottom: auto; margin-top: var(--ds-space-4); background: var(--ds-lime); color: white; }
.bot-sandbox .inbox-list { display: block; }
.bot-sandbox .inbox-detail { display: flex; }
.bot-sandbox :is(.btn, .btn-card, .auth-input) { min-height: var(--ds-control-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
.bot-sandbox :is(.btn, .btn-card):disabled { opacity: .55; cursor: not-allowed; }
.bot-sandbox .sandbox-evaluation [hidden] { display: none; }
.inbox-workspace .inbox-item-shell:has(.inbox-item-shell__clear:focus-visible) .inbox-item { transform: translateX(-6.25rem); }
.inbox-workspace .inbox-item-shell:has(.inbox-item-shell__clear:focus-visible) .inbox-item-shell__action { transform: translateX(0); pointer-events: auto; }
.workspace-shell :is(.settings-day-slot small, .settings-time-grid label > span, .settings-card-heading p, .settings-weekdays .weekday-card) { font-size: var(--ds-text-xs); }
.workspace-shell .settings-page { --settings-mobile-card-radius: var(--app-card-radius); }
.workspace-shell .settings-mobile-section-label { font-size: var(--ds-text-xs); }
[data-theme='light'] .snapshot-action-pill:is(.snapshot-action-pill--quote, .snapshot-action-pill--book, .snapshot-action-pill--invoice).is-active { background: var(--ds-lime-soft); color: var(--ds-lime); border-color: var(--ds-lime-border); box-shadow: none; }

@media (max-width: 900px) {
  .workspace-shell :is(.app-filter-tabs button, .app-filter-tabs a) { min-height: var(--ds-touch-height); font-size: var(--ds-text-xs); }
  .workspace-shell :is(.job-date-controls > button, .today-action-card__cta, .document-create-edit, .document-create-add-item, .business-profile-rebuild-form button) { min-height: var(--ds-touch-height); }
  .workspace-shell :is(.today-dashboard, .jobs-page, .inbox-workspace) .app-filter-tabs :is(button, a),
  .workspace-shell .job-date-controls > button {
    min-height: 44px;
    padding-inline: 0.3rem;
    border-radius: var(--ds-radius-sm);
  }
  /* Keep the CTA in normal flow so longer card text cannot sit underneath it. */
  .workspace-shell .today-action-card { grid-template-columns: minmax(0, 1fr); }
  .workspace-shell .today-action-card__main {
    padding: 0.65rem;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0.5rem;
  }
  .workspace-shell .today-action-card__main time { position: static; }
  .workspace-shell .today-action-card__cta {
    position: static;
    justify-self: end;
    min-width: 0;
    min-height: 44px;
    max-width: calc(100% - 1.3rem);
    margin: 0 0.65rem 0.65rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--ds-radius-sm);
    white-space: normal;
    text-align: center;
  }
  .workspace-shell .service-editor :is(.btn, .auth-input, .service-pricing-segments span, .service-editor__ai-copy, .service-editor__custom-info input) { min-height: var(--ds-touch-height); }
  .workspace-shell .service-editor .auth-input { font-size: 1rem; }
  .bot-sandbox .bot-sandbox-inner { display: grid; width: auto; gap: var(--ds-space-4); margin: var(--ds-space-4); }
  .bot-sandbox .bot-sandbox-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .bot-sandbox .bot-sandbox-inner > :is(.inbox-list, .inbox-detail) { height: auto; width: 100%; border-radius: var(--app-card-radius); }
  .bot-sandbox .inbox-detail__body { display: block; overflow: visible; }
  .bot-sandbox .inbox-detail .conversation-area { min-height: 360px; }
  .bot-sandbox .inbox-detail .ai-panel { display: block; min-height: 0; height: auto; }
  .bot-sandbox .inbox-detail { min-height: 440px; }
  .bot-sandbox :is(.btn, .btn-card, .auth-input) { min-height: var(--ds-touch-height); }
  .bot-sandbox .auth-input { font-size: 1rem; }
  .workspace-shell .sandbox-evaluation { padding: var(--ds-space-4); }
  .workspace-shell .settings-page :is(.btn, .auth-input) { min-height: var(--ds-touch-height); border-radius: var(--ds-radius-md); }
  .workspace-shell .settings-notification-row :is(input[type='time'], select) { min-height: var(--ds-touch-height); font-size: 1rem; }
  .workspace-shell .settings-notification-preferences .settings-form-actions { grid-template-columns: minmax(0, 1fr); }
  .workspace-shell .settings-notification-preferences .settings-form-actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .workspace-shell .admin-crm-page .crm-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-shell .documents-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-shell .documents-overview-card__body { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .workspace-shell .documents-row__link { grid-template-columns: var(--app-icon-size-mobile) minmax(0, 1fr) auto; }
  .workspace-shell .documents-row__status { position: static; grid-column: 2 / -1; justify-self: start; margin-top: var(--ds-space-1); max-width: 100%; }
  .workspace-shell .documents-row__body .app-row-card__detail { padding-right: 0; }
  .workspace-shell .documents-row__amount { padding-right: 1.2rem; }
  .workspace-shell .document-create-new-pill { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

/* The tablet inbox also switches from its list to a single conversation. */
@media (min-width: 761px) and (max-width: 980px) {
  .inbox-workspace.inbox-shell--conversation-open .inbox-detail__back { display: grid; }
}

/* Setup and plan selection use the same light surfaces and form scale as sign-in. */
[data-theme='light'] .setup-shell { background: var(--ds-canvas); }
.setup-shell .setup-card { border-radius: var(--ds-radius-lg); background: var(--ds-surface-solid); box-shadow: var(--ds-shadow-sm); }
.setup-shell :is(.form-label, .setup-effort, .field-help, .auth-field__hint, .schedule-row__day small) { font-size: var(--ds-text-sm); line-height: 1.5; }
.setup-shell .app-kicker { font-size: var(--ds-text-xs); }
.setup-shell :is(.btn, .auth-input) { min-height: var(--ds-touch-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
.setup-shell .form-field[hidden] { display: none; }
.assistant-preview .setup-card { display: grid; grid-auto-rows: max-content; gap: var(--ds-space-4); }
.assistant-preview .setup-card > .app-card { min-height: 0; padding: 0; border: 1px solid var(--ds-border); border-radius: var(--app-card-radius); background: var(--ds-surface-solid); box-shadow: none; }
.assistant-preview .app-card :is(.app-card__head, .app-card__body) { padding: var(--ds-space-4); }
.assistant-preview .app-card__title { font-size: var(--ds-text-lg); color: var(--ds-text); }
.assistant-preview .app-card__note { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.assistant-preview .soft-pill { min-height: var(--ds-touch-height); height: auto; padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-2); color: var(--ds-text-soft); font-size: var(--ds-text-sm); line-height: 1.4; white-space: normal; text-align: left; }
.assistant-preview .auth-input { width: 100%; border: 1px solid var(--ds-border-high); background: var(--ds-surface-solid); color: var(--ds-text); }
.assistant-preview :is(.info-label, .info-value, .empty-box) { color: var(--ds-text-soft); font-size: var(--ds-text-md); }
.setup-shell .input-with-suffix { border-color: var(--ds-border-high); border-radius: var(--ds-radius-md); background: var(--ds-surface-solid); }
.setup-shell .input-with-suffix > span { color: var(--ds-muted); font-size: var(--ds-text-sm); }
.setup-shell .schedule-row__day { min-height: var(--ds-touch-height); cursor: pointer; }
.setup-shell .schedule-row__day input { width: 20px; height: 20px; }
.setup-shell .schedule-row__day strong { font-size: var(--ds-text-md); }
[data-theme='light'] .setup-shell :is(.setup-readiness-card, .onboarding-profile-section, #onboarding-work, #onboarding-enquiries, #onboarding-attention) { border-color: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface-solid); box-shadow: none; }
.setup-shell .setup-readiness-card .account-status { justify-self: start; font-size: var(--ds-text-xs); }
[data-theme='light'] .onboarding-refined [data-onboarding-complete-form] :is(input.auth-input, select.auth-input, textarea.auth-input, .input-with-suffix).is-filled { border-color: var(--ds-border-high); box-shadow: none; }
[data-theme='light'] .onboarding-refined [data-onboarding-schedule-row].is-filled { border-color: var(--ds-lime-border); background: var(--ds-lime-soft); box-shadow: none; }
.setup-shell :is(input, select, textarea, button, a):focus-visible { outline: 2px solid var(--ds-lime); outline-offset: 3px; }
.setup-shell [role='alert'] { padding: var(--ds-space-3); border-radius: var(--ds-radius-sm); background: var(--ds-danger-soft); color: var(--ds-danger); }
.nav .nav__actions--flush-right { display: flex; }
.subscribe-shell.reveal { opacity: 1; transform: none; }
[data-theme='light'] .subscribe-core-card { border: 1px solid var(--ds-border-high); border-radius: var(--ds-radius-lg); background: var(--ds-surface-solid); box-shadow: var(--ds-shadow-sm); }
[data-theme='light'] .subscribe-shell { border-radius: var(--ds-radius-lg); background: var(--ds-surface-solid); box-shadow: var(--ds-shadow-sm); }
.subscribe-page .subscribe-alert { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); padding: var(--ds-space-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-solid); color: var(--ds-text-soft); font-size: var(--ds-text-sm); line-height: 1.5; white-space: normal; }
.subscribe-page .subscribe-alert.soft-pill--danger { color: var(--ds-danger); background: var(--ds-danger-soft); }
.subscribe-page .subscribe-alert.soft-pill--success { color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 9%, white); }
.subscribe-page :is(.subscribe-core-card__note, .auth-card__footer) { font-size: var(--ds-text-sm); }
.subscribe-page .subscribe-core-card__button { min-height: var(--ds-touch-height); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); white-space: normal; }
.subscribe-page .subscribe-core-card__button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

@media (max-width: 560px) {
  [data-theme='light'] :is(.auth-page, .auth-wrap) { align-items: start; padding-top: calc(var(--nav-h) + 1.5rem); }
  :is(.auth-page, .auth-wrap) .auth-card { padding: var(--ds-space-6); }
  .auth-card .auth-input { font-size: 1rem; }
  .auth-card .auth-row { flex-wrap: wrap; gap: var(--ds-space-2); }
  .setup-shell .auth-input { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .is-public :is(.reveal, .reveal-left, .reveal-scale) { opacity: 1; transform: none; transition: none; }
  .is-public :is(.bubble, .chat-tag, .badge-auto, .phone-channel) { animation: none; transition: none; opacity: 1; transform: none; }
}

/* Brand artwork stays green and black across legacy and current surfaces. */
:is(.nav__logo-mark, .footer__logo-mark, .cookie-consent__brand, .inbox-empty-state__icon, .system-state__brand > span) {
  background: transparent url('../img/traden-logo-dark.svg') center / contain no-repeat !important;
  border-radius: 0;
  color: transparent !important;
  font-size: 0 !important;
}
.inbox-empty-state__icon { width: 48px; height: 48px; margin-inline: auto; }

/* Document forms use the browser's page scroller on mobile. A locked 100dvh
 * shell with a second scroller can retain the keyboard's inset in WebKit,
 * leaving a blank half-screen after dismissal (including standalone PWAs). */
@media (max-width: 900px) {
  html:has(.document-create-page, .document-review-page) {
    height: auto;
    min-height: 100%;
    overflow: visible;
    background: var(--ds-canvas);
  }
  body:has(.workspace-shell):has(.document-create-page, .document-review-page),
  body .workspace-shell:has(.document-create-page, .document-review-page) {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    overscroll-behavior-y: auto;
    background: var(--ds-canvas);
  }
  body .workspace-shell:has(.document-create-page, .document-review-page) > .ws-main {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  body .workspace-shell .ws-content:is(.document-create-page, .document-review-page) {
    height: auto;
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }
  body:has(.document-create-page) .ws-bottom-nav { display: none; }
  body:has(.document-create-page) .ws-main { padding-bottom: 0; }
  /* Avoid iOS focus zoom without disabling user-controlled pinch zoom. */
  body .workspace-shell :is(.document-create-page, .document-review-page) :is(input, textarea, select) {
    font-size: 16px;
  }
}

.document-create-customer-card label.document-address-link,
.document-address-link {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  color: var(--ds-text-soft);
  font-size: var(--ds-text-sm);
  cursor: pointer;
}
.document-address-link input[type='checkbox'] { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--ds-lime); }
.document-preview-launch { margin-block: .75rem; }
.document-create-actions:has(.document-create-preview-action:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-open-document-preview][hidden] { display: none; }

.document-preview-dialog {
  position: fixed;
  inset: 0;
  width: min(960px, calc(100% - 2rem));
  max-width: none;
  height: min(1050px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--ds-text);
}
.document-preview-surface {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-canvas);
  box-shadow: var(--ds-shadow-lg);
}
.document-preview-dismiss {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0;
  padding: .75rem 0 max(.25rem, env(safe-area-inset-bottom));
}
.document-preview-dismiss .document-preview-close {
  min-height: 48px;
  padding: .75rem 1.5rem;
  gap: .6rem;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-solid);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
}
.document-preview-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.document-retention-dropdown > summary {
  min-height: 48px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.5;
  align-content: center;
}
.document-retention-dropdown > summary:focus-visible {
  outline: 2px solid var(--ds-lime);
  outline-offset: 4px;
  border-radius: 4px;
}
.document-retention-dropdown__content { padding-top: 1rem; }
.document-retention-dropdown__content > p:first-child { margin-top: 0; }
.document-preview-dialog[open] { display: flex; flex-direction: column; }
.document-preview-dialog::backdrop { background: rgb(10 15 20 / 45%); }
.document-preview-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--ds-border); background: var(--ds-surface-solid); }
.document-preview-toolbar h2 { margin: 0; font-size: 1.1rem; }
.document-preview-toolbar p { margin: .25rem 0 0; color: var(--ds-muted); font-size: .8rem; }
.document-preview-toolbar .btn { flex: 0 0 auto; width: auto; min-width: 0; min-height: 44px; gap: .6rem; }
.document-preview-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 1rem; }
.document-preview-paper { width: 100%; max-width: 794px; min-height: 100%; margin-inline: auto; padding: clamp(1rem, 4vw, 3.5rem); background: #fff; color: #15181d; box-shadow: 0 2px 16px #0001; font: 13px/1.5 Arial, sans-serif; overflow-wrap: anywhere; }
.document-preview-paper__header { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; gap: 1.5rem; margin-bottom: 2.5rem; }
.document-preview-paper h3 { margin: 0 0 .75rem; color: #15181d; font: bold 1.6rem/1.2 Arial, sans-serif; }
.document-preview-company { text-align: right; }
.document-preview-company > strong { display: block; margin-bottom: .5rem; font-size: 1.25rem; }
.document-preview-company > div { white-space: pre-line; }
.document-preview-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .5rem; background: #eceef1; }
.document-preview-summary dt { color: #626b78; font-size: .7rem; }
.document-preview-paper dd { margin: 0; }
.document-preview-summary dd { font-weight: bold; }
.document-preview-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.document-preview-paper section { display: block; min-height: 0; margin-bottom: 1rem; padding: 0; border: 1px solid #d4d8de; background: #f5f6f8; }
.document-preview-sections section { margin-bottom: 0; }
.document-preview-paper h4 { margin: 0; padding: .4rem .65rem; color: #15181d; background: #d9dde2; font: bold .85rem/1.4 Arial, sans-serif; }
.document-preview-paper section > :not(h4) { margin: 0; padding: .65rem; }
.document-preview-paper p { margin: .15rem 0 0; }
.document-preview-paper [data-preview-value] { white-space: pre-line; }
.document-preview-items { width: 100%; border-collapse: collapse; table-layout: fixed; }
.document-preview-items th { background: #d9dde2; font-weight: bold; }
.document-preview-items :is(th, td) { padding: .65rem .35rem; border-bottom: 1px solid #d9dde2; text-align: right; vertical-align: top; }
.document-preview-items :is(th, td):first-child { width: 45%; text-align: left; white-space: pre-wrap; }
.document-preview-items :is(th, td):nth-child(2) { width: 10%; }
.document-preview-totals { width: min(100%, 280px); margin: 1rem 0 1.5rem auto; }
.document-preview-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .35rem; border-bottom: 1px solid #d9dde2; }
.document-preview-totals > div:last-child { border-top: 1px solid #aeb5be; font-weight: bold; font-size: 1.05rem; }
.document-preview-payment dl > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.document-preview-payment dt { font-weight: bold; }
.document-preview-paper [hidden] { display: none !important; }
.document-preview-paper footer { display: grid; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #d9dde2; }
.document-preview-paper footer strong { text-align: right; font-style: italic; }
@media (max-width: 600px) {
  .document-create-actions:has(.document-create-preview-action:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-create-actions .document-create-action-primary { grid-column: 1 / -1; }
  .document-preview-dialog { width: calc(100% - 1rem); height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); }
  .document-preview-toolbar { gap: .5rem; padding: max(.75rem, env(safe-area-inset-top)) .75rem .75rem; }
  .document-preview-toolbar p { display: none; }
  .document-preview-toolbar .btn { font-size: .8rem; padding-inline: .75rem; }
  .document-preview-scroll { padding: .5rem .5rem max(.5rem, env(safe-area-inset-bottom)); }
  .document-preview-paper { padding: 1rem; font-size: 11px; }
  .document-preview-paper__header { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
  .document-preview-company { text-align: left; }
  .document-preview-sections { gap: .5rem; }
  .document-preview-paper h4 { font-size: .75rem; }
  .document-preview-paper section > :not(h4) { padding: .5rem; }
}

/* Consistent gutters and aligned actions for WhatsApp and Outlook cards. */
.integrations-page .integrations-grid { gap: 1.25rem; }
.integrations-page .integration-card { padding: 1.5rem; gap: 0.75rem; }
.integrations-page .integration-card__desc { line-height: 1.6; }
.integrations-page .integration-card__btn { min-height: 44px; }
@media (max-width: 560px) {
  .integrations-page .integration-card { padding: 1.25rem; }
}

/* Mobile MVP: readable names, comfortable actions and a single work description. */
.traden-app .workspace-shell .app-page__identity > div { min-width: 0; }
.traden-app .workspace-shell .app-page__identity p { max-width: none; overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.traden-app .workspace-shell :is(.app-row-card__title, .app-row-card__meta, .app-row-card__detail, .today-next__body small, .quote-approval-checklist small) { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.traden-app .workspace-shell :is(.app-row-card__body, .app-row-card__copy, .today-next__body) { min-width: 0; }
.traden-app .workspace-shell .btn { min-width: 0; min-height: 44px; height: auto; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.35; }
.traden-app .workspace-shell :is(.settings-form-actions, .crm-page-actions, .app-section__header) { flex-wrap: wrap; }
.document-create-work { padding: 1rem; }
.document-create-work > .form-field { margin: 0; }
.document-create-work textarea { width: 100%; min-height: 110px; resize: vertical; line-height: 1.5; }
.document-create-help { margin: .65rem 0; color: var(--ds-muted); font-size: var(--ds-text-sm); line-height: 1.5; }
.document-create-options { margin-top: .75rem; border-top: 1px solid var(--ds-border); }
.document-create-options > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; color: var(--ds-text-soft); font-size: var(--ds-text-sm); font-weight: 700; list-style: none; cursor: pointer; }
.document-create-options > summary::-webkit-details-marker { display: none; }
.document-create-options > summary svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.document-create-options[open] > summary svg { transform: rotate(90deg); }
.document-create-options__fields { display: grid; gap: .7rem; padding: .25rem 0 .75rem; }
.document-create-options__fields :is(small, label) { color: var(--ds-text-soft); font-size: var(--ds-text-sm); line-height: 1.5; }
.traden-app .workspace-shell .document-create-page .document-create-item { grid-template-columns: minmax(0, 1fr) 75px 130px 44px; gap: .8rem; padding-block: .9rem; }
.traden-app .workspace-shell .document-create-page .document-create-item-description { min-width: 0; align-self: start; }
.document-create-item-description > span { display: block; margin-bottom: .35rem; font-size: var(--ds-text-sm); }
.traden-app .workspace-shell .document-create-page .document-create-item-description textarea { width: 100%; padding: .65rem; border: 1px solid var(--ds-border); border-radius: 9px; background: var(--ds-surface-solid); color: var(--ds-text); font-size: 16px; line-height: 1.5; resize: vertical; }
.document-create-linked-item > strong { display: block; font-size: var(--ds-text-sm); overflow-wrap: anywhere; }
.document-create-linked-item .document-create-options { margin-top: .2rem; border: 0; }
.document-create-link-choice { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.traden-app .workspace-shell .document-create-page .document-create-link-choice input { width: 20px; height: 20px; flex: 0 0 20px; }
.traden-app .workspace-shell .document-create-page :is(.document-create-item-quantity, .document-create-item-price) { display: grid; gap: .35rem; grid-column: auto; grid-row: auto; width: auto; justify-self: stretch; }
.traden-app .workspace-shell .document-create-page :is(.document-create-item-quantity, .document-create-item-price) input { min-height: 44px; border: 1px solid var(--ds-border); border-radius: 9px; padding: .5rem; font-size: 16px; text-align: left; background: var(--ds-surface-solid); }
.traden-app .workspace-shell .document-create-page .document-create-item-delete { grid-column: auto; grid-row: auto; align-self: end; width: 44px; height: 44px; }
@media (max-width: 760px) {
  .traden-app .workspace-shell .app-page__header:not(.document-create-header) { flex-wrap: wrap; align-items: start; gap: .7rem; }
  .traden-app .workspace-shell .app-page__header:not(.document-create-header) .app-page__identity { flex: 1 1 210px; align-items: start; }
  .traden-app .workspace-shell .app-page__actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .traden-app .workspace-shell .app-page__identity :is(h1, p) { overflow-wrap: anywhere; }
  .traden-app .workspace-shell .app-page__identity p { font-size: var(--app-page-subtitle-size-mobile); }
  .traden-app .workspace-shell .crm-page-header { gap: .9rem; }
  .traden-app .workspace-shell :is(.crm-page-actions, .settings-form-actions) .btn { flex: 1 1 120px; }
  .traden-app .workspace-shell .document-create-page .document-create-item { grid-template-columns: 75px minmax(0, 1fr) 44px; gap: .65rem; padding: .8rem .25rem; }
  .traden-app .workspace-shell .document-create-page .document-create-item-description { grid-column: 1 / -1; }
  .traden-app .workspace-shell .document-create-page .document-create-item-delete { align-self: end; }
  .traden-app .workspace-shell .document-create-page .document-create-work { padding: .85rem; }
  .traden-app .workspace-shell .document-create-page .document-create-action-primary { padding-inline: 1rem; }
}
.traden-app .workspace-shell .document-create-primary-field textarea { width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ds-text); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; resize: vertical; overflow: auto; }
@media (max-width: 760px) {
  .traden-app .workspace-shell .document-create-header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; }
  .traden-app .workspace-shell .document-create-header .document-create-save { display: none; }
  .traden-app .workspace-shell .document-create-header h1 { font-size: 18px; line-height: 1.3; }
}
.traden-app .workspace-shell .settings-advanced > :is(.settings-booking-list, .settings-row-list) { padding: .25rem 1rem 1rem; }
.traden-app .workspace-shell .settings-advanced > summary span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .traden-app .workspace-shell .document-create-header { grid-template-columns: 38px minmax(0, 1fr) 38px auto; }
  .traden-app .workspace-shell .document-create-header__actions { grid-column: 3; }
  .traden-app .workspace-shell .document-create-header > .automation-status { grid-column: 4; grid-row: 1; }
}
/* The preview dismiss control stays below the floating sheet in both themes. */
.traden-app .document-preview-dialog { width: min(900px, calc(100vw - 1rem)); height: min(94dvh, 980px); max-height: calc(100dvh - 1rem); padding: 0; }
.traden-app .document-preview-dismiss .document-preview-close { position: static; inset: auto; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: auto; height: auto; min-width: 160px; min-height: 48px; padding: .75rem 1.25rem; border-radius: 12px; font-size: 15px; line-height: 1.3; touch-action: manipulation; pointer-events: auto; }
.traden-app .document-preview-dismiss { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 0; padding: .65rem 0 max(.15rem, env(safe-area-inset-bottom)); }
.traden-app .workspace-shell .document-create-page :is(.document-create-item-quantity, .document-create-item-price) input { min-height: 44px !important; padding: .5rem !important; font-size: 16px !important; }
.traden-app .workspace-shell [data-page] .app-page__identity p { overflow: visible; white-space: normal; text-overflow: clip; }
.traden-app .workspace-shell .customer-active-work__job strong { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.traden-app .workspace-shell .review-check__copy small { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .traden-app .workspace-shell .review-summary__heading { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .traden-app .workspace-shell .review-summary__heading p { overflow-wrap: anywhere; }
  .traden-app .workspace-shell .review-summary__status { grid-column: 2; margin: 0; justify-self: start; }
  .traden-app .workspace-shell .document-create-header__actions .quote-review-save { display: none; }
  .traden-app .workspace-shell .ws-mobile-topbar__identity small { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; }
  .traden-app .workspace-shell .ws-mobile-topbar { position: static; height: auto; min-height: var(--ws-mobile-topbar-height); }
  body:has(.document-settings-page) .ws-main, body:has(.automation-control-page) .ws-main { padding-top: 0; }
}
@media (max-width: 760px) {
  .traden-app .workspace-shell .app-page__header { height: auto; }
  .traden-app .workspace-shell .ws-main { padding-top: 0; }
}
@media (max-width: 360px) {
  .traden-app .workspace-shell .documents-overview-card__heading { grid-template-columns: minmax(0, 1fr) 10px; }
  .traden-app .workspace-shell .documents-overview-card__heading .app-row-card__icon { display: none; }
}
.traden-app .workspace-shell .app-timeline__item strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .traden-app .workspace-shell .documents-page .documents-overview-card__heading { grid-template-columns: minmax(0, 1fr) 14px; }
}
.traden-app .workspace-shell .ws-user-info strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; }
.traden-app .workspace-shell.inbox-workspace .inbox-page-header .app-page__identity p { overflow: visible; white-space: normal; text-overflow: clip; }
.traden-app .workspace-shell.inbox-workspace .inbox-page-header { height: auto; flex-wrap: wrap; align-items: start; }
.traden-app .workspace-shell.inbox-workspace .inbox-page-header .app-page__identity { flex: 1 1 210px; }
.traden-app .crm-create-extra { grid-column: 1 / -1; margin-top: .5rem; }
.traden-app .crm-create-extra > .crm-create-form__grid { padding: .5rem 1rem 1rem; }
.traden-app .workspace-shell :is(.documents-overview-card__body strong, .documents-row__amount, .document-locked dd) { overflow-wrap: anywhere; }
.traden-app .crm-create-extra > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 44px; }
.traden-app .crm-create-extra > summary span { min-width: 0; }
.traden-app .crm-create-extra > summary svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.traden-app .crm-create-extra[open] > summary svg { transform: rotate(180deg); }

/* Wrapped document controls must contribute to the header's grid row height. */
.traden-app .workspace-shell .documents-page {
  grid-auto-rows: max-content;
  align-content: start;
}
.traden-app .workspace-shell .documents-page > .documents-page__header {
  min-height: max-content;
  height: auto;
}
@media (max-width: 760px) {
  .traden-app .workspace-shell .documents-page > .documents-page__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 16px;
  }
  .traden-app .workspace-shell .documents-page__header .documents-header-actions {
    justify-self: end;
    max-width: 100%;
    margin-left: 0;
    gap: 8px;
  }
}
.push-reconnect-alert { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:#fff4df; color:#513817; border:1px solid #e8cc93; border-radius:12px; margin:12px 16px; font-size:14px; line-height:1.5; }
.push-reconnect-alert a { color:#513817; font-weight:700; text-decoration:underline; white-space:nowrap; }
@media (max-width:600px) { .push-reconnect-alert { flex-direction:column; align-items:flex-start; margin:12px; } .push-reconnect-alert a { white-space:normal; } }