/* =========================================================================
   Workflow Board — UI styles
   Monotype Design System. Ink is structure; Tokyo red is risk.
   Black on white, Helvetica Now everywhere, pill buttons, hairline rules.
   ========================================================================= */

/* Helvetica Now MT — Display for headlines, Text for body, Micro for UI. */
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-LtIt.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-Rg.woff2')   format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-Md.woff2')   format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Text';  src: url('./fonts/HelveticaNowMTTextW01-Rg.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Text';  src: url('./fonts/HelveticaNowMTTextW01-Md.woff2')  format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Micro'; src: url('./fonts/HelveticaNowMTMicroW05-Md.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Monotype core palette */
  --london-black:    #000000;
  --london-grey:     #E6E6E6;
  --shanghai-white:  #FFFFFF;
  --ink:   var(--london-black);
  --paper: var(--shanghai-white);

  /* City accents — dept identity dots, risk marks */
  --woburn-indigo:        #388FF7;
  --woburn-indigo-xlight: #CDE3FD;
  --noida-pink:           #E83B94;
  --noida-pink-xlight:    #F9CEE4;
  --saopaulo-green:       #00AD0A;
  --saopaulo-green-light: #80D685;
  --saopaulo-green-xlight:#BFEBC2;
  --berlin-yellow:        #FF9900;
  --berlin-yellow-xlight: #FFE6BF;
  --tokyo-red:            #FF1C5E;
  --tokyo-red-light:      #FF8FAD;
  --tokyo-red-xlight:     #FFC6D7;
  --paris-blue:           #0038FF;
  --paris-blue-xlight:    #BFCDFF;

  /* Neutral ramp */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F4F4F2;
  --neutral-200: #E8E7E3;
  --neutral-300: #D4D3CE;
  --neutral-400: #A9A7A0;
  --neutral-500: #7D7B75;
  --neutral-600: #575651;
  --neutral-700: #3A3935;
  --neutral-800: #1F1E1C;
  --neutral-900: #0A0A09;

  --border-1: var(--neutral-200);
  --border-2: var(--neutral-300);
  --state-hover: rgba(0,0,0,0.04);

  --font-display: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text:    'Helvetica Now Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-micro:   'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, Arial, sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.10);

  --tr-display: -0.025em;
  --tr-headline: -0.015em;
  --tr-eyebrow: 0.08em;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
::selection { background: var(--ink); color: var(--paper); }

/* Shared eyebrow style */
.bb-palette h2,
.bb-inspector h2,
.bb-inspector label,
.bb-pal-fonts-off h2 {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--neutral-500);
}

/* ------- Shell ------- */
.bb-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.bb-main {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* ------- Top bar ------- */
.bb-topbar {
  display: flex;
  align-items: center;
  height: 56px;
  flex: 0 0 56px;
  padding: 0 20px;
  background: var(--paper);
  gap: 10px;
  border-bottom: 1px solid var(--border-1);
  z-index: 60;
}
/* Shrink-proofing: controls never squash or wrap — only the client
   field gives up space, and the spacer absorbs the rest. */
.bb-topbar > * { flex-shrink: 0; }
.bb-topbar .bb-spacer { flex-shrink: 1; }
.bb-topbar button,
.bb-topbar select { white-space: nowrap; }
.bb-topbar select { max-width: 188px; }
.bb-topbar h1 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--tr-headline);
  margin: 0 10px 0 0;
  white-space: nowrap;
}
.bb-topbar .wordmark { font-weight: 700; }
.bb-topbar .wordmark .dot { color: var(--tokyo-red); }
.bb-spacer { flex: 1; }
.bb-topbar select,
.bb-topbar button {
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
/* Template select: kill the native chevron and draw our own so the
   label never collides with the arrow. */
.bb-topbar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.bb-topbar button:hover { background: var(--state-hover); }
.bb-topbar button:disabled { opacity: 0.35; cursor: default; }
.bb-topbar button:disabled:hover { background: var(--paper); }
.bb-topbar button.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.bb-topbar button.primary:hover { background: var(--neutral-800); }
.bb-group {
  display: inline-flex;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bb-group button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  color: var(--neutral-600);
  height: 30px !important;
}
.bb-group button:hover { background: var(--state-hover); color: var(--ink); }
.bb-group button.on { background: var(--ink); color: var(--paper); }
.bb-group button:disabled:hover { background: transparent; }

.bb-fonts-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.bb-fonts-toggle .bb-fonts-aa {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--tr-headline);
  color: var(--neutral-400);
}
.bb-fonts-toggle.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.bb-fonts-toggle.on .bb-fonts-aa { color: var(--tokyo-red); }
.bb-fonts-toggle.on:hover { background: var(--neutral-800); }

.bb-client {
  font-family: var(--font-text);
  font-size: 13px;
  width: 150px;
  min-width: 60px;
  flex-shrink: 1 !important;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-2);
  border-radius: 0;
  color: var(--ink);
  padding: 4px 2px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.bb-client::placeholder { color: var(--neutral-400); }
.bb-client:focus { outline: none; border-bottom-color: var(--ink); }

/* Narrow windows: drop the h1 subtitle and tighten the template select
   so every control stays visible. */
@media (max-width: 1180px) {
  .bb-topbar { gap: 8px; padding: 0 14px; }
  .bb-topbar .bb-h1-sub { display: none; }
  .bb-topbar select { max-width: 152px; }
  .bb-client { width: 110px; }
}
@media (max-width: 920px) {
  .bb-topbar { overflow-x: auto; }
}

/* ------- Canvas ------- */
.bb-canvas {
  position: absolute;
  inset: 0;
  background: var(--neutral-50);
  overflow: hidden;
  cursor: default;
}
.bb-canvas.panning { cursor: grabbing; }
.bb-canvas.drafting { cursor: crosshair; }
.bb-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--neutral-300) 1.1px, transparent 1.1px);
}
.bb-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

/* ------- Connector SVG layers ------- */
.bb-links, .bb-draft {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.bb-link-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  pointer-events: stroke;
  cursor: pointer;
}
.bb-link-line {
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  transition: stroke-width var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
.bb-link-arrow { pointer-events: none; }

.bb-link-work .bb-link-line { stroke: var(--neutral-400); }
.bb-link-work .bb-link-arrow { fill: var(--neutral-400); }
.bb-link-work.selected .bb-link-line,
.bb-link-work.related .bb-link-line { stroke: var(--ink); }
.bb-link-work.selected .bb-link-arrow,
.bb-link-work.related .bb-link-arrow { fill: var(--ink); }

.bb-link-font .bb-link-line { stroke-width: 2.25; }
.bb-link-font.leak .bb-link-line { stroke-dasharray: 7 5; }

.bb-link.selected .bb-link-line { stroke-width: 4; }
.bb-link.related .bb-link-line { stroke-width: 3; }

/* fonts layer ON: the workflow recedes a touch so font paths pop */
.bb-canvas:not(.fonts-off) .bb-link-work .bb-link-line,
.bb-canvas:not(.fonts-off) .bb-link-work .bb-link-arrow { opacity: 0.6; }
.bb-canvas:not(.fonts-off) .bb-link-work.selected .bb-link-line,
.bb-canvas:not(.fonts-off) .bb-link-work.related .bb-link-line,
.bb-canvas:not(.fonts-off) .bb-link-work.selected .bb-link-arrow,
.bb-canvas:not(.fonts-off) .bb-link-work.related .bb-link-arrow { opacity: 1; }

.bb-link-text {
  font-family: var(--font-micro);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--neutral-600);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--neutral-50);
  stroke-width: 5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.bb-particle { opacity: 0.9; pointer-events: none; }

/* fonts layer OFF: font pills + font paths fade away */
.fonts-off .bb-font,
.fonts-off .bb-link-font {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              visibility 0s var(--dur-base);
}
.bb-font, .bb-link-font {
  transition: opacity var(--dur-base) var(--ease-standard);
}

/* draft connector */
.bb-draft-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  animation: bb-dash-march 600ms linear infinite;
  opacity: 0.7;
}
.bb-draft-line.snapped {
  stroke-dasharray: none;
  animation: none;
  opacity: 1;
}
.bb-draft-arrow { fill: var(--ink); }
@keyframes bb-dash-march { to { stroke-dashoffset: -13; } }

/* ------- Nodes (shared) ------- */
.bb-node {
  position: absolute;
  left: 0;
  top: 0;
  cursor: grab;
  user-select: none;
}
.bb-node:active { cursor: grabbing; }

/* ports — appear on hover or while drafting */
.bb-port {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  cursor: crosshair;
  z-index: 3;
}
.bb-node:hover .bb-port,
.drafting .bb-node .bb-port { opacity: 1; transform: scale(1); }
.bb-port:hover { background: var(--ink); }
.bb-port-left   { left: -6px;  top: 50%;  margin-top: -6px; }
.bb-port-right  { right: -6px; top: 50%;  margin-top: -6px; }
.bb-port-top    { top: -6px;   left: 50%; margin-left: -6px; }
.bb-port-bottom { bottom: -6px;left: 50%; margin-left: -6px; }

/* ------- Step card ------- */
.bb-card {
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  padding: 12px 14px 13px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.bb-card:hover { border-color: var(--neutral-400); box-shadow: var(--shadow-2); }
.bb-card.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), var(--shadow-2);
}
.bb-node.link-target {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.bb-font.link-target { outline-offset: 2px; border-radius: var(--radius-pill); }

.bb-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.bb-card-eyebrow {
  font-family: var(--font-micro);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--neutral-400);
}
.bb-card-pin {
  font-family: var(--font-micro);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.bb-card-pin .bb-card-pin-glyph {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: var(--tr-headline);
}
.bb-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: var(--tr-headline);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
  text-wrap: pretty;
}
.bb-card-title-input {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: var(--tr-headline);
  line-height: 1.2;
  color: var(--ink);
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  padding: 0 0 1px;
  margin-bottom: 8px;
  width: 100%;
}
.bb-card-title-input:focus { outline: none; }

.bb-card-depts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 7px;
}
.bb-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-700);
  white-space: nowrap;
}
.bb-dept-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}

.bb-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}
.bb-role-chip {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--neutral-600);
  background: var(--neutral-100);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
}

.bb-card-subs { margin-top: 7px; border-top: 1px solid var(--border-1); padding-top: 6px; }
.bb-subs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-micro);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.bb-subs-toggle:hover { color: var(--ink); }
.bb-chevron {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-standard);
  font-size: 13px;
  line-height: 1;
}
.bb-chevron.open { transform: rotate(90deg); }
.bb-subs-list {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}
.bb-subs-list li {
  font-size: 12px;
  line-height: 1.45;
  color: var(--neutral-700);
  padding: 4px 0 4px 12px;
  position: relative;
}
.bb-subs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 1.5px;
  background: var(--neutral-400);
}

.bb-add-next {
  position: absolute;
  right: -38px;
  top: 50%;
  margin-top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--neutral-500);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
  z-index: 2;
  box-shadow: var(--shadow-1);
}
.bb-card:hover .bb-add-next { opacity: 1; transform: scale(1); }
.bb-add-next:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.drafting .bb-add-next { opacity: 0 !important; }

/* ------- Font pills ------- */
.bb-font {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--border-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.bb-font:hover { border-color: var(--ink); }
.bb-font.selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bb-font-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  flex: 0 0 7px;
}
.bb-font-glyph {
  font-family: var(--font-micro);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--neutral-500);
}
.bb-font-label { pointer-events: none; }

.bb-font-stash { background: var(--neutral-200); border-color: transparent; }
.bb-font-stash:hover { border-color: var(--neutral-400); }
.bb-font-stash .bb-font-label { color: var(--neutral-700); }
.bb-font-stash.selected { border-color: var(--ink); }

.bb-font-channel { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bb-font-channel:hover { background: var(--neutral-800); }
.bb-font-channel.selected { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }

.bb-font-leak { border-color: var(--tokyo-red); border-width: 1.25px; color: var(--tokyo-red); }
.bb-font-leak:hover { border-color: var(--tokyo-red); box-shadow: 0 0 0 1px var(--tokyo-red); }
.bb-font-leak.selected { border-color: var(--tokyo-red); box-shadow: 0 0 0 1px var(--tokyo-red); }

/* ------- Palette (floating left) ------- */
.bb-palette {
  position: absolute;
  left: 16px;
  top: 16px;
  bottom: 16px;
  width: 228px;
  background: var(--paper);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow-y: auto;
  padding: 16px 14px;
  z-index: 30;
}
.bb-palette h2 { margin: 18px 0 6px; }
.bb-palette h2:first-child { margin-top: 0; }
.bb-pal-tip {
  font-size: 11.5px;
  color: var(--neutral-400);
  margin-bottom: 8px;
}
.bb-pal-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  cursor: grab;
  font-size: 12.5px;
  font-weight: 500;
  user-select: none;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-standard);
}
.bb-pal-item:hover { background: var(--state-hover); }
.bb-pal-item:active { cursor: grabbing; }
.bb-pal-item.placed { opacity: 0.35; cursor: default; }
.bb-pal-card-glyph {
  width: 16px;
  height: 12px;
  border: 1px solid var(--neutral-400);
  border-radius: 2.5px;
  background: var(--paper);
  flex: 0 0 16px;
  position: relative;
}
.bb-pal-card-glyph::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 7px;
  height: 1.5px;
  background: var(--neutral-400);
}
.bb-pal-step.blank { color: var(--neutral-500); }
.bb-pal-swatch {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  flex: 0 0 13px;
  background: var(--paper);
  border: 1px solid var(--border-2);
}
.bb-pal-font.stash .bb-pal-swatch { background: var(--neutral-200); border: 0; }
.bb-pal-font.channel .bb-pal-swatch { background: var(--ink); border: 0; }
.bb-pal-font.leak .bb-pal-swatch { border-color: var(--tokyo-red); }
.bb-pal-font.leak { color: var(--tokyo-red); }
.bb-pal-fonts-off { margin-top: 18px; }
.bb-pal-fonts-off p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--neutral-500);
  margin: 6px 0 0;
}

/* ------- Inspector (floating right) ------- */
.bb-inspector {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 296px;
  max-height: calc(100% - 90px);
  background: var(--paper);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow-y: auto;
  padding: 18px;
  z-index: 30;
  animation: bb-rise-in var(--dur-base) var(--ease-emphasis);
}
.bb-inspector h2 { margin: 0 0 12px; }
.bb-field { margin-bottom: 16px; }
.bb-field label { display: block; margin-bottom: 6px; }
.bb-inspector input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 7px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}
.bb-inspector input[type="text"]:focus { outline: none; border-color: var(--ink); }
.bb-meta {
  font-size: 12px;
  color: var(--neutral-500);
  margin-top: 7px;
  line-height: 1.5;
}

.bb-dept-toggles { display: flex; flex-wrap: wrap; gap: 5px; }
.bb-dept-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--neutral-600);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.bb-dept-toggle:hover { border-color: var(--neutral-400); }
.bb-dept-toggle.on {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--neutral-50);
}

.bb-role-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.bb-role-row .bb-role-label { flex: 1; min-width: 0; }
.bb-inspector .bb-role-row input[type="text"] { font-size: 12.5px; padding: 5px 8px; }
.bb-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex: 0 0 auto;
}
.bb-stepper button {
  width: 22px;
  height: 24px;
  border: 0;
  background: var(--paper);
  color: var(--neutral-600);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.bb-stepper button:hover { background: var(--state-hover); color: var(--ink); }
.bb-stepper span {
  min-width: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}
/* Same cell as the span above, but typable — font counts and caps run to the
   hundreds, so they can be entered directly as well as stepped. */
.bb-inspector .bb-stepper input,
.bb-stepper input {
  width: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  padding: 0;
  text-align: center;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bb-inspector .bb-stepper input:focus,
.bb-stepper input:focus { outline: none; background: var(--neutral-50); }

/* Static counterpart to the stepper's number cell, for read-only totals. */
.bb-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: 0 0 auto;
}
.bb-row-remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--neutral-400);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 22px;
}
.bb-row-remove:hover { color: var(--tokyo-red); background: var(--state-hover); }
.bb-add-button {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  height: 30px;
  padding: 0 10px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--neutral-500);
  cursor: pointer;
  margin-top: 2px;
}
.bb-add-button:focus { outline: none; border-color: var(--ink); }
.bb-add-button:hover { border-color: var(--neutral-400); color: var(--ink); }

.bb-risk { display: flex; gap: 6px; }
.bb-risk button {
  flex: 1;
  height: 32px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}
.bb-risk button.on {
  border-color: var(--ink);
  outline: 2px solid var(--paper);
  outline-offset: -4px;
}
.bb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--neutral-700);
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}

.bb-license {
  border-top: 2px solid var(--ink);
  padding: 12px 0 4px;
  margin-bottom: 16px;
}
.bb-license h3 {
  margin: 0 0 6px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--neutral-500);
}
.bb-license-type {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: var(--tr-headline);
  color: var(--ink);
  margin-bottom: 2px;
}
.bb-license-gap {
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: 6px;
  line-height: 1.5;
}
.bb-license-ask {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  border-top: 1px solid var(--border-1);
  padding-top: 10px;
}

.bb-delete {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  height: 34px;
  padding: 0 14px;
  background: var(--paper);
  color: var(--tokyo-red);
  border: 1px solid var(--tokyo-red);
  border-radius: var(--radius-pill);
  cursor: pointer;
  width: 100%;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.bb-delete:hover { background: var(--tokyo-red); color: var(--paper); }

/* ------- Template hint (floating, right) ------- */
.bb-template-hint {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 296px;
  background: var(--paper);
  border: 1px solid var(--border-1);
  border-top: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 14px 16px;
  z-index: 25;
  animation: bb-rise-in var(--dur-base) var(--ease-emphasis);
}
.bb-template-hint h3 {
  margin: 0 22px 6px 0;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--neutral-500);
}
.bb-template-hint p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}
.bb-template-hint button {
  position: absolute;
  right: 8px;
  top: 6px;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--neutral-400);
  cursor: pointer;
  padding: 2px 4px;
}
.bb-template-hint button:hover { color: var(--ink); }

