:root {
  --bg: #f3f7fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #050505;
  --muted: #63717b;
  --line: #dfe7ed;
  --accent: #35b8e6;
  --accent-2: #007aa8;
  --traffic-red: #ef4444;
  --traffic-amber: #f59e0b;
  --traffic-green: #16a34a;
  --warn: var(--traffic-amber);
  --warning: var(--traffic-amber);
  --danger: var(--traffic-red);
  --good: var(--traffic-green);
  --soft-accent: #e2f7fd;
  --soft-blue: #e4f3fb;
  --soft-warn: #fef3c7;
  --soft-danger: #fee2e2;
  --shadow: 0 18px 50px rgba(5, 5, 5, 0.08);
  --radius: 8px;
  --sidebar: 232px;
  --topbar-height: 68px;
  --bottom-ribbon-height: 48px;
  --division-colour: var(--accent);
  --insight-page-title-size: 22px;
  --insight-section-title-size: 18px;
  --insight-compact-title-size: 16px;
  --insight-metric-value-size: 20px;
  --insight-large-metric-value-size: 24px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  letter-spacing: 0;
}

body.sidebar-collapsed {
  --sidebar: 84px;
}

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

button {
  cursor: pointer;
}

.is-hidden {
  display: none !important;
}

.login-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--bg);
}

.login-card {
  display: grid;
  gap: 0;
  align-self: center;
  justify-self: center;
  width: min(460px, calc(100% - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-card-header {
  display: grid;
  place-items: center start;
  padding: 14px 24px;
  background: #050505;
  color: #ffffff;
}

.login-card-brand {
  display: grid;
  grid-template-columns: 132px 1px 144px;
  gap: 14px;
  align-items: center;
  justify-content: start;
  max-width: 100%;
}

.login-card-logo {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
}

.login-card-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.42);
}

.login-card-wordmark {
  display: block;
  width: 144px;
  max-width: 100%;
  height: auto;
}

.launch-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050505;
  color: #ffffff;
}

.launch-screen::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(56, 187, 226, 0.16) 44%, transparent 56% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 42px);
  animation: launchSweep 1450ms ease-out both;
}

.launch-screen__stage {
  position: relative;
  display: grid;
  gap: 18px;
  justify-items: center;
  width: min(460px, 80vw);
}

.launch-screen__logo {
  display: block;
  width: min(360px, 72vw);
  height: auto;
  animation: launchLogo 1300ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.launch-screen__line {
  width: min(320px, 64vw);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), #ffffff, var(--accent), transparent);
  box-shadow: 0 0 18px rgba(56, 187, 226, 0.55);
  animation: launchLine 1300ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.launch-screen__copy {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  animation: launchCopy 1300ms ease-out both;
}

@keyframes launchLogo {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(14px) scale(0.92);
  }

  58% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes launchLine {
  0% {
    opacity: 0;
    transform: scaleX(0.18);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes launchCopy {
  0%,
  44% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes launchSweep {
  0% {
    opacity: 0;
    transform: translateX(-20%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-screen::before,
  .launch-screen__logo,
  .launch-screen__line,
  .launch-screen__copy {
    animation: none;
  }
}

.login-card-body {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.login-brand-lockup {
  display: grid;
  grid-template-columns: minmax(0, 132px) 1px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.login-logo {
  width: 132px;
  max-width: 100%;
  height: auto;
}

.login-brand-divider {
  width: 1px;
  height: 42px;
  background: var(--line);
}

.login-insight-panel {
  display: grid;
  align-items: center;
  min-height: 54px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: #050505;
}

.login-insight-logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
}

.login-card-title {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.login-heading p,
.login-helper,
.login-notice {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.login-step {
  display: grid;
  gap: 14px;
}

.login-error {
  min-height: 20px;
  color: var(--danger);
  font-size: 13px;
}

.login-notice {
  min-height: 20px;
  color: var(--good);
}

.link-button {
  justify-self: start;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  text-transform: uppercase;
}

.link-button:hover,
.link-button:focus-visible {
  color: #050505;
  text-decoration: underline;
}

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--bottom-ribbon-height);
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}

.sidebar {
  position: sticky;
  grid-column: 1;
  grid-row: 2 / 4;
  top: var(--topbar-height);
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: calc(100vh - var(--topbar-height));
  min-height: 0;
  padding: 14px 16px;
  overflow: hidden;
  background: var(--accent);
  color: #042331;
}

.brand-logo {
  display: block;
  width: 168px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-logo-mark {
  display: none;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: contain;
}

.sidebar-toggle {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: #042331;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #050505;
  box-shadow: none;
}

body.sidebar-collapsed .sidebar-toggle-label,
body.sidebar-collapsed .nav-button strong,
body.sidebar-collapsed .nav-button span:last-child,
body.sidebar-collapsed .sidebar-panel,
body.sidebar-collapsed .sidebar-credit {
  display: none;
}

body.sidebar-collapsed .sidebar-toggle {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-right: 0;
  padding-left: 0;
}

body.sidebar-collapsed .brand-logo--full {
  display: none;
}

body.sidebar-collapsed .brand-logo-mark {
  display: block;
}

body.sidebar-collapsed .nav-button {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-left: 0;
  padding-right: 0;
}

.nav-list {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 4px;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(4, 35, 49, 0.45) transparent;
  scrollbar-width: thin;
}

.nav-list::-webkit-scrollbar {
  width: 6px;
}

.nav-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(4, 35, 49, 0.34);
}

.nav-list::-webkit-scrollbar-track {
  background: transparent;
}

.nav-button {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: #042331;
  text-align: left;
}

.nav-button strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-button svg,
.topbar svg,
.icon-button svg,
.sidebar-toggle svg,
.primary-button svg,
.ghost-button svg,
.mini-action svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.sidebar-toggle svg {
  stroke-width: 2.4;
}

.sidebar-toggle-label {
  overflow: hidden;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-button span:last-child {
  color: rgba(4, 35, 49, 0.62);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.nav-button__chevron {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: currentColor;
  transition: transform 160ms ease;
}

.nav-button__chevron svg {
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
}

.nav-button__chevron.is-open {
  transform: rotate(180deg);
}

.nav-button:hover,
.nav-button.is-active {
  background: #050505;
  color: #ffffff;
}

.nav-button:hover span:last-child,
.nav-button.is-active span:last-child {
  color: rgba(255, 255, 255, 0.72);
}

.nav-submenu {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 3px;
  margin: -2px 0 6px 30px;
  padding-left: 10px;
  border-left: 1px solid rgba(4, 35, 49, 0.22);
}

.nav-subbutton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-self: start;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.34);
  color: #042331;
  text-align: left;
}

.nav-subbutton span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-subbutton strong {
  font-size: 11px;
}

.nav-subbutton:hover,
.nav-subbutton.is-active {
  background: #050505;
  color: #ffffff;
}

body.sidebar-collapsed .nav-submenu {
  display: none;
}

.sidebar-panel {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(4, 35, 49, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.42);
}

.sidebar-panel--online {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
}

.sidebar-panel--online .sidebar-panel__top {
  min-height: 34px;
  align-items: center;
}

.sidebar-panel__top,
.card-title,
.metric-row,
.list-row,
.service-row,
.asset-row,
.activity-item,
.schedule-item,
.table-row,
.split-title,
.customer-heading,
.board-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sidebar .panel-label {
  color: rgba(4, 35, 49, 0.72);
}

.panel-value {
  font-size: 12px;
  font-weight: 800;
}

.online-users-avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 0;
  margin-left: auto;
}

.online-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(4, 35, 49, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-user-avatar.is-more {
  background: rgba(4, 35, 49, 0.08);
  color: rgba(4, 35, 49, 0.74);
}

.online-users-note {
  margin-top: 8px;
  color: rgba(4, 35, 49, 0.7);
  font-size: 11px;
  font-weight: 800;
}

.sidebar-credit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(4, 35, 49, 0.68);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-credit span {
  display: inline-flex;
  align-items: center;
  height: 14px;
}

.sidebar-credit img {
  display: block;
  width: auto;
  height: 14px;
  max-width: 102px;
  object-fit: contain;
}

.workspace {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow-x: hidden;
}

.bottom-ribbon {
  grid-column: 2 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--bottom-ribbon-height);
  padding: 8px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: #050505;
  color: #ffffff;
}

.bottom-ribbon strong {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bottom-ribbon__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(53, 184, 230, 0.44);
  border-radius: 999px;
  background: rgba(53, 184, 230, 0.12);
  color: #ffffff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.bottom-ribbon__top:hover,
.bottom-ribbon__top:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #050505;
  outline: none;
}

.bottom-ribbon__top svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.workspace-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
  padding: 10px 24px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--background);
}

.workspace-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 280px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.workspace-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(420px, 72vw);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.workspace-breadcrumb__item span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.workspace-breadcrumb__item {
  cursor: pointer;
}

button.workspace-breadcrumb__item:hover {
  color: var(--ink);
}

.workspace-breadcrumb__item.is-active {
  color: var(--accent);
}

.workspace-breadcrumb__sep {
  color: color-mix(in srgb, var(--muted) 54%, transparent);
  font-weight: 800;
}

.workspace-title--compact .workspace-breadcrumb__item {
  max-width: min(320px, 68vw);
}

.workspace-title-action {
  flex: 0 0 auto;
  text-transform: uppercase;
}

.topbar {
  position: sticky;
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, auto);
  gap: 18px;
  align-items: center;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 0 24px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #050505;
  color: #ffffff;
}

.topbar-brand-lockup {
  display: grid;
  grid-template-columns: var(--sidebar) 1px auto;
  align-items: center;
  gap: 0;
  min-width: 0;
  height: 100%;
}

.header-innovo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
}

.brand-divider {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.42);
}

.insight-wordmark {
  display: block;
  width: 132px;
  max-width: 132px;
  height: auto;
  margin-left: 23px;
  object-fit: contain;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3,
.hub-card strong {
  text-transform: uppercase;
}

h1 {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1.1;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 15px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  max-width: 210px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: #121d23;
  color: #d6e1e8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(56, 187, 226, 0.18), 0 0 0 1px rgba(56, 187, 226, 0.18);
}

.user-chip:hover,
.user-chip:focus-visible {
  border-color: var(--accent);
  color: #ffffff;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(56, 187, 226, 0.28), 0 0 0 2px rgba(56, 187, 226, 0.22);
}

.user-chip:disabled {
  cursor: default;
  opacity: 0.72;
}

#signOutButton {
  border-color: rgba(255, 255, 255, 0.32);
  background: #050505;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

#signOutButton:hover,
#signOutButton:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: #121d23;
  color: #ffffff;
}

.quick-add {
  position: relative;
  display: inline-flex;
}

.quick-add-button {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.quick-add-button svg {
  transform: none;
}

.quick-add-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.quick-add-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: min(340px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.quick-add-menu button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.quick-add-menu button:hover,
.quick-add-menu button:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}

.quick-add-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent-dark);
}

.quick-add-menu-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.quick-add-menu-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-add-menu-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.quick-add-menu-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-shell {
  position: relative;
  width: min(440px, 32vw);
}

.search-box {
  display: grid;
  grid-template-columns: 20px minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: #121d23;
  color: #eef6f7;
  box-shadow: inset 0 0 0 1px rgba(56, 187, 226, 0.18), 0 0 0 1px rgba(56, 187, 226, 0.18);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

#searchIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  line-height: 0;
}

#searchIcon svg {
  display: block;
}

.search-box:focus-within {
  border-color: var(--accent);
  background: #101a20;
  box-shadow:
    inset 0 0 0 1px rgba(56, 187, 226, 0.28),
    0 0 0 2px rgba(53, 184, 230, 0.22),
    0 12px 32px rgba(53, 184, 230, 0.16);
}

.search-box input {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: #ffffff;
  font-weight: 400;
  line-height: 36px;
}

.search-box input::placeholder {
  color: #ffffff;
  font-weight: 400;
  opacity: 1;
}

.search-box #globalSearch,
.search-box #globalSearch::placeholder {
  font-weight: 400;
}

.global-search-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 10px;
  width: min(680px, calc(100vw - 32px));
  max-height: min(70vh, 680px);
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(5, 5, 5, 0.16);
}

.global-search-category {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.global-search-category header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.global-search-category .metric-icon {
  width: 28px;
  height: 28px;
}

.global-search-category header > strong {
  min-width: 0;
  font-size: 12px;
  text-transform: uppercase;
}

.global-search-category header > span:not(.metric-icon) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
}

.global-search-results {
  display: grid;
  gap: 4px;
}

.global-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.global-search-result:hover,
.global-search-result:focus-visible {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.global-search-result strong,
.global-search-result small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result strong {
  font-size: 13px;
}

.global-search-result small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.global-search-result svg {
  width: 16px;
  height: 16px;
}

.global-search-empty {
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.icon-button,
.primary-button,
.ghost-button,
.mini-action,
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.icon-button {
  width: 42px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.primary-button {
  padding: 0 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  font-weight: 750;
  text-decoration: none;
  text-transform: uppercase;
}

.ghost-button,
.mini-action,
.filter-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.ghost-button,
.mini-action {
  text-transform: uppercase;
}

.ghost-button {
  padding: 0 13px;
}

.mini-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  text-decoration: none;
}

.add-cta-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.add-cta-button:hover,
.add-cta-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, #050505);
  background: color-mix(in srgb, var(--accent) 88%, #050505);
  color: #ffffff;
}

.filter-chip {
  min-height: 34px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.filter-chip.is-active {
  border-color: var(--accent);
  background: var(--soft-accent);
  color: #005b7b;
}

button:disabled,
button.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.view {
  padding: 18px 24px 24px;
}

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

.dashboard-grid--lower {
  margin-top: 16px;
}

.orders-summary-block {
  display: grid;
  gap: 14px;
}

.orders-summary-block .split-title {
  min-height: 0;
  margin-bottom: 0;
}

.orders-summary-block .metric-card {
  display: grid;
  gap: 12px;
  min-height: 168px;
}

.orders-summary-block .metric-card strong {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 82px;
  min-height: 54px;
  margin-top: 0;
  padding: 0 14px;
  border: 1px solid var(--summary-color, var(--accent));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--summary-color, var(--accent)) 10%, #fff);
  color: var(--summary-color, var(--accent-2));
  font-size: 34px;
  line-height: 1;
}

.orders-summary-block .metric-card--orders {
  --summary-color: var(--accent-2);
}

.orders-summary-block .metric-card--activity {
  --summary-color: var(--good);
}

.orders-summary-block .metric-card--alert {
  --summary-color: var(--danger);
}

.orders-summary-block .metric-card--dollar {
  --summary-color: var(--warn);
}

.card,
.metric-card,
.split-panel,
.board-column,
.table-panel,
.customer-detail,
.ticket-dialog .dialog-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric-card {
  grid-column: span 3;
  min-height: 132px;
  padding: 16px;
}

.metric-card strong {
  display: block;
  margin-top: 18px;
  font-size: 30px;
  line-height: 1;
}

.metric-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.metric-icon,
.status-dot,
.avatar,
.route-index {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.metric-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--soft-blue);
  color: var(--accent-2);
}

.wide-card {
  grid-column: span 8;
  min-height: 360px;
  padding: 18px;
}

.side-card {
  grid-column: span 4;
  min-height: 360px;
  padding: 18px;
}

.card-title {
  min-height: 36px;
  margin-bottom: 16px;
}

.card-title p,
.split-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.chart {
  display: grid;
  grid-template-columns: 52px 1fr 38px;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
}

.bar {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2);
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35b8e6, #050505);
}

.chart + .chart {
  margin-top: 11px;
}

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

.pipeline-step {
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.pipeline-step span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pipeline-step strong {
  display: block;
  margin-top: 10px;
  font-size: 22px;
}

.activity-list,
.service-list,
.asset-list,
.schedule-list,
.route-list {
  display: grid;
  gap: 10px;
}

.activity-item,
.service-row,
.asset-row,
.schedule-item {
  min-height: 58px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.activity-item:last-child,
.service-row:last-child,
.asset-row:last-child,
.schedule-item:last-child {
  border-bottom: 0;
}

.activity-copy,
.row-copy,
.schedule-copy {
  min-width: 0;
}

.activity-copy strong,
.row-copy strong,
.schedule-copy strong,
.customer-heading strong,
.board-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.activity-copy span,
.row-copy span,
.schedule-copy span,
.customer-heading span,
.board-card span,
.board-card small,
.gate-row small,
.muted {
  color: var(--muted);
  font-size: 12px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent-2);
}

.status-dot.critical {
  background: var(--danger);
}

.status-dot.high {
  background: var(--warn);
}

.status-dot.good {
  background: var(--good);
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

.split-panel,
.table-panel,
.customer-detail {
  padding: 18px;
}

.split-title {
  min-height: 38px;
  margin-bottom: 14px;
}

.split-title-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.table-panel {
  overflow: hidden;
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.8fr 0.8fr 0.9fr;
  gap: 12px;
  align-items: center;
  min-width: 760px;
}

.orders-head,
.orders-row {
  grid-template-columns: 1.35fr 1fr 0.85fr 0.95fr 0.7fr 0.7fr 0.85fr;
  min-width: 1040px;
}

.table-head {
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.table-scroll {
  overflow-x: auto;
}

.table-row {
  min-height: 66px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.table-row:hover,
.customer-list button:hover,
.board-card:hover,
.schedule-item:hover,
.route-step:hover {
  background: var(--surface-2);
}

.table-row strong,
.table-row span {
  overflow-wrap: anywhere;
}

.customer-list {
  display: grid;
  gap: 8px;
}

.customer-list button {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
}

.customer-list button.is-selected {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-weight: 800;
}

.customer-detail {
  position: sticky;
  top: 106px;
  align-self: start;
}

.customer-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.customer-stat {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.customer-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.customer-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 20px;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.detail-list div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.detail-list strong {
  color: var(--ink);
  text-align: right;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.badge.critical {
  background: var(--soft-danger);
  color: var(--danger);
}

.badge.high {
  background: var(--soft-warn);
  color: var(--warn);
}

.badge.medium {
  background: var(--soft-blue);
  color: #1d4ed8;
}

.badge.low,
.badge.good {
  background: #dcfce7;
  color: var(--good);
}

.badge.neutral {
  background: #e2e8f0;
  color: #475569;
}

.notification-toast-stack {
  position: fixed;
  top: calc(var(--topbar-height) + 14px);
  right: 18px;
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 36px));
  pointer-events: none;
}

.insight-notification-toast {
  --notification-colour: var(--accent);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 104px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--notification-colour) 42%, var(--line));
  border-left: 6px solid var(--notification-colour);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--notification-colour) 10%, #fff), #fff 66%),
    var(--surface);
  box-shadow: 0 22px 55px color-mix(in srgb, var(--notification-colour) 18%, rgba(5, 5, 5, 0.16));
  pointer-events: auto;
  animation: quoteDecisionPop 520ms cubic-bezier(0.18, 0.84, 0.32, 1.2);
}

.insight-notification-toast.is-accepted {
  --notification-colour: var(--traffic-green);
}

.insight-notification-toast.is-declined {
  --notification-colour: var(--traffic-red);
}

.notification-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--notification-colour) 16%, #fff);
  color: var(--notification-colour);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--notification-colour) 24%, transparent);
}

.notification-toast-icon svg {
  width: 25px;
  height: 25px;
}

.notification-toast-copy {
  min-width: 0;
}

.notification-toast-copy span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.notification-toast-copy strong {
  display: block;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.05;
  text-transform: uppercase;
}

.notification-toast-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.notification-toast-actions {
  display: grid;
  gap: 8px;
  min-width: 112px;
}

.notification-toast-actions .primary-button,
.notification-toast-actions .ghost-button {
  min-height: 36px;
  padding: 0 11px;
  font-size: 12px;
}

@keyframes quoteDecisionPop {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .notification-toast-stack {
    top: 10px;
    right: 10px;
    width: calc(100vw - 20px);
  }

  .insight-notification-toast {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .notification-toast-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

.brand-hex-badge {
  --hex-accent: #64748b;
  --hex-bg: #e2e8f0;
  --hex-fg: #334155;
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 0 18px;
  color: var(--hex-fg);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  isolation: isolate;
  white-space: nowrap;
}

.brand-hex-badge::before,
.brand-hex-badge::after {
  content: "";
  position: absolute;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  inset: 0;
  z-index: -2;
}

.brand-hex-badge::before {
  background: var(--hex-accent);
}

.brand-hex-badge::after {
  inset: 1px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hex-accent) 12%, #fff), rgba(255, 255, 255, 0) 42%),
    var(--hex-bg);
  z-index: -1;
}

.brand-hex-badge > span {
  display: block;
  overflow: hidden;
  max-width: 170px;
  text-overflow: ellipsis;
}

.brand-hex-badge--critical {
  --hex-accent: var(--danger);
  --hex-bg: var(--soft-danger);
  --hex-fg: var(--danger);
}

.brand-hex-badge--high {
  --hex-accent: var(--warn);
  --hex-bg: var(--soft-warn);
  --hex-fg: var(--warn);
}

.brand-hex-badge--medium {
  --hex-accent: var(--accent);
  --hex-bg: var(--soft-blue);
  --hex-fg: #1d4ed8;
}

.brand-hex-badge--low,
.brand-hex-badge--good {
  --hex-accent: var(--good);
  --hex-bg: #dcfce7;
  --hex-fg: var(--good);
}

.brand-hex-badge--neutral {
  --hex-accent: #94a3b8;
  --hex-bg: #e2e8f0;
  --hex-fg: #475569;
}

.order-division-badge {
  border: 1px solid var(--division-color);
  background: color-mix(in srgb, var(--division-color) 18%, #fff);
  color: var(--ink);
}

.order-division-badge.is-all {
  border-color: var(--accent);
  background: var(--soft-blue);
  color: var(--accent-2);
}

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.board-column {
  min-height: 520px;
  padding: 12px;
  box-shadow: none;
}

.board-column h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin-bottom: 10px;
}

.board-column h3 span {
  color: var(--muted);
  font-size: 12px;
}

.board-stack {
  display: grid;
  gap: 10px;
}

.board-card {
  display: grid;
  gap: 10px;
  min-height: 174px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.board-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.status-control {
  display: grid;
  grid-template-columns: repeat(3, 32px);
  gap: 4px;
  margin-left: auto;
}

.status-control button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
}

.status-control button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.schedule-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 390px);
  gap: 16px;
}

