/* BaselineZero kit: the class layer the React components render to. Use either. */

.bz-ground { background: var(--ground-layered); background-color: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.bz-shell { display: flex; min-height: 100vh; }
.bz-main { flex: 1; min-width: 0; padding: var(--main-pad); }
.bz-grid { display: grid; grid-template-columns: minmax(0,1fr) var(--aside-w); gap: var(--grid-gap); align-items: start; }
.bz-grid--wide { grid-template-columns: minmax(0,1fr) var(--aside-w-wide); }

/* Type */
.bz-h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); margin: 0 0 10px; color: var(--ink); }
.bz-lede { font: var(--text-lede); color: var(--muted); margin: 0 0 var(--after-header); }
.bz-eyebrow { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.bz-eyebrow--violet { color: var(--action-text); }
.bz-eyebrow--violet-deep { color: var(--violet-700); }
.bz-eyebrow--mint { color: var(--mint-ink); }
.bz-back { display: inline-flex; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); text-decoration: none; margin: 0 0 12px; transition: color var(--dur-fast); }
.bz-back:hover { color: var(--ink); }
.bz-link { font: var(--text-button-sm); font-weight: 500; color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast); }
.bz-link:hover { border-bottom-color: var(--link); }
.bz-link--strong { font-weight: 600; border-bottom: none; }
.bz-proof { display: flex; align-items: center; gap: 8px; font: var(--text-meta); color: var(--muted); margin: 0; }
.bz-proof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-600); flex: none; }

/* Buttons */
.bz-btn { font-family: var(--font-sans); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; border-radius: var(--radius-button); transition: background var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); }
.bz-btn:active { transform: var(--press); }
.bz-btn--primary { font: var(--text-button); height: var(--btn-h-lg); padding: 0 28px; background: var(--violet-500); color: var(--on-action); }
.bz-btn--primary:hover { background: var(--violet-600); }
.bz-btn--ink { font: var(--text-button-sm); height: var(--btn-h); padding: 0 18px; background: var(--ink); color: #fff; }
.bz-btn--ink:hover { background: var(--action-ink-hover); }
.bz-btn--ghost { font: var(--text-button-sm); font-weight: 500; height: var(--btn-h); padding: 0 18px; background: var(--tint); color: var(--ink); }
.bz-btn--ghost:hover { background: var(--tint-hover); }
.bz-btn--client { font: var(--text-button-sm); height: var(--touch-client); padding: 0 24px; width: 100%; background: var(--violet-500); color: var(--on-action); }
.bz-btn--client:hover { background: var(--violet-600); }
.bz-btn--block { width: 100%; }

/* Pills, chips, avatars, marks */
.bz-pill { display: inline-flex; align-items: center; font: var(--text-pill); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.bz-pill--ai { color: var(--violet-700); background: var(--gradient-pill); }
.bz-pill--warn { color: var(--orange-700); background: var(--peach); }
.bz-pill--ok { color: var(--green-700); background: var(--green-100); }
.bz-pill--red { color: var(--red-700); background: var(--red-100); }   /* broken: a failed connection (2026-10-08) */
.bz-pill--mint { color: var(--mint-ink); background: var(--mint); }
.bz-pill--neutral { color: var(--ink-3); background: var(--tile-hover); }
.bz-chip { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.3 var(--font-sans); padding: 7px 12px; border-radius: var(--radius-pill); cursor: pointer; border: none; background: var(--tile-hover); color: var(--ink-3); transition: var(--transition-tint); }
.bz-chip:hover { background: var(--tint-hover); }
.bz-chip__n { font-variant-numeric: tabular-nums; opacity: .75; }
.bz-chip--on, .bz-chip--on:hover { background: var(--ink); color: #fff; }
.bz-chip--warn { background: var(--peach); color: var(--orange-700); }
.bz-chip--violet { background: var(--lavender); color: var(--violet-700); }
.bz-chip--ok { background: var(--green-100); color: var(--green-700); }
.bz-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar); height: var(--avatar); border-radius: 50%; background: var(--tile-hover); color: var(--ink-3); font: 600 10px/1 var(--font-sans); flex: none; }
.bz-avatar--ink { background: var(--ink); color: #fff; }
.bz-avatar { overflow: hidden; flex: none; }
.bz-avatar__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bz-avatar--mint { background: #fff; color: var(--mint-ink); }
.bz-avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: 12px; }
.bz-avatar--empty { background: transparent; border: 2px dashed var(--mint-line); box-sizing: border-box; }
.bz-client-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-chip); font: 600 9.5px/1 var(--font-sans); flex: none; background: var(--tile-hover); color: var(--ink-3); }
.bz-client-chip--violet { background: var(--violet-100); color: var(--violet-700); }
.bz-client-chip--warn { background: var(--peach); color: var(--orange-700); }
.bz-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--mark); height: var(--mark); border-radius: 50%; flex: none; box-sizing: border-box; }
.bz-mark--todo { border: var(--outline-w) solid var(--outline); }
.bz-mark--person { background: var(--ink); }
.bz-mark--system { background: var(--green-500); }
.bz-mark--step { border: var(--outline-w) solid var(--outline); font: 600 11px/1 var(--font-sans); color: var(--muted); }
.bz-mark svg { width: 14px; height: 14px; }

/* Toggle */
.bz-toggle { display: inline-flex; background: var(--tint); border-radius: var(--radius-button); padding: 4px; font: 600 13px/1 var(--font-sans); }
.bz-toggle__opt { padding: 7px 14px; border-radius: var(--radius-toggle-opt); color: var(--muted); border: none; background: transparent; cursor: pointer; font: inherit; transition: var(--transition-tint); }
.bz-toggle__opt:hover { color: var(--ink); }
.bz-toggle__opt--on, .bz-toggle__opt--on:hover { background: var(--ink); color: #fff; }

/* Sections and rows: lists live on the ground */
.bz-section { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; padding: 0 6px; }
.bz-section__title { font: var(--text-section); color: var(--ink); }
.bz-section__count { font: var(--text-support); color: var(--muted); }
.bz-section__count a { color: var(--violet-700); font-weight: 600; text-decoration: none; }
.bz-row { display: flex; align-items: center; gap: 16px; padding: var(--row-pad); border-bottom: var(--hairline-w) solid var(--hairline); text-decoration: none; color: var(--ink); border-radius: var(--radius-row); transition: background var(--dur-fast); }
.bz-row:hover { background: var(--row-hover); }
.bz-row:active { background: var(--row-active); }
.bz-row__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; font: var(--text-row); }
.bz-row--done .bz-row__title > span:first-child { color: var(--faint); }
/* The line through a done task draws across rather than appearing (owner, 2026-09-30: a tick should
   "cross out then go to the bottom of the list"). A background line, since text-decoration cannot
   animate, and it runs across every line of a title that wraps. */
.bz-row__title > span:first-child, .bz-row__title > a, .bz-row__line > span:first-child, .bz-row__line > a {
  transition: color .38s ease-out; }
/* On the inline text, not the flex item: an inline paints its background on every line it wraps
   onto, so a two-line title is struck through both lines rather than once between them. Owner,
   2026-09-30: "the strikethrough … should be through the text not in the middle." */
.bz-row__text {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 56%; background-size: 0 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .38s ease-out; }
.bz-row--done .bz-row__text { background-size: 100% 1.5px; }
/* The check lands with a small pop when it is clicked, and only then (nav.js adds the class). */
.bz-mark--pop svg { animation: bzPhaseCheck .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.bz-row__meta { font: var(--text-support); color: var(--muted); white-space: nowrap; }
.bz-row__meta--ok { color: var(--green-700); font-weight: 600; }
.bz-row__meta--warn { color: var(--orange-700); font-weight: 600; }
/* Rhythm: the next few rows carry full weight; the rest step down a size and a shade (never below --muted). */
.bz-row--soon { padding: 13px 6px; }
.bz-row--soon .bz-row__time { color: var(--ink); font-weight: 500; font-size: 14px; }
.bz-row--later { padding: 9px 6px; }
.bz-row--later .bz-row__title { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.bz-row--later .bz-row__time, .bz-row--later .bz-row__meta { font-size: 12.5px; }
.bz-flight--later { padding: 10px 6px; }
.bz-flight--later .bz-flight__name { font-size: 14.5px; font-weight: 400; color: var(--ink-2); }
.bz-later-label { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin: 22px 6px 4px; }
/* Wide enough for "tomorrow" and "overdue", so the word's length never moves what sits beside it (2026-10-06). */
.bz-row__time { font: var(--text-support); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.bz-row--grid { display: grid; grid-template-columns: 52px minmax(0,1fr) 170px 26px; padding: 11px 6px; }
.bz-row--grid .bz-row__title { font: var(--text-row-sm); font-size: 14.5px; }
/* A device from NinjaOne (068): its name never breaks at a hyphen; on a phone its kind drops beneath it. */
.bz-row--device .bz-row__title { flex-wrap: wrap; row-gap: 2px; }
.bz-row--device .bz-row__title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bz-flight { display: flex; flex-direction: column; gap: 8px; padding: var(--row-pad-sm); border-bottom: var(--hairline-w) solid var(--hairline); text-decoration: none; color: var(--ink); border-radius: var(--radius-row); transition: background var(--dur-fast); }
.bz-flight:hover { background: var(--row-hover); }
.bz-flight__top { display: flex; align-items: baseline; gap: 10px; }
.bz-flight__name { flex: 1; font: 500 15.5px/1.4 var(--font-sans); }
.bz-flight__status { font: 600 12.5px/1.3 var(--font-sans); }
.bz-flight__bottom { display: flex; align-items: center; gap: 10px; }
.bz-flight__meta { font: var(--text-label); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.bz-tone--ok { color: var(--green-700); } .bz-tone--warn { color: var(--orange-700); } .bz-tone--violet { color: var(--violet-700); } .bz-tone--red { color: var(--red-700); }

/* Bars and rings */
.bz-bar { flex: 1; height: var(--bar-h); border-radius: var(--radius-pill); background: var(--hairline); overflow: hidden; }
.bz-bar--lg { height: var(--bar-h-lg); }
.bz-bar__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--gradient-bar); transform-origin: left; animation: bzGrow 1s var(--reveal-ease) both; animation-delay: calc(var(--d, 0) * 1ms + 120ms); }
.bz-bar__fill--warn { background: var(--orange-500); }
.bz-bar__fill--neutral { background: var(--disabled); }
.bz-bar__fill--mint { background: var(--mint-ink); }
.bz-ring { position: relative; width: var(--ring); height: var(--ring); flex: none; }
.bz-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.bz-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bz-ring__value { font: var(--text-numeral-lg); letter-spacing: var(--tracking-numeral-lg); font-variant-numeric: tabular-nums; color: var(--ink); }
.bz-ring__label { font: var(--text-label); font-weight: 400; color: var(--muted); margin-top: 4px; }

/* The one card */
.bz-hero-wrap { position: relative; margin-bottom: var(--space-15); }
.bz-halo { position: absolute; inset: var(--halo-inset); border-radius: 30px; background: var(--gradient-halo); filter: blur(var(--halo-blur)); opacity: var(--halo-opacity); animation: bzHalo 1.2s var(--reveal-ease) both; animation-delay: calc(var(--d, 220) * 1ms + 40ms); }
.bz-hero { position: relative; display: flex; align-items: stretch; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease); }
.bz-hero:hover { transform: var(--lift); box-shadow: var(--shadow-card-hover); }
.bz-hero__body { flex: 1; min-width: 0; padding: var(--card-pad); }
.bz-hero__title { font: var(--text-h2); letter-spacing: var(--tracking-h2); margin: 0 0 8px; color: var(--ink); }
.bz-hero__title--sm { font: var(--text-h2-sm); }
.bz-hero__line { font: 400 15.5px/1.5 var(--font-sans); color: var(--muted); margin: 0 0 8px; }
.bz-hero__line--proof { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.bz-hero__line--proof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-600); flex: none; margin-top: 9px; }
.bz-hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
/* Where the card's task sits, small at the foot's right: "Handover · 3/8" (the Plan tab, R47). */
.bz-hero__where { margin-left: auto; font: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A narrow card (a vertical monitor; the plan beside its aside): the actions wrap rather than clip
   (owner, 2026-10-09: "on a vertical monitor the prep 1/7 on the main card is cut off"), and the
   number panel answers to the CARD's width, not the window's: narrower beside the words, then under
   them. */
.bz-hero__actions { flex-wrap: wrap; row-gap: 12px; }
.bz-hero-wrap { container-type: inline-size; }
@container (max-width: 720px) {
  .bz-hero .bz-numeral { width: 188px; padding: 20px 16px; }
}
@container (max-width: 560px) {
  .bz-hero { flex-direction: column; }
  .bz-hero .bz-numeral { width: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 12px; padding: 16px 24px 18px; text-align: left; }
  .bz-hero .bz-numeral__value { font-size: 44px; }
}
.bz-hero--compact { align-items: center; gap: 24px; padding: 24px 30px; }
.bz-hero--compact .bz-hero__body { padding: 0; }
.bz-numeral { width: var(--side-panel-w); flex: none; background: var(--violet-50); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; }
.bz-numeral__value { font: var(--text-numeral-xl); letter-spacing: var(--tracking-numeral-xl); font-variant-numeric: tabular-nums; color: var(--ink); }
.bz-numeral__label { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.bz-numeral__caption { font: var(--text-caption); color: var(--muted); }
.bz-numeral__verdict { font: 600 12.5px/1.4 var(--font-sans); }
.bz-numeral__value { animation: bzIn .9s var(--reveal-ease) both; animation-delay: calc(var(--d, 220) * 1ms + 200ms); }

/* The AI block and the client block */
.bz-ai { position: relative; display: flex; background: var(--gradient-ai); border-radius: var(--radius-card); overflow: hidden; }
/* The AI block's edge ran down its left side in the design (.bz-ai__edge). It runs along the top now,
   as .bz-prism-top, like every other rainbow line: owner, 2026-09-30, "should always be on top". */
.bz-ai__body { flex: 1; min-width: 0; padding: 26px 26px 24px; }
.bz-ai__head { font: 300 23px/1.25 var(--font-sans); letter-spacing: var(--tracking-h2); margin: 0 0 18px; color: var(--ink); }
.bz-receipts { display: flex; flex-direction: column; gap: 10px; }
.bz-receipt { display: flex; align-items: center; gap: 10px; font: var(--text-support); color: var(--ink-2); }
.bz-receipt svg { width: 14px; height: 14px; flex: none; }
.bz-receipt__text { flex: 1; }
.bz-receipt__source { color: var(--muted); font-variant-numeric: tabular-nums; }
.bz-ai__link { display: inline-block; margin-top: 18px; font: var(--text-button-sm); color: var(--violet-700); text-decoration: none; }
.bz-client { background: var(--mint); border-radius: var(--radius-card); padding: var(--block-pad); }
.bz-client__head { font: var(--text-display); letter-spacing: var(--tracking-h2); margin: 0 0 6px; color: var(--ink); }
.bz-client__body { font: var(--text-support); color: var(--mint-muted); margin: 0 0 18px; }
.bz-client__link { font: var(--text-button-sm); color: var(--mint-ink); text-decoration: none; border-bottom: 1px solid rgba(8,107,96,.35); }

/* Rail and tabs */
.bz-rail { width: var(--rail-w); flex: none; display: flex; flex-direction: column; align-items: center; padding: var(--rail-pad); gap: 6px; }
/* Sized by its width/height attributes: 30 × 30 for Debut's mark, the drawn size for an MSP's. A CSS width
   here would override those — which is how a square internal logo came out at 46px, not 30. */
.bz-rail__logo { object-fit: contain; margin-bottom: 22px; }
/* The MSP's internal logo, any shape: sized by its width/height attributes (brand.js railLogoBox) —
   a square at 30 like Debut's own mark, a wordmark up to 72 × 30, a stacked logo no taller than a tile. */
.bz-rail__logo--own { max-width: 72px; max-height: var(--rail-tile); }
.bz-rail__app { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; padding: 4px 0; border: none; background: none; cursor: pointer; font-family: var(--font-sans); }
.bz-rail__tile { width: var(--rail-tile); height: var(--rail-tile); border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast); }
.bz-rail__app:hover .bz-rail__tile { background: var(--tile-hover); }
.bz-rail__tile svg { width: 22px; height: 22px; stroke: var(--ink-2); }
.bz-rail__label { font: var(--text-label); color: var(--ink-3); }
.bz-rail__app--on .bz-rail__tile, .bz-rail__app--on:hover .bz-rail__tile { background: var(--violet-500); }
.bz-rail__app--on .bz-rail__tile svg { stroke: var(--on-action); }
.bz-rail__app--on .bz-rail__label { font-weight: 600; color: var(--violet-700); }
.bz-rail__spacer { flex: 1; }
/* The day ring's gradient stops read the prism tokens, so a custom palette recolors the ring too. */
.bz-ring__stop--1 { stop-color: var(--peri); }
.bz-ring__stop--2 { stop-color: var(--prism-purple); }
.bz-ring__stop--3 { stop-color: var(--teal); }
.bz-rail__bell { position: relative; }
.bz-rail__dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet-500); border: 2px solid var(--ground); }
.bz-rail__user { margin-top: 8px; }
/* The row wraps rather than running off the page: with nine Settings tabs and two buttons, 1280 wide
   had "Sign-in" broken over two lines and the last button past the edge (2026-10-08). A label never
   breaks; the actions drop to a line of their own, still on the right. */
.bz-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 30px; margin-bottom: var(--after-tabs); }
.bz-tab { white-space: nowrap; font: var(--text-tab); color: var(--muted); text-decoration: none; padding: 0 0 12px; border: none; background: none; cursor: pointer; border-bottom: var(--underline-w) solid transparent; transition: color var(--dur-fast); }
.bz-tab:hover { color: var(--ink); }
.bz-tab--on { font-weight: 600; color: var(--ink); border-bottom-color: var(--violet-500); }
.bz-tabs__spacer { flex: 1; }
.bz-tabs__right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-bottom: 12px; margin-left: auto; }

/* Tables: the one place a data surface earns white */
.bz-table { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-table); overflow: hidden; }
.bz-table__head, .bz-table__row { display: grid; gap: 14px; align-items: center; padding: var(--table-cell-pad); }
.bz-table__head { font: 600 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-table-head); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-soft); }
.bz-table__row { font: var(--text-support); border-top: 1px solid var(--rule-soft); transition: background var(--dur-fast); }
.bz-table__row:first-of-type { border-top: none; }
.bz-table__row:hover { background: var(--table-head); }
.bz-table__foot { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--rule-soft); font: var(--text-meta); color: var(--muted); }
.bz-cell--strong { font-weight: 600; }
.bz-cell--mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.bz-cell--num { font-variant-numeric: tabular-nums; }
.bz-cell--muted { color: var(--muted); }
.bz-cell--dash { color: var(--disabled); }
.bz-cell--status { font-weight: 600; }
.bz-cell--link { color: var(--violet-700); font-weight: 500; text-decoration: none; }
.bz-cell--actions { display: flex; align-items: center; gap: 10px; }
.bz-summary { display: flex; align-items: center; gap: 32px; margin: 0 6px 26px; }
.bz-summary__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: var(--text-support); color: var(--muted); margin: 10px 0 0; }
.bz-summary__dot { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bz-summary__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bz-summary__filters { display: flex; gap: 6px; flex: none; }

/* Phase strip */
.bz-phases { margin: 0 6px 34px; }
.bz-phases__bars { display: flex; gap: 6px; margin-bottom: 10px; }
.bz-phases__bar { position: relative; overflow: hidden; flex: 1; height: var(--bar-h-lg); border-radius: var(--radius-pill); background: var(--hairline); transform-origin: left; animation: bzGrow 1s var(--reveal-ease) both; animation-delay: calc(var(--d, 200) * 1ms); }
/* Each phase lit as far as its work is done, a finished one all the way (owner, 2026-09-30: "it should
   light up the entire bar as you go along"). */
.bz-phases__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--gradient-bar); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.bz-phases__label--done { color: var(--ink-2); }
.bz-phases__check { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--green-700); }
.bz-phases__check svg { width: 12px; height: 12px; }
/* The phase a tick just finished (owner: "a nice short animation when you complete a phase"): its bar
   charges to full, a light runs along it, its name flashes and its check pops in: about a second and a
   half, once. None of it sits on .bz-phases__bar, whose animation soft navigation switches off. */
