:root {
  --brand: #007b77;
  --brand-secondary: #4b4b4f;
  --brand-raw: #00aaa5;
  --brand-tint: #eaf8f7;
  --brand-line: #9bdedb;
  --accent: #ef7f1a;
  --nav: #343438;
  --nav-active: #007b77;
  --soft: #f4f7f7;
  --ink: #27272a;
  --tenant-font: Inter, "Segoe UI", system-ui, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--tenant-font);
}

/* One information architecture on every authenticated process surface. */
[data-process-navigation] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.process-navigation-list {
  display: grid;
  gap: 4px;
  width: 100%;
}

.process-navigation-list a,
.process-navigation-ai {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border-radius: 8px;
  color: #d5dce7;
  font-size: 12px;
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .14s, color .14s, transform .14s;
}

.process-navigation-list a:hover,
.process-navigation-list a.active,
.process-navigation-list a[aria-current="page"] {
  background: var(--nav-active);
  color: #fff;
}

.process-navigation-list a:hover {
  transform: translateX(2px);
}

.process-navigation-list svg,
.process-navigation-ai svg {
  width: 19px;
  min-width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.process-navigation-ai {
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-raw) 45%, white);
  background: color-mix(in srgb, var(--brand-raw) 14%, transparent);
  color: #fff;
  font-weight: 700;
}

.process-navigation-ai:hover {
  border-color: color-mix(in srgb, var(--brand-raw) 70%, white);
  background: color-mix(in srgb, var(--brand-raw) 26%, transparent);
}

/* The shared shell is light on every surface; keep labels AA-readable. */
.process-navigation-list a {
  color: #475467;
}

.process-navigation-ai {
  border-color: var(--brand-line);
  background: var(--brand-tint);
  color: #005f5b;
}

.process-navigation-ai:hover {
  border-color: var(--brand);
  background: #d8f1ef;
  color: #004f4c;
}

[data-navigation-compact] .process-navigation-list a,
[data-navigation-compact] .process-navigation-ai {
  min-height: 58px;
  justify-content: center;
  gap: 3px;
  padding: 7px 4px;
  flex-direction: column;
  text-align: center;
}

[data-navigation-compact] .process-navigation-list a:hover {
  transform: none;
}

[data-navigation-compact] .process-navigation-list span,
[data-navigation-compact] .process-navigation-ai span {
  font-size: 9px;
}

[data-navigation-compact] .process-navigation-ai {
  margin-top: auto;
}

.process-section-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.process-section-tabs a {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--muted, #667085);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.process-section-tabs a:hover {
  background: var(--brand-tint);
  color: var(--brand);
}

.process-section-tabs a.active,
.process-section-tabs a[aria-current="page"] {
  background: var(--brand-tint);
  color: var(--brand);
}

@media (max-width: 1100px) {
  [data-process-navigation]:not([data-navigation-compact]) .process-navigation-list a,
  [data-process-navigation]:not([data-navigation-compact]) .process-navigation-ai {
    min-height: 52px;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    flex-direction: column;
    text-align: center;
  }

  [data-process-navigation]:not([data-navigation-compact]) .process-navigation-list span,
  [data-process-navigation]:not([data-navigation-compact]) .process-navigation-ai span {
    font-size: 0;
  }

  [data-process-navigation]:not([data-navigation-compact]) .process-navigation-ai {
    margin-top: auto;
  }
}

[data-theme-mark] {
  overflow: hidden;
}

[data-theme-mark].has-tenant-logo {
  width: 132px;
  min-width: 132px;
  padding: 4px 7px;
  border-radius: 8px;
  background: #fff;
}

[data-theme-mark].has-tenant-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tenant-theme-swatch {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgb(23 32 51 / 18%);
  border-radius: 9px;
  box-shadow: inset 0 0 0 3px #fff;
}

.brand [data-theme-mark].has-tenant-logo,
.runtime-brand[data-theme-mark].has-tenant-logo,
.case-nav [data-theme-mark].has-tenant-logo {
  width: 44px;
  min-width: 44px;
  padding: 4px;
}

.primary,
.button.primary,
button.primary {
  background-color: var(--brand);
  border-color: var(--brand);
}

.brand-mark {
  background: var(--brand);
  color: #fff;
}

.library-nav,
.nav,
.review-shell > nav {
  background: var(--nav);
}

.library-nav,
.nav,
.review-shell > nav,
.side-nav,
.runtime-nav,
.case-nav {
  background-image: none;
}

