@import '_content/Zeal.Maui.App.Ui/Zeal.Maui.App.Ui.blmmb2vzt4.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-x2prqzjo8a] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-x2prqzjo8a] {
    flex: 1;
}

.sidebar[b-x2prqzjo8a] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-x2prqzjo8a] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-x2prqzjo8a]  a, .top-row[b-x2prqzjo8a]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-x2prqzjo8a]  a:hover, .top-row[b-x2prqzjo8a]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-x2prqzjo8a]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 599.98px) {
    .top-row[b-x2prqzjo8a] {
        justify-content: space-between;
    }

    .top-row[b-x2prqzjo8a]  a, .top-row[b-x2prqzjo8a]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 600px) {
    .page[b-x2prqzjo8a] {
        flex-direction: row;
    }

    .sidebar[b-x2prqzjo8a] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-x2prqzjo8a] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-x2prqzjo8a]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-x2prqzjo8a], article[b-x2prqzjo8a] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-x2prqzjo8a] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-x2prqzjo8a] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-xgim4y031d] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-xgim4y031d] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-xgim4y031d] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-xgim4y031d] {
    font-size: 1.1rem;
}

.bi[b-xgim4y031d] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-xgim4y031d] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-xgim4y031d] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-xgim4y031d] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-xgim4y031d] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-xgim4y031d] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-xgim4y031d] {
        padding-bottom: 1rem;
    }

    .nav-item[b-xgim4y031d]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-xgim4y031d]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-xgim4y031d]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-xgim4y031d] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-xgim4y031d] {
    display: block;
}