/* ------- Empty state ------- */
.bb-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 40px;
  z-index: 10;
}
.bb-empty strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: var(--tr-headline);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 12px;
  text-wrap: balance;
}
.bb-empty p {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--neutral-500);
  max-width: 420px;
}
.bb-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.bb-empty-actions button {
  pointer-events: auto;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.bb-empty-actions button:hover { background: var(--state-hover); border-color: var(--neutral-400); }
.bb-empty-actions button:first-child {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.bb-empty-actions button:first-child:hover { background: var(--neutral-800); }

/* ------- Hint bar + zoom bar ------- */
.bb-hintbar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-micro);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--neutral-600);
  backdrop-filter: blur(8px);
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 560px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.presenting .bb-hintbar { display: none; }

.bb-zoombar {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  overflow: hidden;
  backdrop-filter: blur(8px);
  z-index: 20;
}
.bb-zoombar button {
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 500;
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--neutral-600);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.bb-zoombar button:hover { background: var(--state-hover); color: var(--ink); }
.bb-zoombar .bb-zoom-pct { min-width: 52px; }
.bb-zoombar .bb-zoom-fit { border-left: 1px solid var(--border-1); }

/* ------- Drag ghost ------- */
.bb-drag-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.bb-ghost-card {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow-3);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--tr-headline);
  color: var(--ink);
}
.bb-ghost-pill {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-3);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.bb-ghost-pill.channel { background: var(--ink); color: var(--paper); }
.bb-ghost-pill.stash { background: var(--neutral-200); border-color: var(--neutral-400); }
.bb-ghost-pill.leak { border-color: var(--tokyo-red); color: var(--tokyo-red); }

/* ------- Present mode ------- */
.bb-present-head {
  position: absolute;
  top: 26px;
  left: 30px;
  z-index: 45;
  max-width: 58%;
  animation: bb-rise-in var(--dur-base) var(--ease-emphasis);
}
.bb-present-head input {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  width: 100%;
}
.bb-present-head input::placeholder { color: var(--neutral-300); }
.bb-present-head input:focus { outline: none; }
.bb-present-sub {
  font-family: var(--font-micro);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--neutral-500);
  margin-top: 6px;
}
.bb-present-controls {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 8px;
  z-index: 46;
  animation: bb-rise-in var(--dur-base) var(--ease-emphasis);
}
.bb-present-controls .bb-pc-group {
  display: inline-flex;
  background: var(--ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bb-present-controls button {
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 500;
  height: 34px;
  padding: 0 16px;
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--neutral-300);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.bb-present-controls button:hover { color: var(--paper); }
.bb-present-controls button.on { background: var(--paper); color: var(--ink); }
.bb-present-controls .bb-pc-btn { border-radius: var(--radius-pill); }

/* ------- Universe view (read-only presentation) ------- */
.bb-universe {
  position: absolute;
  inset: 0;
  background: var(--neutral-50);
  overflow: hidden;
}
.bb-universe svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.bb-universe.panning svg { cursor: grabbing; }
.bb-universe-note {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-micro);
  font-size: 11.5px;
  color: var(--neutral-600);
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
}
.presenting .bb-universe-note { display: none; }

.lmb-ring { fill: none; stroke: var(--ink); stroke-opacity: 0.06; stroke-width: 1; }
.lmb-ring.em { stroke-opacity: 0.13; }
.lmb-ring.leak {
  stroke: var(--tokyo-red);
  stroke-opacity: 0.14;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}
.lmb-ring-label {
  font-family: var(--font-micro);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  fill: var(--neutral-400);
  text-anchor: middle;
  pointer-events: none;
}
.lmb-ring-label.leak { fill: var(--tokyo-red); opacity: 0.65; }
.lmb-sun { fill: var(--ink); }
.lmb-sun-halo { fill: none; stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 1; }
.lmb-sun-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: var(--tr-display);
  fill: var(--paper);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.lmb-planet-body { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; transition: stroke-width var(--dur-fast) var(--ease-standard); }
.lmb-planet:hover .lmb-planet-body { stroke-width: 2.5; }
.lmb-planet-dot { stroke: none; }
.lmb-planet-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: var(--tr-headline);
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
}
.lmb-pill { fill: var(--paper); stroke: var(--border-2); stroke-width: 1; transition: stroke var(--dur-fast) var(--ease-standard); }
.lmb-outer:hover .lmb-pill { stroke: var(--ink); }
.lmb-pill-label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.lmb-pill-glyph {
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.02em;
  fill: var(--neutral-500);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.lmb-pill-dot { fill: var(--ink); pointer-events: none; }
.lmb-outer.stash .lmb-pill { fill: var(--neutral-200); stroke: transparent; }
.lmb-outer.stash:hover .lmb-pill { stroke: var(--neutral-400); }
.lmb-outer.stash .lmb-pill-label { fill: var(--neutral-700); }
.lmb-outer.channel .lmb-pill { fill: var(--ink); stroke: var(--ink); }
.lmb-outer.channel .lmb-pill-label { fill: var(--paper); }
.lmb-outer.channel:hover .lmb-pill { fill: var(--neutral-800); }
.lmb-outer.leak .lmb-pill { fill: var(--paper); stroke: var(--tokyo-red); stroke-width: 1.25; }
.lmb-outer.leak .lmb-pill-label { fill: var(--tokyo-red); }
.lmb-flow {
  fill: none;
  stroke-width: 2;
  transition: stroke-width var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
.lmb-flow.leak { stroke-dasharray: 7 5; }
.lmb-flow.work { stroke-width: 1.5; opacity: 0.7; }
.lmb-flow-arrow { transition: opacity var(--dur-fast) var(--ease-standard); }
.lmb-particle { opacity: 0.9; pointer-events: none; }
.bb-universe.hover-focus .lmb-flow { opacity: 0.22; }
.bb-universe.hover-focus .lmb-flow-arrow { opacity: 0.22; }
.bb-universe.hover-focus .lmb-flow.related { opacity: 1; stroke-width: 3; }
.bb-universe.hover-focus .lmb-flow-g.related .lmb-flow-arrow { opacity: 1; }
.bb-universe.hover-focus .lmb-flow-g .lmb-particle { opacity: 0.08; }
.bb-universe.hover-focus .lmb-flow-g.related .lmb-particle { opacity: 1; }

/* ------- Animations ------- */
@keyframes bb-rise-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ===================================================================
   Cost view — TypeOps cost model
   =================================================================== */
.cv-root {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: auto;
}
.cv-scroll {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px var(--page-padding-x, 48px) 80px;
}

/* headline */
.cv-eyebrow {
  font-family: var(--font-micro, var(--font-text));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 22px;
}
.cv-savings-label {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--neutral-600);
  margin-bottom: 10px;
}
.cv-savings-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 116px);
  line-height: 0.94;
  letter-spacing: var(--tr-display, -0.025em);
  color: var(--ink);
}
.cv-savings-sub {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 640px;
  margin-top: 18px;
  text-wrap: pretty;
}
.cv-savings-sub strong { font-weight: 600; }