.library-nav nav a.active,
.library-nav nav a:hover,
.nav nav a.active,
.nav nav a:hover,
.review-shell > nav a.active,
.review-shell > nav a:hover,
.runtime-nav .active {
  background: var(--nav-active);
}

.ai-strip,
.form-ai-bar,
.create-panel .ai-create-intro,
.collaboration-card.proposal {
  border-color: var(--brand-line);
  background: var(--brand-tint);
}

.ai-strip .spark,
.form-ai-mark,
.eyebrow,
.breadcrumb,
.tabs .active,
.library-tabs .active,
.connector-actions .test {
  color: var(--brand);
}

.form-studio-dialog .form-field-card.selected,
.form-studio-dialog .form-section-card.selected,
.task-row.selected {
  border-color: var(--brand-line);
  box-shadow: inset 3px 0 var(--brand);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-line);
  outline-offset: 2px;
}

/* One product lockup across every Bridge Connect process surface. */
.bridgeconnect-product-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #34343b;
  text-decoration: none;
}

.bridgeconnect-product-symbol {
  display: block;
  width: 34px;
  min-width: 34px;
  height: 31px;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bridgeconnect-product-symbol img {
  display: block;
  width: auto;
  max-width: none;
  height: 31px;
}

.bridgeconnect-product-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: #34343b;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

.bridgeconnect-product-wordmark b {
  color: inherit;
  font: inherit;
}

.bridgeconnect-product-wordmark b:last-child {
  color: #00a99d;
}

.bridgeconnect-product-brand.compact {
  justify-content: center;
  gap: 0;
}

.runtime-brand.bridgeconnect-product-brand,
.case-nav .brand.bridgeconnect-product-brand {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  background: #fff !important;
}

.library-brand.bridgeconnect-product-brand,
.nav .brand.bridgeconnect-product-brand,
.review-shell > nav .brand.bridgeconnect-product-brand {
  color: #34343b;
}

.brand div span.bridgeconnect-product-symbol,
.brand div span.bridgeconnect-product-wordmark {
  display: inline-flex;
}

@media (max-width: 1200px) {
  .library-brand .bridgeconnect-product-wordmark {
    display: none;
  }

  .library-brand.bridgeconnect-product-brand {
    justify-content: center;
  }
}

@media (max-width: 1000px) {
  .review-shell > nav .bridgeconnect-product-wordmark {
    display: none;
  }
}

/* BridgeConnect product shell -------------------------------------------------
 * Every authenticated process surface keeps its own information architecture,
 * but shares the same quiet, light navigation and interaction language.
 */
html,
body {
  background: var(--soft);
  color: var(--ink);
}

.library-nav,
.nav,
.review-shell > nav,
.runtime-nav,
.case-nav,
.product-nav,
.side-nav {
  background: #fff;
  color: var(--ink);
  border-right: 1px solid #dce5e4;
  box-shadow: none;
}

.library-brand,
.nav .brand,
.review-shell > nav .brand,
.side-nav .brand {
  color: var(--ink);
}

.library-brand > span,
.brand-mark,
.runtime-brand,
.case-nav .brand,
.workspace-brand-mark {
  background: var(--brand);
  color: #fff;
  border-radius: 10px;
  box-shadow: none;
}

.library-brand > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  font-size: 11px;
  font-weight: 850;
}

.review-shell > nav .brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.review-shell > nav .brand [data-theme-mark] {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
}

.library-nav nav a,
.nav nav a,
.review-shell > nav a,
.runtime-nav > a,
.runtime-nav > button,
.case-nav a,
.nav-item,
.side-nav nav a {
  color: #525c66;
}

.library-nav nav a.active,
.library-nav nav a:hover,
.nav nav a.active,
.nav nav a:hover,
.review-shell > nav a.active,
.review-shell > nav a:hover,
.runtime-nav .active,
.runtime-nav > a:hover,
.runtime-nav > button:hover,
.case-nav .active,
.case-nav a:hover,
.nav-item.active,
.nav-item:hover,
.side-nav nav a.active,
.side-nav nav a:hover {
  background: var(--brand-tint);
  color: var(--brand);
  box-shadow: none;
  transform: none;
}

.library-user,
.nav-foot,
.side-footer {
  border-top-color: #dce5e4;
}

.library-user > span,
.ai-orb {
  background: var(--brand-tint);
  color: var(--brand);
  border-color: var(--brand-line);
}

.library-user b,
.nav-foot b,
.side-footer b,
.brand b {
  color: var(--ink);
}