.bz-phases__bar--just .bz-phases__fill { transform-origin: left; animation: bzPhaseFill .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
.bz-phases__bar--just .bz-phases__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%); transform: translateX(-100%); animation: bzPhaseShine .9s ease-out .8s both; }
.bz-phases__label--just { animation: bzPhaseLabel 1.3s ease-out .6s both; }
.bz-phases__label--just .bz-phases__check { animation: bzPhaseCheck .5s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
@keyframes bzPhaseFill { from { transform: scaleX(.55); } to { transform: none; } }
@keyframes bzPhaseShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes bzPhaseLabel { 0%, 100% { color: var(--ink-2); } 35% { color: var(--violet-700); } }
@keyframes bzPhaseCheck { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
/* A passing notice (data-autohide) on its way out: nav.js adds this, then removes the notice. */
.bz-notice--leaving { opacity: 0; transform: translateY(-4px); transition: opacity .35s ease, transform .35s ease; }
.bz-notice--done { display: flex; align-items: center; gap: 10px; animation: bzNoticeIn .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bzNoticeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Mark done on the card: the card dims until its next task arrives in it (nav.js). */
.bz-hero__body, .bz-numeral { transition: opacity .2s ease-out; }
.bz-hero--pending .bz-hero__body, .bz-hero--pending .bz-numeral { opacity: .45; }
.bz-notice__check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--violet-500); color: var(--on-action); animation: bzPhaseCheck .5s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.bz-notice__check svg { width: 13px; height: 13px; }
.bz-phases__labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; font: var(--text-caption); color: var(--muted); }
.bz-phases__label--now { color: var(--violet-700); font-weight: 600; }

/* Steps (task screen) */
.bz-step { display: flex; align-items: center; gap: 16px; padding: var(--row-pad); border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-step__title { flex: 1; font: var(--text-row); }
.bz-step--done .bz-step__title { color: var(--faint); }
.bz-step__meta { font: var(--text-support); color: var(--muted); }

/* The page-load sequence. Add .bz-in and set --d (ms). PageHeader, TabBar, HeroCard and the blocks set their own. */
.bz-in { animation: bzIn var(--reveal-dur) var(--reveal-ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes bzIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bzHalo { from { opacity: 0; transform: scale(.9); } to { opacity: var(--halo-opacity); transform: none; } }
@keyframes bzGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================================
   Debut — what the kit does not carry
   ============================================================================
   Everything above this line is design_v2/design_system/components/kit.css, verbatim. Everything
   below is Debut's own: the base rules, the rail's account menu, real form controls (the kit's
   components are hook-free React and never needed a <form>), the tick and owner controls on a
   task row, and the width classes that stand in for the inline styles the kit's React components
   use — the CSP here is style-src 'self' plus a nonce, and an inline style attribute is blocked.
   ============================================================================ */

/* ---- Base, and the three rules the token files carried (effects.css) ---- */
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-row); }
::selection { background: var(--violet-100); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-lift: 1ms; --dur-press: 1ms; --lift: none; --press: none; }
  .bz-in, .bz-halo, .bz-bar__fill, .bz-phases__bar, .bz-numeral__value { animation: none !important; }
  .bz-phases__fill, .bz-phases__fill::after, .bz-phases__label--just, .bz-phases__check, .bz-notice__check { animation: none !important; }
  .bz-mark--pop svg, .bz-notice--done { animation: none !important; }
  .bz-flash { animation: none !important; }
  .bz-phases__fill, .bz-row__title > span:first-child, .bz-row__title > a, .bz-row__line > span:first-child, .bz-row__line > a { transition: none; }
  .bz-phases__bar--just .bz-phases__fill::after { display: none; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
.bz-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Reveal delays. The kit sets `--d` inline (`style="--d: 220"`), which the CSP forbids; one
        class per 5ms is the substitute, and parts.js rounds to it. ---- */
.bz-d-0 { --d: 0; }
.bz-d-5 { --d: 5; }
.bz-d-10 { --d: 10; }
.bz-d-15 { --d: 15; }
.bz-d-20 { --d: 20; }
.bz-d-25 { --d: 25; }
.bz-d-30 { --d: 30; }
.bz-d-35 { --d: 35; }
.bz-d-40 { --d: 40; }
.bz-d-45 { --d: 45; }
.bz-d-50 { --d: 50; }
.bz-d-55 { --d: 55; }
.bz-d-60 { --d: 60; }
.bz-d-65 { --d: 65; }
.bz-d-70 { --d: 70; }
.bz-d-75 { --d: 75; }
.bz-d-80 { --d: 80; }
.bz-d-85 { --d: 85; }
.bz-d-90 { --d: 90; }
.bz-d-95 { --d: 95; }
.bz-d-100 { --d: 100; }
.bz-d-105 { --d: 105; }
.bz-d-110 { --d: 110; }
.bz-d-115 { --d: 115; }
.bz-d-120 { --d: 120; }
.bz-d-125 { --d: 125; }
.bz-d-130 { --d: 130; }
.bz-d-135 { --d: 135; }
.bz-d-140 { --d: 140; }
.bz-d-145 { --d: 145; }
.bz-d-150 { --d: 150; }
.bz-d-155 { --d: 155; }
.bz-d-160 { --d: 160; }
.bz-d-165 { --d: 165; }
.bz-d-170 { --d: 170; }
.bz-d-175 { --d: 175; }
.bz-d-180 { --d: 180; }
.bz-d-185 { --d: 185; }
.bz-d-190 { --d: 190; }
.bz-d-195 { --d: 195; }
.bz-d-200 { --d: 200; }
.bz-d-205 { --d: 205; }
.bz-d-210 { --d: 210; }
.bz-d-215 { --d: 215; }
.bz-d-220 { --d: 220; }
.bz-d-225 { --d: 225; }
.bz-d-230 { --d: 230; }
.bz-d-235 { --d: 235; }
.bz-d-240 { --d: 240; }
.bz-d-245 { --d: 245; }
.bz-d-250 { --d: 250; }
.bz-d-255 { --d: 255; }
.bz-d-260 { --d: 260; }
.bz-d-265 { --d: 265; }
.bz-d-270 { --d: 270; }
.bz-d-275 { --d: 275; }
.bz-d-280 { --d: 280; }
.bz-d-285 { --d: 285; }
.bz-d-290 { --d: 290; }
.bz-d-295 { --d: 295; }
.bz-d-300 { --d: 300; }
.bz-d-305 { --d: 305; }
.bz-d-310 { --d: 310; }
.bz-d-315 { --d: 315; }
.bz-d-320 { --d: 320; }
.bz-d-325 { --d: 325; }
.bz-d-330 { --d: 330; }
.bz-d-335 { --d: 335; }
.bz-d-340 { --d: 340; }
.bz-d-345 { --d: 345; }
.bz-d-350 { --d: 350; }
.bz-d-355 { --d: 355; }
.bz-d-360 { --d: 360; }
.bz-d-365 { --d: 365; }
.bz-d-370 { --d: 370; }
.bz-d-375 { --d: 375; }
.bz-d-380 { --d: 380; }
.bz-d-385 { --d: 385; }
.bz-d-390 { --d: 390; }
.bz-d-395 { --d: 395; }
.bz-d-400 { --d: 400; }
.bz-d-405 { --d: 405; }
.bz-d-410 { --d: 410; }
.bz-d-415 { --d: 415; }
.bz-d-420 { --d: 420; }
.bz-d-425 { --d: 425; }
.bz-d-430 { --d: 430; }
.bz-d-435 { --d: 435; }
.bz-d-440 { --d: 440; }
.bz-d-445 { --d: 445; }
.bz-d-450 { --d: 450; }
.bz-d-455 { --d: 455; }
.bz-d-460 { --d: 460; }
.bz-d-465 { --d: 465; }
.bz-d-470 { --d: 470; }
.bz-d-475 { --d: 475; }
.bz-d-480 { --d: 480; }
.bz-d-485 { --d: 485; }
.bz-d-490 { --d: 490; }
.bz-d-495 { --d: 495; }
.bz-d-500 { --d: 500; }
.bz-d-505 { --d: 505; }
.bz-d-510 { --d: 510; }
.bz-d-515 { --d: 515; }
.bz-d-520 { --d: 520; }
.bz-d-525 { --d: 525; }
.bz-d-530 { --d: 530; }
.bz-d-535 { --d: 535; }
.bz-d-540 { --d: 540; }
.bz-d-545 { --d: 545; }
.bz-d-550 { --d: 550; }
.bz-d-555 { --d: 555; }
.bz-d-560 { --d: 560; }
.bz-d-565 { --d: 565; }
.bz-d-570 { --d: 570; }
.bz-d-575 { --d: 575; }
.bz-d-580 { --d: 580; }
.bz-d-585 { --d: 585; }
.bz-d-590 { --d: 590; }
.bz-d-595 { --d: 595; }
.bz-d-600 { --d: 600; }
.bz-d-605 { --d: 605; }
.bz-d-610 { --d: 610; }
.bz-d-615 { --d: 615; }
.bz-d-620 { --d: 620; }
.bz-d-625 { --d: 625; }
.bz-d-630 { --d: 630; }
.bz-d-635 { --d: 635; }
.bz-d-640 { --d: 640; }
.bz-d-645 { --d: 645; }
.bz-d-650 { --d: 650; }
.bz-d-655 { --d: 655; }
.bz-d-660 { --d: 660; }
.bz-d-665 { --d: 665; }
.bz-d-670 { --d: 670; }
.bz-d-675 { --d: 675; }
.bz-d-680 { --d: 680; }
.bz-d-685 { --d: 685; }
.bz-d-690 { --d: 690; }
.bz-d-695 { --d: 695; }
.bz-d-700 { --d: 700; }
.bz-d-705 { --d: 705; }
.bz-d-710 { --d: 710; }
.bz-d-715 { --d: 715; }
.bz-d-720 { --d: 720; }
.bz-d-725 { --d: 725; }
.bz-d-730 { --d: 730; }
.bz-d-735 { --d: 735; }
.bz-d-740 { --d: 740; }
.bz-d-745 { --d: 745; }
.bz-d-750 { --d: 750; }
.bz-d-755 { --d: 755; }
.bz-d-760 { --d: 760; }
.bz-d-765 { --d: 765; }
.bz-d-770 { --d: 770; }
.bz-d-775 { --d: 775; }
.bz-d-780 { --d: 780; }
.bz-d-785 { --d: 785; }
.bz-d-790 { --d: 790; }
.bz-d-795 { --d: 795; }
.bz-d-800 { --d: 800; }
.bz-d-805 { --d: 805; }
.bz-d-810 { --d: 810; }
.bz-d-815 { --d: 815; }
.bz-d-820 { --d: 820; }
.bz-d-825 { --d: 825; }
.bz-d-830 { --d: 830; }
.bz-d-835 { --d: 835; }
.bz-d-840 { --d: 840; }
.bz-d-845 { --d: 845; }
.bz-d-850 { --d: 850; }
.bz-d-855 { --d: 855; }
.bz-d-860 { --d: 860; }
.bz-d-865 { --d: 865; }
.bz-d-870 { --d: 870; }
.bz-d-875 { --d: 875; }
.bz-d-880 { --d: 880; }
.bz-d-885 { --d: 885; }
.bz-d-890 { --d: 890; }
.bz-d-895 { --d: 895; }
.bz-d-900 { --d: 900; }
.bz-d-905 { --d: 905; }
.bz-d-910 { --d: 910; }
.bz-d-915 { --d: 915; }
.bz-d-920 { --d: 920; }
.bz-d-925 { --d: 925; }
.bz-d-930 { --d: 930; }
.bz-d-935 { --d: 935; }
.bz-d-940 { --d: 940; }
.bz-d-945 { --d: 945; }
.bz-d-950 { --d: 950; }
.bz-d-955 { --d: 955; }
.bz-d-960 { --d: 960; }
.bz-d-965 { --d: 965; }
.bz-d-970 { --d: 970; }
.bz-d-975 { --d: 975; }
.bz-d-980 { --d: 980; }
.bz-d-985 { --d: 985; }
.bz-d-990 { --d: 990; }
.bz-d-995 { --d: 995; }
.bz-d-1000 { --d: 1000; }
.bz-d-1005 { --d: 1005; }
.bz-d-1010 { --d: 1010; }
.bz-d-1015 { --d: 1015; }
.bz-d-1020 { --d: 1020; }
.bz-d-1025 { --d: 1025; }
.bz-d-1030 { --d: 1030; }
.bz-d-1035 { --d: 1035; }
.bz-d-1040 { --d: 1040; }
.bz-d-1045 { --d: 1045; }
.bz-d-1050 { --d: 1050; }
.bz-d-1055 { --d: 1055; }
.bz-d-1060 { --d: 1060; }
.bz-d-1065 { --d: 1065; }
.bz-d-1070 { --d: 1070; }
.bz-d-1075 { --d: 1075; }
.bz-d-1080 { --d: 1080; }
.bz-d-1085 { --d: 1085; }
.bz-d-1090 { --d: 1090; }
.bz-d-1095 { --d: 1095; }
.bz-d-1100 { --d: 1100; }
.bz-d-1105 { --d: 1105; }
.bz-d-1110 { --d: 1110; }
.bz-d-1115 { --d: 1115; }
.bz-d-1120 { --d: 1120; }
.bz-d-1125 { --d: 1125; }
.bz-d-1130 { --d: 1130; }
.bz-d-1135 { --d: 1135; }
.bz-d-1140 { --d: 1140; }
.bz-d-1145 { --d: 1145; }
.bz-d-1150 { --d: 1150; }
.bz-d-1155 { --d: 1155; }
.bz-d-1160 { --d: 1160; }
.bz-d-1165 { --d: 1165; }
.bz-d-1170 { --d: 1170; }
.bz-d-1175 { --d: 1175; }
.bz-d-1180 { --d: 1180; }
.bz-d-1185 { --d: 1185; }
.bz-d-1190 { --d: 1190; }
.bz-d-1195 { --d: 1195; }
.bz-d-1200 { --d: 1200; }
.bz-d-1205 { --d: 1205; }
.bz-d-1210 { --d: 1210; }
.bz-d-1215 { --d: 1215; }
.bz-d-1220 { --d: 1220; }
.bz-d-1225 { --d: 1225; }
.bz-d-1230 { --d: 1230; }
.bz-d-1235 { --d: 1235; }
.bz-d-1240 { --d: 1240; }
.bz-d-1245 { --d: 1245; }
.bz-d-1250 { --d: 1250; }
.bz-d-1255 { --d: 1255; }
.bz-d-1260 { --d: 1260; }
.bz-d-1265 { --d: 1265; }
.bz-d-1270 { --d: 1270; }
.bz-d-1275 { --d: 1275; }
.bz-d-1280 { --d: 1280; }
.bz-d-1285 { --d: 1285; }
.bz-d-1290 { --d: 1290; }
.bz-d-1295 { --d: 1295; }
.bz-d-1300 { --d: 1300; }
.bz-d-1305 { --d: 1305; }
.bz-d-1310 { --d: 1310; }
.bz-d-1315 { --d: 1315; }
.bz-d-1320 { --d: 1320; }
.bz-d-1325 { --d: 1325; }
.bz-d-1330 { --d: 1330; }
.bz-d-1335 { --d: 1335; }
.bz-d-1340 { --d: 1340; }
.bz-d-1345 { --d: 1345; }
.bz-d-1350 { --d: 1350; }
.bz-d-1355 { --d: 1355; }
.bz-d-1360 { --d: 1360; }
.bz-d-1365 { --d: 1365; }
.bz-d-1370 { --d: 1370; }
.bz-d-1375 { --d: 1375; }
.bz-d-1380 { --d: 1380; }
.bz-d-1385 { --d: 1385; }
.bz-d-1390 { --d: 1390; }
.bz-d-1395 { --d: 1395; }
.bz-d-1400 { --d: 1400; }
.bz-d-1405 { --d: 1405; }
.bz-d-1410 { --d: 1410; }
.bz-d-1415 { --d: 1415; }
.bz-d-1420 { --d: 1420; }
.bz-d-1425 { --d: 1425; }
.bz-d-1430 { --d: 1430; }
.bz-d-1435 { --d: 1435; }
.bz-d-1440 { --d: 1440; }
.bz-d-1445 { --d: 1445; }
.bz-d-1450 { --d: 1450; }
.bz-d-1455 { --d: 1455; }
.bz-d-1460 { --d: 1460; }
.bz-d-1465 { --d: 1465; }
.bz-d-1470 { --d: 1470; }
.bz-d-1475 { --d: 1475; }
.bz-d-1480 { --d: 1480; }
.bz-d-1485 { --d: 1485; }
.bz-d-1490 { --d: 1490; }
.bz-d-1495 { --d: 1495; }
.bz-d-1500 { --d: 1500; }

/* ---- Bar widths. `style="width:71%"` is what the kit does and what the CSP forbids; one class
        per percent is the honest substitute, and a bar cannot be narrower than a percent anyway. ---- */
.bz-w-0 { width: 0%; }
.bz-w-1 { width: 1%; }
.bz-w-2 { width: 2%; }
.bz-w-3 { width: 3%; }
.bz-w-4 { width: 4%; }
.bz-w-5 { width: 5%; }
.bz-w-6 { width: 6%; }
.bz-w-7 { width: 7%; }
.bz-w-8 { width: 8%; }
.bz-w-9 { width: 9%; }
.bz-w-10 { width: 10%; }
.bz-w-11 { width: 11%; }
.bz-w-12 { width: 12%; }
.bz-w-13 { width: 13%; }
.bz-w-14 { width: 14%; }
.bz-w-15 { width: 15%; }
.bz-w-16 { width: 16%; }
.bz-w-17 { width: 17%; }
.bz-w-18 { width: 18%; }
.bz-w-19 { width: 19%; }
.bz-w-20 { width: 20%; }
.bz-w-21 { width: 21%; }
.bz-w-22 { width: 22%; }
.bz-w-23 { width: 23%; }
.bz-w-24 { width: 24%; }
.bz-w-25 { width: 25%; }
.bz-w-26 { width: 26%; }
.bz-w-27 { width: 27%; }
.bz-w-28 { width: 28%; }
.bz-w-29 { width: 29%; }
.bz-w-30 { width: 30%; }
.bz-w-31 { width: 31%; }
.bz-w-32 { width: 32%; }
.bz-w-33 { width: 33%; }
.bz-w-34 { width: 34%; }
.bz-w-35 { width: 35%; }
.bz-w-36 { width: 36%; }
.bz-w-37 { width: 37%; }
.bz-w-38 { width: 38%; }
.bz-w-39 { width: 39%; }
.bz-w-40 { width: 40%; }
.bz-w-41 { width: 41%; }
.bz-w-42 { width: 42%; }
.bz-w-43 { width: 43%; }
.bz-w-44 { width: 44%; }
.bz-w-45 { width: 45%; }
.bz-w-46 { width: 46%; }
.bz-w-47 { width: 47%; }
.bz-w-48 { width: 48%; }
.bz-w-49 { width: 49%; }
.bz-w-50 { width: 50%; }
.bz-w-51 { width: 51%; }
.bz-w-52 { width: 52%; }
.bz-w-53 { width: 53%; }
.bz-w-54 { width: 54%; }
.bz-w-55 { width: 55%; }
.bz-w-56 { width: 56%; }
.bz-w-57 { width: 57%; }
.bz-w-58 { width: 58%; }
.bz-w-59 { width: 59%; }
.bz-w-60 { width: 60%; }
.bz-w-61 { width: 61%; }
.bz-w-62 { width: 62%; }
.bz-w-63 { width: 63%; }
.bz-w-64 { width: 64%; }
.bz-w-65 { width: 65%; }
.bz-w-66 { width: 66%; }
.bz-w-67 { width: 67%; }
.bz-w-68 { width: 68%; }
.bz-w-69 { width: 69%; }
.bz-w-70 { width: 70%; }
.bz-w-71 { width: 71%; }
.bz-w-72 { width: 72%; }
.bz-w-73 { width: 73%; }
.bz-w-74 { width: 74%; }
.bz-w-75 { width: 75%; }
.bz-w-76 { width: 76%; }
.bz-w-77 { width: 77%; }
.bz-w-78 { width: 78%; }
.bz-w-79 { width: 79%; }
.bz-w-80 { width: 80%; }
.bz-w-81 { width: 81%; }
.bz-w-82 { width: 82%; }
.bz-w-83 { width: 83%; }
.bz-w-84 { width: 84%; }
.bz-w-85 { width: 85%; }
.bz-w-86 { width: 86%; }
.bz-w-87 { width: 87%; }
.bz-w-88 { width: 88%; }
.bz-w-89 { width: 89%; }
.bz-w-90 { width: 90%; }
.bz-w-91 { width: 91%; }
.bz-w-92 { width: 92%; }
.bz-w-93 { width: 93%; }
.bz-w-94 { width: 94%; }
.bz-w-95 { width: 95%; }
.bz-w-96 { width: 96%; }
.bz-w-97 { width: 97%; }
.bz-w-98 { width: 98%; }
.bz-w-99 { width: 99%; }
.bz-w-100 { width: 100%; }

/* ---- The rail: only the app that exists, and the account menu on the avatar ---- */
.bz-rail__logo-link { display: block; line-height: 0; }
.bz-rail__menu { position: relative; margin-top: 8px; }
.bz-rail__menu > summary { list-style: none; cursor: pointer; }
.bz-rail__menu > summary::-webkit-details-marker { display: none; }
/* An open menu lights its tile the way the current section's is lit — no outline box. */
.bz-rail__menu[open] > summary .bz-rail__tile { background: var(--violet-500); }
.bz-rail__menu[open] > summary .bz-rail__tile svg { stroke: var(--on-action); }
.bz-rail__menu[open] > summary .bz-rail__label { font-weight: 600; color: var(--violet-700); }
.bz-rail__menu[open] > summary.bz-avatar { background: var(--violet-500); color: var(--on-action); }
.bz-rail__menu > summary:focus-visible { outline: none; }
.bz-rail__menu > summary:focus-visible .bz-rail__tile, .bz-rail__menu > summary.bz-avatar:focus-visible { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--focus-ring); }
.bz-menu { position: absolute; left: 52px; bottom: 0; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: var(--surface); border-radius: var(--radius-tile); box-shadow: var(--shadow-card); z-index: 20; }
.bz-menu__who { padding: 6px 12px 10px; margin: 0 0 6px; font: var(--text-meta); color: var(--muted); border-bottom: 1px solid var(--hairline); }
.bz-menu__who strong { display: block; font: var(--text-row-sm); color: var(--ink); }
.bz-menu a, .bz-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius-row); font: var(--text-row-sm); color: var(--ink); text-decoration: none; background: none; border: none; cursor: pointer; transition: background var(--dur-fast); }
.bz-menu a:hover, .bz-menu button:hover { background: var(--row-hover); }
.bz-menu form { margin: 0; }

/* ---- The rail as navigation: tiles for the sections, a settings menu at the foot ---- */
/* The rail is pinned to the viewport. As a flex child it stretched to the page's height, so on a long
   page (People, Ledger) the spacer pushed Settings and the avatar to the bottom of the PAGE, below
   the fold — the owner saw them on Clients and not on People. Sticky at the top, one viewport tall. */
.bz-rail { position: sticky; top: 0; height: 100vh; align-self: flex-start; box-sizing: border-box; overflow: visible; z-index: 30; }
/* Not overflow-y: auto — that clipped the menus (they open to the RIGHT of the rail, past its 96px)
   and drew a scrollbar under the gear. The rail is above the main column so its menus paint over it. */
.bz-rail__app { position: relative; }
.bz-rail__menu--settings { margin-top: 0; }
.bz-rail__menu--settings > summary.bz-rail__app { display: flex; }
.bz-menu--settings { bottom: 0; }
/* The rail's items reveal with the header, not with the rows. */
.bz-rail .bz-rail__app { transition: background var(--dur-fast); }

/* ---- After a soft navigation the reveal does not replay: the page did not load, the column changed ---- */
.bz-main--swapped .bz-in, .bz-main--swapped .bz-halo, .bz-main--swapped .bz-bar__fill, .bz-main--swapped .bz-phases__bar, .bz-main--swapped .bz-numeral__value { animation: none !important; }
.bz-main--busy { opacity: .6; transition: opacity var(--dur-fast); }
/* A tick reads as done the moment it is clicked (nav.js): the strike and the mark ease in. */
.bz-row__title > a, .bz-row__title > span:first-child { transition: color var(--dur-fast), text-decoration-color var(--dur-fast); }
.bz-mark { transition: background var(--dur-fast), border-color var(--dur-fast); }

/* ---- Toggle options as links: the state lives in the URL ---- */
a.bz-toggle__opt { text-decoration: none; display: inline-block; }

/* ---- A tab row with no tabs but with actions ---- */
.bz-tabs--actions-only { justify-content: flex-end; margin-bottom: 26px; }
.bz-tabs--actions-only .bz-tabs__right { margin-bottom: 0; }

/* ---- Forms ---- */
.bz-form { display: grid; gap: 22px; max-width: 560px; }
.bz-form--wide { max-width: none; }
.bz-field { display: grid; gap: 6px; }
.bz-field--row { display: flex; align-items: center; gap: 12px; }
.bz-label { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.bz-input, .bz-select, .bz-textarea { font: var(--text-body); font-family: var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-button); height: var(--btn-h); padding: 0 14px; width: 100%; box-shadow: var(--shadow-hairline); }
.bz-input::placeholder, .bz-textarea::placeholder { color: var(--muted); }
.bz-textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.bz-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236F675E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5L8 10l4-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.bz-input:focus, .bz-select:focus, .bz-textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: transparent; }
.bz-input--lg, .bz-select--lg { height: var(--btn-h-lg); font-size: 16px; }
.bz-input:disabled, .bz-select:disabled { color: var(--muted); background: var(--tint); }
.bz-check { display: flex; align-items: center; gap: 10px; font: var(--text-body); }
.bz-check input { width: 18px; height: 18px; accent-color: var(--violet-500); margin: 0; }
.bz-help { font: var(--text-support); color: var(--muted); margin: 0; }
/* A help line in a warning's tone keeps the tone: .bz-help comes later and would otherwise grey it. */
.bz-help.bz-tone--warn { color: var(--orange-700); } .bz-help.bz-tone--red { color: var(--red-700); }
.bz-error { font: var(--text-support); color: var(--red-700); margin: 0; }
.bz-actions { display: flex; align-items: center; gap: 22px; }
.bz-composer { display: flex; gap: 12px; align-items: center; }
.bz-composer .bz-input { flex: 1 1 auto; }
.bz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.bz-btn:disabled, .bz-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.bz-btn--sm { height: 34px; padding: 0 14px; font: var(--text-button-sm); font-size: 13px; }
.bz-btn--danger { font: var(--text-button-sm); height: var(--btn-h); padding: 0 18px; background: var(--red-100); color: var(--red-700); }
.bz-btn--danger:hover { background: #F3CFC9; }
.bz-btn--danger.bz-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.bz-actions--tight { gap: 10px; flex-wrap: wrap; }
/* A locked control's reason, shown on hover or focus only (2026-10-05). */
.bz-tip { position: relative; display: inline-flex; border-radius: var(--radius-button); }
.bz-tip:focus { outline: none; }
.bz-tip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bz-tip::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: 280px; padding: 8px 12px;
  border-radius: 10px; background: var(--ink); color: #fff; font: var(--text-support); font-size: 13px; line-height: 1.4; white-space: normal;
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast), transform var(--dur-fast); pointer-events: none; z-index: 20; }
.bz-tip:hover::after, .bz-tip:focus::after { opacity: 1; transform: none; }

/* ---- Rows that hold controls. The kit's ListRow is an <a>; a row with a tick button and an
        owner menu cannot be, so these rows are <div>s and the title carries the link. ---- */
.bz-row__title a { color: inherit; text-decoration: none; }
.bz-row__title a:hover { text-decoration: underline; }
.bz-row--done .bz-row__title > a { color: var(--faint); text-decoration: none; }
.bz-row__hint { font: var(--text-support); color: var(--muted); font-weight: 400; }
.bz-row--done .bz-row__hint { color: var(--faint); }
.bz-row__client { display: flex; align-items: center; gap: 8px; font: var(--text-support); color: var(--muted); white-space: nowrap; }
.bz-row--grid .bz-row__time { text-align: left; min-width: 0; }
.bz-row--grid .bz-mark { width: 22px; height: 22px; }
.bz-row--warn { background: color-mix(in srgb, var(--peach) 45%, transparent); }
button.bz-mark { padding: 0; cursor: pointer; font: inherit; transition: background var(--dur-fast), border-color var(--dur-fast); }
button.bz-mark--todo { background: transparent; }
button.bz-mark--todo:hover { border-color: var(--ink); }
button.bz-mark--person, button.bz-mark--system { border: none; }
button.bz-mark--person:hover { background: var(--ink-2); }
/* An automated task that is still running: a circle nobody should tick by hand, so it is dashed
   and it is a marker, not a button. */