/* comparison */
.cv-compare {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: 56px;
  border-top: 2px solid var(--ink);
  padding-top: 0;
}
.cv-col { padding: 28px 0 4px; }
.cv-col-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: var(--tr-headline, -0.01em);
  color: var(--ink);
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cv-col-title span {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--neutral-500);
}
.cv-mono .cv-col-title { color: var(--ink); }

.cv-delta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-300);
}
.cv-delta-arrow { font-family: var(--font-display); font-size: 30px; font-weight: 400; }

.cv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-1);
}
.cv-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv-row-label {
  font-family: var(--font-text);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.cv-row-formula {
  font-family: var(--font-micro, var(--font-text));
  font-size: 12px;
  color: var(--neutral-500);
  letter-spacing: 0.01em;
}
.cv-row-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cv-row.muted .cv-row-value { color: var(--neutral-400); }
.cv-row.strong {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  margin-top: 6px;
  padding-top: 16px;
}
.cv-row.strong .cv-row-label { font-size: 15px; font-weight: 600; }
.cv-row.strong .cv-row-value { font-size: 26px; font-weight: 700; }
.cv-today .cv-row.strong .cv-row-value { color: var(--tokyo-red); }
.cv-mono .cv-row.strong .cv-row-value { color: var(--ink); }

/* inputs */
.cv-inputs {
  margin-top: 64px;
  display: grid;
  gap: 40px;
}
.cv-inputs-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.cv-inputs-head h3 {
  font-family: var(--font-micro, var(--font-text));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.cv-reread {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  height: 26px;
  padding: 0 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cv-reread:hover { background: var(--state-hover); }
.cv-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 32px;
}
.cv-input { display: flex; flex-direction: column; gap: 8px; }
.cv-input-label {
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.cv-input-cap {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 1.35;
}

/* editable field */
.cv-field {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
  width: fit-content;
}
.cv-field .cv-affix {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--neutral-500);
}
.cv-field input {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  border: 0;
  background: transparent;
  padding: 0;
  width: 88px;
  font-variant-numeric: tabular-nums;
}
.cv-field input:focus { outline: none; }
.cv-field:focus-within { border-bottom-color: var(--tokyo-red); }

.cv-foot {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--border-1);
  font-family: var(--font-text);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--neutral-500);
  max-width: 620px;
}

/* licensing configurator */
.cv-lic-intro {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--neutral-600);
  max-width: 560px;
  margin: -8px 0 22px;
}
.cv-lic-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-1);
}
.cv-lic-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-1);
}
.cv-lic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 280px;
}
.cv-lic-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-lic-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neutral-400);
  border-radius: var(--radius-sm, 2px);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.cv-lic-row.on .cv-lic-box { background: var(--ink); border-color: var(--ink); }
.cv-lic-row.on .cv-lic-box::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -57%) rotate(45deg);
}
.cv-lic-toggle:hover .cv-lic-box { border-color: var(--ink); }
.cv-lic-name {
  font-family: var(--font-text);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--neutral-500);
  transition: color var(--dur-fast) var(--ease-standard);
}
.cv-lic-row.on .cv-lic-name { color: var(--ink); }
.cv-lic-scopes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 22px;
  margin-left: auto;
}
.cv-lic-scope { display: flex; flex-direction: column; gap: 5px; }
.cv-lic-scope-label {
  font-family: var(--font-micro, var(--font-text));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.cv-lic-scope select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 3px 26px 5px 2px;
  cursor: pointer;
  min-width: 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.cv-lic-scope select:focus { outline: none; border-bottom-color: var(--tokyo-red); }
.cv-lic-flag {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
}

/* present mode: clear the floating view controls */
.bb-shell.presenting .cv-scroll { padding-top: 88px; }

@media (max-width: 720px) {
  .cv-compare { grid-template-columns: 1fr; }
  .cv-delta { display: none; }
  .cv-mono { border-top: 1px solid var(--border-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Print one-pager — the end-of-meeting client leave-behind. Hidden on
   screen; @media print hides the app chrome and lays the .print-sheet out
   as a single A4 page. .lmb-print-preview is a dev-only escape hatch to
   eyeball the layout on screen (add the class to <body>); it does nothing
   in production.
   ========================================================================= */
.print-sheet { display: none; }

.lmb-print-preview .bb-shell { display: none !important; }
.lmb-print-preview .print-sheet {
  display: block;
  max-width: 760px;
  margin: 24px auto;
  box-shadow: 0 2px 24px rgba(0,0,0,0.12);
}

@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; height: auto !important; }
  .bb-shell { display: none !important; }
  .print-sheet { display: block !important; }
}

/* Shared layout for both the print target and the dev preview. */
.print-sheet {
  color: var(--ink);
  background: #fff;
  font-family: var(--font-text);
  padding: 30px 34px 24px;
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.print-sheet h3 { margin: 0; }

.ps-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.ps-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ps-dot { color: var(--tokyo-red); }
.ps-headmeta { text-align: right; }
.ps-client {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
}
.ps-subtitle { font-size: 11px; color: var(--neutral-500); margin-top: 3px; }

.ps-hero {
  margin: 22px 0 20px;
  padding: 20px 22px;
  background: var(--neutral-100);
  border-radius: 12px;
}
.ps-hero-label {
  font-family: var(--font-micro);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.ps-hero-big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
}
.ps-hero-sub { font-size: 13px; line-height: 1.5; color: var(--neutral-700); max-width: 60ch; }
.ps-hero-sub strong { color: var(--ink); font-weight: 500; }

.ps-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
.ps-col {
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 14px 16px;
}
.ps-col-mono { border-color: var(--ink); }
.ps-col-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 8px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-1);
}
.ps-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 12.5px;
}
.ps-row-label { color: var(--neutral-700); }
.ps-row-value { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.ps-row.muted .ps-row-label, .ps-row.muted .ps-row-value { color: var(--neutral-400); }
.ps-row.strong {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-1);
  font-size: 14px;
}
.ps-row.strong .ps-row-label { color: var(--ink); font-weight: 500; }
.ps-row.strong .ps-row-value { font-size: 16px; }

