/* Buzz Calls app layer (phase L, docs/19-design-system.md). Loaded after the vendored Buzz Design
   System (buzz-ds/tokens.css, typography.css, components.css). Unlayered on purpose: it must beat
   @layer core.components where it adds to a component (native form controls, mobile tap targets),
   so its element rules skip anything carrying a DS class (`:not([class*="core-"])`). It never redefines a DS token.
   Layout and Calls-only pieces (the shell, cards, grids, the transcript, the player, chart marks)
   only: every colour, radius, shadow, size and space is a DS token. No hex colours here. */

/* 1. The Buzz Design System's colours as shipped (the phase L follow-up reversed decision 158: Calls matches
   dash.buzz.ai exactly; the DS pairs under 4.5:1 are with the design team, P50). Only Calls' own variables here. */
:root {
  /* Chart palette (decision 157): brand first, then the blue, green, orange and red scales;
     the heatmap ramps up the blue scale. */
  --bz-chart-1: var(--brand);
  --bz-chart-2: var(--blue-800);
  --bz-chart-3: var(--green-500);
  --bz-chart-4: var(--orange-600);
  --bz-chart-5: var(--red-600);
  --bz-chart-6: var(--grey-500);
  --bz-ramp-0: var(--surface-100);
  --bz-ramp-1: var(--blue-200);
  --bz-ramp-2: var(--blue-300);
  --bz-ramp-3: var(--blue-500);
  --bz-ramp-4: var(--blue-700);
  --bz-ramp-5: var(--blue-900);
  --bz-side-w: 240px;
}

/* 2. Page basics. Element rules leave DS-classed elements alone. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-family-sans); color: var(--text-default); background: var(--background-default);
  -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, h4, p, figure, dl, dd, blockquote):not([class*="core-"], [class*="reports-"]) { margin: 0; }
:where(a:not([class*="core-"], [class*="reports-"])) { color: var(--text-primary-default); text-underline-offset: 2px; }
:where(a:not([class*="core-"], [class*="reports-"])):hover { color: var(--text-primary-hover); }
:where(a, summary, [tabindex], .bz-row > a):not([class*="core-"], [class*="reports-"]):focus-visible {
  outline: 1px solid var(--border-primary-default); outline-offset: 1px; box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-4); }
:where(button, input, select, textarea):not([class*="core-"], [class*="reports-"], .bz-control__input):disabled { opacity: .4;
  cursor: not-allowed; }
[hidden] { display: none !important; }
code, kbd { font-family: var(--font-family-mono); font-size: var(--font-size-50); }
kbd { padding: 0 var(--space-4); border-radius: var(--radius-4); background: var(--surface-100);
  box-shadow: inset 0 0 0 1px var(--border-default); }
strong, b { font-weight: var(--font-weight-600); }
.bz-skip { position: absolute; inset-inline-start: var(--space-8); inset-block-start: var(--space-8); z-index: 80;
  transform: translateY(-200%); }
.bz-skip:focus { transform: none; }
#main:focus { outline: none; }

/* 3. The shell (dash.buzz.ai): white sidebar with a 1px divider, a top bar per page, the page on
   the light grey background, cards 8px round with shadow-xs, 24px page padding, 16px between cards. */
.bz-app { display: grid; grid-template-columns: var(--bz-side-w) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(90deg, var(--surface-0) calc(var(--bz-side-w) - 1px), var(--border-default) calc(var(--bz-side-w) - 1px) var(--bz-side-w), transparent var(--bz-side-w)); }
.bz-side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: var(--space-12); padding: var(--space-16) var(--space-12); background: var(--surface-0);
  border-inline-end: 1px solid var(--border-default); }
.bz-side-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding-inline: var(--space-4); }
.bz-logo { display: inline-flex; align-items: center; gap: var(--space-8); text-decoration: none; color: var(--text-default); }
.bz-logo-img { display: block; width: auto; height: 24px; }
.bz-logo-label { color: var(--text-subdued); }
.bz-side-body { display: flex; flex-direction: column; gap: var(--space-12); flex: 1; min-height: 0; }
.bz-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.bz-nav a { display: flex; align-items: center; gap: var(--space-8); min-height: 32px; padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-6); color: var(--text-default); text-decoration: none; }
.bz-nav a:hover { color: var(--text-default); background: var(--surface-50); }
.bz-nav a[aria-current="page"] { background: var(--surface-primary-subdued); color: var(--text-primary-default);
  font-weight: var(--font-weight-500); }
.bz-nav .core-chip { margin-inline-start: auto; }
.bz-side-label { padding: 0 var(--space-12); color: var(--text-subdued); }
.bz-userchip { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8);
  align-items: start; padding: var(--space-8); border-radius: var(--radius-8); background: var(--surface-50); }
.bz-userchip-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-userchip form { margin-top: var(--space-8); display: flex; gap: var(--space-4); align-items: center; }
.bz-userchip form + form { margin-top: var(--space-4); }
.bz-userchip-forms { grid-column: 1 / -1; }
.bz-userchip-forms form:first-child { margin-top: 0; }
.bz-userchip-meta { display: block; color: var(--text-subdued); }
.bz-userchip .core-select { flex: 1 1 0; min-width: 0; }
.bz-testsite { padding: 0 var(--space-12); color: var(--text-subdued); }
.bz-menu-button { display: none; }
.bz-main { min-width: 0; padding: 0 var(--space-24) var(--space-32); }
.bz-page > * + * { margin-block-start: var(--space-16); }
.bz-page > .bz-head + * { margin-block-start: var(--space-24); }
.bz-head { display: flex; align-items: center; gap: var(--space-12) var(--space-16); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-24)); padding: var(--space-16) var(--space-24); background: var(--surface-0);
  border-block-end: 1px solid var(--border-default); }
