:root {
    /* ------------------------------------------------------------ Bizomate tokens
       Named by role, not by colour, so a correction is a value change rather than a
       rename. The design (Bizomate Product UI artifact) is the source of truth.

       Two neutral scales, both deliberate:
         field scale  — form fields, auth screens, settings cards (violet-tinted)
         shell scale  — app chrome, lists, runs, designer, toolbars (neutral grey) */

    /* Brand */
    --bz-violet: #7C3AED;
    --bz-violet-hover: #6D28D9;
    --bz-violet-tint: #F3EEFF;           /* active nav item, violet pills */
    --bz-violet-tint-border: #DDD0FA;
    --bz-violet-tint-soft: #FBFAFE;      /* the plan note on Create workspace */
    --bz-cyan-500: #06B6D4;              /* GRAPHICS ONLY — fails contrast for text */
    --bz-cyan-700: #0E7490;              /* cyan that carries or sits behind text */
    --bz-gradient-brand: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);  /* nothing written on it */
    --bz-gradient-panel: linear-gradient(135deg, #7C3AED 0%, #0E7490 100%);  /* anything with white text */

    /* Text */
    --bz-ink: #14151C;
    --bz-slate: #4A4C5C;
    --bz-text-muted: #6B6D7C;            /* shell scale: page subtitles, secondary cells */
    --bz-text-subtle: #7C7F92;           /* field scale: labels, helper text, placeholders, eyebrows */
    --bz-text-placeholder-toolbar: #A9A9B5;

    /* Field scale */
    --bz-field-border: #E7E5F0;
    --bz-field-border-focus: #C9C4DC;
    --bz-field-border-error: #F2C0C0;
    --bz-field-bg-readonly: #F4F3F8;     /* Mist */
    --bz-field-hover: #F4F3F8;           /* Mist — a select option under the pointer */
    --bz-scroll-thumb: #CFCBDD;          /* the select panel's own thumb */
    --bz-checkbox-border: #B9B4C9;

    /* Shell scale */
    --bz-bg-app: #F7F7F9;
    --bz-bg-notice: #F4F3F8;             /* Mist — behind a full-page message */
    --bz-surface: #FFFFFF;
    --bz-border: #E4E4E9;
    --bz-divider: #F0F0F3;
    --bz-switch-off: #D8D8DF;
    --bz-switch-disabled: #E4E4E9;

    /* Semantic — status only, never brand meaning */
    --bz-success: #15803D;
    --bz-success-bg: #ECFDF3;
    --bz-success-border: #C6EBD4;
    --bz-error: #DC2626;
    --bz-error-strong: #B91C1C;          /* error text on the tinted banner */
    --bz-error-bg: #FEF2F2;
    --bz-error-border: #F3C9C9;
    --bz-warning: #B45309;
    --bz-warning-strong: #92400E;        /* amber text on the tint, as --bz-error-strong is */
    --bz-warning-bg: #FEF7EC;            /* auth banners, 4px */
    --bz-warning-border: #F2DCB8;
    --bz-warning-bg-card: #FFFBEB;       /* in-app cards, 8px — a yellower cream */
    --bz-warning-border-card: #F2DFB6;
    /* Quiet text on the brand gradient. White at 92%: the violet→teal ramp has its worst
       point at the teal end, where 70% reads 3.47:1 and 86% reads 4.41:1 — both under the
       4.5:1 floor for text this size. 92% clears it at both ends (5.07 violet, 4.80 teal)
       and still reads quiet beside the pure-white headings. Do not lower it without
       re-measuring; it looks like a style choice and is not one. */
    --bz-on-gradient-quiet: rgba(255, 255, 255, 0.92);

    --bz-info: #0E7490;
    --bz-info-bg: #ECFEFF;
    --bz-info-border: #BFE7EE;

    /* Radii */
    --bz-radius-xs: 3px;                 /* checkbox */
    --bz-radius: 4px;                    /* fields, buttons, nav items, auth banners, toasts */
    --bz-radius-md: 6px;                 /* toolbar search, filters, view toggle */
    --bz-radius-lg: 8px;                 /* cards, dialogs, in-app banners */
    --bz-radius-pill: 999px;

    /* Control heights */
    --bz-control-lg: 40px;               /* auth and empty-state actions */
    --bz-control: 32px;                  /* everything in-app, dialogs, settings */
    --bz-control-sm: 30px;               /* row actions */

    /* Elevation and overlays */
    --bz-overlay: rgba(20, 21, 28, 0.5);
    --bz-overlay-busy: rgba(251, 250, 253, 0.72);
    --bz-shadow-1: 0 6px 20px rgba(20, 21, 28, 0.10);
    --bz-shadow-2: 0 10px 30px rgba(20, 21, 28, 0.14);
    --bz-shadow-3: 0 16px 44px rgba(20, 21, 28, 0.22);
    --bz-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #7C3AED;

    /* Type */
    --font-brand: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --font-ui: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* ------------------------------------------------------------ legacy aliases
       Kept at their old values so pages not yet rebuilt look exactly as they did. Each
       goes once nothing references it. Do not use these in new rules. */
    --brand-start: #7C3AED;
    --brand-end: #06B6D4;
    --brand-cyan-text: #0E7490;
    --brand-gradient: linear-gradient(135deg, #7C3AED, #06B6D4);
    --panel-gradient: linear-gradient(135deg, #7C3AED, #0E7490);
    --bizomate-success: #15803D;
    --bizomate-success-bg: #ECFDF3;
    --bizomate-warning: #B45309;
    --bizomate-warning-bg: #FFFBEB;
    --bizomate-danger: #DC2626;
    --bizomate-danger-bg: #FEF2F2;
    --bizomate-info: #0E7490;
    --bizomate-info-bg: #ECFEFF;
    --bizomate-ink: #14151C;
    --bizomate-slate: #4A4C5C;
    --bizomate-text-muted: #4A4C5C;
    --bizomate-text-subtle: #6B6D7C;
    --bizomate-border: #E4E4E9;
    --bizomate-border-light: #F0F0F3;
    --bizomate-bg-subtle: #F7F7F9;
    --bizomate-primary: #7C3AED;
    --bizomate-primary-dark: #6D28D9;
    --bizomate-text: #14151C;
    --bizomate-radius: 8px;
    --bizomate-radius-sm: 4px;
    --bizomate-shadow-sm: 0 1px 3px rgba(20,21,28,0.08);
    --bizomate-shadow-hover: 0 4px 12px rgba(20,21,28,0.12);
    --bizomate-shadow-modal: 0 2px 24px rgba(20,21,28,0.3);
    --bizomate-spacing-xs: 4px;
    --bizomate-spacing-sm: 8px;
    --bizomate-spacing-md: 16px;
    --bizomate-spacing-lg: 24px;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    color: var(--bz-ink);
    background: var(--bz-bg-app);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-brand);
}

h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.10;
}

h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
}

h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
}

code, .pager-jump-input, .config-textarea {
    font-family: var(--font-mono);
}

.admin-provider-table td, .pager-info {
    font-variant-numeric: tabular-nums;
}

a, .btn-link {
    color: var(--brand-start);
}

.btn-primary {
    color: #fff;
    background-color: var(--brand-start);
    border-color: var(--bizomate-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-start);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bizomate-success);
}

.invalid {
    outline: 1px solid var(--bizomate-danger);
}

.validation-message {
    color: var(--bizomate-danger);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Hidden until Blazor shows it. Global rather than scoped, since every layout renders it. */
#blazor-error-ui {
    color-scheme: light only;
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    padding: 0.7rem 1.25rem;
    background: var(--bizomate-warning-bg);
    color: var(--bizomate-ink);
    border-top: 1px solid var(--bizomate-warning);
    box-shadow: 0 -1px 2px rgba(20, 21, 28, 0.15);
    font-size: 14px;
}

    #blazor-error-ui .reload {
        color: var(--brand-start);
        margin-left: 4px;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ================================================================ foundation
   Shared components from the design. Every rebuilt page uses these; the page sections
   further down are the pre-redesign styles and are removed page by page. */

@keyframes bz-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------- links */

.bz-link {
    color: var(--bz-violet);
    font-weight: 500;
    text-decoration: none;
}

    .bz-link:hover {
        color: var(--bz-violet-hover);
        text-decoration: underline;
    }

    .bz-link:focus-visible {
        outline: none;
        border-radius: 2px;
        box-shadow: var(--bz-focus-ring);
    }

/* ---------------------------------------------------------------- spinner
   Draws in currentColor, so it is white on the gradient, ink on a secondary button and
   violet wherever it is set to be — no per-variant override needed. */

.bz-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bz-spin 0.7s linear infinite;
}

.bz-spinner-lg {
    width: 34px;
    height: 34px;
    border-width: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .bz-spinner {
        animation-duration: 1.6s;
    }
}

/* ---------------------------------------------------------------- buttons
   Three heights: lg 40px (auth, empty states), default 32px (in-app, dialogs, settings),
   sm 30px (row actions). All 4px radius, Poppins 500, a verb for a label.

   Busy is its own state, not disabled: the button keeps its colour so it still reads as
   the thing that was pressed, and shows the spinner and busy label in place of its text.
   ActionButton sets it on interactive pages; auth.js sets it on static ones. */

.bz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--bz-control);
    padding: 0 13px;
    box-sizing: border-box;
    font-family: var(--font-brand);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--bz-ink);
    background: var(--bz-surface);
    border: 1px solid transparent;
    border-radius: var(--bz-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

    .bz-btn:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .bz-btn .app-icon,
    .bz-btn .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

.bz-btn-lg {
    height: var(--bz-control-lg);
    padding: 0 16px;
    font-size: 14px;
    gap: 9px;
}

.bz-btn-sm {
    height: var(--bz-control-sm);
    padding: 0 11px;
    font-size: 12.5px;
    gap: 6px;
}

.bz-btn-block {
    display: flex;
    width: 100%;
}

.bz-btn-primary {
    color: #FFFFFF;
    background: var(--bz-gradient-panel);
    border: 0;
}

    .bz-btn-primary:hover {
        filter: brightness(0.94);
        color: #FFFFFF;
    }

.bz-btn-secondary {
    color: var(--bz-ink);
    background: var(--bz-surface);
    border-color: var(--bz-border);
}

    .bz-btn-secondary:hover {
        background: var(--bz-bg-app);
        color: var(--bz-ink);
    }

.bz-btn-danger {
    color: #FFFFFF;
    background: var(--bz-error);
    border: 0;
}

    .bz-btn-danger:hover {
        background: var(--bz-error-strong);
        color: #FFFFFF;
    }

/* Unavailable. Flat grey, no gradient — an unavailable action must not look pressable. */
.bz-btn:disabled:not(.is-busy),
.bz-btn[aria-disabled="true"]:not(.is-busy) {
    color: var(--bz-text-muted);
    background: var(--bz-divider);
    border-color: transparent;
    filter: none;
    cursor: not-allowed;
}

.bz-btn.is-busy {
    cursor: progress;
    filter: none;
    opacity: 0.92;
}

/* A wait that is not an action — the locked screen's "Try again in 15 minutes". Flat
   and borderless, because an outline reads as clickable and there is nothing to click. */
.bz-btn-wait {
    color: var(--bz-text-muted);
    background: var(--bz-field-bg-readonly);
    border: 0;
    cursor: default;
}

/* ---------------------------------------------------------------- floating-label field
   Rendered by FormField.razor. The label sits inside the box; the input below it has
   every browser and Bootstrap style stripped so the box is the only frame.

   The focus bar is an inset shadow rather than the design's extra div: same pixels,
   one element fewer, and it follows :focus-within with no script. */

.bz-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bz-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 11px 7px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: text;
}

.bz-field-label {
    display: block;
    margin: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--bz-text-subtle);
    cursor: inherit;
}

.bz-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 21px;
}

.bz-field-control {
    flex: 1 1 auto;
    min-width: 0;
}

    .bz-field-control input,
    .bz-field-control select,
    .bz-field-control textarea {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* Inherited: Poppins on the auth screens, the UI stack inside the app. */
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        color: var(--bz-ink);
        background: transparent;
        border: 0;
        border-radius: 0;
        outline: none;
        box-shadow: none;
        appearance: none;
    }

    .bz-field-control textarea {
        resize: vertical;
        min-height: 63px;
    }

    .bz-field-control input::placeholder,
    .bz-field-control textarea::placeholder {
        color: var(--bz-text-subtle);
        opacity: 1;
    }

    /* The global Blazor validation outlines are for bare inputs; the box carries state here. */
    .bz-field-control .invalid,
    .bz-field-control .valid.modified {
        outline: none;
    }

    /* Chrome's autofill paints its own yellow; keep the box white. */
    .bz-field-control input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 40px var(--bz-surface) inset;
        -webkit-text-fill-color: var(--bz-ink);
    }

.bz-field-trailing {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-violet);
}

/* "Show", "Change" and the like, inside a field. */
.bz-field-action {
    padding: 0;
    font: inherit;
    color: var(--bz-violet);
    background: none;
    border: 0;
    cursor: pointer;
}

    .bz-field-action:hover {
        color: var(--bz-violet-hover);
        text-decoration: underline;
    }

    .bz-field-action:focus-visible {
        outline: none;
        border-radius: 2px;
        box-shadow: var(--bz-focus-ring);
    }

.bz-field-lock {
    color: var(--bz-text-subtle);
}

    /* 13px, as the board draws it — a point smaller than the trailing actions beside it,
       because the padlock states a fact rather than offering something to click. */
    .bz-field-lock .app-icon,
    .bz-field-lock .app-icon svg {
        width: 13px;
        height: 13px;
        min-width: 13px;
        min-height: 13px;
    }

.bz-field-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--bz-text-subtle);
}

.bz-field-wrap .validation-message {
    font-size: 12px;
    line-height: 1.45;
    color: var(--bz-error);
}

/* A field inside a settings card. The board gives the card an 18px gap between its rows;
   the fields are separate blocks rather than flex children here, so each carries the
   space below it. */
.settings-field {
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------- Syncfusion in a field
   Native inputs cover text, password, email, textarea and simple selects — they are what
   the static account pages can post, and they are the default. Syncfusion is for the
   controls that earn it: a searchable or grouped dropdown, a date picker, a multi-select,
   a numeric box. This makes one of those sit inside the box instead of beside it.

   Its markup is a span.e-input-group.e-control-wrapper holding input.e-input, with
   .e-clear-icon and .e-input-group-icon after it. The wrapper draws a border and radius
   of its own and paints a 2px focus bar through ::before that grows from the centre —
   close to the design's bar, but animated and a second frame. The box is the only frame
   here, so all of it is turned off and the control is left as the bare input.

   No modifier class: anything dropped inside .bz-field should look like it belongs there,
   and there is no case for wanting Syncfusion's own frame inside our box. app.css loads
   after fluent2.css, so equal-specificity rules below win on order. */

.bz-field .e-input-group,
.bz-field .e-input-group.e-control-wrapper,
.bz-field .e-input-group.e-input-focus,
.bz-field .e-input-group.e-control-wrapper.e-input-focus {
    width: 100%;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

    /* The focus bar and its mirror half. */
    .bz-field .e-input-group::before,
    .bz-field .e-input-group::after {
        display: none;
        content: none;
    }

    .bz-field .e-input-group .e-input,
    .bz-field .e-input-group input.e-input,
    .bz-field .e-input-group textarea.e-input {
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        /* Inherited, so a field keeps Poppins on the auth screens and the UI stack in-app. */
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        color: var(--bz-ink);
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    /* The chevron, the clear button and the spinner sit where the field's own trailing
       slot would, at the size the rest of the box uses. */
    .bz-field .e-input-group .e-input-group-icon,
    .bz-field .e-input-group .e-clear-icon {
        min-height: 0;
        margin: 0;
        padding: 0 0 0 8px;
        font-size: 13px;
        color: var(--bz-text-subtle);
        background: transparent;
        border: 0;
    }

        .bz-field .e-input-group .e-input-group-icon:hover {
            background: transparent;
            color: var(--bz-ink);
        }

/* Focused */
.bz-field:focus-within {
    border-color: var(--bz-field-border-focus);
    box-shadow: inset 0 -2px 0 var(--bz-violet);
}

    .bz-field:focus-within .bz-field-label {
        color: var(--bz-violet);
    }

/* Error — set by FormField from the EditContext, or forced with Invalid="true". */
.bz-field.is-invalid {
    border-color: var(--bz-field-border-error);
    box-shadow: inset 0 -2px 0 var(--bz-error);
}

    .bz-field.is-invalid .bz-field-label {
        color: var(--bz-error);
    }

/* Readonly — role-gated values. readonly, never disabled: a disabled input posts nothing. */
.bz-field.is-readonly {
    background: var(--bz-field-bg-readonly);
    cursor: default;
}

    .bz-field.is-readonly:focus-within {
        border-color: var(--bz-field-border);
        box-shadow: none;
    }

        .bz-field.is-readonly:focus-within .bz-field-label {
            color: var(--bz-text-subtle);
        }

    .bz-field.is-readonly .bz-field-control input,
    .bz-field.is-readonly .bz-field-control select,
    .bz-field.is-readonly .bz-field-control textarea {
        color: var(--bz-slate);
        cursor: default;
    }

/* A static form mid-submit: auth.js sets the inputs readonly, this makes them look it. */
.bz-form-busy .bz-field {
    background: var(--bz-field-bg-readonly);
    cursor: progress;
}

    .bz-form-busy .bz-field-control input {
        color: var(--bz-slate);
    }

.bz-form-busy .bz-field-action,
.bz-form-busy .bz-check,
.bz-form-busy .bz-link {
    pointer-events: none;
    color: var(--bz-text-subtle);
}

/* ---------------------------------------------------------------- checkbox
   A real checkbox restyled, so it posts like one on static pages and binds like one on
   interactive ones. */

.bz-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--bz-slate);
    cursor: pointer;
}

    .bz-check input[type="checkbox"] {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin: 1px 0 0;
        appearance: none;
        background: var(--bz-surface) center / 10px 10px no-repeat;
        border: 1px solid var(--bz-checkbox-border);
        border-radius: var(--bz-radius-xs);
        cursor: pointer;
        transition: background-color 0.1s ease, border-color 0.1s ease;
    }

        .bz-check input[type="checkbox"]:checked {
            background-color: var(--bz-violet);
            border-color: var(--bz-violet);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5'/%3E%3C/svg%3E");
        }

        .bz-check input[type="checkbox"]:focus-visible {
            outline: none;
            box-shadow: var(--bz-focus-ring);
        }

        .bz-check input[type="checkbox"]:disabled {
            background-color: var(--bz-divider);
            border-color: var(--bz-border);
            cursor: not-allowed;
        }

/* ---------------------------------------------------------------- banners
   Inline feedback on static pages, where a toast would arrive after the reload and be
   gone before anyone looked up. Sits above the form and survives the round trip. */

.bz-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid;
    border-radius: var(--bz-radius);
}

    .bz-banner .app-icon,
    .bz-banner .app-icon svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
    }

    .bz-banner .app-icon {
        margin-top: 2px;
    }

    .bz-banner a {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
    }

.bz-banner-error {
    color: var(--bz-error-strong);
    background: var(--bz-error-bg);
    border-color: var(--bz-error-border);
}

.bz-banner-success {
    color: var(--bz-success);
    background: var(--bz-success-bg);
    border-color: var(--bz-success-border);
}

.bz-banner-warning {
    color: var(--bz-warning);
    background: var(--bz-warning-bg);
    border-color: var(--bz-warning-border);
}

.bz-banner-info {
    color: var(--bz-info);
    background: var(--bz-info-bg);
    border-color: var(--bz-info-border);
}

/* ---------------------------------------------------------------- toasts
   Prefixed bz- because Bootstrap owns .toast and hides it with
   .toast:not(.show) { display: none } — which is why the old .toast never appeared.
   340px, top right below the bar, newest on top, six seconds or a click. */

.bz-toast-stack {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 340px;
    /* The stack spans a tall area but only the toasts are clickable. */
    pointer-events: none;
}

/* A white card. Severity is carried by the 3px left rail and the filled circle, and by
   nothing else — a tinted card says the same thing a third time, and once four of them
   are stacked the colour is the first thing read and the words the last. */
.bz-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px 13px 13px;
    box-sizing: border-box;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-left-width: 3px;
    border-radius: var(--bz-radius-lg);
    box-shadow: var(--bz-shadow-1);
    animation: bz-toast-in 0.2s ease;
}

@keyframes bz-toast-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bz-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: #FFFFFF;
    border-radius: 50%;
}

    .bz-toast-icon .app-icon,
    .bz-toast-icon .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

.bz-toast-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.bz-toast-title {
    font-family: var(--font-brand);
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-toast-content {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-slate);
    word-break: break-word;
}

.bz-toast-close {
    display: inline-flex;
    flex-shrink: 0;
    padding: 2px;
    color: var(--bz-text-muted);
    background: none;
    border: 0;
    border-radius: var(--bz-radius-xs);
    cursor: pointer;
}

    .bz-toast-close:hover {
        color: var(--bz-ink);
    }

    .bz-toast-close:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .bz-toast-close .app-icon,
    .bz-toast-close .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

/* Severity sets the rail and the circle. The card stays white — see .bz-toast. */
.bz-toast-success {
    border-left-color: var(--bz-success);
}

    .bz-toast-success .bz-toast-icon {
        background: var(--bz-success);
    }

.bz-toast-error {
    border-left-color: var(--bz-error);
}

    .bz-toast-error .bz-toast-icon {
        background: var(--bz-error);
    }

.bz-toast-warning {
    border-left-color: var(--bz-warning);
}

    .bz-toast-warning .bz-toast-icon {
        background: var(--bz-warning);
    }

.bz-toast-info {
    border-left-color: var(--bz-info);
}

    .bz-toast-info .bz-toast-icon {
        background: var(--bz-info);
    }

@media (max-width: 560px) {
    .bz-toast-stack {
        left: 16px;
        right: 16px;
        width: auto;
    }
}

/* ---------------------------------------------------------------- dialog
   Confirmation: 400px, title says what happens, the consequence above the buttons,
   Cancel then the action — which names itself, never "OK". */

.bz-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--bz-overlay);
}

.bz-dialog {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 400px;
    max-width: 100%;
    padding: 24px;
    box-sizing: border-box;
    background: var(--bz-surface);
    border-radius: var(--bz-radius-lg);
    box-shadow: var(--bz-shadow-3);
}

.bz-dialog-head {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-dialog-title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bz-ink);
}

.bz-dialog-message {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bz-slate);
}

.bz-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

/* ---------------------------------------------------------------- busy overlay
   Page-level wait for an action that blocks the whole page. */

.bz-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--bz-overlay-busy);
    color: var(--bz-violet);
}

.bz-busy-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bz-slate);
}

/* ================================================================ app shell */

.shell-topbar {
    display: flex;
    align-items: center;
    gap: var(--bizomate-spacing-md);
    height: 56px;
    padding: 0 var(--bizomate-spacing-md);
    background: #fff;
    border-bottom: 1px solid var(--bizomate-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.shell-mark {
    display: inline-flex;
    flex-shrink: 0;
}

    .shell-mark img {
        width: 26px;
        height: 26px;
        display: block;
    }

.shell-spacer {
    flex: 1;
}

.shell-loading {
    padding: var(--bizomate-spacing-lg);
    color: var(--bizomate-slate);
}

/* Native disclosure rather than a Blazor click handler: the same markup has to work on
   the settings pages, which render as static SSR and have no circuit. */
.shell-menu-wrap {
    position: relative;
}

    .shell-menu-wrap > summary {
        list-style: none;
        cursor: pointer;
    }

    /* Click anywhere outside to close. Only rendered while open, so it never blocks. */
    .shell-menu-wrap[open] > summary::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1040;
    }

/* The workspace chip. Measurements from boards/05-product/WorkflowsList.html: 40px tall,
   8px corners, a 26px mark. For anyone in more than one company it grows a second line —
   the company — and the mark takes that company's initial and colour, so switching
   company changes something you can see from across the room. */
.workspace-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 10px 0 6px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
    font-family: var(--font-ui);
    color: var(--bz-ink);
    max-width: 260px;
    box-sizing: border-box;
}

    .workspace-chip:hover {
        border-color: var(--bz-violet);
    }

    .workspace-chip:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

.workspace-chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--bz-radius-md);
    background: var(--panel-gradient);
    color: #FFFFFF;
    font-family: var(--font-brand);
    font-size: 12px;
    font-weight: 600;
}

.workspace-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.workspace-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-brand);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bz-ink);
}

.workspace-chip-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--bz-text-subtle);
}

.workspace-chip-caret {
    display: inline-flex;
    align-items: center;
}

    /* min-height matters as much as height: .app-icon sets an 18px floor, so overriding
       height alone leaves the 14px glyph sitting low in an 18px box. */
    .workspace-chip-caret .app-icon,
    .workspace-chip-caret .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        color: var(--bz-text-subtle);
    }

/* ---------------------------------------------------------------- the chip menu
   The current company with its plan and your role, its workspaces, then the others. */
.chip-menu {
    display: flex;
    flex-direction: column;
    width: 340px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.chip-menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 14px 10px;
    background: #FAFAFC;
    border-bottom: 1px solid var(--bz-divider);
}

.chip-menu-eyebrow {
    font-family: var(--font-brand);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bz-text-subtle);
}

    .chip-menu-eyebrow.is-inset {
        padding: 4px 10px 6px;
    }

.chip-menu-company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.chip-menu-company-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--bz-ink);
}

.chip-menu-plan {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 22px;
    padding: 0 9px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--bz-violet);
    background: #F3EEFF;
    border: 1px solid #DDD0FA;
    border-radius: 11px;
}

.chip-menu-sub,
.chip-menu-meta {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

.chip-menu-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

    .chip-menu-section + .chip-menu-section {
        border-top: 1px solid var(--bz-divider);
    }

.chip-menu-form {
    margin: 0;
}

/* A row is a button (switch), a link (start a company) or, for where you already are, a
   plain box — one style for all three, so the current workspace does not look like a
   different kind of thing from the ones beside it. */
.chip-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    color: var(--bz-ink);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--bz-radius);
    font: inherit;
    cursor: pointer;
}

    .chip-menu-row:hover {
        background: var(--bz-field-hover);
    }

    .chip-menu-row:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .chip-menu-row.is-current {
        background: #F8F5FF;
        cursor: default;
    }

.chip-menu-icon,
.chip-menu-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--bz-radius-md);
}

.chip-menu-icon {
    background: var(--bz-bg-notice);
    color: var(--bz-text-subtle);
}

    .chip-menu-icon .app-icon,
    .chip-menu-icon .app-icon svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
    }

    .chip-menu-icon.is-dashed {
        background: none;
        border: 1.5px dashed #CFCBDD;
        font-size: 14px;
        font-weight: 600;
        color: var(--bz-violet);
    }

.chip-menu-mark {
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 600;
    color: #FFFFFF;
}

.chip-menu-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.chip-menu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bz-ink);
}

    .chip-menu-row.is-current .chip-menu-name {
        font-weight: 600;
    }

    .chip-menu-row.is-action .chip-menu-name {
        font-weight: 600;
        color: var(--bz-violet);
    }

.chip-menu-trail {
    display: flex;
    flex-shrink: 0;
    color: var(--bz-text-subtle);
}

    .chip-menu-trail .app-icon,
    .chip-menu-trail .app-icon svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
    }

    .chip-menu-trail.is-check {
        color: var(--bz-violet);
    }

.chip-menu-note {
    padding: 2px 10px 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

.chip-menu-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-top: 1px solid var(--bz-divider);
    font-size: 12.5px;
    font-weight: 500;
}

/* "All workspaces" never wraps; the other link, which carries a company's full name,
   is the one that gives way. */
.chip-menu-foot > :first-child {
    flex-shrink: 0;
    white-space: nowrap;
}

.chip-menu-foot-new {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-nav {
    display: flex;
    align-items: center;
    gap: var(--bizomate-spacing-xs);
}

.shell-nav-link {
    padding: 8px 12px;
    border-radius: var(--bizomate-radius-sm);
    font-size: 15px;
    color: var(--bizomate-slate);
    text-decoration: none;
    white-space: nowrap;
}

    .shell-nav-link:hover {
        background: var(--bizomate-bg-subtle);
        color: var(--bizomate-ink);
    }

    .shell-nav-link.active {
        color: var(--brand-start);
        font-weight: 500;
    }

.avatar-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--panel-gradient);
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Photo fills the circle; initials keep the gradient. */
.avatar-btn-image {
    background: none;
    padding: 0;
    overflow: hidden;
}

.avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shell-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    box-shadow: var(--bizomate-shadow-hover);
    padding: var(--bizomate-spacing-xs);
    z-index: 1100;
}

.shell-menu-right {
    left: auto;
    right: 0;
}

.shell-menu-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--bizomate-border-light);
    margin-bottom: var(--bizomate-spacing-xs);
}

.shell-menu-name {
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 14px;
    color: var(--bizomate-ink);
}

.shell-menu-email {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    word-break: break-all;
}

.shell-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    background: none;
    border-radius: var(--bizomate-radius-sm);
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--bizomate-ink);
    text-decoration: none;
    cursor: pointer;
}

    .shell-menu-item:hover {
        background: var(--bizomate-bg-subtle);
    }

.shell-menu-signout {
    color: var(--bizomate-danger);
}

.shell-menu-form {
    margin: 0;
}

.shell-menu-divider {
    height: 1px;
    background: var(--bizomate-border-light);
    margin: var(--bizomate-spacing-xs) 0;
}

.shell-main {
    padding: var(--bizomate-spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* ================================================================ auth screens
   Split screen: 560px gradient panel of 1440, form on the right. The panel stays put and
   the form column scrolls, because Register is taller than the viewport. */

.auth-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-brand);
    background: var(--bz-surface);
}

.auth-brand-panel {
    flex: 0 0 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 24px;
    box-sizing: border-box;
    background: var(--bz-gradient-panel);
}

.auth-brand-stacked {
    width: 280px;
    max-width: 100%;
    height: auto;
}

.auth-brand-mobile {
    display: none;
    text-align: center;
}

    .auth-brand-mobile img {
        height: 42px;
        width: auto;
    }

.auth-brand-tagline {
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 400;
    font-size: 16px;
    margin: var(--bizomate-spacing-sm) 0 0;
}

.auth-form-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    /* Start at the top, not centred. Centring overflowing content pushes its head above
       the scroll origin, making the first field unreachable on the longer forms. */
    align-items: flex-start;
    padding: 24px;
    background: var(--bz-surface);
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
}

.auth-form-inner {
    width: 100%;
    max-width: 376px;
    /* Centres when it fits, top-aligns when it does not. */
    margin: auto 0;
    padding: 24px 0;
}

/* The layout owns this box, so a page widens it by marking its own content: Register
   and the other long forms are 400px in the design, the authenticator setup 460px. */