.ps-section-title {
  font-family: var(--font-micro);
  font-size: 11px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 10px !important;
}
.ps-board { margin-bottom: 20px; }
.ps-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  font-size: 12.5px;
  break-inside: avoid;
}
.ps-step-num {
  font-family: var(--font-micro);
  font-size: 11px;
  color: var(--neutral-400);
  font-variant-numeric: tabular-nums;
}
.ps-step-title { font-weight: 500; flex: 1; }
.ps-step-depts { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-dept { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--neutral-700); }
.ps-dept-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ps-step-people { font-size: 11px; color: var(--neutral-500); white-space: nowrap; }
.ps-empty { font-size: 12.5px; color: var(--neutral-500); margin: 0; }

.ps-flow-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ps-flow-stat {
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}
.ps-flow-stat.risk { border-color: var(--tokyo-red); }
.ps-flow-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
}
.ps-flow-stat.risk .ps-flow-num { color: var(--tokyo-red); }
.ps-flow-label { font-size: 11.5px; font-weight: 500; margin-top: 5px; }
.ps-flow-hint { font-size: 10px; color: var(--neutral-500); margin-top: 2px; }

.ps-foot {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--border-1);
  font-size: 10px;
  color: var(--neutral-400);
  line-height: 1.5;
}

/* =========================================================================
   Saved Maps library — gallery modal + save toast
   ========================================================================= */
.lmb-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 9, 0.32);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 88px 24px 24px;
}
.lmb-modal {
  width: 100%;
  max-width: 720px;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.lmb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-1);
}
.lmb-modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lmb-modal-x {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--neutral-500);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-md);
}
.lmb-modal-x:hover { background: var(--state-hover); color: var(--ink); }
.lmb-modal-empty {
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  color: var(--neutral-500);
  font-size: 14px;
  line-height: 1.6;
}
.lmb-map-grid {
  list-style: none;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.lmb-map-card {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px;
  background: var(--neutral-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.lmb-map-card:hover {
  background: var(--paper);
  border-color: var(--ink);
}
.lmb-map-card:active { transform: translateY(1px); }
.lmb-map-client {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lmb-map-meta {
  font-size: 11px;
  color: var(--neutral-500);
  font-family: var(--font-micro);
}
.lmb-map-card::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--tokyo-red);
  margin-bottom: 4px;
}

.lmb-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-family: var(--font-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  animation: lmb-toast-in 0.18s ease-out;
}
.lmb-toast.warn { background: var(--tokyo-red); }
@keyframes lmb-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Map-name field in the top bar + the map name on a gallery card */
.bb-mapname { width: 128px; }
.lmb-map-name {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--neutral-600);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon-only toolbar buttons (undo/redo) — inherit .bb-topbar button styling,
   just center the glyph. currentColor + the existing :disabled opacity apply. */
.bb-topbar button.bb-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; }
.bb-topbar button.bb-icon-btn svg { display: block; }

/* Placeholder shown for the Entity / Org Chart boards until their node types land. */
.bb-board-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--neutral-500);
  pointer-events: none;
}
.bb-board-placeholder strong { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--neutral-700); }
.bb-board-placeholder p { margin: 0; font-size: 14px; max-width: 440px; line-height: 1.6; }

/* =========================================================================
   Entity board — typed cards + inspector controls
   ========================================================================= */
.bb-typed {
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-top-width: 3px;
  border-top-style: solid;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: 9px 12px 12px;
  cursor: grab;
  user-select: none;
}
.bb-typed.selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-2); }
.bb-typed.link-target { box-shadow: 0 0 0 2px var(--saopaulo-green); }
.bb-typed-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.bb-typed-badge { font-family: var(--font-micro); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); }
.bb-typed-lic { font-family: var(--font-micro); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--paper); padding: 2px 6px; border-radius: var(--radius-pill); white-space: nowrap; }
.bb-typed-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.bb-typed-region { margin-top: 3px; font-size: 11px; color: var(--neutral-500); }

.bb-lic-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-lic-toggle {
  flex: 1;
  min-width: 64px;
  border: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--neutral-600);
  font-family: var(--font-text);
  font-size: 12px;
  padding: 7px 6px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.bb-lic-toggle:hover { border-color: var(--lic-color); color: var(--ink); }
.bb-lic-toggle.on { background: var(--lic-color); border-color: var(--lic-color); color: var(--paper); }
.bb-notes {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--ink);
  background: var(--neutral-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 8px;
}
.bb-notes:focus { outline: none; border-color: var(--ink); background: var(--paper); }

/* ---------- font counts: inspector rows, card chip, board rollup ---------- */
/* The cap styling below is the ONLY thing that changes when a board goes over
   its cap. Nothing is disabled or blocked — visibility, not enforcement. */

.bb-font-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.bb-font-row .bb-font-other { flex: 1 0 100%; }

/* Direct children only: the stepper's number cell is an input too, and must
   keep its own tight metrics rather than picking these up. */
.bb-inspector .bb-font-row > input[type="text"] { font-size: 12.5px; padding: 5px 8px; }

/* The foundry dropdown matches the text box in a "People who touch it" row —
   same font, padding, border and radius. A <select> inherits none of the
   inspector's input styling, which is what left it looking cramped, so the
   native chrome is reset and the chevron redrawn. */
.bb-inspector .bb-font-row .bb-font-foundry {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12.5px;
  line-height: normal;
  padding: 5px 26px 5px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
}
.bb-inspector .bb-font-row .bb-font-foundry:focus { outline: none; border-color: var(--ink); }

.bb-card-fonts { margin-top: 7px; }
.bb-fontcount-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--neutral-100);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.bb-fontcount-chip .bb-fontcount-aa {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--paris-blue);
}