.bz-head > div:first-child { min-width: 0; max-inline-size: 100%; }
.bz-head .core-breadcrumbs { margin-bottom: var(--space-4); max-inline-size: 100%; overflow: hidden; }
.bz-head .core-breadcrumbs__list { min-inline-size: 0; }
.bz-head .core-breadcrumbs__item--active { flex: 0 1 auto; min-inline-size: 0; }
.bz-head p { margin-top: var(--space-4); }
.bz-card { min-width: 0; padding: var(--space-24); background: var(--surface-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-8); box-shadow: var(--shadow-xs); }
.bz-card > * + * { margin-block-start: var(--space-12); }
.bz-card > :is(h2, h3):first-child + * { margin-block-start: var(--space-12); }
.bz-card > summary { cursor: pointer; }
.bz-card-head { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.bz-card-head > :is(h2, h3) { flex: 1; min-width: 0; }
.bz-callout { padding: var(--space-16) var(--space-24); border-radius: var(--radius-8); background: var(--surface-highlight-subdued);
  border: 1px solid var(--border-highlight-subdued); }
.bz-callout > * + * { margin-block-start: var(--space-8); }
.bz-list { list-style: none; margin: 0; padding: 0; }
.bz-list li { padding: var(--space-8) 0; }
.bz-list li + li { border-top: 1px solid var(--border-default); }
:is(.bz-list, .bz-tasks, .bz-toplist, .bz-timeline, .bz-calltl, .bz-risks) a:not([class*="core-"]) { text-decoration: none; }
:is(.bz-list, .bz-tasks, .bz-toplist, .bz-timeline, .bz-calltl, .bz-risks) a:not([class*="core-"]):hover { text-decoration: underline; }
.bz-truncate { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-link-plain, .bz-link-plain:hover { color: inherit; text-decoration: none; }
.bz-flush { padding: 0; }
.bz-card.bz-flush > .core-table { border-radius: var(--radius-8); }

/* 4. Toasts (CoreSnackbar), menus (CoreDropdownPanel), tooltips (CoreTooltip), dialogs (CoreModal). */
.bz-toasts { position: fixed; z-index: 60; inset-block-end: var(--space-24); inset-inline-end: var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-8); max-inline-size: min(460px, calc(100vw - var(--space-32))); }
.bz-menu { position: relative; display: inline-block; }
.bz-menu > summary { list-style: none; }
.bz-menu > summary::-webkit-details-marker { display: none; }
.bz-menu > .core-dropdown-panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-4));
  min-inline-size: 200px; }
.bz-menu > .core-dropdown-panel form { margin: 0; }
#bz-tip { position: fixed; pointer-events: none; }
.core-confirm-dialog .core-modal__wrapper { inline-size: min(440px, calc(100vw - var(--space-32))); }
.bz-modal-static { position: fixed; inset: 0; z-index: 50; }

/* 5. Native controls inside the DS form components (the Vue components draw their own; these keep
   real inputs so every page works without script). */
.core-form-field { min-width: 0; }
.core-form-field > .core-checkbox { min-height: 32px; align-items: center; }
.core-select { position: relative; padding: 0; }
.core-select > .core-select__value { appearance: none; -webkit-appearance: none; display: block; inline-size: 100%;
  min-block-size: inherit; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit;
  padding: var(--space-8) calc(var(--space-12) + var(--space-24)) var(--space-8) var(--space-12); cursor: pointer; outline: none; }
.core-select > .core-select__trailing { position: absolute; inset-inline-end: var(--space-12); inset-block: 0;
  pointer-events: none; }
.core-select:focus-within { box-shadow: inset 0 0 0 1px var(--core-select-ring-active), var(--core-select-glow); }
.core-select:has(> .core-select__value:disabled), .core-input:has(> .core-input__base:disabled),
.core-textarea:has(> .core-textarea__base:disabled) { opacity: .4; cursor: not-allowed; }
.core-input__base[type="date"], .core-input__base[type="time"] { min-height: 16px; }
.core-textarea__base { min-block-size: 72px; resize: vertical; }
.bz-control { position: relative; display: inline-flex; flex: none; }
.bz-control__input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.core-checkbox__base > .core-checkbox__icon, .core-radio-group__base > .core-radio-group__indicator { visibility: hidden; }
.bz-control__input:checked + .core-checkbox__base { --core-checkbox-bg: var(--interactive-primary-default);
  --core-checkbox-border: transparent; }
.bz-control__input:checked + .core-checkbox__base > .core-checkbox__icon,
.bz-control__input:checked + .core-radio-group__base > .core-radio-group__indicator { visibility: visible; }
.bz-control__input:checked + .core-radio-group__base { --core-radio-bg: var(--interactive-primary-default);
  --core-radio-border: transparent; }
.bz-control__input:checked + .core-switch__base { background-color: var(--interactive-primary-default); }
.bz-control__input:checked + .core-switch__base > .core-switch__thumb {
  translate: calc(var(--core-switch-track-inline) - var(--core-switch-thumb) - 2 * var(--core-switch-inset)); }
.bz-control__input:focus-visible + .core-checkbox__base { box-shadow: inset 0 0 0 1px var(--core-checkbox-border), var(--shadow-focus-ring); }
.bz-control__input:focus-visible + .core-radio-group__base { box-shadow: inset 0 0 0 1px var(--core-radio-border), var(--shadow-focus-ring); }
.bz-control__input:focus-visible + .core-switch__base { box-shadow: var(--shadow-focus-ring); }
.bz-control__input:disabled { cursor: not-allowed; }
label:has(> .bz-control > .bz-control__input:disabled) { opacity: .4; }
fieldset.core-radio-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.core-radio-group__legend { padding: 0; margin-bottom: var(--space-4); }