.auth-form-inner:has(> .bz-auth-stack.is-wide) {
    max-width: 400px;
}

.auth-form-inner:has(> .bz-auth-stack.is-setup) {
    max-width: 460px;
}

.auth-title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--bz-ink);
    margin: 0 0 7px;
}

.auth-subtitle {
    font-family: var(--font-brand);
    color: var(--bz-slate);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 var(--bizomate-spacing-lg);
}

/* ---------------------------------------------------------------- rebuilt auth pages
   Layout for pages on the new design. The .auth-field / .auth-input family further down
   serves pages not yet rebuilt. */

.bz-auth-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.bz-auth-head .auth-title,
.bz-auth-head .auth-subtitle {
    margin: 0;
}

.bz-auth-head {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    /* The primary action sits a little further from the fields than they sit from
       each other — 22px, matching the stack around it. */
    .bz-form-stack > .bz-btn:last-child {
        margin-top: 8px;
    }

.bz-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .bz-auth-row .bz-link {
        font-size: 13.5px;
    }

.bz-auth-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 13.5px;
    color: var(--bz-slate);
}

/* Register and the other long forms pack their fields a little tighter. */
.bz-form-stack.is-dense {
    gap: 12px;
}

.bz-smallprint {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--bz-text-subtle);
}

    .bz-smallprint .bz-link {
        font-size: inherit;
    }

/* The Turnstile widget draws itself in an iframe; flexible size lets it take the form's
   width instead of its fixed 300px. */
/* The human check — waiting, passed, failed, unavailable.

   Its own bordered box at the full width of the form column, not a field: no floating
   label, no red border, no asterisk. Nothing here is the person's answer, so nothing here
   is marked the way a wrong answer is. Cloudflare's 300×65 widget sits inside and cannot
   be restyled; the label above it and the message below it are ours. */

.bz-human-check {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius);
}

    /* Sized and coloured like every other field label, because that is what it reads as
       even though the thing below it is not a field. */
    .bz-human-check-label {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: .01em;
        color: var(--bz-text-subtle);
    }

    /* The widget's own footprint, held whether or not it renders. In the unavailable state
       nothing arrives, and the gap under the label is the plainest way of saying so. */
    .bz-human-check .cf-turnstile {
        min-height: 65px;
    }

/* One line, always present. Only its text and colour change, so a callback firing a second
   after the page settles moves nothing under it. min-height rather than a fixed height:
   the unavailable sentence runs to three lines and must not be clipped. */
.bz-human-check-message {
    margin: 0;
    min-height: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

    .bz-human-check-message > span {
        display: flex;
        align-items: flex-start;
        gap: 7px;
    }

    /* display:flex outranks the [hidden] attribute, which is how the select panel once
       stayed on screen with the list closed. The three states that are not current have to
       be told again. */
    .bz-human-check-message > span[hidden],
    .bz-human-check-note > span[hidden] {
        display: none;
    }

    .bz-human-check-message.is-error {
        color: var(--bz-error);
    }

    .bz-human-check-message [data-state="passed"] {
        color: var(--bz-success);
    }

    .bz-human-check-message [data-state="failed"] {
        color: var(--bz-error);
    }

    /* Amber, not red: the page failed to load something, which is not an error the person
       made and not one they can answer for. */
    .bz-human-check-message [data-state="unavailable"] {
        color: var(--bz-warning);
    }

/* Two classes deep on purpose. .app-icon sizes itself to 18px further down this file, at
   the same specificity, so a single-class rule here loses: the glyph drew at 18px and sat
   a pixel below the words beside it. */
.bz-human-check .bz-human-check-icon {
    width: 14px;
    min-width: 14px;
    /* Tall as one line of the message, not as the glyph. .app-icon centres what it holds,
       so a 14px mark in an 18px box lands on the middle of the first line — which is where
       it belongs whether the message runs to one line or three. A margin cannot do this:
       it is right for one of those and wrong for the other. */
    height: 18px;
    min-height: 18px;
}

    .bz-human-check .bz-human-check-icon svg {
        width: 14px;
        height: 14px;
    }

/* An empty note still takes its parent's gap. On the gradient the passed state has no
   line to show, so the element goes rather than leaving 7px of nothing under the button. */
.bz-human-check-note:not(:has(> span:not([hidden]))) {
    display: none;
}

/* Under the button, saying what is missing — so the grey fill is never a puzzle. */
.bz-human-check-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

/* ---------------------------------------------------------------- on the gradient
   Coming soon is the one page carrying this check with no card under it. A white box in
   the middle of a full-bleed brand page reads as something pasted on, so it wears the same
   glass as the countdown tiles and the email field beside it, and Cloudflare's widget
   takes their dark theme rather than punching a light hole in the page.

   The brand green, red and amber all fail contrast on violet, so none of them appear here.
   These tints were picked against the ramp rather than by eye: the form sits about 72%
   along violet to teal, and each one clears 4.5:1 at both ends, not only in the middle. */

.bz-human-check.is-glass {
    /* The column around it centres its children, which would otherwise shrink this box to
       the width of its own longest line and leave it narrower than the field above and the
       button below. */
    align-self: stretch;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    border-radius: var(--bz-radius-lg);
}

    /* The same token as the message below it. The board drew this label at 80%, which is
       4.04:1 at the teal end — the same shortfall as the lines around it, and the reason
       all of them now come from one place. */
    .bz-human-check.is-glass .bz-human-check-label {
        color: var(--bz-on-gradient-quiet);
    }

    /* Centred, because the page has no form column to align to. */
    .bz-human-check.is-glass .bz-human-check-message > span,
    .bz-human-check-note.is-glass {
        justify-content: center;
        text-align: center;
    }

    .bz-human-check.is-glass .bz-human-check-message,
    .bz-human-check-note.is-glass {
        color: var(--bz-on-gradient-quiet);
    }

    /* Knocked through the other way round: on a card the mark is a coloured disc with a
       white glyph, and here it is a pale disc with the glyph in ink dark enough to read
       against it. Both come from --bz-knockout, which the icons fall back to white for. */
    .bz-human-check.is-glass .bz-human-check-message [data-state="passed"] {
        color: #D6FBE3;
        --bz-knockout: #14532D;
    }

    .bz-human-check.is-glass .bz-human-check-message [data-state="failed"],
    .bz-human-check.is-glass .bz-human-check-message.is-error {
        color: #FFE8E8;
        --bz-knockout: #7F1D1D;
    }

    .bz-human-check.is-glass .bz-human-check-message [data-state="unavailable"] {
        color: #FFEDD0;
    }

    /* Nothing drew, so the space says so rather than sitting empty: on a card the gap
       under the label is legible on its own, on a hero it just looks unfinished.
       Keyed to the state the script sets, not to :empty — the box is empty for the first
       second of every visit too, and a dashed outline flashing up before the widget
       arrives would announce a failure that has not happened. */
    .bz-human-check.is-glass[data-human-check-state="unavailable"] .cf-turnstile {
        width: 300px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px dashed rgba(255, 255, 255, 0.38);
        border-radius: var(--bz-radius);
    }

/* ---------------------------------------------------------------- card screens
   The narrow auth screens — confirm email, resend, forgot password, expired link: the
   horizontal lockup above one 440px card on the Mist page. Rendered by AuthCardLayout. */

.bz-card-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    min-height: 100vh;
    padding: 32px 16px;
    box-sizing: border-box;
    font-family: var(--font-brand);
    background: var(--bz-field-bg-readonly);
}

.bz-card-mark {
    display: block;
    width: 168px;
    height: auto;
}

.bz-card {
    width: 440px;
    max-width: 100%;
    padding: 36px 36px 32px;
    box-sizing: border-box;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.bz-card-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bz-card-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bz-card-heading {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-card-title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bz-ink);
}

.bz-card-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--bz-slate);
    overflow-wrap: anywhere;
}

.bz-card-smallprint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bz-text-subtle);
}

    .bz-card-smallprint .bz-link {
        font-size: inherit;
    }

/* The tinted square above a card's title. Its colour says what kind of news this is. */
.bz-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
}

    .bz-badge .app-icon,
    .bz-badge .app-icon svg {
        width: 23px;
        height: 23px;
        min-width: 23px;
        min-height: 23px;
    }

.bz-badge-violet {
    color: var(--bz-violet);
    background: #F3EEFE;
}

.bz-badge-success {
    color: var(--bz-success);
    background: #F0FAF3;
}

.bz-badge-warning {
    color: var(--bz-warning);
    background: var(--bz-warning-bg);
}

.bz-badge-error {
    color: var(--bz-error);
    background: var(--bz-error-bg);
}

/* The alternatives under a card's form: "Use a recovery code", "Lost access to
   everything?". A column rather than a row — they are separate routes out, not a pair,
   and side by side the longer one wraps at the card's width. The rule above them
   separates "the thing you came here to do" from "what to do when you cannot". */
.bz-card-divider {
    height: 1px;
    background: var(--bz-field-border);
}

.bz-card-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
}

.bz-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 13.5px;
}

    .bz-back .app-icon,
    .bz-back .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

/* ---------------------------------------------------------------- select in a field
   A native select, so it posts on static pages. The chevron is drawn beside it and lets
   clicks through to the select underneath.

   Everything down to the panel applies with JavaScript off, which is the point: the
   closed box is the same box, so nothing looks different until it opens. */

.bz-field-select .bz-field-control select {
    cursor: pointer;
    padding-right: 22px;
    margin-right: -22px;
}

/* The native control sizes itself to its longest option, which drags the whole field
   wider than the column. This pins it; the panel below is pinned the same way. */
.bz-field-select .bz-field-control select,
.bz-field-select .bz-select-button {
    width: 100%;
    min-width: 0;
}

/* Nothing chosen yet. The placeholder option carries value="" so `required` rejects it. */
.bz-field-select .bz-field-control select:has(option[value=""]:checked),
.bz-field-select .bz-select-button.is-placeholder {
    color: var(--bz-text-subtle);
}

.bz-field-select .bz-field-trailing {
    pointer-events: none;
    /* Subtle, not an action: the chevron states that this opens, it is not a link. */
    color: var(--bz-text-subtle);
}

    .bz-field-select .bz-field-trailing .app-icon,
    .bz-field-select .bz-field-trailing .app-icon svg {
        width: 15px;
        height: 15px;
        min-width: 15px;
        min-height: 15px;
        transition: transform 0.15s ease, color 0.15s ease;
    }

/* Open: the chevron points back at the panel it opened. */
.bz-select.is-open .bz-field-trailing {
    color: var(--bz-violet);
}

    .bz-select.is-open .bz-field-trailing .app-icon svg {
        transform: rotate(180deg);
    }

/* ---------------------------------------------------------------- the enhanced select
   select.js replaces the native control with a button and a panel. The <select> itself
   stays in the form — hidden from view but not display:none, because a display:none
   control is still posted but can never be focused, and the label must land somewhere.
   Every choice writes back to it. The form posts the <select>, never this. */

.bz-select {
    position: relative;
}

/* Visually hidden, still in the form, still posted. select.js also takes it out of the
   tab order and the accessibility tree, so the button is the only thing anyone reaches.
   Not `display: none`: a control the browser cannot lay out cannot be focused either, and
   a page that ever needs to move focus to it — to report a problem with this field —
   would fail silently. */
.bz-select.is-enhanced .bz-field-control select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bz-select-button {
    display: block;
    padding: 0;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bz-ink);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    /* The box around it carries the focus ring, so this must not paint a second one. */
    outline: none;
    /* Truncates rather than widening the field — the whole reason this exists. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bz-select-panel {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    max-height: 280px;
    padding: 4px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-md);
    box-shadow: 0 12px 30px rgba(20, 21, 28, .14), 0 2px 6px rgba(20, 21, 28, .06);
    box-sizing: border-box;
}

    /* `display: flex` above outranks the browser's own `[hidden] { display: none }`, so
       without this the panel sits open under every enhanced field on the page. */
    .bz-select-panel[hidden] {
        display: none;
    }

/* No room below. Set by select.js, which measures rather than guesses. */
.bz-select-panel.is-above {
    top: auto;
    bottom: calc(100% + 4px);
}

.bz-select-list {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

    .bz-select-list::-webkit-scrollbar {
        width: 4px;
    }

    .bz-select-list::-webkit-scrollbar-thumb {
        background: var(--bz-scroll-thumb);
        border-radius: 2px;
    }

/* Firefox has no ::-webkit-scrollbar and scrollbar-width is its only lever. Kept behind
   @supports because Chromium honours scrollbar-width too, and it outranks the 4px above —
   setting it unconditionally gives every browser the default-width bar instead. */
@supports (-moz-appearance: none) {
    .bz-select-list {
        scrollbar-width: thin;
        scrollbar-color: var(--bz-scroll-thumb) transparent;
    }
}

.bz-select-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 7px;
    border-radius: var(--bz-radius-xs);
    font-size: 14px;
    color: var(--bz-ink);
    cursor: pointer;
}

    /* Its own class, not `> span`: the tick is a span too, and matching both would give
       the tick flex-grow as well — the two would then share the row and the tick would
       float in the middle instead of sitting at the right edge.

       With the panel's 4px padding this also lines the option text up with the field text
       above it, so the list reads as the field opening rather than a menu appearing. */
    .bz-select-item-text {
        flex-grow: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* The slot is held on every row, ticked or not, so the text does not shift sideways
       as the selection moves down the list. */
    .bz-select-item-tick {
        width: 15px;
        flex-shrink: 0;
    }

    .bz-select-item .app-icon,
    .bz-select-item .app-icon svg {
        width: 15px;
        height: 15px;
        min-width: 15px;
        min-height: 15px;
        flex-shrink: 0;
        color: var(--bz-violet);
    }

/* Pointer only. Never moves with the keyboard, so the two can never be confused. */
.bz-select-item:hover {
    background: var(--bz-field-hover);
}

/* The active option. The fill alone would look like hover, so it also carries a ring. */
.bz-select-item.is-active {
    background: var(--bz-field-hover);
    box-shadow: inset 0 0 0 2px var(--bz-violet);
}

/* Keeps its tick when it is also the active one — selection never depends on colour. */
.bz-select-item.is-selected {
    font-weight: 500;
    color: var(--bz-violet);
}

/* Authored as the field's helper text and moved in here by select.js. Not an option:
   no hover, no focus, not reachable with the arrows, not counted by type-ahead. */
.bz-select-note {
    margin: 0;
    padding: 8px 7px 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
    cursor: default;
}

    /* Edge to edge, so the note reads as closing the list rather than sitting in it. */
    .bz-select-note::before {
        content: "";
        display: block;
        height: 1px;
        margin: -4px -11px 8px;
        background: var(--bz-field-border);
    }

/* ---------------------------------------------------------------- plan note
   Which plan a new company starts on, and why. Stated before the button rather than
   discovered afterwards: being quietly put on a smaller plan is the kind of thing people
   only find out when something stops working. */

.bz-plan-note {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bz-violet-tint-soft);
    border: 1px solid var(--bz-violet-tint-border);
    border-radius: var(--bz-radius-md);
}

    .bz-plan-note .app-icon,
    .bz-plan-note .app-icon svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        flex-shrink: 0;
        color: var(--bz-violet);
    }

.bz-plan-note-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .bz-plan-note-text strong {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--bz-ink);
    }

    .bz-plan-note-text span {
        font-size: 12px;
        line-height: 1.55;
        color: var(--bz-slate);
    }

/* ---------------------------------------------------------------- password rules
   A live checklist, not an error after submitting. auth.js ticks each rule as the
   password meets it; without script they stay neutral and the server still checks. */

.bz-rules {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 2px 0 0;
    list-style: none;
}

.bz-rule {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--bz-text-subtle);
    transition: color 0.15s ease;
}

    .bz-rule::before {
        content: "";
        flex-shrink: 0;
        width: 13px;
        height: 13px;
        box-sizing: border-box;
        border: 1.5px solid var(--bz-field-border-focus);
        border-radius: 50%;
        background: center / 9px 9px no-repeat;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .bz-rule.is-met {
        color: var(--bz-success);
    }

        .bz-rule.is-met::before {
            border-color: var(--bz-success);
            background-color: var(--bz-success);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 6.2 5 8.3l4.2-4.6'/%3E%3C/svg%3E");
        }

.bz-password-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------------------------------------------------------------- setup steps
   Scan · Verify · Save codes. Done steps fill violet with a tick, the current one fills
   violet with its number, later ones are outlined. */

.bz-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bz-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--bz-text-subtle);
}

.bz-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-text-subtle);
    border: 1.5px solid #CFCBDD;
    border-radius: 50%;
}

    .bz-step-num .app-icon,
    .bz-step-num .app-icon svg {
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
    }

.bz-step.is-current,
.bz-step.is-done {
    font-weight: 600;
    color: var(--bz-ink);
}

    .bz-step.is-current .bz-step-num,
    .bz-step.is-done .bz-step-num {
        font-weight: 600;
        color: #FFFFFF;
        background: var(--bz-violet);
        border-color: var(--bz-violet);
    }

.bz-step-line {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    background: var(--bz-field-border);
    border-radius: 1px;
}

    .bz-step-line.is-done {
        background: var(--bz-violet);
    }

/* The authenticator screens run a slightly larger title than sign in. */
.bz-auth-stack.is-setup .auth-title {
    font-size: 24px;
}

/* ---------------------------------------------------------------- scan */

.bz-scan {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.bz-scan-qr {
    display: flex;
    flex-shrink: 0;
    padding: 10px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-md);
}

    .bz-scan-qr img {
        display: block;
        width: 148px;
        height: 148px;
        image-rendering: pixelated;
    }

.bz-scan-steps {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 4px 0 0;
    list-style: none;
    counter-reset: bz-scan;
}

    .bz-scan-steps li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 13px;
        line-height: 1.55;
        color: var(--bz-slate);
        counter-increment: bz-scan;
    }

        .bz-scan-steps li::before {
            content: counter(bz-scan);
            flex-shrink: 0;
            width: 12px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.7;
            color: var(--bz-violet);
        }

/* The fallback key, set in mono and grouped in fours so it can be read aloud. */
.bz-key {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bz-key-label {
    font-size: 12px;
    color: var(--bz-text-subtle);
}

.bz-key-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--bz-field-bg-readonly);
    border-radius: var(--bz-radius);
}

    .bz-key-box code {
        font-family: var(--font-mono);
        font-size: 13px;
        letter-spacing: 0.8px;
        color: var(--bz-ink);
        overflow-wrap: anywhere;
    }

.bz-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

    .bz-copy .app-icon,
    .bz-copy .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

/* A rule with a word in it, between two ways of doing the same thing. Used on sign in
   between the password form and the passkey button, which are alternatives rather than a
   sequence — a plain gap would read as "and then". */
.bz-or {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--bz-text-subtle);
}

    .bz-or::before,
    .bz-or::after {
        content: "";
        flex-grow: 1;
        height: 1px;
        background: var(--bz-field-border);
    }

/* ---------------------------------------------------------------- method choice
   Two cards on the first step of two-factor setup: a passkey or an authenticator app.
   Radios rather than buttons, because the choice is reviewable before it is taken — and
   the recommendation only means anything if the other option is visibly still there. */

.bz-method-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bz-method {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .bz-method:hover {
        background: var(--bz-field-hover);
    }

    .bz-method.is-chosen {
        border-color: var(--bz-field-border-focus);
        box-shadow: inset 0 0 0 1px var(--bz-field-border-focus);
    }

    .bz-method input[type="radio"] {
        margin: 2px 0 0;
        accent-color: var(--bz-violet);
    }

.bz-method-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bz-method-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bz-ink);
}

.bz-method-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

.bz-pill {
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--bz-violet);
    background: var(--bz-violet-tint);
    border-radius: var(--bz-radius-pill);
}

/* ---------------------------------------------------------------- waiting on a device
   The passkey step, while the browser's own prompt is up. Whatever is behind that prompt
   is barely seen, but it is what remains if somebody dismisses it — so it says what is
   being waited for rather than sitting blank. */

.bz-wait {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    background: var(--bz-field-bg-readonly);
    border-radius: var(--bz-radius);
}

.bz-wait-title {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bz-ink);
}

.bz-passkey-unsupported {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Present for the form and for anyone reading the page with a screen reader, absent from
   the layout: the ceremony is started by script, not by pressing this. */
.bz-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- six-box code
   Six single-digit inputs that auth.js keeps in step with one hidden field. The focused
   box takes the field's focus bar; a rejected code turns them all red. */

.bz-otp {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-otp-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-ink);
}

.bz-otp-row {
    display: flex;
    gap: 8px;
}

.bz-otp-box {
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0 0 2px;
    box-sizing: border-box;
    font-family: var(--font-brand);
    font-size: 21px;
    font-weight: 500;
    text-align: center;
    color: var(--bz-ink);
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius);
    outline: none;
    caret-color: var(--bz-violet);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .bz-otp-box:focus {
        border-color: var(--bz-field-border-focus);
        box-shadow: inset 0 -2px 0 var(--bz-violet);
    }

.bz-otp.is-invalid .bz-otp-label {
    color: var(--bz-error);
}

.bz-otp.is-invalid .bz-otp-box {
    border-color: var(--bz-field-border-error);
    box-shadow: inset 0 -2px 0 var(--bz-error);
}

.bz-otp-message,
.bz-otp .validation-message {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-error);
}

/* A code that failed validation before reaching the server — empty, or too short. */
.bz-otp:has(.validation-message) .bz-otp-label {
    color: var(--bz-error);
}

.bz-otp:has(.validation-message) .bz-otp-box {
    border-color: var(--bz-field-border-error);
}

.bz-form-busy .bz-otp-box {
    background: var(--bz-field-bg-readonly);
    color: var(--bz-slate);
}

/* "Signed in as … Sign out" under the setup screens. */
.bz-signed-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12.5px;
    color: var(--bz-text-subtle);
}

    .bz-signed-in form {
        display: inline;
        margin: 0;
    }

.bz-link-button {
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--bz-violet);
    background: none;
    border: 0;
    cursor: pointer;
}

    .bz-link-button:hover {
        color: var(--bz-violet-hover);
        text-decoration: underline;
    }

    .bz-link-button:focus-visible {
        outline: none;
        border-radius: 2px;
        box-shadow: var(--bz-focus-ring);
    }

/* ---------------------------------------------------------------- recovery codes */

.bz-codes {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    column-gap: 36px;
    row-gap: 11px;
    margin: 0;
    padding: 18px 20px;
    list-style: none;
    background: var(--bz-field-bg-readonly);
    border-radius: var(--bz-radius-md);
    counter-reset: bz-code;
}

    .bz-codes li {
        display: flex;
        align-items: center;
        gap: 12px;
        counter-increment: bz-code;
    }

        .bz-codes li::before {
            content: counter(bz-code);
            width: 18px;
            font-size: 11.5px;
            text-align: right;
            color: var(--bz-text-subtle);
            font-variant-numeric: tabular-nums;
        }

    .bz-codes code {
        font-family: var(--font-mono);
        font-size: 15px;
        letter-spacing: 0.8px;
        color: var(--bz-ink);
    }

.bz-button-pair {
    display: flex;
    gap: 10px;
}

    .bz-button-pair > .bz-btn {
        flex: 1 1 0;
    }

.bz-action-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The warning banner's text runs a shade darker than the badge amber, for contrast on
   the tint. */
.bz-banner-warning {
    color: #92400E;
}

    .bz-banner-warning .app-icon {
        color: var(--bz-warning);
    }

/* ---------------------------------------------------------------- create workspace */

.bz-status-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-success);
}

    .bz-status-line .app-icon,
    .bz-status-line .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

.bz-subsection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bz-subsection-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-ink);
}

@media (max-width: 560px) {
    .bz-scan {
        flex-direction: column;
    }

    .bz-otp-row {
        gap: 6px;
    }

    .bz-otp-box {
        width: 44px;
        height: 48px;
    }
}

/* Secondary buttons on the auth screens take the field-scale border. */
.auth-shell .bz-btn-secondary,
.bz-card-shell .bz-btn-secondary {
    border-color: var(--bz-field-border);
}

/* ---------------------------------------------------------------- pre-redesign auth
   Used by auth pages not yet rebuilt. Removed once the last of them is. */

.auth-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--bizomate-spacing-md);
}

    .auth-badge .app-icon {
        width: 22px;
        height: 22px;
    }

.auth-badge-secure {
    background: #F3EEFF;
    color: var(--brand-start);
}

.auth-badge-paused {
    background: var(--bizomate-warning-bg);
    color: var(--bizomate-warning);
}

.auth-field {
    margin-bottom: var(--bizomate-spacing-md);
}

.auth-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--bizomate-ink);
    margin-bottom: 6px;
}

.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    font-size: 16px;
    font-family: var(--font-ui);
    color: var(--bizomate-ink);
    background: #fff;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .auth-input::placeholder {
        color: var(--bizomate-text-subtle);
    }

    .auth-input:focus {
        outline: none;
        border-color: var(--brand-start);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    }

    .auth-input.input-invalid,
    .auth-input.invalid {
        border-color: var(--bizomate-danger);
    }

    .auth-input:disabled {
        background: var(--bizomate-bg-subtle);
        color: var(--bizomate-text-subtle);
    }

    /* readonly rather than disabled, because a disabled input posts no value. It still
       submits, but has to look inert. */
    .auth-input[readonly] {
        background: var(--bizomate-bg-subtle);
        color: var(--bizomate-slate);
        cursor: default;
    }

.auth-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

    .auth-input-group .auth-input {
        padding-right: 64px;
    }

.auth-show-btn {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-start);
    cursor: pointer;
}

.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--bizomate-spacing-md);
    margin-bottom: var(--bizomate-spacing-md);
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: var(--bizomate-spacing-sm);
    font-size: 15px;
    color: var(--bizomate-ink);
    cursor: pointer;
}

    .auth-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        flex-shrink: 0;
        /* Aligns the box with the first line of a label that wraps, rather than with the
           block as a whole. */
        margin: 3px 0 0;
        accent-color: var(--brand-start);
        cursor: pointer;
    }

    .auth-check span {
        line-height: 1.5;
    }

.auth-link {
    color: var(--brand-start);
    font-size: 15px;
    text-decoration: none;
}

    .auth-link:hover {
        text-decoration: underline;
    }

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bizomate-spacing-sm);
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    background: var(--panel-gradient);
    border: none;
    border-radius: var(--bizomate-radius);
    cursor: pointer;
    text-decoration: none;
}

    .auth-submit:disabled {
        opacity: 0.85;
        cursor: default;
    }

.auth-submit-secondary {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 16px;
    color: var(--bizomate-text-subtle);
    background: var(--bizomate-bg-subtle);
    border: none;
    border-radius: var(--bizomate-radius);
    margin-top: var(--bizomate-spacing-sm);
    cursor: not-allowed;
}

.auth-spinner {
    /* Legacy name for .bz-spinner, still emitted by pages not yet rebuilt. */
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bz-spin 0.7s linear infinite;
}

.auth-footer {
    margin-top: var(--bizomate-spacing-lg);
    font-size: 15px;
    color: var(--bizomate-slate);
    text-align: center;
}

    .auth-footer .auth-link {
        font-weight: 500;
        margin-left: 4px;
    }

.auth-alert {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-radius: var(--bizomate-radius);
    background: var(--bizomate-danger-bg);
    color: var(--bizomate-danger);
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: var(--bizomate-spacing-md);
}

    .auth-alert .app-icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin-top: 1px;
    }

.auth-alert-ok {
    background: var(--bizomate-success-bg);
    color: var(--bizomate-success);
}

.auth-help {
    font-size: 14px;
    color: var(--bizomate-slate);
    margin: var(--bizomate-spacing-sm) 0 var(--bizomate-spacing-lg);
}

.auth-smallprint {
    font-size: 14px;
    line-height: 1.5;
    color: var(--bizomate-slate);
    margin-top: var(--bizomate-spacing-md);
}

.auth-link-row {
    display: flex;
    align-items: center;
    gap: var(--bizomate-spacing-md);
    margin-top: var(--bizomate-spacing-lg);
}

.auth-link-divider {
    color: var(--bizomate-border);
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--bizomate-spacing-lg);
    color: var(--brand-start);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
}

    .auth-back .app-icon {
        width: 16px;
        height: 16px;
    }

.auth-form-busy .auth-input,
.auth-form-busy .auth-check {
    background: var(--bizomate-bg-subtle);
    color: var(--bizomate-text-subtle);
    pointer-events: none;
}

    .auth-form-busy .auth-input::placeholder {
        color: var(--bizomate-text-subtle);
    }

    .auth-form-busy .auth-check input[type="checkbox"] {
        filter: grayscale(1);
        opacity: 0.5;
    }

.auth-form-busy .auth-show-btn,
.auth-form-busy .auth-link {
    color: var(--bizomate-text-subtle);
    pointer-events: none;
}

.auth-resend-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 15px;
    color: var(--brand-start);
    cursor: pointer;
}

.auth-secondary-btn {
    padding: 10px 14px;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 14px;
    color: var(--bizomate-ink);
    background: #fff;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    cursor: pointer;
}

    .auth-secondary-btn:hover {
        border-color: var(--brand-start);
        color: var(--brand-start);
    }

/* Six-box code entry */

.otp-row {
    display: flex;
    gap: 10px;
    margin-bottom: var(--bizomate-spacing-sm);
}

.otp-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 56px;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-brand);
    font-size: 24px;
    font-weight: 500;
    color: var(--bizomate-ink);
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    background: #fff;
}

    .otp-box.filled {
        border-color: var(--brand-start);
    }

    .otp-box:focus {
        outline: none;
        border-color: var(--brand-start);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    }

/* Authenticator enrolment */

.setup-steps {
    display: flex;
    align-items: center;
    gap: var(--bizomate-spacing-md);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bizomate-spacing-lg);
    font-size: 14px;
    color: var(--bizomate-text-subtle);
}

    .setup-steps li {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.setup-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bizomate-border);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.setup-steps li.current,
.setup-steps li.done {
    color: var(--bizomate-ink);
}

    .setup-steps li.current .setup-step-num,
    .setup-steps li.done .setup-step-num {
        background: var(--brand-start);
    }

.setup-scan {
    display: flex;
    gap: var(--bizomate-spacing-md);
    align-items: flex-start;
    margin-bottom: var(--bizomate-spacing-lg);
}

.setup-qr {
    border-radius: var(--bizomate-radius-sm);
    flex-shrink: 0;
}

/* min-width:0 because a flex child defaults to min-width:auto and would refuse to
   shrink below the monospace key's width. */
.setup-key-block {
    flex: 1;
    min-width: 0;
}

.setup-key-label {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    margin: 0 0 6px;
}

/* Stacked rather than side by side: the key wraps to three lines in this column width,
   and space-between then throws the button to the far edge of the panel. */