.bz-mark--auto { border: var(--outline-w) dashed var(--outline); }
.bz-tick { display: contents; }
.bz-own { position: relative; flex: none; }
.bz-own > summary { list-style: none; cursor: pointer; display: inline-flex; }
.bz-own > summary::-webkit-details-marker { display: none; }
.bz-own__form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; display: flex; gap: 8px; align-items: center; padding: 10px; background: var(--surface); border-radius: var(--radius-tile); box-shadow: var(--shadow-card); }
.bz-own__form .bz-select { width: 200px; height: 34px; font-size: 14px; }
/* A task's date, changed by hand on the plan (2026-10-05): the date is the control, and its picker floats as the owner's does. */
.bz-due > summary { text-decoration: underline dotted; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.bz-due > summary:hover, .bz-due[open] > summary { color: var(--ink); text-decoration-color: currentColor; }
.bz-due .bz-own__form .bz-input { width: 168px; height: 34px; font-size: 14px; padding: 0 10px; }
/* Editing a task or phase on its plan (owners and admins): a pencil, quiet until its row is pointed at,
   and a panel of fields under it. */
.bz-edit__open { align-items: center; justify-content: center; gap: 6px; min-width: 28px; height: 28px; border-radius: 8px; color: var(--muted); opacity: .45; transition: var(--transition-tint), opacity var(--dur-fast); }
.bz-edit__open svg { stroke: currentColor; flex: none; }
.bz-row:hover .bz-edit__open, .bz-row:focus-within .bz-edit__open, .bz-group__tools .bz-edit__open, .bz-edit[open] > .bz-edit__open { opacity: 1; }
.bz-edit__open:hover, .bz-edit[open] > .bz-edit__open { background: var(--tile-hover); color: var(--ink); }
.bz-edit__open--text { padding: 0 10px; font: var(--text-button-sm); font-weight: 500; }
.bz-own__form--stack { flex-direction: column; align-items: stretch; gap: 8px; width: 320px; padding: 14px; }
.bz-own__form--stack .bz-input { height: 36px; font-size: 14px; }
/* A task's notes and time (141): the same panel, a note icon with the count, and the notes over the form. */
.bz-notes__open { display: inline-flex; }
.bz-notes__open--has { opacity: .8; }
.bz-notes__n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bz-notes__panel { width: 340px; max-width: calc(100vw - 32px); }
.bz-notes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 240px; overflow: auto; }
.bz-notes__item { padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.bz-notes__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: var(--ink); }
.bz-notes__meta { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.bz-own__form--stack textarea.bz-input.bz-notes__text { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
.bz-own__form--stack .bz-input.bz-notes__minutes { width: 120px; }
/* A linked client's HaloPSA contracts (142), owners and admins: under the card's other lines, set apart. */
.bz-halo-contracts { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
/* HaloPSA's settings on its connection page (147): each choice set apart, Save under them. */
.bz-conn-card--tight .bz-field { margin-bottom: 12px; }
.bz-conn-card--tight .bz-field + .bz-actions { margin-top: 4px; }
/* A site's address (146): the search with what Azure Maps finds under it, then the fields it fills. */
.bz-site-form { margin-top: 10px; display: grid; gap: 10px; max-width: 560px; }
.bz-site-form__row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .bz-site-form__row { grid-template-columns: 1fr; } }
.bz-places { position: relative; }
.bz-places__list { position: absolute; left: 0; right: 0; top: 100%; z-index: 12; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--surface); border-radius: var(--radius-tile); box-shadow: var(--shadow-card); }
.bz-places__item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.bz-places__item:hover, .bz-places__item--on { background: var(--tile-hover); }
.bz-sites__addr { display: block; }
.bz-own__form--stack .bz-select { width: 100%; }
/* A survey question's panel carries the longest choice, "By picking one of the choices below". */
.bz-sq .bz-own__form--stack { width: 400px; max-width: calc(100vw - 48px); }
.bz-own__form--stack .bz-label { margin-top: 2px; }
.bz-own__form--stack .bz-check { font: var(--text-support); }
.bz-group__tools { display: flex; justify-content: flex-end; padding: 0 6px 2px; }
@media (hover: none) { .bz-edit__open { opacity: 1; } }
/* Editing a person (the People tab): the owner box's floating panel, as a short stacked form. */
.bz-person-edit > summary { list-style: none; }
.bz-person-edit > summary::-webkit-details-marker { display: none; }
.bz-person-edit__form { display: grid; gap: 12px; width: 320px; padding: 16px; }
.bz-person-edit__remove { padding-top: 12px; border-top: var(--hairline-w) solid var(--hairline); }
.bz-person-edit__remove .bz-help { margin: 8px 0 10px; }
/* The Microsoft 365 census of one client (130): connect, approve, who counts, sync. */
.bz-census__needs { margin-top: 6px; }
.bz-census form + .bz-section { margin-top: 28px; }
.bz-census__copy { display: flex; gap: 8px; align-items: center; }
.bz-census__copy .bz-input { flex: 1; min-width: 0; }
.bz-census__list, .bz-census__steps { margin: 8px 0 10px; padding-left: 18px; font: var(--text-support); color: var(--ink-2); }
.bz-census__list li, .bz-census__steps li { margin-bottom: 6px; }
.bz-census__link { margin-top: 18px; }
.bz-census__link .bz-input { font: var(--text-meta); }
.bz-census__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font: var(--text-support); color: var(--ink-2); }
.bz-census__bar form, .bz-census__sync form { margin: 0; }
.bz-census__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bz-census__accounts { max-height: 560px; overflow: auto; border-radius: var(--radius-tile); box-shadow: inset 0 0 0 1px var(--hairline); }
.bz-census__acct { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: var(--hairline-w) solid var(--hairline); cursor: pointer; }
.bz-census__acct:last-child { border-bottom: 0; }
.bz-census__acct--head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.bz-census__acct--head .bz-census__who > span:first-child { font-weight: 600; }
.bz-census__found { display: grid; gap: 6px; margin: 8px 0 4px; }
.bz-census__filter .bz-input--sm { width: 100%; }
.bz-census__acct--out .bz-census__who > span:first-child { color: var(--muted); }
/* A row that says, with nothing to tick (148: a client's HaloPSA page). */
.bz-census__acct--plain { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.bz-census__who { display: flex; flex-direction: column; min-width: 0; font: var(--text-row-sm); }
.bz-census__who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-census__why { display: flex; justify-content: flex-end; }
.bz-census__sync { margin-top: 30px; }
.bz-census__off { margin-top: 18px; }
.bz-census__filter .bz-fieldset { margin-top: 16px; }
/* The client confirming their people list, on the contact's People page in the portal (130). */
.bz-census-ask { margin: 0 0 24px; }
.bz-confirm-ask { margin-top: 14px; }
.bz-census-ask__title { font: var(--text-h2-sm); letter-spacing: var(--tracking-h2); margin: 0 0 6px; color: var(--ink); }
.bz-census-ask__acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-top: 16px; }
.bz-census-ask__acts > form { margin: 0; }
.bz-census-ask__no { flex: 1 1 260px; padding-top: 10px; }
.bz-census-ask__no > summary { cursor: pointer; }
/* A link that opens a <details>: as wide as its words, so its underline is too (2026-10-09; a summary is a block). */
summary.bz-link { width: fit-content; }
.bz-census-ask__no .bz-form { margin-top: 12px; }
.bz-census-ask__done { margin: 0 0 18px; }
/* A page with no app around it: an administrator's landing after approving from a link (130). */
body.bz-plain { margin: 0; background: var(--ground); color: var(--ink); font: var(--text-body); }
.bz-plain__main { box-sizing: border-box; max-width: 34rem; margin: 14vh auto; padding: 0 24px; }
/* Hung from the person's row, at its right edge, not from the Edit link: where Edit sat near the
   row's left the panel ran 320px further left, over the rail at 1280 and off a phone's screen
   (2026-10-08). The row is the panel's box; the panel never leaves it sideways. */
.bz-prow { position: relative; }
.bz-prow .bz-person-edit { position: static; }
.bz-prow .bz-person-edit__form { right: 6px; top: calc(100% - 4px); max-width: calc(100% - 12px); }
.bz-person-edit__form .bz-input { height: 38px; }

/* ---- The face: ring beside a sentence ---- */
.bz-face { display: flex; align-items: center; gap: 22px; margin: 0 0 34px; }
.bz-face__title { font: var(--text-section); margin: 0 0 4px; color: var(--ink); }
.bz-face__meta { font: var(--text-support); color: var(--muted); margin: 0; line-height: 1.5; }

/* ---- Blocks: the pieces the screens compose that the kit leaves to inline style ---- */
.bz-client__people { display: flex; gap: 8px; margin-bottom: 18px; }
.bz-client--gap { margin-bottom: 34px; }
/* Two blocks stacked in the rail (People: What they told us over What the client sees, 088) breathe. */
.bz-ai + .bz-client { margin-top: 14px; }
.bz-receipts--ground { padding: 10px 0; gap: 12px; }
.bz-aside-sec { margin-top: 34px; }
.bz-prose { font: var(--text-body-sm); color: var(--ink-2); margin: 8px 0 0; }
.bz-prose p { margin: 0 0 10px; }
.bz-stack > * + * { margin-top: var(--section-gap); }
.bz-gap { height: 22px; }
.bz-hero__meta { font: var(--text-support); color: var(--muted); margin: 0 0 8px; }
.bz-hero__body form, .bz-hero__actions form { margin: 0; }
.bz-hero--compact .bz-hero__actions { margin: 0; flex: none; }
.bz-numeral--sm .bz-numeral__value { font: var(--text-numeral-lg); letter-spacing: var(--tracking-numeral-lg); }
.bz-numeral .bz-ring { margin-bottom: 8px; }
.bz-face__verdict { font: 600 12.5px/1.4 var(--font-sans); margin: 4px 0 0; }
.bz-cell--actions .bz-link { margin-left: auto; font-size: 13px; white-space: nowrap; }
.bz-table__row form { margin: 0; }
.bz-summary__right { margin-left: auto; }
.bz-summary__filters a { text-decoration: none; }

/* ---- Notices: a sentence under the tabs about what just happened ---- */
/* A confirmation ("Saved.") wears the brand: the action tint, which a custom palette recolors. Owner,
   2026-09-29: "can these things follow the color schemes". A warning stays orange: that is a status. */
.bz-notice { margin: 0 6px 26px; padding: 12px 16px; border-radius: var(--radius-button); background: var(--violet-100); color: var(--violet-700); font: var(--text-support); }
.bz-confirm-other { margin-top: 10px; }
.bz-confirm-other > summary { cursor: pointer; font: var(--text-support); }
.bz-confirm-other[open] > summary { margin-bottom: 10px; }
/* A canceled onboarding is a closed record (src/web/closed.js): its tabs show what was done and offer
   no change. The server refuses every post to it anyway; this keeps forms that cannot work off the page. */
.bz-closed form[method="post"]:not([data-keep]), .bz-closed .bz-own, .bz-closed .bz-composer { display: none !important; }
/* And the ways to the pages a canceled onboarding sends back (closed.js CHANGE_PAGES), wherever a tab links them. */
.bz-closed a[href$="/portal-preview"], .bz-closed a[href*="/credentials/new"], .bz-closed a[href*="/credentials/standard"],
.bz-closed a[href*="/census"], .bz-closed a[href*="?add=1"], .bz-closed a[href*="/schedule"], .bz-closed a[href$="/letter"] { display: none !important; }
.bz-notice--warn { background: var(--peach); color: var(--orange-700); }
.bz-notice--ok { background: var(--mint, #e6f6ee); color: var(--green-700, #1f6b3a); }
/* The steps an admin takes in a vendor's console before Debut can connect (056). */
.bz-steps-list { margin: 12px 0 16px; padding-left: 20px; font: var(--text-body); color: var(--ink); }
.bz-steps-list li { margin: 6px 0; }
.bz-steps-list .bz-copyable { display: inline-flex; vertical-align: middle; }

/* ---- A phase with blocked work: its label reads orange under the strip ---- */
.bz-phases__label--warn { color: var(--orange-700); font-weight: 600; }

/* ---- A group of rows that folds: the phase sections of the plan. The summary IS the section label. ---- */
.bz-group > summary { list-style: none; cursor: pointer; border-radius: var(--radius-row); }
.bz-group > summary::-webkit-details-marker { display: none; }
.bz-group > summary:hover .bz-section__title { color: var(--violet-700); }
.bz-group > summary .bz-section { margin-bottom: 4px; }
/* The open/closed chevron: spaced off the phase name (an inline-block drops its own leading space, which
   is how it came to sit jammed against the word), turning on its own centre. */
.bz-group > summary .bz-section__title::after { content: "›"; margin-left: 8px; color: var(--muted); font-weight: 400; display: inline-block; line-height: 1; transform-origin: 50% 55%; transition: transform var(--dur-fast); }
.bz-group[open] > summary .bz-section__title::after { transform: rotate(90deg); }

/* ---- Details: label and value, on the ground ---- */
.bz-dl { margin: 0; padding: 0 6px; display: grid; gap: 8px; }
.bz-dl__row { display: flex; gap: 12px; align-items: baseline; margin: 0; font: var(--text-support); }
.bz-dl__row dt { flex: 0 0 110px; color: var(--muted); }
.bz-dl__row dd { margin: 0; color: var(--ink); }
/* A client survey answer (2026-10-13): the question is a sentence, so it goes over its answer. */
.bz-dl__row--stack { flex-direction: column; gap: 2px; }
.bz-dl__row--stack dt { flex: none; }
.bz-dl form { margin: 0; }
.bz-tone--muted { color: var(--muted); }
.bz-dl .bz-help { margin: 0; }

/* ---- A composer on the ground, not in a card ---- */
.bz-composer--ground { padding: 0 6px; }
.bz-composer--ground + .bz-help { padding: 8px 6px 0; }
/* The field on a line of its own and the buttons wrapping under it: two buttons beside a field in a
   narrow column squeezed the field to a sliver (the console's mail test, 2026-10-03). */
.bz-composer--stack { flex-wrap: wrap; }
.bz-composer--stack .bz-input { flex: 1 1 100%; min-width: 0; }
/* A field with fixed text after it: the part before the @, and the domain it is on (2026-10-03). */
.bz-affix { display: flex; align-items: center; gap: 10px; }
.bz-affix .bz-input { flex: 1 1 auto; min-width: 0; }
.bz-affix__text { font: var(--text-body); color: var(--muted); white-space: nowrap; }

/* ---- The summary bar's parts the kit left inline ---- */
.bz-summary__main { flex: 1; min-width: 0; }
.bz-summary__main .bz-bar { display: block; }
.bz-summary__word { color: var(--muted); }
.bz-summary__filters .bz-chip { text-decoration: none; }

/* ---- The ledger's columns. A table's grid template is per table, and it cannot be inline. ---- */
/* minmax(0, …): each row is its own grid, so a long account name must not widen its row's columns. */
.bz-table--ledger .bz-table__head, .bz-table--ledger .bz-table__row { grid-template-columns: minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,.95fr) minmax(0,.6fr) minmax(0,1fr) minmax(0,1.7fr); }
.bz-table--ledger .bz-cell--mono, .bz-table--report .bz-cell--mono { overflow-wrap: anywhere; }
.bz-table--ledger .bz-cell--strong a { color: inherit; text-decoration: none; }
.bz-table--ledger .bz-cell--strong a:hover { text-decoration: underline; }
.bz-table__row--warn { background: color-mix(in srgb, var(--peach) 35%, transparent); }
/* The ledger kept by hand (069): its actions, a credential's stamps, and the evidence report. */
.bz-ledger-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0 6px 18px; }
.bz-row--stack { flex-wrap: wrap; row-gap: 10px; }
.bz-row--stack .bz-row__title { min-width: 220px; }
.bz-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.bz-link--quiet { background: none; border: 0; padding: 0; font: var(--text-support); color: var(--muted); text-decoration: underline; cursor: pointer; }
.bz-link--quiet:hover { color: var(--ink); }
/* Hudu's entries not yet on a client's ledger (070): a ticked list, then who held them. */
.bz-from-vault { margin: 28px 0 0; }
.bz-from-vault .bz-form { max-width: none; }
.bz-from-vault__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; margin: 6px 6px 14px; }
.bz-from-vault__options { display: flex; flex-wrap: wrap; gap: 14px; }
.bz-from-vault__options .bz-field { min-width: 240px; }
/* Filing a client's credentials in Hudu (073): offered on its Credentials tab, stopped on its Setup tab. */
.bz-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: start; margin: 0 6px 26px; padding: 18px 22px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.bz-offer__main { min-width: 0; }
.bz-offer__title { margin: 0; font: var(--text-row); font-weight: 600; color: var(--ink); }
.bz-offer__text { margin: 4px 0 0; max-width: 66ch; font: var(--text-support); color: var(--muted); }
.bz-offer__list { margin: 8px 0 0; padding-left: 18px; columns: 2 220px; column-gap: 28px; font: var(--text-support); color: var(--ink); }
.bz-offer__list li { break-inside: avoid; margin: 0 0 3px; }
.bz-offer__act { margin: 0; }
.bz-offer--warn .bz-offer__title { color: var(--orange-700); }
.bz-filing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bz-filing__form { display: inline; margin: 0; }
/* Link to your tools (073): each tool's record chosen, or made there when ticked. The fields for
   making one show once Make is ticked; a browser without :has shows them all along. */
.bz-tools .bz-settings { margin-bottom: 22px; }
.bz-make { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }

.bz-make__fields { display: grid; gap: 12px; padding-left: 28px; }
.bz-make:not(:has(.bz-make__tick:checked)) .bz-make__fields { display: none; }
/* The standard list and sites (071): the picker's groups, a site beside a credential's name, the
   list editor's rows, and a client's sites on its Setup tab. */
.bz-cell__site { color: var(--muted); font-weight: 400; }
.bz-chips--sites { margin-top: -14px; }
.bz-ledger-actions--start { justify-content: flex-start; }
.bz-std__form { max-width: none; }
.bz-credlist__row--new .bz-input { border-style: dashed; }
/* Add standard credentials (2026-10-05): a card for the company's items and one for each site's,
   every row a tick, the name, then how many, the number in a column of its own width. */
.bz-std__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; max-width: 680px; margin: 0 0 16px; }
.bz-std__bar .bz-help { flex: 1 1 300px; }
.bz-std { display: grid; gap: 18px; max-width: 680px; margin: 0 0 24px; }
.bz-std__row { grid-template-columns: minmax(0, 1fr) 72px; }
.bz-std .bz-table__head { padding-top: 11px; padding-bottom: 11px; }
.bz-std .bz-table__row { padding-top: 7px; padding-bottom: 7px; }
.bz-std__headpick { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The tick-all box's place is kept while it is hidden, so the card's name lines up with the rows'. */
.bz-std__slot { display: inline-flex; width: 18px; flex: none; }
.bz-std__title { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); }
.bz-std__many { text-align: center; white-space: nowrap; }
.bz-std__pick { display: flex; align-items: center; gap: 12px; min-height: 34px; font: var(--text-body); color: var(--ink); cursor: pointer; }
.bz-std__on { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--violet-500); }
.bz-std .bz-std__n { width: 100%; min-width: 0; height: 34px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.bz-std .bz-std__n::-webkit-inner-spin-button, .bz-std .bz-std__n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Unticked, its number is not read, so it is not shown (owner, 2026-10-05); its column stays. */
.bz-std__row:has(.bz-std__on:not(:checked)) .bz-std__n { visibility: hidden; }
.bz-credlist { max-width: none; }
.bz-credlist__row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1fr) auto 96px; gap: 10px; align-items: center; }
.bz-credlist__head { font: 600 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-table-head); text-transform: uppercase; color: var(--muted); }
/* Setup › Sites: one field to add, the sites listed under it, each with an × (2026-10-09). */
.bz-site-add { margin: 0 0 12px; justify-content: flex-start; }
.bz-site-add .bz-input { flex: 1 1 220px; max-width: 320px; }
.bz-sites { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-tile); box-shadow: inset 0 0 0 1px var(--hairline); }
.bz-sites__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px 8px 14px; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-sites__row:last-child { border-bottom: 0; }
.bz-sites__name { flex: 1 1 auto; min-width: 0; font: var(--text-row-sm); }
.bz-sites__rename > summary { list-style: none; cursor: pointer; }
.bz-sites__rename > summary::-webkit-details-marker { display: none; }
.bz-sites__rename[open] { flex-basis: 100%; order: 5; }
.bz-sites__rename .bz-inline-form { margin: 8px 0 2px; justify-content: flex-start; }
.bz-sites__x { margin: 0; }
.bz-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 400 20px/1 var(--font-sans); cursor: pointer; }
.bz-x:hover { background: var(--tint-hover); color: var(--ink); }
.bz-x:focus-visible { outline: var(--outline-w) solid var(--focus-ring); outline-offset: 2px; }
@media screen and (max-width: 760px) {
  .bz-std .bz-table__head, .bz-std .bz-table__row { padding-left: 16px; padding-right: 16px; }
  .bz-credlist__head { display: none; }
  .bz-credlist__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--rule-soft); }
  .bz-credlist__row > .bz-input { grid-column: 1 / -1; }
}
/* Spreadsheet imports (2026-10-04): the columns beside the upload, and the rows that did not go in. */
.bz-import { margin: 34px 0 0; }
.bz-import__cols { margin: 4px 0 14px; display: grid; gap: 8px; }
.bz-import__cols > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.bz-import__cols dt { font: var(--text-support); font-weight: 600; color: var(--ink); }
.bz-import__cols dd { margin: 0; font: var(--text-support); color: var(--muted); }
div.bz-notice > p { margin: 0; }
.bz-notice__list { margin: 6px 0 8px; padding-left: 18px; }
.bz-import .bz-file, .bz-form .bz-file { display: block; margin-top: 4px; }
/* The browser's own "Choose File", dressed as the small ghost button beside it; the file's name follows. */
.bz-file::file-selector-button { font: var(--text-button-sm); font-size: 13px; font-weight: 500; height: 34px; padding: 0 14px; margin-right: 12px;
  border: 0; border-radius: var(--radius-button); background: var(--tint); color: var(--ink); cursor: pointer; }
.bz-file::file-selector-button:hover { background: var(--tint-hover); }
.bz-table--report .bz-table__head, .bz-table--report .bz-table__row { grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); align-items: start; }
/* The ledger and its report on a phone: seven columns do not fit, so each credential is a card —
   its system with the status beside it, then what is known, each with its column's word. Dashes go.
   Screens only: a printed page is narrower than 760px too, and the printed report stays a table. */