.bz-actions { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; }
.core-table { position: relative; overflow-x: auto; max-inline-size: 100%; min-inline-size: 0; }
.reports-chart-card > *, .bz-card > * { min-inline-size: 0; }
.core-table__td .core-button, .core-table__td form { vertical-align: middle; }
.core-table__td form { display: inline-flex; gap: var(--space-4); align-items: center; }
.core-table__td .core-select { inline-size: auto; min-inline-size: 140px; }
.bz-table-tight .core-table__td { --core-table-row-block-size: var(--space-32); }
.core-empty-state.bz-empty { padding: var(--space-32) var(--space-16); }
.bz-card > .core-empty-state.bz-empty, .core-table + .core-empty-state.bz-empty { padding-block: var(--space-24); }
.bz-skeleton-list { display: none; }
#call-results.is-loading .bz-skeleton-list { display: block; }
#call-results.is-loading > :not(.bz-skeleton-list) { display: none; }
.bz-skeleton-list .core-skeleton + .core-skeleton { margin-top: var(--space-12); }
.core-ai-input .core-ai-input__glyph { color: var(--ai-default); }
.core-ai-input + *, .bz-page > .core-ai-input { margin-block-start: var(--space-16); }
.core-progress { margin-block: var(--space-8); }

/* 6. Calls-only layout and marks, carried over from the phase F to K stylesheets onto DS tokens:
   call rows, the transcript, the player, timelines, charts, Today, rooms. */
.bz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bz-muted { color: var(--text-subdued); }

.bz-row-flex { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.bz-spacer { flex: 1; }
.bz-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-20); align-items: start; }
.bz-day-label { font-size: var(--font-size-50); line-height: var(--line-height-50); font-weight: var(--font-weight-600); text-transform: uppercase; letter-spacing: .05em; color: var(--text-subdued); margin: var(--space-20) 0 var(--space-8); }
.bz-day-label:first-child { margin-top: 0; }
.bz-rows { list-style: none; margin: 0; padding: 0; background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-8); overflow: hidden; }
.bz-row + .bz-row { border-top: 1px solid var(--border-default); }
.bz-row > a { display: grid; grid-template-columns: 74px 4px minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; padding: var(--space-12) var(--space-16); color: inherit; text-decoration: none; }
.bz-row > a:hover { background: var(--surface-50); }
.bz-row > a[aria-current="true"] { background: var(--surface-primary-subdued); }
.bz-row .bz-when strong { display: block; font-size: var(--font-size-100); font-weight: var(--font-weight-600); }
.bz-row .bz-when small { color: var(--text-subdued); font-size: var(--font-size-50); }
.bz-row .bz-bar { width: 4px; height: 36px; border-radius: var(--radius-4); }
.bz-row .bz-who { min-width: 0; }
.bz-row .bz-who strong { display: block; font-size: var(--font-size-100); font-weight: var(--font-weight-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-row .bz-who small { display: block; color: var(--text-subdued); font-size: var(--font-size-50); line-height: var(--line-height-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-kv { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-6) var(--space-12); font-size: var(--font-size-100); margin: 0; }
.bz-kv dt { color: var(--text-subdued); }
.bz-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bz-quote { margin: var(--space-12) 0 0; padding: var(--space-12); border-left: 3px solid var(--brand); background: var(--surface-50); border-radius: 0 var(--radius-4) var(--radius-4) 0; color: var(--text-subdued); font-style: italic; }

.bz-public { min-height: 100vh; padding: var(--space-16); }
.bz-public.is-embed { padding: 0; background: transparent; }

.bz-login { max-width: 400px; margin: var(--space-32) auto 0; padding: 0 var(--space-16); }
.bz-login .bz-card > * + * { margin-block-start: var(--space-16); }
.bz-login-logo { display: flex; justify-content: center; }
.bz-login-logo .bz-logo-img { height: 32px; }
.bz-grid-2, .bz-grid-3 { display: grid; gap: var(--space-12) var(--space-16); grid-template-columns: 1fr; }
.bz-two-col { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr); align-items: start; }

.bz-add summary { list-style: none; display: inline-flex; }
.bz-add summary::-webkit-details-marker { display: none; }
.bz-add[open] summary { margin-bottom: var(--space-12); }

.bz-insight { display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap; color: var(--text-default); background: var(--ai-subdued), var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-8); padding: var(--space-20); margin-bottom: var(--space-16); }
.bz-insight > div { flex: 1; min-width: 240px; }
.bz-insight h2 { font-size: var(--font-size-200); line-height: var(--line-height-200); margin: var(--space-4) 0 var(--space-6); }
.bz-insight p { color: var(--text-default); font-size: var(--font-size-100); }
.bz-insight-label { font-size: var(--font-size-50); line-height: var(--line-height-50); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--font-weight-600); color: var(--text-subdued) !important; display: inline-flex; gap: var(--space-6); align-items: center; }
.bz-two-col + .bz-two-col, .bz-chart + .bz-two-col { margin-top: var(--space-16); }
.bz-colchart { --bz-plot-h: 220px; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--space-8); font-size: var(--font-size-50); color: var(--text-subdued); margin-top: var(--space-8); }
.bz-colchart-y { position: relative; height: var(--bz-plot-h); }
.bz-colchart-y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.bz-colchart-plot { position: relative; height: var(--bz-plot-h); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.bz-colchart-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--border-default); }
.bz-colchart-grid.is-base { background: var(--surface-300); }
.bz-colchart-col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; outline: none; border-radius: var(--radius-4); }
.bz-colchart-col:focus-visible { background: var(--surface-highlight-subdued); }
.bz-colstack { width: min(24px, 60%); display: flex; flex-direction: column-reverse; gap: var(--space-4); }
.bz-colstack i { display: block; flex: 1 1 0; min-height: 1px; }
.bz-colstack i:last-child { border-radius: 4px 4px 0 0; }
.bz-colchart-col:hover .bz-colstack, .bz-colchart-col:focus-visible .bz-colstack { filter: brightness(1.08); }
.bz-colchart-x { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: var(--space-8); }
.bz-colchart-x span { display: flex; justify-content: center; white-space: nowrap; }
.bz-hbars { list-style: none; margin: 0; padding: 0; }
.bz-hbars li { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); align-items: center; column-gap: var(--space-12); min-height: 36px; }
.bz-hbar-label { font-size: var(--font-size-50); color: var(--text-subdued); }
.bz-hbar-track { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.bz-hbar-track i { display: block; flex: none; height: 18px; min-width: 2px; border-radius: 0 4px 4px 0; }
.bz-hbar-track i:hover { filter: brightness(1.08); }
.bz-hbar-track b { font-size: var(--font-size-50); font-weight: var(--font-weight-600); color: var(--text-default); white-space: nowrap; }
.bz-heat { display: grid; grid-template-columns: 32px repeat(var(--n), minmax(0, 1fr)); gap: var(--space-4); max-width: 560px; font-size: var(--font-size-50); color: var(--text-subdued); }
.bz-heat i { display: block; aspect-ratio: 6 / 5; border-radius: 3px; }
.bz-heat-x { text-align: center; padding-bottom: var(--space-4); }
.bz-heat-y { align-self: center; }

.bz-answer { position: relative; margin-bottom: var(--space-16); overflow: hidden; }
.bz-answer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ai-accent); }
.bz-answer-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-8); vertical-align: middle; background: var(--surface-highlight-default); }
.bz-answer[data-tone=ok] .bz-answer-title::before { background: var(--surface-success-default); }
.bz-answer[data-tone=error] .bz-answer-title::before { background: var(--surface-critical-default); }
.bz-answer-head { display: flex; align-items: flex-start; gap: var(--space-12); }
.bz-answer-q { font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-subdued); margin: 0 0 var(--space-4); }
.bz-answer-title { font-size: var(--font-size-200); line-height: var(--line-height-200); letter-spacing: var(--letter-spacing-200); margin: 0; }
.bz-answer-body { white-space: pre-line; font-size: var(--font-size-100); color: var(--text-default); margin: var(--space-8) 0 0; }