.setup-key {
    display: block;
    background: var(--bizomate-bg-subtle);
    border-radius: var(--bizomate-radius-sm);
    padding: 10px 12px;
}

    .setup-key code {
        display: block;
        font-family: var(--font-mono);
        font-size: 14px;
        line-height: 1.6;
        letter-spacing: 0.06em;
        color: var(--bizomate-ink);
        word-break: break-all;
    }

    .setup-key .auth-show-btn {
        position: static;
        display: inline-block;
        margin-top: 6px;
        padding: 0;
    }

.recovery-card {
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    padding: var(--bizomate-spacing-md);
    margin-bottom: var(--bizomate-spacing-md);
}

.recovery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px var(--bizomate-spacing-md);
    margin: 0 0 var(--bizomate-spacing-md);
    padding-left: 22px;
}

    .recovery-grid li {
        font-size: 13px;
        color: var(--bizomate-text-subtle);
    }

    .recovery-grid code {
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--bizomate-ink);
    }

.recovery-actions {
    display: flex;
    gap: var(--bizomate-spacing-sm);
    border-top: 1px solid var(--bizomate-border-light);
    padding-top: var(--bizomate-spacing-md);
}

/* Idle lock */

.lock-identity {
    text-align: center;
    margin-bottom: var(--bizomate-spacing-md);
}

    .lock-identity .settings-avatar,
    .lock-identity .settings-avatar-img {
        margin: 0 auto var(--bizomate-spacing-sm);
    }

.lock-name {
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 18px;
    color: var(--bizomate-ink);
}

.lock-email {
    font-size: 14px;
    color: var(--bizomate-text-subtle);
}

/* ================================================================ settings */

.settings-shell {
    display: flex;
    gap: var(--bizomate-spacing-lg);
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--bizomate-spacing-lg);
}

/* The one settings nav. Measurements from the settings boards: 180px wide, groups 24px
   apart, an 11.5px label 8px above 32px items. */
.settings-nav {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 4px;
}

.settings-nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-nav-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-label {
    padding-left: 10px;
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bz-text-subtle);
}

.settings-nav-link {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--bz-radius);
    font-size: 14px;
    color: var(--bz-slate);
    text-decoration: none;
}

    .settings-nav-link:hover {
        background: var(--bz-surface);
        color: var(--bz-ink);
    }

    .settings-nav-link:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .settings-nav-link.active {
        background: #F3EEFF;
        color: var(--bz-violet);
        font-weight: 500;
    }

.settings-main {
    flex: 1;
    min-width: 0;
}

/* The board's scale, not the pre-redesign one: 22px title, 13px subtitle, 4px between
   them and 16px down to the card. It read a size too large on every settings page. */
.settings-title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    color: var(--bz-ink);
    margin: 0 0 4px;
}

.settings-subtitle {
    color: var(--bz-slate);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 16px;
    max-width: 520px;
}

.settings-card {
    background: #fff;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    padding: var(--bizomate-spacing-lg);
    margin-bottom: var(--bizomate-spacing-md);
    max-width: 520px;
}

.settings-card-wide {
    max-width: 640px;
}

/* A change in flight, sitting between what is true now and the field that changes it.
   Amber rather than red: nothing has gone wrong, something is simply unfinished. */
.settings-pending {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px;
    margin-bottom: 18px;
    background: var(--bz-warning-bg-card);
    border: 1px solid var(--bz-warning-border-card);
    border-radius: var(--bz-radius-lg);
}

.settings-pending-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .settings-pending-head .app-icon,
    .settings-pending-head .app-icon svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        margin-top: 1px;
        color: var(--bz-warning);
    }

.settings-pending-title {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bz-warning-strong);
}

.settings-pending-body {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-slate);
}

/* Indented past the icon, so the actions line up with the words they belong to. */
.settings-pending-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 26px;
}

/* The hairline between two groups inside a card — the board sets one between the current
   address and the field that changes it. */
.settings-divider {
    height: 1px;
    margin: 0 0 18px;
    background: var(--bz-divider);
    border: 0;
}

/* "Verified on 2 March 2026" under the current address. Green only when it is true;
   an unverified address is a neutral statement, not a good one. */
.settings-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--bz-text-muted);
}

.settings-note-ok {
    color: var(--bz-success);
}

    .settings-note .app-icon,
    .settings-note .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

.settings-btn {
    padding: 11px 18px;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    background: var(--panel-gradient);
    border: none;
    border-radius: var(--bizomate-radius-sm);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .settings-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.settings-btn-secondary {
    background: #fff;
    color: var(--bizomate-ink);
    border: 1px solid var(--bizomate-border);
}

    .settings-btn-secondary:hover {
        border-color: var(--brand-start);
        color: var(--brand-start);
    }

.settings-btn-danger {
    background: #fff;
    color: var(--bizomate-danger);
    border: 1px solid var(--bizomate-danger);
}

    .settings-btn-danger:hover {
        background: var(--bizomate-danger-bg);
    }

.is-busy {
    cursor: default;
}

/* The default spinner is white for the gradient button; on a light background it would
   be invisible. */
.settings-btn-secondary .auth-spinner,
.settings-btn-danger .auth-spinner {
    border-color: var(--bizomate-border);
    border-top-color: var(--brand-start);
}

.settings-actions {
    display: flex;
    gap: var(--bizomate-spacing-sm);
    max-width: 520px;
}

    /* The busy script keys off .auth-submit, which is full-width by default. In a settings
   row the button should size to its text. */
    .settings-actions .auth-submit,
    .session-row .auth-submit,
    .settings-main > form > .auth-submit {
        width: auto;
        padding: 11px 18px;
        font-size: 15px;
        border-radius: var(--bizomate-radius-sm);
    }

.settings-readonly {
    margin-bottom: var(--bizomate-spacing-md);
}

.settings-readonly-label {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    margin-bottom: 2px;
}

.settings-readonly-value {
    font-size: 16px;
    color: var(--bizomate-ink);
}

.settings-readonly-note {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    margin-top: 2px;
}

.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--bizomate-spacing-md);
    padding-bottom: var(--bizomate-spacing-md);
    border-bottom: 1px solid var(--bizomate-border-light);
    margin-bottom: var(--bizomate-spacing-md);
}

.settings-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--panel-gradient);
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.settings-avatar-note {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    margin: 0 0 var(--bizomate-spacing-sm);
}

.settings-file {
    font-size: 14px;
    color: var(--bizomate-slate);
}

    .settings-file::file-selector-button {
        padding: 8px 14px;
        margin-right: 10px;
        font-family: var(--font-brand);
        font-weight: 500;
        font-size: 14px;
        color: var(--bizomate-ink);
        background: #fff;
        border: 1px solid var(--bizomate-border);
        border-radius: var(--bizomate-radius-sm);
        cursor: pointer;
    }

        .settings-file::file-selector-button:hover {
            border-color: var(--brand-start);
            color: var(--brand-start);
        }

.settings-rules {
    list-style: none;
    padding: 0;
    margin: var(--bizomate-spacing-md) 0 0;
}

    .settings-rules li {
        display: flex;
        align-items: center;
        gap: var(--bizomate-spacing-sm);
        font-size: 14px;
        color: var(--bizomate-slate);
        padding: 3px 0;
    }

    .settings-rules .app-icon {
        width: 14px;
        height: 14px;
        color: var(--bizomate-text-subtle);
    }

.settings-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--bizomate-spacing-sm);
    font-size: 14px;
    color: var(--bizomate-slate);
    cursor: pointer;
    flex-shrink: 0;
}

    .settings-switch input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--brand-start);
        cursor: pointer;
    }

/* Members */

.invite-row {
    display: flex;
    gap: var(--bizomate-spacing-sm);
    /* Stretch, not flex-start: the email field can grow a validation message below it,
       and flex-start would leave the button floating at the top while the inputs sit
       lower. */
    align-items: stretch;
}

    .invite-row .auth-field {
        display: flex;
        flex-direction: column;
    }

.invite-btn {
    align-self: flex-start;
    height: 48px;
    flex-shrink: 0;
    justify-content: center;
}

.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.member-avatar-initials {
    background: var(--panel-gradient);
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sessions */

.session-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bizomate-spacing-md);
    padding: 14px 0;
    border-bottom: 1px solid var(--bizomate-border-light);
}

    .session-row:last-child {
        border-bottom: none;
    }

.session-device {
    font-weight: 500;
    font-size: 15px;
    color: var(--bizomate-ink);
    display: flex;
    align-items: center;
    gap: var(--bizomate-spacing-sm);
}

.session-current-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    background: #F3EEFF;
    color: var(--brand-start);
}

.session-meta {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    margin-top: 2px;
}

/* Your data */

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--bizomate-spacing-md);
    padding: var(--bizomate-spacing-md) 0;
    border-bottom: 1px solid var(--bizomate-border-light);
}

    .data-row:last-child {
        border-bottom: none;
    }

    /* Its action stays one line: "Delete account" is a link, and a link wraps. */
    .data-row > .settings-btn,
    .data-row > form {
        flex-shrink: 0;
        white-space: nowrap;
        text-decoration: none;
    }

.data-row-title {
    font-weight: 500;
    font-size: 15px;
    color: var(--bizomate-ink);
    margin-bottom: 2px;
}

.data-row-body {
    font-size: 14px;
    color: var(--bizomate-slate);
    line-height: 1.5;
    max-width: 340px;
}

/* Two-factor */

.tfa-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tfa-icon-on {
    background: var(--bizomate-success-bg);
    color: var(--bizomate-success);
}

.tfa-state {
    font-size: 14px;
    font-weight: 500;
    color: var(--bizomate-slate);
}

/* Projects */

.project-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}

.project-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bizomate-slate);
}

/* ================================================================ billing */

.usage-block {
    margin-top: var(--bizomate-spacing-md);
    padding-top: var(--bizomate-spacing-md);
    border-top: 1px solid var(--bizomate-border-light);
}

.usage-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--bizomate-slate);
    margin-bottom: 6px;
}

.usage-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bizomate-border-light);
    overflow: hidden;
}

.usage-bar-fill {
    height: 100%;
    background: var(--panel-gradient);
    transition: width 0.3s ease;
}

.usage-bar-full {
    background: var(--bizomate-danger);
}

.plan-interval-toggle {
    display: inline-flex;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    overflow: hidden;
    margin-bottom: var(--bizomate-spacing-md);
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    max-width: 960px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    padding: var(--bizomate-spacing-md);
}

.plan-card-current {
    border-color: var(--brand-start);
    background: #FAF7FF;
}

.plan-name {
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 18px;
    color: var(--bizomate-ink);
}

.plan-description {
    font-size: 13px;
    line-height: 1.5;
    color: var(--bizomate-text-subtle);
    margin: 4px 0 12px;
    min-height: 40px;
}

.plan-price {
    margin-bottom: 12px;
}

.plan-price-amount {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 26px;
    color: var(--bizomate-ink);
}

.plan-price-interval,
.plan-price-contact {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    margin-left: 4px;
}

.plan-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bizomate-spacing-md);
    flex: 1;
}

    .plan-highlights li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--bizomate-slate);
        padding: 3px 0;
    }

    .plan-highlights .app-icon {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        margin-top: 2px;
        color: var(--bizomate-success);
    }

.plan-card .settings-btn {
    justify-content: center;
}

.plan-editor {
    background: #fff;
    border-radius: var(--bizomate-radius);
    width: 720px;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--bizomate-shadow-modal);
}

.plan-editor-body {
    padding: 0 var(--bizomate-spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.plan-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--bizomate-spacing-md);
}

.plan-editor-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bizomate-spacing-sm) var(--bizomate-spacing-md);
    margin-bottom: var(--bizomate-spacing-md);
}

/* ================================================================ notice pages

   One card for every full-page message: 404, 500, access denied, maintenance, the
   session screens and account suspension. The board draws them identically — the
   horizontal lockup above a single 440px card — and they differ only in what opens the
   card, a status code or a tinted badge. So this is one template rather than a layout
   per page, which is how they drifted apart in the first place. */

.bz-notice-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 24px;
    background: var(--bz-bg-notice);
}

.bz-notice-mark {
    display: block;
    width: 168px;
    height: auto;
}

.bz-notice-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 440px;
    padding: 36px 36px 32px;
    box-sizing: border-box;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

/* Badge or code, then the words, then the actions. */
.bz-notice-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* A status code, set in the panel gradient and clipped to the glyphs — not a flat
   violet. Falls back to violet where background-clip: text is unsupported. */
.bz-notice-code {
    font-family: var(--font-brand);
    font-size: 76px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--bz-violet);
    background: var(--bz-gradient-panel);
    -webkit-background-clip: text;
    background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bz-notice-code {
        color: transparent;
    }
}

/* …or a tinted badge, where there is no number to show. */
.bz-notice-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
}

    .bz-notice-badge .app-icon,
    .bz-notice-badge .app-icon svg {
        width: 23px;
        height: 23px;
        min-width: 23px;
        min-height: 23px;
    }

.bz-notice-badge-warning {
    color: var(--bz-warning);
    background: var(--bz-warning-bg);
}

.bz-notice-badge-error {
    color: var(--bz-error);
    background: var(--bz-error-bg);
}

.bz-notice-head {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-notice-title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bz-ink);
}

.bz-notice-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--bz-slate);
}

.bz-notice-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    /* The field-scale border, as the auth screens use — the card is drawn on that
       scale, and the shell border beside it reads a shade too dark. */
    .bz-notice-actions .bz-btn-secondary {
        border-color: var(--bz-field-border);
    }

.bz-notice-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bz-text-subtle);
}

/* The 500's trace reference, beside the control that copies it. */
.bz-notice-ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    background: var(--bz-field-bg-readonly);
    border-radius: var(--bz-radius);
}

    .bz-notice-ref code {
        min-width: 0;
        overflow: hidden;
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--bz-slate);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* A sign-out form sitting inside a sentence, so the link reads as part of the prose
   rather than as a control parked underneath it. */
.bz-notice-inline-form {
    display: inline;
}

.bz-notice-copy {
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-violet);
    background: none;
    border: 0;
    cursor: pointer;
}

    .bz-notice-copy:hover {
        color: var(--bz-violet-hover);
        text-decoration: underline;
    }

    .bz-notice-copy:focus-visible {
        outline: none;
        border-radius: 2px;
        box-shadow: var(--bz-focus-ring);
    }

/* ================================================================ launch screen */

.launch-shell {
    min-height: 100vh;
    background: var(--panel-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* One flex column with two gaps and no margins. The page is sized against ~780px of
   viewport, not the 900 of the artboard: a 1440x900 window leaves roughly that once the
   browser's own chrome is taken off, so a page that fits 900 still scrolls. The shell's
   padding went with the margins — a centred column that fits does not need it. */
.launch-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    max-width: 760px;
    text-align: center;
}

/* 150 wide, and the stacked lockup is one SVG at 204.8 x 181, so its height is always
   width x 0.8838 — 133 here. Sized by a rule rather than by eye: the mark should not be
   taller than the headline block it introduces, which is 99. */
.launch-mark {
    width: 150px;
    height: auto;
    margin: 0;
    display: block;
}

/* Headline and lead are one block: 10px from each other, 22 from everything else. */
.launch-heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.launch-title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.launch-body {
    font-size: 15px;
    line-height: 1.6;
    /* Translucent white rather than a grey: on the gradient a grey reads as muddy, while
       white at reduced opacity keeps the hue underneath. */
    color: var(--bz-on-gradient-quiet);
    margin: 0 auto;
    max-width: 480px;
}

.countdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--bizomate-spacing-sm);
    margin: 0;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* 64, not the board's 68. Cloudflare draws its widget 71px tall where the board assumed
   65, which spends six of the sixteen pixels of headroom the column was designed with —
   and the page has to survive a Poppins fallback to Segoe UI, where the line heights move.
   Four pixels off each tile buys eight back and costs nothing anyone can see. */
.countdown-box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--bizomate-radius);
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 30px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--bz-on-gradient-quiet);
    margin: 0;
}

.countdown-sep {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.4);
    /* Aligned to the middle of the boxes rather than the whole unit, so the labels below
       do not drag it down. */
    line-height: 72px;
}

/* A column, not a row. The row held the field and the button side by side, which left
   nowhere for a 300px widget to sit: hanging it underneath would have put the not-ready
   button beside the check that gates it rather than under it, and the button being
   directly under what gates it is the whole of that rule. */
.launch-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The three controls sit 10px apart; the label sits 5px from its own field. The
       tighter pair binds the label to the box it names, the looser gap keeps the field,
       the check and the button reading as three things rather than one block. */
    gap: 10px;
    /* 480, not 440: at 440 the unavailable message already ran to three lines with
       nothing in hand, and a fourth line is what would spend the page's headroom. */
    width: 480px;
    max-width: 100%;
    margin: 0 auto;
}

/* The field had no label at all: the placeholder was doing the job, which meant it
   vanished on the first keystroke, could not be brightened past 2.96:1 without passing for
   a typed address, and left the box announcing as unlabelled to a screen reader. One label
   solves all three, and the placeholder goes with it — under "Email" it only repeated
   itself. Matched to the human check's label below so the two read as a pair. */
.launch-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.launch-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--bz-on-gradient-quiet);
}

.launch-input {
    width: 100%;
    height: 40px;
    padding: 0 13px;
    font-family: var(--font-ui);
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--bizomate-radius);
}

    .launch-input::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .launch-input:focus {
        outline: none;
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.2);
    }

.launch-button {
    padding: 12px 18px;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 15px;
    color: var(--brand-start);
    background: #fff;
    border: none;
    border-radius: var(--bizomate-radius);
    cursor: pointer;
    white-space: nowrap;
}

/* Full width under the check, with its own 440px column for the note beneath it. */
.launch-button-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

.launch-form-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 480px;
    max-width: 100%;
    margin: 0 auto;
}

/* The third live button gated by the human check, and the one that cannot follow the
   others: a violet gradient button on a violet gradient page disappears, so white with
   violet text stays. Its not-ready state is the same glass as everything else on the page
   — deliberately low contrast, because that is what inert looks like, and a disabled
   control is exempt from the contrast floor. aria-disabled carries the meaning. */
.launch-button[aria-disabled="true"]:not(.is-busy) {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    cursor: not-allowed;
}

    .launch-button[aria-disabled="true"]:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .launch-button:hover {
        background: rgba(255, 255, 255, 0.92);
    }

.launch-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-on-gradient-quiet);
    margin: 0;
}

.launch-error {
    display: block;
    font-size: 13px;
    color: #fff;
    background: rgba(220, 38, 38, 0.9);
    border-radius: var(--bizomate-radius-sm);
    padding: 6px 10px;
    margin: var(--bizomate-spacing-sm) auto 0;
    max-width: 440px;
}

.launch-confirm {
    font-size: 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--bizomate-radius);
    padding: 14px;
    max-width: 440px;
    margin: 0 auto;
}

/* ================================================================ public pages */

.public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.public-header {
    padding: var(--bizomate-spacing-md) var(--bizomate-spacing-lg);
    border-bottom: 1px solid var(--bizomate-border-light);
}

.public-mark {
    display: inline-flex;
}

    .public-mark img {
        height: 28px;
        width: auto;
        display: block;
    }

.public-main {
    flex: 1;
    padding: var(--bizomate-spacing-lg);
}

.public-footer {
    display: flex;
    gap: var(--bizomate-spacing-lg);
    padding: var(--bizomate-spacing-lg);
    border-top: 1px solid var(--bizomate-border-light);
    font-size: 14px;
}

/* Legal copy: a measure of roughly 70 characters, which is where long-form prose stops
   being tiring to read. */
.legal {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--bizomate-spacing-lg) 0 64px;
    color: var(--bizomate-slate);
    font-size: 16px;
    line-height: 1.65;
}

.legal-title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 32px;
    color: var(--bizomate-ink);
    margin: 0 0 6px;
}

.legal-meta {
    font-size: 14px;
    color: var(--bizomate-text-subtle);
    margin: 0 0 var(--bizomate-spacing-lg);
}

.legal h2 {
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 20px;
    color: var(--bizomate-ink);
    margin: 32px 0 10px;
}

.legal h3 {
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 16px;
    color: var(--bizomate-ink);
    margin: 20px 0 8px;
}

.legal p {
    margin: 0 0 14px;
}

.legal ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.legal li {
    margin-bottom: 6px;
}

.legal-address {
    font-size: 14px;
    color: var(--bizomate-text-subtle);
    margin-top: var(--bizomate-spacing-md);
}

/* Draft banner and gap markers. Deliberately conspicuous: placeholder legal text that
   looks finished is worse than none, because nobody remembers to replace it. */
.legal-draft {
    background: var(--bizomate-warning-bg);
    border-left: 3px solid var(--bizomate-warning);
    border-radius: var(--bizomate-radius-sm);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bizomate-ink);
    margin-bottom: var(--bizomate-spacing-lg);
}

.legal-gap {
    background: var(--bizomate-bg-subtle);
    border-left: 3px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bizomate-text-subtle);
    margin: 0 0 14px;
}

/* Turnstile */

.cf-turnstile {
    margin-top: var(--bizomate-spacing-sm);
}

/* ================================================================ list pages */

.credentials-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--bizomate-spacing-md);
}

.credentials-viewer-note {
    color: var(--bizomate-text-subtle);
    margin-bottom: var(--bizomate-spacing-md);
}

.credential-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.credential-card {
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    padding: 14px var(--bizomate-spacing-md);
    background: #fff;
    box-shadow: var(--bizomate-shadow-sm);
    transition: box-shadow 0.15s ease;
}

    .credential-card:hover {
        box-shadow: var(--bizomate-shadow-hover);
    }

.credential-card-name {
    font-weight: 500;
    margin-bottom: 6px;
    font-family: var(--font-brand);
}

.credential-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--bizomate-spacing-sm);
}

.credential-status-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 2px var(--bizomate-spacing-sm);
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.credential-status-active,
.credential-status-published {
    background: var(--bizomate-success-bg);
    color: var(--bizomate-success);
}

.credential-status-revoked {
    background: var(--bizomate-danger-bg);
    color: var(--bizomate-danger);
}

.credential-status-expired {
    background: var(--bizomate-warning-bg);
    color: var(--bizomate-warning);
}

.credential-status-draft {
    background: var(--bizomate-bg-subtle);
    color: var(--bizomate-slate);
}

.credential-date {
    font-size: 14px;
    color: var(--bizomate-text-subtle);
}

.credential-category-title {
    margin-top: var(--bizomate-spacing-lg);
    margin-bottom: var(--bizomate-spacing-xs);
    color: var(--bizomate-ink);
    border-bottom: 2px solid var(--bizomate-border-light);
    padding-bottom: var(--bizomate-spacing-xs);
}

.credential-group-title {
    margin-top: 10px;
    margin-bottom: var(--bizomate-spacing-sm);
    color: var(--bizomate-slate);
    font-size: 14px;
}

.provider-icon-img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

.provider-icon-img-small {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
}

/* A diamond rather than a text badge: smaller, and it does not compete with the provider
   name for attention. title carries the meaning for anyone who does not read it as one. */
.tier-premium {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    vertical-align: -2px;
}

    .tier-premium .app-icon,
    .tier-premium .app-icon svg {
        width: 13px;
        height: 13px;
        min-width: 13px;
        min-height: 13px;
        color: var(--brand-start);
    }

/* ================================================================ dialogs and forms */

.dialog-oauth-unavailable {
    color: var(--bizomate-danger);
}

.dialog-field {
    margin-bottom: 14px;
}

    .dialog-field label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: var(--bizomate-spacing-xs);
        color: var(--bizomate-ink);
    }

.dialog-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
}

.dialog-input-sf {
    width: 100%;
    margin-bottom: 2px;
}

.dialog-oauth-note {
    color: var(--bizomate-slate);
    font-size: 14px;
}

.help-link {
    background: none;
    border: none;
    color: var(--brand-start);
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-left: 6px;
}

.help-steps {
    padding-left: 20px;
    line-height: 1.6;
}

.help-note {
    margin-top: var(--bizomate-spacing-md);
    font-size: 14px;
    color: var(--bizomate-text-subtle);
}

.icon-preview img {
    width: 40px;
    height: 40px;
    margin-bottom: var(--bizomate-spacing-sm);
}

.field-error {
    display: block;
    color: var(--bizomate-danger);
    font-size: 13px;
    margin-top: var(--bizomate-spacing-xs);
}

.required-marker {
    color: var(--bizomate-danger);
    margin-left: 2px;
}

/* ================================================================ tables */

.admin-provider-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    background: #fff;
}

    .admin-provider-table th {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--bizomate-border);
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        color: var(--bizomate-text-subtle);
    }

    .admin-provider-table td {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--bizomate-border-light);
        font-size: 14px;
    }

    .admin-provider-table tbody tr:hover {
        background: var(--bizomate-bg-subtle);
    }

    .admin-provider-table code {
        background: var(--bizomate-bg-subtle);
        padding: 2px 6px;
        border-radius: var(--bizomate-radius-sm);
        font-size: 13px;
    }

.provider-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: var(--bizomate-spacing-md);
    align-items: center;
}

.provider-search {
    max-width: 280px;
}

/* ================================================================ feedback */

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.skeleton-card {
    border: 1px solid var(--bizomate-border-light);
    border-radius: var(--bizomate-radius);
    padding: 14px var(--bizomate-spacing-md);
    background: #fff;
}

.skeleton-line {
    height: 12px;
    border-radius: var(--bizomate-radius-sm);
    background: linear-gradient(90deg, #F0F0F3 25%, #F7F7F9 50%, #F0F0F3 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    margin-bottom: var(--bizomate-spacing-sm);
}

.skeleton-line-title {
    width: 60%;
    height: 16px;
}

.skeleton-line-short {
    width: 40%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.empty-state {
    text-align: center;
    padding: 48px var(--bizomate-spacing-md);
    color: var(--bizomate-text-subtle);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--bizomate-spacing-sm);
}

.empty-state-title {
    font-weight: 500;
    color: var(--bizomate-slate);
    margin: 0;
    font-family: var(--font-brand);
}

.empty-state-subtitle {
    font-size: 14px;
    margin-top: var(--bizomate-spacing-xs);
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bizomate-border);
    border-top-color: var(--brand-start);
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================================================================ confirm dialog */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 21, 28, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.confirm-box {
    background: #fff;
    border-radius: var(--bizomate-radius-sm);
    width: 400px;
    max-width: 90vw;
    box-shadow: var(--bizomate-shadow-modal);
    overflow: hidden;
}

.confirm-header {
    position: relative;
    padding: 20px 40px 12px var(--bizomate-spacing-lg);
}

    .confirm-header h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: var(--bizomate-ink);
        font-family: var(--font-brand);
    }

.confirm-close-btn {
    position: absolute;
    top: var(--bizomate-spacing-md);
    right: var(--bizomate-spacing-md);
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--bizomate-slate);
    cursor: pointer;
    padding: var(--bizomate-spacing-xs);
}

    .confirm-close-btn:hover {
        color: var(--bizomate-ink);
    }

.confirm-body {
    padding: 0 var(--bizomate-spacing-lg) 20px;
}

    .confirm-body p {
        margin: 0;
        color: var(--bizomate-slate);
        line-height: 1.5;
    }

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px var(--bizomate-spacing-lg) 20px;
}

    .confirm-actions .e-btn {
        min-width: 84px;
    }

/* ================================================================ icons and buttons */

.app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    color: currentColor;
    overflow: hidden;
}

    .app-icon svg {
        width: 18px;
        height: 18px;
        display: block;
    }

.btn-icon-inline,
.btn-icon-inline svg {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}

.btn-icon-inline {
    margin-right: 4px;
    vertical-align: -2px;
}

.icon-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bizomate-slate);
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .icon-action-btn:hover {
        background: #F3EEFF;
        color: var(--brand-start);
    }

    .icon-action-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.icon-action-danger:hover {
    background: var(--bizomate-danger-bg);
    color: var(--bizomate-danger);
}

.row-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

.e-btn.e-primary {
    background: var(--panel-gradient) !important;
    border: none !important;
    font-family: var(--font-brand);
    font-weight: 500;
}

    .e-btn.e-primary .app-icon {
        color: #fff;
    }

.e-btn.e-outline {
    border-color: var(--brand-start) !important;
    color: var(--brand-start) !important;
}

.view-toggle {
    display: flex;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    overflow: hidden;
    margin-right: var(--bizomate-spacing-sm);
}

.view-toggle-btn {
    background: #fff;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--bizomate-slate);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .view-toggle-btn.active {
        background: var(--brand-start);
        color: #fff;
    }

        .view-toggle-btn.active .app-icon {
            color: #fff;
        }

/* ================================================================ pager */

.pager-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--bizomate-spacing-md);
    padding-top: var(--bizomate-spacing-sm);
    border-top: 1px solid var(--bizomate-border-light);
    flex-wrap: wrap;
    gap: var(--bizomate-spacing-sm);
}

.pager-info {
    font-size: 14px;
    color: var(--bizomate-slate);
}

.pager-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pager-size-label, .pager-page-label {
    font-size: 14px;
    color: var(--bizomate-slate);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pager-size-select {
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    padding: 4px 6px;
    font-size: 14px;
}

.pager-jump-input {
    width: 48px;
    text-align: center;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    padding: 2px 4px;
    font-size: 14px;
}

/* ================================================================ workflow designer */

.designer-shell {
    display: flex;
    gap: var(--bizomate-spacing-md);
}

.diagram-shell {
    flex: 1;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    overflow: hidden;
    background: #fff;
}

.config-panel {
    width: 320px;
    flex-shrink: 0;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius-sm);
    padding: var(--bizomate-spacing-md);
    background: #fff;
    height: 600px;
    overflow-y: auto;
}

.config-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--bizomate-spacing-md);
}

.config-panel-empty {
    color: var(--bizomate-slate);
    font-size: 14px;
}

.config-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
    font-size: 13px;
}

/* ================================================================ workspace picker */

.workspace-picker {
    max-width: 480px;
    margin: 0 auto;
}

.workspace-picker-subtitle {
    color: var(--bizomate-slate);
    margin-bottom: var(--bizomate-spacing-lg);
}

.workspace-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workspace-card-form {
    margin: 0;
}

.workspace-card {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--bizomate-spacing-md) 20px;
    border: 1px solid var(--bizomate-border);
    border-radius: var(--bizomate-radius);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .workspace-card:hover {
        border-color: var(--brand-start);
        box-shadow: var(--bizomate-shadow-sm);
    }

.workspace-card-name {
    font-weight: 500;
    font-size: 1.05rem;
    font-family: var(--font-brand);
}

.workspace-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.workspace-role-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.workspace-role-admin {
    background: #F3EEFF;
    color: var(--brand-start);
}

.workspace-role-editor {
    background: var(--bizomate-info-bg);
    color: var(--brand-cyan-text);
}

