/* BIZAPI.Ui — bizjaya.io's look on Radzen's free Standard and Standard Dark themes (TP482 Q738: "the free Standard +
   Standard Dark for starters … we have to style our own").

   Radzen computes each colour's lighter and darker shades when it builds a theme, so overriding --rz-primary alone
   would leave the shades on Radzen's blue. Every shade is set here, with the same mix ratios Radzen uses
   (standard-base.scss: light = 16% white, dark = 16% black, darker = 24% black; standard-dark-base.scss: light = 40%
   white). The theme in use is on <html data-biz-theme="…"> (BizThemeHead keeps it in step when it switches).

   Primary: emerald-600, a step darker than BizDocs' accent (#10b981) so white text on it stays readable. */

:root,
:root[data-biz-theme="standard"] {
    --rz-primary: #059669;
    --rz-primary-light: #2da781;
    --rz-primary-lighter: rgba(5, 150, 105, 0.16);
    --rz-primary-dark: #047e58;
    --rz-primary-darker: #047250;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #047857;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    /* Radzen draws links in the theme's secondary blue; bizjaya.io's links are its own green. */
    --rz-link-color: var(--rz-primary-dark);
    --rz-link-hover-color: var(--rz-primary-darker);

    --biz-sidebar-width: 260px;
    --biz-header-height: 56px;
    /* The phone's bottom bar (BizShell, TP482 Q793-A) and the veil behind the side menu or search lying over a page. */
    --biz-tabbar-height: 56px;
    --biz-scrim: color-mix(in srgb, var(--rz-base-900) 45%, transparent);
    --biz-chip-text: #ffffff;
    --biz-surface: var(--rz-base-background-color);
    --biz-muted: var(--rz-text-secondary-color);
    --biz-line: var(--rz-base-300);
    --biz-lane-bg: var(--rz-base-100);
    --biz-pill-bg: var(--rz-base-900);
    --biz-pill-ink: var(--rz-base-50);
    /* A plain chip (a task's type): Radzen's base scale runs light to dark in both themes, so each theme picks its own. */
    --biz-chip-bg: var(--rz-base-200);
    --biz-chip-ink: var(--rz-base-900);
    /* The clipboard's purple and the contents' blue, the old site's (TP482 S3); a soft shadow for things that float. */
    --biz-pin: #6b21a8;
    --biz-pin-hover: #581c87;
    --biz-pin-on: #ffffff;
    --biz-pin-count: #fef3c7;
    --biz-pin-tint: #faf5ff;
    --biz-pin-ink: #6b21a8;
    --biz-pin-chip: #e9d5ff;
    --biz-toc-ink: var(--rz-info-darker);
    --biz-float-shadow: color-mix(in srgb, var(--rz-base-900) 14%, transparent);
}

/* The fleet's rule for a segmented choice: the selected option is FILLED with the primary colour (Radzen only tints it,
   which reads as unselected). Both themes. */
:root {
    --rz-selectbar-selected-background-color: var(--rz-primary);
    --rz-selectbar-selected-color: var(--rz-on-primary);
    --rz-selectbar-selected-border: 1px solid var(--rz-primary);
}

/* The light theme's sidebar is light (TP482 Q766-A): Radzen's Standard theme draws it near-black with fixed greys
   (#262526 …), so every menu colour is set here. The current item is tinted with the primary colour. */
:root:not([data-biz-theme="standard-dark"]) {
    --rz-sidebar-background-color: var(--rz-base-50);
    --rz-sidebar-color: var(--rz-text-color);
    --rz-sidebar-border-inline-end: var(--rz-border-base-200);
    --rz-panel-menu-item-border: var(--rz-border-base-100);
    --rz-panel-menu-item-background-color: var(--rz-base-50);
    --rz-panel-menu-item-color: var(--rz-text-color);
    --rz-panel-menu-icon-color: var(--rz-text-secondary-color);
    --rz-panel-menu-item-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-hover-background-color: var(--rz-base-100);
    --rz-panel-menu-item-active-color: var(--rz-primary-darker);
    --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-active-indicator: var(--rz-primary);
    --rz-panel-menu-item-2nd-level-color: var(--rz-text-color);
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-100);
    --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-200);
    --rz-panel-menu-item-2nd-level-active-color: var(--rz-primary-darker);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-2nd-level-active-font-weight: 600;
    --rz-panel-menu-item-3rd-level-color: var(--rz-text-color);
    --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-100);
    --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-200);
    --rz-panel-menu-item-3rd-level-active-color: var(--rz-primary-darker);
    --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter);
}

/* The dark theme is deep indigo, not grey (TP482 Q766-A). Radzen's Standard Dark draws almost every surface, border and
   text from its base scale (body = 900, cards and inputs = 800, hover = 700, borders = 600, text = 50–400), so the scale
   is redrawn in indigo here; the sidebar and header sit a step deeper than the page, cards a step lighter. The few
   colours Radzen fixes outside the scale (the Base button, the menu's marker) are set too. */