@media (max-width: 699px) {
  .bz-colchart-x .is-minor { visibility: hidden; }
  
}
@media (max-width: 479px) {
  .bz-hbars li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); padding: var(--space-4) 0; }
}

.bz-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bz-scale { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-size-50); color: var(--text-subdued); margin-top: var(--space-8); }
.bz-scale i { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }
.bz-scale span { margin: 0 var(--space-6); }
.bz-tableview { margin-top: var(--space-12); font-size: var(--font-size-50); overflow-x: auto; position: relative; }

.bz-meter { display: inline-block; width: 60px; height: 6px; border-radius: 999px; background: var(--surface-primary-subdued); vertical-align: middle; margin-right: var(--space-6); overflow: hidden; }
.bz-meter i { display: block; height: 100%; background: var(--text-highlight); border-radius: 999px; }
@media (min-width: 900px) {
  .bz-grid-2 { grid-template-columns: 1fr 1fr; }
  .bz-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .bz-public { padding: var(--space-32) var(--space-24); }
}
@media (min-width: 1280px) {
  .bz-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .bz-split { grid-template-columns: minmax(0, 1fr) 380px; }
  .bz-detail { position: sticky; top: var(--space-24); }
}
.bz-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-12); border-left: 2px solid var(--border-default); }
.bz-timeline li { position: relative; display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: var(--space-4) var(--space-12); padding: var(--space-6) 0; font-size: var(--font-size-100); }
.bz-timeline li::before { content: ""; position: absolute; left: -20px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-0); border: 2px solid var(--grey-400); }
.bz-timeline li.is-meeting::before { background: var(--brand); border-color: var(--brand); }
.bz-timeline li.is-meeting { font-weight: var(--font-weight-600); }
.bz-tl-when { color: var(--text-subdued); font-size: var(--font-size-50); line-height: var(--line-height-100); }