.library-user small,
.nav-foot small,
.side-footer small,
.brand small {
  color: var(--muted);
}

.library-shell:has(.create-panel.closed) {
  grid-template-columns: 216px minmax(650px, 1fr);
}

.library-shell main,
.case-shell main,
.review-shell main,
.shell main {
  background: var(--soft);
}

.library-head h1,
.topbar h1,
.work-head h1,
.review-shell h1 {
  letter-spacing: -.035em;
}

.process-table,
.metric,
.panel,
.data-table,
.review-grid,
.case-card,
.task-inbox,
.task-work,
.task-context,
.create-panel {
  box-shadow: 0 8px 30px rgb(39 39 42 / 5%);
}

.process-table,
.metric,
.panel,
.data-table,
.review-grid {
  border-color: #dce5e4;
}

.process-row:hover,
.task-row:hover,
.task-row.selected {
  background: var(--brand-tint);
}

.create-panel {
  background: #fff;
  border-left-color: #dce5e4;
}

.create-panel header,
.create-panel .library-ai-composer-actions span,
.create-panel .safety {
  color: var(--muted);
}

.create-panel header b {
  color: var(--ink);
}

.library-ai-message,
.ai-strip,
.form-ai-bar {
  border-color: var(--brand-line);
  background: var(--brand-tint);
}

.canvas-shell,
.canvas-shell.engine-intent,
.intent-canvas,
.review-diagram {
  background-color: var(--soft);
  background-image: none;
}

.canvas-viewport,
.intent-workspace,
.form-design-canvas {
  border-color: #dce5e4;
  background: #fff;
}

.node.task .node-card,
.node:hover .node-card,
.node.selected .node-card {
  border-color: var(--brand);
}

.node.selected .node-card {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent), 0 8px 20px rgb(39 39 42 / 10%);
}

.quick-add,
.palette-item:hover,
.connector-actions .test {
  color: var(--brand);
  border-color: var(--brand-line);
  background: var(--brand-tint);
}

@media (max-width: 1200px) {
  .library-shell:has(.create-panel.closed) {
    grid-template-columns: 76px minmax(620px, 1fr);
  }
}

@media (max-width: 640px) {
  .library-shell:has(.create-panel.closed) {
    grid-template-columns: 54px minmax(0, 1fr);
  }
}

/* Process designer and form designer use the same tenant colour tokens. */
.workspace .brand-mark,
.assistant-send,
.landing-send,
.presence-avatar,
.collaboration-pin,
.form-studio-actions .primary {
  background: var(--brand);
  border-color: var(--brand);
}

.palette-item:hover,
.template-overlap a,
.intent-action,
.intent-empty-state strong,
.segmented-control button.active,
.form-ai-mark,
.form-field-type span:first-child,
.outline-field:hover,
.outline-field.selected,
.property-card-title > span,
.inspector-form-icon,
.collaboration-anchor,
.collaboration-form button,
.form-ai-result-actions button {
  color: var(--brand);
}

.form-ai-bar,
.form-ai-result,
.collaboration-card.proposal,
.collaboration-preview,
.segmented-control button.active,
.preview-field-card.selected,
.outline-field:hover,
.outline-field.selected {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.form-ai-bar label,
.form-ai-result strong {
  color: var(--ink);
}

.form-ai-bar input,
.form-field-type:hover,
.form-field-type:focus-visible,
.preview-section.selected,
.preview-field-card.selected,
.field-block.current,
.governed-field:focus-within {
  border-color: var(--brand);
}

.form-ai-bar,
.form-design-canvas,
.canvas-shell {
  background-image: none;
}

.form-design-canvas {
  background-color: var(--soft);
}

.edge-selected,
.edge-hit-area:hover + .edge-line,
.alignment-guide,
.drop-preview,
.connection-preview {
  stroke: var(--brand);
}

/* Keep the canonical product lockup above legacy page-specific span rules. */
.library-brand > span.bridgeconnect-product-symbol {
  display: block;
  width: 34px;
  min-width: 34px;
  height: 31px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  place-items: initial;
}

.library-brand > span.bridgeconnect-product-wordmark {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #34343b;
  font-size: 18px;
  font-weight: 800;
}

.brand div span.bridgeconnect-product-symbol {
  display: block;
}

.brand div span.bridgeconnect-product-wordmark {
  display: inline-flex;
  color: #34343b;
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 1200px) {
  .library-brand > span.bridgeconnect-product-wordmark {
    display: none;
  }
}