.day-grid {
  display: grid;
  grid-template-columns: 72px repeat(5, minmax(140px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.day-cell,
.time-cell {
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.time-cell {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.day-cell {
  padding: 10px;
}

.day-cell strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.day-cell span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.day-cell.is-booked {
  border-color: #bcd7d1;
  background: #f1fbf8;
}

.route-step {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.route-index {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.report-card {
  min-height: 260px;
  padding: 18px;
}

.gate-list,
.salesperson-list,
.stack-list,
.xero-grid,
.job-actions {
  display: grid;
  gap: 10px;
}

.gate-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.gate-row .row-copy {
  display: grid;
  gap: 3px;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

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

.info-row strong {
  color: var(--ink);
  text-align: right;
}

.full-width {
  width: 100%;
  margin-top: 14px;
}

.xero-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.admin-xero-grid {
  grid-template-columns: 1fr;
  margin: 14px 0;
}

.admin-xero-grid .customer-stat strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.admin-scope-list {
  margin-bottom: 0;
}

.m365-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.m365-user-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

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

.job-actions .mini-action {
  min-width: 0;
  white-space: normal;
}

.job-actions .opportunity-quick-open-action {
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: normal;
}

.mini-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dashboard-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.hub-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 154px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}

.hub-card:hover {
  border-color: var(--accent);
  background: #fbfdff;
}

.hub-card strong {
  display: block;
  font-size: 16px;
}

.hub-card span:last-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.owner-dashboard-shell {
  display: grid;
  gap: 16px;
}

.owner-command-hero,
.owner-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.owner-command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 10px 14px;
  border-left: 5px solid var(--accent);
}

.owner-command-title {
  min-width: 0;
}

.owner-command-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.owner-command-hero h1 {
  min-width: 0;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.owner-user-level {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: #0f4f70;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.owner-command-hero p {
  max-width: 780px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.owner-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.owner-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
  justify-self: end;
  width: min(680px, 56vw);
}

.owner-command-metric {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.owner-command-metric:hover,
.owner-command-metric:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(60, 183, 228, 0.16);
  outline: none;
}

.owner-command-metric--danger {
  border-left-color: var(--danger);
}

.owner-command-metric--danger:hover,
.owner-command-metric--danger:focus-visible {
  border-color: var(--danger);
}

.owner-command-metric--good {
  border-left-color: var(--good);
}

.owner-command-metric--good:hover,
.owner-command-metric--good:focus-visible {
  border-color: var(--good);
}

.owner-command-metric span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.owner-command-metric strong {
  font-size: 20px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.owner-hero-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.owner-hero-tile,
.owner-action-tile,
.owner-mini-bar,
.owner-po-tile,
.owner-top-accounts button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.owner-hero-tile {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 142px;
  padding: 12px;
  border-top: 4px solid var(--owner-colour, var(--accent));
}

.owner-hero-tile--sales,
.owner-hero-tile--forecast {
  --owner-colour: var(--accent);
}

.owner-hero-tile--orders {
  --owner-colour: var(--good);
}

.owner-hero-tile--finance {
  --owner-colour: var(--warn);
}

.owner-hero-tile--po {
  --owner-colour: #6d5dfc;
}

.owner-hero-tile--relationships {
  --owner-colour: var(--accent-2);
}

.owner-hero-tile .metric-icon,
.owner-action-tile .metric-icon {
  background: color-mix(in srgb, var(--owner-colour) 12%, #fff);
  color: var(--owner-colour);
}

.owner-hero-tile > span:not(.metric-icon),
.owner-action-tile span,
.owner-mini-bar span,
.owner-po-tile span,
.owner-margin-strip span,
.owner-relationship-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.owner-hero-tile strong {
  overflow: hidden;
  font-size: 27px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-hero-tile small,
.owner-action-tile small,
.owner-po-tile small,
.owner-relationship-grid small,
.owner-margin-strip small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.owner-hero-tile:hover,
.owner-hero-tile:focus-visible,
.owner-action-tile:hover,
.owner-action-tile:focus-visible,
.owner-mini-bar:hover,
.owner-mini-bar:focus-visible,
.owner-po-tile:hover,
.owner-po-tile:focus-visible,
.owner-top-accounts button:hover,
.owner-top-accounts button:focus-visible {
  border-color: var(--owner-colour, var(--accent));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--owner-colour, var(--accent)) 14%, transparent);
  outline: none;
}

.owner-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.owner-dashboard-grid:not(.owner-dashboard-grid--lower) {
  align-items: stretch;
}

.owner-day-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: stretch;
}

.owner-day-grid--my-day {
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr);
}

.my-day-page .my-day-command-centre {
  margin-bottom: 0;
}

.my-day-page .owner-day-panel {
  min-height: clamp(620px, 68vh, 860px);
}

.my-day-page .owner-followup-list {
  max-height: clamp(520px, 62vh, 760px);
}

.my-day-page .owner-calendar-list {
  max-height: clamp(320px, 42vh, 540px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.my-day-page .split-title {
  align-items: center;
  margin-bottom: 12px;
}

.my-day-title-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.my-day-count-pill {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--pill-colour, var(--accent)) 28%, var(--line));
  border-left: 5px solid var(--pill-colour, var(--accent));
  border-radius: 8px;
  background: color-mix(in srgb, var(--pill-colour, var(--accent)) 10%, #fff);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pill-colour, var(--accent)) 10%, transparent);
  white-space: nowrap;
}

.my-day-count-pill strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.my-day-count-pill span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.my-day-count-pill--medium {
  --pill-colour: var(--accent);
}

.my-day-count-pill--good {
  --pill-colour: var(--good);
}

.my-day-count-pill--critical,
.my-day-count-pill--danger {
  --pill-colour: var(--danger);
}

.my-day-task-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

.my-day-task-filter {
  --task-filter-colour: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 138px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-left: 5px solid color-mix(in srgb, var(--task-filter-colour) 55%, var(--line));
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}

.my-day-task-filter strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.my-day-task-filter:hover,
.my-day-task-filter:focus-visible,
.my-day-task-filter.is-active {
  border-color: color-mix(in srgb, var(--task-filter-colour) 58%, var(--line));
  background: color-mix(in srgb, var(--task-filter-colour) 9%, #ffffff);
  color: var(--ink);
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--task-filter-colour) 16%, transparent);
}

.my-day-task-filter--accent {
  --task-filter-colour: var(--accent);
}

.my-day-task-filter--warning {
  --task-filter-colour: var(--warning);
}

.my-day-task-filter--danger {
  --task-filter-colour: var(--danger);
}

.my-day-task-filter--good {
  --task-filter-colour: var(--good);
}

.my-day-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(58, 184, 230, 0.18);
}

.my-day-add-button svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.8;
}

.my-day-add-button:hover,
.my-day-add-button:focus-visible {
  border-color: var(--accent);
  filter: brightness(0.98);
  outline: 0;
  transform: translateY(-1px);
}

.my-day-quick-add-dialog {
  width: min(980px, 100%);
}

.my-day-quick-add-form {
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.my-day-quick-add-section {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.my-day-quick-add-section--links {
  padding-top: 2px;
  background: transparent;
}

.my-day-quick-add-section .split-title {
  margin-bottom: 0;
}

.my-day-quick-add-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  text-transform: uppercase;
}

.my-day-quick-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.my-day-quick-add-grid--links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.my-day-linked-search-field--wide,
.my-day-linked-dependent-fields {
  grid-column: 1 / -1;
}

.my-day-linked-dependent-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.my-day-quick-add-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.my-day-quick-add-grid input,
.my-day-quick-add-grid select,
.my-day-quick-add-grid textarea {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  text-transform: none;
}

.my-day-quick-add-grid input:disabled {
  border-color: rgba(210, 224, 234, 0.78);
  background: #f5f8fb;
  color: #81909b;
  cursor: not-allowed;
}

.my-day-quick-add-grid .date-time-field__control {
  grid-template-columns: minmax(0, 1fr);
  min-height: 46px;
  padding: 3px;
  border-radius: 8px;
  background: #ffffff;
}

.my-day-quick-add-grid .date-time-field__control .metric-icon {
  display: none;
}

.my-day-quick-add-grid .date-time-field__inputs {
  grid-template-columns: minmax(0, 1fr) 102px;
  gap: 4px;
}

.my-day-quick-add-grid .date-time-field__inputs input,
.my-day-quick-add-grid .date-time-field__inputs select {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.my-day-quick-add-grid textarea {
  min-height: 100px;
  resize: vertical;
}

.my-day-quick-add-grid input:focus,
.my-day-quick-add-grid select:focus,
.my-day-quick-add-grid textarea:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(58, 180, 222, 0.16);
}

.my-day-quick-add-wide {
  grid-column: 1 / -1;
}

.my-day-task-sync {
  margin-top: 2px;
}

.owner-dashboard-main,
.owner-dashboard-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.owner-dashboard-side {
  align-content: start;
}

.owner-dashboard-grid:not(.owner-dashboard-grid--lower) > .owner-dashboard-side {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

.owner-sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
}

.owner-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.owner-day-panel {
  align-content: start;
  min-height: 270px;
}

.owner-panel--calendar {
  align-content: stretch;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 100%;
}

.owner-followup-list {
  max-height: clamp(360px, 44vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.owner-followup-row.account-data-row {
  grid-template-columns: 10px minmax(0, 1fr) minmax(118px, 132px);
  grid-template-rows: auto auto;
  gap: 7px 8px;
  align-items: start;
  min-height: auto;
  padding: 10px 10px 12px;
  overflow: visible;
}

.owner-followup-row .lead-division-swatch {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 6px;
  height: auto;
}

.owner-followup-row .account-data-copy {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  gap: 2px;
  align-self: start;
}

.owner-followup-row .account-data-copy strong,
.owner-followup-row .account-data-copy span {
  max-width: 100%;
}

.owner-followup-row .account-data-copy strong {
  font-size: 13px;
}

.owner-followup-row .account-data-copy span {
  flex: none;
  font-size: 11px;
}

.owner-followup-row .account-data-analytics {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(48px, auto);
  min-width: 0;
  align-self: stretch;
}

.owner-followup-row .account-data-analytics .account-row-metric {
  min-height: 48px;
  padding: 6px 8px;
}

.owner-followup-row .account-data-analytics .account-row-metric strong {
  font-size: 13px;
}

.owner-followup-row .account-row-metric--task-type {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  border-left: 4px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff 78%);
}

.owner-followup-row .account-data-actions {
  display: grid;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: stretch;
  align-content: center;
  min-width: 0;
  gap: 8px;
}

.owner-followup-row .account-data-actions .mini-action {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  justify-content: center;
  padding-inline: 9px;
  font-size: 10px;
}

.owner-followup-row .account-data-actions .mini-action.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.owner-followup-detail {
  display: grid;
  gap: 10px;
  margin: -2px 0 10px 20px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.owner-followup-detail__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.owner-followup-detail__meta span,
.owner-followup-detail__body {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.owner-followup-detail__meta small,
.owner-followup-detail__body small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-followup-detail__meta strong,
.owner-followup-detail__body p {
  display: block;
  overflow-wrap: anywhere;
}

.owner-followup-detail__meta strong {
  font-size: 12px;
}

.owner-followup-detail__body p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.owner-followup-edit-form {
  align-items: stretch;
}

.owner-followup-edit-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.owner-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-calendar-nav {
  gap: 6px;
}

.home-calendar-grid {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.owner-panel--calendar .home-calendar-grid--week {
  align-self: stretch;
}

.home-calendar-grid--week {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.home-calendar-grid--month {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.home-calendar-weekday {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.home-calendar-day {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  min-height: 86px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.home-calendar-grid--month .home-calendar-day {
  min-height: 78px;
}

.home-calendar-day--blank {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.48);
}

.home-calendar-day.is-today {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  box-shadow: inset 0 3px 0 var(--accent);
}

.home-calendar-day.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  box-shadow: inset 0 3px 0 var(--accent), 0 10px 24px rgba(53, 184, 230, 0.16);
}

.home-calendar-day header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.home-calendar-day-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.home-calendar-day-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.home-calendar-day header strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-calendar-day header span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.home-calendar-stack {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
}

.home-calendar-event-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 22px;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.home-calendar-event-chip--outlook {
  border-left-color: #2563eb;
}

.home-calendar-event-chip--teams {
  border-left-color: var(--good);
}

.home-calendar-event-chip--task {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, #fff);
}

.home-calendar-event-chip b,
.home-calendar-event-chip span {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-calendar-event-chip b {
  color: var(--accent-2);
  font-size: 9px;
  font-weight: 950;
}

.home-calendar-event-chip span {
  font-size: 10px;
  font-weight: 850;
}

.home-calendar-event-chip:hover,
.home-calendar-event-chip:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(53, 184, 230, 0.14);
  outline: none;
}

.home-calendar-more {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.owner-calendar-list {
  display: grid;
  gap: 8px;
  align-content: start;
  grid-auto-rows: auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 2px;
}

.owner-calendar-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.owner-calendar-row:hover,
.owner-calendar-row:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(53, 184, 230, 0.14);
  outline: none;
}

.owner-calendar-row--task {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 5%, #fff);
}

.owner-calendar-time,
.owner-calendar-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.owner-calendar-time strong,
.owner-calendar-copy strong,
.owner-calendar-time small,
.owner-calendar-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-time strong {
  font-size: 16px;
  line-height: 1;
}

.owner-calendar-time small,
.owner-calendar-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.owner-calendar-copy strong {
  font-size: 13px;
}

.owner-action-grid,
.owner-order-status-grid {
  display: grid;
  gap: 8px;
}

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

.owner-action-tile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  min-height: 82px;
  padding: 10px;
  border-left: 4px solid var(--owner-colour, var(--accent));
}

.owner-action-tile strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 22px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-order-status-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.owner-mini-bars {
  display: grid;
  gap: 8px;
}

.owner-mini-bar {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr) minmax(86px, auto);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 9px;
}

.owner-mini-bar i {
  display: block;
  overflow: hidden;
  height: 11px;
  border-radius: 999px;
  background: var(--surface-2);
}

.owner-mini-bar i::before {
  display: block;
  width: var(--owner-share);
  height: 100%;
  border-radius: inherit;
  background: var(--owner-colour, var(--accent));
  content: "";
}

.owner-mini-bar strong {
  overflow: hidden;
  font-size: 13px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-po-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.owner-po-tile {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 10px;
  border-left: 4px solid var(--accent);
}

.owner-po-tile strong {
  font-size: 24px;
  line-height: 1;
}

.owner-margin-strip,
.owner-relationship-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

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

.owner-margin-strip article,
.owner-relationship-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.owner-margin-strip strong,
.owner-relationship-grid strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font-size: 21px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-top-accounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.owner-top-accounts > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.owner-top-accounts > div > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-top-accounts button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
}

.owner-top-accounts span,
.owner-top-accounts b {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-top-accounts b {
  text-align: right;
}

.owner-panel--fleet {
  gap: 14px;
}

.owner-fleet-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(260px, 0.85fr);
  gap: 12px;
  min-width: 0;
}

.owner-fleet-map {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
    linear-gradient(135deg, #f6fbfe 0%, #eef6fa 48%, #ffffff 100%);
}

.owner-fleet-map-canvas,
.owner-fleet-fallback {
  position: absolute;
  inset: 0;
}

.owner-fleet-map-canvas {
  z-index: 1;
  display: none;
}

.owner-fleet-fallback {
  z-index: 0;
}

.owner-fleet-map.is-leaflet-ready .owner-fleet-map-canvas {
  display: block;
}

.owner-fleet-map.is-leaflet-ready .owner-fleet-fallback {
  display: none;
}

.owner-fleet-map .leaflet-container,
.owner-fleet-map .leaflet-control {
  font-family: inherit;
}

.owner-fleet-map .leaflet-control-zoom a {
  color: var(--ink);
  font-weight: 950;
}

.owner-fleet-map .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.owner-fleet-map .leaflet-popup-content {
  margin: 10px 12px;
}

.owner-fleet-leaflet-icon {
  display: grid;
  place-items: center;
}

.owner-fleet-leaflet-icon--cluster {
  width: 58px;
  height: 58px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(245, 174, 58, 0.78);
  box-shadow: 0 0 0 18px rgba(245, 174, 58, 0.22), 0 18px 34px rgba(5, 22, 32, 0.22);
}

.owner-fleet-leaflet-icon--cluster span {
  color: #111827;
  font-size: 17px;
  font-weight: 950;
}

.owner-fleet-leaflet-icon--vehicle {
  position: relative;
  align-items: start;
  justify-items: center;
  width: 112px;
  height: 58px;
}

.owner-fleet-leaflet-icon--vehicle .owner-fleet-leaflet-icon__stop {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--danger);
  color: #ffffff;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(5, 22, 32, 0.16);
}

.owner-fleet-leaflet-icon--vehicle strong {
  max-width: 104px;
  margin-top: -2px;
  padding: 4px 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #2f8f45;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(5, 22, 32, 0.14);
}

.owner-fleet-popup {
  display: grid;
  gap: 4px;
  min-width: 160px;
}

.owner-fleet-popup strong {
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-fleet-popup span,
.owner-fleet-popup small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.owner-fleet-map__grid {
  position: absolute;
  inset: 0;
  opacity: 0.58;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.owner-fleet-marker {
  position: absolute;
  left: var(--fleet-x);
  top: var(--fleet-y);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 18px 32px rgba(5, 22, 32, 0.2);
}

.owner-fleet-marker::after {
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: inherit;
  content: "";
}

.owner-fleet-marker span {
  max-width: 34px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.owner-fleet-marker:hover,
.owner-fleet-marker:focus-visible {
  background: var(--accent-2);
  outline: none;
  transform: translate(-50%, -50%) scale(1.06);
}

.owner-fleet-empty {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  text-align: center;
}

.owner-fleet-empty strong {
  font-size: 16px;
  text-transform: uppercase;
}

.owner-fleet-empty small {
  max-width: 320px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.owner-fleet-list {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}

.owner-fleet-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.owner-fleet-row .metric-icon {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
}

.owner-fleet-row > div:not(.owner-fleet-row__meta) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.owner-fleet-row strong,
.owner-fleet-row span {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-fleet-row strong {
  font-size: 13px;
  line-height: 1.1;
  text-transform: uppercase;
}

.owner-fleet-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.owner-fleet-row__meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 108px;
}

.owner-fleet-row__meta .badge {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-fleet-row__meta .mini-action {
  min-height: 28px;
  padding-inline: 8px;
  font-size: 10px;
}

.service-model-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.orders-division-panel {
  margin-top: 16px;
  padding: 14px;
}

.orders-division-panel .split-title {
  margin-bottom: 0;
}

.service-model-grid,
.service-stage-panel {
  display: grid;
  gap: 12px;
}

.service-model-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-model-card {
  display: grid;
  gap: 10px;
  width: 100%;
  min-height: 262px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--division-color);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow);
}

.service-model-card.is-active,
.service-model-card:hover,
.service-model-card:focus-visible {
  border-color: var(--division-color);
  background: color-mix(in srgb, var(--division-color) 8%, #fff);
}

.service-model-card strong {
  font-size: 17px;
}

.service-stage-card p,
.service-stage-jobs span,
.field-readiness-checks > div > small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.service-card-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.service-card-count {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.service-card-count strong {
  font-size: 30px;
  line-height: 1;
}

.service-card-count small {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.service-card-count.is-live {
  border-color: color-mix(in srgb, var(--good) 34%, var(--line));
  background: color-mix(in srgb, var(--good) 10%, #fff);
  color: var(--good);
}

.service-card-count.is-hold {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, #fff);
  color: var(--danger);
}

.service-card-revenue {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--division-color) 26%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--division-color) 7%, #fff);
}

.service-card-revenue span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.service-card-revenue strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
}

.division-logo-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: #050505;
  overflow: hidden;
}

.division-logo-tile img,
.division-order-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sales-division-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.sales-division-card {
  display: grid;
  gap: 10px;
  min-height: 268px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--division-color);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow);
}

.sales-division-card:hover,
.sales-division-card:focus-visible,
.sales-division-card.is-active {
  border-color: var(--division-color);
  background: color-mix(in srgb, var(--division-color) 8%, #fff);
  outline: none;
}

.sales-division-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sales-division-card__head strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.sales-division-card__count {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--good) 34%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--good) 9%, #fff);
  color: var(--good);
}

.sales-division-card__count strong {
  font-size: 34px;
  line-height: 1;
}

.sales-division-card__count span,
.sales-division-card__pipeline span,
.sales-division-card__pipeline small,
.sales-division-card__breakdown span {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.sales-division-card__pipeline {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--division-color) 30%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--division-color) 7%, #fff);
}

.sales-division-card__pipeline span,
.sales-division-card__pipeline small {
  color: var(--muted);
}

.sales-division-card__pipeline strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.05;
}

.sales-division-card__breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
}

.sales-division-card__breakdown span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
}

.sales-division-card__breakdown b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.division-order-panel {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  border-top: 4px solid var(--division-color);
}

.division-workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  min-height: 74px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--division-color);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.division-workspace-title {
  min-width: 0;
}

.division-workspace-hero h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.division-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(154px, 1fr));
  gap: 10px;
  width: min(390px, 42vw);
}

.division-hero-tile {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--division-color) 7%, #fff);
  color: var(--ink);
  text-align: left;
}

.division-hero-tile span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.division-hero-tile strong {
  font-size: 20px;
  line-height: 1;
}

.division-hero-tile small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.division-stage-filter.division-hero-tile {
  min-height: 54px;
  padding: 8px 10px;
}

.division-stage-filter.division-hero-tile:hover,
.division-stage-filter.division-hero-tile:focus-visible,
.division-stage-filter.division-hero-tile.is-active {
  border-color: var(--division-color);
  background: #050505;
  color: var(--division-color);
}

.division-stage-filter.division-hero-tile:hover span,
.division-stage-filter.division-hero-tile:focus-visible span,
.division-stage-filter.division-hero-tile.is-active span,
.division-stage-filter.division-hero-tile:hover strong,
.division-stage-filter.division-hero-tile:focus-visible strong,
.division-stage-filter.division-hero-tile.is-active strong,
.division-stage-filter.division-hero-tile:hover small,
.division-stage-filter.division-hero-tile:focus-visible small,
.division-stage-filter.division-hero-tile.is-active small {
  color: var(--division-color);
}

.division-order-logo {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 72px;
  min-height: 54px;
  border-radius: var(--radius);
  background: #050505;
  overflow: hidden;
}

.division-order-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.division-order-stats > div,
.division-stage-filter {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--division-color) 7%, #fff);
}

.division-stage-filter {
  color: var(--ink);
  text-align: left;
}

.division-stage-filter:hover,
.division-stage-filter:focus-visible,
.division-stage-filter.is-active {
  border-color: var(--division-color);
  background: #050505;
  color: #ffffff;
}

.division-order-stats span,
.division-stage-filter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.division-stage-filter:hover span,
.division-stage-filter:focus-visible span,
.division-stage-filter.is-active span,
.division-stage-filter:hover small,
.division-stage-filter:focus-visible small,
.division-stage-filter.is-active small {
  color: rgba(255, 255, 255, 0.7);
}

.division-order-stats strong,
.division-stage-filter strong {
  font-size: 22px;
}

.division-stage-filter small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.division-order-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.division-order-filter-summary strong {
  margin-left: auto;
  color: var(--ink);
  font-size: 12px;
}

.work-planner-panel {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  min-width: 0;
  overflow: hidden;
}

.work-planner-layout {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.work-planner-controls {
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0;
}

.work-planner-controls .mini-action {
  white-space: nowrap;
}

.planner-mode-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(58px, auto));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
}

.planner-mode-toggle button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.planner-mode-toggle button:last-child {
  border-right: 0;
}

.planner-mode-toggle button.is-active {
  background: var(--accent);
  color: #fff;
}

.work-planner-queue,
.planner-day,
.planner-month-day {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.work-planner-head,
.planner-day header,
.planner-month-day header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.work-planner-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 2px;
}

.work-planner-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(124px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.work-planner-month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.planner-month-weekday {
  padding: 0 4px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.planner-day {
  min-height: 250px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.planner-month-day {
  min-height: 150px;
  padding: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.planner-month-day--blank {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.planner-day.is-today,
.planner-month-day.is-today {
  border-color: var(--accent);
  background: var(--soft-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent), 0 12px 24px rgba(53, 184, 230, 0.12);
}

.planner-day.is-today header strong,
.planner-month-day.is-today header strong {
  color: var(--accent-strong);
}

.planner-day.is-drop-target,
.planner-month-day.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.planner-day-stack {
  display: grid;
  gap: 8px;
}

.planner-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.planner-job-card {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--division-colour) 36%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--division-colour) 8%, #fff);
}

.planner-job-card[draggable="true"] {
  cursor: grab;
}

.planner-job-card[draggable="true"]:active {
  cursor: grabbing;
}

.planner-job-drag-handle {
  display: block;
  align-self: stretch;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--division-colour) 64%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: var(--division-colour);
  cursor: grab;
}

.planner-job-drag-handle:active {
  cursor: grabbing;
}

.planner-job-card.is-dragging {
  opacity: 0.55;
  transform: scale(0.99);
}

.planner-job-open {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.planner-job-card strong,
.planner-job-card small {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-job-card strong {
  font-size: 11px;
  line-height: 1.15;
}

.planner-job-card small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

.planner-job-card > span:last-of-type {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 10px;
  font-weight: 900;
}

.planner-job-card--compact {
  grid-template-columns: 8px minmax(0, 1fr) 26px;
  gap: 5px;
  padding: 4px;
}

.planner-job-card--compact > span:last-of-type {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.planner-job-card--compact .planner-job-drag-handle {
  min-height: 30px;
}

.finance-dashboard-grid .metric-card,
.finance-filter-tile {
  text-align: left;
}

.finance-filter-tile {
  border: 1px solid var(--line);
}

.finance-filter-tile.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.finance-layout {
  align-items: start;
  margin-top: 16px;
}

.finance-xero-panel {
  margin-top: 16px;
}

.finance-xero-panel .split-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-xero-grid {
  margin-bottom: 14px;
}

.finance-xero-grid .metric-card {
  min-height: 116px;
}

.finance-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.finance-status-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.finance-status-panel .split-title {
  min-height: 0;
  margin-bottom: 0;
}

.finance-status-panel h3 {
  font-size: 15px;
}

.finance-status-list {
  display: grid;
  gap: 8px;
}

.finance-status-list article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.finance-status-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.finance-status-row-top strong,
.finance-status-row-top b {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.finance-status-row-top b {
  flex: 0 0 auto;
  color: var(--accent-2);
}

.finance-status-meter {
  display: block;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: var(--line);
}

.finance-status-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.finance-status-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-queue-list {
  max-height: min(680px, calc(100vh - 270px));
  overflow-y: auto;
  padding-right: 4px;
}

.finance-review-aside {
  position: sticky;
  top: calc(var(--topbar-height) + 64px);
  max-height: calc(100vh - var(--topbar-height) - 82px);
  overflow-y: auto;
}

.finance-review-header {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.finance-review-header strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.finance-review-header span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-checklist {
  display: grid;
  gap: 8px;
}

.finance-checklist article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.finance-checklist article > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--soft-danger);
  color: var(--danger);
}

.finance-checklist article.is-ok > span {
  background: color-mix(in srgb, var(--good) 14%, #fff);
  color: var(--good);
}

.finance-checklist svg {
  width: 16px;
  height: 16px;
}

.finance-checklist strong,
.finance-checklist small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-checklist strong {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-checklist small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.resource-load-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.work-planner-resource-strip {
  margin-top: -4px;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.resource-load-strip article,
.resource-load-strip button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.resource-load-strip button {
  cursor: pointer;
}

.resource-load-strip button:hover,
.resource-load-strip button:focus-visible,
.resource-load-strip button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.resource-load-strip article span,
.resource-load-strip button span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--soft-accent);
  color: var(--accent-strong);
  font-weight: 900;
}

.resource-load-strip button.is-active span {
  background: var(--accent);
  color: #fff;
}

.resource-load-strip svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.resource-load-strip article strong,
.resource-load-strip article small,
.resource-load-strip button strong,
.resource-load-strip button small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-load-strip article strong,
.resource-load-strip button strong {
  font-size: 12px;
}

.resource-load-strip article small,
.resource-load-strip button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.service-stage-panel {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 16px 0;
}

.service-stage-card {
  display: grid;
  gap: 8px;
  min-height: 154px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.service-stage-card strong {
  font-size: 28px;
}

.service-stage-jobs {
  display: grid;
  gap: 4px;
  margin-top: auto;
}

.field-readiness-list {
  display: grid;
  gap: 12px;
}

.field-readiness-row {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--division-colour, var(--accent));
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--division-colour, var(--accent)) 9%, #fff), var(--surface) 58%);
  box-shadow: var(--shadow);
}

.field-readiness-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.field-readiness-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.readiness-score-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: conic-gradient(var(--readiness-colour, var(--accent)) var(--readiness-percent, 0%), #e2e8f0 0);
  color: var(--ink);
}

.readiness-score-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: var(--surface);
}

.readiness-score-ring strong,
.readiness-score-ring small {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.readiness-score-ring strong {
  font-size: 13px;
  font-weight: 950;
}

.readiness-score-ring small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.order-readiness-progress {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.order-readiness-progress span,
.order-readiness-progress strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.order-readiness-progress strong {
  color: var(--ink);
  text-align: right;
}

.order-readiness-progress div {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
}

.order-readiness-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--readiness-colour, var(--accent));
}

.field-readiness-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.field-readiness-checks--graphic {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
}

.field-readiness-check-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--warn);
  border-radius: var(--radius);
  background: var(--surface);
}

.field-readiness-check-card.is-complete {
  border-top-color: var(--good);
  background: color-mix(in srgb, var(--good) 7%, #fff);
}

.field-readiness-check-card .metric-icon {
  width: 34px;
  height: 34px;
  background: var(--soft-warn);
  color: var(--warn);
}

.field-readiness-check-card.is-complete .metric-icon {
  background: #dcfce7;
  color: var(--good);
}

.field-readiness-check-card div {
  min-width: 0;
}

.field-readiness-check-card span,
.field-readiness-check-card strong,
.field-readiness-check-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-readiness-check-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.field-readiness-check-card strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}

.field-readiness-check-card small {
  display: -webkit-box;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.order-readiness-panel {
  grid-column: 1 / -1;
  border-top: 5px solid var(--accent);
}

.order-readiness-panel .split-title {
  margin-bottom: 12px;
}

.order-readiness-summary-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(118px, auto);
  gap: 14px;
  align-items: center;
  min-width: 0;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--readiness-colour, var(--accent));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--readiness-colour, var(--accent)) 7%, #fff);
}

.order-readiness-summary-card--good {
  --readiness-colour: var(--good);
}

.order-readiness-summary-card--critical {
  --readiness-colour: var(--danger);
}

.order-readiness-summary-card--high {
  --readiness-colour: var(--warn);
}

.order-readiness-summary-card--medium {
  --readiness-colour: var(--accent);
}

.order-readiness-summary-copy,
.order-readiness-count {
  min-width: 0;
}

.order-readiness-summary-copy span,
.order-readiness-count span,
.order-readiness-count small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.order-readiness-summary-copy strong,
.order-readiness-count strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.order-readiness-summary-copy small {
  display: -webkit-box;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.order-readiness-count {
  display: grid;
  align-self: stretch;
  min-width: 118px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--readiness-colour, var(--accent)) 25%, var(--line));
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
  place-content: center;
  text-align: center;
}

.order-readiness-progress {
  margin-bottom: 14px;
}

.order-readiness-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px;
}

.order-readiness-check-card {
  --check-colour: var(--warn);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--check-colour) 28%, var(--line));
  border-left: 5px solid var(--check-colour);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--check-colour) 5%, #fff);
}

.order-readiness-check-card.is-complete {
  --check-colour: var(--good);
}

.order-readiness-check-card.is-needed {
  --check-colour: var(--warn);
}

.order-readiness-check-card .metric-icon {
  width: 36px;
  height: 36px;
  background: color-mix(in srgb, var(--check-colour) 13%, #fff);
  color: var(--check-colour);
}

.order-readiness-check-copy {
  min-width: 0;
}

.order-readiness-check-copy span,
.order-readiness-check-copy small {
  display: block;
  min-width: 0;
}

.order-readiness-check-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.order-readiness-check-copy small {
  display: -webkit-box;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.order-readiness-check-state {
  align-self: center;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--check-colour) 32%, var(--line));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--check-colour);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.field-readiness-checks > div {
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.field-readiness-checks > div.is-complete {
  border-color: color-mix(in srgb, var(--good) 42%, var(--line));
  background: color-mix(in srgb, var(--good) 8%, #fff);
}

.field-readiness-checks > div > span,
.field-readiness-checks > div > strong {
  font-size: 12px;
}

.field-portal-title {
  margin-bottom: 16px;
}

.field-schedule-panel {
  margin-top: 16px;
  overflow: hidden;
}

.field-schedule-title {
  gap: 12px;
  align-items: center;
}

.field-schedule-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.field-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.field-schedule-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

.field-schedule-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  overflow: visible;
}

.field-schedule-day,
.field-schedule-month-day {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.field-schedule-day {
  display: grid;
  grid-template-rows: auto minmax(82px, 1fr);
  padding: 7px;
}

.field-schedule-day header,
.field-schedule-month-day header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.field-schedule-day header strong,
.field-schedule-month-day header span {
  color: var(--ink);
  font-size: 13px;
}

.field-schedule-day > div,
.field-schedule-month-day > div {
  display: grid;
  gap: 6px;
  align-content: start;
  margin-top: 8px;
}

.field-schedule-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.field-schedule-job {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--division-colour, var(--accent)) 42%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--division-colour, var(--accent)) 14%, #fff);
  color: var(--ink);
  text-align: left;
}

.field-schedule-job > span {
  grid-row: span 2;
  width: 4px;
  height: 100%;
  min-height: 28px;
  border-radius: 999px;
  background: var(--division-colour, var(--accent));
}

.field-schedule-job strong,
.field-schedule-job small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-schedule-job strong {
  font-size: 10px;
  line-height: 1.05;
  text-transform: uppercase;
}

.field-schedule-job small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.field-schedule-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.field-schedule-weekday {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.field-schedule-month-day {
  min-height: 118px;
  padding: 7px;
}

.field-schedule-month-day.is-blank {
  border-style: dashed;
  background: transparent;
  opacity: 0.5;
}

.field-schedule-month-day.is-today {
  border-color: var(--accent);
  background: var(--soft-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent), 0 12px 24px rgba(53, 184, 230, 0.12);
}

.field-schedule-day.is-today {
  border-color: var(--accent);
  background: var(--soft-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent), 0 12px 24px rgba(53, 184, 230, 0.12);
}

.field-schedule-day.is-today header span,
.field-schedule-month-day.is-today header strong {
  color: var(--accent-strong);
}

.field-schedule-month-day small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.field-portal-shell {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.field-portal-queue-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.2fr);
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}

.field-job-list,
.field-job-detail,
.field-job-quick-view {
  min-width: 0;
}

.field-job-list {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.field-job-filter-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.field-job-filter-strip button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  text-align: left;
}

.field-job-filter-strip button.is-active {
  border-color: var(--accent);
  background: var(--soft-accent);
  color: var(--ink);
}

.field-job-filter-strip span,
.field-job-filter-strip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.field-job-list-scroll {
  display: grid;
  gap: 10px;
  max-height: min(720px, calc(100vh - 260px));
  overflow: auto;
  padding-right: 4px;
}

.field-job-list--compact .field-job-list-scroll {
  max-height: 244px;
}

.field-job-list-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.field-job-list-row.is-active {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.field-job-list-row strong,
.field-job-list-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-job-list-row strong {
  font-size: 14px;
  text-transform: uppercase;
}

.field-job-list-row small {
  color: var(--muted);
  font-size: 12px;
}

.field-job-list-stripe {
  width: 8px;
  height: 44px;
  border-radius: 999px;
  background: var(--division-colour, var(--accent));
}

.field-job-quick-card {
  display: grid;
  gap: 14px;
  height: 100%;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--division-colour, var(--accent));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.field-job-quick-card .split-title {
  align-items: start;
}

.field-job-quick-card h2 {
  margin: 4px 0 2px;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.field-job-quick-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
}

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

.field-pack-status-note {
  --field-pack-note-colour: var(--accent);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--field-pack-note-colour) 34%, var(--line));
  border-left: 5px solid var(--field-pack-note-colour);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--field-pack-note-colour) 8%, #fff);
}

.field-pack-status-note--red {
  --field-pack-note-colour: var(--danger);
}

.field-pack-status-note--amber {
  --field-pack-note-colour: var(--warn);
}

.field-pack-status-note--green {
  --field-pack-note-colour: var(--good);
}

.field-pack-status-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
}

.field-pack-status-note p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.field-job-quick-card .primary-button {
  justify-content: center;
}

.field-job-detail--full {
  margin-top: 16px;
}

.field-pack-card {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.field-pack-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--division-colour, var(--accent));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.field-pack-header h2 {
  margin: 4px 0 2px;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.field-pack-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.field-pack-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.field-pack-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.field-pack-action-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.field-pack-action-strip .primary-button,
.field-pack-action-strip .ghost-button {
  justify-content: center;
  min-height: 56px;
}

.field-pack-grid,
.field-evidence-grid,
.field-signoff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field-pack-panel {
  min-width: 0;
}

.field-readable-copy {
  display: grid;
  gap: 12px;
}

.field-readable-copy h3,
.field-action-form h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.field-readable-copy p {
  margin: 0;
  line-height: 1.45;
}

.field-operational-lines,
.field-operational-notes,
.field-loading-point,
.order-loading-map {
  display: grid;
  gap: 10px;
}

.field-operational-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--division-colour, var(--accent));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--division-colour, var(--accent)) 8%, #fff);
}

.field-operational-line div,
.field-location-block article div,
.field-loading-point article div,
.order-loading-map article div,
.field-operational-notes article {
  min-width: 0;
}

.field-operational-line span,
.field-location-block article span,
.field-loading-point article span,
.order-loading-map article span,
.field-operational-notes span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.field-operational-line strong,
.field-location-block article strong,
.field-loading-point article strong,
.order-loading-map article strong,
.field-operational-notes strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.field-operational-line small,
.field-location-block article small,
.field-loading-point article small,
.order-loading-map article small,
.field-map-placeholder small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.field-operational-line b {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--division-colour, var(--accent)) 54%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.field-location-block {
  display: grid;
  gap: 10px;
}