.workspace-role-viewer {
    background: var(--bizomate-bg-subtle);
    color: var(--bizomate-slate);
}

.workspace-country {
    font-size: 14px;
    color: var(--bizomate-text-subtle);
}

.workspace-card-current {
    border-color: var(--brand-start);
    background: #FAF7FF;
}

.workspace-current-badge {
    display: inline-block;
    margin-left: var(--bizomate-spacing-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-start);
    background: #F3EEFF;
    padding: 2px var(--bizomate-spacing-sm);
    border-radius: 10px;
    vertical-align: middle;
}

/* ================================================================ misc */

.template-variables-reference {
    font-size: 14px;
    color: var(--bizomate-slate);
    margin-bottom: 12px;
}

    .template-variables-reference code {
        background: var(--bizomate-bg-subtle);
        padding: 2px 6px;
        border-radius: var(--bizomate-radius-sm);
        margin: 0 2px;
    }

/* ================================================================ responsive */

/* The 560px panel is drawn for 1440. On narrower screens it gives way first, so the form
   column never drops below the width of the form. */
@media (max-width: 1100px) {
    .auth-brand-panel {
        flex-basis: 40%;
    }
}

@media (max-width: 900px) {
    .shell-topbar {
        gap: var(--bizomate-spacing-sm);
        padding: 0 var(--bizomate-spacing-sm);
    }

    /* The chip folds to its mark. For somebody in several companies that mark is the
       company's own initial and colour, so which company they are in still shows. Both
       text forms go — the one-line name, and the two-line block — or the company line is
       left standing alone where the workspace should be. */
    .workspace-chip-name,
    .workspace-chip-text {
        display: none;
    }

    .workspace-chip {
        padding: 0 6px;
        gap: 4px;
    }

    .shell-main {
        padding: var(--bizomate-spacing-md);
    }

    .designer-shell {
        flex-direction: column;
    }

    .config-panel {
        width: auto;
    }
}

@media (max-width: 800px) {
    .settings-shell {
        flex-direction: column;
        padding: var(--bizomate-spacing-md);
    }

    /* One scrolling row on a narrow screen: the groups and their items flatten into it,
       and the labels go — a row of tabs has no room for headings between them. */
    .settings-nav {
        flex: none;
        flex-direction: row;
        gap: 2px;
        overflow-x: auto;
    }

    .settings-nav-group,
    .settings-nav-items {
        flex-direction: row;
        gap: 2px;
    }

    .settings-nav-link {
        white-space: nowrap;
    }

    .settings-nav-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .auth-shell {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .auth-brand-panel {
        flex: none;
        height: auto;
        padding: 40px var(--bizomate-spacing-lg);
    }

    .auth-brand-stacked {
        display: none;
    }

    .auth-brand-mobile {
        display: block;
    }

    .auth-form-panel {
        height: auto;
        overflow: visible;
        align-items: flex-start;
        padding: 32px var(--bizomate-spacing-lg);
    }

    .auth-form-inner {
        max-width: none;
        margin: 0;
    }

    .setup-scan {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .launch-title {
        font-size: 26px;
    }

    .countdown-box {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .countdown-sep {
        line-height: 56px;
        font-size: 18px;
    }

    .launch-form {
        flex-direction: column;
    }
}

/* ================================================================ maintenance window

   The back-by panel inside the maintenance card — the only part of a notice page
   that is not shared, because only this one counts down. The card around it is
   .bz-notice-card. */

.notice-window {
    background: var(--bizomate-bg-subtle);
    border-radius: var(--bizomate-radius-sm);
    padding: 14px;
    margin-bottom: var(--bizomate-spacing-lg);
}

.notice-window-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bizomate-spacing-sm);
    margin-bottom: 10px;
}

.notice-window-label {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
}

.notice-window-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--bizomate-ink);
    text-align: right;
}

.notice-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--bizomate-border);
    overflow: hidden;
}

.notice-progress-fill {
    height: 100%;
    width: 0;
    background: var(--panel-gradient);
    transition: width 0.4s ease;
}

.notice-window-remaining {
    font-size: 13px;
    color: var(--bizomate-text-subtle);
    margin-top: 10px;
}


/* ---------------------------------------------------------------- invitations waiting
   The list somebody meets straight after signing in when a company has invited them.
   Measurements from boards/02-sign-up-first-sign-in/Invitations.html.

   A row is a decision, not a notification, so each one carries the whole case for saying
   yes: whose company, which workspace, who asked, what role, and how long it stands. */
.bz-invites {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bz-invite {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

/* Confirming a decline turns the row itself red rather than covering the page with a
   dialog. The question is about this one invitation, and the answer is easier to give
   with the thing being declined still in front of you. */
.bz-invite.is-declining {
    gap: 12px;
    border-color: var(--bz-error-border);
}

.bz-invite.is-joined {
    gap: 10px;
    background: #F4FBF6;
    border-color: var(--bz-success-border);
}

.bz-invite-row {
    display: flex;
    gap: 12px;
}

.bz-invite.is-joined .bz-invite-row {
    align-items: center;
}

/* The company's initial, on a colour derived from its name — so two invitations are
   told apart at a glance without asking anyone to upload a logo first. */
.bz-invite-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--bz-radius-lg);
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #FFFFFF;
}

.bz-invite-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
}

.bz-invite.is-joined .bz-invite-text {
    gap: 0;
}

.bz-invite-name {
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bz-ink);
}

.bz-invite.is-joined .bz-invite-name {
    font-size: 14.5px;
}

.bz-invite-company {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bz-slate);
}

.bz-invite-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--bz-slate);
}

.bz-invite-meta strong {
    font-weight: 600;
    color: var(--bz-ink);
}

/* Amber, not red: a deadline is not an error, and every invitation has one. */
.bz-invite-expiry {
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-warning);
}

.bz-invite-actions {
    display: flex;
    gap: 8px;
}

.bz-invite-joined-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--bz-success);
    background: var(--bz-success-bg);
    border: 1px solid var(--bz-success-border);
    border-radius: 11px;
}

.bz-invite-note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bz-slate);
}

/* The consequence, stated where the action is. */
.bz-invite-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 13px;
    background: #FEF6F6;
    border-radius: var(--bz-radius-md);
}

.bz-invite-confirm-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bz-ink);
}

.bz-invite-confirm-body {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bz-slate);
}

/* What does not change by accepting. Quiet, because it is reassurance rather than
   instruction — the fear it answers is "will this swallow the company I already have". */
.bz-invite-keep {
    display: flex;
    gap: 9px;
    padding: 11px 13px;
    background: var(--bz-bg-notice);
    border-radius: var(--bz-radius-md);
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.bz-invite-keep svg {
    flex-shrink: 0;
}


/* ---------------------------------------------------------------- accept an invitation
   The page an invitation email opens. Measurements from
   boards/02-sign-up-first-sign-in/AcceptInvitation.html. */

/* Which company, on Mist, before anything is asked of them. */
.bz-company {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: var(--bz-bg-notice);
    border-radius: var(--bz-radius);
}

.bz-company-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--bz-radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
}

.bz-company-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bz-company-name {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bz-ink);
}

.bz-company-sub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

/* What joining a second company does and does not change. Three lines, each with its own
   icon, because each answers a different worry: my own company, getting between them,
   and whose plan applies. */
.bz-assure {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 14px;
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-md);
}

.bz-assure-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;                           /* a <p>: Bootstrap's bottom margin doubled the board's 9px */
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bz-slate);
}

    .bz-assure-row .app-icon,
    .bz-assure-row .app-icon svg {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-top: 2px;
    }

.bz-assure-row.is-kept .app-icon { color: var(--bz-success); }
.bz-assure-row.is-switch .app-icon { color: var(--bz-violet); }
.bz-assure-row.is-plan .app-icon { color: var(--bz-slate); }

.bz-button-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A button whose label carries a name — a company's can be its full legal one. The label
   goes in its own span so the ellipsis has an element to act on: text-overflow does
   nothing to a bare text node, and without it a long name wraps onto a second line the
   40px button then cuts off. The first attempt targeted "> *" and matched nothing. */
.bz-btn-clip {
    overflow: hidden;
}

    .bz-btn-clip .bz-btn-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ---------------------------------------------------------------- no active workspace
   A company whose last workspace was archived. Measurements from
   boards/02-sign-up-first-sign-in/NoWorkspace.html. */

/* What happened, as label and value, on Mist. A description list because that is what it
   is — and dt/dd bring margins Bootstrap sets, cleared here. */
.bz-facts {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 2px 14px;
    background: var(--bz-bg-notice);
    border-radius: var(--bz-radius-md);
}

.bz-facts-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 12.5px;
}

    .bz-facts-row + .bz-facts-row {
        border-top: 1px solid var(--bz-field-border);
    }

    .bz-facts-row dt {
        flex-shrink: 0;
        margin: 0;
        font-weight: 400;
        color: var(--bz-text-subtle);
    }

    .bz-facts-row dd {
        margin: 0;
        font-weight: 500;
        text-align: right;
        color: var(--bz-ink);
    }

/* A sentence of consequence under the card's content — quieter than the body, louder than
   small print. */
.bz-card-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bz-slate);
}

/* ---------------------------------------------------------------- workspaces, by company
   Measurements from boards/04-workspace-company-settings/WorkspaceSwitcher.html. */
.switcher {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
}

.switcher-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switcher-title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 22px;
    font-weight: 700;
    color: var(--bz-ink);
}

.switcher-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.switcher-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .switcher-group + .switcher-group {
        padding-top: 10px;
    }

.switcher-company {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 2px;
}

.switcher-company-mark,
.switcher-row-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-brand);
    font-weight: 600;
    color: #FFFFFF;
}

.switcher-company-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: 14px;
}

.switcher-company-text,
.switcher-row-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.switcher-row-text {
    gap: 3px;
}

.switcher-company-line,
.switcher-row-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.switcher-company-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--bz-ink);
}

.switcher-company-meta {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

.switcher-company-pills {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.switcher-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 22px;
    padding: 0 9px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--bz-slate);
    background: var(--bz-bg-notice);
    border: 1px solid var(--bz-field-border);
    border-radius: 11px;
}

    .switcher-pill.is-current {
        color: var(--bz-success);
        background: var(--bz-success-bg);
        border-color: var(--bz-success-border);
    }

    .switcher-pill.is-small {
        height: 20px;
        padding: 0 8px;
        font-size: 10.5px;
        border-radius: 10px;
    }

    /* The current company's plan in violet, another's in teal: two plans on one page,
       told apart by more than their names. */
    .switcher-pill.is-plan {
        color: var(--bz-violet);
        background: #F3EEFF;
        border-color: #DDD0FA;
    }

    .switcher-pill.is-plan-other {
        color: var(--bz-info);
        background: var(--bz-info-bg);
        border-color: var(--bz-info-border);
    }

.switcher-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
}

    .switcher-row.is-current {
        border-color: var(--bz-violet);
    }

.switcher-row-mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: 15px;
}

.switcher-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-ink);
}

.switcher-row-description {
    font-size: 12px;
    color: var(--bz-slate);
}

.switcher-row-meta {
    font-size: 11.5px;
    color: #6B6D7C;
}

.switcher-open {
    flex-shrink: 0;
    margin: 0;
    font-size: 12.5px;
}

.switcher-empty,
.switcher-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.switcher-new {
    align-self: flex-start;
}

/* ---------------------------------------------------------------- what accepting does
   Numbered, because the order is the order of importance: the plan and the card first. */
.bz-consequences {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px 16px 14px 36px;
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-md);
    font-size: 13px;
    line-height: 1.55;
    color: var(--bz-slate);
}

    .bz-consequences li::marker {
        font-family: var(--font-brand);
        font-weight: 600;
        color: var(--bz-violet);
    }

/* A settings card's title with a status pill on the right — "Company details · Owner only". */
.settings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------- notification centre
   Measurements from boards/05-product/NotificationCentre.html. */
.notif-wrap {
    margin-right: 10px;
}

.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    color: var(--bz-slate);
}

    .notif-bell:hover {
        background: var(--bz-field-hover);
    }

    .notif-bell:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .notif-bell .app-icon,
    .notif-bell .app-icon svg {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }

.notif-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    font-size: 9.5px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--bz-error);
    border: 2px solid var(--bz-surface);
    border-radius: 8px;
}

.notif-panel {
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: calc(100vw - 24px);
    max-height: min(720px, calc(100vh - 80px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bz-divider);
    font-size: 12.5px;
}

.notif-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 700;
    color: var(--bz-ink);
}

.notif-panel-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.notif-section {
    padding: 10px 16px 6px;
    font-family: var(--font-brand);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bz-text-subtle);
}

.notif-form {
    margin: 0;
}

.notif-card {
    display: flex;
    gap: 11px;
    padding: 12px 16px;
    background: var(--bz-surface);
    border-bottom: 1px solid #F3F3F6;
}

    .notif-card.is-unread {
        background: #FCFBFF;
    }

.notif-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--bz-radius-lg);
    color: var(--bz-violet);
    background: #7C3AED14;
}

    .notif-icon .app-icon,
    .notif-icon .app-icon svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
    }

    .notif-icon-connections,
    .notif-icon-support,
    .notif-icon-workflows {
        color: var(--bz-info);
        background: #0E749014;
    }

    .notif-icon-billing {
        color: var(--bz-warning);
        background: #B4530914;
    }

    .notif-icon-security {
        color: var(--bz-success);
        background: #15803D14;
    }

    .notif-icon-workspace,
    .notif-icon-announcements {
        color: #4F52B2;
        background: #4F52B214;
    }

.notif-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
    min-width: 0;
}

.notif-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.notif-title {
    flex-grow: 1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bz-ink);
}

.notif-age {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    color: var(--bz-text-subtle);
}

.notif-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-slate);
}

/* The company it is about. Another company's is teal, so an action that will switch
   company says so before it is pressed. */
.notif-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    max-width: 100%;
    height: 18px;
    padding: 0 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bz-slate);
    background: var(--bz-bg-notice);
    border: 1px solid var(--bz-field-border);
    border-radius: 9px;
}

    .notif-tag.is-other {
        color: var(--bz-info);
        background: var(--bz-info-bg);
        border-color: var(--bz-info-border);
    }

.notif-tag-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 2px;
}

.notif-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-switched {
    margin-bottom: 20px;
}

.notif-switches {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--bz-cyan-700);
}

    .notif-switches .app-icon svg {
        width: 12px;
        height: 12px;
    }

.notif-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 13px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-ink);
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius);
    cursor: pointer;
}

    .notif-action.is-primary {
        color: #FFFFFF;
        background: var(--panel-gradient);
        border: 0;
    }

    .notif-action:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

.notif-unread {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 4px;
    background: var(--bz-violet);
}

.notif-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px;
    text-align: center;
}

.notif-empty-title {
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-ink);
}

.notif-empty-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.notif-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 880px;
}

.notif-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.notif-page-actions {
    display: flex;
    gap: 8px;
}

.notif-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notif-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--bz-slate);
    text-decoration: none;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: 15px;
}

    .notif-chip:hover {
        border-color: var(--bz-violet);
    }

    .notif-chip.is-active {
        color: var(--bz-violet);
        font-weight: 500;
        background: #F3EEFF;
        border-color: #DDD0FA;
    }

    .notif-chip-toggle {
        margin-left: auto;
    }

.notif-chip-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--bz-text-subtle);
}

.notif-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

    .notif-list .notif-section {
        background: var(--bz-surface);
    }

.notif-empty.is-page {
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

/* ================================================================ lists
   The product's list pages (boards/05-product/WorkflowsList.html and its siblings):
   a head with title and count, a toolbar of search, filters, view toggle and the create
   button, then a table or a grid of cards, then a one-line footer. */

.bz-list-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bz-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.bz-list-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bz-list-title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 22px;
    font-weight: 700;
    color: var(--bz-ink);
}

.bz-list-count {
    font-size: 12.5px;
    color: var(--bz-text-muted);
}

.bz-list-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bz-list-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 230px;
    height: 34px;
    padding: 0 11px;
    box-sizing: border-box;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    color: var(--bz-text-muted);
}

    .bz-list-search:focus-within {
        border-color: var(--bz-field-border-focus);
        box-shadow: var(--bz-focus-ring);
    }

    .bz-list-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 13px;
        color: var(--bz-ink);
    }

        .bz-list-search input::placeholder {
            color: var(--bz-text-placeholder-toolbar);
        }

    .bz-list-search .app-icon svg {
        width: 14px;
        height: 14px;
    }

.bz-list-filter {
    height: 34px;
    min-width: 120px;
    padding: 0 30px 0 11px;
    box-sizing: border-box;
    font: inherit;
    font-size: 13px;
    color: var(--bz-ink);
    background: var(--bz-surface) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%234A4C5C%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") no-repeat right 11px center;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    appearance: none;
    cursor: pointer;
}

    .bz-list-filter:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

.bz-list-views {
    display: inline-flex;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    overflow: hidden;
}

    .bz-list-views button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 32px;
        padding: 0;
        border: 0;
        background: var(--bz-surface);
        color: var(--bz-slate);
        cursor: pointer;
    }

        .bz-list-views button + button {
            border-left: 1px solid var(--bz-border);
        }

        .bz-list-views button.is-active {
            background: var(--bz-divider);
        }

        .bz-list-views button:focus-visible {
            outline: none;
            box-shadow: inset var(--bz-focus-ring);
        }

    .bz-list-views .app-icon svg {
        width: 15px;
        height: 15px;
    }

.bz-list-table {
    display: flex;
    flex-direction: column;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
    overflow: hidden;
}

.bz-list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--bz-divider);
}

    .bz-list-row:last-child {
        border-bottom: 0;
    }

    .bz-list-row.is-head {
        padding: 11px 18px;
        background: var(--bz-divider);
        border-bottom: 1px solid var(--bz-border);
        font-family: var(--font-brand);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--bz-slate);
    }

.bz-list-cell {
    flex-shrink: 0;
    min-width: 0;
    font-size: 12.5px;
    color: var(--bz-ink);
}

    .bz-list-cell.is-muted {
        color: var(--bz-text-muted);
    }

.bz-list-name {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.bz-list-name {
    text-decoration: none;
}

    a.bz-list-name:hover {
        color: var(--bz-violet);
    }

.bz-list-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.bz-list-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--bz-radius);
    background: transparent;
    color: var(--bz-slate);
    cursor: pointer;
    text-decoration: none;
}

    .bz-list-action:hover {
        background: var(--bz-divider);
    }

    .bz-list-action.is-danger:hover {
        color: var(--bz-error);
    }

    .bz-list-action:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .bz-list-action:disabled {
        opacity: .5;
        cursor: default;
    }

    .bz-list-action .app-icon svg {
        width: 15px;
        height: 15px;
    }

.bz-list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 2px;
    font-size: 12px;
    color: var(--bz-text-muted);
}

.bz-list-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bz-list-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 15px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
}

.bz-list-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bz-list-card-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bz-list-card-name {
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

    a.bz-list-card-name:hover {
        color: var(--bz-violet);
    }

.bz-list-card-rule {
    height: 1px;
    background: var(--bz-divider);
}

.bz-list-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

/* The project a thing belongs to: a 10px rounded swatch and its name. */
.bz-project {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--bz-ink);
}

    .bz-project.is-none {
        color: var(--bz-text-muted);
    }

.bz-project-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* A workflow's state: RUNNING, SWITCHED OFF, PAUSED, NEVER PUBLISHED. */
.bz-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
}

.bz-state-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.bz-state.is-running {
    color: var(--bz-success);
}

    .bz-state.is-running .bz-state-dot {
        background: var(--bz-success);
    }

.bz-state.is-off {
    padding: 2px 8px 2px 6px;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--bz-warning);
    background: var(--bz-warning-bg);
    border: 1px solid var(--bz-warning-border);
    border-radius: 11px;
}

    .bz-state.is-off .app-icon svg {
        width: 11px;
        height: 11px;
    }

.bz-state.is-draft {
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--bz-text-muted);
}

    .bz-state.is-draft .bz-state-dot {
        border: 1.5px dashed var(--bz-text-muted);
    }

/* The on/off toggle: 34 by 20, violet when on. */
.bz-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 34px;
    height: 20px;
    padding: 2px;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: var(--bz-switch-off);
    cursor: pointer;
    transition: background .15s ease;
}

    .bz-toggle::after {
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background: #FFFFFF;
    }

    .bz-toggle.is-on {
        justify-content: flex-end;
        background: var(--bz-violet);
    }

    .bz-toggle:disabled {
        background: var(--bz-switch-disabled);
        cursor: not-allowed;
    }

    .bz-toggle.is-busy {
        opacity: .6;
        cursor: progress;
    }

    .bz-toggle:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

/* A lapse: every workflow paused, and why. */
.bz-list-alert {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    background: var(--bz-warning-bg);
    border: 1px solid var(--bz-warning-border);
    border-radius: var(--bz-radius-lg);
    color: var(--bz-warning);
}

    .bz-list-alert > .app-icon svg {
        width: 19px;
        height: 19px;
        margin-top: 1px;
    }

.bz-list-alert-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.bz-list-alert-title {
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-list-alert-body {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bz-slate);
}

.bz-list-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 13px 16px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.bz-list-meter-label {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-list-meter-bar {
    width: 150px;
    height: 6px;
    border-radius: 3px;
    background: var(--bz-divider);
    overflow: hidden;
}

    .bz-list-meter-bar > span {
        display: block;
        height: 6px;
        background: var(--bz-gradient-panel);
    }

/* First use: nothing yet, and the three steps to something. */
.bz-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 56px 24px;
    text-align: center;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
}

.bz-list-empty-title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 18px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-list-empty-body {
    margin: -10px 0 0;
    max-width: 440px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bz-slate);
}

.bz-list-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

    .bz-list-steps li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--bz-slate);
    }

.bz-list-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--bz-violet-tint);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bz-violet);
}

/* A form in a dialog — create, rename, move, copy. Wider than a confirmation. */
.bz-dialog.is-form {
    width: 440px;
}

.bz-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bz-dialog-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.bz-dialog-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    font-size: 13px;
    color: var(--bz-ink);
}

@media (max-width: 1100px) {
    .bz-list-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .bz-list-tools {
        width: 100%;
    }

    .bz-list-search {
        flex: 1 1 100%;
        width: auto;
    }

    .bz-list-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The table becomes stacked rows: name first, the rest wrapping beneath it. */
    .bz-list-row.is-head {
        display: none;
    }

    .bz-list-row {
        flex-wrap: wrap;
        row-gap: 8px;
    }

        .bz-list-row .bz-list-cell {
            width: auto !important;
        }

            .bz-list-row .bz-list-cell.is-name {
                flex: 1 1 60%;
            }
}

/* ---------------------------------------------------------------- connections
   boards/05-product/Connections.html: cards grouped by category, each with the
   provider's tile, its status, when it was added, and what can be done with it. */

.bz-list-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-slate);
}

    .bz-list-note .app-icon svg {
        width: 15px;
        height: 15px;
        margin-top: 1px;
        color: var(--bz-violet);
    }

.bz-list-group {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.bz-list-group-title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bz-slate);
}

.bz-conn-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
}

.bz-conn-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--bz-radius-lg);
    background: var(--bz-violet-tint);
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-violet);
}

    .bz-conn-tile img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .bz-conn-tile.is-small {
        width: 28px;
        height: 28px;
        border-radius: var(--bz-radius-md);
        font-size: 12px;
    }

        .bz-conn-tile.is-small img {
            width: 16px;
            height: 16px;
        }

.bz-conn-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bz-conn-provider {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-brand);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-conn-name {
    font-size: 11.5px;
    color: var(--bz-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-premium {
    display: inline-flex;
    color: var(--bz-violet);
}

    .bz-premium .app-icon svg {
        width: 12px;
        height: 12px;
    }

.bz-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .bz-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 4px;
        background: currentColor;
        flex-shrink: 0;
    }

    .bz-status.is-ok {
        color: var(--bz-success);
    }

    .bz-status.is-warning {
        color: var(--bz-warning);
    }

    .bz-status.is-error {
        color: var(--bz-error);
    }

.bz-conn-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

    .bz-conn-actions .bz-btn {
        height: 30px;
        font-size: 12.5px;
    }

/* The provider picker: step one of Add a connection. */
.bz-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 360px;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

.bz-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--bz-radius-md);
    background: transparent;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--bz-ink);
    cursor: pointer;
}

    .bz-picker-option:hover {
        background: var(--bz-field-hover);
    }

    .bz-picker-option:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

.bz-picker-hint {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.bz-dialog-provider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bz-bg-app);
    border-radius: var(--bz-radius-md);
}

    .bz-dialog-provider .bz-conn-names span:first-child {
        font-size: 13px;
        font-weight: 600;
        color: var(--bz-ink);
    }

.bz-dialog-link {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--bz-violet);
    cursor: pointer;
}

/* ---------------------------------------------------------------- projects
   boards/04-workspace-company-settings/Projects.html: the inline editor, the colour
   swatches, and the delete dialog's two choices. */

.bz-project-editor {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 18px;
    background: var(--bz-surface);
    border-top: 3px solid var(--bz-violet);
    border-bottom: 1px solid var(--bz-field-border);
}

.bz-project-editor-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-brand);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    background: var(--bz-violet-tint);
    border: 1px solid var(--bz-violet-tint-border);
    border-radius: 11px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--bz-violet);
    white-space: nowrap;
}

.bz-project-editor-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

    .bz-project-editor-fields .is-name {
        width: 300px;
    }

    .bz-project-editor-fields .is-grow {
        flex: 1 1 240px;
    }

.bz-project-editor-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bz-swatches {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-swatches-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--bz-text-subtle);
}

.bz-swatches-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.bz-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--swatch);
    cursor: pointer;
}

    .bz-swatch.is-selected {
        box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--swatch);
    }

    .bz-swatch:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

.bz-choice-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bz-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    cursor: pointer;
}

    .bz-choice.is-selected {
        background: var(--bz-violet-tint-soft);
        border-color: var(--bz-violet);
    }

    .bz-choice input {
        width: 16px;
        height: 16px;
        margin: 1px 0 0;
        flex-shrink: 0;
        accent-color: var(--bz-violet);
    }

.bz-choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bz-choice-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--bz-ink);
}

.bz-choice-body {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--bz-slate);
}

@media (max-width: 800px) {
    .bz-project-editor-fields .is-name {
        width: 100%;
    }
}

/* ---------------------------------------------------------------- members
   boards/04-workspace-company-settings/Members.html */

.bz-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 17px;
    object-fit: cover;
    font-family: var(--font-brand);
    font-size: 12.5px;
    font-weight: 600;
    color: #FFFFFF;
}

.bz-invite-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-invite-row .is-grow {
        flex: 1 1 240px;
    }

    .bz-invite-row .is-role {
        width: 150px;
    }

    .bz-invite-row > .bz-btn {
        margin-top: 9px;
    }

.bz-text-action {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-violet);
    text-decoration: none; /* also used on links, e.g. Leave on your own Members row */
    cursor: pointer;
}

    .bz-text-action.is-quiet {
        color: var(--bz-slate);
    }

    .bz-text-action:hover {
        text-decoration: underline;
    }

    .bz-text-action:disabled {
        color: var(--bz-text-muted);
        cursor: default;
        text-decoration: none;
    }

    .bz-text-action:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
        border-radius: 2px;
    }

.bz-list-section-title {
    margin: 8px 0 0;
    font-family: var(--font-brand);
    font-size: 16px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-list-row.is-quiet {
    background: var(--bz-bg-app);
}

@media (max-width: 800px) {
    .bz-invite-row {
        flex-wrap: wrap;
    }

        .bz-invite-row .is-role {
            width: auto;
            flex: 1 1 140px;
        }
}

/* ---------------------------------------------------------------- usage
   boards/04-workspace-company-settings/Usage.html */

.bz-usage-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-usage-card.is-breakdown {
        gap: 6px;
        padding: 20px 24px 12px;
    }

.bz-usage-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bz-usage-figure {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bz-usage-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bz-text-subtle);
}

.bz-usage-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.bz-usage-number {
    font-family: var(--font-brand);
    font-size: 30px;
    font-weight: 700;
    color: var(--bz-ink);
    font-variant-numeric: tabular-nums;
}

.bz-usage-of {
    font-size: 13px;
    color: var(--bz-text-subtle);
}

.bz-usage-reset {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bz-ink);
}

.bz-usage-quiet {
    font-size: 12px;
    font-weight: 400;
    color: var(--bz-text-subtle);
}

.bz-usage-bar {
    height: 10px;
    background: var(--bz-divider);
    border-radius: 5px;
    overflow: hidden;
}

    .bz-usage-bar > span {
        display: block;
        height: 10px;
        background: var(--bz-gradient-panel);
        border-radius: 5px;
    }

    .bz-usage-bar.is-near > span {
        background: var(--bz-warning);
    }

    .bz-usage-bar.is-full > span {
        background: var(--bz-error);
    }

.bz-usage-pace {
    font-size: 12px;
    color: var(--bz-slate);
}

.bz-usage-breakdown-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.bz-usage-breakdown-title {
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    color: var(--bz-ink);
}

@media (max-width: 800px) {
    .bz-usage-reset {
        align-items: flex-start;
    }
}

/* ================================================================ designer
   boards/05-product/DesignerBuild.html: the canvas fills the page under the top bar,
   steps are native SVG, and the panel docks on the right. */

.shell-main.is-designer {
    max-width: none;
    margin: 0;
    padding: 0;
}

.dz-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-left: 8px;
}

.dz-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--bz-radius);
    color: var(--bz-slate);
}

    .dz-back:hover {
        background: var(--bz-divider);
    }

    .dz-back .app-icon svg {
        width: 15px;
        height: 15px;
    }

.dz-name {
    min-width: 0;
    max-width: 320px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--bz-radius);
    background: none;
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    color: var(--bz-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}

    .dz-name:hover:not(:disabled) {
        border-color: var(--bz-border);
    }

    .dz-name:disabled {
        cursor: default;
    }

.dz-rename {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dz-rename-input {
    width: 280px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--bz-violet);
    border-radius: var(--bz-radius);
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    color: var(--bz-ink);
    outline: none;
    box-shadow: 0 0 0 3px var(--bz-violet-tint);
}

.dz-rename-hint {
    font-size: 11.5px;
    color: var(--bz-text-muted);
    white-space: nowrap;
}

.dz-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 6px;
}

.dz-version {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 11px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    font-size: 12.5px;
    color: var(--bz-slate);
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

    .dz-version::-webkit-details-marker {
        display: none;
    }

    .dz-version .app-icon svg {
        width: 12px;
        height: 12px;
    }

.dz-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    color: var(--bz-slate);
    cursor: pointer;
    list-style: none;
}

    .dz-more::-webkit-details-marker {
        display: none;
    }

    .dz-more .app-icon svg {
        width: 15px;
        height: 15px;
    }