.bb-rollup { position: relative; flex: 0 0 auto; }
.bb-rollup-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.bb-rollup-chip .bb-fonts-aa {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--tr-headline);
  color: var(--neutral-400);
}
.bb-rollup-chip strong { font-weight: 600; }
.bb-rollup-slash { color: var(--neutral-600); font-size: 12px; }
.bb-rollup-flag {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--tokyo-red);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
}
.bb-rollup.over .bb-rollup-chip {
  border-color: var(--tokyo-red);
  background: var(--tokyo-red-xlight);
  color: var(--ink);
}
.bb-rollup.over .bb-rollup-chip .bb-fonts-aa { color: var(--tokyo-red); }

.bb-rollup-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 260px;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  padding: 12px;
  text-align: left;
  white-space: normal;
}
.bb-rollup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.bb-rollup-head h3 {
  margin: 0;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.bb-rollup-warn {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--tokyo-red-xlight);
  border-left: 3px solid var(--tokyo-red);
  border-radius: var(--radius-md);
  padding: 7px 9px;
  margin-bottom: 8px;
}
.bb-rollup-rows { border-top: 1px solid var(--border-1); padding-top: 8px; }
.bb-rollup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  padding: 4px 0;
}
.bb-rollup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.bb-rollup-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- unassigned role slots ---------- */
/* A template ships role slots blank so the same structure fits any client.
   Until one is named, it reads as clearly "still to fill" — dashed and muted
   rather than looking like a finished chip. */
.bb-role-chip.unassigned {
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--neutral-500);
  font-style: italic;
  padding: 1px 7px;
}
.bb-inspector .bb-role-label.unassigned {
  border-style: dashed;
  background: var(--neutral-50);
}
.bb-inspector .bb-role-label.unassigned::placeholder {
  color: var(--neutral-500);
  font-style: italic;
}

/* ---------- template setup step ---------- */
/* Reuses the .lmb-modal shell. Skipping is a first-class path, so the skip
   control sits level with the confirm rather than being tucked away. */
.bb-setup { max-width: 560px; }
.bb-setup-intro {
  margin: 0;
  padding: 14px 22px 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--neutral-600);
}
.bb-setup-list {
  overflow-y: auto;
  padding: 12px 22px 4px;
}
.bb-setup-group { margin-bottom: 14px; }
.bb-setup-group h3 {
  margin: 0 0 7px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
}
.bb-setup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.bb-setup-row label {
  flex: 0 0 148px;
  font-size: 12.5px;
  color: var(--neutral-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-setup-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}
.bb-setup-row input:focus { outline: none; border-color: var(--ink); }
.bb-setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-1);
  margin-top: 6px;
}
.bb-setup-skip {
  font: inherit;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-600);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  cursor: pointer;
}
.bb-setup-skip:hover { border-color: var(--ink); color: var(--ink); }
/* `.primary` is only coloured as `.bb-topbar button.primary`, so outside the
   top bar it fell back to a raw browser button sitting next to the styled Skip.
   Match the top bar's filled-primary treatment, and mirror Skip's metrics so
   the pair reads as one set of controls. */
.bb-setup-actions .primary {
  font: inherit;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.bb-setup-actions .primary:hover {
  background: var(--neutral-800);
  border-color: var(--neutral-800);
}
.bb-setup-actions .primary:focus-visible { outline: none; background: var(--neutral-800); }

/* ---------- save as template dialog ---------- */
.bb-savetmpl { max-width: 460px; }
.bb-savetmpl-body { padding: 16px 22px 4px; }
.bb-savetmpl-body .bb-field { margin-bottom: 10px; }
.bb-savetmpl-body input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 7px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}
.bb-savetmpl-body input[type="text"]:focus { outline: none; border-color: var(--ink); }

/* ---------- brand menu (file operations + Cost) ---------- */
/* NOTE ON SPECIFICITY: this menu lives inside .bb-topbar, and
   `.bb-topbar button` (0,1,1) sets border, pill radius, height, padding,
   font-size and background on every button in the header. Plain
   `.bb-brandmenu-item` (0,1,0) LOSES to it, which is why the rows kept
   rendering as bordered pills. Every rule here is scoped through .bb-topbar
   so it actually wins. Don't drop the prefix. */

.bb-brand { display: flex; align-items: center; }
.bb-brandmenu { position: relative; flex: 0 0 auto; }

/* The wordmark is a button, so it has to beat the header's button styling to
   keep the display face — but it borrows that styling's SHAPE. At rest the
   border is transparent so it reads as a wordmark; on hover and while open it
   resolves to the same pill the other header controls use, so it sits in the
   row as a sibling of Present rather than a different kind of thing. */
.bb-topbar .bb-brandmenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  font: inherit;
  letter-spacing: inherit;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.bb-topbar .bb-brandmenu-trigger:hover {
  border-color: var(--border-2);
  background: var(--state-hover);
}
.bb-topbar .bb-brandmenu-trigger:focus-visible { outline: none; border-color: var(--ink); }
.bb-topbar .bb-brandmenu-trigger.on {
  border-color: var(--ink);
  background: var(--state-hover);
}
.bb-brandmenu-caret { font-size: 11px; line-height: 1; color: var(--neutral-500); }
.bb-topbar .bb-brandmenu-trigger.on .bb-brandmenu-caret { color: var(--ink); }

.bb-brandmenu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1200;
  min-width: 244px;
  padding: 6px 0;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.20);
  overflow: hidden;             /* rows run edge to edge inside the radius */
}

/* A plain menu row: full width, square, no border of its own. */
.bb-topbar .bb-brandmenu-panel .bb-brandmenu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: 9px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
}
/* Highlighted only under the pointer, or where the keyboard has moved
   (.active). Not :focus — DOM focus lingers on the last keyboard row and
   would leave it marked after the mouse took over. */
.bb-topbar .bb-brandmenu-panel .bb-brandmenu-item:hover,
.bb-topbar .bb-brandmenu-panel .bb-brandmenu-item.active {
  outline: none;
  background: var(--neutral-100);
  color: var(--ink);
}
.bb-topbar .bb-brandmenu-panel .bb-brandmenu-item:focus { outline: none; }

/* Shortcuts and the storage readout are reference, not content. */
.bb-brandmenu-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--neutral-400);
  font-variant-numeric: tabular-nums;
}

/* Grouping by space rather than a rule — one less line in a small panel. */
.bb-brandmenu-sep { height: 7px; }

/* ---------- cost section ---------- */
/* Cost sits INSIDE the app shell rather than covering it, so the top bar and
   its menu stay available and going back is the same control that got you
   here. It fills the main area and scrolls on its own. */
