/* 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--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--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 {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 56%; background-size: 0 1.5px;
  transition: background-size .38s ease-out, color .38s ease-out; }
.bz-row--done .bz-row__title > span:first-child, .bz-row--done .bz-row__title > a,
.bz-row--done .bz-row__line > span:first-child, .bz-row--done .bz-row__line > a { 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; }
.bz-row__time { font: var(--text-support); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; 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; }
.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; }
.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; }
.bz-tabs { display: flex; align-items: flex-end; gap: 30px; margin-bottom: var(--after-tabs); }
.bz-tab { 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; align-items: center; gap: 30px; margin-bottom: 12px; }

/* 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; gap: 18px; font: var(--text-support); color: var(--muted); margin: 10px 0 0; }
.bz-summary__dot { display: inline-flex; align-items: center; gap: 6px; }
.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; } }
.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-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 { 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; }
.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; }

/* ---- 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; }
/* 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__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; }
.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-notice--warn { background: var(--peach); color: var(--orange-700); }

/* ---- 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); }
.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 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. ---- */
.bz-table--ledger .bz-table__head, .bz-table--ledger .bz-table__row { grid-template-columns: 1.3fr .7fr 1fr .95fr .6fr 1fr 1.7fr; }
.bz-table__row--warn { background: color-mix(in srgb, var(--peach) 35%, transparent); }
.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; }

/* ---- 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; }
.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 { 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); color: var(--violet-700); }
.bz-pick--selected { background: var(--row-hover); }
.bz-row--template .bz-row__meta { white-space: normal; text-align: right; }

/* ---- 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; 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. */
.bz-brand__line { padding-top: 20px; border-top: 1px solid var(--hairline); }
.bz-brand:has(#brand_line_on: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; }
.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: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; }
.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; }
/* 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. */
.bz-pickdays { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 26px; }
.bz-pickday { display: grid; justify-items: center; gap: 1px; min-width: 88px; padding: 10px 12px 9px; border-radius: var(--radius-button); border: 1.5px solid var(--hairline); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast), background var(--dur-fast); }
.bz-pickday:hover, .bz-pickday:focus-visible { border-color: var(--mint-line); }
.bz-pickday__wd { font: 600 11.5px/1.3 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bz-pickday__date { font: 600 16px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.bz-pickday__n { font: var(--text-meta); color: var(--muted); }
.bz-pickday--on { background: var(--mint); border-color: var(--mint-ink); }
.bz-pickday--on .bz-pickday__wd, .bz-pickday--on .bz-pickday__n { color: var(--mint-ink); }
.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-pickdays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bz-pickday { min-width: 0; padding-left: 4px; padding-right: 4px; }
  .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; }
}