@media screen and (max-width: 760px) {
  .bz-ledger-actions { justify-content: flex-start; }
  .bz-offer { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
  .bz-make__fields { padding-left: 0; }
  .bz-summary { flex-wrap: wrap; gap: 14px; }
  .bz-summary__main { flex-basis: 100%; }
  .bz-summary__legend { flex-wrap: wrap; gap: 6px 16px; }
  .bz-summary__filters { flex-wrap: wrap; }
  .bz-table--ledger .bz-table__head, .bz-table--report .bz-table__head { display: none; }
  .bz-table--ledger .bz-table__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
  .bz-table--ledger .bz-table__row > * { grid-column: 1 / -1; }
  .bz-table--ledger .bz-table__row > .bz-cell--strong { grid-column: 1; }
  .bz-table--ledger .bz-table__row > .bz-cell--status { grid-column: 2; grid-row: 1; }
  .bz-table--ledger .bz-table__row > .bz-cell--dash { display: none; }
  .bz-table--report .bz-table__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bz-table--ledger [data-label]::before, .bz-table--report [data-label]::before { content: attr(data-label) " "; color: var(--muted); }
  .bz-table--ledger .bz-table__foot { flex-wrap: wrap; }
}
@media print {
  .bz-rail, .bz-back, .bz-print-hide, .bz-tabs { display: none !important; }
  .bz-shell { display: block; }
  body, .bz-ground { background: #fff !important; }
  .bz-table { box-shadow: none; }
  .bz-table__row { break-inside: avoid; }
}
.bz-table__row--warn:hover { background: color-mix(in srgb, var(--peach) 55%, transparent); }
.bz-table .bz-pill { margin-left: 6px; vertical-align: middle; }

/* ---- Filter chips as a row of links above a list ---- */
.bz-chips--filters { margin: 0 0 26px; padding: 0 6px; }
.bz-chips--filters .bz-chip { text-decoration: none; }

/* ---- A person's row: the avatar leads ---- */
.bz-row--person .bz-avatar { flex: none; }
.bz-row--person form { margin: 0; flex: none; }
.bz-row--person .bz-row__time strong { color: var(--ink); font-weight: 600; }
/* How a person's session went (078): Complete, No show, or Undo, beside the row's other controls. */
.bz-person-outcome { display: inline-flex; align-items: center; gap: 6px; flex: none; }

/* ---- Forms stacked on the ground ---- */
.bz-stack--forms { margin-top: var(--section-gap); }
.bz-stack--forms .bz-form { padding: 0 6px; }

/* ---- A message thread: a client's message sits left in mint, ours sits right in ink ---- */
.bz-thread { list-style: none; margin: 0; padding: 8px 6px 0; display: flex; flex-direction: column; gap: 14px; }
.bz-day { align-self: center; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); padding: 6px 0; }
.bz-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 78%; }
.bz-msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.bz-msg__bubble { display: grid; gap: 4px; padding: 12px 16px; border-radius: 16px; background: var(--mint); color: var(--ink); font: var(--text-body); }
.bz-msg--mine .bz-msg__bubble { background: var(--surface); box-shadow: var(--shadow-hairline); }
.bz-msg__body { white-space: pre-wrap; }
.bz-msg__meta { font: var(--text-meta); color: var(--muted); }
.bz-msg--mine .bz-msg__meta { text-align: right; }
.bz-msg__task { align-self: flex-end; font: var(--text-support); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.bz-composer--send { margin-top: 26px; }
.bz-composer--send .bz-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---- A receipt's mark for something that went wrong: an empty circle outlined orange ---- */
.bz-mark--warn { border-color: var(--orange-500); }

/* ---- A composer inside the card's action row takes the width ---- */
.bz-hero__actions .bz-composer { flex: 1 1 auto; width: 100%; }
.bz-hero__actions .bz-composer .bz-input--lg { min-width: 0; }

/* ---- A form on the ground under a section label ---- */
.bz-form--ground { padding: 0 6px; margin-bottom: var(--section-gap); }

/* ---- A row that is a checkbox: the proposal review ---- */
.bz-row--tick { cursor: pointer; }
.bz-row--tick input { width: 18px; height: 18px; accent-color: var(--violet-500); margin: 0; flex: none; }
/* Revise the plan: what a fit moves, folded under its row (plan-edit.js), and the warnings, five at a time. */
.bz-fit { margin: 0 0 8px 34px; }
.bz-fit > summary { cursor: pointer; width: max-content; font: var(--text-button-sm); font-weight: 500; color: var(--link); }
.bz-fit__body { display: grid; gap: 6px; padding: 12px 0 4px; }
.bz-fit__body > .bz-eyebrow { margin: 6px 0 0; }
.bz-fit__list { list-style: none; margin: 0; padding: 0; }
.bz-fit__list li { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; border-bottom: 1px solid var(--hairline); font: var(--text-support); color: var(--ink-2); }
.bz-fit__when { flex: none; color: var(--muted); }
.bz-warnings > p { margin: 0 0 6px; font-weight: 600; }
.bz-warnings ul { margin: 0; padding-left: 18px; }
.bz-warnings details { margin-top: 6px; }
.bz-warnings summary { cursor: pointer; font-weight: 600; }
.bz-actions--foot { margin-top: 26px; padding: 0 6px; }
.bz-link--button { background: none; border: none; cursor: pointer; padding: 0; font: var(--text-button-sm); font-weight: 500; color: var(--link); font-family: var(--font-sans); }
.bz-link--button:hover { text-decoration: underline; }
.bz-ai__risk { margin-top: 14px; color: var(--ink-2); }
.bz-flight__meta--left { text-align: left; min-width: 0; }

/* ---- Services and platforms as rows ---- */
.bz-row--service .bz-client-chip { flex: none; }
.bz-row--service form { margin: 0; }
.bz-row__time--wide { min-width: 9rem; }
.bz-row--soon .bz-row__title > span:first-child { color: var(--muted); }
.bz-pick { cursor: pointer; }
.bz-pick--soon { cursor: default; }
.bz-pick--live input, .bz-pick--soon input { width: 18px; height: 18px; accent-color: var(--violet-500); margin: 0; flex: none; }
.bz-pick__logo { display: inline-flex; align-items: center; min-height: 24px; }
.bz-pick__logo img { display: block; width: auto; max-height: 28px; }
.bz-pick__wordmark { font: var(--text-row); font-weight: 600; color: var(--ink); }
.bz-pick .bz-client-chip { width: 28px; height: 28px; font-size: 11.5px; }
.bz-pick--soon .bz-pick__wordmark { color: var(--muted); font-weight: 500; }
.bz-pick--selected { background: var(--row-hover); }
/* A vendor row's face (logo, or letter and name) in a column of its own, so every row's description
   and pill start at the same place whatever the logo's width (2026-10-08). */
.bz-pick__title { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 4px 16px; }
.bz-pick__face { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (max-width: 560px) { .bz-pick__title { grid-template-columns: minmax(0, 1fr); } }
.bz-row--template .bz-row__meta { white-space: normal; text-align: right; }
/* With Edit beside Start onboarding (9a), the name keeps its line and the description wraps instead. */
.bz-row--template .bz-row__title { flex-wrap: wrap; row-gap: 4px; }
.bz-row--template .bz-row__title > a { flex: none; white-space: nowrap; }
.bz-row--template .bz-row__title > .bz-row__hint { flex-basis: 100%; }

/* ---- The sync log's columns ---- */
.bz-table--sync .bz-table__head, .bz-table--sync .bz-table__row { grid-template-columns: 1.4fr 1fr 1.2fr .5fr .6fr 1fr; }

/* ---- Settings: the logo slot, the accent swatches, the inline permission form ---- */
.bz-logo-row { display: flex; align-items: center; gap: 16px; }
.bz-logo-slot { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 56px; border-radius: var(--radius-button); background: var(--tint); color: var(--muted); font: var(--text-support); flex: none; }
.bz-logo-slot img { max-height: 40px; max-width: 104px; width: auto; height: auto; }
/* The logo upload (migration 031): its own form above the branding form, spaced like one field. */
.bz-logo-block { padding: 0 6px; margin-bottom: 22px; display: grid; gap: 22px; max-width: 560px; }
.bz-logo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bz-logo-actions form { display: flex; align-items: center; gap: 10px; margin: 0; }
.bz-logo-pick { position: relative; cursor: pointer; }
.bz-logo-pick:focus-within { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--focus-ring); }
.bz-logo-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bz-logo-actions [hidden] { display: none; }
.bz-logo-slot--square { width: 56px; }
.bz-label__where { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.bz-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); background: var(--tile-hover); color: var(--ink-3); font: 600 12.5px/1.3 var(--font-sans); cursor: pointer; }
.bz-swatch--on { background: var(--ink); color: #fff; }
.bz-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bz-swatch__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--shadow-hairline); }
.bz-swatch__dot--7c1fe0 { background: #7C1FE0; }
.bz-swatch__dot--1e7ccf { background: #1E7CCF; }
.bz-swatch__dot--0a3170 { background: #0A3170; }
.bz-swatch__dot--ef7d1a { background: #EF7D1A; }
.bz-swatch__dot--202227 { background: #202227; }
/* ---- Settings: branding — Debut or your own colors, and the preview (migration 029) ---- */
.bz-brand { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.bz-brand__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.bz-brand__mode { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 16px 14px 46px; border-radius: var(--radius-button); background: var(--surface); box-shadow: var(--shadow-hairline); cursor: pointer; }
.bz-brand__mode input { position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.bz-brand__mode:has(input:checked) { box-shadow: 0 0 0 2px var(--ink); }
.bz-brand__mode-title { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.bz-brand__mode-hint { font: var(--text-support); color: var(--muted); }
/* Each panel spaces its fields the way the form does (.bz-form gap), since they sit one level down. */
.bz-brand__default, .bz-brand__custom { display: grid; gap: 22px; }
/* One panel at a time. Without :has() both show, which is untidy and still works. */
.bz-brand:has(#brand_mode_default:checked) .bz-brand__custom { display: none; }
.bz-brand:has(#brand_mode_custom:checked) .bz-brand__default { display: none; }
.bz-color { display: flex; align-items: center; gap: 10px; }
.bz-color__hex { max-width: 160px; font-family: var(--font-mono); text-transform: uppercase; }
.bz-color__pick { width: 44px; height: 40px; padding: 0; border: none; border-radius: var(--radius-button); background: none; cursor: pointer; flex: none; }
/* The MSP's own color line (030): a switch, and five boxes that show only while it is on. */
/* The color bar (085): its three choices, then the own line's boxes when it is theirs. */
.bz-brand__bar { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.bz-brand__bar > .bz-help { margin: -4px 0 2px; }
.bz-brand__bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bz-brand:has(#brand_bar_own:not(:checked)) .bz-brand__stops { display: none; }
.bz-brand__stops { margin-top: 10px; }
.bz-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.bz-line__stop { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.bz-line__stop .bz-color__pick { width: 100%; height: 34px; }
.bz-line__n { font: var(--text-label); color: var(--muted); }
.bz-color__hex--sm { max-width: none; width: 100%; font-size: 12.5px; padding-left: 8px; padding-right: 8px; }
@media (max-width: 560px) { .bz-line { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The preview reads the palette tokens directly rather than the semantic aliases (--link, --action):
   an alias is resolved once at :root, so a token repainted on this element by branding.js would not
   reach it. */
.bz-brand-preview { display: grid; gap: 16px; }
.bz-brand-preview__card { position: relative; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
/* The prism edge along a card's TOP, wrapping both top corners — the design's side edge turned 90°,
   because design_v2 RULES.md: the prism stroke "must wrap slightly around the card's corners rather than
   stop as a straight bar … everywhere the marker appears", and the owner: always on top. 3px along the top, curling var(--prism-wrap)
   down each side and thinning to 1px as it goes. Needs a positioned parent with overflow hidden and
   the card radius (24px, which the corner circles below are drawn for). */
.bz-prism-top { position: absolute; left: 0; right: 0; top: 0; height: var(--prism-wrap); background: var(--gradient-prism); pointer-events: none;
  -webkit-mask: radial-gradient(circle at 24px 26px, transparent 23px, #000 23px) 0 0 / 24px 26px no-repeat, linear-gradient(#000,#000) 24px 0 / calc(100% - 48px) 3px no-repeat, radial-gradient(circle at 0 26px, transparent 23px, #000 23px) 100% 0 / 24px 26px no-repeat;
  mask: radial-gradient(circle at 24px 26px, transparent 23px, #000 23px) 0 0 / 24px 26px no-repeat, linear-gradient(#000,#000) 24px 0 / calc(100% - 48px) 3px no-repeat, radial-gradient(circle at 0 26px, transparent 23px, #000 23px) 100% 0 / 24px 26px no-repeat; }
.bz-brand-preview__body { display: grid; gap: 12px; padding: 18px 20px 20px; }
.bz-brand-preview__body > p { margin: 0; }
.bz-brand-preview__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bz-brand-preview__link { font: 600 14px/1.3 var(--font-sans); color: var(--violet-700); }
.bz-brand-preview__from { font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.bz-brand-preview__logo { display: block; max-width: 240px; max-height: 44px; width: auto; height: auto; }
.bz-brand-preview__warn { color: var(--orange-700); }
.bz-brand-preview__warn[hidden] { display: none; }
/* ---- The AI draft review: every proposal and assumption is a question (2026-09-30) ---- */
.bz-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: start; padding: 14px 6px; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-q__text { display: grid; gap: 4px; min-width: 0; margin: 0; font: var(--text-row); color: var(--ink); }
.bz-q__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bz-q__meta { font: var(--text-support); color: var(--muted); }
.bz-answer { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--tile-hover); }
.bz-answer__opt { position: relative; cursor: pointer; }
.bz-answer__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bz-answer__opt span { display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); font: 600 12.5px/1.2 var(--font-sans); color: var(--ink-3); transition: background var(--dur-fast), color var(--dur-fast); }
.bz-answer__opt:hover span { color: var(--ink); }
.bz-answer__opt input:checked + span { background: var(--ink); color: #fff; }
.bz-answer__opt input:focus-visible + span { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--focus-ring); }
/* The note only when the answer is "other": without :has() it simply always shows. */
.bz-answer__note { grid-column: 1 / -1; display: none; }
.bz-q:has(input[value="other"]:checked) .bz-answer__note { display: block; }
.bz-questions { display: grid; margin: 4px 0 18px; }
.bz-ai .bz-q { grid-template-columns: 1fr; border-bottom-color: rgba(31, 27, 23, 0.08); padding-left: 0; padding-right: 0; }
.bz-ai .bz-answer { justify-self: start; }
.bz-ai .bz-answer { background: rgba(255, 255, 255, 0.6); }
.bz-q--assumption .bz-q__text { font: var(--text-row-sm); color: var(--ink-2); }
@media (max-width: 40rem) { .bz-q { grid-template-columns: 1fr; } }
.bz-perm { display: flex; align-items: center; gap: 10px; margin: 0; flex: none; }
.bz-check--sm { font: var(--text-support); }
.bz-select--sm { width: auto; height: 34px; font-size: 13px; padding-right: 32px; }
.bz-client__bar { margin-bottom: 18px; }
.bz-client__bar .bz-bar { display: block; background: rgba(255,255,255,.7); }

/* ---- The auth tier: one card on the ground, nothing that needs a tenant ---- */
.bz-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bz-auth__card { width: min(440px, 100%); margin: 0; }
.bz-auth .bz-hero__body { padding: 32px 36px 30px; }
.bz-auth__wordmark { display: block; width: 186px; height: auto; margin-bottom: 24px; }
.bz-auth form { display: grid; gap: 14px; margin-top: 22px; }
.bz-auth label { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.bz-auth input:not([type="hidden"]) { font: var(--text-body); font-family: var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-button); height: var(--btn-h-lg); padding: 0 14px; width: 100%; box-shadow: var(--shadow-hairline); }
.bz-auth input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: transparent; }
/* The authenticator's QR code (095): a square the phone can read from arm's length. */
.bz-auth .qr { width: 196px; height: 196px; margin: 20px auto 4px; padding: 8px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-button); }
.bz-auth .qr svg { display: block; width: 100%; height: 100%; }
.bz-auth .primary { font: var(--text-button); height: var(--btn-h-lg); padding: 0 28px; background: var(--violet-500); color: #fff; border: none; border-radius: var(--radius-button); cursor: pointer; margin-top: 8px; transition: background var(--dur-fast), transform var(--dur-press); }
.bz-auth .primary:hover { background: var(--violet-600); }
.bz-auth .primary--link { display: inline-flex; align-items: center; justify-content: center; margin-top: 18px; text-decoration: none; }
/* The MSP's own portal address: the name and its state in one line, one sentence under it. */
.bz-domain { display: grid; }
.bz-sso { display: grid; gap: 14px; }
/* Settings as settings (owner, 2026-09-30): every section a card, its title and one sentence beside
   the controls; the cards stacked with even room between them. */
.bz-settings { display: grid; gap: 22px; margin-bottom: var(--section-gap); }
.bz-setting { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px 36px; align-items: start; padding: 26px 30px 28px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.bz-setting--full { grid-template-columns: minmax(0, 1fr); }
.bz-setting__head { min-width: 0; }
.bz-setting__title { font: var(--text-h2-sm); letter-spacing: var(--tracking-h2); color: var(--ink); margin: 0 0 6px; }
.bz-setting__note { font: var(--text-support); color: var(--muted); margin: 0; }
.bz-setting__body { min-width: 0; display: grid; gap: 18px; }
.bz-setting__body .bz-form { max-width: none; }
.bz-setting__body .bz-logo-block { padding: 0; margin: 0; max-width: none; }
.bz-setting__body .bz-domain, .bz-setting__body .bz-support { display: grid; gap: 14px; margin: 0; }
.bz-setting__body .bz-notice { margin: 0; }
/* An on/off switch (toggle.js saves it): a 48px track, a knob that slides, the action color when on. */
.bz-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: var(--text-body); color: var(--ink); }
.bz-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.bz-switch__track { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: var(--hairline); transition: background var(--dur-fast) var(--ease); }
.bz-switch__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s var(--ease); }
.bz-switch input:checked + .bz-switch__track { background: var(--violet-500); }
.bz-switch input:checked + .bz-switch__track .bz-switch__knob { transform: translateX(20px); }
.bz-switch input:focus-visible + .bz-switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bz-switch__label { font-weight: 500; }
/* A switch is a panel of its own, tinted, inside whatever card holds it. As a list row on the card's own
   white, with a hairline under it, it read as a faint box fading into the card (owner, 2026-10-05: "the
   individual setting box kind of fades into the bigger card"). */
.bz-row--switch { margin: 0; padding: 13px 16px; border-bottom: none; border-radius: 12px; background: var(--row-hover); }
.bz-row--switch:hover { background: var(--row-hover); }
.bz-row--switch .bz-switch { margin-left: auto; }
.bz-row--switch ~ .bz-row--switch { margin-top: 8px; }
.bz-row--switch .bz-switch input:not(:checked) + .bz-switch__track { background: #D8D0C3; }
.bz-row--switch + .bz-help, .bz-row--switch + noscript + .bz-help { margin-top: 8px; }
.bz-team { display: grid; gap: 0; }
.bz-picture { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; }
.bz-picture .bz-avatar { width: 72px; height: 72px; font-size: 22px; }
.bz-picture__forms { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.bz-picture__forms form { display: flex; gap: 10px; align-items: center; margin: 0; }
.bz-picture .bz-help { grid-column: 1 / -1; }
.bz-file { font: var(--text-support); color: var(--muted); max-width: 260px; }
.bz-upload { position: relative; overflow: hidden; }
.bz-upload input:focus-visible { outline: none; }
.bz-upload:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bz-team-picks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bz-engineer--team { margin-top: 12px; }
.bz-team .bz-row--person { flex-wrap: wrap; }
.bz-team .bz-perm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bz-input--sm { height: 34px; font-size: 13px; width: auto; min-width: 200px; }
.bz-team .bz-row { padding-left: 6px; padding-right: 6px; }
@media (max-width: 860px) { .bz-setting { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } }
/* Settings beside a column of their own (Branding's preview): the cards stack their words above
   their fields by the room they have, not the screen's. On a vertical monitor the column was ~500px
   and the fields got ~200 of it, so the color choices ran out of the card (owner, 2026-10-09). */
.bz-grid > .bz-settings { container-type: inline-size; }
@container (max-width: 680px) { .bz-setting { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } }
.bz-table--sso .bz-table__head, .bz-table--sso .bz-table__row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
/* Support's view of a tenant (042): a bar across the top of the main column, unmistakable. */
.bz-support-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 22px; padding: 10px 16px; border-radius: var(--radius-button); background: var(--peach); color: var(--orange-700); font: var(--text-support); }
.bz-support-bar__leave { margin: 0; }
.bz-support { display: grid; gap: 12px; margin-top: 30px; }
/* The actions column is a fixed width in the head and the rows alike: as `auto` it was nothing wide
   in the head and a button wide in the rows, so every cell sat left of its heading (owner, 2026-10-01). */
.bz-tenants .bz-table__head, .bz-tenants .bz-table__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.1fr) 150px; }
.bz-tenants .bz-table__row > span:last-child { justify-self: end; }
.bz-tenants__meta { display: block; font: var(--text-meta); color: var(--muted); }
.bz-sso form { display: grid; gap: 10px; }
.bz-details { margin-top: 4px; }
.bz-domain__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 6px; }
.bz-domain__host { font: var(--text-h2); letter-spacing: var(--tracking-h2); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }   /* a long address wraps rather than being cut off (2026-10-08) */
.bz-domain__word { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--font-sans); }
.bz-domain__word::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.bz-domain__status--ok .bz-domain__word { color: var(--green-700); }
.bz-domain__status--warn .bz-domain__word { color: var(--orange-700); }
.bz-domain__status--pending .bz-domain__word { color: var(--violet-600); }
.bz-domain__status--pending .bz-domain__word::before { animation: bzDomainPulse 1.6s ease-in-out infinite; }
@keyframes bzDomainPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bz-domain__note { font: var(--text-support); color: var(--muted); margin: 6px 0 0; max-width: 46rem; }
.bz-domain__records { margin: 14px 0 6px; }
.bz-domain__records > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 10px 6px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font: var(--text-support); color: var(--ink); }
.bz-domain__records > summary::-webkit-details-marker { display: none; }
.bz-domain__records > summary > span:first-child::before { content: "▸ "; color: var(--muted); }
.bz-domain__records[open] > summary > span:first-child::before { content: "▾ "; }
.bz-domain__found { color: var(--green-700); font-weight: 600; }
.bz-domain__records[open] > summary { border-bottom: none; }
/* The DNS records an MSP adds for its own domain: a table — type, name, value, status — with a copy
   button on every name and value. Long values wrap inside their cell rather than across the row. */
.bz-table--records { margin: 14px 0 18px; }
.bz-table--records .bz-table__head, .bz-table--records .bz-table__row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.5fr) 118px; align-items: start; }
.bz-records__type { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding-top: 3px; }
.bz-records__cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.bz-records__why { flex-basis: 100%; font: var(--text-meta); color: var(--muted); }
.bz-code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--tint); padding: 3px 8px; border-radius: 6px; overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
/* Copy: an icon in the value's top-right corner, there on hover (always where nothing hovers), a
   check and "Copied" for a moment once clicked. */
.bz-copyable { position: relative; display: inline-block; max-width: 100%; min-width: 0; }
.bz-copyable .bz-code { display: block; padding-right: 30px; }
/* A short name in a sentence (offline_access) wraps whole; only a long value breaks inside itself. */
.bz-help .bz-code { word-break: normal; overflow-wrap: anywhere; }
.bz-copy { position: absolute; top: 3px; right: 4px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px; border: none; border-radius: 5px; background: transparent; color: var(--violet-500); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast), background var(--dur-fast); }
.bz-copyable:hover .bz-copy, .bz-copy:focus-visible, .bz-copy--done { opacity: 1; }
.bz-copy:hover { background: var(--surface); }
.bz-copy__check { display: none; }
.bz-copy__said { display: none; font: 600 11px/1 var(--font-sans); }
.bz-copy--done { color: var(--green-700); background: var(--surface); }
.bz-copy--done .bz-copy__sheet { display: none; }
.bz-copy--done .bz-copy__check, .bz-copy--done .bz-copy__said { display: inline; }
@media (hover: none) { .bz-copy { opacity: 1; } }
/* Change and remove, side by side under one fold. */
.bz-domain__edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; margin-top: 10px; }
.bz-domain__edit .bz-form { flex: 1 1 320px; }
.bz-domain__edit > form:last-child { padding-bottom: 0; }
@media (max-width: 760px) {
  .bz-table--records .bz-table__head { display: none; }
  .bz-table--records .bz-table__row { grid-template-columns: 1fr; gap: 8px; }
}
.bz-details summary { cursor: pointer; margin-top: 10px; }
.bz-auth .bz-doors { display: grid; gap: 10px; margin-top: 22px; }
.bz-auth .bz-doors .primary--link { margin-top: 0; }
.bz-auth .bz-doors .secondary, .bz-auth .secondary { font: var(--text-button); height: var(--btn-h-lg); display: inline-flex; align-items: center; justify-content: center; padding: 0 28px; background: var(--tint); color: var(--ink); border-radius: var(--radius-button); text-decoration: none; transition: background var(--dur-fast), transform var(--dur-press); }
.bz-auth .bz-doors .secondary:hover, .bz-auth .secondary:hover { background: var(--tint-hover); }
/* Microsoft first, a password folded beneath for an owner (054). */
.bz-auth details.muted { margin-top: 16px; }
.bz-auth details.muted > summary { cursor: pointer; font: var(--text-button-sm); color: var(--link); list-style: none; }
.bz-auth details.muted > summary::-webkit-details-marker { display: none; }
.bz-auth details.muted[open] > summary { margin-bottom: 8px; }
.bz-auth .secondary { border: none; cursor: pointer; margin-top: 8px; }
.bz-auth__wordmark--own { width: auto; max-width: 240px; max-height: 44px; height: auto; }
.bz-auth__tenant { font: 600 17px/1.3 var(--font-sans); color: var(--ink); margin: 0 0 24px; }
.bz-auth__powered { font: var(--text-meta); color: var(--muted); margin: 22px 0 0; }
.bz-auth__foot-mark { display: block; width: 112px; height: auto; margin: 26px 0 0; opacity: .7; }
.bz-auth .primary:active { transform: var(--press); }
.bz-auth .muted, .bz-auth .intro { font: var(--text-support); color: var(--muted); margin: 18px 0 0; }
/* Stacked links read as a list, not as two paragraphs. */
.bz-auth .muted + .muted { margin-top: 8px; }
/* The card lifts on hover everywhere else, because everywhere else it is one of several
   things to choose between. Sign-in is one card on an empty screen: there is nothing to
   choose, so the lift is just the page moving under the cursor while someone types.
   Owner, 2026-09-22: "when i hover over the login box, it moves (animates). this one
   shouldnt, nor should password or mfa." */
.bz-auth .bz-hero:hover { transform: none; box-shadow: var(--shadow-card); }
.bz-auth .muted a { color: var(--link); font-weight: 600; text-decoration: none; }
.bz-auth .error { font: var(--text-support); color: var(--red-700); margin: 0 0 8px; }
.bz-auth ol, .bz-auth ul { padding-left: 20px; color: var(--ink-2); font: var(--text-body); }
.bz-auth .secret { font-family: var(--font-mono); font-size: 15px; letter-spacing: .12em; word-break: break-all; padding: 12px 14px; background: var(--tint); border-radius: var(--radius-button); }
.bz-auth .primary-link { display: inline-block; margin-top: 8px; font: var(--text-button-sm); color: var(--link); text-decoration: none; }
.bz-auth code, .bz-auth .code { font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; word-break: break-all; }

/* ---- The letter: the headline and the body are edited inside the card ---- */
.bz-input--title { font: var(--text-h2); letter-spacing: var(--tracking-h2); height: auto; padding: 6px 10px; border-color: transparent; background: var(--tint); }
.bz-input--title:focus { background: var(--surface); }
.bz-textarea--letter { min-height: 280px; margin: 12px 0 8px; font: var(--text-body); line-height: 1.6; }
.bz-prose--letter { white-space: pre-wrap; font: var(--text-body); line-height: 1.65; color: var(--ink-2); max-width: 40rem; margin: 8px 0 14px; }
.bz-hero__actions .bz-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- The survey's tallies and the read-out's quotes ---- */
.bz-row--tall { align-items: flex-start; }
.bz-row__title--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
/* A task with a note: title and pills on one line that wraps (a pill drops below a long title rather
   than painting over the text beside it), the note beneath at full width. */
.bz-row__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.bz-row__title--stack .bz-row__hint { white-space: normal; }
.bz-row--done .bz-row__line > span:first-child, .bz-row--done .bz-row__line > a { color: var(--faint); text-decoration: none; }
.bz-row--tall .bz-mark, .bz-row--tall .bz-tick { margin-top: 2px; }
.bz-quote { font-style: italic; }
.bz-ai__form { margin-top: 18px; }
.bz-ai__sub { margin: 18px 0 8px; }

/* ---- Profile: session hours (033, 035) — each weekday a start and an end with its breaks, or blocked
   off; blocked days beside the week ---- */
.bz-hours__lede { margin: 0 6px 14px; }
.bz-hours { display: grid; gap: 0; }
.bz-hours__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 6px 10px; }
.bz-hours__copied { font: var(--text-support); color: var(--muted); }
.bz-hours__day { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; gap: 8px 16px; padding: 10px 6px; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-hours__name { padding-top: 8px; font: var(--text-row); color: var(--ink); }
.bz-hours__body { min-width: 0; }
.bz-hours__times { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bz-hours__range { display: inline-flex; align-items: center; gap: 6px; }
.bz-hours__time { width: 120px; height: 36px; padding: 0 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.bz-hours__to { font: var(--text-support); color: var(--muted); }
.bz-hours__break { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bz-hours__break[hidden], .bz-hours__add[hidden] { display: none; }
.bz-hours__tag { min-width: 46px; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.bz-hours__remove { border: none; background: none; padding: 4px 2px; font: var(--text-support); color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bz-hours__remove:hover { color: var(--ink); }
.bz-hours__offnote { display: none; padding-top: 8px; font: var(--text-support); color: var(--muted); }
/* Blocked off: a plain checkbox at the end of the row (owner, 2026-09-30: "i want it as an aparent check
   box"). Ticked, the day's times give way to one line saying so, in CSS alone, so it holds on a page
   drawn before any script has run. */
.bz-hours__block { padding-top: 7px; font: var(--text-support); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.bz-hours__unsaved { margin: 0 6px 16px; }
/* Own hours, and the way back to the workspace's (133): a quiet line under the week's Save. */
.bz-hours__reset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; padding: 14px 6px 0; border-top: 1px solid var(--hairline); }
.bz-hours__reset .bz-help { margin: 0; }
.bz-hours__reset .bz-actions { margin: 0; }
.bz-hours__day:has(.bz-hours__block input:checked) .bz-hours__times { display: none; }
.bz-hours__day:has(.bz-hours__block input:checked) .bz-hours__offnote { display: block; }
.bz-hours__day:has(.bz-hours__block input:checked) .bz-hours__name { color: var(--muted); }
.bz-hours__day--bad .bz-hours__name { color: var(--orange-700); }
.bz-hours__day--bad .bz-hours__time { border-color: var(--orange-700); }
.bz-hours .bz-actions { margin-top: 18px; }
.bz-hours__blocked { align-items: center; }
.bz-hours__new { gap: 14px; margin-top: 16px; }
.bz-hours__whole { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* "Part of the day" opens its two times; "All day" needs none. */
.bz-hours__part { display: none; }
.bz-hours__new:has(input[name="whole"][value="0"]:checked) .bz-hours__part { display: block; }
.bz-engineer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 8px; }
.bz-engineer .bz-field { flex: 1 1 180px; }
.bz-engineer .bz-select { height: 38px; }

/* ---- The launch screen (app.baselinezero.io): a card for each module the organization has ---- */
.bz-launch { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; max-width: 980px; margin-top: 6px; }
.bz-launch__app { position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 26px 24px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease); }
.bz-launch__app:hover, .bz-launch__app:focus-visible { transform: var(--lift); box-shadow: var(--shadow-card-hover); }
.bz-launch__tile { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 8px; border-radius: var(--radius-tile); background: var(--violet-100); color: var(--violet-700); }
.bz-launch__tile svg { stroke: currentColor; }
.bz-launch__name { font: var(--text-h2-sm); color: var(--ink); }
.bz-launch__what { font: var(--text-support); color: var(--muted); }

/* ---- The client portal: a white-label page on the ground ----
   Owner, 2026-09-30, with the design to follow: "why does the client portal side have so much blank
   space on the side?" The page was held to 1216px against the left edge, so a wide screen was half
   empty on the right. Header, page and footer now share one centered column, as the design draws. */
.bz-portal { display: block; min-height: 100vh; --portal-w: 1088px; }
.bz-portal__head, .bz-portal__main, .bz-portal__foot { box-sizing: border-box; width: 100%; max-width: var(--portal-w); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.bz-portal__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 20px; }
/* The rainbow under the header: along the top of the page, as everywhere, its ends tapered so it never
   stops as a hard straight bar (RULES.md; the stylesheet test holds every painted prism to a mask). */
.bz-portal__head::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px; background: var(--gradient-prism); pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.bz-portal__id { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.bz-portal__tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #FFFFFF; font: 600 11px/1 var(--font-sans); letter-spacing: 0.02em; }
.bz-portal__brand { font: 600 17px/1.3 var(--font-sans); color: var(--ink); }
/* The MSP's logo in place of its name: drawn inside 240 × 44 (brand.js LOGO_BOX), never enlarged. */
.bz-portal__logo { display: block; max-width: 240px; max-height: 44px; width: auto; height: auto; }
.bz-portal__who { display: inline-flex; align-items: center; gap: 12px; font: var(--text-support); color: var(--muted); }
.bz-portal__main { padding-top: 44px; padding-bottom: 40px; }
.bz-portal__main .bz-h1 strong { font-weight: 300; }
.bz-portal__strong { color: var(--mint-ink); }
.bz-portal__foot { display: flex; gap: 18px; flex-wrap: wrap; padding-bottom: 32px; font: var(--text-meta); color: var(--muted); }
.bz-portal__grid { margin-top: 10px; }
.bz-portal__figures { display: flex; gap: 40px; margin: 0 6px 34px; flex-wrap: wrap; }
.bz-portal__fig { display: grid; gap: 2px; }
.bz-portal__fig-value { font: var(--text-numeral-lg); letter-spacing: var(--tracking-numeral-lg); font-variant-numeric: tabular-nums; color: var(--ink); }
.bz-portal__fig-label { font: var(--text-support); color: var(--muted); }
.bz-row--ask { align-items: center; }
.bz-portal__go { width: auto; flex: none; }
/* The portal home (2026-09-30): a greeting sized to the page, then the one card — the next step — then the
   person's own steps beside their messages. Owner: "a lot of white space, and doesnt apparently show what I
   need to do next." */
.bz-portal__h1 { margin-bottom: 8px; }
.bz-portal__lede { margin-bottom: 36px; max-width: 46rem; }
/* The desk's hero card, which lifts on hover because the desk's is a way in; here nothing about the
   card is a link but its button, so it stays put. */
.bz-portal .bz-hero:hover { transform: none; box-shadow: var(--shadow-card); }
.bz-portal__yours { margin: 30px 6px 0; }
.bz-portal__letter-head { max-width: 44rem; }
/* The point of contact's pages (079): a tab each, their people as a table sorted by any column, and
   the credentials as one bar. On a phone the table's rows read as cards, each cell named. */
.bz-portal__tabs { margin: 0 0 22px; }
.bz-portal__secured .bz-bar { display: block; margin: 2px 0 8px; }
.bz-table--people .bz-table__head, .bz-table--people .bz-table__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, .9fr); }
.bz-table--people .bz-cell--mono { overflow-wrap: anywhere; }
.bz-sort { color: inherit; text-decoration: none; }
.bz-sort:hover, .bz-sort--on { color: var(--ink); }
@media screen and (max-width: 760px) {
  .bz-table--people .bz-table__head { display: none; }
  .bz-table--people .bz-table__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bz-table--people [data-label]::before { content: attr(data-label) " "; color: var(--muted); font-family: var(--font-sans); }
}
/* Who was still to do their onboarding when a letter went (078): on the portal's letter and beside the draft. */
.bz-letter-people { max-width: 44rem; margin: 28px 0 0; }
.bz-letter-people__head { font: var(--text-support); font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.bz-letter-people__list { list-style: none; margin: 0; padding: 0; }
.bz-letter-people__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 8px 0; border-top: 1px solid var(--rule-soft); font: var(--text-support); }
.bz-letter-people__name { color: var(--ink); font-weight: 500; }
.bz-letter-people__label { color: var(--muted); }
/* Staff previewing the portal: the design's pill, bottom right, over the page rather than above it. */
.bz-viewing { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font: var(--text-support); box-shadow: 0 12px 30px -12px rgba(20, 14, 8, 0.55); }
.bz-viewing strong { font-weight: 600; }
.bz-viewing a, .bz-viewing summary { color: #FFFFFF; text-decoration: none; opacity: 0.85; cursor: pointer; }
.bz-viewing a:hover, .bz-viewing summary:hover { opacity: 1; }
.bz-viewing__back { font-weight: 600; }
.bz-viewing__others { position: relative; }
.bz-viewing__others summary { list-style: none; }
.bz-viewing__others summary::-webkit-details-marker { display: none; }
.bz-viewing__list { position: absolute; right: 0; bottom: calc(100% + 12px); display: grid; min-width: 230px; max-height: 60vh; overflow: auto; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.bz-viewing__list a { color: var(--ink); opacity: 1; padding: 8px 10px; border-radius: 8px; }
.bz-viewing__list a:hover { background: var(--tint); }
.bz-portal__next { position: relative; display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; margin: 0 0 30px; padding: 26px 28px 24px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.bz-portal__next-body { flex: 1; min-width: 240px; display: grid; gap: 6px; }
.bz-portal__next p { margin: 0; }
.bz-portal__next-title { font: var(--text-h2); color: var(--ink); }
.bz-portal__next-detail { font: var(--text-support); color: var(--muted); }
.bz-portal__next-go { width: auto; flex: none; padding-left: 30px; padding-right: 30px; }
.bz-portal__next--done { display: grid; gap: 6px; }
.bz-portal__note { margin: 12px 6px 0; }
.bz-mark--now { border-color: var(--mint-ink); border-width: 2px; }
.bz-portal__msgs { display: grid; gap: 12px; margin-bottom: 18px; }
.bz-portal__msg { margin: 0; display: grid; gap: 2px; font: var(--text-support); color: var(--mint-muted); }
.bz-portal__msg-from { font-weight: 600; color: var(--mint-ink); }
.bz-portal__msg-time { font-weight: 400; color: var(--mint-muted); margin-left: 6px; }
.bz-portal__form { display: grid; gap: 34px; max-width: 640px; margin-top: 10px; }
.bz-portal__fieldset { border: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bz-portal__fieldset legend { padding: 0; margin-bottom: 8px; }
.bz-portal__q { gap: 10px; }
.bz-portal__q-label { font: var(--text-row); color: var(--ink); }
.bz-portal__choices { display: grid; gap: 0; }
.bz-portal__choice { min-height: var(--touch-client); padding: 11px 6px; }
.bz-portal__submit { max-width: 320px; }
/* Booking a session (033): the days that have open times as a strip of tiles, then the chosen day's
   times, morning and afternoon. Mint, the client's side, so both wear the MSP's highlight when it
   has its own colors. */
/* The client's session picker (2026-10-06): the month alone in a card, centered, until a day is picked;
   then the day's times beside it. A day with open times is a mint disc, the chosen one solid; the rest
   are plain numbers. The slide from one state to the other is the browser's view transition between
   the two pages (portal.css), named here. */
/* Not on a .bz-row: the vendor and plan pickers' rows are .bz-pick too, and took this card's
   fit-content width and auto margins, each row a different width and offset (2026-10-08). */
.bz-pick:not(.bz-row) { display: flex; align-items: flex-start; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 28px 32px 24px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); }
.bz-pick__cal { display: grid; gap: 12px; width: 456px; max-width: 100%; view-transition-name: pick-cal; }
.bz-pick__month { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.bz-pick__title { margin: 0; font: var(--text-h2); letter-spacing: var(--tracking-h2); color: var(--ink); }
.bz-pick__step { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--mint-ink); background: var(--mint); font-size: 24px; line-height: 1; text-decoration: none; transition: background var(--dur-fast); }
.bz-pick__step:hover, .bz-pick__step:focus-visible { background: var(--mint-line); }
.bz-pick__step--off { color: var(--faint); background: transparent; }
.bz-pick__wd, .bz-pick__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bz-pick__wd > span { text-align: center; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); padding-bottom: 2px; }
.bz-pick__day, .bz-pickday, .bz-pick__blank { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 48px; border-radius: 50%; font: 600 16px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.bz-pick__day { color: var(--faint); font-weight: 500; }
.bz-pick__day--today { box-shadow: inset 0 0 0 1.5px var(--hairline); color: var(--muted); }
.bz-pickday { color: var(--mint-ink); background: var(--mint); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.bz-pickday:hover, .bz-pickday:focus-visible { background: var(--mint-line); transform: scale(1.06); }
.bz-pickday--on, .bz-pickday--on:hover { background: var(--mint-ink); color: #fff; transform: none; }
.bz-pick__key { margin: 4px 0 0; text-align: center; }
.bz-pick__times { display: grid; gap: 18px; align-content: start; width: 340px; max-width: 100%; margin-left: 36px; padding-left: 36px; border-left: 1px solid var(--hairline); view-transition-name: pick-times; }
.bz-pick__when { margin: 0 0 -10px; }
.bz-pick__times .bz-slots__head { font: var(--text-h2-sm); letter-spacing: var(--tracking-h2); }
.bz-pick__times .bz-slots__times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bz-slots { display: grid; gap: 18px; max-width: 860px; }
.bz-slots__head { margin: 0; font: var(--text-h2); color: var(--ink); }
.bz-slots__group { display: grid; gap: 10px; }
.bz-slots__label { margin: 0; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.bz-slots__times { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; height: 44px; padding: 0 14px; border-radius: var(--radius-button); border: 1.5px solid var(--mint-line); background: var(--surface); color: var(--mint-ink); font: var(--text-button-sm); font-variant-numeric: tabular-nums; text-decoration: none; transition: background var(--dur-fast), border-color var(--dur-fast); }
.bz-slot:hover, .bz-slot:focus-visible { background: var(--mint); border-color: var(--mint-ink); }
.bz-slots__now { margin: 0 6px 18px; }
.bz-session { margin-top: 6px; }
.bz-session__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bz-session__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.bz-session__confirm .bz-portal__submit { width: auto; padding-left: 30px; padding-right: 30px; }
@media (max-width: 40rem) {
  .bz-portal__head, .bz-portal__main, .bz-portal__foot { padding-left: 20px; padding-right: 20px; }
  .bz-portal__head::after { left: 20px; right: 20px; }
  .bz-portal__main { padding-top: 26px; }
  .bz-viewing { left: 12px; right: 12px; justify-content: space-between; }
  .bz-portal__figures { gap: 24px; }
  .bz-row--ask { flex-wrap: wrap; }
  .bz-portal__go, .bz-portal__submit, .bz-portal__next-go { width: 100%; max-width: none; }
  .bz-portal__h1 { font-size: 32px; }
  .bz-hours__day { grid-template-columns: minmax(0, 1fr) auto; }
  .bz-hours__body { grid-column: 1 / -1; grid-row: 2; }
  .bz-pick:not(.bz-row) { flex-direction: column; width: auto; padding: 20px 16px; border-radius: 18px; }
  .bz-pick__cal { width: auto; }
  .bz-pick__day, .bz-pickday, .bz-pick__blank { min-height: 40px; }
  .bz-pick__times { width: auto; margin: 22px 0 0; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .bz-slots__times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bz-slot { min-width: 0; }
}

/* ---- Home: a client as a substantial row with its four doors (R24) ---- */
.bz-client-row { display: grid; gap: 10px; padding: 18px 6px; border-bottom: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-row-lg); transition: background var(--dur-fast); }
.bz-client-row:hover { background: var(--row-hover); }
.bz-client-row__top { display: flex; align-items: baseline; gap: 12px; }
.bz-client-row__name { flex: 1; font: 500 20px/1.3 var(--font-sans); color: var(--ink); text-decoration: none; }
.bz-client-row__name:hover { text-decoration: underline; }
.bz-client-row__mid { display: flex; align-items: center; gap: 12px; }
.bz-client-row__mid .bz-flight__meta { min-width: 0; text-align: left; white-space: nowrap; }
.bz-client-row__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bz-client-row__owner { display: inline-flex; align-items: center; gap: 8px; font: var(--text-support); color: var(--muted); flex: 1; }
.bz-client-row__links { display: flex; gap: 18px; }
.bz-client-row__links a { font: var(--text-button-sm); font-weight: 500; color: var(--link); text-decoration: none; }
.bz-client-row__links a:hover { text-decoration: underline; }
.bz-row--place { padding: 13px 6px; }
.bz-row--heard { padding: 12px 6px; align-items: flex-start; }
.bz-row--heard .bz-avatar { flex: none; margin-top: 2px; }
.bz-row--heard .bz-row__title--stack span:first-child { font: var(--text-row-sm); }
.bz-row--heard .bz-row__hint { white-space: normal; }
.bz-row--client .bz-client-row__links { flex: none; }
.bz-row--client .bz-client-chip { flex: none; }

/* ---- Empty, and the sentence that says so ---- */
.bz-empty { padding: 26px 6px; font: var(--text-body); color: var(--muted); margin: 0; }
.bz-empty a { color: var(--link); font-weight: 600; text-decoration: none; }

/* ---- The escalation dialog, and any other card over a scrim ---- */
.bz-scrim { position: fixed; inset: 0; background: rgba(31,27,23,.45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.bz-dialog { width: min(640px, 100%); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--card-pad); }

/* ---- Narrow viewports: the rail folds into a top strip, the grid stacks ---- */
@media (max-width: 60rem) {
  .bz-shell { flex-direction: column; }
  .bz-rail { width: auto; flex-direction: row; padding: 12px 16px; gap: 14px; position: static; height: auto; align-self: auto; }
  .bz-rail__logo { margin: 0; }
  .bz-rail__label { display: none; }
  .bz-rail__menu { margin: 0; }
  .bz-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); }
  .bz-main { padding: 20px 20px 40px; }
  .bz-grid, .bz-grid--wide { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .bz-h1 { font-size: 32px; }
  .bz-numeral { width: 100%; }
  .bz-hero { flex-direction: column; }
  .bz-tabs { flex-wrap: wrap; gap: 18px; }
  .bz-tabs__right { flex-wrap: wrap; gap: 10px; }
}
/* A phone's top strip: with Help in it, six tiles and the avatar ran 54px past a 390 screen
   (2026-10-08). Smaller tiles, closer together. */
@media (max-width: 30rem) {
  .bz-rail { gap: 4px; padding: 10px 12px; }
  .bz-rail__tile { width: 40px; height: 40px; }
}

/* The plan as rows on New onboarding (057): a fieldset of picks, like the vendor picker. */
.bz-plan-pick { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.bz-plan-pick > legend { padding: 0; margin-bottom: 8px; }
.bz-plan-pick .bz-pick + .bz-pick { margin-top: 8px; }
/* A single action above a list, e.g. Invite everyone not yet invited (057). */
.bz-actions--row { margin: 0 0 12px; display: flex; justify-content: flex-end; }

/* The foot of an onboarding's aside: how it ends, one link a line (owner, 2026-10-01: the two ran together and wrapped). */
.bz-aside-links { display: flex; flex-direction: column; gap: 6px; font: var(--text-meta); }

/* The AI review's proposed additions (2026-10-01): a heading with air under it, each phase a group as on the plan,
   its rows on the ground, nothing repeated per row. */
.bz-proposals { margin-top: 26px; }
.bz-proposals__help { margin: -4px 0 14px; max-width: 72ch; }
.bz-group--proposals { margin-top: 10px; }
.bz-group--proposals > summary .bz-section { margin-bottom: 0; }
.bz-questions--ground { margin: 0 0 6px; padding: 0 14px; background: var(--surface); border-radius: var(--radius-row); box-shadow: var(--shadow-table); }
.bz-questions--ground .bz-q:last-child { border-bottom: 0; }
.bz-q--proposal .bz-q__line > span:first-child { font-weight: 600; }

/* Settings → Templates: the editor on the left, the email as it will read on the right (2026-10-01). */
/* Every client email, one row each, opened to edit (Settings › Templates, 066). */
.bz-emails { display: grid; gap: 10px; }
.bz-email { border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.bz-email__summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 14px 18px; }
.bz-email__summary::-webkit-details-marker { display: none; }
.bz-email__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 16px; }
.bz-email__title { grid-column: 1; font: var(--text-body); font-weight: 600; color: var(--ink); }
.bz-email__when { grid-column: 1; font: var(--text-support); color: var(--muted); }
.bz-email__summary .bz-pill { grid-column: 2; grid-row: 1 / span 2; }
.bz-email[open] > .bz-email__summary { border-bottom: 1px solid var(--hairline); }
.bz-email__body { padding: 24px 24px 26px; }
.bz-template { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.bz-template__form { min-width: 0; gap: 18px; }
/* The preview sits on the page's own ground, as an email sits in an inbox: the card stands on it. */
.bz-template__preview { min-width: 0; position: sticky; top: 16px; }
.bz-template__preview > .bz-eyebrow { margin-bottom: 10px; }
/* An email as its client gets it (settings.js emailPreview), drawn as src/mail/layout.js draws it: its
   ground, the card with the color line wrapping its top corners, its type and spacing, in the fonts an
   inbox falls back to (the desk's Poppins is a web font no inbox has). The email is inline styles,
   which this page's CSP refuses, so it is these classes instead: change one, change the other. */
.bz-mail { --mail-ink: #1F1B17; --mail-ink-2: #3F3830; --mail-muted: #6F675E; --mail-font: 'Segoe UI', Helvetica, Arial, sans-serif;
  padding: 14px 16px 28px; border-radius: 16px; background: #F6F3EC; font-family: var(--mail-font); }
.bz-mail__inbox { display: grid; gap: 2px; padding: 2px 6px 14px; }
.bz-mail__inbox > p { margin: 0; }
.bz-mail__sender { font: 400 13px/1.4 var(--mail-font); color: var(--mail-muted); }
.bz-mail__subject { font: 600 15px/1.4 var(--mail-font); color: var(--mail-ink); }
.bz-mail__card { position: relative; overflow: hidden; max-width: 560px; margin: 0 auto; border-radius: 24px; background: #FFFFFF; }
.bz-mail__brand { padding: 28px 32px 12px; font: 600 15px/1.3 var(--mail-font); color: var(--mail-ink); }
.bz-mail__logo { display: block; max-width: 100%; height: auto; }
.bz-mail__text { padding: 8px 32px 0; }
.bz-mail__text p { margin: 0 0 16px; font: 400 15px/1.6 var(--mail-font); color: var(--mail-ink-2); }
.bz-mail__text p.bz-mail__ink { color: var(--mail-ink); }
.bz-mail__text--after { padding: 8px 32px 20px; }
.bz-mail__action { padding: 4px 32px 20px; }
.bz-mail__button { display: inline-block; padding: 13px 26px; border-radius: 10px; background: var(--action); color: var(--on-action); font: 600 15px/1.2 var(--mail-font); }
.bz-mail__paste { margin: 0; padding: 0 32px 16px; font: 400 12.5px/1.5 var(--mail-font); color: var(--mail-muted); }
.bz-mail__url { color: var(--action-text); text-decoration: underline; word-break: break-all; }
/* The merge tags: buttons that type themselves where the cursor is (public/email-preview.js). */
.bz-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-tag { font: 500 12.5px/1.2 var(--font-mono, ui-monospace, monospace); color: var(--ink-2); background: var(--tile-hover); border: none; border-radius: var(--radius-pill); padding: 6px 10px; cursor: pointer; transition: var(--transition-tint); }
.bz-tag:hover { background: var(--tint-hover); color: var(--ink); }
.bz-tag:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bz-template__actions { flex-wrap: wrap; gap: 10px; }
.bz-template__reset { margin-left: auto; background: none; border: none; padding: 0; cursor: pointer; }
/* Settings › Templates: the onboarding templates, as the library lists them. */
.bz-tpl-list { display: grid; }
/* The MSP's own paragraphs sit in a wrapper of their own; what follows them still needs the gap (066). */
[data-email-editor] [data-preview-body] > p:last-child { margin-bottom: 12px; }
/* A row's right side in two lines: who it goes to, then the subject (Settings › Templates, 066). */
.bz-row__meta--stack { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: normal; }
@media (max-width: 56rem) { .bz-template { grid-template-columns: 1fr; gap: 24px; } .bz-template__preview { position: static; } .bz-email__body { padding: 18px 14px 20px; }
  .bz-mail { padding: 12px 8px 20px; } .bz-mail__brand { padding: 22px 20px 10px; } .bz-mail__text, .bz-mail__action, .bz-mail__paste { padding-left: 20px; padding-right: 20px; } .bz-mail__text--after { padding: 8px 20px 16px; } }
/* A member's row on the Team tab opens their page (2026-10-01). */
.bz-row--link { text-decoration: none; color: inherit; }
.bz-row--link:hover { background: var(--tile-hover); }
.bz-row__go { color: var(--muted); font-size: 20px; line-height: 1; padding: 0 6px; }

/* Settings cards (2026-10-01): a body that is only actions sits level with the heading; a definition list
   in the narrow body gets room for its terms. */
.bz-setting__body--center { align-self: center; }
.bz-setting__body .bz-dl { padding: 0; }
.bz-setting__body .bz-dl__row dt { flex: 0 0 160px; }
.bz-setting__body .bz-picture { margin-bottom: 4px; }
/* Integrations: four categories as cards in two columns (2026-10-01). */
.bz-integrations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 22px; }
.bz-integration { padding: 24px 26px 22px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-table); min-width: 0; display: grid; gap: 14px; align-content: start; }
.bz-integration__head { min-width: 0; }
.bz-integration__title { font: var(--text-h2-sm); letter-spacing: var(--tracking-h2); color: var(--ink); margin: 0 0 6px; }
.bz-integration__note { font: var(--text-support); color: var(--muted); margin: 0; }
.bz-integration__none { font: var(--text-support); color: var(--muted); margin: 0; padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.bz-integration .bz-row--service { padding-left: 0; padding-right: 0; flex-wrap: wrap; row-gap: 6px; }
/* In a half-width card the status, the time and Configure wrap under the name instead of spilling out (2026-10-07). */
.bz-integration .bz-row--service .bz-row__title { flex-basis: 12rem; }
.bz-integration .bz-row--service .bz-row__time--wide { min-width: 0; }
.bz-integration__vendors { display: flex; flex-wrap: wrap; gap: 8px 18px; font: var(--text-meta); color: var(--ink-2); border-top: 1px solid var(--rule-soft); padding-top: 12px; }
.bz-integration__vendor { display: inline-flex; align-items: center; gap: 6px; }
.bz-integration__vendor--soon { color: var(--muted); }
.bz-integrations__foot { max-width: 60ch; }
@media (max-width: 56rem) { .bz-integrations { grid-template-columns: 1fr; } }

/* The template editor (9a, 2026-10-04): phases with their tasks as rows, the selected one beside
   them in the rail; on a narrow screen the rail follows the plan. */
.bz-tpl { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.bz-tpl__plan { min-width: 0; }
.bz-tpl__rail { position: sticky; top: 24px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-table); padding: 18px 20px 20px; }
.bz-tpl-phase { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-table); margin: 0 0 16px; overflow: hidden; }
.bz-tpl-phase--on { outline: 2px solid var(--violet-500); outline-offset: -2px; }
.bz-tpl-phase__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 18px; background: var(--table-head); color: inherit; text-decoration: none; }
.bz-tpl-phase__head:hover .bz-tpl-phase__name { text-decoration: underline; }
.bz-tpl-phase__name { font: var(--text-row); font-weight: 600; color: var(--ink); }
.bz-tpl-phase__head .bz-row__meta { white-space: normal; }
.bz-tpl-task { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--rule-soft); color: var(--ink); text-decoration: none; font: var(--text-support); }
.bz-tpl-task:hover { background: var(--table-head); }
.bz-tpl-task--on { background: var(--violet-100); }
/* What a data-stay link opened, ringed for a moment so the eye finds it (nav.js showTarget). */
.bz-flash { animation: bz-flash 1.4s ease-out; }
@keyframes bz-flash { from { box-shadow: 0 0 0 3px var(--violet-500), var(--shadow-table); } to { box-shadow: 0 0 0 3px transparent, var(--shadow-table); } }
.bz-tpl-task__title { flex: 1; min-width: 0; }
.bz-tpl-add { margin: 0; padding: 10px 18px 12px; border-top: 1px solid var(--rule-soft); flex-wrap: nowrap; }
.bz-tpl-add .bz-input { flex: 1; min-width: 0; }
.bz-tpl-add--phase { padding: 4px 0 0; border-top: 0; }
.bz-tpl-form { max-width: none; }
.bz-tpl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.bz-tpl-acts form { margin: 0; }
/* A client survey template's questions (124): the question, and its buttons at the right of its row. */
.bz-sq { align-items: flex-start; gap: 18px; }
.bz-sq__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.bz-sq__acts form { margin: 0; }
.bz-sq-name { margin: 0 0 22px; }
.bz-sq-name .bz-input { max-width: 420px; }
/* The console's Adoption page (125): a dashboard. Tiles and cards are white, because data needs a surface. */
.bz-dash { display: grid; gap: 20px; }
.bz-dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bz-kpi { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-table); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.bz-kpi__label { font: 600 12px/1.4 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bz-kpi__value { font: 300 44px/1.05 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bz-kpi__note { font: 600 12.5px/1.4 var(--font-sans); }
.bz-tone--muted { color: var(--muted); }
.bz-dash__row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bz-dash__card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-table); padding: 22px 24px; }
.bz-dash__title { font: 600 15px/1.3 var(--font-sans); color: var(--ink); margin: 0 0 16px; }
.bz-dash__title--gap { margin-top: 26px; }
.bz-dash__sub { font: 400 13.5px/1.3 var(--font-sans); color: var(--muted); margin-left: 6px; }
.bz-dash__foot { margin: 14px 0 0; }
.bz-dash__sparks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; }
.bz-spark-block { min-width: 0; }
.bz-spark-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bz-spark-block__label { font: var(--text-support); color: var(--ink-2); }
.bz-spark-block__total { font: 300 26px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bz-spark-block__unit { font: 400 12.5px/1 var(--font-sans); color: var(--muted); margin-left: 5px; }
.bz-spark { display: block; }
.bz-spark rect { fill: var(--violet-500); }
.bz-spark rect.is-zero { fill: var(--hairline); }
.bz-spark-block__axis { display: flex; justify-content: space-between; margin-top: 6px; font: var(--text-meta); color: var(--muted); }
.bz-funnel__row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 76px; gap: 12px; align-items: center; padding: 7px 0; }
.bz-funnel__label { font: var(--text-support); color: var(--ink-2); white-space: nowrap; }
.bz-funnel__n { font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.bz-funnel__pct { font: 400 12.5px/1 var(--font-sans); color: var(--muted); margin-left: 6px; }
.bz-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.bz-use { display: grid; grid-template-columns: minmax(0, 1fr) 90px 30px; gap: 12px; align-items: center; font: var(--text-support); color: var(--ink-2); }
.bz-use__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-use__n { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); font-weight: 600; }
.bz-planbar { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--hairline); }
.bz-planbar > span { display: block; height: 100%; }
.bz-planbar__free { background: var(--mint-line); }
.bz-planbar__practice { background: var(--prism-purple); }
.bz-planbar__firm { background: var(--violet-700); }
.bz-planbar__trial { background: var(--orange-500); }
.bz-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 14px; font: var(--text-support); color: var(--ink-2); }
.bz-legend__item { display: flex; align-items: center; gap: 8px; }
.bz-legend__item strong { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.bz-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bz-nudge { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule-soft); font: var(--text-support); color: var(--ink-2); }
.bz-nudge:first-of-type { border-top: none; }
.bz-nudge strong { font: 600 18px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .bz-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-dash__row, .bz-uses, .bz-dash__sparks { grid-template-columns: minmax(0, 1fr); }
}
.bz-tpl-days { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.bz-tpl-changes { margin: 0 6px 18px; }
.bz-fieldset { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
@media (max-width: 60rem) {
  .bz-tpl { grid-template-columns: minmax(0, 1fr); }
  .bz-tpl__rail { position: static; }
  .bz-tpl-add { flex-wrap: wrap; }
  .bz-tpl-task { flex-wrap: wrap; }
  /* Seven labels do not fit a phone's width, and every phase card below names itself. */
  .bz-tpl__plan .bz-phases { display: none; }
}

/* ---- Today as a calendar (2026-10-05): a month or a week of tasks and sessions (routes/calendar.js) ----
   Owner, 2026-10-05: "i need them to have a full calendar view option as well, with the ability to
   filter between tasks and user scheduled onboardings." On white, as a table is: a data surface earns
   it. A session is a client's time, so it wears mint; a task sits on the white, a done one struck
   through, an overdue or blocked one in orange with the word. Today's number is lit as the current
   tile is. On a phone the same markup is an agenda: the days that hold something, one under another. */
.bz-cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 18px; }
.bz-cal-bar__when { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; padding-left: 6px; }
.bz-cal-bar__title { margin: 0; font: var(--text-h2-sm); letter-spacing: var(--tracking-h2); color: var(--ink); white-space: nowrap; }
.bz-cal-bar__step { display: flex; align-items: center; gap: 6px; }
.bz-cal-bar__arrow { width: 34px; padding: 0; }
.bz-cal-bar__views { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bz-cal-bar .bz-chips--filters { flex-basis: 100%; margin: 0; }
.bz-cal { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-table); overflow: hidden; }
.bz-cal__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--table-head); border-bottom: 1px solid var(--rule-soft); }
.bz-cal__weekdays > span { padding: 11px 8px 9px 15px; font: 600 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-table-head); text-transform: uppercase; color: var(--muted); }
.bz-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--rule-soft); }
.bz-cal__day { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 132px; padding: 8px 7px 10px; background: var(--surface); }
.bz-cal--week .bz-cal__day { gap: 8px; min-height: 360px; padding: 12px 7px; }
.bz-cal__day--out { background: var(--table-head); }
.bz-cal__date { display: flex; align-items: center; gap: 6px; padding-left: 2px; }
.bz-cal__wd { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.bz-cal--month .bz-cal__wd { display: none; }
.bz-cal__num { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); text-decoration: none; transition: var(--transition-tint); }
a.bz-cal__num:hover { background: var(--tile-hover); color: var(--ink); }
.bz-cal__day--out .bz-cal__num { color: var(--muted); font-weight: 500; }
.bz-cal__day--today .bz-cal__num, .bz-cal__day--today a.bz-cal__num:hover { background: var(--violet-500); color: var(--on-action); }
.bz-cal__stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.bz-cal__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.bz-cal--week .bz-cal__items { gap: 5px; }
.bz-cal__item { min-width: 0; }
.bz-cal__link { display: flex; align-items: flex-start; gap: 6px; padding: 4px 6px 5px; border-radius: var(--radius-row); color: var(--ink); text-decoration: none; transition: background var(--dur-fast); }
.bz-cal__link:hover { background: var(--row-hover); }
.bz-cal__body { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-width: 0; }
.bz-cal__line { font: 500 12.5px/1.35 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-cal__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.bz-cal__item--task .bz-cal__time { color: var(--ink-3); }
.bz-cal__client { font: 400 12px/1.35 var(--font-sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-cal--week .bz-cal__line, .bz-cal--week .bz-cal__client { white-space: normal; overflow-wrap: anywhere; }
/* A week's column is narrow: the time takes a line of its own, so a name does not break around it. */
.bz-cal--week .bz-cal__time { display: block; }
.bz-cal__item--session .bz-cal__link { background: var(--mint); color: var(--mint-ink); }
.bz-cal__item--session .bz-cal__link:hover { background: color-mix(in srgb, var(--mint) 80%, var(--mint-line)); }
.bz-cal__item--session .bz-cal__client { color: var(--mint-muted); }
.bz-cal__item--done .bz-cal__what { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bz-cal__item--done .bz-cal__time, .bz-cal__item--done .bz-cal__client { color: var(--faint); }
.bz-cal__item--warn .bz-cal__what, .bz-cal__item--warn .bz-cal__client { color: var(--orange-700); }
.bz-cal__who { width: 20px; height: 20px; margin-top: 1px; font-size: 9px; }
.bz-cal__item--session .bz-cal__who { background: var(--surface); color: var(--mint-ink); }
.bz-cal__more { justify-self: start; padding: 2px 6px; border-radius: var(--radius-row); font: 600 12px/1.4 var(--font-sans); color: var(--link); text-decoration: none; }
.bz-cal__more:hover { background: var(--row-hover); }
/* A kickoff, lockout or wrap date: a quiet line with a diamond, the lockout's in the color of behind. */
.bz-cal__mark { display: block; padding: 1px 6px; border-radius: var(--radius-row); font: 500 12px/1.4 var(--font-sans); color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-cal__mark:hover { background: var(--row-hover); color: var(--ink); }
.bz-cal__mark::before { content: ""; display: inline-block; box-sizing: border-box; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px; border: 1.5px solid var(--outline); border-radius: 1px; transform: rotate(45deg); }
.bz-cal__mark--lockout::before { border-color: var(--orange-500); }
.bz-cal--week .bz-cal__mark { white-space: normal; }
.bz-cal__nothing, .bz-cal__none { display: none; }
@media screen and (max-width: 760px) {
  .bz-cal { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
  .bz-cal__weekdays { display: none; }
  .bz-cal__days { display: block; background: transparent; }
  .bz-cal__day, .bz-cal--week .bz-cal__day { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 0; padding: 12px 6px; background: transparent; border-bottom: var(--hairline-w) solid var(--hairline); }
  .bz-cal__day--out, .bz-cal__day--empty:not(.bz-cal__day--today) { display: none; }
  .bz-cal__date { flex-direction: column; gap: 3px; padding: 2px 0 0; }
  .bz-cal--month .bz-cal__wd { display: block; }
  .bz-cal__line, .bz-cal__client, .bz-cal__mark { white-space: normal; }
  .bz-cal--week .bz-cal__time { display: inline; }
  .bz-cal__line { font-size: 14px; }
  .bz-cal__client { font-size: 12.5px; }
  .bz-cal__link { padding: 7px 10px 8px; }
  .bz-cal__nothing { display: block; margin: 4px 0 0; font: var(--text-support); color: var(--muted); }
  .bz-cal__none { display: block; }
}

/* A client as a row (client-card.js): Home's clients in flight and every client on Clients. Two lines on
   a surface of its own: the chip, the name, where the plan is and the status word; then the lead, where it
   came from and its tasks, with the four doors at the right. A thin edge down the left in its colour when
   it is behind or past a date. The layout follows the list's own width, not the window's. */
.bz-crows { display: grid; gap: 10px; container-type: inline-size; }
/* The parts every row shares sit in fixed columns, so the bar starts, the day reads and the status ends at
   the same place down the list (owner, 2026-10-06: "the consistants need to be in line and orderly"). */
.bz-crow { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 272px 168px;
  grid-template-areas: "chip name plan status" "chip sub doors doors"; gap: 6px 16px; align-items: center;
  padding: 14px 18px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-hairline); transition: box-shadow var(--dur-fast); }
.bz-crow:hover { box-shadow: var(--shadow-card); }
.bz-crow--warn::before, .bz-crow--red::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange-500); }
.bz-crow--red::before { background: var(--red-500); }
.bz-crow > .bz-client-chip { grid-area: chip; width: 36px; height: 36px; border-radius: 11px; font-size: 12px; }
.bz-crow__name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.3 var(--font-sans); color: var(--ink); text-decoration: none; }
.bz-crow__name:hover { text-decoration: underline; }
.bz-crow__plan { grid-area: plan; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.bz-crow__plan > .bz-crow__day:only-child { grid-column: 1 / -1; }
.bz-crow__day { font: var(--text-support); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bz-crow__status { grid-area: status; justify-self: end; padding: 4px 10px; border-radius: var(--radius-pill); font: 600 12px/1.2 var(--font-sans); white-space: nowrap; }
.bz-crow__status--ok { color: var(--green-700); background: var(--green-100); }
.bz-crow__status--warn { color: var(--orange-700); background: var(--peach); }
.bz-crow__status--red { color: var(--red-700); background: var(--red-100); }
.bz-crow__status--violet { color: var(--violet-700); background: var(--violet-100); }
.bz-crow__status--muted { color: var(--ink-3); background: var(--tile-hover); }
.bz-crow__sub { grid-area: sub; display: flex; align-items: center; gap: 8px; min-width: 0; font: var(--text-support); color: var(--muted); }
.bz-crow__sub > span:last-child { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bz-crow__sub .bz-avatar { width: 20px; height: 20px; font-size: 8.5px; flex: none; }
.bz-crow__doors { grid-area: doors; justify-self: end; display: flex; gap: 2px; margin-right: -8px; }
.bz-crow__doors a { padding: 3px 8px; border-radius: 8px; font: 500 13px/1.2 var(--font-sans); color: var(--link); text-decoration: none; transition: var(--transition-tint); }
.bz-crow__doors a:hover { background: var(--violet-50); }
.bz-crow--done { box-shadow: none; outline: 1px solid var(--hairline); outline-offset: -1px; }
.bz-crow--done:hover { box-shadow: var(--shadow-hairline); }
/* A narrower list (Home beside its aside): the same fixed parts, a size down, so the name keeps its room. */
@container (max-width: 900px) {
  .bz-crow { grid-template-columns: 36px minmax(0, 1fr) 228px 140px; }
  .bz-crow__plan { grid-template-columns: 96px minmax(0, 1fr); }
}
@container (max-width: 560px) {
  .bz-crow { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "chip name status" "chip sub sub" "chip plan plan" "chip doors doors"; }
  .bz-crow__plan { grid-template-columns: 120px minmax(0, 1fr); }
  .bz-crow__name { white-space: normal; }
  .bz-crow > .bz-client-chip { align-self: start; }
  .bz-crow__plan { margin-top: 4px; }
  .bz-crow__doors { justify-self: start; margin: 2px 0 0 -8px; }
}
/* A task row with its client beside it, on a phone: the title takes the width, pills wrap under it, and
   the client and the time go on a line of their own beneath (Home's Today list had squeezed the title
   to a word a line, with its pill over the client's name). */
@media screen and (max-width: 560px) {
  .bz-row:has(> .bz-row__meta) { flex-wrap: wrap; row-gap: 2px; }
  .bz-row:has(> .bz-row__meta) > .bz-row__title { flex: 1 1 calc(100% - 44px); flex-wrap: wrap; row-gap: 4px; }
  .bz-row:has(> .bz-row__meta) > .bz-row__meta { margin-left: 42px; white-space: normal; }
  .bz-row:has(> .bz-row__meta) > .bz-row__time { margin-left: auto; }
}

/* ============================================================================
   Lists in columns (2026-10-06): a client's People, Settings › Team
   ============================================================================
   Owner: "people page needs much more UI love"; "the settings -> users page needs more ui love". The
   rows were flex lines whose words overflowed one another once a phone number or a long status was on
   them. Each list now sets its columns once (--cols) for a head and every row; under a container width
   the head goes and a row stacks: who, then the facts, then what can be done. A STATE is a dot and a
   word in a tone, the one way standing is said on these lists and on the Profile's calendar. */
/* The container is this OUTER element; the list (.bz-people, .bz-mlist) sits inside it, because a
   container query styles a container's descendants and never the container itself. */
.bz-list { container-type: inline-size; }
.bz-lhead { display: grid; align-items: end; gap: 14px; padding: 2px 6px 10px; font: 600 11.5px/1.3 var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hairline); }
/* A status that wraps breaks evenly ("Cancelled · was" / "Thu, Oct 8"), not inside its date. */
.bz-state { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; font: var(--text-support); font-weight: 500; color: var(--muted); text-wrap: balance; }
/* The dot sits on the first line's middle, so a status that wraps keeps it at the top. */
.bz-state::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: currentColor; opacity: .45; }
.bz-state--ok { color: var(--green-700); font-weight: 600; }
.bz-state--warn { color: var(--orange-700); font-weight: 600; }
.bz-state--ok::before, .bz-state--warn::before { opacity: 1; }
/* A link that is a button or a summary, as the quiet actions on a row are: no button chrome. */
button.bz-link, summary.bz-link { background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; cursor: pointer; }

/* People. The row stacks by default (the tab's column, beside its aside, is rarely wider than 700px):
   who on the left, the status and the session in a right column, what can be done along the bottom.
   In a wide enough column it is one line with a head over it. */
.bz-people__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-top: 14px; }
.bz-people__bar .bz-chips { margin: 0; }
.bz-people__bar form { margin: 0; }
.bz-people__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.bz-people__bar + .bz-section { margin-top: 20px; }
/* Session and Last in portal take the room their words need, at least 150 and 130 (2026-10-14: "Monday morning · remote" ran into the next column at a fixed 150). */
.bz-people { --cols: 40px minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(150px, max-content) minmax(130px, max-content) minmax(max-content, auto); margin-top: 10px; }
.bz-people .bz-lhead { display: none; }
/* Tick boxes (148: to welcome or delete several people at once): a column of their own before the avatar,
   for whoever may act on the people; the bar above the list ticks everyone shown. */
.bz-people--pick { --cols: 22px 40px minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(150px, max-content) minmax(130px, max-content) minmax(max-content, auto); }
.bz-people--pick .bz-prow { grid-template-columns: 22px 40px minmax(0, 1fr) auto; grid-template-areas: "pick av name state" "pick av facts when" "pick av told told" "pick av seen seen" "pick av acts acts"; }
.bz-prow__pick { grid-area: pick; align-self: start; display: flex; margin-top: 12px; }
.bz-prow__pick input { margin: 0; }
.bz-people__bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 2px; padding: 0 6px; }
.bz-people__bulkacts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
/* The values to type into HaloPSA's webhook when Debut may not add it (149): label above value, one per row. */
.bz-hook { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 10px 0 14px; font: var(--text-support); }
.bz-hook dt { color: var(--muted); }
.bz-hook dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .bz-hook { grid-template-columns: minmax(0, 1fr); gap: 2px; } .bz-hook dd { margin-bottom: 8px; } }
.bz-prow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av name state" "av facts when" "av told told" "av seen seen" "av acts acts"; align-items: center; gap: 4px 14px; padding: 12px 6px; border-bottom: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-row); transition: background var(--dur-fast); }
.bz-prow:hover { background: var(--row-hover); }
.bz-prow > .bz-avatar { grid-area: av; align-self: start; margin-top: 2px; }
.bz-prow__name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; font: var(--text-row); }
.bz-prow__name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-prow__facts { grid-area: facts; display: flex; align-items: center; min-width: 0; font: var(--text-meta); color: var(--muted); white-space: nowrap; }
.bz-prow__facts:empty { display: none; }
.bz-prow__facts > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.bz-prow__facts > * + *::before { content: '·'; margin: 0 6px; color: var(--faint); }
.bz-prow__facts > a:hover { text-decoration: underline; }
.bz-prow__dept { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.bz-prow__kit { flex-basis: 100%; color: var(--muted); }
/* The questions before the calendar (083; the client survey's since 2026-10-13): a question reads as a sentence, numbered, not as a field's eyebrow. */
.bz-questions { display: grid; gap: 22px; }
.bz-question { display: block; margin: 0 0 8px; font: 500 17px/1.45 var(--font-sans); color: var(--ink); }
.bz-question__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); font: 600 13px/1 var(--font-sans); vertical-align: 2px; }
.bz-input--num { max-width: 160px; }
/* Breathing room (084): the two choices side by side. */
.bz-buffers { display: grid; gap: 14px; }
/* The confirm step's line about the number that came with the answers (086). */
.bz-portal__reach { margin: 0 0 6px; }
.bz-buffers__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 40rem) { .bz-buffers__pair { grid-template-columns: minmax(0, 1fr); } }
.bz-person-edit__told .bz-dl__row dd { overflow-wrap: anywhere; }
.bz-prow__kit--ok { color: var(--green-700); }
.bz-person-edit__told { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.bz-person-edit__told .bz-dl { padding: 0; gap: 4px; }
.bz-person-edit__told .bz-dl__row dt { flex-basis: 84px; }
.bz-person-edit__told .bz-dl__row--stack dt { flex: none; }
.bz-person-edit__kit { margin: 0; gap: 6px; }
.bz-prow__dept > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-prow > .bz-state { grid-area: state; justify-self: end; text-align: right; }
/* How many reminders went and when the next goes (2026-10-14): a line of its own, under the status where the head shows. */
.bz-prow__told { grid-area: told; min-width: 0; font: var(--text-meta); color: var(--muted); }
/* The last time they were in their portal (134): a column where the head shows, a labelled line where it does not. */
.bz-prow__seen { grid-area: seen; display: flex; flex-wrap: wrap; gap: 0 6px; font: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.bz-prow__seen:empty { display: none; }
.bz-prow__seen .bz-prow__rel::before { content: '·'; margin-right: 6px; color: var(--faint); }
.bz-prow__when { grid-area: when; justify-self: end; display: grid; gap: 1px; justify-items: end; font: var(--text-support); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bz-prow__when:empty { display: none; }
.bz-prow__when strong { color: var(--ink); font-weight: 600; }
.bz-prow__rel { font: var(--text-meta); color: var(--muted); }
/* Sorting: the head's labels are the links where the head shows; a line of them where it does not. */
.bz-lhead .bz-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.bz-lhead .bz-sort:hover, .bz-lhead .bz-sort--on { color: var(--ink); }
.bz-sort__arrow { font-size: 11px; line-height: 1; opacity: 0; transition: opacity var(--dur-fast); }
.bz-sort:hover .bz-sort__arrow, .bz-sort--on .bz-sort__arrow { opacity: 1; }
.bz-people__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 6px 0; font: var(--text-meta); color: var(--muted); }
.bz-people__sort a { color: var(--ink-3); text-decoration: none; }
.bz-people__sort a:hover { color: var(--ink); }
.bz-people__sort a.bz-sort--on { color: var(--ink); font-weight: 600; }
.bz-people__sort .bz-sort__arrow { opacity: 1; margin-left: 3px; }
.bz-prow__acts { grid-area: acts; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-top: 6px; }
.bz-prow__acts form { margin: 0; }
.bz-prow__acts .bz-person-outcome { gap: 8px; }
.bz-prow__note { font: var(--text-meta); color: var(--faint); white-space: nowrap; }
/* The columns are set on the list itself, outside the query: a container query reaches an element's
   descendants, never the container, so a value set there would be unset where the head reads it. */
@container (min-width: 960px) {
  /* One grid for the head and every row (subgrid): the actions column's width differs row to row
     (Complete alone, or No show and Complete), and a row sizing its own columns put the head's labels
     and the cells beneath them at different places. The list sizes the columns once, for all. */
  .bz-people { display: grid; grid-template-columns: var(--cols); column-gap: 12px; }
  .bz-people .bz-lhead { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
  /* The email and the phone are a column of their own here (owner, 2026-10-06: "put email and phone
     number in the table instead of cramming them in the person section"), the phone under the email as
     the department sits under the name; a lone one takes both lines. The facts wrapper falls away
     (display: contents) so each fact takes its cell. */
  .bz-prow { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "av name mail state when seen acts" "av dept tel told when seen acts"; row-gap: 2px; }
  .bz-people--pick .bz-prow { grid-template-columns: subgrid; grid-template-areas: "pick av name mail state when seen acts" "pick av dept tel told when seen acts"; }
  .bz-prow__pick { grid-row: 1 / 3; align-self: center; margin-top: 0; }
  .bz-prow > .bz-state { align-self: end; }
  .bz-prow__told { align-self: start; }
  .bz-prow:not(:has(.bz-prow__told)) > .bz-state { grid-row: 1 / 3; align-self: center; }
  /* A name with nothing under it is centred in the row, beside the avatar (owner, 2026-10-16: "the names
     arent center with the icons because there is no data there but it should be"); end-aligned, it sat
     on the row's floor. */
  .bz-prow:not(:has(.bz-prow__dept)) .bz-prow__name { grid-row: 1 / 3; align-self: center; }
  .bz-prow__name { align-self: end; }
  .bz-prow__dept { align-self: start; }
  .bz-prow > .bz-avatar { grid-row: 1 / 3; align-self: center; margin-top: 0; }
  .bz-prow__facts { display: contents; }
  .bz-prow__facts > * + *::before { content: none; }
  .bz-prow__dept { grid-area: dept; }
  .bz-prow__mail { grid-area: mail; align-self: end; font: var(--text-support); color: var(--ink-2); }
  .bz-prow__tel { grid-area: tel; align-self: start; font: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
  .bz-prow:not(:has(.bz-prow__tel)) .bz-prow__mail { grid-row: 1 / 3; align-self: center; }
  .bz-prow:not(:has(.bz-prow__mail)) .bz-prow__tel { grid-row: 1 / 3; align-self: center; }
  .bz-prow > .bz-state { justify-self: start; text-align: left; }
  .bz-prow__when { justify-self: start; justify-items: start; }
  .bz-prow__seen { display: grid; gap: 1px; justify-items: start; font: var(--text-support); white-space: nowrap; }
  .bz-prow__seen .bz-prow__rel::before { content: none; }
  .bz-prow__seenlabel { display: none; }
  .bz-prow__acts { justify-content: flex-end; margin-top: 0; }
  .bz-people__sort { display: none; }
}
/* Add people: the dialog's two ways in, side by side. */
.bz-dialog--wide { width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto; }
.bz-addp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.bz-addp .bz-form { max-width: none; }
.bz-addp__head { margin: 0 0 4px; font: var(--text-section); color: var(--ink); }
.bz-addp__cancel { margin-top: 20px; }
@media (max-width: 40rem) { .bz-addp { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 480px) {
  .bz-prow { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "av name" "av facts" "av state" "av told" "av when" "av seen" "av acts"; }
  .bz-people--pick .bz-prow { grid-template-columns: 22px 40px minmax(0, 1fr); grid-template-areas: "pick av name" "pick av facts" "pick av state" "pick av told" "pick av when" "pick av seen" "pick av acts"; }
  .bz-prow > .bz-state, .bz-prow__when { justify-self: start; text-align: left; justify-items: start; }
  .bz-prow__facts { white-space: normal; flex-wrap: wrap; }
}

/* Devices (owner, 2026-10-16: "a devices tab with cards like the user"): the People card for what
   NinjaOne manages, a drawing of the kind where a person has initials, and the whole card a link into
   NinjaOne. Stacked by default; in a wide column one row per device under a head, as People. */
.bz-devices { --cols: 40px minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(70px, .7fr) minmax(0, 1fr) minmax(120px, max-content) 16px; margin-top: 10px; }
.bz-devices .bz-lhead { display: none; }
.bz-drow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "gl name state" "gl kind seen" "gl os user" "gl hw serial"; align-items: center; gap: 2px 14px; padding: 12px 6px; border-bottom: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-row); color: inherit; text-decoration: none; transition: background var(--dur-fast); }
a.bz-drow:hover { background: var(--row-hover); }
.bz-drow__glyph { grid-area: gl; align-self: start; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px; border-radius: 50%; background: var(--tile-hover); color: var(--ink-3); }
.bz-drow__name { grid-area: name; min-width: 0; font: var(--text-row); }
.bz-drow__name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-drow__kind { grid-area: kind; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; font: var(--text-meta); color: var(--muted); }
.bz-drow__os { grid-area: os; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-support); color: var(--ink-2); }
.bz-drow__hw { grid-area: hw; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-meta); color: var(--muted); }
.bz-drow__serial { grid-area: serial; justify-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.bz-drow__label { color: var(--faint); }
.bz-drow__user { grid-area: user; justify-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-support); color: var(--ink); }
.bz-drow__last { color: var(--muted); }
.bz-drow > .bz-state { grid-area: state; justify-self: end; }
.bz-drow__seen { grid-area: seen; justify-self: end; font: var(--text-meta); color: var(--muted); white-space: nowrap; }
.bz-drow__open { grid-area: open; display: none; color: var(--faint); transition: color var(--dur-fast); }
a.bz-drow:hover .bz-drow__open { color: var(--ink); }
.bz-drow__os:empty, .bz-drow__hw:empty, .bz-drow__serial:empty, .bz-drow__user:empty, .bz-drow__seen:empty { display: none; }
/* Fewer columns than People, so the row fits from a narrower column: a laptop's. */
@container (min-width: 760px) {
  .bz-devices { display: grid; grid-template-columns: var(--cols); column-gap: 12px; }
  .bz-devices .bz-lhead { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
  .bz-drow { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "gl name os serial user state open" "gl kind hw serial user seen open"; }
  .bz-drow__glyph { align-self: center; margin-top: 0; }
  .bz-drow__name, .bz-drow__os, .bz-drow > .bz-state { align-self: end; }
  .bz-drow__kind, .bz-drow__hw, .bz-drow__seen { align-self: start; }
  .bz-drow__user, .bz-drow > .bz-state, .bz-drow__seen, .bz-drow__serial { justify-self: start; }
  /* What it runs and what it is wrap rather than lose their ends in a narrow column. */
  .bz-drow__os, .bz-drow__hw { white-space: normal; }
  .bz-drow__label { display: none; }
  .bz-drow__name > span { white-space: normal; }
  .bz-drow__open { display: block; }
  .bz-people__sort:has(+ .bz-devices) { display: none; }
  .bz-drow:not(:has(.bz-drow__seen:not(:empty))) > .bz-state { grid-row: 1 / 3; align-self: center; }
  .bz-drow:not(:has(.bz-drow__hw:not(:empty))) .bz-drow__os { grid-row: 1 / 3; align-self: center; }
}
@container (max-width: 480px) {
  .bz-drow { grid-template-areas: "gl name name" "gl kind kind" "gl state seen" "gl os os" "gl hw hw" "gl serial serial" "gl user user"; }
  .bz-drow > .bz-state, .bz-drow__seen, .bz-drow__user, .bz-drow__serial { justify-self: start; }
}

/* Settings › Team */
.bz-mlist { --cols: 40px minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) 20px; }
.bz-mlist .bz-lhead, .bz-mrow { grid-template-columns: var(--cols); }
.bz-mrow { display: grid; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-row); text-decoration: none; color: inherit; transition: background var(--dur-fast); }
.bz-mrow:hover { background: var(--row-hover); }
.bz-mrow__who { min-width: 0; display: grid; gap: 2px; }
.bz-mrow__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font: var(--text-row); }
.bz-mrow__mail { font: var(--text-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-mrow__meta { display: contents; }
.bz-mrow__role { display: grid; gap: 1px; min-width: 0; font: var(--text-support); font-weight: 500; color: var(--ink); }
.bz-mrow__sub { font: var(--text-meta); font-weight: 400; color: var(--muted); }
.bz-mrow__cal { min-width: 0; }
.bz-mrow > .bz-row__go { justify-self: end; }
@container (max-width: 680px) {
  .bz-mlist .bz-lhead { display: none; }
  .bz-mrow { grid-template-columns: 40px minmax(0, 1fr) 20px; grid-template-areas: "av who go" "av meta go"; row-gap: 6px; }
  .bz-mrow > .bz-avatar { grid-area: av; align-self: start; margin-top: 2px; }
  .bz-mrow__who { grid-area: who; }
  .bz-mrow__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .bz-mrow__role { display: flex; gap: 6px; }
  .bz-mrow__role .bz-mrow__sub::before { content: '·'; margin-right: 6px; color: var(--faint); }
  .bz-mrow > .bz-row__go { grid-area: go; align-self: center; }
}

/* Profile › Calendar (081): the connection as one panel, the calendars as rows with their two choices. */
.bz-conn { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: var(--row-hover); }
.bz-conn__who { min-width: 0; display: grid; gap: 4px; }
.bz-conn__acct { font: var(--text-row); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-conn__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font: var(--text-support); color: var(--muted); }
.bz-conn__line > span + span::before { content: '·'; margin: 0 8px; color: var(--faint); }
.bz-conn__acts { display: flex; align-items: center; gap: 18px; flex: none; }
.bz-conn__acts form { margin: 0; }
.bz-calmx__head, .bz-calmx__row { display: grid; grid-template-columns: minmax(0, 1fr) 124px 132px; gap: 12px; align-items: center; padding: 10px 6px; }
.bz-calmx__head { padding-top: 0; font: 600 11.5px/1.3 var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hairline); }
.bz-calmx__head > span:not(:first-child) { text-align: center; }
.bz-calmx__row { border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-calmx__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font: var(--text-row-sm); }
.bz-calmx__hint { font: var(--text-meta); color: var(--muted); }
.bz-calmx__pick { display: inline-flex; justify-self: center; padding: 6px; cursor: pointer; }
.bz-calmx__pick input { width: 18px; height: 18px; accent-color: var(--violet-500); margin: 0; cursor: pointer; }
.bz-calmx__pick input:disabled { opacity: .35; cursor: not-allowed; }
.bz-calmx .bz-help { margin-top: 12px; }
.bz-calmx .bz-actions { margin-top: 14px; }
@media (max-width: 40rem) {
  .bz-calmx__head, .bz-calmx__row { grid-template-columns: minmax(0, 1fr) 84px 96px; }
  .bz-conn__line { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bz-conn__line > span + span::before { content: none; }
}

/* ---- People: what they told us (088) — the intake summary in the rail ---- */
.bz-intake { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bz-intake__item { position: relative; display: grid; gap: 3px; padding-left: 14px; font: var(--text-support); color: var(--ink-2); }
.bz-intake__item::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-700); }
.bz-intake__text { color: var(--ink); }
.bz-intake__who { font: var(--text-meta); color: var(--muted); }
.bz-intake__note { font: var(--text-meta); color: var(--ink-2); font-style: italic; }
.bz-intake__none { margin: 0; font: var(--text-support); color: var(--muted); }
.bz-intake__foot { margin: 16px 0 0; font: var(--text-meta); color: var(--muted); }

/* ---- People: booking on a person's behalf (089) — the portal's calendar on the desk, the confirmation beside it ---- */
.bz-book { display: grid; gap: 22px; justify-items: center; }
.bz-book--confirm { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; justify-items: stretch; }
.bz-book__confirm { gap: 18px; max-width: none; padding: 24px 26px 26px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.bz-book__when { font: 300 26px/1.2 var(--font-sans); letter-spacing: var(--tracking-h2); margin: 4px 0 6px; color: var(--ink); }
.bz-book__questions { border-top: 1px solid var(--hairline); padding-top: 14px; }
.bz-book__questions summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: baseline; }
.bz-book__questions summary::-webkit-details-marker { display: none; }
.bz-book__questions summary::before { content: "›"; grid-row: 1 / span 2; font: var(--text-support); color: var(--muted); transition: transform .18s ease; transform-origin: 40% 50%; }
.bz-book__questions[open] summary::before { transform: rotate(90deg); }
.bz-book__sum { font: var(--text-support); font-weight: 600; color: var(--ink); }
.bz-book__opt { grid-column: 2; font: var(--text-meta); color: var(--muted); }
.bz-book__qs { display: grid; gap: 14px; padding-top: 14px; }
/* A client survey question on the desk (2026-10-13): the prompt is a sentence, so it reads as one, not as an eyebrow. */
.bz-book__qlabel { display: block; margin: 0 0 6px; font: var(--text-support); color: var(--ink); }
@media (max-width: 1100px) {
  .bz-book--confirm { grid-template-columns: 1fr; justify-items: center; }
  /* Narrow, the time they picked comes first; the calendar waits below for a change of mind. */
  .bz-book__confirm { order: -1; width: 100%; max-width: 456px; }
}

/* ---- The plan (090): the trial banner across the desk, the lock on a card, the ladder on Billing ---- */
.bz-trial { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--violet-100); color: var(--ink); font: var(--text-support); }
.bz-trial strong { font-weight: 600; }
.bz-trial--warn { background: #FFF1E6; }
.bz-trial .bz-link { margin-left: 6px; }
/* Over the plan's limits (121): the lock, in red, on every desk page until the workspace is back within them. */
.bz-trial--locked { background: var(--red-100); color: var(--red-700); border: 1px solid var(--red-500); }
.bz-trial--locked p { margin: 0; }
.bz-trial--locked p + p { margin-top: 6px; }
.bz-trial--locked .bz-link { color: var(--red-700); font-weight: 600; text-decoration: underline; }
.bz-trial__links .bz-link:first-child { margin-left: 0; }
.bz-plan-lock { margin: 0; }
.bz-locked { margin-top: 14px; opacity: .5; filter: grayscale(1); pointer-events: none; user-select: none; }
.bz-was { color: var(--muted); text-decoration: line-through; margin-right: 2px; }
.bz-plans__now { margin: 0 0 22px; }
.bz-plans__head { font: 300 24px/1.2 var(--font-sans); letter-spacing: var(--tracking-h2); margin: 0 0 6px; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.bz-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.bz-plan { padding: 22px 22px 20px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); display: grid; gap: 6px; align-content: start; }
.bz-plan--on { border-color: var(--violet-700); box-shadow: 0 0 0 1px var(--violet-700) inset; }
.bz-plan__name { margin: 0; font: var(--text-support); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.bz-plan__yours { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--violet-700); }
.bz-plan__price { margin: 0 0 8px; font: 300 30px/1.1 var(--font-sans); letter-spacing: var(--tracking-h2); color: var(--ink); }
.bz-plan__price span { font: var(--text-support); color: var(--muted); margin-left: 2px; }
.bz-plan__list { margin: 0; padding: 0 0 0 16px; display: grid; gap: 6px; font: var(--text-support); color: var(--ink-2); }
.bz-plan__slot { margin: 10px 0 0; font: var(--text-meta); color: var(--muted); }

/* ---------------------------------------------------------------------------
   The plan page (096): choose, how many users, pay — and the details beside it
   --------------------------------------------------------------------------- */
.bz-focus { min-height: 100vh; padding: 0 24px 56px; }
.bz-focus__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; max-width: 1120px; margin: 0 auto; }
.bz-focus__mark { height: 28px; width: auto; }
.bz-focus__cancel { font: var(--text-button-sm); color: var(--muted); text-decoration: none; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-button); background: var(--surface); }
.bz-focus__cancel:hover { color: var(--ink); background: var(--tint); }
.bz-focus__note { font: var(--text-support); color: var(--muted); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; max-width: 1120px; margin: 20px auto 0; align-items: start; }
.bz-checkout__left, .bz-checkout__right { min-width: 0; }
.bz-checkout__h { font: 500 28px/1.2 var(--font-sans); letter-spacing: var(--tracking-h1); color: var(--ink); margin: 0 0 18px; }
.bz-checkout__h2 { font: var(--text-h2-sm); letter-spacing: var(--tracking-h2); color: var(--ink); margin: 30px 0 8px; }
.bz-checkout__skip { text-align: center; margin-top: 14px; }
.bz-checkout__terms { align-items: flex-start; margin: 26px 0 0; font: var(--text-support); color: var(--ink-2); }
.bz-checkout__terms input { margin-top: 2px; flex: none; }
.bz-checkout__terms a { color: var(--violet-600); }
.bz-checkout .bz-btn--block { width: 100%; justify-content: center; height: 52px; font-size: 16px; margin-top: 22px; }
.bz-plan-opts { display: grid; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-hairline); }
.bz-plan-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background var(--dur-fast); }
.bz-plan-opt:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.bz-plan-opt:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.bz-plan-opt:hover { background: var(--tint); }
.bz-plan-opt--on { background: var(--tint); }
/* The chosen plan's bar: 3px of violet down the left that follows the card's corner on the first and
   last row instead of stopping flat against it — the same mask-the-padding trick as the rainbow line
   (owner, 2026-10-07: "can the purple wrap just like we do with the other rainbow line?"). */
.bz-plan-opt--on::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding-left: 3px; background: var(--violet-500); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.bz-plan-opt__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bz-plan-opt__name { font: 600 16px/1.3 var(--font-sans); color: var(--ink); }
.bz-plan-opt__price { font: var(--text-support); color: var(--ink-2); }
.bz-plan-opt__why { font: var(--text-meta); color: var(--muted); }
.bz-plan-opt__badge { font: var(--text-meta); font-weight: 600; color: #fff; background: var(--violet-500); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.bz-plan-opt input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--violet-500); }
.bz-seats, .bz-pay { margin-top: 4px; }
.bz-seats__ctl { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius-button); background: var(--surface); box-shadow: var(--shadow-hairline); }
.bz-seats__btn { position: relative; width: 46px; height: 46px; border: 0; background: transparent; font: 500 22px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.bz-seats__btn:first-child { border-radius: var(--radius-button) 0 0 var(--radius-button); }
.bz-seats__btn:last-child { border-radius: 0 var(--radius-button) var(--radius-button) 0; }
.bz-seats__btn:hover { background: var(--tint); }
/* At the minimum: grey, no press, and the reason on hover (owner, 2026-10-07). */
.bz-seats__btn--off { color: var(--faint); cursor: default; }
.bz-seats__btn--off:hover { background: transparent; }
.bz-seats__btn--off:hover::after, .bz-seats__btn--off:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); white-space: nowrap; font: var(--text-meta); color: #fff; background: var(--ink); padding: 6px 10px; border-radius: 8px; pointer-events: none; z-index: 2; }
.bz-seats__n { width: 76px; height: 46px; border: 0; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); text-align: center; font: 600 16px/1 var(--font-sans); color: var(--ink); background: transparent; -moz-appearance: textfield; appearance: textfield; }
.bz-seats__n::-webkit-outer-spin-button, .bz-seats__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bz-seats__n:focus { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bz-pay__element { min-height: 96px; margin: 8px 0 12px; }
.bz-plan-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 26px 28px; box-shadow: var(--shadow-hairline); }
.bz-plan-card__head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.bz-plan-card__head img { width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--tint); padding: 10px; }
.bz-plan-card__head div { display: grid; gap: 2px; min-width: 0; }
.bz-plan-card__head strong { font: 600 17px/1.3 var(--font-sans); color: var(--ink); }
.bz-plan-card__head span { font: var(--text-support); color: var(--muted); }
.bz-plan-card__list { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--hairline); display: grid; gap: 10px; }
.bz-plan-card__list li { position: relative; padding-left: 30px; font: var(--text-body); color: var(--ink-2); }
.bz-plan-card__list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.bz-plan-card__lines { margin: 0; display: grid; gap: 12px; }
.bz-plan-card__lines div { display: flex; justify-content: space-between; gap: 16px; font: var(--text-body); color: var(--ink); }
.bz-plan-card__lines dt, .bz-plan-card__lines dd { margin: 0; }
.bz-plan-card__lines dd { white-space: nowrap; }
.bz-plan-card__total { padding-top: 12px; border-top: 1px solid var(--hairline); font-weight: 600; }
@media (max-width: 56rem) {
  .bz-checkout { grid-template-columns: 1fr; gap: 28px; }
  .bz-checkout__right { order: -1; }
  .bz-focus { padding: 0 16px 40px; }
  .bz-plan-card__lines div { display: grid; gap: 2px; }
  .bz-plan-card__lines dd { white-space: normal; color: var(--ink-2); }
  .bz-plan-card__total dd { color: var(--ink); }
}

