: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;
  /* The product rail is one width for every page. Shells must spend this token on
     their first grid track rather than restating a number: the Documents register
     shipped a 216px rail because it copied the pre-unification value out of
     library.css into a stylesheet that loads after this one. */
  --bb-rail-w: 70px;
}

@media (max-width: 1000px) { :root { --bb-rail-w: 68px; } }
@media (max-width: 640px) { :root { --bb-rail-w: 54px; } }

/* ─── The product rail — one rule, every page ──────────────────────────────────
   Home is the template; this is Home's rail as it actually renders (theme.css already
   re-themed every rail white). The ID wins over any page stylesheet, so a page cannot
   restyle it. It applies at EVERY width: the rail is a left column on a phone too (68px, then
   54px, from the token's breakpoints) — no page has a bottom bar or hides it. */
#bb-rail,
.bb-rail {
  box-sizing: border-box;
  background: #fff;
  background-image: none;
  color: var(--ink);
  border-right: 1px solid #dce5e4;
  box-shadow: none;
  z-index: 16;
}
#bb-rail,
.bb-rail {
  width: var(--bb-rail-w);
  min-width: var(--bb-rail-w);
  max-width: var(--bb-rail-w);
  /* 6px, not Home's old 8px: at 70px the compact label needs the 4px so "Documents" fits. */
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
}
.bb-header-brand { margin-right: 12px; }

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

/* Home is the canonical ConForm product header. Authenticated process,
 * work and reporting surfaces use this exact shell above their local tools. */
.bridgeconnect-shared-shell-page {
  box-sizing: border-box;
  overflow: hidden;
}

.bridgeconnect-shared-shell-page > .library-shell,
.bridgeconnect-shared-shell-page > .app-shell,
.bridgeconnect-shared-shell-page > .runtime-shell,
.bridgeconnect-shared-shell-page > .case-shell,
.bridgeconnect-shared-shell-page > .review-shell,
.bridgeconnect-shared-shell-page > .shell,
.bridgeconnect-shared-shell-page > .studio {
  height: calc(100% - 68px) !important;
  min-height: 0;
}

.bridgeconnect-shell-topbar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 68px;
  padding: 0 28px;
  border-bottom: 1px solid #dce5e4;
  background: #fff;
}

.bridgeconnect-shell-brand {
  min-width: 270px;
}

.bridgeconnect-shell-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  letter-spacing: normal;
}

.bridgeconnect-shell-actions a {
  color: var(--ink);
  font-family: var(--tenant-font);
  text-decoration: none;
}

.bridgeconnect-shell-dashboard {
  margin-right: 4px;
  color: #667085 !important;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.bridgeconnect-shell-alerts {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #dce5e4;
  border-radius: 10px;
  background: #fff;
}

.bridgeconnect-shell-alerts span {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 9px;
  background: #d92d20;
  color: #fff;
  font-size: 8px;
  font-weight: 850;
}

.bridgeconnect-shell-alerts span[hidden] {
  display: none;
}

.bridgeconnect-shell-alerts svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bridgeconnect-shell-work,
.bridgeconnect-shell-role {
  min-height: 40px;
  border: 1px solid #dce5e4;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.bridgeconnect-shell-work {
  display: flex;
  align-items: center;
  padding: 0 13px;
}

.bridgeconnect-shell-work strong {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  place-items: center;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
}

.bridgeconnect-shell-role {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 11px;
}

.bridgeconnect-shell-role strong {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 10px;
}

/* The organisation pill: the same shape as My work and the role pill, and it is the
   switcher — the native select sits invisibly over it. Absent for one organisation. */
.bridgeconnect-shell-org, .bridgeconnect-shell-language { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 11px 0 13px; border: 1px solid #dce5e4; border-radius: 10px; background: #fff; color: var(--ink); font-family: var(--tenant-font); font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.bridgeconnect-shell-org svg, .bridgeconnect-shell-language svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bridgeconnect-shell-org select, .bridgeconnect-shell-language select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.bridgeconnect-shell-org:focus-within, .bridgeconnect-shell-language:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.bridgeconnect-shell-language[aria-busy="true"] { opacity: .6; cursor: progress; }

@media (max-width: 900px) {
  .bridgeconnect-shell-topbar {
    gap: 8px;
    height: 60px;
    padding: 0 12px;
  }

  .bridgeconnect-shared-shell-page > .library-shell,
  .bridgeconnect-shared-shell-page > .app-shell,
  .bridgeconnect-shared-shell-page > .runtime-shell,
  .bridgeconnect-shared-shell-page > .case-shell,
  .bridgeconnect-shared-shell-page > .review-shell,
  .bridgeconnect-shared-shell-page > .shell,
  .bridgeconnect-shared-shell-page > .studio {
    height: calc(100% - 60px) !important;
  }

  .bridgeconnect-shell-brand {
    min-width: 0;
  }

  .bridgeconnect-shell-dashboard,
  .bridgeconnect-shell-work,
  .bridgeconnect-shell-role > span {
    display: none;
  }

  /* The globe alone on a phone: it is the sign for "language" in every language. */
  .bridgeconnect-shell-language > span {
    display: none;
  }

  .bridgeconnect-shell-actions {
    margin-left: auto;
  }
}

.bridgeconnect-shared-shell-page > .app-shell > .topbar {
  height: 56px;
  grid-template-columns: minmax(280px, 1fr) auto;
  padding-inline: 10px 22px;
}

.bridgeconnect-shared-shell-page > .app-shell > .topbar .brand {
  gap: 7px;
}

.designer-tool-label {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
}

@media (max-width: 1100px) {
  .bridgeconnect-shared-shell-page > .app-shell > .topbar {
    grid-template-columns: minmax(190px, 1fr) auto;
    padding-inline: 6px 10px;
  }

  .designer-tool-label {
    display: none;
  }
}

/* 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;
  align-content: start;
  grid-auto-rows: max-content;
  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 2px;
  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 {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[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 ConForm process surface. */
.bridgeconnect-product-brand {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  gap: 9px;
  min-width: 0;
  color: #34343b;
  text-decoration: none;
  unicode-bidi: isolate;
}

.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;
  /* The product is ONE word: ConForm. "Bridge" and "Connect" stay separate flex
     items so "Connect" can carry its own colour, and the gap is what decides whether
     they read as one name or two — a flex container drops the whitespace between its
     items, so the markup has no say in it either way. Zero closes them up.

     This was .26em, which is the entire reason the header used to read as two words.
     A non-zero value here splits the name again on every surface at once. */
  gap: 0;
  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: #007b77;
}