.field-loading-point article,
.order-loading-map article,
.field-location-block article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) repeat(2, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.field-loading-point article,
.order-loading-map article {
  border-left: 5px solid var(--division-colour, var(--accent));
  background: color-mix(in srgb, var(--division-colour, var(--accent)) 7%, #fff);
}

.field-loading-point.is-missing article,
.order-loading-map.is-missing article {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, #fff);
}

.field-location-block iframe,
.field-loading-point iframe,
.order-loading-map iframe {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.order-loading-map {
  margin-top: 14px;
}

.field-map-placeholder {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 118px;
  padding: 12px;
  border: 2px dashed color-mix(in srgb, var(--warn) 46%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 8%, #fff);
}

.field-map-placeholder .metric-icon {
  background: var(--soft-warn);
  color: var(--warn);
}

.field-map-placeholder strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  text-transform: uppercase;
}

.field-operational-notes article {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.field-contact-list,
.field-rams-list,
.field-history-list,
.field-evidence-list {
  display: grid;
  gap: 10px;
}

.field-contact-list article,
.field-rams-list article,
.field-history-list article,
.field-evidence-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.field-rams-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.field-contact-list span,
.field-rams-list span,
.field-history-list span,
.field-history-list p,
.field-evidence-item span,
.field-evidence-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.field-action-form {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.field-action-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.field-action-form input,
.field-action-form select,
.field-action-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.field-action-form input,
.field-action-form select {
  min-height: 46px;
  padding: 0 12px;
}

.field-action-form textarea {
  padding: 12px;
  resize: vertical;
}

.field-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  min-height: 96px;
  padding: 12px;
  border: 2px dashed color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, #ffffff), #ffffff 70%);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.field-file-picker:hover,
.field-file-picker:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.field-file-picker input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.field-file-picker--native input[type="file"] {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 7px;
  opacity: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.field-file-picker--native input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  font-weight: 950;
  text-transform: uppercase;
}

.field-file-picker--native input[type="file"]::-webkit-file-upload-button {
  min-height: 34px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  font-weight: 950;
  text-transform: uppercase;
}

.field-file-picker .metric-icon {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  color: var(--accent-2);
}

.field-file-picker strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.field-file-picker small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-file-picker.has-file {
  border-style: solid;
  border-color: var(--good);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--good) 10%, #ffffff), #ffffff 70%);
}

.field-file-picker.has-file input[type="file"] {
  border-color: color-mix(in srgb, var(--good) 50%, var(--line));
}

.field-file-picker.has-file .metric-icon {
  color: var(--good);
}

.field-action-form__wide {
  grid-column: 1 / -1;
}

.field-action-form--note {
  grid-column: 1 / -1;
}

.signature-pad-wrap {
  position: relative;
  display: grid;
  gap: 8px;
}

.signature-pad-wrap canvas {
  width: 100%;
  min-height: 180px;
  border: 2px dashed color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(53, 184, 230, 0.08) 36px) border-box;
  touch-action: none;
}

.field-evidence-item {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
}

.field-evidence-item img,
.field-evidence-item video {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #000;
}

.field-evidence-item .metric-icon {
  width: 52px;
  height: 52px;
  color: var(--accent-2);
}

.opportunity-files-tab,
.organisation-files-tab {
  display: grid;
  gap: 14px;
}

.opportunity-files-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.opportunity-file-upload-card {
  align-content: start;
  background: #ffffff;
}

.opportunity-file-upload-card .split-title {
  align-items: center;
}

.opportunity-file-upload-card .split-title h2 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.05;
}

.opportunity-file-history-panel {
  display: grid;
  gap: 12px;
}

.record-file-list {
  display: grid;
  gap: 10px;
  max-height: min(56vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.record-file-list::-webkit-scrollbar {
  width: 8px;
}

.record-file-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.record-file-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, #fff), #fff 42%);
}

.record-file-item--photo {
  border-left-color: var(--accent);
}

.record-file-item--document {
  border-left-color: var(--accent-2);
}

.record-file-item--previewable {
  cursor: pointer;
}

.record-file-item--previewable:hover,
.record-file-item--previewable:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.record-file-thumb,
.record-file-icon {
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.record-file-thumb {
  object-fit: cover;
}

.record-file-icon {
  display: inline-grid;
  place-items: center;
  color: var(--accent-2);
}

.record-file-copy {
  min-width: 0;
}

.record-file-copy strong,
.record-file-copy small,
.record-file-copy p {
  display: block;
  min-width: 0;
}

.record-file-copy strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.record-file-copy small,
.record-file-copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.record-file-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.record-file-actions .mini-action {
  min-height: 42px;
  text-decoration: none;
}

.record-media-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.record-media-preview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.record-media-preview__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  padding: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-top: 5px solid var(--accent);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.record-media-preview__header,
.record-media-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-media-preview__header h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
}

.record-media-preview__header p,
.record-media-preview__notes {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.record-media-preview__stage {
  display: grid;
  place-items: center;
  min-height: 260px;
  max-height: min(68vh, 720px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--accent) 8%, #f8fbfd) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--accent) 8%, #f8fbfd) 25%, transparent 25%),
    #f8fbfd;
  background-size: 22px 22px;
  background-position:
    0 0,
    0 11px;
}

.record-media-preview__media {
  display: block;
  max-width: 100%;
  max-height: min(66vh, 700px);
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
}

.record-media-preview__notes {
  max-height: 96px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.organisation-file-summary {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

@media (max-width: 980px) {
  .opportunity-files-upload-grid,
  .record-file-item {
    grid-template-columns: 1fr;
  }

  .record-file-actions {
    justify-content: stretch;
  }

  .record-file-actions .mini-action {
    justify-content: center;
  }

  .record-media-preview {
    padding: 12px;
  }

  .record-media-preview__panel {
    max-height: calc(100vh - 24px);
  }

  .record-media-preview__header,
  .record-media-preview__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .record-media-preview__header .icon-button,
  .record-media-preview__footer .ghost-button,
  .record-media-preview__footer .primary-button {
    width: 100%;
  }

  .organisation-file-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
}

.admin-quick-links {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 0;
}

.admin-quick-link {
  min-height: 126px;
  padding: 14px;
}

.admin-quick-link strong {
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-quick-link span:last-child {
  font-size: 12px;
}

.admin-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-content: center;
  align-items: center;
  min-height: 66px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--admin-accent, var(--accent));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-page-hero__title {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.admin-page-hero__title .metric-icon {
  width: 36px;
  height: 36px;
  color: var(--accent-2);
}

.admin-page-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-page-hero p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(860px, 100%);
  justify-self: end;
}

.admin-hero-tile {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.admin-hero-tile span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.admin-hero-tile strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  white-space: nowrap;
}

.admin-hero-tile--on strong,
.admin-system-card--on .admin-system-card__stat,
.admin-state-text--on {
  color: var(--good);
}

.admin-hero-tile--good {
  border-left-color: var(--good);
}

.admin-hero-tile--medium {
  border-left-color: #a85d14;
}

.admin-hero-tile--critical {
  border-left-color: var(--bad);
}

.admin-hero-tile--accent {
  border-left-color: var(--accent);
}

.admin-state-text {
  font-weight: 950;
}

.admin-page-shell {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.admin-page-shell .admin-panel--wide {
  grid-row: auto;
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 14px;
}

.admin-system-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.admin-system-card:hover {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.admin-system-card .metric-icon {
  width: 48px;
  height: 48px;
}

.admin-system-card__copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-system-card__copy strong {
  font-size: 16px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-system-card__copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.admin-system-card__stat {
  align-self: center;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-system-card--good {
  border-left-color: var(--good);
}

.admin-system-card--medium {
  border-left-color: #a85d14;
}

.admin-system-card--accent {
  border-left-color: var(--accent);
}

.admin-page-grid {
  display: grid;
  gap: 16px;
}

.admin-page-grid--users {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
}

.admin-side-stack {
  display: grid;
  gap: 16px;
}

.admin-page-grid--users .admin-activity-panel {
  grid-column: 1 / -1;
}

.admin-activity-panel {
  overflow: hidden;
}

.admin-activity-queue {
  gap: 8px;
}

.admin-activity-row {
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
  min-height: 58px;
}

.admin-activity-main {
  grid-template-columns: 16px minmax(0, 1fr) minmax(260px, 0.42fr);
  cursor: default;
}

.admin-activity-copy {
  display: grid;
  gap: 2px;
  align-items: center;
}

.admin-activity-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-activity-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-activity-analytics {
  grid-template-columns: minmax(96px, 0.86fr) minmax(138px, 1.14fr);
}

.admin-activity-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  color: var(--muted);
  cursor: default;
}

.admin-rams-stats {
  margin-bottom: 16px;
}

.admin-rams-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  align-items: start;
}

.admin-rams-rules {
  display: grid;
  gap: 10px;
}

.admin-panel {
  padding: 18px;
}

.admin-panel.is-admin-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow);
}

.admin-panel--wide {
  grid-row: span 2;
}

.admin-table {
  overflow-x: auto;
}

.admin-user-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.admin-user-summary-grid article {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.admin-user-summary-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-user-summary-grid strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.admin-user-list {
  display: grid;
  gap: 10px;
}

.admin-row {
  display: grid;
  grid-template-columns: minmax(330px, 1.3fr) minmax(170px, 0.65fr) minmax(80px, 0.32fr) minmax(105px, 0.35fr) minmax(270px, 0.9fr) minmax(260px, 0.9fr);
  gap: 12px;
  align-items: center;
  min-width: 1260px;
  min-height: 92px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.admin-row--head {
  min-height: auto;
  padding-top: 0;
  border-top: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-user-record {
  grid-template-columns: 8px minmax(250px, 0.72fr) minmax(280px, 0.68fr) minmax(360px, 1fr) minmax(220px, 0.68fr) minmax(280px, 0.78fr);
  gap: 12px;
  min-width: 0;
  min-height: 124px;
  padding: 10px 12px 10px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--admin-user-accent) 7%, transparent), var(--surface) 34%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.admin-user-record.is-suspended {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), var(--surface) 36%);
}

.admin-user-record__stripe {
  align-self: stretch;
  border-radius: 999px;
  background: var(--admin-user-accent);
}

.admin-user-record__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.admin-user-record__copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-user-record__copy strong,
.admin-user-record__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-record__copy strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-user-record__copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-user-record__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-user-mini-tile {
  display: grid;
  gap: 4px;
  min-height: 58px;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
}

.admin-user-mini-tile small,
.admin-user-record__label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-user-mini-tile strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-user-record__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-user-record__access {
  display: grid;
  gap: 8px;
  align-content: center;
}

.admin-user,
.role-control,
.permission-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user {
  min-width: 0;
}

.admin-user--editable {
  align-items: flex-start;
}

.admin-user strong,
.admin-user small {
  display: block;
}

.admin-user small {
  color: var(--muted);
  font-size: 12px;
}

.role-control {
  flex-wrap: wrap;
}

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

.admin-user-record .admin-user-actions {
  align-content: center;
  justify-content: flex-end;
}

.admin-user-actions .mini-action {
  min-height: 32px;
  padding: 0 10px;
}

.admin-user-actions .mini-action.is-warning {
  border-color: #a85d14;
  color: #8a3f00;
}

.admin-user-actions .mini-action.is-danger {
  border-color: #a32727;
  color: #a32727;
}

.admin-user-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.admin-user-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-user-field--wide {
  grid-column: 1 / -1;
}

.admin-user-field input,
.admin-user-field select,
.admin-user-role-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.admin-user-field input,
.admin-user-field select {
  padding: 0 10px;
}

.admin-customer-search-field.is-muted {
  opacity: 0.62;
}

.admin-customer-search-field input[type="search"]:disabled {
  cursor: not-allowed;
}

.admin-customer-search-field input[type="search"].is-unmatched {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 12%, transparent);
}

.admin-form-notice {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(56, 184, 227, 0.35);
  border-radius: var(--radius);
  background: rgba(56, 184, 227, 0.1);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-form-notice.is-error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}

.admin-form-notice.is-success {
  border-color: rgba(45, 138, 75, 0.35);
  background: rgba(45, 138, 75, 0.1);
  color: #166534;
}

.admin-user-role-select {
  padding: 0 9px;
}

.admin-initials-control {
  display: grid;
  grid-template-columns: 58px;
  gap: 6px;
  align-items: center;
}

.admin-initials-control input {
  width: 58px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.admin-initials-control .mini-action {
  min-height: 32px;
  padding: 0 9px;
}

.role-choice {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.role-choice.is-selected {
  border-color: var(--accent);
  background: var(--soft-accent);
  color: #005b7b;
}

.permission-list {
  align-items: stretch;
  flex-direction: column;
}

.permission-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.permission-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.permission-card a {
  color: var(--accent);
  font-weight: 950;
  text-decoration: none;
}

.admin-user-form {
  display: grid;
  gap: 12px;
}

.admin-user-form input,
.admin-user-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.admin-user-form input,
.admin-user-form select {
  padding: 0 12px;
}

.admin-loading-points-panel {
  grid-column: 1 / -1;
}

.admin-disposal-points-panel {
  grid-column: 1 / -1;
}

.admin-global-telemetrics-panel {
  grid-column: 1 / -1;
}

.settings-dashboard {
  display: grid;
  gap: 16px;
}

.settings-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(53, 184, 230, 0.12), rgba(255, 255, 255, 0) 42%), var(--surface);
  box-shadow: var(--shadow);
}

.settings-hero h2,
.settings-hero p {
  margin: 0;
}

.settings-hero h2 {
  overflow: hidden;
  font-size: 26px;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-hero p {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
}

.settings-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #050505;
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);
  gap: 16px;
  align-items: start;
}

.settings-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.settings-detail-list {
  display: grid;
  gap: 10px;
}

.settings-detail-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.settings-detail-list span,
.settings-password-form label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-detail-list strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-password-form {
  display: grid;
  gap: 12px;
}

.settings-password-form label {
  display: grid;
  gap: 7px;
}

.settings-password-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.settings-password-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(53, 184, 230, 0.16);
  outline: none;
}

.settings-form-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.settings-form-status.is-success {
  color: var(--good);
}

.settings-form-status.is-error {
  color: var(--danger);
}

.admin-telematics-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.admin-telematics-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-telematics-form .toolbar {
  margin: 0;
}

.admin-telematics-plan {
  margin-top: 14px;
}

.admin-telematics-plan .permission-card {
  min-width: 0;
}

.telematics-vehicle-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.waste-compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.loading-point-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.loading-point-row {
  display: grid;
  grid-template-columns: 42px repeat(4, minmax(0, 1fr)) minmax(108px, auto);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.loading-point-row.is-editing {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.loading-point-row > .metric-icon {
  align-self: center;
}

.loading-point-row label,
.admin-loading-point-form label {
  min-width: 0;
}

.loading-point-row label,
.loading-point-row .w3w-field__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.loading-point-row input,
.loading-point-row select,
.admin-loading-point-form input,
.admin-loading-point-form select {
  width: 100%;
  margin-top: 6px;
}

.loading-point-row input:disabled,
.loading-point-row select:disabled {
  opacity: 1;
  background: #ffffff;
  color: var(--ink);
  cursor: default;
}

.loading-point-row__wide {
  grid-column: span 2;
  min-width: 0;
}

.loading-point-row__notes {
  grid-column: span 3;
}

.loading-point-row__actions {
  display: grid;
  gap: 6px;
  align-self: stretch;
  align-content: end;
}

.loading-point-row__actions .mini-action {
  justify-content: center;
  min-height: 38px;
  padding: 0 10px;
  white-space: nowrap;
}

.admin-loading-point-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.disposal-point-row {
  grid-template-columns: 42px repeat(4, minmax(150px, 1fr)) auto;
}

.disposal-point-row .loading-point-row__wide {
  grid-column: span 2;
}

.admin-disposal-point-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.disposal-point-row input.is-unmatched,
.admin-disposal-point-form input.is-unmatched {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.sales-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
}

.sales-layout > *,
.sales-dashboard-grid > *,
.split-panel {
  min-width: 0;
}

.sales-layout--lower {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
}

.sales-graphic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sales-graphic-grid .metric-card {
  grid-column: auto;
}

.sales-access-strip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.view > .sales-access-strip:first-child {
  margin-top: 0;
}

.sales-access-strip h2 {
  margin: 4px 0;
  font-size: 20px;
}

.sales-access-strip p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
}

.sales-overview-command-centre.lead-command-centre--hopper {
  min-height: 66px;
}

.sales-overview-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 58px;
}

.sales-overview-control-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sales-overview-filter-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.sales-overview-filter-copy h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
}

.sales-overview-filter-copy p {
  margin: 0;
  color: var(--muted);
}

.sales-overview-control-panel .sales-access-actions {
  justify-content: flex-start;
  min-width: 0;
}

.sales-overview-control-panel .sales-filter-group {
  justify-content: flex-start;
}

.sales-overview-control-metrics.lead-command-grid--header {
  grid-template-columns: repeat(4, minmax(126px, 1fr));
  justify-self: stretch;
  width: 100%;
}

.sales-overview-control-metrics.lead-command-grid--header .lead-command-card .panel-label {
  white-space: normal;
}

.sales-overview-header-metrics.lead-command-grid--header {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: end;
  width: min(860px, 100%);
}

.sales-access-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: min(460px, 100%);
}

.sales-owner-filter,
.sales-filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.sales-filter-group {
  align-items: center;
}

.sales-filter-group > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.sales-filter-group--division .filter-chip {
  border-color: color-mix(in srgb, var(--division-colour, var(--accent)) 42%, var(--line));
}

.sales-filter-group--division .filter-chip.is-active {
  background: var(--division-colour, var(--accent));
  color: #050505;
}

.sales-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.sales-section-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.sales-section-tabs button strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 11px;
}

.sales-section-tabs button:hover,
.sales-section-tabs button.is-active {
  border-color: var(--accent);
  background: #050505;
  color: #ffffff;
}

.sales-section-tabs button:hover strong,
.sales-section-tabs button.is-active strong {
  background: var(--accent);
  color: #ffffff;
}

.sales-command-centre,
.sales-chart-panel,
.sales-dashboard-notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sales-command-centre {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.sales-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sales-command-tile {
  grid-column: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 176px;
  padding: 12px;
  border-top: 3px solid var(--summary-color, var(--accent));
}

.sales-command-grid > .sales-command-tile {
  grid-column: auto / span 1;
}

.sales-command-tile--button {
  width: 100%;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sales-command-tile--button:hover,
.sales-command-tile--button:focus-visible,
.sales-command-tile--button.is-active {
  border-color: var(--summary-color, var(--accent));
  box-shadow: 0 16px 32px color-mix(in srgb, var(--summary-color, var(--accent)) 20%, transparent);
  outline: none;
}

.sales-command-tile .metric-row {
  gap: 8px;
}

.sales-command-tile .panel-label {
  font-size: 10px;
  line-height: 1.2;
}

.sales-command-tile .metric-icon {
  width: 28px;
  height: 28px;
}

.sales-command-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sales-command-label b {
  display: inline-grid;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--summary-color, var(--accent));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--summary-color, var(--accent)) 10%, #fff);
  color: var(--summary-color, var(--accent-2));
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.sales-command-bars {
  display: grid;
  gap: 6px;
}

.sales-command-bar-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 18px;
}

.sales-command-bar-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-command-bar-row i {
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
}

.sales-command-bar-row i::before {
  display: block;
  width: var(--division-share);
  height: 100%;
  border-radius: inherit;
  background: var(--division-colour);
  content: "";
}

.sales-command-bar-row strong {
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
}

.sales-command-tile p {
  margin-top: 0;
  font-size: 11px;
}

.sales-command-tile--leads {
  --summary-color: var(--accent);
}

.sales-command-tile--opportunities {
  --summary-color: var(--accent-2);
}

.sales-command-tile--pipeline {
  --summary-color: var(--accent-2);
}

.sales-command-tile--forecast {
  --summary-color: var(--good);
}

.sales-command-tile--quotes {
  --summary-color: var(--warn);
}

.sales-command-tile--live-quotes {
  --summary-color: #0f766e;
}

.sales-command-tile--month {
  --summary-color: #6d5dfc;
}

.sales-command-tile--accepted {
  --summary-color: var(--good);
}

.sales-dashboard-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
}

.sales-dashboard-notice strong,
.sales-dashboard-notice span {
  display: block;
}

.sales-dashboard-notice span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-followups-card {
  margin-top: 16px;
}

.followup-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.followup-row:hover,
.followup-row:focus-visible {
  background: var(--surface-2);
}

.sales-toolbar {
  margin-top: 16px;
}

.sales-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
  margin-top: 16px;
}

.lead-command-centre {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lead-command-centre--hopper {
  align-content: center;
  margin-top: 0;
  min-height: 66px;
  padding: 8px 14px;
  border-left: 5px solid var(--accent);
}

.opportunity-command-centre {
  margin-top: 0;
  border-left: 5px solid var(--accent);
}

.orders-command-centre {
  margin-top: 0;
  border-left: 5px solid var(--accent);
}

.cost-builder-command-centre {
  margin-top: 0;
  border-left: 5px solid var(--accent);
}

.cost-builder-command-centre .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr);
}

.opportunity-command-centre .lead-command-header .toolbar {
  display: flex;
  justify-content: flex-end;
}

.lead-command-grid.opportunity-command-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.opportunity-command-summary-grid .lead-command-card {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 92px;
  padding: 10px;
}

.opportunity-command-summary-grid .metric-icon {
  width: 30px;
  height: 30px;
}

.opportunity-command-summary-grid .lead-command-card strong {
  font-size: 22px;
  white-space: nowrap;
}

.opportunity-command-summary-grid .lead-command-card .panel-label,
.opportunity-command-summary-grid .lead-command-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-flow-grid.opportunity-flow-grid {
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.58fr);
}

.opportunity-value-flow-panel {
  min-height: 300px;
}

.sales-command-centre--quotes,
.cost-builder-hero {
  border-left: 5px solid var(--accent);
}

.lead-command-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
}

.lead-command-heading {
  min-width: 0;
}

.lead-command-heading--with-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.lead-command-heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
}

.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr) 54px;
  gap: 12px;
}

.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-heading h2 {
  max-width: none;
  font-size: 24px;
  line-height: 1;
  overflow-wrap: normal;
  white-space: nowrap;
}

.opportunity-command-centre .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr) 54px;
}

.orders-command-centre .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr);
}

.quote-command-centre .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr) 54px;
}

.dashboard-command-centre {
  margin-bottom: 16px;
}

.dashboard-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 58px;
}

.dashboard-command-grid--header {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: end;
  width: min(860px, 100%);
}

.lead-command-centre--hopper.cost-builder-command-centre:not(.lead-create-header-tile) .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 58px;
}

.orders-command-grid--header {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: end;
  width: min(860px, 100%);
}

.quote-command-grid--header {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: end;
  width: min(860px, 100%);
}

.quote-command-grid--header .lead-command-card:nth-child(n + 2) .panel-label {
  max-width: none;
  white-space: normal;
}

.quote-dashboard-filter-panel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.quote-dashboard-filter-panel .split-title {
  margin-bottom: 0;
}

.quote-dashboard-filter-panel--simple {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
}

.quote-dashboard-filter-heading {
  min-width: 0;
}

.quote-dashboard-filter-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.quote-dashboard-filter-panel--simple .sales-access-actions {
  justify-content: flex-end;
  min-width: 0;
}

.quote-dashboard-filter-panel--simple .sales-filter-group {
  justify-content: flex-end;
}

.quote-dashboard-filter-panel h2 {
  font-size: 18px;
}

.quote-dashboard-filter-toolbar {
  margin-top: 0;
}

.quote-dashboard-filter-toolbar .filter-chip {
  min-height: 36px;
}

.quote-flow-centre {
  margin-top: 12px;
}

.quote-command-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.quote-command-summary-grid .lead-command-card {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  min-height: 92px;
  padding: 10px 9px;
}

.quote-command-summary-grid .metric-icon {
  width: 28px;
  height: 28px;
}

.quote-command-summary-grid .lead-command-card strong {
  font-size: 22px;
  white-space: nowrap;
}

.quote-flow-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr) minmax(300px, 0.62fr);
}

.quote-status-division-panel,
.quote-value-status-panel,
.quote-owner-load-panel {
  min-width: 0;
}

.quote-value-status-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.quote-value-status-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.34fr) minmax(0, 0.66fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 56px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--quote-status-colour) 20%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--quote-status-colour) 8%, #ffffff), rgba(255, 255, 255, 0) 34%),
    #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.quote-value-status-row:hover,
.quote-value-status-row:focus-visible {
  border-color: var(--quote-status-colour);
  background: color-mix(in srgb, var(--quote-status-colour) 10%, #ffffff);
  outline: 0;
}

.quote-value-status-row > span:first-child {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: 2px;
  min-width: 0;
}

.quote-value-status-row > span:first-child strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-value-status-row > span:first-child small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.quote-value-status-row > i {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
}

.quote-value-status-row > i b {
  display: block;
  width: var(--quote-status-share);
  height: 100%;
  border-radius: inherit;
  background: var(--quote-status-colour);
}

.quote-value-status-metrics {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: minmax(0, 0.85fr) minmax(78px, 1.15fr);
  gap: 6px;
  min-width: 0;
}

.quote-value-status-metrics em {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.74);
  font-style: normal;
}

.quote-value-status-metrics small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.quote-value-status-metrics strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-owner-load-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.quote-owner-row {
  grid-template-columns: minmax(0, 1fr) 18px 30px minmax(70px, auto);
}

.quote-owner-row span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.quote-owner-row span b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
}

.quote-owner-row span em {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-dashboard-add-button {
  flex: 0 0 auto;
  width: auto;
  min-height: 42px;
  padding: 0 16px;
  white-space: nowrap;
}

.lead-dashboard-plus-button {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
}

.lead-dashboard-plus-button svg {
  width: 22px;
  height: 22px;
}

.lead-command-header .toolbar {
  display: none;
}

.lead-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lead-command-grid.quote-command-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.lead-command-grid--header {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  justify-self: end;
  width: min(860px, 100%);
}

.opportunity-command-grid--header {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(860px, 100%);
}

.lead-command-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--lead-colour, var(--accent));
  border-radius: var(--radius);
  background: var(--surface-2);
}

.lead-command-grid--header .lead-command-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  align-content: center;
  min-height: 58px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--lead-colour, var(--accent));
}

.lead-command-grid--header .lead-command-card .metric-icon {
  display: none;
}

.lead-command-grid--header .lead-command-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
}

.lead-command-card--accent {
  --lead-colour: var(--accent);
}

.lead-command-card--website {
  --lead-colour: #0f766e;
}

.lead-command-card--import {
  --lead-colour: #6d5dfc;
}

.lead-command-card--good {
  --lead-colour: var(--good);
}

.lead-command-card--danger {
  --lead-colour: var(--danger);
}

.lead-command-card .panel-label {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}

.lead-command-card strong {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  line-height: 1;
}

.lead-command-grid--header .lead-command-card strong {
  margin-top: 0;
  font-size: 20px;
  text-align: right;
  white-space: nowrap;
}

.lead-command-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.lead-command-grid--header .lead-command-card small {
  display: none;
}

.lead-command-grid--header .lead-command-card .panel-label {
  min-width: 0;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.05;
  white-space: normal;
}

.lead-command-grid--header .lead-command-card .panel-label span {
  display: block;
}

.opportunity-command-grid--header .lead-command-card:nth-child(n + 3) .panel-label {
  max-width: none;
  white-space: normal;
}

.field-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr);
}

.field-command-grid--header {
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  width: min(620px, 100%);
  gap: 8px;
}

.rams-command-centre .lead-command-header {
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 58px;
}

.rams-command-grid--header {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: end;
  width: min(860px, 100%);
}

.rams-workspace-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.88fr) minmax(0, 1.12fr);
  gap: 16px;
  margin-top: 16px;
}

.rams-generator-panel,
.rams-preview-panel,
.rams-register-panel {
  min-width: 0;
  border-top: 4px solid var(--accent);
}

.rams-generator-form {
  display: grid;
  gap: 12px;
}

.rams-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rams-generator-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.rams-generator-form input,
.rams-generator-form select,
.rams-generator-form textarea {
  width: 100%;
  min-width: 0;
}

.rams-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.rams-form-actions small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.rams-preview-title {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.rams-preview-title h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}

.rams-preview-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.rams-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rams-preview-grid article {
  min-width: 0;
  min-height: 110px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.rams-preview-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.rams-section-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.rams-section-pair h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
}

.rams-risk-list,
.rams-method-list,
.rams-document-list {
  display: grid;
  gap: 8px;
}

.rams-risk-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--rams-risk-colour, var(--line));
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rams-risk-colour, var(--accent)) 11%, #ffffff), #ffffff 42%),
    #ffffff;
}

.rams-risk-row--very-high {
  --rams-risk-colour: #7f1d1d;
}

.rams-risk-row--high {
  --rams-risk-colour: var(--danger);
}

.rams-risk-row--medium {
  --rams-risk-colour: var(--warn);
}

.rams-risk-row--low {
  --rams-risk-colour: var(--good);
}

.rams-risk-row--very-low {
  --rams-risk-colour: var(--accent);
}

.rams-risk-score {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rams-risk-colour, var(--accent)) 16%, #ffffff);
  color: var(--rams-risk-colour, var(--accent));
  text-align: center;
}

.rams-risk-score strong {
  font-size: 15px;
  line-height: 1;
}

.rams-risk-score small {
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.rams-risk-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rams-risk-copy strong {
  font-size: 13px;
  line-height: 1.15;
  text-transform: uppercase;
}

.rams-risk-copy small,
.rams-risk-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.rams-method-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.rams-method-step > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
}

.rams-method-step strong {
  display: block;
  font-size: 13px;
  line-height: 1.15;
  text-transform: uppercase;
}

.rams-method-step small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.rams-register-panel {
  margin-top: 16px;
}

.rams-document-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.rams-document-row__rail {
  align-self: stretch;
  width: 7px;
  border-radius: 999px;
  background: var(--muted);
}

.rams-document-row__rail.is-mandatory {
  background: var(--accent);
}

.rams-document-row__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rams-document-row__copy strong,
.rams-document-row__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rams-document-row__copy strong {
  font-size: 15px;
  text-transform: uppercase;
}

.rams-document-row__copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.rams-empty-state {
  min-height: 130px;
}

.field-command-grid--header .lead-command-card {
  min-height: 52px;
  padding: 7px 9px;
}

.field-command-grid--header .lead-command-card > div {
  column-gap: 8px;
}

.field-command-grid--header .lead-command-card strong {
  font-size: 18px;
}

.field-command-grid--header .lead-command-card .panel-label {
  font-size: 10px;
}

.field-command-card {
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.field-command-card.is-active {
  border-color: color-mix(in srgb, var(--lead-colour, var(--accent)) 72%, var(--line));
  background: color-mix(in srgb, var(--lead-colour, var(--accent)) 10%, #fff);
}

.performance-command-centre .dashboard-command-grid--header {
  width: min(960px, 100%);
}

.performance-dashboard {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.performance-panel,
.performance-person-header {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.performance-panel .split-title {
  margin-bottom: 12px;
}

.performance-panel h2,
.performance-panel h3,
.performance-person-header h2 {
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.performance-panel h2 {
  font-size: 20px;
}

.performance-panel h3 {
  font-size: 13px;
}

.performance-panel p {
  margin: 5px 0 0;
  color: var(--muted);
}

.performance-panel-pill {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.marketing-command-centre .dashboard-command-grid--header {
  width: min(960px, 100%);
}

.marketing-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.marketing-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 16px;
  margin-top: 16px;
}

.marketing-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.marketing-panel--wide {
  grid-row: span 2;
}

.marketing-panel h2,
.marketing-panel h3 {
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.marketing-panel h2 {
  font-size: 20px;
}

.marketing-panel h3 {
  font-size: 16px;
}

.marketing-panel p {
  margin: 5px 0 0;
  color: var(--muted);
}

.marketing-source-grid,
.marketing-campaign-stack,
.marketing-form-stack,
.marketing-calendar-stack,
.marketing-calendar-list {
  display: grid;
  gap: 8px;
}

.marketing-source-row,
.marketing-campaign-row,
.marketing-form-row,
.marketing-calendar-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.marketing-source-row {
  grid-template-columns: minmax(105px, 0.25fr) minmax(0, 1fr) minmax(32px, auto);
}

.marketing-source-row span,
.marketing-campaign-row strong,
.marketing-form-row strong,
.marketing-calendar-row strong {
  overflow: hidden;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-source-row i,
.marketing-campaign-row i {
  display: block;
  overflow: hidden;
  height: 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
}

.marketing-source-row i b,
.marketing-campaign-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.marketing-source-row strong {
  font-size: 18px;
  line-height: 1;
  text-align: right;
}

.marketing-audience-mini-grid,
.marketing-audience-grid,
.marketing-form-grid,
.marketing-content-grid,
.marketing-campaign-board,
.marketing-kpi-strip {
  display: grid;
  gap: 10px;
}

.marketing-audience-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-audience-grid,
.marketing-form-grid,
.marketing-content-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-campaign-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-audience-mini,
.marketing-audience-card,
.marketing-form-card,
.marketing-content-card {
  display: grid;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--segment-colour, var(--accent)) 22%, var(--line));
  border-left: 5px solid var(--segment-colour, var(--accent));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--segment-colour, var(--accent)) 9%, #ffffff), rgba(255, 255, 255, 0) 44%),
    var(--surface-2);
}

.marketing-audience-mini {
  gap: 3px;
  min-height: 82px;
}

.marketing-audience-mini span,
.marketing-audience-mini small,
.marketing-content-owner {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.marketing-audience-mini strong {
  font-size: 24px;
  line-height: 1;
}

.marketing-audience-card,
.marketing-form-card,
.marketing-content-card {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-height: 126px;
}

.marketing-audience-card p,
.marketing-form-card p,
.marketing-content-card p {
  font-size: 13px;
  font-weight: 850;
}

.marketing-audience-card strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  line-height: 1;
}

.marketing-campaign-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, 0.8fr) minmax(62px, auto) minmax(88px, auto);
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.marketing-campaign-row:hover,
.marketing-campaign-row:focus-visible {
  border-color: var(--accent);
  outline: 0;
}

.marketing-campaign-row small,
.marketing-form-row small,
.marketing-calendar-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-campaign-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.marketing-campaign-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px 14px 14px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.marketing-card-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
}

.marketing-campaign-card__head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.marketing-campaign-card__head > div {
  min-width: 0;
}

.marketing-campaign-card__head h3 {
  margin-top: 4px;
}

.marketing-kpi-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-mini-kpi {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
}

.marketing-mini-kpi small,
.marketing-card-footer,
.marketing-date-pill small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.marketing-mini-kpi strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.marketing-journey {
  display: grid;
  gap: 10px;
}

.marketing-journey-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.marketing-journey-step > span,
.marketing-date-pill {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-weight: 950;
}

.marketing-journey-step p {
  font-size: 13px;
  font-weight: 850;
}

.marketing-form-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(34px, auto);
}

.marketing-form-row em {
  font-size: 20px;
  font-style: normal;
  font-weight: 950;
  text-align: right;
}

.marketing-calendar-row {
  grid-template-columns: 58px minmax(0, 1fr);
}

.marketing-date-pill {
  min-height: 48px;
  border-radius: 10px;
}

.marketing-date-pill strong {
  font-size: 14px;
  line-height: 1;
}

.marketing-form-card .marketing-kpi-strip {
  grid-column: 1 / -1;
}

.marketing-content-card {
  align-items: center;
  min-height: 104px;
}

.marketing-content-owner {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
}

@media (max-width: 1180px) {
  .marketing-dashboard {
    grid-template-columns: 1fr;
  }

  .marketing-panel--wide {
    grid-row: auto;
  }

  .marketing-audience-grid,
  .marketing-form-grid,
  .marketing-content-grid,
  .marketing-campaign-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .marketing-source-row,
  .marketing-campaign-row {
    grid-template-columns: 1fr;
  }

  .marketing-source-row strong,
  .marketing-campaign-row em,
  .marketing-campaign-row > strong {
    text-align: left;
  }

  .marketing-audience-mini-grid,
  .marketing-audience-grid,
  .marketing-form-grid,
  .marketing-content-grid,
  .marketing-campaign-board,
  .marketing-kpi-strip {
    grid-template-columns: 1fr;
  }

  .marketing-campaign-card__head {
    display: grid;
  }
}

.performance-scorecard-panel {
  overflow: hidden;
}

.performance-scorecard {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.performance-score-row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1.2fr) minmax(118px, 0.8fr) repeat(8, minmax(104px, 1fr));
  gap: 8px;
  align-items: center;
  min-width: 1280px;
  min-height: 66px;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.performance-score-row:hover,
.performance-score-row:focus-visible,
.performance-score-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
  box-shadow: 0 12px 26px rgba(53, 184, 230, 0.15);
  outline: none;
}

.performance-rank,
.performance-person b,
.performance-person-badge {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 950;
}

.performance-rank {
  width: 30px;
  height: 30px;
}

.performance-person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.performance-person b {
  width: 36px;
  height: 36px;
}

.performance-person strong,
.performance-score-row span > strong,
.performance-score-bar strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-score-row small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-score-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.performance-score-bar i {
  display: block;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #dbe7ef;
}

.performance-score-bar i::before {
  display: block;
  width: var(--score-share);
  height: 100%;
  border-radius: inherit;
  background: var(--good);
  content: "";
}

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

.performance-leader-tile {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-2);
}

.performance-leader-tile--revenue {
  border-left-color: var(--accent-2);
}

.performance-leader-tile--margin {
  border-left-color: var(--good);
}

.performance-leader-tile--pipeline {
  border-left-color: var(--warn);
}