.bb-cost-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  z-index: 2;
}
.bb-cost-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border-1);
  flex: 0 0 auto;
}
.bb-cost-bar h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bb-cost-body { flex: 1; min-height: 0; overflow: auto; }

/* ---------- saved maps: client list, then that client's boards ---------- */
/* Level one is a plain vertical list of clients — quicker to scan in front of
   someone than a grid, and it matches how the files are filed on disk. */
.lmb-client-list {
  list-style: none;
  margin: 0;
  padding: 12px;
  overflow-y: auto;
}
.lmb-client-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  text-align: left;
  background: var(--neutral-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.lmb-client-list li + li { margin-top: 8px; }
.lmb-client-row:hover,
.lmb-client-row:focus-visible {
  outline: none;
  background: var(--paper);
  border-color: var(--ink);
}
.lmb-client-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lmb-client-count {
  font-family: var(--font-micro);
  font-size: 11px;
  color: var(--neutral-500);
  white-space: nowrap;
}
.lmb-client-chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--neutral-400);
}
.lmb-client-row:hover .lmb-client-chevron { color: var(--ink); }

/* Inside a client the map name is the card's headline, not a subtitle. */
.lmb-map-grid.in-client .lmb-map-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.lmb-modal-nav { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lmb-back,
.bb-back {
  flex: 0 0 auto;
  font: inherit;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-600);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  cursor: pointer;
}
.lmb-back:hover,
.lmb-back:focus-visible,
.bb-back:hover,
.bb-back:focus-visible { outline: none; border-color: var(--ink); color: var(--ink); }

/* ---------- saved maps search ---------- */
.lmb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 0 12px;
  background: var(--neutral-50);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
}
.lmb-search:focus-within { border-color: var(--ink); background: var(--paper); }
.lmb-search-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--neutral-500);
  flex: 0 0 auto;
}
.lmb-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 11px 0;
}
.lmb-search input:focus { outline: none; }
.lmb-search-clear {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--neutral-500);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.lmb-search-clear:hover { color: var(--ink); background: var(--state-hover); }

.bb-path {
  font-family: var(--font-micro);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--neutral-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  word-break: break-all;
}

/* ---------- board rows: open is primary, the rest secondary ---------- */
.lmb-board-list { list-style: none; margin: 0; padding: 12px; overflow-y: auto; }
.lmb-board-item + .lmb-board-item { margin-top: 8px; }
.lmb-board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--neutral-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.lmb-board-row:hover { border-color: var(--border-2); }
.lmb-board-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 0;
}
.lmb-board-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lmb-board-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.lmb-board-actions button {
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--neutral-600);
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  cursor: pointer;
}
.lmb-board-actions button:hover { border-color: var(--ink); color: var(--ink); }
.lmb-board-actions button.danger:hover {
  border-color: var(--tokyo-red);
  color: var(--tokyo-red);
}

.lmb-history {
  margin: 6px 0 0 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--border-2);
}
.lmb-history ul { list-style: none; margin: 0; padding: 0; }
.lmb-history li + li { margin-top: 4px; }
.lmb-history button,
.lmb-conflicts button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 9px;
  cursor: pointer;
}
.lmb-history button:hover,
.lmb-conflicts button:hover { background: var(--neutral-50); border-color: var(--border-2); }
.lmb-history-stamp {
  font-family: var(--font-micro);
  font-size: 11.5px;
  color: var(--ink);
}
.lmb-history-open {
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--neutral-500);
}

.lmb-conflicts {
  margin: 0 12px 12px;
  padding: 12px 14px;
  border: 1px solid var(--berlin-yellow);
  border-radius: var(--radius-md);
  background: var(--berlin-yellow-xlight);
}
.lmb-conflicts h3 {
  margin: 0 0 4px;
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.lmb-conflicts ul { list-style: none; margin: 8px 0 0; padding: 0; }
.lmb-conflicts span:first-child { font-size: 12px; color: var(--ink); }

.bb-add-select-channel {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  height: 30px;
  padding: 0 10px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--neutral-500);
  cursor: pointer;
  margin-top: 2px;
}
.bb-add-select-channel:focus { outline: none; border-color: var(--ink); }

/* ---------- channel branches on the canvas ---------- */
/* The channel node itself is the entry point: its + / chevron opens the
   downstream workflow, and the branch steps are ordinary draggable nodes. */
.bb-chan-open {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  font-family: var(--font-micro);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--neutral-600);
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  cursor: pointer;
}
.bb-chan-open:hover { border-color: var(--woburn-indigo); color: var(--woburn-indigo); }
.bb-chan-open.open {
  background: var(--woburn-indigo);
  border-color: var(--woburn-indigo);
  color: var(--paper);
}
.bb-chan-open .bb-chevron { font-size: 11px; }

/* Keep a channel that owns a workflow readable with the fonts layer off. */
.fonts-off .bb-font.has-flow { opacity: 1; }

.bb-flow-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--woburn-indigo);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bb-flow-card:hover { border-color: var(--woburn-indigo); }
.bb-flow-card.selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--woburn-indigo-xlight); }
.bb-flow-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bb-flow-card-chan {
  font-family: var(--font-micro);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--woburn-indigo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-flow-card-num {
  font-family: var(--font-micro);
  font-size: 9.5px;
  color: var(--neutral-400);
}
.bb-flow-card-title {
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-flow-card-meta {
  display: flex;
  gap: 8px;
  font-family: var(--font-micro);
  font-size: 9.5px;
  color: var(--neutral-500);
}

.bb-flow-add {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--neutral-500);
  background: transparent;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.bb-flow-add:hover { border-color: var(--woburn-indigo); color: var(--woburn-indigo); }

.bb-flow-links .bb-link-line { stroke: var(--woburn-indigo); stroke-dasharray: 4 4; opacity: 0.8; }
.bb-flow-links .bb-link-arrow { fill: var(--woburn-indigo); opacity: 0.8; }

/* channel rows in the step inspector */
.bb-chan-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.bb-chan-row-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-chan-row-meta {
  font-family: var(--font-micro);
  font-size: 10px;
  color: var(--neutral-500);
  white-space: nowrap;
}
.bb-chan-row select {
  flex: 0 0 96px;
  font: inherit;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--neutral-600);
}