:root[data-biz-theme="standard-dark"] {
    --rz-base: #3c4483;
    --rz-base-50: #f4f5fd;
    --rz-base-100: #e3e6f7;
    --rz-base-200: #cdd2ef;
    --rz-base-300: #aab1dd;
    --rz-base-400: #8c94c9;
    --rz-base-500: #5f679e;
    --rz-base-600: #3c4483;
    --rz-base-700: #2a3170;
    --rz-base-800: #1c2257;
    --rz-base-900: #121740;
    --rz-base-light: #cdd2ef;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #2a3170;
    --rz-base-darker: #0b0f2c;
    --rz-on-base-light: #121740;
    --rz-on-base-lighter: #121740;
    /* The deepest indigo: the sidebar and the header frame the page. */
    --biz-indigo-deep: #0d1236;

    --rz-primary: #059669;
    --rz-primary-light: #69c0a5;
    --rz-primary-lighter: rgba(5, 150, 105, 0.2);
    --rz-primary-dark: #047e58;
    --rz-primary-darker: #047250;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #000000;
    --rz-on-primary-lighter: #6ee7b7;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-link-color: var(--rz-primary-light);
    --rz-link-hover-color: #a7f3d0;

    --rz-button-base-background-color: var(--rz-base-700);
    --rz-button-base-color: var(--rz-base-50);
    --rz-tooltip-background-color: var(--rz-base-darker);

    --rz-header-background-color: var(--biz-indigo-deep);
    --rz-header-color: var(--rz-text-color);
    --rz-header-border: var(--rz-border-base-800);
    --rz-sidebar-background-color: var(--biz-indigo-deep);
    --rz-sidebar-color: var(--rz-text-color);
    --rz-sidebar-border-inline-end: var(--rz-border-base-800);
    --rz-panel-menu-item-border: var(--rz-border-base-900);
    --rz-panel-menu-item-background-color: var(--biz-indigo-deep);
    --rz-panel-menu-item-color: var(--rz-text-color);
    --rz-panel-menu-icon-color: var(--rz-text-secondary-color);
    --rz-panel-menu-item-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-hover-background-color: var(--rz-base-800);
    --rz-panel-menu-item-active-color: var(--rz-on-primary-lighter);
    --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-active-indicator: var(--rz-primary);
    --rz-panel-menu-item-2nd-level-color: var(--rz-text-color);
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900);
    --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-800);
    --rz-panel-menu-item-2nd-level-active-color: var(--rz-on-primary-lighter);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-2nd-level-active-font-weight: 600;
    --rz-panel-menu-item-3rd-level-color: var(--rz-text-color);
    --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-900);
    --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-800);
    --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter);
    --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter);

    --biz-line: var(--rz-base-700);
    --biz-lane-bg: var(--rz-base-900);
    --biz-pill-bg: var(--rz-base-100);
    --biz-pill-ink: var(--rz-base-900);
    --biz-chip-bg: var(--rz-base-700);
    --biz-chip-ink: var(--rz-base-50);
    --biz-pin-tint: #2a1f3d;
    --biz-pin-ink: #d8b4fe;
    --biz-pin-chip: #4c1d95;
    --biz-toc-ink: var(--rz-info-light);
    --biz-float-shadow: color-mix(in srgb, #000000 45%, transparent);
}

/* A card stands off the page in both themes (operator, 2026-11-04: "cards that have same outline and color as the bg"):
   Radzen's outlined cards are see-through, so they take the card colour (a step lighter than the page in the dark theme,
   Q766-A) and a soft shadow. A card in a grid of cards, one that opens something (biz-card-click) and one inside a
   link (biz-card-link) lift a little under the pointer and are pressed by a click. */
.rz-card.rz-variant-outlined { background-color: var(--rz-card-background-color); box-shadow: 0 1px 3px var(--biz-float-shadow); }
.biz-grid-cards > .rz-card, .biz-card-click, .biz-card-link > .rz-card { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.biz-grid-cards > .rz-card:hover, .biz-card-click:hover, .biz-card-link:hover > .rz-card {
    border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--biz-line));
    box-shadow: 0 6px 18px var(--biz-float-shadow), 0 0 0 3px color-mix(in srgb, var(--rz-primary) 10%, transparent);
}
.biz-card-click:active, .biz-card-link:active > .rz-card { transform: translateY(1px); box-shadow: 0 2px 6px var(--biz-float-shadow); }
/* A whole card opens what its title link opens (the title stays a real link: new tab, middle click); its other links
   and buttons keep their own place above it. */
.biz-card-click { position: relative; cursor: pointer; }
.biz-card-click .biz-card-target::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.biz-card-click .biz-card-target:focus-visible { outline: none; }
.biz-card-click:has(.biz-card-target:focus-visible) { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
.biz-card-click a:not(.biz-card-target), .biz-card-click button { position: relative; z-index: 1; }

/* Radzen's dark theme makes a Base badge at the Lighter shade pure white: a light island. It takes the plain chip's
   colours instead. */
:root[data-biz-theme="standard-dark"] .rz-badge-base.rz-shade-lighter { background-color: var(--biz-chip-bg); color: var(--biz-chip-ink); }

/* A tinted alert's words in the theme's text colours, the icon in its status colour: a status colour on its own tint
   reads too faintly (the fleet's UI rule: on a tint, the ink is the text colour). */
.rz-alert.rz-variant-flat.rz-shade-lighter { --rz-alert-color: var(--rz-text-color); --rz-alert-title-color: var(--rz-text-title-color); }

/* ── the shell ─────────────────────────────────────────────────────────────────────────────────── */

/* Radzen sets its font inside its own layout only; pages outside it (sign-in) need it too. */
body { background: var(--rz-body-background-color); color: var(--rz-text-color); font-family: var(--rz-text-font-family); }

/* The first paint (biz-boot.js): until the icon font is in and the app has drawn its shell or sign-in page, the page
   stays hidden and a spinner shows (only after a quarter second, so a quick load shows nothing at all). The page keeps
   its layout while hidden, so whatever measures itself measures right. After 8 seconds it shows regardless. */
/* The body is there from the first byte, so its 8 s run from the page's start, whatever the app adds to it later. */
html:not(.biz-ready) body { visibility: hidden; animation: biz-boot-show 0s 8s forwards; }
.biz-boot { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: var(--rz-body-background-color);
    pointer-events: none; visibility: visible; }
html:not(.biz-ready) .biz-boot { animation: biz-boot-hide 0s 8s forwards; }
html.biz-ready .biz-boot { display: none; }
.biz-boot-spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--rz-base-300); border-top-color: var(--rz-primary);
    opacity: 0; animation: biz-boot-in .2s .25s forwards, biz-boot-turn .8s linear infinite; }
@keyframes biz-boot-show { to { visibility: visible; } }
@keyframes biz-boot-hide { to { visibility: hidden; } }
@keyframes biz-boot-in { to { opacity: 1; } }
@keyframes biz-boot-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .biz-boot-spin { animation: biz-boot-in .2s .25s forwards; } }
/* Radzen's "-base" theme files carry no plain heading rules, so headings take the theme's title colour here. */
h1, h2, h3, h4, h5, h6 { color: var(--rz-text-title-color); }
/* Blazor moves focus to the page's <h1> after each navigation (for screen readers); it needs no visible ring. */
h1:focus, h1:focus-visible { outline: none; }
a { color: var(--rz-link-color); }
a:hover { color: var(--rz-link-hover-color); }
/* A rule line in the theme's line colour (the browser's own is near-white, a bright stripe in the dark theme). */
hr { border: 0; border-top: 1px solid var(--biz-line); }

.biz-shell .rz-header { height: var(--biz-header-height); display: flex; align-items: center; }
.biz-header-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: 0 1rem 0 .25rem; }
.biz-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; color: var(--rz-text-title-color); text-decoration: none; white-space: nowrap; }
.biz-brand:hover { color: var(--rz-primary); }
.biz-brand-mark { width: 26px; height: 26px; object-fit: contain; flex: none; }

/* BizJaya's marks (BIZAPI.Ui/wwwroot/img). The wordmark's light-ground copy shows in the light theme, its dark-ground
   copy in the dark theme (BizWordmark.razor). */
.biz-wordmark { display: block; }
.biz-wordmark img { display: block; width: 100%; height: auto; }
.biz-wordmark .biz-wordmark-dark { display: none; }
:root[data-biz-theme="standard-dark"] .biz-wordmark .biz-wordmark-light { display: none; }
:root[data-biz-theme="standard-dark"] .biz-wordmark .biz-wordmark-dark { display: block; }

/* The sign-in pages (docs and admin): the wordmark above the card, and one button per provider with its own mark. */
.biz-signin { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.biz-signin > .biz-wordmark { width: min(300px, 80%); }
.biz-signin > .rz-card { width: 100%; }
.biz-provider-buttons { display: grid; gap: .6rem; margin-top: 1.25rem; }
.biz-provider-btn { width: 100%; justify-content: center; }
.biz-provider-btn .rz-button-box { gap: .6rem; }
.biz-provider-mark { width: 18px; height: 18px; flex: none; }
:root[data-biz-theme="standard-dark"] .biz-provider-mark-github { filter: invert(1); }
.biz-header-fill { flex: 1 1 auto; min-width: 0; }
.biz-header-end { display: flex; align-items: center; gap: .5rem; }

.biz-shell .rz-sidebar { width: var(--biz-sidebar-width); }
.biz-menu-search { padding: .75rem .75rem .5rem; }
.biz-menu-search .rz-textbox { width: 100%; }
.biz-menu-empty { padding: .5rem 1rem; color: var(--rz-panel-menu-item-color, var(--rz-base-400)); font-size: .85rem; }
/* An item's dot in its own colour (a BizDocs project, as its badge shows it elsewhere): its own icon only, filled. */
.biz-menu-dot > .rz-navigation-item-wrapper .rz-navigation-item-icon { font-variation-settings: 'FILL' 1; font-size: 1rem; }
/* A count at the end of a menu line (BizDocs' open tasks per project and page, TP482 S10). */
.biz-menu-text { flex: 1 1 auto; min-width: 0; }
/* Arranging the menu (TP482 S12): the Arrange button beside the search, the help and limits under it, a handle on each
   entry that moves, a line where a dragged entry will go, and faded projects the menu does not list. */
.biz-menu-search { display: flex; align-items: center; gap: .35rem; }
.biz-menu-search .rz-textbox { flex: 1 1 auto; min-width: 0; }
.biz-menu-arrange-toggle { flex: none; }
.biz-menu-arrange-bar { margin: 0 .75rem .5rem; padding: .5rem .6rem; font-size: .8rem; border: 1px dashed var(--rz-primary);
    border-radius: var(--rz-border-radius); background: color-mix(in srgb, var(--rz-primary) 6%, transparent); }
.biz-menu-arrange-bar p { margin: 0 0 .4rem; }
.biz-menu-arrange-bar .rzi { font-size: 1rem; vertical-align: -.2em; }
.biz-menu-handle { flex: none; margin-inline-end: .25rem; color: var(--biz-muted); font-size: 1.1rem; cursor: grab; touch-action: none;
    border-radius: 4px; }
.biz-menu-handle:hover, .biz-menu-handle:focus-visible { color: var(--rz-primary); background: var(--rz-primary-lighter); outline: none; }
.biz-arr-dragging { opacity: .55; }
.biz-arr-dragging .biz-menu-handle { cursor: grabbing; }
.biz-arr-before { box-shadow: inset 0 2px 0 var(--rz-primary); }
.biz-arr-after { box-shadow: inset 0 -2px 0 var(--rz-primary); }
.biz-menu-muted > .rz-navigation-item-wrapper { opacity: .5; }
.biz-menu-box.is-arranging .rz-navigation-item-wrapper { user-select: none; }
.biz-menu-badge {
    flex: none; margin-inline-start: .5rem; min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--rz-primary); color: var(--rz-on-primary); font-size: .7rem; font-weight: 600; line-height: 1.25rem; text-align: center;
}

.biz-body { padding: 1.25rem 1.5rem 2rem; }

/* ── the search panel (BizSearch, TP482 Q790-A, Q791-A) ───────────────────────────────────────────────────────── */
.biz-search { position: relative; max-width: 560px; }
.biz-search.is-narrow { position: static; max-width: none; }
.biz-search-box { position: relative; z-index: 5; display: flex; align-items: center; gap: .4rem; padding: 0 .6rem; height: 2.25rem;
    border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); background: var(--rz-input-background-color);
    color: var(--rz-input-value-color); cursor: text; }
.biz-search-box:focus-within { border-color: var(--rz-primary); box-shadow: var(--rz-input-focus-shadow); }
.biz-search-box .rzi { color: var(--rz-text-secondary-color); font-size: 1.15rem; }
.biz-search-box input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
/* Above the header's other controls (Radzen's profile menu sits at 3, its popups at 4). */
.biz-search-scrim { position: fixed; inset: 0; z-index: 4; }
.biz-search-panel { position: absolute; z-index: 5; top: calc(100% + .4rem); left: 0; width: max(100%, min(640px, 92vw));
    max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--rz-base-background-color); color: var(--rz-text-color); border: 1px solid var(--biz-line);
    border-radius: var(--rz-border-radius); box-shadow: var(--rz-shadow-6); }
.biz-search-panel-top { display: flex; align-items: center; gap: .25rem; padding: .5rem .5rem 0; }
.biz-search-panel-top .biz-search-box { flex: 1 1 auto; }
.biz-search-types { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem .6rem .5rem; border-bottom: 1px solid var(--biz-line); }
.biz-search-type { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; font: inherit; font-size: .8rem;
    border: 1px solid var(--biz-line); border-radius: 999px; background: transparent; color: var(--rz-text-color); cursor: pointer; }
.biz-search-type .rzi { font-size: 1rem; }
.biz-search-type:hover { border-color: var(--rz-primary); }
.biz-search-type.is-on { background: var(--rz-primary); border-color: var(--rz-primary); color: var(--rz-on-primary); }
.biz-search-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .25rem 0; }
.biz-search-group { padding: .55rem .9rem .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--rz-text-secondary-color); }
.biz-search-hit { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem .9rem; color: var(--rz-text-color); text-decoration: none; }
.biz-search-hit:hover, .biz-search-hit.is-active { background: var(--rz-primary-lighter); color: var(--rz-text-color); }
.biz-search-hit-icon { margin-top: .1rem; font-size: 1.15rem; color: var(--rz-text-secondary-color); }
.biz-search-hit-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.biz-search-hit-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-search-hit-key { margin-right: .4rem; font-size: .75rem; color: var(--rz-text-secondary-color); }
.biz-search-hit-sub { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .8rem; color: var(--rz-text-secondary-color); }
.biz-search-hit-subtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-search-note { padding: .75rem .9rem; font-size: .85rem; color: var(--rz-text-secondary-color); }
.biz-search-every { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .9rem;
    border-top: 1px solid var(--biz-line); font-size: .85rem; text-decoration: none; }
.biz-search-every kbd { padding: .05rem .35rem; font: inherit; font-size: .7rem; color: var(--rz-text-secondary-color);
    border: 1px solid var(--biz-line); border-radius: 4px; }

/* ── the settings menu (BizSettingsMenu) ──────────────────────────────────────────────────────────────────────── */
.biz-settings .rz-navigation-menu { min-width: 15rem; }
.biz-settings-who { display: flex; flex-direction: column; padding: .6rem 1rem .5rem; line-height: 1.3; border-bottom: 1px solid var(--biz-line); }
.biz-settings-who span { font-size: .8rem; color: var(--rz-text-secondary-color); overflow-wrap: anywhere; }
.biz-settings-label { padding: .5rem 1rem .15rem; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--rz-text-secondary-color); border-top: 1px solid var(--biz-line); }
.biz-settings-on .rz-navigation-item-icon { color: var(--rz-primary); }

/* My settings (both apps, TP482 Q792-A). */
.biz-prefs { display: grid; gap: 1rem; max-width: 760px; }
.biz-prefs-card { padding: 1rem 1.25rem; }
.biz-prefs-card h2 { margin: 0 0 .75rem; font-size: 1rem; }
.biz-prefs-card p { margin: .75rem 0 0; }
.biz-prefs-you { display: flex; align-items: center; gap: .9rem; }
.biz-prefs-you .rz-gravatar { width: 48px; height: 48px; flex: none; }
.biz-prefs-projects { display: grid; gap: .35rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.biz-prefs-projects li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.biz-prefs-projects a { text-decoration: none; min-width: 0; }
.biz-prefs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .35rem 0; }

/* ── the phone width (BizShell, TP482 round 7; Radzen folds its sidebar at the same 768px) ──────────────────────── */
.biz-menu-brand { display: none; }
.biz-tabbar, .biz-leaf { display: none; }

@media (max-width: 768px) {
    /* The logo and name live in the side menu, above its search box. */
    .biz-shell .rz-header .biz-brand { display: none; }
    .biz-menu-brand { display: inline-flex; padding: .9rem 1rem .25rem; }

    /* The page scrolls in the body, under a header and a bottom bar that step aside (biz-ui.js shellBars). */
    .biz-shell.rz-layout { display: block; }
    .biz-shell > .rz-header { position: fixed; top: 0; left: 0; right: 0; width: auto; z-index: 20; transition: transform .2s ease; }
    .biz-shell > .rz-header.is-away { transform: translateY(-100%); }
    .biz-shell > .rz-body { width: 100vw; height: 100dvh; overflow: auto; }
    .biz-shell .biz-body { padding: calc(var(--biz-header-height) + 1rem) 1rem calc(var(--biz-tabbar-height) + 1.25rem); }

    /* The side menu lies over the page, with a veil that closes it. */
    .biz-shell > .rz-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; }
    .biz-shell > .rz-sidebar.rz-sidebar-expanded { box-shadow: var(--rz-shadow-6); }
    .biz-menu-scrim { position: fixed; inset: 0; z-index: 25; background: var(--biz-scrim); }

    /* The quick links (Q793-A). */
    .biz-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; height: var(--biz-tabbar-height);
        padding-bottom: env(safe-area-inset-bottom); background: var(--rz-header-background-color);
        border-top: 1px solid var(--biz-line); transition: transform .2s ease; }
    .biz-tabbar.is-away { transform: translateY(100%); }
    .biz-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-width: 0;
        padding: 0; font: inherit; font-size: .7rem; color: var(--rz-text-secondary-color); text-decoration: none;
        background: transparent; border: 0; cursor: pointer; }
    .biz-tab .rzi { font-size: 1.35rem; }
    .biz-tab:hover, .biz-tab.is-on { color: var(--rz-primary); }

    /* While a bar is away, its leaf: tap it or pull it to bring the bar back. */
    .biz-leaf { position: fixed; left: 50%; z-index: 21; width: 3rem; height: 1.25rem; margin-left: -1.5rem; padding: 0;
        align-items: center; justify-content: center; color: var(--rz-text-secondary-color);
        background: var(--rz-header-background-color); border: 1px solid var(--biz-line); cursor: pointer; touch-action: none; }
    .biz-leaf svg { width: 1rem; height: 1rem; }
    .biz-leaf--top { top: 0; border-top: 0; border-radius: 0 0 .75rem .75rem; }
    .biz-leaf--bottom { bottom: 0; border-bottom: 0; border-radius: .75rem .75rem 0 0; }
    .biz-leaf.is-on { display: inline-flex; }

    /* The search: the whole width, over the header. */
    .biz-search-panel { position: fixed; top: 0; left: 0; right: 0; width: auto; max-height: 100dvh; border-width: 0 0 1px;
        border-radius: 0 0 var(--rz-border-radius) var(--rz-border-radius); }
    .biz-search-scrim { background: var(--biz-scrim); }
    /* While searching, the header (and its panel) sits above the bottom bar and the side menu's veil. */
    .biz-shell:has(.biz-search.is-open) > .rz-header { z-index: 26; }
}

@media (prefers-reduced-motion: reduce) {
    .biz-shell > .rz-header, .biz-tabbar { transition: none; }
}

/* ── page header ───────────────────────────────────────────────────────────────────────────────── */

.biz-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1rem; }
.biz-page-head h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.biz-page-sub { color: var(--biz-muted); margin: .25rem 0 0; }
.biz-page-head .biz-page-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.biz-crumbs { font-size: .85rem; color: var(--biz-muted); margin-bottom: .25rem; }
.biz-crumbs a { color: inherit; text-decoration: none; }
.biz-crumbs a:hover { color: var(--rz-primary); text-decoration: underline; }

/* ── small pieces ──────────────────────────────────────────────────────────────────────────────── */

.biz-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem;
            font-weight: 600; line-height: 1.5; background: var(--biz-chip-bg); color: var(--biz-chip-ink); white-space: nowrap; }
.biz-chip-solid { color: var(--biz-chip-text); }
.biz-muted { color: var(--biz-muted); }
.biz-card-link { text-decoration: none; color: inherit; display: block; }
.biz-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.biz-stat { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.biz-stat-label { color: var(--biz-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

/* ── the reconnect indicator: a small pill, never a full-screen modal (TP482 settled list) ─────── */

#components-reconnect-modal.biz-reconnect {
    position: fixed; inset: auto 1rem 1rem auto; margin: 0; padding: .45rem .8rem; border: 0; border-radius: 999px;
    background: var(--biz-pill-bg); color: var(--biz-pill-ink); font-size: .85rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    z-index: 2000; display: none; align-items: center; gap: .5rem;
}
#components-reconnect-modal.biz-reconnect[open] { display: flex; }
#components-reconnect-modal.biz-reconnect::backdrop { display: none; }
.biz-reconnect p { margin: 0; display: none; }
.biz-reconnect button { display: none; border: 0; border-radius: 999px; padding: .15rem .6rem; cursor: pointer;
                        background: var(--rz-primary); color: var(--rz-on-primary); font: inherit; }
.biz-reconnect-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rz-warning); animation: biz-pulse 1s infinite alternate; }
@keyframes biz-pulse { from { opacity: .35; } to { opacity: 1; } }
.components-reconnect-show .biz-first,
.components-reconnect-retrying .biz-retrying { display: block; }
.components-reconnect-failed .biz-failed,
.components-reconnect-failed .biz-reload,
.components-reconnect-rejected .biz-failed,
.components-reconnect-paused .biz-paused,
.components-reconnect-paused .biz-resume,
.components-reconnect-resume-failed .biz-failed,
.components-reconnect-resume-failed .biz-reload { display: block; }
.components-reconnect-failed .biz-reconnect-dot,
.components-reconnect-resume-failed .biz-reconnect-dot { background: var(--rz-danger); animation: none; }

/* ── a project's badge: its colour dot and its name (ProjectTag; the old BizDocs' 9px rounded square) ─────── */

.biz-project-tag { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; white-space: nowrap; }
.biz-project-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--biz-project, var(--rz-primary)); }
.biz-project-every { font-size: 1rem; color: var(--biz-muted); }
.biz-project-name { overflow: hidden; text-overflow: ellipsis; }

/* ── the clipboard (TP482 S3, shared by BizDocs and ADM): the old site's tagged clipboard ───────────────────────── */
/* Above Radzen's dialogs (1000/1001): a pin goes into a task being written. Drawn in BizShell's floating slot, outside
   the page's scrolling body, so the tab stays where it was put. Sizes in px, as the old clipboard's. */

.biz-pin-leaf { position: fixed; top: 28vh; right: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
    width: 28px; padding: 14px 4px; color: var(--biz-pin-on); background: var(--biz-pin); border: 0; border-radius: 6px 0 0 6px;
    box-shadow: -3px 4px 14px var(--biz-float-shadow); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    line-height: 1; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
    cursor: grab; touch-action: none; user-select: none; }
.biz-pin-leaf:hover { background: var(--biz-pin-hover); }
.biz-pin-leaf:active { cursor: grabbing; }
.biz-pin-leaf:focus-visible { outline: 2px solid var(--biz-pin-count); outline-offset: -4px; }
.biz-pin-leaf.is-on { display: none; }
.biz-pin-leaf-count { color: var(--biz-pin-count); letter-spacing: 0; }
.biz-shell.biz-menu-over .biz-pin-leaf { display: none; }
/* A page's own panel (its contents, the tray's) is open on the right edge: the PINS tab steps aside for it. */
.biz-shell:has(.biz-toc-panel, .biz-page-tray-panel) .biz-pin-leaf { display: none; }

/* Click-away closes the clipboard; the page stays in view behind it, as on the old site. */
.biz-pin-scrim { position: fixed; inset: 0; z-index: 1101; background: transparent; }
.biz-pin-panel { position: fixed; top: calc(var(--biz-header-height) + 8px); right: 0; bottom: 16px; z-index: 1102; display: flex;
    flex-direction: column; width: 360px; max-width: 90vw; color: var(--rz-text-color); background: var(--rz-base-background-color);
    border: 1px solid var(--biz-line); border-right: 0; border-radius: 6px 0 0 6px; box-shadow: -6px 0 22px var(--biz-float-shadow);
    font-size: 12px; overflow: hidden; }