.performance-leader-tile--conversion {
  border-left-color: #6d5dfc;
}

.performance-leader-tile span,
.performance-leader-tile small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-leader-tile strong,
.performance-leader-tile b {
  overflow: hidden;
  color: var(--ink);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-leader-tile strong {
  font-size: 15px;
  font-weight: 950;
}

.performance-leader-tile b {
  font-size: 22px;
  font-weight: 950;
}

.performance-commercial-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
}

.performance-commercial-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-commercial-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.performance-commercial-legend .is-revenue {
  background: var(--accent-2);
}

.performance-commercial-legend .is-margin {
  background: var(--good);
}

.performance-commercial-legend .is-pipeline {
  background: var(--warn);
}

.performance-commercial-legend .is-conversion {
  background: #6d5dfc;
}

.performance-commercial-row {
  grid-template-columns: 42px minmax(180px, 0.95fr) minmax(240px, 1.35fr) minmax(210px, 1.05fr) minmax(128px, 0.62fr) repeat(2, minmax(128px, 0.7fr));
  min-width: 1180px;
  border-left-color: var(--accent-2);
}

.performance-commercial-bars,
.performance-commercial-stat,
.performance-commercial-conversion {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.performance-commercial-bars i {
  display: grid;
  gap: 4px;
  height: 18px;
}

.performance-commercial-bars i b {
  display: block;
  height: 7px;
  border-radius: 999px;
}

.performance-commercial-bars i .is-revenue {
  width: var(--revenue-share);
  background: var(--accent-2);
}

.performance-commercial-bars i .is-margin {
  width: var(--margin-share);
  background: var(--good);
}

.performance-commercial-bars--pipeline i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #edf3f7;
}

.performance-commercial-bars--pipeline i .is-pipeline {
  width: var(--pipeline-margin-share);
  height: 100%;
  background: var(--warn);
}

.performance-commercial-bars em,
.performance-commercial-stat em,
.performance-commercial-conversion em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-commercial-conversion {
  justify-items: center;
  text-align: center;
}

.performance-commercial-conversion i {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background:
    conic-gradient(#6d5dfc var(--conversion-share), #e3e9f1 0),
    #f8fafc;
}

.performance-commercial-conversion i strong {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: inherit;
  background: var(--surface);
  font-size: 13px;
}

.performance-commercial-conversion small {
  text-align: center;
}

.performance-person-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(270px, 0.8fr);
  gap: 14px;
  align-items: center;
  border-left: 5px solid var(--accent);
}

.performance-person-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.performance-person-badge {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.performance-person-header h2 {
  overflow: hidden;
  font-size: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-score-ring {
  --ring-angle: calc(var(--score) * 3.6deg);
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface) 0 54%, transparent 55%),
    conic-gradient(var(--accent) 0 var(--ring-angle), #dce8f0 var(--ring-angle) 360deg);
}

.performance-score-ring strong,
.performance-score-ring span {
  grid-area: 1 / 1;
}

.performance-score-ring strong {
  margin-top: -8px;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.performance-score-ring span {
  align-self: end;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-score-periods,
.performance-revenue-grid,
.performance-conversion-rates,
.performance-mini-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
  min-width: 0;
}

.performance-stat {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 62px;
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--stat-colour, var(--accent));
  border-radius: 8px;
  background: var(--surface-2);
}

.performance-stat--accent {
  --stat-colour: var(--accent);
}

.performance-stat--good {
  --stat-colour: var(--good);
}

.performance-stat--danger {
  --stat-colour: var(--danger);
}

.performance-stat span,
.performance-stat small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-stat strong {
  display: block;
  overflow: hidden;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-division-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.performance-division-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--division-colour) 32%, var(--line));
  border-top: 4px solid var(--division-colour);
  border-radius: 8px;
  background: color-mix(in srgb, var(--division-colour) 10%, #ffffff);
}

.performance-division-card strong,
.performance-division-card em,
.performance-division-card span {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-division-card strong {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 950;
}

.performance-division-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.performance-division-card span b {
  color: var(--ink);
}

.performance-division-card em {
  grid-column: 1 / -1;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.performance-division-card i {
  grid-column: 1 / -1;
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
}

.performance-division-card i::before {
  display: block;
  width: var(--division-share);
  height: 100%;
  border-radius: inherit;
  background: var(--division-colour);
  content: "";
}

.performance-metric-clusters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.performance-metric-clusters article {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}

.performance-metric-clusters article > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 7px;
}

.performance-metric-clusters .performance-stat {
  min-height: 54px;
}

.performance-activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.performance-activity-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-activity-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--legend-colour);
}

.performance-activity-chart {
  display: grid;
  gap: 8px;
}

.performance-activity-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.6fr) minmax(110px, 0.35fr) minmax(260px, 0.85fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.performance-activity-row:hover,
.performance-activity-row:focus-visible,
.performance-activity-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
  box-shadow: 0 12px 26px rgba(53, 184, 230, 0.14);
  outline: none;
}

.performance-activity-stack {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  width: var(--activity-total-share);
  min-width: 38px;
  max-width: 100%;
  height: 34px;
  border-radius: 999px;
  background: #dbe7ef;
  box-shadow: inset 0 0 0 1px rgba(4, 35, 49, 0.06);
}

.performance-activity-stack i {
  display: grid;
  place-items: center;
  width: var(--segment-share);
  min-width: 0;
  height: 100%;
  background: var(--segment-colour);
  color: #fff;
  font-style: normal;
}

.performance-activity-stack i + i {
  border-left: 1px solid rgba(255, 255, 255, 0.72);
}

.performance-activity-stack em {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-activity-total {
  display: grid;
  align-content: center;
  justify-items: end;
  min-width: 0;
}

.performance-activity-total strong {
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.performance-activity-total small {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-activity-quality {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.performance-activity-quality b,
.performance-activity-quality small {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-activity-quality b {
  font-size: 15px;
  font-weight: 950;
}

.performance-activity-quality b.is-danger {
  color: var(--danger);
}

.performance-activity-quality small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-comparison-panels {
  display: grid;
  gap: 16px;
}

.performance-comparison-panel {
  overflow: hidden;
}

.performance-comparison-chart {
  display: grid;
  gap: 8px;
}

.performance-comparison-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(320px, 1.35fr) minmax(390px, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.performance-comparison-row:hover,
.performance-comparison-row:focus-visible,
.performance-comparison-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
  box-shadow: 0 12px 26px rgba(53, 184, 230, 0.14);
  outline: none;
}

.performance-comparison-track {
  display: block;
  min-width: 0;
  height: 36px;
  padding: 4px;
  border: 1px solid rgba(4, 35, 49, 0.06);
  border-radius: 999px;
  background: #edf4f8;
}

.performance-comparison-bar {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  width: var(--comparison-share);
  min-width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
}

.performance-comparison-bar i {
  display: grid;
  place-items: center;
  width: var(--segment-share);
  min-width: 0;
  height: 100%;
  background: var(--segment-colour);
  color: var(--segment-ink, #fff);
  font-style: normal;
}

.performance-comparison-bar i + i {
  border-left: 1px solid rgba(255, 255, 255, 0.75);
}

.performance-comparison-bar em {
  overflow: hidden;
  max-width: 100%;
  padding: 0 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-comparison-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.performance-comparison-stats span {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 7px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--stat-colour, var(--accent));
  border-radius: 8px;
  background: #fff;
}

.performance-comparison-stats span.is-good {
  --stat-colour: var(--good);
}

.performance-comparison-stats span.is-danger {
  --stat-colour: var(--danger);
}

.performance-comparison-stats small,
.performance-comparison-stats strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-comparison-stats small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-comparison-stats strong {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 950;
}

.performance-lead-card-grid,
.performance-opportunity-columns,
.performance-quote-ring-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.performance-lead-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.performance-lead-card,
.performance-opportunity-column,
.performance-quote-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.performance-lead-card:hover,
.performance-lead-card:focus-visible,
.performance-lead-card.is-active,
.performance-opportunity-column:hover,
.performance-opportunity-column:focus-visible,
.performance-opportunity-column.is-active,
.performance-quote-card:hover,
.performance-quote-card:focus-visible,
.performance-quote-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
  box-shadow: 0 12px 26px rgba(53, 184, 230, 0.14);
  outline: none;
}

.performance-lead-card {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 11px;
  border-top: 5px solid var(--good);
}

.performance-lead-funnel {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.performance-lead-funnel span {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(45, 126, 79, 0.12);
  border-radius: 8px;
  background: #edf4f8;
}

.performance-lead-funnel span::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--lead-share);
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(45, 126, 79, 0.22), rgba(53, 184, 230, 0.16));
  content: "";
}

.performance-lead-funnel strong,
.performance-lead-funnel small {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-lead-funnel strong {
  font-size: 19px;
  font-weight: 950;
}

.performance-lead-funnel small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-lead-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding-top: 2px;
}

.performance-lead-footer b,
.performance-lead-footer small,
.performance-lead-footer em {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-lead-footer b {
  font-size: 22px;
  font-weight: 950;
}

.performance-lead-footer small,
.performance-lead-footer em {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-lead-footer em {
  justify-self: end;
  padding: 7px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--good) 13%, #ffffff);
  color: var(--good);
  font-style: normal;
}

.performance-lead-footer em.is-danger {
  background: color-mix(in srgb, var(--danger) 12%, #ffffff);
  color: var(--danger);
}

.performance-opportunity-columns {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: stretch;
}

.performance-opportunity-column {
  display: grid;
  grid-template-rows: auto minmax(150px, 1fr) auto;
  gap: 10px;
  min-height: 300px;
  padding: 11px;
  border-top: 5px solid var(--accent);
}

.performance-opportunity-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  min-height: 150px;
  padding: 12px 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(to top, rgba(4, 35, 49, 0.08) 1px, transparent 1px) 0 0 / 100% 25%,
    #fff;
}

.performance-opportunity-bars i {
  display: grid;
  align-items: end;
  min-width: 0;
  height: 100%;
  font-style: normal;
}

.performance-opportunity-bars b {
  display: block;
  width: 100%;
  min-height: 7px;
  border-radius: 8px 8px 2px 2px;
  box-shadow: inset 0 -10px 20px rgba(4, 35, 49, 0.08);
}

.performance-opportunity-bars .is-gross b {
  height: max(7px, var(--gross-share));
  background: linear-gradient(180deg, #111 0%, #4b5563 100%);
}

.performance-opportunity-bars .is-weighted b {
  height: max(7px, var(--weighted-share));
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

.performance-opportunity-bars em {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-opportunity-footer {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.performance-opportunity-footer strong,
.performance-opportunity-footer small,
.performance-opportunity-footer em {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-opportunity-footer strong {
  font-size: 20px;
  font-weight: 950;
}

.performance-opportunity-footer small,
.performance-opportunity-footer em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-quote-ring-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.performance-quote-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 148px;
  padding: 11px;
  border-left: 5px solid #6d5dfc;
}

.performance-quote-ring {
  --ring-angle: calc(var(--quote-rate) * 3.6deg);
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface-2) 0 55%, transparent 56%),
    conic-gradient(var(--good) 0 var(--ring-angle), #dce8f0 var(--ring-angle) 360deg);
  box-shadow: inset 0 0 0 1px rgba(4, 35, 49, 0.04);
}

.performance-quote-ring strong,
.performance-quote-ring small {
  grid-area: 1 / 1;
  display: block;
  line-height: 1;
  text-align: center;
}

.performance-quote-ring strong {
  margin-top: -8px;
  font-size: 20px;
  font-weight: 950;
}

.performance-quote-ring small {
  align-self: end;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-quote-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.performance-quote-stats span {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.performance-quote-stats small,
.performance-quote-stats strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-quote-stats small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-quote-stats strong {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 950;
}

.performance-three-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.performance-two-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.performance-target-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
  margin-top: 12px;
}

.performance-target-bar i {
  grid-column: 1 / -1;
  display: block;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2);
}

.performance-target-bar i::before {
  display: block;
  width: var(--target-share);
  height: 100%;
  border-radius: inherit;
  background: var(--good);
  content: "";
}

.performance-target-bar span,
.performance-target-bar strong {
  overflow: hidden;
  min-width: 0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-target-bar span {
  color: var(--muted);
}

.performance-result-bars,
.performance-stalled-list,
.performance-timeline {
  display: grid;
  gap: 8px;
}

.performance-stalled-list,
.performance-timeline {
  align-content: start;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: color-mix(in srgb, var(--accent) 52%, var(--line)) transparent;
  scrollbar-width: thin;
}

.performance-stalled-list {
  max-height: 300px;
}

.performance-stalled-list::-webkit-scrollbar,
.performance-timeline::-webkit-scrollbar {
  width: 8px;
}

.performance-stalled-list::-webkit-scrollbar-thumb,
.performance-timeline::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.performance-result-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.4fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.performance-result-row span,
.performance-result-row strong {
  overflow: hidden;
  min-width: 0;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-result-row i {
  display: block;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #dce8f0;
}

.performance-result-row i b {
  display: block;
  width: var(--result-share);
  height: 100%;
  border-radius: inherit;
  background: var(--result-colour);
}

.performance-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.performance-funnel article {
  display: grid;
  align-content: end;
  gap: 6px;
  min-width: 0;
  min-height: 170px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--surface-2), #ffffff);
}

.performance-funnel article span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 950;
}

.performance-funnel article strong,
.performance-funnel article b,
.performance-funnel article small {
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-funnel article strong {
  color: var(--muted);
  font-size: 11px;
}

.performance-funnel article b {
  font-size: 24px;
  font-weight: 950;
}

.performance-funnel article small {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 950;
}

.performance-funnel article i {
  display: block;
  width: var(--funnel-share);
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
}

.performance-timeline article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--division-colour);
  border-radius: 8px;
  background: var(--surface-2);
}

.performance-timeline article strong,
.performance-timeline article small,
.performance-timeline article time {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-timeline article strong {
  font-size: 13px;
  font-weight: 950;
}

.performance-timeline article small,
.performance-timeline article time {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.performance-stalled-summary {
  display: grid;
  grid-template-columns: minmax(116px, 0.52fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.performance-stalled-total,
.performance-stalled-breakdown {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--surface-2), #ffffff);
}

.performance-stalled-total {
  display: grid;
  align-content: center;
  gap: 5px;
  border-left: 5px solid var(--danger);
}

.performance-stalled-total span,
.performance-stalled-total small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-stalled-total strong {
  font-size: 36px;
  font-weight: 950;
  line-height: 0.9;
}

.performance-stalled-breakdown {
  display: grid;
  gap: 8px;
}

.performance-stalled-breakdown > div {
  display: grid;
  gap: 6px;
}

.performance-stalled-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bar-colour) 24%, transparent) var(--bar-width), transparent 0),
    var(--surface);
}

.performance-stalled-bar span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.performance-stalled-bar i,
.performance-stalled-bar b {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bar-colour);
  color: #ffffff;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-stalled-bar strong,
.performance-stalled-bar em {
  overflow: hidden;
  min-width: 0;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.performance-stalled-bar em {
  color: var(--muted);
  text-align: right;
}

.performance-stalled-list article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--division-colour);
  border-radius: 8px;
  background: var(--surface-2);
}

.performance-stalled-list article span,
.performance-stalled-list article strong,
.performance-stalled-list article small {
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-stalled-list article span,
.performance-stalled-list article small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.performance-stalled-list article strong {
  font-size: 14px;
  font-weight: 950;
}

.field-command-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  min-width: 0;
}

.field-command-heading h2 {
  flex: 0 0 auto;
}

.field-user-selector {
  display: inline-grid;
  grid-template-columns: auto minmax(180px, 280px);
  gap: 8px;
  align-items: center;
  justify-self: start;
  width: fit-content;
}

.field-user-selector span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.field-user-selector select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.lead-source-panel-bars {
  display: grid;
  gap: 7px;
}

.lead-source-panel-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 28px;
  padding: 5px 6px;
  border: 1px solid color-mix(in srgb, var(--source-colour) 22%, var(--line));
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lead-source-panel-row:hover,
.lead-source-panel-row:focus-visible,
.lead-source-panel-row.is-active {
  border-color: var(--source-colour);
  background: color-mix(in srgb, var(--source-colour) 10%, #ffffff);
  outline: 0;
}

.lead-source-panel-row em {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-source-panel-row i {
  display: block;
  overflow: hidden;
  height: 11px;
  border-radius: 999px;
  background: var(--surface-2);
}

.lead-source-panel-row i::before {
  display: block;
  width: var(--source-share);
  height: 100%;
  border-radius: inherit;
  background: var(--source-colour);
  content: "";
}

.lead-source-panel-row strong {
  margin: 0;
  font-size: 13px;
  line-height: 1;
  text-align: right;
}

.lead-flow-centre {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lead-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.7fr) minmax(260px, 0.7fr);
  gap: 12px;
}

.lead-flow-panel {
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.lead-flow-panel > .split-title {
  align-items: flex-start;
  min-height: 34px;
  margin-bottom: 0;
}

.lead-flow-panel h3 {
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.stage-ageing-panel {
  grid-template-rows: auto minmax(0, 1fr);
  margin-top: 12px;
}

.stage-ageing-panel .split-title {
  align-items: center;
}

.stage-ageing-panel .split-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.stage-ageing-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, #ffffff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.stage-ageing-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-content: stretch;
}

.stage-ageing-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-width: 0;
  min-height: 128px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--stage-age-colour, var(--accent)) 28%, var(--line));
  border-top: 5px solid var(--stage-age-colour, var(--accent));
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--stage-age-colour, var(--accent)) 8%, #ffffff), #ffffff 72%);
}

.stage-ageing-card-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stage-ageing-card-title strong,
.stage-ageing-card-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-ageing-card-title strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
}

.stage-ageing-card-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.stage-ageing-card-metric {
  align-self: center;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.stage-ageing-card-metric strong {
  color: var(--ink);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.95;
}

.stage-ageing-card-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.stage-ageing-card-bars {
  display: grid;
  gap: 6px;
}

.stage-ageing-card-bars i,
.stage-ageing-card-bars em {
  display: block;
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage-age-colour, var(--accent)) 10%, #edf4f8);
}

.stage-ageing-card-bars i b,
.stage-ageing-card-bars em b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--stage-age-colour, var(--accent));
}

.stage-ageing-card-bars i b {
  width: var(--stage-age-share, 0%);
}

.stage-ageing-card-bars em {
  opacity: 0.64;
}

.stage-ageing-card-bars em b {
  width: var(--stage-count-share, 0%);
}

.lead-team-conversion-panel {
  grid-template-rows: auto minmax(0, 1fr);
  margin-top: 12px;
}

.lead-team-conversion-panel .split-title {
  align-items: center;
}

.lead-team-conversion-panel .split-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.lead-team-conversion-dashboard {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.lead-team-conversion-ring {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, #ffffff 0 58%, transparent 59%),
    conic-gradient(var(--good) 0 var(--team-conversion-rate), #dfe9ef var(--team-conversion-rate) 100%);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.lead-team-conversion-ring:hover,
.lead-team-conversion-ring:focus-visible,
.lead-team-conversion-ring.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 184, 225, 0.16);
  outline: 0;
}

.lead-team-conversion-ring strong {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 950;
  line-height: 0.95;
}

.lead-team-conversion-ring span,
.lead-team-conversion-ring small {
  max-width: 150px;
  color: var(--muted);
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.lead-team-conversion-ring span {
  color: var(--ink);
  font-size: 13px;
}

.lead-team-conversion-ring small {
  font-size: 11px;
}

.lead-team-conversion-list {
  display: grid;
  gap: 8px;
  align-content: stretch;
}

.lead-team-conversion-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr) minmax(84px, auto);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--owner-colour) 24%, var(--line));
  border-left: 5px solid var(--owner-colour);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.lead-team-conversion-row:hover,
.lead-team-conversion-row:focus-visible,
.lead-team-conversion-row.is-active {
  border-color: var(--owner-colour);
  background: color-mix(in srgb, var(--owner-colour) 8%, #ffffff);
  outline: 0;
}

.lead-team-conversion-person {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "avatar name"
    "avatar meta";
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
}

.lead-team-conversion-person b {
  grid-area: avatar;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--owner-colour) 18%, #ffffff);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.lead-team-conversion-person strong,
.lead-team-conversion-person small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-team-conversion-person strong {
  grid-area: name;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.lead-team-conversion-person small {
  grid-area: meta;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.lead-team-conversion-performance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lead-team-conversion-performance > span {
  display: grid;
  gap: 2px;
  min-width: 68px;
}

.lead-team-conversion-performance small,
.lead-team-conversion-performance em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-team-conversion-performance strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 950;
  line-height: 0.95;
}

.lead-team-conversion-performance i {
  display: block;
  overflow: hidden;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--owner-colour) 10%, #eef4f7);
}

.lead-team-conversion-performance i b {
  display: block;
  width: var(--converted-share, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--good);
}

.lead-team-conversion-rate {
  display: grid;
  justify-items: end;
  gap: 3px;
  white-space: nowrap;
}

.lead-team-conversion-rate strong {
  color: var(--good);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 950;
  line-height: 0.95;
}

.lead-team-conversion-rate small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.lead-closure-reason-panel {
  margin-top: 12px;
}

.lead-closure-reason-panel .split-title {
  align-items: center;
}

.lead-closure-reason-panel .split-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.lead-closure-reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.lead-closure-reason-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 0.42fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, #ffffff), #ffffff 56%);
}

.lead-closure-reason-row.is-warning {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 9%, #ffffff), #ffffff 56%);
}

.lead-closure-reason-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lead-closure-reason-row strong,
.lead-closure-reason-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-closure-reason-row strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-closure-reason-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.lead-closure-reason-row i {
  display: block;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #eef4f7;
}

.lead-closure-reason-row i b {
  display: block;
  width: var(--closure-share, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.lead-closure-reason-row.is-warning i b {
  background: var(--danger);
}

.lead-closure-reason-row em {
  color: var(--ink);
  font-size: 24px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.lead-closure-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line));
  border-left: 5px solid var(--danger);
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 5%, #ffffff);
}

.lead-closure-summary div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lead-closure-summary span,
.lead-closure-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-closure-summary strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-closure-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

.lead-closure-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
}

.lead-closure-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 18, 28, 0.52);
  cursor: pointer;
}

.lead-closure-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(620px, 100%);
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--accent);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(10, 22, 35, 0.28);
}

.lead-closure-dialog__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.lead-closure-dialog__header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-closure-dialog__header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.lead-closure-dialog label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-closure-dialog select,
.lead-closure-dialog textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
}

.lead-closure-dialog select {
  min-height: 48px;
  padding: 0 12px;
}

.lead-closure-dialog textarea {
  min-height: 120px;
  padding: 12px;
  resize: vertical;
}

.lead-closure-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.quote-copy-modal {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 24px;
}

.quote-copy-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 18, 28, 0.52);
  cursor: pointer;
}

.quote-copy-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(10, 22, 35, 0.28);
}

.quote-copy-dialog__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.quote-copy-dialog__header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-copy-dialog__header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.quote-copy-source,
.quote-copy-selected {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.quote-copy-source span,
.quote-copy-search span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-copy-source strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.quote-copy-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quote-copy-search {
  display: grid;
  gap: 8px;
}

.quote-copy-search input {
  min-height: 48px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
}

.quote-copy-search input:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(58, 180, 222, 0.18);
}

.quote-copy-results {
  display: grid;
  gap: 8px;
}

.quote-copy-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.quote-copy-result:hover,
.quote-copy-result:focus-visible,
.quote-copy-result.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: 0;
}

.quote-copy-result__name {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-copy-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.quote-copy-dialog__footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.lead-source-list,
.lead-owner-list {
  display: grid;
  gap: 7px;
  align-content: start;
}

.lead-owner-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  align-content: stretch;
  align-items: stretch;
  justify-items: center;
  min-width: 0;
  height: 100%;
}