.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;
  }
}

/* ConForm 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: var(--bb-rail-w) 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: var(--bb-rail-w) minmax(620px, 1fr);
  }
}

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

/* Compact product rail ------------------------------------------------------
 * Home and every Process Studio surface use one predictable navigation rail.
 * Page-specific navigation remains inside the page, never in this rail.
 */
@media (min-width: 901px) {
  .library-shell {
    grid-template-columns: var(--bb-rail-w) minmax(650px, 1fr) 300px;
  }

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

  .review-shell {
    grid-template-columns: var(--bb-rail-w) minmax(0, 1fr);
  }
}

.library-nav,
.nav,
.review-shell > nav {
  padding: 12px 6px;
}

.library-brand.bridgeconnect-product-brand,
.nav .brand.bridgeconnect-product-brand,
.review-shell > nav .brand.bridgeconnect-product-brand {
  width: 60px;
  min-width: 60px;
  height: 44px;
  justify-content: center;
  padding: 0;
  margin: 0 0 8px;
}

.library-brand .bridgeconnect-product-wordmark,
.nav .brand .bridgeconnect-product-wordmark,
.review-shell > nav .brand .bridgeconnect-product-wordmark {
  display: none !important;
}

.library-nav nav,
.nav nav {
  margin-top: 0;
}

.library-user,
.nav-foot {
  justify-content: center;
  padding: 12px 0 0;
}

.library-user div,
.nav-foot div {
  display: none;
}

.library-user > span {
  width: 32px;
  height: 32px;
}

.process-navigation-list a,
.process-navigation-ai {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/* 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;
  }
}
html body,html .bridgeconnect-shell-topbar,html .process-navigation-list,html .workspace-content{transition:color .16s ease,background-color .16s ease,border-color .16s ease,opacity .16s ease}
html.bridgeconnect-localising body{opacity:.88}

@media (max-width: 640px) {
  /* The 54px rail: one step down on the label so every item still fits on one line. */
  #bb-rail,
  .bb-rail { padding: 8px 3px; }
  [data-navigation-compact] .process-navigation-list span,
  [data-navigation-compact] .process-navigation-ai span { font-size: 8px; }

}

/*
 * Touch targets.
 *
 * ConForm is a website now, and everything outside the process canvas is expected
 * to work on a phone. Measured at 390px before this existed: the filter buttons on the
 * work list were 29px tall, the tab buttons on manage 17-30px, the register toggles 30px
 * and the shell breadcrumb 31px. The usual floor is 44px, and a 29px control is a control
 * people miss and re-tap.
 *
 * Gated on the pointer, not the width: `(hover: none) and (pointer: coarse)` is true on a
 * phone and false in a narrow desktop window, so this cannot change a mouse layout that
 * someone has already tuned. Deliberately not applied to checkboxes and radios, whose
 * hit area comes from their label, nor to the skip link, which is 1x1 until focused by
 * design.
 */
@media (hover: none) and (pointer: coarse) {
  button,
  [role="button"],
  a.button,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 44px !important;
  }
  /*
   * The shell links are plain <a> elements, and min-height does nothing on an inline box —
   * it is silently ignored, which is why an earlier pass "set" 44px and measured 31.
   * inline-flex gives them a box that can actually have a height. Scoped to the shell's
   * own controls rather than every anchor, so prose links inside a page are untouched.
   */
  a.bridgeconnect-shell-brand,
  a.bridgeconnect-shell-alerts,
  a.bridgeconnect-shell-role,
  a.bridgeconnect-shell-work,
  a.bridgeconnect-shell-dashboard,
  a.button,
  .bridgeconnect-shell-topbar a,
  .bridgeconnect-shell-actions a {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
  }
  /* A shell control the tenant switched off stays off: the touch-target box above must
     not out-rank the hidden attribute (the Traditional dashboard link on a wide tablet). */
  a.bridgeconnect-shell-dashboard[hidden] {
    display: none;
  }
  /*
   * Page-level navigation anchors: the section tabs on cases and tasks, and the back and
   * brand links in a page topbar. Named by their container rather than by matching every
   * <a>, so a link inside prose keeps its line height and only things people tap as
   * controls get a control-sized box.
   */
  .process-section-tabs a,
  header.topbar a,
  a.back {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
  }
  button, [role="button"], select {
    min-height: 44px !important;
  }
  a.skip-link { min-height: 0 !important; }
}

/*
 * A phone is BOTH narrow and coarse-pointed. The 900px rule above hides the two shell
 * links there is no room for; the coarse-pointer block below it then gives every shell
 * link `display: inline-flex` for a 44px tap target — with a higher specificity
 * (a.class beats .class) — which re-showed "Traditional dashboard" and "My work" on real
 * phones, drawn over the wordmark. Seen at 390px on a touch device; the desktop
 * breakpoint alone never showed it.
 */
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  a.bridgeconnect-shell-dashboard,
  a.bridgeconnect-shell-work {
    display: none;
  }
}