.dz-menu {
    min-width: 280px;
    padding: 6px 0;
}

.dz-menu-eyebrow {
    display: block;
    padding: 6px 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bz-text-subtle);
}

.dz-menu-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--bz-ink);
}

    .dz-menu-version > span {
        display: flex;
        gap: 8px;
        align-items: baseline;
    }

.dz-menu-quiet {
    display: block;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

.dz-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    color: var(--bz-ink);
    cursor: pointer;
}

    .dz-menu-item:hover {
        background: var(--bz-field-hover);
    }

    .dz-menu-item.is-danger {
        color: var(--bz-error);
    }

.dz-shell {
    display: flex;
    height: calc(100vh - 57px);
    min-height: 480px;
    background: var(--bz-bg-app);
}

.dz-canvas {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background-color: var(--dz-canvas);
    background-image: radial-gradient(var(--dz-dot) 1.1px, transparent 1.1px);
    background-size: 22px 22px;
    touch-action: none;
    cursor: grab;
}

    .dz-canvas.is-panning {
        cursor: grabbing;
    }

    .dz-canvas.is-dragging,
    .dz-canvas.is-dragging * {
        cursor: grabbing !important;
    }

.dz-canvas-note {
    align-self: flex-end;
    padding: 4px 9px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: 11px;
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.dz-panel {
    display: flex;
    flex-direction: column;
    width: 420px;
    flex-shrink: 0;
    background: var(--bz-surface);
    border-left: 1px solid var(--bz-border);
    box-shadow: -8px 0 24px rgba(20, 21, 28, .04);
}

.dz-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--bz-divider);
}

.dz-panel-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.dz-panel-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dz-panel-name {
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-panel-name-input {
    width: 100%;
    padding: 2px 4px;
    margin-left: -4px;
    border: 1px solid transparent;
    border-radius: var(--bz-radius);
    background: none;
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    color: var(--bz-ink);
}

    .dz-panel-name-input:hover:not([readonly]),
    .dz-panel-name-input:focus {
        border-color: var(--bz-border);
        outline: none;
    }

.dz-panel-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    padding: 16px 18px;
    overflow-y: auto;
}

    .dz-panel-body .auth-field {
        margin: 0;
    }

.dz-panel-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--bz-divider);
}

.dz-pick-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dz-pick-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--bz-ink);
}

.dz-pick-sub {
    font-size: 11.5px;
    color: var(--bz-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dz-field-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

    .dz-field-row > .auth-input {
        flex: 1;
        min-width: 0;
    }

.dz-textarea {
    resize: vertical;
    min-height: 76px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
}

.dz-expr {
    flex-shrink: 0;
    width: 34px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    background: var(--bz-surface);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--bz-violet);
    cursor: pointer;
}

    .dz-expr:hover {
        background: var(--bz-violet-tint);
    }

.dz-expr-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--bz-bg-app);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
}

.dz-expr-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--bz-radius);
    background: none;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    color: var(--bz-ink);
    cursor: pointer;
}

    .dz-expr-item:hover {
        background: var(--bz-surface);
    }

.dz-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11.5px;
    color: var(--bz-violet);
    word-break: break-all;
}

.bz-text-action.is-danger {
    color: var(--bz-error);
}

@media (max-width: 900px) {
    .dz-shell {
        position: relative;
    }

    .dz-panel {
        position: absolute;
        inset: 0 0 0 auto;
        width: min(400px, 100%);
        z-index: 5;
    }

    .dz-rename-hint {
        display: none;
    }
}

/* A search box inside a column — the designer's panel, a dialog — keeps its own height;
   the phone rule that lets it fill a toolbar row must not stretch it downwards. */
.dz-panel-body .bz-list-search,
.bz-dialog .bz-list-search {
    flex: none;
    width: 100%;
}

@media (max-width: 700px) {
    .dz-head {
        flex: 1;
        min-width: 0;
    }

    .dz-name {
        flex: 1;
        min-width: 60px;
    }

    .dz-version {
        padding: 0 8px;
    }

    /* The name needs the room more than the live version does. */
    .dz-pill.is-live,
    .dz-pill.is-off {
        display: none;
    }

    .dz-pill.is-draft {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* On a phone the name needs every pixel; the draft pill goes with the rest. */
@media (max-width: 600px) {
    .dz-pill.is-draft {
        display: none;
    }
}

/* ================================================================ designer canvas
   boards/05-product/DesignerV2.html. Steps lay themselves out top to bottom; the view
   (.dz-world) is moved and scaled by js/designer-canvas.js. The canvas colours are tokens
   so the board's dark frame can follow once the app has a dark theme. */

.dz-shell {
    --dz-canvas: #F7F7F9;
    --dz-dot: #DCDBE4;
    --dz-card: #FFFFFF;
    --dz-card-border: #EDECF2;
    --dz-card-border-hover: #DEDCE8;
    --dz-card-shadow: 0 1px 2px rgba(20, 21, 28, .04), 0 6px 16px -4px rgba(20, 21, 28, .10);
    --dz-card-shadow-hover: 0 2px 4px rgba(20, 21, 28, .05), 0 12px 26px -6px rgba(20, 21, 28, .16);
    --dz-title: #14151C;
    --dz-sub: #6B6D7C;
    --dz-line: #CFCDDA;
    --dz-port: #C7C4D6;
    --dz-ring: #FFFFFF;
    --dz-select: #7C3AED;
    --dz-select-halo: rgba(124, 58, 237, .10);
    --dz-focus: #0E7490;
}

.dz-world {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.dz-lines {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.dz-line {
    fill: none;
    stroke: var(--dz-line);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.dz-edge-add {
    cursor: pointer;
    outline: none;
}

.dz-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    pointer-events: stroke;
}

.dz-edge-plus {
    opacity: 0;
    pointer-events: all;
    transition: opacity .15s ease;
}

    .dz-edge-plus circle {
        fill: var(--dz-card);
        stroke: var(--bz-border);
        stroke-width: 1;
        filter: drop-shadow(0 1px 2px rgba(20, 21, 28, .12));
    }

    .dz-edge-plus path {
        stroke: var(--dz-sub);
        stroke-width: 2.2;
        stroke-linecap: round;
    }

.dz-edge-add:hover .dz-edge-plus,
.dz-edge-add:focus-visible .dz-edge-plus {
    opacity: 1;
}

.dz-edge-add:focus-visible .dz-edge-plus circle {
    stroke: var(--dz-focus);
    stroke-width: 2;
}

.dz-edge-add:hover .dz-edge-plus path {
    stroke: var(--dz-select);
}

.dz-canvas.is-dragging .dz-edge-add {
    pointer-events: none;
}

.dz-branch-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    pointer-events: none;
}

    .dz-branch-chip.is-yes {
        background: #F0FAF3;
        border: 1px solid #C9E7D3;
        color: #15803D;
    }

    .dz-branch-chip.is-no {
        background: #F3F3F6;
        border: 1px solid var(--bz-border);
        color: var(--dz-sub);
    }

.dz-zone {
    display: none;
}

.dz-drop-marker {
    position: absolute;
    display: none;
    width: 288px;
    height: 4px;
    border-radius: 2px;
    background: var(--dz-select);
    pointer-events: none;
    z-index: 4;
}

    .dz-drop-marker::before,
    .dz-drop-marker::after {
        content: "";
        position: absolute;
        top: -4px;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background: var(--dz-select);
    }

    .dz-drop-marker::before {
        left: -5px;
    }

    .dz-drop-marker::after {
        right: -5px;
    }

/* ---------------------------------------------------------------- the "+" at an open end */

.dz-slot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 180px;
    cursor: default;
}

.dz-slot-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 17px;
    background: var(--dz-card);
    border: 1.5px dashed var(--dz-port);
    color: var(--dz-sub);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    .dz-slot-plus .app-icon svg {
        width: 15px;
        height: 15px;
    }

    .dz-slot-plus:hover {
        border-color: var(--dz-select);
        border-style: solid;
        color: var(--dz-select);
    }

    .dz-slot-plus:focus-visible {
        outline: 2px solid var(--dz-focus);
        outline-offset: 3px;
    }

    .dz-slot-plus.is-quiet {
        width: 10px;
        height: 10px;
        cursor: default;
    }

.dz-slot-label {
    font-size: 11px;
    color: var(--dz-sub);
    text-align: center;
}

/* ---------------------------------------------------------------- a step */

.dz-card {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 288px;
    height: 80px;
    padding: 0 14px;
    background: var(--dz-card);
    border: 1px solid var(--dz-card-border);
    border-radius: 12px;
    box-shadow: var(--dz-card-shadow);
    cursor: pointer;
    outline: none;
    user-select: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .dz-card.is-trigger {
        border-radius: 20px 20px 12px 12px;
    }

    .dz-card:hover {
        border-color: var(--dz-card-border-hover);
        box-shadow: var(--dz-card-shadow-hover);
    }

    /* Selection: violet, on the card. */
    .dz-card.is-selected {
        padding: 0 13px;
        border: 2px solid var(--dz-select);
        box-shadow: 0 0 0 4px var(--dz-select-halo), 0 10px 28px -6px rgba(20, 21, 28, .20);
    }

    /* Keyboard focus: teal, outside the card — never violet. */
    .dz-card:focus-visible {
        outline: 2px solid var(--dz-focus);
        outline-offset: 3px;
    }

    .dz-card.is-skipped {
        border-style: dashed;
        border-color: #C9C7D4;
    }

    .dz-card.is-skipped.is-selected {
        border-color: var(--dz-select);
    }

    .dz-card.is-menu-open {
        z-index: 6;
    }

    .dz-card.is-drag-source {
        opacity: .35;
    }

    .dz-card[data-draggable="true"] {
        cursor: grab;
    }

.dz-card-ghost {
    position: fixed;
    z-index: 1000;
    margin: 0;
    transform-origin: 0 0;
    border: 2px solid var(--dz-select) !important;
    box-shadow: 0 18px 40px -8px rgba(20, 21, 28, .30) !important;
    pointer-events: none;
    cursor: grabbing;
}

    .dz-card-ghost .dz-kebab,
    .dz-card-ghost .dz-port,
    .dz-card-ghost .dz-tip {
        display: none !important;
    }

.dz-card-tile-wrap {
    position: relative;
    flex-shrink: 0;
}

.dz-card-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    color: #FFFFFF;
}

    .dz-card-tile svg {
        display: block;
    }

.dz-card-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--dz-ring);
    box-shadow: 0 0 0 2px var(--dz-ring), 0 1px 3px rgba(20, 21, 28, .20);
    outline: none;
}

.dz-card-badge-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background: #6B6D7C;
}

.dz-card.is-tested .dz-card-badge-dot { background: #15803D; }
.dz-card.is-needssetup .dz-card-badge-dot { background: #B45309; }
.dz-card.is-failed .dz-card-badge-dot { background: #DC2626; }
.dz-card.is-running .dz-card-badge-dot { background: #7C3AED; }

.dz-tip {
    position: absolute;
    left: -6px;
    top: calc(100% + 10px);
    display: none;
    height: 26px;
    padding: 0 10px;
    align-items: center;
    background: #14151C;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20, 21, 28, .25);
    font-size: 11.5px;
    font-weight: 400;
    color: #FFFFFF;
    white-space: nowrap;
    z-index: 8;
    pointer-events: none;
}

    .dz-tip::before {
        content: "";
        position: absolute;
        left: 14px;
        top: -4px;
        width: 8px;
        height: 8px;
        background: #14151C;
        transform: rotate(45deg);
    }

.dz-card-badge:hover .dz-tip,
.dz-card:focus-visible .dz-tip {
    display: inline-flex;
}

.dz-card-bolt {
    position: absolute;
    left: -5px;
    top: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 9px;
    background: var(--dz-ring);
    box-shadow: 0 0 0 2px var(--dz-ring), 0 1px 3px rgba(20, 21, 28, .20);
    color: #14151C;
}

    .dz-card-bolt .app-icon svg {
        width: 11px;
        height: 11px;
    }

.dz-card-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
    min-width: 0;
}

.dz-card.is-trigger .dz-card-text {
    gap: 2px;
}

.dz-card-when {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1;
    color: var(--dz-sub);
}

.dz-card-title {
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--dz-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-card-rename {
    width: 100%;
    height: 24px;
    padding: 0 6px;
    margin-left: -7px;
    border: 1px solid var(--dz-select);
    border-radius: var(--bz-radius);
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--dz-title);
    background: var(--dz-card);
    outline: none;
    box-shadow: 0 0 0 3px var(--dz-select-halo);
}

.dz-card-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dz-card-sub {
    min-width: 0;
    font-size: 11.5px;
    color: var(--dz-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The status word is never cut; the subtitle takes the ellipsis. */
.dz-card-word {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dz-sub);
}

.dz-card.is-needssetup .dz-card-word { color: #B45309; }
.dz-card.is-failed .dz-card-word { color: #DC2626; }
.dz-card.is-running .dz-card-word { color: #7C3AED; }

.dz-port {
    position: absolute;
    left: 140px;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border-radius: 4px;
    background: var(--dz-card);
    border: 2px solid var(--dz-port);
}

    .dz-port.is-in {
        top: -4px;
    }

    .dz-port.is-out {
        bottom: -4px;
    }

.dz-card.is-selected .dz-port {
    left: 139px;
}

.dz-card-tick {
    position: absolute;
    top: -7px;
    left: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--dz-select);
    border: 2px solid var(--dz-ring);
}

.dz-kebab {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    box-shadow: 0 1px 3px rgba(20, 21, 28, .10);
    color: var(--dz-sub);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}

    .dz-kebab .app-icon svg {
        width: 14px;
        height: 14px;
    }

.dz-card:hover .dz-kebab,
.dz-card:focus-within .dz-kebab,
.dz-card.is-menu-open .dz-kebab,
.dz-card.is-removed .dz-kebab {
    opacity: 1;
}

    .dz-kebab:focus-visible {
        opacity: 1;
        outline: 2px solid var(--dz-focus);
        outline-offset: 2px;
    }

.dz-card-menu {
    position: absolute;
    left: calc(100% - 8px);
    top: 34px;
    width: 264px;
    padding: 5px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-radius: 9px;
    box-shadow: 0 16px 40px rgba(20, 21, 28, .18);
    cursor: default;
    z-index: 7;
}

.dz-card.is-removed .dz-card-menu {
    width: 140px;
}

.dz-card-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 12.5px;
    color: var(--dz-title);
    text-align: left;
    cursor: pointer;
}

    .dz-card-menu-item:hover,
    .dz-card-menu-item:focus-visible {
        background: var(--bz-field-hover);
        outline: none;
    }

    .dz-card-menu-item.is-danger {
        color: var(--bz-error);
    }

        .dz-card-menu-item.is-danger:hover,
        .dz-card-menu-item.is-danger:focus-visible {
            background: #FEF4F4;
        }

/* ---------------------------------------------------------------- sticky notes */

.dz-note {
    position: absolute;
    width: 176px;
    min-height: 44px;
    padding: 11px 12px;
    box-sizing: border-box;
    background: #FEF6D8;
    border: 1px solid #EFE0A8;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(20, 21, 28, .07);
    cursor: grab;
    z-index: 2;
}

    .dz-note.is-moving {
        cursor: grabbing;
        box-shadow: 0 12px 28px rgba(20, 21, 28, .18);
        z-index: 5;
    }

    .dz-note.is-editing {
        cursor: default;
        border-color: #D9C46C;
    }

.dz-note-text {
    display: block;
    font-size: 11.5px;
    line-height: 1.55;
    color: #5B4B12;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dz-note-input {
    display: block;
    width: 100%;
    min-height: 80px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 11.5px;
    line-height: 1.55;
    color: #5B4B12;
    resize: vertical;
    outline: none;
}

    .dz-note-input::placeholder {
        color: #9A8440;
    }

.dz-note-delete {
    position: absolute;
    top: -9px;
    right: -9px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 10px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    box-shadow: 0 1px 3px rgba(20, 21, 28, .12);
    color: var(--dz-sub);
    cursor: pointer;
}

    .dz-note-delete .app-icon svg {
        width: 11px;
        height: 11px;
    }

.dz-note:hover .dz-note-delete,
.dz-note.is-editing .dz-note-delete,
.dz-note-delete:focus-visible {
    display: flex;
}

/* ---------------------------------------------------------------- zoom, minimap, shortcuts */

.dz-controls {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    cursor: default;
    z-index: 3;
}

.dz-zoom {
    display: inline-flex;
    align-items: center;
    height: 34px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(20, 21, 28, .07);
    overflow: hidden;
}

.dz-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-zoom-btn.is-wide {
        width: 34px;
    }

    .dz-zoom-btn .app-icon svg {
        width: 15px;
        height: 15px;
    }

    .dz-zoom-btn:hover {
        background: var(--bz-field-hover);
    }

    .dz-zoom-btn:focus-visible {
        outline: 2px solid var(--dz-focus);
        outline-offset: -2px;
    }

.dz-zoom-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
    color: var(--bz-slate);
}

.dz-zoom-sep {
    width: 1px;
    height: 18px;
    background: var(--bz-border);
}

.dz-minimap {
    position: relative;
    width: 152px;
    height: 96px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(20, 21, 28, .07);
    overflow: hidden;
    cursor: pointer;
}

.dz-minimap-card {
    position: absolute;
    border-radius: 2px;
    background: #C9C4DC;
    opacity: .8;
}

    .dz-minimap-card.is-selected {
        background: var(--dz-select);
        opacity: 1;
    }

.dz-minimap-view {
    position: absolute;
    border: 1.5px solid var(--dz-select);
    border-radius: 4px;
    background: rgba(124, 58, 237, .05);
    pointer-events: none;
}

.dz-shortcuts {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    cursor: default;
    z-index: 3;
}

.dz-shortcuts-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 10px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(20, 21, 28, .07);
    font-size: 11.5px;
    color: var(--bz-slate);
    white-space: nowrap;
    cursor: pointer;
}

    .dz-shortcuts-toggle:focus-visible {
        outline: 2px solid var(--dz-focus);
        outline-offset: 2px;
    }

.dz-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bz-slate);
}

.dz-shortcuts-card {
    width: 340px;
    padding: 14px 16px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-radius: 9px;
    box-shadow: 0 16px 40px rgba(20, 21, 28, .18);
}

.dz-shortcuts-title {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-brand);
    font-size: 13px;
    font-weight: 600;
    color: var(--dz-title);
}

.dz-shortcuts-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 14px;
    margin: 0;
    font-size: 12px;
    color: var(--bz-slate);
}

    .dz-shortcuts-list dt {
        display: flex;
        align-items: center;
        gap: 3px;
        white-space: nowrap;
    }

    .dz-shortcuts-list dd {
        margin: 0;
        align-self: center;
    }

/* ---------------------------------------------------------------- several selected */

.dz-multibar {
    position: absolute;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 8px 0 14px;
    background: #14151C;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(20, 21, 28, .32);
    cursor: default;
    z-index: 4;
}

.dz-multibar-count {
    font-size: 12.5px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
}

.dz-multibar-sep {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: rgba(255, 255, 255, .22);
}

.dz-multibar-btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 15px;
    background: rgba(255, 255, 255, .10);
    font-size: 12.5px;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    cursor: pointer;
}

    .dz-multibar-btn:hover {
        background: rgba(255, 255, 255, .18);
    }

    .dz-multibar-btn.is-danger {
        background: rgba(220, 38, 38, .22);
        color: #FFB4B4;
    }

        .dz-multibar-btn.is-danger:hover {
            background: rgba(220, 38, 38, .34);
        }

    .dz-multibar-btn:focus-visible,
    .dz-multibar-hint:focus-visible {
        outline: 2px solid #67E8F9;
        outline-offset: 2px;
    }

.dz-multibar-hint {
    height: 30px;
    padding: 0 10px;
    border: 0;
    background: none;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    cursor: pointer;
}

/* ---------------------------------------------------------------- the top bar */

.dz-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .dz-name .app-icon svg {
        width: 13px;
        height: 13px;
        color: var(--bz-text-muted);
    }

.dz-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .dz-pill.is-draft {
        background: #F4EFFE;
        border: 1px solid #DDD0FA;
        color: #7C3AED;
    }

    .dz-pill.is-failed {
        background: var(--bz-error-bg);
        border: 1px solid var(--bz-error-border);
        color: var(--bz-error);
    }

    .dz-pill.is-live {
        background: #F0FAF3;
        border: 1px solid #C9E7D3;
        color: #15803D;
    }

    .dz-pill.is-off {
        background: var(--bz-divider);
        border: 1px solid var(--bz-border);
        color: var(--bz-text-muted);
    }

.dz-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: currentColor;
    flex-shrink: 0;
}

.dz-history {
    display: inline-flex;
    align-items: center;
    height: 32px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    background: var(--bz-surface);
    overflow: hidden;
}

.dz-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-history-btn .app-icon svg {
        width: 16px;
        height: 16px;
    }

    .dz-history-btn:hover:not(:disabled) {
        background: var(--bz-field-hover);
    }

    .dz-history-btn:disabled {
        color: var(--bz-text-placeholder-toolbar);
        cursor: default;
    }

.dz-history-sep {
    width: 1px;
    height: 18px;
    background: var(--bz-border);
}

/* ---------------------------------------------------------------- the phone column
   One column, a condition's paths in turn, "+" targets 44px, settings as a sheet. */

.dz-canvas.is-phone {
    overflow-y: auto;
    touch-action: auto;
    cursor: default;
}

.dz-phone {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 16px 120px;
}

    .dz-phone .dz-card {
        position: relative;
        width: 100%;
    }

    .dz-phone .dz-kebab {
        opacity: 1;
    }

    .dz-phone .dz-card-menu {
        left: auto;
        right: 0;
        top: 40px;
        width: min(264px, 100%);
    }

    .dz-phone .dz-port {
        left: calc(50% - 4px);
    }

.dz-phone-link,
.dz-phone-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 12px;
}

.dz-phone-end {
    gap: 0;
}

    .dz-phone-end .dz-slot-label {
        margin-top: 7px;
    }

.dz-phone-line {
    width: 1.6px;
    height: 14px;
    background: var(--dz-port);
}

.dz-phone-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 22px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    box-shadow: 0 1px 3px rgba(20, 21, 28, .10);
    color: var(--dz-sub);
    cursor: pointer;
}

    .dz-phone-plus .app-icon svg {
        width: 16px;
        height: 16px;
    }

.dz-slot-plus.is-phone {
    width: 44px;
    height: 44px;
    border-radius: 22px;
}

.dz-phone-paths {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 12px 0 0;
}

.dz-phone-path {
    display: flex;
    flex-direction: column;
    padding-left: 14px;
    border-left: 2px solid var(--bz-border);
}

    .dz-phone-path > .dz-branch-chip.is-static {
        position: static;
        transform: none;
        align-self: flex-start;
        margin: 0 0 10px;
    }

@media (max-width: 767px) {
    .dz-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: none;
        height: 72vh;
        border-left: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 40px rgba(20, 21, 28, .22);
        z-index: 20;
    }

    .dz-panel-head {
        position: relative;
        padding-top: 18px;
    }

        .dz-panel-head::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 7px;
            width: 40px;
            height: 4px;
            margin-left: -20px;
            border-radius: 2px;
            background: #D8D6E0;
        }

    .dz-multibar {
        bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dz-card,
    .dz-edge-plus,
    .dz-kebab,
    .dz-slot-plus {
        transition: none;
    }
}

/* ================================================================ runs
   boards/05-product/RunHistory.html and RunDetail.html, and the designer's test panel. */

.bz-chip-toggle {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--bz-border);
    border-radius: 17px;
    background: var(--bz-surface);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-slate);
    cursor: pointer;
}

    .bz-chip-toggle.is-on {
        color: var(--bz-error-strong);
        background: var(--bz-error-bg);
        border-color: var(--bz-error-border);
    }

.bz-run-outcome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bz-text-muted);
}

.bz-run-outcome-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: currentColor;
}

.bz-run-outcome.is-succeeded {
    color: var(--bz-success);
}

.bz-run-outcome.is-failed {
    color: var(--bz-error);
}

.bz-run-outcome.is-running,
.bz-run-outcome.is-queued,
.bz-run-outcome.is-waiting {
    color: var(--bz-violet);
}

.bz-run-outcome.is-skipped,
.bz-run-outcome.is-cancelled {
    color: var(--bz-warning);
}

.bz-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--bz-text-muted);
}

    .bz-crumbs a {
        color: var(--bz-violet);
        text-decoration: none;
    }

.bz-run-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 18px 22px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
    font-size: 13px;
    color: var(--bz-ink);
}

    .bz-run-facts > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

.bz-list-alert.is-error {
    background: var(--bz-error-bg);
    border-color: var(--bz-error-border);
    color: var(--bz-error);
}

.bz-run-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.bz-run-strip-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    font-size: 12px;
    color: var(--bz-ink);
}

    .bz-run-strip-step::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 4px;
        background: var(--bz-switch-off);
    }

    .bz-run-strip-step.is-succeeded::before {
        background: var(--bz-success);
    }

    .bz-run-strip-step.is-failed {
        border-color: var(--bz-error-border);
    }

        .bz-run-strip-step.is-failed::before {
            background: var(--bz-error);
        }

    .bz-run-strip-step.is-waiting::before {
        background: var(--bz-violet);
    }

.bz-run-steps {
    display: flex;
    flex-direction: column;
}

.bz-run-step {
    border-bottom: 1px solid var(--bz-divider);
}

    .bz-run-step:last-child {
        border-bottom: 0;
    }

.bz-run-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--bz-ink);
    cursor: pointer;
}

.bz-run-step-mark {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 2px solid var(--bz-switch-off);
    box-sizing: border-box;
}

.bz-run-step.is-succeeded .bz-run-step-mark {
    border: 0;
    background: var(--bz-success) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 12 4 4 8-8%22/%3E%3C/svg%3E") center / 11px no-repeat;
}

.bz-run-step.is-failed .bz-run-step-mark {
    border: 0;
    background: var(--bz-error) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%223.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M8 8l8 8M16 8l-8 8%22/%3E%3C/svg%3E") center / 10px no-repeat;
}

.bz-run-step.is-waiting .bz-run-step-mark {
    border-color: var(--bz-violet);
}

.bz-run-step-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-run-step-time {
    font-size: 12px;
    color: var(--bz-text-muted);
    font-variant-numeric: tabular-nums;
}

.bz-run-step-caret {
    color: var(--bz-text-muted);
    transition: transform .15s ease;
}

    .bz-run-step-caret .app-icon svg {
        width: 13px;
        height: 13px;
    }

.bz-run-step.is-open .bz-run-step-caret {
    transform: rotate(180deg);
}

.bz-run-step-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 2px 14px 26px;
}

.bz-run-json {
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    overflow: hidden;
}

.bz-run-json-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bz-bg-app);
    border-bottom: 1px solid var(--bz-border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bz-text-subtle);
}

.bz-run-json pre {
    margin: 0;
    max-height: 320px;
    padding: 10px 12px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.bz-run-step-error {
    margin: 0;
    padding: 10px 12px;
    background: var(--bz-error-bg);
    border: 1px solid var(--bz-error-border);
    border-radius: var(--bz-radius-md);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bz-error-strong);
}

.bz-run-step-note {
    margin: 0;
    font-size: 12px;
    color: var(--bz-text-muted);
}

/* The designer while a test runs. */
.dz-test-bar {
    position: absolute;
    left: 50%;
    top: 14px;
    z-index: 4;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 32px);
    padding: 8px 10px 8px 14px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-violet-tint-border);
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(20, 21, 28, .08);
    font-size: 12.5px;
    color: var(--bz-ink);
    white-space: nowrap;
}

    .dz-test-bar.is-failed {
        border-color: var(--bz-error-border);
        color: var(--bz-error-strong);
    }

    .dz-test-bar.is-succeeded {
        border-color: var(--bz-success-border);
        color: var(--bz-success);
    }

    .dz-test-bar .bz-btn {
        height: 28px;
        font-size: 12px;
    }

.dz-test-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-text-muted);
}

.bz-usage-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bz-divider);
}

    .bz-usage-row:last-child {
        border-bottom: 0;
    }

.bz-usage-row-name {
    width: 190px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--bz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-usage-row-bar {
    flex: 1;
    height: 12px;
    background: var(--bz-divider);
    border-radius: 4px;
    overflow: hidden;
}

    .bz-usage-row-bar > span {
        display: block;
        height: 12px;
        background: var(--bz-violet);
        border-radius: 0 4px 4px 0;
    }

.bz-usage-row-count {
    width: 62px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    color: var(--bz-ink);
    font-variant-numeric: tabular-nums;
}

.bz-usage-row-share {
    width: 40px;
    flex-shrink: 0;
    text-align: right;
    font-size: 12px;
    color: var(--bz-text-subtle);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .bz-usage-row-name {
        width: 110px;
    }
}

/* Renaming: the input takes the room the draft pill and the hint had, on all but wide screens. */
@media (max-width: 1439.98px) {
    .dz-rename-hint,
    .dz-head:has(.dz-rename) .dz-pill {
        display: none;
    }
}

/* Between phone and wide, the designer's top bar sheds labels before anything overflows. */
@media (max-width: 1199.98px) {
    .dz-hide-narrow {
        display: none;
    }

    .dz-head .dz-pill {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dz-name-text {
        max-width: 100px;
    }

    .dz-rename-input {
        width: 150px;
    }
}

@media (max-width: 700px) {
    .dz-hide-narrow,
    .dz-actions .dz-version-wrap {
        display: none;
    }

    .dz-head {
        margin-left: 0;
    }
}

/* ================================================================ support
   boards/08-support-customers, 10-support-staff and AdminStaff. */

.bz-list-page.is-wide {
    max-width: 1320px;
}

.bz-form-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-form-card .is-role {
        width: 200px;
    }

.bz-form-pair {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--bz-divider);
    border-radius: var(--bz-radius-md);
}

    .bz-segmented button {
        height: 28px;
        padding: 0 12px;
        border: 0;
        border-radius: var(--bz-radius);
        background: transparent;
        font: inherit;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--bz-slate);
        cursor: pointer;
        white-space: nowrap;
    }

        .bz-segmented button.is-active {
            background: var(--bz-surface);
            color: var(--bz-ink);
            box-shadow: 0 1px 2px rgba(20, 21, 28, .08);
        }

.bz-ticket-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .bz-ticket-state::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 4px;
        background: currentColor;
    }

    .bz-ticket-state.is-open {
        color: var(--bz-violet);
    }

    .bz-ticket-state.is-waitingoncustomer {
        color: var(--bz-warning);
    }

    .bz-ticket-state.is-resolved {
        color: var(--bz-success);
    }

    .bz-ticket-state.is-closed {
        color: var(--bz-text-muted);
    }