.bz-when { display: flex; flex-wrap: wrap; gap: var(--space-6); }
#crm .bz-timeline { margin-top: var(--space-6); }
.bz-stages { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.bz-stages li { padding: var(--space-4) var(--space-8); border: 1px solid var(--border-default); border-radius: var(--radius-100); font-size: var(--font-size-50); background: var(--surface-0); }
.bz-stages li.is-mapped { border-color: var(--brand); background: var(--surface-highlight-subdued); }

.bz-callout { border-radius: var(--radius-6); padding: var(--space-8) var(--space-12); margin-bottom: var(--space-16); color: var(--text-default); background: var(--surface-highlight-subdued); border: 1px solid color-mix(in srgb, var(--surface-highlight-default) 30%, transparent); border-left: 3px solid var(--surface-highlight-default); }
.bz-callout h2 { font-size: var(--font-size-100); line-height: var(--line-height-100); margin-bottom: var(--space-4); }
.bz-search { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-12); }
.bz-search-actions { display: flex; gap: var(--space-8); align-items: end; flex-wrap: wrap; }
.bz-saved { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; margin-bottom: var(--space-16); }
.bz-saved form { display: inline; }
@media (min-width: 700px) {
  .bz-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .bz-search { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
}
.bz-row .bz-when small { display: block; }

.bz-row .bz-row-flex { justify-content: flex-end; }
.bz-row-sub { list-style: none; margin: 0; padding: 0 var(--space-16) var(--space-8) calc(var(--space-32) + var(--space-4) + 2 * var(--space-12) + var(--space-16)); }
.bz-row-sub li { font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-subdued); padding: var(--space-4) 0; }
.bz-row-sub a { color: var(--text-highlight); }
@media (max-width: 599px) {
  .bz-row-sub { padding-left: var(--space-16); }
}
.bz-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-12); margin: 0; }
.bz-metrics div { padding: var(--space-8) var(--space-12); border: 1px solid var(--border-default); border-radius: var(--radius-6); background: var(--surface-0); }
.bz-metrics dt { font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-subdued); }
.bz-metrics dd { margin: var(--space-4) 0 0; font-size: var(--font-size-200); line-height: var(--line-height-200); font-weight: var(--font-weight-600); letter-spacing: var(--letter-spacing-200); }
.bz-metrics dd small { display: block; font-size: var(--font-size-50); line-height: var(--line-height-50); font-weight: var(--font-weight-400); color: var(--text-subdued); letter-spacing: 0; }
.bz-list { list-style: none; margin: 0; padding: 0; }
.bz-list li { padding: var(--space-6) 0; font-size: var(--font-size-100); }
.bz-list li + li { border-top: 1px solid var(--border-default); }
:is(.bz-list, .bz-tasks, .bz-toplist, .bz-timeline, .bz-calltl, .bz-risks) a:not([class*="core-"]) { text-decoration: none; }
:is(.bz-list, .bz-tasks, .bz-toplist, .bz-timeline, .bz-calltl, .bz-risks) a:not([class*="core-"]):hover { text-decoration: underline; }
.bz-list li small { display: block; color: var(--text-subdued); font-size: var(--font-size-50); line-height: var(--line-height-50); }
.bz-email { white-space: pre-wrap; font: inherit; margin: 0; padding: var(--space-12); background: var(--surface-50); border: 1px solid var(--border-default); border-radius: var(--radius-6); }
.bz-player { display: flex; gap: var(--space-12); align-items: center; }
.bz-turns { position: relative; flex: 1; height: 16px; background: var(--surface-100); border-radius: var(--radius-4); overflow: hidden; }
.bz-turn { position: absolute; top: 0; bottom: 0; display: block; }
.bz-turn.is-rep { background: var(--brand); }
.bz-turn.is-contact { background: var(--surface-600); }
.bz-playhead { position: absolute; top: -2px; bottom: -2px; width: 2px; translate: -50% 0; background: var(--text-default); border-radius: 1px; }
.bz-turn-legend { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-8); font-size: var(--font-size-50); color: var(--text-subdued); }
.bz-turn-legend .bz-swatch { vertical-align: -1px; margin-right: var(--space-4); }
.bz-transcript { list-style: none; margin: 0; padding: 0; }
.bz-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4) var(--space-12); padding: var(--space-8) var(--space-6); border-top: 1px solid var(--border-default); border-radius: var(--radius-4); scroll-margin-top: var(--space-24); }
.bz-line:first-child { border-top: 0; }
.bz-line:target, .bz-line.is-at { background: var(--surface-highlight-subdued); box-shadow: inset 2px 0 0 var(--brand); }
.bz-line .t { font-size: var(--font-size-50); line-height: var(--line-height-100); font-variant-numeric: tabular-nums; }
.bz-line .t a { color: var(--text-subdued); text-decoration: none; }
.bz-line .t a:hover { color: var(--text-default); text-decoration: underline; }
.bz-line .who { font-size: var(--font-size-50); line-height: var(--line-height-100); font-weight: var(--font-weight-600); }
.bz-line.is-rep .who { color: var(--text-default); }
.bz-line.is-contact .who { color: var(--text-subdued); }
.bz-line .text, .bz-line .bz-line-more { grid-column: 2; min-width: 0; }
.bz-line details summary { font-size: var(--font-size-50); color: var(--text-subdued); font-weight: var(--font-weight-500); cursor: pointer; }
.bz-line details form { margin-top: var(--space-8); }
.bz-redacted { background: var(--surface-200); border-radius: 3px; padding: 0 var(--space-4); font-size: var(--font-size-50); white-space: nowrap; }
.bz-comment { margin-top: var(--space-6); padding: var(--space-8) var(--space-8); background: var(--surface-50); border: 1px solid var(--border-default); border-radius: var(--radius-6); font-size: var(--font-size-100); }
.bz-comment small { display: block; color: var(--text-subdued); font-size: var(--font-size-50); line-height: var(--line-height-50); }
.bz-comment form { display: inline; }