/* The sign-up page's account fields, on the plan layout (097) */
.bz-checkout__fields { display: grid; gap: 10px; margin-bottom: 6px; }
.bz-checkout__fields label { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.bz-checkout__fields input { font: var(--text-body); font-family: var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-button); height: var(--btn-h-lg); padding: 0 14px; width: 100%; box-shadow: var(--shadow-hairline); }
.bz-checkout__fields input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: transparent; }
.bz-checkout .bz-notice { margin: 0 0 18px; }

/* ---------------------------------------------------------------------------
   Billing (099): the plan and the card side by side, the invoices below, the way out at the foot
   --------------------------------------------------------------------------- */
.bz-bill { display: grid; gap: 22px; }
.bz-bill__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.bz-bill__card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 22px 24px; box-shadow: var(--shadow-hairline); display: grid; gap: 16px; align-content: start; }
.bz-bill__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bz-bill__title { font: var(--text-h2-sm); letter-spacing: var(--tracking-h2); color: var(--ink); margin: 0; }
.bz-bill__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 24px; }
.bz-bill__k { display: block; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bz-bill__v { font: 600 16px/1.3 var(--font-sans); color: var(--ink); }
.bz-bill__usage { display: grid; gap: 10px; }
.bz-bill__usage .bz-bar { margin: 0; }
.bz-bill__card-row { display: flex; align-items: center; gap: 14px; }
.bz-bill__brand { width: 48px; height: 32px; border-radius: 6px; background: var(--ink); color: #fff; font: 700 11px/32px var(--font-sans); text-align: center; letter-spacing: .04em; text-transform: uppercase; flex: none; }
.bz-bill__card-text { display: grid; gap: 2px; min-width: 0; }
.bz-bill__card-text strong { font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.bz-bill__card-text span { font: var(--text-meta); color: var(--muted); }
.bz-bill__invoices .bz-table__head, .bz-bill__invoices .bz-table__row { grid-template-columns: 1.2fr 1.2fr 1fr .8fr .8fr .8fr; }
.bz-bill__status { font: var(--text-meta); font-weight: 600; text-transform: capitalize; }
.bz-bill__status--paid { color: var(--green-700); }
.bz-bill__status--open { color: var(--orange-700); }
.bz-bill__status--void, .bz-bill__status--uncollectible { color: var(--muted); }
.bz-bill__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--hairline); }
.bz-bill__foot .bz-help { margin: 0; }
.bz-bill .bz-dialog { margin: 0; }
.bz-bill textarea { width: 100%; min-height: 96px; font: var(--text-body); font-family: var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-button); padding: 12px 14px; resize: vertical; }
@media (max-width: 56rem) {
  .bz-bill__grid { grid-template-columns: 1fr; }
  .bz-bill__invoices .bz-table__head { display: none; }
  .bz-bill__invoices .bz-table__row { grid-template-columns: 1fr 1fr; }
}
.bz-cancellations .bz-table__head, .bz-cancellations .bz-table__row { grid-template-columns: 1.4fr .8fr .8fr 2fr; }
.bz-cancellations .bz-table__row span:last-child { white-space: pre-wrap; }
.bz-bill__invoices .bz-table__row a { white-space: nowrap; }
/* The Billing pop-up (owner, 2026-10-07): the ladder and the way out, over the page */
.bz-bill__modal { width: min(1120px, 100%); max-height: calc(100vh - 48px); overflow: auto; display: grid; gap: 18px; }
.bz-bill__modal .bz-plans { margin: 0; }
.bz-bill__modal .bz-bill__foot { border-top: 1px solid var(--hairline); padding-top: 14px; }
.bz-bill__card .bz-help, .bz-bill__modal .bz-help { margin: 0; }
/* A pressed button shows as work (busy.js swaps the label; this dims it until the page changes) */
/* Only buttons that say they are working dim; a button that leaves for Stripe just goes (owner, 2026-10-07). */
.bz-btn.is-busy[data-busy], .bz-auth .primary.is-busy { opacity: .72; cursor: progress; pointer-events: none; }