.bz-target {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

    .bz-target.is-error {
        color: var(--bz-error);
        font-weight: 600;
    }

    .bz-target.is-warning {
        color: var(--bz-warning);
        font-weight: 600;
    }

    .bz-target.is-quiet {
        color: var(--bz-text-muted);
    }

.bz-ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    max-width: 1200px;
}

    .bz-ticket.is-wide {
        max-width: 1320px;
    }

.bz-ticket-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.bz-ticket-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bz-ticket-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-ticket-box .auth-field {
        margin: 0;
    }

.bz-ticket-box-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bz-slate);
}

    .bz-ticket-box-text.is-warning {
        padding: 10px 12px;
        color: var(--bz-warning-strong);
        background: var(--bz-warning-bg);
        border: 1px solid var(--bz-warning-border);
        border-radius: var(--bz-radius-md);
    }

.bz-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0;
    font-size: 12.5px;
}

    .bz-facts dt {
        color: var(--bz-text-muted);
    }

    .bz-facts dd {
        margin: 0;
        color: var(--bz-ink);
        text-align: right;
    }

.bz-ticket-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--bz-violet);
    text-decoration: none;
}

    .bz-ticket-file .app-icon svg {
        width: 13px;
        height: 13px;
    }

.bz-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bz-thread-message {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-thread-message.is-staff {
        background: var(--bz-violet-tint-soft);
    }

    .bz-thread-message.is-note {
        background: var(--bz-warning-bg-card);
        border-color: var(--bz-warning-border-card);
        border-style: dashed;
    }

.bz-thread-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.bz-thread-head {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--bz-ink);
}

.bz-thread-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bz-ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.bz-thread-event {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--bz-text-muted);
}

    .bz-thread-event .app-icon svg {
        width: 13px;
        height: 13px;
    }

.bz-pill.is-note {
    color: var(--bz-warning-strong);
    background: var(--bz-warning-bg);
    border-color: var(--bz-warning-border);
}

.bz-ticket-reply {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-ticket-reply textarea,
    .bz-form-card textarea {
        min-height: 96px;
        resize: vertical;
    }

.bz-drop {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bz-drop-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px;
    border: 1.5px dashed var(--bz-field-border-focus);
    border-radius: var(--bz-radius-lg);
    font-size: 13px;
    color: var(--bz-slate);
    text-align: center;
    cursor: pointer;
}

    .bz-drop-label input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .bz-drop-label strong {
        color: var(--bz-violet);
    }

.bz-drop.is-compact .bz-drop-label {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
}

.bz-drop-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bz-bg-app);
    border-radius: var(--bz-radius-md);
    font-size: 12.5px;
}

    .bz-drop-file > span:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.bz-insert {
    font-size: 12.5px;
}

    .bz-insert summary {
        list-style: none;
    }

.bz-insert-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    background: var(--bz-bg-app);
    border-radius: var(--bz-radius-md);
}

.staff-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-left: 6px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--bz-ink);
    font-size: 11.5px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
}

.bz-view-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -24px -24px 20px;
    padding: 10px 24px;
    background: var(--bz-ink);
    font-size: 12.5px;
    color: #FFFFFF;
}

    .bz-view-bar > span {
        flex: 1;
    }

    .bz-view-bar .app-icon svg {
        width: 16px;
        height: 16px;
    }

/* Help: the panel under the icon, the help page, and articles. */
.help-panel {
    width: 380px;
}

.help-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.bz-help {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}

.bz-help-list {
    display: flex;
    flex-direction: column;
}

.bz-help-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bz-divider);
    text-decoration: none;
    color: var(--bz-ink);
    font-size: 13px;
}

    .bz-help-link strong {
        font-weight: 600;
    }

    .bz-help-link span {
        font-size: 12px;
        color: var(--bz-text-muted);
    }

    .bz-help-link:hover strong {
        color: var(--bz-violet);
    }

.bz-help-get {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.bz-help-vote {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--bz-slate);
}

.bz-article {
    font-size: 14px;
    line-height: 1.7;
    color: var(--bz-ink);
}

    .bz-article h1 {
        margin: 6px 0 14px;
        font-family: var(--font-brand);
        font-size: 24px;
        line-height: 1.3;
    }

    .bz-article h2 {
        margin: 22px 0 8px;
        font-family: var(--font-brand);
        font-size: 18px;
    }

    .bz-article h3 {
        margin: 18px 0 6px;
        font-size: 15px;
    }

    .bz-article p,
    .bz-article ul,
    .bz-article ol {
        margin: 0 0 12px;
    }

    .bz-article code {
        padding: 1px 5px;
        background: var(--bz-divider);
        border-radius: 3px;
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 12.5px;
    }

    .bz-article pre {
        padding: 12px 14px;
        overflow-x: auto;
        background: var(--bz-bg-app);
        border: 1px solid var(--bz-border);
        border-radius: var(--bz-radius-md);
    }

        .bz-article pre code {
            padding: 0;
            background: none;
        }

    .bz-article blockquote {
        margin: 0 0 12px;
        padding: 10px 14px;
        background: var(--bz-violet-tint-soft);
        border-left: 3px solid var(--bz-violet);
        border-radius: 0 var(--bz-radius) var(--bz-radius) 0;
        color: var(--bz-slate);
    }

    .bz-article a {
        color: var(--bz-violet);
    }

    .bz-article table {
        border-collapse: collapse;
        margin-bottom: 12px;
    }

    .bz-article th,
    .bz-article td {
        padding: 6px 10px;
        border: 1px solid var(--bz-border);
        text-align: left;
    }

.bz-md {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-height: 520px;
}

.bz-md-pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
    min-width: 0;
    overflow: auto;
}

.bz-md-source {
    flex: 1;
    min-height: 460px;
    padding: 10px 12px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bz-ink);
    resize: vertical;
}

    .bz-md-source:focus {
        outline: none;
        border-color: var(--bz-field-border-focus);
        box-shadow: var(--bz-focus-ring);
    }

@media (max-width: 1000px) {
    .bz-ticket {
        grid-template-columns: minmax(0, 1fr);
    }

    .bz-md {
        grid-template-columns: minmax(0, 1fr);
    }

    .bz-view-bar {
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .help-panel {
        width: calc(100vw - 24px);
    }

    .staff-chip {
        display: none;
    }
}

/* ================================================================ top bar fit */

/* The nav gives way before anything else in the bar: it scrolls within itself rather than
   pushing the help, bell and avatar off the screen. */
.shell-topbar > * {
    flex-shrink: 0;
}

.shell-topbar > .shell-nav {
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .shell-topbar > .shell-nav::-webkit-scrollbar {
        display: none;
    }

/* A staff member who is also a customer: the chip opens the staff pages. */
.staff-menu > summary.staff-chip {
    gap: 4px;
    padding-right: 6px;
}

    .staff-menu > summary.staff-chip .app-icon,
    .staff-menu > summary.staff-chip .app-icon svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }

    .staff-menu > summary::-webkit-details-marker {
        display: none;
    }

@media (max-width: 700px) {
    /* Here the chip is the only way to the staff pages, so it stays. */
    .staff-menu > summary.staff-chip {
        display: inline-flex;
    }

    /* The header's panels hang from the screen, not from their button, which sits too
       close to the edge for a panel this wide. */
    .shell-topbar .notif-panel,
    .shell-topbar .help-panel {
        position: fixed;
        top: 62px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

/* The help panel's body scrolls; its rows keep their height rather than squashing to fit. */
.help-panel-body > * {
    flex-shrink: 0;
}

.help-panel-search {
    width: 100%;
}

.help-panel-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-subtle);
}

/* ================================================================ chat widget */

/* boards/08-support-customers/ChatCustomer.html and 09-support-visitors/ChatVisitor.html:
   a 380 × 720 panel 24px from the bottom right, the panel gradient across its header, the
   launcher pill 48 tall at the same corner. Built by js/chat-widget.js inside #bz-chat. */

#bz-chat {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1200;
    font-family: var(--font-body, system-ui, 'Segoe UI', sans-serif);
}

.bz-chat-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    width: 380px;
    height: min(720px, calc(100vh - 48px));
    background: var(--bz-surface);
    border: 1px solid #E7E5F0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(20, 21, 28, .18);
}

/* Visitors keep the launcher under the panel as its close button. */
.bz-chat-panel:has(~ .bz-chat-launcher) {
    bottom: 88px;
    height: min(720px, calc(100vh - 112px));
}

.bz-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bz-gradient-panel);
    color: #FFFFFF;
    flex-shrink: 0;
}

.bz-chat-head-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bz-chat-head-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .18);
    flex-shrink: 0;
}

.bz-chat-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bz-chat-head-title {
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.bz-chat-head-sub {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

.bz-chat-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bz-chat-head-person {
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    cursor: pointer;
}

    .bz-chat-head-person:hover {
        background: rgba(255, 255, 255, .12);
    }

.bz-chat-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    cursor: pointer;
}

    .bz-chat-head-icon:hover {
        background: rgba(255, 255, 255, .15);
    }

.bz-chat-head button:focus-visible,
.bz-chat-launcher:focus-visible,
.bz-chat-bubble:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--bz-ink);
}

.bz-chat-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-grow: 1;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    background: var(--bz-surface);
}

.bz-chat-body > * {
    flex-shrink: 0;
}

.bz-chat-p {
    margin: 0;
}

    .bz-chat-p + .bz-chat-p {
        margin-top: 8px;
    }

.bz-chat-mine {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.bz-chat-mine-bubble {
    max-width: 270px;
    padding: 9px 12px;
    background: var(--bz-violet);
    border-radius: 10px 10px 2px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}

.bz-chat-theirs {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.bz-chat-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--bz-violet-tint);
    border: 1px solid var(--bz-violet-tint-border);
    color: var(--bz-violet);
    flex-shrink: 0;
}

.bz-chat-theirs-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 300px;
    min-width: 0;
}

.bz-chat-theirs-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-chat-chip {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--bz-violet-tint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bz-violet);
}

.bz-chat-theirs-bubble {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: #F4F3F8;
    border-radius: 2px 10px 10px 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--bz-ink);
    overflow-wrap: anywhere;
}

.bz-chat-time {
    font-size: 10.5px;
    color: #7C7F92;
}

.bz-chat-sources {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bz-chat-sources-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #7C7F92;
}

.bz-chat-source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: #FFFFFF;
    border: 1px solid #E7E5F0;
    border-radius: 4px;
    color: var(--bz-violet);
    text-decoration: none;
}

    .bz-chat-source:hover {
        border-color: var(--bz-violet-tint-border);
        background: var(--bz-violet-tint-soft);
    }

.bz-chat-source-title {
    flex-grow: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-ink);
}

.bz-chat-source-where {
    font-size: 10.5px;
    color: #7C7F92;
    white-space: nowrap;
}

.bz-chat-follow {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-left: 34px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-slate);
}

.bz-chat-follow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bz-chat-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    background: #FFFFFF;
    border: 1px solid #E7E5F0;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-ink);
    white-space: nowrap;
    cursor: pointer;
    align-self: flex-start;
}

    .bz-chat-secondary:hover:not(:disabled) {
        border-color: var(--bz-violet);
        color: var(--bz-violet);
    }

.bz-chat-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    background: var(--bz-violet);
    border: none;
    border-radius: 4px;
    font-size: 13.5px;
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}

    .bz-chat-primary:hover:not(:disabled) {
        background: var(--bz-violet-hover);
        color: #FFFFFF;
    }

    .bz-chat-primary.is-busy,
    .bz-chat-primary:disabled {
        opacity: .7;
        cursor: progress;
    }

.bz-chat-text {
    height: 32px;
    padding: 0 6px;
    background: transparent;
    border: none;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-violet);
    cursor: pointer;
}

.bz-chat-secondary:focus-visible,
.bz-chat-primary:focus-visible,
.bz-chat-text:focus-visible,
.bz-chat-send:focus-visible,
.bz-chat-source:focus-visible {
    outline: none;
    box-shadow: var(--bz-focus-ring);
}

.bz-chat-event {
    align-self: center;
    font-size: 11px;
    color: #7C7F92;
    text-align: center;
}

.bz-chat-notice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--bz-violet-tint-soft);
    border: 1px solid var(--bz-violet-tint-border);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bz-slate);
}

    .bz-chat-notice > svg {
        color: var(--bz-violet);
    }

    .bz-chat-notice strong {
        color: var(--bz-ink);
        font-weight: 600;
    }

.bz-chat-error {
    margin: 0;
    padding: 9px 12px;
    background: var(--bz-error-bg);
    border: 1px solid var(--bz-error-border);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--bz-error-strong);
}

.bz-chat-thinking {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 14px;
    background: #F4F3F8;
    border-radius: 2px 10px 10px 10px;
}

.bz-chat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #A9A9B5;
    animation: bz-chat-dot 1.2s infinite ease-in-out;
}

    .bz-chat-dot:nth-child(2) { animation-delay: .15s; }
    .bz-chat-dot:nth-child(3) { animation-delay: .3s; }

@keyframes bz-chat-dot {
    0%, 80%, 100% { opacity: .35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

.bz-chat-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bz-chat-foot {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px 10px;
    border-top: 1px solid #F0F0F3;
    flex-shrink: 0;
    background: var(--bz-surface);
}

.bz-chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.bz-chat-compose-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-grow: 1;
    min-width: 0;
    margin: 0;
    padding: 6px 11px 7px;
    background: #FFFFFF;
    border: 1px solid #E7E5F0;
    border-radius: 4px;
    cursor: text;
}

    .bz-chat-compose-field:focus-within {
        border-color: var(--bz-violet);
        box-shadow: 0 0 0 1px var(--bz-violet);
    }

.bz-chat-compose-label {
    font-size: 11px;
    font-weight: 500;
    color: #7C7F92;
}

.bz-chat-compose-field textarea {
    width: 100%;
    min-height: 20px;
    max-height: 120px;
    padding: 0;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bz-ink);
}

    .bz-chat-compose-field textarea::placeholder {
        color: #A9A9B5;
    }

    .bz-chat-compose-field textarea:disabled {
        background: transparent;
    }

.bz-chat-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: var(--bz-gradient-panel);
    color: #FFFFFF;
    flex-shrink: 0;
    cursor: pointer;
}

    .bz-chat-send:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.bz-chat-note {
    margin: 0;
    font-size: 10.5px;
    color: #7C7F92;
    text-align: center;
}

.bz-chat-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.bz-chat-form {
    gap: 12px;
}

.bz-chat-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .bz-chat-field label {
        font-size: 12px;
        font-weight: 500;
        color: var(--bz-slate);
    }

    .bz-chat-field input,
    .bz-chat-field select,
    .bz-chat-field textarea {
        width: 100%;
        padding: 9px 11px;
        background: #FFFFFF;
        border: 1px solid var(--bz-field-border);
        border-radius: 4px;
        font: inherit;
        font-size: 13.5px;
        color: var(--bz-ink);
    }

        .bz-chat-field input[readonly] {
            background: var(--bz-field-bg-readonly);
            color: var(--bz-text-muted);
        }

        .bz-chat-field input:focus,
        .bz-chat-field select:focus,
        .bz-chat-field textarea:focus {
            outline: none;
            border-color: var(--bz-violet);
            box-shadow: 0 0 0 1px var(--bz-violet);
        }

    .bz-chat-field textarea {
        resize: vertical;
        min-height: 96px;
    }

.bz-chat-hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

.bz-chat-turnstile {
    min-height: 65px;
}

.bz-chat-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bz-chat-done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    background: var(--bz-success-bg);
    border: 1px solid var(--bz-success-border);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--bz-slate);
}

    .bz-chat-done > svg {
        color: var(--bz-success);
    }

    .bz-chat-done strong {
        font-size: 14px;
        color: var(--bz-ink);
    }

/* VisitorLauncher.html: a gradient pill, 48 tall, 24 from the right and bottom. */
.bz-chat-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 20px 0 17px;
    border: none;
    border-radius: 24px;
    background: var(--bz-gradient-panel);
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    box-shadow: 0 8px 22px rgba(124, 58, 237, .32);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .bz-chat-launcher:hover {
        filter: brightness(.94);
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(124, 58, 237, .38);
    }

    .bz-chat-launcher:active {
        filter: brightness(.86);
        transform: translateY(1px);
        box-shadow: 0 4px 12px rgba(124, 58, 237, .3);
    }

    .bz-chat-launcher.is-open {
        width: 48px;
        padding: 0;
        justify-content: center;
    }

.bz-chat-online {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* A customer's chat, minimised: a round bubble where the panel was. */
.bz-chat-bubble {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bz-gradient-panel);
    color: #FFFFFF;
    box-shadow: 0 10px 26px rgba(20, 21, 28, .24);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .bz-chat-launcher,
    .bz-chat-launcher:hover,
    .bz-chat-launcher:active {
        transition: none;
        transform: none;
    }

    .bz-chat-dot {
        animation: none;
    }
}

/* On a phone the chat takes the screen, and the launcher keeps 16px from the edges. */
@media (max-width: 560px) {
    .bz-chat-panel,
    .bz-chat-panel:has(~ .bz-chat-launcher) {
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100dvh;
        border: none;
        border-radius: 0;
    }

    .bz-chat-launcher {
        right: 16px;
        bottom: 16px;
    }

        .bz-chat-launcher.is-open {
            display: none;
        }

    .bz-chat-bubble {
        right: 16px;
        bottom: 16px;
    }
}

/* "Chat with us" is a button — it opens the chat, it goes nowhere — dressed as the help
   links beside it. */
button.bz-help-link {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bz-divider);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    button.bz-help-link:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

.bz-help-none {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* /docs — the public help, read without an account. */
.bz-docs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--bizomate-spacing-lg) 0 96px;
}

/* boards/10-support-staff/WriterUnanswered.html — a group, the ways it was asked, where it stands. */
.bz-question-row {
    align-items: flex-start;
}

.bz-question {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: normal;
}

    .bz-question strong {
        font-weight: 600;
        color: var(--bz-ink);
    }

.bz-question-asked {
    font-size: 12.5px;
    color: var(--bz-text-muted);
}

.bz-question-count {
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-question-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    white-space: normal;
}

.bz-question-state {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--bz-violet-tint);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bz-violet);
}

    .bz-question-state.is-none {
        background: #F4F3F8;
        color: var(--bz-slate);
    }

    .bz-question-state.is-warning {
        background: var(--bizomate-warning-bg);
        color: var(--bizomate-warning);
    }

    .bz-question-state.is-done {
        background: var(--bz-success-bg);
        color: var(--bz-success);
    }

.bz-question-article {
    font-size: 12px;
    color: var(--bz-text-muted);
}

/* Live chat (ChatCustomer.html, "With an agent" onwards): a person's initials where the
   assistant's mark was, the queue, a dropped connection, and the minimised bubble's count. */
.bz-chat-head-mark.is-person {
    font-family: var(--font-brand);
    font-size: 12.5px;
    font-weight: 600;
}

.bz-chat-avatar.is-person {
    background: var(--bz-cyan-700);
    border-color: var(--bz-cyan-700);
    font-size: 10.5px;
    font-weight: 600;
    color: #FFFFFF;
}

.bz-chat-theirs-role {
    font-size: 10.5px;
    font-weight: 400;
    color: #7C7F92;
}

.bz-chat-mine.is-pending .bz-chat-mine-bubble {
    opacity: .6;
}

.bz-chat-notice.is-warning {
    background: var(--bizomate-warning-bg);
    border-color: #F3D9A4;
}

.bz-chat-notice.is-queue strong {
    font-family: var(--font-brand);
    font-size: 14px;
}

.bz-chat-text.is-inline {
    height: auto;
    padding: 0;
    font-size: inherit;
    text-decoration: none;
}

    .bz-chat-text.is-inline:hover {
        text-decoration: underline;
    }

.bz-chat-done.is-plain {
    background: #FFFFFF;
    border-color: #E7E5F0;
}

.bz-chat-bubble-initials {
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
}

.bz-chat-unread {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #DC2626;
    box-shadow: 0 0 0 2px #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    color: #FFFFFF;
}

.bz-chat-bubble-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .bz-chat-bubble-wrap .bz-chat-bubble {
        position: relative;
        right: auto;
        bottom: auto;
    }

.bz-chat-bubble-note {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #E7E5F0;
    border-radius: 8px;
    box-shadow: var(--bz-shadow-2);
    font-size: 12px;
    color: var(--bz-slate);
}

    .bz-chat-bubble-note strong {
        font-size: 12.5px;
        color: var(--bz-ink);
    }

@media (max-width: 560px) {
    .bz-chat-bubble-wrap {
        right: 16px;
        bottom: 16px;
    }
}

/* ================================================================ live chat console */

/* boards/10-support-staff/ConsoleLiveChat.html: the queue on the left, then up to three
   chats side by side; on a narrow screen they stack. */
.bz-live {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.bz-live-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bz-live-presence {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bz-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #A9A9B5;
}

    .bz-live-dot.is-on {
        background: #22C55E;
    }

.bz-live-grid {
    display: grid;
    grid-template-columns: 260px repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.bz-live-queue,
.bz-live-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.bz-live-queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bz-live-empty {
    margin: 0;
    font-size: 12.5px;
    color: var(--bz-text-muted);
}

.bz-live-none {
    grid-column: span 3;
}

.bz-live-waiting {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--bz-divider);
    border-radius: 6px;
    font-size: 12.5px;
}

.bz-live-waiting-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.bz-live-tags {
    display: flex;
    gap: 5px;
}

.bz-live-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: #F4F3F8;
    font-size: 11px;
    font-weight: 600;
    color: var(--bz-slate);
    white-space: nowrap;
}

    .bz-live-tag.is-plan {
        background: var(--bz-violet-tint);
        color: var(--bz-violet);
    }

.bz-live-preview {
    color: var(--bz-slate);
    overflow-wrap: anywhere;
}

.bz-live-chat {
    min-height: 480px;
    max-height: calc(100vh - 200px);
}

.bz-live-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bz-divider);
}

.bz-live-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bz-gradient-panel);
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    flex-shrink: 0;
}

.bz-live-chat-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

    .bz-live-chat-who .bz-conn-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.bz-live-chat-actions {
    display: flex;
    gap: 8px;
}

.bz-live-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    background: var(--bz-violet-tint-soft);
    border: 1px solid var(--bz-violet-tint-border);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--bz-slate);
}

.bz-live-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
}

.bz-live-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: flex-start;
    max-width: 88%;
    padding: 8px 11px;
    background: #F4F3F8;
    border-radius: 2px 10px 10px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bz-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .bz-live-msg small {
        font-size: 10.5px;
        color: #7C7F92;
        white-space: normal;
    }

    .bz-live-msg.is-mine {
        align-self: flex-end;
        background: var(--bz-violet);
        border-radius: 10px 10px 2px 10px;
        color: #FFFFFF;
    }

        .bz-live-msg.is-mine small {
            color: rgba(255, 255, 255, .8);
        }

    .bz-live-msg.is-assistant {
        background: #FFFFFF;
        border: 1px solid #E7E5F0;
    }

.bz-live-event {
    align-self: center;
    font-size: 11px;
    color: #7C7F92;
    text-align: center;
}

.bz-live-note {
    padding: 8px 11px;
    background: var(--bizomate-warning-bg);
    border: 1px dashed #E7C07A;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--bz-slate);
    white-space: pre-wrap;
}

.bz-live-reply {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--bz-divider);
}

    .bz-live-reply textarea {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--bz-field-border);
        border-radius: 4px;
        font: inherit;
        font-size: 13px;
        resize: vertical;
    }

        .bz-live-reply textarea:focus {
            outline: none;
            border-color: var(--bz-violet);
            box-shadow: 0 0 0 1px var(--bz-violet);
        }

.bz-live-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bz-live-articles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #FBFAFE;
    border: 1px solid var(--bz-divider);
    border-radius: 6px;
}

.bz-live-article {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    background: #FFFFFF;
    border: 1px solid #E7E5F0;
    border-radius: 4px;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

    .bz-live-article span {
        font-size: 11px;
        color: var(--bz-text-muted);
    }

    .bz-live-article:hover {
        border-color: var(--bz-violet);
    }

.bz-dialog-choice.is-disabled {
    opacity: .55;
}

@media (max-width: 1100px) {
    .bz-live-grid {
        grid-template-columns: 1fr;
    }

    .bz-live-none {
        grid-column: auto;
    }
}

/* Beats ".bz-help-link span", which greys every line under a help link. */
.bz-help-link .bz-help-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bz-success);
}

/* ChatCustomer.html, "Sharing": a bar across the top of the page while this tab is shared,
   above everything, with the way to stop it always in reach. */
.bz-share-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bz-ink);
    font-size: 13px;
    color: #FFFFFF;
    flex-wrap: wrap;
}

.bz-share-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .3);
}

.bz-share-meta {
    color: rgba(255, 255, 255, .75);
}

.bz-share-stop {
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    background: #DC2626;
    font: inherit;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
}

    .bz-share-stop:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--bz-ink), 0 0 0 4px #FFFFFF;
    }

.bz-chat-notice.is-share strong {
    font-family: var(--font-brand);
    font-size: 14px;
}

.bz-chat-notice label.bz-chat-secondary {
    margin: 0;
}

/* boards/10-support-staff/ConsoleScreenShare.html: the customer's screen large, the chat
   beside it; and the share's state inside a chat column. */
.bz-live-watch {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bz-live-watch-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bz-live-watch-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 14px;
    align-items: start;
}

.bz-live-screen-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.bz-live-screen-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.bz-live-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #14151C;
    border-radius: 6px;
    overflow: hidden;
}

    .bz-live-screen video,
    .bz-live-screen > div {
        width: 100%;
        height: 100%;
    }

.bz-live-screen-ended {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 420px;
    padding: 18px 20px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: var(--bz-shadow-3);
    font-size: 13px;
    color: var(--bz-slate);
    text-align: center;
}

    .bz-live-screen-ended strong {
        font-family: var(--font-brand);
        font-size: 15px;
        color: var(--bz-ink);
    }

.bz-live-screen-note {
    margin: 0;
    font-size: 12px;
    color: var(--bz-text-muted);
}

.bz-live-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bz-violet-tint-soft);
    border: 1px solid var(--bz-violet-tint-border);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--bz-slate);
    flex-wrap: wrap;
}

    .bz-live-share.is-declined {
        background: #F4F3F8;
        border-color: var(--bz-divider);
    }

    .bz-live-share.is-sharing {
        background: var(--bz-success-bg);
        border-color: var(--bz-success-border);
    }

.bz-live-reply-tools {
    display: flex;
    gap: 12px;
}

@media (max-width: 1100px) {
    .bz-live-watch-body {
        grid-template-columns: 1fr;
    }
}

/* boards/06-patterns-utility/AccountSuspended.html */
.bz-suspended-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
}

    .bz-suspended-facts dt {
        color: var(--bz-text-muted);
        font-weight: 500;
    }

    .bz-suspended-facts dd {
        margin: 0;
        color: var(--bz-ink);
    }

.bz-suspended-reason {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-left: 3px solid var(--bz-violet);
    border-radius: 6px;
}

    .bz-suspended-reason p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--bz-ink);
        white-space: pre-wrap;
    }

.bz-suspended-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .bz-suspended-actions form {
        margin: 0;
    }

/* Platform admin lists with a detail panel beside them (AdminCompanies.html, AdminShards.html). */
.bz-admin-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 16px;
    align-items: start;
}

    .bz-admin-split > :only-child {
        grid-column: 1 / -1;
    }

button.bz-admin-row {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bz-divider);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    button.bz-admin-row:hover,
    button.bz-admin-row.is-selected {
        background: var(--bz-violet-tint-soft);
    }

    button.bz-admin-row:focus-visible {
        outline: none;
        box-shadow: inset var(--bz-focus-ring);
    }

.bz-admin-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.bz-admin-action,
.bz-admin-suspended {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--bz-divider);
    border-radius: 6px;
    font-size: 13px;
}

.bz-admin-suspended {
    background: var(--bz-error-bg);
    border-color: var(--bz-error-border);
}

    .bz-admin-suspended p {
        margin: 0;
        white-space: pre-wrap;
    }

.bz-admin-log {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    border-bottom: 1px solid var(--bz-divider);
    font-size: 12.5px;
}

    .bz-admin-log span {
        color: var(--bz-text-muted);
    }

.bz-dialog-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    color: var(--bz-slate);
}

@media (max-width: 1100px) {
    .bz-admin-split {
        grid-template-columns: 1fr;
    }
}

.bz-admin-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

/* Section 24: a banner under the top bar until a maintenance window begins. */
.bz-maintenance-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 48px 8px 16px;
    position: relative;
    background: var(--bizomate-warning-bg);
    border-bottom: 1px solid #F3D9A4;
    font-size: 13px;
    color: var(--bz-ink);
}

    .bz-maintenance-banner[hidden] {
        display: none;
    }

    .bz-maintenance-banner.is-preview {
        padding: 8px 12px;
        border: 1px solid #F3D9A4;
        border-radius: 6px;
        justify-content: flex-start;
    }

.bz-maintenance-dismiss {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--bz-slate);
    cursor: pointer;
}

    .bz-maintenance-dismiss:hover {
        background: rgba(20, 21, 28, .06);
    }

/* boards/11-platform-admin/AdminBroadcastCompose.html */
.bz-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.bz-compose-main,
.bz-compose-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bz-compose fieldset {
    margin: 0;
    min-width: 0;
}

.bz-compose .bz-form-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bz-compose-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bz-compose-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--bz-field-border);
    border-radius: 6px;
    font-size: 13.5px;
    cursor: pointer;
}

    .bz-compose-type.is-on {
        border-color: var(--bz-violet);
        background: var(--bz-violet-tint-soft);
        color: var(--bz-violet);
        font-weight: 500;
    }

.bz-compose-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.bz-compose-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.bz-compose-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bz-slate);
}

.bz-compose-preview {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--bz-divider);
    border-radius: 6px;
    font-size: 13px;
}

    .bz-compose-preview span {
        color: var(--bz-slate);
    }

    .bz-compose-preview small {
        font-size: 11.5px;
        color: var(--bz-text-muted);
    }

@media (max-width: 1100px) {
    .bz-compose {
        grid-template-columns: 1fr;
    }
}

.bz-admin-code {
    display: block;
    margin: 0;
    padding: 8px 10px;
    background: #F4F3F8;
    border-radius: 4px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--bz-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    width: 100%;
}

.bz-admin-number {
    width: 120px;
    padding: 7px 10px;
    border: 1px solid var(--bz-field-border);
    border-radius: 4px;
    font: inherit;
}

/* ---------------------------------------------------------------- workflow import
   The list page's Import dialog (decisions section 17 step 12). No board draws it; built
   from the dialog, banner and form patterns already on the list page. */