.biz-pin-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--biz-pin-tint); border-bottom: 1px solid var(--biz-line); }
.biz-pin-head h3 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--biz-pin-ink); font-size: 12px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; }
.biz-pin-head-count { padding: 0 6px; color: var(--biz-pin-ink); background: var(--biz-pin-chip); border-radius: 8px; font-size: 10.5px; letter-spacing: 0; }
.biz-pin-mini { box-sizing: border-box; height: 24px; padding: 0 8px; color: var(--rz-text-color); background: var(--rz-base-background-color);
    border: 1px solid var(--biz-line); border-radius: 4px; font: inherit; font-size: 10.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.biz-pin-mini:hover { color: var(--rz-danger); border-color: var(--rz-danger); }
.biz-pin-mini.is-new { flex: none; height: 26px; }
.biz-pin-mini.is-new:hover, .biz-pin-mini.is-new.is-on { color: var(--biz-pin-ink); border-color: var(--biz-pin); }
.biz-pin-mini:disabled { opacity: .55; cursor: not-allowed; }
.biz-pin-close { flex: none; width: 24px; height: 24px; padding: 0; color: var(--biz-muted); background: transparent; border: 0; border-radius: 12px;
    font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.biz-pin-close:hover { color: var(--rz-text-color); background: var(--biz-chip-bg); }
.biz-pin-close.is-small { width: 18px; height: 18px; font-size: 14px; }
.biz-pin-confirm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px;
    background: color-mix(in srgb, var(--rz-danger) 10%, var(--rz-base-background-color)); border-bottom: 1px solid var(--biz-line); }
.biz-pin-confirm-bar span { flex: 1 1 100%; }
.biz-pin-tools { display: flex; gap: 6px; padding: 8px 12px 0; }
.biz-pin-input { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-width: 0; height: 26px; padding: 0 8px; color: var(--rz-text-color);
    background: var(--rz-base-background-color); border: 1px solid var(--biz-line); border-radius: 4px; font: inherit; font-size: 12px; }
.biz-pin-input:focus, .biz-pin-editor:focus { outline: 2px solid var(--rz-primary-lighter); border-color: var(--rz-primary); }
.biz-pin-compose { display: flex; flex-direction: column; gap: 6px; margin: 8px 12px 0; padding: 8px; background: var(--biz-lane-bg);
    border: 1px solid var(--biz-line); border-radius: 6px; }
.biz-pin-compose-names { display: flex; gap: 6px; }
.biz-pin-compose-names .biz-pin-input:first-child { flex: 3 1 0; }
.biz-pin-compose-names .biz-pin-input:last-child { flex: 2 1 0; }
.biz-pin-editor { min-height: 4.5rem; max-height: 10rem; overflow: auto; padding: 6px 8px; color: var(--rz-text-color); background: var(--rz-base-background-color);
    border: 1px solid var(--biz-line); border-radius: 4px; font-size: 12px; line-height: 1.45; }
.biz-pin-editor:empty::before { content: attr(data-placeholder); color: var(--biz-muted); pointer-events: none; }
.biz-pin-status { display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; padding: 3px 4px 3px 8px; overflow-wrap: anywhere;
    background: color-mix(in srgb, var(--rz-success) 12%, var(--rz-base-background-color)); border-left: 3px solid var(--rz-success); border-radius: 0 4px 4px 0; }
.biz-pin-status span { flex: 1; }
.biz-pin-status.is-problem { background: color-mix(in srgb, var(--rz-danger) 12%, var(--rz-base-background-color)); border-left-color: var(--rz-danger); }
.biz-pin-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.biz-pin-empty { padding: 24px 8px; color: var(--biz-muted); font-size: 12px; font-style: italic; text-align: center; }
.biz-pin-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.biz-pin-row { background: var(--rz-base-background-color); border: 1px solid var(--biz-line); border-left: 4px solid var(--pin-hue); border-radius: 6px; }
.biz-pin-row.is-editing { border-color: var(--rz-primary); border-left-color: var(--pin-hue); }
.biz-pin-row1 { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; color: inherit; text-align: left; background: transparent;
    border: 0; border-radius: 0 5px 5px 0; font: inherit; cursor: pointer; }
.biz-pin-row1:hover { background: color-mix(in srgb, var(--pin-hue) 9%, transparent); }
.biz-pin-chev { flex: none; width: 10px; color: var(--biz-muted); font-size: 10px; transition: transform .15s ease; }
.biz-pin-row.is-open .biz-pin-chev { transform: rotate(90deg); }
.biz-pin-label { flex: 1 1 auto; min-width: 0; overflow: hidden; color: color-mix(in srgb, var(--pin-hue) 42%, var(--rz-text-color));
    font-family: 'SF Mono', Consolas, ui-monospace, monospace; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.biz-pin-meta { flex: none; color: var(--biz-muted); font-family: 'SF Mono', Consolas, ui-monospace, monospace; font-size: 10px; white-space: nowrap; }
.biz-pin-detail { padding: 0 8px 8px 24px; }
.biz-pin-detail .biz-pin-empty { padding: 4px 0; text-align: left; }
.biz-pin-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.biz-pin-tag { padding: 0 6px; color: var(--biz-chip-ink); background: var(--biz-chip-bg); border-radius: 8px; font-size: 10px; font-weight: 600; line-height: 1.6; }
.biz-pin-source { display: block; margin: 0 0 4px; color: var(--rz-link-color); font-family: 'SF Mono', Consolas, ui-monospace, monospace; font-size: 10px;
    text-decoration: none; overflow-wrap: anywhere; }
.biz-pin-source:hover { text-decoration: underline; }
.biz-pin-body { max-height: 160px; overflow-y: auto; margin: 0 0 6px; padding: 6px 8px; color: var(--rz-text-color);
    background: color-mix(in srgb, var(--pin-hue) 12%, var(--rz-base-background-color)); border-left: 3px solid var(--pin-hue); border-radius: 0 4px 4px 0;
    font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.biz-pin-body > :first-child { margin-top: 0; }
.biz-pin-body > :last-child { margin-bottom: 0; }
.biz-pin-body p, .biz-pin-body ul, .biz-pin-body ol, .biz-pin-body pre { margin: 0 0 .4em; }
.biz-pin-body:empty { display: none; }
.biz-pin-editor img, .biz-pin-body img { max-width: 100%; height: auto; }
.biz-pin-body img { max-height: 120px; object-fit: contain; }
.biz-pin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.biz-pin-ask { flex: 1 1 100%; }
.biz-pin-btn { box-sizing: border-box; height: 22px; padding: 0 8px; color: var(--rz-text-color); background: var(--rz-base-background-color);
    border: 1px solid var(--biz-line); border-radius: 4px; font: inherit; font-size: 10.5px; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer; }
.biz-pin-btn:disabled { opacity: .55; cursor: not-allowed; }
.biz-pin-btn.is-copy:hover { color: var(--rz-success-darker); border-color: var(--rz-success); }
.biz-pin-btn.is-insert:hover, .biz-pin-btn.is-edit:hover { color: var(--biz-pin-ink); border-color: var(--biz-pin); }
.biz-pin-btn.is-attach { color: var(--biz-toc-ink); background: var(--rz-info-lighter); border-color: color-mix(in srgb, var(--rz-info) 45%, transparent); }
.biz-pin-btn.is-attach:hover { border-color: var(--rz-info); }
.biz-pin-btn.is-del { margin-left: auto; color: var(--biz-muted); }
.biz-pin-btn.is-del:hover, .biz-pin-btn.is-danger:hover { color: var(--rz-danger); border-color: var(--rz-danger); }
.biz-pin-btn.is-danger { color: var(--rz-on-danger); background: var(--rz-danger); border-color: var(--rz-danger); }
.biz-pin-btn.is-danger:hover { color: var(--rz-on-danger); background: var(--rz-danger-dark); }
.biz-pin-btn.is-primary { color: var(--rz-on-primary); background: var(--rz-primary); border-color: var(--rz-primary); }
.biz-pin-btn.is-primary:hover { background: var(--rz-primary-dark); }
.biz-pin-task-picker { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--biz-line); }
.biz-pin-task-picker > .biz-pin-btn { align-self: flex-start; }
.biz-pin-task-result { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; color: var(--rz-text-color); text-align: left;
    background: var(--rz-base-background-color); border: 1px solid var(--biz-line); border-radius: 4px; font: inherit; font-size: 11.5px; cursor: pointer; }
.biz-pin-task-result:hover { border-color: var(--rz-primary); }
.biz-pin-key { flex: none; color: var(--biz-muted); font-family: 'SF Mono', Consolas, ui-monospace, monospace; font-size: 10.5px; }
.biz-pin-context-menu { position: fixed; z-index: 1200; padding: .25rem; color: var(--rz-text-color); background: var(--rz-base-background-color);
    border: 1px solid var(--biz-line); border-radius: var(--rz-border-radius); box-shadow: 0 4px 16px var(--biz-float-shadow); }
.biz-pin-context-menu button { padding: .45rem .75rem; color: inherit; font: inherit; background: transparent; border: 0; border-radius: var(--rz-border-radius); cursor: pointer; }
.biz-pin-context-menu button:hover, .biz-pin-context-menu button:focus-visible { color: var(--rz-primary-dark); background: var(--rz-primary-lighter); outline: 0; }
@media (max-width: 768px) {
    .biz-pin-scrim { background: var(--biz-scrim); }
    .biz-pin-panel { top: 0; bottom: 0; width: 100vw; max-width: 100vw; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* ── a page's contents (TP482 S3; BizDocs only), as the old site's contents box ───────────────────────────────── */
/* A column on the right of the page while it is wide enough (PageView; docs.css .docs-page-layout), staying in view as
   the page scrolls; its HIDE tab folds it into the CONTENTS tab on the right edge, which also opens the contents as a
   panel when the page is too narrow for the column. Under the phone's menu (25/30) and Radzen's dialogs. */

.biz-toc-rail { position: sticky; top: 16px; display: flex; flex-direction: column; max-height: calc(100dvh - var(--biz-header-height) - 32px);
    color: var(--rz-text-color); background: var(--rz-base-background-color); border: 1px solid var(--biz-line); border-radius: 7px;
    font-size: 12.5px; line-height: 1.5; }
.biz-toc-rail-scroll { min-height: 0; overflow-y: auto; padding: 14px 36px 12px 16px; }
.biz-toc-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.biz-toc-sub { margin: 0 0 10px; color: var(--biz-muted); font-size: 11.5px; }
.biz-toc-items { margin: 0; padding: 0; list-style: none; }
.biz-toc-items li { margin: 0; padding: 0; }
.biz-toc-items li[data-level="2"] + li[data-level="2"] { margin-top: 6px; }
.biz-toc-items li[data-level="2"] + li[data-level="3"] { margin-top: 3px; }
.biz-toc-items li[data-level="3"] + li[data-level="2"], .biz-toc-items li[data-level="4"] + li[data-level="2"] { margin-top: 9px; }
.biz-toc-items li[data-level="3"] { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--biz-line); }
.biz-toc-items li[data-level="4"] { margin-left: 12px; padding-left: 22px; border-left: 1px solid var(--biz-line); }
.biz-toc-item { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 2px 4px; color: var(--rz-text-color); text-align: left;
    background: transparent; border: 0; border-radius: 4px; font: inherit; font-weight: 500; cursor: pointer; }
.biz-toc-items li[data-level="2"] > .biz-toc-item { color: var(--biz-toc-ink); font-weight: 700; }
.biz-toc-item:hover { color: var(--biz-toc-ink); background: var(--rz-info-lighter); }
.biz-toc-item.is-current { background: var(--rz-info-lighter); box-shadow: inset 2px 0 0 var(--biz-toc-ink); }
.biz-toc-num { flex: none; min-width: 28px; color: var(--biz-toc-ink); font-family: 'SF Mono', Consolas, ui-monospace, monospace; font-size: 11px;
    font-weight: 700; letter-spacing: .02em; }
.biz-toc-hide { position: absolute; top: 50%; right: -1px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 26px;
    height: min(130px, calc(100% - 16px)); padding: 0; color: var(--biz-muted); background: var(--biz-lane-bg); border: 1px solid var(--biz-line); border-right: 0;
    border-radius: 7px 0 0 7px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; line-height: 1; text-transform: uppercase;
    writing-mode: vertical-rl; text-orientation: mixed; transform: translateY(-50%); cursor: pointer; user-select: none;
    transition: background .15s, color .15s, border-color .15s, transform .18s; }
.biz-toc-hide::before { content: "▸"; font-size: 10px; font-weight: 400; letter-spacing: 0; writing-mode: horizontal-tb; }
.biz-toc-hide:hover { color: var(--biz-toc-ink); background: var(--rz-info-lighter); border-color: var(--biz-toc-ink); transform: translateY(-50%) translateX(3px); }

/* Lower than the old site's 50%, so it stays clear of the PINS tab where that starts (28%). */
.biz-toc-leaf { position: fixed; top: 58%; right: 0; z-index: 19; display: flex; align-items: center; justify-content: center; gap: 14px;
    width: 38px; height: 200px; padding: 0; color: var(--biz-toc-ink); background: var(--rz-base-background-color); border: 1px solid var(--biz-line);
    border-right: 0; border-radius: 10px 0 0 10px; box-shadow: -3px 0 12px var(--biz-float-shadow); font: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .18em; line-height: 1; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; transform: translateY(-50%);
    cursor: pointer; user-select: none; transition: transform .18s ease, background .15s; }
.biz-toc-leaf::before { content: "◂"; color: var(--biz-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; writing-mode: horizontal-tb; }
.biz-toc-leaf:hover, .biz-toc-leaf.is-on { background: var(--rz-info-lighter); transform: translateY(-50%) translateX(-3px); }
.biz-toc-scrim { position: fixed; inset: 0; z-index: 40; background: transparent; }
.biz-toc-panel { position: fixed; top: calc(var(--biz-header-height) + 8px); right: 0; bottom: 16px; z-index: 41; box-sizing: border-box; width: 300px;
    max-width: 88vw; overflow-y: auto; padding: 14px 36px 12px 16px; color: var(--rz-text-color); background: var(--rz-base-background-color);
    border: 1px solid var(--biz-line); border-right: 0; border-radius: 7px 0 0 7px; box-shadow: -6px 0 22px var(--biz-float-shadow);
    font-size: 12.5px; line-height: 1.5; }
.biz-toc-panel-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; color: var(--biz-muted); background: transparent;
    border: 0; border-radius: 12px; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.biz-toc-panel-close:hover { color: var(--rz-text-color); background: var(--biz-chip-bg); }
@media (max-width: 768px) {
    .biz-toc-leaf { width: 30px; height: 150px; gap: 10px; font-size: 11px; letter-spacing: .14em; }
    .biz-toc-scrim { background: var(--biz-scrim); }
    .biz-toc-panel { top: 0; bottom: 0; border-radius: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ── the page actions tray (TP482 Q798-A; BizDocs only), the old site's round heads ──────────────────────────── */
/* AMA blue, UAF slate; amber while there is something to do (questions not answered, notes written). */

.biz-page-tray { position: fixed; right: 18px; bottom: 18px; z-index: 19; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.biz-page-tray-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
    color: var(--rz-text-color); background: var(--rz-base-background-color); border: 1px solid var(--biz-line); border-radius: 24px;
    box-shadow: 0 4px 18px var(--biz-float-shadow); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.biz-page-tray-button:hover, .biz-page-tray-button.is-on { border-color: var(--rz-primary); }
.biz-page-tray-button:disabled { opacity: .55; cursor: not-allowed; }
.biz-page-tray-add { color: var(--rz-primary-dark); font-size: 20px; font-weight: 600; }
.biz-page-tray-ama { color: var(--biz-toc-ink); }
.biz-page-tray-uaf { color: var(--biz-muted); }
.biz-page-tray-button.is-pending { color: color-mix(in srgb, var(--rz-warning) 40%, var(--rz-text-color));
    background: color-mix(in srgb, var(--rz-warning) 22%, var(--rz-base-background-color)); border-color: var(--rz-warning); }
.biz-page-tray-badge { position: absolute; top: -3px; right: -3px; box-sizing: content-box; min-width: 16px; height: 16px; padding: 0 4px; color: var(--rz-on-danger);
    background: var(--rz-danger); border: 2px solid var(--rz-base-background-color); border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center; pointer-events: none; }
.biz-page-tray-scrim { position: fixed; inset: 0; z-index: 40; background: transparent; }
.biz-page-tray-panel { position: fixed; right: 64px; bottom: 18px; z-index: 41; display: flex; flex-direction: column; gap: 8px;
    width: min(22rem, calc(100vw - 5rem)); max-height: calc(100dvh - 6rem); overflow: auto; padding: 10px 12px;
    color: var(--rz-text-color); background: var(--rz-base-background-color); border: 1px solid var(--biz-line);
    border-radius: 8px; box-shadow: 0 4px 18px var(--biz-float-shadow); font-size: 12px; }
.biz-page-tray-panel p { margin: 0; }
.biz-page-tray-head { display: flex; align-items: center; gap: .5rem; }
.biz-page-tray-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.biz-page-tray-message { margin: 0; color: var(--biz-muted); }
@media (max-width: 768px) {
    .biz-page-tray { right: 10px; bottom: calc(var(--biz-tabbar-height) + env(safe-area-inset-bottom) + 10px); }
    .biz-page-tray-scrim { background: var(--biz-scrim); }
    .biz-page-tray-panel { right: 8px; left: 8px; width: auto; bottom: calc(var(--biz-tabbar-height) + env(safe-area-inset-bottom) + 4rem);
        max-height: calc(100dvh - var(--biz-tabbar-height) - env(safe-area-inset-bottom) - 5rem); }
}

/* ── the list bar (BizListBar, BLAZOR.md § 4.2): one compact row that wraps, never scrolls sideways ─────── */

.biz-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
/* The filters flow as the row's own controls; the tools stay one group at the right end, and wrap whole to the next
   line when the row is full. */
.biz-listbar-filters { display: contents; }
.biz-listbar-filters > .rz-textbox { flex: 1 1 12rem; max-width: 22rem; }
.biz-listbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.biz-listbar-group { display: inline-flex; align-items: center; gap: .25rem; }
.biz-listbar-range { color: var(--biz-muted); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.biz-listbar-page { font-size: .8rem; min-width: 3.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.biz-listbar-sort { width: 8.5rem; }
.biz-listbar-size { width: 4.75rem; }