.bz-risks { list-style: none; margin: 0; padding: 0; }
.bz-risks li { display: flex; gap: var(--space-8); align-items: flex-start; padding: var(--space-6) 0; font-size: var(--font-size-100); }
.bz-risks li + li { border-top: 1px solid var(--border-default); }
.bz-risks li > div { min-width: 0; }
.bz-risks small { display: block; color: var(--text-subdued); font-size: var(--font-size-50); line-height: var(--line-height-50); }
.bz-goals { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.bz-weeks td .bz-meter { width: 48px; }
.bz-inline-form { display: flex; gap: var(--space-8); align-items: end; flex-wrap: wrap; }
.bz-turn:focus-visible, .bz-marker:focus-visible { outline-offset: 0; }
.bz-filters { position: sticky; top: 0; z-index: 5; box-shadow: var(--shadow-xs); }
@media (max-width: 899px) {
  .bz-filters { position: static; }
}
.bz-result-count { margin: 0 0 var(--space-8); }
.bz-density { display: flex; gap: var(--space-4); }
.density-compact .bz-row > a { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.density-compact .bz-list li { padding: var(--space-4) 0; }
#call-results.is-loading .bz-result-count::after { content: " \00b7 searching"; }
#call-results.is-loading .bz-row > a { background: linear-gradient(90deg, var(--surface-0), var(--surface-100), var(--surface-0)); background-size: 200% 100%; animation: bz-shimmer 1s linear infinite; }
@keyframes bz-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  #call-results.is-loading .bz-row > a { animation: none; }
}
.bz-tour { display: flex; gap: var(--space-16); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--space-16) var(--space-20); margin-bottom: var(--space-16); border-radius: var(--radius-8); background: var(--surface-0); border: 1px solid var(--border-default); border-left: 3px solid var(--brand); box-shadow: var(--shadow-s); }
.bz-tour h2 { font-size: var(--font-size-200); line-height: var(--line-height-200); margin: var(--space-4) 0; }
.bz-tour p { margin: 0; max-width: 64ch; }
.bz-tour .bz-tour-step { font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-subdued); font-weight: var(--font-weight-500); }
.bz-tour form { display: inline; }
.bz-today { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .bz-today { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.bz-today-side { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr); }
.bz-today > *, .bz-today-side > * { min-width: 0; }
.bz-count { min-width: 22px; padding: 0 var(--space-6); border-radius: var(--radius-100); background: var(--surface-100); color: var(--text-subdued); font-size: var(--font-size-50); line-height: var(--line-height-100); text-align: center; font-weight: var(--font-weight-600); }
.bz-tasks { list-style: none; margin: 0; padding: 0; }
.bz-tasks li { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) 0; }
.bz-tasks li + li { border-top: 1px solid var(--border-default); }
.bz-tasks .bz-bar { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.bz-task-main { flex: 1; min-width: 0; }
.bz-task-main a { color: var(--text-default); text-decoration: none; }
.bz-task-main a:hover { text-decoration: underline; }
.bz-task-main small { display: block; color: var(--text-subdued); font-size: var(--font-size-50); line-height: var(--line-height-50); }
.bz-task-text { margin: var(--space-4) 0 0; font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-tasks form { flex: none; }
@media (max-width: 599px) {
  .bz-tasks li { flex-wrap: wrap; }
  .bz-tasks li > form { margin-left: calc(var(--space-4) + var(--space-12)); }
  .bz-task-text { white-space: normal; }
}
.bz-sections { margin: var(--space-12) 0 0; display: grid; gap: var(--space-8); }
.bz-sections div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-12); }
.bz-sections dt { font-size: var(--font-size-50); line-height: var(--line-height-100); font-weight: var(--font-weight-600); }
.bz-sections dd { margin: 0; font-size: var(--font-size-100); line-height: var(--line-height-100); }
@media (max-width: 599px) {
  .bz-sections div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.bz-rerun { margin-top: var(--space-12); }
.bz-rerun .core-select, .bz-inline-form .core-select, .bz-row-flex > .core-select { inline-size: auto; min-inline-size: 180px; }
.bz-markers { position: relative; height: 12px; margin: var(--space-6) 0 0 calc(var(--space-32) + var(--space-12)); }
.bz-marker, .bz-marker-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.bz-marker { position: absolute; top: 0; translate: -50% 0; box-shadow: 0 0 0 2px var(--surface-0); }
.bz-marker-key { margin-right: var(--space-4); }
.bz-marker.is-objection, .bz-marker-key.is-objection { background: var(--surface-critical-default); }
.bz-marker.is-tracker, .bz-marker-key.is-tracker { background: var(--surface-warning-default); }
.bz-marker.is-question, .bz-marker-key.is-question { background: var(--brand); }
.bz-marker.is-bookmark, .bz-marker-key.is-bookmark { background: var(--grey-800); }
.bz-marker.is-comment, .bz-marker-key.is-comment { background: var(--surface-success-default); }
.bz-player-prefs { display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap; margin-top: var(--space-12); }
.bz-keys { margin-top: var(--space-8); font-size: var(--font-size-50); }
.bz-keys summary { cursor: pointer; color: var(--text-subdued); font-weight: var(--font-weight-500); }
.bz-keys dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4) var(--space-12); margin: var(--space-8) 0 0; }
.bz-keys div { display: flex; gap: var(--space-8); }
.bz-keys dd { margin: 0; color: var(--text-subdued); }
.bz-line-bm { display: inline; margin-right: var(--space-8); }
.bz-line-bm .is-done { color: var(--text-default); font-weight: var(--font-weight-600); }
.bz-calltl { list-style: none; margin: 0; padding: 0; }
.bz-calltl li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-12); padding-bottom: var(--space-16); position: relative; }
.bz-calltl li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--border-default); }
.bz-calltl li:last-child { padding-bottom: 0; }
.bz-calltl li:last-child::before { display: none; }
.bz-calltl-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: var(--space-4); box-shadow: 0 0 0 3px var(--surface-0); }
.bz-calltl p { margin: 0; }
.bz-pre { white-space: pre-wrap; font: inherit; font-size: var(--font-size-50); line-height: var(--line-height-50); margin: var(--space-8) 0 0; padding: var(--space-12); background: var(--surface-50); border: 1px solid var(--border-default); border-radius: var(--radius-6); max-height: 260px; overflow: auto; }
@media (max-width: 599px) {
  .bz-player { flex-wrap: wrap; }
  .bz-markers { margin-left: 0; }
  .bz-head .bz-density { width: 100%; }
}
.bz-public-wrap { max-width: 880px; margin: 0 auto; }
.bz-room-public .bz-public-wrap { max-width: 1080px; }
.bz-room { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; margin-top: var(--space-12); }
.bz-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bz-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-16) var(--space-12); border-radius: var(--radius-6); background: var(--ai-button-default); color: var(--text-on-primary); min-height: 150px; justify-content: center; }
.bz-tile small { color: inherit; opacity: .85; }
.bz-tile.is-sharing { outline: 3px solid var(--text-highlight); outline-offset: -3px; }
.bz-room-controls { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
.bz-chatlog { list-style: none; margin: 0 0 var(--space-12); padding: 0; max-height: 360px; overflow-y: auto; }
.bz-chatlog li { padding: var(--space-6) 0; border-bottom: 1px solid var(--border-default); }
.bz-chatlog li:last-child { border-bottom: 0; }
.bz-chatlog p { margin: var(--space-4) 0 0; overflow-wrap: anywhere; }
.bz-room-notice { border-left: 4px solid var(--surface-critical-default); }
@media (max-width: 760px) {
  .bz-room { grid-template-columns: minmax(0, 1fr); }
  .bz-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.bz-colchart-col s.bz-plan { position: absolute; left: 18%; right: 18%; height: 0; border-top: 2px solid var(--text-default); transform: translateY(1px); text-decoration: none; }
.bz-colchart-col.is-weekend { background: var(--surface-50); }
.bz-swatch-plan { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--text-default); vertical-align: middle; }

.bz-toplist { margin: 0; padding: 0 0 0 var(--space-20); }
.bz-toplist li { padding: var(--space-8) 0; border-bottom: 1px solid var(--border-default); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-12); }
.bz-toplist li:last-child { border-bottom: 0; }
.bz-toplist small { grid-column: 1 / -1; }
.bz-report-skeleton { display: none; }
.bz-report[aria-busy="true"] .bz-report-body { display: none; }
.bz-report[aria-busy="true"] .bz-report-skeleton { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@keyframes bz-pulse { 50% { opacity: .55; } }

.bz-section-title { font-size: var(--font-size-300); line-height: var(--line-height-300); margin: var(--space-24) 0 var(--space-12); }
.bz-report-body > .bz-section-title:first-child { margin-top: 0; }
.bz-multi { position: relative; }
.bz-multi[open] .bz-nowrap { white-space: nowrap; }
.bz-bot-hint { margin-top: var(--space-6); padding: var(--space-8) var(--space-12); border-left: 3px solid var(--surface-critical-default); background: var(--surface-50); border-radius: var(--radius-6); display: grid; gap: var(--space-6); justify-items: start; }
.bz-bot-hint p { margin: 0; font-size: var(--font-size-100); }
.bz-speakers { margin: 0 0 var(--space-12); }
.bz-speakers > summary { cursor: pointer; font-weight: var(--font-weight-500); }
.bz-speaker-form { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; margin-top: var(--space-12); }

@media (max-width: 599px) {
  .bz-hide-sm { display: none; }
  .bz-sm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.bz-heat-24 { max-width: none; grid-template-columns: 32px repeat(24, minmax(0, 1fr)); }
.bz-heat-24 .bz-heat-x { white-space: nowrap; overflow: visible; font-size: var(--font-size-50); }
@media (max-width: 599px) {
  .bz-heat-24 .bz-heat-x { font-size: var(--font-size-50); letter-spacing: -0.2px; }
}

/* 8. Marks coloured by role (no inline colours in templates): outcome bars, avatars, chart series. */
[data-tone="green"] { --bz-tone: var(--surface-success-default); }
[data-tone="red"] { --bz-tone: var(--surface-critical-default); }
[data-tone="amber"] { --bz-tone: var(--surface-warning-default); }
[data-tone="blue"] { --bz-tone: var(--brand); }
[data-tone="purple"] { --bz-tone: var(--decorative-labels-default-03); }
[data-tone="muted"] { --bz-tone: var(--surface-500); }
.bz-bar, .bz-calltl-dot { background: var(--bz-tone, var(--surface-500)); }

[data-series="1"] { --bz-series: var(--bz-chart-1); }
[data-series="2"] { --bz-series: var(--bz-chart-2); }
[data-series="3"] { --bz-series: var(--bz-chart-3); }
[data-series="4"] { --bz-series: var(--bz-chart-4); }
[data-series="5"] { --bz-series: var(--bz-chart-5); }
[data-series="6"] { --bz-series: var(--bz-chart-6); }
i[data-series], .bz-swatch[data-series] { background-color: var(--bz-series); }
.reports-value-legend__item[data-series] { --reports-value-legend-color: var(--bz-series); }
[data-level="0"] { background-color: var(--bz-ramp-0); }
[data-level="1"] { background-color: var(--bz-ramp-1); }
[data-level="2"] { background-color: var(--bz-ramp-2); }
[data-level="3"] { background-color: var(--bz-ramp-3); }
[data-level="4"] { background-color: var(--bz-ramp-4); }
[data-level="5"] { background-color: var(--bz-ramp-5); }
.bz-swatch.is-rep { background: var(--brand); }
.bz-swatch.is-contact { background: var(--surface-600); }

/* The scorecard's outcome mix: one DS scale step per outcome. */
.bz-mix { display: flex; width: 120px; height: 8px; border-radius: var(--radius-4); overflow: hidden; background: var(--surface-200); }
.bz-mix > span { height: 100%; background: var(--bz-outcome); }
.bz-swatch[data-outcome] { background: var(--bz-outcome); }
[data-outcome="meeting_booked"] { --bz-outcome: var(--green-500); }
[data-outcome="interested"] { --bz-outcome: var(--brand); }
[data-outcome="callback"] { --bz-outcome: var(--orange-600); }
[data-outcome="connected"] { --bz-outcome: var(--blue-800); }
[data-outcome="not_interested"] { --bz-outcome: var(--red-600); }
[data-outcome="wrong_number"] { --bz-outcome: var(--red-900); }
[data-outcome="voicemail"] { --bz-outcome: var(--grey-500); }
[data-outcome="no_answer"] { --bz-outcome: var(--grey-300); }

/* The Calls list (CoreTable). */
.bz-calls, .bz-skeleton-list { background: var(--surface-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-8); box-shadow: var(--shadow-xs); }
.core-table__tr[data-href] { cursor: pointer; }
.bz-when-cell { white-space: nowrap; inline-size: 1%; }
.bz-when-cell > span:last-child { display: inline-flex; flex-direction: column; vertical-align: middle; }
.bz-when-cell .bz-bar { display: inline-block; vertical-align: middle; width: 4px; height: 32px; border-radius: var(--radius-4);
  margin-inline-end: var(--space-8); }
.bz-when-time, .bz-cell-sub { font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-subdued); }
.bz-call-cell { max-inline-size: 0; inline-size: 45%; }
.bz-row-link { color: var(--text-default); font-weight: var(--font-weight-500); text-decoration: none; }
a.bz-row-link:hover { color: var(--text-default); text-decoration: underline; }
.bz-badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); }
.density-compact .bz-calls { --core-table-row-block-size: var(--space-32); }
.density-compact .bz-calls .bz-when-cell .bz-bar { height: 24px; }
.bz-sk-s { inline-size: 96px; }
.bz-sk-xs { inline-size: 40px; }
.bz-row-sub { list-style: none; margin: 0; padding: 0 0 0 var(--space-16); display: grid; gap: var(--space-4);
  font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-subdued); }