.bz-dialog.is-wide {
    width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.bz-list-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.bz-import-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
    border: 1.5px dashed var(--bz-field-border);
    border-radius: var(--bz-radius-md);
    background: var(--bz-bg-app);
    cursor: pointer;
    color: var(--bz-slate);
}

    .bz-import-drop:hover,
    .bz-import-drop:focus-within {
        border-color: var(--bz-violet);
        background: var(--bz-violet-tint-soft);
    }

    .bz-import-drop.is-busy {
        cursor: progress;
    }

    .bz-import-drop .app-icon,
    .bz-import-drop .app-icon svg {
        width: 22px;
        height: 22px;
        color: var(--bz-violet);
    }

/* The real input covers the whole area, invisible, so a click or a dropped file anywhere
   on it chooses the file. */
.bz-import-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bz-import-drop-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-import-drop-note,
.bz-import-quiet {
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--bz-text-muted);
}

.bz-import-errors {
    margin: 4px 0 0;
    padding-left: 18px;
}

.bz-import-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bz-import-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-import-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .bz-import-list li {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 8px 12px;
        border: 1px solid var(--bz-border);
        border-radius: var(--bz-radius-md);
        font-size: 13px;
    }

.bz-import-need {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

/* A long file's lists scroll on their own, so its connections and the buttons stay near. */
.bz-import-list.is-scroll {
    max-height: 216px;
    overflow-y: auto;
}

/* ---------------------------------------------------------------- deleting an account
   Your data's confirmation (decisions section 17 step 14): what happens, one line each. */

.bz-delete-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--bz-slate);
}

    .bz-delete-list li.is-danger {
        color: var(--bz-error-strong);
    }

    .bz-delete-list a {
        margin-left: 6px;
        font-weight: 600;
        color: var(--bz-violet);
    }

/* ---------------------------------------------------------------- two-factor methods
   boards/03-account-settings/TwoFactorSettings: every method in one list. */

.tfa-methods {
    display: flex;
    flex-direction: column;
    max-width: 640px;
}

.tfa-suggest {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 640px;
}

.tfa-warning {
    background: var(--bz-warning-bg);
    color: var(--bz-warning);
}

    .tfa-warning a {
        margin-left: 6px;
        font-weight: 600;
        color: inherit;
        text-decoration: underline;
    }

.tfa-group {
    margin: 14px 0 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
}

.tfa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bz-divider);
}

.tfa-row-text {
    min-width: 0;
}

.tfa-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--bz-ink);
}

.tfa-row-meta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--bz-slate);
}

.tfa-row-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

    .tfa-row-actions .settings-btn {
        white-space: nowrap;
        text-decoration: none;
    }

.tfa-tag {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

    .tfa-tag.is-new {
        background: var(--bz-violet-tint);
        color: var(--bz-violet);
    }

    .tfa-tag.is-low {
        background: var(--bz-warning-bg);
        color: var(--bz-warning);
    }

.tfa-add {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

    .tfa-add .settings-btn {
        text-decoration: none;
    }

.tfa-still {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 560px) {
    .tfa-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------- account settings, to the boards
   boards/03-account-settings. Buttons are the board's settings size — 32px, 13px type, 4px
   corners; the small one in rows 30px. Cards stack their contents with a gap, and a card's
   actions sit inside it, under the last field. */

.settings-btn {
    height: 32px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: 4px;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.settings-btn.settings-btn-sm {
    height: 30px;
    font-size: 12.5px;
}

.settings-btn .app-icon,
.settings-btn .app-icon svg {
    width: 14px;
    height: 14px;
}

.settings-banner {
    max-width: 520px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

    .settings-banner.is-wide {
        max-width: 640px;
    }

.settings-form-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.settings-card-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

.settings-footnote {
    max-width: 520px;
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--bz-text-muted);
}

.settings-after-card {
    margin-bottom: 16px;
}

/* Profile's photo row */
.settings-photo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-photo-img,
.settings-photo-initials {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}

.settings-photo-img {
    object-fit: cover;
}

.settings-photo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bz-gradient-brand);
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 18px;
}

.settings-photo-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-photo-note {
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.settings-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .settings-photo-actions label.settings-btn {
        position: relative;
        cursor: pointer;
    }

/* The file input covers its "Change photo" label, invisible, so the label opens the picker. */
.settings-photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.settings-photo-chosen {
    font-size: 12px;
    color: var(--bz-slate);
}

/* Notifications */
.settings-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.settings-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--bz-violet-tint-soft);
    color: var(--bz-violet);
    flex-shrink: 0;
}

.settings-info-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bz-ink);
    margin-bottom: 3px;
}

.settings-info-body {
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.settings-switch-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-card-eyebrow {
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
}

.settings-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bz-divider);
    cursor: pointer;
}

    .settings-switch-row:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
    }

.settings-switch-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.settings-switch-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bz-ink);
}

.settings-switch-body {
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-slate);
}

/* The switch: the real checkbox, invisible over a drawn track and thumb. */
.settings-toggle {
    position: relative;
    width: 36px;
    height: 21px;
    flex-shrink: 0;
    margin-top: 2px;
}

    .settings-toggle input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

.settings-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background: var(--bz-switch-off);
    transition: background .15s ease;
}

    .settings-toggle-track::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #fff;
        transition: transform .15s ease;
    }

.settings-toggle input:checked + .settings-toggle-track {
    background: var(--bz-violet);
}

    .settings-toggle input:checked + .settings-toggle-track::after {
        transform: translateX(15px);
    }

.settings-toggle input:focus-visible + .settings-toggle-track {
    outline: 2px solid var(--bz-violet);
    outline-offset: 2px;
}

/* Active sessions: Sign out on a row is link weight. */
.settings-link-btn {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bz-violet);
    cursor: pointer;
    white-space: nowrap;
}

    .settings-link-btn:hover {
        text-decoration: underline;
    }

.settings-list-card {
    padding-top: 6px;
    padding-bottom: 6px;
}

    .settings-list-card .session-row:last-child {
        border-bottom: none;
    }

/* Two-factor, to the board's detail */
.tfa-methods {
    gap: 4px;
}

.tfa-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.tfa-title {
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    color: var(--bz-ink);
}

.tfa-lede {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.tfa-group {
    font-family: var(--font-brand);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
}

.tfa-row {
    gap: 13px;
    padding: 14px 0;
    justify-content: flex-start;
}

.tfa-row-text {
    flex: 1 1 auto;
}

.tfa-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--bz-violet-tint-soft);
    color: var(--bz-violet);
    flex-shrink: 0;
}

.tfa-row-name {
    font-size: 13.5px;
    font-weight: 600;
    flex-wrap: wrap;
    gap: 7px;
}

.tfa-row-meta {
    font-size: 12px;
}

.tfa-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    background: #F4F3F8;
    border: 1px solid #E7E5F0;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bz-slate);
    white-space: nowrap;
}

/* The close control a dismissible banner gets from auth.js. */
.bz-banner[data-dismissible] {
    position: relative;
    padding-right: 34px;
}

.bz-banner-close {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: inherit;
    font-size: 17px;
    line-height: 1;
    opacity: .7;
    cursor: pointer;
}

    .bz-banner-close:hover {
        opacity: 1;
        background: rgba(20, 21, 28, .06);
    }

/* ---------------------------------------------------------------- platform admin: catalogues
   AdminProviders, AdminEmailTemplates, AdminPlans, AdminGeoIP, AdminStaff — 13px tables with
   44px rows, and an editor docked beside the list rather than a modal. */

.bz-list-tools-end {
    margin-left: auto;
    display: inline-flex;
    gap: 10px;
}

.bz-list-cell.is-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.bz-admin-table .bz-list-row {
    gap: 14px;
    min-height: 44px;
    padding: 0 16px;
}

    .bz-admin-table .bz-list-row.is-head {
        min-height: 0;
        padding: 11px 16px;
        font-size: 11px;
    }

.bz-admin-table .bz-list-cell {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .bz-admin-table .bz-list-cell strong {
        font-weight: 500;
    }

.bz-admin-edit {
    font-weight: 500;
    color: var(--bz-violet);
    text-align: right;
}

.bz-provider-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bz-provider-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--bz-violet-tint);
}

    .bz-provider-tile img {
        width: 15px;
        height: 15px;
        object-fit: contain;
    }

.bz-provider-premium,
.bz-admin-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bz-provider-premium {
    color: var(--bz-violet);
}

    .bz-provider-premium .app-icon svg {
        width: 11px;
        height: 11px;
    }

.bz-admin-status .app-icon svg {
    width: 15px;
    height: 15px;
}

.bz-admin-status.is-ok .app-icon {
    color: var(--bz-success);
}

.bz-admin-status.is-warn .app-icon {
    color: var(--bz-warning);
}

.bz-admin-panel.is-editor {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.bz-admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid var(--bz-field-border);
}

    .bz-admin-panel-head h2 {
        margin: 0;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--bz-ink);
    }

.bz-admin-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--bz-text-muted);
    cursor: pointer;
}

    .bz-admin-close:hover {
        background: rgba(20, 21, 28, .06);
    }

    .bz-admin-close:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .bz-admin-close .app-icon svg {
        width: 15px;
        height: 15px;
    }

.bz-admin-panel-body {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 18px;
}

.bz-admin-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    background: #FDFDFE;
    border-top: 1px solid var(--bz-field-border);
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.bz-admin-panel-actions {
    display: inline-flex;
    gap: 9px;
}

.bz-admin-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bz-admin-choice-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bz-admin-choice-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--bz-text-muted);
}

.bz-admin-choice {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--bz-field-border);
    border-radius: 4px;
    overflow: hidden;
}

    .bz-admin-choice button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 16px;
        border: 0;
        background: var(--bz-surface);
        font: inherit;
        font-size: 13px;
        color: var(--bz-slate);
        cursor: pointer;
    }

        .bz-admin-choice button + button {
            border-left: 1px solid var(--bz-field-border);
        }

        .bz-admin-choice button.is-active {
            background: var(--bz-violet-tint);
            font-weight: 500;
            color: var(--bz-violet);
        }

        .bz-admin-choice button:focus-visible {
            outline: none;
            box-shadow: inset var(--bz-focus-ring);
        }

        .bz-admin-choice button .app-icon svg {
            width: 11px;
            height: 11px;
            color: var(--bz-violet);
        }

.bz-admin-masked {
    letter-spacing: 3px;
}

.bz-provider-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.bz-link-danger {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--bz-error-strong);
    cursor: pointer;
}

    .bz-link-danger:hover {
        text-decoration: underline;
    }

    .bz-link-danger:focus-visible {
        outline: none;
        border-radius: 2px;
        box-shadow: var(--bz-focus-ring);
    }

/* Email templates: list 360 · editor 500 · live preview (AdminEmailTemplates.html). */
.bz-mail-admin {
    display: grid;
    grid-template-columns: 360px 500px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.bz-mail-none {
    grid-column: 2 / -1;
}

.bz-mail-list {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

.bz-mail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--bz-divider);
    background: var(--bz-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .bz-mail-item:last-child {
        border-bottom: 0;
    }

    .bz-mail-item:hover,
    .bz-mail-item.is-selected {
        background: var(--bz-violet-tint-soft);
    }

    .bz-mail-item.is-selected {
        box-shadow: inset 3px 0 0 var(--bz-violet);
    }

    .bz-mail-item:focus-visible {
        outline: none;
        box-shadow: inset var(--bz-focus-ring);
    }

.bz-mail-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .bz-mail-item-top code {
        font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
        font-size: 12px;
        font-weight: 500;
        color: var(--bz-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.bz-mail-item-subject {
    font-size: 12px;
    color: var(--bz-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bz-kind-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 22px;
    padding: 0 9px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

    .bz-kind-pill.is-transactional {
        background: #ECFEFF;
        border-color: #BFE7EE;
        color: var(--bz-cyan-700);
    }

    .bz-kind-pill.is-security {
        background: var(--bz-warning-bg-card);
        border-color: #F2DFB6;
        color: var(--bz-warning);
    }

    .bz-kind-pill.is-billing {
        background: var(--bz-violet-tint);
        border-color: var(--bz-violet-tint-border);
        color: var(--bz-violet);
    }

    .bz-kind-pill.is-product {
        background: #F4F3F8;
        border-color: var(--bz-field-border);
        color: var(--bz-slate);
    }

.bz-mail-editor,
.bz-mail-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.bz-mail-editor {
    padding: 16px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-mail-editor .bz-mail-item-top code {
        font-size: 12.5px;
        font-weight: 600;
    }

.bz-mail-code {
    display: flex;
    gap: 12px;
    max-height: 420px;
    padding: 12px;
    overflow: auto;
    background: #F4F3F8;
    border: 1px solid var(--bz-field-border);
    border-radius: 4px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.55;
}

    .bz-mail-code:focus-within {
        border-color: var(--bz-field-border-focus);
        box-shadow: var(--bz-focus-ring);
    }

.bz-mail-lines {
    flex-shrink: 0;
    min-width: 18px;
    text-align: right;
    white-space: pre;
    color: #B4B1C4;
    user-select: none;
}

.bz-mail-code textarea {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    font: inherit;
    line-height: inherit;
    color: var(--bz-slate);
    white-space: pre;
}

.bz-mail-vars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bz-mail-var {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--bz-divider);
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

    .bz-mail-var code {
        padding: 2px 7px;
        background: var(--bz-violet-tint);
        border-radius: 4px;
        font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
        color: var(--bz-violet);
    }

    .bz-mail-var span {
        text-align: right;
    }

.bz-mail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.bz-mail-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bz-mail-sample {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: 4px;
    font-size: 13px;
    color: var(--bz-ink);
}

.bz-mail-preview-subject {
    font-size: 13px;
    color: var(--bz-ink);
}

    .bz-mail-preview-subject span {
        margin-right: 6px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--bz-text-muted);
    }

.bz-mail-frame {
    width: 100%;
    height: 640px;
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-lg);
    background: #F4F3F8;
}

@media (max-width: 1400px) {
    .bz-mail-admin {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .bz-mail-preview {
        grid-column: 2;
    }
}

@media (max-width: 900px) {
    .bz-mail-admin {
        grid-template-columns: 1fr;
    }

    .bz-mail-none,
    .bz-mail-preview {
        grid-column: auto;
    }
}

/* Plans: plans across, limits down (AdminPlans.html). */
.bz-plan-table {
    display: flex;
    flex-direction: column;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
    overflow: hidden;
}

.bz-plan-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.3fr) repeat(4, minmax(90px, 1fr));
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--bz-divider);
    font-size: 13px;
    color: var(--bz-ink);
}

    .bz-plan-row:last-child {
        border-bottom: 0;
    }

    .bz-plan-row > [role="rowheader"] {
        color: var(--bz-slate);
    }

    .bz-plan-row.is-head {
        min-height: 0;
        padding: 8px 16px;
        background: var(--bz-divider);
        border-bottom: 1px solid var(--bz-border);
        font-family: var(--font-brand);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--bz-slate);
    }

.bz-plan-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    margin-left: -8px;
    border: 0;
    border-radius: 4px;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

    .bz-plan-pick .bz-admin-edit {
        font-family: var(--font-body, inherit);
        font-size: 12px;
        letter-spacing: 0;
        text-transform: none;
    }

    .bz-plan-pick:hover,
    .bz-plan-pick.is-selected {
        background: var(--bz-violet-tint);
        color: var(--bz-violet);
    }

    .bz-plan-pick:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

.bz-plan-change {
    font-weight: 600;
    color: var(--bz-warning);
}

.bz-plan-features {
    display: flex;
    flex-direction: column;
}

.bz-plan-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bz-divider);
    font-size: 13px;
    color: var(--bz-ink);
}

    .bz-plan-feature:last-child {
        border-bottom: 0;
    }

.bz-staff-roles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 720px;
}

/* GeoIP: the database's state in one strip (AdminGeoIP.html). */
.bz-geo-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    padding: 16px 18px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-lg);
}

    .bz-geo-status > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .bz-geo-status strong {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--bz-ink);
    }

.bz-geo-lookup {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .bz-geo-lookup .bz-field-wrap {
        flex: 1;
    }

    .bz-geo-lookup .bz-btn {
        height: 48px;
    }

/* ---------------------------------------------------------------- settings, board check 24 Sep
   WorkspaceGeneral.html: a card's own title, two read-only fields side by side, and the
   danger zone — a red rule-label over a red-tinted card. */
.settings-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bz-ink);
}

.settings-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .settings-pair {
        grid-template-columns: 1fr;
    }
}

.settings-danger-label {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    margin: 28px 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #DC2626;
}

    .settings-danger-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #F3C9C9;
    }

.settings-card.settings-danger-card {
    background: #FEF2F2;
    border-color: #F3C9C9;
}

/* Members · pending invitations (Members.html): a dashed circle where an avatar will be,
   amber expiry, and a declined invitation as a red pill with its time beneath. */
.bz-invite-pending {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1.5px dashed #CFCBDD;
    border-radius: 50%;
    box-sizing: border-box;
}

.bz-invite-expiry {
    font-size: 12.5px;
    color: var(--bz-warning);
}

.bz-invite-declined {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.bz-pill.is-error {
    background: var(--bz-error-bg);
    border-color: var(--bz-error-border);
    color: var(--bz-error-strong);
}

/* Plan and billing (PlanBilling.html): the note beside the save buttons, the lock line for
   everyone but the owner, the pending offer as an amber box, and a field beside its button. */
.settings-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    .settings-actions-row .settings-readonly-note {
        flex: 1 1 240px;
        margin: 0;
    }

.settings-lock-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    color: var(--bz-text-muted);
}

    .settings-lock-line .app-icon svg {
        width: 14px;
        height: 14px;
    }

.data-row.settings-offer-pending {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bz-warning-bg-card);
    border: 1px solid #F2DFB6;
    border-radius: 8px;
}

    .settings-offer-pending > .app-icon {
        margin-top: 2px;
        color: var(--bz-warning);
    }

    .settings-offer-pending > div:first-of-type {
        flex: 1;
    }

.settings-inline-form {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .settings-inline-form .is-grow {
        flex: 1;
    }

    .settings-inline-form > .settings-btn,
    .settings-inline-form > .auth-submit {
        margin-top: 8px;
    }

/* Help icon: a dot when a ticket has an unread reply (HelpPanel.html, "Unread reply"). */
.help-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--bz-violet);
    border: 2px solid var(--bz-surface);
    border-radius: 50%;
}

.bz-help-link.is-unread strong::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    vertical-align: middle;
    background: var(--bz-violet);
    border-radius: 50%;
}

.help-reply-quote {
    font-style: italic;
    color: var(--bz-slate);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.help-panel-all {
    align-self: flex-start;
    font-size: 12.5px;
}

/* Help article: "Still stuck? Chat with us." with its button (HelpPanel.html, "Article"). */
.bz-help-stuck {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bz-violet-tint-soft);
    border: 1px solid var(--bz-divider);
    border-radius: 8px;
    font-size: 13px;
    color: var(--bz-ink);
}

/* An article an agent sent: a card in the ticket thread (TicketDetail.html) and in chat. */
.bz-article-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 460px;
    margin: 4px 0 8px;
    padding: 10px 12px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--bz-ink);
}

    .bz-article-card:hover {
        border-color: var(--bz-violet-tint-border);
        background: var(--bz-violet-tint-soft);
    }

    .bz-article-card > .app-icon {
        margin-top: 2px;
        color: var(--bz-violet);
    }

    .bz-article-card > span {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 13px;
    }

        .bz-article-card > span > span {
            font-size: 12px;
            color: var(--bz-text-muted);
        }

.bz-chat-source.is-card {
    margin: 6px 0;
}

/* Chat widget, board check 24 Sep (ChatCustomer.html, ChatVisitor.html, VisitorLauncher.html). */
.bz-chat-notice-label {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-chat-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bz-chat-notice.is-transfer {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.bz-chat-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 4px 0;
    font-size: 12.5px;
}

    .bz-chat-facts dt {
        color: var(--bz-text-muted);
    }

    .bz-chat-facts dd {
        margin: 0;
        font-weight: 500;
        color: var(--bz-ink);
    }

#bz-chat.is-keyboard-open .bz-chat-launcher {
    display: none;
}

@media (max-width: 640px) {
    body.bz-has-launcher .auth-form-panel,
    body.bz-has-launcher .bz-card-stack {
        padding-bottom: 104px;
    }
}

/* Ticket queue (ConsoleQueue.html): target pills with a clock, priority pills, "New", the legend. */
.bz-target.is-met {
    color: var(--bz-success);
}

.bz-target.is-missed {
    color: var(--bz-error);
}

.bz-target-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--bz-field-border);
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bz-slate);
    background: var(--bz-surface);
}

    .bz-target-pill .app-icon svg {
        width: 12px;
        height: 12px;
    }

    .bz-target-pill.is-error {
        color: var(--bz-error-strong);
        background: var(--bz-error-bg);
        border-color: var(--bz-error-border);
    }

    .bz-target-pill.is-warning {
        color: var(--bz-warning);
        background: var(--bz-warning-bg-card);
        border-color: #F2DFB6;
    }

    .bz-target-pill.is-met {
        color: var(--bz-success);
        background: var(--bz-success-bg);
        border-color: var(--bz-success-border);
    }

    .bz-target-pill.is-missed {
        color: var(--bz-error-strong);
        background: var(--bz-error-bg);
        border-color: var(--bz-error-border);
    }

    .bz-target-pill.is-quiet {
        color: var(--bz-text-muted);
    }

.bz-priority {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: #F4F3F8;
    color: var(--bz-slate);
}

    .bz-priority.is-urgent {
        background: var(--bz-error-bg);
        color: var(--bz-error-strong);
    }

    .bz-priority.is-high {
        background: var(--bz-warning-bg-card);
        color: var(--bz-warning);
    }

    .bz-priority.is-normal {
        background: var(--bz-violet-tint);
        color: var(--bz-violet);
    }

.bz-ticket-state.is-new {
    color: var(--bz-cyan-700);
}

.bz-queue-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 12px;
    color: var(--bz-text-muted);
}

    .bz-queue-legend > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.bz-thread-message.is-system .bz-thread-body {
    background: #F4F3F8;
}

.bz-thread-title {
    margin: 4px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-live-article.is-blocked {
    opacity: .6;
    cursor: not-allowed;
}

.bz-live-article-insert {
    font-weight: 600;
    color: var(--bz-violet);
}

/* Article editor (WriterEditor.html): tag chips, the Markdown toolbar and a line gutter. */
.bz-tag-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.bz-tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 8px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: 4px;
}

    .bz-tag-box:focus-within {
        border-color: var(--bz-field-border-focus);
        box-shadow: var(--bz-focus-ring);
    }

    .bz-tag-box input {
        flex: 1;
        min-width: 90px;
        border: 0;
        outline: none;
        font: inherit;
        font-size: 13px;
        background: transparent;
    }

.bz-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 4px 0 9px;
    background: var(--bz-violet-tint);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-violet);
}

    .bz-tag-chip button {
        display: inline-flex;
        padding: 2px;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
    }

        .bz-tag-chip button .app-icon svg {
            width: 11px;
            height: 11px;
        }

.bz-md-toolbar {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #F4F3F8;
    border: 1px solid var(--bz-field-border);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

    .bz-md-toolbar button {
        min-width: 30px;
        height: 28px;
        padding: 0 8px;
        border: 0;
        border-radius: 3px;
        background: none;
        font: inherit;
        font-size: 12.5px;
        color: var(--bz-slate);
        cursor: pointer;
    }

        .bz-md-toolbar button:hover {
            background: var(--bz-surface);
            color: var(--bz-ink);
        }

.bz-md-code {
    display: flex;
    gap: 10px;
    max-height: 560px;
    padding: 10px 12px;
    overflow: auto;
    background: var(--bz-surface);
    border: 1px solid var(--bz-field-border);
    border-radius: 0 0 4px 4px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}

    .bz-md-code .bz-md-source {
        flex: 1;
        min-height: 0;
        padding: 0;
        border: 0;
        outline: none;
        resize: none;
        overflow: hidden;
        font: inherit;
        line-height: inherit;
        white-space: pre;
    }

/* A share as a bar: articles' helpful rate, unanswered questions' counts. */
.bz-helpful {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-ink);
}

.bz-helpful-bar {
    display: inline-block;
    width: 56px;
    height: 6px;
    background: var(--bz-divider);
    border-radius: 3px;
    overflow: hidden;
}

    .bz-helpful-bar > span {
        display: block;
        height: 100%;
        background: var(--bz-success);
        border-radius: 3px;
    }

.bz-question-count .bz-helpful-bar > span {
    background: var(--bz-violet);
}

/* A grey note with an icon inside an auth card (CreateWorkspace.html, "After leaving every company"). */
.bz-note-panel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bz-field-bg-readonly);
    border-radius: var(--bz-radius);
    font-size: 13px;
    line-height: 1.5;
    color: var(--bz-slate);
}

    .bz-note-panel .app-icon {
        margin-top: 1px;
        color: var(--bz-text-muted);
    }

/* Notification centre, board check 24 Sep (NotificationCentre.html). */
.notif-empty-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
    border-radius: 12px;
    background: var(--bz-violet-tint);
    color: var(--bz-violet);
}

    .notif-empty-tile .app-icon svg {
        width: 22px;
        height: 22px;
    }

.bz-link-button:disabled {
    color: var(--bz-text-subtle);
    cursor: default;
    text-decoration: none;
}

.notif-unread-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    font-size: 13px;
    color: var(--bz-slate);
    text-decoration: none;
}

.notif-unread-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--bz-field-border);
    border-radius: 3px;
    background: var(--bz-surface);
}

.notif-unread-check[aria-checked="true"] .notif-unread-box {
    background: var(--bz-violet);
    border-color: var(--bz-violet);
    color: #FFFFFF;
}

    .notif-unread-box .app-icon svg {
        width: 11px;
        height: 11px;
    }

.notif-tag.is-account {
    background: #ECFDF3;
    color: #15803D;
}

.notif-tag.is-bizomate {
    background: #F3EEFF;
    color: #7C3AED;
}

.notif-tag.is-left {
    background: transparent;
    border: 1px dashed #CFCBDD;
    color: #7C7F92;
}

.notif-card.is-elsewhere {
    background: #F4FBFD;
}

    .notif-icon-workflows {
        color: #4F52B2;
        background: #4F52B214;
    }

    .notif-icon-workspace {
        color: #4A4C5C;
        background: #4A4C5C14;
    }

    .notif-icon-announcements {
        color: #7C3AED;
        background: #7C3AED14;
    }

/* The busy overlay keeps the top bar visible, as the board draws it (Patterns.html, "Loading"). */
.bz-busy-overlay {
    top: 56px;
}

.dz-panel-foot-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}

.bz-admin-status.is-error .app-icon,
.bz-admin-status.is-error {
    color: var(--bz-error-strong);
}

/* ================================================================ staff availability */

/* The agent's live chat status in the staff top bar: information only, a link to live chat
   where the switch is (decided 25 September 2026). */
.staff-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin-right: 8px;
    padding: 0 10px;
    border: 1px solid var(--bz-border);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-ink);
    text-decoration: none;
    white-space: nowrap;
}

    .staff-status:hover {
        background: var(--bz-bg-app);
    }

@media (max-width: 700px) {
    .staff-status {
        display: none;
    }
}

/* ================================================================ broadcast read more */

/* An announcement longer than two lines (decided 25 September 2026): clamped, with "Read
   more" to open it in place and "Show less" to fold it again. Native <details>, so the bell
   works in the static layouts too. */
.notif-more > summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    cursor: pointer;
}

    .notif-more > summary::-webkit-details-marker {
        display: none;
    }

.notif-body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-more-toggle::after {
    content: "Read more";
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-violet);
}

.notif-more[open] .notif-body.is-clamped {
    display: none;
}

.notif-more[open] .notif-more-toggle::after {
    content: "Show less";
}

.notif-more[open] > summary {
    order: 2;
}

.notif-more[open] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The maintenance banner's optional link. */
.bz-maintenance-link {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

/* ================================================================ members: the row's ⋯
   boards/04-workspace-company-settings/Members.html — "Reset two-factor" in its own menu,
   greyed out with its reason when it cannot be used. */

.bz-row-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--bz-radius);
    background: none;
    color: var(--bz-slate);
    cursor: pointer;
    list-style: none;
}

    .bz-row-kebab::-webkit-details-marker {
        display: none;
    }

    .bz-row-kebab .app-icon svg {
        width: 16px;
        height: 16px;
    }

    .bz-row-kebab:hover:not(:disabled) {
        background: var(--bz-field-hover);
    }

    .bz-row-kebab:focus-visible {
        outline: none;
        box-shadow: var(--bz-focus-ring);
    }

    .bz-row-kebab:disabled {
        color: var(--bz-text-placeholder-toolbar);
        cursor: not-allowed;
    }

.bz-row-kebab-wrap {
    display: inline-flex;
}

/* ================================================================ two-factor reset, on a ticket
   boards/10-support-staff/ConsoleTicket.html — three checks as steps: a tick when done,
   a violet dot on the one in hand, a hollow ring for what is still ahead, a red dash for
   a check that ended it. */

.bz-reset-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 0;
    list-style: none;
}

.bz-reset-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.bz-reset-mark {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 8px;
    border: 1.5px solid var(--bz-checkbox-border);
    background: var(--bz-surface);
}

.bz-reset-step.is-done .bz-reset-mark {
    border-color: var(--bz-success);
    background: var(--bz-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 12.4 10.3 16 17.4 8.4'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.bz-reset-step.is-now .bz-reset-mark {
    border-color: var(--bz-violet);
    background: radial-gradient(circle, var(--bz-violet) 0 3.5px, var(--bz-surface) 4px);
}

.bz-reset-step.is-ended .bz-reset-mark {
    border-color: var(--bz-error);
    background: var(--bz-error) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7.5 12h9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.bz-reset-step-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

    .bz-reset-step-text strong {
        font-size: 13px;
        font-weight: 600;
        color: var(--bz-ink);
    }

.bz-reset-step.is-later .bz-reset-step-text strong {
    color: var(--bz-text-muted);
}

.bz-reset-facts {
    min-height: 64px;
    resize: vertical;
}

.bz-reset-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ================================================================ W2b: the picker and the settings panel
   boards/05-product/DesignerV2.html, "Adding a step", "Pickers", "Step settings" and
   "If this step fails". */

/* ---------------------------------------------------------------- the picker */

.dz-picker {
    position: absolute;
    z-index: 12;
    display: flex;
    flex-direction: column;
    width: 344px;
    max-height: 460px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(20, 21, 28, .18);
    cursor: default;
    overflow: hidden;
}

    .dz-picker.is-phone {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 78vh;
        border-radius: 16px 16px 0 0;
        z-index: 25;
    }

.dz-picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 0 14px;
}

.dz-picker-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-picker-back,
.dz-picker-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--bz-radius);
    background: none;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-picker-back:hover,
    .dz-picker-close:hover {
        background: var(--bz-field-hover);
    }

    .dz-picker-back .app-icon svg,
    .dz-picker-close .app-icon svg {
        width: 15px;
        height: 15px;
    }