.lead-owner-donut {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: start;
  width: clamp(170px, 82%, 220px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: conic-gradient(var(--owner-chart, var(--accent) 0% 100%));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.lead-owner-donut::after {
  position: absolute;
  inset: 24%;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fbfcfd;
  content: "";
}

.lead-owner-donut-total,
.lead-owner-donut-label {
  position: relative;
  z-index: 1;
}

.lead-owner-donut-total {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfcfd;
  color: var(--ink);
  cursor: pointer;
  font-size: 32px;
  font-weight: 950;
  line-height: 0.95;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.lead-owner-donut-label {
  position: absolute;
  z-index: 2;
  left: var(--label-left);
  top: var(--label-top);
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12);
  color: #071018;
  cursor: pointer;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.lead-owner-donut-label:hover,
.lead-owner-donut-label:focus-visible,
.lead-owner-donut-label.is-active,
.lead-owner-donut-total:hover,
.lead-owner-donut-total:focus-visible,
.lead-owner-donut-total.is-active {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(56, 184, 225, 0.22);
}

.lead-owner-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: end;
  align-content: flex-end;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.lead-owner-legend-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: 1 1 54px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 78px;
  min-height: 30px;
  padding: 5px 6px;
  border: 1px solid color-mix(in srgb, var(--owner-colour) 22%, var(--line));
  border-left: 4px solid var(--owner-colour);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.lead-owner-legend-item:hover,
.lead-owner-legend-item:focus-visible,
.lead-owner-legend-item.is-active {
  border-color: var(--owner-colour);
  background: color-mix(in srgb, var(--owner-colour) 10%, #ffffff);
  outline: 0;
}

.lead-owner-legend-item b {
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-owner-legend-item strong {
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.lead-source-panel-bars {
  align-content: stretch;
  grid-auto-rows: minmax(42px, 1fr);
  height: 100%;
}

.lead-source-row,
.lead-owner-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.4fr) minmax(0, 1fr) 42px minmax(74px, auto);
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.lead-source-row {
  grid-template-columns: minmax(92px, 0.4fr) minmax(0, 1fr) 42px;
}

.lead-source-row--division-status {
  grid-template-columns: 104px minmax(0, 1fr) 56px;
  gap: 6px;
  min-height: 42px;
}

.lead-source-row--summary {
  cursor: default;
}

.lead-source-row--summary:hover {
  border-color: var(--line);
  background: #ffffff;
}

.lead-owner-row--count-only {
  grid-template-columns: minmax(92px, 0.4fr) minmax(0, 1fr) 42px;
}

.lead-owner-list .lead-owner-row--count-only {
  min-height: 42px;
}

.lead-source-row:hover,
.lead-source-row:focus-visible {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.lead-source-row span,
.lead-owner-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-source-row i,
.lead-owner-row i {
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
}

.lead-source-row i::before,
.lead-owner-row i::before {
  display: block;
  width: var(--lead-share);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  content: "";
}

.lead-status-division-strip {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  width: 100%;
  height: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.lead-status-division-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 var(--division-share);
  min-width: 0;
  height: 100%;
  padding: 0 5px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.72);
  background: color-mix(in srgb, var(--division-colour) 78%, #ffffff);
  color: #071018;
  font-style: normal;
}

.lead-status-division-pill:last-child {
  border-right: 0;
}

.lead-status-division-pill b {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

.lead-status-division-pill small {
  overflow: hidden;
  min-width: 0;
  color: color-mix(in srgb, #071018 76%, var(--division-colour));
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-status-division-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.opportunity-stage-division-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 0.55vw, 8px);
  align-items: stretch;
  min-width: 0;
  min-height: 100%;
  padding-top: 6px;
}

.opportunity-stage-division-column {
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto auto;
  gap: 7px;
  align-items: end;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 4px 2px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.opportunity-stage-division-column:hover,
.opportunity-stage-division-column:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: 0;
}

.opportunity-stage-division-stack {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  padding: 8px 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(56, 184, 225, 0.04), rgba(56, 184, 225, 0.11));
}

.opportunity-stage-division-bar {
  display: flex;
  flex-direction: column-reverse;
  width: clamp(34px, 92%, 82px);
  max-width: 100%;
  height: var(--stage-share);
  min-height: 30px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.opportunity-stage-division-segment {
  display: grid;
  flex: 0 0 var(--division-share);
  place-items: center;
  min-height: 24px;
  min-width: 0;
  padding: 3px 1px;
  background: var(--division-colour);
  color: #071018;
  font-style: normal;
  line-height: 1;
}

.opportunity-stage-division-segment b {
  font-size: 13px;
  font-weight: 950;
}

.opportunity-stage-division-segment small {
  display: none;
}

.opportunity-stage-division-empty-bar {
  display: grid;
  place-items: center;
  width: clamp(34px, 92%, 82px);
  max-width: 100%;
  min-height: 30px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.opportunity-stage-division-label {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-stage-division-column > strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.opportunity-value-list {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.opportunity-stage-value-card {
  display: grid;
  grid-template-columns: 38px minmax(102px, 0.24fr) minmax(0, 1.76fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(58, 184, 225, 0.08), rgba(255, 255, 255, 0) 26%),
    #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.opportunity-stage-value-card:hover,
.opportunity-stage-value-card:focus-visible {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.opportunity-stage-value-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--soft-accent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.opportunity-stage-value-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.opportunity-stage-value-copy b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-stage-value-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.opportunity-stage-value-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.opportunity-stage-value-pair {
  display: grid;
  grid-template-areas:
    "title title"
    "readout readout"
    "bar bar";
  gap: 5px;
  min-width: 0;
  min-height: 54px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.74);
}

.opportunity-stage-value-pair-title {
  grid-area: title;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-stage-value-pair-readout {
  grid-area: readout;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  min-width: 0;
}

.opportunity-stage-value-pair-readout em {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-stage-value-pair-readout em i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--opportunity-pair-gross, color-mix(in srgb, var(--accent) 34%, #ffffff));
}

.opportunity-stage-value-pair-readout em:nth-child(2) i {
  background: var(--opportunity-pair-weighted, var(--accent));
}

.opportunity-stage-value-pair-readout b {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
}

.opportunity-stage-value-pair-bar {
  grid-area: bar;
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.opportunity-stage-value-pair-bar b,
.opportunity-stage-value-pair-bar strong {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: var(--metric-gross-share);
  max-width: 100%;
  border-radius: 999px 0 0 999px;
  background: var(--opportunity-pair-gross, color-mix(in srgb, var(--accent) 34%, #ffffff));
}

.opportunity-stage-value-pair-bar strong {
  inset: 0 0 0 auto;
  width: var(--metric-weighted-share);
  border-radius: 0 999px 999px 0;
  background: var(--opportunity-pair-weighted, var(--accent));
}

.opportunity-stage-value-pair--revenue {
  --opportunity-pair-gross: color-mix(in srgb, var(--accent) 26%, #ffffff);
  --opportunity-pair-weighted: var(--accent);
}

.opportunity-stage-value-pair--margin {
  --opportunity-pair-gross: color-mix(in srgb, var(--good) 24%, #ffffff);
  --opportunity-pair-weighted: var(--good);
}

.opportunity-stage-value-metric {
  display: grid;
  grid-template-areas:
    "label value"
    "bar bar";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
}

.opportunity-stage-value-metric small {
  grid-area: label;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-stage-value-metric strong {
  grid-area: value;
  align-self: center;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.opportunity-stage-value-metric i {
  grid-area: bar;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.opportunity-stage-value-metric i b {
  display: block;
  width: var(--metric-share);
  height: 100%;
  border-radius: inherit;
  background: var(--metric-colour, var(--accent));
}

.opportunity-stage-value-metric--gross i b {
  background: color-mix(in srgb, var(--accent) 72%, #ffffff);
}

.opportunity-stage-value-metric--weighted i b {
  background: var(--accent);
}

.opportunity-stage-value-metric--margin i b {
  background: var(--good);
}

.opportunity-value-bar-shell {
  display: none;
}

.opportunity-value-row > .lead-status-division-empty {
  grid-area: bar;
}

.opportunity-value-strip,
.opportunity-value-segment {
  display: none;
}

.opportunity-future-pipeline {
  display: grid;
  gap: 9px;
}

.opportunity-closing-forecast-panel {
  margin-top: 12px;
}

.opportunity-closing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.opportunity-closing-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--forecast-colour, var(--accent));
  border-radius: 8px;
  background: var(--surface-2);
}

.opportunity-closing-card--accent {
  --forecast-colour: var(--accent);
}

.opportunity-closing-card--website {
  --forecast-colour: #0f766e;
}

.opportunity-closing-card--good {
  --forecast-colour: var(--good);
}

.opportunity-closing-card--import {
  --forecast-colour: #6d5dfc;
}

.opportunity-closing-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.opportunity-closing-card h4,
.opportunity-closing-card small,
.opportunity-closing-card p {
  margin: 0;
}

.opportunity-closing-card h4 {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-closing-card small,
.opportunity-closing-card p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

.opportunity-closing-card header > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--forecast-colour) 16%, #ffffff);
  color: #071018;
  font-size: 16px;
  font-weight: 950;
}

.opportunity-closing-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.opportunity-closing-values div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

.opportunity-closing-values span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-closing-values strong {
  overflow: hidden;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-future-pipeline-panel {
  grid-template-rows: minmax(0, 1fr);
  margin-top: 12px;
}

.opportunity-owner-load-panel {
  grid-template-rows: 34px minmax(0, auto);
  margin-top: 12px;
}

.opportunity-owner-load-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.opportunity-future-pipeline__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.opportunity-future-pipeline__head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.opportunity-future-pipeline__head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-align: right;
  text-transform: uppercase;
}

.opportunity-pipeline-chart-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.opportunity-pipeline-chart-key,
.opportunity-pipeline-division-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.opportunity-pipeline-chart-key {
  justify-content: flex-end;
}

.opportunity-pipeline-chart-key span,
.opportunity-pipeline-division-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-pipeline-key-bar,
.opportunity-pipeline-key-line,
.opportunity-pipeline-division-legend i {
  display: inline-block;
  flex: 0 0 auto;
}

.opportunity-pipeline-key-bar {
  width: 20px;
  height: 10px;
  border-radius: 4px;
  background: var(--accent);
}

.opportunity-pipeline-key-line {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: #1f7a5a;
}

.opportunity-pipeline-division-legend i {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: var(--division-colour, var(--accent));
}

.opportunity-pipeline-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 230px;
  overflow: visible;
}

.opportunity-pipeline-grid line {
  stroke: #dce8f0;
  stroke-width: 1;
}

.opportunity-pipeline-axis {
  stroke: #9fb6c7;
  stroke-width: 1.5;
}

.opportunity-pipeline-axis--right,
.opportunity-pipeline-margin-line,
.opportunity-pipeline-margin-point {
  color: #1f7a5a;
}

.opportunity-pipeline-axis-title,
.opportunity-pipeline-axis-label,
.opportunity-pipeline-month-label,
.opportunity-pipeline-month-count {
  font-family: inherit;
  letter-spacing: 0;
}

.opportunity-pipeline-axis-title {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-anchor: start;
}

.opportunity-pipeline-axis-title--right {
  fill: #1f7a5a;
  text-anchor: end;
}

.opportunity-pipeline-axis-label {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.opportunity-pipeline-axis-label--left {
  text-anchor: end;
}

.opportunity-pipeline-axis-label--right {
  fill: #1f7a5a;
  text-anchor: start;
}

.opportunity-pipeline-bar-track {
  fill: #f2f6f9;
}

.opportunity-pipeline-bar-segment {
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.5;
}

.opportunity-pipeline-margin-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.opportunity-pipeline-margin-point {
  fill: #ffffff;
  stroke: currentColor;
  stroke-width: 4;
}

.opportunity-pipeline-month-label {
  fill: #071018;
  font-size: 12px;
  font-weight: 950;
  text-anchor: middle;
  text-transform: uppercase;
}

.opportunity-pipeline-month-count {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-anchor: middle;
}

.opportunity-future-pipeline__rows {
  display: grid;
  gap: 7px;
}

.opportunity-future-pipeline-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

.opportunity-future-pipeline-month strong,
.opportunity-future-pipeline-month small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-future-pipeline-month strong {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.opportunity-future-pipeline-month small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.opportunity-future-pipeline-bars {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.opportunity-future-pipeline-bar-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(88px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.opportunity-future-pipeline-bar-row > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-future-pipeline-bar-row > strong {
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.opportunity-future-pipeline-bar-shell {
  min-width: 0;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.opportunity-future-pipeline-strip {
  display: flex;
  width: var(--pipeline-share);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.opportunity-future-pipeline-segment {
  display: flex;
  flex: 0 0 var(--division-share);
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.72);
  background: color-mix(in srgb, var(--division-colour) 80%, #ffffff);
  color: #071018;
  font-style: normal;
}

.opportunity-future-pipeline-segment:last-child {
  border-right: 0;
}

.opportunity-future-pipeline-segment b {
  overflow: hidden;
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-future-pipeline-empty {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-source-row strong,
.lead-owner-row strong {
  font-size: 13px;
  text-align: right;
}

.lead-owner-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

.opportunity-flow-grid .lead-owner-row {
  grid-template-columns: minmax(0, 1fr) 16px 28px minmax(52px, auto);
  gap: 6px;
}

.opportunity-flow-grid .lead-owner-row i {
  justify-self: center;
  width: 10px;
  height: 10px;
}

.opportunity-flow-grid .lead-owner-row i::before {
  width: 100%;
}

.opportunity-owner-load-name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.opportunity-owner-load-name b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 5px;
  border-radius: 7px;
  background: var(--soft-blue);
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
}

.opportunity-owner-load-name em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-filter-stack {
  display: grid;
  gap: 7px;
  margin: 2px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
}

.opportunity-filter-stack {
  margin-top: 2px;
}

.lead-filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.lead-filter-strip-label {
  min-width: 48px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-filter-strip .filter-chip {
  min-height: 32px;
  padding: 0 10px;
}

.lead-filter-strip .filter-chip strong {
  font-size: 11px;
}

.lead-filter-clear {
  margin-left: auto;
}

.lead-queue-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.lead-reset-button {
  min-width: 74px;
}

.lead-row-metrics {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}

.lead-row-metrics strong {
  font-size: 13px;
}

.lead-row-metrics small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.sales-chart-panel {
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  padding: 16px;
}

.sales-chart-panel--wide {
  grid-column: 1 / -1;
  min-height: 390px;
}

.sales-chart-panel--compact {
  min-height: 300px;
}

.sales-chart-legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.legend-line {
  display: inline-block;
  width: 26px;
  height: 3px;
  margin-right: 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.legend-line--gross {
  background: #050505;
}

.legend-line--weighted {
  background: var(--accent);
}

.sales-line-chart {
  display: block;
  width: 100%;
  min-height: 250px;
  margin-top: 12px;
}

.sales-line-chart text {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chart-axis,
.chart-grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-grid-line {
  opacity: 0.75;
}

.chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.chart-bar {
  opacity: 0.2;
}

.chart-bar--weighted {
  fill: var(--accent);
}

.chart-line--gross {
  stroke: #050505;
}

.chart-line--weighted {
  stroke: var(--accent);
}

.chart-dot {
  stroke: #ffffff;
  stroke-width: 2;
}

.chart-dot--gross {
  fill: #050505;
}

.chart-dot--weighted {
  fill: var(--accent);
}

.sales-month-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.sales-month-strip span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.sales-month-strip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.sales-month-strip strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-horizontal-bars {
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.sales-count-bars {
  display: grid;
  gap: 12px;
}

.sales-count-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.sales-count-row strong,
.sales-count-row b {
  font-size: 12px;
  line-height: 1.2;
}

.sales-count-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-count-row b {
  text-align: right;
}

.sales-count-row span {
  display: block;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2);
}

.sales-count-row span i {
  display: block;
  width: var(--bar-share);
  height: 100%;
  border-radius: inherit;
  background: var(--bar-colour);
}

.sales-division-stack {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  min-height: 150px;
}

.sales-division-stack__bar {
  display: flex;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.sales-division-stack__segment {
  display: grid;
  place-items: center;
  flex: 1 1 var(--segment-share);
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.62);
  background: var(--segment-colour);
  color: #050505;
}

.sales-division-stack__segment:last-child {
  border-right: 0;
}

.sales-division-stack__segment strong {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 28px;
  max-width: calc(100% - 4px);
  padding: 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #050505;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.sales-division-stack__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.sales-division-stack__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.sales-division-stack__legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--segment-colour);
}

.sales-bar-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.75fr) minmax(72px, 1fr) minmax(56px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.sales-bar-row strong,
.sales-bar-row span,
.sales-bar-row > div {
  min-width: 0;
}

.sales-bar-row div strong {
  display: block;
  font-size: 12px;
}

.sales-bar-row div span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-bar-row > strong {
  font-size: 13px;
  text-align: right;
}

.sales-bar-track {
  position: relative;
  display: block;
  overflow: hidden;
  height: 18px;
  border-radius: 999px;
  background: var(--line);
}

.sales-bar-track i,
.sales-bar-track b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
}

.sales-bar-track i {
  width: var(--gross);
  background: color-mix(in srgb, var(--bar-colour) 34%, #fff);
}

.sales-bar-track b {
  width: var(--weighted);
  background: var(--bar-colour);
}

.sales-stage-funnel {
  display: grid;
  grid-template-columns: repeat(7, minmax(62px, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 250px;
}

.sales-stage-funnel-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.owner-dashboard-grid:not(.owner-dashboard-grid--lower) .sales-stage-funnel-panel {
  height: 100%;
  min-height: 0;
}

.owner-dashboard-side .sales-stage-funnel {
  grid-template-columns: repeat(7, minmax(38px, 1fr));
  gap: 6px;
  min-height: 100%;
  align-self: stretch;
}

.sales-stage-column {
  display: grid;
  align-items: end;
  gap: 6px;
  min-width: 0;
  height: 240px;
  text-align: center;
}

.owner-dashboard-side .sales-stage-column {
  height: clamp(260px, 29vw, 420px);
}

.sales-stage-bar {
  align-self: end;
  min-height: 10px;
  height: var(--stage-height);
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.sales-stage-column strong {
  font-size: 20px;
  line-height: 1;
}

.sales-stage-column small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sales-stage-column em {
  color: var(--accent-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.sales-category-stack {
  display: grid;
  gap: 10px;
}

.sales-category-stack > span {
  display: flex;
  overflow: hidden;
  height: 28px;
  border-radius: 999px;
  background: var(--line);
}

.sales-category-segment {
  width: var(--share);
}

.sales-category-segment--0 {
  background: #050505;
}

.sales-category-segment--1 {
  background: var(--accent);
}

.sales-category-segment--2 {
  background: var(--good);
}

.sales-category-stack div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.sales-category-stack small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-forecast-category-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-self: stretch;
  min-height: 390px;
}

.forecast-confidence-grid {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.forecast-confidence-card {
  --confidence-colour: var(--muted);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  min-height: 108px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--confidence-colour);
  border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--confidence-colour) 8%, #fff), var(--surface-2) 64%);
}

.forecast-confidence-card--0 {
  --confidence-colour: #64748b;
}

.forecast-confidence-card--1 {
  --confidence-colour: var(--accent);
}

.forecast-confidence-card--2 {
  --confidence-colour: var(--good);
}

.forecast-confidence-index {
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--confidence-colour) 16%, #fff);
  color: #050505;
  font-size: 13px;
  font-weight: 950;
}

.forecast-confidence-copy {
  min-width: 0;
}

.forecast-confidence-copy strong {
  display: block;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.forecast-confidence-copy small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.forecast-confidence-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.forecast-confidence-values span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.forecast-confidence-values small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.forecast-confidence-values strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forecast-confidence-bars {
  display: grid;
  gap: 5px;
}

.forecast-confidence-bars span {
  display: block;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
}

.forecast-confidence-bars i {
  display: block;
  width: var(--confidence-share);
  height: 100%;
  border-radius: inherit;
  background: var(--confidence-colour);
}

.forecast-confidence-bars span:first-child i {
  opacity: 0.38;
}

.sales-top-opportunities-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.sales-top-opportunities-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 226px;
  margin-top: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.sales-top-opportunities-list::-webkit-scrollbar {
  width: 8px;
}

.sales-top-opportunities-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.sales-top-opportunity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  min-height: 62px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.sales-top-opportunity-row:hover,
.sales-top-opportunity-row:focus-within {
  border-color: var(--division-colour);
  background: linear-gradient(90deg, color-mix(in srgb, var(--division-colour) 7%, #fff), var(--surface-2) 74%);
  box-shadow: 0 12px 24px rgba(10, 48, 67, 0.08);
}

.sales-top-opportunity-main {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) minmax(76px, 0.28fr) minmax(86px, 0.28fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sales-top-opportunity-swatch {
  display: block;
  width: 7px;
  height: 40px;
  border-radius: 999px;
  background: var(--division-colour);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--division-colour) 72%, #050505);
}

.sales-top-opportunity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sales-top-opportunity-copy strong {
  overflow: hidden;
  min-width: 0;
  font-size: 13px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-top-opportunity-copy small {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sales-top-opportunity-pill {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.sales-top-opportunity-pill small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sales-top-opportunity-pill strong {
  overflow: hidden;
  min-width: 0;
  font-size: 12px;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sales-top-opportunity-pill--value {
  border-color: color-mix(in srgb, var(--division-colour) 44%, var(--line));
  background: color-mix(in srgb, var(--division-colour) 12%, #fff);
}

.sales-top-opportunity-pill--value strong {
  font-size: 13px;
}

.sales-top-opportunity-open {
  min-height: 38px;
  padding: 0 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.metric-card--button,
.sales-process-tile,
.sales-row-button {
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.metric-card--button {
  width: 100%;
}

.metric-card--button.is-active,
.sales-process-tile.is-active,
.sales-row-button.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, #fff);
}

.metric-card--button:hover,
.metric-card--button:focus-visible,
.sales-process-tile:hover,
.sales-process-tile:focus-visible,
.sales-row-button:hover,
.sales-row-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 16px 32px rgba(10, 48, 67, 0.1);
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sales-process-section {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.create-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: none;
}

.create-page__title {
  align-items: end;
  min-height: 0;
  padding-bottom: 2px;
}

.create-page__title h2 {
  font-size: 24px;
}

.create-page__title p {
  max-width: 760px;
}

.create-type-switcher {
  justify-content: flex-end;
  margin-bottom: 0;
}

.lead-create-path {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    var(--surface);
  box-shadow: var(--shadow);
}

.lead-create-path__copy {
  display: grid;
  align-content: center;
  gap: 8px;
}

.lead-create-path__copy strong {
  max-width: 260px;
  font-size: 22px;
  line-height: 1.08;
  text-transform: uppercase;
}

.lead-create-path__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lead-create-path__steps--completion {
  grid-template-columns: minmax(0, 1fr);
}

.lead-create-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.lead-create-step small,
.lead-create-step span:not(.metric-icon) {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.lead-create-step strong {
  display: block;
  margin: 3px 0;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
}

.lead-create-header-tile {
  min-height: 66px;
}

.lead-create-header-tile .lead-command-header {
  grid-template-columns: minmax(0, 1fr) minmax(560px, 0.92fr);
  width: 100%;
}

.lead-create-header-tile .lead-create-path__steps {
  justify-self: end;
  width: min(780px, 58vw);
}

.lead-create-header-tile .lead-create-path__steps--completion {
  width: min(620px, 48vw);
}

.lead-create-header-tile .lead-create-step {
  min-height: 58px;
  padding: 7px 9px;
  background: var(--surface-2);
}

.lead-create-header-tile .lead-create-step strong {
  margin: 2px 0;
  font-size: 13px;
}

.lead-create-header-tile .lead-create-step small,
.lead-create-header-tile .lead-create-step span:not(.metric-icon) {
  font-size: 9px;
  line-height: 1.1;
}

.lead-create-header-tile .lead-create-step .metric-icon {
  width: 34px;
  height: 34px;
}

.lead-create-header-tile .lead-create-step--completion {
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 7px 9px;
  border-top: 4px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, #fff), var(--surface-2));
}

.lead-create-header-tile .lead-create-step--completion .metric-icon {
  width: 34px;
  height: 34px;
}

.lead-create-header-tile .lead-create-step--completion small {
  font-size: 9px;
  line-height: 1.1;
}

.create-header-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  margin-top: 3px;
}

.lead-create-header-tile .lead-create-step--completion strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: #050505;
  font-size: 14px;
  line-height: 1;
}

.lead-create-header-tile .lead-create-step--completion [data-create-completion-detail] {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.1;
}

.lead-create-header-tile .lead-create-step--completion .create-progress-track {
  height: 8px;
  margin-top: 0;
}

.create-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.create-page--lead .create-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.create-summary-tile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--create-colour, var(--accent));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.create-summary-tile--blue {
  --create-colour: var(--accent);
}

.create-summary-tile--black {
  --create-colour: #050505;
}

.create-summary-tile--division {
  --create-colour: var(--division-colour, #dfb9e4);
}

.create-summary-tile--green {
  --create-colour: var(--good);
}

.create-summary-tile--amber {
  --create-colour: var(--warn);
}

.create-summary-tile--red {
  --create-colour: var(--danger);
}

.create-summary-tile--progress {
  --create-colour: var(--accent);
}

.create-summary-tile .metric-icon {
  background: color-mix(in srgb, var(--create-colour) 16%, #fff);
  color: var(--create-colour);
}

.create-summary-tile span:not(.metric-icon) {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.create-summary-tile strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.18;
  text-transform: uppercase;
}

.create-summary-tile small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.w3w-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.w3w-field__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.w3w-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.w3w-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.w3w-link {
  color: var(--accent-strong);
  font-weight: 950;
  text-decoration: none;
}

.order-readiness-tile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--create-colour) 8%, #fff), var(--surface) 74%);
}

.dispatch-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dispatch-gate-action {
  min-height: 28px;
  padding-inline: 9px;
  font-size: 10px;
}

.order-mini-progress {
  display: grid;
  grid-template-columns: repeat(var(--mini-count, 6), minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.order-mini-progress b {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, #fff);
}

.order-mini-progress b.is-complete {
  background: var(--create-colour);
}

.create-progress-track {
  display: block;
  overflow: hidden;
  height: 10px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--line);
}

.create-progress-track b {
  display: block;
  width: var(--complete);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 180ms ease;
}

.create-record-form {
  display: grid;
  gap: 14px;
}

.create-record-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 16px;
}

.create-record-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.create-form-stack {
  display: grid;
  gap: 14px;
}

.lead-create-intake-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(260px, 0.82fr);
  gap: 14px;
  align-items: start;
}

.opportunity-create-intake-grid {
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.4fr);
  align-items: stretch;
}

.quote-create-intake-grid {
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.4fr);
}

.opportunity-create-card--opportunity {
  grid-column: 1;
  grid-row: 1;
}

.opportunity-create-card--commercial {
  grid-column: 1;
  grid-row: 2;
}

.opportunity-create-card--links {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-content: stretch;
}

.quote-direct-division-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-create-lines-section,
.quote-create-terms-section {
  gap: 10px;
}

.create-form-tile,
.create-side-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--create-colour, var(--accent));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.create-form-tile--profile {
  --create-colour: var(--accent);
}

.create-form-tile--contact {
  --create-colour: var(--accent);
}

.create-form-tile--routing {
  --create-colour: var(--accent);
}

.create-form-tile--qualification {
  --create-colour: var(--accent);
}

.create-form-tile--website {
  --create-colour: var(--accent);
}

.create-form-tile .metric-icon {
  background: color-mix(in srgb, var(--create-colour) 15%, #fff);
  color: var(--create-colour);
}

.create-side-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 18px);
  --create-colour: var(--accent);
}

.create-rule-list {
  display: grid;
  gap: 9px;
}

.create-rule-list span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.create-rule-list strong {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #050505;
  font-size: 13px;
  line-height: 1;
}

.create-rule-list small {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.website-suggestion-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.website-suggestion-panel strong,
.website-suggestion-panel span {
  display: block;
}

.website-suggestion-panel strong {
  font-size: 13px;
}

.website-suggestion-panel span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.help-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.help-button:hover,
.help-button:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}

.sales-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sales-process-tile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sales-process-step {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #050505;
  font-size: 13px;
  font-weight: 900;
}

.sales-process-tile strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  line-height: 1;
}

.sales-process-tile small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.sales-drilldown {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.sales-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 16px;
}

.lead-review-layout {
  align-items: stretch;
}

.lead-create-form,
.sales-review-panel,
.lead-convert-form {
  display: grid;
  gap: 12px;
}

.lead-create-form {
  scroll-margin-top: calc(var(--topbar-height) + 16px);
}

.lead-create-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.lead-create-grid--routing {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lead-create-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.lead-create-grid--qualification {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lead-create-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-create-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.inline-create-field .mini-action {
  height: 42px;
}

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

.opportunity-search-panel {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}

.opportunity-search-panel:empty {
  display: none;
}

.opportunity-search-option {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.opportunity-search-option strong,
.opportunity-search-option small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-search-option small,
.field-help {
  color: var(--muted);
  font-weight: 800;
}

.opportunity-search-option:hover,
.opportunity-search-option.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.opportunity-search-empty {
  display: grid;
  place-items: center start;
  min-height: 44px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 900;
}

.opportunity-contact-picker {
  display: grid;
  gap: 8px;
}

.opportunity-contact-picker.is-disabled {
  opacity: 0.7;
}

.opportunity-contact-create-panel {
  margin-top: 2px;
}

.opportunity-division-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.opportunity-division-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  justify-items: center;
  align-items: center;
  min-height: 74px;
  padding: 9px 7px;
  border: 1px solid color-mix(in srgb, var(--division-colour, var(--accent)) 44%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--division-colour, var(--accent)) 13%, #fff);
  text-align: center;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.opportunity-division-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  cursor: pointer;
}

.opportunity-division-choice__logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #050505;
  overflow: hidden;
}

.opportunity-division-choice__logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.opportunity-division-choice strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.05;
  white-space: normal;
}

.opportunity-division-choice:hover {
  border-color: var(--division-colour, var(--accent));
  background: color-mix(in srgb, var(--division-colour, var(--accent)) 20%, #fff);
  transform: translateY(-1px);
}

.opportunity-division-choice:has(input:focus-visible) {
  border-color: var(--division-colour, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--division-colour, var(--accent)) 24%, transparent);
}

.opportunity-division-choice:has(input:checked) {
  border-width: 2px;
  border-color: var(--division-colour, var(--accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--division-colour, var(--accent)) 32%, #fff), #fff 78%);
  box-shadow:
    inset 0 5px 0 var(--division-colour, var(--accent)),
    0 0 0 3px color-mix(in srgb, var(--division-colour, var(--accent)) 24%, transparent),
    var(--shadow);
  transform: translateY(-1px);
}

.opportunity-division-choice:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--division-colour, var(--accent));
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.opportunity-division-choice:has(input:checked) .opportunity-division-choice__logo {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--division-colour, var(--accent)) 26%, #fff);
}

.opportunity-division-choice:has(input:checked) strong {
  color: #050505;
}

.opportunity-commercial-number {
  display: grid;
  gap: 6px;
}

.commercial-input-shell {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: stretch;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, #fff), #fff);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.commercial-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  background: #fff;
}

.commercial-input-prefix,
.commercial-input-suffix {
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--soft-blue);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.commercial-input-prefix {
  border-right: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}

.commercial-input-suffix {
  border-left: 1px solid var(--line);
}

.create-form-tile .commercial-number-input {
  width: 100%;
  height: 50px;
  min-height: 50px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  padding: 0 12px;
}

.create-form-tile .commercial-number-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.commercial-number-input::-webkit-outer-spin-button,
.commercial-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.commercial-number-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.inline-create-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.inline-create-panel[hidden] {
  display: none;
}

.inline-create-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inline-create-panel__header strong {
  font-size: 13px;
  text-transform: uppercase;
}

.inline-create-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.inline-create-panel__wide {
  grid-column: 1 / -1;
}

.inline-create-panel .primary-button {
  justify-self: start;
}

.create-form-tile input,
.create-form-tile select {
  height: 42px;
  min-height: 42px;
}

.lead-create-grid__wide {
  grid-column: 1 / -1;
}

.create-form-tile input:focus,
.create-form-tile select:focus,
.create-form-tile textarea:focus {
  border-color: var(--create-colour, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--create-colour, var(--accent)) 18%, transparent);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-actions--between {
  justify-content: space-between;
}

.sales-row-button {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.lead-queue-list {
  gap: 6px;
  max-height: 354px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.lead-queue-list::-webkit-scrollbar {
  width: 8px;
}

.lead-queue-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.sales-review-layout > .sales-review-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--topbar-height) - 32px);
  overflow-y: auto;
}

.lead-review-layout > .sales-review-panel {
  align-self: stretch;
  min-height: 100%;
}

.quote-review-layout {
  align-items: stretch;
}

.quote-review-layout > .sales-review-panel {
  align-self: stretch;
  min-height: 100%;
}

.opportunity-review-layout {
  --opportunity-review-height: clamp(560px, 62vh, 680px);
  align-items: start;
}

.opportunity-review-layout > .split-panel,
.opportunity-review-layout > .sales-review-panel {
  height: var(--opportunity-review-height);
  max-height: var(--opportunity-review-height);
}

.opportunity-review-layout > .split-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.opportunity-review-layout > .sales-review-panel {
  align-self: stretch;
  overflow-y: auto;
}

.opportunity-review-layout .opportunity-queue-list {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.lead-insight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.lead-insight-row:hover,
.lead-insight-row:focus-within {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 12px 24px rgba(10, 48, 67, 0.08);
}

.lead-insight-row.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.lead-insight-main {
  display: grid;
  grid-template-columns: 16px minmax(0, 1.5fr) minmax(174px, 0.62fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.lead-division-swatch {
  display: block;
  width: 7px;
  height: 34px;
  border-radius: 999px;
  background: var(--division-colour);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--division-colour) 74%, #050505);
}

.lead-insight-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
}

.lead-insight-copy strong,
.lead-insight-copy span {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-insight-copy strong {
  flex: 1 1 auto;
  max-width: none;
  font-size: 13px;
}

.lead-insight-copy span {
  flex: 0 1 150px;
}

.lead-row-analytics {
  display: grid;
  grid-template-columns: 112px 58px;
  gap: 4px;
  align-items: stretch;
  min-width: 0;
}

.lead-row-metric {
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 6px;
}

.lead-row-analytics .lead-row-metric .org-row-label {
  font-size: 8px;
  letter-spacing: 0;
}

.lead-row-analytics .lead-row-metric strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  font-size: 13px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-row-analytics .lead-row-metric--division {
  border-color: var(--division-colour);
  background: var(--division-colour);
  background: linear-gradient(135deg, color-mix(in srgb, var(--division-colour) 92%, #fff), color-mix(in srgb, var(--division-colour) 68%, #fff));
}

.lead-row-analytics .lead-row-metric--division .org-row-label,
.lead-row-analytics .lead-row-metric--division strong {
  color: #071018;
}

.account-data-analytics .account-row-metric--gate {
  border-color: color-mix(in srgb, var(--gate-colour) 48%, var(--line));
  border-left: 4px solid var(--gate-colour);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gate-colour) 13%, #fff), #fff 78%);
}

.account-data-analytics .account-row-metric--gate-red {
  --gate-colour: var(--danger);
}

.account-data-analytics .account-row-metric--gate-amber {
  --gate-colour: var(--warn);
}

.account-data-analytics .account-row-metric--gate-green {
  --gate-colour: var(--good);
}

.account-data-analytics .account-row-metric--gate .org-row-label,
.account-data-analytics .account-row-metric--gate strong {
  color: #071018;
}

.account-data-analytics .account-row-metric--gate small {
  color: color-mix(in srgb, #071018 72%, var(--gate-colour));
}

.account-data-row {
  display: grid;
  grid-template-columns: 16px minmax(220px, 0.9fr) minmax(440px, 1.35fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.account-data-row--actions {
  grid-template-columns: 16px minmax(220px, 0.75fr) minmax(420px, 1.15fr) auto;
}

button.account-data-row {
  cursor: pointer;
}

.account-data-row:hover,
.account-data-row:focus-visible,
.account-data-row.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  box-shadow: 0 12px 24px rgba(10, 48, 67, 0.08);
  outline: 0;
}

.account-data-copy {
  min-width: 0;
}

.account-data-copy strong {
  flex: 0 1 auto;
  max-width: 58%;
  font-size: 13px;
}

.account-data-copy span {
  flex: 1 1 140px;
  color: var(--muted);
  font-size: 11px;
}

.account-data-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  min-width: max-content;
}

.account-data-analytics {
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 4px;
}

.account-data-analytics .account-row-metric {
  min-height: 32px;
  padding: 4px 7px;
  border-radius: 6px;
}

.account-data-analytics .account-row-metric .org-row-label {
  font-size: 8px;
  letter-spacing: 0;
}

.account-data-analytics .account-row-metric strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  font-size: 12px;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-data-analytics .account-row-metric small {
  overflow: hidden;
  min-width: 0;
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-data-analytics .account-row-metric--viewed.is-viewed {
  border-color: color-mix(in srgb, var(--traffic-green) 42%, var(--line));
  background: color-mix(in srgb, var(--traffic-green) 10%, #fff);
}

.account-data-analytics .account-row-metric--viewed.is-viewed strong {
  color: var(--traffic-green);
}

.division-order-list {
  max-height: 382px;
  overflow-y: auto;
  padding-right: 4px;
}

.division-order-list .account-data-row--actions {
  grid-template-columns: 16px minmax(180px, 0.95fr) minmax(360px, 1.3fr) auto;
}

.opportunity-insight-main {
  grid-template-columns: 16px minmax(0, 1.35fr) minmax(272px, 0.72fr);
}

.opportunity-row-analytics {
  grid-template-columns: 104px 58px 96px;
}

.quote-filter-stack {
  margin-top: 2px;
}

.quote-insight-main {
  grid-template-columns: 16px minmax(0, 1.28fr) minmax(296px, 0.82fr);
}

.quote-row-analytics {
  grid-template-columns: 98px 58px 108px;
}

.quote-queue-list {
  min-height: 500px;
  max-height: 500px;
}

.quote-review-panel {
  min-height: 500px;
}

.quote-quick-open-action {
  min-width: 0;
}

.quote-quick-lines {
  display: grid;
  gap: 8px;
}

.quote-quick-lines span:not(.panel-label) {
  display: grid;
  grid-template-columns: minmax(72px, 0.55fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.quote-quick-lines span strong,
.quote-quick-lines span em,
.quote-quick-lines span b {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-quick-lines span strong,
.quote-quick-lines span b {
  color: var(--ink);
  font-style: normal;
  font-weight: 950;
}

.quote-quick-lines span em {
  font-style: normal;
}

.lead-open-action {
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.sales-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sales-detail-grid div,
.sales-note-panel,
.sales-linked-quotes {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.sales-detail-grid__division {
  border-color: color-mix(in srgb, var(--division-colour) 62%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--division-colour) 30%, #fff), color-mix(in srgb, var(--division-colour) 12%, #fff)) !important;
}

.sales-detail-grid__division span,
.sales-detail-grid__division strong {
  color: #071018;
}

.sales-detail-grid span,
.sales-detail-grid small,
.sales-linked-quotes .panel-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.sales-detail-grid small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-detail-grid strong,
.sales-linked-quotes span:not(.panel-label) {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-review-panel .form-actions .primary-button,
.sales-review-panel .form-actions .ghost-button {
  font-size: 13px;
  font-weight: 850;
}

.sales-note-panel p {
  margin-top: 6px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.sales-linked-quotes {
  display: grid;
  gap: 6px;
}

.lead-file {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: none;
}

.lead-file-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.opportunity-file-header {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 210px) auto;
  min-height: 92px;
  padding: 16px;
}

.order-file-header {
  border-left-color: var(--division-colour, var(--accent));
}

.lead-file-title {
  min-width: 0;
}

.lead-file-heading-row {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-content: start;
}

.lead-file-status {
  flex: 0 0 auto;
}

.lead-file-status .badge {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 750;
}

.lead-file-status .brand-hex-badge {
  min-height: 28px;
}

.opportunity-reference-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-file-title h2 {
  min-width: 0;
  margin-top: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
  text-transform: uppercase;
}

.opportunity-file-header .lead-file-title h2 {
  overflow: hidden;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-file-title p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.lead-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.opportunity-file-header .lead-file-actions {
  flex-wrap: nowrap;
}

.opportunity-file-header .lead-file-actions .ghost-button,
.opportunity-file-header .lead-file-actions .primary-button {
  min-height: 48px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.opportunity-close-control {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--soft-blue) 54%, #fff);
}

.opportunity-close-control .metric-icon {
  width: 30px;
  height: 30px;
  background: #ffffff;
  color: var(--accent-2);
}

.opportunity-close-control label,
.opportunity-close-control div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.opportunity-close-control label > span,
.opportunity-close-control div > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.opportunity-close-control strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-close-control input[type="date"] {
  min-height: 30px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 800;
}

.opportunity-close-control .mini-action {
  min-height: 30px;
}

.lead-status-path {
  display: flex;
  gap: 0;
  align-items: center;
  overflow-x: auto;
  padding: 2px 0 6px;
  overscroll-behavior-x: contain;
}

.lead-status-step {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 78px;
  min-width: 190px;
  margin-left: -16px;
  padding: 9px 22px 9px 26px;
  border: 1px solid #ffffff;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex: 1 1 0;
  font: inherit;
  text-align: left;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
  box-shadow: none;
  isolation: isolate;
  transition:
    background 160ms ease,
    color 160ms ease;
  z-index: 1;
}

.lead-status-step:hover,
.lead-status-step:focus-visible,
.lead-status-step:active {
  transform: none;
}

.lead-status-step.is-first {
  margin-left: 0;
  padding-left: 12px;
  border-radius: var(--radius) 0 0 var(--radius);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

.lead-status-step.is-last {
  padding-right: 12px;
  border-radius: 0 var(--radius) var(--radius) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
}

.lead-status-step span {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.lead-status-step strong,
.lead-status-step small {
  grid-column: 2;
  display: block;
  min-width: 0;
}

.lead-status-step strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.05;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lead-status-step small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-status-step.is-active {
  background: var(--accent);
  color: #050505;
  z-index: 4;
}

.lead-status-step.is-active span {
  background: color-mix(in srgb, #ffffff 72%, var(--accent));
  color: #050505;
}

.lead-status-step.is-active small,
.lead-status-step.is-active strong {
  color: #050505;
}

.lead-status-step.is-complete {
  background: #4fcf86;
  color: #ffffff;
  z-index: 3;
}

.lead-status-step.is-complete span {
  background: color-mix(in srgb, #ffffff 20%, var(--good));
  color: #ffffff;
}

.lead-status-step.is-complete small,
.lead-status-step.is-complete strong {
  color: #ffffff;
}

.lead-status-step.is-complete span svg {
  width: 17px;
  height: 17px;
  stroke-width: 3;
}

.lead-status-step.is-negative {
  background: var(--danger);
  color: #ffffff;
  z-index: 4;
}

.lead-status-step.is-negative span {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.lead-status-step.is-negative small,
.lead-status-step.is-negative strong {
  color: #ffffff;
}

.lead-status-step:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.opportunity-status-path {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding-bottom: 0;
}

.opportunity-status-path .lead-status-step {
  grid-template-columns: clamp(20px, 1.7vw, 26px) minmax(0, 1fr);
  gap: clamp(4px, 0.55vw, 7px);
  min-width: 0;
  min-height: clamp(62px, 5.4vw, 74px);
  padding: 8px clamp(14px, 1.45vw, 22px) 8px clamp(20px, 1.7vw, 26px);
}

.opportunity-status-path .lead-status-step.is-first {
  padding-left: 10px;
}

.opportunity-status-path .lead-status-step.is-last {
  padding-right: 10px;
}

.opportunity-status-path .lead-status-step span {
  width: clamp(20px, 1.7vw, 26px);
  height: clamp(20px, 1.7vw, 26px);
  font-size: clamp(9px, 0.72vw, 11px);
}

.opportunity-status-path .lead-status-step strong {
  font-size: clamp(9px, 0.78vw, 12px);
  line-height: 1.05;
}

.opportunity-status-path .lead-status-step small {
  margin-top: 3px;
  font-size: clamp(8px, 0.68vw, 10px);
}

.order-status-step {
  cursor: default;
}

.order-file .order-status-path {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding-bottom: 0;
}

.order-file .order-status-path .order-status-step {
  grid-template-columns: clamp(18px, 1.35vw, 26px) minmax(0, 1fr);
  gap: clamp(3px, 0.42vw, 7px);
  min-width: 0;
  min-height: clamp(54px, 4.7vw, 74px);
  margin-left: clamp(-14px, -0.82vw, -9px);
  padding: 7px clamp(10px, 1vw, 18px) 7px clamp(17px, 1.28vw, 24px);
}

.order-file .order-status-path .order-status-step.is-first {
  margin-left: 0;
  padding-left: 10px;
}

.order-file .order-status-path .order-status-step.is-last {
  padding-right: 9px;
}

.order-file .order-status-path .order-status-step span {
  width: clamp(18px, 1.35vw, 26px);
  height: clamp(18px, 1.35vw, 26px);
  font-size: clamp(8px, 0.62vw, 11px);
}

.order-file .order-status-path .order-status-step strong {
  font-size: clamp(8px, 0.74vw, 12px);
  line-height: 1.05;
}

.order-file .order-status-path .order-status-step small {
  margin-top: 3px;
  font-size: clamp(7px, 0.58vw, 10px);
}

.quote-status-path {
  margin: 6px 0 10px;
}

.quote-status-step {
  min-width: 158px;
}

.order-planning-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.order-planning-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.order-planning-form input,
.order-planning-form select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.order-planning-form__wide {
  grid-column: span 2;
}

.order-planning-form__full {
  grid-column: 1 / -1;
}

.order-planning-form .w3w-field {
  grid-column: span 2;
}

.order-planning-panel {
  border-top: 5px solid var(--accent);
}

.order-planning-eyebrow,
.handover-commercial-eyebrow {
  color: var(--accent-2);
}

.order-planning-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.order-planning-resource-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, #fff), #fff 68%);
}

.order-planning-resource-card--assets {
  border-color: color-mix(in srgb, var(--good) 26%, var(--line));
  border-left-color: var(--good);
  background: linear-gradient(135deg, color-mix(in srgb, var(--good) 8%, #fff), #fff 68%);
}

.order-planning-resource-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.order-planning-resource-title .metric-icon {
  width: 42px;
  height: 42px;
}

.order-planning-resource-card--assets .metric-icon {
  background: color-mix(in srgb, var(--good) 14%, #fff);
  color: var(--good);
}

.order-planning-resource-title div {
  min-width: 0;
}

.order-planning-resource-title span:not(.metric-icon) {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.order-planning-resource-title strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-status-step.is-complete:disabled {
  opacity: 1;
}

.lead-file-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lead-file-metrics .create-summary-tile {
  min-width: 0;
}

.lead-file-metrics .create-summary-tile > div {
  min-width: 0;
}

.lead-file-metrics .create-summary-tile strong,
.lead-file-metrics .create-summary-tile small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-file-metrics .create-summary-tile strong {
  white-space: nowrap;
}

.lead-file-metrics .create-summary-tile small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lead-file-metrics--lead {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.opportunity-file .lead-file-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quote-file .lead-file-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.order-file .lead-file-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.order-file .lead-file-metrics .create-summary-tile {
  min-height: 96px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}

.order-file .lead-file-metrics .create-summary-tile strong {
  font-size: 14px;
}

.order-file .lead-file-metrics .create-summary-tile small {
  font-size: 11px;
}

.account-contact-edit-grid__wide {
  grid-column: 1 / -1;
}

.contact-address-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.contact-address-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.contact-address-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.address-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(53, 184, 230, 0.35);
  border-radius: 8px;
  background: rgba(53, 184, 230, 0.08);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.address-copy-button svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

.address-copy-button:hover {
  border-color: var(--accent);
  background: rgba(53, 184, 230, 0.14);
}

.address-copy-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contact-address-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.sales-handover-panel {
  border-top: 5px solid var(--accent);
}

.sales-handover-panel--compact {
  gap: 12px;
}

.sales-handover-panel--compact .split-title {
  margin-bottom: 0;
}

.sales-handover-panel--expanded-after-acceptance {
  border-top-color: var(--good);
}

.sales-handover-panel--compact .handover-summary-grid {
  margin-bottom: 0;
}

.handover-title-actions {
  flex: 0 0 auto;
}

.handover-top-save {
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
}

.handover-toggle-button {
  min-height: 38px;
  padding-inline: 12px;
  gap: 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.handover-toggle-button svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.8;
}

.handover-toggle-button--collapse {
  width: 42px;
  padding-inline: 0;
}

.handover-toggle-button--collapse svg {
  transform: rotate(-90deg);
}

.order-handover-gate-note {
  border-top: 5px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 5%, #fff);
}

.handover-column-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.handover-column {
  display: grid;
  grid-template-rows: auto;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.handover-column .handover-section {
  height: auto;
}

.handover-summary-card {
  --handover-card-colour: var(--accent);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--handover-card-colour) 28%, var(--line));
  border-left: 5px solid var(--handover-card-colour);
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--handover-card-colour) 10%, #ffffff), #ffffff 66%);
}

.handover-summary-card--good {
  --handover-card-colour: var(--good);
}

.handover-summary-card--warning {
  --handover-card-colour: var(--warn);
}

.handover-summary-card--danger {
  --handover-card-colour: var(--danger);
}

.handover-summary-card .metric-icon {
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--handover-card-colour) 16%, #ffffff);
  color: var(--handover-card-colour);
}

.handover-summary-card div {
  min-width: 0;
}

.handover-summary-card span:not(.metric-icon) {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.handover-summary-card strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.08;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.handover-summary-card small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.handover-column .handover-form-grid--section {
  grid-template-columns: minmax(0, 1fr);
}

.handover-column .handover-form-grid__wide {
  grid-column: 1;
}

.handover-column .handover-po-upload-row {
  grid-template-columns: minmax(0, 1fr);
}

.handover-column .handover-po-open {
  min-height: 48px;
}

.handover-section--po {
  border-top-color: var(--danger);
}

.handover-section--date {
  border-top-color: var(--good);
}

.handover-section--notes {
  border-top-color: var(--accent);
}

.handover-section--rams {
  border-top-color: var(--good);
}

.handover-section--rams textarea {
  min-height: 128px;
}

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

.handover-summary-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.handover-summary-grid span,
.handover-form label,
.handover-actions label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.handover-summary-grid strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handover-summary-grid small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handover-form {
  display: grid;
  gap: 14px;
}

.handover-section-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.35fr);
  gap: 12px;
}

.handover-section {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.handover-section--notes {
  align-self: stretch;
}

.handover-section--notes textarea {
  min-height: 52px;
  height: 52px;
}

.handover-section--waste {
  grid-column: 1 / -1;
}

.handover-section--waste .handover-form-grid--section {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.handover-column .handover-section--waste {
  grid-column: auto;
  border-top-color: var(--accent);
}

.handover-section--waste .handover-section-title .metric-icon {
  background: var(--soft-blue);
  color: var(--accent-2);
}

.handover-section--waste .handover-section-title span:not(.metric-icon) {
  color: var(--accent-2);
}

.handover-column .handover-section--waste .handover-form-grid--section,
.handover-column .waste-disposal-create-panel,
.handover-column .waste-disposal-picker-row {
  grid-template-columns: minmax(0, 1fr);
}

.handover-column .waste-decision-step {
  grid-template-columns: 36px minmax(0, 1fr);
}

.waste-decision-tree {
  display: grid;
  gap: 12px;
}

.waste-decision-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.waste-decision-step[hidden],
.waste-decision-step.is-hidden {
  display: none !important;
}

.waste-decision-step.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.waste-decision-step--locked {
  border-color: color-mix(in srgb, var(--good) 42%, var(--line));
  background: color-mix(in srgb, var(--good) 8%, #fff);
}

.waste-decision-step--resolved {
  border-color: color-mix(in srgb, var(--good) 46%, var(--line));
  background: color-mix(in srgb, var(--good) 7%, #fff);
}

.waste-decision-step > div,
.waste-decision-step label {
  min-width: 0;
}

.waste-decision-step label {
  margin: 0;
}

.waste-decision-step strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.waste-decision-step small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.waste-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.waste-decision-step--resolved .waste-step-number,
.waste-decision-step--locked .waste-step-number {
  background: color-mix(in srgb, var(--good) 16%, #fff);
}

.waste-decision-step--route > div {
  display: grid;
  gap: 10px;
}

.waste-decision-step .handover-form-grid--section {
  margin-top: 4px;
}

.waste-route-readonly {
  display: grid;
  align-content: center;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.waste-route-readonly > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.waste-route-readonly strong {
  margin-top: 6px;
  font-size: 16px;
}

.waste-route-readonly small {
  margin-top: 5px;
}

.waste-disposal-picker {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.waste-disposal-picker > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.waste-disposal-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.waste-disposal-picker-row input[type="text"].is-unmatched {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, #fff);
}

.waste-disposal-picker small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.waste-disposal-create-panel {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.waste-disposal-create-panel.is-hidden {
  display: none;
}

.waste-disposal-create-panel .primary-button {
  align-self: end;
}

.customer-portal-shell {
  display: grid;
  gap: 20px;
}

.customer-portal-hero {
  margin-bottom: 0;
}

.customer-portal-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 8px;
  background: var(--accent);
}

.customer-portal-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.customer-portal-tabs button.is-active {
  background: #fff;
  color: var(--ink);
}

.customer-portal-tabs strong {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.customer-portal-tabs button.is-active strong {
  background: rgba(57, 181, 231, 0.18);
  color: var(--accent);
}

.customer-portal-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 18px;
}

.customer-portal-card--wide {
  grid-column: 1 / -1;
}

.customer-portal-summary-grid,
.customer-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.customer-portal-list,
.customer-portal-scroll-list {
  display: grid;
  gap: 10px;
}

.customer-portal-scroll-list {
  max-height: 620px;
  overflow: auto;
  padding-right: 8px;
}

.customer-report-grid article {
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.customer-report-grid span,
.customer-report-grid small {
  display: block;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.customer-report-grid strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 30px;
  font-weight: 950;
}

.customer-report-bars {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.customer-report-bar-row {
  display: grid;
  grid-template-columns: 180px minmax(120px, 1fr) 120px 90px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.customer-report-bar-row span,
.customer-report-bar-row em {
  color: var(--muted);
  font-weight: 900;
  font-style: normal;
}

.customer-report-bar-row div {
  height: 18px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}

.customer-report-bar-row i {
  display: block;
  width: var(--bar-width);
  height: 100%;
  border-radius: inherit;
  background: var(--bar-colour);
}

.handover-section--checks {
  background: #ffffff;
}

.handover-section-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.handover-section-title .metric-icon {
  width: 42px;
  height: 42px;
}

.handover-section-title span:not(.metric-icon) {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.handover-section-title h3 {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.handover-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.handover-form-grid--section {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.handover-form label,
.handover-actions label,
.handover-action-control label {
  display: grid;
  gap: 6px;
}

.handover-form input,
.handover-form select,
.handover-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.handover-form textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.35;
}

.handover-form-grid__wide {
  grid-column: span 2;
}

.handover-po-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.handover-po-upload {
  min-height: 72px;
  padding: 10px 12px;
}

.handover-po-open {
  align-self: stretch;
  min-height: 72px;
  padding-inline: 16px;
}

.handover-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.handover-inline-checks {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.handover-inline-checks > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.handover-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 7px 8px;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.handover-inline-checks .handover-check {
  min-height: 72px;
  padding: 9px;
  background: #ffffff;
}

.handover-check.is-complete {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.handover-check input {
  display: grid;
  place-items: center;
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  border: 2px solid color-mix(in srgb, var(--muted) 54%, var(--line));
  border-radius: 4px;
  background: #ffffff;
  accent-color: var(--accent);
}

.handover-check input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.handover-check input:checked::before {
  content: "";
  width: 8px;
  height: 4px;
  border: solid #ffffff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}

.handover-check input:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.handover-check span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.handover-check small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.handover-inline-checks .handover-check small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.handover-check.is-auto {
  opacity: 0.92;
}

.handover-check.is-auto.is-complete {
  opacity: 1;
}

.handover-check.is-auto.is-complete input:disabled {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent);
}

.handover-action-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) minmax(240px, 340px);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--warning);
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, #ffffff), #ffffff 64%);
  box-shadow: var(--shadow-soft);
}

.handover-action-card.is-ready {
  border-left-color: var(--good);
  background: linear-gradient(135deg, color-mix(in srgb, var(--good) 12%, #ffffff), #ffffff 64%);
}

.handover-action-graphic {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: conic-gradient(var(--accent) var(--handover-progress, 0%), color-mix(in srgb, var(--line) 80%, #ffffff) 0);
}

.handover-action-card.is-ready .handover-action-graphic {
  background: conic-gradient(var(--good) var(--handover-progress, 0%), color-mix(in srgb, var(--line) 80%, #ffffff) 0);
}

.handover-action-graphic::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: inherit;
  background: #ffffff;
}

.handover-action-graphic span,
.handover-action-graphic strong,
.handover-action-graphic small {
  position: relative;
  z-index: 1;
}

.handover-action-graphic span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 20px;
  color: var(--accent-2);
}

.handover-action-card.is-ready .handover-action-graphic span {
  color: var(--good);
}

.handover-action-graphic svg {
  width: 20px;
  height: 20px;
}

.handover-action-graphic strong {
  margin-top: -4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.handover-action-graphic small {
  margin-top: -6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.handover-action-copy {
  min-width: 0;
}

.handover-action-copy > span,
.handover-action-control label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.handover-action-copy h3 {
  margin: 4px 0 4px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
}

.handover-action-copy p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.handover-action-copy small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.handover-action-control {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.handover-action-control .primary-button {
  min-height: 44px;
  justify-content: center;
}

.handover-actions {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.handover-actions p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.lead-website-summary-tile,
.lead-website-summary-tile:hover,
.lead-website-summary-tile:focus-visible {
  color: var(--ink);
  text-decoration: none;
}

.lead-website-summary-tile {
  cursor: pointer;
}

.lead-website-summary-tile strong,
.lead-website-summary-tile small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-website-summary-tile:hover,
.lead-website-summary-tile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  box-shadow: 0 18px 48px rgba(53, 184, 230, 0.16);
}

.opportunity-glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.opportunity-glance-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.opportunity-glance-card .split-title {
  align-items: center;
}

.opportunity-glance-card h2 {
  margin-top: 3px;
  font-size: 15px;
}

.opportunity-glance-list {
  display: grid;
  gap: 8px;
}

.opportunity-glance-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.opportunity-glance-row--static {
  grid-template-columns: 12px minmax(0, 1fr);
}

.opportunity-contact-glance-row {
  align-items: start;
  min-height: 92px;
}

.opportunity-contact-glance-copy {
  min-width: 0;
}

.opportunity-contact-glance-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.opportunity-contact-glance-metric {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.opportunity-contact-glance-metric small,
.opportunity-contact-glance-metric strong,
.opportunity-contact-glance-metric em {
  display: block;
  min-width: 0;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-contact-glance-metric small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.opportunity-contact-glance-metric strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.opportunity-contact-glance-metric em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.opportunity-glance-row strong,
.opportunity-glance-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-glance-row strong {
  font-size: 13px;
  line-height: 1.15;
}

.opportunity-glance-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.opportunity-glance-row:hover,
.opportunity-glance-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.opportunity-glance-row--static:hover,
.opportunity-glance-row--static:focus-visible {
  border-color: var(--line);
  background: var(--surface-2);
}

.opportunity-glance-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.lead-file-tabs {
  margin-top: 0;
}

.lead-activity-shell,
.lead-details-layout,
.lead-insights-grid {
  display: grid;
  gap: 14px;
}

.lead-details-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  align-items: start;
}

.lead-activity-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lead-call-form,
.lead-edit-form {
  display: grid;
  gap: 14px;
}

.lead-call-form {
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lead-call-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lead-call-grid__wide {
  grid-column: 1 / -1;
}

.email-document-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.calendar-event-options {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(170px, 0.85fr));
  gap: 12px;
  align-items: stretch;
}

.calendar-event-attendees,
.calendar-event-option {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.calendar-event-attendees input {
  background: var(--surface);
}

.calendar-event-option {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  cursor: pointer;
}

.calendar-event-option input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.calendar-event-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calendar-event-option strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.calendar-event-option small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.date-time-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.date-time-field__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.date-time-field__control {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.date-time-field__control:hover,
.date-time-field:focus-within .date-time-field__control {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.date-time-field__control .metric-icon {
  width: 42px;
  height: 42px;
}

.date-time-field__inputs {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(92px, 0.55fr);
  gap: 8px;
  min-width: 0;
}

.date-time-field__inputs input,
.date-time-field__inputs select {
  min-height: 40px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.date-time-field__inputs input {
  cursor: pointer;
}

.date-time-field__inputs select {
  cursor: pointer;
}

.date-time-field__inputs input:focus,
.date-time-field__inputs select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.email-document-links,
.email-attachment-field {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.email-document-links span,
.email-attachment-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.email-attachment-field input[type="file"] {
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.email-attachment-field input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 12px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-radius: 6px;
  background: var(--accent);
  color: #050505;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.email-attachment-field input[type="file"]::file-selector-button:hover {
  background: color-mix(in srgb, var(--accent) 82%, #ffffff);
}

.lead-activity-detail__documents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.lead-activity-detail__documents > div {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.lead-activity-detail__documents small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.lead-activity-detail__documents a,
.lead-activity-detail__documents span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.lead-activity-detail__calendar {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.lead-activity-detail__calendar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-activity-detail__calendar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
}

.lead-activity-detail__calendar a:hover {
  border-color: var(--accent);
  color: color-mix(in srgb, var(--accent) 78%, #050505);
}

.quote-context-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quote-context-strip span,
.quote-context-strip label {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 750;
}

.quote-context-strip strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.quote-context-tile--division {
  border-color: color-mix(in srgb, var(--division-colour) 64%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--division-colour) 18%, #fff), var(--surface-2) 82%);
}

.quote-context-strip select {
  width: 100%;
  min-height: 26px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  outline: none;
}

.quote-email-form {
  margin-top: 12px;
}

.quote-email-status,
.quote-email-preview {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quote-email-preview {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--ink);
}

.quote-email-pdf-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff);
}

.quote-email-pdf-option input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--accent);
}

.quote-email-pdf-option span {
  display: grid;
  gap: 2px;
}

.quote-email-pdf-option strong {
  color: var(--ink);
  font-size: 13px;
}

.quote-email-pdf-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quote-response-panel {
  border-left: 5px solid var(--accent);
}

.quote-handover-panel {
  border-left: 5px solid var(--good);
}

.quote-cost-panel {
  border-left: 5px solid var(--accent);
}

.quote-cost-panel form,
.quote-cost-panel [data-quote-cost-build-embedded] {
  display: grid;
  gap: 12px;
}

.quote-cost-panel.is-hidden {
  display: none;
}

.quote-cost-panel--details {
  padding: 0;
  overflow: hidden;
}

.quote-cost-panel--details[open] {
  padding-bottom: 18px;
}

.quote-cost-panel--details form,
.quote-cost-panel--details [data-quote-cost-build-embedded] {
  padding: 0 18px;
}

.quote-cost-summary-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 18px;
  cursor: pointer;
  list-style: none;
}

.quote-cost-summary-toggle::-webkit-details-marker {
  display: none;
}

.quote-cost-summary-toggle > span:not(.metric-icon):not(.quote-cost-toggle-cue) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quote-cost-summary-toggle strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.quote-cost-summary-toggle small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-cost-toggle-cue {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #ffffff);
  border-radius: calc(var(--radius) - 2px);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(53, 184, 230, 0.2);
}

.quote-cost-toggle-cue svg {
  width: 19px;
  height: 19px;
  transition: transform 0.16s ease;
}

.quote-cost-panel--details[open] .quote-cost-toggle-cue svg {
  transform: rotate(90deg);
}

.quote-cost-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quote-cost-summary article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.quote-cost-summary article.is-warning {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, #fff);
}

.quote-cost-summary span,
.quote-cost-summary small,
.quote-cost-toolbar label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.quote-cost-summary strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.quote-cost-summary small {
  display: block;
  margin-top: 4px;
}

.quote-cost-toolbar {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.quote-cost-toolbar label {
  display: grid;
  gap: 6px;
}

.quote-cost-toolbar input,
.quote-cost-table input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.quote-cost-toolbar input {
  padding: 8px 10px;
}

.quote-cost-toolbar input[type="number"],
.quote-cost-table input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.quote-cost-toolbar input[type="number"]::-webkit-outer-spin-button,
.quote-cost-toolbar input[type="number"]::-webkit-inner-spin-button,
.quote-cost-table input[type="number"]::-webkit-outer-spin-button,
.quote-cost-table input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.cost-build-picker {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.cost-build-start-panel {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.cost-build-start-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.cost-build-start-panel select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.cost-build-recommendations {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 94px;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.cost-build-recommendation-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.cost-build-recommendation-note.is-clear {
  color: var(--good);
}

.cost-build-recommendation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cost-build-recommendation-item {
  display: grid;
  gap: 2px;
  min-width: 126px;
  max-width: 180px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 42%, var(--line));
  border-left: 4px solid var(--section-accent, var(--accent));
  border-radius: calc(var(--radius) - 2px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent, var(--accent)) 8%, #fff), #fff 78%);
  color: var(--ink);
  cursor: grab;
  font: inherit;
  text-align: left;
}

.cost-build-recommendation-item strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-build-recommendation-item small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cost-build-rams-panel {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, #fff), #fff);
}

.cost-build-rams-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.cost-build-rams-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cost-build-rams-grid article {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: #ffffff;
}

.cost-build-rams-grid strong,
.cost-build-rams-trigger-list strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cost-build-rams-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.cost-build-rams-trigger-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cost-build-rams-trigger-list span {
  min-width: 130px;
  max-width: 230px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--accent) 4%, #fff);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
}

.cost-build-picker-title,
.cost-build-model-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.cost-build-model-title-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cost-build-picker-title strong,
.cost-build-model-title strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cost-build-model-title [data-cost-build-model-count] {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-build-model-title .ghost-button {
  flex: 0 0 auto;
}

.cost-build-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 218px;
  gap: 8px;
  width: 100%;
  overflow: visible;
}

.cost-build-category {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--line)) 30%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--section-accent, var(--accent)) 10%, #fff) 0, #fff 70px);
  box-shadow: inset 0 4px 0 var(--section-accent, var(--accent));
}

.cost-build-category-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 38px;
  padding: 8px 9px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  list-style: none;
  text-transform: uppercase;
}

.cost-build-category-heading span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-build-category-heading strong {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-accent, var(--accent)) 14%, #fff);
  color: var(--section-accent, var(--muted));
  font-size: 10px;
}

.cost-build-section-search {
  display: grid;
  gap: 3px;
  padding: 0 6px 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.cost-build-section-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cost-build-section-search input {
  width: 100%;
  min-height: 26px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 24%, var(--line));
  border-radius: calc(var(--radius) - 3px);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
}

.cost-build-section-search input:focus {
  border-color: var(--section-accent, var(--accent));
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--section-accent, var(--accent)) 14%, transparent);
}

.cost-build-library-items {
  display: grid;
  gap: 5px;
  min-height: 0;
  overflow: auto;
  padding: 6px;
  border-top: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 24%, var(--line));
}

.cost-build-library-item.is-filtered-out {
  display: none;
}

.cost-build-section-empty {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.cost-build-section-empty.is-hidden {
  display: none;
}

.cost-build-library-item {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--line)) 22%, var(--line));
  border-left: 4px solid var(--section-accent, var(--line));
  border-radius: calc(var(--radius) - 2px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent, var(--accent)) 7%, #fff), #fff 78%);
  color: var(--ink);
  cursor: grab;
  font: inherit;
  text-align: left;
}

.cost-build-library-item.is-selected {
  padding-right: 46px;
  border-color: color-mix(in srgb, var(--good) 55%, var(--section-accent, var(--line)));
  border-left-color: var(--good);
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 16%, #fff), color-mix(in srgb, var(--section-accent, var(--accent)) 8%, #fff) 82%);
}

.cost-build-library-item.is-selected::after {
  content: "ADDED";
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 3px 5px;
  border-radius: 999px;
  background: var(--good);
  color: #ffffff;
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
}

.cost-build-library-item:active,
.cost-build-library-item.is-dragging {
  cursor: grabbing;
}

.cost-build-library-item:hover,
.cost-build-library-item:focus-visible {
  border-color: var(--section-accent, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--section-accent, var(--accent)) 16%, transparent);
  outline: none;
}

.cost-build-library-item strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-build-library-item small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.quote-cost-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-cost-table-wrap.is-drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.quote-cost-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: #ffffff;
}

.quote-cost-table th,
.quote-cost-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.quote-cost-table th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-cost-table td {
  min-width: 82px;
}

.quote-cost-table tbody tr {
  --section-accent: #64748b;
}

.quote-cost-table tbody td:first-child {
  box-shadow: inset 4px 0 0 var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 6%, #fff);
}

.quote-cost-table td:nth-child(1),
.quote-cost-table td:nth-child(2) {
  min-width: 132px;
}

.quote-cost-table td:nth-child(2) {
  min-width: 190px;
}

.quote-cost-table td:nth-child(3) {
  width: 76px;
  min-width: 76px;
}

.quote-cost-table td:nth-child(4) {
  width: 84px;
  min-width: 84px;
}

.quote-cost-table td:nth-child(8) {
  min-width: 112px;
}

.quote-cost-table td:nth-child(9) {
  width: 44px;
  min-width: 44px;
}

.quote-cost-table input {
  min-height: 34px;
  padding: 6px 8px;
  border-color: transparent;
  background: var(--surface-2);
}

.quote-cost-table input[name="unit"] {
  text-transform: uppercase;
}

.quote-cost-table .cost-build-editable-cell {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.quote-cost-table .cost-build-editable-cell input {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.quote-cost-table .cost-build-editable-cell input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.quote-cost-table .cost-build-qty-cell input {
  padding-right: 6px;
  padding-left: 6px;
}

.quote-cost-table strong,
.quote-cost-table small {
  display: block;
}

.quote-cost-table small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-cost-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.quote-cost-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cost-builder-workspace {
  display: grid;
  gap: 16px;
}

.cost-builder-hero {
  display: grid;
  gap: 14px;
}

.cost-builder-division-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.division-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent);
}

.cost-builder-flow-grid,
.cost-builder-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.cost-builder-flow-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.cost-builder-flow-grid strong {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

.cost-builder-flow-grid span,
.cost-builder-section-card > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.cost-builder-section-card > strong {
  color: var(--section-accent, var(--ink));
}

.cost-builder-flow-grid small,
.cost-builder-item-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.cost-builder-library {
  display: grid;
  gap: 12px;
}

.cost-builder-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.cost-builder-library--admin .cost-builder-library-grid {
  grid-template-columns: 1fr;
}

.cost-builder-section-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--line)) 28%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--section-accent, var(--accent)) 8%, #fff), #fff 62px);
  box-shadow: inset 0 4px 0 var(--section-accent, var(--accent));
}

.cost-builder-item-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.cost-builder-item-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 18%, var(--line));
}

.cost-builder-item-list b {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-builder-admin-component-row {
  display: grid;
  grid-template-columns: minmax(210px, 2fr) minmax(150px, 1fr) minmax(70px, .55fr) minmax(84px, .65fr) minmax(84px, .65fr) minmax(96px, .7fr) minmax(96px, .7fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 18%, var(--line));
}

.cost-builder-admin-component-row--new {
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--section-accent, var(--accent)) 40%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--section-accent, var(--accent)) 5%, #ffffff);
}

.cost-builder-admin-component-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.cost-builder-admin-component-row input,
.cost-builder-admin-component-row select,
.cost-builder-admin-component-row strong {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.cost-builder-admin-component-row input,
.cost-builder-admin-component-row select {
  padding: 7px 9px;
}

.cost-builder-admin-component-row strong {
  display: flex;
  align-items: center;
  padding: 7px 9px;
  background: var(--surface-2);
  color: var(--accent-strong);
}

.cost-builder-admin-component-row .primary-button {
  min-height: 36px;
  white-space: nowrap;
}

.cost-builder-job-category-admin {
  display: grid;
  gap: 12px;
}

.cost-builder-job-category-list {
  display: grid;
  gap: 10px;
}

.cost-builder-admin-category-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .72fr) minmax(220px, 1.25fr) minmax(220px, 1.25fr) minmax(100px, .55fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.cost-builder-admin-category-row--new {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 5%, #ffffff);
}

.cost-builder-admin-category-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.cost-builder-admin-category-row input,
.cost-builder-admin-category-row select,
.cost-builder-admin-category-row textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.cost-builder-admin-category-row input,
.cost-builder-admin-category-row select,
.cost-builder-admin-category-row textarea {
  padding: 7px 9px;
}

.cost-builder-admin-category-row textarea {
  min-height: 78px;
  resize: vertical;
  line-height: 1.3;
  text-transform: none;
}

.cost-builder-admin-category-row .primary-button {
  min-height: 36px;
  white-space: nowrap;
}

.admin-cost-builder-panel {
  display: grid;
  gap: 14px;
}

.cost-builder-admin-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cost-builder-admin-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.cost-builder-admin-form input,
.cost-builder-admin-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.quote-handover-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.quote-response-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.quote-response-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.quote-response-grid span,
.quote-response-events span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.quote-response-grid strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.quote-response-grid small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-response-events {
  display: grid;
  gap: 8px;
}

.quote-response-events article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.quote-form-field-row {
  display: grid;
  grid-template-columns: minmax(260px, 520px) minmax(150px, 220px);
  gap: 12px;
  align-items: end;
}

.quote-form-terms {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.quote-description-field {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.quote-description-field textarea {
  min-height: 86px;
  resize: vertical;
}

.quote-specific-terms-editor {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.quote-specific-term-list {
  display: grid;
  gap: 8px;
}

.quote-specific-term-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.quote-specific-term-row > span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-weight: 950;
}

.quote-specific-term-row textarea {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  resize: vertical;
}

.quote-specific-term-row textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.quote-line-editor {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.quote-line-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quote-line-toolbar > div {
  display: grid;
  gap: 3px;
}

.quote-line-toolbar strong {
  font-size: 13px;
  font-weight: 950;
}

.quote-line-toolbar small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.quote-line-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.quote-line-toolbar-actions .ghost-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.quote-line-toolbar-actions .quote-cost-action-button {
  border-color: color-mix(in srgb, var(--good) 52%, var(--line));
  background: color-mix(in srgb, var(--good) 12%, #fff);
  color: color-mix(in srgb, var(--good) 70%, #07110b);
}

.quote-line-toolbar-actions .quote-cost-action-button:hover {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 18%, #fff);
}

.quote-line-grid {
  display: grid;
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.quote-line-head,
.quote-line-row {
  display: grid;
  grid-template-columns: 30px minmax(120px, 1.05fr) minmax(220px, 2fr) minmax(64px, 0.45fr) minmax(78px, 0.55fr) minmax(76px, 0.5fr) minmax(74px, 0.5fr) minmax(92px, 0.6fr) 34px;
  min-width: 0;
}

.quote-line-head {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-line-head span,
.quote-line-row > label,
.quote-line-row > strong,
.quote-line-drag,
.quote-line-delete {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.quote-line-head span {
  padding: 10px 8px;
}

.quote-line-row > label {
  display: grid;
  gap: 3px;
  padding: 6px 5px;
}

.quote-line-row label span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-line-row input,
.quote-line-row textarea {
  min-height: 36px;
  width: 100%;
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid transparent;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.quote-line-row input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.quote-line-row input[type="number"]::-webkit-outer-spin-button,
.quote-line-row input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.quote-line-row textarea {
  resize: vertical;
}

.quote-line-row input:focus,
.quote-line-row textarea:focus {
  border-color: var(--accent);
}

.quote-line-row input[readonly] {
  background: var(--surface-2);
  color: var(--muted);
}

.quote-line-drag,
.quote-line-row > strong,
.quote-line-delete {
  display: grid;
  place-items: center;
}

.quote-line-drag svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.quote-line-row > strong {
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.quote-line-delete {
  width: auto;
  min-height: 100%;
  border-radius: 0;
}

.quote-add-row {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.quote-add-row svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  .quote-line-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-line-toolbar-actions {
    justify-content: flex-start;
  }
}

.quote-total-panel {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(100px, auto);
  justify-content: end;
  gap: 10px 28px;
  padding: 10px 0 0;
}

.quote-total-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.quote-total-panel strong {
  font-size: 22px;
  text-align: right;
}

.lead-action-tile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow);
}

.lead-action-tile strong {
  display: block;
}

.lead-action-tile strong {
  font-size: 14px;
  line-height: 1.15;
  text-transform: uppercase;
}

.opportunity-file .lead-action-tile {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 94px;
  padding: 12px;
}

.opportunity-file .lead-action-tile small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.audit-trail {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.audit-trail summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.audit-trail summary::-webkit-details-marker {
  display: none;
}

.audit-trail__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.audit-trail__title svg,
.audit-trail__chevron svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  stroke-width: 2.5;
}

.audit-trail__count {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.audit-trail__chevron {
  display: inline-flex;
  transition: transform 0.16s ease;
}

.audit-trail[open] .audit-trail__chevron {
  transform: rotate(90deg);
}

.audit-trail__body {
  display: grid;
  border-top: 1px solid var(--line);
}

.audit-row {
  display: grid;
  grid-template-columns: minmax(132px, 0.22fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

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

.audit-row time,
.audit-row__id,
.audit-row__copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.audit-row__copy {
  min-width: 0;
}

.audit-row__copy strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.audit-entity-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 3px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.audit-entity-link:hover {
  background: var(--accent);
  color: #fff;
}

.audit-row__copy small {
  display: block;
  margin-top: 3px;
}

.lead-action-tile:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.lead-file-activity-list {
  padding: 4px 0;
}

.lead-activity-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) max-content max-content 82px;
  gap: 12px;
  align-items: center;
  justify-content: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.lead-activity-item .metric-icon {
  justify-self: start;
  width: 34px;
  height: 34px;
}

.lead-activity-item .activity-copy {
  justify-self: stretch;
  text-align: left;
}

.lead-activity-item > .muted {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.lead-activity-item.is-complete {
  border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 4%, #fff);
}

.lead-activity-item.is-complete .metric-icon {
  background: #dcfce7;
  color: var(--good);
}

.lead-activity-item.is-pending {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 5%, #fff);
}

.lead-activity-item.is-pending .metric-icon {
  background: var(--soft-warn);
  color: var(--warn);
}

.lead-activity-item.is-overdue,
.lead-activity-item.is-action-needed {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, #fff);
}

.lead-activity-item.is-overdue .metric-icon,
.lead-activity-item.is-action-needed .metric-icon {
  background: var(--soft-danger);
  color: var(--danger);
}

.activity-item.lead-activity-item:last-child,
.activity-item.compact-activity-item:last-child {
  border-bottom: 1px solid var(--line);
}

.lead-activity-open {
  justify-self: end;
  min-height: 34px;
  padding-inline: 13px;
  text-transform: uppercase;
}

.lead-activity-detail {
  display: grid;
  grid-column: 2 / -1;
  gap: 12px;
  margin-top: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.lead-activity-detail__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.lead-activity-detail__meta span,
.lead-activity-detail__body {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.lead-activity-detail small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-activity-detail strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-activity-detail__body p {
  margin-top: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.organisation-activity-shell {
  gap: 12px;
}

.organisation-activity-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.organisation-activity-stat {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 90px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.organisation-activity-stat--good {
  border-top-color: var(--good);
}

.organisation-activity-stat--warn {
  border-top-color: var(--warn);
}

.organisation-activity-stat--office {
  border-top-color: var(--blue);
}

.organisation-activity-stat .metric-icon {
  width: 38px;
  height: 38px;
}

.organisation-activity-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.organisation-activity-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.organisation-activity-stat small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organisation-activity-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.organisation-activity-panel .lead-file-activity-list {
  padding: 0;
}

.lead-file-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lead-details-layout--lead .lead-file-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lead-file-detail-grid div {
  padding: 10px 11px;
}

.lead-file-detail-grid span {
  font-size: 10px;
  font-weight: 750;
}

.lead-file-detail-grid strong {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.28;
}

.lead-file-detail-grid a {
  color: var(--accent-dark);
  text-decoration: none;
}

.lead-insights-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.lead-research-card {
  grid-column: 1 / -1;
}

.lead-insight-card {
  align-content: start;
  min-height: 250px;
}

.lead-insight-card h2 {
  margin-top: 8px;
  font-size: 18px;
}

.lead-insight-card p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.lead-insight-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lead-research-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.lead-research-link:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.lead-research-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.lead-research-link strong,
.lead-research-link small {
  display: block;
  min-width: 0;
}

.lead-research-link strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-research-link small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.lead-research-link b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-dark);
}

.lead-research-link b svg {
  width: 15px;
  height: 15px;
}

.lead-research-link--google .lead-research-mark {
  background: linear-gradient(135deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
  color: #ffffff;
}

.lead-research-link--news .lead-research-mark {
  background: #ffffff;
  border: 2px solid #4285f4;
  color: #4285f4;
}

.lead-research-link--linkedin .lead-research-mark {
  background: #0a66c2;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0;
}

.lead-hook-list {
  margin-top: 2px;
}

.lead-hook-list span {
  min-height: 58px;
}

.pipeline-column {
  min-height: 390px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.pipeline-column h3,
.salesperson-row,
.salesperson-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pipeline-column h3 {
  min-height: 30px;
  margin-bottom: 10px;
}

.pipeline-column h3 span {
  color: var(--muted);
  font-size: 12px;
}

.opportunity-card {
  min-height: 210px;
}

.salesperson-row {
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.salesperson-row .row-copy {
  min-width: 0;
  flex: 1;
}

.salesperson-value {
  flex-direction: column;
  align-items: flex-end;
}

.salesperson-value span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.empty-state,
.loading-state,
.error-state {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
}

.error-state {
  place-items: start;
  color: var(--danger);
}

.error-state strong,
.error-state span {
  display: block;
}

.detail-row {
  align-items: center;
}

.record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 92px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.organisation-record-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(460px, 1.25fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 8px 14px;
  border-left: 5px solid var(--accent);
}

.organisation-record-header .record-heading,
.organisation-record-header .record-heading > div {
  min-width: 0;
}

.organisation-record-header .record-heading h2 {
  overflow: hidden;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organisation-record-header .panel-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  line-height: 1;
}

.organisation-record-header .record-actions {
  flex-wrap: nowrap;
  gap: 10px;
}

.organisation-header-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(104px, 1fr));
  gap: 8px;
  min-width: 0;
}

.organisation-header-live-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.organisation-header-live-tile:hover,
.organisation-header-live-tile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  box-shadow: 0 10px 22px rgba(10, 48, 67, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.organisation-header-live-tile span,
.organisation-header-live-tile small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organisation-header-live-tile span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.organisation-header-live-tile strong {
  justify-self: end;
  font-size: 17px;
  line-height: 1;
}

.organisation-header-live-tile small {
  grid-column: 1 / -1;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

@media (max-width: 1180px) {
  .organisation-record-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .organisation-header-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organisation-record-header .record-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .organisation-header-live-grid {
    grid-template-columns: 1fr;
  }
}

.organisation-header-edit-button {
  min-height: 48px;
  padding: 0 16px;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.organisation-header-edit-button svg {
  width: 18px;
  height: 18px;
}

.organisation-header-add {
  position: relative;
}

.organisation-header-plus {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  cursor: pointer;
}

.organisation-header-plus::-webkit-details-marker {
  display: none;
}

.organisation-header-plus::marker {
  content: "";
}

.organisation-header-plus svg {
  width: 21px;
  height: 21px;
}

.organisation-header-add-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  width: min(280px, calc(100vw - 48px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.organisation-header-add:not([open]) .organisation-header-add-menu {
  display: none;
}

.organisation-header-add-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.organisation-header-add-menu button:hover,
.organisation-header-add-menu button:focus-visible {
  border-color: rgba(55, 181, 226, 0.35);
  background: var(--soft-blue);
  outline: none;
}

.record-heading,
.record-actions,
.activity-composer,
.activity-filter-row,
.timeline-heading,
.related-card header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.record-heading h2 {
  margin-top: 2px;
  font-size: 25px;
}

.record-icon,
.related-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--soft-blue);
  color: var(--accent-2);
}

.record-icon svg,
.related-icon svg {
  width: 22px;
  height: 22px;
}

.record-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.account-headline-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.account-headline-row {
  display: grid;
  gap: 10px;
}

.account-headline-row--compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.account-headline-row--identity .account-headline {
  min-height: 68px;
  padding: 8px 12px;
}

.account-headline-row--identity .metric-icon {
  width: 30px;
  height: 30px;
}

.account-headline-row--finance {
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}

.account-headline-row--credit {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.account-headline-row--credit .account-headline,
.account-headline-row--live .account-headline {
  min-height: 68px;
  padding: 8px 12px;
}

.account-headline-row--credit .metric-icon,
.account-headline-row--live .metric-icon {
  width: 30px;
  height: 30px;
}

.account-headline-row--credit .account-headline > div,
.account-headline-row--live .account-headline > div {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-width: 0;
}

.account-headline-row--credit .account-headline > div > span:first-child,
.account-headline-row--live .account-headline > div > span:first-child {
  grid-column: 1 / -1;
}

.account-headline-row--credit .account-headline strong,
.account-headline-row--live .account-headline strong {
  grid-column: 1;
  margin-top: 2px;
  font-size: 16px;
  white-space: nowrap;
}

.account-headline-row--credit .account-headline small,
.account-headline-row--live .account-headline small {
  grid-column: 2;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 7px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.account-headline-row--credit .account-headline small.is-overdue {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, #fff);
  color: var(--danger);
}

.account-headline-row--credit .account-headline small.is-clear {
  border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, #fff);
  color: color-mix(in srgb, var(--good) 78%, #0b1f2a);
}

.account-headline--credit > div {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
}

.account-headline--credit .account-headline-action {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  margin-top: 2px;
  white-space: nowrap;
}

.account-headline--credit .credit-limit-inline-form {
  grid-column: 1 / -1;
}

.account-headline-row--expenditure {
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}

.account-headline {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 96px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.account-headline--button {
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.account-headline--button:hover,
.account-headline--button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  box-shadow: 0 14px 28px rgba(10, 48, 67, 0.1);
  transform: translateY(-1px);
}

.account-headline .metric-icon {
  width: 34px;
  height: 34px;
}

.division-headline {
  border-color: color-mix(in srgb, var(--division-colour) 60%, var(--line));
  border-top: 5px solid var(--division-colour);
  background: linear-gradient(180deg, color-mix(in srgb, var(--division-colour) 16%, #fff), #fff 72%);
}

.division-headline .metric-icon {
  background: var(--division-colour);
  color: #050505;
}

.expenditure-headline {
  background: linear-gradient(180deg, color-mix(in srgb, var(--division-colour) 12%, #fff), #fff 76%);
}

.expenditure-headline--unassigned {
  border-color: var(--line);
}

.expenditure-headline--unassigned .metric-icon {
  background: var(--surface-2);
  color: var(--muted);
}

.division-headline-label {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.division-headline strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.division-headline-detail {
  display: grid;
  gap: 1px;
}

.account-headline .division-headline-detail span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.account-headline span,
.record-detail span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.account-headline strong {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.2;
}

.account-headline small {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.account-headline-action {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.account-headline-action:hover,
.account-headline-action:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
}

.credit-limit-inline-form {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}

.credit-limit-inline-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.credit-limit-inline-form label span {
  font-size: 10px;
}

.credit-limit-inline-form input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.credit-limit-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.credit-limit-inline-actions .primary-button,
.credit-limit-inline-actions .mini-action {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.account-tabs-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 58%, #fff);
  background: linear-gradient(135deg, var(--accent), #72bdef);
}

.account-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.account-tabs button svg {
  width: 16px;
  height: 16px;
}

.account-tab-label {
  white-space: nowrap;
}

.account-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.account-tabs button.is-active {
  border-color: #ffffff;
  background: #fff;
  color: var(--accent-2);
}

.account-tabs button.is-active .account-tab-count {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent-2);
}

.account-tab-content {
  padding: 14px;
}

.account-overview-grid,
.finance-tab-summary,
.account-hierarchy-tab {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
}

.finance-tab-summary + .service-list {
  margin-top: 10px;
}

.inline-filter-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, #fff);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.inline-filter-note + .service-list {
  margin-top: 10px;
}

.account-tab-content > .service-list.compact,
.account-tab-content > .finance-tab-summary + .service-list.compact,
.account-tab-content > .inline-filter-note + .service-list.compact {
  max-height: min(62vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.account-tab-content > .service-list.compact::-webkit-scrollbar,
.account-tab-content > .finance-tab-summary + .service-list.compact::-webkit-scrollbar,
.account-tab-content > .inline-filter-note + .service-list.compact::-webkit-scrollbar {
  width: 8px;
}

.account-tab-content > .service-list.compact::-webkit-scrollbar-thumb,
.account-tab-content > .finance-tab-summary + .service-list.compact::-webkit-scrollbar-thumb,
.account-tab-content > .inline-filter-note + .service-list.compact::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.invoice-row-button,
.quote-row-button {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  justify-content: stretch;
  row-gap: 4px;
  column-gap: 12px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.invoice-row-button:hover,
.invoice-row-button:focus-visible,
.quote-row-button:hover,
.quote-row-button:focus-visible {
  background: var(--soft-accent);
}

.invoice-row-button.is-selected,
.quote-row-button.is-selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.invoice-row-button .status-dot,
.quote-row-button .status-dot {
  grid-column: 1;
  grid-row: 1 / span 3;
  justify-self: start;
  margin-top: 4px;
}

.invoice-row-button .row-copy,
.quote-row-button .row-copy {
  grid-column: 2;
  justify-self: stretch;
  width: 100%;
  text-align: left;
}

.invoice-row-button .row-copy strong,
.invoice-row-button .row-copy span,
.quote-row-button .row-copy strong,
.quote-row-button .row-copy span {
  text-align: left;
}

.invoice-row-button > :not(.status-dot),
.quote-row-button > :not(.status-dot) {
  grid-column: 2;
}

.invoice-row-button > strong:not(.badge),
.quote-row-button > strong:not(.badge),
.invoice-row-button > .muted,
.quote-row-button > .muted,
.invoice-row-button > .badge,
.quote-row-button > .badge {
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}

.invoice-inline-panel {
  margin-top: -10px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.invoice-inline-panel .invoice-viewer {
  margin: 0;
}

.invoice-inline-panel .empty-state {
  margin-top: 10px;
}

.invoice-filter-tile {
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.invoice-filter-tile:hover,
.invoice-filter-tile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.invoice-filter-tile.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

.invoice-filter-tile small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-viewer {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.invoice-viewer--loading {
  color: var(--muted);
}

.invoice-viewer--loading strong,
.invoice-viewer--loading span {
  display: block;
}

.invoice-viewer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-viewer__top p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.invoice-viewer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-viewer__notice {
  padding: 9px 10px;
  border: 1px solid var(--soft-warn);
  border-radius: 8px;
  background: #fffbeb;
  color: var(--warn);
  font-size: 12px;
  font-weight: 800;
}

.invoice-paper {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.invoice-paper__header,
.invoice-meta-grid,
.invoice-lines__head,
.invoice-line,
.invoice-total-panel > div {
  display: grid;
  gap: 10px;
  align-items: start;
}

.invoice-paper__header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--accent);
}

.invoice-brand strong {
  display: block;
  font-size: 24px;
  letter-spacing: 0;
}

.invoice-brand span,
.invoice-number-block span,
.invoice-meta-grid span,
.invoice-total-panel span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-number-block {
  text-align: right;
}

.invoice-number-block strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.invoice-meta-grid {
  grid-template-columns: 1.4fr 1fr 0.8fr;
}

.invoice-meta-grid > div,
.invoice-total-panel {
  display: grid;
  gap: 5px;
}

.invoice-meta-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.invoice-lines {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.invoice-lines__head,
.invoice-line {
  grid-template-columns: minmax(220px, 1fr) 70px 90px 90px 100px;
}

.invoice-lines__head {
  padding: 9px 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-line {
  padding: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.invoice-line small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.quote-summary-total-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 16px;
  align-items: start;
}

.quote-summary-block {
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.quote-summary-label {
  display: block;
  padding: 9px 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.quote-summary-block div {
  padding: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.quote-description-block {
  margin: 0 0 14px;
}

.invoice-total-panel {
  justify-self: end;
  width: min(100%, 320px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.invoice-total-panel > div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.invoice-total-panel .is-due {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.record-detail {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  font: inherit;
}

.record-detail strong {
  display: block;
  min-width: 0;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.account-tab-list--contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.contact-tab-shell {
  display: grid;
  gap: 14px;
}

.account-contact-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

.account-contact-summary .record-detail {
  min-height: 76px;
  background: color-mix(in srgb, var(--accent) 4%, #fff);
}

.account-contact-summary .record-detail strong {
  font-size: 20px;
}

.account-contact-section {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.account-contact-section .split-title {
  margin-bottom: 12px;
}

.account-contact-create {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 8px;
  background: linear-gradient(180deg, #f4fbfe, #fff);
}

.account-contact-create--refined {
  padding: 14px;
  background: var(--surface);
}

.account-contact-create-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-contact-create-title > div {
  display: grid;
  gap: 2px;
}

.account-contact-create-title span:not(.metric-icon) {
  color: var(--muted);
  font-size: 12px;
}

.contact-create-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.contact-create-grid label {
  grid-column: span 2;
}

.contact-create-grid .checkbox-label {
  display: flex;
  align-items: center;
  align-self: end;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.account-contact-create-actions {
  display: flex;
  justify-content: flex-end;
}

.checkbox-label input {
  width: auto;
  min-height: 0;
  margin: 0;
}

.account-tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.compact-filter-row {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.compact-activity-list {
  display: grid;
  gap: 8px;
}

.compact-activity-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) max-content max-content;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.compact-activity-item.is-complete {
  border-left-color: var(--good);
}

.compact-activity-item.is-pending {
  border-left-color: var(--warn);
}

.compact-activity-item.is-overdue,
.compact-activity-item.is-action-needed {
  border-left-color: var(--danger);
}

.compact-activity-item > .muted {
  white-space: nowrap;
}

.account-linked-list {
  grid-column: span 3;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.division-rollup--wide {
  gap: 8px;
}

.file-drop--wide {
  min-height: 160px;
}

.account-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.8fr) minmax(280px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.account-panel,
.activity-panel,
.related-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.account-panel {
  overflow: hidden;
}

.account-panel details + details {
  border-top: 1px solid var(--line);
}

.account-panel summary {
  cursor: pointer;
  padding: 14px 18px;
  background: var(--surface-2);
  font-size: 18px;
  font-weight: 750;
}

.field-list {
  display: grid;
  padding: 10px 18px 18px;
}

.account-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 3px 10px;
  min-height: 66px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.account-field:last-child {
  border-bottom: 0;
}

.account-field span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.account-field strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.field-edit {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.field-edit svg {
  width: 15px;
  height: 15px;
}

.account-switcher {
  display: grid;
  gap: 8px;
  padding: 12px 14px 16px;
}

.account-switcher button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.account-switcher button.is-selected {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.account-switcher small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.activity-panel {
  min-height: 520px;
  padding: 22px;
}

.activity-composer {
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.insight-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
}

.toggle-pill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 58px;
  height: 32px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-2);
}

.toggle-pill span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
}

.activity-filter-row {
  justify-content: space-between;
  margin-bottom: 18px;
  color: var(--muted);
}

.timeline-section {
  display: grid;
  gap: 14px;
}

.timeline-heading {
  justify-content: space-between;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.timeline-empty {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 18px;
  border-radius: var(--radius);
  background: #fbfcfd;
  color: var(--muted);
  text-align: center;
}

.show-activities {
  justify-self: center;
  min-width: 190px;
}

.related-panel {
  display: grid;
  gap: 14px;
}

.related-card {
  overflow: hidden;
  box-shadow: none;
}

.related-card header {
  justify-content: space-between;
  min-height: 64px;
  padding: 14px 16px;
}

.related-card header h3 {
  flex: 1;
  font-size: 18px;
}

.related-card .icon-button {
  width: 34px;
  min-height: 34px;
}

.related-body {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
  color: var(--muted);
}

.related-body strong {
  color: var(--ink);
}

.related-body span {
  display: block;
  font-size: 12px;
}

.account-contact-row {
  --contact-role-colour: var(--accent);
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

.account-contact-row[draggable="true"] {
  cursor: grab;
}

.account-contact-row.is-dragging {
  opacity: 0.62;
  transform: scale(0.995);
}

.account-primary-contact-drop {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 46%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, #fff), #fff 76%);
}

.account-primary-contact-drop.is-drop-target {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.account-primary-contact-drop span:not(.metric-icon) {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.account-primary-contact-drop strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.08;
  text-transform: uppercase;
}

.account-primary-contact-drop small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.account-contact-row--commercial {
  --contact-role-colour: var(--good);
}

.account-contact-row--operations {
  --contact-role-colour: var(--accent);
}

.account-contact-row--finance {
  --contact-role-colour: var(--warn);
}

.account-contact-row.is-expanded {
  border-color: color-mix(in srgb, var(--contact-role-colour) 54%, var(--line));
  box-shadow: 0 16px 32px rgba(10, 48, 67, 0.08);
}

.account-contact-record-row {
  display: grid;
  grid-template-columns: 16px minmax(220px, 0.85fr) minmax(460px, 1.45fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 6px;
}

.account-contact-role-stripe {
  width: 8px;
  height: 36px;
  border-radius: 999px;
  background: var(--contact-role-colour);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--contact-role-colour) 68%, #050505);
}

.account-contact-record-copy {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.account-contact-record-copy .avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.account-contact-record-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-contact-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-contact-main strong,
.account-contact-main span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-contact-main strong {
  font-size: 15px;
  font-weight: 900;
}

.account-contact-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-contact-badges {
  display: flex;
  grid-column: 2;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.account-contact-badges .badge {
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-contact-record-name strong,
.account-contact-record-name small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-contact-record-name strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.account-contact-record-name small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.account-contact-record-analytics {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 4px;
  min-width: 0;
}

.account-contact-metric {
  min-height: 32px;
  padding: 4px 7px;
  border-radius: 6px;
}

.account-contact-metric--role {
  border-color: color-mix(in srgb, var(--contact-role-colour) 46%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--contact-role-colour) 16%, #fff), #fff);
}

.account-contact-record-analytics .org-row-label {
  font-size: 8px;
  letter-spacing: 0;
}

.account-contact-record-analytics strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-contact-record-analytics small {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-contact-toggle {
  min-width: 92px;
  justify-content: center;
}

.account-contact-expanded-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--contact-role-colour) 6%, #fff), #fff 42%);
}

.account-contact-expanded-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.account-contact-edit-grid--expanded {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.account-contact-methods span {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-contact-methods span svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--accent-2);
}

.account-contact-methods span.is-muted {
  color: var(--muted);
}

.account-contact-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.account-contact-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.account-contact-row select,
.account-contact-row input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
}

.account-contact-row .contact-address-grid select,
.account-contact-row .contact-address-grid input {
  min-height: 34px;
}

.account-contact-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.file-drop {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 118px;
  border: 1px dashed #a9b8c3;
  border-radius: var(--radius);
}

.xero-capability-list,
.scope-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
}

.capability-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.scope-list span {
  display: block;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.xero-preview-panel {
  margin: 6px 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.xero-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.preview-note {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 12px;
}

.xero-preview-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.xero-preview-section h3 {
  margin: 0;
  font-size: 14px;
}

.xero-preview-list {
  display: grid;
  gap: 8px;
}

.xero-preview-row {
  min-height: 62px;
}

.xero-preview-row > strong {
  justify-self: end;
  white-space: nowrap;
}

.org-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.org-filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) minmax(190px, 240px) minmax(180px, 220px) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.org-filter-panel h2 {
  margin-top: 3px;
  font-size: 18px;
}

.org-filter-panel p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.org-filter-panel label {
  display: grid;
  gap: 6px;
}

.org-filter-panel label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.org-filter-actions {
  display: flex;
  justify-content: flex-end;
}

.org-box {
  min-height: 320px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.org-box:first-child {
  grid-row: span 2;
}

.org-box--wide {
  grid-column: 1 / -1;
  grid-row: span 1;
}

.org-box--scroll {
  min-height: 0;
}

.org-box header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-bottom: 14px;
}

.org-box header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.org-box-list {
  display: grid;
  gap: 8px;
}

.org-box--scroll .org-box-list {
  max-height: min(680px, calc(100vh - 380px));
  min-height: 360px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-color: var(--accent) var(--surface-2);
}

.org-box-list button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.org-box--wide .org-box-list button.org-insight-row {
  grid-template-columns: 40px minmax(240px, 0.9fr) minmax(500px, 1.4fr);
  min-height: 92px;
  align-items: stretch;
}

.org-box-list button:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.org-box-value {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.org-row-analytics {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(92px, 0.7fr));
  gap: 8px;
  align-items: stretch;
}

.contact-summary-grid {
  margin-bottom: 16px;
}

.contact-summary-grid .metric-card {
  min-height: 122px;
}

.contact-filter-tile {
  border: 1px solid var(--line);
}

.contact-filter-tile small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.contact-filter-tile.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.contact-dashboard-list {
  margin-top: 0;
}

.contact-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.contact-dashboard-list header {
  flex-wrap: wrap;
}

.contact-insight-row .row-copy span {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-row-analytics.contact-row-analytics {
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

.contact-record-header .record-actions .mini-action {
  text-transform: uppercase;
}

.contact-file-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
}

.contact-file-grid > .split-panel {
  grid-column: 1;
  min-width: 0;
}

.contact-sales-context {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.contact-opportunity-headline:disabled {
  cursor: default;
  opacity: 0.68;
  transform: none;
}

.contact-opportunity-headline:disabled:hover {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.contact-detail-graphic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-detail-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 74px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, #fff), #fff 72%);
}

.contact-detail-card--wide {
  grid-column: 1 / -1;
}

.contact-detail-card--ready {
  border-color: color-mix(in srgb, var(--good) 26%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--good) 7%, #fff), #fff 72%);
}

.contact-detail-card--missing {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 7%, #fff), #fff 72%);
}

.contact-detail-card .metric-icon {
  width: 36px;
  height: 36px;
}

.contact-detail-card span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-detail-card strong,
.contact-detail-card a {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.18;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-detail-card a:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.contact-detail-card small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-opportunity-list {
  display: grid;
  gap: 8px;
}

.contact-opportunity-option {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(86px, 0.42fr);
  gap: 9px;
  align-items: center;
  min-height: 64px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.contact-opportunity-option:hover,
.contact-opportunity-option.is-active {
  border-color: color-mix(in srgb, var(--division-colour) 72%, var(--accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--division-colour) 14%, #fff), #fff 76%);
}

.contact-opportunity-option .lead-division-swatch {
  width: 7px;
  height: 42px;
}

.contact-opportunity-option .row-copy strong,
.contact-opportunity-option .row-copy span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-opportunity-value {
  min-height: 46px;
  padding: 7px;
}

.contact-opportunity-quick-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--division-colour) 58%, var(--line));
  border-top: 5px solid var(--division-colour);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--division-colour) 11%, #fff), #fff 58%);
}

.contact-opportunity-quick-card__top {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.contact-opportunity-quick-card h3 {
  overflow: hidden;
  margin-top: 2px;
  font-size: 17px;
  line-height: 1.08;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-opportunity-quick-card p {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-opportunity-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.contact-opportunity-quick-grid div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.contact-opportunity-quick-grid span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-opportunity-quick-grid strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-opportunity-open-button {
  justify-self: stretch;
}

.org-row-metric {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 72%, #fff);
}

.org-row-metric strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.05;
  white-space: nowrap;
}

.org-row-metric small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-row-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.org-spend-bar {
  display: flex;
  overflow: hidden;
  height: 9px;
  min-width: 0;
  border-radius: 999px;
  background: var(--line);
}

.org-spend-bar.is-empty {
  align-items: center;
  height: auto;
  min-height: 18px;
  padding: 0 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.org-spend-segment {
  flex: 0 1 var(--share);
  min-width: 5px;
  background: var(--division-colour);
}

.org-spend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-width: 0;
}

.org-spend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.org-spend-legend i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--division-colour);
}

.division-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.division-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 800;
}

.division-rollup {
  display: grid;
  gap: 8px;
}

.division-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.division-row--colour {
  border-left: 6px solid var(--division-colour);
  background: linear-gradient(90deg, color-mix(in srgb, var(--division-colour) 12%, #fff), var(--surface-2) 42%);
}

.division-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.hierarchy-tree,
.hierarchy-children {
  display: grid;
  gap: 8px;
}

.hierarchy-children {
  margin-top: 8px;
}

.hierarchy-node button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(160px, auto);
  gap: 10px;
  align-items: center;
  width: calc(100% - (var(--depth) * 26px));
  min-height: 66px;
  margin-left: calc(var(--depth) * 26px);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.hierarchy-node button:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.record-path {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.related-link {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.donut {
  --pct: 72%;
  display: grid;
  place-items: center;
  width: 154px;
  height: 154px;
  margin: 18px auto;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--surface) 68%, transparent 69%),
    conic-gradient(var(--accent) var(--pct), #dce4ea 0);
  color: var(--ink);
  font-size: 26px;
  font-weight: 850;
}

.mini-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 8px;
  height: 140px;
  margin-top: 22px;
}

.mini-bars span {
  display: block;
  min-height: 16px;
  border-radius: 6px 6px 0 0;
  background: #2563eb;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.ticket-dialog {
  width: min(720px, calc(100vw - 24px));
  border: 0;
  padding: 0;
  background: transparent;
}

.dialog-card {
  padding: 18px;
}

.dialog-card header,
.dialog-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog-card footer {
  margin-top: 16px;
  justify-content: flex-end;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.form-grid__wide {
  grid-column: 1 / -1;
}

.order-search-field {
  position: relative;
}

.order-search-combo {
  position: relative;
  display: block;
}

.order-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 314px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.order-search-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.order-search-result:hover,
.order-search-result:focus-visible {
  border-color: var(--accent);
  background: var(--soft-accent);
}

.order-search-result strong,
.order-search-result small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-search-result small,
.order-search-empty {
  color: var(--muted);
}

.order-search-empty {
  padding: 14px;
  font-size: 13px;
  font-weight: 900;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  outline: 0;
}

input:invalid,
select:invalid,
textarea:invalid {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
}

input,
select {
  min-height: 42px;
  padding: 0 11px;
}

textarea {
  resize: vertical;
  min-height: 96px;
  padding: 10px 11px;
}

.dialog-card > label {
  margin-top: 12px;
}

.compact .view {
  padding: 18px;
}

.compact .metric-card {
  min-height: 112px;
}

.compact .table-row,
.compact .customer-list button,
.compact .service-row,
.compact .asset-row,
.compact .schedule-item {
  min-height: 52px;
}

.purchase-orders-dashboard {
  margin-bottom: 16px;
}

.purchase-order-summary-grid .metric-card {
  min-height: 118px;
}

.purchase-order-summary-grid .metric-card strong {
  margin-top: 12px;
}

.purchase-order-dashboard-panel,
.order-purchase-order-panel,
.purchase-order-flow-panel {
  display: grid;
  gap: 14px;
}

.purchase-order-dashboard-list {
  max-height: min(58vh, 680px);
  overflow-y: auto;
  padding-right: 4px;
}

.purchase-order-link-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.purchase-order-link-summary--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.purchase-order-link-summary article {
  display: grid;
  gap: 5px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.purchase-order-link-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.purchase-order-link-summary strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.purchase-order-manual-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(53, 184, 230, 0.42);
  border-radius: var(--radius);
  background: rgba(53, 184, 230, 0.07);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.purchase-order-manual-hint svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke: var(--accent-strong);
}

.purchase-order-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.purchase-order-flow-node {
  position: relative;
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 122px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.purchase-order-flow-node.has-next::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
  background: var(--surface);
}

.purchase-order-flow-node strong,
.purchase-order-flow-node small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchase-order-flow-node strong {
  font-size: 15px;
  line-height: 1.15;
}

.purchase-order-flow-node small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.purchase-order-file-grid {
  align-items: stretch;
}

.purchase-order-scope {
  display: grid;
  gap: 8px;
  min-height: 110px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.purchase-order-scope strong {
  font-size: 16px;
  line-height: 1.25;
}

.purchase-order-scope span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .metric-card {
    grid-column: span 6;
  }

  .owner-command-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .owner-command-metrics {
    justify-self: stretch;
    width: 100%;
  }

  .owner-hero-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .owner-dashboard-grid,
  .owner-sales-grid {
    grid-template-columns: 1fr;
  }

  .owner-order-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-status-grid {
    grid-template-columns: 1fr;
  }

  .account-data-row {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .account-data-analytics {
    grid-column: 2;
    grid-template-columns: repeat(4, minmax(74px, 1fr));
  }

  .purchase-order-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .purchase-order-flow-node.has-next::after {
    display: none;
  }

  .purchase-order-link-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-data-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .account-contact-record-row {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .account-contact-record-analytics,
  .account-contact-toggle {
    grid-column: 2;
  }

  .account-contact-record-analytics {
    grid-template-columns: repeat(4, minmax(74px, 1fr));
  }

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

  .account-overview-grid,
  .finance-tab-summary,
  .account-hierarchy-tab {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .wide-card,
  .side-card {
    grid-column: span 12;
  }

  .layout-grid,
  .account-workspace,
  .admin-layout,
  .admin-page-grid--users,
  .admin-rams-grid,
  .waste-compliance-grid,
  .sales-layout,
  .sales-review-layout,
  .schedule-layout,
  .report-grid {
    grid-template-columns: 1fr;
  }

  .admin-hero-metrics {
    justify-self: end;
    width: min(620px, 52vw);
  }

  .loading-point-row {
    grid-template-columns: 42px repeat(2, minmax(0, 1fr)) minmax(108px, auto);
  }

  .loading-point-row__wide,
  .loading-point-row__notes {
    grid-column: span 2;
  }

  .disposal-point-row {
    grid-template-columns: 42px repeat(2, minmax(0, 1fr)) auto;
  }

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

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

  .sales-overview-control-panel {
    grid-template-columns: 1fr;
  }

  .sales-overview-control-metrics.lead-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sales-overview-header-metrics.lead-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: end;
    width: min(860px, 100%);
  }

  .lead-command-header {
    grid-template-columns: 1fr;
  }

  .lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
    grid-template-columns: max-content minmax(0, 1fr) 54px;
  }

  .orders-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header,
  .quote-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
    grid-template-columns: max-content minmax(0, 1fr) 54px;
  }

  .lead-command-centre--hopper.cost-builder-command-centre:not(.lead-create-header-tile) .lead-command-header {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .field-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .rams-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .rams-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: end;
    width: min(860px, 100%);
  }

  .rams-workspace-grid,
  .rams-section-pair {
    grid-template-columns: 1fr;
  }

  .lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-heading h2 {
    max-width: none;
  }

  .lead-command-header .toolbar {
    justify-content: flex-start;
  }

  .lead-command-grid--header {
    width: 100%;
  }

  .orders-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: end;
    width: min(860px, 100%);
  }

  .quote-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: end;
    width: min(860px, 100%);
  }

  .dashboard-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: end;
    width: min(860px, 100%);
  }

  .quote-dashboard-filter-panel--simple {
    grid-template-columns: 1fr;
  }

  .quote-dashboard-filter-panel--simple .sales-access-actions,
  .quote-dashboard-filter-panel--simple .sales-filter-group {
    justify-content: flex-start;
  }

  .field-command-grid--header {
    grid-template-columns: repeat(3, minmax(84px, 1fr));
    justify-self: end;
    width: min(620px, 100%);
  }

  .lead-create-header-tile .lead-create-path__steps {
    justify-self: stretch;
    width: 100%;
  }

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

  .lead-command-grid.lead-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lead-command-grid.orders-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lead-command-grid.sales-overview-header-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lead-command-grid.quote-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lead-command-grid.field-command-grid--header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lead-command-grid.rams-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lead-command-grid.opportunity-command-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .lead-command-grid.quote-command-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

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

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

  .quote-value-status-row {
    grid-template-columns: minmax(86px, 0.34fr) minmax(0, 0.66fr);
  }

  .opportunity-stage-value-card {
    grid-template-columns: 34px minmax(88px, 0.22fr) minmax(0, 1.78fr);
    min-height: 72px;
    gap: 8px;
  }

  .opportunity-stage-value-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .opportunity-stage-value-pair {
    padding: 6px;
  }

  .opportunity-stage-value-pair-readout b {
    font-size: 12px;
  }

  .opportunity-stage-value-metric {
    padding: 6px;
  }

  .opportunity-stage-value-metric strong {
    font-size: 12px;
  }

  .opportunity-stage-division-chart {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .opportunity-stage-division-column {
    grid-template-rows: minmax(220px, 1fr) auto auto;
  }

  .opportunity-stage-division-stack {
    min-height: 220px;
  }

  .opportunity-command-summary-grid .lead-command-card {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 82px;
    padding: 8px;
  }

  .opportunity-command-summary-grid .metric-icon {
    width: 26px;
    height: 26px;
  }

  .lead-file-metrics--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lead-flow-grid {
    grid-template-columns: 1fr;
  }

  .lead-flow-grid.opportunity-flow-grid {
    grid-template-columns: 1fr;
  }

  .sales-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .sales-access-strip {
    flex-direction: column;
  }

  .sales-access-actions,
  .sales-owner-filter,
  .sales-filter-group {
    justify-content: flex-start;
  }

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

  .lead-create-intake-grid {
    grid-template-columns: 1fr;
  }

  .lead-create-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .create-record-layout {
    grid-template-columns: 1fr;
  }

  .create-side-panel {
    position: static;
  }

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

  .service-model-grid,
  .sales-division-grid,
  .service-stage-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .division-order-stats,
  .field-readiness-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-portal-shell,
  .field-portal-queue-grid {
    grid-template-columns: 1fr;
  }

  .field-schedule-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .field-job-list-scroll {
    max-height: 340px;
  }

  .field-pack-summary-grid,
  .field-quick-grid,
  .field-pack-action-strip,
  .field-pack-grid,
  .field-evidence-grid,
  .field-signoff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-readiness-check-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .order-planning-form,
  .order-planning-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .w3w-input-row {
    grid-template-columns: 1fr;
  }

  .quote-cost-summary,
  .quote-cost-toolbar,
  .handover-column-grid,
  .handover-summary-grid,
  .cost-build-rams-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .handover-section--waste .handover-form-grid--section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .waste-disposal-create-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .handover-section-grid,
  .handover-action-card {
    grid-template-columns: 1fr;
  }

  .handover-section--notes {
    grid-row: auto;
  }

  .handover-action-graphic {
    justify-self: start;
  }

  .handover-checklist {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .handover-actions {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  }

  .handover-actions .primary-button {
    grid-column: 1 / -1;
    justify-self: end;
  }

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

  .org-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .org-filter-panel {
    grid-template-columns: 1fr;
  }

  .org-box:first-child {
    grid-row: span 1;
  }

  .org-box--wide .org-box-list button.org-insight-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .org-row-analytics {
    grid-column: 2;
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(110px, 0.7fr));
  }

  .customer-detail {
    position: static;
  }

  .contact-file-grid > .split-panel,
  .contact-sales-context {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 860px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .settings-hero,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-hero .badge {
    justify-self: start;
  }

  .owner-followup-row.account-data-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .owner-followup-row .account-data-actions {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-followup-row .account-data-analytics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-team-conversion-dashboard {
    grid-template-columns: 1fr;
  }

  .lead-team-conversion-ring {
    min-height: 180px;
  }

  .lead-team-conversion-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-team-conversion-rate {
    justify-items: start;
  }

  .owner-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-hero-grid,
  .owner-day-grid,
  .owner-action-grid,
  .owner-po-grid,
  .owner-margin-strip,
  .owner-relationship-grid,
  .owner-top-accounts,
  .owner-fleet-layout,
  .owner-order-status-grid {
    grid-template-columns: 1fr;
  }

  .admin-page-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 10px 14px;
  }

  .admin-page-hero h2 {
    font-size: 24px;
  }

  .admin-hero-metrics,
  .admin-overview-grid {
    grid-template-columns: 1fr;
  }

  .admin-hero-metrics {
    justify-self: stretch;
    width: 100%;
  }

  .admin-activity-row,
  .admin-activity-main {
    grid-template-columns: 1fr;
  }

  .admin-activity-analytics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-activity-id {
    justify-self: start;
  }

  .cost-builder-admin-component-row,
  .cost-builder-admin-category-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-telematics-form {
    grid-template-columns: 1fr;
  }

  .admin-telematics-form .order-planning-form__wide {
    grid-column: 1;
  }

  .order-planning-form,
  .order-planning-resource-grid {
    grid-template-columns: 1fr;
  }

  .order-planning-form .w3w-field,
  .order-planning-form__wide {
    grid-column: 1;
  }

  .cost-builder-admin-component-row__item,
  .cost-builder-admin-component-row .primary-button,
  .cost-builder-admin-category-row .primary-button {
    grid-column: 1 / -1;
  }

  .loading-point-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .loading-point-row label,
  .loading-point-row__wide,
  .loading-point-row__notes,
  .loading-point-row__actions {
    grid-column: 2;
  }

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

  .admin-system-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .admin-system-card__stat {
    grid-column: 2;
    justify-self: start;
  }

  .owner-command-hero h1 {
    font-size: 23px;
  }

  .owner-mini-bar {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .owner-mini-bar i {
    grid-column: 1 / -1;
  }

  .owner-calendar-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .owner-calendar-row .badge {
    grid-column: 2;
    justify-self: start;
  }

  .owner-fleet-map {
    min-height: 240px;
  }

  .owner-fleet-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .owner-fleet-row__meta {
    grid-column: 2;
    justify-items: start;
    min-width: 0;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .record-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .record-actions {
    justify-content: flex-start;
  }

  .account-headline-row--compact,
  .account-headline-row--credit,
  .account-overview-grid,
  .finance-tab-summary,
  .account-hierarchy-tab {
    grid-template-columns: 1fr;
  }

  .invoice-viewer__top,
  .invoice-paper__header {
    align-items: flex-start;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .invoice-number-block {
    text-align: left;
  }

  .invoice-meta-grid {
    grid-template-columns: 1fr;
  }

  .quote-summary-total-row {
    grid-template-columns: 1fr;
  }

  .quote-summary-total-row .invoice-total-panel {
    justify-self: stretch;
  }

  .invoice-lines {
    overflow-x: auto;
  }

  .invoice-lines__head,
  .invoice-line {
    grid-template-columns: minmax(220px, 1fr) 70px 90px 90px 100px;
    min-width: 640px;
  }

  .contact-create-grid {
    grid-template-columns: 1fr;
  }

  .contact-create-grid label {
    grid-column: span 1;
  }

  .contact-address-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .address-copy-button {
    width: 100%;
  }

  .account-tab-list--contacts,
  .account-contact-summary,
  .account-contact-edit-grid,
  .contact-address-grid,
  .account-contact-methods {
    grid-template-columns: 1fr;
  }

  .field-pack-header,
  .field-job-list-row,
  .field-rams-list article,
  .field-evidence-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-job-list-stripe {
    width: 100%;
    height: 5px;
  }

  .field-pack-header-actions,
  .field-pack-action-strip {
    justify-content: stretch;
  }

  .field-pack-summary-grid,
  .field-pack-action-strip,
  .field-pack-grid,
  .field-signoff-grid {
    grid-template-columns: 1fr;
  }

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

  .field-action-form--note {
    grid-column: 1 / -1;
  }

  .field-pack-action-strip .primary-button,
  .field-pack-action-strip .ghost-button {
    min-height: 48px;
  }

  .order-readiness-summary-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .order-readiness-count {
    grid-column: 1 / -1;
    min-height: 64px;
    justify-items: center;
  }

  .field-operational-line,
  .field-loading-point article,
  .order-loading-map article,
  .field-location-block article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .field-operational-line b,
  .field-loading-point article .mini-action,
  .order-loading-map article .mini-action,
  .field-location-block article .mini-action {
    grid-column: 2;
    justify-self: start;
  }

  .field-location-block iframe {
    min-height: 220px;
  }

  .field-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px;
  }

  .field-command-grid--header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: end;
    width: min(390px, 64vw);
  }

  .field-command-grid--header .lead-command-card .panel-label {
    white-space: nowrap;
  }

  .rams-command-centre.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-header {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px;
  }

  .rams-command-grid--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: end;
    width: min(560px, 66vw);
  }

  .rams-workspace-grid,
  .rams-section-pair,
  .rams-form-grid,
  .rams-preview-grid {
    grid-template-columns: 1fr;
  }

  .rams-document-row {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .rams-document-row .badge,
  .rams-document-row .ghost-button,
  .rams-document-row .muted {
    grid-column: 2;
    justify-self: start;
  }

  .field-command-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .field-user-selector {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .field-user-selector select {
    width: 100%;
  }

  .field-schedule-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .field-schedule-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .field-schedule-month {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

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

  .account-contact-record-row {
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
  }

  .account-contact-record-analytics,
  .account-contact-toggle,
  .account-contact-expanded-info,
  .account-contact-edit-grid--expanded {
    grid-column: 2;
  }

  .account-contact-record-analytics,
  .account-contact-expanded-info,
  .account-contact-edit-grid--expanded {
    grid-template-columns: 1fr;
  }

  .account-contact-toggle {
    justify-self: start;
  }

  .account-contact-card-head {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .account-contact-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .account-linked-list {
    grid-column: span 1;
  }

  .account-tab-content > .service-list.compact,
  .account-tab-content > .finance-tab-summary + .service-list.compact,
  .account-tab-content > .inline-filter-note + .service-list.compact {
    max-height: 58vh;
  }

  .search-shell {
    width: min(100%, 520px);
  }

  .global-search-panel {
    right: auto;
    left: 0;
  }

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

  .division-workspace-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .division-hero-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .dashboard-hub {
    grid-template-columns: 1fr;
  }

  .service-model-grid,
  .sales-division-grid,
  .service-stage-panel,
  .division-order-stats,
	  .quote-cost-summary,
	  .quote-cost-toolbar,
	  .handover-column-grid,
	  .handover-summary-grid,
	  .handover-form-grid,
	  .handover-checklist,
	  .handover-actions,
	  .cost-build-rams-grid,
  .field-readiness-checks,
  .sales-graphic-grid,
  .lead-create-path,
  .lead-create-path__steps,
  .create-summary-grid,
  .lead-command-grid,
  .lead-file-header,
  .lead-status-path,
  .lead-file-metrics,
	  .lead-activity-item,
	  .lead-activity-detail__meta,
	  .organisation-activity-overview,
	  .opportunity-glance-grid,
  .lead-activity-actions,
  .email-document-row,
  .calendar-event-options,
  .lead-insight-actions,
  .lead-details-layout,
  .lead-insights-grid,
  .website-suggestion-panel,
  .lead-source-row,
  .lead-owner-row,
  .opportunity-value-row,
  .lead-create-intake-grid,
  .lead-create-grid,
  .lead-create-grid--compact,
  .lead-create-grid--single,
  .quote-form-field-row,
  .purchase-order-flow,
  .purchase-order-link-summary,
  .sales-detail-grid {
    grid-template-columns: 1fr;
  }

  .opportunity-contact-glance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-readiness-check-grid {
    grid-template-columns: 1fr;
  }

  .lead-command-grid.opportunity-command-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunity-closing-grid {
    grid-template-columns: 1fr;
  }

  .opportunity-command-summary-grid .lead-command-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .opportunity-command-summary-grid .metric-icon {
    display: none;
  }

  .lead-source-row strong,
  .lead-owner-row strong,
  .lead-owner-row small,
  .opportunity-value-row > strong,
  .opportunity-value-row > small {
    text-align: left;
  }

  .opportunity-future-pipeline__head {
    align-items: start;
    flex-direction: column;
  }

  .opportunity-future-pipeline__head span {
    text-align: left;
  }

  .handover-form-grid__wide {
    grid-column: span 1;
  }

  .handover-section--waste .handover-form-grid--section {
    grid-template-columns: 1fr;
  }

  .waste-disposal-picker-row,
  .waste-disposal-create-panel {
    grid-template-columns: 1fr;
  }

  .opportunity-future-pipeline-row {
    grid-template-columns: 1fr;
  }

  .opportunity-future-pipeline-bar-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(72px, auto);
  }

  .lead-owner-chart {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-owner-donut {
    width: clamp(150px, 68vw, 210px);
  }

  .lead-activity-detail {
    grid-column: 1 / -1;
  }

  .lead-status-path {
    align-items: stretch;
    flex-direction: row;
    overflow-x: auto;
  }

  .opportunity-status-path {
    overflow-x: hidden;
  }

  .opportunity-status-path .lead-status-step {
    gap: 3px;
    min-height: 58px;
    margin-left: -12px;
    padding: 7px 13px 7px 18px;
  }

  .opportunity-status-path .lead-status-step.is-first {
    padding-left: 8px;
  }

  .opportunity-status-path .lead-status-step.is-last {
    padding-right: 8px;
  }

  .opportunity-status-path .lead-status-step strong {
    font-size: 8px;
    line-height: 1.05;
  }

  .opportunity-status-path .lead-status-step small {
    font-size: 7px;
  }

  .lead-call-grid {
    grid-template-columns: 1fr;
  }

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

  .lead-insight-main {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .sales-review-layout > .sales-review-panel {
    position: static;
    max-height: none;
  }

  .opportunity-review-layout > .split-panel,
  .opportunity-review-layout > .sales-review-panel {
    height: var(--opportunity-review-height);
    max-height: var(--opportunity-review-height);
  }

  .opportunity-review-layout .opportunity-queue-list {
    height: 100%;
    max-height: 500px;
  }

  .lead-insight-copy {
    display: grid;
    gap: 2px;
  }

  .lead-row-analytics {
    display: none;
  }

  .lead-open-action {
    justify-self: end;
  }

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

  .sales-command-tile {
    min-height: 156px;
  }

  .sales-command-tile .metric-icon {
    display: none;
  }

  .sales-command-tile .metric-row,
  .sales-command-bars,
  .sales-command-bar-row {
    min-width: 0;
  }

  .sales-command-bar-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 4px;
  }

  .sales-command-bar-row span {
    font-size: 8px;
  }

  .sales-command-tile p {
    display: none;
  }

  .sales-month-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-bar-row {
    grid-template-columns: 1fr;
  }

  .sales-top-opportunity-main {
    grid-template-columns: 8px minmax(0, 1fr) minmax(82px, auto);
  }

  .sales-top-opportunity-pill:not(.sales-top-opportunity-pill--value) {
    display: none;
  }

  .sales-count-row {
    grid-template-columns: 86px minmax(0, 1fr) 34px;
  }

  .sales-review-layout,
  .sales-review-layout > *,
  .sales-review-panel,
  .sales-review-layout .split-panel {
    max-width: 100%;
    min-width: 0;
  }

  .sales-review-layout {
    width: 100%;
  }

  .sales-review-layout .split-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-drilldown > .split-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-drilldown > .split-title .toolbar {
    justify-content: flex-start;
    width: 100%;
  }

  .sales-bar-row > strong {
    text-align: left;
  }

  .sales-stage-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
  }

  .owner-dashboard-grid:not(.owner-dashboard-grid--lower) > .owner-dashboard-side {
    grid-template-rows: auto;
  }

  .owner-dashboard-grid:not(.owner-dashboard-grid--lower) .sales-stage-funnel-panel {
    height: auto;
  }

  .sales-stage-column {
    height: 150px;
  }

  .owner-dashboard-side .sales-stage-column {
    height: 150px;
  }

  .opportunity-stage-division-chart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .opportunity-stage-division-column {
    grid-template-rows: minmax(180px, 1fr) auto auto;
  }

  .opportunity-stage-division-stack {
    min-height: 180px;
  }

  .sales-process-grid {
    grid-template-columns: 1fr;
  }

  .m365-account-grid {
    grid-template-columns: 1fr;
  }

  .org-box-list button {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .org-box--wide .org-box-list button.org-insight-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .org-row-analytics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .org-row-analytics.contact-row-analytics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-dashboard-actions {
    margin-left: 0;
  }

  .contact-insight-row .row-copy span {
    white-space: normal;
  }

  .hierarchy-node button {
    grid-template-columns: 38px minmax(0, 1fr);
    width: calc(100% - (var(--depth) * 14px));
    margin-left: calc(var(--depth) * 14px);
  }

  .org-box-value {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .account-data-analytics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-evidence-grid {
    grid-template-columns: 1fr;
  }

  .date-time-field__control {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .date-time-field__control .metric-icon {
    width: 38px;
    height: 38px;
  }

  .date-time-field__inputs {
    grid-template-columns: 1fr;
  }

  .rams-command-grid--header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .rams-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .rams-risk-row,
  .rams-method-step {
    grid-template-columns: 1fr;
  }

  .opportunity-stage-value-metrics {
    grid-template-columns: 1fr;
  }

  .opportunity-stage-value-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .opportunity-stage-value-metrics {
    grid-column: 1 / -1;
  }

  .opportunity-stage-value-pair-readout {
    grid-template-columns: 1fr;
  }

  .opportunity-stage-value-metric {
    grid-template-areas:
      "label"
      "value"
      "bar";
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .opportunity-stage-division-chart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunity-stage-division-column {
    grid-template-rows: minmax(150px, 1fr) auto auto;
  }

  .opportunity-stage-division-stack {
    min-height: 150px;
  }

  .account-data-copy {
    display: grid;
    gap: 2px;
  }

  .account-data-copy strong,
  .account-data-copy span {
    max-width: 100%;
  }

  .topbar {
    position: relative;
    grid-template-columns: 1fr;
    height: auto;
    min-height: var(--topbar-height);
    padding: 0 14px 12px;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .login-card {
    width: min(460px, calc(100vw - 24px));
  }

  .login-card-header {
    padding: 12px 24px;
  }

  .login-card-brand {
    grid-template-columns: 96px 1px minmax(0, 72px);
    gap: 10px;
  }

  .login-card-logo {
    width: 96px;
  }

  .login-card-divider {
    height: 30px;
  }

  .login-card-wordmark {
    width: 72px;
  }

  .topbar-brand-lockup {
    grid-template-columns: 108px 1px auto;
    gap: 8px;
  }

  .brand-logo {
    width: 104px;
  }

  .insight-wordmark {
    width: 80px;
    max-width: none;
    margin-left: 6px;
  }

  .sidebar {
    position: fixed;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    right: 12px;
    bottom: 12px;
    top: auto;
    left: 12px;
    gap: 6px;
    height: 64px;
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.24);
  }

  .search-shell {
    width: min(100%, 280px);
  }

  .global-search-panel {
    position: fixed;
    top: 168px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 58vh;
  }

  .org-row-analytics {
    grid-template-columns: 1fr;
  }

  .contact-detail-graphic-grid,
  .contact-opportunity-quick-grid {
    grid-template-columns: 1fr;
  }

  .contact-opportunity-option {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .contact-opportunity-value {
    grid-column: 2;
  }

  .nav-button strong,
  .nav-button span:last-child,
  .nav-submenu,
  .sidebar-toggle-label,
  .sidebar-panel,
  .sidebar-credit {
    display: none;
  }

  .topbar-brand-lockup {
    grid-template-columns: 108px 1px auto;
    gap: 8px;
  }

  .header-innovo-slot {
    padding: 0 6px;
  }

  .brand-logo {
    width: 104px;
  }

  .insight-wordmark {
    width: 80px;
    max-width: none;
    margin-left: 6px;
  }

  .sidebar-toggle {
    flex: 0 0 42px;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 42px;
    min-height: 40px;
    padding: 8px;
    margin-left: 0;
  }

  .nav-list {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    height: 100%;
    min-width: 0;
    width: 100%;
    padding-right: 0;
    overflow: hidden;
  }

  .nav-button {
    flex: 1 1 0;
    grid-template-columns: 1fr;
    justify-items: center;
    width: auto;
    min-width: 0;
    min-height: 48px;
    padding: 8px;
  }

  body.mobile-menu-open .sidebar {
    top: var(--topbar-height);
    right: auto;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 256px;
    height: calc(100vh - var(--topbar-height));
    padding: 22px 16px;
    border-radius: 0;
  }

  body.mobile-menu-open .sidebar-toggle {
    flex: 0 0 auto;
    grid-template-columns: 20px 1fr;
    justify-items: stretch;
    width: 100%;
    margin-left: 0;
    padding: 9px 10px;
  }

  body.mobile-menu-open .sidebar-toggle-label {
    display: block;
  }

  body.mobile-menu-open .sidebar-toggle {
    min-height: 42px;
  }

  body.mobile-menu-open .nav-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-right: 2px;
    overflow-y: auto;
  }

  body.mobile-menu-open .nav-button {
    grid-template-columns: 20px 1fr auto;
    justify-self: stretch;
    justify-items: stretch;
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
  }

  body.mobile-menu-open .nav-button strong,
  body.mobile-menu-open .nav-button span:last-child {
    display: block;
  }

  body.mobile-menu-open .sidebar-panel {
    display: block;
  }

  body.mobile-menu-open .sidebar-credit {
    display: flex;
  }

  .workspace {
    grid-column: 1;
    grid-row: 2;
    padding-bottom: 80px;
  }

  .bottom-ribbon {
    grid-column: 1;
    padding: 12px 14px 92px;
  }

  .topbar,
  .view,
  .workspace-title {
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .search-box {
    order: 3;
    width: 100%;
  }

  .primary-button {
    flex: 1 1 auto;
  }

  h1 {
    font-size: 24px;
  }

  .workspace-breadcrumb {
    flex-basis: 100%;
  }

  .workspace-title-action {
    margin-left: 22px;
  }

  .metric-card,
  .wide-card,
  .side-card {
    grid-column: span 12;
  }

  .form-grid,
  .customer-stat-grid,
  .xero-preview-grid,
  .pipeline {
    grid-template-columns: 1fr;
  }

  .order-readiness-summary-card,
  .order-readiness-check-card,
  .order-readiness-progress {
    grid-template-columns: 1fr;
  }

  .order-readiness-check-card .metric-icon {
    display: none;
  }

  .order-readiness-check-state {
    justify-self: start;
  }

  .capability-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .capability-row .badge,
  .xero-preview-row > strong {
    grid-column: 2;
    justify-self: start;
  }

  .day-grid {
    grid-template-columns: 58px repeat(5, 138px);
  }

  .audit-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .audit-row__id {
    justify-self: start;
  }
}

@media (max-width: 1400px) {
  .admin-page-grid--users {
    grid-template-columns: 1fr;
  }

  .admin-user-record {
    grid-template-columns: 8px minmax(260px, 0.7fr) minmax(260px, 0.8fr) minmax(0, 1fr);
  }

  .admin-user-record__access,
  .admin-user-record .admin-user-actions {
    grid-column: 2 / -1;
  }

  .admin-user-record .admin-user-actions {
    justify-content: flex-start;
  }

  .opportunity-create-intake-grid,
  .quote-create-intake-grid {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  }

  .opportunity-division-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .performance-metric-clusters,
  .performance-three-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-activity-row {
    grid-template-columns: minmax(150px, 0.75fr) minmax(240px, 1.45fr) minmax(88px, 0.3fr);
  }

  .performance-activity-quality {
    grid-column: 2 / -1;
  }

  .performance-comparison-row {
    grid-template-columns: minmax(150px, 0.7fr) minmax(260px, 1.3fr);
  }

  .performance-comparison-stats {
    grid-column: 1 / -1;
  }

  .performance-lead-card-grid,
  .performance-opportunity-columns,
  .performance-quote-ring-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-opportunity-column {
    min-height: 270px;
  }

  .performance-division-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-user-summary-grid,
  .admin-user-record,
  .admin-user-record__fields,
  .admin-user-record__tiles {
    grid-template-columns: 1fr;
  }

  .admin-user-record__access,
  .admin-user-record .admin-user-actions {
    grid-column: auto;
  }

  .admin-user-record__stripe {
    min-height: 7px;
  }

  .opportunity-create-intake-grid,
  .quote-create-intake-grid,
  .opportunity-create-card--opportunity,
  .opportunity-create-card--commercial,
  .opportunity-create-card--links {
    grid-template-columns: 1fr;
    grid-column: auto;
    grid-row: auto;
  }

  .opportunity-division-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-leader-grid {
    grid-template-columns: 1fr;
  }

  .performance-person-header,
  .performance-two-grid,
  .performance-three-grid,
  .performance-metric-clusters {
    grid-template-columns: 1fr;
  }

  .performance-activity-row {
    grid-template-columns: 1fr;
  }

  .performance-activity-stack {
    width: 100%;
  }

  .performance-activity-total {
    justify-items: start;
  }

  .performance-activity-quality {
    grid-column: auto;
  }

  .performance-comparison-row {
    grid-template-columns: 1fr;
  }

  .performance-comparison-stats {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-lead-card-grid,
  .performance-opportunity-columns,
  .performance-quote-ring-grid,
  .performance-stalled-summary {
    grid-template-columns: 1fr;
  }

  .performance-opportunity-column {
    min-height: 250px;
  }

  .performance-quote-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .performance-quote-ring {
    width: 78px;
    height: 78px;
  }

  .performance-division-grid,
  .performance-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Unified iNSIGHT typography scale */
h1 {
  font-size: var(--insight-page-title-size);
  line-height: 1.05;
}

h2,
.split-title h2,
.owner-panel h2,
.performance-panel h2,
.marketing-panel h2 {
  font-size: var(--insight-section-title-size);
  line-height: 1.08;
}

h3 {
  font-size: var(--insight-compact-title-size);
  line-height: 1.1;
}

.owner-command-hero h1,
.lead-command-heading h2,
.lead-command-centre--hopper:not(.lead-create-header-tile) .lead-command-heading h2,
.create-page__title h2,
.admin-page-hero h2,
.settings-hero h2,
.division-workspace-hero h2,
.field-command-heading h2,
.field-pack-header h2,
.field-job-quick-card h2,
.organisation-record-header .record-heading h2,
.record-heading h2 {
  font-size: var(--insight-page-title-size);
  line-height: 1.05;
}

.opportunity-file-header .lead-file-title h2 {
  font-size: clamp(18px, 1.1vw, var(--insight-page-title-size));
  line-height: 1.05;
}

.lead-file-title h2,
.quote-dashboard-filter-heading h2,
.quote-dashboard-filter-panel h2,
.sales-access-strip h2,
.stage-ageing-panel .split-title h2,
.lead-team-conversion-panel .split-title h2,
.lead-closure-reason-panel .split-title h2,
.opportunity-glance-card h2,
.opportunity-file-upload-card .split-title h2,
.cost-build-picker-title strong,
.cost-build-model-title strong,
.handover-section-title h3,
.account-contact-create-title h3,
.field-schedule-title h2,
.rams-preview-title h3 {
  font-size: var(--insight-section-title-size);
  line-height: 1.08;
}

.lead-create-path__copy strong,
.lead-create-step strong,
.metric-card strong,
.pipeline-step strong,
.owner-command-metric strong,
.lead-command-card strong,
.quote-command-summary-grid .lead-command-card strong,
.opportunity-command-summary-grid .lead-command-card strong,
.field-command-grid--header .lead-command-card strong,
.organisation-header-live-tile strong {
  font-size: var(--insight-metric-value-size);
  line-height: 1;
}

.metric-card strong {
  font-size: var(--insight-large-metric-value-size);
}

.lead-command-grid--header .lead-command-card strong,
.lead-create-header-tile .lead-create-step strong {
  font-size: 18px;
}