.bz-ai-glyph { color: var(--ai-default); vertical-align: -3px; }

.bz-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.core-tag form { display: inline-flex; margin: 0; }
.bz-search-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: end; }
.bz-search { display: grid; gap: var(--space-12) var(--space-16); align-items: end; }

.bz-stack-16 > * + *, .bz-panels > * + * { margin-block-start: var(--space-16); }
.bz-break { word-break: break-all; }
.bz-tags { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.bz-inline-note { margin: 0; }
.bz-play { flex: none; }

.bz-notice { --core-snackbar-max-text: none; box-shadow: none; border: 1px solid var(--border-default); }
.bz-notice.core-snackbar--critical { border-color: var(--border-critical-subdued); background: var(--surface-critical-subdued), var(--surface-0); }
.bz-notice.core-snackbar--success { border-color: var(--border-success-subdued); }
.bz-kpis { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.bz-kpi { padding: var(--space-16) var(--space-20); }
.bz-kpi .reports-main-metric-card__label { white-space: normal; }
.bz-kpi .reports-main-metric-card__description { font-size: var(--font-size-50); line-height: var(--line-height-50); color: var(--text-subdued); margin: 0; }
:where(form):not(.bz-inline-form, .bz-row-flex, .bz-density, .core-ai-input, .core-segmented-control, .bz-line-bm, .bz-player-prefs, .bz-filters, .bz-actions) > :not([type="hidden"]) ~ :not([type="hidden"]) { margin-block-start: var(--space-12); }
.bz-player-prefs > label:not([class]) { font-size: var(--font-size-100); }
.bz-player-prefs .core-select { inline-size: auto; min-inline-size: 96px; }

/* Reports (ReportsToolbar, metric and chart cards, the value legend). */
.bz-chart { margin: 0; }
.bz-report-toolbar { border: 1px solid var(--border-default); border-radius: var(--radius-8); box-shadow: var(--shadow-xs); }
.bz-tool-select { inline-size: auto; min-inline-size: 150px; }
.bz-tool-dates { display: inline-flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.bz-tool-dates .core-input { inline-size: auto; }
.bz-multi > summary { list-style: none; }
.bz-multi > summary::-webkit-details-marker { display: none; }
.bz-multi-list { position: absolute; z-index: 60; inset-inline-start: 0; inset-block-start: calc(100% + var(--space-4));
  min-inline-size: 240px; max-block-size: 280px; overflow-y: auto; margin: 0; border: 0; }
.bz-multi-list .core-checkbox { align-items: center; }
.bz-legend-row { flex-direction: row; flex-wrap: wrap; flex: none; gap: var(--space-8) var(--space-24); }
.bz-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-16); }
.bz-report-body > * + * { margin-block-start: var(--space-16); }
.bz-report-body > .bz-section-title { margin-block: var(--space-24) 0; }
.bz-report-body > .bz-section-title:first-child { margin-block-start: 0; }
.bz-sk-card { block-size: 88px; border-radius: var(--radius-8); }
.bz-sk-chart { grid-column: 1 / -1; block-size: 220px; border-radius: var(--radius-8); }
.bz-modal-wide { inline-size: min(760px, calc(100vw - var(--space-32))); }
.bz-modal-head { flex-direction: row; align-items: center; justify-content: space-between; }
.bz-total > * { font-weight: var(--font-weight-600); }
.bz-tableview > summary { cursor: pointer; color: var(--text-primary-default); font-size: var(--font-size-100); font-weight: var(--font-weight-500); }
.reports-chart-card .bz-hbars, .reports-chart-card .bz-colchart, .reports-chart-card .bz-heat { margin-top: 0; }

.bz-attendees { display: inline-flex; align-items: center; gap: var(--space-6); vertical-align: middle; }
.bz-attendees .core-avatar-group { flex: none; }
.bz-attendee-names [data-tip] { cursor: default; }

/* 9. Phones and small tablets: the sidebar becomes a top menu (calls.js folds it behind "Menu"),
   tables scroll sideways, and every tap target is at least 40px. */
@media (max-width: 899px) {
  .bz-app { display: block; background: none; }
  .bz-side { position: static; height: auto; overflow: visible; gap: var(--space-12); padding: var(--space-8) var(--space-16);
    border-inline-end: 0; border-block-end: 1px solid var(--border-default); }
  .bz-menu-button { display: inline-flex; }
  .has-js .bz-side:not(.is-open) .bz-side-body { display: none; }
  .bz-userchip { margin-top: 0; }
  .bz-main { padding: 0 var(--space-16) var(--space-24); }
  .bz-head { margin-inline: calc(-1 * var(--space-16)); padding: var(--space-12) var(--space-16); }
  .bz-card { padding: var(--space-16); }
  .bz-toasts { inset-inline: var(--space-16); inset-block-end: var(--space-16); max-inline-size: none; }
  .core-button, .core-tab-item, .core-segmented-control__trigger, .reports-toolbar-button, .bz-nav a { min-block-size: 40px; }
  .core-button--square { min-inline-size: 40px; }
  .core-input, .core-select, .core-ai-input__field { min-block-size: 40px; }
  .core-select > .core-select__value { padding-block: var(--space-12); }
  .core-checkbox, .core-radio-group__item, .core-switch { min-block-size: 40px; align-items: center; }
  .core-table__table { min-inline-size: 560px; }
  .core-tabs__list, .core-segmented-control__list { overflow-x: auto; max-inline-size: 100%; scrollbar-width: none; }
  .core-tabs__list > .core-tab-item, .core-segmented-control__list > .core-segmented-control__trigger { flex: none; }
  .core-modal__wrapper { padding: var(--space-16); }
}

/* 10. Spacing helpers (the 4 to 32 steps only). Last, so they win over the flow rules above. */
.bz-mt-0 { margin-top: 0; }
.bz-mt-4 { margin-top: var(--space-4); }
.bz-mt-8 { margin-top: var(--space-8); }
.bz-mt-12 { margin-top: var(--space-12); }
.bz-mt-16 { margin-top: var(--space-16); }
.bz-mt-24 { margin-top: var(--space-24); }
.bz-mt-32 { margin-top: var(--space-32); }
.bz-mb-4 { margin-bottom: var(--space-4); }
.bz-mb-8 { margin-bottom: var(--space-8); }
.bz-mb-12 { margin-bottom: var(--space-12); }
.bz-mb-16 { margin-bottom: var(--space-16); }
.bz-mb-24 { margin-bottom: var(--space-24); }
.bz-gap-4 { gap: var(--space-4); }
.bz-gap-8 { gap: var(--space-8); }
.bz-gap-12 { gap: var(--space-12); }
.bz-gap-16 { gap: var(--space-16); }
.bz-min0 { min-width: 0; }
.bz-nowrap { white-space: nowrap; }
.bz-nowrap-row { flex-wrap: nowrap; }
.bz-wrap { flex-wrap: wrap; }
.bz-grow { flex: 1 1 260px; min-width: 0; }
.bz-center { text-align: center; }