/* ---------------------------------------------------------------------------
   A connection's own page (Integrations › NinjaOne / Hudu / Benji Pays). Owner, 2026-10-07: "make
   this UI look way better? green checks and red x too … clean up the spacing". White cards on the
   ground, one per subject; a green check or a red cross on every line that worked or did not.
   --------------------------------------------------------------------------- */
.bz-connpage__main, .bz-connpage__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bz-conn-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 20px 22px; }
.bz-conn-card--tight { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bz-conn-card__title { margin: 0 0 14px; font: var(--text-section); color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.bz-conn-card__count { font: var(--text-meta); color: var(--muted); }
.bz-conn-empty { margin: 0; font: var(--text-body-sm); color: var(--muted); }
.bz-conn-note { margin: 0; font: var(--text-support); color: var(--muted); }
.bz-conn-btn { width: 100%; justify-content: center; }
.bz-conn-card--tight form { margin: 0; }

/* The grant: a green check, what was granted, and under it what Debut does with it. */
.bz-conn-grant { display: flex; flex-direction: column; gap: 14px; }
.bz-conn-grant .bz-receipt { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
.bz-conn-grant .bz-receipt svg { grid-row: 1 / span 2; width: 22px; height: 22px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--green-100); }
.bz-conn-grant .bz-receipt__text { font: var(--text-row-sm); color: var(--ink); }
.bz-conn-grant .bz-receipt__source { font: var(--text-support); color: var(--muted); font-variant-numeric: normal; }
/* A note after a list or a table, set off from it (148). */
.bz-conn-grant + .bz-help, .bz-census__accounts + .bz-help { margin-top: 14px; }
/* A card's note after its button (149: the webhook card), set off from it. */
.bz-conn-card form + .bz-conn-note, .bz-conn-card form + form { margin-top: 10px; }
/* What Debut does in HaloPSA (2026-10-21): each row something that happens in Debut, beside the choices
   for what Debut does there; one row above the other on a phone. */
.bz-halo-map { margin: 14px 0 16px; border-top: var(--hairline-w) solid var(--hairline); }
.bz-halo-map__row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 24px; align-items: start; padding: 14px 0; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-halo-map__when { margin: 0; font: var(--text-row-sm); font-weight: 600; color: var(--ink); }
.bz-halo-map__do { display: grid; gap: 12px; max-width: 26rem; }
.bz-halo-map__field { display: grid; gap: 4px; }
.bz-halo-map__label { font: var(--text-support); color: var(--muted); }
@media (max-width: 40rem) { .bz-halo-map__row { grid-template-columns: minmax(0, 1fr); } .bz-halo-map__do { max-width: none; } }

/* The connection's facts, as small labelled columns under a rule. */
.bz-conn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 12px 20px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.bz-conn-facts:empty { display: none; }
.bz-conn-facts dt { font: var(--text-eyebrow); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 3px; }
.bz-conn-facts dd { margin: 0; font: var(--text-body-sm); color: var(--ink-2); overflow-wrap: anywhere; }

/* Clients and checks: one compact line each. */
.bz-conn-list { list-style: none; margin: 0; padding: 0; }
.bz-conn-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.bz-conn-item:first-child { border-top: 0; padding-top: 2px; }
.bz-conn-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font: var(--text-row-sm); color: var(--ink); }
.bz-conn-item__hint { font: var(--text-support); color: var(--muted); }
.bz-conn-item__hint--bad { color: var(--red-700); }
.bz-conn-item__time { font: var(--text-meta); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bz-conn-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.bz-conn-icon--ok { background: var(--green-100); color: var(--green-500); }
.bz-conn-icon--bad { background: var(--red-100); color: var(--red-500); }
@media (max-width: 760px) { .bz-conn-card { padding: 16px; } }

/* ---------------------------------------------------------------------------
   Integrations: a section per kind, a grid of tiles in each (owner, 2026-10-07, after two
   app-directory references). PSA, RMM and Documentation take one each: once one is connected the
   rest of its section is greyed and leads nowhere. Other's tiles stand on their own.
   --------------------------------------------------------------------------- */
.bz-isections { display: flex; flex-direction: column; gap: 34px; }
.bz-isection__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.bz-isection__title { margin: 0; font: var(--text-h2-sm); color: var(--ink); }
.bz-isection__rule { font: var(--text-meta); color: var(--muted); }
.bz-isection__note { margin: 4px 0 14px; font: var(--text-support); color: var(--muted); max-width: 46rem; }
.bz-itiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 12px; }
.bz-itile { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.bz-itile:hover { border-color: #D8CFC1; box-shadow: 0 6px 18px rgba(31, 27, 23, .07); transform: translateY(-1px); }
a.bz-itile:focus-visible { outline: 2px solid var(--violet-700, #6B21C8); outline-offset: 2px; }
.bz-itile--on { border-color: color-mix(in srgb, var(--green-500) 35%, var(--hairline)); }
.bz-itile--trouble { border-color: color-mix(in srgb, var(--orange-500, #E07B2A) 45%, var(--hairline)); }
.bz-itile--off { background: color-mix(in srgb, var(--surface) 55%, transparent); cursor: default; }
.bz-itile--off .bz-itile__logo, .bz-itile--off .bz-itile__body { opacity: .5; filter: grayscale(1); }
.bz-itile__logo { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 600 17px/1 var(--font-sans); color: #fff; }
.bz-itile__logo--navy { background: #2B3A67; } .bz-itile__logo--blue { background: #2F6FDB; } .bz-itile__logo--green { background: #1F8A5B; }
.bz-itile__logo--orange { background: #E0762B; } .bz-itile__logo--red { background: #C8382B; }
.bz-itile__logo--img { background: #fff; border: 1px solid var(--hairline); }
.bz-itile__logo--img img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.bz-itile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bz-itile__name { font: var(--text-row-sm); color: var(--ink); }
.bz-itile__desc { font: var(--text-caption); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bz-isections + .bz-integrations__foot { margin-top: 30px; }
.bz-itile__when { font: var(--text-caption); color: var(--green-700); }
.bz-itile--trouble .bz-itile__when { color: var(--orange-700); }
/* Failed is red, as on the sync log; degraded stays orange (2026-10-08). */
.bz-itile--failed { border-color: color-mix(in srgb, var(--red-500) 45%, var(--hairline)); }
.bz-itile--failed .bz-itile__when { color: var(--red-700); }
.bz-itile__side { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.bz-itile__word { font: var(--text-meta); color: var(--muted); }
.bz-itile__word--go { color: var(--ink); font-weight: 600; }
.bz-itile__go { color: var(--muted); }

/* ===========================================================================
   The plan writer (126): the pipeline, the interview, the verdicts, the plan builder, the bank, settings
   =========================================================================== */
.bz-pill--planned { background: var(--planned-tint); color: var(--planned-ink); }
.bz-tone--planned { color: var(--planned-ink); }
.bz-tone--mint { color: var(--mint-ink); }
.bz-mono { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.bz-rows { display: block; }
.bz-row--now { background: var(--violet-50); }
.bz-label__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: 4px; }
.bz-form--wide { max-width: none; }
.bz-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
.bz-field--full { grid-column: 1 / -1; }
@media (max-width: 760px) { .bz-form-grid { grid-template-columns: minmax(0, 1fr); } }
.bz-textarea--sm { min-height: 0; font-size: 14px; padding: 8px 10px; }
.bz-textarea--tall { min-height: 220px; font-family: var(--font-sans); }
.bz-input--sm { height: 34px; font-size: 13.5px; padding: 0 10px; }
.bz-panel { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-hairline), 0 12px 32px -20px rgba(60, 40, 20, .25); padding: 26px 28px; }

/* The pipeline's six stage steps: 22×4 bars, filled ink up to the stage. */
.bz-steps-bar { display: inline-flex; gap: 4px; flex: none; }
.bz-steps-bar__s { width: 22px; height: 4px; border-radius: 2px; background: var(--hairline); }
.bz-steps-bar__s--on { background: var(--ink); }

/* The interview's answer choices, on keys 1–4. */
.bz-ask { display: grid; gap: 10px; margin-top: 18px; }
.bz-choices { display: grid; gap: 8px; }
.bz-choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-radius: var(--radius-button);
  background: var(--tint); color: var(--ink); font: var(--text-row-sm); cursor: pointer; transition: background var(--dur-fast); }
.bz-choice:hover { background: var(--tint-hover); }
.bz-choice:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bz-choice--on { background: var(--violet-100); }
.bz-choice__key { flex: none; width: 26px; height: 26px; border-radius: var(--radius-chip); background: var(--surface); display: inline-grid; place-items: center;
  font: var(--text-pill); box-shadow: var(--shadow-hairline); }
.bz-choice__label { flex: 1; min-width: 0; }
.bz-note-form { margin-top: 22px; display: grid; gap: 8px; }
.bz-notes { margin: 10px 0 0; display: grid; gap: 6px; }
.bz-note { margin: 0; font: var(--text-support); color: var(--ink-2); }
.bz-note__at { font: var(--text-meta); color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }

/* The verdicts: the legend, and the five-column table of areas. */
.bz-legend--verdicts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 28px 0 18px; }
.bz-legend--verdicts .bz-help { margin-top: 6px; }
@media (max-width: 900px) { .bz-legend--verdicts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bz-vgrid { display: grid; grid-template-columns: 180px minmax(0, 1fr) 210px 150px 130px; gap: 14px; align-items: start; padding: 14px 0; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-vgrid--head { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); padding-top: 0; }
.bz-vgrid__area { font: var(--text-row); display: grid; gap: 2px; }
.bz-vgrid__src, .bz-vgrid__score { display: grid; gap: 6px; }
@media (max-width: 1100px) { .bz-vgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bz-vgrid--head { display: none; } .bz-vgrid__area { grid-column: 1 / -1; } }
.bz-dots { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); }
.bz-dots--urgent .bz-dot--on { background: var(--red-500); }
.bz-dots--attention .bz-dot--on { background: var(--orange-500); }
.bz-dots--healthy .bz-dot--on { background: var(--green-500); }
.bz-dots--planned .bz-dot--on { background: var(--planned-ink); }
.bz-dots__n { margin-left: 6px; font: var(--text-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* The first thirty days: numbered steps, each under a 2px ink rule. */
.bz-steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bz-step { border-top: 2px solid var(--ink); padding-top: 12px; display: grid; gap: 6px; }
.bz-step__n { font: var(--text-meta); color: var(--muted); }
.bz-step__title { font: var(--text-row); }
.bz-step__meta { font: var(--text-meta); color: var(--muted); }
@media (max-width: 900px) { .bz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The plan builder: the fifteen sections beside the open one. */
.bz-builder { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 52px; align-items: start; }
@media (max-width: 1100px) { .bz-builder { grid-template-columns: minmax(0, 1fr); } }
.bz-sections { display: grid; gap: 2px; }
.bz-sec { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 12px; border-radius: var(--radius-row); color: var(--ink); text-decoration: none; }
.bz-sec:hover { background: var(--row-hover); }
.bz-sec--on { background: var(--surface); box-shadow: var(--shadow-hairline); }
.bz-sec__n { font: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.bz-sec__title { font: var(--text-row); display: grid; gap: 2px; }
.bz-sec__state { font: var(--text-meta); color: var(--muted); }
.bz-sec-panel { margin: 26px 0; display: grid; gap: 16px; }
.bz-sec-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bz-sec-panel__need { margin: 0; font: var(--text-support); font-weight: 600; }
.bz-sec-panel__body { display: grid; gap: 14px; }
.bz-line-form { margin-top: 6px; padding-top: 16px; border-top: var(--hairline-w) solid var(--hairline); }

/* Plan content, on screen and in print: tables, the investment, what we heard. */
.bz-markup h3, .bz-heard h3 { font: var(--text-section); margin: 18px 0 6px; }
.bz-markup ul { margin: 6px 0; padding-left: 20px; }
.bz-mtable-wrap { overflow-x: auto; }
.bz-mtable { width: 100%; border-collapse: collapse; font: var(--text-support); color: var(--ink-2); }
.bz-mtable th, .bz-mtable td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-mtable thead th { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.bz-mtable tbody th { font-weight: 500; color: var(--ink); }
.bz-plan__figure { margin: 0; font: var(--text-support); color: var(--muted); }
.bz-plan__figure strong { font: var(--text-numeral-lg); color: var(--ink); margin-right: 6px; }
.bz-plan__counts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 4px 0 8px; }
.bz-invest { display: grid; }
.bz-invest__row { display: grid; grid-template-columns: minmax(0, 1fr) 200px 90px; gap: 12px; padding: 12px 0; border-bottom: var(--hairline-w) solid var(--hairline); font: var(--text-row-sm); }
.bz-invest__name { display: grid; gap: 2px; }
.bz-invest__desc { font: var(--text-meta); color: var(--muted); }
.bz-invest__basis { color: var(--ink-2); font: var(--text-meta); }
.bz-invest__basis--wide { grid-column: 2 / -1; text-align: right; }
.bz-invest__amt { text-align: right; font-variant-numeric: tabular-nums; }
.bz-invest__row--total { font-weight: 600; }
.bz-invest__sep { margin: 18px 0 4px; }
.bz-heard__list { margin: 0; }
.bz-heard__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-heard__row dt { color: var(--ink-2); }
.bz-heard__row dd { margin: 0; color: var(--ink); }
.bz-heard__src { font: var(--text-meta); margin-left: 6px; }

/* Findings and "About this document": the four labels, each beside what we would do (138). */
.bz-ftable tbody th { display: grid; gap: 6px; justify-items: start; min-width: 150px; }
.bz-ftable__title { font-weight: 600; color: var(--ink); }
.bz-ftable__src { display: block; margin-top: 4px; font: var(--text-meta); color: var(--muted); }
.bz-obs-read { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 8px; }
.bz-obs-read li span { margin-left: 6px; color: var(--ink); }
.bz-obs-about { margin-top: 10px; padding: 14px 16px; border: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-card); display: grid; gap: 10px; }
.bz-obs-about h3 { margin: 0; font: var(--text-section); }
.bz-obs-about p { margin: 0; font: var(--text-support); color: var(--ink-2); }
.bz-obs-legend { margin: 0; display: grid; gap: 6px; }
.bz-obs-legend > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; }
.bz-obs-legend dt { margin: 0; }
.bz-obs-legend dd { margin: 0; font: var(--text-support); color: var(--ink-2); }
.bz-finding-rows { display: grid; gap: 0; }
.bz-finding-edit { border-bottom: var(--hairline-w) solid var(--hairline); padding: 10px 0; }
.bz-finding-edit > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: var(--text-row-sm); }
.bz-finding-edit__title { color: var(--ink); font-weight: 500; }
.bz-finding-edit[open] > summary { margin-bottom: 12px; }
.bz-finding-add { margin-top: 6px; padding-top: 16px; border-top: var(--hairline-w) solid var(--hairline); }
@media (max-width: 560px) { .bz-obs-legend > div { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 640px) {
  .bz-ftable thead { display: none; }
  .bz-ftable, .bz-ftable tbody, .bz-ftable tr, .bz-ftable td { display: block; width: 100%; }
  .bz-ftable tr { padding: 12px 0; border-bottom: var(--hairline-w) solid var(--hairline); }
  .bz-ftable tbody th { min-width: 0; padding: 0 0 6px; border-bottom: 0; }
  .bz-ftable td { padding: 4px 0; border-bottom: 0; }
  .bz-ftable td[data-label]::before { content: attr(data-label); display: block; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
}

/* The question bank: where the questions go, the editor's choices and channel switch. */
.bz-where { margin: 0 0 24px; }
.bz-where > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 30px; gap: 10px; padding: 12px 0; border-bottom: var(--hairline-w) solid var(--hairline); }
.bz-where dt { font: var(--text-row-sm); font-weight: 600; }
.bz-where dd { margin: 0; font: var(--text-support); color: var(--muted); }
.bz-where dd.bz-where__n { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.bz-seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--tint); border-radius: var(--radius-button); }
.bz-seg__opt { position: relative; }
.bz-seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bz-seg__opt span { display: block; padding: 8px 14px; border-radius: var(--radius-toggle-opt); font: var(--text-button-sm); color: var(--muted); }
.bz-seg__opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-hairline); }
.bz-seg__opt input:focus-visible + span { outline: 2px solid var(--focus-ring); }
.bz-choice-edit { display: grid; grid-template-columns: 34px minmax(0, 1fr) 170px; gap: 10px; align-items: center; margin-bottom: 8px; }
.bz-client__choices { margin: 10px 0 0; padding-left: 20px; color: var(--mint-ink); font: var(--text-support); }

/* Settings: their page's look, light or dark. */
.bz-grid--settings { grid-template-columns: minmax(0, 1fr) 440px; }
@media (max-width: 1100px) { .bz-grid--settings { grid-template-columns: minmax(0, 1fr); } }
.bz-looks { display: flex; gap: 14px; margin-bottom: 18px; }
.bz-look { position: relative; display: grid; gap: 8px; justify-items: center; cursor: pointer; }
.bz-look input { position: absolute; opacity: 0; }
.bz-look__card { width: 170px; height: 104px; border-radius: var(--radius-tile); display: grid; align-content: start; gap: 8px; padding: 16px; box-shadow: var(--shadow-hairline); }
.bz-look__card span { display: block; height: 7px; border-radius: 4px; }
.bz-look__card span:nth-child(1) { width: 70%; }
.bz-look__card span:nth-child(2) { width: 45%; }
.bz-look__card span:nth-child(3) { width: 90%; margin-top: 34px; height: 3px; }
.bz-look__card--light { background: var(--ground); }
.bz-look__card--light span { background: var(--ink); }
.bz-look__card--light span:nth-child(2) { background: var(--violet-500); }
.bz-look__card--light span:nth-child(3) { background: var(--hairline); }
.bz-look__card--dark { background: var(--dark-ground); }
.bz-look__card--dark span { background: var(--dark-text); }
.bz-look__card--dark span:nth-child(2) { background: var(--violet-500); }
.bz-look__card--dark span:nth-child(3) { background: var(--dark-faint); }
.bz-look--on .bz-look__card { outline: 2px solid var(--ink); outline-offset: 2px; }
.bz-look input:focus-visible + .bz-look__card { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bz-look__label { font: var(--text-meta); }
.bz-lib-preview { margin-bottom: 24px; }
.bz-eyebrow--context { margin: 10px 0 0; }
.bz-legend--verdicts .bz-legend__item { display: block; }
.bz-verdict-form + .bz-section, .bz-verdict-form .bz-actions { margin-bottom: 28px; }
.bz-vgrid__evidence { grid-column: 2 / -1; margin: -4px 0 0; }
.bz-vgrid__evidence summary { cursor: pointer; font: var(--text-meta); color: var(--link); }
.bz-vgrid__evidence ul { margin: 6px 0 0; padding-left: 18px; font: var(--text-meta); color: var(--ink-2); }
.bz-note-form + .bz-section, .bz-notes + .bz-section { margin-top: 26px; }
.bz-grid--settings form + .bz-section, .bz-grid--settings .bz-rows + .bz-section, .bz-grid--settings .bz-empty + .bz-section { margin-top: 30px; }
.bz-areas { margin-top: 6px; }
.bz-area-edit { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.bz-area-edit__n { font: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
/* An industry book's files (127): number, title, and the row's own small forms in a line. */
.bz-book-n { width: 22px; flex: none; font: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.bz-book-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.bz-book-acts form { margin: 0; }
.bz-book-upload { margin-top: 18px; }
.bz-book-side form + .bz-section { margin-top: 30px; }
.bz-danger-zone summary { list-style: none; cursor: pointer; }
.bz-danger-zone summary::-webkit-details-marker { display: none; }
.bz-danger-zone[open] summary { margin-bottom: 10px; }

/* ===========================================================================
   Their page (2g dark, 2h light): the prospect's library, previewed by staff
   =========================================================================== */
body.bz-their { margin: 0; background: var(--ground); color: var(--ink); font: var(--text-body); }
.bz-their__preview { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--ink); color: var(--white); font: var(--text-support); }
.bz-their__preview a { color: var(--white); }
.bz-their__preview a[aria-current] { text-decoration: none; font-weight: 600; }
.bz-their__eyebrow { margin: 0 0 10px; font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--action); }
.bz-their__hero { margin: 0 0 14px; font: 600 clamp(40px, 6vw, 68px)/1.04 var(--font-sans); letter-spacing: -0.03em; max-width: 14ch; }
.bz-their__lede { margin: 0 0 22px; max-width: 60ch; font: var(--text-lede); color: var(--ink-2); }
.bz-their__lede .bz-markup p { margin: 0; }
.bz-their__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.bz-their__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 44px; }
.bz-their__tile { display: grid; gap: 6px; padding: 20px; border-radius: var(--radius-tile); background: var(--surface); box-shadow: var(--shadow-hairline); font: var(--text-support); color: var(--muted); }
.bz-their__num { font: var(--text-numeral-lg); letter-spacing: var(--tracking-numeral-lg); color: var(--ink); font-variant-numeric: tabular-nums; }
.bz-their__label { margin: 0 0 12px; font: var(--text-section); }
.bz-their__card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 26px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); margin-bottom: 48px; }
.bz-their__cover { display: grid; align-content: space-between; min-height: 260px; padding: 18px; border-radius: var(--radius-tile); background: var(--ink); color: var(--white); font: var(--text-meta); }
.bz-their__cover strong { font: 500 22px/1.15 var(--font-sans); }
.bz-their__card-title { margin: 0 0 6px; font: var(--text-h2); letter-spacing: var(--tracking-h2); }
.bz-their__meta { margin: 0 0 14px; font: var(--text-meta); color: var(--muted); }
.bz-their__contents { list-style: none; padding: 0; margin: 0 0 18px; }
.bz-their__contents li { padding: 8px 0; border-bottom: var(--hairline-w) solid var(--hairline); font: var(--text-row-sm); }
.bz-their__contents span { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.bz-their__cover--book { background: var(--violet-700); }
.bz-their__file { color: inherit; text-decoration: underline; text-decoration-thickness: var(--underline-w); text-underline-offset: 3px; }
.bz-their__plan { display: grid; gap: 0; }
.bz-their__band { padding: 34px 30px; border-radius: var(--radius-card); background: var(--surface); margin-bottom: 14px; }
.bz-their__band--alt { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.bz-their__band-title { margin: 0 0 14px; font: var(--text-h2); letter-spacing: var(--tracking-h2); }
.bz-their__close { box-sizing: border-box; width: 100%; max-width: var(--portal-w); margin: 0 auto 40px; padding: 40px 30px; border-radius: var(--radius-card);
  background: var(--dark-band); color: var(--white); }
.bz-their__close p { margin: 0; }
.bz-their__close .bz-their__close-eyebrow { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--dark-band-eyebrow); margin-bottom: 8px; }
.bz-their__close .bz-their__tagline { font: 300 32px/1.2 var(--font-sans); letter-spacing: -0.02em; margin: 0 0 28px; }
.bz-their__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; color: var(--dark-band-muted); font: var(--text-support); margin-bottom: 28px; }
.bz-their__foot { font: var(--text-meta); color: var(--dark-band-muted); }
@media (max-width: 760px) {
  .bz-their__tiles, .bz-their__cols { grid-template-columns: minmax(0, 1fr); }
  .bz-their__card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .bz-their__cover { min-height: 160px; }
  .bz-their__band { padding: 24px 18px; }
  .bz-their__actions .bz-btn, .bz-their__card .bz-btn { width: 100%; justify-content: center; }
  .bz-their .bz-heard__row, .bz-their .bz-invest__row { grid-template-columns: minmax(0, 1fr); }
  .bz-their .bz-invest__amt { text-align: left; }
}

/* The dark look: the warm-black ground with violet and teal glows, light words, status colours on dark. */
body.bz-their--dark { background: var(--dark-ground); color: var(--dark-text);
  background-image: radial-gradient(900px 600px at 85% -10%, var(--dark-glow-violet), transparent 60%), radial-gradient(700px 500px at -10% 30%, var(--dark-glow-teal), transparent 60%);
  background-repeat: no-repeat; }
.bz-their--dark .bz-portal__brand, .bz-their--dark .bz-their__hero, .bz-their--dark .bz-their__num, .bz-their--dark .bz-their__card-title,
.bz-their--dark .bz-their__band-title, .bz-their--dark .bz-their__label, .bz-their--dark .bz-mtable tbody th, .bz-their--dark .bz-heard__row dd,
.bz-their--dark .bz-markup h3, .bz-their--dark .bz-heard h3, .bz-their--dark .bz-plan__figure strong, .bz-their--dark .bz-step__title { color: var(--white); }
.bz-their--dark .bz-portal__who, .bz-their--dark .bz-their__meta, .bz-their--dark .bz-their__tile, .bz-their--dark .bz-help, .bz-their--dark .bz-tone--muted,
.bz-their--dark .bz-mtable thead th, .bz-their--dark .bz-step__meta, .bz-their--dark .bz-step__n, .bz-their--dark .bz-invest__desc { color: var(--dark-muted); }
.bz-their--dark .bz-their__lede, .bz-their--dark .bz-markup, .bz-their--dark .bz-mtable, .bz-their--dark .bz-heard__row dt, .bz-their--dark .bz-invest__basis { color: var(--dark-text); }
.bz-their--dark .bz-their__eyebrow { color: var(--dark-eyebrow); }
.bz-their--dark .bz-portal__tile { background: var(--white); color: var(--dark-ground); }
.bz-their--dark .bz-their__tile, .bz-their--dark .bz-their__card, .bz-their--dark .bz-their__band { background: var(--dark-surface); box-shadow: inset 0 0 0 1px var(--dark-inset); }
.bz-their--dark .bz-their__band--alt { background: transparent; }
.bz-their--dark .bz-their__cover { background: var(--dark-band); }
.bz-their--dark .bz-their__contents li, .bz-their--dark .bz-mtable th, .bz-their--dark .bz-mtable td, .bz-their--dark .bz-heard__row,
.bz-their--dark .bz-invest__row { border-color: var(--dark-inset); }
.bz-their--dark .bz-ftable__title, .bz-their--dark .bz-obs-read li span { color: var(--dark-text); }
.bz-their--dark .bz-ftable__src, .bz-their--dark .bz-obs-about p, .bz-their--dark .bz-obs-legend dd { color: var(--dark-muted); }
.bz-their--dark .bz-obs-about { border-color: var(--dark-inset); }
.bz-their--dark .bz-ftable tr { border-color: var(--dark-inset); }
.bz-their--dark .bz-ftable td[data-label]::before { color: var(--dark-muted); }
.bz-their--dark .bz-step { border-top-color: var(--dark-text); }
.bz-their--dark .bz-pill--red { background: rgba(255, 161, 152, .16); color: var(--dark-urgent); }
.bz-their--dark .bz-pill--warn { background: rgba(247, 192, 121, .16); color: var(--dark-attention); }
.bz-their--dark .bz-pill--ok { background: rgba(126, 220, 169, .16); color: var(--dark-healthy); }
.bz-their--dark .bz-pill--planned { background: rgba(169, 193, 232, .18); color: var(--dark-planned); }
.bz-their--dark .bz-pill--neutral { background: var(--dark-inset); color: var(--dark-muted); }
.bz-their--dark .bz-dot { background: var(--dark-inset); }
.bz-their--dark .bz-tone--ok { color: var(--dark-healthy); }
.bz-their--dark .bz-tone--mint { color: var(--dark-healthy); }
.bz-their__plan { grid-template-columns: minmax(0, 1fr); }
.bz-their__band { min-width: 0; }
/* The verdict table on a phone: each area stacked (name and verdict, then what we found, then where it
   came from and the score), so nothing scrolls sideways at 390px (README: client surfaces work there). */
@media (max-width: 560px) {
  .bz-vtable thead { display: none; }
  .bz-vtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: var(--hairline-w) solid var(--hairline); }
  .bz-vtable th, .bz-vtable td { display: block; padding: 0; border: 0; }
  .bz-vtable tbody th { grid-column: 1; grid-row: 1; }
  .bz-vtable td:nth-of-type(4) { grid-column: 2; grid-row: 1; }
  .bz-vtable td:nth-of-type(1) { grid-column: 1 / -1; }
  .bz-vtable td:nth-of-type(2), .bz-vtable td:nth-of-type(3) { grid-column: 1 / -1; font: var(--text-meta); }
  .bz-their--dark .bz-vtable tr { border-color: var(--dark-inset); }
}

/* Options: the switch in the builder, the comparison, the editor, and the cards on their page. */
.bz-mode-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; }
.bz-toggle button.bz-toggle__opt { border: 0; background: transparent; cursor: pointer; font: inherit; }
.bz-toggle button.bz-toggle__opt--on { background: var(--surface); box-shadow: var(--shadow-hairline); }
.bz-otable td { white-space: nowrap; }
.bz-otable__on { color: var(--ink); }
.bz-otable__off { color: var(--muted); }
.bz-otable__total th, .bz-otable__total td { font-weight: 600; color: var(--ink); }
.bz-options-form { margin-top: 30px; }
.bz-options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .bz-options-grid { grid-template-columns: minmax(0, 1fr); } }
.bz-option-edit { border: 0; margin: 0; padding: 18px; border-radius: var(--radius-tile); background: var(--surface); box-shadow: var(--shadow-hairline); display: grid; gap: 10px; min-width: 0; }
.bz-option-edit legend { font: var(--text-section); padding: 0; margin-bottom: 4px; }
.bz-option-area { display: grid; gap: 4px; }
.bz-their__options { margin: 8px 0 48px; }
.bz-their__ways { margin: 0 0 10px; font: 600 clamp(28px, 4vw, 44px)/1.08 var(--font-sans); letter-spacing: -0.025em; }
.bz-their__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .bz-their__opts { grid-template-columns: minmax(0, 1fr); } }
.bz-their__opt { display: grid; align-content: start; gap: 6px; padding: 24px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-hairline); }
.bz-their__opt--pick { box-shadow: 0 0 0 2px var(--action), var(--shadow-card); }
.bz-their__pick { white-space: nowrap; display: inline-block; margin: 4px 0 0 6px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--violet-100); color: var(--violet-700); text-transform: none; letter-spacing: 0; }
.bz-their__price { margin: 0; font: var(--text-numeral-lg); letter-spacing: var(--tracking-numeral-lg); font-variant-numeric: tabular-nums; }
.bz-their__price span { font: var(--text-support); color: var(--muted); letter-spacing: 0; }
.bz-their__verdict { margin: 0; font: var(--text-pill); }
.bz-their__opt-summary { margin: 6px 0; color: var(--ink-2); }
.bz-their__covers { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font: var(--text-support); }
.bz-their__off { color: var(--muted); }
.bz-their__choose { justify-content: center; cursor: default; }
.bz-their--dark .bz-their__ways, .bz-their--dark .bz-their__price, .bz-their--dark .bz-otable__on { color: var(--white); }
.bz-their--dark .bz-their__opt { background: var(--dark-surface); box-shadow: inset 0 0 0 1px var(--dark-inset); }
.bz-their--dark .bz-their__opt--pick { background: rgba(124, 31, 224, .18); box-shadow: inset 0 0 0 1px var(--violet-500); }
.bz-their--dark .bz-their__opt-summary, .bz-their--dark .bz-their__covers { color: var(--dark-text); }
.bz-their--dark .bz-their__off, .bz-their--dark .bz-their__price span { color: var(--dark-faintest); }
.bz-their--dark .bz-tone--warn { color: var(--dark-attention); }
.bz-their--dark .bz-their__pick { background: rgba(255, 255, 255, .12); color: var(--white); }
.bz-option-edit .bz-input, .bz-option-edit .bz-select, .bz-option-edit .bz-textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.bz-sec-sources { padding-top: 14px; border-top: var(--hairline-w) solid var(--hairline); display: grid; gap: 10px; }
.bz-disc-row .bz-steps-bar { margin-left: auto; }
.bz-line-rows { margin-bottom: 4px; }
.bz-their__preview-links { white-space: nowrap; }
.bz-their__card-body { min-width: 0; }
.bz-maptable td { white-space: nowrap; }
.bz-their__on { color: inherit; }