.dz-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 8px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--bz-field-border);
    border-radius: var(--bz-radius-md);
    color: var(--bz-text-subtle);
}

    .dz-picker-search:focus-within {
        border-color: var(--bz-violet);
        box-shadow: 0 0 0 3px var(--bz-violet-tint);
    }

    .dz-picker-search .app-icon svg {
        width: 15px;
        height: 15px;
    }

    .dz-picker-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: none;
        font-size: 13.5px;
        color: var(--bz-ink);
    }

    .dz-picker-search kbd {
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border: 1px solid var(--bz-border);
        border-bottom-width: 2px;
        border-radius: 4px;
        font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
        font-size: 10.5px;
        line-height: 15px;
        text-align: center;
        color: var(--bz-slate);
    }

.dz-picker-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 8px;
}

.dz-picker-tab {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--bz-border);
    border-radius: 13px;
    background: var(--bz-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-picker-tab.is-on {
        border-color: var(--bz-violet-tint-border);
        background: var(--bz-violet-tint);
        color: var(--bz-violet);
    }

.dz-picker-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 6px 8px;
    border-top: 1px solid var(--bz-divider);
}

.dz-picker-group {
    display: block;
    padding: 10px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
}

.dz-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 7px;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--bz-text-muted);
}

    .dz-picker-row:hover,
    .dz-picker-row:focus-visible {
        background: var(--bz-field-hover);
        outline: none;
    }

    .dz-picker-row > .app-icon svg {
        width: 14px;
        height: 14px;
    }

.dz-picker-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #FFFFFF;
}

.dz-picker-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.dz-picker-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-picker-sub {
    font-size: 11.5px;
    color: var(--bz-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-picker-lock {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: var(--bz-violet-tint);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bz-violet);
}

    .dz-picker-lock .app-icon svg {
        width: 11px;
        height: 11px;
    }

.dz-picker-empty,
.dz-picker-foot {
    margin: 0;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

.dz-picker-foot {
    border-top: 1px solid var(--bz-divider);
    background: var(--bz-bg-app);
}

/* ---------------------------------------------------------------- the settings panel */

.dz-panel-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: #FFFFFF;
}

.dz-panel-last {
    font-size: 12px;
    color: var(--bz-text-muted);
}

.dz-panel-done {
    display: none;
}

@media (max-width: 767px) {
    .dz-panel-done {
        display: inline-flex;
    }
}

/* The {{ field: expr-field.js fills it with text and chips. */
.dz-expr-field {
    min-height: 36px;
    height: auto;
    padding: 7px 10px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: text;
    outline: none;
}

    .dz-expr-field.is-multiline {
        min-height: 88px;
    }

    .dz-expr-field:focus {
        border-color: var(--bz-violet);
        box-shadow: 0 0 0 3px var(--bz-violet-tint);
    }

    .dz-expr-field:empty::before {
        content: attr(data-placeholder);
        color: var(--bz-text-placeholder-toolbar);
        pointer-events: none;
    }

    .dz-expr-field.is-readonly {
        background: var(--bz-field-bg-readonly);
        cursor: default;
    }

.dz-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    margin: 0 2px;
    padding: 0 8px;
    border: 1px solid rgba(14, 116, 144, .24);
    border-radius: 11px;
    background: rgba(14, 116, 144, .08);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    color: #0E7490;
    white-space: nowrap;
    vertical-align: baseline;
    user-select: all;
}

/* The {{ suggestions, on the page so no panel clips them. */
.dz-suggest {
    position: fixed;
    z-index: 3000;
    width: 324px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: 9px;
    box-shadow: 0 16px 40px rgba(20, 21, 28, .18);
}

.dz-suggest-group {
    padding: 8px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--bz-text-muted);
}

.dz-suggest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    cursor: pointer;
}

    .dz-suggest-row:hover,
    .dz-suggest-row.is-active {
        background: var(--bz-field-hover);
    }

.dz-suggest-label {
    min-width: 0;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    color: var(--bz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dz-suggest-value {
    flex-shrink: 0;
    max-width: 45%;
    font-size: 11.5px;
    color: var(--bz-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dz-suggest-empty {
    padding: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-text-muted);
}

/* ---------------------------------------------------------------- if this step fails */

.dz-fails {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--bz-divider);
    min-width: 0;
}

.dz-fails-title {
    padding: 0;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
}

.dz-fails-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    cursor: pointer;
}

    .dz-fails-choice.is-on {
        border-color: var(--bz-violet);
        box-shadow: 0 0 0 3px var(--bz-violet-tint);
    }

    .dz-fails-choice input {
        margin-top: 3px;
        accent-color: var(--bz-violet);
    }

    .dz-fails-choice > span {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 12px;
        line-height: 1.45;
        color: var(--bz-text-muted);
    }

    .dz-fails-choice strong {
        font-size: 13px;
        font-weight: 600;
        color: var(--bz-ink);
    }

.dz-fails-retry {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 8px 10px;
    padding: 2px 12px 6px 34px;
}

    .dz-fails-retry .auth-label {
        margin: 0;
    }

.dz-fails-note {
    grid-column: 1 / -1;
}

/* ================================================================ W2c: Input and Output
   boards/05-product/DesignerV2.html, "Input · three views" and "Output, pinning and mapping". */

.dz-panel-tabs {
    display: flex;
    gap: 18px;
    padding: 0 18px;
    border-bottom: 1px solid var(--bz-border);
}

.dz-panel-tab {
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-panel-tab.is-on {
        border-bottom-color: var(--bz-violet);
        font-weight: 600;
        color: var(--bz-violet);
    }

.dz-data {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dz-data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
}

.dz-data-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
}

.dz-data.is-compact .dz-data-head {
    display: none;
}

.dz-data-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dz-data-switch,
.dz-data-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--bz-slate);
}

.dz-data-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    background: var(--bz-surface);
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-data-step:disabled {
        opacity: .4;
        cursor: default;
    }

    .dz-data-step .app-icon svg {
        width: 12px;
        height: 12px;
    }

.dz-data-views {
    display: inline-flex;
    padding: 2px;
    border-radius: 7px;
    background: var(--bz-field-hover);
}

.dz-data-view {
    height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: none;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-data-view.is-on {
        background: var(--bz-surface);
        box-shadow: 0 1px 2px rgba(20, 21, 28, .12);
        color: var(--bz-ink);
    }

.dz-schema-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    overflow: hidden;
}

.dz-schema-title {
    padding: 7px 10px;
    background: var(--bz-bg-app);
    border-bottom: 1px solid var(--bz-divider);
    font-size: 12px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-schema-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--bz-text-muted);
}

.dz-schema-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding-right: 10px;
    border-bottom: 1px solid var(--bz-divider);
    font-size: 12px;
}

    .dz-schema-row:last-child {
        border-bottom: 0;
    }

    .dz-schema-row[draggable="true"] {
        cursor: grab;
    }

        .dz-schema-row[draggable="true"]:hover {
            background: var(--bz-violet-tint-soft);
        }

.dz-schema-grip {
    color: var(--bz-text-placeholder-toolbar);
    font-size: 12px;
}

.dz-schema-name {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    color: var(--bz-ink);
}

.dz-schema-type {
    font-size: 10.5px;
    color: var(--bz-text-subtle);
}

.dz-schema-value {
    flex: 1;
    min-width: 0;
    text-align: right;
    color: var(--bz-slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
}

    .dz-file .app-icon svg {
        width: 14px;
        height: 14px;
        color: var(--bz-text-muted);
    }

.dz-file-name {
    font-weight: 500;
    color: var(--bz-ink);
}

.dz-file-meta {
    color: var(--bz-text-muted);
}

.dz-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
}

.dz-table {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

    .dz-table th,
    .dz-table td {
        padding: 6px 10px;
        border-bottom: 1px solid var(--bz-divider);
        text-align: left;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dz-table th {
        background: var(--bz-bg-app);
        font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
        font-size: 11px;
        font-weight: 600;
        color: var(--bz-slate);
    }

.dz-json {
    padding: 10px 12px;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    background: var(--bz-bg-app);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--bz-ink);
    overflow-x: auto;
}

    .dz-json details {
        padding-left: 14px;
    }

    .dz-json > details {
        padding-left: 0;
    }

    .dz-json summary {
        margin-left: -14px;
        cursor: pointer;
        list-style: none;
    }

        .dz-json summary::before {
            content: "\25B8  ";
            color: var(--bz-text-muted);
        }

    .dz-json details[open] > summary::before {
        content: "\25BE  ";
    }

.dz-json-leaf {
    white-space: pre;
}

.dz-json-value {
    color: #0E7490;
}

.dz-json-close {
    display: block;
    margin-left: -14px;
}

.dz-data-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--bz-border);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bz-text-muted);
    text-align: center;
}

    .dz-data-empty strong {
        font-size: 13px;
        color: var(--bz-ink);
    }

.dz-pin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--bz-border);
    border-radius: 13px;
    background: var(--bz-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-pin.is-on {
        border-color: var(--bz-violet-tint-border);
        background: var(--bz-violet-tint);
        color: var(--bz-violet);
    }

    .dz-pin .app-icon svg {
        width: 12px;
        height: 12px;
    }

.dz-pin-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bz-violet-tint);
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.dz-settings-data {
    margin: 0 0 4px;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    padding: 0 10px 10px;
}

    .dz-settings-data > summary {
        padding: 8px 0;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--bz-text-muted);
        cursor: pointer;
    }

.dz-expr-field.is-drop {
    border-color: var(--bz-violet);
    background: var(--bz-violet-tint-soft);
}

.dz-card-pin {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bz-violet-tint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bz-violet);
}

/* ================================================================ W2d: test runs and motion
   boards/05-product/DesignerV2.html, "Test run · running", "Test run · finished", "Motion"
   and "Test runs · free and limited". Motion means something is happening now and nothing
   else: loops for the unfinished, once for what lands, and one media query removes it all. */

.dz-shell {
    --dz-live: #3730A3;
    --dz-retry: #B45309;
}

/* Running, Waiting, Retrying: one colour for the family, told apart by what moves. */
.dz-card.is-running .dz-card-badge-dot,
.dz-card.is-waiting .dz-card-badge-dot { background: var(--dz-live); }
.dz-card.is-retrying .dz-card-badge-dot { background: var(--dz-retry); }
.dz-card.is-queued .dz-card-badge-dot { background: #6B6D7C; }

.dz-card.is-running .dz-card-word,
.dz-card.is-waiting .dz-card-word { color: var(--dz-live); }
.dz-card.is-retrying .dz-card-word { color: var(--dz-retry); }

/* Queued: still, and quieter than what is happening. */
.dz-card.is-queued {
    opacity: .5;
}

.dz-card-ring {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border-radius: 14px;
    border: 2px solid transparent;
    pointer-events: none;
}

/* Running: a solid arc spinning — the only thing that moves fast — and the tile breathing. */
.dz-card.is-running .dz-card-ring {
    border-top-color: var(--dz-live);
    border-right-color: var(--dz-live);
    border-radius: 50%;
    animation: dz-spin 1.1s linear infinite;
}

.dz-card.is-running .dz-card-tile {
    animation: dz-pulse 1.5s ease-in-out infinite;
}

/* Retrying: the same spin, in amber — a failure that happens to move. */
.dz-card.is-retrying .dz-card-ring {
    border-top-color: var(--dz-retry);
    border-right-color: var(--dz-retry);
    border-radius: 50%;
    animation: dz-spin 1.1s linear infinite;
}

/* Waiting: the whole ring breathes on opacity; nothing travels. */
.dz-card.is-waiting .dz-card-ring {
    border-color: var(--dz-live);
    animation: dz-breathe 3s ease-in-out infinite;
}

.dz-clock-hand {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: dz-sweep 60s linear infinite;
}

/* Just finished: the badge pops once. Never a shake. */
.dz-card.is-fresh.is-tested .dz-card-badge,
.dz-card.is-fresh.is-failed .dz-card-badge,
.dz-card.is-fresh.is-skipped .dz-card-badge {
    animation: dz-pop 200ms ease-out;
}

/* The line into the running step: a dash travelling toward it. */
.dz-line.is-live {
    stroke: var(--dz-live);
    stroke-dasharray: 6 6;
    animation: dz-dash 1.4s linear infinite;
}

/* "0.4 s" beside a step the test has finished. */
.dz-card-time {
    position: absolute;
    left: calc(100% + 10px);
    top: 30px;
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-radius: 9px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 10px;
    color: var(--dz-sub);
    white-space: nowrap;
    pointer-events: none;
}

/* "3 items" on a line, after its step lands. */
.dz-item-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    background: var(--dz-card);
    border: 1px solid var(--bz-border);
    border-radius: 9px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 10px;
    color: var(--dz-sub);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

    .dz-item-chip.is-fresh {
        animation: dz-chip-in 180ms ease-out 200ms backwards;
    }

/* The line across the top while a test runs. */
.dz-test-progress {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    background: var(--bz-divider);
    z-index: 4;
}

    .dz-test-progress > span {
        display: block;
        height: 3px;
        background: linear-gradient(135deg, #7C3AED, #0E7490);
        transition: width .2s ease-out;
    }

/* "Test run · step 3 of 7 · 6 s · Stop" — top centre. */
.dz-test-bar {
    top: 18px;
    gap: 12px;
    height: 38px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--bz-border);
    border-radius: 19px;
    box-shadow: 0 8px 24px rgba(20, 21, 28, .12);
}

.dz-test-spin {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 2.5px solid rgba(124, 58, 237, .35);
    border-top-color: #7C3AED;
    border-radius: 50%;
    animation: dz-spin .8s linear infinite;
}

.dz-test-where {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-test-time {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.dz-test-sep {
    width: 1px;
    height: 18px;
    background: var(--bz-border);
}

.dz-test-stop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: 13px;
    background: var(--bz-field-hover);
    font-size: 12px;
    font-weight: 600;
    color: var(--bz-error);
    cursor: pointer;
}

    .dz-test-stop:hover:not(:disabled) {
        background: var(--bz-error-bg);
    }

    .dz-test-stop:disabled {
        opacity: .6;
        cursor: default;
    }

/* The finished card, bottom right: its left edge says how it went. */
.dz-test-done {
    position: absolute;
    right: 20px;
    bottom: 74px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 330px;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    padding: 13px 34px 13px 14px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-left: 3px solid #6B6D7C;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(20, 21, 28, .14);
    cursor: default;
}

    .dz-test-done.is-succeeded { border-left-color: var(--bz-success); }
    .dz-test-done.is-failed { border-left-color: var(--bz-error); }

    .dz-test-done.is-ceiling {
        border-color: var(--bz-warning-border);
        border-left-color: var(--bz-warning);
        background: var(--bz-warning-bg);
    }

.dz-test-done-mark {
    display: flex;
    flex-shrink: 0;
    padding-top: 1px;
}

.dz-test-done-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.dz-test-done-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-test-done.is-ceiling .dz-test-done-title {
    color: var(--bz-warning);
}

.dz-test-done-body {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--bz-slate);
}

    .dz-test-done-body strong {
        font-weight: 600;
        color: var(--bz-ink);
    }

.dz-test-done-open {
    margin-top: 4px;
    font-size: 12px;
}

.dz-test-done-close {
    position: absolute;
    right: 6px;
    top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--bz-text-muted);
    cursor: pointer;
}

    .dz-test-done-close:hover {
        background: var(--bz-field-hover);
    }

    .dz-test-done-close .app-icon svg {
        width: 12px;
        height: 12px;
    }

/* Test run's tooltip, said before the button is pressed — and the daily cap in the same place. */
.dz-test-wrap {
    position: relative;
    display: inline-flex;
}

    .dz-test-wrap .bz-btn:disabled {
        pointer-events: none;
    }

.dz-test-tip {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 40;
    display: none;
    width: 330px;
    margin-top: 10px;
    padding: 11px 13px;
    background: #14151C;
    border-radius: 7px;
    box-shadow: 0 8px 22px rgba(20, 21, 28, .28);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    color: #FFFFFF;
    white-space: normal;
    text-align: left;
}

    /* The arrow, and a bridge over the gap so the pointer can reach See plans. */
    .dz-test-tip::before {
        content: "";
        position: absolute;
        right: 40px;
        top: -4px;
        width: 8px;
        height: 8px;
        background: #14151C;
        transform: rotate(45deg);
    }

    .dz-test-tip::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }

    .dz-test-tip a {
        font-weight: 600;
        color: #C4B5FD;
    }

.dz-test-wrap:hover .dz-test-tip,
.dz-test-wrap:focus-within .dz-test-tip {
    display: block;
}

/* A failed step's Output tab: the error in plain words, and Try again. */
.dz-fail-box {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    background: var(--bz-error-bg);
    border: 1px solid var(--bz-error-border);
    border-radius: 8px;
}

.dz-fail-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-error);
}

.dz-fail-box-text {
    font-size: 12px;
    line-height: 1.55;
    color: var(--bz-slate);
    overflow-wrap: anywhere;
}

.dz-fail-box-actions {
    display: flex;
    gap: 8px;
    padding-top: 2px;
}

@keyframes dz-spin {
    to { transform: rotate(360deg); }
}

@keyframes dz-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@keyframes dz-breathe {
    0%, 100% { opacity: .25; }
    50% { opacity: .7; }
}

@keyframes dz-sweep {
    0% { transform: rotate(0deg); }
    12%, 100% { transform: rotate(360deg); }
}

@keyframes dz-pop {
    0% { transform: scale(.6); }
    70% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes dz-dash {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@keyframes dz-chip-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .dz-test-done {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
    }

    .dz-test-tip {
        width: min(330px, calc(100vw - 32px));
    }
}

/* No state depends on motion, so nothing needs a substitute. */
@media (prefers-reduced-motion: reduce) {
    .dz-card-ring,
    .dz-card.is-running .dz-card-tile,
    .dz-clock-hand,
    .dz-card.is-fresh .dz-card-badge,
    .dz-line.is-live,
    .dz-item-chip.is-fresh,
    .dz-test-spin {
        animation: none !important;
    }

    .dz-card.is-waiting .dz-card-ring {
        opacity: .5;
    }

    .dz-test-progress > span {
        transition: none;
    }
}

/* ================================================================ W2d: runs list and Run detail
   boards/05-product/DesignerV2.html, "Test runs · free and limited" (the runs list), and
   RunDetail.html, "Live · waiting". */

.bz-runs-tests {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--bz-ink);
    cursor: pointer;
}

.bz-runs-number {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    color: var(--bz-text-muted);
}

.bz-runs-test-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 18px;
    padding: 0 7px;
    border-radius: 9px;
    background: var(--bz-field-hover);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bz-slate);
}

.bz-run-step.is-running .bz-run-step-mark {
    border-color: rgba(55, 48, 163, .25);
    border-top-color: #3730A3;
    animation: dz-spin 1.1s linear infinite;
}

.bz-run-step.is-retrying .bz-run-step-mark {
    border-color: rgba(180, 83, 9, .25);
    border-top-color: var(--bz-warning);
    animation: dz-spin 1.1s linear infinite;
}

.bz-run-step.is-waiting .bz-run-step-mark {
    border-color: #3730A3;
    animation: dz-breathe 3s ease-in-out infinite;
}

.bz-run-step.is-retrying .bz-run-step-time {
    color: var(--bz-warning);
}

.bz-run-step.is-running .bz-run-step-time,
.bz-run-step.is-waiting .bz-run-step-time {
    color: #3730A3;
}

/* Queued: still. Stillness is the signal. */
.bz-run-step.is-queued .bz-run-step-head {
    cursor: default;
    color: var(--bz-text-muted);
}

.bz-run-step.is-queued .bz-run-step-mark {
    border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
    .bz-run-step.is-running .bz-run-step-mark,
    .bz-run-step.is-retrying .bz-run-step-mark,
    .bz-run-step.is-waiting .bz-run-step-mark {
        animation: none;
    }
}

/* ================================================================ W2e: publishing and the empty workflow
   boards/05-product/DesignerV2.html, "Publish, blocked", "Publish · needs a paid plan" and
   "Empty workflow". */

.dz-publish-catch {
    position: absolute;
    inset: 0;
    z-index: 19;
    cursor: default;
}

.dz-publish-check {
    position: absolute;
    right: 24px;
    top: 10px;
    z-index: 20;
    width: 392px;
    max-width: calc(100% - 32px);
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(20, 21, 28, .20);
    overflow: hidden;
    cursor: default;
}

.dz-publish-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 12px 10px 16px;
}

    .dz-publish-head svg {
        flex-shrink: 0;
    }

.dz-publish-title {
    flex: 1;
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-publish-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--bz-text-muted);
    cursor: pointer;
}

    .dz-publish-close:hover {
        background: var(--bz-field-hover);
    }

    .dz-publish-close .app-icon svg {
        width: 13px;
        height: 13px;
    }

.dz-publish-body {
    margin: 0;
    padding: 0 16px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--bz-slate);
}

.dz-publish-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 16px;
}

.dz-publish-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--bz-bg-app);
}

.dz-publish-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}

.dz-publish-item-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bz-ink);
    overflow-wrap: anywhere;
}

.dz-publish-item-what {
    font-size: 11px;
    line-height: 1.45;
    color: var(--bz-text-muted);
}

.dz-publish-go {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bz-violet);
    white-space: nowrap;
    cursor: pointer;
}

    .dz-publish-go:hover {
        text-decoration: underline;
    }

.dz-publish-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-top: 1px solid var(--bz-divider);
    background: var(--bz-bg-app);
    font-size: 11px;
    color: var(--bz-text-muted);
}

.dz-publish-quiet {
    text-align: right;
}

/* The empty workflow: the trigger's place, dashed, and a line under it. */
.dz-start {
    position: absolute;
    left: 50%;
    top: 26%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 328px;
    max-width: calc(100% - 32px);
}

.dz-start-card {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 288px;
    max-width: 100%;
    height: 80px;
    box-sizing: border-box;
    padding: 0 14px;
    background: var(--dz-card);
    border: 1.5px dashed rgba(124, 58, 237, .5);
    border-radius: 20px 20px 12px 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .dz-start-card:hover:not(:disabled) {
        border-color: var(--dz-select);
        box-shadow: 0 0 0 4px var(--dz-select-halo);
    }

    .dz-start-card:focus-visible {
        outline: 2px solid var(--dz-focus);
        outline-offset: 3px;
    }

    .dz-start-card:disabled {
        cursor: default;
    }

.dz-start-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 11px;
    background: var(--bz-field-hover);
    border: 1.5px dashed #C9C7D4;
    color: var(--dz-sub);
}

.dz-start-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dz-start-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--dz-sub);
    text-align: center;
}

/* ================================================================ W3: Set / Edit Fields
   boards/05-product/DesignerV2.html, "Settings · logic and data". */

.dz-fieldlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dz-fieldrow {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: 6px;
}

.dz-fieldrow-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dz-fieldrow-name {
    flex-grow: 1;
    min-width: 0;
    height: 26px;
    padding: 0 6px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: var(--bz-radius);
    background: none;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bz-ink);
}

    .dz-fieldrow-name:hover:not([readonly]),
    .dz-fieldrow-name:focus {
        border-color: var(--bz-border);
        outline: none;
    }

    .dz-fieldrow-name:focus {
        border-color: var(--bz-violet);
    }

.dz-fieldrow-type {
    height: 22px;
    padding: 0 22px 0 8px;
    border: 1px solid var(--bz-border);
    border-radius: 11px;
    background-color: var(--bz-bg-app);
    font-size: 10.5px;
    color: var(--bz-slate);
    cursor: pointer;
}

.dz-fieldrow-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--bz-text-muted);
    cursor: pointer;
}

    .dz-fieldrow-remove:hover {
        background: var(--bz-field-hover);
        color: var(--bz-error);
    }

    .dz-fieldrow-remove .app-icon svg {
        width: 11px;
        height: 11px;
    }

.dz-fieldlist-add {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border: 1px dashed var(--bz-border);
    border-radius: 5px;
    background: none;
    font-size: 12px;
    color: var(--bz-text-muted);
    cursor: pointer;
}

    .dz-fieldlist-add:hover {
        border-color: var(--bz-violet);
        color: var(--bz-violet);
    }

    .dz-fieldlist-add .app-icon svg {
        width: 12px;
        height: 12px;
    }

/* A switch with what it does beside it — "Keep everything else on the item". */
.dz-switch-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    background: var(--bz-bg-app);
    border-radius: 7px;
}

    .dz-switch-note .bz-toggle {
        flex-shrink: 0;
        margin-top: 1px;
    }

.dz-switch-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--bz-slate);
}

    .dz-switch-text strong {
        font-size: 12px;
        font-weight: 600;
        color: var(--bz-ink);
    }

/* ================================================================ W4: the schedule
   boards/05-product/DesignerV2.html, "Settings · triggers", Schedule. */

.dz-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--bz-ink);
}

    .dz-sentence.is-cron {
        color: var(--bz-slate);
    }

.dz-sentence-pick {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    background-color: var(--bz-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-ink);
}

    .dz-sentence-pick.is-number {
        width: 64px;
    }

    .dz-sentence-pick.is-time {
        width: 96px;
    }

    .dz-sentence-pick:focus {
        border-color: var(--bz-violet);
        outline: none;
    }

.dz-cron {
    margin: 0 0 4px;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    padding: 0 10px 10px;
}

    .dz-cron > summary {
        padding: 8px 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--bz-slate);
        cursor: pointer;
    }

    .dz-cron[open] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

.dz-cron-input {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

.dz-cron-back {
    align-self: flex-start;
    font-size: 12px;
}

.dz-next-runs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bz-bg-app);
    border-radius: 7px;
}

.dz-next-run {
    font-size: 12.5px;
    color: var(--bz-ink);
    font-variant-numeric: tabular-nums;
}

    .dz-next-run.is-none {
        color: var(--bz-text-muted);
    }

/* ================================================================ W4: the webhook
   boards/05-product/DesignerV2.html, "Settings · triggers", Webhook, and "Motion", Listening. */

.dz-url {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 0 10px;
    background: var(--bz-bg-app);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
}

    .dz-url code {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
        font-size: 11.5px;
        color: var(--bz-ink);
    }

    .dz-url .bz-text-action {
        flex-shrink: 0;
        font-size: 12px;
    }

.dz-static-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-ink);
}

.dz-listening {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 7px;
    background: rgba(55, 48, 163, .06);
    font-size: 12px;
    line-height: 1.5;
    color: var(--bz-slate);
}

    .dz-listening strong {
        display: block;
        color: #3730A3;
    }

.dz-listening-mark {
    position: relative;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: #3730A3;
}

    .dz-listening-mark::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid #3730A3;
        animation: dz-radiate 2s ease-out infinite;
    }

/* Listening: two rings leaving the tile and fading — outward, not around. */
.dz-card.is-listening .dz-card-badge-dot { background: var(--dz-live); }
.dz-card.is-listening .dz-card-word { color: var(--dz-live); }

.dz-card.is-listening .dz-card-ring {
    border-color: var(--dz-live);
    border-radius: 14px;
    animation: dz-radiate 2s ease-out infinite;
}

    .dz-card.is-listening .dz-card-ring::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 14px;
        border: 2px solid var(--dz-live);
        animation: dz-radiate 2s ease-out 1s infinite;
    }

@keyframes dz-radiate {
    from { transform: scale(.72); opacity: .55; }
    to { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dz-card.is-listening .dz-card-ring,
    .dz-card.is-listening .dz-card-ring::after,
    .dz-listening-mark::after {
        animation: none;
        opacity: 0;
    }
}

/* ================================================================ W4: HTTP Request
   boards/05-product/DesignerV2.html, "Settings · developer". */

.dz-pairs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dz-pair {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 22px;
    align-items: center;
    gap: 6px;
}

.dz-pair-name {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
}

.dz-segments {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px;
    border-radius: 7px;
    background: var(--bz-field-hover);
}

.dz-segment {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 5px;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--bz-slate);
    cursor: pointer;
}

    .dz-segment.is-on {
        background: var(--bz-surface);
        box-shadow: 0 1px 2px rgba(20, 21, 28, .12);
        color: var(--bz-ink);
    }

    .dz-segment:disabled {
        cursor: default;
    }

/* ================================================================ W5: Code
   boards/05-product/DesignerV2.html, "Settings · developer", Code. */

.dz-code {
    min-height: 180px;
    border-radius: 6px;
    background: #12121C;
    overflow: hidden;
}

.dz-console {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 11px;
    background: var(--bz-bg-app);
    border: 1px solid var(--bz-border);
    border-radius: 5px;
    max-height: 220px;
    overflow-y: auto;
}

.dz-console-line {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--bz-slate);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .dz-console-line.is-error {
        color: var(--bz-error);
    }

/* ================================================================ W6: AI steps
   boards/05-product/DesignerV2.html, "Settings · AI and apps" — what the call cost. */

.dz-usage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

    .dz-usage > span {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        background: var(--bz-bg-app);
        border: 1px solid var(--bz-border);
        border-radius: 7px;
        font-size: 11px;
        color: var(--bz-text-muted);
    }

    .dz-usage strong {
        font-family: var(--font-brand);
        font-size: 16px;
        font-weight: 600;
        color: var(--bz-ink);
        font-variant-numeric: tabular-nums;
    }

/* ================================================================ W3: Merge and Loop Over Items
   boards/05-product/DesignerV2.html, "Branches" and "Settings · logic and data". */

.dz-branch-chip.is-loop {
    background: rgba(55, 48, 163, .08);
    border-color: rgba(55, 48, 163, .25);
    color: #3730A3;
}

/* The loop's return: dashed, closing what it repeats. */
.dz-line.is-return {
    stroke-dasharray: 5 5;
    stroke: #8B87C9;
}

.dz-coming {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bz-border);
    border-radius: 7px;
    overflow: hidden;
}

.dz-coming-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bz-divider);
    font-size: 12px;
}

    .dz-coming-row:last-child {
        border-bottom: 0;
    }

.dz-coming-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--bz-field-hover);
    font-size: 11px;
    font-weight: 700;
    color: var(--bz-slate);
}

.dz-coming-name {
    flex: 1;
    min-width: 0;
    color: var(--bz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dz-coming-count {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
    color: var(--bz-text-muted);
}

.dz-phone-paths.is-loop .dz-phone-path {
    border-left-color: rgba(55, 48, 163, .35);
    border-left-style: dashed;
}

/* A note that asks for nothing yet — a paid connector on a plan without them. */
.bz-list-note.is-warning {
    background: var(--bz-warning-bg);
    border-color: var(--bz-warning-border);
    color: var(--bz-warning-strong);
}

    .bz-list-note.is-warning .app-icon svg {
        color: var(--bz-warning);
    }