@media (min-width: 600px) {
    .navbar-toggler[b-xgim4y031d] {
        display: none;
    }

    .nav-scrollable[b-xgim4y031d] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ZtShellLayout.razor.rz.scp.css */
/* Mirrors the Test Form page chrome (.zt-testform-page/.zt-testform-card) as the shared site shell. */

.zt-shell-page[b-ci4xafbjpz] {
	min-height: 100dvh;               /* fill the viewport so the card can center vertically */
	box-sizing: border-box;
	/* bottom space ALWAYS clears the fixed nav bar — using its LIVE height (--zt-navbar-h, kept current by JS) so it
	   works whether the bar is one row or two, so you can scroll to the very bottom of the last section. */
	/* HORIZONTAL = --zt-page-gutter (zt-ui.css :root). THIS ONE VALUE IS WHAT MAKES EVERY PAGE SECTION FLOAT,
	   on every page, at every width — see the token's remarks. Never re-state 16px here. */
	padding: 24px var(--zt-page-gutter, 16px) calc(var(--zt-navbar-h, 60px) + 28px);
	background: transparent;          /* the fixed ZtWaves backdrop shows through */
	position: relative;
	z-index: 1;                       /* sit above the fixed waves */
	display: flex;
	font-family: var(--zt-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Pure card CHROME — the page supplies its own content padding. `margin: auto` in a flex container centers
   the card BOTH axes when it fits, and is scroll-safe (no top cut-off) when the content is taller. */
.zt-shell-card[b-ci4xafbjpz] {
	margin: auto;
	width: 100%;
	max-width: 599px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	overflow: hidden;                 /* keep child corners inside the rounded card */
}

/* APP VIEW — a TRANSPARENT centered column (no card). Each ZtPageSection inside supplies its own card, so
   the sections stack over the animated backdrop like the Test Form. `margin: auto` centers it in the flex
   page and is scroll-safe when the content is taller than the viewport. */
.zt-shell-content[b-ci4xafbjpz] {
	margin: auto;
	width: 100%;
	max-width: 1000px;                /* wide sections on desktop (login card stays 640); mobile still full-width */
}

/* ≤480px: the sections go 100% wide, and THE STARFIELD SHOWS THROUGH BEHIND THEM.

   ⚠️ THE FLAT GREY IS GONE (Vince, 2026-08-07: "on mobile devices where I don't have a page section to fill the
   screen vertically, I get this gray background. That's not great"). The backdrop used to hide itself at this
   width, so the shell painted --zeal-dark-grey to keep the gaps between white sections looking deliberate. On a
   short page that meant most of the screen was a grey slab, while the SAME page on a desktop got the backdrop —
   two different products at two widths. The starfield now runs at every width, so this just gets out of its way.

   ⚠️ AND THE CONTENT CENTERS VERTICALLY, exactly as it does on a desktop ("our only section that is centered
   vertically"). `margin: auto` in the flex page is what does it, and it is the SAME declaration the wide layout
   uses — one short section floats in the middle of the stars, and a tall page still starts at the top and
   scrolls, so this does not re-introduce the dead space above the fold that `margin: 0` was added to kill. */
/* ⚠️🐛 THIS BLOCK USED TO ZERO THE HORIZONTAL PADDING (`padding: 0 0 …`) AND THAT WAS THE WHOLE BUG.
   Every page section on a phone ran edge to edge because of this ONE declaration — not because of anything on
   the sections themselves. It sent us chasing per-card margins page by page (Vince, 2026-08-07: "program
   memberships isn't the same width as accounts… trial classes and prospects push all the way to the edge… I
   don't wanna have to go page to page to page"). The gutter is restored here; the TOP stays 0 so a short page
   still centres vertically in the stars, which is what that padding was really protecting. */
/* ⚠️ THE TOP GUTTER MATCHES THE SIDES (Vince, 2026-08-07: "that top section is not floating, it's always glued
   to the top — we need the same exact amount of space above the first section that we have to the left, to the
   right, and below it"). It was 0 here to protect vertical centring on a short page; that is still intact,
   because `margin: auto` on .zt-shell-content centres it inside whatever space the padding leaves. A section
   that is inset on three sides and welded to the fourth does not read as floating at all. */
@media (max-width: 599px) {
	.zt-shell-page[b-ci4xafbjpz] { min-height: 100dvh; padding: var(--zt-page-gutter, 12px) var(--zt-page-gutter, 12px) calc(var(--zt-navbar-h, 60px) + 20px); background: transparent; }
	/* THE LOGIN CARD IS DELIBERATELY NOT PART OF THIS. It is the one full-bleed white sheet in the app and the
	   sign-in flow stays exactly as it was, so it pulls itself back out over the new gutter. */
	.zt-shell-card[b-ci4xafbjpz] {
		max-width: 100%; margin: auto; border-radius: 0; box-shadow: none;
		width: auto; margin-left: calc(var(--zt-page-gutter, 12px) * -1); margin-right: calc(var(--zt-page-gutter, 12px) * -1);
	}
	.zt-shell-content[b-ci4xafbjpz] { max-width: 100%; margin: auto; }
}
/* /Components/Pages/NavBarDemo.razor.rz.scp.css */
.zt-navdemo[b-sff0oauch7] {
	display: flex;
	justify-content: center;
	padding: 28px 16px 96px; /* BOTTOM ROOM SO THE FIXED NAVBAR NEVER COVERS CONTENT */
}

/* THE BAR IS TALLER (TWO ROWS) ON PHONES — GIVE THE PAGE MORE BOTTOM ROOM. */
@media (max-width: 599px) {
	.zt-navdemo[b-sff0oauch7] { padding-bottom: 132px; }
}

.zt-navdemo-card[b-sff0oauch7] {
	width: 100%;
	max-width: 599px;
	background: #fff;
	border-radius: 14px;
	padding: 28px 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.zt-navdemo-card h1[b-sff0oauch7] {
	margin: 0 0 0.4em;
	color: #222;
	font-size: 1.6rem;
}

.zt-navdemo-card p[b-sff0oauch7] {
	color: #444;
	line-height: 1.5;
}

.zt-navdemo-toggle[b-sff0oauch7] {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 20px 0;
}

.zt-navdemo-readout[b-sff0oauch7] {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 18px 0;
	padding: 16px;
	background: #f5f7f7;
	border-radius: 10px;
	font-size: 0.9rem;
}

.zt-navdemo-readout dt[b-sff0oauch7] {
	font-weight: 700;
	color: #555;
}

.zt-navdemo-readout dd[b-sff0oauch7] {
	margin: 0;
	color: #1a1a1a;
	font-variant-numeric: tabular-nums;
}

.zt-navdemo-hint[b-sff0oauch7] {
	font-size: 0.85rem;
	color: #777;
	margin-bottom: 0;
}
/* /Components/Pages/TestForm.razor.rz.scp.css */
/* Test form page chrome (scoped). Form control styling ships from the RCL (zt-ui.css). */

.zt-testform-page[b-1kuaz6kc2k] {
	padding: 4px 16px;              /* tighter vertical gap between sections (was 6px) */
	background: transparent;        /* the ZtWaves backdrop shows through the side space */
	position: relative;
	z-index: 1;                     /* sit above the fixed waves */
	display: flex;
	justify-content: center;
	/* the whole test page renders in the RCL's self-hosted Inter (var from zt-ui.css) */
	font-family: var(--zt-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.zt-testform-page:first-of-type[b-1kuaz6kc2k] { padding-top: 28px; }

/* The fixed bottom navbar (~72px) overlays page content. A reliable tail spacer after the LAST
   content page guarantees the final section can scroll clear of it — :last-of-type didn't fire
   because the modal/toast divs render after the pages. */
.zt-testform-tail[b-1kuaz6kc2k] { height: 130px; background: transparent; position: relative; z-index: 1; }

/* ≤480px: sections go full-width with just a few px of #555 between them (no side space). */
@media (max-width: 599px) {
	.zt-testform-page[b-1kuaz6kc2k] { padding: 1.5px 0; background: #555555; }
	.zt-testform-page:first-of-type[b-1kuaz6kc2k] { padding-top: 0; }
	.zt-testform-tail[b-1kuaz6kc2k] { background: #555555; }
	.zt-testform-card[b-1kuaz6kc2k] { max-width: 100%; border-radius: 0 !important; box-shadow: none; }
	.zt-pagesection-demo[b-1kuaz6kc2k] { max-width: 100%; }
	.zt-pagesection-demo[b-1kuaz6kc2k]  .zt-page-section,
	.zt-pagesection-demo[b-1kuaz6kc2k]  .zt-action-card { border-radius: 0 !important; margin-bottom: 3px; }
}

.zt-testform-card[b-1kuaz6kc2k] {
	width: 100%;
	max-width: 599px;
	background: #ffffff;
	border-radius: 6px;
	padding: 22px 26px 30px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

/* ZtPageSection demo — the real component renders its own card chrome, so this just sets the column width */
.zt-pagesection-demo[b-1kuaz6kc2k] { width: 100%; max-width: 599px; }

/* ZtActionCard demo grid — responsive auto-fill so the cards wrap */
.zt-actioncard-grid[b-1kuaz6kc2k] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

/* The legacy demo cards aren't ZtPageSections — give their <h3> a header look + a dark colour
   (the page inherits white text, so an unstyled h3 is invisible on the white card). */
.zt-testform-card h3[b-1kuaz6kc2k] {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	font-family: "WhitneySSmBold", "Montserrat", sans-serif;
	font-size: 15pt;
	font-weight: 700;
	color: #222;
}
.zt-testform-card h3[b-1kuaz6kc2k]  .zt-fa { color: var(--zeal-tiffany, #08bab5); }

.zt-testform-sub[b-1kuaz6kc2k] {
	margin: 0 0 20px;
	color: #555;
	font-size: 10.5pt;
	line-height: 1.5;
}

.zt-testform-sub code[b-1kuaz6kc2k] {
	background: #f1f1f1;
	border-radius: 3px;
	padding: 1px 5px;
	font-size: 9.5pt;
	color: #b8860b;
}

.zt-selected-user[b-1kuaz6kc2k] {
	margin: 10px 0 6px;
	max-width: 350px;
	padding: 12px 14px;
	background: #f6fbfb;
	border: 1px solid #d7eeed;
	border-left: 4px solid #08bab5;
	border-radius: 6px;
}

.zt-autofill-decoy[b-1kuaz6kc2k] {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.zt-testform-divider[b-1kuaz6kc2k] {
	margin: 22px 0 4px;
	padding-bottom: 6px;
	border-bottom: 2px solid #ececec;
	font-family: "WhitneySSmBold", "Montserrat", sans-serif;
	font-size: 12pt;
	color: #444;
	display: flex;
	align-items: center;
	gap: 8px;
}
.zt-testform-divider .fi[b-1kuaz6kc2k] { color: #ebb41f; }

.zt-testform-actions[b-1kuaz6kc2k] {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid #ececec;
}
/* a button row right under a divider would double the line — drop its top border */
.zt-testform-divider + .zt-testform-actions[b-1kuaz6kc2k] {
	margin-top: 12px;
	padding-top: 0;
	border-top: none;
}

/* CONTROL-STATES DEMO — a control + its Show/Hide/Busy/NotBusy button row */
.zt-state-demo[b-1kuaz6kc2k] {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px dashed #e3e3e3;
}
.zt-state-demo:last-child[b-1kuaz6kc2k] { border-bottom: none; }
.zt-state-btns[b-1kuaz6kc2k] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	max-width: 350px;
}
.zt-state-btns .ztbtn[b-1kuaz6kc2k] { padding: 0.4rem 0.7rem; font-size: 0.8rem; }

/* SMALL-TEXT CRISPNESS A/B grid: size | Inter | System */
.zt-font-ab[b-1kuaz6kc2k] {
	display: grid;
	grid-template-columns: 52px 1fr 1fr;
	gap: 14px 18px;
	align-items: center;
	color: #333;            /* sample rows have no explicit colour — keep them dark, not page-inherited white */
}
.zt-font-ab-h[b-1kuaz6kc2k] { font-weight: 700; font-size: 11px; color: #444; }
.zt-font-ab-size[b-1kuaz6kc2k] { font-size: 10px; color: #999; }

/* BUSY/WORKING demo — a relatively-positioned block so the ZtBusy overlay covers it */
.zt-busy-demo[b-1kuaz6kc2k] {
	position: relative;
	min-height: 210px;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 16px;
	overflow: hidden;
}
.zt-busy-toggle[b-1kuaz6kc2k] { margin-top: 14px; }

/* FA7 ICON SHOWCASE — ::deep reaches into the ZtIcon child component's <i.zt-fa> */
.zt-icon-styles[b-1kuaz6kc2k] {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	align-items: flex-end;
	margin: 8px 0 2px;
}
.zt-icon-styles > div[b-1kuaz6kc2k] { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.zt-icon-styles[b-1kuaz6kc2k]  .zt-fa { font-size: 36px; color: #333; }
.zt-icon-styles span[b-1kuaz6kc2k] { font-size: 11px; color: #888; }

.zt-icon-grid[b-1kuaz6kc2k] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
	gap: 12px 8px;
	margin: 8px 0 2px;
}
.zt-icon-cell[b-1kuaz6kc2k] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 4px;
	border: 1px solid #f0f0f0;
	border-radius: 8px;
}
.zt-icon-cell[b-1kuaz6kc2k]  .zt-fa { font-size: 24px; color: #444; }
.zt-icon-cell span[b-1kuaz6kc2k] { font-size: 9.5px; color: #999; text-align: center; word-break: break-word; line-height: 1.25; }

/* RICH-TEXT EDITOR — live HTML output box */
.zt-rte-output[b-1kuaz6kc2k] {
	margin: 4px 0 0;
	padding: 12px 14px;
	background: #2b2f33;
	color: #d6f5f3;
	border-radius: 8px;
	font-family: "Courier New", monospace;
	font-size: 11.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 220px;
	overflow: auto;
}

/* BANNER */
.zt-banner[b-1kuaz6kc2k] {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	padding: 11px 15px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 10.5pt;
}
.zt-banner-ok[b-1kuaz6kc2k] { background: #eef8f0; border: 1px solid #cfe9d4; color: #2f7d43; }
.zt-banner-err[b-1kuaz6kc2k] { background: #fdf3f3; border: 1px solid #f0c2c2; color: #c0392b; }
.zt-banner .fi[b-1kuaz6kc2k] { font-size: 13pt; }

/* HELP OVERLAY */
.zt-help-overlay[b-1kuaz6kc2k] {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(20, 20, 20, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.zt-help-card[b-1kuaz6kc2k] {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .4);
	padding: 22px 24px;
	animation: zt-help-in-b-1kuaz6kc2k .16s ease-out;
}

@keyframes zt-help-in-b-1kuaz6kc2k {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.zt-help-title[b-1kuaz6kc2k] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "WhitneySSmBold", "Montserrat", sans-serif;
	font-size: 13pt;
	color: #222;
	margin-bottom: 10px;
}
.zt-help-title .fi[b-1kuaz6kc2k] { color: #ebb41f; }

.zt-help-body[b-1kuaz6kc2k] { color: #444; font-size: 10.5pt; line-height: 1.55; }
.zt-help-body b[b-1kuaz6kc2k] { color: #222; }

.zt-help-close[b-1kuaz6kc2k] {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #aaa;
	cursor: pointer;
}
.zt-help-close:hover[b-1kuaz6kc2k] { color: #333; }

/* ---- Migrated demo styles (were inline style= attributes) — keep all styling in the sheet ---- */

/* spacing utilities used by the demo copy/divs */
.zt-m0[b-1kuaz6kc2k] { margin: 0; }
.zt-mb10[b-1kuaz6kc2k] { margin: 0 0 10px; }
.zt-mb12[b-1kuaz6kc2k] { margin: 0 0 12px; }
.zt-mt12[b-1kuaz6kc2k] { margin-top: 12px; }
.zt-spacer-sm[b-1kuaz6kc2k] { height: 14px; }
.zt-testform-note[b-1kuaz6kc2k] { font-size: 9pt; margin-top: 6px; }

/* SMALL-TEXT A/B samples (font-family per column; one class per demoed size — no inline sizing) */
.zt-ab-inter[b-1kuaz6kc2k] { font-family: "Inter", sans-serif; }
.zt-ab-system[b-1kuaz6kc2k] { font-family: system-ui, "Segoe UI", sans-serif; }
.zt-ab-label[b-1kuaz6kc2k] { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.zt-ab-14[b-1kuaz6kc2k] { font-size: 14px; }
.zt-ab-12[b-1kuaz6kc2k] { font-size: 12px; }
.zt-ab-10[b-1kuaz6kc2k] { font-size: 10px; }
.zt-ab-9[b-1kuaz6kc2k] { font-size: 9px; }
.zt-ab-8[b-1kuaz6kc2k] { font-size: 8px; }
.zt-ab-7[b-1kuaz6kc2k] { font-size: 7px; }

/* ZtBusy square-loader demo box */
.zt-square-demo[b-1kuaz6kc2k] {
	position: relative;
	width: 240px;
	height: 240px;
	max-width: 100%;
	border: 1px solid #ececec;
	border-radius: 8px;
	background: #fafbfb;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 0.85rem;
}

/* captured-signature preview thumbnail */
.zt-sig-preview[b-1kuaz6kc2k] {
	max-height: 64px;
	border: 1px solid #eee;
	border-radius: 4px;
	background: #fff;
	padding: 2px;
}

/* side-by-side photo/file-input demo row */
.zt-demo-row[b-1kuaz6kc2k] { display: flex; gap: 34px; flex-wrap: wrap; }
/* /Components/ReconnectModal.razor.rz.scp.css */
/* ============================================================ */
/* SIGNALR RECONNECT MODAL — the BACKDROP and the STATE MACHINE. */
/* ============================================================ */
/* ⛔ THE LAVA IS NOT IN THIS FILE ANY MORE, AND MUST NOT COME    */
/* BACK. It was a hand-tuned copy of ZtBusy's loader, and the two */
/* drifted into visibly different loaders in the same app (Vince, */
/* 2026-08-15: "we need this to be one code base or one reusable  */
/* piece of code"). The overlay now renders <ZtLava FullScreen>,  */
/* whose ONE set of rules lives in zt-ui.css. Change the loader   */
/* THERE and this overlay follows.                                */
/*                                                                */
/* ⚠️ AND IT COULD NOT BE RESTYLED FROM HERE EVEN IF SOMEONE      */
/* TRIED: CSS isolation stamps [b-xxx] on THIS component's own    */
/* elements only, so a `.zeal-reconnect .zt-lava` rule written in  */
/* this file never matches. That is a feature — the loader has one */
/* owner. What is left here is what genuinely belongs to the       */
/* overlay: the pulsing black vignette behind it, and which of the */
/* three status messages Blazor's state classes reveal.            */
@property --zr-vignette {
	syntax: "<color>";
	initial-value: #111111;
	inherits: false;
}

@keyframes zr-bg-pulse-b-0euodchviq {
	from { --zr-vignette: #222222; }
	to   { --zr-vignette: #050505; }
}

.zeal-reconnect[b-0euodchviq] {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 30000;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;                   /* the picture's silver halo needs clearance before the status text starts */
	overflow: hidden;            /* the starfield's layers scale past the box — never let them make a scrollbar */
	background: radial-gradient(circle at center, var(--zr-vignette) 0%, #000000 85%);
	animation: zr-bg-pulse-b-0euodchviq 4s ease-in-out infinite alternate;
	font-family: "Montserrat", system-ui, sans-serif;
}

/* ANY ACTIVE RECONNECT STATE REVEALS THE OVERLAY */
.zeal-reconnect.components-reconnect-show[b-0euodchviq],
.zeal-reconnect.components-reconnect-retrying[b-0euodchviq],
.zeal-reconnect.components-reconnect-failed[b-0euodchviq],
.zeal-reconnect.components-reconnect-paused[b-0euodchviq],
.zeal-reconnect.components-reconnect-resume-failed[b-0euodchviq],
.zeal-reconnect.components-reconnect-rejected[b-0euodchviq] {
	display: flex;
}

/* RECONNECTED -> ALWAYS HIDE */
.zeal-reconnect.components-reconnect-hide[b-0euodchviq] {
	display: none;
}

/* CLEAN WHITE STATUS TEXT */
/* keep the message off the screen edges on narrow phones (it was butting right up to the sides). */
/* ⚠️ POSITIONED, WITH A REAL z-index — the starfield is an absolutely-positioned sibling, and positioned
   elements paint ABOVE in-flow content whatever the DOM order says. Without this pair the stars fly straight
   over the status text. (The picture carries the same pair in zt-ui.css, for the same reason.) */
.zeal-reconnect-text[b-0euodchviq] {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 1.5rem;
	max-width: 24rem;
	box-sizing: border-box;
}
.zeal-reconnect-msg[b-0euodchviq] {
	display: none;
	margin: 0;
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.2px;
}
.zeal-reconnect-attempt[b-0euodchviq] {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
}

/* PER-STATE MESSAGE VISIBILITY */
.zeal-reconnect.components-reconnect-show .zeal-reconnect-trying[b-0euodchviq],
.zeal-reconnect.components-reconnect-failed .zeal-reconnect-trying[b-0euodchviq],
.zeal-reconnect.components-reconnect-paused .zeal-reconnect-trying[b-0euodchviq],
.zeal-reconnect.components-reconnect-resume-failed .zeal-reconnect-trying[b-0euodchviq] {
	display: block;
}

/* RETRYING COEXISTS WITH show -> COUNTDOWN MESSAGE WINS */
.zeal-reconnect.components-reconnect-retrying .zeal-reconnect-trying[b-0euodchviq] { display: none; }
.zeal-reconnect.components-reconnect-retrying .zeal-reconnect-retrying-msg[b-0euodchviq] { display: block; }
.zeal-reconnect.components-reconnect-rejected .zeal-reconnect-rejected-msg[b-0euodchviq] { display: block; }

.zeal-reconnect-rejected-msg a[b-0euodchviq] {
	color: #ffcb04;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
/* /Components/Shared/ZtStarfield.razor.rz.scp.css */
/* Fixed cosmic backdrop — the lowest layer (sits behind ZtWaves). A dark space base with soft Zeal-gold +
   tiffany nebula glows, and three star layers FLYING TOWARD THE VIEWER.

   ⚠️ THE STARS THEMSELVES ARE NOT IN THIS FILE ANY MORE, AND MUST NOT COME BACK. The star gradients, the warp
   keyframes, the three-run offsets and the phones-get-two-layers budget all live in ONE place — .zt-warp /
   .zt-warp-layer in zt-ui.css — because the STARFIELD LOADER flies the same sky (Vince, 2026-08-15). Scoped
   CSS cannot be shared, so leaving them here would have forced the loader to copy them, and a copy is how the
   app ended up with two loaders that had drifted into visibly different things.

   WHAT IS LEFT HERE IS WHAT IS GENUINELY THE BACKDROP'S: where it sits (pinned to the viewport, behind
   everything) and what colour the space behind the stars is (the nebula glows).

   THE TWO CUSTOM PROPERTIES ARE THE WHOLE TEMPLATE SURFACE, and they are set inline by ZtStarfield from the
   resolved platform template; the shared engine reads them with its own fallbacks:
     --zt-star-tile    the star tile size. SMALLER = the same four stars repeat more often = DENSER.
     --zt-star-flight  how long one star takes to travel from the vanishing point to past the viewer.
                       Lower = faster. The backdrop runs ~14s; the loader runs ~3s. */

/* ⚠️⚠️ THE BACKDROP MUST NOT MOVE WHEN THE PAGE SCROLLS. IT IS PINNED TO 100lvh, NOT inset:0.
   (Vince, 2026-08-14: "when I scroll, the waves and the star field scroll too… it jumps up and down… it hops
   all around and blinks real crazy on a mobile device.")

   THE CAUSE WAS NOT `position: fixed` — that was already right. It was the SIZE. A mobile browser HIDES ITS
   ADDRESS BAR AS YOU SCROLL, and that grows the viewport a fixed element is measured against. With `inset: 0`
   the backdrop was re-laid-out and repainted on every one of those transitions, so it visibly hopped in the
   opposite direction to the scroll — the effect reads as the background sliding.

   `100lvh` is the LARGE viewport height — the height with the toolbar RETRACTED — and it does not change when
   the toolbar comes and goes. So the element is always big enough to cover the screen, and its box never
   changes. Nothing to re-lay-out, nothing to hop. `100vh` first as the fallback for anything without lvh.

   ⚠️ THIS RULE MUST KEEP WINNING OVER THE SHARED .zt-warp, which is `position:absolute; inset:0`. It does,
   and not by luck: a scoped rule is compiled to `.zt-cosmos[b-xxxxx]`, which outranks a bare class. */
.zt-cosmos[b-yyyy5dy71z] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;                     /* ⚠️ NOT inset:0 — see above. bottom is what tracked the moving toolbar. */
	height: 100vh;
	height: 100lvh;
	/* z-index 0, NOT -1. A negative-z fixed layer sits behind the root background, which is its own source of
	   compositing flicker on Android Chrome. The waves come after this in the DOM (same layer) so they still
	   paint on top, and .zt-shell-page is z-index 1, so page content is still above both. */
	z-index: 0;
	background:
		radial-gradient(1200px 700px at 78% -10%, rgba(8, 186, 181, .14), transparent 60%),   /* tiffany glow, top-right */
		radial-gradient(1000px 600px at 12% 112%, rgba(212, 175, 55, .12), transparent 55%),   /* gold glow, bottom-left (ties to the waves) */
		linear-gradient(180deg, #0a0a0f 0%, #0d0d14 50%, #0a0a0f 100%);                         /* dark space base */
}

/* ⚠️ NO BREAKPOINT ON THE STARFIELD ITSELF. IT RUNS ON A PHONE TOO (Vince, 2026-08-07).
   It used to hide itself ≤480px, and the shell painted a flat dark grey in its place so the gaps between
   full-width white sections read as deliberate. On a page with ONE short section that left most of the screen
   as a slab of grey — "that's not great" — while the same page on a desktop got the backdrop. The fix is not a
   better grey: it is to stop hiding the thing that was already there. The shared engine's media query tunes
   the COST on a small screen (two flying layers instead of three); it does not take the sky away.

   THE DENSITY AND SPEED KNOBS ARE THE OTHER PHONE ANSWER: someone who still finds it busy turns them down in
   Settings, and it stays down. */
/* /Components/Shared/ZtWaves.razor.rz.scp.css */
/* Fixed full-page backdrop: a dark base with four animated wave bands that fill most of the height.
   Each band is a 2-tile SVG (the second tile translated +1200) sliding translateX(-50%) for a seamless
   loop — the wave starts and ends at the same height so there's no cut/seam. Parallax via different
   heights / speeds / opacities. Lives behind content (z-index 0; give your page content z-index 1).

   THE FOUR BAND COLOURS ARE CUSTOM PROPERTIES set on .ztw by ZtWaves from the resolved platform template. The
   fallbacks below are the shipped Zeal Waves palette, so the backdrop is right even if nothing sets them. */
/* ⚠️⚠️ PINNED TO 100lvh, NOT inset:0 — THE SAME FIX AS ZtStarfield, FOR THE SAME REASON, AND IT HAS TO BE DONE
   ON BOTH OR THE TWO LAYERS COME APART WHILE YOU SCROLL. A mobile browser hides its address bar as you scroll,
   which grows the viewport a fixed element is measured against; with `inset: 0` this box was re-laid-out on
   every one of those transitions and the crests visibly hopped. `100lvh` is the height with the toolbar
   RETRACTED and does not change when it comes and goes, so the box never resizes. See ZtStarfield.razor.css
   for the full note. */
.ztw[b-s0izwjf6gb] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	height: 100vh;
	height: 100lvh;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Nothing inside can affect anything outside, so the compositor can leave this alone while the page scrolls. */
	contain: layout paint style;
	background: linear-gradient(180deg, #3d3d3d 0%, #343434 40%, #2b2b2b 100%);
}

/* Drop the solid base so a backdrop behind the waves (e.g. ZtStarfield) shows through. */
.ztw-transparent[b-s0izwjf6gb] { background: transparent; }

.ztw-layer[b-s0izwjf6gb] { position: absolute; left: 0; bottom: 0; width: 100%; }
/* min-width floors the wavelength so the wave stays SMOOTH on narrow screens instead of compressing into
   tall/peaky "smushed" crests. The slide is always -50% (= one 2-tile half), so the loop stays seamless. */
.ztw-svg[b-s0izwjf6gb] { position: absolute; bottom: 0; left: 0; width: 200%; min-width: 1800px; height: 100%; will-change: transform; }

@keyframes ztw-slide-b-s0izwjf6gb { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Tall bands so the waves fill most of the vertical space, not just the bottom strip.
   ⚠️ PERCENTAGES OF .ztw, NOT vh. The parent is now a fixed 100lvh box, so a percentage is measured against
   something that never changes — whereas `vh` is measured against the viewport, which is exactly the thing a
   mobile toolbar keeps resizing. Leaving these in vh would have re-introduced the hop one level down, on the
   four bands, after the container was already stable. The numbers are unchanged (100/82/64/46). */
.ztw-gold-1[b-s0izwjf6gb] { height: 100%; opacity: 0.72; }
.ztw-gold-1 .ztw-svg[b-s0izwjf6gb] { animation: ztw-slide-b-s0izwjf6gb 38s linear infinite; }
.ztw-gray-1[b-s0izwjf6gb] { height: 82%; opacity: 0.55; }
.ztw-gray-1 .ztw-svg[b-s0izwjf6gb] { animation: ztw-slide-b-s0izwjf6gb 27s linear infinite reverse; }
.ztw-gold-2[b-s0izwjf6gb] { height: 64%; opacity: 0.62; }
.ztw-gold-2 .ztw-svg[b-s0izwjf6gb] { animation: ztw-slide-b-s0izwjf6gb 18s linear infinite; }
.ztw-gray-2[b-s0izwjf6gb] { height: 46%; opacity: 0.5; }
.ztw-gray-2 .ztw-svg[b-s0izwjf6gb] { animation: ztw-slide-b-s0izwjf6gb 22s linear infinite reverse; }

/* ── THE BAND COLOURS ──────────────────────────────────────────────────────────────────────────────────────
   ⚠️ ::deep IS LOAD-BEARING HERE, not decoration. CSS isolation appends the scope attribute to the LAST
   compound selector, i.e. `.ztw-stop-edge[b-xxx]` — which relies on the Razor compiler having stamped that
   attribute onto an SVG <stop>. ::deep moves the scope onto `.ztw` (unquestionably a stamped element) and lets
   the rest match plainly, so these rules cannot quietly stop applying and leave every wave black.

   THE MID STOP IS DERIVED, NOT A FIFTH AND SIXTH SETTING. The hand-picked palette darkened the middle of each
   gold band and lightened the middle of each charcoal one; color-mix reproduces exactly that relationship from
   whatever colour the user picks, so four knobs still give the full eight-stop depth. */
.ztw[b-s0izwjf6gb]  .ztw-gold-1 .ztw-stop-edge { stop-color: var(--ztw-gold-back, #4F66AB); }
.ztw[b-s0izwjf6gb]  .ztw-gold-1 .ztw-stop-mid { stop-color: color-mix(in srgb, var(--ztw-gold-back, #4F66AB) 76%, #000000); }

.ztw[b-s0izwjf6gb]  .ztw-gray-1 .ztw-stop-edge { stop-color: var(--ztw-charcoal-back, #3F96A2); }
.ztw[b-s0izwjf6gb]  .ztw-gray-1 .ztw-stop-mid { stop-color: color-mix(in srgb, var(--ztw-charcoal-back, #3F96A2) 88%, #FFFFFF); }

.ztw[b-s0izwjf6gb]  .ztw-gold-2 .ztw-stop-edge { stop-color: var(--ztw-gold-front, #42B7FF); }
.ztw[b-s0izwjf6gb]  .ztw-gold-2 .ztw-stop-mid { stop-color: color-mix(in srgb, var(--ztw-gold-front, #42B7FF) 80%, #000000); }

.ztw[b-s0izwjf6gb]  .ztw-gray-2 .ztw-stop-edge { stop-color: var(--ztw-charcoal-front, #2E2E2E); }
.ztw[b-s0izwjf6gb]  .ztw-gray-2 .ztw-stop-mid { stop-color: color-mix(in srgb, var(--ztw-charcoal-front, #2E2E2E) 90%, #FFFFFF); }

@media (prefers-reduced-motion: reduce) { .ztw-svg[b-s0izwjf6gb] { animation: none !important; } }

/* ── HOW MUCH ROOM vs WHAT THE DEVICE CAN AFFORD — TWO DIFFERENT QUESTIONS, TWO DIFFERENT MEDIA QUERIES ─────
   ⚠️ WIDTH IS NOT A PROXY FOR HORSEPOWER, AND A FOLDABLE IS THE PROOF (Vince, 2026-08-16: *"I am looking on my
   Galaxy Z Fold 7… when I open it up I'm getting this kind of odd view where it's not quite desktop, not quite
   mobile… in the next five years the majority of phones are gonna be foldable"*). Unfolded, that device reports
   a viewport in DESKTOP territory while still being a phone: a phone GPU, a retracting address bar, a battery.
   The old single width rule therefore handed it the full four-band desktop backdrop.

   So the two decisions are now asked separately, and every future backdrop rule should follow this shape:
     ROOM       → a WIDTH query. Do the crests have the horizontal space to read as waves at all?
     HORSEPOWER → (pointer: coarse). Can this thing afford four large, permanently-promoted, continuously
                  animating layers? A touch device cannot, at ANY width — folded, unfolded or on a tablet.
   (The starfield already worked this way — see its `(pointer: coarse), (max-width: 839px)` rule in zt-ui.css.
   This is that same rule, applied to the layer that never got it.) */

/* ROOM: ≤599px (COMPACT) there is none — the shell is 100% wide with no layout showing through, so the bands go entirely.
   The STARFIELD stays on at this width (see its own CSS); it needs no horizontal room to read. */
@media (max-width: 599px) { .ztw[b-s0izwjf6gb] { display: none; } }

/* HORSEPOWER: ANY touch device keeps the waves but pays half the bill — two bands instead of four.
   THE TWO CHARCOAL BANDS ARE THE ONES THAT GO, and that is why this is affordable rather than a compromise:
   `Transparent="true"` drops the waves' own dark base so the STARFIELD shows through, and against that the dark
   crests were reading as silhouettes anyway. The gold pair carries the whole effect — the tall back band plus
   the shorter front one, so the parallax between them survives.
   To pick a different pair, swap which two are hidden; it is one line and nothing else depends on it. */
@media (pointer: coarse) {
	.ztw-gray-1[b-s0izwjf6gb],
	.ztw-gray-2[b-s0izwjf6gb] { display: none; }
}