/* ======================================================================   BBCRM Blazor theme - the prototype for every Blazor surface in the solution.

   HOW IT WORKS, and why it is this small:
   1146 of DevExpress Blazor's 1738 --dxbl-* variables are defined as var(--bs-*).
   So setting the Bootstrap palette themes ~90% of every DX component - buttons,
   grids, menus, calendars, tabs - with no per-component CSS. Layer 3 is the
   whole engine. Layer 4 exists only for the ~131 that hardcode a value.

   LAYERS
     1 primitives  raw brand values, no meaning attached
     2 semantic    what a colour is FOR - the only layer components should read
     3 bootstrap   maps semantics onto --bs-*, which drives Bootstrap AND DevExpress
     4 refinement  the handful DX hardcodes, plus radius/elevation/focus

   RULES
   - Components read layer 2, never layer 1. Repoint a role, not a hex.
   - Gold is TWO values by ground, not by theme name: #a87c1b measures 3.77:1 on
     white, #e0b54a measures 1.93:1 there and 9.46:1 on the dark slab. Surfaces
     that are dark in BOTH themes always take the bright one.
   - Gold TEXT on a light ground reads --bb-link (#8a6514, 5.31:1); #a87c1b is
     below 4.5:1 there, so it stays decoration (rules, focus, fills).
   ============================================================================= */

/* Layers 1-2 live in bbcrm-tokens.css, linked BEFORE this file by every host (no @import: it would fetch serially). */

/* ---- 3. bootstrap bridge - this is what drives DevExpress ----------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg:          var(--bb-surface-sunken);
    --bs-body-color:       var(--bb-text);
    --bs-secondary-color:  var(--bb-text-muted);
    --bs-border-color:     var(--bb-border);
    --bs-border-radius:    var(--bb-radius);
    --bs-border-radius-sm: var(--bb-radius-sm);
    --bs-border-radius-lg: var(--bb-radius-lg);

    --bs-primary:   var(--bb-brand);
    --bs-secondary: var(--bb-text-muted);
    --bs-success:   var(--bb-green);
    --bs-warning:   var(--bb-amber);
    --bs-danger:    var(--bb-red);
    --bs-info:      var(--bb-blue);

    --bs-body-font-family: var(--bb-font);
    --bs-body-font-size:   var(--bb-fs-body);
    --bs-body-line-height: 1.4286;
    --bs-body-font-weight: 400;
    --bs-link-color:       var(--bb-brand);
    --bs-link-hover-color: var(--bb-brand-hover);
    --bs-link-color-rgb:       138, 101, 20;   /* --bb-link on light grounds; dark ground below */
    --bs-link-hover-color-rgb: 110, 80, 14;
}

/* Plain Bootstrap buttons (error and notice pages) wear the brand, not Bootstrap's own blue. */
.btn-primary {
    --bs-btn-color: var(--bb-text-onbrand); --bs-btn-bg: var(--bb-brand); --bs-btn-border-color: var(--bb-brand);
    --bs-btn-hover-color: var(--bb-text-onbrand); --bs-btn-hover-bg: var(--bb-brand-hover); --bs-btn-hover-border-color: var(--bb-brand-hover);
    --bs-btn-active-color: var(--bb-text-onbrand); --bs-btn-active-bg: var(--bb-brand-hover); --bs-btn-active-border-color: var(--bb-brand-hover);
    --bs-btn-focus-shadow-rgb: 168, 124, 27;
}
.btn-outline-secondary {
    --bs-btn-color: var(--bb-text); --bs-btn-border-color: var(--bb-border-strong);
    --bs-btn-hover-color: var(--bb-text); --bs-btn-hover-bg: var(--bb-accent-soft); --bs-btn-hover-border-color: var(--bb-border-strong);
    --bs-btn-active-color: var(--bb-text); --bs-btn-active-bg: var(--bb-accent-soft); --bs-btn-active-border-color: var(--bb-border-strong);
}

[data-bs-theme="dark"] {
    --bs-link-color-rgb:       224, 181, 74;
    --bs-link-hover-color-rgb: 238, 205, 120;
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bb-font);
    font-size: var(--bb-fs-body);
    line-height: var(--bb-lh-body);
    font-weight: var(--bb-fw-regular);
}

/* Headings come off the ramp, not Bootstrap's responsive calc(): page titles 20/28, section titles 16/22, the rest body semibold. */
h1, h2, .h1, .h2 { font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: var(--bb-fw-semibold); }
h3, h4, .h3, .h4 { font-size: var(--bb-fs-subtitle2); line-height: var(--bb-lh-subtitle2); font-weight: var(--bb-fw-semibold); }
h5, h6, .h5, .h6 { font-size: var(--bb-fs-body); line-height: var(--bb-lh-body); font-weight: var(--bb-fw-semibold); }
small, .small { font-size: var(--bb-fs-caption); }
b, strong { font-weight: var(--bb-fw-semibold); }

/* ---- 4. refinement -------------------------------------------------------- */

/* DX ships .1875rem (3px) - too tight beside Bootstrap's radius, and it is the
   single tell that a DX control was dropped into a non-DX page. */
.dxbl-btn:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-border-radius: var(--bb-radius);
}

/* Focus is gold in both themes: the brand colour is the one thing guaranteed to
   contrast with every surface we define, and a visible ring is an accessibility
   floor, not decoration. */

/* Toast/message families hardcode their palette (88 + 15 of the 131 non-derived
   vars), so semantic status has to be re-pointed here or it drifts off-brand. */
.dxbl-toast {
    --dxbl-toast-success-color: var(--bb-green);
    --dxbl-toast-warning-color: var(--bb-amber);
    --dxbl-toast-danger-color:  var(--bb-red);
    --dxbl-toast-info-color:    var(--bb-blue);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-e3);
}

/* Grid: the surface an admin stares at all day. Header carries weight without
   colour, rows separate on a hairline rather than banding. */
.dxbl-grid {
    --dxbl-grid-header-bg: var(--bb-surface-sunken);
    --dxbl-grid-header-color: var(--bb-text-muted);
    --dxbl-grid-header-font-weight: 600;
    --dxbl-grid-border-color: var(--bb-border);
    --dxbl-grid-bg: var(--bb-surface);
    --dxbl-grid-border-radius: var(--bb-radius-lg);
    --dxbl-grid-hover-bg: var(--bb-accent-soft);
    --dxbl-grid-line-height: var(--bb-lh-body);
    --dxbl-grid-text-cell-padding-y: 7px;
}
/* Vertical lines, hover and one-line cells are the grid's own settings: GridlinesVisible, HighlightRowOnHover, TextWrapEnabled. */

/* Plain tables (not DevExpress grids): one line, ellipsis, full text in the tooltip (bbcrm-shell.js sets the title). Dense ~36px
   rows. A column that is genuinely long text opts out with .bb-cell-wrap. */
.app-center-scroll :where(table:not(.dxbl-grid-table)) td, .app-center-scroll :where(table:not(.dxbl-grid-table)) th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 36ch;
    line-height: var(--bb-lh-body);
}
.app-center-scroll :where(table:not(.dxbl-grid-table)) td { padding-block: 7px; }
.app-center-scroll :where(table:not(.dxbl-grid-table)) :is(td, th).bb-cell-wrap { white-space: normal; max-width: none; overflow: visible; }

/* ---- shared surfaces ------------------------------------------------------ */
.bb-card {
    /* A surface carries its own text role: the frame's inherited page text is the WebForms value (#333) in both themes. */
    color: var(--bb-text);
    background: var(--bb-surface-raised);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-e1);
    padding: 18px 20px;
}

.bb-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -2px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bb-border);
}

.bb-card__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-body);
    line-height: var(--bb-lh-body);
    font-weight: 600;
    color: var(--bb-text);
}

.bb-page-title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    line-height: var(--bb-lh-subtitle1);
    font-weight: 600;
    color: var(--bb-text);
}

/* The gold hairline is the one piece of brand on an otherwise quiet page. */
.bb-accent-rule {
    height: 2px;
    background: linear-gradient(90deg, var(--bb-accent) 0%, transparent 70%);
    border: 0;
    margin: 0 0 14px;
}

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

/* ---- 5. controls ---------------------------------------------------------- */
/* Sizes are the WCAG 2.2 numbers, not taste: 2.5.8 (AA) requires 24x24 CSS px,
   2.5.5 (AAA) 44x44, because a finger is coarse and obscures its own target.
   This app is used on iPad, so 44 is the primary-action size and 24 the floor
   no control may go under - icon buttons reach it with padding, not glyph size. */
:root {
    --bb-ctl-h-compact: 32px;
    --bb-ctl-h-small:   36px;
    --bb-ctl-h:         40px;
    --bb-ctl-h-touch:   44px;
    --bb-ctl-px:        14px;
    --bb-hit-min:       24px;
}


/* An icon-only control still has to be reachable. Padding, never a bigger glyph. */
.bb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--bb-ctl-h-touch);
    min-height: var(--bb-ctl-h-touch);
    padding: 0;
    border: 0;
    border-radius: var(--bb-radius);
    background: transparent;
    color: var(--bb-text-muted);
    cursor: pointer;
}

.bb-icon-btn:hover { background: var(--bb-accent-soft); color: var(--bb-text); }
.bb-icon-btn:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }


/* One primary per view. Hierarchy is carried by weight, not by more colour -
   a screen where three buttons all shout has no primary action at all. */
/* Four roles, matching the app's Blue/Gray/Green/Red. EVERY one is outlined -
   a borderless button reads as a link and stops looking clickable.
   TONAL, never solid - the house rule: soft tint + coloured border + coloured
   text, hue carries the meaning. A single solid CTA breaks the language, which
   is why even green was de-solidified. .dxbl-btn is repeated for specificity:
   DX's own role rules load after this file and win at equal weight. */
.dxbl-btn.bb-btn-primary,
.dxbl-btn.bb-btn-secondary,
.dxbl-btn.bb-btn-quiet,
.dxbl-btn.bb-btn-ok,
.dxbl-btn.bb-btn-danger {
    --dxbl-btn-border-width: 1px;
    font-weight: 600;
    /* Height through our own CssClass (https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton._properties, CssClass):
       36 px is the house small button (SizeMode.Small), the floor for every role; touch screens get 44 (WCAG 2.5.5). */
    min-height: var(--bb-ctl-h-small);
    padding-inline: var(--bb-ctl-px);
}

@media (pointer: coarse) {
    .dxbl-btn.bb-btn-primary,
    .dxbl-btn.bb-btn-secondary,
    .dxbl-btn.bb-btn-quiet,
    .dxbl-btn.bb-btn-ok,
    .dxbl-btn.bb-btn-danger { min-height: var(--bb-ctl-h-touch); }
}

.dxbl-btn.bb-btn-primary {
    --dxbl-btn-color: var(--bb-btn-brand-fg);        --dxbl-btn-hover-color: var(--bb-btn-brand-fg);
    --dxbl-btn-bg: var(--bb-btn-brand-bg);           --dxbl-btn-hover-bg: var(--bb-btn-brand-bg-h);
    --dxbl-btn-active-bg: var(--bb-btn-brand-bg-h);  --dxbl-btn-active-color: var(--bb-btn-brand-fg);
    --dxbl-btn-border-color: var(--bb-btn-brand-fg); --dxbl-btn-hover-border-color: var(--bb-btn-brand-fg);
}

.dxbl-btn.bb-btn-ok {
    --dxbl-btn-color: var(--bb-btn-ok-fg);        --dxbl-btn-hover-color: var(--bb-btn-ok-fg);
    --dxbl-btn-bg: var(--bb-btn-ok-bg);           --dxbl-btn-hover-bg: var(--bb-btn-ok-bg-h);
    --dxbl-btn-active-bg: var(--bb-btn-ok-bg-h);  --dxbl-btn-active-color: var(--bb-btn-ok-fg);
    --dxbl-btn-border-color: var(--bb-btn-ok-fg); --dxbl-btn-hover-border-color: var(--bb-btn-ok-fg);
}

.dxbl-btn.bb-btn-danger {
    --dxbl-btn-color: var(--bb-btn-danger-fg);        --dxbl-btn-hover-color: var(--bb-btn-danger-fg);
    --dxbl-btn-bg: var(--bb-btn-danger-bg);           --dxbl-btn-hover-bg: var(--bb-btn-danger-bg-h);
    --dxbl-btn-active-bg: var(--bb-btn-danger-bg-h);  --dxbl-btn-active-color: var(--bb-btn-danger-fg);
    --dxbl-btn-border-color: var(--bb-btn-danger-fg); --dxbl-btn-hover-border-color: var(--bb-btn-danger-fg);
}

.dxbl-btn.bb-btn-secondary {
    --dxbl-btn-color: var(--bb-text);              --dxbl-btn-hover-color: var(--bb-text);
    --dxbl-btn-bg: transparent;                    --dxbl-btn-hover-bg: var(--bb-btn-quiet-bg-h);
    --dxbl-btn-active-bg: var(--bb-btn-quiet-bg-h);--dxbl-btn-active-color: var(--bb-text);
    --dxbl-btn-border-color: var(--bb-border-strong); --dxbl-btn-hover-border-color: var(--bb-text-muted);
}

.dxbl-btn.bb-btn-quiet {
    --dxbl-btn-color: var(--bb-btn-quiet-fg);      --dxbl-btn-hover-color: var(--bb-text);
    --dxbl-btn-bg: transparent;                    --dxbl-btn-hover-bg: var(--bb-btn-quiet-bg-h);
    --dxbl-btn-active-bg: var(--bb-btn-quiet-bg-h);--dxbl-btn-active-color: var(--bb-text);
    --dxbl-btn-border-color: var(--bb-border-strong); --dxbl-btn-hover-border-color: var(--bb-text-muted);
}

/* Reading measure: a form field stretched to 1400px is unreadable and unfillable. */
.bb-measure { max-width: 560px; }
.bb-measure-wide { max-width: var(--bb-w-notes); }

/* Field widths: an editor is as wide as what it holds, never as wide as the page.
   Set as CssClass on the DX editor (DX's documented sizing: it sets width:100%, we cap it),
   or on the field container. Long = two medium columns + gap, so a long field ends on the
   right edge of a two-column form. BBCRM.App.Tests/FieldWidthClassTests requires one per editor. */
:root {
    --bb-w-short:  176px;  /* code, status, a word, date, time, amount, quantity, percent */
    --bb-w-medium: 320px;  /* name, phone, email, city */
    --bb-w-long:   656px;  /* address, URL, subject line */
    --bb-w-notes:  760px;  /* memo: capped reading width */
    --bb-w-gap:    16px;
}
.bb-w-short  { max-width: var(--bb-w-short); }
.bb-w-medium { max-width: var(--bb-w-medium); }
.bb-w-long   { max-width: var(--bb-w-long); }
.bb-w-notes  { max-width: var(--bb-w-notes); }
/* The editor already sits in a sized cell (grid cell template, a fixed filter slot). */
.bb-w-fill   { max-width: none; }
/* A form block: two medium columns wide, so pairs sit together instead of 800px apart. */
.bb-w-form   { max-width: var(--bb-w-long); }
/* A field with no related neighbor takes its own row of a form grid; only related fields sit side by side. */
.bb-w-alone  { grid-column: 1 / -1; }

/* ---- 6. layout ------------------------------------------------------------ */
/* 1200px measure: an admin grid wants width, prose does not. Gutters scale with
   the viewport so a 1024 iPad and a 1920 desktop both breathe. */
.bb-shell {
    /* width is required, not redundant: as a flex item (inside .bb-app) the box would otherwise
       shrink to its content and margin:auto would centre that narrow box. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 32px);
}

.bb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bb-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}

.bb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.bb-label {
    display: block;
    margin: 12px 0 4px;
    font-size: var(--bb-fs-caption);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bb-text-muted);
}

.bb-field { width: 100%; }

.bb-hint {
    margin: 0 0 12px;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
}

/* ---- 7. motion + press ---------------------------------------------------- */
/* Hover alone reads cheap. A control needs three states an eye can feel: rest,
   approach, commit. 120ms is under the ~150ms where a transition starts to feel
   laggy, and the 1px press is the whole "it responded" signal. DevExpress buttons keep their own states. */
.bb-icon-btn {
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, box-shadow .12s ease, transform .06s ease;
}

.bb-icon-btn:active { transform: translateY(1px); }



/* ---- 8. button icons ------------------------------------------------------ */
/* Leading icon, label always present. currentColor via mask so one icon file
   serves every button role and both themes - no per-variant icon assets. */
[class*="bb-ico-"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: .5em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;    mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.bb-ico-send::before   { -webkit-mask-image: url("icons/fa-paper-plane.svg");   mask-image: url("icons/fa-paper-plane.svg"); }
.bb-ico-mail::before   { -webkit-mask-image: url("icons/fa-envelope.svg");      mask-image: url("icons/fa-envelope.svg"); }
.bb-ico-save::before   { -webkit-mask-image: url("icons/fa-floppy-disk.svg");   mask-image: url("icons/fa-floppy-disk.svg"); }
.bb-ico-edit::before   { -webkit-mask-image: url("icons/fa-pen-to-square.svg"); mask-image: url("icons/fa-pen-to-square.svg"); }
.bb-ico-delete::before { -webkit-mask-image: url("icons/fa-trash.svg");         mask-image: url("icons/fa-trash.svg"); }
.bb-ico-ok::before     { -webkit-mask-image: url("icons/fa-circle-check.svg");  mask-image: url("icons/fa-circle-check.svg"); }
.bb-ico-cancel::before { -webkit-mask-image: url("icons/fa-ban.svg");            mask-image: url("icons/fa-ban.svg"); }
.bb-ico-back::before   { -webkit-mask-image: url("icons/fa-arrow-left.svg");     mask-image: url("icons/fa-arrow-left.svg"); }
.bb-ico-search::before { -webkit-mask-image: url("icons/fa-magnifying-glass.svg"); mask-image: url("icons/fa-magnifying-glass.svg"); }

/* ---- 9. form feedback ----------------------------------------------------- */
/* House rules, carried over from the WebForms app rather than reinvented:
   no asterisks - required is signalled by the LABEL colour and by feedback after
   a submit attempt, never by pre-decorating a caption. Errors are inline TEXT
   under the field, not a hover triangle. Help sits under the control it explains. */

.bb-label--req { color: var(--bb-label-req); }

.bb-help {
    display: block;
    margin-top: 4px;
    font-size: var(--bb-fs-caption);
    line-height: 1.43;
    color: var(--bb-text-muted);
}

.bb-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--bb-fs-caption);
    line-height: 1.43;
    color: var(--bb-btn-danger-fg);
}

.bb-error::before {
    content: "";
    flex: 0 0 1em;
    width: 1em;
    height: 1em;
    margin-top: .1em;
    background-color: currentColor;
    -webkit-mask-image: url("icons/fa-circle-exclamation.svg"); mask-image: url("icons/fa-circle-exclamation.svg");
    -webkit-mask-size: contain;   mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
}

/* The tinted fill is what makes an invalid field findable when several are wrong
   at once - a red border alone disappears in a long form. */
/* DevExpress's own text-edit variables, so the control keeps drawing its states. */
.bb-invalid .dxbl-text-edit,
.dxbl-text-edit.bb-invalid,
.bb-invalid .dxbl-combobox {
    --dxbl-text-edit-bg: var(--bb-danger-bg);
    --dxbl-text-edit-border-color: var(--bb-btn-danger-fg);
    --dxbl-text-edit-border-hovered-color: var(--bb-btn-danger-fg);
    --dxbl-text-edit-focus-border-color: var(--bb-btn-danger-fg);
    --dxbl-text-edit-color: var(--bb-btn-danger-fg);
}

.bb-field-group { margin-bottom: 14px; }

/* DX FormLayout owns caption + layout + validation. These only style what it
   does not provide: the softened required-label colour and inline help. */
.bb-form .dxbl-fl-cpt.bb-label--req { color: var(--bb-label-req); }

.bb-form .validation-message,
.bb-form .bb-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--bb-fs-caption);
    line-height: 1.43;
    color: var(--bb-btn-danger-fg);
}

.bb-form .validation-message::before,
.bb-form .bb-error::before {
    content: "";
    flex: 0 0 1em; width: 1em; height: 1em; margin-top: .1em;
    background-color: currentColor;
    -webkit-mask-image: url("icons/fa-circle-exclamation.svg"); mask-image: url("icons/fa-circle-exclamation.svg");
    -webkit-mask-size: contain;     mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
}

.bb-saved {
    align-self: center;
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-btn-ok-fg);
}

/* Captions: DevExpress's own caption variables; alignment comes from the layout (ItemCaptionAlignment.All on horizontal forms). */
.bb-form {
    --dxbl-fl-caption-font-size: var(--bb-fs-caption);
    --dxbl-fl-caption-font-weight: 600;
    --dxbl-fl-caption-color: var(--bb-text-muted);
}

.bb-form .dxbl-fl-item { padding-bottom: 8px; }

/* Help and errors line up under the control, not under the caption rail. */
.bb-form .dxbl-fl-item-horizontal .bb-help,
.bb-form .dxbl-fl-item-horizontal .validation-message { margin-left: 0; }

/* ---- 10. app shell -------------------------------------------------------- */
/* Improves on the WebForms master in four ways: the bar is STICKY (it scrolled
   away before), the logo is the VECTOR mark and swaps to the reversed artwork on
   dark instead of sitting on a light chip, the nav is a real landmark for screen
   readers, and the whole thing collapses at 1024 instead of only shrinking. */

.bb-app { min-height: 100vh; display: flex; flex-direction: column; }

.bb-appbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: var(--app-header-bg, var(--bb-surface));
    border-bottom: 1px solid var(--app-header-border, var(--bb-border));
    box-shadow: var(--bb-e1);
}

.bb-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.bb-brand__mark {
    display: block;
    width: 168px;
    height: 30px;
    background: url("brand/blackbelt-logo-horizontal-no-tagline.svg") left center / contain no-repeat;
}

[data-bs-theme="dark"] .bb-brand__mark {
    background-image: url("brand/blackbelt-logo-horizontal-no-tagline-reversed.svg");
}

.bb-brand__scope {
    padding-left: 12px;
    border-left: 1px solid var(--app-header-border, var(--bb-border));
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-caption);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-header-muted, var(--bb-text-muted));
}

.bb-appbar__actions { display: flex; align-items: center; gap: 8px; }

/* The University bar is the same navy as the staff bar (bbcrm-shell.css), the reversed mark on it in both themes. */
.bb-appbar--navy {
    --app-header-bg: var(--bb-navy-700);
    --app-header-border: var(--bb-bar-edge);
    --app-header-muted: var(--bb-plate-muted);
}
[data-bs-theme="dark"] .bb-appbar--navy { --app-header-bg: var(--bb-navy-800); }
.bb-appbar--navy .bb-brand__mark { background-image: url("brand/blackbelt-logo-horizontal-no-tagline-reversed.svg"); }
.bb-appbar--navy .bb-brand__scope { border-left-color: var(--bb-bar-line); }

/* One chip, one colour - the house rule. min-width is a floor so short labels do
   not look stunted; the badge is the ONLY accent left on the bar. */
.bb-topchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    height: 31px;
    padding: 0 12px;
    border: 1px solid var(--app-header-border, var(--bb-border));
    border-radius: var(--bb-radius);
    background: transparent;
    color: var(--app-header-text, var(--bb-text));
    font-size: var(--bb-fs-body);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.bb-topchip:hover { background: var(--bb-accent-soft); border-color: var(--bb-accent); }
.bb-topchip:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }

.bb-topchip__badge {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--bb-accent);
    color: #fff;
    font-size: var(--bb-fs-caption);
    font-weight: 600;
    line-height: 18px;
}

.bb-body { display: flex; flex: 1; min-height: 0; }

.bb-sidenav {
    flex: 0 0 232px;
    padding: 14px 10px;
    background: var(--bb-surface);
    border-right: 1px solid var(--bb-border);
}

.bb-main { flex: 1; min-width: 0; background: var(--bb-surface-sunken); }

/* Nav is a list of destinations, not a decorated tree - weight and one gold
   marker carry the current page, nothing else competes. */
.bb-nav {
    font-size: var(--bb-fs-body);

    /* DevExpress exposes appearance as CSS variables, which is the supported customisation
       point. Its selected item is an absolutely-positioned ::before overlay painted with
       --bs-primary at opacity .8 - a navy slab that body-coloured text cannot be read on. All
       three have to move together: tint the overlay, or the text is unreadable. The gold marker
       below then carries the current page and nothing else competes. */
    --bs-primary: var(--bb-accent-soft);
    --dxbl-treeview-item-selection-bg: var(--bb-accent-soft);
    --dxbl-treeview-item-selection-color: var(--bb-text);
    --dxbl-treeview-item-hover-bg: var(--bb-btn-quiet-bg-h);
}

/* The current item is marked by a class WE put on it, through the tree's CssClass data
   mapping. DevExpress documents styling through its public API and states that rules written
   against internal dxbl-* classes "can be modified in future versions without notification" -
   so the marker must not depend on one. */
.bb-nav .bb-nav__current {
    border-left: 3px solid var(--bb-accent);
    font-weight: 600;
}

@media (max-width: 1024px) {
    .bb-body { flex-direction: column; }
    .bb-sidenav {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--bb-border);
    }
    .bb-brand__scope { display: none; }
}

/* ---- 10b. Corporate Admin rail ------------------------------------------- */
/* The menu is CorpNav's DxDrawer: from 1180px open beside the page and in view while it scrolls, below that a
   layer under the app bar that the drawer opens over from the menu button. Only our containers are placed here. */
.bb-appbar__lead { display: flex; align-items: center; gap: 8px; min-width: 0; }

.bb-corp-body { display: flex; flex: 1; min-height: 0; }

.bb-corp-rail {
    position: sticky;
    top: var(--bb-shell-top, 53px);
    flex: none;
    align-self: flex-start;
    width: 232px;
    height: calc(100vh - var(--bb-shell-top, 53px));
    height: calc(100dvh - var(--bb-shell-top, 53px));
}

.bb-corp-navlayer { height: 100%; }

/* Shown only until the drawer's breakpoints report the window width. */
.bb-corp-navlayer__static {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    background: var(--bb-surface);
    border-right: 1px solid var(--bb-border);
}

/* Focused when the drawer opens over the page; the rows inside carry their own focus ring. */
.bb-corp-navlayer__body { width: 100%; outline: none; }

.bb-corp-drawer {
    --dxbl-drawer-panel-bg: var(--bb-surface);
    --dxbl-drawer-panel-color: var(--bb-text);
    --dxbl-drawer-separator-border-color: var(--bb-border);
}

.bb-corp-burger { display: none; }

@media (max-width: 1179.98px) {
    .bb-corp-burger { display: inline-flex; }
    .bb-corp-rail {
        position: fixed;
        top: var(--bb-shell-top, 53px);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 25;
        align-self: auto;
        width: auto;
        height: auto;
        pointer-events: none;
    }
    .bb-corp-navlayer__static { display: none; }
    .bb-corp-navlayer.is-open { pointer-events: auto; }
}

/* Touch screens: 44px menu rows (WCAG 2.5.5), through the accordion's own size variables. */
@media (pointer: coarse) {
    .bb-nav {
        --dxbl-accordion-group-header-content-padding-y-m: 12px;
        --dxbl-accordion-group-item-content-padding-y-m: 12px;
    }
}

/* ---- 11. sign in ---------------------------------------------------------- */
/* Split panel, not a box in the middle: the brand holds the left, the form the
   right. Corp gets presence without marketing copy - it is an internal console,
   so the left panel states what this is and what it reaches, nothing more. */
.bb-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
}

.bb-login__brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 48px clamp(32px, 5vw, 72px);
    background: linear-gradient(135deg, #22345c 0%, #010f20 100%);
    color: #fff;
    overflow: hidden;
}

/* Two soft washes give the slab depth without a texture or an image. */
.bb-login__brand::before,
.bb-login__brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bb-login__brand::before {
    width: 460px; height: 460px; right: -160px; top: -140px;
    background: radial-gradient(circle, rgba(224, 181, 74, .16) 0%, transparent 68%);
}

.bb-login__brand::after {
    width: 380px; height: 380px; left: -120px; bottom: -150px;
    background: radial-gradient(circle, rgba(77, 127, 184, .20) 0%, transparent 70%);
}

.bb-login__brand-inner { position: relative; max-width: 460px; }

.bb-login__logo {
    display: block;
    width: 420px; height: 88px;
    margin-bottom: 26px;
    background: url("brand/blackbelt-logo-horizontal-reversed.svg") left center / contain no-repeat;
}

.bb-login__eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--bb-fs-caption); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: #e0b54a;
}

.bb-login__eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: #e0b54a; }

.bb-login__headline {
    margin: 14px 0 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.bb-login__keyline {
    width: 56px; height: 3px; margin: 20px 0 18px;
    background: #e0b54a; border: 0; border-radius: 2px;
}

.bb-login__reach { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.bb-login__reach li {
    display: flex; align-items: baseline; gap: 10px;
    font-size: var(--bb-fs-body); color: rgba(255, 255, 255, .78);
}

.bb-login__reach b { color: #fff; font-variant-numeric: tabular-nums; }

.bb-login__secure {
    margin-top: 28px;
    font-size: var(--bb-fs-caption);
    color: rgba(255, 255, 255, .55);
}

/* ---- form side ---- */
.bb-login__panel {
    display: grid;
    place-items: center;
    padding: 40px 24px;
    background: var(--bb-surface);
}

.bb-login__form { width: 100%; max-width: 340px; }

.bb-login__scope {
    margin: 0 0 4px;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-caption); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bb-accent);
}

.bb-login__title {
    margin: 0 0 22px;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1); font-weight: 600; color: var(--bb-text);
}

.bb-login__sent { margin: 0 0 14px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }

.bb-input {
    width: 100%;
    min-height: var(--bb-ctl-h);
    padding: 0 12px;
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius);
    background: var(--bb-surface);
    color: var(--bb-text);
    font: inherit;
}

.bb-input:focus { outline: none; border-color: var(--bb-focus); box-shadow: var(--bb-focus-ring); }

.bb-otp { letter-spacing: .5em; font-size: var(--bb-fs-subtitle2); text-align: center; }

.bb-login__submit { width: 100%; margin-top: 18px; justify-content: center; }

.bb-login__back {
    display: block; margin-top: 12px; text-align: center;
    font-size: var(--bb-fs-body); color: var(--bb-text-muted);
}

@media (max-width: 900px) {
    .bb-login { grid-template-columns: 1fr; }
    .bb-login__brand { padding: 32px 24px; }
    .bb-login__reach, .bb-login__secure { display: none; }
    .bb-login__headline { font-size: var(--bb-fs-subtitle1); }
}

/* ---- 12. documents -------------------------------------------------------- */
/* Prose, which the rest of this file has no equivalent for: sections 5-11 are built
   for admin screens, where text is a label. An article is the text. Used by the help
   library today; any read-mostly page - a policy, a release note - takes the same set. */

.bb-quiet { color: var(--bb-text-muted); }

/* 68ch, not .bb-measure: a form measure is a pixel width, prose wants the character
   count, which is what keeps the line readable as the type scale changes. */
.bb-doc { max-width: 68ch; line-height: 1.65; }

.bb-doc__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    line-height: 1.25;
    margin: 4px 0 10px;
    color: var(--bb-text);
}

.bb-doc__summary {
    color: var(--bb-text-muted);
    font-size: var(--bb-fs-subtitle2);
    margin: 0 0 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bb-border);
}

/* Headings inside a document come from rendered Markdown, so they are styled by
   element - there is no class to hang on them. */
.bb-doc h2 {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    margin: 32px 0 10px;
    color: var(--bb-text);
}

.bb-doc ol, .bb-doc ul { padding-left: 22px; }
.bb-doc li { margin-bottom: 6px; }

.bb-doc a { color: var(--bb-link); }

/* The one call to action an article may carry, written in Markdown as [text](url){.bb-doc-cta}. */
.bb-doc a.bb-doc-cta {
    display: inline-block;
    margin: 4px 16px 4px 0;
    padding: 9px 18px;
    border: 1px solid var(--bb-btn-brand-fg);
    border-radius: var(--bb-radius);
    background: var(--bb-btn-brand-bg);
    color: var(--bb-btn-brand-fg);
    font-weight: 600;
    text-decoration: none;
}

.bb-doc a.bb-doc-cta:hover { background: var(--bb-btn-brand-bg-h); }
.bb-doc a.bb-doc-cta:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }

.bb-doc__note {
    background: var(--bb-accent-soft);
    border-left: 3px solid var(--bb-accent);
    padding: 10px 14px;
    border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
    font-size: var(--bb-fs-body);
}

/* A list of documents to choose from. The card is .bb-card; this adds the gold edge
   and makes the whole card the link target. */
.bb-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.bb-doclist a.bb-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--bb-accent);
}

.bb-doclist a.bb-card:hover { background: var(--bb-accent-soft); }
.bb-doclist a.bb-card:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }

.bb-doclist__title { display: block; font-weight: 600; margin-bottom: 2px; }
.bb-doclist__summary { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }

.bb-docgroup { margin-bottom: 28px; }
.bb-docgroup > .bb-card__title { display: block; margin-bottom: 10px; }

.bb-docfoot {
    display: flex; gap: 20px; margin-top: 44px;
    padding-top: 18px; border-top: 1px solid var(--bb-border); font-size: var(--bb-fs-body);
}

.bb-docfoot a { color: var(--bb-accent); }

/* A search box in the app bar. Sized here so every surface that puts one there agrees. */
.bb-appbar__search { min-width: 260px; }

@media (max-width: 560px) {
    .bb-appbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .bb-appbar__search { min-width: 0; }
}

/* ---- 13. pay dues (member portal) ----------------------------------------- */
/* One flow: pick charges, pick a card, read the itemised total, press the button
   that states the exact amount. The total block is the only emphasised surface. */

.bb-pay { max-width: 40rem; }

.bb-pay__group { font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); margin: 1.5rem 0 .625rem; }

.bb-pay__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

.bb-pay__row {
    display: flex; align-items: center; gap: .875rem;
    background: var(--bb-surface); border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius); padding: .875rem 1rem;
    min-height: var(--bb-ctl-h-touch); cursor: pointer;
}

.bb-pay__row:has(input:checked) { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-pay__row:has(input:focus-visible) { box-shadow: var(--bb-focus-ring); }
.bb-pay__row input { flex: none; width: 1.125rem; height: 1.125rem; accent-color: var(--bb-accent); margin: 0; }

.bb-pay__what { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bb-pay__desc { font-weight: 600; color: var(--bb-text); line-height: 1.43; overflow-wrap: anywhere; }
.bb-pay__meta { font-size: var(--bb-fs-body); color: var(--bb-text-muted); margin-top: .1875rem; }
.bb-pay__amt { flex: none; font-weight: 600; color: var(--bb-text); font-variant-numeric: tabular-nums; }

.bb-pay__total {
    margin-top: 1.5rem; padding: 1rem 1.125rem;
    background: var(--bb-surface-sunken); border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
}

.bb-pay__line { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; color: var(--bb-text-muted); padding: .1875rem 0; }
.bb-pay__line--total { color: var(--bb-text); font-weight: 600; font-size: var(--bb-fs-subtitle2); border-top: 1px solid var(--bb-border); margin-top: .375rem; padding-top: .5rem; }

.bb-pay__submit {
    display: block; width: 100%; margin-top: 1rem; padding: .875rem 1rem;
    font: inherit; font-size: var(--bb-fs-body); font-weight: 600;
    color: var(--bb-text-onbrand); background: var(--bb-brand);
    border: 0; border-radius: var(--bb-radius); cursor: pointer;
    min-height: var(--bb-ctl-h-touch);
}

.bb-pay__submit:hover:not(:disabled) { background: var(--bb-brand-hover); }
.bb-pay__submit:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pay__submit:disabled { opacity: .6; cursor: default; }

.bb-pay__note { color: var(--bb-text-muted); line-height: 1.43; max-width: 48ch; margin: .75rem 0 0; }

.bb-pay__notice {
    border: 1px solid var(--bb-border); border-left: 3px solid var(--bb-accent);
    border-radius: var(--bb-radius); background: var(--bb-surface);
    padding: 1rem 1.125rem; line-height: 1.43; color: var(--bb-text);
}

.bb-pay__notice--error { border-left-color: var(--bb-btn-danger-fg); }

.bb-pay__link { display: inline-block; margin-top: .75rem; color: var(--bb-accent); font-weight: 600; }
a.bb-pay__submit { text-decoration: none; text-align: center; }

/* Exam invitation reply (portal): phone-first, one column, tap targets at touch height. */
.bb-exam { max-width: 40rem; }
.bb-exam__eyebrow { margin: 0 0 .25rem; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-exam__where { margin: 0 0 1rem; color: var(--bb-text-muted); }
.bb-exam__facts { margin: 0 0 1rem; display: grid; gap: .25rem; }
.bb-exam__facts > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--bb-border); padding: .5rem 0; }
.bb-exam__facts dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-exam__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-exam__q { margin: 0 0 1.25rem; }
.bb-exam__h2 { font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); margin: 0 0 .5rem; }
.bb-exam__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.bb-exam__opts--two > .bb-exam__opt { flex: 1 1 0; }
.bb-exam__opt {
    min-height: var(--bb-ctl-h-touch); padding: .5rem 1rem; font: inherit; color: var(--bb-text); background: var(--bb-surface);
    border: 1px solid var(--bb-border); border-radius: var(--bb-radius); cursor: pointer;
}
.bb-exam__opt[aria-pressed="true"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); font-weight: 600; }
.bb-exam__opt:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-exam__secondary {
    display: block; width: 100%; margin-top: .75rem; min-height: var(--bb-ctl-h-touch); padding: .75rem 1rem; font: inherit; font-weight: 600;
    color: var(--bb-text); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); cursor: pointer;
}
.bb-exam__secondary:disabled { opacity: .6; cursor: default; }
.bb-exam__done { font-weight: 600; margin: 1rem 0; }

/* ---- Portal documents: receipt and year-end statement ------------------------------------------
   One style for both, because a statement is a receipt for a year. A document, not a dashboard
   card: it is what a member forwards to an employer or files with a tax return, so it reads as
   paper. Layer-2 roles only, so dark mode follows the theme. */
.rcpt__back {
    display: inline-block;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    text-decoration: none;
    margin-bottom: .75rem;
}
.rcpt__back:hover { color: var(--bb-text); text-decoration: underline; }
/* Autopay off on a receipt reads as a warning: the danger text role (dark red on light, soft rose on dark). */
.rcpt__next .rcpt__warn, .rcpt__warn { color: var(--bb-text-danger); font-weight: 600; }

.rcpt__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    color: var(--bb-text);
    margin: 0 0 .5rem;
}
.rcpt__note { color: var(--bb-text-muted); line-height: 1.43; max-width: 40ch; }

.rcpt {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: .375rem;
    padding: 1.5rem 1.25rem;
    max-width: 34rem;
}
.rcpt__head { border-bottom: 1px solid var(--bb-border); padding-bottom: 1rem; margin-bottom: 1rem; }
.rcpt__kind { margin: 0 0 .375rem; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }

/* The business is the identity on the document - it says who was paid. */
.rcpt__biz {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text);
    margin: 0;
    line-height: 1.3;
}
/* Statement: the trading name under the legal one the taxpayer id is matched against. */
.rcpt__dba { margin: .125rem 0 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.rcpt__bizmeta { margin: .25rem 0 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.rcpt__dba + .rcpt__bizmeta { margin-top: .5rem; }
.rcpt__bizmeta + .rcpt__bizmeta { margin-top: .125rem; }

.rcpt__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem 1rem;
    margin: 0 0 1.25rem;
}
.rcpt__facts dt { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); margin-bottom: .125rem; }
.rcpt__facts dd { margin: 0; font-size: var(--bb-fs-body); color: var(--bb-text); }

.rcpt__lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bb-border); }
.rcpt__lines li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--bb-border);
}
.rcpt__what { color: var(--bb-text); min-width: 0; }
/* Tabular figures so the amounts stack on the decimal instead of wandering. */
.rcpt__amt { flex: none; font-variant-numeric: tabular-nums; color: var(--bb-text); }

.rcpt__tax {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .625rem 0 0;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
}
.rcpt__total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .75rem 0 0;
    padding-top: .75rem;
    border-top: 2px solid var(--bb-text);
    font-weight: 600;
    font-size: var(--bb-fs-subtitle2);
    color: var(--bb-text);
}
/* Says what the statement's figure IS, so an accountant never has to ask. */
.rcpt__basis { margin: .875rem 0 0; font-size: var(--bb-fs-body); line-height: 1.43; color: var(--bb-text-muted); }
.rcpt__total + .rcpt__basis { margin-top: 1.25rem; }

.rcpt__print {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin-top: 1.25rem;
    padding: .8125rem 1rem;
    font: inherit;
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: .375rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.rcpt__print:hover { border-color: var(--bb-text); }
.rcpt__print:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
@media (min-width: 64rem) { .rcpt__print { width: auto; min-width: 16rem; } }

/* On paper: the document and nothing else. A printed "Save or print" button is embarrassing. */
@media print {
    .rcpt__back, .rcpt__print { display: none !important; }
    .rcpt { border: none; padding: 0; max-width: none; }
}

/* ---- 14. member portal identity -------------------------------------------- */
/* The member's business owns the bar; our name appears only as "Powered by" in the account
   menu. Names run to 48 characters, so they truncate on one line and never wrap. */
.bb-portal-id {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    flex: 0 1 auto;
    min-height: 2.75rem;
    color: var(--bb-text-onbrand);
    text-decoration: none;
}
.bb-portal-id:hover { color: var(--bb-text-onbrand); }
/* Grid items default to min-width:auto, so a long name would widen the whole shell instead of truncating. */
.shell > .shell__bar { min-width: 0; }
.bb-portal-id:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; border-radius: var(--bb-radius); }

/* A light chip: owner logos are drawn for a white page, often transparent, any aspect ratio. */
.bb-portal-id__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: .1875rem;
    border-radius: var(--bb-radius);
    background: var(--bb-text-onbrand);
}
.bb-portal-id__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.bb-portal-id__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bb-portal-id__name {
    min-width: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle2);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The desk nav sits beside the name, so the name yields first. */
@media (min-width: 64rem) {
    .bb-portal-id { max-width: 22rem; }
    .bb-portal-id__name { font-size: var(--bb-fs-subtitle2); }
}

/* Second line of the letterhead: the location, in the bar's muted role. */
.bb-portal-id__place {
    min-width: 0;
    font-size: var(--bb-fs-body);
    line-height: 1.3;
    color: var(--bb-text-onbrand);
    opacity: .75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same height as name + city, so the bar does not resize when the real text lands. */
.bb-portal-id__ghost { display: block; width: 10rem; height: 2.375rem; }

/* Sign-in and set-password, before the business is known: a neutral title, no wordmark. */
.bb-portal-signin__title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text-onbrand);
}

/* Call the location, beside the account button and in its family: a 44px ring on the bar. Phone
   widths show the icon alone (aria-label names the business); the desk adds the number. */
.bb-portal-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: none;
    min-width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bb-text-onbrand) 22%, transparent);
    background: color-mix(in srgb, var(--bb-text-onbrand) 8%, transparent);
    color: var(--bb-text-onbrand);
    text-decoration: none;
}
.bb-portal-call svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.bb-portal-call__number { display: none; font-size: var(--bb-fs-body); white-space: nowrap; }
.bb-portal-call:hover { background: color-mix(in srgb, var(--bb-text-onbrand) 16%, transparent); border-color: color-mix(in srgb, var(--bb-text-onbrand) 55%, transparent); }
.bb-portal-call:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; }
@media (min-width: 64rem) {
    .bb-portal-call { padding: 0 1rem; }
    .bb-portal-call__number { display: inline; }
}

/* The full business name at the top of the account menu - the bar truncates long ones. */
.bb-acctmenu-biz {
    margin: 0 0 .25rem;
    padding: .5rem .75rem .625rem;
    border-bottom: 1px solid var(--bb-border);
    font-weight: 600;
    font-size: var(--bb-fs-body);
    line-height: 1.3;
    color: var(--bb-text);
    overflow-wrap: anywhere;
}

/* Home's context line under the heading: the full, untruncated business name. */
.bb-portal-context {
    margin: -.25rem 0 1rem;
    color: var(--bb-text-muted);
    font-size: var(--bb-fs-body);
    overflow-wrap: anywhere;
}

/* Staff "View member portal": a read-only session, said on every page directly under the bar.
   No taller than the location strip it replaced. Gold rule = the one accent. */
.bb-preview-banner {
    background: linear-gradient(var(--bb-accent-soft), var(--bb-accent-soft)), var(--bb-surface);
    border-bottom: 1px solid var(--bb-border);
    box-shadow: inset 3px 0 0 var(--bb-accent);
    color: var(--bb-text);
}
.bb-preview-banner__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    max-width: var(--shell-measure, 72rem);
    margin: 0 auto;
    padding: .25rem 1.25rem;
    font-size: var(--bb-fs-body);
    line-height: 1.3;
}
@media (min-width: 64rem) { .bb-preview-banner__in { padding-inline: 1.5rem; } }
/* Two lines at most, so the band never outgrows the strip it replaced; the full text is the title. */
.bb-preview-banner__text {
    min-width: 0;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.bb-preview-banner__end {
    position: relative;
    flex: none;
    min-height: 2rem;
    padding: 0 .75rem;
    font: inherit;
    font-weight: 600;
    color: var(--bb-accent);
    background: transparent;
    border: 1px solid var(--bb-accent);
    border-radius: var(--bb-radius);
    cursor: pointer;
}
.bb-preview-banner__end:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; }
/* 44px touch target without making the band taller than the strip it replaced. */
.bb-preview-banner__end::after { content: ""; position: absolute; inset: -6px -4px; }

/* The shell grid: bar, body - and the preview banner between them when present. An id, because
   the layout's scoped rule would otherwise out-rank a class selector here. */
#portal-shell { grid-template-rows: auto 1fr; }
#portal-shell:has(> .bb-preview-banner) { grid-template-rows: auto auto 1fr; }

/* "Which business?" on sign-in: one full-width row per business, name then city. */
.bb-portal-choice {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.bb-portal-choice__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    width: 100%;
    min-height: 3.5rem;
    padding: .75rem 1rem;
    font: inherit;
    text-align: left;
    color: var(--bb-text);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-strong, var(--bb-border));
    border-radius: var(--bb-radius);
    cursor: pointer;
}
.bb-portal-choice__item:hover:not(:disabled) { border-color: var(--bb-accent); }
.bb-portal-choice__item:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; }
.bb-portal-choice__item:disabled { cursor: default; opacity: .85; }
.bb-portal-choice__name { font-weight: 600; }
.bb-portal-choice__place { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }

/* ==== 15. member portal ===============================================================   Every rule below hangs off .bb-portal, the class on the portal's <body> (BBCRM.Portal/App.razor),
   so none of these short BEM names (.shell, .hub, .act, .busy) can ever reach Corp or the app.
   One class of prefix also keeps the specificity the scoped sheets had: .x[b-scope] and
   .bb-portal .x both weigh (0,2,0). The receipt (.rcpt), pay-dues (.bb-pay) and identity
   (.bb-portal-id ...) rules above are portal-only too. */

/* ---- portal: framework ---------------------------------------------------------------------- */
.bb-portal h1:focus {
    outline: none;
}

.bb-portal #blazor-error-ui {
    color-scheme: light only;
    background: var(--bb-danger-bg);
    color: var(--bb-text);
    bottom: 0;
    box-shadow: var(--bb-e2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.bb-portal .valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bb-btn-ok-fg);
}

.bb-portal .invalid {
    outline: 1px solid var(--bb-text-danger);
}

/* A rejected sign-in flags its fields with an empty message (that is what sets aria-invalid);
   the empty message element must not open a gap under the field. */
.bb-portal .signin__error:empty,
.bb-portal .validation-message:empty {
    display: none;
}

/* ---- corp: framework (replaces the Corp template's app.css and MainLayout.razor.css) ----------- */
.bb-corp h1:focus {
    outline: none;
}

.bb-corp #blazor-error-ui {
    color-scheme: light only;
    background: var(--bb-danger-bg);
    color: var(--bb-text);
    bottom: 0;
    box-shadow: var(--bb-e2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.bb-corp .valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bb-btn-ok-fg);
}

.bb-corp .invalid {
    outline: 1px solid var(--bb-text-danger);
}

.bb-corp .validation-message {
    color: var(--bb-text-danger);
}

.bb-corp .blazor-error-boundary {
    padding: 1rem;
    border-left: 3px solid var(--bb-text-danger);
    background: var(--bb-danger-bg);
    color: var(--bb-text);
}

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

/* ---- portal: select ---------------------------------------------------------------------------
   One select for the whole portal: the billing year and "you are signing as" on the signature
   page. The NATIVE <select> is kept and only its shell restyled - on iOS and Android a real select
   opens the OS wheel, which no component listbox matches. */
.bb-portal .bb-select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    /* 16px exactly: iOS Safari zooms the whole page when a focused control is any smaller. */
    font-size: var(--bb-fs-body);
    font-family: inherit;
    /* 1.5 lands the box on the height of the text inputs beside it on the signature page. */
    line-height: 1.43;
    color: var(--bb-text);
    padding: .6875rem .75rem;
    padding-right: 2.5rem;
    border: 1px solid var(--bb-border);
    border-radius: .375rem;
    background-color: var(--bb-surface);
    /* Chevron stroke = --bb-text-muted (a data URI cannot read a token). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%2351607a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    background-size: .75rem .5rem;
    min-height: 2.75rem;
    cursor: pointer;
    transition: border-color .15s ease;
}

.bb-portal .bb-select:hover {
    border-color: var(--bb-border-strong);
}

.bb-portal .bb-select:focus-visible {
    outline: 2px solid var(--bb-ink);
    outline-offset: 1px;
    border-color: var(--bb-ink);
    /* Chevron stroke = --bb-ink, darkening with the border. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23010f20' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bb-portal .bb-select:disabled {
    color: var(--bb-text-muted);
    background-color: var(--bb-surface-sunken);
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .bb-portal .bb-select {
        transition: none;
    }
}

.bb-portal .bb-select:focus:not(:focus-visible) {
    outline: none;
}

/* ---- portal: print ----------------------------------------------------------------------------
   On paper the brand bar and the tabs are noise around the one thing being printed. */
@media print {
    .bb-portal .shell__bar,
    .bb-portal .shell__tabs {
        display: none !important;
    }

    .bb-portal .shell__body {
        padding: 0 !important;
        max-width: none !important;
    }

    .bb-portal .shell {
        background: var(--bb-surface) !important;
        min-height: 0 !important;
    }
}

/* ---- portal: sign-in and set-password ---------------------------------------------------------- */
/* Phone-first. The form sits in the lower two-thirds so the fields and the button stay in
   thumb reach - a vertically centred form puts the keyboard over its own submit button. */

.bb-portal .signin {
    min-height: 100dvh;
    display: grid;
    /* Capped, not proportional. A vh-only band grows with the screen and leaves a field of
       empty navy above a 52px logo - 218px of it on a Galaxy S24. The clamp keeps the brand
       present without spending the top quarter of a phone on it, and the 4.5rem floor keeps the
       logo breathing when the keyboard is up and the viewport is ~380px. */
    grid-template-rows: clamp(4.5rem, 18vh, 8rem) 1fr;
    background: var(--bb-brand-deep);
}

/* Identity band. The school's mark goes here, so a member knows whose portal this is before
   they type anything. */
.bb-portal .signin__id {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}


.bb-portal .signin__mark {
    display: block;
    width: min(15rem, 62vw);
    height: 3.25rem;
    background: url("brand/blackbelt-logo-horizontal-reversed.svg")
                center / contain no-repeat;
}

/* The panel lifts off the navy. Corners only at the top: it reads as a sheet rising from the
   bottom of the phone, which is also where the thumb is. */
.bb-portal .signin__panel {
    background: var(--bb-surface);
    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
    padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.bb-portal .signin__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text);
    margin: 0 0 .25rem;
}

.bb-portal .signin__lede {
    color: var(--bb-text-muted);
    line-height: 1.43;
    max-width: 34ch;
    margin: 0 0 1.25rem;
}

.bb-portal .signin__label {
    /* Block, or the label and its input share a line and the next field wraps under it. */
    display: block;
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    margin-top: 1rem;
}

.bb-portal .signin__input {
    display: block;
    width: 100%;
    margin-top: .375rem;
    box-sizing: border-box;
    /* 16px minimum: anything smaller makes iOS Safari zoom the whole page on focus. */
    font-size: var(--bb-fs-body);
    padding: .75rem .875rem;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    background: var(--bb-surface);
    color: var(--bb-text);
}

.bb-portal .signin__input:focus-visible {
    outline: 2px solid var(--bb-focus);
    outline-offset: 1px;
    border-color: var(--bb-focus);
}

.bb-portal .signin__submit {
    margin-top: 1.75rem;
    width: 100%;
    /* 48px: comfortably above the 44px minimum tap target, reachable one-handed. */
    min-height: 3rem;
    font: inherit;
    font-weight: 600;
    color: var(--bb-text-onbrand);
    background: var(--bb-brand);
    border: 1px solid var(--bb-brand);
    border-radius: var(--bb-radius);
    cursor: pointer;
}

.bb-portal .signin__submit:hover:not(:disabled) { background: var(--bb-brand-hover); }
.bb-portal .signin__submit:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; }

/* Stays solid while working. A greyed-out primary button reads as broken - that exact
   complaint is recorded against the Corp sign-in screen. */
.bb-portal .signin__submit:disabled { opacity: .85; cursor: default; }

.bb-portal .signin__aside {
    margin: 1.25rem 0 0;
    font-size: var(--bb-fs-body);
}

.bb-portal .signin__aside a {
    color: var(--bb-link);
    text-underline-offset: 2px;
}

.bb-portal .signin__error {
    color: var(--bb-text-danger);
    font-size: var(--bb-fs-body);
    margin: .375rem 0 0;
}

/* Above phone width the sheet stops stretching and centres, rather than becoming a very wide
   form nobody can scan. */
@media (min-width: 40rem) {
    /* Tighter than the phone band, not taller. On a desk the mark only has to identify whose
       portal this is; 22vh spent it on empty navy above a 52px logo. 7rem clears the mark plus
       its padding with room to spare. */
    .bb-portal .signin { grid-template-rows: clamp(5rem, 14vh, 7rem) 1fr; }

    .bb-portal .signin__id { padding: 1rem; }

    .bb-portal .signin__panel {
        width: min(26rem, 100%);
        /* align-self, not just margin: the panel is a 1fr grid item, so by default it STRETCHES
           to the bottom edge of the window. On a phone that is the point - it reads as a sheet
           rising from the bottom. On a desk it made a white slab running to the screen edge with
           the form stranded hundreds of pixels above its own bottom. */
        align-self: center;
        margin: 2rem auto;
        border-radius: var(--bb-radius-lg);
        padding: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-portal .signin__submit { transition: none; }
}

/* Shared with SetPassword: the guidance line under the password field. Muted, because it is a
   hint and not an error - styling it like a warning makes a first-time member think they did
   something wrong. */
.bb-portal .signin__hint {
    color: var(--bb-text-muted);
    font-size: var(--bb-fs-body);
    margin: .5rem 0 0;
}

/* ---- portal: shell ----------------------------------------------------------------------------- */
.bb-portal .shell {
    /* One measure for the whole shell, read by the bar, the body and the page grids, so the
       phone column and the desk column can never disagree. */
    --shell-measure: 46rem;
    --shell-tabs: 3.75rem;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr;
    background: var(--bb-surface-sunken);
}

@media (min-width: 64rem) {
    .bb-portal .shell {
        --shell-measure: 72rem;
    }
}

/* The band carries the brand and nothing else. It stays short because on a phone the header is
   pure overhead - the sign-in screen already learned this at 28vh. */
.bb-portal .shell__bar {
    padding: calc(.75rem + env(safe-area-inset-top)) 0 .75rem;
    background: var(--bb-brand-deep);
}

/* Same max-width AND same inline padding as .shell__body: that is what makes the mark sit on the
   page's left edge instead of a quarter-rem off it. */
.bb-portal .shell__barin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--shell-measure);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 64rem) {
    .bb-portal .shell__barin {
        padding-inline: 1.5rem;
    }
}

.bb-portal .shell__mark {
    display: block;
    width: 10rem;
    height: 2rem;
    flex: none;
    background: url("brand/blackbelt-logo-horizontal-reversed.svg")
                left center / contain no-repeat;
}

/* ---- desk nav ------------------------------------------------------------------------------
   The same four destinations the phone carries at the bottom, in the bar where a desktop user
   looks for them. No rail: five destinations do not earn 240px of permanent width. */
.bb-portal .shell__desknav {
    display: none;
}

@media (min-width: 64rem) {
    .bb-portal .shell__desknav {
        display: flex;
        align-items: center;
        gap: .25rem;
        margin-right: auto;
        margin-left: 2rem;
    }
}

.bb-portal .shell__desknav .shell__desklink {
    display: block;
    padding: .625rem .875rem;
    border-radius: .375rem;
    color: color-mix(in srgb, var(--bb-text-onbrand) 75%, transparent);
    text-decoration: none;
    font-size: var(--bb-fs-body);
    line-height: 1.2;
    white-space: nowrap;
}

.bb-portal .shell__desknav .shell__desklink:hover {
    color: var(--bb-text-onbrand);
    background: color-mix(in srgb, var(--bb-text-onbrand) 10%, transparent);
}

/* Current section, not a hover state: NavLink sets .active on the matching route. */
.bb-portal .shell__desknav .shell__desklink.active {
    color: var(--bb-text-onbrand);
    background: color-mix(in srgb, var(--bb-text-onbrand) 16%, transparent);
    font-weight: 600;
}

.bb-portal .shell__desknav .shell__desklink:focus-visible {
    outline: 2px solid var(--bb-text-onbrand);
    outline-offset: 2px;
}

.bb-portal .shell__body {
    padding: 1.25rem 1.25rem calc(var(--shell-tabs) + 2rem + env(safe-area-inset-bottom));
    max-width: var(--shell-measure);
    width: 100%;
    margin-inline: auto;
    /* Load-bearing. As a GRID ITEM this defaults to min-width:auto, which refuses to shrink
       below its content's intrinsic width - so one wide child (a scrolling row of chips, a wide
       table, a long unbroken string) widens the whole shell and the PAGE scrolls sideways
       instead of the child scrolling inside itself. Every page in the portal sits in here, so
       this belongs to the shell, not to whichever page happened to expose it. */
    min-width: 0;
}

@media (min-width: 64rem) {
    .bb-portal .shell__body {
        /* The tab bar is gone at this width, so the reserve goes with it. */
        padding: 1.75rem 1.5rem 2.5rem;
    }
}

/* ---- phone tab bar -------------------------------------------------------------------------
   Fixed, because HIG is explicit that a tab bar does not come and go, and because a member
   scrolling a long agreement should still see where else they can be. Four actions: Material
   sizes an action as width / count with an 80dp floor, so five would be out of spec on every
   phone narrower than 400px. */
.bb-portal .shell__tabs {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-border-subtle);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 64rem) {
    .bb-portal .shell__tabs {
        display: none;
    }
}

.bb-portal .shell__tabs .shell__tab {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .1875rem;
    /* Clears 48dp (Material) and 44pt (Apple) on its own, before the safe-area padding. */
    min-height: var(--shell-tabs);
    padding: .375rem .25rem;
    color: var(--bb-text-muted);
    text-decoration: none;
}

/* Font Awesome Pro Sharp Regular glyphs are filled paths, not outlines, so colour rides on
   fill. 24px is the floor the icon standard sets - Sharp Regular ghosts out below it. */
.bb-portal .shell__tabs .shell__tabicon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

/* Apple: label every tab, never icon alone. 11px is the floor that still fits "Documents" in the
   80px an action gets on a 320px screen. */
.bb-portal .shell__tabs .shell__tablabel {
    font-size: var(--bb-fs-caption);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.bb-portal .shell__tabs .shell__tab.active {
    color: var(--bb-ink);
}

.bb-portal .shell__tabs .shell__tab.active .shell__tablabel {
    font-weight: 600;
}

.bb-portal .shell__tabs .shell__tab:focus-visible {
    outline: 2px solid var(--bb-ink);
    outline-offset: -2px;
}

/* ---- portal: account menu ---------------------------------------------------------------------- */
/* ---- account menu ------------------------------------------------------
   The fifth destination. Off the thumb path on purpose: it is the least-visited one, and both
   platforms have taught people that profile and sign-out live in this corner. */
.bb-portal .acctmenu__btn {
    display: grid;
    place-items: center;
    flex: none;
    /* 44px: Apple's minimum tap target, and this one sits near the screen edge. */
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -.5rem;
    border-radius: 999px;
    /* The ring is permanent, not a hover reveal - a bare glyph floating on the navy reads as an
       unfinished corner rather than a control. */
    border: 1px solid color-mix(in srgb, var(--bb-text-onbrand) 22%, transparent);
    background: color-mix(in srgb, var(--bb-text-onbrand) 8%, transparent);
    color: color-mix(in srgb, var(--bb-text-onbrand) 85%, transparent);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bb-portal .acctmenu__btn {
        transition: none;
    }
}

.bb-portal .acctmenu__btn svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

/* Gold on the ring, not on the page: this is chrome and the state is transient, so it does not
   compete with gold's one job in the content - marking what needs the member. */
.bb-portal .acctmenu__btn:hover {
    border-color: var(--bb-accent-bright);
    background: color-mix(in srgb, var(--bb-accent-bright) 16%, transparent);
    color: var(--bb-accent-bright);
}

/* Open reads as a stronger WHITE ring, not gold. Gold answers the pointer and then goes away;
   a control sitting gold while a menu is open is a resting state, and the only resting gold in
   this product means "this needs you". */
.bb-portal .acctmenu__btn--open {
    border-color: color-mix(in srgb, var(--bb-text-onbrand) 55%, transparent);
    background: color-mix(in srgb, var(--bb-text-onbrand) 18%, transparent);
    color: var(--bb-text-onbrand);
}

/* ---- account menu --------------------------------------------------------------------------
   Anchored to the control rather than a page of its own: two items do not earn a screen. */
.bb-portal .acctmenu {
    position: relative;
    flex: none;
}

/* Catches the tap that dismisses the menu. Covers the viewport so an outside click anywhere
   closes it, without a document-level JS listener. */
.bb-portal .acctmenu__scrim {
    position: fixed;
    inset: 0;
    z-index: 25;
}

.bb-portal .acctmenu__list {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 30;
    min-width: 13.5rem;
    display: grid;
    padding: .375rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-radius: .5rem;
    box-shadow: var(--bb-e3);
}

.bb-portal .acctmenu__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .625rem .75rem;
    border: none;
    border-radius: .375rem;
    background: none;
    font: inherit;
    font-size: var(--bb-fs-body);
    color: var(--bb-text);
    text-decoration: none;
    cursor: pointer;
    /* 44px total with the padding above - this is a menu a thumb uses too. */
    min-height: 2.75rem;
    line-height: 1.5rem;
}

.bb-portal .acctmenu__item:hover {
    background: var(--bb-surface-sunken);
}

.bb-portal .acctmenu__item:focus-visible {
    outline: 2px solid var(--bb-ink);
    outline-offset: -2px;
}

/* Sign out is separated and quieter. It is the one item here you do not want a thumb to find
   by accident on the way to something else. */
.bb-portal .acctmenu__item--out {
    margin-top: .25rem;
    border-top: 1px solid var(--bb-border-subtle);
    border-radius: 0 0 .375rem .375rem;
    color: var(--bb-text-muted);
}

.bb-portal .acctmenu__btn:focus-visible {
    outline: 2px solid var(--bb-accent-bright);
    outline-offset: 2px;
}

/* Attribution that happens to be a door. Quiet enough not to compete with the menu's real
   items, but a real link - it is the only place this product sells itself to a member. */
.bb-portal .acctmenu__by {
    display: block;
    margin: .375rem .25rem .125rem;
    padding: .375rem .5rem;
    border-radius: .375rem;
    font-size: var(--bb-fs-caption);
    color: var(--bb-text-muted);
    text-decoration: none;
}

.bb-portal .acctmenu__by:hover {
    color: var(--bb-text);
    text-decoration: underline;
}

/* ---- portal: busy overlay ---------------------------------------------------------------------- */
/* Covers the viewport so a second tap cannot reach the button underneath. On a phone the
   double-tap is the real failure mode: the member taps Sign, nothing visibly changes, they tap
   again - and without this the second tap is a second POST. */
.bb-portal .busy {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--bb-brand-deep) 55%, transparent);
    backdrop-filter: blur(2px);
    animation: bb-portal-busy-in .12s ease-out;
}

.bb-portal .busy__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem;
    background: var(--bb-surface);
    border-radius: .625rem;
    padding: 1.75rem 2rem;
    min-width: 12rem;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--bb-brand-deep) 28%, transparent);
}

/* The app icon IS the spinner. One moving element, drawn from the identity already on the
   member's home screen, rather than a generic ring borrowed from a component kit.
   192px source, not favicon-32: 32px upscaled to 44 is visibly soft on a 3x phone screen. */
.bb-portal .busy__mark {
    width: 2.75rem;
    height: 2.75rem;
    background: url("../../icon-192.png") center / contain no-repeat;
    border-radius: .5rem;
    animation: bb-portal-busy-pulse 1.1s ease-in-out infinite;
}

.bb-portal .busy__label {
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    text-align: center;
}

@keyframes bb-portal-busy-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bb-portal-busy-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .45; transform: scale(.88); }
}

/* Keep the panel - it is what blocks the second tap - and stop the motion. */
@media (prefers-reduced-motion: reduce) {
    .bb-portal .busy,
    .bb-portal .busy__mark {
        animation: none;
    }
}

/* ---- skeleton (Skeleton.razor, portal and staff pages) ----------------------------------------- */
.skel {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Visible to screen readers only: the shimmer conveys nothing without sight. */
.skel__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Matches the real row: same background, border, radius and padding, so nothing shifts when the
   content arrives. */
.skel__row {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-left: 3px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: .875rem 1rem;
    min-height: 44px;
}

.skel__row--tall {
    min-height: 14rem;
}

.skel__line {
    height: .75rem;
    border-radius: .25rem;

    /* One sweep travelling across a flat base. The highlight is barely lighter than the base -
       the point is to read as "not ready yet", not to attract the eye away from the header. */
    background:
        linear-gradient(90deg,
            var(--bb-border-subtle) 0%,
            var(--bb-surface-sunken) 40%,
            var(--bb-surface-sunken) 60%,
            var(--bb-border-subtle) 100%);
    background-size: 300% 100%;
    animation: bb-skel-sweep 1.4s ease-in-out infinite;
}

.skel__line--title {
    width: 62%;
}

.skel__line--meta {
    width: 38%;
    height: .625rem;
    margin-top: .5rem;
    opacity: .7;
}

.skel__row--tall .skel__line--meta {
    width: 90%;
}

@keyframes bb-skel-sweep {
    from { background-position: 150% 0; }
    to   { background-position: -150% 0; }
}

/* An indefinite loop is exactly the motion that triggers vestibular symptoms. Reduced motion
   keeps the reserved space and the shape, and simply stops moving. */
@media (prefers-reduced-motion: reduce) {
    .skel__line {
        animation: none;
        background: var(--bb-border-subtle);
    }
}

/* ---- portal: home ------------------------------------------------------------------------------ */
.bb-portal .hub__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text);
    margin: .25rem 0 1.25rem;
}

.bb-portal .hub__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Same left-rule language as the documents list, so "something needs you" reads identically
   wherever a member meets it. */
.bb-portal .hub__row {
    display: block;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-left: 3px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: 1rem;
    text-decoration: none;
    min-height: 44px;
}

/* Only the three non-state edges react. border-color as a shorthand would overwrite
   border-left-color and erase the gold pending rule on hover. */
.bb-portal .hub__row:hover {
    border-top-color: var(--bb-ink);
    border-right-color: var(--bb-ink);
    border-bottom-color: var(--bb-ink);
}

.bb-portal .hub__row--attention {
    border-left-color: var(--bb-accent-bright);
}

.bb-portal .hub__name {
    display: block;
    font-weight: 600;
    color: var(--bb-text);
}

.bb-portal .hub__meta {
    display: block;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    margin-top: .1875rem;
}

/* Just the count placeholder - the row around it is real. */
.bb-portal .hub__pending {
    display: inline-block;
    width: 11ch;
    height: .75rem;
    margin-top: .375rem;
    border-radius: .25rem;
    background: linear-gradient(90deg,
        var(--bb-border-subtle) 0%, var(--bb-surface-sunken) 40%, var(--bb-surface-sunken) 60%, var(--bb-border-subtle) 100%);
    background-size: 300% 100%;
    animation: bb-portal-hub-sweep 1.4s ease-in-out infinite;
}

@keyframes bb-portal-hub-sweep {
    from { background-position: 150% 0; }
    to   { background-position: -150% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bb-portal .hub__pending {
        animation: none;
        background: var(--bb-border-subtle);
    }
}

/* ---- the desk ---------------------------------------------------------------------------- */
@media (min-width: 64rem) {

    .bb-portal .hub__title {
        font-size: var(--bb-fs-subtitle1);
        margin-bottom: 1.75rem;
    }

    /* Matches the documents list exactly, measure included: a member should not have to
       re-learn a row between one screen and the next. */
    .bb-portal .hub__list {
        max-width: 56rem;
    }

    .bb-portal .hub__row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 2rem;
        padding: 1.125rem 1.25rem;
    }

    .bb-portal .hub__name {
        font-size: var(--bb-fs-subtitle2);
    }

    .bb-portal .hub__meta {
        margin-top: 0;
        text-align: right;
        flex: none;
    }

    .bb-portal .hub__pending {
        margin-top: 0;
    }
}

/* The amount, at the size the answer deserves. Same treatment as the balance on Billing so the
   two read as one fact seen twice, not two different numbers. */
.bb-portal .hub__amount {
    display: block;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-left: 3px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: 1.125rem 1.25rem;
    text-decoration: none;
    color: inherit;
}

/* Gold means "this needs you" everywhere in the portal. Not red - owing your gym on the due date
   is normal, and alarming a member who is not late teaches them to dread opening this. */
.bb-portal .hub__amount--owing {
    border-left-color: var(--bb-accent-bright);
}

.bb-portal .hub__amt {
    display: block;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--bb-text);
}

.bb-portal .hub__clear {
    padding: 2.5rem 0 0;
}

.bb-portal .hub__clearhead {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle2);
    font-weight: 600;
    color: var(--bb-text);
    margin: 0;
}

.bb-portal .hub__clearnote {
    margin: .25rem 0 0;
    color: var(--bb-text-muted);
}

/* ---- portal: billing --------------------------------------------------------------------------- */
.bb-portal .bill__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text);
    margin: .25rem 0 1.25rem;
}

.bb-portal .bill__note {
    color: var(--bb-text-muted);
    line-height: 1.43;
    max-width: 44ch;
}

/* The answer, before the evidence. A member opening this page is asking one question. */
.bb-portal .bill__balance {
    display: block;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-left: 3px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* Gold means "this needs you" everywhere else in the portal, and money owed is exactly that.
   Not red: owing your gym on the due date is normal, and alarming a member who is not late is
   how a portal teaches people to dread opening it. */
.bb-portal .bill__balance--owing {
    border-left-color: var(--bb-accent-bright);
}

.bb-portal .bill__balamt {
    display: block;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--bb-text);
}

.bb-portal .bill__ballabel {
    display: block;
    margin-top: .1875rem;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
}

/* Same heading language as the documents list, so the two-group shape reads the same wherever
   a member meets it. */
.bb-portal .bill__group {
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    margin: 1.75rem 0 .625rem;
}

.bb-portal .bill__group:first-of-type {
    margin-top: 0;
}

.bb-portal .bill__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bb-portal .bill__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: .875rem 1rem;
}

/* Only the rows that lead somewhere react to a pointer. A row that highlights and then does
   nothing when tapped is worse than one that never invited the tap. */
.bb-portal .bill__rowlink {
    text-decoration: none;
}

.bb-portal .bill__rowlink:hover {
    border-color: var(--bb-ink);
}

.bb-portal .bill__what {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bb-portal .bill__desc {
    font-weight: 600;
    color: var(--bb-text);
    line-height: 1.43;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bb-portal .bill__meta {
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    margin-top: .1875rem;
}

.bb-portal .bill__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    text-align: right;
}

/* Tabular figures so the column of amounts lines up on the decimal instead of wandering. */
.bb-portal .bill__amt {
    font-weight: 600;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
}

.bb-portal .bill__status {
    font-size: var(--bb-fs-caption);
    color: var(--bb-text-muted);
    margin-top: .1875rem;
}

/* A returned payment is money that went back OUT. Struck through, because a live-looking amount
   under "Payments" tells a member they are square when they are not. */
.bb-portal .bill__row--returned .bill__amt {
    text-decoration: line-through;
    color: var(--bb-text-muted);
}

.bb-portal .bill__row--returned {
    border-left: 3px solid var(--bb-accent-bright);
}

.bb-portal .bill__row--paid .bill__amt {
    color: var(--bb-text-muted);
    font-weight: 600;
}

@media (min-width: 64rem) {
    .bb-portal .bill__title {
        font-size: var(--bb-fs-subtitle1);
        margin-bottom: 1.75rem;
    }

    /* Same measure as the documents list: a row of short strings does not earn 72rem. */
    .bb-portal .bill__balance,
    .bb-portal .bill__list {
        max-width: 56rem;
    }

    .bb-portal .bill__balamt {
        font-size: var(--bb-fs-subtitle1);
    }

    .bb-portal .bill__row {
        padding: 1rem 1.25rem;
    }
}

/* ---- year filter ---------------------------------------------------------------------------
   A select rather than chips, so nothing here can ever scroll sideways however many years a
   member has behind them. */
.bb-portal .bill__filter {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1rem;
    max-width: 56rem;
}

.bb-portal .bill__filterlabel {
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    flex: none;
}

/* Box styling comes from .bb-select - this only says how wide it sits here.
   min-width:0 because a select carries an intrinsic width from its widest option. */
.bb-portal .bill__select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 14rem;
}


.bb-portal .bill__showing {
    margin: 0 0 .75rem;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
}

/* A disclosure, not a button: closed it costs one line, open it is the same list continued. */
.bb-portal .bill__more {
    margin-top: .5rem;
}

.bb-portal .bill__moresum {
    cursor: pointer;
    padding: .625rem .25rem;
    font-size: var(--bb-fs-body);
    color: var(--bb-link);
    /* The default marker sits too close to the text at this size; the padding above gives the
       whole row a 44px touch target without a border making it look like another card. */
}

.bb-portal .bill__moresum:focus-visible {
    outline: 2px solid var(--bb-accent-bright);
    outline-offset: 2px;
    border-radius: .25rem;
}

.bb-portal .bill__morelist {
    margin-top: .5rem;
}

/* ---- portal: activity -------------------------------------------------------------------------- */
.bb-portal .act__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text);
    margin: .25rem 0 1.25rem;
}

.bb-portal .act__note {
    color: var(--bb-text-muted);
    line-height: 1.43;
    max-width: 44ch;
}

/* The answer before the evidence, same shape as the balance on Billing. Two figures at most:
   a third competes with them and none of the three gets read. */
.bb-portal .act__summary {
    display: flex;
    gap: .75rem;
    margin-bottom: .75rem;
}

.bb-portal .act__stat {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-left: 3px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: 1.125rem 1.25rem;
}

/* Gold is "this needs you" everywhere else in the portal, so a run is deliberately NOT gold -
   it is the one thing here that is going right. */
.bb-portal .act__stat--run {
    border-left-color: var(--bb-border-strong);
}

.bb-portal .act__num {
    display: block;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--bb-text);
}

.bb-portal .act__lbl {
    display: block;
    margin-top: .1875rem;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
}

.bb-portal .act__last {
    margin: 0 0 1.5rem;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
}

.bb-portal .act__group {
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    margin: 1.75rem 0 .625rem;
}

.bb-portal .act__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bb-portal .act__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: .875rem 1rem;
}

.bb-portal .act__what {
    display: flex;
    flex-direction: column;
    /* Load-bearing: as a flex item this defaults to min-width:auto and refuses to shrink below
       its longest class name, which pushes the date off a phone screen. */
    min-width: 0;
}

.bb-portal .act__name {
    color: var(--bb-text);
    font-weight: 600;
}

.bb-portal .act__meta {
    margin-top: .125rem;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
}

.bb-portal .act__date {
    flex: 0 0 auto;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    font-variant-numeric: tabular-nums;
}

.bb-portal .act__count {
    flex: 0 0 auto;
    text-align: right;
}

.bb-portal .act__countnum {
    display: block;
    font-weight: 600;
    color: var(--bb-text);
    font-variant-numeric: tabular-nums;
}

.bb-portal .act__countlbl {
    display: block;
    font-size: var(--bb-fs-caption);
    color: var(--bb-text-muted);
}

/* A disclosure, not a button: closed it costs one line, open it is the same list continued. */
.bb-portal .act__more {
    margin-top: .5rem;
}

.bb-portal .act__moresum {
    cursor: pointer;
    padding: .625rem .25rem;
    font-size: var(--bb-fs-body);
    color: var(--bb-link);
}

.bb-portal .act__moresum:focus-visible {
    outline: 2px solid var(--bb-accent-bright);
    outline-offset: 2px;
    border-radius: .25rem;
}

.bb-portal .act__morelist {
    margin-top: .5rem;
}

/* Not a placeholder for missing content - it IS the answer, for a location that does not take
   attendance at all. */
.bb-portal .act__empty {
    padding: 2.5rem 0 0;
}

.bb-portal .act__emptyhead {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle2);
    font-weight: 600;
    color: var(--bb-text);
    margin: 0;
}

.bb-portal .act__emptynote {
    margin: .25rem 0 0;
    color: var(--bb-text-muted);
    max-width: 44ch;
}

/* ---- portal: documents ------------------------------------------------------------------------- */
.bb-portal .docs__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text);
    margin: .25rem 0 1.25rem;
}

.bb-portal .docs__note {
    color: var(--bb-text-muted);
    line-height: 1.43;
    max-width: 40ch;
}

.bb-portal .docs__group {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    margin: 1.75rem 0 .625rem;
}

.bb-portal .docs__group:first-of-type {
    margin-top: 0;
}

/* The count is the whole reason this heading exists - a member wants to know how many things
   are waiting before deciding whether to open the app at all. */
.bb-portal .docs__count {
    background: var(--bb-accent-bright);
    color: var(--bb-ink);
    border-radius: 999px;
    font-size: var(--bb-fs-caption);
    font-weight: 600;
    min-width: 1.375rem;
    padding: .0625rem .4375rem;
    text-align: center;
}

.bb-portal .docs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* A row, not a card. The left rule carries the state, so signed and pending sit in one visual
   family and the eye lands on the gold rather than on a stack of identical boxes. */
.bb-portal .docs__row {
    display: block;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-left: 3px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: .875rem 1rem;
    text-decoration: none;
    /* 44px is the minimum comfortable tap target; the padding plus two lines clears it. */
    min-height: 44px;
}

/* Only the three non-state edges react. border-color as a shorthand would overwrite
   border-left-color and erase the gold pending rule on hover. */
.bb-portal .docs__row:hover {
    border-top-color: var(--bb-ink);
    border-right-color: var(--bb-ink);
    border-bottom-color: var(--bb-ink);
}

.bb-portal .docs__row--pending {
    border-left-color: var(--bb-accent-bright);
}

.bb-portal .docs__name {
    display: block;
    font-weight: 600;
    color: var(--bb-text);
    line-height: 1.43;
}

.bb-portal .docs__meta {
    display: block;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    margin-top: .1875rem;
}

/* ---- the desk ------------------------------------------------------------------------------
   The row stops being a stacked card and becomes a line in a list: what it is on the left, who
   and when on the right. Same rule, same gold - only the axis changes. */
@media (min-width: 64rem) {

    .bb-portal .docs__title {
        font-size: var(--bb-fs-subtitle1);
        margin-bottom: 1.75rem;
    }

    /* The sign page earns the full 72rem; a list of short strings does not. Capping the rows
       keeps the name and the member within one glance of each other instead of parking them at
       opposite ends of a 1100px bar. */
    .bb-portal .docs__group,
    .bb-portal .docs__list {
        max-width: 56rem;
    }

    .bb-portal .docs__group {
        font-size: var(--bb-fs-body);
        margin: 2.25rem 0 .75rem;
    }

    .bb-portal .docs__row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 2rem;
        padding: 1rem 1.25rem;
    }

    .bb-portal .docs__meta {
        margin-top: 0;
        text-align: right;
        flex: none;
    }
}

/* ---- portal: sign a document ------------------------------------------------------------------- */
.bb-portal .sign__back {
    display: inline-block;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    text-decoration: none;
    margin-bottom: .75rem;
}

.bb-portal .sign__back:hover {
    color: var(--bb-ink);
    text-decoration: underline;
}

.bb-portal .sign__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-subtitle1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text);
    margin: 0 0 .1875rem;
}

.bb-portal .sign__for {
    color: var(--bb-text-muted);
    font-size: var(--bb-fs-body);
    margin: 0 0 1rem;
}

.bb-portal .sign__note {
    color: var(--bb-text-muted);
    line-height: 1.43;
    max-width: 40ch;
}

.bb-portal .sign__done {
    background: var(--bb-success-bg);
    border-left: 3px solid var(--bb-success-border);
    border-radius: .25rem;
    padding: .75rem 1rem;
    color: var(--bb-text-success);
    margin: 0 0 1rem;
}

.bb-portal .sign__grid {
    display: grid;
    gap: 1rem;
}

.bb-portal .sign__side {
    display: grid;
    gap: 1rem;
    /* align-content, not gap alone: as a sticky grid item this column must size to its content,
       otherwise it stretches to the document's height and has no room to travel. */
    align-content: start;
}

/* The document keeps its own typography - it is a legal text, not page furniture. It scrolls
   inside this box so a wide staff-authored table cannot make the whole page scroll sideways. */
.bb-portal .sign__doc {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: 1.125rem 1.25rem;
    max-height: 60vh;
    overflow: auto;
    overflow-wrap: anywhere;
    line-height: 1.43;
    color: var(--bb-text);
}

.bb-portal .sign__doc img {
    max-width: 100%;
    height: auto;
}

.bb-portal .sign__consent,
.bb-portal .sign__capture {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-subtle);
    border-radius: .375rem;
    padding: 1.125rem 1.25rem;
}

.bb-portal .sign__h2 {
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    margin: 0 0 .625rem;
}

/* Scoped to the disclosure, not to .sign__consent: as `.sign__consent p` this outranked
   .sign__lede on specificity and quietly restyled the summary line. */
.bb-portal .sign__more p {
    color: var(--bb-text-muted);
    font-size: var(--bb-fs-body);
    line-height: 1.43;
    margin: 0 0 .625rem;
}

.bb-portal .sign__lede {
    color: var(--bb-text);
    font-size: var(--bb-fs-body);
    line-height: 1.43;
    margin: 0 0 .75rem;
}

.bb-portal .sign__more summary {
    font-size: var(--bb-fs-body);
    color: var(--bb-ink);
    text-decoration: underline;
    cursor: pointer;
    /* Comfortable to tap without turning a text link into a button. */
    padding: .375rem 0;
}

.bb-portal .sign__more[open] summary {
    margin-bottom: .5rem;
}

.bb-portal .sign__check {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-top: .875rem;
    font-size: var(--bb-fs-body);
    line-height: 1.43;
    color: var(--bb-text);
    cursor: pointer;
}

.bb-portal .sign__check input {
    /* Bigger than the browser default: this is the tick that makes a signature binding, and it
       is being hit with a thumb. */
    width: 1.25rem;
    height: 1.25rem;
    margin: .0625rem 0 0;
    flex: none;
    accent-color: var(--bb-ink);
}

.bb-portal .sign__label {
    display: block;
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text);
    margin-top: 1rem;
}

.bb-portal .sign__input {
    display: block;
    width: 100%;
    /* 16px exactly: iOS Safari zooms the whole page when a focused field is any smaller. */
    font-size: var(--bb-fs-body);
    font-family: inherit;
    padding: .6875rem .75rem;
    margin-top: .375rem;
    border: 1px solid var(--bb-border);
    border-radius: .375rem;
    background: var(--bb-surface);
    color: var(--bb-text);
}

.bb-portal .sign__input:focus {
    outline: 2px solid var(--bb-ink);
    outline-offset: 1px;
    border-color: var(--bb-ink);
}

/* Box styling comes from .bb-select; this only matches the spacing of the text
   fields it sits between. */
.bb-portal .sign__select {
    margin-top: .375rem;
}

.bb-portal .sign__padwrap {
    position: relative;
    margin-top: .375rem;
}

.bb-portal .sign__pad {
    display: block;
    width: 100%;
    height: 11rem;
    border: 1px dashed var(--bb-border);
    border-radius: .375rem;
    background: var(--bb-surface);
    /* Without this the browser pans the page instead of drawing the stroke. */
    touch-action: none;
    cursor: crosshair;
}

.bb-portal .sign__padhint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .5rem;
    text-align: center;
    font-size: var(--bb-fs-caption);
    color: var(--bb-text-muted);
    margin: 0;
    pointer-events: none;
}

.bb-portal .sign__clear {
    background: none;
    border: none;
    padding: .5rem 0;
    font: inherit;
    font-size: var(--bb-fs-body);
    color: var(--bb-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.bb-portal .sign__error {
    color: var(--bb-text-danger);
    font-size: var(--bb-fs-body);
    margin: .625rem 0 0;
}

.bb-portal .sign__submit {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: .875rem 1rem;
    font: inherit;
    font-size: var(--bb-fs-body);
    font-weight: 600;
    color: var(--bb-text-onbrand);
    background: var(--bb-brand-deep);
    border: none;
    border-radius: .375rem;
    cursor: pointer;
}

.bb-portal .sign__submit:disabled {
    opacity: .6;
    cursor: default;
}

/* ---- the desk ------------------------------------------------------------------------------
   A phone reads then signs, one after the other. A desk has room to do both at once: the
   agreement on the left, everything the member has to DO pinned on the right. No competitor
   offers this: MindBody signs in a phone-shaped column even in a desktop browser. */
@media (min-width: 64rem) {

    .bb-portal .sign__title {
        font-size: var(--bb-fs-subtitle1);
        margin-bottom: .25rem;
    }

    .bb-portal .sign__for {
        font-size: var(--bb-fs-body);
        margin-bottom: 1.25rem;
    }

    /* A signed document has no action column beside it, so nothing stops the text running the
       full width. 46rem holds the line length the split view already sets. */
    .bb-portal .sign__doc,
    .bb-portal .sign__done {
        max-width: 46rem;
    }

    .bb-portal .sign__grid--split {
        grid-template-columns: minmax(0, 1fr) 26rem;
        gap: 1.5rem;
        align-items: start;
    }

    .bb-portal .sign__grid--split .sign__doc {
        max-width: none;
    }

    /* No inner scroll box on the desk: the PAGE scrolls. Capping the document to the viewport
       left the page with nothing to scroll, so the wheel did nothing unless the pointer happened
       to be over the document - Ivan, 2026-09-10: "I can't scroll all the way down". The
       overflow rule stays for the horizontal case, where a wide staff-authored table must not
       drag the whole page sideways. */
    .bb-portal .sign__grid--split .sign__doc {
        max-height: none;
        padding: 1.5rem 1.75rem;
    }

    .bb-portal .sign__label:first-of-type {
        margin-top: 0;
    }

    .bb-portal .sign__pad {
        height: 9rem;
    }

    /* A pointer does not need a full-width target the way a thumb does. */
    .bb-portal .sign__submit {
        width: auto;
        min-width: 14rem;
        padding-inline: 1.75rem;
    }
}

/* Pin the panel while the document scrolls past it - read and sign without scrolling back up.
   Gated on a window tall enough to hold the whole panel (it measures ~47rem; 52rem leaves room
   for a consent line that wraps): pinning a panel taller than the window would stop it at the
   top with the submit button below the fold and no way to reach it. Under 52rem the two columns
   stay and the page just scrolls. */
@media (min-width: 64rem) and (min-height: 52rem) {
    .bb-portal .sign__grid--split .sign__side {
        position: sticky;
        /* Clears the page's top padding so the panel does not touch the bar. */
        top: 1.5rem;
    }
}

/* ---- Status pill, notice, definition list, KPI line, support block (Card Processing first) ----
   Tones read the button roles, so a pill and the button that acts on it never disagree, in either theme. */
.bb-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--bb-fs-caption);
    font-weight: 600;
    line-height: 1.43;
    white-space: nowrap;
    color: var(--bb-btn-quiet-fg);
    background: var(--bb-btn-quiet-bg-h);
}
.bb-pill--ok     { color: var(--bb-btn-ok-fg);     background: var(--bb-btn-ok-bg); }
.bb-pill--danger { color: var(--bb-btn-danger-fg); background: var(--bb-btn-danger-bg); }
.bb-pill--info   { color: var(--bb-btn-brand-fg);  background: var(--bb-btn-brand-bg); }
.bb-pill--warn   { color: var(--bb-accent);        background: var(--bb-accent-soft); }

.bb-notice {
    padding: 12px 16px;
    border-left: 3px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface-raised);
    color: var(--bb-text);
}
.bb-notice--ok     { border-left-color: var(--bb-success-border); background: var(--bb-success-bg); }
.bb-notice--warn   { border-left-color: var(--bb-accent);         background: var(--bb-accent-soft); }
.bb-notice--danger { border-left-color: var(--bb-text-danger);    background: var(--bb-danger-bg); }
.bb-notice--info   { border-left-color: var(--bb-info);           background: var(--bb-info-bg); }

.bb-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.bb-dl dt { color: var(--bb-text-muted); font-weight: 600; }
.bb-dl dd { margin: 0; overflow-wrap: anywhere; }

.bb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.bb-kpi__label { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-kpi__value { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.2; }
.bb-kpi__note  { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }

/* What an owner pastes into an e-mail to NMI or their processor: plain text, copied as shown. */
.bb-support {
    margin: 0;
    padding: 12px 14px;
    white-space: pre-wrap;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--bb-fs-caption);
    background: var(--bb-surface-sunken);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text);
}

/* ===== Home ===== */
/* The staff Home (BBCRM.App/Features/Home). Cards reuse .bb-card; this adds the grid, the loading and failed states,
   the range picker and the equal-width action columns (H4). */
.bb-home { display: grid; gap: 16px; padding-bottom: 32px; }
.bb-home-sub { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-home-grid-a { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.bb-home-grid-2, .bb-home-grid-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .bb-home-grid-a, .bb-home-grid-2, .bb-home-grid-b { grid-template-columns: minmax(0, 1fr); } }
.bb-home-card { min-width: 0; }
.bb-home-card__head { display: flex; align-items: center; gap: 8px; }
.bb-home-hint { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-home-cta { margin-left: auto; color: var(--bb-text-muted); }
.bb-home-cta:hover, .bb-home-cta:focus-visible { color: var(--bb-accent); }
.bb-home-cta [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-ico-report::before { -webkit-mask-image: url("icons/fa-duo-rectangle-list.svg"); mask-image: url("icons/fa-duo-rectangle-list.svg"); }
.bb-home-failed { color: var(--bb-text-muted); margin: 8px 0; }
.bb-home-failed__dash { font-size: var(--bb-fs-subtitle1); color: var(--bb-text); margin-right: 6px; }
.bb-home-range__grp { margin: 12px 0 4px; font-weight: 600; }
.bb-home-range__custom { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.bb-home-toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
                 padding: 10px 14px; border-radius: var(--bb-radius-lg); background: var(--bb-surface); color: var(--bb-text);
                 border: 1px solid var(--bb-border); z-index: 1050; }
/* Button groups share one width; action columns are fixed so every row's edges line up (H4). */
.bb-acts-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 8px; justify-content: end; }
.bb-acts { --bb-acts-w: 224px; display: grid; grid-template-columns: var(--bb-acts-w) 36px; gap: 8px; align-items: center; }
.bb-acts__main { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.bb-acts__main > * { width: 100%; white-space: nowrap; }
/* Home icons: Font Awesome Sharp Duotone Regular (Images/Icons/fa-duo-*.svg, copied into icons/ at build), drawn by the mask rule in
   section 8; the mask keeps the secondary layer's .4 opacity, so one currentColor gives both tones in either theme. */
.bb-ico-credit-card::before { -webkit-mask-image: url("icons/fa-duo-credit-card.svg"); mask-image: url("icons/fa-duo-credit-card.svg"); }
.bb-ico-user-clock::before { -webkit-mask-image: url("icons/fa-duo-user-clock.svg"); mask-image: url("icons/fa-duo-user-clock.svg"); }
.bb-ico-file-signature::before { -webkit-mask-image: url("icons/fa-duo-file-signature.svg"); mask-image: url("icons/fa-duo-file-signature.svg"); }
.bb-ico-cake-candles::before { -webkit-mask-image: url("icons/fa-duo-cake-candles.svg"); mask-image: url("icons/fa-duo-cake-candles.svg"); }
.bb-ico-list-check::before { -webkit-mask-image: url("icons/fa-duo-list-check.svg"); mask-image: url("icons/fa-duo-list-check.svg"); }
.bb-ico-hourglass-half::before { -webkit-mask-image: url("icons/fa-duo-hourglass-half.svg"); mask-image: url("icons/fa-duo-hourglass-half.svg"); }
.bb-ico-check::before { -webkit-mask-image: url("icons/fa-duo-check.svg"); mask-image: url("icons/fa-duo-check.svg"); }
.bb-ico-alarm-snooze::before { -webkit-mask-image: url("icons/fa-duo-alarm-snooze.svg"); mask-image: url("icons/fa-duo-alarm-snooze.svg"); }
.bb-ico-chevron-left::before { -webkit-mask-image: url("icons/fa-duo-chevron-left.svg"); mask-image: url("icons/fa-duo-chevron-left.svg"); }
.bb-ico-chevron-right::before { -webkit-mask-image: url("icons/fa-duo-chevron-right.svg"); mask-image: url("icons/fa-duo-chevron-right.svg"); }
.bb-ico-triangle-exclamation::before { -webkit-mask-image: url("icons/fa-duo-triangle-exclamation.svg"); mask-image: url("icons/fa-duo-triangle-exclamation.svg"); }
.bb-ico-hand-holding-dollar::before { -webkit-mask-image: url("icons/fa-duo-hand-holding-dollar.svg"); mask-image: url("icons/fa-duo-hand-holding-dollar.svg"); }
.bb-ico-door-open::before { -webkit-mask-image: url("icons/fa-duo-door-open.svg"); mask-image: url("icons/fa-duo-door-open.svg"); }
.bb-ico-medal::before { -webkit-mask-image: url("icons/fa-duo-medal.svg"); mask-image: url("icons/fa-duo-medal.svg"); }
.bb-ico-sparkles::before { -webkit-mask-image: url("icons/fa-duo-sparkles.svg"); mask-image: url("icons/fa-duo-sparkles.svg"); }
.bb-ico-circle-check::before { -webkit-mask-image: url("icons/fa-duo-circle-check.svg"); mask-image: url("icons/fa-duo-circle-check.svg"); }
.bb-ico-xmark::before { -webkit-mask-image: url("icons/fa-duo-xmark.svg"); mask-image: url("icons/fa-duo-xmark.svg"); }
.bb-home [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-home [class*="bb-ico-"] { display: inline-flex; flex: none; }

/* Colour-coded icon tiles: a tinted square with the icon in the tone's colour (bad, warn, info, ok, brand). */
.bb-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; }
.bb-tile [class*="bb-ico-"]::before { width: 22px; height: 22px; margin-inline-end: 0; }
.bb-tile--bad   { background: var(--bb-danger-bg);  color: var(--bb-text-danger); }
.bb-tile--warn  { background: var(--bb-warn-bg);    color: var(--bb-warn); }
.bb-tile--info  { background: var(--bb-info-bg);    color: var(--bb-info); }
.bb-tile--ok    { background: var(--bb-success-bg); color: var(--bb-text-success); }
.bb-tile--brand { background: var(--bb-accent-soft); color: var(--bb-accent); }
.bb-tile--neutral { background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
/* ===== Cashier (BBCRM.App/Features/Payments) ===== */
/* One screen: who pays and what they owe on the left, how they pay on the right. The pay panel stays in view while the
   charges scroll; below 1024px the two stack and the Pay button pins to the panel's foot so it never leaves an iPad. */
.bb-ico-card-new::before  { -webkit-mask-image: url("icons/fa-duo-credit-card-front.svg"); mask-image: url("icons/fa-duo-credit-card-front.svg"); }
.bb-ico-cash::before      { -webkit-mask-image: url("icons/fa-duo-money-bill-wave.svg");   mask-image: url("icons/fa-duo-money-bill-wave.svg"); }
.bb-ico-check-pay::before { -webkit-mask-image: url("icons/fa-duo-money-check-pen.svg");   mask-image: url("icons/fa-duo-money-check-pen.svg"); }
.bb-ico-terminal::before  { -webkit-mask-image: url("icons/fa-duo-cash-register.svg");     mask-image: url("icons/fa-duo-cash-register.svg"); }
.bb-ico-help::before      { -webkit-mask-image: url("icons/fa-duo-circle-question.svg");   mask-image: url("icons/fa-duo-circle-question.svg"); }
.bb-ico-wallet::before    { -webkit-mask-image: url("icons/fa-duo-wallet.svg");            mask-image: url("icons/fa-duo-wallet.svg"); }
.bb-ico-gift-card::before { -webkit-mask-image: url("icons/fa-duo-gift-card.svg");         mask-image: url("icons/fa-duo-gift-card.svg"); }
.bb-ico-gift::before      { -webkit-mask-image: url("icons/fa-duo-gift.svg");              mask-image: url("icons/fa-duo-gift.svg"); }
.bb-ico-refresh::before   { -webkit-mask-image: url("icons/fa-duo-arrows-rotate.svg");     mask-image: url("icons/fa-duo-arrows-rotate.svg"); }
.bb-ico-find::before      { -webkit-mask-image: url("icons/fa-duo-magnifying-glass.svg");  mask-image: url("icons/fa-duo-magnifying-glass.svg"); }

.bb-cashier { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 16px; align-items: start; padding-bottom: 32px; }
.bb-cashier__pay { position: sticky; top: var(--bb-page-sticky-top, 12px); }
@media (min-width: 1024px) and (max-width: 1199.98px) { .bb-cashier { grid-template-columns: minmax(0, 1fr) 250px; } }
@media (max-width: 1023.98px) {
    .bb-cashier { grid-template-columns: minmax(0, 1fr); }
    .bb-cashier__pay { position: static; }
    .bb-cashier__commit { position: sticky; bottom: 0; background: var(--bb-surface); padding-top: 8px; }
}

.bb-cashier__find { position: relative; margin-bottom: 12px; }
.bb-ico-find { position: relative; }
.bb-ico-find::before { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); margin: 0; z-index: 1; pointer-events: none; color: var(--bb-text-muted); }
.bb-ico-find.bb-ico-find input { padding-inline-start: 34px; }
.bb-cashier__hits { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius);
                    background: var(--bb-surface); max-height: 320px; overflow-y: auto; }
.bb-cashier__hit { display: flex; width: 100%; align-items: baseline; gap: 8px; padding: 8px 10px; border: 0; border-radius: var(--bb-radius-sm);
                   background: transparent; color: var(--bb-text); text-align: start; font: inherit; cursor: pointer; }
.bb-cashier__hit:hover { background: var(--bb-surface-sunken); }
.bb-cashier__hit:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-cashier__hit small { color: var(--bb-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The payer: name first, then the facts that change how the cashier takes the money. */
.bb-payer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.bb-payer__name { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; color: var(--bb-text); margin: 0; }
.bb-payer__meta { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }

.bb-cashier__count { color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-cashier__main .bb-card__head { flex-wrap: wrap; }
/* A long list of open charges scrolls inside a fixed height (virtual scrolling needs one). */
.bb-charges--scroll { height: 420px; }

/* Tender choice: one row of radio tiles; the chosen one carries the brand edge. */
.bb-tender { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
/* Grid row states set through DxGrid CustomizeElement (CssClass on the row; the cells carry the colour). */
.bb-row-sel > td { background-color: var(--bb-accent-soft); }
.bb-row-muted > td { color: var(--bb-text-muted); }

/* A DxRadio dressed as a card: our class on its root (CssClass), the chosen one carries the brand edge. */
.bb-choice { position: relative; padding: 6px 10px 6px 8px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font-size: var(--bb-fs-body); }
.bb-choice:hover { border-color: var(--bb-border-strong); }
/* The radio's own label reaches across the whole card, so the card is the click target. */
.bb-choice label::after { content: ""; position: absolute; inset: 0; }
.bb-choice:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-choice.is-on { border-color: var(--bb-brand); box-shadow: inset 0 0 0 1px var(--bb-brand); font-weight: 600; }
.bb-choice__body { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.bb-choice__body .bb-tile { width: 36px; height: 36px; flex: none; }
.bb-choice__body b { display: block; font-weight: 600; }
.bb-choice__says { display: block; font-weight: 400; color: var(--bb-text-muted); }
.bb-choice--stack { padding: 10px 12px; border-radius: 12px; }
.bb-choice--stack.is-on { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }

/* The amount is the screen's one loud figure; everything else defers to it. */
.bb-payfig { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 8px; }
.bb-payfig__label { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-payfig__amt { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bb-text); line-height: 1.1; }
.bb-payfig__fee { color: var(--bb-text-muted); font-size: var(--bb-fs-body); margin: 0 0 12px; }
.bb-cashier__card { min-height: 120px; margin: 0 0 12px; padding: 12px; border: 1px dashed var(--bb-border-strong); border-radius: var(--bb-radius);
                    color: var(--bb-text-muted); font-size: var(--bb-fs-body); }

/* Outcome: replaces the form; the tone edge says how it went before the words do. */
.bb-outcome { border-inline-start: 4px solid var(--bb-border-strong); padding: 4px 0 4px 14px; margin-bottom: 16px; }
.bb-outcome--ok   { border-inline-start-color: var(--bb-text-success); }
.bb-outcome--warn { border-inline-start-color: var(--bb-warn); }
.bb-outcome--bad  { border-inline-start-color: var(--bb-text-danger); }
.bb-outcome__head { display: flex; align-items: center; gap: 12px; }
.bb-outcome__title { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; margin: 0; color: var(--bb-text); }
.bb-outcome__body { margin: 8px 0 0; color: var(--bb-text); line-height: 1.43; max-width: 60ch; }
.bb-outcome__list { margin: 8px 0 0; padding-inline-start: 1.25rem; }
.bb-outcome__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 8px; margin-top: 16px; }

/* Receipt: the portal's .rcpt document, plus what happens next. */
.rcpt__next { margin: 1.25rem 0 0; padding-top: .875rem; border-top: 1px solid var(--bb-border); }
.rcpt__next h3 { font-size: var(--bb-fs-body); font-weight: 600; margin: 0 0 .375rem; color: var(--bb-text); }
.rcpt__next p { margin: 0 0 .25rem; color: var(--bb-text); font-size: var(--bb-fs-body); }

/* A DevExpress report viewer in a dialog: the container gives the viewer its height; the viewer lays itself out. */
.bb-report-host { width: 100%; height: min(72vh, 760px); }

/* A DevExpress report viewer in a dialog: the container gives the viewer its height; the viewer lays itself out. */
.bb-report-host { width: 100%; height: min(72vh, 760px); }

/* ===== Payments page (BBCRM.App/Features/Payments, Payments P2) ===== */
/* A ledger: one search line, the list, and the payment in a drawer from the right. The drawer's one loud element is the
   sentence that says what will happen to the money, set as the statement it is, right above the one large button. */
.bb-ledger { padding-bottom: 32px; }
.bb-ledger__head { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.bb-ledger__headtx { min-width: 0; flex: 1 1 auto; }
.bb-ledger__crumb { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-ledger__crumb [class*="bb-ico-"]::before { width: 10px; height: 10px; margin-inline-end: 0; }
.bb-ledger__h1 { margin: 2px 0 2px; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.2; color: var(--bb-text); }
.bb-ledger__sub { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-ledger__acts { display: flex; gap: 8px; flex: none; }
.bb-ledger__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.bb-ledger__search { flex: 1 1 320px; min-width: 240px; }
.bb-ledger__date { flex: 0 0 176px; min-width: 176px; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 14px; border: 1px solid var(--bb-border); border-radius: 999px;
           background: var(--bb-surface); color: var(--bb-text); font: inherit; font-size: var(--bb-fs-body); font-weight: 600; cursor: pointer; }
.bb-chip:hover { border-color: var(--bb-border-strong); }
.bb-chip:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-chip.is-on { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); font-weight: 600; }
.bb-chip__n { margin-inline-start: .35em; color: var(--bb-text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.bb-chip [class*="bb-ico-"]::before { width: 12px; height: 12px; margin-inline-end: 0; }
.bb-ledger__grid { font-variant-numeric: tabular-nums; }

.bb-ledger__drawhead { display: flex; align-items: center; gap: 12px; width: 100%; }
.bb-ledger__drawtitle { min-width: 0; }
.bb-ledger__drawtitle .bb-payer__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-ledger__drawbody { padding: 4px 4px 24px; }

.bb-ledger__charges { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bb-border); }
.bb-ledger__charge { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bb-border); }
.bb-ledger__charge-what { flex: 1 1 auto; min-width: 0; color: var(--bb-text); }
.bb-ledger__charge-what small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-ledger__charge-amt { flex: none; font-variant-numeric: tabular-nums; color: var(--bb-text); }
.bb-ledger__charge.is-returned .bb-ledger__charge-what,
.bb-ledger__charge.is-returned .bb-ledger__charge-amt { color: var(--bb-text-muted); text-decoration: line-through; }
.bb-ledger__kindhelp { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); font-weight: 400; }

.bb-ledger__confirm { margin: 16px 0 12px; padding: 12px 0 0; border-top: 2px solid var(--bb-text); font-family: var(--bb-font-display);
                      font-size: var(--bb-fs-subtitle2); line-height: 1.43; color: var(--bb-text); max-width: 46ch; }

.bb-ledger__step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.bb-ledger__why { flex-basis: 100%; padding-inline-start: 28px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }

/* The list: one table grouped by day (a header row with the day's count and total), the open payment's row marked. */
.bb-ledger__card { padding: 0; overflow-x: auto; }
.bb-ledger__t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bb-ledger__t th, .bb-ledger__t td { padding: 12px 14px; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--bb-border); }
.bb-ledger__t thead th { color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 600; white-space: nowrap; }
.bb-ledger__t .bb-ledger__r { text-align: end; white-space: nowrap; }
.bb-ledger__dayin { display: flex; justify-content: space-between; gap: 12px; }
.bb-ledger__day th { padding: 10px 14px; background: var(--bb-surface-sunken); color: var(--bb-text); font-size: var(--bb-fs-body); font-weight: 600; }
.bb-ledger__day .bb-ledger__daytot { color: var(--bb-text-muted); font-weight: 600; }
.bb-ledger__row { cursor: pointer; }
.bb-ledger__row:hover { background: var(--bb-surface-sunken); }
.bb-ledger__row.is-sel { background: var(--bb-accent-soft); }
.bb-ledger__time { white-space: nowrap; }
.bb-ledger__payer { display: inline-flex; align-items: center; gap: 8px; }
.bb-ledger__ini { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bb-surface-sunken); color: var(--bb-text-muted);
                  font-style: normal; font-size: var(--bb-fs-caption); font-weight: 600; flex: none; }
.bb-ledger__how { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bb-ledger__how [class*="bb-ico-"]::before { width: 16px; height: 16px; margin-inline-end: 0; color: var(--bb-text-muted); }
.bb-ledger__what small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-ledger__r.is-muted { color: var(--bb-text-muted); }
.bb-ledger__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
/* With the drawer open the list has less room: the "what it paid for" column goes first. */
.bb-ledger__t.is-narrow .bb-ledger__what { display: none; }
/* With the drawer open the table keeps Status and Amount whole: How shrinks to its icon (the full word is its tooltip) and cells tighten. */
.bb-ledger__t.is-narrow .bb-ledger__howtx { display: none; }
.bb-ledger__t.is-narrow .bb-ledger__howcol { width: 1%; }
.bb-ledger__t.is-narrow th, .bb-ledger__t.is-narrow td { padding-inline: 8px; }
.bb-ledger__t .bb-pill { white-space: nowrap; }
@media (max-width: 1199.98px) { .bb-ledger__t .bb-ledger__what { display: none; } }

/* The drawer: header with the figure and the outcome, then sections divided by a rule. */
.bb-ledger__drawamt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bb-text); }
.bb-ledger__drawamt .bb-pill { font-size: var(--bb-fs-caption); }
.bb-ledger__drawsub { margin: 2px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-ledger__x { margin-inline-start: auto; min-width: 36px; }
.bb-ledger__sec { padding: 14px 0; border-bottom: 1px solid var(--bb-border); }
.bb-ledger__sec:last-child { border-bottom: 0; }
.bb-ledger__h3 { margin: 0 0 8px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 600; }
.bb-ledger__num { font-variant-numeric: tabular-nums; }
.bb-ledger__muted { color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 400; }
.bb-ledger__timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-ledger__timeline li { display: flex; align-items: baseline; gap: 10px; }
.bb-ledger__timeline li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bb-text-success); transform: translateY(-1px); }
.bb-ledger__timeline li.is-pending::before { background: var(--bb-warn); }
.bb-ledger__timeline .bb-ledger__when { margin-inline-start: auto; color: var(--bb-text-muted); font-size: var(--bb-fs-body); white-space: nowrap; }
.bb-ledger__acts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bb-ledger__acts-grid .bb-ledger__full { grid-column: 1 / -1; }

/* Give money back: four plain answers as option cards, then which charges, then the sentence and the one named button. */
.bb-ledger__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
@media (max-width: 640px) { .bb-ledger__choices { grid-template-columns: minmax(0, 1fr); } }
.bb-ledger__row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
@media (max-width: 640px) { .bb-ledger__row2 { grid-template-columns: minmax(0, 1fr); } }
.bb-ledger__after { margin: 0; }
.bb-ledger__after .bb-label { display: block; }
.bb-ledger__keep { display: grid; gap: 2px; }
.bb-dlg-effect { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bb-info-bg); color: var(--bb-text); }
.bb-dlg-effect [class*="bb-ico-"]::before { width: 18px; height: 18px; margin-inline-end: 0; color: var(--bb-info); }

/* ===== Credit memos and Collect payments (BBCRM.App/Features/Payments, billing lane 9a) ===== */
.bb-credit__split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1099.98px) { .bb-credit__split { grid-template-columns: minmax(0, 1fr); } }
.bb-credit__side { display: grid; gap: 16px; }
.bb-credit__cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 14px 4px; }
.bb-credit__cardhead .bb-card__title { margin: 0; }
.bb-credit__cardhead .bb-card__title small { margin-inline-start: 8px; font-weight: 400; }
.bb-credit__find { max-width: 560px; }
.bb-credit__what { color: var(--bb-text); }
.bb-credit__what small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-credit__in { color: var(--bb-text-success); }
.bb-credit__avail { margin: 0 0 4px; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--bb-text); }
.bb-credit__avail.is-some { color: var(--bb-text-success); }
.bb-credit__effect { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-credit__effect [class*="bb-ico-"]::before { width: 14px; height: 14px; margin-inline-end: 0; color: var(--bb-info); }

.bb-collect__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 899.98px) { .bb-collect__stats { grid-template-columns: minmax(0, 1fr); } }
.bb-collect__figure { margin: 0 0 4px; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--bb-text); }
.bb-collect__figure.is-held { color: var(--bb-text-muted); }
.bb-collect__t { font-variant-numeric: tabular-nums; }
.bb-collect__t .bb-collect__pick { width: 44px; padding-inline-end: 0; }
.bb-collect__t tr.is-sel td { background: var(--bb-accent-soft); }
.bb-collect__what { color: var(--bb-text); }
.bb-collect__what small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-collect__held td { color: var(--bb-text-muted); }
.bb-collect__held td .bb-pill { color: inherit; }
.bb-collect__held .bb-pill--danger { color: var(--bb-btn-danger-fg); }
.bb-collect__held .bb-pill--warn { color: var(--bb-accent); }
.bb-collect__held .bb-pill--info { color: var(--bb-btn-brand-fg); }
.bb-collect__reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bb-collect__reasons li { display: flex; align-items: flex-start; gap: 12px; }
.bb-collect__reasons li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.bb-collect__reasons small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 400; }
.bb-collect__n { flex: none; font-variant-numeric: tabular-nums; }
.bb-collect__sum { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.bb-collect__sum li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.bb-collect__sum .bb-collect__total { padding-top: 8px; border-top: 2px solid var(--bb-text); font-family: var(--bb-font-display); font-weight: 600; }
.bb-collect__banner { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }

/* ===== Payment methods (BBCRM.App/Features/Payments/PaymentMethodsPanel) ===== */
/* One row per saved card: tile, what the card is and when it expires, what the bank said, then its actions at the row's end.
   Rows are separated by a rule, not boxed: the popup is the card. Below 600px the actions drop under the text. */
.bb-methods { list-style: none; margin: 0; padding: 0; }
.bb-method { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bb-border); }
.bb-method:first-child { padding-top: 0; }
.bb-method__body { flex: 1 1 auto; min-width: 0; }
.bb-method__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; color: var(--bb-text); }
.bb-method__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); margin-top: 2px; }
.bb-method__notice { color: var(--bb-text-muted); font-size: var(--bb-fs-body); margin-top: 4px; }
.bb-method__acts { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.bb-methods__pause { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bb-methods__entry { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--bb-text); }
@media (max-width: 599.98px) {
    .bb-method { flex-wrap: wrap; }
    .bb-method__acts { flex-basis: 100%; padding-inline-start: 52px; }
}

/* Notice strip: the shared .bb-notice laid out as one line with its action and paging. */
.bb-home-notice { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.bb-home-notice .bb-notice__txt { flex: 1; min-width: 0; }
.bb-home-notice .bb-notice__why { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-notice__nav { display: inline-flex; align-items: center; gap: 4px; color: var(--bb-text-muted); white-space: nowrap; }
.bb-notice__page { min-width: var(--bb-hit-min); min-height: var(--bb-hit-min); }

/* Business health: score left, words and actions right; the AI reading spans the card below both. */
.bb-health { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
.bb-health__score b { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: 1; }
.bb-health__score > span:first-of-type { color: var(--bb-text-muted); margin-left: 4px; }
.bb-health__verdict { display: block; margin-top: 4px; font-weight: 600; }
.bb-health--healthy .bb-health__verdict { color: var(--bb-text-success); }
.bb-health--needsattention .bb-health__verdict { color: var(--bb-warn); }
.bb-health--atrisk .bb-health__verdict { color: var(--bb-text-danger); }
.bb-health__diag { margin: 0 0 8px; }
.bb-health__acts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.bb-health__act { display: grid; grid-template-columns: 40px minmax(0, 1fr) 15rem; gap: 8px; align-items: center; }
.bb-health__cta { display: grid; }
.bb-health__ai { grid-column: 1 / -1; }
.bb-health__ai:empty { display: none; }
@media (max-width: 1100px) {
    .bb-health { grid-template-columns: minmax(0, 1fr); }
    .bb-health__act { grid-template-columns: 40px minmax(0, 1fr); }
    .bb-health__cta { grid-column: 2; }
}

/* Setup checklist: four steps across, the next one marked, done ones ticked. */
.bb-setup { border-top: 3px solid var(--bb-accent); }
.bb-setup__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bb-setup__cnt { color: var(--bb-text-muted); }
.bb-setup__prog { display: inline-grid; grid-template-columns: repeat(4, 28px); gap: 4px; }
.bb-setup__prog i { height: 6px; border-radius: 3px; background: var(--bb-border); }
.bb-setup__prog i.on { background: var(--bb-ok); }
.bb-setup__steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; }
@media (max-width: 640px) { .bb-setup__steps { grid-template-columns: minmax(0, 1fr); } }
.bb-setup__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.bb-setup__txt p { margin: 4px 0 8px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-setup__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--bb-border); font-weight: 600; }
.bb-setup__step.is-next .bb-setup__dot { border-color: var(--bb-accent); }
/* done is green with a check and a Done label; gold stays the next step's mark */
.bb-setup__step.is-done .bb-setup__dot { background: var(--bb-ok); border-color: var(--bb-ok); color: var(--bb-surface); }
.bb-setup__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* every step's buttons fill the step and stack, so all five rows line up and no label wraps */
.bb-setup__acts { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; justify-content: stretch; margin-top: auto; }
.bb-setup__txt { display: flex; flex-direction: column; min-width: 0; }
.bb-setup__how { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 0 10px; color: var(--bb-link); font-size: var(--bb-fs-body); font-weight: 600; text-decoration: none; }
.bb-setup__how:hover, .bb-setup__how:focus-visible { text-decoration: underline; }
.bb-setup__how [class*="bb-ico-"]::before { width: 16px; height: 16px; margin-inline-end: 0; }

/* Merchant offer: the DxToast body. */
.bb-mtoast__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Account modals */

/* Needs you now: tile | who and why | the fixed action column (H4). Panels open under their row, full width. */
.bb-needs { list-style: none; margin: 0; padding: 0; }
.bb-needs__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bb-border); }
.bb-needs__row:first-child { border-top: 0; }
.bb-needs__row > .bb-panel { grid-column: 1 / -1; }
.bb-needs__row > .bb-acts { --bb-acts-w: 268px; }
.bb-needs__l1 { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
/* A long name wraps to a second line instead of losing its end (1366 has the narrowest name column). */
.bb-needs__nm { font-weight: 600; min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bb-needs__kind, .bb-needs__why { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-needs__done { display: grid; justify-items: center; gap: 4px; padding: 24px 0; color: var(--bb-text-muted); }
.bb-needs__done [class*="bb-ico-"]::before { width: 28px; height: 28px; }
.bb-needs__done [class*="bb-ico-"] { color: var(--bb-text-success); }
.bb-needs__chips { margin: 2px 0 6px; }
.bb-needs__grp { color: var(--bb-text); font-weight: 600; }
.bb-needs__muted { color: var(--bb-text-muted); }
.bb-needs__sub { list-style: none; margin: 4px 0 0 50px; padding: 0; grid-column: 1 / -1; border-left: 2px solid var(--bb-border); }
.bb-needs__sub > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0 6px 14px; border-top: 1px solid var(--bb-border); }
.bb-needs__sub > li:first-child { border-top: 0; }
.bb-needs__sub > li > .bb-panel { grid-column: 1 / -1; }
.bb-needs__sub .bb-acts { --bb-acts-w: 268px; }
.bb-needs__more { display: flex; justify-content: center; padding: 10px 0 2px; border-top: 1px solid var(--bb-border); }
.bb-needs__bulk { grid-column: 1 / -1; margin-left: 50px; padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: 8px; display: grid; gap: 8px; }
.bb-needs__bulk p { margin: 0; font-size: var(--bb-fs-body); }
.bb-chev::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-inline-start: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.bb-chev.is-open::after { transform: translateY(1px) rotate(-135deg); }
@media (max-width: 640px) {
    .bb-needs__row { grid-template-columns: 40px minmax(0, 1fr); }
    .bb-needs__row > .bb-acts { grid-column: 1 / -1; }
    .bb-needs__sub, .bb-needs__bulk { margin-left: 0; }
}
.bb-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); display: grid; gap: 10px; }
.bb-panel__top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: start; }
.bb-panel__who span { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-panel__num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-panel__ph { font-size: var(--bb-fs-subtitle1); font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-panel__lbl { display: grid; gap: 4px; font-weight: 600; }
.bb-panel__preview { padding: 10px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); }
.bb-panel__subj { font-weight: 600; margin-bottom: 4px; }
.bb-panel__body { white-space: pre-wrap; margin: 0; }
.bb-acts-group--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; }
@media (max-width: 640px) { .bb-acts-group--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bb-acts-group--start { justify-content: start; }
.bb-home-starter { display: grid; gap: 10px; padding: 8px 0; }
.bb-home-starter p { margin: 0; color: var(--bb-text-muted); }

/* ----- Home: measure tiles, compare lines and the Today, Prospects, Members, Programs, Reach out cards (prototype .ms .trio .crow .prow .xrow) ----- */
.bb-ms-grid { display: grid; margin: 0 -20px; }
.bb-card__head + .bb-ms-grid { margin-top: -14px; }
.bb-ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bb-ms-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bb-ms { min-width: 0; padding: 10px 14px 12px 20px; border-right: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); }
.bb-ms-grid--3 > .bb-ms:nth-child(3n), .bb-ms-grid--4 > .bb-ms:nth-child(4n), .bb-ms-grid--5 > .bb-ms:nth-child(5n) { border-right: 0; }
.bb-ms__lbl { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 2.6em; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-ms__lbl > span { line-height: 1.3; }
.bb-ms__lbl .bb-home-cta { margin-left: 0; margin-block: -6px; }
.bb-ms__num { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--bb-text); margin-top: 2px; }
.bb-ms.is-bad .bb-ms__num { color: var(--bb-text-danger); }
.bb-ms.is-warn .bb-ms__num { color: var(--bb-warn); }
.bb-ms.is-ok .bb-ms__num { color: var(--bb-text-success); }
.bb-ms__sub { margin-top: 2px; font-size: var(--bb-fs-caption); line-height: 1.43; color: var(--bb-text-muted); }
@media (max-width: 1366px) { .bb-ms-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bb-ms-grid--5 > .bb-ms:nth-child(5n) { border-right: 1px solid var(--bb-border); } .bb-ms-grid--5 > .bb-ms:nth-child(3n) { border-right: 0; } }
@media (max-width: 640px) { .bb-ms-grid--3, .bb-ms-grid--4, .bb-ms-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bb-delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-delta b { font-weight: 600; white-space: nowrap; }
.bb-delta.good b, .bb-delta.good [class*="bb-ico-"] { color: var(--bb-text-success); }
.bb-delta.bad b, .bb-delta.bad [class*="bb-ico-"] { color: var(--bb-text-danger); }
.bb-delta [class*="bb-ico-"]::before { width: 11px; height: 11px; margin-inline-end: 0; }
.bb-ico-up::before     { -webkit-mask-image: url("icons/fa-duo-arrow-up.svg");     mask-image: url("icons/fa-duo-arrow-up.svg"); }
.bb-ico-down::before   { -webkit-mask-image: url("icons/fa-duo-arrow-down.svg");   mask-image: url("icons/fa-duo-arrow-down.svg"); }
.bb-home-note { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-home-foot { margin: 0 -20px -18px; padding: 10px 20px 12px; border-top: 1px solid var(--bb-border); font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-today, .bb-prows, .bb-reach { list-style: none; margin: 0 -20px -18px; padding: 0; }
.bb-today__class { display: grid; grid-template-columns: 66px minmax(0, 1fr) 118px var(--bb-ctl-h-touch); gap: 10px; align-items: center; padding: 9px 12px 9px 20px; border-top: 1px solid var(--bb-border); }
.bb-today__class:first-child { border-top: 0; }
.bb-today__tm { font-size: var(--bb-fs-body); color: var(--bb-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-today__nm { min-width: 0; }
.bb-today__nm > b { display: block; font-size: var(--bb-fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-today__nm > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-today__live { display: inline-flex; align-items: center; gap: 5px; color: var(--bb-text-success); font-weight: 600; }
.bb-today__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bb-today__trial { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; background: var(--bb-gold-soft); color: var(--bb-text); font-size: var(--bb-fs-caption); font-weight: 600; }
.bb-today__fill { display: flex; flex-direction: column; gap: 4px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-bar { display: block; height: 6px; border-radius: 3px; background: var(--bb-border); overflow: hidden; }
.bb-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--bb-info); }
.bb-today__class.is-live .bb-bar > i { background: var(--bb-text-success); }
.bb-prow { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px 132px var(--bb-ctl-h-touch); gap: 12px; align-items: center; padding: 9px 12px 9px 20px; border-top: 1px solid var(--bb-border); font-size: var(--bb-fs-body); }
.bb-prow--head { margin: -14px -20px 0; padding-top: 8px; padding-bottom: 8px; border-top: 0; background: var(--bb-surface-sunken); font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-prow .n { text-align: right; font-variant-numeric: tabular-nums; }
.bb-prow__nm { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: var(--bb-text); font-weight: 600; text-decoration: none; }
a.bb-prow__nm:hover, a.bb-prow__nm:focus-visible { color: var(--bb-accent); text-decoration: underline; }
.bb-prow__nocap { font-style: italic; }
.bb-reach__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px 12px 20px; border-top: 1px solid var(--bb-border); }
.bb-reach__row:first-child { border-top: 0; }
.bb-reach__l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--bb-fs-body); }
.bb-reach__l1 b { font-family: var(--bb-font-display); font-weight: 600; }
.bb-reach__why { margin-top: 2px; font-size: var(--bb-fs-caption); line-height: 1.43; color: var(--bb-text-muted); }
.bb-reach__act { margin-top: 8px; }
.bb-reach__btn { width: 220px; }
@media (max-width: 640px) { .bb-today__class { grid-template-columns: 56px minmax(0, 1fr) var(--bb-ctl-h-touch); } .bb-today__fill { grid-column: 2; } .bb-prow { grid-template-columns: minmax(0, 1fr) 56px 56px var(--bb-ctl-h-touch); } .bb-prow > :nth-child(4) { display: none; } }

/* ----- Home: Money, Income, Retention and At risk (Manager+; prototype .tiles .inc-grid .spark .rrow .pace) ----- */
.bb-home-sec { display: grid; gap: 12px; min-width: 0; }
.bb-sec-h { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 0; }
.bb-sec-h h2 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); font-weight: 600; color: var(--bb-text); }
.bb-home-kpis { display: grid; gap: 12px; }
.bb-home-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .bb-home-kpis--3 { grid-template-columns: minmax(0, 1fr); } }
.bb-home-kpi { padding: 12px 14px 12px 16px; min-width: 0; }
.bb-home-kpi > .bb-ms { padding: 0; border: 0; }
.bb-home-kpi .bb-ms__num { font-size: var(--bb-fs-subtitle1); }
.bb-kpi__rec { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border-radius: var(--bb-radius-sm); background: var(--bb-ok-bg); font-size: var(--bb-fs-caption); color: var(--bb-text); }
.bb-kpi__rec [class*="bb-ico-"] { color: var(--bb-text-success); }
.bb-kpi__rec [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-kpi__act { margin-top: 10px; }
.bb-income { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.bb-income > .bb-ms-grid { margin-bottom: -18px; }
.bb-income > .bb-ms-grid > .bb-ms { border-bottom: 0; }
.bb-income__spark { padding: 0 0 0 16px; border-left: 1px solid var(--bb-border); }
@media (max-width: 1100px) { .bb-income { grid-template-columns: minmax(0, 1fr); } .bb-income__spark { border-left: 0; padding: 12px 0 0; } }
.bb-spark { margin-top: 8px; }
.bb-spark__ax { display: flex; justify-content: space-between; margin-top: 8px; padding-right: 6px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-home-vitals { padding-top: 14px; }
.bb-home-vitals > .bb-ms-grid > .bb-ms { border-bottom: 0; }
.bb-risk { list-style: none; margin: 0 -20px -18px; padding: 0; }
.bb-risk__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 170px auto; gap: 16px; align-items: center; padding: 12px 16px 12px 20px; border-top: 1px solid var(--bb-border); }
.bb-risk__row:first-child { border-top: 0; }
.bb-risk__ava { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bb-surface-sunken); color: var(--bb-text); font-weight: 600; font-size: var(--bb-fs-caption); }
.bb-risk__who { min-width: 0; }
.bb-risk__l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bb-risk__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--bb-text); text-decoration: none; }
a.bb-needs__nm { color: var(--bb-text); text-decoration: none; }
a.bb-risk__nm:hover, a.bb-risk__nm:focus-visible, a.bb-needs__nm:hover, a.bb-needs__nm:focus-visible { color: var(--bb-accent); text-decoration: underline; }
.bb-risk__meta { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); white-space: nowrap; }
.bb-risk__why { margin-top: 2px; font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-risk__pattern { display: flex; align-items: flex-start; gap: 6px; margin-top: 5px; font-size: var(--bb-fs-caption); line-height: 1.43; color: var(--bb-warn); }
.bb-risk__pattern [class*="bb-ico-"]::before { width: 13px; height: 13px; margin-inline-end: 0; }
.bb-risk__row > .bb-panel { grid-column: 1 / -1; }
.bb-pace-wrap { display: flex; flex-direction: column; gap: 3px; }
.bb-pace__cap { display: flex; justify-content: space-between; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
@media (max-width: 1100px) { .bb-risk__row { grid-template-columns: 36px minmax(0, 1fr); } .bb-pace-wrap, .bb-risk__act { grid-column: 2; } }

/* ---- reconnect modal (ReconnectModal.razor) --------------------------------
   Blazor sets components-reconnect-* on #components-reconnect-modal; each line shows only in its state.
   https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-10.0 */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    width: min(22rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: 1.5rem;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
    color: var(--bb-text);
    box-shadow: var(--bb-e3);
}

#components-reconnect-modal::backdrop {
    background: var(--bb-scrim);
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

#components-reconnect-modal p {
    margin: 0;
}

#components-reconnect-modal button {
    padding: .375rem 1.25rem;
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius);
    background: transparent;
    color: var(--bb-text);
    font-weight: 600;
    cursor: pointer;
}

#components-reconnect-modal button:hover { background: var(--bb-btn-quiet-bg-h); }
#components-reconnect-modal button:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }

.components-rejoining-animation {
    position: relative;
    width: 48px;
    height: 48px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--bb-accent);
    border-radius: 50%;
    animation: bb-rejoining 1.5s cubic-bezier(0, .2, .8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) { animation-delay: -.5s; }

@keyframes bb-rejoining {
    0%   { top: 24px; left: 24px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 48px; height: 48px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div { animation: none; top: 0; left: 0; width: 48px; height: 48px; opacity: .6; }
}

/* ----- Home: the AI reading in the health card's [data-ai-slot] (approved design .h-read; full card width, no line cap) ----- */
.bb-ai { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--bb-border); }
.bb-ai__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; padding: 7px 12px; border-radius: 8px; background: var(--bb-ai-band); border-left: 3px solid var(--bb-ai-rule); }
.bb-ai__badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-ai-badge-fg); background: var(--bb-ai-badge-bg); white-space: nowrap; }
.bb-ai__badge [class*="bb-ico-"]::before { width: 12px; height: 12px; margin-inline-end: 0; }
.bb-ai__title { margin: 0; font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); }
.bb-ai__when, .bb-ai__ok { font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text); }
.bb-ai__ok { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.bb-ai__ok [class*="bb-ico-"]::before { width: 12px; height: 12px; margin-inline-end: 0; }
.bb-ai__p { margin: 0 0 8px; font-size: var(--bb-fs-body); line-height: 1.43; color: var(--bb-text); }
.bb-ai__fig { font-weight: 600; padding: 0 3px; border-radius: 4px; background: var(--bb-ai-fig); cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.bb-ai__fig:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-ai__chg { margin: 0 0 8px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-ai__note { margin: 0 0 8px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); font-style: italic; }
.bb-ai__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-ai__link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.bb-ai__link[aria-pressed="true"] { color: var(--bb-text); font-weight: 600; }
.bb-ai__link:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-ai__empty { margin: 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-ai__hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bb-ai__hist > li + li { padding-top: 14px; border-top: 1px solid var(--bb-border); }
.bb-ai__hist-when { margin: 0 0 4px; font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-muted); }

/* ===== Support ===== */
/* Support requests (BBCRM.App Features/Support). Layer-2 roles only; status chips are .bb-pill. */

/* The three kinds of request: one choice, the whole card is the target. */
.bb-support-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 819.98px) {
    .bb-support-choices { grid-template-columns: 1fr; }
}

.bb-support-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    text-align: start;
    color: var(--bb-text);
    background: var(--bb-surface-raised);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    cursor: pointer;
}

.bb-support-choice:hover { border-color: var(--bb-border-strong); }
.bb-support-choice:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }

.bb-support-choice.is-selected {
    border-color: var(--bb-accent);
    background: var(--bb-accent-soft);
}

.bb-support-choice__title { font-weight: 600; }
.bb-support-choice__hint { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }

/* "Here's what we heard": the read-back is the one thing on the page that asks for a decision, so it carries the gold rule. */
.bb-support-heard {
    padding: 16px 20px;
    background: var(--bb-surface-raised);
    border: 1px solid var(--bb-border);
    border-left: 3px solid var(--bb-accent);
    border-radius: var(--bb-radius-lg);
}

.bb-support-heard__title { margin: 0 0 4px; font-weight: 600; font-size: var(--bb-fs-subtitle2); }

.bb-support-heard dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 12px 0;
}

.bb-support-heard dt { color: var(--bb-text-muted); font-weight: 600; }
.bb-support-heard dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .bb-support-heard dl { grid-template-columns: 1fr; }
    .bb-support-heard dd { margin-bottom: 6px; }
}

/* Every group of buttons on these pages shares one width and lines up start to end. */
.bb-support-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, max-content);
    gap: 8px;
    justify-content: start;
}

.bb-support-actions > * { width: 100%; }

@media (max-width: 575.98px) {
    .bb-support-actions { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
}

/* The conversation: the customer's messages sit at the end, Support's at the start. */
.bb-support-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 2px;
}

.bb-support-msg {
    max-width: 85%;
    padding: 10px 14px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface-raised);
}

.bb-support-msg.is-customer {
    align-self: flex-end;
    background: var(--bb-surface-sunken);
}

.bb-support-msg.is-support { align-self: flex-start; }

.bb-support-msg__meta { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); margin-bottom: 4px; }
.bb-support-msg__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bb-support-msg__label { color: var(--bb-text-muted); font-weight: 600; margin-top: 8px; }

/* Where it is: one step per status change; the current one is marked, later ones are not drawn. */
.bb-support-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-support-timeline li {
    position: relative;
    padding: 0 0 12px 22px;
    border-left: 2px solid var(--bb-border);
    margin-left: 6px;
}

.bb-support-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }

.bb-support-timeline li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bb-surface-raised);
    border: 2px solid var(--bb-text-muted);
}

.bb-support-timeline li.is-current::before { background: var(--bb-accent); border-color: var(--bb-accent); }
.bb-support-timeline__when { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }

/* Screenshots: small squares; a click opens the full image. */
.bb-support-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.bb-support-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    background: var(--bb-surface-sunken);
}

.bb-support-thumb__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bb-support-thumb__open:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-support-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bb-support-thumb__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    color: var(--bb-text);
    background: var(--bb-surface-raised);
    box-shadow: var(--bb-e1);
    cursor: pointer;
}

.bb-support-thumb__remove:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }

.bb-support-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; }

.bb-support-sub { color: var(--bb-text-muted); font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-support-empty { padding: 32px 16px; text-align: center; }
.bb-support-empty__title { font-weight: 600; font-size: var(--bb-fs-subtitle2); margin-bottom: 4px; }

/* AI is always labelled: the gold band on anything a model wrote; the badge inside it is .bb-ai__badge. */
.bb-ai-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bb-ai-band);
    border-left: 3px solid var(--bb-ai-rule);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text);
}

/* ---- Check-in Kiosk (BBCRM.App Features/CheckIn) ------------------------------------------------------------------ */
.bb-ico-qrcode::before { -webkit-mask-image: url("icons/fa-duo-qrcode.svg"); mask-image: url("icons/fa-duo-qrcode.svg"); }
.bb-ico-lock::before { -webkit-mask-image: url("icons/fa-duo-lock.svg"); mask-image: url("icons/fa-duo-lock.svg"); }
.bb-ico-user-group::before { -webkit-mask-image: url("icons/fa-duo-user-group.svg"); mask-image: url("icons/fa-duo-user-group.svg"); }
.bb-ico-magnifying-glass::before { -webkit-mask-image: url("icons/fa-duo-magnifying-glass.svg"); mask-image: url("icons/fa-duo-magnifying-glass.svg"); }
.bb-ico-clock::before { -webkit-mask-image: url("icons/fa-duo-clock.svg"); mask-image: url("icons/fa-duo-clock.svg"); }
.bb-ico-circle-exclamation::before { -webkit-mask-image: url("icons/fa-duo-circle-exclamation.svg"); mask-image: url("icons/fa-duo-circle-exclamation.svg"); }
.bb-ico-right-from-bracket::before { -webkit-mask-image: url("icons/fa-duo-right-from-bracket.svg"); mask-image: url("icons/fa-duo-right-from-bracket.svg"); }

/* The door: no shell header or menu. The location name is the one loud thing in the bar - the person at the door must know where they are. */
.bb-kiosk-root { min-height: 100vh; background: var(--bb-surface-sunken); color: var(--bb-text); }
.bb-kiosk { display: flex; flex-direction: column; min-height: 100vh; }
.bb-kiosk-bar { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--bb-surface); border-bottom: 1px solid var(--bb-border); }
.bb-kiosk-bar__logo { height: 26px; width: auto; flex: none; }
.bb-kiosk-bar__place { flex: 1; min-width: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.2;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-kiosk-bar__clock { color: var(--bb-text-muted); font-size: var(--bb-fs-subtitle2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-kiosk-bar__staff { flex: none; }

.bb-kiosk-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 24px; padding: 24px; align-items: start; }
.bb-kiosk-door { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bb-kiosk-for { display: flex; align-items: center; gap: 8px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-kiosk-for b { color: var(--bb-text); font-weight: 600; }
.bb-kiosk-label { margin: 8px 0 0; font-size: var(--bb-fs-subtitle1); font-weight: 600; }
.bb-kiosk-hint { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-kiosk-or { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--bb-text-muted); }
.bb-kiosk-or::before, .bb-kiosk-or::after { content: ""; flex: 1; border-top: 1px solid var(--bb-border); }

/* The result card: the person, large, with one status line in the tone of what happened. */
.bb-kiosk-card { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 380px; padding: 28px 24px;
                 text-align: center; background: var(--bb-surface); border: 1px solid var(--bb-border); border-top: 4px solid var(--bb-border);
                 border-radius: var(--bb-radius-lg); }
.bb-kiosk-card--ok      { border-top-color: var(--bb-ok); }
.bb-kiosk-card--warn    { border-top-color: var(--bb-warn); }
.bb-kiosk-card--neutral { border-top-color: var(--bb-border-strong); }
.bb-kiosk-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
                  background: var(--bb-accent-soft); color: var(--bb-accent); font-family: var(--bb-font-display); font-size: 3rem; font-weight: 600; }
.bb-kiosk-name { margin: 4px 0 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-title1); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
@media (max-height: 800px) { .bb-kiosk-card { min-height: 0; padding-block: 18px; } .bb-kiosk-photo { width: 112px; height: 112px; font-size: 2.25rem; } }
.bb-kiosk-status { display: flex; align-items: center; gap: 10px; font-size: var(--bb-fs-subtitle1); }
.bb-kiosk-reason { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-subtitle2); max-width: 34ch; }
.bb-kiosk-delight { margin: 0; color: var(--bb-accent); font-size: var(--bb-fs-subtitle2); font-weight: 600; }
.bb-kiosk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bb-kiosk-welcome { margin: 0; max-width: 24ch; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.25; }
.bb-tile--lg { width: 56px; height: 56px; border-radius: 14px; }
.bb-tile--lg [class*="bb-ico-"]::before { width: 30px; height: 30px; }

/* Choose and name results: photo tiles big enough to tap (160 x 96 minimum). */
.bb-kiosk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bb-kiosk-tile { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 12px; text-align: start; font: inherit; color: var(--bb-text);
                 background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); cursor: pointer; }
.bb-kiosk-tile:hover { border-color: var(--bb-border-strong); }
.bb-kiosk-tile:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-kiosk-tile[aria-pressed="true"] { border-color: var(--bb-accent); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-kiosk-tile__photo { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
                        background: var(--bb-accent-soft); color: var(--bb-accent); font-weight: 600; }
.bb-kiosk-tile__name { min-width: 0; font-size: var(--bb-fs-subtitle2); font-weight: 600; overflow-wrap: anywhere; }
.bb-kiosk-rank { height: 14px; width: auto; display: block; margin-top: 4px; }

/* Below 900px one column; a result rises over the door as a sheet so nothing scrolls sideways (iPad portrait 820). */
@media (max-width: 899.98px) {
    .bb-kiosk-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .bb-kiosk-bar { padding: 10px 16px; }
    .bb-kiosk-bar__place { font-size: var(--bb-fs-subtitle1); }
    .bb-kiosk-card:not(.bb-kiosk-card--idle) { position: fixed; inset: auto 16px 16px 16px; z-index: 20; min-height: 0;
                                               box-shadow: var(--bb-shell-shadow); }
}

/* The class roster takes the whole width under the bar. */
.bb-kiosk-grid--wide { grid-template-columns: minmax(0, 1fr); }
.bb-kiosk-roster__photo { width: 32px; height: 32px; font-size: var(--bb-fs-caption); }

/* Portal: My check-in code. The QR is the one large thing - black on white, quiet zone kept, at least 240px so a scanner reads it off a phone. */
.bb-portal-code { display: grid; justify-items: center; gap: 10px; margin-top: 24px; padding: 20px 16px; text-align: center;
                  background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); }
.bb-portal-code__title { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; }
.bb-portal-code__who-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bb-portal-code__chip { min-height: 44px; padding: 6px 14px; font: inherit; color: var(--bb-text); background: var(--bb-surface);
                        border: 1px solid var(--bb-border); border-radius: 999px; cursor: pointer; }
.bb-portal-code__chip[aria-pressed="true"] { border-color: var(--bb-accent); box-shadow: inset 0 0 0 1px var(--bb-accent); font-weight: 600; }
.bb-portal-code__chip:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-portal-code__qr { width: min(280px, 80vw); min-width: 240px; height: auto; aspect-ratio: 1; animation: bb-portal-code-in 1s ease-out; }
.bb-portal-code__who { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bb-portal-code__hint { margin: 0; color: var(--bb-text-muted); }
@keyframes bb-portal-code-in { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bb-portal-code__qr { animation: none; } }

/* The kiosk's reconnect banner (Blazor sets the components-reconnect-* classes); hidden while connected. */
.bb-kiosk-reconnect { display: none; position: fixed; inset: 0 0 auto 0; z-index: 1100; padding: 14px 16px; text-align: center; font-weight: 600;
                      color: var(--bb-text); background: var(--bb-warn-bg); border-bottom: 2px solid var(--bb-warn); }
.bb-kiosk-reconnect.components-reconnect-show,
.bb-kiosk-reconnect.components-reconnect-failed,
.bb-kiosk-reconnect.components-reconnect-rejected { display: block; }

/* The door code (Check-in Kiosk, mock-up approved 2026-10-13): the code is the hero, the member phone reads it. Entry cards (card or tag, find
   your name) sit beside it, confirmations rise in the side column, "Just checked in" is a third column where the screen is wide. A kiosk never scrolls. */
.bb-kiosk-grid--door { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.bb-kiosk-hero { display: grid; justify-items: center; align-content: center; gap: 16px; padding: 24px; text-align: center;
                 background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); }
.bb-kiosk-hero__title { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.15; }
.bb-kiosk-hero--off { min-height: 240px; }
.bb-kiosk-qr { width: min(100%, 22rem); aspect-ratio: 1; padding: 12px; background: var(--bb-surface-raised, var(--bb-surface)); border: 2px solid var(--bb-accent); border-radius: var(--bb-radius-lg); }
.bb-kiosk-qr svg { width: 100%; height: 100%; display: block; }
.bb-kiosk-count { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--bb-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The countdown is drawn by the browser from the moment this code was drawn (the code's element is keyed, so a new code restarts it): no server round trip per second. */
@property --bb-kiosk-n { syntax: "<integer>"; inherits: false; initial-value: 30; }
@property --bb-kiosk-deg { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.bb-kiosk-count__n::after { counter-reset: bbleft var(--bb-kiosk-n); content: counter(bbleft); }
.bb-kiosk-count::before { content: ""; width: 28px; height: 28px; border-radius: 50%;
                          background: conic-gradient(var(--bb-accent) var(--bb-kiosk-deg), var(--bb-border) 0);
                          -webkit-mask: radial-gradient(circle 9px, transparent 98%, #000 100%); mask: radial-gradient(circle 9px, transparent 98%, #000 100%); }
.bb-kiosk-count, .bb-kiosk-count::before { animation: bb-kiosk-countdown 30s linear forwards; }
@keyframes bb-kiosk-countdown { from { --bb-kiosk-n: 30; --bb-kiosk-deg: 360deg; } to { --bb-kiosk-n: 0; --bb-kiosk-deg: 0deg; } }
.bb-kiosk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: bbstep; }
.bb-kiosk-steps li { counter-increment: bbstep; display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: start; border-radius: var(--bb-radius);
                     background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); line-height: 1.25; }
.bb-kiosk-steps li::before { content: counter(bbstep); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
                             background: var(--bb-accent); color: var(--bb-text-onbrand); font-weight: 600; }
.bb-kiosk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bb-kiosk-toasts { display: grid; gap: 10px; }
.bb-kiosk-toast { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bb-surface); border: 2px solid var(--bb-ok); border-radius: var(--bb-radius-lg);
                  font-size: var(--bb-fs-subtitle2); font-weight: 600; box-shadow: var(--bb-shell-shadow); }
.bb-kiosk-toast--warn { border-color: var(--bb-warn); }
.bb-kiosk-recent { display: none; min-width: 0; padding: 16px; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); }
.bb-kiosk-recent__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 1280px) {
    .bb-kiosk-grid--door { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(14rem, .6fr); }
    .bb-kiosk-recent { display: block; }
}
@media (max-width: 899.98px) {
    .bb-kiosk-grid--door { grid-template-columns: minmax(0, 1fr); }
}
/* No door code (card or tag and find-your-name only): entry beside "Just checked in" - the QR column is not there, so a third column would stay empty. */
.bb-kiosk-grid--nohero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.bb-kiosk-grid--nohero .bb-kiosk-recent { display: block; }
.bb-kiosk-label { display: block; margin-bottom: 6px; }
@media (max-width: 899.98px) {
    .bb-kiosk-grid--nohero { grid-template-columns: minmax(0, 1fr); }
}
.bb-kiosk--tablet.bb-kiosk-grid--nohero { grid-template-columns: minmax(0, 1fr); }
.bb-kiosk--tablet .bb-kiosk-recent { display: none; }

.bb-kiosk--desk .bb-kiosk-recent, .bb-kiosk--tv .bb-kiosk-recent { display: block; }
.bb-kiosk--tv.bb-kiosk-grid--door { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.bb-kiosk--tv .bb-kiosk-qr { width: min(100%, 30rem); }
/* While the circuit is disconnected the server cannot take the code down, and it expires in about two minutes: hide it with the reconnect UI.
   https://learn.microsoft.com/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-10.0#reflect-the-server-side-connection-state-in-the-ui */
body:has(#components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected)
    :is(.bb-kiosk-qr, .bb-kiosk-count, .bb-kiosk-steps) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .bb-kiosk-toast { animation: bb-kiosk-rise .25s ease-out; }
}
@keyframes bb-kiosk-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* The check-in moment (mock-up approved 2026-10-13): a full-screen stage on the brand slab in both themes. Gold corners frame the photo, a ring
   draws, a check stamps; the belt plate shows only where the member has a rank. Animation is gated on no-preference, so reduced motion shows the end state. */
.bb-kiosk-stage { position: fixed; inset: 0; z-index: 1000; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center;
                  background: var(--bb-brand-deep); color: var(--bb-text-onbrand); overflow-x: hidden; overflow-y: auto; }
.bb-kiosk-stage__photo { position: relative; width: min(26vh, 16rem); aspect-ratio: 1; }
.bb-kiosk-stage__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 4rem; font-weight: 600;
                       background: var(--bb-brand); color: var(--bb-text-onbrand); }
.bb-kiosk-stage__corner { position: absolute; width: 22%; height: 22%; border: 0 solid var(--bb-accent-bright); }
.bb-kiosk-stage__corner--tl { top: -8px; left: -8px; border-top-width: 5px; border-left-width: 5px; border-top-left-radius: 14px; }
.bb-kiosk-stage__corner--tr { top: -8px; right: -8px; border-top-width: 5px; border-right-width: 5px; border-top-right-radius: 14px; }
.bb-kiosk-stage__corner--bl { bottom: -8px; left: -8px; border-bottom-width: 5px; border-left-width: 5px; border-bottom-left-radius: 14px; }
.bb-kiosk-stage__corner--br { bottom: -8px; right: -8px; border-bottom-width: 5px; border-right-width: 5px; border-bottom-right-radius: 14px; }
.bb-kiosk-stage__ring { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); transform: rotate(-90deg); pointer-events: none; }
.bb-kiosk-stage__ring circle { fill: none; stroke: var(--bb-ok); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bb-kiosk-stage__stamp { position: absolute; right: -6%; bottom: -6%; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%;
                         background: var(--bb-ok); color: var(--bb-text-onbrand); font-size: var(--bb-fs-subtitle1); }
.bb-kiosk-stage__name { margin: 8px 0 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-title1); font-weight: 600; line-height: 1.08; overflow-wrap: anywhere; }
.bb-kiosk-stage__status { margin: 0; font-size: var(--bb-fs-subtitle1); }
.bb-kiosk-stage__plate { padding: 10px 22px; border-radius: var(--bb-radius-lg); background: var(--bb-surface); border: 2px solid var(--bb-accent-bright); }
.bb-kiosk-stage__plate img { display: block; height: 28px; width: auto; max-width: 70vw; }
.bb-kiosk-stage__line { margin: 0; color: var(--bb-accent-bright); font-size: var(--bb-fs-subtitle1); font-weight: 600; }
.bb-kiosk-stage__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 28rem; }
.bb-kiosk-stage__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bb-accent-bright); }
.bb-kiosk-stage__dot--on { background: var(--bb-accent-bright); }
.bb-kiosk-stage__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.bb-kiosk-stage__dot { flex: none; }
/* iPad landscape and short desk screens (about 690 px usable): tighter, so Done is always on screen. */
@media (max-height: 800px) {
    .bb-kiosk-stage { gap: 8px; padding: 14px; }
    .bb-kiosk-stage__status { font-size: var(--bb-fs-subtitle1); }
    .bb-kiosk-stage__dot { width: 10px; height: 10px; }
    .bb-kiosk-stage__dots { gap: 4px; }
}
.bb-kiosk-stage__drain { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--bb-accent-bright); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
    .bb-kiosk-stage__corner { animation: bb-kiosk-snap .45s cubic-bezier(.2, .8, .2, 1) both; }
    .bb-kiosk-stage__ring circle { animation: bb-kiosk-draw .7s .25s ease-out both; }
    .bb-kiosk-stage__stamp { animation: bb-kiosk-stamp .35s .85s cubic-bezier(.3, 1.6, .5, 1) both; }
    .bb-kiosk-stage__drain { animation: bb-kiosk-drain var(--bb-kiosk-secs, 6s) linear forwards; }
}
@keyframes bb-kiosk-snap { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bb-kiosk-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bb-kiosk-stamp { from { transform: scale(2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bb-kiosk-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ===== Member summary (BBCRM.App/Features/Members), the mock-up approved 2026-10-11 ===== */
/* Page bar, identity card with the money panel beside it (stacked under 1100px), the family strip, then the eleven tabs of
   Member Detail in one scrollable row. Desktop and iPad landscape only: under 1000px the advisory replaces the page
   (RecordDisplay.AdvisoryMedia). Layer-2 roles only; tones reuse the .bb-tile pairs. */
.bb-record { display: grid; gap: 16px; padding-bottom: 40px; color: var(--bb-text); }
.bb-record > *, .bb-record__top > *, .bb-record__id > * { min-width: 0; }
.bb-record [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-record__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bb-record__title { margin: 0 auto 0 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.2;
                    letter-spacing: -.01em; color: var(--bb-text); }
.bb-record__empty { max-width: 60ch; }
.bb-record__empty .bb-card__title { margin-bottom: 8px; }
.bb-record__bad { color: var(--bb-text-danger); }

.bb-record__top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.bb-record__top--solo { grid-template-columns: minmax(0, 1fr); }

/* Identity */
.bb-record__id { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 22px; padding: 22px; }
.bb-record__who { display: grid; justify-items: center; gap: 10px; align-content: start; }
.bb-record__face { display: grid; place-items: center; width: 112px; height: 112px; overflow: hidden; border-radius: 22px; background: var(--bb-surface-sunken);
                   color: var(--bb-text); text-decoration: none; font-family: var(--bb-font-display); font-size: 2.2rem; font-weight: 600; }
.bb-record__face img { width: 100%; height: 100%; object-fit: cover; }
.bb-record__belt { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 10px 8px 8px; border-radius: 12px;
                   background: var(--bb-surface-sunken); text-align: center; }
.bb-record__belt img { width: 118px; height: auto; }
.bb-record__belt b { font-family: var(--bb-font-display); font-size: var(--bb-fs-body); font-weight: 600; overflow-wrap: anywhere; }
.bb-record__belt span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-record__head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bb-record__name { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1.15;
                   letter-spacing: -.015em; color: var(--bb-text); overflow-wrap: anywhere; }
.bb-record__sub { margin-top: 4px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-record__contact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.bb-record__contact a { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; overflow: hidden; white-space: nowrap;
                        text-overflow: ellipsis; color: var(--bb-text); font-weight: 600; text-decoration: none; }
.bb-record__contact a:hover, .bb-record__contact a:focus-visible { color: var(--bb-accent); }
.bb-record__contact [class*="bb-ico-"] { display: inline-flex; flex: none; color: var(--bb-text-muted); }
.bb-record__statustxt { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px;
                        border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: var(--bb-fs-body); font-weight: 600; white-space: nowrap; }
.bb-record__statustxt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bb-record__status { margin-left: auto; }
:is(.bb-record__status, .bb-record__statustxt).is-ok { color: var(--bb-text-success); background: var(--bb-success-bg);
                           border-color: color-mix(in srgb, var(--bb-text-success) 40%, transparent); }
:is(.bb-record__status, .bb-record__statustxt).is-warn { color: var(--bb-warn); background: var(--bb-warn-bg); border-color: color-mix(in srgb, var(--bb-warn) 40%, transparent); }
:is(.bb-record__status, .bb-record__statustxt).is-bad { color: var(--bb-text-danger); background: var(--bb-danger-bg);
                            border-color: color-mix(in srgb, var(--bb-text-danger) 40%, transparent); }
.bb-record__facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 18px 56px; margin-top: 18px; }
.bb-record__facts h3 { margin: 0 0 6px; font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-muted); }
.bb-record__facts dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: var(--bb-fs-body); }
.bb-record__facts dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-record__facts dd { margin: 0; white-space: nowrap; }
.bb-record__quiet { color: var(--bb-text-muted); font-weight: 400; }
.bb-record__needs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; padding-top: 16px;
                    border-top: 1px solid var(--bb-border-subtle); }
.bb-record__chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--bb-border); border-radius: 12px;
                   background: var(--bb-surface-raised); color: var(--bb-text); font: inherit; font-size: var(--bb-fs-body); font-weight: 600; text-align: start; }
.bb-record__chipbody { display: inline-flex; align-items: center; gap: 10px; text-align: start; }
:is(.bb-record__chip, .bb-record__chipbody) .bb-tile { width: 30px; height: 30px; border-radius: 8px; }
:is(.bb-record__chip, .bb-record__chipbody) .bb-tile [class*="bb-ico-"]::before { width: 17px; height: 17px; }
.bb-record__chip-act { margin-left: 4px; color: var(--bb-accent); font-weight: 600; }

/* Money panel */
.bb-record__money { display: grid; gap: 14px; padding: 20px; }
.bb-record__money h3 { margin: 0; font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text-muted); }
.bb-record__owed { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; line-height: 1; letter-spacing: -.02em;
                   font-variant-numeric: tabular-nums; }
.bb-record__owed small { display: block; margin-top: 6px; font-family: var(--bb-font); font-size: var(--bb-fs-body); font-weight: 600;
                         letter-spacing: 0; color: var(--bb-text-success); }
.bb-record__owed.is-bad, .bb-record__owed.is-bad small { color: var(--bb-text-danger); }
.bb-record__mrows { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--bb-border-subtle); font-size: var(--bb-fs-body); }
.bb-record__mrow { display: flex; justify-content: space-between; gap: 12px; }
.bb-record__mrow > span:first-child { color: var(--bb-text-muted); }
.bb-record__mrow > b { font-weight: 600; text-align: right; }
.bb-record__mbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-record__mbtns > .bb-record__btn { width: 100%; }
.bb-record__mbtns > .bb-record__btn--wide { grid-column: 1 / -1; }
.bb-record__note { margin: 0; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
@media (max-width: 1100px) {
    .bb-record__top { grid-template-columns: minmax(0, 1fr); }
    .bb-record__money { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 24px; }
    .bb-record__money > .bb-record__mbtns { grid-column: 2; grid-row: 1 / span 3; }
}

/* Family strip */
.bb-record__fam { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding: 14px 20px; }
.bb-record__fam > .bb-tile { margin-right: -10px; }
.bb-record__k { display: block; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-record__v { font-weight: 600; white-space: nowrap; }
.bb-record__sibs { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.bb-record__sib { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--bb-border);
                  border-radius: 999px; background: var(--bb-surface-raised); color: var(--bb-text); font: inherit; font-size: var(--bb-fs-body); }
.bb-record__sibbody { display: inline-flex; align-items: center; gap: 6px; }
.bb-record__sib[aria-current="true"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-record__ini { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bb-surface-sunken);
                  font-family: var(--bb-font-display); font-size: var(--bb-fs-caption); font-weight: 600; }

/* Tabs: Member Detail's eleven in one row; a classic tab is a link marked with a quiet arrow. */
.bb-record__tab-n { margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--bb-warn-bg); color: var(--bb-warn);
                    font-size: var(--bb-fs-caption); text-align: center; }
.bb-record__pane { margin-top: 16px; display: grid; gap: 16px; }
.bb-record__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.bb-record__panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-record__panels--1 { grid-template-columns: minmax(0, 1fr); }
.bb-record__panel { padding: 18px; }
.bb-record__panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.bb-record__panel-h h3 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); }
.bb-record__alert { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.bb-record__alert + .bb-record__alert { border-top: 1px solid var(--bb-border-subtle); }
.bb-record__alert p { margin: 0; font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-record__alert small { display: block; color: var(--bb-text-muted); }
.bb-record__kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: var(--bb-fs-body); }
.bb-record__kv dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-record__kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bb-record__alert + .bb-record__kv, .bb-record__kv + .bb-record__kv { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bb-border-subtle); }
.bb-record__late { color: var(--bb-text-danger); }
.bb-record__notes { margin: 12px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--bb-fs-body); }
.bb-record__prog { margin-top: 14px; }
.bb-record__prog-lbl { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-record__bar-o { height: 8px; border-radius: 99px; background: var(--bb-surface-sunken); overflow: hidden; }
.bb-record__bar-i { height: 100%; border-radius: 99px; background: var(--bb-accent); }
.bb-record__spark { margin-top: 14px; }
.bb-record__spark p { margin: 4px 0 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-record__classic { margin: 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-record__classic a { color: var(--bb-accent); font-weight: 600; }
.bb-record__people { list-style: none; margin: 0; padding: 0; display: grid; }
/* Each row is a one-cell grid, so the person's DxButton fills the row without a width class on the button. */
.bb-record__people > li { display: grid; }
.bb-record__person, .bb-record__personbody { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; text-align: start; }
.bb-record__person { padding: 8px; border-radius: var(--bb-radius); color: var(--bb-text); font: inherit; }
.bb-record__person[aria-current="true"] { background: var(--bb-accent-soft); }
:is(.bb-record__person, .bb-record__personbody) .bb-record__ini { width: 36px; height: 36px; font-size: var(--bb-fs-caption); }
.bb-record__person-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* The advisory that replaces the page on a phone or an iPad held upright. */
.bb-record-advisory { display: none; }
@media (max-width: 999.98px) {
    .bb-record { display: none; }
    .bb-record-advisory { display: grid; place-items: center; min-height: 60vh; padding: 24px; text-align: center; color: var(--bb-text); }
    .bb-record-advisory > div { display: grid; justify-items: center; gap: 10px; max-width: 340px; }
    .bb-record-advisory h1 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); font-weight: 600; }
    .bb-record-advisory p { margin: 0; color: var(--bb-text-muted); }
    .bb-record-advisory [class*="bb-ico-"]::before { margin-inline-end: 0; }
}

/* Record dialogs: a tinted tile and a plain title in the header, option cards that state their consequence, the primary
   button named for the action. Used inside DxPopup templates (rendered at the end of body, so never under .bb-record). */
.bb-dlg-head [class*="bb-ico-"]::before, .bb-dlg-body [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-dlg-head { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 10px 2px; }
.bb-dlg-head h2 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); line-height: 1.3; font-weight: 600; color: var(--bb-text); }
.bb-dlg-head p { margin: 6px 0 0; font-size: var(--bb-fs-body); line-height: 1.43; color: var(--bb-text-muted); }
/* Body and footer sit on the header's own 24px inset, so the title, the content and the buttons share one left and right edge. */
.bb-dlg-body { display: grid; gap: 14px; padding: 6px 24px; line-height: 1.43; color: var(--bb-text); }
.bb-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; width: 100%; padding: 14px 24px 10px; }
.bb-dlg-foot > .bb-dlg-btn { min-width: 150px; }
.bb-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center;
          padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: 12px; cursor: pointer; }
.bb-opt > input { position: absolute; opacity: 0; pointer-events: none; }
.bb-opt > .bb-tile { grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 9px; }
.bb-opt > .bb-tile [class*="bb-ico-"]::before { width: 19px; height: 19px; }
.bb-opt > b { grid-column: 2; font-weight: 600; }
.bb-opt > .bb-opt__says { grid-column: 2; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-opt.is-current, .bb-opt.is-off { opacity: .6; cursor: default; }
.bb-opt:has(input:checked) { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-opt:focus-within { box-shadow: var(--bb-focus-ring); }
/* Option card around a DxRadio / DxCheckBox: the card is ours, the control inside is DevExpress's own. */
.bb-dxopt { position: relative; display: block; padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface-raised); }
.bb-dxopt:has(input:checked) { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
/* The control's own label reaches across the whole card, so the card is the click target. */
.bb-dxopt label::after { content: ""; position: absolute; inset: 0; }
.bb-dxopt:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-dxopt.is-current, .bb-dxopt.is-off { opacity: .6; }
.bb-dxopt__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.bb-dxopt__body > .bb-tile { grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 9px; }
.bb-dxopt__body > b, .bb-dxopt__body > .bb-opt__says { grid-column: 2; }
.bb-dxopt__body > b { font-weight: 600; color: var(--bb-text); }
.bb-dxopt__body > .bb-opt__says { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-dxopt__body--plain { grid-template-columns: minmax(0, 1fr); }
.bb-dxopt__body--plain > b, .bb-dxopt__body--plain > .bb-opt__says { grid-column: 1; }
.bb-opt-more { display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--bb-surface-sunken); }
.bb-opt-more__lbl { margin: 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-seg > label { position: relative; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px;
                  background: var(--bb-surface-raised); font-size: var(--bb-fs-body); color: var(--bb-text-muted); cursor: pointer; }
.bb-seg > label > b { font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-seg > label > input { position: absolute; opacity: 0; pointer-events: none; }
.bb-seg > label:has(input:checked) { border-color: var(--bb-accent); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-seg > label:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-effect { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bb-info-bg);
             color: var(--bb-text); font-size: var(--bb-fs-body); }
.bb-effect > [class*="bb-ico-"] { display: inline-flex; flex: none; margin-top: 2px; color: var(--bb-info); }
.bb-effect--warn { background: var(--bb-warn-bg); }
.bb-effect--warn > [class*="bb-ico-"] { color: var(--bb-warn); }
.bb-dlg-preview { padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface-sunken); }
.bb-dlg-preview__subj { font-weight: 600; }
.bb-dlg-preview__body { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
    .bb-opt, .bb-seg > label { transition: background-color .12s ease, border-color .12s ease; }
}

/* Duotone icons the member summary adds (Images/Icons/fa-duo-*, FA Pro 7.2 Sharp Duotone Regular). */
.bb-ico-envelope::before { -webkit-mask-image: url("icons/fa-duo-envelope.svg"); mask-image: url("icons/fa-duo-envelope.svg"); }
.bb-ico-phone::before { -webkit-mask-image: url("icons/fa-duo-phone.svg"); mask-image: url("icons/fa-duo-phone.svg"); }
.bb-ico-bolt::before { -webkit-mask-image: url("icons/fa-duo-bolt.svg"); mask-image: url("icons/fa-duo-bolt.svg"); }
.bb-ico-store::before { -webkit-mask-image: url("icons/fa-duo-store.svg"); mask-image: url("icons/fa-duo-store.svg"); }
.bb-ico-comment-sms::before { -webkit-mask-image: url("icons/fa-duo-comment-sms.svg"); mask-image: url("icons/fa-duo-comment-sms.svg"); }
.bb-ico-id-card::before { -webkit-mask-image: url("icons/fa-duo-id-card.svg"); mask-image: url("icons/fa-duo-id-card.svg"); }
.bb-ico-pause::before { -webkit-mask-image: url("icons/fa-duo-pause.svg"); mask-image: url("icons/fa-duo-pause.svg"); }
.bb-ico-ban::before { -webkit-mask-image: url("icons/fa-duo-ban.svg"); mask-image: url("icons/fa-duo-ban.svg"); }
.bb-ico-calendar-check::before { -webkit-mask-image: url("icons/fa-duo-calendar-check.svg"); mask-image: url("icons/fa-duo-calendar-check.svg"); }
.bb-ico-walking-out::before { -webkit-mask-image: url("icons/fa-duo-person-walking-arrow-right.svg"); mask-image: url("icons/fa-duo-person-walking-arrow-right.svg"); }
.bb-ico-chart-line::before { -webkit-mask-image: url("icons/fa-duo-chart-line.svg"); mask-image: url("icons/fa-duo-chart-line.svg"); }
.bb-ico-history::before { -webkit-mask-image: url("icons/fa-duo-clock-rotate-left.svg"); mask-image: url("icons/fa-duo-clock-rotate-left.svg"); }
.bb-ico-note-sticky::before { -webkit-mask-image: url("icons/fa-duo-note-sticky.svg"); mask-image: url("icons/fa-duo-note-sticky.svg"); }

/* Activity: one list with a tile per kind, the note box above it and the filter chips between. */
.bb-tl__note { display: grid; gap: 6px; margin-bottom: 12px; }
.bb-tl__note-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--bb-fs-body); }
.bb-tl { list-style: none; margin: 0; padding: 0; }
.bb-tl__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--bb-border); }
.bb-tl__row:first-child { border-top: 0; }
.bb-tl__row.has-belt { grid-template-columns: 72px minmax(0, 1fr); align-items: center; }
.bb-tl__row.has-belt .bb-disc-belt { width: 72px; }
.bb-tl__l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bb-tl__title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bb-tl__amt { flex: none; font-variant-numeric: tabular-nums; }
.bb-tl__text { margin-top: 2px; color: var(--bb-text); overflow-wrap: anywhere; max-width: 75ch; }
.bb-tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }

.bb-dlg-keep { display: grid; gap: 8px; margin: 0; padding: 14px; list-style: none; border-radius: 12px; background: var(--bb-surface-sunken); }
.bb-dlg-keep li { display: flex; align-items: center; gap: 10px; }
.bb-dlg-keep .bb-ico-check { color: var(--bb-text-success); }
.bb-dlg-price { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); font-weight: 600; }


/* ---- Calendar (BBCRM.App Features/Calendar, mock-up 2026-10-11 page 1) --------------------------------------------------
   Kinds read the existing tone roles: class = info, event = accent (gold), appointment = ok; cancelled is muted and struck.
   DxScheduler labels map BackgroundCssClass/TextCssClass to .bb-cal-lbl--*, never a Color (a mapped Color overrides the class). */
.bb-ico-print::before          { -webkit-mask-image: url("icons/fa-duo-print.svg");          mask-image: url("icons/fa-duo-print.svg"); }
.bb-ico-calendar-plus::before  { -webkit-mask-image: url("icons/fa-duo-calendar-plus.svg");  mask-image: url("icons/fa-duo-calendar-plus.svg"); }
.bb-ico-calendar-week::before  { -webkit-mask-image: url("icons/fa-duo-calendar-week.svg");  mask-image: url("icons/fa-duo-calendar-week.svg"); }
.bb-ico-calendar-xmark::before { -webkit-mask-image: url("icons/fa-duo-calendar-xmark.svg"); mask-image: url("icons/fa-duo-calendar-xmark.svg"); }
.bb-ico-handshake::before      { -webkit-mask-image: url("icons/fa-duo-handshake.svg");      mask-image: url("icons/fa-duo-handshake.svg"); }
.bb-ico-repeat::before         { -webkit-mask-image: url("icons/fa-duo-repeat.svg");         mask-image: url("icons/fa-duo-repeat.svg"); }
.bb-ico-trophy::before         { -webkit-mask-image: url("icons/fa-duo-trophy.svg");         mask-image: url("icons/fa-duo-trophy.svg"); }
.bb-ico-umbrella-beach::before { -webkit-mask-image: url("icons/fa-duo-umbrella-beach.svg"); mask-image: url("icons/fa-duo-umbrella-beach.svg"); }
.bb-ico-people-arrows::before  { -webkit-mask-image: url("icons/fa-duo-people-arrows.svg");  mask-image: url("icons/fa-duo-people-arrows.svg"); }

.bb-cal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bb-cal-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-cal-titlebar__acts { display: flex; align-items: center; gap: 8px; }
.bb-cal-iconbtn [class*="bb-ico-"]::before { margin-inline-end: 0; }

.bb-cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-cal-bar__range { display: flex; align-items: center; gap: 6px; }
.bb-cal-bar__text { margin: 0 8px; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); color: var(--bb-text); white-space: nowrap; }
.bb-cal-iconbtn { min-width: 34px; }

.bb-cal-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-cal-filter { flex: 0 0 15rem; min-width: 0; }

.bb-cal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.bb-cal-main { display: grid; gap: 12px; min-width: 0; }
.bb-cal-side { display: grid; gap: 12px; }
@media (max-width: 1279.98px) { .bb-cal-grid { grid-template-columns: minmax(0, 1fr) 240px; } }
@media (max-width: 1023.98px) { .bb-cal-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) and (max-width: 1023.98px) { .bb-cal-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb-cal-side > .bb-cal-panel { grid-column: 1 / -1; } }
/* Week date header: number and day name side by side, stacked when the week is narrow. */
.bb-cal-sched { container-type: inline-size; }
.bb-cal-dh { display: flex; align-items: baseline; gap: 4px; }
.bb-cal-dh__n { font-size: var(--bb-fs-subtitle1); font-weight: 600; }
@container (max-width: 640px) { .bb-cal-dh { flex-direction: column; align-items: flex-start; gap: 0; } }

.bb-cal-sched { border: 1px solid var(--bb-border-subtle); border-radius: var(--bb-radius-lg); overflow: hidden; background: var(--bb-surface); }
/* DxScheduler reads these documented variables; their defaults are Bootstrap's light/white/gray-900, which stay light in dark
   mode, so the off-hours cells would glare. Repointed to roles, they follow the bbcrm-theme cookie in both themes. */
.bb-cal-dx {
    height: clamp(520px, calc(100vh - 290px), 900px);
    --dxbl-scheduler-background-color: var(--bb-surface);
    --dxbl-scheduler-white-color: var(--bb-surface);
    --dxbl-scheduler-light-color: var(--bb-surface-sunken);
    --dxbl-scheduler-light-gray-color: var(--bb-surface-sunken);
    --dxbl-scheduler-disabled-color: var(--bb-surface-sunken);
    --dxbl-scheduler-cell-text-color: var(--bb-text);
    --dxbl-scheduler-border-color: var(--bb-border-subtle);
    --dxbl-scheduler-cell-hover-color: var(--bb-accent-soft);
    --dxbl-scheduler-cell-active-color: var(--bb-info-bg);
    --dxbl-scheduler-cell-hover-disabled-color: var(--bb-surface-sunken);
    --dxbl-scheduler-cell-active-disabled-color: var(--bb-surface-sunken);
}

.bb-cal-empty { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--bb-radius-lg);
    background: var(--bb-info-bg); color: var(--bb-text); }
.bb-cal-empty h2 { margin: 0 0 6px; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); }
.bb-cal-empty p { margin: 0 0 12px; max-width: 60ch; color: var(--bb-text-muted); }

/* Appointment blocks: our template fills the block; the label classes colour what DX draws around it. */
.bb-cal-lbl--class { background-color: var(--bb-info-bg); }
.bb-cal-lbl--event { background-color: var(--bb-accent-soft); }
.bb-cal-lbl--appt  { background-color: var(--bb-ok-bg); }
.bb-cal-lbl--off   { background-color: var(--bb-surface-sunken); }
.bb-cal-lbl__text  { color: var(--bb-text); }
.bb-cal-appt { display: flex; flex-direction: column; gap: 1px; height: 100%; min-height: 100%; padding: 3px 6px 3px 8px; overflow: hidden;
    border-left: 3px solid var(--bb-info); color: var(--bb-text); font-size: var(--bb-fs-caption); line-height: 1.25; }
.bb-cal-appt--class { border-left-color: var(--bb-info); background: var(--bb-info-bg); }
.bb-cal-appt--event { border-left-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-cal-appt--appt  { border-left-color: var(--bb-ok); background: var(--bb-ok-bg); }
.bb-cal-appt.is-off { border-left-color: var(--bb-border-strong); background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
.bb-cal-appt.is-off .bb-cal-appt__title { text-decoration: line-through; }
.bb-cal-appt__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cal-appt__meta { color: var(--bb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cal-appt__num { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 999px; font-size: var(--bb-fs-caption); font-weight: 600;
    background: var(--bb-surface); color: var(--bb-text); }

/* Closed days: HtmlCellDecoration puts this class on the time cells a closure covers. */
.bb-cal-closed { background-image: repeating-linear-gradient(135deg, var(--bb-danger-bg) 0 6px, transparent 6px 12px); }

.bb-cal-h2 { margin: 0 0 10px; font-family: var(--bb-font-display); font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.bb-cal-h2 .bb-quiet { font-family: var(--bb-font); font-size: var(--bb-fs-body); font-weight: 600; }
.bb-cal-h3 { margin: 16px 0 8px; font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); }

.bb-cal-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bb-cal-agenda__time { font-variant-numeric: tabular-nums; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-cal-agenda__what { min-width: 0; font-size: var(--bb-fs-body); }
.bb-cal-agenda__what b { font-weight: 600; }
.bb-cal-agenda__what small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cal-agenda__num { font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-muted); font-variant-numeric: tabular-nums; }

.bb-cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--bb-info); flex: none; }
.bb-cal-dot--event { background: var(--bb-accent); }
.bb-cal-dot--appt  { background: var(--bb-ok); }
.bb-cal-dot--off   { background: var(--bb-border-strong); }
.bb-cal-swatch { display: inline-block; width: 22px; height: 12px; border-radius: 3px; border: 1px solid var(--bb-border); flex: none; }
.bb-cal-legend ul, .bb-cal-closures { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-cal-legend li, .bb-cal-closures li { display: flex; align-items: center; gap: 8px; }
.bb-cal-closures { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bb-border-subtle); }
.bb-cal-closures li { justify-content: space-between; }
.bb-cal-nowrap { white-space: nowrap; flex: none; }

.bb-cal-panel__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 12px; }
.bb-cal-panel__head h2 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); font-weight: 600; color: var(--bb-text); }
.bb-cal-panel__head p { margin: 4px 0 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-cal-panel__head [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-cal-panel__acts { margin-top: 16px; display: flex; gap: 8px; }
.bb-cal-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--bb-fs-body); }
.bb-cal-facts dt { color: var(--bb-text-muted); font-weight: 600; }
.bb-cal-facts dd { margin: 0; color: var(--bb-text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bb-cal-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--bb-fs-body); }
.bb-cal-roster li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 4px 0;
    border-bottom: 1px solid var(--bb-border-subtle); }
.bb-cal-add { margin-top: 10px; display: grid; gap: 6px; }
.bb-cal-hits { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; border: 1px solid var(--bb-border-subtle);
    border-radius: var(--bb-radius); background: var(--bb-surface-raised); max-height: 220px; overflow-y: auto; }
.bb-cal-hits small { color: var(--bb-text-muted); margin-left: 6px; }

/* Last 12 weeks: bar heights in eleven steps from data-h, so the markup carries no size or colour. */
.bb-cal-hist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px;
    align-items: end; height: 72px; }
.bb-cal-hist li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.bb-cal-hist small { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); font-variant-numeric: tabular-nums; }
.bb-cal-hist__bar { width: 100%; height: 2px; border-radius: 3px 3px 0 0; background: var(--bb-info); }
.bb-cal-hist__bar[data-h="1"] { height: 10%; } .bb-cal-hist__bar[data-h="2"] { height: 18%; } .bb-cal-hist__bar[data-h="3"] { height: 26%; }
.bb-cal-hist__bar[data-h="4"] { height: 34%; } .bb-cal-hist__bar[data-h="5"] { height: 42%; } .bb-cal-hist__bar[data-h="6"] { height: 50%; }
.bb-cal-hist__bar[data-h="7"] { height: 58%; } .bb-cal-hist__bar[data-h="8"] { height: 64%; } .bb-cal-hist__bar[data-h="9"] { height: 70%; }
.bb-cal-hist__bar[data-h="10"] { height: 76%; }

/* Dialog fields (inside .bb-dlg-body). */
.bb-cal-form { display: grid; gap: 14px; padding: 4px 12px 8px; }
.bb-cal-form .bb-field { display: grid; gap: 4px; margin: 0; }
.bb-cal-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 699.98px) { .bb-cal-row3 { grid-template-columns: minmax(0, 1fr); } }
.bb-cal-step { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bb-text); }
.bb-cal-step i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--bb-info-bg); color: var(--bb-info); font-size: var(--bb-fs-caption); }
.bb-cal-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px;
    border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); }
.bb-cal-who small { display: block; color: var(--bb-text-muted); }
.bb-cal-who [class*="bb-ico-"]::before { margin-inline-end: 0; }


/* Calendar page links (mock-up subnav) and Classes and events setup (page 4). */
.bb-cal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; margin-left: 16px; }
.bb-cal-nav__a [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-cal-tabs { margin-bottom: 4px; }
.bb-cal-setup { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 12px; }
.bb-cal-setup--stack { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1199.98px) { .bb-cal-setup { grid-template-columns: minmax(0, 1fr); } }
.bb-cal-setup .bb-cal-h2 .ms-auto { margin-left: auto; }
.bb-cal-week { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 10px; overflow-x: auto; }
.bb-cal-week__row { display: grid; grid-template-columns: minmax(160px, 2.4fr) repeat(7, minmax(88px, 1fr)) minmax(88px, .7fr) minmax(124px, 1fr) 44px; gap: 4px; align-items: center;
    min-width: 0; }
.bb-cal-week__row > [role="cell"], .bb-cal-week__row > [role="columnheader"] { min-width: 0; }
.bb-cal-week__dow { display: none; }
.bb-cal-week__time { width: 100%; min-width: 0; }
.bb-cal-week__time input { padding-inline: 4px; }
.bb-cal-week__copy { width: 100%; min-width: 0; white-space: nowrap; }
.bb-cal-week__row--head { font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-muted); }
.bb-cal-week__save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0; }
.bb-cal-week__save .bb-field { display: grid; gap: 4px; margin: 0; width: 220px; }
.bb-cal-week__item { display: grid; gap: 4px; min-width: 0; }
.bb-cal-week__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bb-cal-week__nameedit { flex: 1 1 auto; min-width: 0; }
.bb-cal-week__ask { display: grid; gap: 8px; padding: 8px 12px; border: 1px solid var(--bb-border); border-left: 3px solid var(--bb-accent); border-radius: var(--bb-radius); font-size: var(--bb-fs-body); }
.bb-cal-week__ask > div { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-cal-week__add { display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: 8px; }
@media (max-width: 767.98px) { .bb-cal-week__add { grid-template-columns: minmax(0, 1fr); } }
/* Time columns stay 88px so "10:00 p. m." is never cut; as the week narrows Length and Copy drop under the class, then the class takes its own line. */
.bb-cal-week { container-type: inline-size; }
@container (max-width: 1089px) {
    .bb-cal-week__row { grid-template-columns: minmax(160px, 2.4fr) repeat(7, minmax(88px, 1fr)) 44px; }
    .bb-cal-week__row > :nth-child(9) { grid-row: 2; grid-column: 1; }
    .bb-cal-week__row > :nth-child(10) { grid-row: 2; grid-column: 2 / span 3; }
    .bb-cal-week__row > :nth-child(11) { grid-row: 1; grid-column: 9; }
    .bb-cal-week__row--head > :nth-child(9), .bb-cal-week__row--head > :nth-child(10) { display: none; }
}
@container (max-width: 859px) {
    .bb-cal-week__row { grid-template-columns: repeat(7, minmax(0, 1fr)) 44px; }
    .bb-cal-week__row > :nth-child(1) { grid-row: 1; grid-column: 1 / span 3; }
    .bb-cal-week__row > :nth-child(n+2):nth-child(-n+8) { grid-row: 2; grid-column: auto; }
    .bb-cal-week__row > :nth-child(9) { grid-row: 1; grid-column: 4 / span 2; }
    .bb-cal-week__row > :nth-child(10) { grid-row: 1; grid-column: 6 / span 2; }
    .bb-cal-week__row > :nth-child(11) { grid-row: 1; grid-column: 8; }
    .bb-cal-week__row--head { display: none; }
    .bb-cal-week__dow { display: block; font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-muted); }
}
/* Guided class setup (Calendar > Classes and events, no weekly schedule yet) */
.bb-gs { padding: 20px 24px; display: grid; gap: 22px; }
.bb-gs__intro { display: flex; gap: 14px; align-items: flex-start; }
.bb-gs__intro h2 { font-size: var(--bb-fs-subtitle2); margin: 0 0 4px; }
.bb-gs__intro p { margin: 0 0 4px; color: var(--bb-text-muted); max-width: 70ch; }
.bb-gs__part { display: grid; gap: 10px; }
.bb-gs__part h3 { font-size: var(--bb-fs-body); margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.bb-gs__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bb-accent-soft); color: var(--bb-text); font-size: var(--bb-fs-body); font-weight: 600; flex: none; }
.bb-gs__sub { color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 400; }
.bb-gs__hint { color: var(--bb-text-muted); font-size: var(--bb-fs-body); margin: 0; }
.bb-gs__hours { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.bb-gs__hours .bb-field { display: grid; gap: 4px; margin: 0; width: 140px; }
.bb-gs__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bb-gs__day { border: 1px solid var(--bb-border); border-radius: 6px; min-height: 120px; padding: 6px; display: grid; align-content: start; gap: 4px; background: var(--bb-surface); }
.bb-gs__day b { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); font-weight: 600; }
.bb-gs__day.is-closed { background: repeating-linear-gradient(135deg, var(--bb-surface), var(--bb-surface) 6px, var(--bb-border) 6px, var(--bb-border) 7px); }
.bb-gs__blk { border-left: 3px solid var(--bb-accent); background: var(--bb-accent-soft); border-radius: 3px; padding: 3px 6px; font-size: var(--bb-fs-caption); line-height: 1.25; overflow-wrap: anywhere; }
.bb-gs__blk.is-out { border-left-color: var(--bb-warn); }
.bb-gs__blk span { display: block; color: var(--bb-text-muted); }
.bb-gs__save { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--bb-border); }
.bb-gs__save .bb-field { display: grid; gap: 4px; margin: 0; width: 220px; }
.bb-gs__done { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--bb-border); border-radius: 8px; }
.bb-gs__done h3 { font-size: var(--bb-fs-body); margin: 0 0 4px; }
.bb-gs__done p { margin: 0 0 10px; color: var(--bb-text-muted); }
.bb-gs__acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .bb-gs__week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bb-cal-plan { margin: 0 0 6px; padding-left: 18px; }
.bb-cal-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--bb-link); text-align: left; cursor: pointer; }
.bb-cal-linkbtn:hover { text-decoration: underline; }
.bb-cal-linkbtn:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); border-radius: 2px; }

/* Appointments (mock-up page 3): free times per person, the day's appointments, types and weekly hours. */
.bb-cal-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bb-cal-board__col { display: grid; align-content: start; gap: 6px; padding-right: 12px; border-right: 1px solid var(--bb-border-subtle); }
.bb-cal-board__col:last-child { border-right: 0; }
.bb-cal-board .bb-cal-slot { min-width: 84px; border-style: dashed; border-color: var(--bb-ok); }
.bb-cal-appt-row { grid-template-columns: minmax(0, 1fr) auto; }
.bb-cal-outcome { grid-column: 1 / -1; display: flex; gap: 6px; }
.bb-cal-window { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; margin-right: 6px; }
.bb-cal-span2 { grid-column: span 2; }
@media (max-width: 699.98px) { .bb-cal-span2 { grid-column: auto; } }
/* My calendar (mock-up page 2): the day, taking attendance from the class, the week, substitutes, hours and time off. */
.bb-cal-h2 .bb-tile { align-self: center; flex: none; }
.bb-cal-side > .bb-card > .bb-cal-h2 { flex-wrap: nowrap; align-items: center; }
.bb-cal-h2 .ms-auto, .bb-cal-h2__note { margin-left: auto; }
.bb-cal-take { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px; }
.bb-cal-take__who { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; border-radius: var(--bb-radius);
    border: 1px solid var(--bb-border-subtle); font-size: var(--bb-fs-body); }
.bb-cal-take__who .bb-pill { margin-left: auto; }
.bb-cal-take__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: var(--bb-fs-body); }
.bb-cal-wkmini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bb-cal-wkmini__day { display: grid; align-content: start; gap: 4px; min-height: 84px; padding: 8px; border-radius: var(--bb-radius);
    background: var(--bb-surface-sunken); font-size: var(--bb-fs-caption); min-width: 0; }
.bb-cal-wkmini__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-cal-wkmini__day > b { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-cal-wkmini__item { display: block; width: 100%; padding: 3px 6px; border: 0; border-left: 3px solid var(--bb-info); border-radius: var(--bb-radius);
    background: var(--bb-surface); color: var(--bb-text); font: inherit; text-align: left; overflow-wrap: anywhere; }
.bb-cal-wkmini__item--appt { border-left-color: var(--bb-ok); }
.bb-cal-wkmini__off { color: var(--bb-text-muted); font-style: italic; overflow-wrap: anywhere; }
.bb-cal-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bb-cal-reqs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-cal-reqs li:last-child { border-bottom: 0; padding-bottom: 0; }
.bb-cal-reqs p { flex: 1 1 160px; margin: 0; font-size: var(--bb-fs-body); }
.bb-cal-reqs small { display: block; color: var(--bb-text-muted); }
.bb-cal-myhours { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 8px; margin: 0 0 8px; font-size: var(--bb-fs-body); }
.bb-cal-myhours dt { font-weight: 600; color: var(--bb-text-muted); }
.bb-cal-myhours dd { margin: 0; }
/* Calendar simplicity pass: More options blocks, naming a first class inline, Save asking only when people are booked. */
.bb-cal-more { display: grid; gap: 12px; padding: 12px 0 0 12px; border-left: 2px solid var(--bb-border-subtle); }
.bb-cal-newclass { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bb-cal-newclass .bb-field { flex: 1 1 260px; margin: 0; }
.bb-cal-newclass__open { justify-self: start; margin-top: 4px; font-weight: 600; }
.bb-cal-confirm { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Calendar notices: who a change emails, the email on request, and the reminders switch. */
.bb-cal-notice { display: grid; gap: 4px; justify-items: start; }
.bb-cal-notice__mail { display: grid; gap: 6px; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: var(--bb-radius);
    border: 1px solid var(--bb-border-subtle); background: var(--bb-surface); }
.bb-cal-notice__text { white-space: pre-line; color: var(--bb-text); }
.bb-cal-remind { display: grid; gap: 4px; margin: 12px 0 0; }
/* ===== Member summary tabs (BBCRM.App/Features/Members, tabs mock-up approved 2026-10-11) ===== */
/* Each tab keeps its rules inside its own block below, so the five tabs never edit the same lines. Layer-2 roles only. */

/* Duotone icons the five tabs share (FA Pro 7.2 Sharp Duotone Regular, copied into icons/). */
.bb-ico-pen::before { -webkit-mask-image: url("icons/fa-duo-pen.svg"); mask-image: url("icons/fa-duo-pen.svg"); }
.bb-ico-trash-can::before { -webkit-mask-image: url("icons/fa-duo-trash-can.svg"); mask-image: url("icons/fa-duo-trash-can.svg"); }
.bb-ico-plus::before { -webkit-mask-image: url("icons/fa-duo-plus.svg"); mask-image: url("icons/fa-duo-plus.svg"); }
.bb-ico-ellipsis-vertical::before { -webkit-mask-image: url("icons/fa-duo-ellipsis-vertical.svg"); mask-image: url("icons/fa-duo-ellipsis-vertical.svg"); }
.bb-ico-file-pdf::before { -webkit-mask-image: url("icons/fa-duo-file-pdf.svg"); mask-image: url("icons/fa-duo-file-pdf.svg"); }
.bb-ico-signature::before { -webkit-mask-image: url("icons/fa-duo-signature.svg"); mask-image: url("icons/fa-duo-signature.svg"); }
.bb-ico-eye::before { -webkit-mask-image: url("icons/fa-duo-eye.svg"); mask-image: url("icons/fa-duo-eye.svg"); }
.bb-ico-paper-plane::before { -webkit-mask-image: url("icons/fa-duo-paper-plane.svg"); mask-image: url("icons/fa-duo-paper-plane.svg"); }
.bb-ico-rotate-right::before { -webkit-mask-image: url("icons/fa-duo-rotate-right.svg"); mask-image: url("icons/fa-duo-rotate-right.svg"); }
.bb-ico-rotate-left::before { -webkit-mask-image: url("icons/fa-duo-rotate-left.svg"); mask-image: url("icons/fa-duo-rotate-left.svg"); }
.bb-ico-calendar-days::before { -webkit-mask-image: url("icons/fa-duo-calendar-days.svg"); mask-image: url("icons/fa-duo-calendar-days.svg"); }
.bb-ico-building-columns::before { -webkit-mask-image: url("icons/fa-duo-building-columns.svg"); mask-image: url("icons/fa-duo-building-columns.svg"); }
.bb-ico-address-card::before { -webkit-mask-image: url("icons/fa-duo-address-card.svg"); mask-image: url("icons/fa-duo-address-card.svg"); }
.bb-ico-shield-heart::before { -webkit-mask-image: url("icons/fa-duo-shield-heart.svg"); mask-image: url("icons/fa-duo-shield-heart.svg"); }
.bb-ico-user-plus::before { -webkit-mask-image: url("icons/fa-duo-user-plus.svg"); mask-image: url("icons/fa-duo-user-plus.svg"); }
.bb-ico-graduation-cap::before { -webkit-mask-image: url("icons/fa-duo-graduation-cap.svg"); mask-image: url("icons/fa-duo-graduation-cap.svg"); }
.bb-ico-file-circle-plus::before { -webkit-mask-image: url("icons/fa-duo-file-circle-plus.svg"); mask-image: url("icons/fa-duo-file-circle-plus.svg"); }
.bb-ico-file-contract::before { -webkit-mask-image: url("icons/fa-duo-file-contract.svg"); mask-image: url("icons/fa-duo-file-contract.svg"); }
.bb-ico-star::before { -webkit-mask-image: url("icons/fa-duo-star.svg"); mask-image: url("icons/fa-duo-star.svg"); }
.bb-ico-snowflake::before { -webkit-mask-image: url("icons/fa-duo-snowflake.svg"); mask-image: url("icons/fa-duo-snowflake.svg"); }
.bb-ico-envelope-open-text::before { -webkit-mask-image: url("icons/fa-duo-envelope-open-text.svg"); mask-image: url("icons/fa-duo-envelope-open-text.svg"); }
.bb-ico-chalkboard-user::before { -webkit-mask-image: url("icons/fa-duo-chalkboard-user.svg"); mask-image: url("icons/fa-duo-chalkboard-user.svg"); }
.bb-ico-id-badge::before { -webkit-mask-image: url("icons/fa-duo-id-badge.svg"); mask-image: url("icons/fa-duo-id-badge.svg"); }
.bb-ico-user-shield::before { -webkit-mask-image: url("icons/fa-duo-user-shield.svg"); mask-image: url("icons/fa-duo-user-shield.svg"); }
.bb-ico-circle-info::before { -webkit-mask-image: url("icons/fa-duo-circle-info.svg"); mask-image: url("icons/fa-duo-circle-info.svg"); }
.bb-ico-arrow-up-right-from-square::before { -webkit-mask-image: url("icons/fa-duo-arrow-up-right-from-square.svg"); mask-image: url("icons/fa-duo-arrow-up-right-from-square.svg"); }
.bb-ico-layer-group::before { -webkit-mask-image: url("icons/fa-duo-layer-group.svg"); mask-image: url("icons/fa-duo-layer-group.svg"); }

/* ----- Tab: Disciplines ----- */
/* One card per discipline with its belt ladder (mock-up 2026-10-11): the ladder is the one bold element; everything else is quiet.
   Dialog pieces (bb-disc-*) render inside DxPopup at the end of body, so they never depend on .bb-disc. Layer-2 roles only. */
.bb-disc { margin-top: 16px; }
.bb-disc [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-disc__tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.bb-disc__card { display: grid; gap: 18px; padding: 20px 22px; }
.bb-disc__card.is-inactive { opacity: .72; }
.bb-disc__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.bb-disc__head h3 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); font-weight: 600; color: var(--bb-text); }
.bb-disc__head .bb-pill [class*="bb-ico-"]::before { width: 12px; height: 12px; }
.bb-disc__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.bb-disc__ladder { display: flex; align-items: stretch; gap: 4px; padding-top: 6px; isolation: isolate; min-width: 0; }
.bb-disc__ladder > * { flex: 1 1 0; min-width: 0; max-width: 118px; }
.bb-disc__rung { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 8px 2px 10px;
                 border-radius: 12px; text-align: center; }
.bb-disc__rung + .bb-disc__rung::before { content: ""; position: absolute; z-index: -1; top: 25px; right: 50%; width: 100%; height: 2px;
                                          background: var(--bb-border); }
.bb-disc__rung b { font-size: var(--bb-fs-caption); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.bb-disc__rung > span:not(.bb-disc-belt) { font-size: var(--bb-fs-caption); line-height: 1.2; color: var(--bb-text-muted); }
.bb-disc__rung.is-now { background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1.5px var(--bb-accent); }
.bb-disc__rung.is-now > span:not(.bb-disc-belt) { color: var(--bb-text); font-weight: 600; }
.bb-disc__rung.is-future img { opacity: .32; filter: grayscale(.5); }
.bb-disc__rung.is-future b { color: var(--bb-text-muted); font-weight: 600; }
.bb-disc__rung.is-due > span:not(.bb-disc-belt) { color: var(--bb-text-danger); font-weight: 600; }
.bb-disc__rung.is-before img { opacity: .5; }
.bb-disc__rung.is-before > span:not(.bb-disc-belt) { font-style: italic; }
.bb-disc__stack, .bb-disc__showall { display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--bb-text); text-align: center; }
.bb-disc__stack b, .bb-disc__showall b { font-size: var(--bb-fs-caption); font-weight: 600; }
.bb-disc__showall b { color: var(--bb-accent); }
.bb-disc__stack > span:not(.bb-disc__pile), .bb-disc__showall > span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-disc__pile { position: relative; display: block; width: 84px; height: 34px; }
.bb-disc__pile .bb-disc-belt { position: absolute; width: 64px; }
.bb-disc__pile .bb-disc-belt img { height: 26px; }
.bb-disc__pile .bb-disc-belt:nth-child(1) { left: 0; top: 0; }
.bb-disc__pile .bb-disc-belt:nth-child(2) { left: 10px; top: 4px; }
.bb-disc__pile .bb-disc-belt:nth-child(3) { left: 20px; top: 8px; }

.bb-disc__facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 16px;
                  border-top: 1px solid var(--bb-border-subtle); }
.bb-disc__facts > div { display: grid; gap: 2px; align-content: start; min-width: 0; font-size: var(--bb-fs-body); }
.bb-disc__facts dt { font-size: var(--bb-fs-caption); font-weight: 400; color: var(--bb-text-muted); }
.bb-disc__facts dd { margin: 0; font-weight: 600; }
.bb-disc__facts .bb-record__bar-o { margin-top: 6px; height: 6px; }
.bb-disc__norank { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px;
                   background: var(--bb-surface-sunken); color: var(--bb-text-muted); font-size: var(--bb-fs-body); }

/* A belt picture with its degree badge (1-10, M, GM). */
.bb-disc-belt { position: relative; display: inline-grid; place-items: center; width: min(84px, 100%); }
.bb-disc-belt img { width: 100%; height: 34px; object-fit: contain; border-radius: 6px; }
.bb-disc-belt__none { display: block; width: 100%; height: 34px; border-radius: 6px; background: var(--bb-surface-sunken); }
.bb-disc-belt__deg { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
                     background: var(--bb-accent); color: var(--bb-text-onbrand); font-size: var(--bb-fs-caption); font-style: normal; font-weight: 600;
                     line-height: 18px; text-align: center; }
.bb-disc__rung.is-future .bb-disc-belt__deg { background: var(--bb-text-muted); }

/* Dialogs */
.bb-disc-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bb-disc-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bb-disc-static { display: flex; align-items: center; min-height: var(--bb-ctl-h-small); font-weight: 600; }
.bb-disc-toggle { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px; }
.bb-disc-toggle small { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-disc-beltpick { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(200px, max-content); align-items: center; gap: 14px; padding: 10px 12px;
                    border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface); }
.bb-disc-beltpick b { display: block; }
.bb-disc-beltpick small { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-disc-beltgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); grid-auto-rows: minmax(76px, auto); gap: 4px; max-height: 164px; overflow: auto; padding: 2px; }
.bb-disc-beltgrid > .bb-dxopt { padding: 5px 8px; border-radius: 10px; font-size: var(--bb-fs-caption); }
.bb-dxopt__belt { display: grid; justify-items: center; gap: 2px; text-align: center; }
.bb-dxopt__belt .bb-disc-belt { width: 56px; }
.bb-dxopt__belt .bb-disc-belt img, .bb-dxopt__belt .bb-disc-belt__none { height: 24px; }
.bb-dxopt__belt small { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-disc-beltgrid > .bb-dxopt.is-current { opacity: 1; border-color: var(--bb-ok); background: var(--bb-ok-bg); }
.bb-disc-step { margin: 14px 0 8px; font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); }
.bb-disc-step:first-child { margin-top: 0; }
.bb-disc-foot-hint { margin-right: auto; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-disc-why { display: grid; gap: 8px; }
.bb-disc-tline { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; border: 1px solid var(--bb-border-subtle); border-radius: 12px; }
.bb-disc-tline > li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; }
.bb-disc-tline > li + li { border-top: 1px solid var(--bb-border-subtle); }
.bb-disc-tline > li .bb-disc-belt { width: 72px; }
.bb-disc-tline > li .bb-disc-belt img { height: 28px; }
.bb-disc-tline b { font-weight: 600; }
.bb-disc-tline small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-disc-tline > li.is-now { background: var(--bb-accent-soft); }
.bb-disc-tline > li.is-future img { opacity: .35; }
.bb-disc-tline > li.is-future b, .bb-disc-tline > li.is-failed b { color: var(--bb-text-muted); font-weight: 600; }
.bb-disc-tline > li.is-removed { background: var(--bb-danger-bg); }
.bb-disc-tline > li.is-removed b { text-decoration: line-through; }
.bb-disc-tline__acts { display: flex; gap: 6px; }
.bb-dlg-foot > .bb-disc-foot-left { margin-right: auto; }
/* ----- end Disciplines ----- */


/* ----- Tab: Memberships ----- */
.bb-mem__list { display: grid; }
.bb-mem__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .95fr) auto; gap: 8px 20px; align-items: start;
               padding: 16px 0; }
.bb-mem__row + .bb-mem__row { border-top: 1px solid var(--bb-border); }
.bb-mem__row.is-ended { opacity: .72; }
.bb-mem__nm { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.bb-mem__nm h4 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); overflow-wrap: anywhere; }
.bb-mem__nm p { margin: 3px 0 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-mem__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bb-mem__term, .bb-mem__bill { display: grid; gap: 2px; min-width: 0; font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-mem__term b, .bb-mem__bill b { font-weight: 600; }
.bb-mem__term small, .bb-mem__bill small { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-mem__lbl { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-mem__amt { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); }
.bb-mem__bar { margin: 6px 0 4px; }
.bb-mem__acts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bb-mem__covergrid { margin-top: 10px; }
.bb-mem__covers { grid-column: 1 / -1; }
.bb-mem__covers > summary { cursor: pointer; width: max-content; font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text-muted); }
.bb-mem__covers > summary:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); border-radius: 6px; }
.bb-mem__note { margin-top: 12px; font-size: var(--bb-fs-body); }
/* The agreement's own HTML; with no color-scheme of its own the frame paints a light canvas when the page is dark. */
.bb-mem__paper { display: block; width: 100%; height: min(62vh, 640px); border: 1px solid var(--bb-border); border-radius: 10px; }
@media (max-width: 1100px) {
    .bb-mem__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .bb-mem__acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ----- end Memberships ----- */


/* ----- Tab: Registrations ----- */
.bb-reg__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bb-reg__sec { display: grid; gap: 10px; }
.bb-reg__sec + .bb-reg__sec { margin-top: 18px; }
.bb-reg__list { border: 1px solid var(--bb-border); border-radius: 12px; overflow: hidden; }
.bb-reg__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 200px; gap: 16px;
               align-items: center; padding: 12px 16px; font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-reg__row + .bb-reg__row { border-top: 1px solid var(--bb-border); }
.bb-reg__row--head { padding-top: 8px; padding-bottom: 8px; background: var(--bb-surface-sunken); color: var(--bb-text-muted); font-size: var(--bb-fs-caption); font-weight: 600; }
.bb-reg__row.is-ended { opacity: .72; }
.bb-reg__nm { display: flex; gap: 12px; align-items: center; min-width: 0; }
.bb-reg__nm b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.bb-reg__nm small, .bb-reg__paid small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-reg__ac { display: flex; justify-content: flex-end; }
.bb-reg__lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
@media (max-width: 1100px) {
    .bb-reg__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) 170px; gap: 12px; }
}

/* ----- end Registrations ----- */


/* ----- Tab: Contacts ----- */
.bb-contacts__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.bb-contacts__search { flex: 1 1 220px; max-width: 320px; }
.bb-contacts__new { margin-inline-start: auto; }
.bb-contacts__ice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 20px; }
.bb-contacts__ice > b { font-weight: 600; color: var(--bb-text); }
.bb-contacts__who { display: inline-flex; flex-direction: column; padding-inline-start: 16px; border-inline-start: 1px solid var(--bb-border-subtle);
                    font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-contacts__who small { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-contacts__who a { color: inherit; text-decoration: none; }
.bb-contacts__who a:hover { color: var(--bb-accent); }
.bb-contacts__none { margin: 4px 0 0; }
.bb-contacts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bb-contacts__card { display: grid; gap: 14px; padding: 18px 20px; }
.bb-contacts__card.is-primary { grid-row: span 2; }
.bb-contacts__card.is-off { opacity: .72; }
.bb-contacts__head { display: flex; align-items: flex-start; gap: 12px; }
.bb-contacts__ini { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bb-surface-sunken);
                    font-family: var(--bb-font-display); font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); }
.bb-contacts__name { min-width: 0; }
.bb-contacts__name h4 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle2); font-weight: 600; color: var(--bb-text); overflow-wrap: anywhere; }
.bb-contacts__name h4.is-struck { text-decoration: line-through; color: var(--bb-text-muted); }
.bb-contacts__name p { margin: 2px 0 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-contacts__edit { margin-inline-start: auto; min-width: 96px; }
.bb-contacts__roles { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-contacts__reach { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--bb-fs-body); }
.bb-contacts__reach dt { font-weight: 400; color: var(--bb-text-muted); }
.bb-contacts__reach dd { margin: 0; color: var(--bb-text); overflow-wrap: anywhere; }
.bb-contacts__reach a { color: inherit; text-decoration: none; }
.bb-contacts__reach a:hover { color: var(--bb-accent); text-decoration: underline; }
.bb-contacts__pm { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--bb-surface-sunken); }
.bb-contacts__pm h5 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); }
.bb-contacts__pmrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.bb-contacts__pmrow .bb-tile { width: 36px; height: 36px; border-radius: 9px; }
.bb-contacts__pmrow b { display: block; font-weight: 600; color: var(--bb-text); }
.bb-contacts__pmrow small { display: block; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-contacts__pmbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.bb-contacts__note { margin: 0; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-contacts__fh { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-family: var(--bb-font-display); font-weight: 600; color: var(--bb-text); }
.bb-contacts__lock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--bb-font); font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-muted); }
.bb-contacts__rolegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bb-contacts__locked { display: grid; gap: 2px; padding: 12px 14px; border: 1px dashed var(--bb-border); border-radius: 12px; }
.bb-contacts__locked > b { font-weight: 600; color: var(--bb-text); }
.bb-contacts__locked > .bb-opt__says { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-contacts__confirm { display: grid; gap: 10px; flex: 1; }
.bb-contacts__mailhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: var(--bb-fs-body); }
.bb-contacts__mailhead dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-contacts__mailhead dd { margin: 0; overflow-wrap: anywhere; }
.bb-contacts__letter { display: block; width: 100%; height: 420px; border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface); }
.bb-contacts__letter--doc { height: 520px; }
/* ----- end Contacts ----- */


/* ----- Tab: Documents ----- */
/* Two lists (waiting, signed) as rows of one grid: name, type, status, actions. Names wrap in full, never cut off. A document is paper
   in both themes (color-scheme: light inside its frame and on the pad), because the signer reads and signs what will be printed. */
.bb-docs { display: grid; gap: 14px; }
.bb-docs [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-docs__banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px;
                   border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface-sunken); }
.bb-docs__banner.is-waiting { background: var(--bb-warn-bg); border-color: transparent; }
.bb-docs__banner p { display: grid; gap: 2px; margin: 0; min-width: 0; }
.bb-docs__banner small { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-docs__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bb-docs__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bb-docs__search { width: 240px; }
.bb-docs__sec { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.bb-docs__sec h3 { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-body); font-weight: 600; color: var(--bb-text); }
.bb-docs__sec span { color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-variant-numeric: tabular-nums; }
.bb-docs__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bb-border); border-radius: 12px; }
.bb-docs__row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px;
                padding: 10px 14px; border-top: 1px solid var(--bb-border); }
.bb-docs__row:first-child { border-top: 0; }
.bb-docs__row small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-docs__name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.bb-docs__name b { font-weight: 600; overflow-wrap: anywhere; }
.bb-docs__type, .bb-docs__st { font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-docs__acol { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.bb-docs__more { display: flex; justify-content: center; }
.bb-docs__empty { display: grid; justify-items: start; gap: 8px; padding: 18px; border: 1px dashed var(--bb-border); border-radius: 12px; }
.bb-docs__addlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.bb-docs__addlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px;
                       border: 1px solid var(--bb-border); border-radius: 10px; }
.bb-docs__addlist small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-docs__mailhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--bb-fs-body); }
.bb-docs__mailhead dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-docs__mailhead dd { margin: 0; overflow-wrap: anywhere; }
.bb-docs__frame { display: block; width: 100%; height: 42vh; border: 1px solid var(--bb-border); border-radius: 10px; color-scheme: light; background: Canvas; }
.bb-docs__frame--mail { height: 48vh; }
/* Sign now carries name, relationship, the pad and consent below the text: a shorter frame keeps Save in view at 1024x768. */
.bb-docs__frame--sign { height: clamp(140px, 24vh, 260px); }
.bb-docs__signed { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.bb-docs__signed dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--bb-fs-body); }
.bb-docs__signed dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-docs__signed dd { margin: 0; overflow-wrap: anywhere; }
.bb-docs__sigimg { max-width: 260px; max-height: 110px; padding: 6px; border: 1px solid var(--bb-border); border-radius: 8px; color-scheme: light; background: Canvas; }
.bb-docs__rel { grid-template-columns: repeat(3, 1fr); }
.bb-docs__pad { display: block; width: 100%; height: 160px; border: 1px solid var(--bb-border); border-radius: 10px; color-scheme: light;
                background: Canvas; touch-action: none; cursor: crosshair; }
.bb-docs__pad:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-docs__padfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 1199.98px) {
    .bb-docs__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1.2fr) auto; gap: 10px; }
    .bb-docs__search { width: 200px; }
}
/* ----- end Documents ----- */

/* ===== 3.0 staff sign-in (BBCRM.App/Features/Account, Task 1.10) ===== */
/* The approved mock-up (Docs/superpowers/specs/2026-10-12-signin-mockup, Ivan 2026-10-13): today's split page and slab, the form
   side rebuilt. .bb-login--staff layers on the shared .bb-login (Corp keeps its own); every form part is a bb-login__ element so
   nothing here touches the app's generic bb-input / bb-btn / bb-field. */
.bb-ico-lock-keyhole::before { -webkit-mask-image: url("icons/fa-duo-lock-keyhole.svg"); mask-image: url("icons/fa-duo-lock-keyhole.svg"); }
.bb-ico-eye-slash::before { -webkit-mask-image: url("icons/fa-duo-eye-slash.svg"); mask-image: url("icons/fa-duo-eye-slash.svg"); }
.bb-ico-key::before { -webkit-mask-image: url("icons/fa-duo-key.svg"); mask-image: url("icons/fa-duo-key.svg"); }
.bb-ico-shield-check::before { -webkit-mask-image: url("icons/fa-duo-shield-check.svg"); mask-image: url("icons/fa-duo-shield-check.svg"); }
.bb-ico-globe::before { -webkit-mask-image: url("icons/fa-duo-globe.svg"); mask-image: url("icons/fa-duo-globe.svg"); }
.bb-ico-hourglass-clock::before { -webkit-mask-image: url("icons/fa-duo-hourglass-clock.svg"); mask-image: url("icons/fa-duo-hourglass-clock.svg"); }
.bb-ico-right-to-bracket::before { -webkit-mask-image: url("icons/fa-duo-right-to-bracket.svg"); mask-image: url("icons/fa-duo-right-to-bracket.svg"); }
.bb-ico-arrow-right-from-bracket::before { -webkit-mask-image: url("icons/fa-duo-arrow-right-from-bracket.svg"); mask-image: url("icons/fa-duo-arrow-right-from-bracket.svg"); }
.bb-ico-mobile::before { -webkit-mask-image: url("icons/fa-duo-mobile.svg"); mask-image: url("icons/fa-duo-mobile.svg"); }
.bb-ico-building::before { -webkit-mask-image: url("icons/fa-duo-building.svg"); mask-image: url("icons/fa-duo-building.svg"); }
.bb-ico-lock-open::before { -webkit-mask-image: url("icons/fa-duo-lock-open.svg"); mask-image: url("icons/fa-duo-lock-open.svg"); }
.bb-ico-envelope-circle-check::before { -webkit-mask-image: url("icons/fa-duo-envelope-circle-check.svg"); mask-image: url("icons/fa-duo-envelope-circle-check.svg"); }
.bb-ico-arrow-left::before { -webkit-mask-image: url("icons/fa-duo-arrow-left.svg"); mask-image: url("icons/fa-duo-arrow-left.svg"); }

.bb-login--staff { font-family: var(--bb-font); font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-login--staff [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-login--staff .bb-login__logo { width: 262px; height: auto; margin: 0; background: none; }
.bb-login__tagline { display: block; margin: 12px 0 0; font: 600 var(--bb-fs-caption)/1 var(--bb-font-display); letter-spacing: .18em; color: color-mix(in srgb, var(--bb-text-onbrand) 82%, transparent); }
.bb-login--staff .bb-login__headline { margin: 44px 0 0; font-size: var(--bb-fs-subtitle1); }
.bb-login--staff .bb-login__headline span { display: block; color: var(--bb-gold-bright); }
.bb-login--staff .bb-login__headline span:first-child { color: inherit; }
.bb-login--staff .bb-login__keyline { margin: 26px 0 22px; }
.bb-login--staff .bb-login__reach { gap: 12px; }
.bb-login--staff .bb-login__reach li { align-items: center; font-size: var(--bb-fs-body); color: color-mix(in srgb, var(--bb-text-onbrand) 88%, transparent); }
.bb-login--staff .bb-login__reach [class*="bb-ico-"] { color: var(--bb-gold-bright); font-size: 1.05rem; }
.bb-login--staff .bb-login__secure { display: flex; align-items: center; gap: 8px; margin-top: 30px; font-size: var(--bb-fs-caption); color: color-mix(in srgb, var(--bb-text-onbrand) 60%, transparent); }
.bb-login--staff .bb-login__secure [class*="bb-ico-"] { color: var(--bb-gold-bright); }

.bb-login--staff .bb-login__panel { position: relative; padding: 64px 28px 40px; }
.bb-login__lang { position: absolute; top: 18px; right: 22px; display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-login__lang button { border: 0; background: none; padding: 4px 2px; color: var(--bb-text-muted); font: inherit; cursor: pointer; }
.bb-login__lang button[aria-current="true"] { color: var(--bb-text); font-weight: 600; cursor: default; }
.bb-login__lang button:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; border-radius: 4px; }
.bb-login--staff .bb-login__form { max-width: 384px; }
.bb-login--staff .bb-login__form--wide { max-width: 440px; }
.bb-login--staff .bb-login__title { margin: 0; font-size: var(--bb-fs-subtitle1); line-height: 1.2; letter-spacing: -.015em; }
.bb-login__sub { margin: 6px 0 24px; color: var(--bb-text-muted); }
.bb-login__badge { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 16px; border-radius: 12px; background: var(--bb-accent-soft); color: var(--bb-accent); font-size: var(--bb-fs-subtitle1); }
.bb-login__badge--ok { background: var(--bb-ok-bg); color: var(--bb-ok); }
.bb-login__badge--warn { background: var(--bb-warn-bg); color: var(--bb-warn); }
.bb-login__badge--info { background: var(--bb-info-bg); color: var(--bb-info); }

/* Message pages (session ended, not yet, not active, check your email...): the icon tile sits left of the title and the text lines up with the
   title, not under the tile. Any form whose first child is a badge gets this; the rest of its children (alerts, buttons) span the full width. */
.bb-login--staff .bb-login__form:has(> .bb-login__badge) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; max-width: 36rem;
}
.bb-login__form:has(> .bb-login__badge) > * { grid-column: 1 / -1; }
.bb-login__form:has(> .bb-login__badge) > .bb-login__badge { grid-column: 1; grid-row: 1; margin: 0; }
.bb-login__form:has(> .bb-login__badge) > .bb-login__title { grid-column: 2; grid-row: 1; }
.bb-login__form:has(> .bb-login__badge) > .bb-login__sub { grid-column: 2; grid-row: 2; align-self: start; max-width: 34rem; }
.bb-login__title { text-wrap: balance; }
.bb-login__sub, .bb-login__note, .bb-login__alert > span:last-child { text-wrap: pretty; }

.bb-login__field { margin: 0 0 16px; }
.bb-login__label { display: block; margin: 0 0 6px; font-weight: 600; font-size: var(--bb-fs-body); }
.bb-login__control { position: relative; display: flex; align-items: center; }
.bb-login__input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--bb-border-strong); border-radius: 8px; background: var(--bb-surface); color: var(--bb-text); font: inherit; }
.bb-login__input::placeholder { color: var(--bb-text-muted); }
.bb-login__other { display: none; margin-top: 12px; }
.bb-login__field:has(option[value="7"]:checked) .bb-login__other { display: block; }
.bb-login__input:focus { outline: none; border-color: var(--bb-focus); box-shadow: var(--bb-focus-ring); }
.bb-login__input[aria-invalid="true"] { border-color: var(--bb-text-danger); }
.bb-login__control .bb-login__input { padding-right: 84px; }
.bb-login__eye { position: absolute; right: 6px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--bb-text-muted); font: 600 var(--bb-fs-caption) var(--bb-font); padding: 6px 6px 6px 10px; cursor: pointer; border-radius: 6px; }
.bb-login__eye [class*="bb-ico-"] { font-size: 1.1rem; }
.bb-login__eye:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 1px; }
.bb-login__otp { text-align: center; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); letter-spacing: .45em; font-variant-numeric: tabular-nums; }
.bb-login__otp--recovery { font-size: var(--bb-fs-subtitle1); letter-spacing: .12em; text-transform: uppercase; }
.bb-login__hint { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-login__hint--warn { color: var(--bb-warn); }
.bb-login__hint--ok { color: var(--bb-text-success); }
.bb-login__hint--center { justify-content: center; margin-top: 12px; }
.bb-login__hint[hidden] { display: none; }

.bb-login__check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--bb-fs-body); cursor: pointer; }
.bb-login__check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--bb-brand-deep); cursor: pointer; }
[data-bs-theme="dark"] .bb-login__check input { accent-color: var(--bb-accent); }
.bb-login__check small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-login__check--block { margin: 0 0 18px; }
.bb-login__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 20px; }
.bb-login__row--end { justify-content: flex-end; }
.bb-login__row a { font-weight: 600; font-size: var(--bb-fs-body); text-decoration: none; white-space: nowrap; color: var(--bb-link); }

.bb-login__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; text-decoration: none; }
.bb-login__btn--primary { background: var(--bb-brand); color: var(--bb-text-onbrand); }
.bb-login__btn--primary:hover { background: var(--bb-brand-hover); color: var(--bb-text-onbrand); }
[data-bs-theme="dark"] .bb-login__btn--primary { background: var(--bb-accent); color: var(--bb-surface-sunken); }
[data-bs-theme="dark"] .bb-login__btn--primary:hover { background: var(--bb-gold-bright); color: var(--bb-surface-sunken); filter: brightness(1.08); }
.bb-login__btn--quiet { background: transparent; border-color: var(--bb-border-strong); color: var(--bb-text); }
.bb-login__btn--quiet:hover { background: var(--bb-surface-sunken); }
.bb-login__btn:disabled { cursor: default; opacity: .7; }
.bb-login__btn:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; }

.bb-login__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: var(--bb-fs-body); }
.bb-login__links a, .bb-login__return, .bb-login__linkbtn { color: var(--bb-link); font-weight: 600; text-decoration: none; }
.bb-login__return { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: var(--bb-fs-body); }
.bb-login__linkbtn { border: 0; background: none; padding: 0; font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-login__links a:hover, .bb-login__return:hover, .bb-login__linkbtn:hover { text-decoration: underline; }
.bb-login__pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
@media (max-width: 480px) { .bb-login__pair { grid-template-columns: 1fr; } }
.bb-login__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bb-login__promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 18px 0 0; padding: 0; list-style: none; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-login__promise li::before { content: "\2713"; margin-inline-end: 6px; color: var(--bb-text-success); }

.bb-login__alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 11px 13px; border-radius: 8px; background: var(--bb-danger-bg); color: var(--bb-text-danger); font-size: var(--bb-fs-body); }
.bb-login__alert [class*="bb-ico-"] { font-size: 1.1rem; margin-top: 2px; }
.bb-login__alert a { color: inherit; font-weight: 600; }
.bb-login__alert--info { background: var(--bb-info-bg); color: var(--bb-text); }
.bb-login__alert--info [class*="bb-ico-"] { color: var(--bb-info); }
.bb-login__alert--spaced { margin-top: 18px; }
.bb-login__testmode { margin: 22px 0 0; padding: 10px 13px; border-left: 4px solid var(--bb-warn); border-radius: 0 8px 8px 0; background: var(--bb-warn-bg); font-size: var(--bb-fs-body); }
.bb-login__testmode b { display: flex; gap: 8px; align-items: center; color: var(--bb-warn); font-size: var(--bb-fs-body); }
.bb-login__ssl { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); text-decoration: none; }
.bb-login__ssl [class*="bb-ico-"] { color: var(--bb-ok); }
.bb-login__note { margin: 0 0 16px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }

.bb-login__who { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 18px; padding: 5px 12px 5px 5px; border: 1px solid var(--bb-border); border-radius: 999px; font-size: var(--bb-fs-body); }
.bb-login__who b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bb-brand-deep); color: var(--bb-text-onbrand); font: 600 var(--bb-fs-caption) var(--bb-font-display); flex: none; }
[data-bs-theme="dark"] .bb-login__who b { background: var(--bb-accent); color: var(--bb-surface-sunken); }
.bb-login__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-login__who a, .bb-login__who button { color: var(--bb-link); font: 600 var(--bb-fs-body) var(--bb-font); text-decoration: none; white-space: nowrap; border: 0; background: none; padding: 0; cursor: pointer; }

.bb-login__rules { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-login__rules li { display: flex; align-items: center; gap: 7px; }
.bb-login__rules li::before { content: ""; flex: none; width: .95rem; height: .95rem; background-color: currentColor; -webkit-mask: url("icons/fa-duo-circle-info.svg") center / contain no-repeat; mask: url("icons/fa-duo-circle-info.svg") center / contain no-repeat; }
.bb-login__rules li.is-met { color: var(--bb-text-success); }
.bb-login__rules li.is-met::before { -webkit-mask-image: url("icons/fa-duo-circle-check.svg"); mask-image: url("icons/fa-duo-circle-check.svg"); }

.bb-login__locs { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; border: 0; }
.bb-login__locs li[hidden] { display: none; }
.bb-login__loc { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid var(--bb-border); border-radius: 10px; cursor: pointer; }
.bb-login__loc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bb-login__loc:has(input:checked) { border-color: var(--bb-accent); box-shadow: var(--bb-focus-ring); }
.bb-login__loc:has(input:focus-visible) { outline: 2px solid var(--bb-focus); outline-offset: 2px; }
.bb-login__loc-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bb-info-bg); color: var(--bb-info); font-size: var(--bb-fs-subtitle1); }
.bb-login__loc b { display: block; font-weight: 600; }
.bb-login__role { padding: 2px 9px; border-radius: 999px; background: var(--bb-surface-sunken); border: 1px solid var(--bb-border); font: 600 var(--bb-fs-caption) var(--bb-font); white-space: nowrap; }
.bb-login__last { margin-left: 6px; color: var(--bb-accent); font-weight: 600; font-size: var(--bb-fs-caption); }

.bb-login__milestone { margin: -12px 0 24px; color: var(--bb-text); }
.bb-login--staff fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bb-login__return.bb-login__linkbtn { width: 100%; }

/* Narrow screens (the shared .bb-login stacks at 900px): the slab becomes the page header, as today. */
@media (max-width: 900px) {
    .bb-login--staff { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
    .bb-login--staff .bb-login__brand { padding: 22px 20px 24px; }
    .bb-login--staff .bb-login__logo { width: 170px; }
    .bb-login--staff .bb-login__tagline { font-size: var(--bb-fs-caption); margin-top: 8px; }
    .bb-login--staff .bb-login__headline { margin-top: 18px; font-size: var(--bb-fs-subtitle1); }
    .bb-login--staff .bb-login__keyline, .bb-login--staff .bb-login__reach, .bb-login--staff .bb-login__secure { display: none; }
    .bb-login--staff .bb-login__panel { padding: 52px 16px 28px; place-items: start center; }
    .bb-login__lang { top: 14px; right: 16px; }
    .bb-login--staff .bb-login__title { font-size: var(--bb-fs-subtitle1); }
    .bb-login__rules { grid-template-columns: 1fr; }
    .bb-login__row { flex-wrap: wrap; }
}
/* ===== end 3.0 staff sign-in ===== */

/* Family portal sign-in: the staff frame plus the business's own letterhead when the link names one. */
.bb-login--portal .bb-login__biz { display: flex; align-items: center; gap: 16px; }
.bb-login--portal .bb-login__biz b { font: 600 var(--bb-fs-subtitle1)/1.2 var(--bb-font-display); overflow-wrap: anywhere; }
.bb-login--portal .bb-login__biz-logo { flex: none; display: grid; place-items: center; width: 72px; height: 72px; padding: 6px; border-radius: 14px; background: var(--bb-text-onbrand); }
.bb-login--portal .bb-login__biz-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bb-login--portal .bb-login__biz-ghost { display: block; height: 72px; }
.bb-login--portal .bb-login__ctx { margin: 14px 0 0; font-size: var(--bb-fs-body); color: color-mix(in srgb, var(--bb-text-onbrand) 82%, transparent); }
.bb-login--portal .bb-login__pow { margin: 28px 0 0; font-size: var(--bb-fs-caption); color: color-mix(in srgb, var(--bb-text-onbrand) 60%, transparent); }
.bb-login--portal .bb-login__headline { margin: 40px 0 0; font: 600 var(--bb-fs-subtitle1)/1.2 var(--bb-font-display); }
.bb-login--portal .bb-login__logo { height: 64px; width: auto; }
.bb-login--portal .bb-login__links { margin-top: 16px; }
.bb-login--portal .bb-login__btn--primary { background: var(--bb-gold-bright); color: var(--bb-brand-deep); }
.bb-login--portal .bb-login__btn--primary:hover { background: var(--bb-gold-bright); color: var(--bb-brand-deep); filter: brightness(1.05); }
.bb-login--portal .bb-login__field .signin__error { margin-top: 6px; }
.bb-login--portal .bb-login__form > .signin__error, .bb-login--portal form > .signin__error { margin: 0 0 6px; }
@media (max-width: 900px) {
    .bb-login--portal .bb-login__biz-logo { width: 48px; height: 48px; padding: 4px; border-radius: 10px; }
    .bb-login--portal .bb-login__biz b { font-size: var(--bb-fs-subtitle2); }
    .bb-login--portal .bb-login__biz-ghost { height: 48px; }
    .bb-login--portal .bb-login__ctx { margin-top: 8px; }
    .bb-login--portal .bb-login__pow { display: none; }
    .bb-login--portal .bb-login__headline { margin-top: 12px; font-size: var(--bb-fs-subtitle2); }
    .bb-login--portal .bb-login__logo { height: 44px; }
}

/* ---- Portal: check-in at the door (the page a phone opens after scanning the kiosk's code) ----------- */
.bb-portal .bb-door__list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-width: 36rem; }
.bb-portal .bb-door__row { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.125rem; background: var(--bb-surface); border: 1px solid var(--bb-border); border-left: 3px solid var(--bb-accent); border-radius: var(--bb-radius); }
.bb-portal .bb-door__tick { display: flex; align-items: center; gap: .75rem; min-height: var(--bb-ctl-h-touch); cursor: pointer; }
.bb-portal .bb-door__tick input { width: 1.5rem; height: 1.5rem; accent-color: var(--bb-accent); }
.bb-portal .bb-door__name { font-weight: 600; color: var(--bb-text); }
.bb-portal .bb-door__meta { color: var(--bb-text-muted); }
.bb-portal .bb-door__classes { display: flex; flex-wrap: wrap; gap: .5rem; }
.bb-portal .bb-door__class { min-height: var(--bb-ctl-h-touch); padding: 0 1rem; font: inherit; color: var(--bb-text); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); cursor: pointer; }
.bb-portal .bb-door__class[aria-pressed="true"] { border-color: var(--bb-accent); box-shadow: var(--bb-focus-ring); font-weight: 600; }
.bb-portal .bb-door__class:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }

/* Packages setup (BBCRM.App Features/Packages; setup mock-up). Layer-2 roles only. */
.bb-ico-ticket::before { -webkit-mask-image: url("icons/fa-duo-ticket.svg"); mask-image: url("icons/fa-duo-ticket.svg"); }
.bb-ico-box-archive::before { -webkit-mask-image: url("icons/fa-duo-box-archive.svg"); mask-image: url("icons/fa-duo-box-archive.svg"); }
.bb-ico-box-open::before { -webkit-mask-image: url("icons/fa-duo-box-open.svg"); mask-image: url("icons/fa-duo-box-open.svg"); }
.bb-ico-copy::before { -webkit-mask-image: url("icons/fa-duo-copy.svg"); mask-image: url("icons/fa-duo-copy.svg"); }
.bb-ico-lightbulb::before { -webkit-mask-image: url("icons/fa-duo-lightbulb.svg"); mask-image: url("icons/fa-duo-lightbulb.svg"); }
.bb-ico-receipt::before { -webkit-mask-image: url("icons/fa-duo-receipt.svg"); mask-image: url("icons/fa-duo-receipt.svg"); }
.bb-ico-location-dot::before { -webkit-mask-image: url("icons/fa-duo-location-dot.svg"); mask-image: url("icons/fa-duo-location-dot.svg"); }
.bb-pill--off { color: var(--bb-text-muted); background: var(--bb-surface-sunken); }

.bb-pk { display: grid; gap: 12px; padding: 16px 0 72px; }
.bb-pk > * { min-width: 0; }
.bb-pk-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-pk-titlebar__acts { display: flex; align-items: center; gap: 8px; }
.bb-pk-pick { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; color: var(--bb-text-muted); }
.bb-pk-pick [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-pk-pick > div { flex: 1; }
.bb-pk-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-pk-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bb-border); background: var(--bb-surface); color: var(--bb-text);
              font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.bb-pk-chip b { font-weight: 600; color: var(--bb-text-muted); }
.bb-pk-chip[aria-pressed="true"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-pk-chip:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pk-search { margin-left: auto; width: 260px; }
/* One grid for the list and subgrid rows, so every column is sized by its widest cell: names (package, location) get their full width on one line and the
   leftover goes to the name columns first; the count, status and action columns take only what they need. */
.bb-pk-list { display: grid; grid-template-columns: minmax(16rem, 1.6fr) minmax(min-content, 1.2fr) minmax(11rem, 1fr) minmax(7rem, max-content) max-content 230px; column-gap: 16px; overflow: hidden; padding: 0; }
.bb-pk-list--one { grid-template-columns: minmax(16rem, 1.6fr) minmax(min-content, 1.2fr) minmax(7rem, max-content) max-content 230px; }
.bb-pk-list > * { grid-column: 1 / -1; }
.bb-pk-row { display: grid; grid-template-columns: subgrid; column-gap: 16px; align-items: center; padding: 0;
             min-height: 70px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-pk-row > :first-child { padding-left: 18px; }
.bb-pk-row > :last-child { padding-right: 18px; }
.bb-pk-row--head { min-height: 40px; padding-block: 8px; font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); border-bottom: 1px solid var(--bb-border); background: var(--bb-surface-sunken); }
.bb-pk-row.is-off { color: var(--bb-text-muted); }
.bb-pk-row.is-off .bb-tile { filter: grayscale(1); opacity: .7; }
.bb-pk-pk { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bb-pk-pk > div { min-width: 0; }
/* A name takes one line while the package column has room (16rem at least, more as the card allows); an extreme name wraps inside it, so the status and actions columns are never pushed out of the card. */
.bb-pk-pk b, .bb-pk-pays b { display: block; max-width: 100%; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.bb-pk-pk small, .bb-pk-pays small, .bb-pk-mem small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pk-locs { font-size: var(--bb-fs-body); text-wrap: pretty; overflow-wrap: anywhere; }
.bb-pk-mem b { font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-pk-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 38px; gap: 8px; }
.bb-pk-more { width: 38px; padding: 0; }
.bb-pk-more [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-pk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 12px 18px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); background: var(--bb-surface-sunken); }
.bb-pk-none { padding: 24px 18px; color: var(--bb-text-muted); }
.bb-pk-empty { padding: 34px 32px 30px; display: grid; gap: 20px; }
.bb-pk-empty h2 { margin: 0; font: 600 var(--bb-fs-subtitle1)/1.2 var(--bb-font-display); letter-spacing: -.015em; }
.bb-pk-empty p { margin: 6px 0 0; color: var(--bb-text-muted); max-width: 62ch; }
.bb-pk-tplgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.bb-pk-tplcard { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface);
                 cursor: pointer; text-align: left; color: var(--bb-text); font: inherit; }
.bb-pk-tplcard:hover { background: var(--bb-surface-sunken); }
.bb-pk-tplcard:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pk-tplcard b { font: 600 var(--bb-fs-body) var(--bb-font-display); margin-top: 6px; }
.bb-pk-tplcard span:not(.bb-tile):not(.bb-pk-eg) { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pk-eg { font-weight: 600; font-size: var(--bb-fs-body); }
.bb-pk-blank { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-pk-link { border: 0; background: none; color: var(--bb-accent); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; padding: 0; text-underline-offset: 3px; }
.bb-pk-link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }

/* editor dialog */
.bb-pk-popup { max-width: calc(100vw - 32px); }
.bb-pk-ed { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; max-height: calc(100vh - 230px); overflow: hidden; }
.bb-pk-form { overflow: auto; padding: 8px 22px 24px 12px; display: grid; gap: 22px; align-content: start; }
.bb-pk-sec { display: grid; gap: 12px; }
.bb-pk-sec + .bb-pk-sec { border-top: 1px solid var(--bb-border-subtle); padding-top: 20px; }
.bb-pk-sec h3 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); display: flex; align-items: baseline; gap: 10px; }
.bb-pk-sec h3 small { font: 400 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-pk-tpls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bb-pk-tpl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 10px 12px;
             border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface); cursor: pointer; }
.bb-pk-tpl > input { position: absolute; opacity: 0; pointer-events: none; }
.bb-pk-tpl > .bb-tile { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 8px; }
.bb-pk-tpl > .bb-tile [class*="bb-ico-"]::before { width: 17px; height: 17px; margin-inline-end: 0; }
.bb-pk-tpl > b { font: 600 var(--bb-fs-body) var(--bb-font); }
.bb-pk-sub { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-pk-tpl:has(input:checked) { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-pk-tpl:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-pk-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.bb-pk-count { justify-self: end; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); margin-top: -8px; text-align: right; }
.bb-seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-pk-runs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-pk-today { grid-column: 2; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); opacity: .85; }
.bb-pk-locbar { display: flex; justify-content: space-between; align-items: center; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-pk-locacts { display: flex; gap: 12px; }
.bb-pk-locgrid { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.bb-pk-loc { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 6px 14px 6px 10px; line-height: 1.25; overflow-wrap: anywhere; border: 1px solid var(--bb-border); border-radius: 999px;
             background: var(--bb-surface); cursor: pointer; font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text); min-width: 0; }
.bb-pk-loc > input { position: absolute; opacity: 0; pointer-events: none; }
.bb-pk-loc > i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--bb-text-muted); display: grid; place-items: center; flex: none; }
.bb-pk-loc:has(input:checked) { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-pk-loc:has(input:checked) > i { background: var(--bb-accent); border-color: var(--bb-accent); }
.bb-pk-loc:has(input:checked) > i::after { content: ""; width: 4px; height: 8px; border: solid var(--bb-surface); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.bb-pk-loc:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-pk-toggle { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: 12px; }
.bb-pk-foot-left { margin-right: auto; }

/* the "What the member pays" rail */
.bb-pk-pv { background: var(--bb-surface-sunken); border-left: 1px solid var(--bb-border-subtle); padding: 8px 18px 20px; overflow: auto; display: grid; gap: 14px; align-content: start; }
.bb-pk-pv h3 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-pk-pvcard { background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.bb-pk-pvname { font: 600 var(--bb-fs-body) var(--bb-font-display); overflow-wrap: anywhere; }
.bb-pk-when { font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); }
.bb-pk-big { font: 600 var(--bb-fs-subtitle1)/1 var(--bb-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bb-pk-big small { font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); letter-spacing: 0; }
.bb-pk-lines { display: grid; gap: 6px; font-size: var(--bb-fs-body); border-top: 1px solid var(--bb-border-subtle); padding-top: 10px; }
.bb-pk-line { display: flex; justify-content: space-between; gap: 12px; }
.bb-pk-line span:first-child { color: var(--bb-text-muted); }
.bb-pk-line b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.bb-pk-then { display: grid; gap: 4px; }
.bb-pk-then b { font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-pk-then span:not(.bb-pk-when) { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-pk-tl { display: grid; margin: 2px 0 0; padding: 0; list-style: none; font-size: var(--bb-fs-body); }
.bb-pk-tl li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; }
.bb-pk-tl li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bb-accent); justify-self: center; }
.bb-pk-tl li:first-child::before { background: var(--bb-accent); }
.bb-pk-tl li.is-dots::before { border: 0; content: "\22EE"; color: var(--bb-text-muted); width: auto; height: auto; line-height: 1; }
.bb-pk-tl li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-pk-tl li span { color: var(--bb-text-muted); }
.bb-pk-note { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); margin: 0; display: flex; gap: 8px; }
.bb-pk-note [class*="bb-ico-"] { flex: none; margin-top: 2px; }
.bb-pk-note [class*="bb-ico-"]::before { width: 14px; height: 14px; margin-inline-end: 0; }

@media (max-width: 1180px) {
    .bb-pk-list { display: block; }
    .bb-pk-row--head { display: none; }
    .bb-pk-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) max-content 214px; grid-template-areas: "pk pays st acts" "locs on on acts"; column-gap: 14px; row-gap: 8px; padding: 12px 14px; min-height: 0; }
    .bb-pk-list--one .bb-pk-row { grid-template-areas: "pk pays st acts" "on on on acts"; }
    .bb-pk-row > :first-child, .bb-pk-row > :last-child { padding: 0; }
    .bb-pk-pk { grid-area: pk; }
    .bb-pk-pays { grid-area: pays; }
    .bb-pk-locs { grid-area: locs; }
    .bb-pk-mem { grid-area: on; }
    .bb-pk-st { grid-area: st; }
    .bb-pk-acts { grid-area: acts; align-self: center; }
    .bb-pk-locs::before, .bb-pk-mem::before { content: attr(data-label) ": "; color: var(--bb-text-muted); }
    .bb-pk-mem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
    .bb-pk-mem::before { flex: none; font-size: var(--bb-fs-body); }
    .bb-pk-mem small { display: inline; }
    .bb-pk-ed { grid-template-columns: minmax(0, 1fr) 292px; }
    .bb-pk-tpls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 999px) {
    .bb-pk-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) max-content; grid-template-areas: "pk pays st" "locs on on" "acts acts acts"; }
    .bb-pk-list--one .bb-pk-row { grid-template-areas: "pk pays st" "on on on" "acts acts acts"; }
    .bb-pk-acts { justify-self: end; width: 214px; }
}


/* Business information (BBCRM.App Features/BusinessDetails; setup mock-up). Layer-2 roles only. */
.bb-ico-percent::before { -webkit-mask-image: url("icons/fa-duo-percent.svg"); mask-image: url("icons/fa-duo-percent.svg"); }
.bb-ico-image::before { -webkit-mask-image: url("icons/fa-duo-image.svg"); mask-image: url("icons/fa-duo-image.svg"); }
.bb-ico-wand-magic-sparkles::before { -webkit-mask-image: url("icons/fa-duo-wand-magic-sparkles.svg"); mask-image: url("icons/fa-duo-wand-magic-sparkles.svg"); }
.bb-ico-cloud-arrow-up::before { -webkit-mask-image: url("icons/fa-duo-cloud-arrow-up.svg"); mask-image: url("icons/fa-duo-cloud-arrow-up.svg"); }
.bb-ico-floppy-disk::before { -webkit-mask-image: url("icons/fa-duo-floppy-disk.svg"); mask-image: url("icons/fa-duo-floppy-disk.svg"); }
.bb-ico-money-check-dollar::before { -webkit-mask-image: url("icons/fa-duo-money-check-dollar.svg"); mask-image: url("icons/fa-duo-money-check-dollar.svg"); }

.bb-bd { display: grid; gap: 14px; padding: 16px 0 24px; }
.bb-bd > * { min-width: 0; }
.bb-bd-sub { margin: 0; color: var(--bb-text-muted); }
.bb-bd-setup { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.bb-bd-setup__what { display: grid; gap: 2px; flex: 1; min-width: 0; }
.bb-bd-setup__what b { font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-bd-todos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bb-bd-todo { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border: 1px solid var(--bb-border); border-radius: 999px;
              background: var(--bb-surface); color: var(--bb-text); font: 600 var(--bb-fs-body) var(--bb-font); text-decoration: none; }
.bb-bd-todo .bb-tile { width: 28px; height: 28px; border-radius: 999px; }
.bb-bd-todo .bb-tile [class*="bb-ico-"]::before { width: 15px; height: 15px; }
.bb-bd-todo.is-done { color: var(--bb-text-muted); font-weight: 600; }
.bb-bd-todo:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-bd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .bb-bd-cols { grid-template-columns: minmax(0, 1fr); } }
.bb-bd-stack { display: grid; gap: 14px; min-width: 0; }
.bb-bd-sec { padding: 18px 20px 20px; display: grid; gap: 14px; }
.bb-bd-sec > header { display: flex; align-items: center; gap: 14px; }
.bb-bd-sec h2 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-bd-sec header p { margin: 2px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 16px; align-items: start; }
.bb-bd-grid3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px 16px; align-items: start; }
.bb-bd-full { grid-column: 1 / -1; }
.bb-bd-f { display: grid; gap: 6px; min-width: 0; }
.bb-bd-f .bb-label { margin: 0; }
.bb-bd-f .bb-hint, .bb-bd-f .bb-error { margin: 0; }
.bb-bd-affix { display: flex; align-items: center; gap: 8px; }
.bb-bd-affix > div { flex: 1; min-width: 0; }
.bb-bd-affix > span { color: var(--bb-text-muted); font-weight: 600; }
.bb-bd-sample { align-items: center; margin: 0; min-height: 40px; }
.bb-bd-sample b { font-variant-numeric: tabular-nums; }
.bb-bd-sample span { color: var(--bb-text-muted); }
.bb-bd-suggest { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bb-warn-bg); }
.bb-bd-suggest p { margin: 0; flex: 1; }
.bb-bd-suggest small { display: block; color: var(--bb-text-muted); margin-top: 2px; }
.bb-bd-suggest--wait { background: var(--bb-info-bg); }
.bb-bd-suggest--ok { background: var(--bb-success-bg); }
.bb-bd-suggest > [class*="bb-ico-"] { flex: none; }
.bb-bd-same { display: grid; gap: 2px; }
.bb-bd-same small { color: var(--bb-text-muted); padding-left: 46px; }
.bb-bd-sum { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bb-surface-sunken); line-height: 1.43; }
.bb-bd-sum span { color: var(--bb-text-muted); }
.bb-bd-logo { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: center; }
.bb-bd-logobox { width: 148px; height: 148px; border: 1px dashed var(--bb-border); border-radius: 14px; display: grid; place-items: center; background: var(--bb-surface-sunken); overflow: hidden; color: var(--bb-text-muted); }
.bb-bd-logobox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bb-bd-drop { display: grid; gap: 8px; justify-items: start; }
.bb-bd-drop p { margin: 0; }
.bb-bd-drop__btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-bd-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; height: var(--bb-ctl-h-small); padding: 0 14px; border-radius: 8px; cursor: pointer; overflow: hidden; font-weight: 600; }
.bb-bd-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bb-bd-pick:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-bd-rail { position: sticky; top: var(--bb-page-sticky-top, 12px); display: grid; gap: 14px; }
.bb-bd-pv { padding: 16px 18px; display: grid; gap: 12px; }
.bb-bd-pv h3 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-bd-pvdoc { border: 1px solid var(--bb-border); border-radius: 12px; padding: 14px 16px; background: var(--bb-surface); display: grid; gap: 10px; }
.bb-bd-pvhead { display: flex; align-items: center; gap: 12px; }
.bb-bd-pvlogo { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--bb-surface-sunken); overflow: hidden; flex: none; color: var(--bb-text-muted); }
.bb-bd-pvlogo img { max-width: 100%; max-height: 100%; }
.bb-bd-pvname { font: 600 var(--bb-fs-body) var(--bb-font-display); white-space: normal; text-wrap: balance; overflow-wrap: normal; }
.bb-bd-pvname--s0 { font-size: var(--bb-fs-subtitle2); }
.bb-bd-pvname--s1 { font-size: var(--bb-fs-body); }
.bb-bd-pvname--s2 { font-size: var(--bb-fs-body); }
.bb-bd-pvname--s3, .bb-bd-pvname--s4 { font-size: var(--bb-fs-caption); }
.bb-bd-pvlegal { color: var(--bb-text-muted); white-space: normal; text-wrap: balance; }
.bb-bd-pvlines { font-size: var(--bb-fs-body); line-height: 1.43; overflow-wrap: anywhere; }
.bb-bd-gap { color: var(--bb-warn); font-weight: 600; }
.bb-bd-pvfoot { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); border-top: 1px solid var(--bb-border-subtle); padding-top: 8px; }
.bb-bd-jump { padding: 8px; display: grid; gap: 2px; }
.bb-bd-jump a { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--bb-text); text-decoration: none; font-size: var(--bb-fs-body); }
.bb-bd-jump a:hover { background: var(--bb-surface-sunken); }
.bb-bd-jump a:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-bd-jump em { font-style: normal; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-bd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bb-text-success); }
.bb-bd-jump a.warn .bb-bd-dot { background: var(--bb-warn); }
.bb-bd-jump a.bad .bb-bd-dot { background: var(--bb-text-danger); }
.bb-bd-jump a.bad em { color: var(--bb-text-danger); font-weight: 600; }
.bb-bd-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 12px 18px;
                 border: 1px solid var(--bb-border); border-radius: 14px; background: var(--bb-surface); }
.bb-bd-savebar__state { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bb-bd-savebar__state a { color: var(--bb-accent); font-weight: 600; }
.bb-bd-savebar__acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-left: auto; }
.bb-bd-quiet { color: var(--bb-text-muted); }
/* Merchant application (card payments): step strip, progress, saved-number row */
.bb-ma-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bb-ma-step { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--bb-border); border-radius: 10px;
              background: var(--bb-surface); color: var(--bb-text-muted); font: 600 var(--bb-fs-body) var(--bb-font); text-align: left; cursor: pointer; }
.bb-ma-step:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-ma-step__n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--bb-border); font-size: var(--bb-fs-caption); }
.bb-ma-step__t { min-width: 0; overflow-wrap: anywhere; }
.bb-ma-step.is-current { color: var(--bb-text); border-color: var(--bb-accent); }
.bb-ma-step.is-current .bb-ma-step__n { background: var(--bb-accent); border-color: var(--bb-accent); color: var(--bb-surface); }
.bb-ma-step.is-done .bb-ma-step__n { color: var(--bb-text-success); border-color: var(--bb-text-success); }
.bb-ma-progress { height: 4px; border-radius: 2px; background: var(--bb-border-subtle); overflow: hidden; }
.bb-ma-progress > span { display: block; height: 100%; background: var(--bb-accent); transition: width .2s; }
.bb-ma-saved { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: var(--bb-ctl-h-small); }
.bb-ma-saved > :first-child { flex: 1; min-width: 0; }
.bb-ma-next { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 760px) { .bb-ma-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bb-bd-advisory { display: none; }

@media (max-width: 1279px) {
    .bb-bd-cols { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1180px) {
    .bb-bd-cols { grid-template-columns: minmax(0, 1fr) 300px; }
    .bb-bd-grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 999px) {
    .bb-bd > :not(.bb-bd-advisory) { display: none; }
    .bb-bd-advisory { display: grid; place-items: center; min-height: 60vh; padding: 24px; text-align: center; }
    .bb-bd-advisory > div { max-width: 340px; display: grid; gap: 10px; justify-items: center; }
    .bb-bd-advisory h1 { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); margin: 0; }
    .bb-bd-advisory p { margin: 0; color: var(--bb-text-muted); }
}
/* Location settings (location-settings mock-up, 2026-10-25): the rules of one location in Business information's section layout, and the location list */
.bb-ls { display: grid; gap: 14px; padding: 16px 0 24px; }
.bb-ls > * { min-width: 0; }
.bb-ls-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-ls-cycles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.bb-ls-cycle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 10px; border: 1px solid var(--bb-border-subtle); border-radius: var(--bb-radius); }
.bb-ls-cycle > span { min-width: 0; }
.bb-ls-num { width: 96px; flex: none; }
.bb-ls-num input { text-align: right; font-variant-numeric: tabular-nums; }
.bb-ls-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bb-ls-code { margin: 0; padding: 10px 12px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface-sunken);
              font-size: var(--bb-fs-caption); line-height: 1.5; color: var(--bb-text); overflow-wrap: anywhere; }
.bb-ls-log { display: grid; margin: 0; padding: 0; list-style: none; }
.bb-ls-log li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-ls-log li:last-child { border-bottom: 0; }
.bb-ls-log b { font-weight: 600; }
.bb-ls-log span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-ls-else { display: grid; gap: 4px; }
.bb-ls-else a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--bb-text); text-decoration: none; }
.bb-ls-else a:hover { background: var(--bb-surface-sunken); }
.bb-ls-else a:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-ls-else small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-ls-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-ls-yes { color: var(--bb-text-success); font-weight: 600; }
.bb-ls-no { color: var(--bb-text-muted); }
.bb-ls-here { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--bb-accent-soft); font-size: var(--bb-fs-caption); font-weight: 600; }
.bb-ls-acts { display: flex; gap: 6px; justify-content: flex-end; }
.bb-ls-acts > .bb-ls-act { min-width: 120px; }
.bb-ls-more { border-top: 1px solid var(--bb-border-subtle); padding-top: 10px; }
.bb-ls-more > summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
@media (max-width: 999px) { .bb-ls .bb-bd-cols { grid-template-columns: minmax(0, 1fr); } .bb-ls .bb-bd-jump { display: none; } }
/* Import members (BBCRM.App Features/Import; setup mock-up, import). Layer-2 roles only. */
.bb-ico-cloud-arrow-up::before { -webkit-mask-image: url("icons/fa-duo-cloud-arrow-up.svg"); mask-image: url("icons/fa-duo-cloud-arrow-up.svg"); }
.bb-ico-file-csv::before { -webkit-mask-image: url("icons/fa-duo-file-csv.svg"); mask-image: url("icons/fa-duo-file-csv.svg"); }
.bb-ico-file-export::before { -webkit-mask-image: url("icons/fa-duo-file-export.svg"); mask-image: url("icons/fa-duo-file-export.svg"); }
.bb-ico-arrow-down-to-line::before { -webkit-mask-image: url("icons/fa-duo-arrow-down-to-line.svg"); mask-image: url("icons/fa-duo-arrow-down-to-line.svg"); }
.bb-ico-filter-circle-xmark::before { -webkit-mask-image: url("icons/fa-duo-filter-circle-xmark.svg"); mask-image: url("icons/fa-duo-filter-circle-xmark.svg"); }
.bb-ico-people-roof::before { -webkit-mask-image: url("icons/fa-duo-people-roof.svg"); mask-image: url("icons/fa-duo-people-roof.svg"); }
.bb-ico-life-ring::before { -webkit-mask-image: url("icons/fa-duo-life-ring.svg"); mask-image: url("icons/fa-duo-life-ring.svg"); }
.bb-ico-sack-dollar::before { -webkit-mask-image: url("icons/fa-duo-sack-dollar.svg"); mask-image: url("icons/fa-duo-sack-dollar.svg"); }
.bb-ico-money-check-dollar::before { -webkit-mask-image: url("icons/fa-duo-money-check-dollar.svg"); mask-image: url("icons/fa-duo-money-check-dollar.svg"); }
.bb-ico-circle-question::before { -webkit-mask-image: url("icons/fa-duo-circle-question.svg"); mask-image: url("icons/fa-duo-circle-question.svg"); }
.bb-ico-file-lines::before { -webkit-mask-image: url("icons/fa-duo-file-lines.svg"); mask-image: url("icons/fa-duo-file-lines.svg"); }
.bb-ico-arrow-right-arrow-left::before { -webkit-mask-image: url("icons/fa-duo-arrow-right-arrow-left.svg"); mask-image: url("icons/fa-duo-arrow-right-arrow-left.svg"); }
.bb-ico-arrow-right::before { -webkit-mask-image: url("icons/fa-duo-arrow-right.svg"); mask-image: url("icons/fa-duo-arrow-right.svg"); }

.bb-im { display: grid; gap: 14px; padding: 16px 0 72px; }
.bb-im > * { min-width: 0; }
.bb-im-small { display: none; }
.bb-im-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bb-im-titlebar .bb-im-histbtn { margin-left: auto; }
.bb-im-into { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--bb-border); border-radius: 999px; background: var(--bb-surface); color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-im-into b { color: var(--bb-text); font-weight: 600; }
.bb-im-into [class*="bb-ico-"]::before { margin-inline-end: 0; color: var(--bb-accent); }

.bb-im-steps { padding: 8px; }
.bb-im-steps ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.bb-im-steps button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--bb-text-muted); font: 600 var(--bb-fs-body) var(--bb-font); text-align: left; }
.bb-im-steps button:not(:disabled) { cursor: pointer; }
.bb-im-steps button:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-im-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bb-border); font-size: var(--bb-fs-caption); flex: none; }
.bb-im-num [class*="bb-ico-"]::before { width: 14px; height: 14px; margin-inline-end: 0; }
.bb-im-steps .is-current button { background: var(--bb-accent-soft); color: var(--bb-text); }
.bb-im-steps .is-current .bb-im-num { background: var(--bb-text); border-color: var(--bb-text); color: var(--bb-surface); }
.bb-im-steps .is-done .bb-im-num { background: var(--bb-success-bg); border-color: transparent; color: var(--bb-text-success); }
.bb-im-steps .is-done button { color: var(--bb-text); }

.bb-im-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.bb-im-grid--wide { grid-template-columns: minmax(0, 1fr); }
.bb-im-main { display: grid; gap: 14px; min-width: 0; }
.bb-im-h { margin: 0; font: 600 var(--bb-fs-subtitle1)/1.2 var(--bb-font-display); letter-spacing: -.015em; color: var(--bb-text); }
.bb-im-sub { margin: 0; color: var(--bb-text-muted); max-width: 68ch; }
.bb-im-note { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-im-link { padding: 0; border: 0; background: none; color: var(--bb-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.bb-im-ok { color: var(--bb-text-success); }
.bb-im-muted { color: var(--bb-text-muted); }
.bb-im-main [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-im-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, max-content); align-items: center; gap: 16px; }
.bb-im-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, max-content); align-items: center; gap: 10px; margin-left: auto; }
.bb-im-btns--start { margin-left: 0; }
.bb-im-sechead { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.bb-im-sechead h2 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-im-sechead p { margin: 2px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-im-sechead__act { margin-left: auto; }
.bb-im-main section.bb-card { padding: 18px 20px; display: grid; gap: 10px; }
.bb-im-main section.bb-card h3 { margin: 6px 0 0; font: 600 var(--bb-fs-body) var(--bb-font); }

.bb-im-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bb-im-source { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--bb-border); border-radius: 12px; background: var(--bb-surface); color: var(--bb-text); font: inherit; text-align: left; cursor: pointer; }
.bb-im-source b { display: block; font-weight: 600; }
.bb-im-source small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-im-source.is-on { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-im-source:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-im-mono { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bb-surface-sunken); font: 600 var(--bb-fs-body) var(--bb-font-display); flex: none; }
.bb-im-howto { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bb-im-howto ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.bb-im-expect { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); }
.bb-im-expect > span { display: flex; gap: 8px; align-items: flex-start; }

.bb-im-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 20px; border: 2px dashed var(--bb-border); border-radius: 14px; background: var(--bb-surface); text-align: center; }
.bb-im-drop h2 { margin: 6px 0 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-im-drop p { margin: 0; color: var(--bb-text-muted); }
.bb-im-drop.is-over { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-im-drop.is-busy { opacity: .7; }
.bb-im-fileinput { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.bb-im-filecard { display: flex !important; align-items: center; gap: 14px; }
.bb-im-filecard > div { flex: 1; min-width: 0; }
.bb-im-filecard small { display: block; color: var(--bb-text-muted); }
.bb-im-checks, .bb-im-plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bb-im-checks li { display: flex; gap: 10px; align-items: flex-start; }
.bb-im-plain li { padding-left: 14px; position: relative; }
.bb-im-plain li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--bb-text-muted); }

.bb-im-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-im-chip { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bb-border); background: var(--bb-surface); color: var(--bb-text); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.bb-im-chip b { color: var(--bb-text-muted); font-weight: 600; }
.bb-im-chip[aria-pressed="true"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-im-chip:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-im-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(210px, 1fr) 120px; gap: 14px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-im-col--head { font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); border-bottom-color: var(--bb-border); }
.bb-im-col.is-guess { background: var(--bb-warn-bg); border-radius: 8px; }
.bb-im-col__name { font-weight: 600; overflow-wrap: anywhere; }
.bb-im-col__eg { color: var(--bb-text-muted); font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-im-col__eg small { display: block; font-size: var(--bb-fs-caption); }
.bb-im-colgroup h3 { padding: 10px 6px 4px; color: var(--bb-text-muted); font-size: var(--bb-fs-body) !important; }
.bb-im-colgroup h3 small { font-weight: 400; }
.bb-im-match { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bb-fs-body); font-weight: 600; }
.bb-im-match::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bb-text-muted); }
.bb-im-match--ok { color: var(--bb-text-success); }
.bb-im-match--ok::before { background: var(--bb-ok); }
.bb-im-match--ask { color: var(--bb-warn); }
.bb-im-match--ask::before { background: var(--bb-warn); }
.bb-im-none { padding: 20px 6px; color: var(--bb-text-muted); }

.bb-im-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bb-surface-sunken); }
.bb-im-bar__ok { background: var(--bb-ok); }
.bb-im-bar__ask { background: var(--bb-warn); }
.bb-im-bar__off { background: var(--bb-text-muted); }
.bb-im-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bb-im-tiles > div { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--bb-border); border-radius: 12px; }
.bb-im-tiles b { display: block; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-im-tiles small { color: var(--bb-text-muted); }
.bb-im-ask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-im-ask p { margin: 4px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-im-ask__acts { display: grid; gap: 8px; min-width: 190px; }
.bb-im-answered { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--bb-text-success); font-weight: 600; }
.bb-im-eg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bb-im-eg span { padding: 2px 10px; border-radius: 6px; background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); }
.bb-im-words { display: grid; }
.bb-im-word { display: grid; grid-template-columns: minmax(0, 1fr) 90px 220px; gap: 14px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-im-word--head { font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); }
.bb-im-count { text-align: right; color: var(--bb-text-muted); }
.bb-im-one { display: flex; gap: 10px; align-items: center; max-width: 440px; }
.bb-im-one > div:first-child { flex: 1; }
.bb-im-leftrow { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-im-match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-im-match-row small { display: block; color: var(--bb-text-muted); }
.bb-im-more summary { cursor: pointer; color: var(--bb-accent); }

.bb-im-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bb-im-stats > div { padding: 16px 18px; border-radius: 12px; background: var(--bb-surface-sunken); }
.bb-im-stats b { display: block; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-im-stats span { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-im-fams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bb-im-fam { border: 1px solid var(--bb-border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.bb-im-fam__head { display: flex; justify-content: space-between; gap: 10px; }
.bb-im-fam__head small { color: var(--bb-text-muted); }
.bb-im-person { display: flex; align-items: center; gap: 10px; }
.bb-im-person > span:nth-child(2) { flex: 1; min-width: 0; }
.bb-im-person small { display: block; color: var(--bb-text-muted); }
.bb-im-ini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bb-surface-sunken); font-size: var(--bb-fs-caption); font-weight: 600; }
.bb-im-afterrow { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-im-afterrow small { display: block; color: var(--bb-text-muted); }
.bb-im-planrow { display: flex; align-items: center; gap: 24px; padding: 14px; border: 1px solid var(--bb-border); border-radius: 12px; }
.bb-im-planrow small { display: block; color: var(--bb-text-muted); }
.bb-im-planrow b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-im-go { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.bb-im-go p { margin: 0; }
.bb-im-wait { display: flex !important; align-items: center; gap: 12px; }

.bb-im-progress { max-width: 900px; }
.bb-im-bar--run { height: 12px; }
.bb-im-phases { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bb-im-phases li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; color: var(--bb-text-muted); }
.bb-im-phases li.is-run, .bb-im-phases li.is-done { color: var(--bb-text); }
.bb-im-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bb-border); }
.bb-im-phases .is-done .bb-im-dot { background: var(--bb-success-bg); border-color: transparent; color: var(--bb-text-success); }
.bb-im-phases .is-run .bb-im-dot { border-color: var(--bb-warn); border-top-color: transparent; animation: bb-im-spin 1s linear infinite; }
.bb-im-dot [class*="bb-ico-"]::before { width: 12px; height: 12px; }
@keyframes bb-im-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bb-im-phases .is-run .bb-im-dot { animation: none; } }

.bb-im-donehead { display: flex !important; align-items: center; gap: 18px; }
.bb-im-undo { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; border-color: var(--bb-warn); }
.bb-im-undo p { margin: 4px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-im-danger.dxbl-btn { color: var(--bb-text-danger); }
.bb-im-pairs { display: grid; }
.bb-im-pair { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-im-pair--head { font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); border-top: 0; }
.bb-im-pair small { display: block; color: var(--bb-text-muted); }
.bb-im-twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bb-im-mini { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.bb-im-mini small { display: block; color: var(--bb-text-muted); }

.bb-im-rail { display: grid; gap: 12px; position: sticky; top: var(--bb-page-sticky-top, 12px); }
.bb-im-rail section.bb-card { padding: 16px 18px; display: grid; gap: 8px; }
.bb-im-yours h2 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-im-yours dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: var(--bb-fs-body); }
.bb-im-yours dt { color: var(--bb-text-muted); }
.bb-im-yours dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.bb-im-promise ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: var(--bb-fs-body); }
.bb-im-promise li { display: flex; gap: 10px; align-items: flex-start; }
.bb-im-promise [class*="bb-ico-"] { color: var(--bb-text-success); flex: none; }
.bb-im-rail [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-im-help { grid-template-columns: auto minmax(0, 1fr); align-items: start; font-size: var(--bb-fs-body); }
.bb-im-help p { margin: 0; }

.bb-im-hist__row { display: grid; grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr) 80px 150px 90px; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--bb-border-subtle); font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-im-hist__row--head { border-top: 0; font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); }

@media (max-width: 1100px) {
    .bb-im-grid { grid-template-columns: minmax(0, 1fr); }
    .bb-im-rail { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bb-im-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-im-howto, .bb-im-fams, .bb-im-twin { grid-template-columns: minmax(0, 1fr); }
    .bb-im-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bb-im-col--head { display: none; }
}
@media (max-width: 767px) {
    .bb-im { display: none; }
    .bb-im-small { display: block; max-width: 480px; margin: 48px auto; padding: 0 20px; text-align: center; }
}
/* ---- Add a member (setup mock-up, add-member) ---- */
.bb-ico-users::before { -webkit-mask-image: url("icons/fa-duo-users.svg"); mask-image: url("icons/fa-duo-users.svg"); }
.bb-ico-user::before { -webkit-mask-image: url("icons/fa-user.svg"); mask-image: url("icons/fa-user.svg"); }
.bb-ico-money-check-dollar::before { -webkit-mask-image: url("icons/fa-duo-money-check-dollar.svg"); mask-image: url("icons/fa-duo-money-check-dollar.svg"); }
.bb-ico-clock-rotate-left::before { -webkit-mask-image: url("icons/fa-duo-clock-rotate-left.svg"); mask-image: url("icons/fa-duo-clock-rotate-left.svg"); }
.bb-am-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bb-am-titlebar .Page_Title { margin-right: auto; }
.bb-am-where { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-am { display: grid; gap: 12px; padding: 16px 0 72px; }
.bb-am-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; border-bottom: 1px solid var(--bb-border-subtle); padding-bottom: 10px; }
.bb-am-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: none; font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-am-step b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--bb-border); font-size: var(--bb-fs-caption); }
button.bb-am-step { cursor: pointer; color: var(--bb-text); }
button.bb-am-step:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-am-steps .is-now .bb-am-step { color: var(--bb-text); background: var(--bb-accent-soft); }
.bb-am-steps .is-now .bb-am-step b, .bb-am-steps .is-done .bb-am-step b { background: var(--bb-accent); border-color: var(--bb-accent); color: var(--bb-text-onbrand); }
.bb-am-body { display: grid; gap: 16px; align-items: start; }
.bb-am-body--rail { grid-template-columns: minmax(0, 1fr) 320px; }
.bb-am-main { display: grid; gap: 12px; min-width: 0; }
.bb-am-sec { display: grid; gap: 12px; }
.bb-am-sec h2, .bb-am-sec h3 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-am-sec p { margin: 0; }
.bb-am-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.bb-am-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-am-person { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--bb-border-subtle); border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); }
.bb-am-person__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bb-am-classes { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-am-invite { display: grid; gap: 4px; padding: 12px; border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); }
.bb-am-more > summary { cursor: pointer; font-weight: 600; }
.bb-am-more[open] > summary { margin-bottom: 12px; }
.bb-am-more summary small { color: var(--bb-text-muted); font-weight: 400; }
.bb-am-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.bb-am-nav__btns { display: flex; gap: 8px; }
.bb-am-rail { position: sticky; top: var(--bb-page-sticky-top, 72px); display: grid; gap: 10px; }
.bb-am-rail h3 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-am-due { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--bb-fs-subtitle2); }
.bb-am-due b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-am-sumline { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--bb-border-subtle); }
.bb-am-sumline small { color: var(--bb-text-muted); }
.bb-am-problems { margin: 6px 0 0; padding-left: 20px; }
.bb-am-dups, .bb-am-docs, .bb-am-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-am-dups small, .bb-am-docs small { color: var(--bb-text-muted); }
.bb-am-docs li, .bb-am-facts li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bb-am-done { display: grid; gap: 12px; justify-items: start; max-width: 720px; margin: 24px auto; }
.bb-am-done h2 { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-am-done__btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1100px) { .bb-am-body--rail { grid-template-columns: minmax(0, 1fr); } .bb-am-rail { position: static; } }
@media (max-width: 760px) { .bb-am-grid, .bb-am-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* ===== Review requests (bb-rv-*): setup card, member-record dialog, Home prompts. Layer-2 tokens only. ===== */
.bb-rv { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; padding: 16px 20px 24px; }
.bb-rv > * { min-width: 0; }
.bb-rv-card { padding: 18px 20px 20px; display: grid; gap: 12px; }
.bb-rv-where { margin: 0; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-rv-h { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-rv-sub { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); max-width: 62ch; text-wrap: pretty; }
.bb-rv-auto { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); }
.bb-rv-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bb-rv-row > .bb-rv-input { flex: 1 1 260px; min-width: 0; }
.bb-rv-howto { margin: 0; padding: 10px 12px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
/* The insets sit one step above the dark card, not the near-black sunken well. */
[data-bs-theme="dark"] .bb-rv-auto, [data-bs-theme="dark"] .bb-rv-howto { background: var(--bb-surface-raised); }
.bb-rv-moments { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--bb-border); }
.bb-rv-moments li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-rv-moments small { display: block; color: var(--bb-text-muted); }
.bb-rv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--bb-ctl-h-small, 36px); padding: 0 var(--bb-ctl-px, 14px); border: 1px solid; border-radius: var(--bb-radius);
    font-weight: 600; text-decoration: none; cursor: pointer; }
.bb-rv-btn--primary { color: var(--bb-btn-brand-fg); background: var(--bb-btn-brand-bg); border-color: var(--bb-btn-brand-fg); }
.bb-rv-btn--quiet { color: var(--bb-btn-quiet-fg); background: transparent; border-color: var(--bb-border-strong); }
.bb-rv-btn.is-off { opacity: .5; cursor: not-allowed; }
.bb-rv-btn:focus-visible, .bb-rv-link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
@media (pointer: coarse) { .bb-rv-btn { min-height: var(--bb-ctl-h-touch, 44px); } }
.bb-rv-why { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; border-left: 3px solid var(--bb-accent); background: var(--bb-accent-soft); border-radius: 0 var(--bb-radius) var(--bb-radius) 0; }
.bb-rv-why b { font-family: var(--bb-font-display); white-space: nowrap; }
[data-bs-theme="dark"] .bb-rv-why b { color: color-mix(in srgb, var(--bb-text) 82%, var(--bb-surface)); }
.bb-rv-why span { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-rv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--bb-fs-body); }
.bb-rv-checks li { display: flex; gap: 10px; align-items: baseline; }
.bb-rv-checks i { font-style: normal; font-weight: 600; color: var(--bb-btn-ok-fg); min-width: 1.2em; }
.bb-rv-link { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--bb-link); font: inherit; text-decoration: underline; cursor: pointer; }
.bb-rv-link[disabled] { opacity: .5; cursor: not-allowed; }
.bb-rv-prompt { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; margin-bottom: 12px; }
.bb-rv-cap { border-left: 3px solid var(--bb-accent); }
.bb-rv-prompt .bb-rv-row { justify-content: flex-end; }
@media (max-width: 1150px) { .bb-rv-prompt { grid-template-columns: 1fr; } .bb-rv-prompt .bb-rv-row { justify-content: flex-start; } }

/* ---- Prospects (leads build lane 1: Features/Leads/Pipeline, Features/Leads/AddProspect) ----------------- */
.bb-pr { display: grid; gap: 12px; padding: 16px 0 72px; }
.bb-pr > * { min-width: 0; }
.bb-pr-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-pr-titlebar__acts { display: flex; align-items: center; gap: 8px; }
.bb-pr-add { display: inline-flex; align-items: center; min-height: var(--bb-ctl-h-small, 36px); padding: 0 var(--bb-ctl-px, 14px); border-radius: var(--bb-radius); border: 1px solid var(--bb-btn-brand-fg);
    color: var(--bb-btn-brand-fg); background: var(--bb-btn-brand-bg); font-weight: 600; text-decoration: none; }
.bb-pr-add:hover { background: var(--bb-btn-brand-bg-h); }
.bb-pr-add:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
@media (pointer: coarse) { .bb-pr-add { min-height: var(--bb-ctl-h-touch, 44px); } }
.bb-pr-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bb-pr-tab [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-pr-slot { padding: 24px; color: var(--bb-text-muted); }
.bb-ico-chevron-down::before { -webkit-mask-image: url("icons/fa-duo-chevron-down.svg"); mask-image: url("icons/fa-duo-chevron-down.svg"); }
.bb-pr-where { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pr-sub { margin: 0; }
.bb-pr-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.bb-pr-main, .bb-pr-rail { display: grid; gap: 12px; min-width: 0; }
.bb-pr-rail { position: sticky; top: var(--bb-page-sticky-top, 8px); }
.bb-pr-sec { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bb-pr-sec > h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-pr-sec > h2 .bb-tile { width: 32px; height: 32px; border-radius: 9px; }
.bb-pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bb-pr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-pr-grid--aligned { align-items: end; }
.bb-pr-grid--aligned > .bb-field { display: flex; flex-direction: column; justify-content: flex-end; }
.bb-pr-grid--aligned > .bb-field > .bb-label { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 .35em; }
.bb-pr-grid__full { grid-column: 1 / -1; }
.bb-pr-grid--person { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 96px 44px; align-items: end; }
.bb-pr-person { padding: 10px 12px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); }
.bb-pr-chips, .bb-pr-dates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-pr-chip { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bb-border); background: var(--bb-surface); color: var(--bb-text); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-pr-chip:hover { background: var(--bb-surface-sunken); }
.bb-pr-chip[aria-pressed="true"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); font-weight: 600; }
.bb-pr-chip:focus-visible, .bb-pr-slot:focus-visible, .bb-pr-more__btn:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pr-date { width: 180px; }
.bb-pr-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-pr-slot { display: grid; gap: 1px; min-height: 48px; padding: 6px 14px; text-align: left; border-radius: var(--bb-radius); border: 1px solid var(--bb-border); background: var(--bb-surface);
    color: var(--bb-text); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-pr-slot small { font-weight: 400; color: var(--bb-text-muted); }
.bb-pr-slot:hover { background: var(--bb-surface-sunken); }
.bb-pr-slot[aria-pressed="true"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-pr-more { display: grid; gap: 12px; }
.bb-pr-more__btn { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; padding: 6px 0; border: 0; background: transparent; text-align: left; color: var(--bb-text); font: inherit; cursor: pointer; }
.bb-pr-more__btn [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-pr-morebody { display: grid; gap: 12px; padding: 12px 14px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); }
.bb-pr-foot { margin-inline-start: auto; gap: 10px; }
.bb-pr-problems { margin: 6px 0 0; padding-left: 18px; }
.bb-pr-pre { white-space: pre-line; }
.bb-pr-dup { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bb-border); }
.bb-pr-dup > p { margin: 0; font-size: var(--bb-fs-body); }
.bb-pr-dup.is-stop > p { font-weight: 600; }
.bb-pr-line { display: flex; gap: 10px; align-items: center; font-size: var(--bb-fs-body); }
.bb-pr-line .bb-tile { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.bb-pr-done { display: grid; justify-items: center; gap: 10px; padding: 32px 20px; text-align: center; }
.bb-pr-done > h2 { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-pr-done > p { margin: 0; color: var(--bb-text-muted); }
.bb-pr-done__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.bb-pr-done__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@media (max-width: 1000px) {
    .bb-pr-split { grid-template-columns: minmax(0, 1fr); }
    .bb-pr-rail { position: static; }
    .bb-pr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .bb-pr { padding: 12px 0 72px; }
    .bb-pr-grid, .bb-pr-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .bb-pr-grid--person { grid-template-columns: minmax(0, 1fr) 96px 44px; }
    .bb-pr-grid--person > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .bb-pr-foot > * { flex: 1 1 100%; }
}
.bb-ico-tag::before { -webkit-mask-image: url("icons/fa-duo-tag.svg"); mask-image: url("icons/fa-duo-tag.svg"); }
.bb-ico-list::before { -webkit-mask-image: url("icons/fa-duo-list.svg"); mask-image: url("icons/fa-duo-list.svg"); }
.bb-ico-table-columns::before { -webkit-mask-image: url("icons/fa-duo-table-columns.svg"); mask-image: url("icons/fa-duo-table-columns.svg"); }
.bb-ico-user-xmark::before { -webkit-mask-image: url("icons/fa-duo-user-xmark.svg"); mask-image: url("icons/fa-duo-user-xmark.svg"); }
/* -- Prospects: strip, filters, list, board, bulk bar -- */
.bb-pr-everyone { display: grid; gap: 12px; min-width: 0; }
.bb-pr-views { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bb-pr-chip b { font-weight: 600; color: var(--bb-text-muted); margin-inline-start: 4px; }
.bb-pr-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.bb-pr-step { display: grid; gap: 4px; align-content: start; padding: 14px 16px; text-align: left; border: 0; border-right: 1px solid var(--bb-border); background: transparent; color: var(--bb-text); font: inherit; cursor: pointer; }
div.bb-pr-step { cursor: default; }
.bb-pr-step:hover:not(div) { background: var(--bb-surface-sunken); }
.bb-pr-step[aria-pressed="true"] { background: var(--bb-accent-soft); box-shadow: inset 0 -3px 0 var(--bb-accent); }
.bb-pr-step:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pr-step__k { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 600; }
.bb-pr-step__k [class*="bb-ico-"]::before { margin-inline-end: 0; }
.bb-pr-step > b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-pr-step__rate { min-height: 1.2em; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-pr-step--won { border-right: 0; }
.bb-pr-step--won > b { color: var(--bb-text-success); }
.bb-pr-strip__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--bb-border); background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-pr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-pr-sel { flex: 0 1 240px; min-width: 190px; }
.bb-pr-sel--sort { flex-basis: 200px; }
.bb-pr-grow { flex: 1 1 0; }
.bb-pr-count { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pr-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--bb-radius-lg); background: var(--bb-accent-soft); border: 1px solid var(--bb-accent); }
.bb-pr-empty { display: grid; justify-items: center; gap: 10px; padding: 36px 20px; text-align: center; color: var(--bb-text-muted); }
.bb-pr-empty h2 { margin: 0; color: var(--bb-text); font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-pr-empty p { margin: 0; max-width: 46ch; }
.bb-pr-more-rows { display: flex; justify-content: center; }
.bb-pr-tablewrap { padding: 0; overflow-x: auto; }
/* Prospect, form and source lists on DxGrid: cell content stacks; the open row reads as picked. */
.bb-pr-next, .bb-cap-stack { display: inline-grid; }
.bb-pr-acts, .bb-cap-acts, .bb-cap-switch { display: inline-flex; align-items: center; gap: 6px; }
.bb-cap-grid .is-sel { --dxbl-grid-row-bg: var(--bb-accent-soft); }
.bb-pr-person { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.bb-pr-person:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); border-radius: var(--bb-radius); }
.bb-pr-nm { display: grid; gap: 2px; min-width: 0; }
.bb-pr-nm b { font-weight: 600; }
.bb-pr-nm small, .bb-pr-sub2 { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-pr-sub2 { display: block; }
.bb-pr-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--bb-accent-soft); color: var(--bb-accent); font: 600 var(--bb-fs-caption) var(--bb-font); }
.bb-pr-av--lg { width: 48px; height: 48px; font-size: var(--bb-fs-body); }
.bb-pr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bb-pr-stage { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: var(--bb-fs-caption); font-weight: 600; white-space: nowrap; background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
.bb-pr-stage--new { background: var(--bb-info-bg); color: var(--bb-info); }
.bb-pr-stage--talking { background: var(--bb-accent-soft); color: var(--bb-accent); }
.bb-pr-stage--intro { background: var(--bb-success-bg); color: var(--bb-text-success); }
.bb-pr-stage--trial { background: var(--bb-warn-bg); color: var(--bb-warn); }
.bb-pr-stage--expired, .bb-pr-stage--cold { background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
.is-late { color: var(--bb-text-danger); font-weight: 600; }
.is-today { color: var(--bb-warn); font-weight: 600; }
.bb-pr-idle { display: block; color: var(--bb-text-danger); font-size: var(--bb-fs-caption); }
.bb-pr-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; align-items: start; padding-bottom: 6px; }
.bb-pr-col { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); border: 1px solid var(--bb-border); }
.bb-pr-col h3 { display: flex; justify-content: space-between; margin: 0 0 2px; font: 600 var(--bb-fs-body) var(--bb-font); }
.bb-pr-col h3 b { color: var(--bb-text-muted); }
.bb-pr-card { display: grid; gap: 4px; padding: 10px 12px; text-align: left; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; cursor: pointer; }
.bb-pr-card:hover { border-color: var(--bb-accent); }
.bb-pr-card:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pr-card small { color: var(--bb-text-muted); }
.bb-pr-card__ft { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: var(--bb-fs-caption); }
@media (max-width: 1000px) { .bb-pr-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb-pr-step { border-bottom: 1px solid var(--bb-border); } }
@media (max-width: 640px) { .bb-pr-sel { flex-basis: 100%; } }
/* -- Prospect card (drawer) -- */
.bb-pr-scrim { position: fixed; inset: 0; z-index: 69; background: color-mix(in srgb, var(--bb-text) 30%, transparent); }
.bb-pr-drawer { position: fixed; top: var(--bb-shell-top, 64px); right: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; width: 480px; max-width: 100%; background: var(--bb-surface); color: var(--bb-text);
    border-left: 1px solid var(--bb-border); box-shadow: var(--bb-e3); }
.bb-pr-drawer:focus { outline: 0; }
.bb-pr-drawer__head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 12px; }
.bb-pr-drawer__who { flex: 1; min-width: 0; }
.bb-pr-drawer__who h2 { margin: 0; font: 600 var(--bb-fs-subtitle1)/1.25 var(--bb-font-display); overflow-wrap: anywhere; }
.bb-pr-drawer__who p { margin: 2px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pr-whofor { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: var(--bb-fs-body); }
.bb-pr-whofor > span { display: inline-flex; align-items: center; gap: 6px; }
.bb-pr-whofor .bb-pr-av { width: 24px; height: 24px; font-size: var(--bb-fs-caption); }
.bb-pr-drawer__body { display: grid; gap: 14px; align-content: start; padding: 0 18px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.bb-pr-drawer__foot { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--bb-border); background: var(--bb-surface); }
.bb-pr-drawer__foot > :first-child { flex: 1 1 100%; }
.bb-pr-stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-pr-stepper li { display: grid; gap: 4px; justify-items: start; }
.bb-pr-stepper__dot { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--bb-border); }
.bb-pr-stepper li.is-done .bb-pr-stepper__dot { background: var(--bb-accent); opacity: .5; }
.bb-pr-stepper li.is-now .bb-pr-stepper__dot { background: var(--bb-accent); }
.bb-pr-stepper li.is-now { color: var(--bb-text); font-weight: 600; }
.bb-pr-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-pr-quick__link { display: inline-flex; align-items: center; min-height: var(--bb-ctl-h-small, 36px); padding: 0 var(--bb-ctl-px, 14px); border-radius: var(--bb-radius); border: 1px solid var(--bb-border-strong);
    color: var(--bb-text); font-weight: 600; text-decoration: none; }
.bb-pr-quick__link:hover { background: var(--bb-accent-soft); }
.bb-pr-quick__link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
@media (pointer: coarse) { .bb-pr-quick__link { min-height: var(--bb-ctl-h-touch, 44px); } }
.bb-pr-nextbox { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); }
.bb-pr-nextbox > p { flex: 1; margin: 0; font-weight: 600; font-size: var(--bb-fs-body); }
.bb-pr-block { display: grid; gap: 8px; }
.bb-pr-block > h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font: 600 var(--bb-fs-caption) var(--bb-font); text-transform: uppercase; letter-spacing: .04em; color: var(--bb-text-muted); }
.bb-pr-personline { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.bb-pr-personline > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.bb-pr-personline small { color: var(--bb-text-muted); }
.bb-pr-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--bb-fs-body); }
.bb-pr-kv dt { color: var(--bb-text-muted); }
.bb-pr-kv dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.bb-pr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-pr-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bb-pr-timeline li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--bb-fs-body); }
.bb-pr-timeline .bb-tile { width: 28px; height: 28px; border-radius: 8px; }
.bb-pr-timeline .bb-tile [class*="bb-ico-"]::before { width: 15px; height: 15px; }
.bb-pr-timeline li > span:nth-child(2) { display: grid; min-width: 0; overflow-wrap: anywhere; }
.bb-pr-timeline small { color: var(--bb-text-muted); }
@media (max-width: 640px) { .bb-pr-drawer { width: 100%; } }
/* -- Sign up as members dialog -- */
.bb-pr-signup { display: grid; gap: 10px; }
.bb-pr-signup__row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.5fr) minmax(190px, 1.5fr) 150px 110px; gap: 10px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); }
.bb-pr-signup__row.is-off { opacity: .6; grid-template-columns: 1fr; }
.bb-pr-signup__who { display: grid; gap: 2px; }
.bb-pr-signup__who small { color: var(--bb-text-muted); }
.bb-pr-signup__due { display: grid; gap: 4px; align-content: start; }
.bb-pr-signup__due b { font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-pr-signup__need { grid-column: 1 / -1; display: grid; grid-template-columns: auto repeat(2, minmax(160px, 220px)); gap: 10px 14px; align-items: end; padding-top: 6px; border-top: 1px dashed var(--bb-border); }
@media (max-width: 900px) { .bb-pr-signup__row { grid-template-columns: minmax(0, 1fr); } .bb-pr-signup__need { grid-template-columns: minmax(0, 1fr); } }
/* -- Follow-ups tab, settings dialog -- */
.bb-pr-fu { display: grid; gap: 12px; }
.bb-pr-hidden { display: none; }
.bb-pr-viewtools { display: inline-flex; gap: 8px; }
.bb-pr-fuline { display: grid; grid-template-columns: minmax(180px, 1.4fr) 90px minmax(0, 2fr); gap: 8px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bb-border); }
.bb-pr-fudue { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-pr-fuacts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bb-pr-fubtn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--bb-ctl-h-compact, 32px); padding: 0 12px; border-radius: var(--bb-radius); border: 1px solid var(--bb-border-strong); background: var(--bb-surface);
    color: var(--bb-text); font: 600 var(--bb-fs-body) var(--bb-font); text-decoration: none; cursor: pointer; }
.bb-pr-fubtn:hover { background: var(--bb-accent-soft); }
.bb-pr-fubtn:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pr-fubtn [class*="bb-ico-"]::before { margin-inline-end: 0; }
@media (pointer: coarse) { .bb-pr-fubtn { min-height: var(--bb-ctl-h-touch, 44px); padding: 0 16px; } }
.bb-pr-week { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bb-pr-week > div { display: grid; gap: 2px; }
.bb-pr-week b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-pr-setgroup { display: grid; gap: 10px; }
.bb-pr-setgroup > h3 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-pr-setgroup > p { margin: 0; }
.bb-pr-personline .bb-pr-fuacts { flex: none; display: flex; margin-inline-start: auto; }
.bb-pr-personline > .bb-pr-futext { flex: 1; min-width: 0; display: grid; }
@media (max-width: 760px) {
    .bb-pr-fuline { grid-template-columns: minmax(0, 1fr) auto; }
    .bb-pr-fuline .bb-pr-fuacts { grid-column: 1 / -1; justify-content: flex-start; }
    .bb-pr-fuacts > a.bb-pr-fubtn { flex: 1 1 100%; justify-content: center; }
}
/* -- Import dialog -- */
.bb-pr-importpick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pr-fileinput { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.bb-pr-importrows { display: grid; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); overflow: hidden; }
.bb-pr-importrow { display: grid; grid-template-columns: 70px minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; padding: 6px 12px; font-size: var(--bb-fs-body); border-top: 1px solid var(--bb-border); align-items: center; }
.bb-pr-importrow:first-child { border-top: 0; }
.bb-pr-importrow > span { color: var(--bb-text-muted); overflow-wrap: anywhere; }
.bb-pr-importrow.is-bad > span:last-child { color: var(--bb-text-danger); font-weight: 600; }
@media (max-width: 700px) { .bb-pr-importrow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bb-pr-quick { display: grid; grid-template-columns: 1fr 1fr; } .bb-pr-quick > * { justify-content: center; min-height: var(--bb-ctl-h-touch, 44px); } .bb-pr-actions > * { flex: 1 1 45%; } .bb-pr-drawer__foot > * { flex: 1 1 100%; } }
/* ===== Communications, email (bb-em-*): Compose, Queue, Settings, Letters. Layer-2 tokens only. ===== */
.bb-em { display: grid; gap: 14px; padding: 16px 0 28px; }
.bb-em > * { min-width: 0; }
.bb-em-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--bb-border); }
.bb-em-nav a { padding: 9px 14px; color: var(--bb-text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.bb-em-nav a:hover { color: var(--bb-text); }
.bb-em-nav a[aria-current="page"] { color: var(--bb-text); border-bottom-color: var(--bb-accent); }
.bb-em-nav a:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-em-sub { margin: 0; color: var(--bb-text-muted); max-width: 70ch; text-wrap: pretty; }
.bb-em-compose { display: grid; grid-template-columns: minmax(0, 3fr) minmax(380px, 2fr); gap: 20px; align-items: start; }
.bb-em-compose__main { display: grid; gap: 14px; }
.bb-em-compose__side { position: sticky; top: var(--bb-page-sticky-top, 8px); display: grid; gap: 10px; }
@media (max-width: 1100px) { .bb-em-compose { grid-template-columns: 1fr; } .bb-em-compose__side { position: static; } }
.bb-em-step { padding: 0; overflow: hidden; }
.bb-em-step__head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-em-step__head h2 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); flex: 1 1 auto; }
.bb-em-step__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bb-accent-soft); color: var(--bb-text); font: 600 var(--bb-fs-caption) var(--bb-font); }
.bb-em-step__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 18px 18px; }
.bb-em-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.bb-em-filters label { display: grid; gap: 4px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-em-filters .bb-em-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .bb-em-filters { grid-template-columns: 1fr; } }
.bb-em-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-em-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 1px solid var(--bb-border-strong); border-radius: 999px; background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); }
.bb-em-chip button { border: 0; background: transparent; color: var(--bb-text-muted); padding: 2px 6px; cursor: pointer; border-radius: 999px; font-size: var(--bb-fs-body); line-height: 1; }
.bb-em-chip button:hover { color: var(--bb-text); }
.bb-em-chip button:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-em-chip small { color: var(--bb-text-muted); }
.bb-em-find { position: relative; }
.bb-em-hits { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); box-shadow: var(--bb-e2); display: grid; gap: 2px; max-height: 280px; overflow: auto; }
.bb-em-hits button { width: 100%; text-align: left; border: 0; background: transparent; color: var(--bb-text); padding: 8px 10px; border-radius: var(--bb-radius-sm); cursor: pointer; display: grid; gap: 1px; font: inherit; }
.bb-em-hits button:hover, .bb-em-hits button:focus-visible { background: var(--bb-surface-sunken); outline: 0; }
.bb-em-hits small { color: var(--bb-text-muted); }
.bb-em-count { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 12px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-em-count b { color: var(--bb-text); font-family: var(--bb-font-display); }
.bb-em-count .bb-em-count__who { flex-basis: 100%; color: var(--bb-text); }
[data-bs-theme="dark"] .bb-em-count, [data-bs-theme="dark"] .bb-em-chip { background: var(--bb-surface-raised); }
.bb-em-skips { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; display: grid; gap: 2px; font-size: var(--bb-fs-body); }
.bb-em-skips li { display: flex; gap: 10px; justify-content: space-between; padding: 4px 2px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-em-skips span { color: var(--bb-text-muted); }
.bb-em-opts { display: grid; gap: 10px; }
.bb-em-opt { display: grid; gap: 4px; }
.bb-em-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bb-em-editor { min-height: 260px; max-width: 100%; min-width: 0; }
.bb-em-when { display: grid; gap: 10px; }
.bb-em-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.bb-em-pv { padding: 0; overflow: hidden; }
.bb-em-pv__bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-em-pv__bar h2 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-em-pv__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 14px; margin: 0; font-size: var(--bb-fs-body); border-bottom: 1px solid var(--bb-border-subtle); }
.bb-em-pv__meta dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-em-pv__meta dd { margin: 0; overflow-wrap: anywhere; }
.bb-em-pv__frame { display: block; width: 100%; height: 520px; border: 0; background: var(--bb-surface); }
.bb-em-pv__frame--phone { width: 320px; max-width: 100%; margin: 0 auto; border-left: 1px solid var(--bb-border); border-right: 1px solid var(--bb-border); }
.bb-em-pv__empty { padding: 22px 16px; color: var(--bb-text-muted); text-align: center; }
.bb-em-pv__note { margin: 0; padding: 8px 14px 12px; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-em-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-em-tab b { font-family: var(--bb-font-display); }
.bb-em-num { font-family: var(--bb-font-display); margin-inline-start: 6px; }
.bb-em-num--bad { color: var(--bb-text-danger); }
.bb-em-statuscell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bb-em-statuscell .bb-em-act { margin-top: 0; flex-wrap: nowrap; width: auto; }
.bb-em-act--row { margin-top: 0; }
.bb-em-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.bb-em-status { display: inline-flex; gap: 6px; align-items: baseline; font-weight: 600; }
.bb-em-status--ok { color: var(--bb-text-success); }
.bb-em-status--bad { color: var(--bb-text-danger); }
.bb-em-status--wait { color: var(--bb-text-muted); }
/* A row's action buttons share one fixed width and wrap in whole buttons; two across below 1200. */
.bb-em-act { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; margin-top: 4px; }
.bb-em-act > * { flex: 0 1 9.5rem; width: 9.5rem; max-width: 100%; white-space: nowrap; justify-content: center; }
@media (max-width: 1199.98px) { .bb-em-act { width: calc(2 * 9.5rem + 8px); } }
.bb-em-link { border: 0; padding: 0; background: transparent; color: var(--bb-link); font: inherit; text-decoration: underline; cursor: pointer; }
.bb-em-link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-em-link[disabled] { opacity: .5; cursor: not-allowed; }
.bb-em-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-em-empty { padding: 28px 16px; text-align: center; color: var(--bb-text-muted); display: grid; gap: 8px; }
.bb-em-empty b { color: var(--bb-text); font-family: var(--bb-font-display); }
.bb-em-choice { display: grid; gap: 10px; }
.bb-em-seg { gap: 6px; }
.bb-em-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.bb-em-form label { display: grid; gap: 4px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-em-form .bb-em-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .bb-em-form { grid-template-columns: 1fr; } }
.bb-em-dnscell { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.bb-em-dnscell code { font: var(--bb-fs-caption) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bb-em-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.bb-em-stat { flex: 1 1 140px; padding: 12px 14px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); display: grid; gap: 2px; }
.bb-em-stat b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-em-stat span { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
[data-bs-theme="dark"] .bb-em-stat { background: var(--bb-surface-raised); }
.bb-em-groups { display: grid; gap: 14px; }
.bb-em-group h2 { margin: 0 0 6px; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-em-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--bb-border-strong); font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-em-edit { display: grid; gap: 12px; }
.bb-em-count-hint { text-align: right; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-em-sent { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-em-dxeditor { width: 100%; min-height: 260px; border-radius: var(--bb-radius); }

/* ---- Texts: the team inbox and Texting setup (Features/Communications/Inbox, Features/Communications/Texting). Roles only; no hex. ---- */
.bb-tx { display: grid; gap: 14px; padding: 16px 0 28px; }
.bb-tx > * { min-width: 0; }
.bb-tx-sub { margin: 0; color: var(--bb-text-muted); }
.bb-tx-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.bb-tx-badge b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--bb-accent); color: var(--bb-text-onbrand); font-size: var(--bb-fs-caption); }
.bb-tx-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; min-height: 560px; padding: 0; overflow: hidden; }
.bb-tx-shell > * { min-width: 0; }
.bb-tx-list { display: grid; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--bb-border-subtle); }
.bb-tx-num { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bb-accent); color: var(--bb-text-onbrand); font-size: var(--bb-fs-caption); }
.bb-tx-num.is-zero { background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
.bb-tx-rows { overflow-y: auto; max-height: 640px; }
.bb-tx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--bb-border-subtle); background: transparent; color: var(--bb-text); font: inherit; text-align: left; cursor: pointer; }
.bb-tx-row:first-child { border-top: 0; }
.bb-tx-row:hover { background: var(--bb-surface-sunken); }
.bb-tx-row.is-on { background: var(--bb-accent-soft); box-shadow: inset 3px 0 0 var(--bb-accent); }
.bb-tx-row:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-tx-row b { display: block; font-weight: 600; }
.bb-tx-row.is-unread b { font-weight: 600; }
.bb-tx-row small { display: block; color: var(--bb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-tx-row.is-unread small { color: var(--bb-text); }
.bb-tx-row .bb-tx-when { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); text-align: right; }
.bb-tx-dot { display: block; width: 9px; height: 9px; margin: 6px 0 0 auto; border-radius: 50%; background: var(--bb-accent); }
.bb-tx-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--bb-accent-soft); color: var(--bb-accent); font: 600 var(--bb-fs-caption) var(--bb-font); }
.bb-tx-pill { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; background: var(--bb-surface-sunken); color: var(--bb-text-muted); font-size: var(--bb-fs-caption); font-weight: 600; white-space: nowrap; }
.bb-tx-pill--bad { background: var(--bb-danger-bg); color: var(--bb-text-danger); }
.bb-tx-pill--ok { background: var(--bb-success-bg); color: var(--bb-text-success); }
.bb-tx-pill--info { background: var(--bb-info-bg); color: var(--bb-info); }
.bb-tx-conv { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; border-right: 1px solid var(--bb-border-subtle); min-height: 0; }
.bb-tx-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-tx-head h2 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-tx-head small { display: block; color: var(--bb-text-muted); }
.bb-tx-head .bb-tx-assign { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bb-tx-back { display: none; border: 0; padding: 0; background: transparent; color: var(--bb-link); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-tx-msgs { padding: 16px; display: grid; gap: 6px; align-content: start; background: var(--bb-surface-sunken); overflow-y: auto; max-height: 520px; }
.bb-tx-bubble { width: fit-content; max-width: 78%; padding: 9px 12px; border: 1px solid var(--bb-border-subtle); border-radius: 16px 16px 16px 4px; background: var(--bb-surface); font-size: var(--bb-fs-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.bb-tx-bubble--out { justify-self: end; border-color: transparent; border-radius: 16px 16px 4px 16px; background: var(--bb-info); color: var(--bb-text-onbrand); }
.bb-tx-meta { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-tx-meta--out { text-align: right; }
.bb-tx-meta--bad { color: var(--bb-text-danger); font-weight: 600; }
.bb-tx-bar { margin: 0; padding: 9px 16px; border-top: 1px solid var(--bb-border-subtle); background: var(--bb-danger-bg); color: var(--bb-text-danger); font-size: var(--bb-fs-body); font-weight: 600; }
.bb-tx-bar--warn { background: var(--bb-accent-soft); color: var(--bb-text); }
.bb-tx-bar .bb-btn-secondary { margin-left: 10px; }
.bb-tx-collide { display: flex; gap: 8px; align-items: center; padding: 6px 16px; background: var(--bb-info-bg); color: var(--bb-info); font-size: var(--bb-fs-body); }
.bb-tx-collide i { width: 6px; height: 6px; border-radius: 50%; background: var(--bb-info); opacity: .55; }
.bb-tx-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-tx-quick button { padding: 3px 11px; border: 1px solid var(--bb-border); border-radius: 999px; background: var(--bb-surface); color: var(--bb-text); font: 600 var(--bb-fs-caption) var(--bb-font); cursor: pointer; }
.bb-tx-quick button:hover { background: var(--bb-surface-sunken); }
.bb-tx-quick button:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-tx-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 10px 12px; align-items: end; }
.bb-tx-reply textarea { width: 100%; min-height: 56px; padding: 9px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; resize: vertical; }
.bb-tx-reply textarea:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-tx-reply textarea:disabled { background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
.bb-tx-count { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-tx-side { display: grid; gap: 14px; align-content: start; padding: 16px; font-size: var(--bb-fs-body); }
.bb-tx-side h3 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-tx-side dl { margin: 0; display: grid; gap: 8px; }
.bb-tx-side dt { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-tx-side dd { margin: 0; font-weight: 600; }
.bb-tx-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bb-tx-side li { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--bb-border-subtle); padding-top: 6px; }
.bb-tx-side li:first-child { border-top: 0; padding-top: 0; }
.bb-tx-empty { display: grid; gap: 8px; place-content: center; padding: 40px 16px; text-align: center; color: var(--bb-text-muted); }
.bb-tx-empty b { color: var(--bb-text); font-family: var(--bb-font-display); }
.bb-tx-pick { display: grid; place-items: center; padding: 40px 16px; color: var(--bb-text-muted); }
.bb-tx-offer { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; padding: 22px; align-items: center; }
.bb-tx-offer h2 { margin: 0 0 6px; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-tx-offer ul { margin: 8px 0 0; padding-left: 18px; }
.bb-tx-price { display: grid; gap: 6px; padding: 16px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); }
.bb-tx-price b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-tx-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.bb-tx-grid > * { min-width: 0; }
.bb-tx-stack { display: grid; gap: 14px; }
.bb-tx-card { padding: 16px 18px; display: grid; gap: 12px; }
.bb-tx-card h2 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-tx-meter { display: grid; gap: 6px; }
.bb-tx-meter__top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--bb-fs-body); }
.bb-tx-meter__bar { height: 8px; border-radius: 999px; background: var(--bb-surface-sunken); overflow: hidden; }
.bb-tx-meter__bar i { display: block; height: 100%; border-radius: 999px; background: var(--bb-accent); }
.bb-tx-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.bb-tx-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-tx-steps li:first-child { border-top: 0; }
.bb-tx-steps p { margin: 0; font-weight: 600; }
.bb-tx-steps small { display: block; color: var(--bb-text-muted); font-weight: 400; }
.bb-tx-form { display: grid; gap: 10px; }
.bb-tx-form label { font-weight: 600; font-size: var(--bb-fs-body); }
.bb-tx-form textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; }
.bb-tx-form select { padding: 6px 10px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; }
.bb-tx-inline { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Texting onboarding (Features/Communications/Texting/TextingOnboard.razor): facts list, hero, reasons. Layout only; every colour is a role token. */
.bb-tx-facts { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 6px 16px; }
.bb-tx-facts dt { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); align-self: center; }
.bb-tx-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bb-tx-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.bb-tx-hero { display: flex; gap: 16px; align-items: center; }
.bb-tx-hero h2 { margin: 6px 0 2px; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-tx-h3 { margin: 4px 0 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-tx-reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bb-tx-reasons li { padding: 10px 12px; border-left: 3px solid var(--bb-text-danger); background: var(--bb-danger-bg); border-radius: var(--bb-radius); }
.bb-tx-url { overflow-wrap: anywhere; font-weight: 600; }
@media (max-width: 1000px) {
    .bb-tx-shell { grid-template-columns: 280px minmax(0, 1fr); }
    .bb-tx-side { display: none; }
    .bb-tx-grid, .bb-tx-offer { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .bb-tx { padding: 8px 0 20px; }
    .bb-tx-shell { grid-template-columns: 1fr; }
    .bb-tx-shell[data-pane="list"] .bb-tx-conv, .bb-tx-shell[data-pane="list"] .bb-tx-side { display: none; }
    .bb-tx-shell[data-pane="conv"] .bb-tx-list { display: none; }
    .bb-tx-list { border-right: 0; }
    .bb-tx-conv { border-right: 0; }
    .bb-tx-back { display: inline-flex; }
    .bb-tx-bubble { max-width: 88%; }
    .bb-tx-rows, .bb-tx-msgs { max-height: none; }
}
/* -- Prospects > Results -- */
.bb-pr-rs { display: grid; gap: 12px; min-width: 0; }
.bb-pr-rs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-pr-rs-range, .bb-pr-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bb-surface-sunken); border: 1px solid var(--bb-border); }
.bb-pr-rs-range > button, .bb-pr-toggle > button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--bb-text-muted); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-pr-rs-range > button[aria-pressed="true"], .bb-pr-toggle > button[aria-pressed="true"] { background: var(--bb-surface); color: var(--bb-text); box-shadow: 0 0 0 1px var(--bb-border); }
.bb-pr-rs-range > button:focus-visible, .bb-pr-toggle > button:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
@media (pointer: coarse) { .bb-pr-rs-range > button, .bb-pr-toggle > button { min-height: var(--bb-ctl-h-touch, 44px); } }
.bb-pr-rs-answer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 18px; border-inline-start: 4px solid var(--bb-accent); }
.bb-pr-rs-answer h2 { margin: 0 0 2px; color: var(--bb-text-muted); font: 600 var(--bb-fs-body) var(--bb-font); }
.bb-pr-rs-answer p { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); color: var(--bb-text); }
.bb-pr-rs-answer p.bb-pr-rs-few { font: 600 var(--bb-fs-body) var(--bb-font); }
.bb-pr-rs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bb-pr-rs-stat { display: grid; gap: 4px; align-content: start; padding: 14px 16px; }
.bb-pr-rs-stat > span { color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 600; }
.bb-pr-rs-stat > b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-pr-rs-stat > b.is-few { font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-pr-rs-stat > small { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-pr-rs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px 8px; }
.bb-pr-rs-head > h2 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-pr-rs-pad { margin: 0; padding: 8px 16px 12px; }
.bb-pr-rs-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--bb-border); color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pr-rs-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-pr-rs-few { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pr-rs-cell { display: inline-flex; align-items: center; gap: 8px; }
.bb-pr-rs-cell .bb-bar { width: 56px; }
.bb-pr-rs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bb-pr-rs-line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 4.5rem; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bb-border); }
.bb-pr-rs-line:first-of-type { border-top: 0; }
.bb-pr-rs-line > span:first-child { display: grid; }
.bb-pr-rs-gap { margin: 0; padding: 6px 0; border-top: 1px solid var(--bb-border); color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-pr-rs-month { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bb-pr-rs-spendrow { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; align-items: center; gap: 4px 12px; }
@media (max-width: 1000px) { .bb-pr-rs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb-pr-rs-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .bb-pr-rs-stats { grid-template-columns: minmax(0, 1fr); } .bb-pr-rs-line { grid-template-columns: minmax(0, 1fr) 4.5rem; } .bb-pr-rs-line > .bb-bar { grid-column: 1 / -1; grid-row: 2; } .bb-pr-rs-spendrow { grid-template-columns: minmax(0, 1fr); } }
/* ===== Leads capture (bb-cap-*, bb-intro*): Prospect forms, Lead sources, Connections and the public intro page. Layer-2 tokens only. ===== */
.bb-cap { display: grid; gap: 14px; padding: 16px 0 28px; }
.bb-cap > * { min-width: 0; }
.bb-cap-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--bb-border); }
.bb-cap-nav a { padding: 9px 14px; color: var(--bb-text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.bb-cap-nav a:hover { color: var(--bb-text); }
.bb-cap-nav a[aria-current="page"] { color: var(--bb-text); border-bottom-color: var(--bb-accent); }
.bb-cap-nav a:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-cap-sub { margin: 0; color: var(--bb-text-muted); max-width: 70ch; text-wrap: pretty; }
.bb-cap-sub2 { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); font-weight: 400; }
.bb-cap-h { margin: 14px 0 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-cap-spacer { flex: 1 1 auto; }
.bb-cap-tablewrap { padding: 0; overflow-x: auto; }
.bb-cap-tablewrap__bar { display: flex; justify-content: flex-end; padding: 10px 14px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-cap-pill { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: var(--bb-fs-caption); font-weight: 600; background: var(--bb-surface-sunken); color: var(--bb-text-muted); white-space: nowrap; }
.bb-cap-pill--ok { background: var(--bb-ok-bg); color: var(--bb-text-success); }
.bb-cap-pill--warn { background: var(--bb-warn-bg); color: var(--bb-warn); }
.bb-cap-pill--gold { background: var(--bb-accent-soft); color: var(--bb-text); }
.bb-cap-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); gap: 16px; align-items: start; }
.bb-cap-split--drawer { grid-template-columns: minmax(0, 1fr) auto; }
.bb-cap-split--drawer > .bb-cap-drawer { width: min(380px, 100%); }
@media (max-width: 1100px) { .bb-cap-split, .bb-cap-split--drawer { grid-template-columns: 1fr; } .bb-cap-split--drawer > .bb-cap-drawer { width: 100%; } }
.bb-cap-editor, .bb-cap-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.bb-cap-card > * { min-width: 0; }
.bb-cap-editor h2, .bb-cap-card h2 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-cap-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .bb-cap-cards { grid-template-columns: 1fr; } }
.bb-cap-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-cap-line__text { display: grid; gap: 2px; min-width: 0; }
.bb-cap-line__text small { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); font-weight: 400; }
.bb-cap-line__ctl { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.bb-cap-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-cap-chip { border: 1px solid var(--bb-border-strong); border-radius: 999px; background: transparent; color: var(--bb-text); padding: 4px 12px; font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-cap-chip[aria-pressed="true"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-cap-chip:disabled { opacity: .5; cursor: not-allowed; }
.bb-cap-chip:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
@media (pointer: coarse) { .bb-cap-chip { min-height: var(--bb-ctl-h-touch, 44px); } }
.bb-cap-q { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface-sunken); }
.bb-cap-q--new { border-style: dashed; background: transparent; }
.bb-cap-q__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bb-cap-q__top button { margin-inline-start: auto; }
.bb-cap-code { margin: 0; padding: 11px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface-sunken); font: 500 .8rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.bb-cap-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bb-cap-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .bb-cap-pair { grid-template-columns: 1fr; } }
.bb-cap-sentence { margin-top: 6px; padding: 12px 14px; border-radius: var(--bb-radius); background: var(--bb-accent-soft); border-inline-start: 4px solid var(--bb-accent); font-size: var(--bb-fs-body); }
.bb-cap-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.bb-cap-drawer { display: grid; gap: 8px; align-content: start; border-inline-start: 4px solid var(--bb-accent); }
.bb-cap-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bb-cap-drawer__head h2 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-cap-x { border: 0; background: transparent; color: var(--bb-text-muted); padding: 4px; border-radius: var(--bb-radius); cursor: pointer; }
.bb-cap-x:hover { color: var(--bb-text); }
.bb-cap-x:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-cap-linkcard { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); }
.bb-cap-linkcard.is-picked { border-color: var(--bb-accent); }
.bb-cap-linkcard p { margin: 0; }
.bb-cap-linkcard__name { display: flex; align-items: baseline; gap: 8px; border: 0; background: transparent; color: var(--bb-text); padding: 0; font: inherit; text-align: start; cursor: pointer; }
.bb-cap-linkcard__name:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-cap-qr { width: 160px; height: 160px; padding: 6px; border-radius: var(--bb-radius); background: var(--bb-surface-raised, var(--bb-surface)); border: 1px solid var(--bb-border); }
.bb-cap-qr svg { width: 100%; height: 100%; display: block; }
.bb-cap-preview { --bb-cap-accent: var(--bb-brand); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); overflow: hidden; background: var(--bb-surface-sunken); }
.bb-cap-preview__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bb-surface-raised); color: var(--bb-text-muted); font-size: var(--bb-fs-caption); border-bottom: 1px solid var(--bb-border-subtle); }
.bb-cap-preview__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--bb-border-strong); }
.bb-cap-preview__bar span { margin-inline-start: 8px; }
.bb-cap-preview__form { display: grid; gap: 10px; margin: 14px; padding: 16px; max-width: 520px; background: var(--bb-surface); color: var(--bb-text); border-radius: var(--bb-radius); border: 1px solid var(--bb-border-subtle); }
.bb-cap-preview__title { font-size: var(--bb-fs-subtitle2); }
.bb-cap-preview__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-cap-preview__form label { display: grid; gap: 4px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-cap-preview__form input:not([type="checkbox"]), .bb-cap-preview__form select, .bb-cap-preview__form textarea { height: 36px; border: 1px solid var(--bb-border-strong); border-radius: 6px; padding: 0 10px; background: var(--bb-surface); color: var(--bb-text); font: inherit; }
.bb-cap-preview__form textarea { height: auto; padding: 8px 10px; }
.bb-cap-preview__box { display: flex !important; align-items: flex-start; gap: 8px; }
.bb-cap-preview__go { height: 40px; border: 0; border-radius: 6px; background: var(--bb-cap-accent); color: var(--bb-text-onbrand); font: 600 var(--bb-fs-body) var(--bb-font); }
/* Public intro lesson page: one anonymous card on the same palette. */
.bb-intro { margin: 0; background: var(--bb-surface-sunken); color: var(--bb-text); font-family: var(--bb-font); }
.bb-intro__wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.bb-intro__card { display: grid; gap: 14px; padding: 22px; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); }
.bb-intro__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bb-intro__top h1 { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); text-wrap: balance; }
.bb-intro__lang { color: var(--bb-link); font-size: var(--bb-fs-body); white-space: nowrap; }
.bb-intro__sub { margin: 0; color: var(--bb-text-muted); }
.bb-intro__h { margin: 4px 0 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-intro__days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.bb-intro__days a { display: grid; justify-items: center; gap: 2px; min-width: 52px; padding: 8px 6px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); color: var(--bb-text); text-decoration: none; font-size: var(--bb-fs-caption); }
.bb-intro__days a b { font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-intro__days a[aria-current="date"] { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-intro__days a:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-intro__form { display: grid; gap: 14px; }
.bb-intro__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bb-intro__times { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-intro__time { position: relative; }
.bb-intro__time input { position: absolute; opacity: 0; inset: 0; }
.bb-intro__time span { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); font-weight: 600; cursor: pointer; }
.bb-intro__time input:checked + span { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-intro__time input:focus-visible + span { box-shadow: var(--bb-focus-ring); }
.bb-intro__time small { color: var(--bb-text-muted); font-weight: 400; }
.bb-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .bb-intro__grid { grid-template-columns: 1fr; } }
.bb-intro__field { display: grid; gap: 4px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-intro__field input { min-height: 40px; padding: 0 10px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; }
.bb-intro__field input:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-intro__who { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.bb-intro__who legend { padding: 0; font-weight: 600; }
.bb-intro__who > label { display: inline-flex; align-items: center; gap: 8px; }
.bb-intro__hint { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-intro__consent { display: flex; align-items: flex-start; gap: 8px; font-size: var(--bb-fs-body); }
.bb-intro__go { min-height: 44px; border: 0; border-radius: var(--bb-radius); background: var(--bb-brand); color: var(--bb-text-onbrand); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-intro__go:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-intro__thanks { text-align: center; justify-items: center; }
.bb-intro__thanks h1 { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-intro__thanks p { margin: 0; color: var(--bb-text-muted); }
.bb-intro__tick { font-size: 2.4rem; color: var(--bb-ok); }

/* ---- Automations (leads lane 5): the gallery of ready-made tiles above the list of what the business made. Layer-2 roles only. ---- */
.bb-au { display: grid; gap: 22px; }
.bb-au-sub, .bb-au-note { margin: 0; color: var(--bb-text-muted); }
.bb-au-note { font-size: var(--bb-fs-body); }
.bb-au-h2 { margin: 0 0 4px; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-au-h3 { margin: 6px 0 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-au-grow { flex: 1; }
.bb-au-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-top: 10px; }
.bb-au-tile { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.bb-au-tile--on { border-color: var(--bb-ok); }
.bb-au-tile__top { display: flex; align-items: center; gap: 8px; }
.bb-au-tile__top h3 { flex: 1; margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-au-tile__what { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-au-tile__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-au-got { margin: 0; color: var(--bb-text-success); font-weight: 600; font-size: var(--bb-fs-body); }
.bb-au-got--few { color: var(--bb-text-muted); font-weight: 600; }
.bb-au-need { color: var(--bb-warn); font-size: var(--bb-fs-caption); }
.bb-au-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.bb-au-row { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.bb-au-row__head { display: flex; align-items: center; gap: 8px; }
.bb-au-row__head h3 { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-au-row__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-au-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-au-lines .bb-au-got { font-weight: 600; }
.bb-au-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bb-au-step { padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); display: grid; gap: 8px; }
.bb-au-step--skip { border-style: dashed; }
.bb-au-step__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-au-days { width: 7rem; }
.bb-au-letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bb-au-lang { display: block; font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-muted); margin-bottom: 4px; }
.bb-au-subj { margin: 0 0 4px; font-weight: 600; font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-au-text { margin: 0; padding: 8px 10px; border-radius: var(--bb-radius-sm); background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-au-frame { display: block; width: 100%; height: 250px; border: 1px solid var(--bb-border-subtle); border-radius: var(--bb-radius-sm); background: var(--bb-surface); }
.bb-au-fits { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bb-au-fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-au-fit:first-child { border-top: 0; }
.bb-au-fit__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-au-fit > p { grid-column: 1; grid-row: 2; margin: 0; }
p.bb-au-verdict { margin: 0; color: var(--bb-text-muted); }
p.bb-au-verdict--yes { color: var(--bb-text-success); }
.bb-au-hits { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.bb-au-hit { width: 100%; text-align: start; padding: 8px 10px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm); background: var(--bb-surface); color: var(--bb-text); cursor: pointer; }
.bb-au-hit:hover, .bb-au-hit:focus-visible { background: var(--bb-surface-sunken); }
.bb-au-titlebar { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) { .bb-au-list, .bb-au-letters { grid-template-columns: minmax(0, 1fr); } }

/* ---- Authenticator set-up (Features/Account/AuthenticatorSetup.razor; sign-in mock-up screen 11) ---- */
.bb-mfa { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; padding: 16px 20px 24px; }
.bb-mfa > * { min-width: 0; }
.bb-mfa-card { padding: 20px 22px 22px; display: grid; gap: 14px; }
.bb-mfa-where { margin: 0; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-mfa-h { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-mfa-sub { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); max-width: 62ch; text-wrap: pretty; }
.bb-mfa-strong { margin: 0 0 4px; font-weight: 600; }
.bb-mfa-muted { margin: 0 0 10px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); text-wrap: pretty; }
.bb-mfa-small { margin: 0; font-size: var(--bb-fs-body); }
.bb-mfa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: mfa; }
.bb-mfa-steps li { counter-increment: mfa; display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 3px solid var(--bb-border); font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-mfa-steps li::before { content: counter(mfa); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font: 600 var(--bb-fs-caption) var(--bb-font); }
.bb-mfa-steps li.is-done { border-top-color: var(--bb-success-border); color: var(--bb-text-success); }
.bb-mfa-steps li.is-now { border-top-color: var(--bb-accent); color: var(--bb-text); font-weight: 600; }
.bb-mfa-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.bb-mfa-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--bb-border-strong); font-size: var(--bb-fs-caption); font-weight: 600; }
.bb-mfa-pill--on { border-color: var(--bb-success-border); background: var(--bb-success-bg); color: var(--bb-text-success); }
.bb-mfa-left { margin: 0; font-size: var(--bb-fs-body); }
.bb-mfa-left.is-low { color: var(--bb-text-danger); }
.bb-mfa-form { display: grid; gap: 8px; }
.bb-mfa-form .bb-input { max-width: 340px; }
.bb-mfa-form .bb-hint { margin: 0; }
.bb-mfa-otp { max-width: 260px; }
.bb-mfa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bb-mfa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--bb-ctl-h-small, 36px); padding: 0 var(--bb-ctl-px, 14px); border: 1px solid; border-radius: var(--bb-radius);
    font: inherit; font-weight: 600; cursor: pointer; }
.bb-mfa-btn[hidden] { display: none; }
.bb-mfa-btn--primary { color: var(--bb-btn-brand-fg); background: var(--bb-btn-brand-bg); border-color: var(--bb-btn-brand-fg); }
.bb-mfa-btn--quiet { color: var(--bb-btn-quiet-fg); background: transparent; border-color: var(--bb-border-strong); }
.bb-mfa-btn:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-mfa-qr { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 18px; align-items: start; }
.bb-mfa-qr__img { width: 184px; height: 184px; border-radius: 8px; border: 1px solid var(--bb-border); overflow: hidden; }
.bb-mfa-qr__img svg { display: block; width: 100%; height: 100%; }
.bb-mfa-key { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 8px 10px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken);
    font: 600 .95rem ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }
.bb-mfa-key .bb-mfa-btn { margin-left: auto; }
.bb-mfa-codes { list-style: none; margin: 0; padding: 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken);
    font: 600 .95rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; user-select: all; }
.bb-mfa-check { display: flex; align-items: center; gap: 10px; font-size: var(--bb-fs-body); cursor: pointer; }
.bb-mfa-more { border-top: 1px solid var(--bb-border); padding-top: 10px; }
.bb-mfa-more > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.bb-mfa-more[open] > summary { margin-bottom: 8px; }
@media (max-width: 560px) {
    .bb-mfa-qr { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .bb-mfa-codes { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    body * { visibility: hidden; }
    .bb-mfa-codes, .bb-mfa-codes * { visibility: visible; }
    .bb-mfa-codes { position: absolute; inset: 0 auto auto 0; grid-template-columns: 1fr; font-size: var(--bb-fs-subtitle1); }
}

/* ---- Online join (join-online lane): the public Join page (bb-join*) and the owner Online join settings (bb-oj*). Layer-2 roles only; the one business colour arrives as --bb-join-brand* custom properties
   written by the server from a validated #RRGGBB and contrast-checked pairs, and is read here only through the effective roles --bb-jb / --bb-ji. ---- */
.bb-join { --bb-jb: var(--bb-join-brand, var(--bb-brand)); --bb-ji: var(--bb-join-ink, var(--bb-text-onbrand)); --bb-jsoft: color-mix(in srgb, var(--bb-jb) 12%, var(--bb-surface)); display: grid; gap: 14px; }
[data-bs-theme="dark"] .bb-join { --bb-jb: var(--bb-join-brand-dark, var(--bb-brand)); --bb-ji: var(--bb-join-ink-dark, var(--bb-text-onbrand)); }
.bb-join__head { display: flex; align-items: center; gap: 12px; }
.bb-join__logo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--bb-jb); color: var(--bb-ji); font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-join__who { display: grid; flex: 1 1 auto; min-width: 0; }
.bb-join__who b { font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); overflow-wrap: anywhere; }
.bb-join__who small { color: var(--bb-text-muted); }
.bb-join__lang { color: var(--bb-jb); font-size: var(--bb-fs-body); font-weight: 600; white-space: nowrap; text-decoration: none; padding: 8px 4px; }
.bb-join__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.bb-join__steps i { height: 4px; border-radius: 2px; background: var(--bb-border); }
.bb-join__steps i.done { background: var(--bb-jb); }
.bb-join__step { margin: -6px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-join__card { display: grid; gap: 14px; padding: 20px; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); }
.bb-join__card h1 { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); text-wrap: balance; }
.bb-join__sub { margin: 0; color: var(--bb-text-muted); }
.bb-join__sub a { color: var(--bb-jb); font-weight: 600; }
.bb-join__h { margin: 4px 0 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-join__opts { display: grid; gap: 10px; }
.bb-join__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; min-height: 56px; border: 1.5px solid var(--bb-border-strong); border-radius: var(--bb-radius-lg); color: var(--bb-text); text-decoration: none; background: var(--bb-surface); }
.bb-join__opt:hover { border-color: var(--bb-jb); background: var(--bb-jsoft); }
.bb-join__opt:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-join__opt-name { font-weight: 600; overflow-wrap: anywhere; }
.bb-join__opt-price { font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-join__opt-sub { grid-column: 1 / -1; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-join__opt--trial { border-style: dashed; }
.bb-join__form { display: grid; gap: 14px; }
.bb-join__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bb-join__days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.bb-join__days a { display: grid; justify-items: center; gap: 2px; min-width: 52px; padding: 8px 6px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); color: var(--bb-text); text-decoration: none; font-size: var(--bb-fs-caption); }
.bb-join__days a b { font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); }
.bb-join__days a[aria-current="date"] { border-color: var(--bb-jb); background: var(--bb-jsoft); }
.bb-join__days a:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-join__times { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-join__time { position: relative; }
.bb-join__time input { position: absolute; opacity: 0; inset: 0; }
.bb-join__time span { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; min-height: 44px; border: 1.5px solid var(--bb-border-strong); border-radius: var(--bb-radius); font-weight: 600; cursor: pointer; }
.bb-join__time input:checked + span { border-color: var(--bb-jb); background: var(--bb-jsoft); }
.bb-join__time input:focus-visible + span { box-shadow: var(--bb-focus-ring); }
.bb-join__time small { color: var(--bb-text-muted); font-weight: 400; }
.bb-join__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .bb-join__grid { grid-template-columns: 1fr; } }
.bb-join__field { display: grid; gap: 4px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-join__field input { min-height: 48px; padding: 0 12px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; font-size: var(--bb-fs-body); }
.bb-join__field input:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-join__who-for { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.bb-join__who-for legend { padding: 0; font-weight: 600; }
.bb-join__seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--bb-border-strong); border-radius: var(--bb-radius); overflow: hidden; }
.bb-join__seg label { position: relative; display: grid; }
.bb-join__seg input { position: absolute; opacity: 0; inset: 0; }
.bb-join__seg span { display: grid; place-items: center; min-height: 44px; padding: 0 8px; font-weight: 600; font-size: var(--bb-fs-body); text-align: center; cursor: pointer; }
.bb-join__seg input:checked + span { background: var(--bb-jb); color: var(--bb-ji); }
.bb-join__seg input:focus-visible + span { box-shadow: inset var(--bb-focus-ring); }
.bb-join__hint, .bb-join__note { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-join__go { min-height: 48px; border: 0; border-radius: var(--bb-radius); background: var(--bb-jb); color: var(--bb-ji); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; }
.bb-join__go:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-join__done { text-align: center; justify-items: center; }
.bb-join__done p { margin: 0; color: var(--bb-text-muted); }
.bb-join__tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bb-jb); color: var(--bb-ji); font-size: 1.8rem; }
.bb-join__contact { font-weight: 600; color: var(--bb-text); }
.bb-join__secure { margin: 0; text-align: center; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }

.bb-oj { display: grid; gap: 14px; max-width: 1100px; }
.bb-oj-where { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-oj-h { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-oj-sub { margin: 0; color: var(--bb-text-muted); }
.bb-oj-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: 16px; align-items: start; }
@media (max-width: 900px) { .bb-oj-grid { grid-template-columns: 1fr; } }
.bb-oj-main { display: grid; gap: 14px; }
.bb-oj-card { display: grid; gap: 10px; padding: 16px 18px; }
.bb-oj-card-h { margin: 0; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-oj-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.bb-oj-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bb-border-subtle); }
.bb-oj-rows li:first-child { border-top: 0; }
.bb-oj-rows span { display: grid; }
.bb-oj-rows small { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-oj-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-oj-code { flex: 1 1 260px; min-width: 0; padding: 8px 10px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); font: .82rem ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.bb-oj-color { width: 44px; height: 36px; padding: 0; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface); cursor: pointer; }
.bb-oj-hex { max-width: 120px; }
.bb-oj-linkbtn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); color: var(--bb-text); text-decoration: none; font-weight: 600; font-size: var(--bb-fs-body); }
.bb-oj-linkbtn:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-oj-problems { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.bb-oj-save { margin-top: 4px; }
.bb-oj-side { display: grid; gap: 8px; justify-items: start; }
.bb-oj-qr { width: 100%; max-width: 220px; padding: 10px; background: var(--bb-n-0); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); }
.bb-oj-qr svg { display: block; width: 100%; height: auto; }
.bb-join__today { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); }
.bb-join__today-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bb-join__today-row b { font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-join__today-line { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-join__link { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--bb-jb); font: 600 var(--bb-fs-body) var(--bb-font); text-decoration: underline; cursor: pointer; }
.bb-join__link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-join__doc { display: grid; gap: 6px; }
.bb-join__docframe { width: 100%; height: 260px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-n-0); }
.bb-join__disclosure { font-size: var(--bb-fs-body); }
.bb-join__disclosure summary { cursor: pointer; color: var(--bb-jb); font-weight: 600; }
.bb-join__check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--bb-fs-body); }
.bb-join__check input { width: 22px; height: 22px; flex: none; accent-color: var(--bb-jb); }
.bb-join__kid { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px dashed var(--bb-border-strong); border-radius: var(--bb-radius); }
.bb-join__kid legend { padding: 0 6px; font-weight: 600; font-size: var(--bb-fs-body); }
.bb-join__field select { min-height: 48px; padding: 0 12px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; font-size: var(--bb-fs-body); }
.bb-join__card-mount { min-height: 200px; }

/* Edit member and Edit family (members and programs mock-up, screens "me" and "fe"): one card of captioned sections beside a facts rail. */
.bb-ed-page { display: grid; gap: 14px; padding: 16px 0 40px; }
.bb-ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.bb-ed-main { padding: 20px 24px 16px; min-width: 0; }
.bb-ed-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bb-info-bg); color: var(--bb-text); }
.bb-ed-banner a { font-weight: 600; }
.bb-ed-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px 28px; padding: 22px 0; border-top: 1px solid var(--bb-border); }
.bb-ed-banner + .bb-ed-sec, .bb-ed-main > .bb-ed-sec:first-child { border-top: 0; }
.bb-ed-cap { display: flex; align-items: flex-start; gap: 12px; }
.bb-ed-cap h2 { margin: 0; font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); color: var(--bb-text); }
.bb-ed-cap p { margin: 2px 0 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); line-height: 1.43; }
.bb-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; min-width: 0; }
.bb-ed-grid3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px 16px; align-items: start; min-width: 0; }
.bb-ed-full { grid-column: 1 / -1; }
.bb-ed-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bb-ed-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9rem, max-content); justify-content: end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--bb-border); }
.bb-ed-notice-btns { display: flex; gap: 8px; margin-top: 8px; }
.bb-ed-rail { position: sticky; top: var(--bb-page-sticky-top, 12px); padding: 20px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.bb-ed-rail .bb-record__kv { justify-self: stretch; text-align: left; }
.bb-ed-avatar { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); background: var(--bb-info-bg); color: var(--bb-text); }
.bb-ed-name { font: 600 var(--bb-fs-subtitle2) var(--bb-font-display); color: var(--bb-text); }
.bb-ed-sub { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-ed-people { list-style: none; margin: 0; padding: 0; justify-self: stretch; display: grid; gap: 0; text-align: left; border-top: 1px solid var(--bb-border); }
.bb-ed-people li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bb-border); }
.bb-ed-people li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.bb-ed-people small { color: var(--bb-text-muted); }
.bb-ed-ini { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 600; font-size: var(--bb-fs-caption); background: var(--bb-info-bg); color: var(--bb-text); flex: none; }
.bb-ed-status-note { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-body); line-height: 1.43; }
.bb-ed-mask { display: flex; align-items: center; gap: 10px; }
.bb-ed-mask > :first-child { flex: 1; min-width: 0; }
@media (max-width: 1400px) {
    .bb-ed { grid-template-columns: minmax(0, 1fr); }
    .bb-ed-rail { position: static; }
    .bb-ed-sec { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Promotions, Programs and Ranks (martial-arts locations) -------------------------------------------------------------------- */
.bb-promo { display: grid; gap: 14px; padding-top: 4px; }
.bb-promo > * { min-width: 0; }
.bb-promo-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-promo-titlebar__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* Promotions: pillars + filters in one row (container query on the page area, not the viewport), add bar, grid cells. */
.bb-promo { container: bb-promo / inline-size; }
.bb-promo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.bb-promo-pillars { display: grid; grid-template-columns: repeat(3, 136px); gap: 10px; }
.bb-promo-pillar { display: grid; gap: 0; justify-items: start; text-align: start; padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); background: var(--bb-surface); color: var(--bb-text); cursor: pointer; min-width: 0; font: inherit; }
.bb-promo-pillar b { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-variant-numeric: tabular-nums; }
.bb-promo-pillar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-text-muted); font-size: .8rem; }
.bb-promo-pillar[aria-pressed="true"] { border: 2px solid var(--bb-accent); padding: 11px 13px; background: var(--bb-accent-soft); }
.bb-promo-pillar:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-promo-pillar:disabled { opacity: .55; cursor: not-allowed; }
.bb-promo-filters { margin-inline-start: auto; display: grid; grid-template-columns: 48px 200px 48px 168px; gap: 8px 8px; align-items: center; }
.bb-promo-filters > * { min-width: 0; }
.bb-promo-field { margin: 0; text-align: end; font-size: .8rem; color: var(--bb-text-muted); }
@container bb-promo (max-width: 900px) { .bb-promo-filters { margin-inline-start: 0; } }
.bb-promo-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); }
.bb-promo-addbar__count { font-weight: 600; }
.bb-promo-addbar__acts { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.bb-promo-addbar__tools { display: flex; gap: 8px; margin-inline-start: 4px; padding-inline-start: 12px; border-inline-start: 1px solid var(--bb-border); }
.bb-promo-exampick { width: 330px; }
.bb-promo-btn { width: 8.5rem; justify-content: center; text-align: center; }
.bb-exam-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bb-exam-top__acts { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.bb-exam-pick { width: 320px; }
.bb-exam-programpick { width: 190px; }
.bb-promo-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-promo-owed { color: var(--bb-danger); font-weight: 600; }
.bb-promo-edit { border: 0; background: none; padding: 0; color: var(--bb-accent); font: inherit; font-size: .85rem; cursor: pointer; }
.bb-promo-edit:hover { text-decoration: underline; }
.bb-promo-edit:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-promo-print__notice { break-after: page; padding: 24px 0; }

/* Small grids opt in: a page sets --bb-grid-w to the sum of its column widths, so the grid is not stretched across the page (DX docs: Layout Specifics - grid width via CssClass). */
.bb-grid-fit { width: calc(var(--bb-grid-w) + 4px); max-width: 100%; }
.bb-promo-grid:not(.bb-grid-fit) { width: 100%; }
.bb-promo-name { font-weight: 600; color: var(--bb-text); text-decoration: none; }
.bb-promo-name:hover { color: var(--bb-accent); text-decoration: underline; }
.bb-promo-rank { display: inline-flex; align-items: center; gap: 6px; }
.bb-promo-rank .bb-disc-belt { width: 40px; flex: none; }
.bb-promo-note { margin: 0; max-width: 80ch; }
.bb-promo-empty { display: grid; gap: 8px; justify-items: start; padding: 20px; }
.bb-promo-empty h2 { margin: 0; font-size: 1.1rem; }
.bb-promo-empty p { margin: 0; color: var(--bb-text-muted); max-width: 70ch; }
.bb-promo-days { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-promo-days--col { flex-direction: column; flex-wrap: nowrap; }
.bb-promo-day { display: grid; gap: 2px; justify-items: start; min-width: 200px; padding: 10px 14px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); background: var(--bb-surface);
                color: var(--bb-text); font: inherit; text-align: start; cursor: pointer; }
.bb-promo-day:hover:not(:disabled) { border-color: var(--bb-border-strong); }
.bb-promo-day:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-promo-day.is-on { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-promo-day:disabled { opacity: .55; cursor: not-allowed; }
.bb-rk-side { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.bb-rk-grid { max-height: calc(100vh - 370px); min-height: 240px; }
.bb-promo-split { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 14px; align-items: start; }
.bb-promo-roster { display: grid; gap: 12px; padding: 16px; }
.bb-promo-roster__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bb-promo-roster__head h2 { margin: 0; font-size: 1.15rem; }
.bb-promo-roster__head p { margin: 2px 0 0; }
.bb-promo-roster__acts, .bb-promo-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Buttons that sit together share one width (the widest label in either language). */
.bb-promo-quick > .bb-quiet { margin-inline-end: auto; }
.bb-promo-tablewrap { overflow-x: auto; }
.bb-promo-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bb-promo-table th { text-align: start; padding: 8px 10px; color: var(--bb-text-muted); font-weight: 600; font-size: .78rem; border-bottom: 1px solid var(--bb-border); white-space: nowrap; }
.bb-promo-table td { padding: 8px 10px; border-bottom: 1px solid var(--bb-border-subtle); vertical-align: middle; }
.bb-promo-cert { width: 130px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); font: inherit; }
.bb-promo-cert:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-promo-form { display: grid; gap: 8px; }
.bb-promo-form > * { min-width: 0; }
.bb-promo-form label { font-weight: 600; font-size: .9rem; }
.bb-promo-form__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bb-promo-fieldset { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 6px; }
.bb-promo-fieldset legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: 4px; }
.bb-promo-beltpick { display: flex; align-items: center; gap: 12px; }
.bb-promo-beltpick > :first-child { flex: 1; }
.bb-promo-beltpick .bb-disc-belt { width: 72px; flex: none; }
.bb-promo-lines { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.bb-promo-draft { display: grid; gap: 4px; }
.bb-promo-draft__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bb-promo-print { padding: 24px; background: var(--bb-surface); color: var(--bb-text); font-family: var(--bb-font); }
.bb-promo-print h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.bb-promo-print__table { width: 100%; }
.bb-promo-print__table th, .bb-promo-print__table td { padding: 6px 8px; border-bottom: 1px solid var(--bb-border); text-align: start; }
.bb-promo-print__box { width: 70px; }
.bb-promo-print__note { width: 24%; }
.bb-promo-print__group td { background: var(--bb-surface-sunken); font-weight: 700; }
.bb-promo-print__size { font-size: 1rem; font-weight: 700; text-align: center; }
@media (max-width: 1100px) {
    .bb-promo-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .bb-promo-form__two { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    .bb-promo-print { padding: 0; }
}
.bb-promo-seg { display: inline-flex; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); overflow: hidden; }
.bb-promo-seg__btn { min-height: 30px; padding: 4px 12px; border: 0; border-inline-start: 1px solid var(--bb-border); background: var(--bb-surface); color: var(--bb-text); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.bb-promo-seg__btn:first-child { border-inline-start: 0; }
.bb-promo-seg__btn:hover { background: var(--bb-surface-sunken); }
.bb-promo-seg__btn:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-promo-seg__btn.is-on { background: var(--bb-accent-soft); color: var(--bb-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--bb-accent); }
/* Member and family lists */
.bb-ico-cash-register::before { -webkit-mask-image: url("icons/fa-duo-cash-register.svg"); mask-image: url("icons/fa-duo-cash-register.svg"); }
.bb-ico-house-user::before { -webkit-mask-image: url("icons/fa-duo-house-user.svg"); mask-image: url("icons/fa-duo-house-user.svg"); }
.bb-roster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0 72px; }
.bb-roster > * { min-width: 0; }
.bb-roster__sub { margin: 0; font-size: var(--bb-fs-body); line-height: var(--bb-lh-body); }
.bb-roster__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-roster__pick { flex: 0 0 200px; min-width: 180px; }
.bb-roster__chips { margin-bottom: 4px; }
.bb-chip--alert .bb-chip__n { color: var(--bb-text-danger); font-weight: 600; }
.bb-roster__card { padding: 0; overflow: hidden; }
.bb-roster__grid { font-size: var(--bb-fs-body); border: 0; font-variant-numeric: tabular-nums; }
.bb-roster__grid [role="gridcell"], .bb-roster__grid td { cursor: pointer; }
.bb-roster__who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.bb-roster__name { color: var(--bb-text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-roster__name:hover { text-decoration: underline; }
.bb-roster__name:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); border-radius: var(--bb-radius-sm); }
.bb-roster__visit { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.bb-roster__since.is-bad { color: var(--bb-text-danger); font-weight: 600; }
.bb-roster__spark { flex: none; }
.bb-roster__spark .bb-spark { margin-top: 0; }
.bb-roster__owes { color: var(--bb-text-danger); font-weight: 600; }
.bb-roster__acts { display: inline-flex; gap: 6px; white-space: nowrap; }
.bb-roster__act { width: 32px; min-width: 32px; padding: 0; }

.bb-promo-name + .bb-quiet { margin-inline-start: 6px; }
/* Buttons that sit together share one width (the widest label): a grid whose columns are equal, as wide as its widest item. */
.bb-btnrow, .bb-pk-titlebar__acts, .bb-rv-row, .bb-pr-tabs, .bb-ac-tabs, .bb-em-tabs, .bb-chips, .bb-gs__save, .bb-pr-chips, .bb-pr-viewtools, .bb-pr-toggle, .bb-em-actions, .bb-em-seg, .bb-mfa-actions, .bb-pr-foot, .bb-cal-seg, .bb-cal-filters {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    max-width: 100%;
}
.bb-btnrow > *, .bb-pk-titlebar__acts > *, .bb-rv-row > *, .bb-pr-tabs > *, .bb-ac-tabs > *, .bb-em-tabs > *, .bb-chips > *, .bb-gs__save > *, .bb-pr-chips > *, .bb-pr-viewtools > *, .bb-pr-toggle > *, .bb-em-actions > *, .bb-em-seg > *, .bb-mfa-actions > *, .bb-pr-foot > *, .bb-cal-seg > *, .bb-cal-filters > * {
    justify-content: center;
    white-space: nowrap;
}

.bb-btnrow { gap: 8px; }
/* A table wider than its card scrolls inside the card; it never runs under the AI button or past the page edge. */
.app-center-scroll :is(div, section):has(> table) { overflow-x: auto; max-width: 100%; }

/* Chip rows are equal tiles that wrap to a new line, so no chip is ever wider or squeezed. */
.bb-chips, .bb-pk-filters { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 10.5rem); width: auto; gap: 8px; }
.bb-chips > *, .bb-pk-filters > * { width: 100%; justify-content: center; white-space: nowrap; }
/* Row actions in a table share one width. */
/* Chips that carry names the business typed size to the name and wrap; they are a list of things, not a button group. */
.bb-chips.bb-chips--names { display: flex; flex-wrap: wrap; width: auto; }
.bb-chips.bb-chips--names > * { width: auto; }
/* A title-bar pill that holds a button row keeps one width per button (the title bar's own rule makes it inline-flex). */
.PageTopPanel .justify-content-end > .row > .col.bb-btnrow { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
/* Save and Cancel on the edit forms share one width. */

/* ---- Reports hub, Who owes you and Collections (bb-rcv*). Layer-2 roles only. ---- */
.bb-ico-chart-column::before { -webkit-mask-image: url("icons/fa-duo-chart-column.svg"); mask-image: url("icons/fa-duo-chart-column.svg"); }
.bb-ico-file-invoice-dollar::before { -webkit-mask-image: url("icons/fa-duo-file-invoice-dollar.svg"); mask-image: url("icons/fa-duo-file-invoice-dollar.svg"); }
.bb-rcv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0 72px; }
.bb-rcv > * { min-width: 0; }
.bb-rcv-lbl { margin: 0 0 4px; }
.bb-rcv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 8px; }
.bb-rcv-tile { display: grid; gap: 2px; text-align: start; padding: 10px 12px; font: inherit; color: var(--bb-text); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); }
button.bb-rcv-tile { cursor: pointer; }
button.bb-rcv-tile:hover { background: var(--bb-surface-sunken); }
button.bb-rcv-tile:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-rcv-tile.is-on { background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-rcv-tile--alert .bb-rcv-tile__n { color: var(--bb-text-danger); }
.bb-rcv-tile__t { font-size: var(--bb-fs-caption, .8rem); color: var(--bb-text-muted); }
.bb-rcv-tile__n { font-size: var(--bb-fs-title, 1.35rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-rcv-tile__s { font-size: var(--bb-fs-caption, .8rem); color: var(--bb-text-muted); }
.bb-rcv-tiles--4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
/* The share of the total owed in each bucket, oldest on the right. Older money is darker. */
.bb-rcv-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bb-surface-sunken); }
.bb-rcv-bar__seg { display: block; height: 100%; min-width: 2px; background: var(--bb-accent-soft); }
.bb-rcv-bar__seg--1 { background: color-mix(in srgb, var(--bb-accent) 35%, var(--bb-accent-soft)); }
.bb-rcv-bar__seg--2 { background: color-mix(in srgb, var(--bb-accent) 60%, var(--bb-accent-soft)); }
.bb-rcv-bar__seg--3 { background: var(--bb-accent); }
.bb-rcv-bar__seg--4 { background: var(--bb-text-danger); }
.bb-rcv-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-rcv-hist li { padding: 8px 0; border-bottom: 1px solid var(--bb-border); }
.bb-rcv-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
.bb-rcv-report > * { min-width: 0; }
.bb-rcv-report__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.bb-rcv-report__head .bb-card__title { margin: 0 0 2px; }
.bb-rcv-headline { margin: 0; font-size: var(--bb-fs-subtitle2); font-weight: 600; }
.bb-rcv-note { margin: 0; font-size: var(--bb-fs-caption, .8rem); }
.bb-rcv-hbar { display: inline-block; vertical-align: middle; width: 96px; height: 8px; border-radius: 999px; background: var(--bb-surface-sunken); overflow: hidden; }
.bb-rcv-hbar__fill { display: block; height: 100%; background: var(--bb-text-danger); }
.bb-rcv-hbar.is-good .bb-rcv-hbar__fill { background: var(--bb-accent); }
.bb-rcv-hbar__n { display: inline-block; min-width: 3.5em; padding-inline-start: 8px; font-variant-numeric: tabular-nums; }
.bb-rcv-group { display: grid; gap: 6px; padding: 12px 16px; margin-bottom: 8px; }
.bb-rcv-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bb-rcv-links li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--bb-border); }
@media print {
    body * { visibility: hidden; }
    .bb-rcv-print, .bb-rcv-print * { visibility: visible; }
    .bb-rcv-print { position: absolute; inset: 0 auto auto 0; width: 100%; }
    .bb-rcv-noprint, .bb-rcv-noprint * { display: none !important; }
}
/* Staff (users, sign-in security, change password). */
.bb-st { display: grid; gap: 12px; padding: 16px 0 72px; }
.bb-st > * { min-width: 0; }
.bb-st-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-st-titlebar__acts { display: flex; align-items: center; gap: 16px; }
.bb-st { container-type: inline-size; }
.bb-st-list { display: grid; grid-template-columns: minmax(11rem, 1.4fr) repeat(var(--bb-st-locs, 1), minmax(9rem, 1fr)) 5rem 6rem 10rem; column-gap: 16px; overflow-x: auto; padding: 0; }
.bb-st-list > * { grid-column: 1 / -1; }
.bb-st-row { display: grid; grid-template-columns: subgrid; column-gap: 16px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-st-row > :first-child { padding-left: 18px; }
.bb-st-row > :last-child { padding-right: 18px; }
.bb-st-row--head { min-height: 40px; padding-block: 8px; font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); border-bottom: 1px solid var(--bb-border); background: var(--bb-surface-sunken); }
.bb-st-row.is-off { color: var(--bb-text-muted); }
.bb-st-who { display: grid; gap: 2px; min-width: 0; padding-block: 8px; }
.bb-st-who b { font-weight: 600; overflow-wrap: anywhere; }
.bb-st-who small { color: var(--bb-text-muted); font-size: var(--bb-fs-body); overflow-wrap: anywhere; }
.bb-st-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-st-badges:empty { display: none; }
.bb-st-fixed { font-size: var(--bb-fs-body); }
.bb-st-fixed.is-none { color: var(--bb-text-muted); }
.bb-st-last { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-st-acts { display: grid; grid-template-columns: repeat(auto-fit, 10rem); justify-content: end; gap: 8px; padding-block: 8px; }
.bb-st-none { padding: 28px 18px; text-align: center; color: var(--bb-text-muted); }
.bb-st-foot { padding: 12px 18px; font-size: var(--bb-fs-body); color: var(--bb-text-muted); background: var(--bb-surface-sunken); }
.bb-st-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.bb-st-form__wide { grid-column: 1 / -1; }
.bb-st-access { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 1.2fr); gap: 8px 16px; align-items: center; margin-top: 6px; }
.bb-st-access__loc { font-weight: 600; overflow-wrap: anywhere; }
.bb-st-page { display: grid; padding: 16px 0 72px; }
.bb-st-card { max-width: 720px; padding: 20px 22px 22px; display: grid; gap: 14px; }
.bb-st-h { margin: 0; font: 600 var(--bb-fs-subtitle1) var(--bb-font-display); }
.bb-st-h3 { margin: 6px 0 0; font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-st-form-col { display: grid; gap: 14px; }
.bb-st-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.bb-st-switch input { margin-top: 4px; width: 1.1rem; height: 1.1rem; flex: none; }
.bb-st-switch b { display: block; font-weight: 600; }
.bb-st-switch small { display: block; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-st-switch.is-fixed { cursor: default; padding-left: 2rem; }
.bb-st-small { font-size: var(--bb-fs-body); }
@container (max-width: 57rem) {
  .bb-st-list { display: block; overflow-x: hidden; }
  .bb-st-row { display: grid; grid-template-columns: 1fr; padding: 12px 18px; row-gap: 6px; }
  .bb-st-row--head { display: none; }
  .bb-st-row > :first-child, .bb-st-row > :last-child { padding: 0; }
  .bb-st-level::before { content: attr(data-label); display: block; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
  .bb-st-acts { justify-content: start; }
}
@media (max-width: 900px) {
  .bb-st-form { grid-template-columns: 1fr; }
}
.bb-st-opt { display: grid; gap: 4px; }
.bb-st-opt .bb-hint { margin: 0 0 0 3.1rem; }
.bb-st-link { color: var(--bb-accent); font-weight: 600; width: fit-content; }
.bb-st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Account (My account and Cancel your account): plan and billing, statements, locations, business and contact. */
.bb-ac { display: grid; gap: 14px; padding: 16px 0 72px; }
.bb-ac > * { min-width: 0; }
.bb-ac-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-ac-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-ac-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.bb-ac-col { display: grid; gap: 14px; min-width: 0; }
.bb-ac-pane { display: grid; gap: 12px; min-width: 0; }
.bb-ac-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bb-ac-plan { display: grid; gap: 12px; }
.bb-ac-plan__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bb-ac-plan__name { font-weight: 600; }
.bb-ac-amt { font: 600 var(--bb-fs-subtitle1)/var(--bb-lh-subtitle1) var(--bb-font-display); font-variant-numeric: tabular-nums; }
.bb-ac-amt small { font: 400 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-ac-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 6px; }
.bb-ac-rung { padding: 8px 10px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); display: grid; gap: 2px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-ac-rung b { font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-ac-rung.is-on { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-ac-lines { display: grid; }
.bb-ac-line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 7rem; gap: 12px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-ac-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-ac-line .n { color: var(--bb-text-muted); }
.bb-ac-line .a { text-align: right; font-variant-numeric: tabular-nums; }
.bb-ac-line.is-credit .a { color: var(--bb-text-success); }
.bb-ac-line--total { border-bottom: 0; font-weight: 600; min-height: 46px; border-top: 1px solid var(--bb-border); }
.bb-ac-facts { display: grid; gap: 0; margin: 0; }
.bb-ac-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-ac-facts > div:last-child { border-bottom: 0; }
.bb-ac-facts dt { font-weight: 400; color: var(--bb-text-muted); }
.bb-ac-facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bb-ac-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); }
.bb-ac-card__t { display: grid; min-width: 0; line-height: 1.3; }
.bb-ac-push { margin-left: auto; }
.bb-ac-pay { display: grid; gap: 10px; }
.bb-ac-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-ac-wide { min-width: 11rem; }
.bb-ac-pay .bb-ac-empty { padding: 12px 8px; }
.bb-ac-bal { display: grid; gap: 10px; }
.bb-ac-bal .bb-ac-amt { color: var(--bb-text-danger); }
.bb-ac-stack { display: grid; gap: 12px; }
.bb-ac-foot { margin: 10px 0 0; }
.bb-ac-full { width: 100%; }
.bb-ac-opt { font-weight: 400; }
.bb-ac-table { width: 100%; border-collapse: collapse; }
.bb-ac-table th { text-align: left; font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); padding: 10px 14px; background: var(--bb-surface-sunken); border-bottom: 1px solid var(--bb-border); white-space: nowrap; }
.bb-ac-table td { padding: 0 14px; height: 44px; border-bottom: 1px solid var(--bb-border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28rem; }
.bb-ac-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.bb-ac-wrap { overflow-x: auto; padding: 0; }
.bb-ac-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bb-ac-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 18px; text-align: center; color: var(--bb-text-muted); }
.bb-ac-empty b { color: var(--bb-text); font-size: var(--bb-fs-subtitle2); }
.bb-ac-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; align-content: start; }
.bb-ac-form > * { min-width: 0; }
.bb-ac-form .wide { grid-column: 1 / -1; }
.bb-ac-form .bb-label { margin-top: 10px; display: block; }
.bb-ac-form .bb-label i { font-style: normal; color: var(--bb-label-req); }
.bb-ac-sec { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--bb-border-subtle); font: 600 var(--bb-fs-body) var(--bb-font); color: var(--bb-text-muted); }
.bb-ac-sec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.bb-ac-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); background: var(--bb-surface-raised); box-shadow: var(--bb-e1); }
.bb-ac-links { display: grid; gap: 2px; }
.bb-ac-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--bb-border-subtle); background: transparent; color: var(--bb-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.bb-ac-link:last-child { border-bottom: 0; }
.bb-ac-link:hover { color: var(--bb-link); }
.bb-ac-link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-ac-link--tall { min-height: 56px; }
.bb-ac-link .q { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-ac-link > span.q:last-child { white-space: nowrap; flex: none; }
.bb-ac-note { display: flex; gap: 10px; align-items: flex-start; }
.bb-ac-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bb-ac-big > div { padding: 10px 12px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); display: grid; gap: 2px; }
.bb-ac-big b { font: 600 var(--bb-fs-subtitle1)/var(--bb-lh-subtitle1) var(--bb-font-display); }
.bb-ac-big span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-ac-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.bb-ac-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-ac-reasons label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); cursor: pointer; }
.bb-ac-reasons input:checked + span { font-weight: 600; }
.bb-ac-reasons label:has(input:checked) { background: var(--bb-accent-soft); border-color: var(--bb-accent); }
.bb-ac-note-in { padding: 8px 12px; width: 100%; resize: vertical; }
.bb-ac-decide { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.bb-ac-done { display: grid; justify-items: start; gap: 12px; max-width: 640px; }
@media (max-width: 1099px) {
  .bb-ac-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .bb-ac-form { grid-template-columns: minmax(0, 1fr); }
  .bb-ac-line { grid-template-columns: minmax(0, 1fr) 6rem; }
  .bb-ac-line .n { display: none; }
}
@media print {
    .bb-ac-print, .bb-ac-print * { visibility: visible; }
    .bb-ac-print { position: absolute; inset: 0 auto auto 0; width: 100%; }
}
/* Financial summary (Accounting). */
.bb-fs > * { min-width: 0; }
.bb-fs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.bb-fs-filters .bb-chips { grid-template-columns: repeat(auto-fill, 8rem); }
.bb-fs-filters .bb-chips--wide { grid-template-columns: repeat(auto-fill, 14rem); }
.bb-fs-date { width: 10.5rem; }
.bb-fs-spacer { flex: 1 1 auto; }
.bb-fs-compare { display: inline-flex; align-items: center; gap: 8px; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-fs-modebox { width: 15rem; }
.bb-fs-cap { margin: 0 0 12px; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); line-height: var(--bb-lh-caption); }
.bb-fs-hint { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); line-height: var(--bb-lh-caption); }
.bb-fs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bb-fs-kpi { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); box-shadow: var(--bb-e1); }
.bb-fs-kpi.is-lead { border-inline-start: 3px solid var(--bb-accent); }
.bb-fs-kpi__l { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); line-height: var(--bb-lh-caption); }
.bb-fs-kpi__v { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bb-text); }
.bb-fs-kpi__v small { margin-inline-start: 4px; font-family: var(--bb-font); font-size: var(--bb-fs-caption); font-weight: 400; color: var(--bb-text-muted); }
.bb-fs-grid2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1180px) { .bb-fs-grid2 { grid-template-columns: minmax(0, 1fr); } }
.bb-fs-cardh { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.bb-fs-cardh h2 { margin: 0; font-family: var(--bb-font-display); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--bb-text); }
.bb-fs-cardh p { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-fs-cardh--pad { padding: 14px 20px 0; }
.bb-fs-pnl { padding: 0; overflow: hidden; }
.bb-fs-table { width: 100%; border-collapse: collapse; font-size: var(--bb-fs-body); line-height: var(--bb-lh-body); color: var(--bb-text); font-variant-numeric: tabular-nums; }
.bb-fs-table th { padding: 8px 10px; text-align: start; font-size: var(--bb-fs-caption); line-height: var(--bb-lh-caption); font-weight: 600; color: var(--bb-text-muted); border-bottom: 1px solid var(--bb-border); white-space: nowrap; background: var(--bb-surface-sunken); }
.bb-fs-table td { padding: 0 10px; height: 40px; border-bottom: 1px solid var(--bb-border-subtle); white-space: nowrap; }
.bb-fs-table th.n, .bb-fs-table td.n { text-align: end; }
.bb-fs-table td.ind { padding-inline-start: 28px; }
.bb-fs-table tr.grp td { height: 34px; background: var(--bb-surface-sunken); font-weight: 600; border-bottom: 1px solid var(--bb-border); }
.bb-fs-table tr.sub td { font-weight: 600; background: var(--bb-surface-sunken); border-top: 1px solid var(--bb-border); }
.bb-fs-table tr.tot td { font-weight: 700; border-top: 2px solid var(--bb-border-strong); background: var(--bb-accent-soft); }
.bb-fs-memo td { color: var(--bb-text-muted); font-style: italic; }
.bb-fs-row { cursor: pointer; }
.bb-fs-row:hover td { background: var(--bb-surface-sunken); }
.bb-fs-row.is-sel td { background: var(--bb-accent-soft); }
.bb-fs-row:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-fs-bar { display: inline-block; height: 8px; min-width: 2px; margin-inline-end: 8px; border-radius: 4px; background: var(--bb-accent); vertical-align: middle; }
.bb-fs-empty { text-align: center; padding: 48px 16px; }
.bb-fs-empty h2 { margin: 10px 0 6px; font-family: var(--bb-font-display); font-size: 16px; line-height: 22px; font-weight: 600; }
.bb-fs-empty p { margin: 0 auto 16px; max-width: 52ch; color: var(--bb-text-muted); }
.bb-fs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bb-fs-fact { display: grid; gap: 2px; }
.bb-fs-fact b { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-fs-fact span { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-fs-drawer { display: grid; gap: 14px; align-content: start; }
.bb-fs-delta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Chart of accounts and the account drawer (Accounting). */
.bb-coa-icon { width: 40px; text-align: center; color: var(--bb-text-muted); }
.bb-coa-icon [class*="bb-ico-"]::before { width: 16px; height: 16px; margin-inline-end: 0; }
.bb-coa-table td:nth-child(2) { width: 100%; }
.bb-coa-form { display: grid; gap: 14px; }
.bb-coa-field { display: grid; gap: 4px; font-size: var(--bb-fs-body); }
.bb-coa-field > span { font-weight: 600; }
.bb-req { color: var(--bb-text-danger); font-style: normal; }
.bb-fs-more { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 0; border: 0; background: none; color: var(--bb-accent); font: inherit; font-weight: 600; cursor: pointer; }
.bb-fs-more::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); display: inline-block; }
.bb-fs-more[aria-expanded="true"]::before { transform: rotate(45deg); }
.bb-fs-sec { margin: 0; font-size: var(--bb-fs-caption); line-height: var(--bb-lh-caption); font-weight: 600; color: var(--bb-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bb-fs-mbars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.bb-fs-mbar { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.bb-fs-mbar i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.bb-fs-mbar__this { background: var(--bb-accent); }
.bb-fs-mbar__last { background: var(--bb-border-strong); }
.bb-fs-lines { display: grid; font-size: var(--bb-fs-body); }
.bb-fs-lines > div { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; min-height: 36px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-fs-lines > div > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-fs-lines .d { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-fs-lines .a { font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-coa-uses > div { grid-template-columns: 1fr auto; }
.bb-fs-drawfoot { display: flex; gap: 8px; padding-top: 8px; }
/* ---- Income & expenses and Vendors (bb-ie*, Accounting). Layer-2 roles only. ---- */
/* Height cap only: DevExpress positions the panel and scrolls its body, so Save stays in the window. */
.bb-ie-drawer > .dxbl-drawer-panel { max-height: calc(100vh - var(--bb-page-sticky-top, var(--bb-shell-top, 64px))); }
.bb-ie .bb-ledger__head { flex-wrap: wrap; }
.bb-ie .bb-ledger__headtx { flex: 1 1 14rem; }
.bb-ie-pos { color: var(--bb-text-success); }
.bb-ie-neg { color: var(--bb-text-danger); }
.bb-ie-sp { flex: 1 1 auto; }
.bb-ie-pick { flex: 0 1 220px; min-width: 160px; }
.bb-ie-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.bb-ie-tile { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); }
.bb-ie-tile--lead { border-inline-start: 3px solid var(--bb-accent); }
.bb-ie-tile__l, .bb-ie-tile__s { font-size: var(--bb-fs-caption, 12px); line-height: 16px; color: var(--bb-text-muted); }
.bb-ie-tile__v { font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bb-text); }
.bb-ie-tile__v.bb-ie-pos { color: var(--bb-text-success); }
.bb-ie-tile__v.bb-ie-neg { color: var(--bb-text-danger); }
.bb-ie-t td, .bb-ie-t th { white-space: nowrap; }
.bb-ie-t td { height: 44px; padding-block: 0; }
.bb-ie-cell { max-width: 0; width: 28%; overflow: hidden; text-overflow: ellipsis; }
.bb-ie-actcol { width: 44px; color: var(--bb-text-muted); }
.bb-ie-actcol [class*="bb-ico-"]::before { width: 14px; height: 14px; margin-inline-end: 0; }
.bb-ie-total td { font-weight: 600; background: var(--bb-surface-sunken); border-top: 1px solid var(--bb-border-strong); }
.bb-ie-empty { text-align: center; padding: 48px 16px; display: grid; justify-items: center; gap: 8px; }
.bb-ie-empty h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.bb-ie-empty p { margin: 0 0 8px; max-width: 52ch; color: var(--bb-text-muted); }
.bb-ie-drawh { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.bb-ie-form { display: grid; gap: 14px; align-content: start; }
.bb-ie-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bb-ie-amount input { text-align: end; }
.bb-ie-more { border: 0; background: none; padding: 0; color: var(--bb-accent); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; width: fit-content; }
.bb-ie-more::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); display: inline-block; }
.bb-ie-more[aria-expanded="true"]::before { transform: rotate(45deg); }
.bb-ie-more:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); border-radius: var(--bb-radius-sm); }
.bb-ie-details { display: grid; gap: 12px; }
.bb-ie-details .bb-hint { margin: -6px 0 0; }
.bb-ie-link { color: var(--bb-accent); font-weight: 600; }
.bb-ie-strong { font-weight: 600; }
.bb-ie-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--bb-text-muted); white-space: nowrap; }
.bb-ie-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.bb-ie-del { margin-inline-start: auto; }
.bb-ie-t.is-narrow .bb-ie-hide-md, .bb-ie-t.is-narrow .bb-ie-hide-narrow { display: none; }
@media (max-width: 1100px) { .bb-ie-hide-md { display: none; } }
@media (max-width: 720px) { .bb-ie-tiles { grid-template-columns: minmax(0, 1fr); } }

/* Page section tabs: every tab is a bordered button and the selected one is filled, on every page (Ivan 10-24).
   One look for the tab families and for DxTabs; a group's buttons share one width through the .bb-btnrow rule. */
.bb-pr-tab, .bb-cal-nav__a, .bb-em-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--bb-ctl-h-small, 36px); margin: 0;
    padding: 0 var(--bb-ctl-px, 14px); border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface);
    color: var(--bb-text-muted); font: 600 var(--bb-fs-body) var(--bb-font); white-space: nowrap; text-decoration: none; cursor: pointer;
}
:is(.bb-pr-tab, .bb-cal-nav__a, .bb-em-tab):hover { color: var(--bb-text); background: var(--bb-surface-sunken); }
:is(.bb-pr-tab, .bb-cal-nav__a, .bb-em-tab):is([aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) {
    color: var(--bb-text); background: var(--bb-accent-soft); border-color: var(--bb-accent); box-shadow: inset 0 0 0 1px var(--bb-accent);
}
:is(.bb-pr-tab, .bb-cal-nav__a, .bb-em-tab):focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }

.dxbl-tabs {
    --dxbl-tabs-tab-active-bg: var(--bb-accent);
    --dxbl-tabs-tab-active-hover-bg: var(--bb-accent);
    --dxbl-tabs-tab-default-color: var(--bb-text-muted);
    --dxbl-tabs-tab-default-hover-color: var(--bb-text);
    --dxbl-tabs-tab-default-font-weight: 600;
    --dxbl-tabs-tab-active-color: var(--bb-text);
    --dxbl-tabs-tab-active-hover-color: var(--bb-text);
    --dxbl-tabs-separator-border-width: 0px;
    --dxbl-tabs-tab-padding-y-s: 7px;
    --dxbl-tabs-tab-padding-y-m: 7px;
    --dxbl-tabs-tab-padding-y-l: 7px;
    --dxbl-tabs-tab-padding-x-s: var(--bb-ctl-px, 14px);
    --dxbl-tabs-tab-padding-x-m: var(--bb-ctl-px, 14px);
    --dxbl-tabs-tab-padding-x-l: var(--bb-ctl-px, 14px);
}
/* The active tab shows DevExpress's own indicator (--dxbl-tabs-tab-active-bg); our CssClass only colours the tab. */
.dxbl-tabs .bb-tab { background: var(--bb-surface); border-radius: var(--bb-radius); }
.dxbl-tabs .bb-tab:hover { background: var(--bb-surface-sunken); }


/* ---- Billing, Billing agency, Billing agencies (3.0) ---- */
.bb-bill__auto .bb-bill__autotx { flex: 1 1 auto; min-width: 0; }
.bb-bill__auto .bb-card__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bb-bill__head { align-items: center; }
.bb-bill__chips { padding: 4px 14px 10px; }
.bb-bill__empty { padding: 18px 14px 22px; }
.bb-bill__t { table-layout: auto; }
.bb-bill__t .bb-bill__why { min-width: 14rem; }
.bb-bill__t .bb-bill__why .bb-pill { white-space: nowrap; }
.bb-bill__t .bb-bill__skipcol { width: 52px; text-align: end; padding-inline-start: 0; }
.bb-bill__day th { text-align: start; padding: 8px 14px; background: var(--bb-surface-sunken); border-bottom: 1px solid var(--bb-border); font-weight: 600; }
.bb-bill__day small { margin-inline-start: 8px; color: var(--bb-text-muted); font-weight: 400; font-size: var(--bb-fs-body); }
.bb-bill__act { border: 0; background: none; padding: 0 0 0 8px; color: var(--bb-accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.bb-bill__act:hover { text-decoration: none; }
.bb-bill__act:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); border-radius: var(--bb-radius-sm); }
.bb-bill__act:disabled { color: var(--bb-text-muted); cursor: default; text-decoration: none; }
.bb-bill__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; padding: 14px; border-top: 1px solid var(--bb-border); }
.bb-bill__sum { margin: 0; flex: 1 1 24rem; min-width: 0; font-variant-numeric: tabular-nums; }
.bb-bill__btns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.bb-bill__reasons li { align-items: flex-start; }
.bb-bill__says { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 6px; }
.bb-bill__charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.bb-bill__svg { display: block; width: 100%; height: auto; max-height: 260px; }
.bb-bill__grid { stroke: var(--bb-border); stroke-width: 1; }
.bb-bill__tick { fill: var(--bb-text-muted); font-size: 12px; font-family: var(--bb-font); }
.bb-bill__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bb-bill__line--declined { stroke: var(--bb-text-danger); }
.bb-bill__line--unpaid { stroke: var(--bb-accent); stroke-dasharray: 5 4; }
.bb-bill__dot { fill: var(--bb-text-danger); }
.bb-bill__legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-bill__legend li { display: inline-flex; align-items: center; gap: 8px; }
.bb-bill__key { width: 22px; height: 0; border-top: 3px solid var(--bb-text-danger); }
.bb-bill__key--unpaid { border-top: 3px dashed var(--bb-accent); }
.bb-bill__tenure { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.bb-bill__tenure li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.bb-bill__tenure b { text-align: end; }
.bb-bill__bar { display: block; height: 10px; border-radius: 999px; background: var(--bb-surface-sunken); overflow: hidden; }
.bb-bill__bar > i { display: block; height: 100%; border-radius: 999px; background: var(--bb-accent); }
.bb-bill__runs td, .bb-bill__runs th { white-space: nowrap; }
.bb-bill__combo { min-width: 14rem; max-width: 22rem; }
.bb-agency__t th, .bb-agency__t td { padding-inline: 8px; }
.bb-agency__t .bb-agency__apply { width: 7.5rem; }
.bb-agency.bb-collect .bb-credit__split { grid-template-columns: minmax(0, 3fr) minmax(300px, 1.25fr); }
.bb-agency__t .bb-agency__apply input { text-align: end; }
.bb-agency__pay { display: grid; gap: 12px; align-content: start; }
.bb-agency__field { display: grid; gap: 4px; font-weight: 600; }
.bb-agency__field > span { color: var(--bb-text-muted); font-weight: 600; font-size: var(--bb-fs-body); }
.bb-agency__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.bb-agencies__add { display: grid; grid-auto-flow: column; grid-template-columns: minmax(12rem, 18rem); grid-auto-columns: max-content; justify-content: start; align-items: center; gap: 8px; }
.bb-agencies__card { max-width: 56rem; }
@media (max-width: 1100px) { .bb-bill__paidtx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bb-bill__t .bb-ledger__how { position: relative; } .bb-bill__t .bb-bill__why { min-width: 10rem; } .bb-bill__t .bb-bill__why .bb-pill { white-space: normal; } .bb-bill__t .bb-bill__act { display: block; padding: 4px 0 0; } .bb-bill__charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .bb-agency__row { grid-template-columns: minmax(0, 1fr); } }

/* Public message page (no menu, no rail): logo over one card. Email-change confirm / cancel. */
.bb-pub { min-height: 100vh; display: grid; align-content: start; justify-items: center; gap: 24px; padding: 56px 16px; background: var(--bb-surface-sunken); color: var(--bb-text); font: 400 var(--bb-fs-body) var(--bb-font); }
.bb-pub__logo--dark { display: none; }
[data-bs-theme="dark"] .bb-pub__logo--dark { display: block; }
[data-bs-theme="dark"] .bb-pub__logo--light { display: none; }
.bb-pub__card { width: min(460px, 100%); display: grid; gap: 14px; justify-items: start; padding: 20px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); background: var(--bb-surface); }
.bb-pub__card h1 { margin: 0; font: 600 var(--bb-fs-subtitle1)/var(--bb-lh-subtitle1) var(--bb-font-display); color: var(--bb-text); }
.bb-pub__card p { margin: 0; }
.bb-pub__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-pub__acts form { margin: 0; }
.bb-pub__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--bb-ctl-h-small); padding: 0 var(--bb-ctl-px); border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: transparent; color: var(--bb-text); font: 600 var(--bb-fs-body) var(--bb-font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.bb-pub__btn:hover { background: var(--bb-btn-quiet-bg-h); }
.bb-pub__btn:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-pub__btn--primary { color: var(--bb-btn-brand-fg); background: var(--bb-btn-brand-bg); border-color: var(--bb-btn-brand-fg); }
.bb-pub__btn--primary:hover { background: var(--bb-btn-brand-bg-h); }

/* -- Cards (birthday and come-back) -- */
.bb-cd-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.bb-cd-col { display: grid; gap: 14px; min-width: 0; }
.bb-cd-h { margin: 0 0 10px; font: 600 var(--bb-fs-subtitle2)/var(--bb-lh-subtitle2) var(--bb-font-display); color: var(--bb-text); }
.bb-cd-wrap { padding: 0; overflow-x: auto; }
.bb-cd-table { width: 100%; border-collapse: collapse; }
.bb-cd-table th { text-align: left; font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); padding: 10px 14px; background: var(--bb-surface-sunken); border-bottom: 1px solid var(--bb-border); white-space: nowrap; }
.bb-cd-table td { padding: 0 14px; height: 44px; border-bottom: 1px solid var(--bb-border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26rem; }
.bb-cd-table tbody tr:hover td { background: var(--bb-surface-sunken); }
.bb-cd-table tbody tr { cursor: pointer; }
.bb-cd-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.bb-cd-table .m { color: var(--bb-text-muted); }
.bb-cd-table .c { width: 36px; padding-right: 0; }
.bb-cd-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bb-accent); }
.bb-cd-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 8px; }
.bb-cd-note a { margin-inline-start: 6px; }
.bb-cd-pick i { display: block; height: 38px; border-radius: 4px; }
.bb-cd-art { background-color: var(--bb-accent-soft); }
.bb-cd-art[data-art="confetti"] { background-image: radial-gradient(var(--bb-accent) 2px, transparent 2.5px), radial-gradient(var(--bb-info) 2px, transparent 2.5px), radial-gradient(var(--bb-warn) 1.5px, transparent 2px); background-size: 22px 22px, 30px 30px, 17px 17px; background-position: 0 0, 9px 13px, 5px 3px; }
.bb-cd-art[data-art="balloons"] { background-color: var(--bb-info-bg); background-image: radial-gradient(circle at 20% 40%, var(--bb-accent) 0 14%, transparent 15%), radial-gradient(circle at 45% 30%, var(--bb-warn) 0 12%, transparent 13%), radial-gradient(circle at 72% 45%, var(--bb-info) 0 13%, transparent 14%); }
.bb-cd-art[data-art="stripes"] { background-image: repeating-linear-gradient(135deg, var(--bb-accent) 0 10px, var(--bb-accent-soft) 10px 22px); }
.bb-cd-art[data-art="garden"] { background-color: var(--bb-success-bg, var(--bb-accent-soft)); background-image: radial-gradient(ellipse at 15% 85%, var(--bb-success-border) 0 18%, transparent 19%), radial-gradient(ellipse at 80% 20%, var(--bb-warn) 0 10%, transparent 11%), radial-gradient(ellipse at 60% 90%, var(--bb-accent) 0 12%, transparent 13%); }
.bb-cd-art[data-art="classic"] { background-color: var(--bb-surface); box-shadow: inset 0 0 0 6px var(--bb-surface), inset 0 0 0 8px var(--bb-accent); }
.bb-cd-art[data-art="midnight"] { background-color: var(--bb-text); background-image: radial-gradient(var(--bb-warn) 1.5px, transparent 2px); background-size: 18px 18px; }
.bb-cd-art[data-art="sunrise"] { background-image: linear-gradient(180deg, var(--bb-warn-bg) 0%, var(--bb-warn) 55%, var(--bb-accent) 100%); }
.bb-cd-art[data-art="bamboo"] { background-color: var(--bb-success-bg, var(--bb-accent-soft)); background-image: repeating-linear-gradient(90deg, var(--bb-success-border) 0 4px, transparent 4px 26px); }
.bb-cd-art[data-art="champion"] { background-image: conic-gradient(from 0deg at 50% 100%, var(--bb-accent), var(--bb-warn), var(--bb-accent), var(--bb-warn), var(--bb-accent)); }
.bb-cd-art[data-art="tiger"] { background-color: var(--bb-warn); background-image: repeating-linear-gradient(120deg, var(--bb-text) 0 5px, transparent 5px 24px); }
.bb-cd-prevhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bb-cd-prevhead .bb-cd-h { margin: 0; }
.bb-cd-pager { display: flex; align-items: center; gap: 8px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-cd-mail { display: grid; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); overflow: hidden; background: var(--bb-surface); }
.bb-cd-mail__env { display: grid; gap: 2px; margin: 0; padding: 10px 14px; background: var(--bb-surface-sunken); border-bottom: 1px solid var(--bb-border); font-size: var(--bb-fs-caption); }
.bb-cd-mail__env div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 8px; }
.bb-cd-mail__env dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-cd-mail__env dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-cd-mail__frame { width: 100%; height: 440px; border: 0; background: #fff; }
.bb-cd-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; }
.bb-cd-end .bb-quiet { margin-inline-end: auto; }
@media (max-width: 1099px) { .bb-cd-grid { grid-template-columns: minmax(0, 1fr); } }

/* -- Reports: library -- */
.bb-rl { padding-bottom: 72px; }
.bb-rl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bb-rl-btn { min-width: 150px; }
.bb-rl-filters .bb-chip { min-width: 130px; justify-content: center; }
.bb-rl-crumb a { color: var(--bb-accent); }
.bb-rl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-rl-filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--bb-text-muted); }
.bb-chips b { color: var(--bb-text-muted); font-weight: 400; font-size: var(--bb-fs-caption); }
.bb-lb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bb-lb-card { padding: 14px; border: 1px dashed var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); break-inside: avoid; }
.bb-lb-card__h { font-weight: 600; }
@media (max-width: 900px) { .bb-lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .bb-rl .bb-lb-card { border-color: #999; } }

/* ---- Store and Inventory ----------------------------------------------------------------------------------------------------------------- */
.bb-ico-boxes-stacked::before { -webkit-mask-image: url("icons/fa-duo-boxes-stacked.svg"); mask-image: url("icons/fa-duo-boxes-stacked.svg"); }
.bb-ico-cash-register::before { -webkit-mask-image: url("icons/fa-duo-cash-register.svg"); mask-image: url("icons/fa-duo-cash-register.svg"); }
.bb-ico-qrcode::before        { -webkit-mask-image: url("icons/fa-duo-qrcode.svg");        mask-image: url("icons/fa-duo-qrcode.svg"); }
.bb-ico-box-open::before      { -webkit-mask-image: url("icons/fa-duo-box-open.svg");      mask-image: url("icons/fa-duo-box-open.svg"); }
.bb-chip__n--warn { color: var(--bb-text-danger); }

.bb-sto__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0; }
.bb-sto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 16px; align-items: start; }
.bb-sto__main { display: grid; gap: 12px; min-width: 0; }
.bb-sto__scanrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bb-sto__scan { flex: 1 1 260px; max-width: 420px; }
.bb-sto__scanrow .bb-hint { margin: 0; flex: 1 1 200px; }
.bb-sto__linkbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--bb-radius); text-decoration: none; }
.bb-sto__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bb-sto-tile { display: grid; gap: 4px; align-content: start; text-align: start; padding: 12px; min-height: 92px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg);
    background: var(--bb-surface-raised); color: var(--bb-text); cursor: pointer; font: inherit; }
.bb-sto-tile:hover { border-color: var(--bb-border-strong); box-shadow: var(--bb-e1); }
.bb-sto-tile:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-sto-tile[draggable="true"]:active { cursor: grabbing; }
.bb-sto-tile__name { font-size: var(--bb-fs-body); line-height: var(--bb-lh-body); font-weight: 600; overflow-wrap: anywhere; }
.bb-sto-tile__sub { font-size: var(--bb-fs-caption); line-height: var(--bb-lh-caption); color: var(--bb-text-muted); }
.bb-sto-tile__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-top: 4px; font-size: var(--bb-fs-body); }
.bb-sto-stock { font-size: var(--bb-fs-caption); display: inline-flex; align-items: center; gap: 5px; }
.bb-sto-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bb-sto-stock--ok { color: var(--bb-text-success); }
.bb-sto-stock--low { color: var(--bb-accent); }
.bb-sto-stock--out { color: var(--bb-text-danger); }
.bb-sto__panel { padding: 16px; display: grid; gap: 12px; position: sticky; top: var(--bb-page-sticky-top, 8px); }
.bb-sto__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bb-sto__panelhead h2 { margin: 0; font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: 600; }
.bb-sto__who { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); font-size: var(--bb-fs-body); }
.bb-sto__who span { color: var(--bb-text-muted); }
.bb-sto__who--ask { border: 1px dashed var(--bb-border-strong); }
.bb-sto__hint { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--bb-radius); background: var(--bb-info-bg); font-size: var(--bb-fs-caption); line-height: var(--bb-lh-caption); }
.bb-sto__hint i { margin-top: 2px; }
.bb-sto__empty { display: grid; gap: 2px; padding: 18px 8px; text-align: center; color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-sto__empty b { color: var(--bb-text); }
.bb-sto__lines { list-style: none; margin: 0; padding: 0; display: grid; }
.bb-sto-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bb-border); }
.bb-sto-line__what { display: grid; gap: 1px; min-width: 0; font-size: var(--bb-fs-body); }
.bb-sto-line__what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sto-line__what span { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-sto-line__what .bb-sto-line__back { color: var(--bb-accent); }
.bb-sto-line__amt { font-variant-numeric: tabular-nums; text-align: end; min-width: 64px; }
.bb-sto-line__opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--bb-fs-caption); }
.bb-sto-line__for { display: inline-flex; align-items: center; gap: 6px; color: var(--bb-text-muted); }
.bb-sto-step { display: inline-flex; align-items: center; gap: 4px; }
.bb-sto-step__n { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--bb-fs-body); }
.bb-sto-for { min-width: 150px; max-width: 220px; }
.bb-sto-price { width: 96px; }
.bb-sto-qty { max-width: 140px; }
.bb-sto__totals { margin: 0; display: grid; gap: 4px; font-size: var(--bb-fs-body); font-variant-numeric: tabular-nums; }
.bb-sto__totals > div { display: flex; justify-content: space-between; gap: 12px; }
.bb-sto__totals dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-sto__totals dd { margin: 0; }
.bb-sto__grand { padding-top: 6px; border-top: 1px solid var(--bb-border); }
.bb-sto__grand dt { color: var(--bb-text); font-weight: 600; }
.bb-sto__grand dd { font-size: var(--bb-fs-subtitle1); font-weight: 600; }
.bb-sto__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-sto__acts > * { flex: 1 1 140px; }
.bb-sto-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-sto-opt { display: grid; gap: 0; text-align: center; }
.bb-sto-opt small { font-size: var(--bb-fs-caption); opacity: .85; }
.bb-sto-opt .bb-sto-opt__out { color: var(--bb-text-danger); }
.bb-sto__panel.is-over { box-shadow: 0 0 0 2px var(--bb-accent); }
@media (max-width: 1100px) { .bb-sto__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } .bb-sto__tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 820px) { .bb-sto__grid { grid-template-columns: minmax(0, 1fr); } .bb-sto__panel { position: static; } }

.bb-inv__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bb-inv__kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--bb-radius-lg); background: var(--bb-surface-sunken); }
.bb-inv__kpi b { font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-inv__kpi span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-inv__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
.bb-inv__bar .bb-chips { flex: 1 1 auto; }
.bb-inv__t tr.is-low td { background: var(--bb-warn-bg); }
.bb-inv__t tr.is-hidden td { color: var(--bb-text-muted); }
.bb-ledger__t.bb-inv__t th, .bb-ledger__t.bb-inv__t td { padding: 10px 8px; }
.bb-inv__num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-inv__acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; justify-content: end; white-space: nowrap; }
.bb-inv__bar > .bb-inv__acts { margin-inline-start: auto; }
.bb-inv__matrix { width: 100%; border-collapse: collapse; font-size: var(--bb-fs-body); }
.bb-inv__matrix th, .bb-inv__matrix td { padding: 6px 6px; text-align: start; border-bottom: 1px solid var(--bb-border); vertical-align: middle; }
.bb-inv__matrix thead th { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); font-weight: 600; }
.bb-inv__cats { display: grid; gap: 4px; }
.bb-inv__cat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: var(--bb-surface); cursor: grab; }
.bb-inv__cat.is-over { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-inv__split { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
.bb-inv__splitcard { padding: 12px; }
.bb-inv__row-drag { cursor: grab; }
.bb-inv__lines { width: 100%; border-collapse: collapse; font-size: var(--bb-fs-body); }
.bb-inv__lines th, .bb-inv__lines td { padding: 6px 8px; border-bottom: 1px solid var(--bb-border); text-align: start; }
@media (max-width: 900px) { .bb-inv__split { grid-template-columns: minmax(0, 1fr); } }

.bb-ico-bars::before { -webkit-mask-image: url("icons/fa-duo-bars.svg"); mask-image: url("icons/fa-duo-bars.svg"); }
.bb-link { padding: 0; border: 0; background: transparent; color: var(--bb-link); font: inherit; text-align: start; text-decoration: underline; cursor: pointer; }
.bb-link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-inv__cat .bb-link { color: var(--bb-text); text-decoration: none; }

/* ---- Member tools (bb-mt*): Change many, Move a family, Delete a family. Layer-2 roles only. ---- */
.bb-mt > * { min-width: 0; }
.bb-mt__split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.bb-mt__col { display: grid; gap: 14px; min-width: 0; }
.bb-mt__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bb-mt__inline { display: flex; align-items: center; gap: 10px; }
.bb-mt__pick { width: min(34rem, 70vw); }
.bb-mt__end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.bb-mt__empty { display: grid; justify-items: center; gap: 8px; padding: 40px 18px; text-align: center; color: var(--bb-text-muted); }
.bb-mt__empty b { color: var(--bb-text); font-size: var(--bb-fs-subtitle2); }
.bb-mt__skipped { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }
@media (max-width: 1099px) { .bb-mt__split { grid-template-columns: minmax(0, 1fr); } }

/* ---- Referrals (bb-rf*). Layer-2 roles only. ---- */
.bb-rf__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.bb-rf__col { display: grid; gap: 14px; min-width: 0; }
.bb-rf__share { display: flex; gap: 8px; align-items: center; }
.bb-rf__link { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--bb-border-strong); border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text); overflow-wrap: anywhere; user-select: all; }
.bb-rf__qr { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bb-rf__qrimg { width: 96px; height: 96px; flex: none; background: #fff; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); padding: 4px; }
.bb-rf__qrimg svg { width: 100%; height: 100%; display: block; }
.bb-rf__empty { display: grid; justify-items: center; gap: 8px; padding: 40px 18px; text-align: center; color: var(--bb-text-muted); }
.bb-rf__empty b { color: var(--bb-text); font-size: var(--bb-fs-subtitle2); }
@media (max-width: 1099px) { .bb-rf__grid { grid-template-columns: minmax(0, 1fr); } }
.bb-rf__top { margin: 0; display: grid; }
.bb-rf__top > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-rf__top > div:last-child { border-bottom: 0; }
.bb-rf__top dt { font-weight: 400; color: var(--bb-text-muted); }
.bb-rf__top dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bb-rf__act { min-width: 200px; }
/* Lists: where an item is offered */
.bb-ls-where { display: grid; gap: 6px; padding-top: 4px; }
.bb-ls-hint { margin: -6px 0 0; }

/* Reports > Growth and revenue */
.bb-gr { display: grid; gap: 14px; min-width: 0; }
.bb-gr > * { min-width: 0; }
.bb-gr-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bb-gr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bb-gr-kpi { padding: 10px 12px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); display: grid; gap: 2px; align-content: start; }
.bb-gr-kpi__l { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gr-kpi__v { font: 600 20px/28px var(--bb-font-display); font-variant-numeric: tabular-nums; color: var(--bb-text); }
.bb-gr-kpi__n { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gr-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.bb-gr-col { display: grid; gap: 14px; min-width: 0; }
.bb-gr-h { margin: 0; font: 600 var(--bb-fs-subtitle2)/var(--bb-lh-subtitle2) var(--bb-font-display); color: var(--bb-text); }
.bb-gr-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; background: var(--bb-accent); }
.bb-gr-legend i.is-left { background: var(--bb-text-danger); }
.bb-gr-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; }
.bb-gr-bars__m { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.bb-gr-bars__pair { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; flex: 1 1 auto; }
.bb-gr-bar { display: block; width: 100%; max-width: 14px; min-height: 1px; border-radius: 3px 3px 0 0; background: var(--bb-accent); }
.bb-gr-bar.is-left { background: var(--bb-text-danger); opacity: .8; }
.bb-gr-bars__l { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); white-space: nowrap; }
.bb-gr-facts { display: grid; margin: 0; }
.bb-gr-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--bb-border); }
.bb-gr-facts > div:last-child { border-bottom: 0; }
.bb-gr-facts dt { font-weight: 400; color: var(--bb-text-muted); }
.bb-gr-facts dd { margin: 0; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.bb-gr-trend { margin-inline-start: 6px; font-size: var(--bb-fs-caption); font-weight: 600; color: var(--bb-text-success); }
.bb-gr-trend.is-down { color: var(--bb-text-danger); }
.bb-gr-rank__h { margin: 12px 0 2px; font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); }
.bb-gr-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-gr-people { padding: 8px 0 10px; border-bottom: 1px solid var(--bb-border); }
.bb-gr-people__h { display: flex; justify-content: space-between; gap: 12px; color: var(--bb-text-muted); }
.bb-gr-people__n { font-weight: 600; color: var(--bb-text); font-variant-numeric: tabular-nums; }
.bb-gr-people ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.bb-gr-people li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.bb-gr-people__d { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
@media (max-width: 1099px) { .bb-gr-grid { grid-template-columns: minmax(0, 1fr); } .bb-gr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bb-gr-kpis { grid-template-columns: minmax(0, 1fr); } }


/* ---- Card dispute case (bb-dc*): deadline band, payment, evidence, steps. Layer-2 roles only. ---- */
.bb-dc { display: grid; gap: 14px; } .bb-dc > * { min-width: 0; }
.bb-dc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.bb-dc-meta { overflow-wrap: anywhere; }
.bb-dc-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
.bb-dc-col { display: grid; gap: 14px; min-width: 0; }
.bb-dc-side { position: sticky; top: var(--bb-page-sticky-top, 12px); }
.bb-dc-h { margin: 0 0 10px; font: 600 var(--bb-fs-subtitle2)/var(--bb-lh-subtitle2) var(--bb-font-display); color: var(--bb-text); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; }
.bb-dc-h small { font: 400 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); }
.bb-dc-due { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.bb-dc-due p { margin: 0; } .bb-dc-due p + p { color: var(--bb-text-muted); }
.bb-dc-due__n { display: grid; justify-items: center; min-width: 64px; padding: 6px 10px; border-radius: var(--bb-radius); background: var(--bb-surface); }
.bb-dc-due__n b { font: 600 20px/1.1 var(--bb-font-display); font-variant-numeric: tabular-nums; } .bb-dc-due__n span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); white-space: nowrap; }
.bb-dc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.bb-dc-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-dc-facts > div { padding: 7px 0; border-bottom: 1px solid var(--bb-border-subtle); min-width: 0; }
.bb-dc-facts dt { font-weight: 400; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-dc-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bb-dc-wide { grid-column: 1 / -1; } .bb-dc-notes { white-space: pre-line; font-weight: 400; }
.bb-dc-member { display: block; }
.bb-dc-unmatched { margin: 0 0 8px; } .bb-dc-hint { margin: 0 0 4px; }
.bb-dc-tablewrap { overflow-x: auto; }
.bb-dc-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.bb-dc-table th { text-align: left; font: 600 var(--bb-fs-caption) var(--bb-font); color: var(--bb-text-muted); padding: 8px 12px; background: var(--bb-surface-sunken); border-bottom: 1px solid var(--bb-border); white-space: nowrap; }
.bb-dc-table td { padding: 0 12px; height: 40px; border-bottom: 1px solid var(--bb-border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.bb-dc-table tfoot td { border-bottom: 0; font-weight: 600; }
.bb-dc-r { text-align: right; font-variant-numeric: tabular-nums; } .bb-dc-c { width: 40px; padding-right: 0; }
.bb-dc-ev { list-style: none; margin: 0; padding: 0; }
.bb-dc-ev > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-dc-ev > li:last-child { border-bottom: 0; } .bb-dc-ev b, .bb-dc-ev > li span { display: block; }
.bb-dc-ev__yes { color: var(--bb-text-success); padding-top: 2px; } .bb-dc-ev__no { color: var(--bb-text-muted); padding-top: 2px; }
.bb-dc-ev summary { cursor: pointer; color: var(--bb-link); font-size: var(--bb-fs-caption); margin-top: 2px; }
.bb-dc-step { display: grid; justify-items: start; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-dc-step small { padding-left: 24px; }
.bb-dc-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 12px; }
.bb-dc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.bb-dc-form--side { grid-template-columns: minmax(0, 1fr); }
.bb-dc-headacts { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.bb-dc-locked { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--bb-ctl-h); padding: 0 12px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-text-muted); }
.bb-dc-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.bb-dc-tl li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-dc-tl li:last-child { border-bottom: 0; } .bb-dc-tl time { color: var(--bb-text-muted); font-variant-numeric: tabular-nums; }
.bb-dc-effects { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.bb-dc-legal { margin: 0; font-size: var(--bb-fs-caption); }
@media (max-width: 1279px) { .bb-dc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .bb-dc-grid { grid-template-columns: minmax(0, 1fr); } .bb-dc-side { position: static; } }

/* ===== first-day setup bar (Shared/Setup/SetupBar.razor), inside the sticky title block ===== */
.bb-setupbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 16px; min-height: 46px;
    background: var(--bb-surface); border-top: 1px solid var(--bb-border); border-bottom: 2px solid var(--bb-accent); font-size: var(--bb-fs-body);
}
.bb-setupbar.is-done { border-bottom-color: var(--bb-ok); }
.bb-setupbar__dots { display: inline-grid; grid-template-columns: repeat(4, 22px); gap: 4px; }
.bb-setupbar__dots i { height: 6px; border-radius: 3px; background: var(--bb-border); }
.bb-setupbar__dots i.on { background: var(--bb-ok); }
.bb-setupbar__dots i.is-here:not(.on) { background: var(--bb-accent); }
.bb-setupbar__what { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--bb-text); min-width: 0; }
.bb-setupbar__what .bb-ico-circle-check { color: var(--bb-ok); }
.bb-setupbar__acts { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.bb-setupbar__link { color: var(--bb-link); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bb-setupbar__link:hover, .bb-setupbar__link:focus-visible { text-decoration: underline; }
.bb-setupbar__x { flex: none; }

/* Cashier apply: the selected total and amount on the pay panel; what one partial payment pays, under the charges. */
.bb-apply__sel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 4px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bb-border); }
.bb-apply__total { font-size: 20px; font-weight: 700; line-height: 28px; font-variant-numeric: tabular-nums; color: var(--bb-text); white-space: nowrap; }
.bb-apply__field { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 8px; }
.bb-apply__lbl { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-apply__line { margin: 8px 0 12px; font-size: 12px; line-height: 16px; color: var(--bb-text); }
.bb-apply__list { list-style: none; margin: 0; padding: 0; }
.bb-apply__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 128px; gap: 8px; align-items: center; min-height: 36px; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-apply__row:last-child { border-bottom: 0; }
.bb-apply__state { display: inline-flex; align-items: center; justify-content: center; }
.bb-apply__ok { color: var(--bb-ok); font-size: 16px; }
.bb-apply__half { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bb-accent); background: linear-gradient(90deg, var(--bb-accent) 50%, transparent 50%); }
.bb-apply__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-apply__amt { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bb-apply__tag { font-size: 12px; color: var(--bb-text-muted); text-align: right; white-space: nowrap; }
.bb-apply__tag--part { color: var(--bb-text); }
.bb-apply__tax { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--bb-text-muted); }
.bb-apply__cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; max-width: 100%; }
.bb-apply__set { font-size: 12px; color: var(--bb-accent); white-space: nowrap; }
.bb-apply__max { font-size: 12px; color: var(--bb-text-muted); white-space: nowrap; }
.bb-apply__in { width: 96px; }
.bb-apply__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; }
.bb-apply__still { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.bb-apply__still li { display: flex; gap: 8px; align-items: baseline; }
.bb-apply__still li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--bb-accent); }

/* ---- Exam prints (sheet, belt order, labels, notices, candidates list): always paper, Letter size ---- */
@page bb-land-en { size: letter landscape; margin: .4in .5in .6in; @bottom-left { content: var(--bb-printed); font: 10px sans-serif; color: gray; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 10px sans-serif; color: gray; } }
@page bb-land-es { size: letter landscape; margin: .4in .5in .6in; @bottom-left { content: var(--bb-printed); font: 10px sans-serif; color: gray; } @bottom-right { content: "P\00E1gina " counter(page) " de " counter(pages); font: 10px sans-serif; color: gray; } }
@page bb-port-en { size: letter portrait; margin: .45in .5in .6in; @bottom-left { content: var(--bb-printed); font: 10px sans-serif; color: gray; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 10px sans-serif; color: gray; } }
@page bb-port-es { size: letter portrait; margin: .45in .5in .6in; @bottom-left { content: var(--bb-printed); font: 10px sans-serif; color: gray; } @bottom-right { content: "P\00E1gina " counter(page) " de " counter(pages); font: 10px sans-serif; color: gray; } }
@page bb-lbl5160 { size: letter portrait; margin: 0; }
@page bb-lbl4150 { size: 3.5in 1.12in; margin: 0; }
.bb-print--land.bb-print--en { page: bb-land-en; }
.bb-print--land.bb-print--es { page: bb-land-es; }
.bb-print--port.bb-print--en { page: bb-port-en; }
.bb-print--port.bb-print--es { page: bb-port-es; }
.bb-print--lbl5160 { page: bb-lbl5160; }
.bb-print--lbl4150 { page: bb-lbl4150; }
.bb-print { font-size: 12px; line-height: 1.35; color: var(--bb-text); }
.bb-print__table td { color: var(--bb-text); }
.bb-print--land { max-width: 11in; margin-inline: auto; }
.bb-print--port { max-width: 8.5in; margin-inline: auto; }
.bb-print__bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.bb-print__bar .btn { min-width: 120px; }
.bb-print__hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--bb-text); padding-bottom: 8px; margin-bottom: 10px; }
.bb-print__biz { display: flex; gap: 12px; align-items: center; }
.bb-print__biz b { display: block; font-size: 15px; }
.bb-print__biz span { display: block; color: var(--bb-text-muted); }
.bb-print__biz .bb-print__logo { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 8px; background: var(--bb-text); color: var(--bb-surface); font-weight: 800; font-size: 18px; }
.bb-print__ttl { text-align: end; }
.bb-print__ttl b { display: block; font-size: 17px; }
.bb-print__ttl--big b { font-size: 20px; }
.bb-print__ttl span { color: var(--bb-text-muted); }
.bb-print__table { width: 100%; border-collapse: collapse; }
.bb-print__table th { font-size: 10.5px; text-align: start; font-weight: 600; color: var(--bb-text-muted); border-bottom: 1px solid var(--bb-text); padding: 5px 4px; vertical-align: bottom; }
.bb-print__table td { border-bottom: 1px solid var(--bb-border); padding: 5px 4px; vertical-align: middle; }
.bb-print__sheet td { height: 28px; }
.bb-print__table thead { display: table-header-group; }
.bb-print__table tr { break-inside: avoid; }
.bb-print__grp td { background: var(--bb-surface-sunken); font-weight: 700; height: auto; }
.bb-print__grp { break-after: avoid; }
.bb-print__table .bb-print__c { text-align: center; }
.bb-print__table .bb-print__num { text-align: end; font-variant-numeric: tabular-nums; }
.bb-print__n { width: 28px; }
.bb-print__size { font-size: 1rem; font-weight: 700; text-align: center; }
.bb-print__box { border-inline-start: 1px solid var(--bb-border); width: 62px; }
.bb-print__total td { font-weight: 700; }
.bb-print__rank { display: inline-flex; align-items: center; gap: 8px; }
.bb-print__swatch .bb-disc-belt { width: 56px; }
.bb-print__chk { display: inline-block; width: 13px; height: 13px; border: 1px solid var(--bb-text); border-radius: 2px; vertical-align: -2px; }
.bb-print__due { color: var(--bb-text-danger); font-weight: 600; }
.bb-print__legend { margin-top: 10px; color: var(--bb-text-muted); }
.bb-print__sign { display: flex; gap: 40px; margin-top: 26px; break-inside: avoid; }
.bb-print__sign > div { flex: 1; border-top: 1px solid var(--bb-text); padding-top: 4px; color: var(--bb-text-muted); }
.bb-print__sign > .bb-print__sign--short { flex: .5; }
.bb-print__line { display: inline-block; flex: 1; min-width: 200px; height: 14px; border-bottom: 1px solid var(--bb-text); }
/* Notice: one page per member, the return slip at the bottom behind a cut line */
.bb-notice-cut { margin-top: auto; padding-top: 12px; border-top: 1.5px dashed var(--bb-text-muted); position: relative; break-inside: avoid; }
.bb-notice-cut::before { content: "\2702  " attr(data-cut); position: absolute; top: -9px; inset-inline-start: 0; background: var(--bb-surface); padding-inline-end: 8px; color: var(--bb-text-muted); font-size: 10.5px; }
.bb-notice-ret { display: flex; justify-content: space-between; gap: 24px; margin-top: 4px; }
.bb-notice-ask { border: 1px solid var(--bb-border); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }

/* Printed exam invitation: two half pages per Letter sheet, QR beside the letter, reply slip under the cut line. */
.bb-invite-sheet { height: 9.9in; display: grid; grid-template-rows: 1fr 1fr; gap: .15in; break-after: page; }
.bb-invite-sheet:last-child { break-after: auto; }
.bb-invite { display: flex; flex-direction: column; min-height: 0; font-size: 11.5px; line-height: 1.4; overflow: hidden; }
.bb-invite p { margin: 0 0 6px; }
.bb-invite__head { margin: 0 0 6px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-invite__body { display: grid; grid-template-columns: 1fr 1.5in; gap: 14px; align-items: start; }
.bb-invite__rules { color: var(--bb-text-muted); font-size: 10.5px; }
.bb-invite__qr { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 10.5px; }
.bb-invite__qr svg { width: 1.3in; height: 1.3in; }
.bb-invite .bb-notice-cut { margin-top: auto; padding-top: 8px; }
.bb-invite .bb-notice-ask { margin-top: 6px; padding: 6px 10px; }
.bb-promo-answer { display: grid; gap: 6px; margin: 0 0 12px; }
.bb-promo-answer > div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--bb-border-subtle); padding-top: 6px; }
.bb-promo-answer dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-promo-answer dd { margin: 0; font-weight: 600; }
.bb-promo-signature { display: block; max-width: 100%; max-height: 140px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius); background: #fff; padding: 4px; margin: 0 0 6px; }
.bb-promo-parent { border: 0; cursor: pointer; font: inherit; }
.bb-notice-opts { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 6px; }
.bb-notice-opts th { font-size: 10.5px; font-weight: 600; color: var(--bb-text-muted); text-align: center; padding: 2px 0; }
.bb-notice-opts td { text-align: center; padding: 5px 0; }
.bb-notice-opts th:first-child, .bb-notice-opts td:first-child { text-align: start; }
.bb-notice-opts .bb-notice-opts__q { width: 245px; }
/* Belt labels: Avery 5160 (3 x 10, 2.625in x 1in on Letter) and Avery 4150 (one 3.5in x 1.12in label per page) */
.bb-lbl-page--5160 { width: 8.5in; height: 11in; padding: .5in .1875in 0; display: grid; grid-template-columns: repeat(3, 2.625in); grid-auto-rows: 1in; column-gap: .125in; break-after: page; margin-inline: auto; }
.bb-lbl-page--4150 { width: 3.5in; height: 1.12in; display: block; break-after: page; margin-inline: auto; }
.bb-lbl-page:last-child { break-after: auto; }
.bb-lbl { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: .06in .14in; overflow: hidden; box-sizing: border-box; height: 100%; border: 1px dashed var(--bb-border); border-radius: 6px; }
.bb-lbl__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-lbl__rank { display: flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.bb-lbl__belt .bb-disc-belt { width: 40px; }
.bb-lbl__meta { display: flex; justify-content: space-between; color: var(--bb-text-muted); font-size: 10.5px; }
.bb-lbl__meta > span:first-child { color: var(--bb-text); font-weight: 700; font-size: 12px; }
/* Belt order dialog */
.bb-promo-belts__foot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; width: 100%; padding: 14px 24px 10px; }
.bb-promo-belts__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 10px; color: var(--bb-text-muted); }
.bb-promo-belts__row > :last-child { margin-inline-start: auto; width: 280px; }
.bb-promo-belts__table { width: 100%; border-collapse: collapse; }
.bb-promo-belts__table th { text-align: start; font-weight: 600; color: var(--bb-text-muted); padding: 4px 8px; border-bottom: 1px solid var(--bb-border); }
.bb-promo-belts__table td { padding: 4px 8px; border-bottom: 1px solid var(--bb-border); vertical-align: middle; }
.bb-promo-belts__size { width: 90px; }
.bb-promo-belts__size.is-missing { box-shadow: 0 0 0 1px var(--bb-text-danger); border-radius: var(--bb-radius); }
.bb-promo-belts__scroll { max-height: 50vh; overflow: auto; }
@media print {
    .bb-print, .bb-print * { visibility: visible; }
    .bb-print { padding: 0; max-width: none; }
    .bb-print__bar { display: none; }
    .bb-lbl { border-color: transparent; }
    .bb-print--lbl5160, .bb-print--lbl4150 { padding: 0; }
}

/* ===== lane X2 A: Calendar on DevExpress controls ===== */
/* Our wrappers size the DevExpress buttons: a grid cell stretches its button, so no rule lands on a dxbl class. */
.bb-cal-pick { max-width: 100%; overflow-x: auto; }
.bb-cal-radio__says { display: block; font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-cal-hits > li, .bb-cal-agenda > li { display: grid; }
.bb-cal-hits__row { width: 100%; text-align: start; color: var(--bb-text); }
.bb-cal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 6px; }
.bb-cal-agenda__line { width: 100%; display: grid; grid-template-columns: 64px 10px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    text-align: start; color: var(--bb-text); }
.bb-cal-wkmini__line { display: block; width: 100%; padding-inline-start: 6px; border-inline-start: 3px solid var(--bb-info); text-align: start;
    white-space: normal; overflow-wrap: anywhere; color: var(--bb-text); }
.bb-cal-sel .is-sel { --dxbl-grid-row-bg: var(--bb-info-bg); }
.bb-cal-rowacts { display: flex; gap: 6px; }
.bb-cal-week__save { display: grid; grid-template-columns: 220px repeat(2, minmax(13rem, max-content)); justify-content: start; align-items: end; }
@media (max-width: 767.98px) { .bb-cal-week__save { grid-template-columns: minmax(0, 1fr); } }
/* ===== end lane X2 A ===== */

/* ===== lane X2 B: Packages, Add member, Documents, Rank setup, Check-in on DevExpress controls ===== */
/* Card radios (DxRadio) and chip checkboxes (DxCheckBox) keep DevExpress's own mark: CssClass carries colour and spacing only, our span lays out the words. */
.bb-dxcard { padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px; background: var(--bb-surface-raised); color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-dxcard.is-on { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.bb-dxcard.is-off { opacity: .6; }
.bb-dxcard:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-dxcard__txt { display: grid; gap: 2px; text-align: start; font-weight: 400; }
.bb-dxcard__txt > b { color: var(--bb-text); font-weight: 600; }
.bb-dxcard__says { color: var(--bb-text-muted); }
.bb-dxcard__txt--tile { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.bb-dxcard__txt--tile > .bb-tile { grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 9px; }
.bb-dxcard__txt--tile > .bb-tile [class*="bb-ico-"]::before { width: 19px; height: 19px; margin-inline-end: 0; }
.bb-dxcard__txt--tile > :not(.bb-tile) { grid-column: 2; }
.bb-dxcard__txt--sm > .bb-tile { width: 30px; height: 30px; border-radius: 8px; }
.bb-dxcard__txt--sm > .bb-tile [class*="bb-ico-"]::before { width: 17px; height: 17px; }
.bb-dxchip { padding: 6px 14px 6px 10px; border: 1px solid var(--bb-border); border-radius: 999px; background: var(--bb-surface); color: var(--bb-text); font-weight: 600; }
.bb-dxchip.is-on { border-color: var(--bb-accent); background: var(--bb-accent-soft); }
.bb-dxchip:focus-within { box-shadow: var(--bb-focus-ring); }
.bb-dxchips { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.bb-dxchips--list { display: grid; gap: 8px; }
.bb-dxchips--list > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bb-dxchips--list small { color: var(--bb-text-muted); }

/* Packages: the filter segment beside the search, the empty-state template tiles. */
.bb-pk-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-pk-chipn { margin-inline-start: 6px; font-weight: 600; color: var(--bb-text-muted); }
.bb-pk-tplbtn { display: grid; gap: 6px; justify-items: start; text-align: start; white-space: normal; padding: 6px 2px; }
.bb-pk-tplbtn > b { font: 600 var(--bb-fs-body) var(--bb-font-display); margin-top: 6px; color: var(--bb-text); }
.bb-pk-tplbtn > span:not(.bb-tile):not(.bb-pk-eg) { color: var(--bb-text-muted); font-size: var(--bb-fs-body); font-weight: 400; }

/* Add member: the numbered step a staff member can go back to. */
.bb-am-stepn { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-inline-end: 8px; border-radius: 50%; border: 1px solid var(--bb-border); font-size: var(--bb-fs-caption); }
.bb-am-steps .is-done .bb-am-stepn { background: var(--bb-accent); border-color: var(--bb-accent); color: var(--bb-text-onbrand); }

/* Rank setup: the system list (each a DxButton), the new-system button at the foot of the column, keyboard-only move buttons. */
.bb-rk-sys__in { display: grid; gap: 2px; justify-items: start; width: 100%; text-align: start; white-space: normal; padding: 4px 2px; }
.bb-btn-secondary.bb-rk-sys.is-on {
    --dxbl-btn-bg: var(--bb-accent-soft);      --dxbl-btn-hover-bg: var(--bb-accent-soft);
    --dxbl-btn-border-color: var(--bb-accent); --dxbl-btn-hover-border-color: var(--bb-accent);
}
.bb-rk-side__new { display: grid; margin-top: auto; }
.bb-rk-moves:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Check-in: the stage's big buttons read on the brand colour. */
.bb-kiosk .bb-kiosk-cta {
    --dxbl-btn-color: var(--bb-brand-deep);              --dxbl-btn-hover-color: var(--bb-brand-deep);
    --dxbl-btn-bg: var(--bb-accent-bright);              --dxbl-btn-hover-bg: var(--bb-text-onbrand);
    --dxbl-btn-active-bg: var(--bb-text-onbrand);        --dxbl-btn-active-color: var(--bb-brand-deep);
    --dxbl-btn-border-color: var(--bb-accent-bright);    --dxbl-btn-hover-border-color: var(--bb-text-onbrand);
    font-weight: 600;
}
/* Check-in: a person to tap is a DxButton; our span lays out photo and name, a ticked tile is accent-coloured. */
.bb-kiosk-pick__in { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; text-align: start; white-space: normal; color: var(--bb-text); }
.bb-btn-secondary.bb-kiosk-pick.is-on {
    --dxbl-btn-bg: var(--bb-accent-soft);      --dxbl-btn-hover-bg: var(--bb-accent-soft);
    --dxbl-btn-border-color: var(--bb-accent); --dxbl-btn-hover-border-color: var(--bb-accent);
}
/* ===== end lane X2 B ===== */

/* ===== lane X2 C: Events, Lists, Services, Member tools, Member lists, Promotions on DevExpress controls ===== */
/* Drawer lists (Events, Lists, Services): a row opens the drawer; the open row keeps the accent through DX's own row variable. */
.bb-ie-grid td { cursor: pointer; }
.bb-ie-grid .is-sel { --dxbl-grid-row-bg: var(--bb-accent-soft); }
.bb-ie-actico { color: var(--bb-text-muted); }
.bb-ie-actico::before { width: 14px; height: 14px; margin-inline-end: 0; }
/* Promotions: the certificate box is sized by its wrapper; the three filter pillars are DX buttons holding a count over a label. */
.bb-promo-certbox { max-width: 160px; }
.bb-promo-pillar__in { display: grid; justify-items: start; width: 100%; min-width: 0; text-align: start; }
.bb-promo-pillar__in b { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-variant-numeric: tabular-nums; }
.bb-promo-pillar__in span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: .8rem; }
/* Roster action buttons share one width: the row is a grid of equal cells, at least 10.5rem each. */
.bb-promo-roster__acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); width: max-content; max-width: 100%; }
/* ===== end lane X2 C ===== */

/* ===== lane X2 D: containers that size DevExpress controls (replaces rules on dxbl selectors) ===== */
/* Our containers size the DevExpress buttons: a grid cell stretches its item, white-space inherits. Where one control in a row needs a
   floor width, the rule names the class the page gives it through the component's CssClass (the DevExpress-documented styling route). */
.bb-cashier__commit { display: grid; }
.bb-health__cta, .bb-setup__acts, .bb-bd-savebar__acts { white-space: nowrap; }
.bb-disc__acts > :is(.bb-btn-primary, .bb-btn-secondary):not(.bb-disc__more) { min-width: 120px; }
.bb-disc-beltpick > .bb-btn-secondary { justify-self: end; }
.bb-au-fit__who { grid-column: 1; grid-row: 1; }
.bb-ac-acts > :is(.bb-btn-primary, .bb-btn-secondary) { min-width: 11rem; }
.bb-bill__auto > .bb-btn-secondary { flex: none; white-space: nowrap; }
/* A DevExpress report viewer in a dialog: the container gives the viewer its height; the viewer lays itself out. */
/* ===== end lane X2 D ===== */

/* ===== lane DX1: money and accounting screens on DevExpress grids ===== */
/* Row kinds come from the grid's CustomizeElement: the row class sets DevExpress's own row background variable, a cell class sets the weight. */
.bb-fs-pnlgrid .bb-fs-grp, .bb-fs-pnlgrid .bb-fs-sub { --dxbl-grid-row-bg: var(--bb-surface-sunken); }
.bb-fs-pnlgrid .bb-fs-tot, .bb-fs-pnlgrid .bb-fs-click.is-sel, .bb-ie-grid .is-sel { --dxbl-grid-row-bg: var(--bb-accent-soft); }
.bb-fs-click { cursor: pointer; }
.bb-cell-strong { font-weight: 600; }
.bb-cell-strongest { font-weight: 700; }
.bb-cell-muted { color: var(--bb-text-muted); }
.bb-fs-ind { padding-inline-start: 18px; }
/* Aging buckets are DevExpress buttons; our span lays out the three lines, the tiles grid stretches each button. */
.bb-rcv-tile__in { display: grid; gap: 2px; justify-items: start; width: 100%; text-align: start; font-weight: 400; }
/* Birthday card designs are DevExpress buttons; our span stacks the art over the name, the auto-fill grid sizes each button. */
.bb-cd-pick__in { display: grid; gap: 4px; width: 100%; min-width: 0; overflow-wrap: break-word; white-space: normal; text-align: center; font-size: var(--bb-fs-caption); }
/* My account: the "extra locations" lever row is a DevExpress text button; our span spreads the label and the action like the link row beside it. */
.bb-ac-link__in { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; text-align: start; white-space: normal; }
.bb-ac-link__in .q { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); white-space: nowrap; }
/* Inventory grids: a low or out-of-stock row and a hidden item read through our row classes (set in CustomizeElement). */
.bb-inv__grid .is-low { --dxbl-grid-row-bg: var(--bb-warn-bg); }
/* ===== end lane DX1 ===== */

/* ---- Group text (3.0 Communications, approved mock-up 2026-10-30): who gets it and who will not and why, the message, when, recent sends, and the phone preview beside them. ---- */
.bb-ico-mobile-screen-button::before { -webkit-mask-image: url("icons/fa-duo-mobile-screen-button.svg"); mask-image: url("icons/fa-duo-mobile-screen-button.svg"); }
.bb-gt { display: grid; gap: 16px; padding: 16px 0 28px; }
.bb-gt > * { min-width: 0; }
.bb-gt-titlebar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.bb-gt-plan { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gt-plan b { color: var(--bb-text); font-variant-numeric: tabular-nums; }
.bb-gt-meter { width: 130px; height: 8px; border-radius: 999px; background: var(--bb-surface-sunken); border: 1px solid var(--bb-border); overflow: hidden; display: flex; }
.bb-gt-meter i { display: block; height: 100%; background: var(--bb-brand); }
.bb-gt-meter i.bb-gt-meter__add { background: var(--bb-accent); }
.bb-gt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bb-gt-main { display: grid; gap: 16px; min-width: 0; }
.bb-gt-side { position: sticky; top: var(--bb-page-sticky-top, 8px); display: grid; gap: 14px; }
.bb-gt-card { display: grid; gap: 12px; padding: 14px 16px; }
.bb-gt-h { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 var(--bb-fs-body) var(--bb-font-display); }
.bb-gt-step { width: 22px; height: 22px; border-radius: 50%; background: var(--bb-brand); color: var(--bb-text-onbrand); font-size: var(--bb-fs-caption); display: inline-grid; place-items: center; }
.bb-gt-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bb-gt-pillar { text-align: left; padding: 10px 12px; border: 1px solid var(--bb-border); border-radius: 10px; background: var(--bb-surface); color: var(--bb-text); font: inherit; cursor: pointer; min-width: 0; }
.bb-gt-pillar b { display: block; font: 700 20px/26px var(--bb-font-display); font-variant-numeric: tabular-nums; }
.bb-gt-pillar span { display: block; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-gt-pillar[aria-pressed="true"] { border-color: var(--bb-accent); box-shadow: inset 0 0 0 1px var(--bb-accent); background: var(--bb-accent-soft); }
.bb-gt-pillar:focus-visible, .bb-gt-chips button:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); }
.bb-gt-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.bb-gt-filters label { display: grid; gap: 4px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gt-tag { display: inline-block; font-size: var(--bb-fs-caption); padding: 0 6px; border-radius: 999px; border: 1px solid var(--bb-border-strong); color: var(--bb-text-muted); margin-left: 4px; }
.bb-gt-switches { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bb-gt-reach { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 12px 14px; border: 1px solid var(--bb-border); border-radius: 10px; background: var(--bb-surface-sunken); }
.bb-gt-big b { font: 700 20px/26px var(--bb-font-display); font-variant-numeric: tabular-nums; }
.bb-gt-big small { font-size: var(--bb-fs-body); color: var(--bb-text-muted); }
.bb-gt-big--2 b { font-size: var(--bb-fs-body); }
.bb-gt-why { border: 1px solid var(--bb-border); border-radius: 10px; overflow: hidden; }
.bb-gt-why summary { cursor: pointer; padding: 9px 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.bb-gt-why summary::-webkit-details-marker { display: none; }
.bb-gt-why summary:focus-visible { outline: 0; box-shadow: inset var(--bb-focus-ring); }
.bb-gt-reason { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 12px; margin: 0; border-top: 1px solid var(--bb-border); align-items: start; }
.bb-gt-reason > div > b, .bb-gt-reason > div > span { display: block; }
.bb-gt-reason__n { font-size: var(--bb-fs-body); text-align: right; font-variant-numeric: tabular-nums; }
.bb-gt-reason__who { grid-column: 2 / 4; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gt-link { color: var(--bb-link); text-decoration: none; font-size: var(--bb-fs-caption); }
.bb-gt-link:hover { text-decoration: underline; }
.bb-gt-link:focus-visible { outline: 0; box-shadow: var(--bb-focus-ring); border-radius: 2px; }
.bb-gt-locked { padding: 6px 10px; border: 1px dashed var(--bb-border-strong); border-radius: var(--bb-radius); font-size: var(--bb-fs-caption); color: var(--bb-text-muted); display: flex; gap: 8px; align-items: center; }
.bb-gt-locked b { color: var(--bb-text); }
.bb-gt-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bb-gt-chips button { min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--bb-border-strong); background: var(--bb-surface); color: var(--bb-text); font: inherit; font-size: var(--bb-fs-caption); cursor: pointer; }
.bb-gt-chips button:hover { background: var(--bb-accent-soft); }
.bb-gt-counter { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 4px 22px; justify-content: start; }
.bb-gt-counter b { display: block; font-size: var(--bb-fs-body); font-variant-numeric: tabular-nums; }
.bb-gt-counter span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); display: block; max-width: 170px; }
.bb-gt-counter .bb-gt-warn b { color: var(--bb-warn); }
.bb-gt-counter .bb-gt-bad b { color: var(--bb-text-danger); }
.bb-gt-when { display: grid; gap: 8px; }
.bb-gt-sched { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: 12px; }
.bb-gt-phonewrap { display: grid; justify-items: center; gap: 8px; }
.bb-gt-asof { display: grid; gap: 4px; width: 100%; max-width: 300px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gt-phone { width: 100%; max-width: 280px; border: 7px solid var(--bb-n-800); border-radius: 30px; background: var(--bb-surface); overflow: hidden; }
.bb-gt-phone__bar { text-align: center; padding: 8px 6px; border-bottom: 1px solid var(--bb-border); font-size: var(--bb-fs-caption); background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
.bb-gt-phone__bar b { display: block; font-size: var(--bb-fs-body); color: var(--bb-text); }
.bb-gt-phone__thread { padding: 14px 10px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; }
.bb-gt-phone__stamp { text-align: center; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gt-bubble { align-self: flex-start; max-width: 92%; padding: 8px 11px; border-radius: 16px 16px 16px 4px; background: var(--bb-surface-sunken); border: 1px solid var(--bb-border-subtle); color: var(--bb-text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--bb-fs-body); line-height: 19px; }
.bb-gt-sum { display: grid; gap: 10px; padding: 14px 16px; }
.bb-gt-sum dl, .bb-gt-confirm { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.bb-gt-sum dt, .bb-gt-confirm dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-gt-sum dd, .bb-gt-confirm dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bb-gt-confirm dt, .bb-gt-confirm dd { padding: 4px 0; border-bottom: 1px solid var(--bb-border-subtle); }
.bb-gt-over { color: var(--bb-text-danger); }
.bb-gt-cta { display: grid; gap: 8px; }
.bb-gt-quote { padding: 10px 12px; border-radius: var(--bb-radius); background: var(--bb-surface-sunken); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--bb-fs-body); margin-bottom: 10px; }
.bb-gt-result { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bb-gt-result div { border: 1px solid var(--bb-border); border-radius: 10px; padding: 10px 12px; }
.bb-gt-result b { display: block; font: 700 20px/26px var(--bb-font-display); font-variant-numeric: tabular-nums; }
.bb-gt-result span { font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-gt-where { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bb-gt-where p { margin: 4px 0; }
.bb-gt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-gt-danger { color: var(--bb-text-danger); }
@media (max-width: 1100px) {
    .bb-gt-cols { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
    .bb-gt-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-gt-result { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bb-gt-where { grid-template-columns: minmax(0, 1fr); }
    .bb-gt-counter { grid-template-columns: repeat(2, minmax(0, auto)); }
}

/* Corp merchant fees (sales page): the pitch line is the one loud thing; everything else stays at body size. */
.bb-mf-scope { margin: 0; }
.bb-mf-say-card { border-top: 2px solid var(--bb-accent); }
.bb-mf-say { margin: 8px 0 0; max-width: 64ch; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: 600; color: var(--bb-text); }
.bb-mf-row { margin-top: 16px; }
.bb-mf-gap { margin: 12px 0 0; }
.bb-mf-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bb-border); font-variant-numeric: tabular-nums; }
.bb-mf-save { color: var(--bb-text-success); }
.bb-mf-qa { display: grid; gap: 14px; margin: 0; }
.bb-mf-qa dt { font-weight: 600; }
.bb-mf-qa dd { margin: 2px 0 0; }
.bb-mf-list { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.2em; }
.bb-mf-subhead { margin-top: 18px; }

/* ---- Corp Leads (BBCRM.Corp Features/Leads): reads layer 2 only ------------------------------------------------ */
.bb-ld { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: clamp(16px, 2.2vw, 28px); color: var(--bb-text); }
.bb-ld-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bb-ld-title { margin: 0; font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: 650; color: var(--bb-text); }
.bb-ld-sub { color: var(--bb-text-muted); font-size: var(--bb-fs-body); }
.bb-ld-filters { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bb-ld-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bb-ld-kpi { background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); box-shadow: var(--bb-e1); padding: 12px 16px; }
.bb-ld-kpi__l { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-ld-kpi__v { font-family: var(--bb-font-display); font-size: var(--bb-fs-subtitle1); line-height: var(--bb-lh-subtitle1); font-weight: 700; }
.bb-ld-kpi__d { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); margin-top: 2px; }
.bb-ld-kpi__d a { color: var(--bb-link); }
.bb-ld-bad { color: var(--bb-danger); }
.bb-ld-warn { color: var(--bb-warn); font-weight: 600; }
.bb-ld-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bb-ld-card { background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); box-shadow: var(--bb-e1); min-width: 0; }
.bb-ld-card__h { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--bb-border); }
.bb-ld-card__t { font-weight: 600; }
.bb-ld-card__s { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-ld-push { margin-left: auto; }
.bb-ld-empty { margin: 0; padding: 14px 16px; color: var(--bb-text-muted); }
.bb-ld-timer { min-width: 62px; padding: 3px 9px; border-radius: var(--bb-radius); text-align: center; font-family: var(--bb-font-display); font-weight: 700; font-size: var(--bb-fs-body); background: var(--bb-warn-bg); color: var(--bb-warn); }
.bb-ld-timer--green { background: var(--bb-ok-bg); color: var(--bb-ok); }
.bb-ld-timer--red { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-ld-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bb-brand); color: var(--bb-text-onbrand); font-weight: 600; font-size: var(--bb-fs-caption); }
.bb-ld-av--lg { width: 44px; height: 44px; font-size: var(--bb-fs-subtitle2); }
.bb-ld-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bb-warn); display: inline-block; flex: none; }
.bb-ld-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: var(--bb-fs-caption); background: var(--bb-surface-sunken); color: var(--bb-text-muted); white-space: nowrap; }
.bb-ld-chip--ok { background: var(--bb-ok-bg); color: var(--bb-ok); }
.bb-ld-chip--warn { background: var(--bb-warn-bg); color: var(--bb-warn); }
.bb-ld-chip--info { background: var(--bb-info-bg); color: var(--bb-info); }
.bb-ld-chip--bad { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-ld-chip--gold { background: var(--bb-accent-soft); color: var(--bb-link); }
.bb-ld-link { color: var(--bb-link); font-weight: 600; text-decoration: none; }
.bb-ld-link:hover { text-decoration: underline; }
.bb-ld-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--bb-accent-soft); border-left: 3px solid var(--bb-accent-bright); border-radius: var(--bb-radius); }
.bb-ld-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); box-shadow: var(--bb-e1); }
.bb-ld-head__g { flex: 1; min-width: 220px; }
.bb-ld-head__f { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.bb-ld-fl { display: flex; flex-direction: column; gap: 3px; font-size: var(--bb-fs-caption); color: var(--bb-text-muted); }
.bb-ld-fl--inline { flex-direction: row; align-items: center; gap: 8px; }
.bb-ld-next { min-height: 32px; display: flex; align-items: center; color: var(--bb-text); font-size: var(--bb-fs-body); }
.bb-ld-comp { background: var(--bb-surface-raised); border: 1px solid var(--bb-accent); border-radius: var(--bb-radius-lg); box-shadow: var(--bb-e3); }
.bb-ld-comp__body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.bb-ld-comp__f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.bb-ld-compl { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; }
.bb-ld-compl > span:first-child { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-ld-grow { flex: 1; min-width: 160px; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); margin: 0; }
.bb-ld-sig { border-top: 1px solid var(--bb-border); padding-top: 10px; }
.bb-ld-sig__h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.bb-ld-sig__p { color: var(--bb-text-muted); font-size: var(--bb-fs-body); line-height: 1.5; }
.bb-ld-sig__p p { margin: 0; }
.bb-ld-ai { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-ld-warnbox { margin: 0; padding: 10px 12px; background: var(--bb-warn-bg); color: var(--bb-text); border-radius: var(--bb-radius); border-left: 3px solid var(--bb-warn); }
.bb-ld-tl { padding: 6px 16px 12px; }
.bb-ld-ev { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.bb-ld-ev__i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bb-info-bg); color: var(--bb-info); font-weight: 700; font-size: var(--bb-fs-caption); }
.bb-ld-ev__i--call { background: var(--bb-ok-bg); color: var(--bb-ok); }
.bb-ld-ev__i--status, .bb-ld-ev__i--system, .bb-ld-ev__i--task { background: var(--bb-surface-sunken); color: var(--bb-text-muted); }
.bb-ld-ev__i--note { background: var(--bb-accent-soft); color: var(--bb-link); }
.bb-ld-ev__h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bb-ld-ev__k { color: var(--bb-text-muted); }
.bb-ld-ev__w { margin-left: auto; color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-ld-ev__b { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bb-ld-open { display: inline-block; margin-top: 6px; color: var(--bb-link); font-weight: 600; }
.bb-ld-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 0; padding: 12px 16px; }
.bb-ld-facts dt { color: var(--bb-text-muted); }
.bb-ld-facts dd { margin: 0; overflow-wrap: anywhere; }
.bb-ld-frame { width: 100%; min-height: 560px; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); background: var(--bb-surface-raised); }
@media (max-width: 1280px) { .bb-ld-cols, .bb-ld-cols--record { grid-template-columns: minmax(0, 1fr) 320px; } }
.bb-ld-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }

/* our own layout around DX controls: a container sizes the control, the control fills it */
.bb-ld-w { width: 220px; flex: none; }
.bb-ld-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.bb-ld-colw { min-width: 0; }
.bb-ld-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bb-ld-cell__s { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); overflow-wrap: anywhere; }
/* corp: Home and Retention (approved mock-ups 2026-11-01). One row of equal headline tiles, then cards on a full-width grid with equal
   heights per row. The headline numbers settle in once on load (after Skiper UI skiper69 "number flow"); never with reduced motion. */
.bb-hl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 48px; }
.bb-hl-band { margin: 0; padding: 12px 16px; background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-left: 3px solid var(--bb-accent); border-radius: var(--bb-radius-lg); font-size: var(--bb-fs-body); text-wrap: pretty; }
.bb-hl-kpis { display: grid; grid-template-columns: repeat(var(--bb-hl-n, 5), minmax(0, 1fr)); gap: 12px; }
.bb-hl-kpi { display: flex; flex-direction: column; gap: 2px; background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); box-shadow: var(--bb-e1); padding: 12px 16px; min-width: 0; }
.bb-hl-kpi__l { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); }
.bb-hl-kpi__v { font-family: var(--bb-font-display); font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; animation: bb-hl-settle 420ms cubic-bezier(.2, .8, .2, 1) both; }
.bb-hl-kpi__d { color: var(--bb-text-muted); font-size: var(--bb-fs-caption); text-wrap: pretty; }
.bb-hl-kpi--red .bb-hl-kpi__v { color: var(--bb-danger); }
@keyframes bb-hl-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bb-hl-kpi__v { animation: none; } }
.bb-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: stretch; }
.bb-hl-grid > .bb-card { margin: 0; height: 100%; }
.bb-hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-hl-list li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--bb-border); padding-top: 8px; }
.bb-hl-list li:first-child { border-top: 0; padding-top: 0; }
.bb-hl-signs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; padding: 4px 8px; font-size: var(--bb-fs-caption); }
.bb-hl-signs dt { color: var(--bb-text-muted); font-weight: 400; }
.bb-hl-signs dd { margin: 0; }
@media (max-width: 1100px) { .bb-hl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .bb-hl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb-hl-grid { grid-template-columns: minmax(0, 1fr); } }
/* corp: the check before a staff email is sent (lead composer, campaigns) */
.bb-echk { display: grid; gap: 8px; padding: 12px 14px; background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-left: 3px solid var(--bb-warn); border-radius: var(--bb-radius); }
.bb-echk--clean { border-left-color: var(--bb-ok); }
.bb-echk__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.bb-echk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bb-echk__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 6px 0; border-top: 1px solid var(--bb-border); }
.bb-echk__excerpt { font-family: var(--bb-font-mono, ui-monospace, monospace); font-size: var(--bb-fs-caption); background: var(--bb-surface-sunken); padding: 0 4px; border-radius: 3px; overflow-wrap: anywhere; }
.bb-echk__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }