/* This rule fires whether or not the theme is on, so nothing branded may live in it -
   it is byte-identical to main's first rule, minus the background-color that rule also
   carried. The brand face is applied by the gated rule below instead; setting it here put
   it on every flag-off page.

   DO NOT re-add the background-color. main paired it with !important, which beats
   MudBlazor's own body { background-color: var(--mud-palette-background) } and would pin a
   themed page light grey no matter what the palette says. The flag-off grey comes back
   below at a specificity that needs no !important. */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Inter is the brand face (D2, HB-25795; it replaced Sora) and must not reach a flag-off
   instance, so it hangs off the same data-theme gate as the rest of the theme.
   (0,1,1)/(0,1,2) beats the rule above at (0,0,1). --pg-font-sans comes from tokens.css. */
html[data-theme],
html[data-theme] body {
    font-family: var(--pg-font-sans);
}

/* D2: JetBrains Mono for numbers. MudBlazor has no typography slot for figures, so the theme
   opts them in by markup: raw code/kbd/samp and any element given .pg-num. Tabular figures so a
   column of amounts lines up. */
html[data-theme] code,
html[data-theme] kbd,
html[data-theme] samp,
html[data-theme] .pg-num {
    font-family: var(--pg-font-mono);
    font-variant-numeric: tabular-nums;
}

/* D2 for table figures without touching any page (QA, HB-25680): body cells start their stack with
   PG Figures (fonts.css), JetBrains Mono limited to digits and . , %, so amounts, ids, counts and dates
   draw in Mono while the words around them stay Inter. MudText and links inside a cell set their own
   family, so they get the same stack. Headers, chips, buttons and inputs are left alone. */
html[data-theme] .mud-table-body .mud-table-cell,
html[data-theme] .mud-table-body .mud-table-cell :is(.mud-typography, .mud-link),
html[data-theme] .mud-simple-table tbody td {
    font-family: 'PG Figures', var(--pg-font-sans);
    font-variant-numeric: tabular-nums;
}

/* The gold theme is gated on admin_theme (HB-25795; it used to ride
   enable_new_admin_home_page, which still picks NavMenuGrouped in LoggedInLayout.razor).
   With it off nothing stamps data-theme, MudBlazor stays on its stock palette, and its
   Background is white - not the #f5f5f5 main forced. Keep main's grey for that path only.

   No !important, unlike main: this selector is (0,1,2) and already out-ranks MudBlazor's
   body rule at (0,0,1), and leaving it off is what keeps the themed path free to paint its
   own background. For this to match at all, _Layout.cshtml must not emit data-theme when
   the flag is off - see the note there about Razor and data-* attributes. */
html:not([data-theme]) body {
    background-color: #f5f5f5;
}

/* ----- Brand constants (gold theme) ---------------------------------------
   HB-25795: the theme's values come from PropGenie Preview v3 through tokens.css, which
   shell/generate.mjs writes from shell/tokens.json (light on :root, dark on
   html[data-theme="dark"], every name prefixed --pg-). _Layout.cshtml loads it before this
   file. The --pa-* names below are kept because ~200 rules here read them; each is now an
   alias of a --pg-* token, not a hand-set colour. Change a value in shell/tokens.json, never
   here. An alias is resolved on <html>, where tokens.css flips the --pg-* values per mode, so
   most --pa-* need no dark copy of their own.

   HB-25293: the client, PropAccount, rejected the Preview's light-mode golden-brown (#8C6413
   and its rgba(176,127,34,...) washes) and chose its own icon golds. Those client golds are
   the tokens themselves now (shell/tokens.json: the light --pg-gold, --pg-gold-icon,
   --pg-gold-icon-soft, --pg-brand-icon and the light washes), shared with Marketing, so
   nothing here is hand-set for them. AdminThemeBrandGoldTest still bans the rejected shades.

   NAME MAP - ours on the left, the token on the right.

     --pa-gold             (hand-set)          #F2CD7A both - the fill gold, the gradient's middle stop
     --pa-gold-deep        --pg-gold-deep      #CD9650 both - the gradient's dark stop
     --pa-gold-dim         (hand-set)          #8C7643 both - the home hero CTA's hairline, no Preview equivalent
     --pa-on-gold          --pg-on-gold        #1B1B3E both - navy ink on the gold
     --pa-grad-gold        --pg-grad-gold      135deg #FFDA72 -> #F2CD7A -> #CD9650
     --pa-gold-fg          --pg-gold           #7E683C light / #F2CD7A dark - the gold that may be text
     --pa-gold-ic          --pg-gold-icon      #A0844C light / #F2CD7A dark - icon glyphs, boundaries
     --pa-gold-ic-soft     --pg-gold-icon-soft #A0844C light / gold at .55 dark
     --pa-gold-wash        --pg-gold-wash
     --pa-gold-border      --pg-line-gold
     --pa-nav-active-wash  --pg-grad-nav-active
     --pa-brand-icon       --pg-brand-icon     #FFC666 light / #FED871 dark: sidebar icons, Home tile icons and arrows
     --pa-border-soft      --pg-line
     --pa-card             --pg-grad-surface
     --pa-card-flat        --pg-flat
     --pa-sidebar-bg       --pg-grad-sidebar
     --pa-nav-active-text  --pg-text
     --pa-radius           --pg-radius         14px
     --pa-radius-sm        --pg-radius-sm      10px
     --pa-app-glow         (hand-set)          the Preview's --app-bg radials, minus the flat colour under them
     --pa-shadow           (hand-set)          the home tiles only; MudBlazor cards are flat (HB-25796, skin-propgenie.css)

   The Preview's text colours are NOT mirrored here: they are the palette's TextPrimary /
   TextSecondary / TextDisabled, so the rules below use --mud-palette-text-*.

   Two light golds, named by ROLE and not by shade, and they are not interchangeable:
   --pa-gold-fg is the gold allowed to BE text (5.34:1 on white) and --pa-gold-ic is the gold
   for icon glyphs and UI boundaries (3.56:1 - clears WCAG 1.4.11's 3:1 for a non-text
   indicator, fails the 4.5:1 body-text bar). The fill gold (--pa-gold) is what dark ink sits
   on. In dark mode all three collapse onto the Preview's gold, legible as ink on #07101D.

   The --mud-palette-* variables are emitted by MudThemeProvider from
   AdminWeb/Theme/AdminTheme.cs and must never be declared in this file. */
:root {
    /* = Tokens.Dark.Gold. tokens.css has no mode-independent fill gold (its light --pg-gold is
       the text gold), so this one is spelled out; AdminThemeBrandGoldTest keeps it equal. */
    --pa-gold: #F2CD7A;
    --pa-gold-deep: var(--pg-gold-deep);
    --pa-gold-dim: #8C7643;
    --pa-on-gold: var(--pg-on-gold);
    --pa-grad-gold: var(--pg-grad-gold);
    --pa-radius: var(--pg-radius);
    --pa-radius-sm: var(--pg-radius-sm);

    /* Mode-dependent aliases: tokens.css flips the --pg-* side, so these need no dark copy.
       The dark block below re-values only what is still hand-set. */
    /* HB-25293: the middle stop of the client's gold gradient (#FFDA72 / #FFC666 / #94763A);
       dark keeps the brand sheet's Yellow. The client's call. */
    --pa-brand-icon: var(--pg-brand-icon);
    /* HB-25293: the client-approved light golds, in place of the Preview's #8C6413. */
    --pa-gold-fg: var(--pg-gold);
    --pa-gold-ic: var(--pg-gold-icon);
    /* DELIBERATE DEVIATION from a soft (.62 alpha) step - do not add one.
       "Soft" on a DARK ground means receding toward the ground and still reading; on the
       white drawer it means fading INTO it, and .62 composites to about 2.1:1, under 1.4.11's
       3:1. The hue tops out at 3.56:1 even at alpha 1, so no alpha rescues it. In light mode
       the resting glyph is therefore the full icon gold (the light --pg-gold-icon-soft). Dark
       keeps the soft step. The sidebar's own glyphs read --pa-brand-icon; the search glyph,
       the empty state and the scrollbar still read this token. */
    --pa-gold-ic-soft: var(--pg-gold-icon-soft);
    /* HB-25293: washes on the client's icon gold, not the Preview's rgba(176,127,34,...). */
    --pa-gold-wash: var(--pg-gold-wash);
    --pa-gold-border: var(--pg-line-gold);
    --pa-nav-active-wash: var(--pg-grad-nav-active);
    --pa-border-soft: var(--pg-line);
    --pa-card: var(--pg-grad-surface);
    --pa-card-flat: var(--pg-flat);
    --pa-sidebar-bg: var(--pg-grad-sidebar);
    --pa-nav-active-text: var(--pg-text);
    --pa-app-glow: radial-gradient(1200px 600px at 10% -10%, rgba(242, 205, 122, .30), transparent 62%),
                   radial-gradient(900px 500px at 110% 10%, rgba(99, 95, 234, .10), transparent 60%);
    --pa-shadow: 0 18px 40px -24px rgba(85, 70, 41, .35);
}

/* Classic (admin_theme unset or classic: nothing stamps data-theme) keeps the values the --pa-*
   names had before HB-25795 re-pointed them at the Preview tokens. Some rules read --pa-*
   without the data-theme gate - HB-25831's pre-sale pages (.pa-ov, .pa-bk, .pa-hc, ...) and
   HB-25685's /activate (.pa-act) - and they must look on classic exactly as they did on
   unified-dashboard. Only the names whose value moved are listed; every other --pa-* resolves
   to the same colour either way. (0,1,1) beats :root's (0,1,0); themed builds never match. */
html:not([data-theme]) {
    --pa-gold: #F3D27C;
    --pa-gold-deep: #A0844C;
    --pa-on-gold: #000000;
    --pa-grad-gold: linear-gradient(270deg, var(--pa-gold) 0%, var(--pa-gold-deep) 100%);
    --pa-app-glow: radial-gradient(1200px 600px at 10% -10%, rgba(243, 210, 124, .30), transparent 62%),
                   radial-gradient(900px 500px at 110% 10%, rgba(99, 95, 234, .10), transparent 60%);
}

html[data-theme="dark"] {
    --pa-app-glow: radial-gradient(1200px 600px at 10% -10%, rgba(242, 205, 122, .07), transparent 60%),
                   radial-gradient(900px 500px at 110% 10%, rgba(99, 95, 234, .09), transparent 60%);
    --pa-shadow: 0 18px 40px -22px rgba(242, 205, 122, .25);
    /* First-paint floor, and the one place a raw palette hex belongs in this file:
       _Layout.cshtml stamps data-theme server-side, but MudThemeProvider's
       --mud-palette-* style element does not exist until the circuit is up, so
       without this the page flashes white before Blazor connects. */
    background-color: #07101D;
    /* Native chrome follows the mode: scrollbars, and the five raw <textarea> elements in the
       admin that carry no background of their own and would otherwise stay white boxes in a dark
       page. MudBlazor's own inputs are unaffected - it already sets color-scheme on .mud-input
       from --mud-native-html-color-scheme - and AdminWeb has no raw select/date/number/checkbox
       controls for this to reach. */
    color-scheme: dark;
}

/* Light mode gets the same floor for the same reason - the previous palette's
   Background was a cream that read as "white enough" unlit, and #F4F5F9 does not. */
html[data-theme="light"] {
    background-color: #F4F5F9;
    color-scheme: light;
}

/* Belt and braces for the certificate and email-preview iframes: their documents did not inherit
   the scheme in testing, but a preview that renders dark-on-dark would be unreadable and this
   costs one declaration. */
html[data-theme] iframe {
    color-scheme: light;
    /* color-scheme on its own is not enough, and this is the second half of the same fix. An embedded
       document that declares no background of its own keeps a TRANSPARENT canvas and composites over
       the parent, so in dark mode the #07101D ground shows through while the document's default ink
       stays black - invisible. The trigger QA hit is EmailController's unpopulated-template
       placeholder (Controllers/EmailController.cs:33 and :47), which returns a bare <h1> fragment
       with no document around it; a populated template is unaffected when its HTML carries a <body>
       background of its own, which is why the report reads "only when no template is populated".
       White is the correct floor for both previews regardless of mode - a certificate and an email
       are documents that get printed or read on white. */
    background-color: #FFFFFF;
}

/* ----- Scrollbars ------------------------------------------------------------
   TWO BLOCKS THAT MUST NEVER MEET, and the usual advice about them is backwards.
   Measured in Chrome 152/Windows: default gutter 15px; ::-webkit-scrollbar{width:8px} alone gives
   8px; scrollbar-width:thin alone gives 10px; BOTH together give 10px, in either source order.
   ANY non-initial value of scrollbar-width OR scrollbar-color switches the element off the webkit
   path entirely - and scrollbar-color INHERITS, so a single declaration on <html> would silently
   kill every ::-webkit-scrollbar rule in the document, including MudBlazor's own textarea one.
   Hence the @supports fence: selector(::-webkit-scrollbar) is true in Chromium and false in
   Firefox, and an engine too old to parse selector() drops the block and falls through to the
   webkit path, which is the safe direction. DO NOT "tidy" the two blocks together.

   WIDTH IS TWO DECLARATIONS, NOT ONE. MudBlazor hard-codes .scroll-locked{padding-right:8px} onto
   <body> whenever a dialog or popover opens, to stand in for the scrollbar it has just hidden.
   That number is theirs and is not derived from ours, so any width other than 8px has to restate
   it in the .scroll-locked rule below - otherwise the compensation no longer matches the gutter it
   compensates for and the page shifts by the difference on every open. Change the two together.
   Verified at 4px: content width identical with and without .scroll-locked applied.

   --pa-gold-ic-soft resting, --pa-gold-fg on hover: one declaration each, correct in both modes
   with no dark override, and role-correct - a thumb is a boundary, so it takes the icon gold, not
   the text gold. NEVER alpha the light thumb: --pa-gold-ic at 70% over the page background is
   2.21:1, under the 3:1 a boundary needs, and the hue tops out at 3.56:1 even at full opacity.
   Subtlety in light mode comes from the width and the transparent track - which is also what keeps
   the thumb compositing over the real surface, and what those contrast numbers assume. */

/* THIS RESET IS LOAD-BEARING - without it nothing below has any effect at all.
   Elsewhere the admin ships a component that renders, into <body>, a style block ending in
   `html, body * { scrollbar-color: #c4c4c4 transparent; scrollbar-width: thin; }`. Per the note
   above, ANY non-initial value of either property takes that element off the ::-webkit-scrollbar
   implementation - so that one declaration disables every webkit rule in the document, its own
   included, and every scroller falls back to a 10px grey native bar.
   It is not a specificity fight we can win by out-ranking the thumb colour; the whole webkit path
   is switched off. Resetting the two properties to `auto` with higher specificity is what hands
   it back. Verified on staging: descendant scroller gutter 10px -> 8px with this in place.
   `html, body *` is (0,0,2), so `html[data-theme] body *` at (0,1,2) beats it. */
html[data-theme],
html[data-theme] body * {
    scrollbar-color: auto;
    scrollbar-width: auto;
}

html[data-theme] ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

html[data-theme] ::-webkit-scrollbar-track {
    background: transparent;
}

/* Radius is half the width, which keeps the thumb a pill rather than a rounded bar. */
html[data-theme] ::-webkit-scrollbar-thumb {
    background: var(--pa-gold-ic-soft);
    border-radius: 2px;
}

html[data-theme] ::-webkit-scrollbar-thumb:hover {
    background: var(--pa-gold-fg);
}

html[data-theme] ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Holds MudBlazor's scroll-lock compensation equal to the width above - see the WIDTH note.
   (0,2,1) beats its own (0,1,0), so no !important is needed. The Firefox block restates this a
   third time with Firefox's own thin-gutter value, and wins there on source order. */
html[data-theme] .scroll-locked,
html[data-theme] .scroll-locked .mud-layout .mud-appbar,
html[data-theme] .scroll-locked .mud-layout .mud-main-content .mud-scroll-to-top {
    padding-right: 4px;
}

@supports not selector(::-webkit-scrollbar) {
    /* Firefox has no ::-webkit-scrollbar at all, so here the standard properties are the only
       lever and the reset above has to be put back.

       Both selectors are repeated verbatim from that reset so this matches its specificity exactly
       and wins on source order alone. The root is listed SEPARATELY rather than relying on the
       descendant selector for two reasons: `body *` cannot match <html>, and only the ROOT's
       scrollbar-width propagates to the viewport - miss it and the page scrollbar stays ~17px
       while the compensation below assumes 11px, under-padding every dialog open by ~6px. */
    html[data-theme],
    html[data-theme] body * {
        scrollbar-color: var(--pa-gold-ic-soft) transparent;
        scrollbar-width: thin;
    }

    /* scrollbar-width:thin drops Firefox's real gutter from ~17px to ~11px, which turns
       MudBlazor's currently-correct compensation into a ~6px OVER-pad. (0,2,1) beats its (0,1,0),
       so no !important is needed. */
    html[data-theme] .scroll-locked,
    html[data-theme] .scroll-locked .mud-layout .mud-appbar,
    html[data-theme] .scroll-locked .mud-layout .mud-main-content .mud-scroll-to-top {
        padding-right: 11px;
    }
}

/* The mockup's --app-bg is two radial glows over a flat ground. The ground is the
   palette's Background, which MudBlazor already paints as body's background-COLOR,
   so only the glows live here and they layer over it as body's background-IMAGE.
   Fixed attachment because they are lighting on the viewport, not on the document -
   scrolling a long grid past them would otherwise smear them.

   They have to sit on body rather than html: the two rules above give html a
   background-color, which stops body's background propagating to the canvas, and a
   glow on html would then be painted over by body's own opaque colour. The cost of
   that is that body's BOX, not the viewport, is the painting area - hence
   min-height, so a short page still gets lit to the bottom of the screen. */
html[data-theme] body {
    background-image: var(--pa-app-glow);
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0077cc;
}

/* #0077cc is only 4.10:1 on the dark page background, so links fall back to the
   palette accent (champagne, 12.09:1) there. Light mode keeps the old blue. */
html[data-theme="dark"] a,
html[data-theme="dark"] .btn-link {
    color: var(--mud-palette-primary);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* The ink is explicit because the plate is not: `lightyellow` is fixed while the
   inherited body colour follows the palette, so in dark mode this banner was white
   on pale yellow (1.01:1) - an error notice nobody could read. */
#blazor-error-ui {
    background: lightyellow;
    color: #1B1B3E;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;   
}

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


.search-bar {
    background-color: rgb(255,255,255,.15)
}

.custom-search .mud-input {
    height: 42px !important;
}

.custom-search.mud-input-control {
    background-color: rgba(255,255,255,.15);
    margin-bottom: 5px;
    height: 42px;
    border-radius: var(--mud-default-borderradius);
    color: white;
}

    .custom-search.mud-input-control .mud-input-root {
        color: white;
    }

    .custom-search.mud-input-control .mud-icon-default {
        color:white;
    }

/* ----- Initial page loader (shown until Blazor circuit is ready) ----- */
#initial-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    z-index: 99999;
    transition: opacity 0.25s ease-out;
}

#initial-loader.app-loaded {
    opacity: 0;
    pointer-events: none;
}

#initial-loader .app-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0,0,0,.08);
    border-top-color: #1b6ec2;
    border-radius: 50%;
    animation: appLoaderSpin .8s linear infinite;
}

#initial-loader .app-loading-text {
    margin-top: 16px;
    color: rgba(0,0,0,.55);
    font-size: 14px;
    letter-spacing: 0.02em;
}

@keyframes appLoaderSpin { to { transform: rotate(360deg); } }

/* The loader paints before Blazor connects, so --mud-palette-* does not exist yet
   and these have to be literals. The values are the dark Background, Primary and
   TextSecondary tokens (Tokens.Dark.Bg / Gold / Muted). */
html[data-theme="dark"] #initial-loader {
    background: #07101D;
}

html[data-theme="dark"] #initial-loader .app-spinner {
    border-color: rgba(255,255,255,.12);
    border-top-color: #F2CD7A;
}

html[data-theme="dark"] #initial-loader .app-loading-text {
    color: #A3A8BA;
}

/* HB-25680 demo feedback: with admin_unification_ui on, a signed-in page boots into the shell's own frame instead
   of a centred spinner (_Layout.cshtml, .pg-boot), so a hop from Marketing reads as the content loading inside a
   frame that stayed put. The sizes and colours are the --pgs-* ones the real sidebar and top bar use (the loader
   carries .pg-shell for them); only the rows are placeholders. Marketing's index.html draws the same frame. */
#initial-loader.pg-boot {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--pgs-bg);
}

.pg-boot-side {
    width: var(--pgs-side-width);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--pgs-side-pad-y) var(--pgs-side-pad-x);
    background: var(--pgs-sidebar);
    border-right: 1px solid var(--pgs-line);
}

.pg-boot-row {
    display: block;
    height: 34px;
    position: relative;
}

.pg-boot-row::before {
    content: "";
    position: absolute;
    top: 12px;
    left: var(--pgs-row-pad-x);
    width: 62%;
    height: 10px;
    border-radius: 5px;
    background: var(--pgs-line);
}

.pg-boot-row:nth-child(3n)::before { width: 48%; }
.pg-boot-row:nth-child(3n + 1)::before { width: 70%; }

.pg-boot-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* No bottom line: the path to launch strip under it draws the shell's (HB-26052). */
.pg-boot-top {
    height: var(--pgs-topbar-height);
    flex: none;
    background: var(--pgs-panel);
}

.pg-boot-content {
    flex: 1;
    display: grid;
    place-items: center;
}

/* Below 1024px the real sidebar is an off-canvas drawer (pg-shell.js), so the frame is the top bar alone. */
@media (max-width: 1023.98px) {
    .pg-boot-side { display: none; }
}

/* ----- App chrome: top bar + drawer -----------------------------------------
   Everything here is gated on html[data-theme], which _Layout.cshtml only stamps
   when enable_new_admin_home_page is on, so a flag-off instance keeps stock
   MudBlazor chrome untouched.

   The load-bearing change in this pass: in light mode the app bar and drawer are
   WHITE, not navy. AppbarBackground and DrawerBackground carry the colour from the
   palette; what they cannot carry is a gradient or a blur, which is what is left
   below. */
html[data-theme] .mud-appbar {
    /* --topbar-bg is translucent by design, so the bar needs the blur or the page
       scrolls through it as a smear. */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* The mockup draws the bar's bottom edge with a hairline instead of a drop
       shadow, and MudAppBar is set to Elevation=25 in LoggedInLayout.razor - a
       shadow tuned for a navy bar that reads as a dark smudge under a white one. */
    box-shadow: none;
    border-bottom: 1px solid var(--pa-border-soft);
}

/* --sidebar-bg. background-IMAGE over the palette's flat drawer colour, so a
   browser that drops the gradient still lands on the right top stop. */
html[data-theme] .mud-drawer {
    background-image: var(--pa-sidebar-bg);
    /* Same reason the app bar above drops its shadow, and the same MudBlazor knob:
       MudDrawer is set to Elevation=25 in LoggedInLayout.razor, whose
       --mud-elevation-25 is one array shared by both modes and was tuned for a navy
       drawer. Against a white drawer on a #F4F5F9 ground it is a dark smear down the
       page. The mockup's sidebar (line 154) draws its edge with a hairline only. */
    box-shadow: none;
    border-right: 1px solid var(--pa-border-soft);
}

/* ----- Global search (plain-input replacement for MudAutocomplete) ----- */
.global-search-wrap {
    position: relative;
    width: 783px;
    max-width: 60vw;
    margin-bottom: 5px;
}

.global-search-input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 36px 0 36px;
    background-color: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--mud-default-borderradius);
    color: white;
    font: inherit;
    outline: none;
}

.global-search-input::placeholder {
    color: rgba(255,255,255,.75);
}

.global-search-input:focus {
    border-color: rgba(255,255,255,.6);
    background-color: rgba(255,255,255,.22);
}

.global-search-icon,
.global-search-spinner {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: white;
    pointer-events: none;
    width: 18px;
    height: 18px;
}

.global-search-spinner {
    display: none;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: white;
    border-radius: 50%;
    box-sizing: border-box;
    animation: gsSpin .8s linear infinite;
}

.global-search-wrap.is-loading .global-search-icon { display: none; }
.global-search-wrap.is-loading .global-search-spinner { display: inline-block; }

@keyframes gsSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* The eight rules above are the ORIGINAL dark-app-bar styling and they stay as the
   flag-off path: with no data-theme the bar is stock MudBlazor's violet Primary, so
   white-on-translucent-white is right there.

   With the flag on it is wrong in light mode - the bar is now WHITE, and
   rgba(255,255,255,.15) on white with white ink and a white-ish placeholder is an
   invisible control. This block re-points the field to the mockup's .topbar .search
   (lines 217-224): --card-flat plate, --border-soft hairline, --radius-sm corners,
   --text ink, --text-dim placeholder, --gold-ic-soft glyph, --border-gold on focus. */
/* LinesInputs rather than the mockup's --border-soft: the plate is only 1.07:1
   against the white bar, so this hairline is the control's ONLY boundary and has to
   clear the 3:1 of WCAG 1.4.11 on its own. --border-soft measures 1.23:1; LinesInputs
   is 3.37:1 light / 3.79:1 dark and already exists in the palette for this exact job. */
html[data-theme] .global-search-input {
    background-color: var(--pa-card-flat);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--pa-radius-sm);
    color: var(--mud-palette-text-primary);
}

/* text-secondary, not text-disabled: this placeholder is the field's only accessible
   name (the input has no label), so it is enabled content and owes 4.5:1 - disabled
   would be 2.89:1 and exempt from nothing. */
html[data-theme] .global-search-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

/* Still needed on plain :focus - the ungated rule above swaps the plate to
   rgba(255,255,255,.24), which is the dark-bar behaviour and goes white-on-white here. */
html[data-theme] .global-search-input:focus {
    background-color: var(--pa-card-flat);
    border-color: var(--pa-gold-ic);
}

/* A real ring, not a border-colour nudge. The ungated block kills the outline for the
   flag-off dark bar; on the white bar the mockup's border swap moves the control by
   1.13:1, which is invisible - so focus has to be re-stated here. */
html[data-theme] .global-search-input:focus-visible {
    outline: 2px solid var(--pa-gold-ic);
    outline-offset: 2px;
}

html[data-theme] .global-search-icon {
    color: var(--pa-gold-ic-soft);
}

html[data-theme] .global-search-spinner {
    border-color: var(--pa-border-soft);
    border-top-color: var(--pa-gold-ic);
}

/* Hand-rolled popover, so it gets none of MudPopover's theming for free: every
   colour below was a light-only literal and is now the palette equivalent. */
.global-search-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-8);
    max-height: 50vh;
    overflow-y: auto;
    z-index: 1300;
}

.global-search-dropdown .gs-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.92rem;
}

.global-search-dropdown .gs-item:last-child { border-bottom: none; }

.global-search-dropdown .gs-item:hover,
.global-search-dropdown .gs-item.gs-active {
    background-color: var(--mud-palette-action-default-hover);
}

.global-search-dropdown .gs-empty {
    padding: 10px 14px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    font-size: 0.9rem;
}

/* The panel beneath the field follows it: same corner radius, and an edge of its
   own. It needs the edge in BOTH modes now - the panel is Surface white and it
   drops out of a white app bar onto a #F4F5F9 ground, so the 1-in-25 luminance
   step is all that separates it. */
html[data-theme] .global-search-dropdown {
    border: 1px solid var(--pa-border-soft);
    border-radius: var(--pa-radius-sm);
}

/* LANDMINE B in miniature: --mud-elevation-* is one array shared by both modes,
   so the drop shadow above is invisible against a dark page. Dark mode leans
   entirely on the edge, so it gets the stronger INPUT line rather than
   --pa-border-soft (rgba(255,255,255,.08)), which is a between-rows hairline and
   reads as nothing as a floating panel's boundary. */
html[data-theme="dark"] .global-search-dropdown {
    border-color: var(--mud-palette-lines-inputs);
}

.mud-table-container {
    min-height: 0;
    max-height: 75vh !important;
}

.mud-main-content {
}

.mud-tab {
    text-transform: none !important;
}

.justify-content-center {
    justify-content: center;
}

.menu-label-count
{
    float:right;
    font-weight: bold;
}

.red-button
{
    background-color: #B40000;
    color: white;
}

.w-full {
    width: 100%;
}

.max-w-full {
    max-width: 100%;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.gap-2 {
    gap: 0.5rem;
}

.tooltip-custom .mud-popover {
    max-width: 300px;
    text-align: left;
    padding: 8px; 
    white-space: normal; 
    word-wrap: break-word; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
}

 .mud-tab-slider.mud-tab-slider-horizontal {
     height: 0;
 }
 
.mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}
/* Was indigo-on-#f5f5f5, i.e. invisible in dark mode. The detail row of six
   discount-code grids, so it has to follow the palette. */
.expanded-row {
    border-left: 4px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-background-gray);
}

/* HB-25293 - every filled Primary button is the brand CTA, in both modes. HB-25795 moved it onto
   PropGenie Preview v3's .btn-gold: the 135deg three-stop --pg-grad-gold with navy --pg-on-gold
   ink (#1B1B3E, no longer black) at 13.5px / 650. A MudTheme slot cannot carry this. Light Primary is also the
   admin's link, tab and focus ink, so it has to stay a gold that reads as TEXT, and a
   gradient is not a colour anyway.
   background-IMAGE, not the shorthand, so MudBlazor's background-color stays underneath as
   the fallback. The gradient also hides MudBlazor's hover, focus and active darkening, which
   is all background-color, hence the hover and focus steps below. Skipped while disabled, so
   MudBlazor's grey plate still reads as unavailable. Gated on data-theme, so a flag-off
   instance keeps stock MudBlazor. */
html[data-theme] .mud-button-filled.mud-button-filled-primary:not(:disabled):not([disabled]) {
    background-image: var(--pa-grad-gold);
    color: var(--pa-on-gold);
    --mud-ripple-color: var(--pa-on-gold);
    font-size: 13.5px;
    font-weight: 650;
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme] .mud-button-filled.mud-button-filled-primary:not(:disabled):not([disabled]):hover {
        filter: brightness(1.05);
    }
}

/* Without this a keyboard user gets no focus indicator at all - see above. --pa-gold-fg
   because the ring sits on the page, not on the button: 4.90:1 on the light ground,
   13.0:1 on the dark one. */
html[data-theme] .mud-button-filled.mud-button-filled-primary:not(:disabled):not([disabled]):focus-visible {
    outline: 2px solid var(--pa-gold-fg);
    outline-offset: 2px;
}

/* CustomToolTip sets its info glyph to a peach (#FFE0B2B3, inline on the trigger span) that
   was chosen for the dark fill these buttons used to have. On the gold it is 1.1:1. Styling
   the svg beats the colour it would inherit from that inline style without !important, and
   leaves the shared C# constant - and every flag-off button - alone. The navy --pa-on-gold
   ink at the icon's own .8 opacity still clears 4.5:1 on the gradient's dark stop. Disabled
   buttons are skipped like the gradient is: they keep MudBlazor's grey plate, where dark ink
   would be the loudest thing on the button. */
html[data-theme] .mud-button-filled.mud-button-filled-primary:not(:disabled):not([disabled]) .help-tooltip-trigger .mud-icon-root {
    color: var(--pa-on-gold);
}

.mud-list-item.no-checkbox .mud-list-item-icon {
    display: none;
}

#account-status-report .mud-table-head .header-centered th {
    text-align: center;
}

.no-interaction-item {
    cursor: text;
}

.copy-zone,
.copy-zone * {
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text;
}


.json-placeholder textarea::placeholder {
    white-space: pre-wrap;
    font-family: monospace;
}

.mud-tooltip.custom-tooltip-wrapper {
    background-color: #1e2235 !important;
    color: #e8eaf2 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    z-index: 99999 !important;
}

.mud-tooltip.custom-tooltip-wrapper.mud-tooltip-arrow::after {
    border-top-color: #1e2235 !important;
}

.custom-tooltip-content {
    max-width: 220px;
    overflow-y: auto;
    padding: 9px 12px;
    color: #e8eaf2;
    background: transparent;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 400;
    white-space: normal;
    letter-spacing: 0;
    text-align: left;
    border-radius: 6px;
}

.custom-tooltip-content-wide {
    max-width: 550px;
}

.custom-tooltip-root {
    width: 100% !important;
}

.help-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    vertical-align: middle;
}

.help-tooltip-icon {    
    font-size: 18px !important;
    opacity: 0.8;
}

.help-tooltip-icon:hover {
    opacity: 1 !important;
}

.ml-1 {
    margin-left: 6px;
}

.mud-nav-link .help-tooltip-trigger {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.mud-nav-link:hover .help-tooltip-trigger {
    opacity: 1;
    visibility: visible;
}

.field-tooltip-right {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    flex: 0 0 auto;
}

.mud-paper.d-flex.align-center > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}


.editor-tooltip-top {
    align-self: flex-start;
    margin-top: 10px;
}

.mud-table-cell .mud-button .help-tooltip-trigger {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}


.mud-table-cell .mud-button:hover .help-tooltip-trigger {
    opacity: 1;
    visibility: visible;
}

.field-tooltip-right-with-validator {
    display: flex;
    align-items: center;
    margin-right: 8px;
    flex: 0 0 auto;
    height: 56px;
    position: relative;
}

.field-tooltip-right-with-validator .mud-popover-cascading-value {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
}

/* Edit Affiliate Form*/
.affiliate-header-item {
    width: var(--affiliate-tier-col, 150px);
    max-width: var(--affiliate-tier-col, 150px);
    min-width: var(--affiliate-tier-col, 150px);
    display: flex;
    align-items: flex-end;
}

.affiliate-header-text {
    width: var(--affiliate-tier-col, 150px);
    min-height: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    line-height: 1.2;
}

/* Dashboard */
.dashboard-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    color: #1f2937;
    border-radius: var(--mud-default-borderradius);
    font-size: 0.875rem;
    font-weight: 500;
}

.dashboard-banner-text {
    flex: 1;
}

.dashboard-banner-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.dashboard-banner-close {
    color: inherit !important;
    margin: -4px -8px -4px 0;
    flex-shrink: 0;
}

.dashboard-banner-link {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
}

.dashboard-greeting {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dashboard-greeting em {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 32px;
}

.dashboard-date {
    white-space: nowrap;
    padding-top: 6px;
    margin-left: 24px;
}

.dashboard-stat-header {
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard-link-sm {
    font-size: 0.8rem;
}

.dashboard-stat-value {
    font-weight: 700;
    margin-top: 2px;
}

.dashboard-stat-sublabel {
    font-size: 0.7rem !important;
    line-height: 1.2;
}

.dashboard-section-title {
    font-weight: 700 !important;
}

.dashboard-studio-branding {
    background: linear-gradient(135deg, #0f766e 0%, #059669 100%) !important;
    color: white !important;
    min-height: 170px;
}

.dashboard-studio-web {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: white !important;
    min-height: 170px;
}

.dashboard-studio-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dashboard-studio-icon {
    font-size: 1.8rem !important;
    color: white !important;
}

.dashboard-studio-name {
    font-weight: 700 !important;
    color: white !important;
}

.dashboard-studio-desc {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 20px;
}

.dashboard-studio-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.dashboard-activity-row {
    gap: 12px;
}

/* --mud-palette-action-hover is not a variable MudBlazor emits, so this rule has
   been dead since it was written. The real name is --mud-palette-action-default-hover. */
.dashboard-activity-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.dashboard-activity-avatar {
    flex-shrink: 0;
}

.dashboard-activity-content {
    flex: 1;
    min-width: 0;
}

.dashboard-activity-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-activity-user {
    white-space: nowrap;
    font-size: 0.72rem !important;
}

.dashboard-skeleton-row {
    gap: 12px;
}

.dashboard-studio-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.dashboard-studio-btn-import {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.75rem !important;
    padding: 0 4px !important;
    min-width: unset !important;
    text-transform: none !important;
}

.dashboard-studio-btn-import:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    text-decoration: underline !important;
}

.genie-import-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    gap: 16px;
}

.genie-import-loading-label {
    font-weight: 500;
}

.genie-import-result {
    white-space: pre-wrap;
    word-break: break-word;
}

.dashboard-stat-card {
    height: 100%;
}

/* Force every tier-grid cell to the same width so headers and data align
   regardless of which optional columns (Revenue Threshold, Multi-Level
   Pass Up, etc.) are visible. */
.affiliate-tier-grid > .mud-grid-item {
    flex: 0 0 var(--affiliate-tier-col, 150px);
    width: var(--affiliate-tier-col, 150px);
    min-width: var(--affiliate-tier-col, 150px);
    max-width: var(--affiliate-tier-col, 150px);
}

/* The tier rows are one wrapping flex container split by MudFlexBreak, so a container narrower than
   the full column set silently pushes the last column onto its own line and knocks the headers out
   of alignment. Reserve exactly the width the columns need (--affiliate-tier-cols is set by the
   component) and scroll the block horizontally when the popup is too narrow to give us that much. */
.affiliate-tier-scroll {
    overflow-x: auto;
    /* Room for the negative margin MudGrid's spacing applies, so the scroll box doesn't clip it. */
    padding-left: 8px;
    margin-left: -8px;
}

.affiliate-tier-grid {
    min-width: calc(var(--affiliate-tier-cols, 0) * var(--affiliate-tier-col, 150px));
}

/* Edit Account popup: nudge help-tooltip icons up 5px (popup only) */
.account-edit-dialog .help-tooltip-trigger {
    vertical-align: middle;
}
.account-edit-dialog .help-tooltip-icon {
    position: relative;
    top: -5px;
}

/* Account Detail page: nudge help-tooltip icons up 5px (page only) */
.account-detail-page .help-tooltip-icon {
    position: relative;
    top: -5px;
}

/* Account Detail action buttons: the page rule above lifts every icon 5px, which is too high inside a button — push button icons 5px back down so they sit centered in the button */
.account-detail-page .mud-button .help-tooltip-icon {
    top: 0;
}

/* Account Detail status-badge (InfoTag) tooltips: pull icon closer to the chip (left + up) */
.account-infotag-tip .help-tooltip-icon {
    position: relative;
    left: -5px;
    top: -6px;
}

/* ============================================================================
   PropGenie tools hub — Branding page (design: propgenie-admin-portal-v3)
   Every selector is scoped under .pg-hub on purpose: the design uses very
   generic class names (.card, .panel, .help, .tools…) that must never leak
   into the rest of the admin.
   ============================================================================ */
.pg-hub {
    --pg-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pg-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    /* --pp is the hub's brand accent, and --pp-line names the lavender that used to
       be hardcoded into the two hover borders further down. These are the ORIGINAL
       violet values and they must stay here: this block is ungated, so it is what a
       flag-off instance renders, and with the gold theme off the rest of the admin
       is still MudBlazor violet - a gold hub would be the only odd page.
       The gold re-point lives in the html[data-theme] block below. */
    --pp: #5C4AE4;
    --pp-soft: #EFEDFD;
    --pp-line: #C9C2F6;
    --ink: #1B2233;
    --ink-2: #41495E;
    --muted: #6B7488;
    --faint: #98A0B3;
    --line: #E6E8EF;
    --line-soft: #F0F2F7;
    --pg-radius: 18px;
    --pg-shadow-sm: 0 1px 2px rgba(27, 34, 51, .04);
    --pg-shadow: 0 14px 36px rgba(27, 34, 51, .10);
    font-family: var(--pg-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    /* No max-width: the MudPaper panels below this grid are full-width, so a cap here
       made the cards read as cramped against the rest of the page. */
    padding-bottom: 8px;
    -webkit-font-smoothing: antialiased;
}

/* The hub's violet is the one colour the stakeholder rejected, so with the gold
   theme on it tracks the gold system instead - otherwise the admin reads as half
   purple. Gated on html[data-theme], which _Layout.cshtml only stamps when
   enable_new_admin_home_page is on, so turning the flag off really does put the
   Branding page back to violet. All three are aliases of tokens that already flip,
   so this covers dark mode too and the dark block below never touches them. */
html[data-theme] .pg-hub {
    --pp: var(--pa-gold-fg);
    --pp-soft: var(--pa-gold-wash);
    --pp-line: var(--pa-gold-border);
}

.pg-hub a {
    color: inherit;
    text-decoration: none;
}

/* one colour family per module — its features carry the same colour */
.pg-hub .fam-web {
    --fam: #2563EB;
    --fa: #EFF5FF;
    --fb: #DCE9FE;
    --fr: #C7DBFD;
    --fg: rgba(37, 99, 235, .26);
    --g1: #4F8CF7;
    --g2: #1D4ED8;
}

.pg-hub .fam-dash {
    --fam: #0E9F6E;
    --fa: #EDFBF4;
    --fb: #D3F5E4;
    --fr: #BCEDD5;
    --fg: rgba(14, 159, 110, .24);
    --g1: #34C48C;
    --g2: #07875C;
}

.pg-hub .fam-brand {
    --fam: #7C3AED;
    --fa: #F5F2FF;
    --fb: #E9E2FE;
    --fr: #DCD2FC;
    --fg: rgba(124, 58, 237, .26);
    --g1: #A063F5;
    --g2: #6323CE;
}

.pg-hub .fam-mkt {
    --fam: #E11D67;
    --fa: #FEF1F5;
    --fb: #FCDDE8;
    --fr: #FBCEDE;
    --fg: rgba(225, 29, 103, .24);
    --g1: #F5589B;
    --g2: #C71156;
}

/* Amber, and it is the one hue the suite had left: blue, green, violet and rose are
   spoken for, and gold is what a certificate seal is. --fam is used as TEXT in four
   places below, so it is the 700 step (5.0:1 on white) rather than the brighter 600 —
   the gradient carries the brightness instead, where it is decoration. */
.pg-hub .fam-cert {
    --fam: #B45309;
    --fa: #FFFBEB;
    --fb: #FEF3C7;
    --fr: #FDE68A;
    --fg: rgba(180, 83, 9, .24);
    --g1: #F59E0B;
    --g2: #92400E;
}

.pg-hub .phead {
    margin: 0 0 20px;
}

.pg-hub .phead h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.7px;
    color: var(--ink);
}

/* ================= TOOL CARDS ================= */
.pg-hub .tools {
    display: grid;
    /* auto-fit rather than a fixed column count: a card is unreadable below ~260px
       (its title and feature labels start wrapping to three lines), so the row reflows
       on its own at every width and empty tracks collapse when a card is disabled.
       The 420px cap is the point of the max: with 1fr a tenant that has only one
       module enabled got a single card stretched across the whole page. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 420px));
    gap: 18px;
    align-items: stretch;
}

.pg-hub .card {
    border: 1px solid var(--fr);
    border-left: 3px solid var(--fam);
    border-radius: var(--pg-radius);
    background: #fff;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pg-shadow-sm);
    transition: box-shadow .22s, border-color .22s, transform .22s;
}

.pg-hub .card:hover {
    box-shadow: 0 18px 42px var(--fg);
    transform: translateY(-4px);
}

/* The illustration plate matches the artwork's own 264:144 ratio, so a correctly-proportioned
   image fills it edge to edge. Keep new artwork on that ratio: anything else letterboxes against
   the gradient below, which is what made the Web Builder plate look like it had a border. */
.pg-hub .art {
    aspect-ratio: 264/144;
    min-height: 132px;
    flex: 0 0 auto;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(165deg, var(--fb) 0%, var(--fa) 55%, #fff 100%);
    border-bottom: 1px solid var(--fr);
}

.pg-hub .art img,
.pg-hub .art svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* contain, not cover: these are illustrations with content out at the edges (globes, orbits),
   so a plate that ever stops matching 264:144 should letterbox rather than silently crop the
   artwork. It is also what the SVG-art cards do via preserveAspectRatio, so both kinds of plate
   behave the same. */
.pg-hub .art img {
    object-fit: contain;
}

.pg-hub .card-body {
    padding: 16px 17px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pg-hub .card-body h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 780;
    letter-spacing: -.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pg-hub .kicker {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 6px;
}

.pg-hub .card-body p {
    margin: 11px 0 0;
    color: var(--muted);
    font-size: 12.6px;
    line-height: 1.55;
}

/* capability bullets */
.pg-hub .bul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.pg-hub .bul li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.2px;
    color: var(--ink-2);
    margin-bottom: 9px;
}

.pg-hub .bul li .bi {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--fa);
    border: 1px solid var(--fr);
    display: grid;
    place-items: center;
    margin-top: 1px;
}

.pg-hub .bul li .bi svg {
    width: 10px;
    height: 10px;
    color: var(--fam);
}

/* features nested under their parent module */
.pg-hub .feats {
    margin-top: 14px;
    /* equal-height feature rows: row 1 is the label, every feature row after it
       stretches to the tallest one so a two-line description doesn't shrink its sibling */
    display: grid;
    grid-template-rows: auto;
    grid-auto-rows: 1fr;
    gap: 8px;
}

.pg-hub .feats-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-2);
    margin-bottom: 1px;
}

.pg-hub .feat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: var(--fa);
    border: 1px solid var(--fr);
    cursor: pointer;
    transition: .15s;
}

.pg-hub .feat:hover {
    background: var(--fb);
}

.pg-hub .feat .fi {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--fr);
    box-shadow: 0 2px 6px var(--fg);
}

.pg-hub .feat .fi svg {
    width: 15px;
    height: 15px;
    color: var(--fam);
}

.pg-hub .feat .fn {
    min-width: 0;
    flex: 1;
}

.pg-hub .feat .fn b {
    display: block;
    font-size: 12.3px;
    font-weight: 680;
    letter-spacing: -.1px;
}

.pg-hub .feat .fn span {
    display: block;
    font-size: 10.8px;
    color: var(--muted);
    margin-top: 1px;
}

.pg-hub .feat .fgo {
    flex: 0 0 auto;
    color: var(--fam);
    display: grid;
    place-items: center;
}

.pg-hub .feat .fgo svg {
    width: 14px;
    height: 14px;
}

/* footer */
.pg-hub .card-foot {
    /* padding-top keeps the button off the card body */
    padding: 14px 17px 16px;
    margin-top: auto;
}

.pg-hub .open-row {
    display: flex;
    /* five columns on a wide screen leave a card ~195px wide, which is narrower than
       "Open Web Builder" + "Import from Genie" side by side. Wrap to a stacked pair
       rather than let nowrap clip the primary label. */
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pg-hub .btn-open {
    flex: 1 1 120px;
    min-width: 0;
    font-family: var(--pg-sans);
    font-weight: 680;
    font-size: 12px;
    letter-spacing: -.1px;
    white-space: nowrap;
    text-align: center;
    border: 0;
    border-radius: 11px;
    padding: 11px 8px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
    box-shadow: 0 4px 12px var(--fg), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: box-shadow .16s, transform .16s, filter .16s;
}

.pg-hub a.btn-open {
    display: block;
    color: #fff;
}

.pg-hub .btn-open:hover {
    box-shadow: 0 9px 22px var(--fg), inset 0 1px 0 rgba(255, 255, 255, .3);
    transform: translateY(-1px);
    filter: saturate(1.08);
}

.pg-hub .btn-open:disabled,
.pg-hub .btn-open[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* secondary action next to the primary Open button (e.g. "Import from Genie") */
.pg-hub .btn-ghost {
    flex: 1 1 115px;
    font-family: var(--pg-sans);
    font-weight: 650;
    font-size: 11.5px;
    white-space: nowrap;
    border: 1px solid var(--fr);
    border-radius: 11px;
    padding: 10px 12px;
    background: #fff;
    color: var(--fam);
    cursor: pointer;
    transition: .15s;
}

.pg-hub .btn-ghost:hover {
    background: var(--fa);
}

/* ================= LOWER PANELS ================= */
.pg-hub .lower {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    margin-top: 20px;
    align-items: start;
}

.pg-hub .panel {
    border: 1px solid var(--line);
    border-radius: var(--pg-radius);
    background: #fff;
    box-shadow: var(--pg-shadow-sm);
    overflow: hidden;
}

.pg-hub .panel-head {
    padding: 14px 17px;
    font-weight: 720;
    font-size: 13.5px;
    letter-spacing: -.2px;
    border-bottom: 1px solid var(--line-soft);
}

.pg-hub .act {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 17px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.2px;
}

.pg-hub .act .ad {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.pg-hub .act .an {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
}

.pg-hub .act .at {
    margin-left: auto;
    font-size: 10.8px;
    color: var(--faint);
    white-space: nowrap;
    flex: 0 0 auto;
}

.pg-hub .view-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 17px;
    font-size: 12px;
    font-weight: 680;
    color: var(--pp);
    cursor: pointer;
}

.pg-hub .view-all svg {
    width: 13px;
    height: 13px;
}

.pg-hub .links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.pg-hub .link-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 15px;
    position: relative;
    cursor: pointer;
    box-shadow: var(--pg-shadow-sm);
    transition: .16s;
}

.pg-hub .link-card:hover {
    border-color: var(--pp-line);
    box-shadow: var(--pg-shadow);
    transform: translateY(-2px);
}

.pg-hub .link-card .li {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.pg-hub .link-card .li svg {
    width: 16px;
    height: 16px;
}

.pg-hub .link-card b {
    display: block;
    font-size: 12.8px;
    font-weight: 700;
    margin-top: 12px;
    letter-spacing: -.15px;
}

.pg-hub .link-card span {
    display: block;
    font-size: 11.2px;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.45;
}

.pg-hub .link-card .arw {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--faint);
}

.pg-hub .link-card .arw svg {
    width: 14px;
    height: 14px;
}

.pg-hub .help {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--pg-shadow-sm);
    padding: 16px 17px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.pg-hub .help > div:first-child {
    min-width: 0;
}

.pg-hub .help b {
    display: block;
    font-size: 13.2px;
    font-weight: 720;
}

.pg-hub .help span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 3px;
}

.pg-hub .btn-help {
    margin-top: 11px;
    font-family: var(--pg-sans);
    font-weight: 680;
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 14px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
    transition: .15s;
}

.pg-hub .btn-help:hover {
    border-color: var(--pp-line);
    color: var(--pp);
}

.pg-hub .avs {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.pg-hub .avs i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    margin-left: -11px;
    font-style: normal;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(27, 34, 51, .14);
}

@media (max-width: 1000px) {
    .pg-hub .lower {
        grid-template-columns: 1fr;
    }

    .pg-hub .lower .third {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .pg-hub .links {
        grid-template-columns: 1fr;
    }

    /* Phone: a card is its artwork, its name and the things you can press. The kicker,
       the pitch paragraph and the capability bullets are read-only copy — five cards of
       it stacked is a screenful of scrolling before the first button, so it only appears
       from 561px up. The feature rows stay: they are buttons, and hiding them would be
       the only way to reach the Creative/Content Studio from a phone. */
    .pg-hub .kicker,
    .pg-hub .card-body p,
    .pg-hub .bul,
    .pg-hub .feats-lbl {
        display: none;
    }

    .pg-hub .card-body {
        padding-bottom: 0;
    }

    /* grid-template-rows: auto exists to keep the "Included features" label out of the
       equalised 1fr rows. With the label hidden the first button would inherit that auto
       row and come out shorter than its sibling, so drop the explicit row here. */
    .pg-hub .feats {
        margin-top: 12px;
        grid-template-rows: none;
    }

    /* every button clears the 44px touch target */
    .pg-hub .btn-open,
    .pg-hub .btn-ghost {
        padding-top: 13px;
        padding-bottom: 13px;
    }
}

/* ----------------------------------------------------------------------------
   PropGenie hub - dark mode.
   The 590 rules above are already fully tokenised, so re-pointing the tokens does
   almost all of the work; what follows the token block is the short list of
   places the design hardcoded #fff instead of going through one.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] .pg-hub {
    --ink: rgba(255, 255, 255, .92);
    --ink-2: rgba(255, 255, 255, .78);
    --muted: rgba(255, 255, 255, .62);
    --faint: rgba(255, 255, 255, .48);
    --line: rgba(255, 255, 255, .14);
    --line-soft: rgba(255, 255, 255, .08);
    --pg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
    --pg-shadow: 0 14px 36px rgba(0, 0, 0, .60);
}

/* The five categorical families keep their hues - they are semantic category
   colours, not brand chrome. What changes is only what has to: --fa/--fb/--fr are
   near-white tints that glare on a dark card, so they become low-alpha washes of
   the same hue, and --fam moves from the 600/700 step (picked for 5:1 on white)
   to the 400 step, which clears 6:1 on the dark Surface card. */
html[data-theme="dark"] .pg-hub .fam-web {
    --fam: #7FB0FB;
    --fa: rgba(37, 99, 235, .16);
    --fb: rgba(37, 99, 235, .28);
    --fr: rgba(127, 176, 251, .30);
    --fg: rgba(37, 99, 235, .45);
}

html[data-theme="dark"] .pg-hub .fam-dash {
    --fam: #45D19C;
    --fa: rgba(14, 159, 110, .16);
    --fb: rgba(14, 159, 110, .28);
    --fr: rgba(69, 209, 156, .30);
    --fg: rgba(14, 159, 110, .45);
}

html[data-theme="dark"] .pg-hub .fam-brand {
    --fam: #B69CFC;
    --fa: rgba(124, 58, 237, .18);
    --fb: rgba(124, 58, 237, .30);
    --fr: rgba(182, 156, 252, .30);
    --fg: rgba(124, 58, 237, .45);
}

html[data-theme="dark"] .pg-hub .fam-mkt {
    --fam: #F783B0;
    --fa: rgba(225, 29, 103, .16);
    --fb: rgba(225, 29, 103, .28);
    --fr: rgba(247, 131, 176, .30);
    --fg: rgba(225, 29, 103, .45);
}

html[data-theme="dark"] .pg-hub .fam-cert {
    --fam: #F5C24B;
    --fa: rgba(180, 83, 9, .18);
    --fb: rgba(180, 83, 9, .30);
    --fr: rgba(245, 194, 75, .30);
    --fg: rgba(180, 83, 9, .45);
}

/* The one thing the tokens cannot reach: every plate in this design is
   `background: #fff` rather than a var, so each has to be re-pointed by hand.
   This list must cover ALL of them - a plate left out keeps a white card while
   --ink flips to near-white, i.e. white text on white. There are exactly eight:
   grep this file for `^\.pg-hub` rules declaring a white background and the count
   must match the selectors below. .wallet-cta was the one that got missed, because
   it was added to the page after this block was written. */
html[data-theme="dark"] .pg-hub .card,
html[data-theme="dark"] .pg-hub .panel,
html[data-theme="dark"] .pg-hub .link-card,
html[data-theme="dark"] .pg-hub .help,
html[data-theme="dark"] .pg-hub .btn-ghost,
html[data-theme="dark"] .pg-hub .btn-help,
html[data-theme="dark"] .pg-hub .wallet-cta,
html[data-theme="dark"] .pg-hub .feat .fi {
    background: var(--mud-palette-surface);
}

/* Same gradient, but ending in the card it sits on instead of in white. */
html[data-theme="dark"] .pg-hub .art {
    background: linear-gradient(165deg, var(--fb) 0%, var(--fa) 55%, transparent 100%);
}

/* The avatar stack's separator ring is the card colour, not literally white. */
html[data-theme="dark"] .pg-hub .avs i {
    border-color: var(--mud-palette-surface);
}

/* ============================================================================
   New admin Home page - dashboard hero + launcher tile grid.
   adminhomemockupproptech.html is the approved visual spec for the TILES;
   01-gold-rail.html is the superseded Gold Rail reading of the same layout.

   THE HERO FOLLOWS A DIFFERENT SPEC: adminhomemockuppropgenie1.html, the PropGenie banner. It
   is a dark stage in BOTH modes because the 1600x900 raster at its centre is lit for a dark
   ground, so every colour inside .hero is a literal rather than a mode-flipping token - that is
   the reason for the pinning, not a carve-out from this pass.

   Every selector is scoped under .ah-home on purpose, exactly as .pg-hub above:
   the design uses very generic class names (.grid, .tile, .hero, .empty) that
   must never leak into the other ~85 pages.

   --card-radius is a scoped token rather than a MudTheme override, which would
   re-round every card, input and dialog in the admin.

   The five .dashboard-* classes reused here (.dashboard-greeting,
   .dashboard-greeting em, .dashboard-date, .dashboard-section-title,
   .dashboard-link-sm) are orphans from the deleted Branding page. Their base
   rules still apply; what follows only adds the sizing the mockup pins.
   ============================================================================ */
/* The home page's own token layer, declared on .ah-home exactly as --card-radius
   already was: these are surface treatments for one page, not palette slots, so
   they must not sit on :root where every other page would inherit them.

   The tile tokens alias --pa-* tokens that flip on their own, so the dark
   override below restates only the band - which is all of it, since the banner
   became one raster per mode.

   LANDMINE, and the reason the tiles no longer rest on an elevation at all:
   --mud-elevation-* comes from the single MudTheme.Shadows array and is
   byte-identical in both modes, so a shadow tuned for a white page reads as
   nothing against a dark one. The mockup solves it the way we now do - no resting
   shadow, a --border-soft hairline in both modes, and --pa-shadow (which IS
   per-mode) only on hover. */
.ah-home {
    --card-radius: var(--pa-radius);

    /* ---- HERO BAND ----------------------------------------------------------
       There is one raster per mode now, so the band follows the mode and EVERY colour inside
       .hero is a token declared here at its light value and restated dark below. Nothing in the
       band may be a literal in its own rule: a literal is a colour with only one mode, and the
       failure that produces - text invisible in exactly one of them - is silent.

       --ah-hero-stage is CHANNELS, not a colour. .hero and all four stops of .hero-scrim derive
       from this one value so the band and its scrim can never drift apart. Writing it as a hex or
       an rgb() breaks every rgb(var(--ah-hero-stage) / a) consumer, and custom-property
       substitution fails at computed-value time with NO console error - the band and the scrim
       simply stop painting and the raw art shows through the copy.

       --ah-hero-art is the raster's own backdrop, painted on .hero-bg. The svg is xMaxYMid meet,
       so the art NEVER fills the band: at 1200x500 it covers the right 74%, and under 860px it is
       letterboxed inside a 230px strip with the scrim switched off entirely. Whatever the art does
       not cover shows this colour, so matching it to the file makes art and surround one surface -
       which is what lets the stage be chosen for legibility instead of being pinned to the
       artwork.

       A flat fill can only hide that join if the FILE's outer edge is that same flat colour, and
       neither supplied render was: the dark one's lower-left smoke reached the frame edge at
       #4B4B5B, 59 levels off, which drew a hard vertical line down the right of the letterbox.
       Both files are therefore feathered into their own ground - 6% on the left, which is the edge
       that shows at any width down to 409px, and 2% top and bottom, which are the edges `meet`
       exposes below that. A replacement raster must be re-feathered the same way; sampling one
       edge pixel is what produced the bug, because no edge here has a single colour.

       GOLD IS NOT INK ON THE LIGHT BAND. The light raster's backdrop is a flat mid-grey (#818181)
       and the scrim lifts the copy zone to about #F2F2F5, where --pa-gold-fg measures 4.2-4.5:1 -
       at or under the 4.5:1 body-text bar - and champagne is 1.9:1. Small text in light mode is
       therefore --ah-hero-ink on a gold PLATE. Gold is spent only where it clears its own bar:
       the large accent headline, fills, and boundaries. */
    --ah-hero-stage: 247 247 250;
    --ah-hero-art: #818181;
    /* The WHOLE scrim, not just its alphas: the two modes need different stop POSITIONS, not only
       different opacities, and positions cannot be tokenised one at a time without four more
       tokens that only ever move together.

       The light band has two jobs that pull apart. Under the copy it must be an opaque plate,
       because the art there is mid-grey and anything bleeding through drags the plate down toward
       the ink. Over the genie it must be GONE - he is a render lit for his own ground, and white
       laid over him does not soften him, it desaturates him. There is room for both: the art box
       starts ~28% across a wide band (the svg is xMaxYMid meet, so it is contained and right-
       pinned), .hero-copy ends by ~42%, and the genie's outstretched hand does not begin until
       ~62%. So the plate holds through the copy and is fully clear before the art that matters.

       An earlier revision ran .9 at 52% and .34 at 70% and measurably washed him: 25% white on the
       costume, 32% on the wisp, 44% on the gold ribbon, sampled off a real render.

       Dark keeps the original shape. Its art is near-black, so bleed-through only darkens an
       already-dark ground and costs nothing.

       Stop percentages run along the 95deg gradient LINE, not the band's width, so they are close
       to but not exactly x-positions. Re-measure against a render; do not read them as x. */
    --ah-hero-scrim: linear-gradient(95deg,
        rgb(var(--ah-hero-stage) / 1) 0%,
        rgb(var(--ah-hero-stage) / .97) 26%,
        rgb(var(--ah-hero-stage) / .84) 42%,
        rgb(var(--ah-hero-stage) / .28) 54%,
        transparent 66%);
    --ah-hero-ink: #0E1524;
    --ah-hero-ink-dim: rgba(14, 21, 36, .78);
    /* The headline's gradient. Champagne over the pale band is 1.5:1, so light takes a deep-gold
       pair - 3.55:1 at its bright stop and 4.07:1 at its dark one, against a 30px display face's
       3:1. The bright stop is deepened from --pa-gold-ic rather than being it: that token's
       documented 3.56:1 is measured on WHITE, and this plate is the scrim's #EBEBEE, which costs
       enough to land it on 2.99:1. NOT a re-valued --pa-grad-gold - that token has four other
       consumers, two of them outside this page (the wallet CTA and every filled Primary button). */
    --ah-hero-accent: linear-gradient(135deg, #8C7443, #7E683C);
    --ah-hero-sheen: rgba(160, 132, 76, .07);
    --ah-hero-ready-glow: 0 18px 46px -20px rgba(160, 132, 76, .45);
    /* Ghost CTA = the mockup's .hero .btn-ghost, a 13px bold label owing 4.5:1. Dark puts
       champagne on a white wash; light inverts the roles - dark ink on a GOLD wash, 13.5:1 -
       because no gold in the palette clears 4.5:1 at this size on the lifted band. The edge is
       the SOLID --pa-gold-ic: alpha cannot rescue this hue on a pale ground (see :root), and a
       boundary still owes 3:1. */
    --ah-cta-bg: rgba(160, 132, 76, .14);
    --ah-cta-fg: #0E1524;
    --ah-cta-border: var(--pa-gold-ic);
    --ah-cta-border-hover: var(--pa-gold-fg);
    /* The Marketing Hub placeholder's "Book a call" link, laid over a button drawn into the art. */
    --ah-book-hover: rgba(255, 255, 255, .2);
    --ah-book-ring: #0E1524;

    /* ---- EYEBROW, STEP CHIPS, READINESS BAR ---------------------------------
       Light keeps gold on the eyebrow because it is the band's one brand accent, but only by
       putting it on a near-WHITE plate: --pa-gold-fg is 4.66:1 there and 4.04:1 on the gold wash
       the dark mode uses, so the plate is what buys the pass, not the hue.

       The chips' white-on-translucent-white fills do not merely soften on a pale ground, they
       INVERT - a 6% white lift over a near-white band is no shape at all. Light restates every
       one of them as translucent INK. */
    --ah-eyebrow-fg: var(--pa-gold-fg);
    --ah-eyebrow-bg: rgba(255, 255, 255, .72);
    --ah-eyebrow-line: var(--pa-gold-ic);
    /* Channels, because @keyframes sit outside the cascade: no [data-theme] selector can reach
       ah-pulse, but a var() inside it resolves against the animating element, which .ah-home does
       reach. All three stops must ride this token - the two alpha-0 ones never paint but they set
       what the pulse ramps TOWARD. */
    --ah-pulse-rgb: 160 132 76;
    --ah-step-fg: rgba(14, 21, 36, .80);
    --ah-step-bg: rgba(255, 255, 255, .72);
    --ah-step-line: rgba(16, 24, 40, .28);
    --ah-step-done-fg: #0E1524;
    --ah-step-done-bg: rgba(160, 132, 76, .16);
    --ah-step-done-line: rgba(160, 132, 76, .55);
    --ah-tick-line: rgba(14, 21, 36, .50);
    /* The done tick's disc cancels its own border, so the FILL is the only thing left drawing its
       edge. Champagne over the light done-chip is 1.2:1 and the disc dissolves; the deep-gold pair
       holds 2.8-3.9:1 against it, and carries white at 3.7-5.1:1. */
    --ah-tick-fill: linear-gradient(135deg, #8C7443, #7E683C);
    --ah-tick-ink: #FFFFFF;
    --ah-ready-fg: rgba(14, 21, 36, .76);
    /* A WHITE track, matching the chips beside it, not a dark one: the bar's state is carried by
       filled-vs-unfilled, and a dark track against a deep-gold fill is 2.6:1. Inverting the track
       puts that pair at 3.5:1 without touching the fill. */
    --ah-ready-track: rgba(255, 255, 255, .78);
    --ah-ready-track-line: rgba(16, 24, 40, .22);
    --ah-ready-fill: linear-gradient(135deg, #8C7443, #7E683C);

    /* ---- BANNER OVERLAY -----------------------------------------------------
       The fume is emissive and was lit for near-black. Mid-grey is the worst ground it could
       land on - champagne reads 2.5:1 there and the deep golds read 1.1:1, BELOW champagne,
       because that hue sits at almost exactly the grey's luminance. So light does not darken the
       magic, it brightens it and adds a dark halo to separate it, which is how a glow is drawn
       over a mid tone.

       The four <defs> gradients are deliberately NOT retinted: their ids go document-global the
       moment this renders in the admin shell, so a second set risks url(#id) resolving to the
       wrong one, and champagne over the art still reads. They get opacity instead. */
    --ah-rub-filter: contrast(1.06) saturate(1.12);
    --ah-spark: #4E5E85;
    --ah-spark-op: .42;
    --ah-spark-lit: #FFE9A8;
    --ah-star: #FFF8E4;
    --ah-star-glow: rgba(74, 52, 6, .5);
    --ah-ring: #FFFFFF;
    --ah-halo: drop-shadow(0 0 3px rgba(40, 28, 4, .55));
    --ah-fog-op: .26;
    --ah-fog-op-rub: .44;
    --ah-fog-op-still: .16;
    --ah-billow-op-still: .35;

    /* ---- TILES - the mockup's .tile / .tile-ico, lines 422-437 --------------
       All four alias --pa-* tokens that already flip, which is why the dark block
       below no longer restates them. --ah-card-bg is the mockup's --card gradient
       rather than the flat palette Surface; --ah-tile-chip is its radial gold wash
       over --card-flat. */
    --ah-card-bg: var(--pa-card);
    --ah-card-line: var(--pa-border-soft);
    --ah-card-line-hover: var(--pa-gold-border);
    --ah-tile-chip: radial-gradient(120% 120% at 30% 20%, var(--pa-gold-wash), transparent 70%), var(--pa-card-flat);
    --ah-tile-chip-line: var(--pa-gold-border);
}

/* The band's dark half, and the ONLY place dark is described. Custom properties only: a media
   query adds no specificity, so a layout declaration at this selector's (0,2,1) would outrank the
   860/960px rules at (0,2,0) at every width, which is the same trap the pair at the foot of this
   file already documents.

   Written as the dark OVERRIDE rather than a light one to match :root/html[data-theme="dark"]
   above. html:not([data-theme="dark"]) would be wrong for the light half either way: _Layout.cshtml
   emits themeMode as null with the flag off and a null Razor attribute is omitted entirely, so that
   selector would also match the flag-off document. */
html[data-theme="dark"] .ah-home {
    /* rgb(16,16,32) is propgenie-banner-dark.webp's own backdrop, measured, not chosen. It is NOT
       the old 14 14 26 - that matched the raster this one replaced, and leaving it would have put
       a 2-level step between the band and its own art.

       --ah-hero-art repeats the stage here rather than aliasing it: the two are equal in dark only
       because this raster happens to sit on the same ground the band wants. In light they differ
       by design, which is the case the token exists for. */
    --ah-hero-stage: 16 16 32;
    --ah-hero-art: #101020;
    --ah-hero-scrim: linear-gradient(95deg,
        rgb(var(--ah-hero-stage) / .96) 0%,
        rgb(var(--ah-hero-stage) / .88) 30%,
        rgb(var(--ah-hero-stage) / .5) 52%,
        rgb(var(--ah-hero-stage) / .1) 70%,
        transparent 84%);
    --ah-hero-ink: #FFFFFF;
    --ah-hero-ink-dim: rgba(226, 232, 246, .78);
    --ah-hero-accent: var(--pa-grad-gold);
    --ah-hero-sheen: rgba(255, 218, 114, .09);
    --ah-hero-ready-glow: 0 18px 46px -20px rgba(242, 205, 122, .45);
    /* #FFD983 on a white-.07 plate over this stage is 12.06:1. */
    --ah-cta-bg: rgba(255, 255, 255, .07);
    --ah-cta-fg: #FFD983;
    --ah-cta-border: rgba(242, 205, 122, .45);
    --ah-cta-border-hover: #FFD983;
    --ah-book-hover: rgba(255, 255, 255, .07);
    --ah-book-ring: #FFD983;

    --ah-eyebrow-fg: #FFD983;
    --ah-eyebrow-bg: rgba(242, 205, 122, .15);
    --ah-eyebrow-line: rgba(242, 205, 122, .34);
    --ah-pulse-rgb: 242 205 122;
    --ah-step-fg: rgba(226, 232, 246, .76);
    --ah-step-bg: rgba(255, 255, 255, .06);
    --ah-step-line: rgba(255, 255, 255, .16);
    --ah-step-done-fg: #FFF;
    --ah-step-done-bg: rgba(242, 205, 122, .16);
    --ah-step-done-line: rgba(242, 205, 122, .42);
    --ah-tick-line: rgba(226, 232, 246, .45);
    --ah-tick-fill: var(--pa-grad-gold);
    --ah-tick-ink: var(--pa-on-gold);
    --ah-ready-fg: rgba(226, 232, 246, .70);
    --ah-ready-track: rgba(255, 255, 255, .1);
    --ah-ready-track-line: rgba(255, 255, 255, .18);
    --ah-ready-fill: var(--pa-grad-gold);

    --ah-rub-filter: brightness(1.06) saturate(1.08);
    --ah-spark: #C8D6F0;
    --ah-spark-op: .2;
    --ah-spark-lit: #FFD983;
    --ah-star: #FFF2CE;
    --ah-star-glow: rgba(255, 214, 120, .9);
    --ah-ring: #FFD983;
    --ah-halo: none;
    --ah-fog-op: .19;
    --ah-fog-op-rub: .36;
    --ah-fog-op-still: .12;
    /* Deliberately equal to its light value: the billow gradient is pale in both modes and lands
       on the art rather than under the copy, so it needs no per-mode alpha. It stays a token
       anyway - its three siblings above do move, and a lone literal among them is exactly the
       kind of thing a sweep for hardcoded colours skips. */
    --ah-billow-op-still: .35;
}

/* -- greeting row ---------------------------------------------------------- */
.ah-home .greetrow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin: 16px 0 20px;
    flex-wrap: wrap;
}

.ah-home .dashboard-greeting {
    font-size: 1.5rem;
    line-height: 1.334;
    margin: 0;
}

.ah-home .dashboard-greeting em {
    line-height: 1;
}

.ah-home .greet-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.ah-home .dashboard-date {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* -- hero band --------------------------------------------------------------
   The brand's own banner, composed with the genie right of centre and clear space on the left -
   so the copy sits ON the art rather than beside it, and a scrim keeps it legible. One raster per
   mode, so every colour in here reads a token from the pair above and NONE is a literal.
   --pa-shadow, not --mud-elevation-2: the elevation array is ONE array shared by both modes, so
   a light-tuned shadow reads as nothing on dark. */
.ah-home .hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 500px;
    overflow: hidden;
    background: rgb(var(--ah-hero-stage));
    border: 1px solid var(--pa-gold-border);
    border-radius: var(--card-radius);
    box-shadow: var(--pa-shadow);
    margin-bottom: 32px;
    transition: border-color .4s ease, box-shadow .4s ease;
}

/* Server-rendered from the step count, never from JS. The glow is tokenised even though the
   border beside it already flips on its own: the two sit twelve lines apart on one element, and
   this rule only renders once all four setup steps are done, so a half-flipped pair would not
   show up in casual testing. */
.ah-home .hero.is-ready {
    border-color: var(--pa-gold-ic);
    box-shadow: var(--ah-hero-ready-glow);
}

/* The raster's own backdrop, under the art rather than beside it. The svg is xMaxYMid meet, so
   the art is contained and right-pinned and never covers the whole band - without this the stage
   shows through wherever it does not reach and the two grounds meet at a seam, worst below 860px
   where the art becomes a letterboxed strip and the scrim that would have hidden it is gone. */
.ah-home .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ah-hero-art);
}

/* Which raster is showing, for the genie and the uploaded-banner placeholder alike. Opacity, not
   display:none: display:none would drop the outgoing image from the render tree, so every theme
   toggle would re-rasterise it. The swap itself is instant - nothing transitions opacity. The light
   rasters need no light-mode rule - the default opacity 1 is already correct, including on a
   document with no data-theme at all. */
.ah-home .genie-dark,
.ah-home .placeholder-dark {
    opacity: 0;
}

html[data-theme="dark"] .ah-home .genie-dark,
html[data-theme="dark"] .ah-home .placeholder-dark {
    opacity: 1;
}

html[data-theme="dark"] .ah-home .genie-light,
html[data-theme="dark"] .ah-home .placeholder-light {
    opacity: 0;
}

/* The svg's inline transform is written by admin-home-banner.js (parallax), so nothing
   Razor-bound may ever live on this element. */
.ah-home .hero-bg svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

/* A build that uploaded its own banner paints the Marketing Hub placeholder here instead of the
   genie, and it is the only thing in the band: AdminHome renders no copy and no scrim on that path.
   This rule is therefore the imgs' whole layout - .hero-bg is an absolute inset:0 box that sizes
   no child. Both svgs share it and stack exactly; the pair above picks which one shows.

   No object-fit, on purpose: each svg fits itself (xMidYMid meet) and paints its own ground far
   past its viewBox, so at any band shape the art shows whole and centred and the spare band is the
   art's own background - nothing is cropped and there is no seam. The files are the designer's
   exports with that ground extended, their 24px corner clip removed (.hero already rounds and clips
   the band) and their embedded rasters re-encoded; a replacement needs all three. */
.ah-home .hero-custom-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Above 860px the band keeps the PropGenie band's box (min-height 500px), so both paths are the
   same size. Below it that box is the copy plus a 230px strip, and this path has no copy, so the
   band takes the art's own ratio instead. A replacement svg must keep this ratio or change it here
   and on .hero-custom-frame; AdminHomeBannerAssetsTest pins all three together. */
@media (max-width: 860px) {
    .ah-home .hero.has-own-banner {
        aspect-ratio: 1582 / 642;
    }
}

/* Stays an overlay below 860px, where .hero-bg otherwise becomes a fixed 230px strip under the
   copy. (0,4,0), so it beats that block's (0,2,0) regardless of source order. A size container
   so .hero-custom-frame can work out where the art landed. */
.ah-home .hero.has-own-banner .hero-bg {
    position: absolute;
    height: auto;
    container-type: size;
}

/* The art's own box inside the band - the same centred meet fit the svg makes of itself - so the
   link below can be placed in the art's coordinates whatever shape the band is. */
.ah-home .hero-custom-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100cqw, 100cqh * 1582 / 642);
    aspect-ratio: 1582 / 642;
    transform: translate(-50%, -50%);
}

/* Over the button drawn into both svgs, <rect x="58.5" y="508.185" width="270.602"
   height="81.8131" rx="15.9325">, as fractions of the 1582x642 viewBox. */
.ah-home .hero-book-call {
    position: absolute;
    left: calc(58.5 / 1582 * 100%);
    top: calc(508.185 / 642 * 100%);
    width: calc(270.602 / 1582 * 100%);
    height: calc(81.8131 / 642 * 100%);
    border-radius: calc(15.9325 / 270.602 * 100%) / calc(15.9325 / 81.8131 * 100%);
    transition: background-color .2s ease;
}

.ah-home .hero-book-call:hover {
    background-color: var(--ah-book-hover);
}

/* Not the tiles' --mud-palette-primary ring: light Primary measures 1.5-2.1:1 on the grey ground
   around the drawn button, under the 3:1 a focus indicator owes. The navy ring holds 5.2:1 or
   better there; dark's gold, 4.3:1. */
.ah-home .hero-book-call:focus-visible {
    outline: 2px solid var(--ah-book-ring);
    outline-offset: 2px;
}

.ah-home .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--ah-hero-scrim);
}

/* Slow gold sheen. z-index 2, UNDER .hero-copy's 3: the mockup puts it above the text, where a
   translucent wash sweeps across live copy every 9s and costs every string contrast - and since
   reduced-motion users lose it entirely, they would be the best-served group. */
.ah-home .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(105deg, transparent 40%, var(--ah-hero-sheen) 48%, transparent 56%);
    animation: ah-sheen 9s ease-in-out infinite;
}

@keyframes ah-sheen {
    0%, 70% { transform: translateX(-65%); }
    100% { transform: translateX(65%); }
}

/* Off on this path along with the copy and scrim: the placeholder is finished art, headline
   included, and the PropGenie band's chrome is not part of it. Killed by specificity ((0,3,1) over
   the base rule's (0,2,1)), so it does not depend on source order. */
.ah-home .hero.has-own-banner::after {
    content: none;
}

.ah-home .hero-copy {
    position: relative;
    z-index: 3;
    padding: 34px 38px;
    max-width: min(580px, 56%);
}

/* Routed through --ah-hero-ink rather than inheriting the page's text tokens. Both follow the
   mode now, so that is no longer the reason - the reason is that this sits on ART with its own
   ground (mid-grey light, near-black dark), and --mud-palette-text-* was measured against the
   page surface, not against either of those. */
.ah-home .hero-head {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ah-hero-ink);
}

/* The band flips again, so the mockup's deep-gold gradient is restored as the LIGHT half of
   --ah-hero-accent - it was only ever wrong because there was no light band to put it on. The two
   are not interchangeable: the brand gradient runs 12.8 -> 5.3:1 on the dark stage and 1.5:1 on
   the pale one, deep gold the reverse. */
.ah-home .hero-head .accent {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.2;
    margin-top: 2px;
    background: var(--ah-hero-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ah-home .hero-copy p {
    margin: 12px 0 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ah-hero-ink-dim);
    max-width: 52ch;
}

/* -- eyebrow, step chips, readiness bar -------------------------------------
   The plate under all of these is the stage, so all of them move with it. */
.ah-home .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ah-eyebrow-fg);
    background: var(--ah-eyebrow-bg);
    border: 1px solid var(--ah-eyebrow-line);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.ah-home .eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--ah-pulse-rgb));
    flex: none;
    animation: ah-pulse 2.2s ease-out infinite;
}

/* The one keyframe in this file carrying a COLOUR rather than an opacity, and keyframes sit
   outside the cascade - html[data-theme="..."] @keyframes is invalid and dropped without a word.
   A var() inside one resolves against the animating element instead, which is how --ah-pulse-rgb
   reaches it. The two alpha-0 stops ride the token as well: they never paint, but they are what
   the ring ramps toward, and champagne leaks back in if they are left literal. */
@keyframes ah-pulse {
    0% { box-shadow: 0 0 0 0 rgb(var(--ah-pulse-rgb) / .6); }
    70% { box-shadow: 0 0 0 7px rgb(var(--ah-pulse-rgb) / 0); }
    100% { box-shadow: 0 0 0 0 rgb(var(--ah-pulse-rgb) / 0); }
}

.ah-home .steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 14px;
    padding: 0;
    list-style: none;
}

/* No :hover and no transition: these are li readouts, not the mockup's buttons, and a hover
   response on a non-interactive element reads as a control that has broken. */
.ah-home .step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px 6px 7px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ah-step-fg);
    background: var(--ah-step-bg);
    border: 1px solid var(--ah-step-line);
}

.ah-home .step.is-done {
    color: var(--ah-step-done-fg);
    background: var(--ah-step-done-bg);
    border-color: var(--ah-step-done-line);
}

/* THE TICK IS LOAD-BEARING, not decoration: done and not-done differ by only 1.23:1 in fill, so
   the hollow-ring / filled-check SHAPE change is what carries the distinction without relying on
   colour. Do not simplify it away. */
.ah-home .step .tick {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ah-tick-line);
}

.ah-home .step .tick .mud-icon-root {
    font-size: 13px;
    color: transparent;
}

/* border-color:transparent is a COLOUR decision, not a reset: it hands the job of drawing this
   disc's edge to the fill alone. That only holds while the fill contrasts with the chip under it,
   which is why --ah-tick-fill is deep gold in light mode and the brand gradient in dark - swap either and
   the done tick dissolves into its own chip. */
.ah-home .step.is-done .tick {
    background: var(--ah-tick-fill);
    border-color: transparent;
}

.ah-home .step.is-done .tick .mud-icon-root {
    color: var(--ah-tick-ink);
}

.ah-home .ready {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ah-ready-fg);
}

.ah-home .ready .bar {
    flex: 0 1 230px;
    height: 6px;
    border-radius: 99px;
    background: var(--ah-ready-track);
    border: 1px solid var(--ah-ready-track-line);
    overflow: hidden;
}

.ah-home .ready .bar i {
    display: block;
    height: 100%;
    background: var(--ah-ready-fill);
}

.ah-home .ready > span:last-child {
    white-space: nowrap;
}

.ah-home .cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* THE HERO'S PRIMARY CTA. Its gold fill, navy ink and hover come from the admin-wide
   filled-Primary rule (HB-25293), which is identical in light and dark. Only the hero adds
   a shape and a hairline on top.
   The radius is --pa-radius-sm (10px), the mockup's .btn value at line 309, NOT the
   999px pill the superseded Gold Rail reading used. Both hero CTAs carry it so they
   read as a matched pair. Scoped to .cta-row so it cannot reach any other Filled
   Primary button - every other filled button in the admin keeps MudBlazor's 4px - and
   skipped while disabled so the PropGenie-not-ready state still reads as unavailable.
   The hairline is --pa-gold-dim rather than the mode-dependent --pa-gold-border,
   because a mode-dependent edge would break the "identical in both modes" claim. */
/* Shape is unconditional; only the hairline is state-dependent. Keeping the radius in
   the :not(:disabled) rule below would leave a disabled CTA at MudBlazor's 4px, so the
   two hero buttons would stop matching precisely when one of them is unavailable. */
.ah-home .cta-row .mud-button-root {
    border-radius: var(--pa-radius-sm);
}

.ah-home .cta-row .mud-button-filled-primary:not(:disabled):not([disabled]) {
    border: 1px solid var(--pa-gold-dim);
}

/* Secondary CTA, the mockup's .hero .btn-ghost: a SOLID plate with a gold hairline, so it reads
   as a control rather than dissolving into the artwork the way a plain Variant.Outlined MudButton
   does - which is the whole reason this rule exists. The class name is a misnomer in both modes:
   the plate is a white wash on the dark stage and a gold one on the pale band, never white.

   These carry !important, so they beat MudBlazor's disabled styling too - this button looks
   enabled while disabled today, in both modes. Changing the tokens does not change that; removing
   the !important would. */
.ah-home .ah-cta-white {
    background: var(--ah-cta-bg) !important;
    color: var(--ah-cta-fg) !important;
    border: 1px solid var(--ah-cta-border);
    /* Matches the primary CTA beside it. Without this the button falls back to
       MudBlazor's 4px default and the pair reads as two different components. */
    border-radius: var(--pa-radius-sm);
}

/* --ah-cta-border-hover, not --pa-gold-ic directly: the ghost CTA sits on the stage, not on a
   page surface, so its hover edge is measured with the rest of the band. Light happens to resolve
   it to --pa-gold-fg, a step DARKER than the resting --pa-gold-ic edge; dark goes brighter. Both
   are "more contrast on hover", in opposite directions. */
.ah-home .ah-cta-white:hover {
    border-color: var(--ah-cta-border-hover);
}

/* -- banner layers ----------------------------------------------------------
   admin-home-banner.js toggles `rubbing` on .hero-bg, NOT on .hero: .hero-bg's Razor class is a
   static literal so the renderer never writes it, while .hero's carries the server-rendered
   is-ready. A changed class attribute is a whole-value setAttribute, so a JS-added token on an
   interpolated class would be deleted on the next render. Every one of the mockup's
   `.hero.rubbing` selectors targets an element inside .hero-bg, so this rehoming is lossless.

   The paint servers themselves (stroke/fill/filter = url(#...)) are SVG presentation attributes
   in AdminHomeBanner.razor, not CSS: a bare fragment in an EXTERNAL stylesheet is a relative URL
   under <base href> and fails SILENTLY. Only animation, opacity and transform live here. */
.ah-home .genie-img {
    transition: filter .5s ease;
}

/* A 6% brightness lift is a multiply, so it reads as a surge against near-black and as almost
   nothing against the light raster's mid-grey, where every channel is already near the middle of
   the range. Light carries the same beat with contrast and saturation instead. */
.ah-home .hero-bg.rubbing .genie-img {
    filter: var(--ah-rub-filter);
}

/* No cursor:pointer: the subtree is aria-hidden, so it must not advertise itself as a control. */
.ah-home .lamp-hit {
    fill: transparent;
}

.ah-home .ribbon {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 90 340;
    animation: ah-flow 7s linear infinite;
}

@keyframes ah-flow {
    to { stroke-dashoffset: -430; }
}

.ah-home .hero-bg.rubbing .ribbon {
    animation-duration: 2.4s;
}

.ah-home .fog {
    opacity: var(--ah-fog-op);
    transform-box: fill-box;
    transform-origin: center;
    animation: ah-drift var(--t, 36s) ease-in-out infinite alternate;
}

@keyframes ah-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(var(--dx, 60px), -22px) scale(1.14); }
}

.ah-home .hero-bg.rubbing .fog {
    opacity: var(--ah-fog-op-rub);
}

.ah-home .billow {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: ah-rise var(--d, 6s) ease-out infinite;
}

@keyframes ah-rise {
    0% { opacity: 0; transform: translate(0, 0) scale(.28); }
    18% { opacity: .8; }
    60% { opacity: .45; }
    100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -190px)) scale(2.6); }
}

.ah-home .hero-bg.rubbing .billow {
    animation-duration: calc(var(--d, 6s) * .45);
}

/* The second plume is parked until the lamp is rubbed: paused at 0%, which is opacity 0. */
.ah-home .billow.extra {
    animation-play-state: paused;
}

.ah-home .ribbon.extra {
    opacity: 0;
    animation-play-state: paused;
    transition: opacity .45s ease;
}

.ah-home .hero-bg.rubbing .billow.extra {
    animation-play-state: running;
    animation-duration: var(--d, 4s);
}

.ah-home .hero-bg.rubbing .ribbon.extra {
    opacity: 1;
    animation-play-state: running;
    animation-duration: 2.4s;
}

/* One spark per setup step, lit as that step's module comes on - this is the artwork's copy of
   the readiness count, so the lit/unlit difference has to survive both grounds. On the light
   raster's mid-grey neither hue has much room, so light widens the gap with opacity and a dark
   halo rather than with colour alone. */
.ah-home .spark {
    fill: var(--ah-spark);
    opacity: var(--ah-spark-op);
    transition: opacity .4s ease, fill .4s ease;
}

.ah-home .wish.lit .spark {
    fill: var(--ah-spark-lit);
    opacity: .95;
    filter: var(--ah-halo);
    animation: ah-twinkle 2.8s ease-in-out infinite;
}

@keyframes ah-twinkle {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.ah-home .emblem-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: ah-emblem-pulse 3.4s ease-in-out infinite;
}

@keyframes ah-emblem-pulse {
    0%, 100% { opacity: .34; transform: scale(.9); }
    50% { opacity: .6; transform: scale(1.06); }
}

.ah-home .hero-bg.rubbing .emblem-glow {
    opacity: .9;
    animation-duration: 1.1s;
}

/* The drop-shadow inverts with the mode: on the dark stage it is a gold BLOOM around a near-white
   star, on the pale one a dark halo that separates the same star from a mid-grey ground. An
   additive bloom over light art is invisible. */
.ah-home .magic-star {
    fill: var(--ah-star);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 6px var(--ah-star-glow));
}

.ah-home .hero-bg.rubbing .magic-star {
    animation: ah-pop 1.5s ease-out infinite;
}

@keyframes ah-pop {
    0% { opacity: 0; transform: scale(.2) rotate(0deg); }
    35% { opacity: 1; transform: scale(1.15) rotate(40deg); }
    100% { opacity: 0; transform: scale(.45) rotate(90deg); }
}

.ah-home .spark-ring {
    fill: none;
    stroke: var(--ah-ring);
    stroke-width: 1.4;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.ah-home .hero-bg.rubbing .wish.lit .spark-ring {
    animation: ah-spark-pop 1.1s ease-out;
}

@keyframes ah-spark-pop {
    0% { opacity: .7; transform: scale(.4); }
    100% { opacity: 0; transform: scale(3); }
}

/* The scene still reads, it just holds still. filter:none goes further than the mockup's
   animation:none - without it the five feTurbulence/feDisplacementMap chains are still evaluated
   every paint, just statically, on exactly the low-end machines most likely to set this. */
@media (prefers-reduced-motion: reduce) {
    .ah-home .hero::after {
        display: none;
    }

    .ah-home .eyebrow .dot,
    .ah-home .ribbon,
    .ah-home .billow,
    .ah-home .fog,
    .ah-home .emblem-glow,
    .ah-home .magic-star,
    .ah-home .wish .spark,
    .ah-home .spark-ring {
        animation: none !important;
    }

    /* The fog's third opacity site and the billow's second, both far enough from the others to be
       missed by a visual sweep. filter:none also strips the displacement, so the fog here is plain
       ellipses rather than tendrils and takes its own alpha rather than a copy of the animated
       one. The billow's value is deliberately equal in both modes - see the token. */
    .ah-home .fog {
        filter: none;
        opacity: var(--ah-fog-op-still);
    }

    .ah-home .billow {
        opacity: var(--ah-billow-op-still);
    }

    /* The second plume is normally hidden by being PAUSED at its 0% keyframe, so killing the
       animation above would otherwise reveal it - the rub-only fume would sit there permanently. */
    .ah-home .billow.extra,
    .ah-home .ribbon.extra {
        opacity: 0;
    }

    .ah-home .hero-bg svg {
        transition: none;
    }
}

/* Visually-hidden text, for the step chips' enabled/not-enabled state. Neither site.css nor
   MudBlazor 7.16.0 ships a utility for this. */
.ah-home .ah-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -- tile grid ------------------------------------------------------------- */
.ah-home .sectionhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 16px;
}

/* !important is required to win against .dashboard-section-title's own
   font-weight: 700 !important in the orphaned block above. */
.ah-home .dashboard-section-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500 !important;
    line-height: 1.6;
}

.ah-home .dashboard-link-sm {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

.ah-home .dashboard-link-sm:hover {
    text-decoration: underline;
}

/* 12-col track so a partial last row can widen to stay flush with the row
   above. A row of k tiles gives each tile span 12/k - 4 up = 3, 3 up = 4,
   2 up = 6, 1 up = 12. --span-lg is set per tile from the VISIBLE count
   (AdminHomeTiles.GridColumnSpanFor), so gated tiles reflow correctly. */
.ah-home .grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

/* The mockup's .tile (lines 422-427) verbatim, with two additions it does not need
   and we do: height:100% so a short tile still fills its grid row, and the
   --span-lg reflow. Centred, not left-aligned: the icon chip, the heading, the copy
   and the arrow all sit on the tile's axis now. */
.ah-home .tile {
    grid-column: span 3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 22px 18px 18px;
    background: var(--ah-card-bg);
    border: 1px solid var(--ah-card-line);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 1101px) {
    .ah-home .tile {
        grid-column: span var(--span-lg, 3);
    }
}

/* Three things move together on hover and each carries the state in a mode where
   the others are weak: the lift, the border stepping from --border-soft to
   --border-gold, and --pa-shadow - which, unlike --mud-elevation-*, is a separate
   value per mode (a warm bronze cast in light, a gold bloom in dark). */
.ah-home .tile:hover {
    transform: translateY(-2px);
    border-color: var(--ah-card-line-hover);
    box-shadow: var(--pa-shadow);
}

/* The mockup marks keyboard focus with the border alone. That is a 3.56:1 hairline
   against the card and it is the ONLY indicator, so the outline stays on top of it:
   MudBlazor's defaults do not cover a custom clickable card and the project has no
   focus-ring convention to inherit. */
.ah-home .tile:has(.tile-link:focus-visible) {
    border-color: var(--pa-gold-ic);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Whole-tile target via a stretched real anchor, so keyboard and screen readers
   get link semantics. border-radius:inherit keeps the ring on the card shape. */
.ah-home .tile-link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.ah-home .tile-ico {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--ah-tile-chip);
    border: 1px solid var(--ah-tile-chip-line);
    margin-bottom: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ah-home .tile:hover .tile-ico {
    border-color: var(--pa-gold-ic);
    box-shadow: 0 0 0 3px var(--pa-gold-wash);
}

/* THE GLYPH IS A FLAT COLOUR, NOT the mockup's gold gradient, and that is a
   technique limit rather than a shortcut. The mockup's icons are Material Symbols
   FONT ligatures, so it paints them with background-image + background-clip:text;
   ours are MudBlazor <MudIcon> SVGs (.mud-icon-root.mud-svg-icon { fill:currentColor }),
   and background-clip:text has no effect on an SVG's fill. The alternatives all cost
   markup we do not own: an SVG <linearGradient> paint server needs a <defs> block on
   the page and fill:url(#id), which would mean either duplicating the defs in every
   tile or editing AdminHome.razor. The gradient still appears on this tile, in the
   chip's radial --pa-gold-wash behind the glyph.
   The flat colour is --pa-brand-icon, matching the sidebar (HB-25293, the client's call).
   On the light chip that is 1.31:1, under 1.4.11's 3:1 - the same accepted trade
   as the sidebar's, with the tile's own title carrying the meaning. */
.ah-home .tile-ico .mud-icon-root {
    font-size: 23px;
    color: var(--pa-brand-icon);
}

.ah-home .tile h3 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.ah-home .tile p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

/* margin-top:auto pins the footer to the bottom of the tallest tile in the row, so
   a one-line description and a three-line one still line their arrows up. */
.ah-home .tile-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding-top: 14px;
}

.ah-home .tile-arrow {
    font-size: 19px;
    color: var(--pa-brand-icon);
    transition: transform 0.15s ease;
}

.ah-home .tile:hover .tile-arrow {
    transform: translateX(3px);
}

/* Rendered only when zero tiles survive gating, so it is always visible when
   present - unlike the mockup, where JS toggles it. */
.ah-home .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: var(--ah-card-bg);
    border: 1px solid var(--ah-card-line);
    box-shadow: none;
    border-radius: var(--card-radius);
    text-align: center;
}

/* --pa-gold-ic-soft, not text-disabled: the mockup's empty state keeps the gold
   family even when there is nothing to launch. */
.ah-home .empty .mud-icon-root {
    font-size: 46px;
    color: var(--pa-gold-ic-soft);
    margin-bottom: 12px;
}

.ah-home .empty h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ah-home .empty p {
    margin: 0;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

/* -- responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .ah-home .tile {
        grid-column: span 6;
    }
}

/* Narrow: the genie would sit under the text, so the banner becomes a strip BENEATH the copy
   and the scrim comes off - .hero-bg stops being an absolute overlay and becomes a flex item. */
@media (max-width: 860px) {
    .ah-home .hero {
        flex-direction: column;
        min-height: 0;
        /* Not inherited from the base rule: once the axis flips, its align-items:center is
           CROSS-axis and therefore horizontal, which shrink-wraps .hero-copy to the width of its
           widest chip row and floats it off the left edge. .hero-bg escapes only because it pins
           width:100%. */
        align-items: stretch;
    }

    .ah-home .hero-bg {
        position: relative;
        order: 2;
        height: 230px;
        width: 100%;
    }

    .ah-home .hero-scrim {
        display: none;
    }

    .ah-home .hero-copy {
        order: 1;
        max-width: none;
        padding: 24px 22px 18px;
    }
}

/* Explicitly bounded to 861-960px. Both blocks select .ah-home .hero-copy at the same
   specificity and a media query adds none, so an unbounded max-width:960px sitting after the
   860px block would win for the whole range below it and silently kill the narrow padding. */
@media (max-width: 960px) and (min-width: 861px) {
    .ah-home .hero-copy {
        padding: 26px 26px 12px;
    }
}

/* 640px is the single phone breakpoint for this page: the banner scales its type and goes
   full-width CTA here, and the tile grid already did. Only the greeting row still keeps
   MudBlazor's 599px sm below, which is where it was tuned. */
@media (max-width: 640px) {
    .ah-home .grid {
        gap: 14px;
    }

    .ah-home .tile {
        grid-column: span 12;
    }

    .ah-home .hero-copy {
        padding: 20px 18px 8px;
    }

    .ah-home .hero-head {
        font-size: 21px;
    }

    .ah-home .hero-head .accent {
        font-size: 25px;
    }

    .ah-home .hero-copy p {
        font-size: 12.5px;
        margin: 10px 0 16px;
    }

    .ah-home .eyebrow {
        margin-bottom: 12px;
    }

    .ah-home .steps {
        gap: 6px;
        margin: 14px 0 12px;
    }

    .ah-home .step {
        font-size: 12px;
        padding: 5px 12px 5px 6px;
        gap: 6px;
    }

    .ah-home .step .tick {
        width: 17px;
        height: 17px;
    }

    .ah-home .ready {
        gap: 9px;
        margin-bottom: 16px;
    }

    .ah-home .ready .bar {
        flex: 1 1 auto;
    }

    .ah-home .cta-row .mud-button-root {
        width: 100%;
    }
}

@media (max-width: 599px) {
    .ah-home .greetrow {
        margin-bottom: 16px;
    }

    .ah-home .dashboard-greeting {
        font-size: 1.25rem;
    }

    .ah-home .dashboard-greeting em {
        font-size: 26px;
    }
}

/* ============================================================================
   Drawer: nav rows, gold icons, active rail, grouped section headers.
   adminhomemockupproptech.html lines 172-200 (.nav-link / .nav-section .label /
   .nav-children / .menu-label-count) is the visual spec. The colours here are all
   palette or --pa-* variables, so the drawer follows the theme with no dark
   override.

   SCOPING, two layers of it. Everything colour-bearing is gated behind
   html[data-theme], which _Layout.cshtml only emits when admin_theme is
   propgenie (HB-25795). A theme-off instance has no data-theme on <html>, none of
   these rules match, and the drawer is byte-identical to stock MudBlazor. Which
   menu renders is a separate switch, enable_new_admin_home_page (NavMenuGrouped
   over the legacy NavMenu in LoggedInLayout.razor); both carry .mudblazor-navmenu,
   so a theme-on build styles whichever one it shows.
   The second layer is the .mudblazor-navmenu class, shared by both menus, which
   keeps the rules off MudNavMenu instances anywhere else in the admin.

   The one genuinely new nav primitive here: MudBlazor has no non-collapsible
   section header, only MudNavGroup, which collapses. Safe as a descendant
   wrapper: every .mud-navmenu rule in MudBlazor 7.16.0 is a descendant selector,
   not a direct-child one, so putting links inside a .nav-section div does not
   detach them from their own styling.
   ============================================================================ */

/* 8px of inline padding on the LIST, not margin on the links. MudNavLink is
   width:100%, so a margin would push 16px of it past the drawer's edge; padding on
   the container shrinks the links' containing block instead and shifts every
   nesting level by the same 8px, which is what keeps the indentation steps intact. */
html[data-theme] .mudblazor-navmenu {
    padding-inline: 8px;
}

/* .nav-link, lines 175-180. Only padding-INLINE is left at MudBlazor's own values
   (16px top-level, 36px inside a MudNavGroup) - that axis is what encodes the
   nesting depth and the mockup's flat 12px would erase it. padding-block is free to
   take the mockup's 9px, and does, together with its 1.3 line-height. */
html[data-theme] .mudblazor-navmenu .mud-nav-link {
    border-radius: var(--pa-radius-sm);
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    padding-block: 9px;
}

/* THE ASK: resting nav icons are gold, not grey. This rule is what paints them - it
   beats MudBlazor's own (0,4,0) .mud-nav-link-icon-default, which would otherwise draw
   them from the palette's DrawerIcon.
   HB-25293, the client's call: the nav glyphs are --pa-brand-icon (#FFC666 light, #FED871
   dark), at rest, on hover and when active. On the light drawer that is 1.55:1, under
   WCAG 1.4.11's 3:1 for an icon. That was accepted for brand fidelity, and
   the label beside every glyph still carries its meaning. Do not "fix" it back to
   --pa-gold-ic without asking. The Home tiles' glyphs and arrows share it. */
html[data-theme] .mudblazor-navmenu .mud-nav-link .mud-nav-link-icon {
    /* Line 181's 19px. MudNavLink hard-codes its MudIcon at Size.Medium, so without
       this the glyph is MudBlazor's 1.5rem; .mud-icon-root is width/height 1em, so
       font-size is what sizes an SVG icon. */
    font-size: 19px;
    color: var(--pa-brand-icon);
    transition: color 0.18s ease;
}

/* Hover steps the plate to --card-flat, replacing MudBlazor's grey
   --mud-palette-action-default-hover. The glyph is restated so the row's own hover
   colour cannot reach it. */
html[data-theme] .mudblazor-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--pa-card-flat);
    color: var(--mud-palette-text-primary);
}

html[data-theme] .mudblazor-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--pa-brand-icon);
}

/* MudBlazor's only focus treatment for these rows is a background tint off
   action-default-hover, which composites to 1.13:1 here - a keyboard user tabbing the
   drawer gets no usable cue across ~84 links. The offset is negative so the ring sits
   inside the 10px row radius instead of fighting the 2px inset active rail. */
html[data-theme] .mudblazor-navmenu .mud-nav-link:focus-visible {
    outline: 2px solid var(--pa-gold-ic);
    outline-offset: -2px;
}

/* MudNavGroup's chevron is drawn from --mud-palette-drawer-icon too, which is now the
   brand yellow. The mockup keeps it in the dim text family so it does not compete with
   the row's own icon. */
html[data-theme] .mudblazor-navmenu .mud-nav-link .mud-nav-link-expand-icon {
    font-size: 18px;
    /* An icon, so the bar is 3:1 - which the disabled slot misses (2.97:1) on the lower
       half of the drawer gradient where most groups actually sit. */
    color: var(--mud-palette-text-secondary);
}

/* The active row. MudBlazor's own Color.Default rule paints the whole active label
   with --mud-palette-primary; the mockup keeps the LABEL in the page's --text and
   lets gold carry the state through the rail, the icon and the wash instead - which
   is also what keeps it legible, since gold-as-a-label is 3.56:1 at best.

   font-weight needs !important to beat MudBlazor's own
   `.mud-nav-link.active { font-weight:500 !important }`.

   The rail is an inset box-shadow rather than a border-inline-start because
   MudBlazor sets padding-inline-start per nesting level (16px top-level, 36px
   inside a MudNavGroup); a real border would eat 2px off whichever level it was
   tuned against and shift every row's text. */
html[data-theme] .mudblazor-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--pa-nav-active-text);
    background: var(--pa-nav-active-wash);
    font-weight: 600 !important;
    box-shadow: inset 2px 0 0 0 var(--pa-gold-ic);
}

/* The active row has to restate its own wash for the interaction states, and that is
   a specificity fight rather than a style choice. MudBlazor ships
   `.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(...):hover:not(...)`
   and a matching :focus-visible/:active pair, both (0,6,0) and both setting the
   background-COLOR longhand - which outranks the (0,5,1) `background` shorthand
   above for that one longhand, leaving grey showing under the gold gradient the
   moment the current row is hovered or focused. These selectors are (0,6,1). */
html[data-theme] .mudblazor-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
html[data-theme] .mudblazor-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled),
html[data-theme] .mudblazor-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):active:not(.mud-nav-link-disabled) {
    background: var(--pa-nav-active-wash);
}

html[data-theme] .mudblazor-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--pa-brand-icon);
}

/* .nav-children .nav-link, line 199: a nested row is smaller and dimmer than its
   parent. The .mud-nav-group ancestor is what marks "inside a group" - .mud-nav-item
   alone will not do it, MudNavLink wraps EVERY link in one including top-level ones,
   and only MudNavGroup's own title link escapes it (it is a direct child of
   .mud-nav-group, which is how MudBlazor's own 36px indent rule tells them apart). */
html[data-theme] .mudblazor-navmenu .mud-nav-group .mud-nav-item .mud-nav-link {
    font-size: 13px;
}

/* :not(.active) is load-bearing, not decoration: this selector and the active-row
   one above score the same (0,5,1) and this one comes later, so without it a
   selected child row would lose its active ink to the dim one. */
/* text-secondary, not the mockup's dim: these are ENABLED child routes, so they owe
   4.5:1 (disabled would be 3.12:1, and 2.97:1 further down the drawer gradient). It
   also keeps them distinguishable from rows MudBlazor genuinely disables, which it
   paints from the text-disabled slot with !important. The nesting is already legible
   from the 13px size step and the indent - the colour does not have to carry it. */
html[data-theme] .mudblazor-navmenu .mud-nav-group .mud-nav-item .mud-nav-link:not(.active) {
    color: var(--mud-palette-text-secondary);
}

html[data-theme] .mudblazor-navmenu .mud-nav-group .mud-nav-item .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-text-primary);
}

/* .menu-label-count, line 190: a monospace pill in the gold family. Gated the same
   way as everything else here because the legacy NavMenu uses the same class and
   must keep its plain bold float.

   Scoped to .nav-count, NOT to .menu-label-count itself. That wrapper is doing double
   duty in NavMenuGrouped: three rows use it for a count, six use it purely to host a
   hover-revealed tooltip icon and never hold a number - and the three that do hold one
   are set to "" whenever the count is zero or counts are switched off. Painting the
   wrapper therefore drew a bordered, filled, padded badge around nothing on most rows. */
html[data-theme] .mudblazor-navmenu .nav-count {
    font-family: var(--pg-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--pa-gold-fg);
    background: var(--pa-gold-wash);
    border: 1px solid var(--pa-gold-border);
    padding: 1px 7px;
    border-radius: 999px;
}

.mudblazor-navmenu .nav-section {
    margin-top: 4px;
}

/* .nav-section .label, line 173. The inline padding is 16px so the label's text
   lines up with the links' text now that the list carries 8px of its own. */
.mudblazor-navmenu .nav-section-header {
    display: block;
    padding: 16px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Same reason as the child rows: static headings are enabled content, and at 11px
       with 0.14em tracking the disabled slot's 3.12:1 is the hardest text in the app. */
    color: var(--mud-palette-text-secondary);
}

/* A rule between sections, but never above the first one. */
.mudblazor-navmenu .nav-section + .nav-section .nav-section-header {
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 4px;
    padding-top: 16px;
}

/* ================= WALLET SHORTCUT (top right) ================= */
/* One pill above the tool cards, pushed to the right: the token balance and a button into
   the Wallet page. Purple (--pp) rather than a module family colour because the wallet
   pays for every module, not one of them. */
.pg-hub .topbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 16px;
}

.pg-hub .wallet-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--pg-shadow-sm);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pg-hub .wallet-cta:hover,
.pg-hub .wallet-cta:focus-visible {
    border-color: var(--pp);
    box-shadow: 0 6px 18px rgba(92, 74, 228, .14);
    transform: translateY(-1px);
    outline: none;
}

.pg-hub .wallet-cta-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--pp-soft);
    color: var(--pp);
}

.pg-hub .wallet-cta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.pg-hub .wallet-cta-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--muted);
}

.pg-hub .wallet-cta-amount {
    font-family: var(--pg-mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    color: var(--ink);
}

.pg-hub .wallet-cta-amount small {
    margin-left: 4px;
    font-family: var(--pg-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

/* Loading, Not connected, Unavailable */
.pg-hub .wallet-cta-amount.is-muted {
    font-family: var(--pg-sans);
    font-weight: 600;
    color: var(--faint);
}

.pg-hub .wallet-cta-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 12px 9px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 680;
    letter-spacing: -.1px;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #7B6CF0 0%, var(--pp) 100%);
}

.pg-hub .wallet-cta-go svg {
    width: 14px;
    height: 14px;
}

/* The base rule above fills this button with linear-gradient(135deg, #7B6CF0, var(--pp))
   and labels it #fff. --pp is re-pointed to the gold family for the themed admin, so in
   DARK mode the gradient ends at champagne and the white label lands at 1.47:1 - the
   "Manage wallet" text disappears. Light mode only survives because --pa-gold-fg is the
   dark text gold there, which is why the bug looks mode-specific but is really a
   hardcoded-ink bug.

   Fixed by giving it the same treatment as every other primary CTA - gold fill, navy
   ink (HB-25795; black before) - which is mode-independent (AA even at the gradient's darkest stop) and
   retires the last hardcoded violet on this page. Gated, so a flag-off instance keeps
   the original violet gradient and its white label untouched. */
html[data-theme] .pg-hub .wallet-cta-go {
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
}

/* Same leftover, lower stakes: the hover lift was tinted with the old violet. */
html[data-theme] .pg-hub .wallet-cta:hover,
html[data-theme] .pg-hub .wallet-cta:focus-visible {
    box-shadow: 0 6px 18px var(--pa-gold-wash);
}

@media (max-width: 640px) {
    .pg-hub .wallet-cta {
        width: 100%;
    }

    .pg-hub .wallet-cta-text {
        flex: 1;
    }
}

/* ============================================================================
   Wallet page — balance, usage, history and recharge (Pages/Wallet.razor).
   Scoped under .wallet-page. Colours come from the MudBlazor palette variables so
   the page follows the admin theme (purple primary on white paper). Layout: a
   full-width hero (balance left, usage per tool right), then History (2/3) beside
   Recharge (1/3) from md up; a single column below that.
   ============================================================================ */

/* The admin container grows to 1920px and beyond on big monitors; the page keeps the
   width of the design instead and sits centred, so the cards stay readable. The bottom
   padding keeps the History card's last row (or its "Show more") off the edge of the
   scroll area: the layout gives the content no spacing of its own below the last page. */
.wallet-page {
    max-width: 1160px;
    margin: 0 auto;
    padding-bottom: 32px;
}

/* HB-25680 demo feedback: in the unified shell every page uses the full content width, as the rest of Admin does. */
.pg-shell .wallet-page {
    max-width: none;
}

.wallet-page .wallet-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* ---- hero: the one deliberately loud element on the page ---- */
.wallet-page .wallet-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--mud-palette-primary-darken) 0%, var(--mud-palette-primary) 60%, var(--mud-palette-primary-lighten) 100%);
    color: var(--mud-palette-primary-text);
    border-radius: 12px;
}

.wallet-page .wallet-hero .mud-typography {
    color: inherit;
}

.wallet-page .wallet-hero .mud-icon-button {
    color: inherit;
    padding: 4px;
}

.wallet-page .wallet-hero .mud-skeleton {
    background-color: rgba(255, 255, 255, .28);
}

@media (min-width: 960px) {
    .wallet-page .wallet-hero {
        grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
        gap: 32px;
    }

    .wallet-page .wallet-hero-usage {
        border-left: 1px solid rgba(255, 255, 255, .28);
        padding-left: 32px;
    }
}

@media (max-width: 959px) {
    .wallet-page .wallet-hero-usage {
        border-top: 1px solid rgba(255, 255, 255, .28);
        padding-top: 20px;
    }
}

.wallet-page .wallet-balance-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.wallet-page .wallet-balance-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 8px;
}

.wallet-page .wallet-balance-amount {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Hidden until the count-up script takes the figure over (Pages/Wallet.razor.cs, js/wallet.js): the final
   balance must never be on screen before the count starts from zero. Visibility, not display, so the
   line keeps its height and nothing jumps when the figure appears.
   Failsafe: should nothing ever reveal it (script not loaded, stalled, or an old copy), the figure shows
   itself after the delay below rather than staying hidden. A zero-length animation whose end state
   sticks (fill-mode forwards) is how CSS alone flips a property at a point in time; removing the class
   cancels it, so the normal path is unaffected. */
.wallet-page .wallet-balance-amount.counting {
    visibility: hidden;
    animation: wallet-balance-reveal 0s linear 2.5s forwards;
}

@keyframes wallet-balance-reveal {
    to {
        visibility: visible;
    }
}

.wallet-page .wallet-balance-unit {
    font-size: 16px;
    opacity: .8;
}

.wallet-page .wallet-balance-error {
    opacity: .9;
}

.wallet-page .wallet-balance-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: -4px;
    opacity: .9;
}

/* usage per tool: three columns inside the hero, white on purple */
.wallet-page .wallet-hero-usage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-content: center;
}

/* a note across the usage grid: nothing spent yet, or why the columns could not be refreshed */
.wallet-page .wallet-usage-note {
    grid-column: 1 / -1;
    opacity: .9;
}

.wallet-page .wallet-usage-name {
    font-weight: 500;
    opacity: .9;
}

.wallet-page .wallet-usage-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 8px;
}

.wallet-page .wallet-usage-amount {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.wallet-page .wallet-usage-unit {
    font-size: 12px;
    opacity: .8;
}

.wallet-page .wallet-usage-bar.mud-progress-linear {
    background-color: rgba(255, 255, 255, .25);
}

.wallet-page .wallet-usage-bar .mud-progress-linear-bar {
    background-color: #fff;
}

.wallet-page .wallet-usage-share {
    display: block;
    margin-top: 6px;
    opacity: .8;
}

/* ---- the two cards under the hero ---- */
.wallet-page .wallet-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (min-width: 960px) {
    .wallet-page .wallet-columns {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* ---- history: head and filters carry the padding; the rows rule edge to edge ---- */
.wallet-page .wallet-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 24px 12px;
}

.wallet-page .wallet-history-head-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wallet-page .wallet-history-count {
    color: var(--mud-palette-text-secondary);
}

.wallet-page .wallet-history-count.filtered {
    color: var(--mud-palette-primary);
}

.wallet-page .wallet-history-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 2fr);
    gap: 12px;
    padding: 0 24px 16px;
}

/* the filters have no label, so the dense outlined field can drop its label allowance */
.wallet-page .wallet-history-filters .mud-input-control {
    margin-top: 0;
}

@media (max-width: 700px) {
    .wallet-page .wallet-history-filters {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wallet-page .wallet-history-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.wallet-page .wallet-history-empty,
.wallet-page .wallet-history-error {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.wallet-page .wallet-history-more {
    display: flex;
    justify-content: center;
    padding: 10px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* avatar: two letters in the service's colour, neutral for rows without a service, green plus for credits */
.wallet-page .wallet-history-avatar {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.wallet-page .wallet-history-avatar.tint-0 {
    background-color: rgba(var(--mud-palette-info-rgb), .14);
    color: var(--mud-palette-info);
}

.wallet-page .wallet-history-avatar.tint-1 {
    background-color: rgba(var(--mud-palette-tertiary-rgb), .16);
    color: var(--mud-palette-tertiary-darken);
}

.wallet-page .wallet-history-avatar.tint-2 {
    background-color: rgba(var(--mud-palette-warning-rgb), .18);
    color: var(--mud-palette-warning-darken);
}

.wallet-page .wallet-history-avatar.tint-3 {
    background-color: rgba(var(--mud-palette-secondary-rgb), .14);
    color: var(--mud-palette-secondary-darken);
}

.wallet-page .wallet-history-avatar.tint-4 {
    background-color: rgba(var(--mud-palette-primary-rgb), .14);
    color: var(--mud-palette-primary);
}

.wallet-page .wallet-history-avatar.credit {
    background-color: rgba(var(--mud-palette-success-rgb), .16);
    color: var(--mud-palette-success-darken);
}

.wallet-page .wallet-history-text {
    flex: 1;
    min-width: 0;
}

.wallet-page .wallet-history-title {
    line-height: 1.3;
}

.wallet-page .wallet-history-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wallet-page .wallet-history-amount.credit {
    color: var(--mud-palette-success);
}

/* ---- recharge: package tiles behave like a radio group and look like one ---- */
.wallet-page .wallet-recharge {
    container-type: inline-size;
}

.wallet-page .wallet-packages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* placeholder tiles while the packages load; same footprint as a real tile */
.wallet-page .wallet-package-skeleton {
    border-radius: var(--mud-default-borderradius);
}

.wallet-page .wallet-package {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background-color .15s;
}

.wallet-page .wallet-package:hover {
    border-color: var(--mud-palette-primary);
}

.wallet-page .wallet-package:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.wallet-page .wallet-package.selected {
    background: var(--mud-palette-primary-hover);
    border-color: var(--mud-palette-primary);
}

.wallet-page .wallet-package-radio {
    flex: none;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.wallet-page .wallet-package.selected .wallet-package-radio {
    border-color: var(--mud-palette-primary);
}

.wallet-page .wallet-package.selected .wallet-package-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.wallet-page .wallet-package-text {
    flex: 1;
    min-width: 0;
}

.wallet-page .wallet-package-title {
    font-weight: 600;
    line-height: 1.3;
}

.wallet-page .wallet-package-price {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* the label carries the price and the token count; in a narrow column it may need two lines */
.wallet-page .wallet-pay .mud-button-label {
    white-space: normal;
    line-height: 1.3;
}

/* the billing dialog renders outside .wallet-page. While the order is being placed its button label is a
   spinner and a word; the spinner takes the icon's slot */
.wallet-billing-dialog .wallet-pay-spinner {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

@container (max-width: 320px) {
    .wallet-page .wallet-package-title {
        font-size: 15px;
    }

    .wallet-page .wallet-pay .mud-button-label {
        font-size: 13px;
        letter-spacing: .01em;
    }
}

@media (max-width: 600px) {
    .wallet-page .wallet-hero {
        padding: 20px;
    }

    .wallet-page .wallet-balance-amount {
        font-size: 38px;
    }

    .wallet-page .wallet-hero-usage {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .wallet-page .wallet-history-head,
    .wallet-page .wallet-history-filters,
    .wallet-page .wallet-history-row,
    .wallet-page .wallet-history-empty,
    .wallet-page .wallet-history-error,
    .wallet-page .wallet-history-more {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================================================
   HB-25798 - PropGenie shell: sidebar, top bar and content width, drawn only
   inside MudLayout.pg-shell, i.e. while admin_unification_ui is on. Off, none
   of these rules match and the layout is today's.

   The spec is plan §5.10 (PropGenie Preview v3) and lives in the --pgs-*
   variables below, one per measurement or colour, so Marketing's sidebar
   (HB-25789) can mirror it name for name in Tailwind; shell/SIDEBAR-SPEC.md
   lists each one with its Preview source and Tailwind equivalent.

   Colours read HB-25795's generated tokens.css (--pg-*) and fall back to the
   Preview v3 values, so the shell looks right before those tokens reach this
   branch and picks them up untouched after. Light is the default; dark
   follows html[data-theme="dark"], as tokens.css does. The golds are the one
   exception: they read Admin's --pa-* golds, which keep the client's HB-25293
   light golds (shell/DELTAS.md) and are the --pg-* golds in dark.
   ========================================================================= */
.pg-shell {
    /* Measurements */
    --pgs-side-width: 280px;
    --pgs-side-pad-y: 18px;
    --pgs-side-pad-x: 14px;
    --pgs-topbar-height: 64px;
    /* The path to launch bar under the top bar (HB-26052). */
    --pgs-path-height: 40px;
    --pgs-content-pad: 24px;
    --pgs-brand-mark: 34px;
    --pgs-label-size: 10.5px;
    --pgs-label-weight: 600;
    --pgs-label-tracking: .12em;
    --pgs-row-size: 13.5px;
    --pgs-row-weight: 500;
    --pgs-row-pad-y: 8px;
    --pgs-row-pad-x: 10px;
    --pgs-row-gap: 10px;
    --pgs-row-radius: var(--pg-radius-sm, 10px);
    --pgs-card-radius: var(--pg-radius, 14px);
    --pgs-icon-size: 19px;
    --pgs-icon-rest: .6;
    --pgs-pill-size: 10.5px;
    --pgs-font: var(--pg-font-sans, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --pgs-font-mono: var(--pg-font-mono, "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace);
    /* Colours, light */
    --pgs-bg: var(--pg-bg, #F4F5F9);
    --pgs-panel: var(--pg-panel, #FFFFFF);
    --pgs-sidebar: var(--pg-grad-sidebar, linear-gradient(180deg, #FFFFFF 0%, #F8F9FD 100%));
    --pgs-text: var(--pg-text, #0E1524);
    --pgs-navtext: var(--pg-navtext, #3A4357);
    --pgs-muted: var(--pg-muted, #5B6478);
    --pgs-dim: var(--pg-dim, #8992A6);
    --pgs-line: var(--pg-line, rgba(16, 24, 40, .10));
    --pgs-flat: var(--pg-flat, rgba(16, 24, 40, .035));
    /* Golds, both modes: Admin's --pa-* (HB-25293 light golds, --pg-* golds in dark). */
    --pgs-gold: var(--pa-gold-fg);
    --pgs-icon: var(--pa-brand-icon);
    --pgs-gold-wash: var(--pa-gold-wash);
    --pgs-line-gold: var(--pa-gold-border);
    --pgs-active: var(--pa-nav-active-wash);
    --pgs-grad-gold: var(--pg-grad-gold, linear-gradient(135deg, #FFDA72 0%, #F2CD7A 45%, #CD9650 100%));
    --pgs-on-gold: var(--pg-on-gold, #1B1B3E);
    --pgs-ok: var(--pg-ok, #1C8F3A);
    --pgs-warn: var(--pg-warn, #A8690C);
    --pgs-bad: var(--pg-bad, #CC3B3B);
    /* MudLayout sizes the app bar and offsets the content from this. */
    --mud-appbar-height: var(--pgs-topbar-height);
    font-family: var(--pgs-font);
}

html[data-theme="dark"] .pg-shell {
    --pgs-bg: var(--pg-bg, #07101D);
    --pgs-panel: var(--pg-panel, #0F1624);
    --pgs-sidebar: var(--pg-grad-sidebar, linear-gradient(180deg, #0A1220 0%, #07101D 100%));
    --pgs-text: var(--pg-text, #FCFCFF);
    --pgs-navtext: var(--pg-navtext, #C3C8D8);
    --pgs-muted: var(--pg-muted, #A3A8BA);
    --pgs-dim: var(--pg-dim, #6B7090);
    --pgs-line: var(--pg-line, rgba(255, 255, 255, .08));
    --pgs-flat: var(--pg-flat, rgba(255, 255, 255, .04));
    --pgs-ok: var(--pg-ok, #61CE70);
    --pgs-warn: var(--pg-warn, #FFC666);
    --pgs-bad: var(--pg-bad, #E66060);
}

/* ---- Drawer --------------------------------------------------------------- */
.pg-shell .pg-drawer.mud-drawer {
    background: var(--pgs-sidebar);
    border-right: 1px solid var(--pgs-line);
    color: var(--pgs-navtext);
}

.pg-shell .pg-drawer .mud-drawer-content {
    height: 100%;
}

.pg-phase-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 100%;
    padding: var(--pgs-side-pad-y) var(--pgs-side-pad-x);
    font-family: var(--pgs-font);
}

/* ---- Logo block ----------------------------------------------------------- */
.pg-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 16px;
    color: inherit;
    text-decoration: none;
}

.pg-brand-mark {
    width: var(--pgs-brand-mark);
    height: var(--pgs-brand-mark);
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--pgs-row-radius);
    background: var(--pgs-grad-gold);
    color: var(--pgs-on-gold);
}

.pg-brand-mark .mud-icon-root {
    font-size: 20px;
}

.pg-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pg-brand-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pgs-text);
}

.pg-brand-sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pgs-gold);
}

.pg-brand-tenant {
    max-width: 72px;
    max-height: 28px;
    margin-left: auto;
    object-fit: contain;
}

/* ---- Section labels and rows ---------------------------------------------- */
.pg-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pg-nav-label {
    padding: 14px var(--pgs-row-pad-x) 6px;
    font-size: var(--pgs-label-size);
    font-weight: var(--pgs-label-weight);
    letter-spacing: var(--pgs-label-tracking);
    text-transform: uppercase;
    color: var(--pgs-dim);
}

.pg-sub-label {
    padding: 10px 8px 2px;
    font-size: var(--pgs-label-size);
    font-weight: var(--pgs-label-weight);
    letter-spacing: var(--pgs-label-tracking);
    text-transform: uppercase;
    color: var(--pgs-dim);
}

.pg-shell .pg-nav-link,
.pg-shell .pg-sub-link {
    position: relative;
    display: flex;
    align-items: center;
    /* A Marketing row is a <button> when Admin has no Marketing URL for its href, and a button picks up a centred
       justify-content: an icon-less indented row (Image Studio...) then sat mid-sidebar. Every row starts left. */
    justify-content: flex-start;
    gap: var(--pgs-row-gap);
    width: 100%;
    padding: var(--pgs-row-pad-y) var(--pgs-row-pad-x);
    border: 0;
    border-radius: var(--pgs-row-radius);
    background: none;
    font: inherit;
    font-size: var(--pgs-row-size);
    font-weight: var(--pgs-row-weight);
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    color: var(--pgs-navtext);
    cursor: default;
}

.pg-shell a.pg-nav-link,
.pg-shell a.pg-sub-link,
.pg-shell button.pg-nav-link,
.pg-shell button.pg-sub-link {
    cursor: pointer;
}

.pg-shell a.pg-nav-link:hover,
.pg-shell a.pg-sub-link:hover,
.pg-shell button.pg-nav-link:hover,
.pg-shell button.pg-sub-link:hover {
    background: var(--pgs-flat);
    color: var(--pgs-text);
}

.pg-shell .pg-nav-link:focus-visible,
.pg-shell .pg-sub-link:focus-visible {
    outline: 2px solid var(--pgs-line-gold);
    outline-offset: -2px;
}

/* Rows inside a group sit a step smaller, on the same grid. */
.pg-shell .pg-sub-link {
    font-size: 13px;
}

.pg-shell .pg-sub-link.child {
    padding-left: calc(var(--pgs-row-pad-x) + var(--pgs-icon-size) + var(--pgs-row-gap));
}

.pg-nav-icon.mud-icon-root {
    flex: none;
    width: var(--pgs-icon-size);
    height: var(--pgs-icon-size);
    font-size: var(--pgs-icon-size);
    color: var(--pgs-icon);
    opacity: var(--pgs-icon-rest);
}

.pg-nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active row: the gold wash fading 15% -> 2%, full text colour, a solid gold icon and no side rail. An open group
   takes the same wash so the current page's branch reads from the top. */
.pg-shell .pg-nav-link.active,
.pg-shell .pg-sub-link.active,
.pg-shell .pg-nav-link.open,
.pg-shell .pg-sub-link.open {
    background: var(--pgs-active);
    color: var(--pgs-text);
    box-shadow: none;
}

.pg-shell .pg-nav-link.active .pg-nav-icon,
.pg-shell .pg-sub-link.active .pg-nav-icon,
.pg-shell .pg-nav-link.open .pg-nav-icon,
.pg-shell .pg-sub-link.open .pg-nav-icon {
    opacity: 1;
}

/* The gold ring the Preview puts on its "Start here" row, "Build your prop firm" (HB-25981). */
.pg-shell .pg-nav-link.highlight {
    margin: 4px 0;
    gap: 0;
    color: var(--pgs-text);
    box-shadow: 0 0 0 1px var(--pgs-line-gold), 0 0 18px -6px rgba(242, 205, 122, .75);
}

/* "Build your prop firm" and its tag are 5px too wide for the 280px drawer (the mockup's is 296px), so the label keeps
   the usual gap after the icon and gives up a little before the tag instead. */
.pg-shell .pg-nav-link.highlight .pg-nav-icon {
    margin-right: var(--pgs-row-gap);
}

.pg-shell .pg-nav-link.highlight .pg-nav-end {
    padding-left: 4px;
}

.pg-shell .pg-nav-link.highlight .pg-pill {
    padding: 1px 6px;
}

.pg-nav-end {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--pgs-dim);
}

.pg-nav-end .mud-icon-root {
    font-size: 16px;
}

.pg-nav-end .pg-nav-chev {
    font-size: 18px;
    transition: transform .2s ease;
}

.pg-shell .pg-nav-link.open .pg-nav-chev,
.pg-shell .pg-sub-link.open .pg-nav-chev {
    transform: rotate(180deg);
    color: var(--pgs-gold);
}

.pg-nav-drop {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 8px calc(var(--pgs-row-pad-x) + var(--pgs-icon-size) / 2);
    padding-left: 8px;
    border-left: 1px solid var(--pgs-line-gold);
}

/* ---- Badge / tag pill: one class for counts and tags, with tone modifiers --- */
.pg-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: var(--pgs-font);
    font-size: var(--pgs-pill-size);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--pgs-gold-wash);
    color: var(--pgs-gold);
}

.pg-pill-ok {
    background: color-mix(in srgb, var(--pgs-ok) 14%, transparent);
    color: var(--pgs-ok);
}

.pg-pill-warn {
    background: color-mix(in srgb, var(--pgs-warn) 14%, transparent);
    color: var(--pgs-warn);
}

.pg-pill-bad {
    background: color-mix(in srgb, var(--pgs-bad) 14%, transparent);
    color: var(--pgs-bad);
}

/* ---- Locked rows: greyed with a lock, still focusable, reason on hover and on keyboard focus --- */
.pg-shell .pg-nav-link.locked,
.pg-shell .pg-sub-link.locked {
    color: var(--pgs-dim);
}

.pg-shell .pg-nav-link.locked .pg-nav-icon,
.pg-shell .pg-sub-link.locked .pg-nav-icon {
    color: var(--pgs-dim);
}

/* The reason shows in flow on a line of its own under the label, so the rows below move down while it is up
   instead of being covered (QA, HB-25680): a keyboard user tabbing on still sees the row they land on. */
.pg-shell .pg-nav-link.locked,
.pg-shell .pg-sub-link.locked {
    flex-wrap: wrap;
}

.pg-nav-reason {
    display: none;
    flex: 0 1 auto;
    margin: 6px 0 2px calc(var(--pgs-icon-size) + var(--pgs-row-gap));
    max-width: 230px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: normal;
    background: var(--pgs-panel);
    color: var(--pgs-text);
    box-shadow: 0 0 0 1px var(--pgs-line-gold), 0 10px 24px -12px rgba(0, 0, 0, .4);
}

.locked:hover > .pg-nav-reason,
.locked:focus > .pg-nav-reason {
    display: block;
    /* A line of its own: the label, pills and lock stay on the first. */
    flex-basis: calc(100% - var(--pgs-icon-size) - var(--pgs-row-gap));
}

.pg-side-book {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--pgs-grad-gold);
    color: var(--pgs-on-gold);
}

/* As a link: "nav a" ties the dark theme's global link colour and comes later, so the ink stays black on gold. */
nav a.pg-side-book {
    color: var(--pa-on-gold);
    cursor: pointer;
}

.pg-side-book b {
    display: block;
    font-size: var(--pgs-row-size);
}

.pg-side-book small {
    display: block;
    font-size: 11px;
    opacity: .8;
}

/* ---- Footer: phase card, then tenant name and email ------------------------ */
.pg-side-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
}

.pg-quota {
    padding: 14px;
    border: 1px solid var(--pgs-line-gold);
    border-radius: var(--pgs-card-radius);
    background: linear-gradient(160deg, rgba(242, 205, 122, .08), rgba(242, 205, 122, .01));
}

.pg-quota h4 {
    margin: 0 0 4px;
    font-size: 14.5px;
    color: var(--pgs-gold);
}

.pg-quota p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--pgs-muted);
}

.pg-quota-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--pgs-line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pgs-text);
}

.pg-quota-row .mud-icon-root {
    font-size: 17px;
    color: var(--pgs-gold);
}

.pg-quota-row b {
    margin-left: auto;
    font-family: var(--pgs-font-mono);
    font-size: 12px;
    color: var(--pgs-gold);
}

.pg-meter {
    height: 6px;
    margin: 10px 0 6px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--pgs-flat);
}

.pg-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pgs-grad-gold);
}

.pg-quota p.pg-quota-hint {
    font-size: 11.5px;
    color: var(--pgs-dim);
}

.pg-quota-cta {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pgs-gold);
}

.pg-tenant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 2px;
    border-top: 1px solid var(--pgs-line);
}

.pg-tenant-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pgs-gold-wash);
    color: var(--pgs-gold);
    font-size: 13px;
    font-weight: 700;
}

.pg-tenant-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pg-tenant-name {
    overflow: hidden;
    font-size: var(--pgs-row-size);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pgs-text);
}

.pg-tenant-email {
    overflow: hidden;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pgs-muted);
}

/* ---- Top bar: 64px, card background, bottom border ------------------------- */
/* HB-26052: the path to launch bar is the top bar's second row and draws the bottom line itself (the pg-path block). */
.pg-shell .pg-topbar.mud-appbar {
    height: calc(var(--pgs-topbar-height) + var(--pgs-path-height));
    background: var(--pgs-panel);
    border-bottom: 0;
    box-shadow: none;
    color: var(--pgs-text);
    font-family: var(--pgs-font);
}

.pg-shell .pg-topbar .mud-toolbar-appbar {
    gap: 12px;
    padding: 0 var(--pgs-content-pad);
}

.pg-topbar-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--pgs-line);
    border-radius: var(--pgs-row-radius);
    background: none;
    color: var(--pgs-muted);
    cursor: pointer;
}

.pg-topbar-icon:hover {
    background: var(--pgs-flat);
    color: var(--pgs-text);
}

.pg-shell .pg-topbar-search.global-search-wrap {
    flex: 0 1 420px;
    min-width: 0;
}

.pg-topbar-spacer {
    flex: 1 1 auto;
}

.pg-theme-pill {
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--pgs-line);
    border-radius: 999px;
    background: var(--pgs-flat);
    cursor: pointer;
}

.pg-theme-opt {
    display: grid;
    place-items: center;
    width: 28px;
    height: 26px;
    border-radius: 999px;
    color: var(--pgs-dim);
}

.pg-theme-opt .mud-icon-root {
    font-size: 16px;
}

.pg-theme-opt.on {
    background: var(--pgs-panel);
    color: var(--pgs-gold);
    box-shadow: 0 0 0 1px var(--pgs-line-gold);
}

.pg-theme-pill:focus-visible,
.pg-topbar-icon:focus-visible,
.pg-shell .pg-topbar-signout:focus-visible {
    outline: 2px solid var(--pgs-line-gold);
    outline-offset: 2px;
}

.pg-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--pgs-row-size);
    font-weight: 500;
    color: var(--pgs-navtext);
}

.pg-topbar-user .mud-icon-root {
    font-size: 20px;
    color: var(--pgs-gold);
}

.pg-topbar-user-name {
    overflow: hidden;
    max-width: 180px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-shell .pg-topbar-signout {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pgs-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--pgs-text);
}

.pg-shell .pg-topbar-signout:hover {
    border-color: var(--pgs-line-gold);
    background: var(--pgs-gold-wash);
}

.pg-shell .pg-topbar-signout .mud-icon-root {
    font-size: 16px;
}

/* Book a call (HB-25680 demo feedback): the shell's one gold button in the top bar, the sidebar card's gold. */
.pg-shell .pg-topbar-book {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--pgs-grad-gold);
    box-shadow: 0 2px 10px -4px rgba(205, 150, 80, .6);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    color: var(--pgs-on-gold);
}

.pg-shell .pg-topbar-book:hover {
    filter: brightness(1.05);
}

.pg-shell .pg-topbar-book:focus-visible {
    outline: 2px solid var(--pgs-line-gold);
    outline-offset: 2px;
}

.pg-shell .pg-topbar-book .mud-icon-root {
    font-size: 16px;
}

/* HB-26068, PropGenie Preview v5: Fast launch after Book a call, the mockup's gold-outlined button, and the preview's
   Genie tokens, a gold-washed chip shown only on the Suite's pages. Both moved here from the sidebar. */
.pg-shell .pg-topbar-launch {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pgs-gold);
    border-radius: 999px;
    background: var(--pgs-gold-wash);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    color: var(--pgs-gold);
}

.pg-shell .pg-topbar-launch:hover {
    background: var(--pgs-line-gold);
}

.pg-shell .pg-topbar-launch:focus-visible {
    outline: 2px solid var(--pgs-line-gold);
    outline-offset: 2px;
}

.pg-shell .pg-topbar-launch .mud-icon-root {
    font-size: 16px;
}

.pg-shell .pg-topbar-tokens {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pgs-line-gold);
    border-radius: 999px;
    background: var(--pgs-gold-wash);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pgs-gold);
}

.pg-shell .pg-topbar-tokens b {
    font-family: var(--pgs-font-mono);
    font-size: 13.5px;
    color: var(--pgs-text);
}

.pg-shell .pg-topbar-tokens .mud-icon-root {
    font-size: 16px;
}

/* Fast launch, and the chip on the Suite's pages, leave pre-sale's bar short of room below 1600px: Tour and the chip
   keep only their icons, and the user's name (the sidebar's footer has it too) goes, so search keeps its width. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
    .pg-shell .pg-topbar-presale .pg-topbar-tour span,
    .pg-shell .pg-topbar-presale .pg-topbar-tokens span,
    .pg-shell .pg-topbar-presale .pg-topbar-user-name {
        display: none;
    }

    .pg-shell .pg-topbar-presale .pg-topbar-tour {
        padding: 0 9px;
    }

    /* As on phones: once the name is gone the icon stays whole instead of being crushed as a shrinkable item. */
    .pg-shell .pg-topbar-presale .pg-topbar-user {
        flex: none;
    }
}

/* ---- Content: full width, 24px padding (plan §04 "Content width") ---------- */
/* MudBlazor offsets the content by --mud-appbar-height (less on small screens); the top bar is that plus the path to
   launch bar at every width (HB-26052). */
.pg-shell .mud-main-content {
    padding-top: calc(var(--pgs-topbar-height) + var(--pgs-path-height));
    background: var(--pgs-bg);
}

.pg-content {
    padding: var(--pgs-content-pad);
}

/* Below 1024px the drawer is off-canvas (Temporary, set by LoggedInLayout); the top bar keeps what fits. */
@media (max-width: 1023.98px) {
    .pg-shell .pg-topbar .mud-toolbar-appbar {
        padding: 0 16px;
    }

    .pg-topbar-user-name,
    .pg-topbar-signout span,
    .pg-topbar-book span,
    .pg-topbar-launch span,
    .pg-topbar-tokens span,
    .pg-topbar-build {
        display: none;
    }

    .pg-content {
        padding: 16px;
    }

    /* The icon stays whole once the name is gone: as a shrinkable flex item it was crushed to a sliver. */
    .pg-topbar-user {
        flex: none;
    }

    /* Down here the drawer is only ever Temporary, but Blazor draws the layout once before it has heard
       the 1024px query (LoggedInLayout.ReadNarrowAsync), as the desktop's docked drawer; on a slow page
       that docked frame lasted seconds. Until the query lands, nothing is docked. */
    .pg-shell .pg-drawer.mud-drawer-persistent {
        visibility: hidden;
    }

    .pg-shell.mud-drawer-open-persistent-left .mud-appbar,
    .pg-shell.mud-drawer-open-persistent-left .mud-main-content {
        margin-left: 0;
        width: 100%;
    }
}

/* Phones: the search box would be squeezed to a few letters of its placeholder, so it rests as a
   36px icon tile and opens across the whole bar while it has focus (a tap on the tile focuses it). */
@media (max-width: 640px) {
    .pg-shell .pg-topbar .mud-toolbar-appbar {
        gap: 8px;
    }

    .pg-shell .pg-topbar-search.global-search-wrap {
        flex: none;
        width: 36px;
        margin-bottom: 0;
    }

    .pg-shell .pg-topbar-search .global-search-input {
        height: 36px;
        padding-right: 0;
        cursor: pointer;
    }

    .pg-shell .pg-topbar-search .global-search-input::placeholder {
        color: transparent;
    }

    .pg-shell .pg-topbar-search.global-search-wrap:focus-within {
        position: absolute;
        top: 50%;
        right: 16px;
        left: 16px;
        z-index: 2;
        width: auto;
        max-width: none;
        transform: translateY(-50%);
    }

    .pg-shell .pg-topbar-search:focus-within .global-search-input {
        padding-right: 12px;
        background: var(--pgs-panel);
        cursor: text;
    }

    .pg-shell .pg-topbar-search:focus-within .global-search-input::placeholder {
        color: var(--pgs-dim);
    }

    /* Each page frame carries its own desktop gutter on top of .pg-content's 16px, which left
       phones a 44px margin either side; the shell's gutter is enough here. */
    .pg-shell .pa-ov,
    .pg-shell .pa-ps-page,
    .pg-shell .pa-act {
        padding: 8px 0;
    }

    /* Admin's own pages were laid out for a desktop row, and one too-wide row made the whole page
       scroll sideways under the top bar. A table toolbar (status filter + search) wraps, so the search
       drops to its own line; a status button group scrolls inside itself rather than widen the page. */
    .pg-shell .pg-content .mud-table-toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
        height: auto;
        min-height: var(--mud-appbar-height, 64px);
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Spacers push whatever follows them to the far end of a line, which reads as stray once it wraps. */
    .pg-shell .pg-content .mud-table-toolbar > .flex-grow-1 {
        display: none;
    }

    .pg-shell .pg-content .mud-button-group-root {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .pg-shell .pg-content .mud-button-group-root > .mud-button-root {
        flex: none;
    }

    /* A row of filters or actions (Images, Emails, News, Risk flags) wraps onto as many lines as it needs. */
    .pg-shell .pg-content .d-flex.flex-row,
    .pg-shell .pg-content .mud-paper.d-flex:not(.flex-column),
    .pg-shell .pg-content .mud-paper.d-flex:not(.flex-column) > div {
        flex-wrap: wrap;
        row-gap: 8px;
        max-width: 100%;
    }

    /* Emails: the template pickers share a line at a zero basis, so they never wrapped, they shrank
       past their labels; and the editor stacks its code above its preview. */
    .pg-shell .pg-content .email-select-wrapper {
        flex: 1 1 140px;
    }

    .pg-shell .pg-content .email-select-wrapper > * {
        min-width: 0;
    }

    .pg-shell .pg-content .playpen {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "leftBtnArea"
            "htmlContent"
            "rightBtnArea"
            "previewContent";
    }

    /* object-fit, not height:auto: an image with a set height keeps its box and only its picture scales. */
    .pg-shell .pg-content img {
        max-width: 100%;
        object-fit: contain;
    }
}

/* Tables on phones and small tablets. Below 600px (960px for Breakpoint.Sm tables) MudBlazor stacks each row into a
   card of "label: value" lines, but the label is the cell's DataLabel, which Admin's tables don't set, so a phone got a
   column of right-aligned values that nobody could read. Under the shell they stay real tables, headers and all, and
   scroll sideways inside their own box; the page itself never does. */
@media (max-width: 959.98px) {
    .pg-shell .pg-content .mud-xs-table .mud-table-container,
    .pg-shell .pg-content .mud-sm-table .mud-table-container {
        overflow-x: auto;
    }

    .pg-shell .pg-content .mud-xs-table .mud-table-root,
    .pg-shell .pg-content .mud-sm-table .mud-table-root {
        min-width: 100%;
        width: max-content;
    }

    .pg-shell .pg-content .mud-xs-table .mud-table-root .mud-table-head,
    .pg-shell .pg-content .mud-sm-table .mud-table-root .mud-table-head {
        display: table-header-group;
    }

    .pg-shell .pg-content .mud-xs-table .mud-table-root .mud-table-foot,
    .pg-shell .pg-content .mud-sm-table .mud-table-root .mud-table-foot {
        display: table-footer-group;
    }

    .pg-shell .pg-content .mud-xs-table .mud-table-smalldevices-sortselect,
    .pg-shell .pg-content .mud-sm-table .mud-table-smalldevices-sortselect {
        display: none;
    }

    .pg-shell .pg-content .mud-xs-table .mud-table-row,
    .pg-shell .pg-content .mud-sm-table .mud-table-row {
        display: table-row;
    }

    .pg-shell .pg-content .mud-xs-table .mud-table-cell,
    .pg-shell .pg-content .mud-sm-table .mud-table-cell,
    .pg-shell .pg-content .mud-xs-table .mud-table-cell-hide,
    .pg-shell .pg-content .mud-sm-table .mud-table-cell-hide {
        display: table-cell;
        visibility: visible;
        height: auto;
        max-width: 320px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .pg-shell .pg-content .mud-xs-table.mud-table-dense .mud-table-cell,
    .pg-shell .pg-content .mud-sm-table.mud-table-dense .mud-table-cell {
        padding: 6px 16px;
    }

    .pg-shell .pg-content .mud-xs-table .mud-table-cell::before,
    .pg-shell .pg-content .mud-sm-table .mud-table-cell::before {
        content: none;
    }
}

/* Dialogs on phones. MudBlazor renders them at the end of <body>, outside .pg-shell, so they are scoped by the
   shell being on the page. They were laid out for a desktop: a 32px margin each side, 24px of grid gutter on top of
   the dialog's and the container's own padding, and fields set side by side (xs="8" beside xs="4", or the two-column
   editor) that ran off the dialog's right edge. Here the dialog takes the width, the padding is halved, and every
   field gets a line of its own; a cell with no field in it (a colour swatch) keeps its size. */
@media (max-width: 600px) {
    body:has(.pg-shell) .mud-dialog {
        width: calc(100% - 16px);
        max-width: none;
        margin: 8px;
        max-height: calc(100dvh - 16px);
    }

    body:has(.pg-shell) .mud-dialog .mud-dialog-title {
        padding: 16px 16px 8px;
    }

    body:has(.pg-shell) .mud-dialog .mud-dialog-content {
        padding: 0 12px;
    }

    body:has(.pg-shell) .mud-dialog .mud-dialog-content .mud-container--gutters {
        padding-right: 4px;
        padding-left: 4px;
    }

    body:has(.pg-shell) .mud-dialog .mud-grid-spacing-xs-6 {
        width: calc(100% + 12px);
        margin-top: -12px;
        margin-left: -12px;
    }

    body:has(.pg-shell) .mud-dialog .mud-grid-spacing-xs-6 > .mud-grid-item {
        padding-top: 12px;
        padding-left: 12px;
    }

    body:has(.pg-shell) .mud-dialog .mud-grid-item:has(.mud-input-control, .mud-picker, textarea) {
        flex-basis: 100%;
        max-width: 100%;
    }

    body:has(.pg-shell) .mud-dialog .d-flex.flex-row {
        flex-wrap: wrap;
    }

    body:has(.pg-shell) .mud-dialog .mud-input-control {
        min-width: 0;
    }

    /* A select or picker sized itself to its longest option and ran off the edge, or to its label and cut it. */
    body:has(.pg-shell) .mud-dialog .d-flex.flex-row > .mud-input-control,
    body:has(.pg-shell) .mud-dialog .d-flex.flex-row > .mud-select,
    body:has(.pg-shell) .mud-dialog .d-flex.flex-row > .mud-picker {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The two-column editors fix their halves at 500px (the announcement's textarea inline, hence !important). */
    body:has(.pg-shell) .mud-dialog .playpen > * {
        width: auto;
        max-width: 100%;
        margin-left: 0;
    }

    body:has(.pg-shell) .mud-dialog .playpen textarea {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    body:has(.pg-shell) .mud-dialog .playpen {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "leftBtnArea"
            "htmlContent"
            "rightBtnArea"
            "previewContent";
    }
}

/* Above the drawer and app bar, below MudBlazor's dialogs and snackbars. */
.pg-phase-switch {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1350;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px 5px 14px;
    border: 1px solid var(--pa-gold-border);
    border-radius: 99px;
    background: var(--mud-palette-surface);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .45);
    font-family: Inter, var(--mud-typography-default-family);
    font-size: 12px;
}

.pg-phase-switch-label {
    margin-right: 6px;
    white-space: nowrap;
    color: var(--mud-palette-text-disabled);
}

.pg-phase-switch button {
    padding: 6px 12px;
    border: 0;
    border-radius: 99px;
    background: none;
    font: inherit;
    font-weight: 650;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.pg-phase-switch button:hover {
    color: var(--mud-palette-text-primary);
}

.pg-phase-switch button.on {
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
}

.pg-phase-switch button:disabled {
    cursor: progress;
    opacity: .7;
}

@media (max-width: 640px) {
    .pg-phase-switch {
        padding: 4px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .pg-phase-switch-label {
        display: none;
    }

    .pg-phase-switch button {
        padding: 6px 10px;
        white-space: nowrap;
    }
}

/* Where the drawer is off-canvas it slides in OVER the page, so the switcher goes under it (MudBlazor's
   drawer is z-index 1100) instead of covering the menu's bottom rows; and the page leaves room at its
   foot so the switcher never hides the last of the content. */
@media (max-width: 1023.98px) {
    .pg-phase-switch {
        z-index: 1099;
    }

    .pg-shell:has(> .pg-phase-switch) .pg-content {
        padding-bottom: 136px;
    }
}

/* ==========================================================================
   Advanced Analytics panel (HB-23519) — account detail
   Values copied from the Step 1 UI reference so the admin view reads the same
   as the customer-facing design.

   These live here, not in a component <style> block or a .razor.css file:
   Blazor CSS isolation is disabled in this app (AdminWeb.styles.css is
   commented out in _Layout.cshtml), and site.css is loaded AFTER
   MudBlazor.min.css so these rules win without needing !important.

   The panel's cards and tables use plain markup rather than MudPaper /
   MudSimpleTable on purpose. Mud's own selectors (e.g. `.mud-simple-table
   table th`) are more specific than a single-class rule, so they override the
   reference's header colours, padding and border radius. Plain elements carry
   no mud-* classes, so nothing competes and the design renders as specified.
   ========================================================================== */

.aa-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* One column once there isn't room for two side by side. */
@media (max-width: 960px) {
    .aa-grid2 {
        grid-template-columns: 1fr;
    }
}

.aa-card {
    background: #fff;
    border: 1px solid #e7e9f0;
    border-radius: 12px;
    padding: 15px 17px;
}

.aa-card-h {
    font-size: 14px;
    font-weight: 800;
    color: #101a37;
    margin: 0 0 13px 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.aa-tbl {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    /* Required for the rounded corners to clip the dark header row. */
    overflow: hidden;
    font-size: 13px;
}

.aa-tbl thead th {
    background: #33415f;
    color: #fff;
    text-align: left;
    padding: 9px 8px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2px;
    vertical-align: bottom;
}

.aa-tbl td {
    padding: 9px 8px;
    border-top: 1px solid #eef0f5;
    color: #2a3556;
    vertical-align: middle;
}

.aa-tbl tbody tr:nth-child(even) {
    background: #f7f9fc;
}

.aa-pos {
    color: #1f9d57;
    font-weight: 700;
}

.aa-neg {
    color: #d6453d;
    font-weight: 700;
}

.aa-note {
    font-size: 11px;
    color: #8a93ad;
}

.aa-live {
    font-size: 10px;
    color: #1f9d57;
    font-weight: 700;
}

/* --- calendar --- */

.aa-calbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}

.aa-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.aa-cal-head {
    margin-bottom: 6px;
}

.aa-cal-head > div {
    font-size: 10px;
    color: #8a93ad;
    text-align: center;
    font-weight: 600;
}

.aa-cd {
    border-radius: 7px;
    padding: 6px;
    min-height: 42px;
    font-size: 10px;
    text-align: right;
    color: #8a93ad;
}

.aa-cd-pnl {
    font-size: 11px;
    font-weight: 700;
    margin-top: 7px;
    text-align: center;
}

.aa-cd-empty {
    color: #aab;
}

/* --- calendar controls (ghost buttons + month picker, per the reference) --- */

.aa-btn-ghost {
    background: #eef3ff;
    color: #1d4ed8;
    border: none;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.5;
}

.aa-btn-ghost:disabled {
    opacity: .45;
    cursor: default;
}

.aa-select {
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid #dfe3ec;
    font-size: 13px;
    background: #fff;
    color: #1b2440;
}

.aa-ml-auto {
    margin-left: auto;
}

/* ==========================================================================
   Advanced Analytics — Phase 2: account performance summary + risk proximity.
   Same `aa-` prefix and the same reasoning as the block above: these rules live
   here rather than in a component <style> or .razor.css because Blazor CSS
   isolation is disabled in this app, and site.css loads after MudBlazor.min.css
   so a single-class rule wins without !important.
   ========================================================================== */

/* Full-width cards that stack, rather than sitting in .aa-grid2 which carries
   its own bottom margin. Applied only to the Phase 2 cards so the Phase 1
   layout is untouched. */
.aa-stack {
    margin-bottom: 16px;
}

/* --- performance summary: the 12-tile grid --- */
.aa-statgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

/* 12 tiles across 5 columns needs the columns to collapse in steps, or the
   tiles get too narrow to read the dual-value lines. */
@media (max-width: 1280px) {
    .aa-statgrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 960px) {
    .aa-statgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .aa-statgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.aa-stat {
    background: #f7f9fc;
    border: 1px solid #eef0f5;
    border-radius: 10px;
    padding: 9px 11px;
}

.aa-stat-l {
    font-size: 10.5px;
    color: #8a93ad;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.aa-stat-v {
    font-size: 17px;
    font-weight: 800;
    color: #101a37;
    margin-top: 3px;
}

/* Secondary line on the dual-value tiles (expectancy, long/short, drawdowns). */
.aa-stat-s {
    font-size: 11px;
    font-weight: 600;
    color: #76809a;
    margin-top: 2px;
}

/* --- risk & rule proximity: the room / progress bars --- */
.aa-room {
    margin-bottom: 13px;
}

.aa-room-t {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 5px;
    gap: 9px;
}

.aa-track {
    height: 9px;
    background: #eaecf3;
    border-radius: 6px;
    overflow: hidden;
}

/* Width is the CLAMPED percentage — the label alongside carries the true value,
   which can be negative on a breached account. */
.aa-track > i {
    display: block;
    height: 100%;
    border-radius: 6px;
}

/* Performance summary + risk proximity: side by side ONLY on a very wide viewport.
   Below the breakpoint they stack, each keeping its own .aa-stack bottom margin.

   The threshold is high on purpose. The summary card is a 12-tile, 5-column grid, and .aa-statgrid's
   own breakpoints are viewport-based rather than container-based, so a card sharing a row does not
   adapt on its own — the override below does it explicitly. Below ~1980px the tiles would be squeezed
   even at 4 columns, so the card goes full width instead.

   Even 1fr / 1fr split, matching .aa-grid2 (Performance by instrument / Open positions) below it, so
   the two rows line up. At half width the tile grid drops to 4 columns — see below. */
.aa-grid-wide {
    display: block;
}

@media (min-width: 1980px) {
    .aa-grid-wide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    /* The grid gap now owns the spacing; the per-card margin would double it. */
    .aa-grid-wide > .aa-stack {
        margin-bottom: 0;
    }

    /* Twelve tiles over 4 columns is 3 full rows; at 5 columns it would be 5 + 5 + 2, leaving a
       ragged gap on the last row AND squeezing each tile to roughly 185px. Scoped to the side-by-side
       case only — a full-width card below the breakpoint keeps the reference's 5 columns. */
    .aa-grid-wide .aa-statgrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Advanced Analytics — Phase 3: customer Accounts Overview.
   Summary cards, state filter pills, the accounts table's mini bars, and the
   weekday x hour heatmap.

   Same `aa-` prefix and the same reasoning as the blocks above: these rules
   live here rather than in a component <style> or .razor.css because Blazor
   CSS isolation is disabled in this app, and site.css loads after
   MudBlazor.min.css so a single-class rule wins without !important.

   Note .aa-tbl, .aa-card, .aa-card-h, .aa-note, .aa-stack, .aa-pos, .aa-neg
   and .aa-ml-auto are reused from the phase 1/2 blocks above rather than
   duplicated — the two panels are meant to read as one design.
   ========================================================================== */

/* --- summary cards --- */
.aa-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

/* Four cards need real width; below these breakpoints the subtitles wrap into
   unreadability, so the grid steps down rather than squeezing. */
@media (max-width: 1280px) {
    .aa-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .aa-summary {
        grid-template-columns: 1fr;
    }
}

.aa-scard {
    background: #fff;
    border: 1px solid #e7e9f0;
    border-radius: 12px;
    padding: 12px 14px;
}

.aa-scard-l {
    font-size: 10px;
    color: #8a93ad;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.aa-scard-v {
    font-size: 21px;
    font-weight: 800;
    color: #101a37;
    margin-top: 7px;
    line-height: 1.1;
}

.aa-scard-s {
    font-size: 12px;
    color: #5b657f;
    margin-top: 3px;
}

/* Caveats that change how the pooled figures should be read. Text rather than a
   tooltip: an admin quoting a number to a customer must see them without hovering. */
.aa-disclosures {
    margin: -6px 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.aa-subhead {
    font-size: 13px;
    font-weight: 800;
    color: #101a37;
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aa-rowcount {
    margin-top: 8px;
}

/* --- state filter pills --- */
.aa-pills {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid #e7e9f0;
    border-radius: 999px;
    padding: 5px;
    width: max-content;
    margin-bottom: 14px;
}

.aa-pills > span {
    padding: 6px 17px;
    border-radius: 999px;
    font-size: 13px;
    color: #5b657f;
    cursor: pointer;
    user-select: none;
}

.aa-pills > span.on {
    background: #2f6bff;
    color: #fff;
    font-weight: 600;
}

/* --- accounts table --- */
.aa-statuspill {
    display: inline-block;
    background: #c7ccd8;
    color: #27324d;
    padding: 3px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Breached must be findable without reading, on a table that can hold twenty rows. */
.aa-pill-breached {
    background: #fbdedb;
    color: #a12a23;
}


.aa-pill-passed {
    background: #dde8ff;
    color: #1d4ed8;
}

.aa-pill-reset {
    background: #eceef4;
    color: #5b657f;
}

/* The in-cell bars. Width is the CLAMPED percentage; the label beneath carries the
   true value, which can be negative on an account past its daily allowance. */
.aa-barmini {
    height: 6px;
    background: #e8eaf2;
    border-radius: 4px;
    overflow: hidden;
    width: 78px;
    display: inline-block;
    vertical-align: middle;
}

.aa-barmini > i {
    display: block;
    height: 100%;
    border-radius: 4px;
}

/* --- weekday x hour heatmap ---
   THE COLUMN COUNT IS DYNAMIC. --aa-heat-cols is set inline from the payload's
   blockHours (24/blockHours columns), so a 1-hour or 3-hour configuration needs no
   change here. Nothing in this file may hard-code 12. The fallback of 12 applies
   only if the variable is somehow absent, which would mean the payload was. */
/* Scrolls rather than squashes: at 1-hour blocks the grid is 24 columns, and
   compressing those to the card's width makes every label unreadable. */
.aa-heat-scroll {
    overflow-x: auto;
}

.aa-heat {
    display: grid;
    /* The 8 fallback is the 3-hour default (24/3). Nothing may depend on it - the real
       count arrives inline from the payload. */
    grid-template-columns: 52px repeat(var(--aa-heat-cols, 8), 1fr);
    gap: 5px;
    font-size: 13.5px;
    color: #8a93ad;
    /* Derived from the same variable, so the floor under a cell's width follows the
       configured block size instead of being pinned to one default. 64px is what a
       label like "+$1,234" needs at 13px before it starts clipping. */
    min-width: calc(52px + var(--aa-heat-cols, 8) * 64px);
}

.aa-heat-c {
    /* Double the original 22px. A weekday x hour grid is read by scanning for colour
       first and reading the number second, and at 22px the number was decoration. */
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0e3b22;
    font-weight: 700;
    font-size: 13px;
    overflow: hidden;
}

.aa-heat-rh {
    display: flex;
    align-items: center;
    height: 44px;
    font-weight: 600;
}

.aa-heat-ch {
    text-align: center;
    /* Hour labels sit above the grid and need to read at the same weight as the row
       labels, or the axis looks unlabelled next to 44px cells. */
    font-weight: 600;
    padding-bottom: 3px;
}

.aa-heat-foot {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ==================================================================

   HB-25685 - pre-sale Activate page (/activate), from the "activate" view of
   the PropGenie-Preview-v3 mockup. The mockup's tokens map onto the --pa-*
   gold-theme tokens above and the MudBlazor palette, so light and dark both
   follow the admin's theme: --gold -> --pa-gold-fg, --gold-wash ->
   --pa-gold-wash, --line -> --pa-border-soft, --flat -> --pa-card-flat.
   ========================================================================= */
.pa-act {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: Inter, var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
}

.pa-act-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.pa-act-head h1 {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.pa-act-head h1 em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.18em;
    color: var(--pa-gold-fg);
    letter-spacing: 0;
}

.pa-act-sub {
    margin: 4px 0 0;
    max-width: 66ch;
    color: var(--mud-palette-text-secondary);
}

.pa-act-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-gold-fg);
}

.pa-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--pa-radius-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pa-act-btn-sm {
    padding: 7px 12px;
    font-size: 12.5px;
}

.pa-act-btn-ghost,
.pa-act a.pa-act-btn-ghost {
    background: var(--pa-card-flat);
    border-color: var(--pa-border-soft);
    color: var(--mud-palette-text-primary);
}

/* The anchor form of the button needs the .pa-act prefix too: the dark-theme `a` rule outranks a lone class and
   paints gold text on the gold gradient. */
.pa-act-btn-gold,
.pa-act a.pa-act-btn-gold {
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
    box-shadow: var(--pa-shadow);
}

.pa-act-btn-gold:hover:not([disabled]) {
    transform: translateY(-1px);
}

.pa-act-btn[disabled],
.pa-act-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pa-act-card {
    background: var(--pa-card);
    border: 1px solid var(--pa-border-soft);
    border-radius: var(--pa-radius);
    padding: 18px;
}

.pa-act-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 16px;
    align-items: start;
}

.pa-act h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 650;
}

.pa-act h3 i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
    font: 600 11px 'JetBrains Mono', monospace;
    font-style: normal;
}

.pa-act-sec {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--pa-border-soft);
}

.pa-act-sec:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pa-act-g2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pa-act-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pa-act-g3 {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.pa-act-opt {
    color: var(--mud-palette-text-disabled);
    font-weight: 400;
}

.pa-act-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.pa-act-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--pa-radius-sm);
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

/* A native <select> draws its open list with the OS palette and lets the options inherit the field's
   text colour, which in dark mode is light text on a white list. color-scheme makes the list follow the
   theme, and the options get the theme's own colours for browsers that ignore it. */
html[data-theme="dark"] .pa-act-input {
    color-scheme: dark;
}

.pa-act-input option {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.pa-act-input:focus {
    outline: none;
    border-color: var(--pa-gold-border);
    box-shadow: 0 0 0 3px var(--pa-gold-wash);
}

.pa-act .validation-message {
    font-size: 11.5px;
    color: var(--mud-palette-error);
}

.pa-act-planpick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pa-act-planpick button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px;
    text-align: left;
    border-radius: var(--pa-radius-sm);
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.pa-act-planpick button.on {
    border-color: var(--pa-gold-deep);
    background: var(--pa-gold-wash);
}

.pa-act-planpick b {
    font-size: 13.5px;
}

.pa-act-planpick .v {
    font: 600 18px 'JetBrains Mono', monospace;
    color: var(--pa-gold-fg);
}

.pa-act-planpick span:last-child {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-act-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mud-palette-text-disabled);
}

.pa-act-center {
    text-align: center;
}

.pa-act-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.pa-act-check input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--pa-gold-deep);
}

.pa-act-check b {
    color: var(--mud-palette-text-primary);
}

.pa-act-read {
    border: 0;
    background: none;
    padding: 0;
    color: var(--pa-gold-fg);
    font-weight: 600;
    cursor: pointer;
}

.pa-act-terms {
    padding: 10px 14px;
    border-radius: var(--pa-radius-sm);
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card-flat);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.pa-act-terms b {
    color: var(--mud-palette-text-primary);
}

.pa-act-sum {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    /* 14px under the top bar, which in the unified shell includes the path to launch bar (HB-26052). */
    top: calc(var(--pgs-topbar-height, 64px) + var(--pgs-path-height, 0px) + 14px);
    border-color: var(--pa-gold-border);
}

.pa-act-sum .ln {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.pa-act-sum .ln b {
    color: var(--mud-palette-text-primary);
}

.pa-act-sum .num {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}

.pa-act-sum .tot {
    border-top: 1px solid var(--pa-border-soft);
    padding-top: 10px;
    font-size: 15px;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.pa-act-sum .tot b {
    font: 600 22px 'JetBrains Mono', monospace;
    color: var(--pa-gold-fg);
}

.pa-act-next-title {
    font-size: 12.5px;
}

.pa-act-sum ol {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-act-confirmed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 10px;
    text-align: center;
}

.pa-act-confirmed h2 {
    margin: 0;
    font-size: 22px;
}

.pa-act-confirmed p {
    max-width: 52ch;
    color: var(--mud-palette-text-secondary);
}

.pa-act-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pa-act-big {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
}

@media (max-width: 960px) {
    .pa-act-grid,
    .pa-act-g2,
    .pa-act-g3,
    .pa-act-planpick {
        grid-template-columns: minmax(0, 1fr);
    }

    .pa-act-sum {
        position: static;
    }
}

/* ----- Embedded apps (HB-25792) ---------------------------------------------
   Components/EmbeddedApp.razor: another app (Web Builder) framed across the whole content area.
   LoggedInLayout drops its padding and fixed-width container on these routes, so the frame only
   has to fill what is left below the app bar, and below the path to launch bar in the unified
   shell (HB-26052), where --pgs-path-height is set. */
.embedded-app {
    position: relative;
    height: calc(100vh - var(--mud-appbar-height, 64px) - var(--pgs-path-height, 0px));
    height: calc(100dvh - var(--mud-appbar-height, 64px) - var(--pgs-path-height, 0px));
    /* Web Builder's own ground. It is dark-only, so this is the colour in either Admin mode,
       and the area never flashes white or Admin-navy while the frame loads. */
    background-color: #0E0E1A;
}

/* Beats the html[data-theme] iframe rule above, which floors every other frame to white for
   documents that bring no background of their own. An embedded app brings its own. */
html[data-theme] .embedded-app-frame,
.embedded-app-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #0E0E1A;
    color-scheme: dark;
}

.embedded-app-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    background-color: #0E0E1A;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* js/embedded-app.js adds is-ready on the frame's first ready message. */
.embedded-app.is-ready .embedded-app-skeleton {
    opacity: 0;
    visibility: hidden;
}

.embedded-app-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: appLoaderSpin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .embedded-app-spinner { animation: none; }
    .embedded-app-skeleton { transition: none; }
}

/* =========================================================================
   HB-25831 - pre-sale Overview page (/overview), from the pre-sale "overview"
   view of the PropGenie-Preview-v3 mockup, cut to its banner and video by v5
   (HB-26068). As in the mockup, the hero stays dark in both themes because it
   shows artwork; the rest follows the --pa-* gold-theme tokens and the MudBlazor
   palette.
   ========================================================================= */
.pa-ov {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 28px;
    font-family: Inter, var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
}

.pa-ov-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--pa-radius-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 650;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pa-ov-btn-lg {
    padding: 14px 24px;
    border-radius: var(--pa-radius);
    font-size: 15.5px;
}

/* ".pa-ov a" outranks the dark theme's global link colour (html[data-theme="dark"] a),
   so a button that is a link keeps its own label colour. */
.pa-ov-btn-gold,
.pa-ov a.pa-ov-btn-gold {
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
    box-shadow: 0 14px 30px -14px rgba(242, 205, 122, .9);
}

.pa-ov-btn-gold:not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
}

.pa-ov-btn-ghost,
.pa-ov a.pa-ov-btn-ghost {
    background: var(--pa-card-flat);
    border-color: var(--pa-border-soft);
    color: var(--mud-palette-text-primary);
}

.pa-ov-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.pa-ov-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-gold-fg);
}

/* -- hero: the firm as an orbit around PropAccount ------------------------ */
.pa-ov-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    min-height: 380px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(242, 205, 122, .45);
    background: radial-gradient(70% 90% at 75% 55%, rgba(242, 205, 122, .22), transparent 60%),
                radial-gradient(50% 60% at 10% 0%, rgba(142, 139, 245, .12), transparent 60%),
                #07101D;
    box-shadow: 0 30px 60px -36px rgba(242, 205, 122, .55);
}

.pa-ov-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px;
}

.pa-ov-hero h1 {
    margin: 0;
    font-size: 52px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #FFFFFF;
}

.pa-ov-hero h1 em {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.08em;
    letter-spacing: 0;
    color: #F2CD7A;
}

.pa-ov-orbit-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 28px 16px 0;
}

.pa-ov-orbit {
    width: 100%;
    max-width: 600px;
    height: auto;
    max-height: 420px;
    overflow: visible;
}

.pa-ov-stars circle {
    fill: #FFFFFF;
    opacity: .5;
    animation: paOvTwinkle 4s ease-in-out infinite;
}

.pa-ov-orbit-path {
    fill: none;
    stroke: rgba(242, 205, 122, .3);
    stroke-width: 1.5;
    stroke-dasharray: 3 6;
}

.pa-ov-link {
    stroke: rgba(242, 205, 122, .35);
    stroke-width: 2.5;
}

.pa-ov-flow {
    stroke: #FFDA72;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 140;
    animation: paOvFlow 2.4s linear infinite;
}

.pa-ov-corona {
    transform-origin: 300px 210px;
    animation: paOvPulse 4s ease-in-out infinite;
}

.pa-ov-sun {
    filter: drop-shadow(0 0 18px rgba(242, 205, 122, .55));
}

.pa-ov-planet circle {
    fill: url(#paOvNavy);
    stroke: #F2CD7A;
    stroke-width: 1.8;
}

.pa-ov-planet text {
    font: 700 14px Inter, system-ui, sans-serif;
    fill: #FFFFFF;
    text-anchor: middle;
}

.pa-ov-planet.gold circle {
    fill: url(#paOvGold);
    stroke: none;
    filter: drop-shadow(0 0 12px rgba(242, 205, 122, .65));
}

.pa-ov-planet.gold text {
    font-size: 15px;
    fill: #1B1B3E;
}

@keyframes paOvTwinkle {
    50% { opacity: .12; }
}

@keyframes paOvFlow {
    from { stroke-dashoffset: 150; }
    to { stroke-dashoffset: 0; }
}

@keyframes paOvPulse {
    50% { transform: scale(1.12); opacity: .75; }
}

/* -- the Tech Demo -------------------------------------------------------- */
.pa-ov-demo {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 14px;
    border-radius: var(--pa-radius);
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card);
}

.pa-ov-demo-embed {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--pa-border-soft);
    background: #000000;
}

/* Beats the global html[data-theme] iframe rule, which paints iframes white. */
.pa-ov .pa-ov-demo-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #000000;
}

.pa-ov-demo-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 8px;
}

.pa-ov-demo-copy h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pa-ov-demo-copy p {
    margin: 0;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.pa-ov-demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 960px) {
    .pa-ov-hero,
    .pa-ov-demo {
        grid-template-columns: minmax(0, 1fr);
    }

    .pa-ov-hero-copy {
        padding: 32px 28px 0;
    }

    .pa-ov-hero h1 {
        font-size: 40px;
    }

    .pa-ov-orbit-wrap {
        padding: 0 20px 20px;
    }
}

@media (max-width: 600px) {
    .pa-ov-hero-copy {
        padding: 28px 20px 0;
    }

    .pa-ov-hero h1 {
        font-size: 34px;
    }

    .pa-ov-orbit-wrap {
        padding: 0 8px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-ov-stars circle,
    .pa-ov-flow,
    .pa-ov-corona {
        animation: none;
    }
}

/* =========================================================================
   HB-25831 - shared pieces of the pre-sale pages, from the PropGenie-Preview-v3
   mockup: page shell, page head, eyebrow, buttons and chips. A button that is a
   link is matched as ".pa-ps-page a", which outranks the dark theme's global
   link colour (html[data-theme="dark"] a), so it keeps its own label colour.
   ========================================================================= */
.pa-ps-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 24px 28px;
    font-family: Inter, var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
}

.pa-ps-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.pa-ps-head h1 {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.pa-ps-head h1 em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.18em;
    letter-spacing: 0;
    color: var(--pa-gold-fg);
}

.pa-ps-sub {
    margin: 4px 0 0;
    max-width: 66ch;
    color: var(--mud-palette-text-secondary);
}

.pa-ps-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-gold-fg);
}

.pa-ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--pa-radius-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 650;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pa-ps-btn-sm {
    padding: 7px 12px;
    font-size: 12.5px;
}

.pa-ps-btn-gold,
.pa-ps-page a.pa-ps-btn-gold {
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
    box-shadow: 0 10px 26px -14px rgba(242, 205, 122, .8);
}

.pa-ps-btn-gold:not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
}

.pa-ps-btn-ghost,
.pa-ps-page a.pa-ps-btn-ghost {
    background: var(--pa-card-flat);
    border-color: var(--pa-border-soft);
    color: var(--mud-palette-text-primary);
}

.pa-ps-btn-ghost:not([aria-disabled="true"]):hover {
    border-color: var(--pa-gold-border);
}

.pa-ps-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.pa-ps-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pa-ps-chip.ok {
    border: 1px solid rgba(97, 206, 112, .25);
    background: rgba(97, 206, 112, .12);
    color: var(--mud-palette-success);
}

.pa-ps-chip.dim {
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-secondary);
}

.pa-ps-chip.gold {
    border: 1px solid var(--pa-gold-border);
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

.pa-ps-card {
    padding: 18px;
    border: 1px solid var(--pa-border-soft);
    border-radius: var(--pa-radius);
    background: var(--pa-card);
}

.pa-ps-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.pa-ps-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
}

.pa-ps-meta {
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
}

/* -- a row of toggle buttons, the mockup's .seg: Pricing's calculator mode, the Help center's topics -- */
.pa-ps-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pa-ps-seg button {
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pa-ps-seg button.on {
    border-color: var(--pa-gold-fg);
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

/* -- numbered questions that fold open, the mockup's .acc: Pricing and the Help center -------------- */
.pa-ps-faq details {
    border-top: 1px solid var(--pa-border-soft);
}

.pa-ps-faq details:first-child {
    border-top: 0;
}

.pa-ps-faq summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    font-size: 13.5px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.pa-ps-faq summary::-webkit-details-marker {
    display: none;
}

.pa-ps-faq .n {
    width: 22px;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--pa-gold-fg);
}

.pa-ps-faq .pa-ps-faq-chev {
    margin-left: auto;
    color: var(--mud-palette-text-disabled);
    transition: transform .2s ease;
}

.pa-ps-faq details[open] .pa-ps-faq-chev {
    transform: rotate(180deg);
}

.pa-ps-faq p {
    margin: 0;
    max-width: 70ch;
    padding: 0 2px 12px 36px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

/* =========================================================================
   HB-26175 - Onboarding Overview (/onboarding-overview), from the Onboarding
   "overview" view of PropGenie Preview v5, on the shared pa-ps-* pieces. Light
   golds use the brand's light hue (160,132,76), not the mockup's light gold.
   ========================================================================= */
.pa-ob-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 26px 20px;
    border: 1px solid var(--pa-gold-border);
    border-radius: 18px;
    background: radial-gradient(640px 260px at 96% -30%, rgba(242, 205, 122, .55), transparent 62%),
                linear-gradient(135deg, #FFFCF4 0%, #F1EEFC 100%);
}

html[data-theme="dark"] .pa-ob-hero {
    background: radial-gradient(640px 240px at 96% -30%, rgba(242, 205, 122, .22), transparent 62%),
                linear-gradient(135deg, #121226 0%, #1B1B3E 100%);
}

/* The rings in the top right corner. */
.pa-ob-hero::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(160, 132, 76, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(160, 132, 76, .03), 0 0 0 80px rgba(160, 132, 76, .02);
    pointer-events: none;
}

html[data-theme="dark"] .pa-ob-hero::after {
    border-color: rgba(242, 205, 122, .12);
    box-shadow: 0 0 0 40px rgba(242, 205, 122, .03), 0 0 0 80px rgba(242, 205, 122, .02);
}

.pa-ob-hero-split {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

/* The words shrink before the tracker drops below them, so a long firm name wraps its heading
   instead of pushing the tracker off the right. */
.pa-ob-hero-split > div {
    flex: 1 1 420px;
    min-width: 0;
}

.pa-ob-hero h1 {
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -.01em;
}

.pa-ob-hero h1 em {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 0;
    color: var(--pa-gold-fg);
}

.pa-ob-lede {
    max-width: 64ch;
    margin: 6px 0 0;
    color: var(--mud-palette-text-secondary);
}

/* -- Preview > Onboarding > Live: a line between three points ------------- */
.pa-ob-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 300px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pa-ob-track li {
    position: relative;
    padding-top: 26px;
    font-size: 13px;
}

.pa-ob-track li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pa-border-soft);
}

.pa-ob-track li:last-child::before {
    right: auto;
    width: 0;
}

.pa-ob-track li::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 2px solid var(--mud-palette-text-disabled);
    border-radius: 50%;
    background: var(--mud-palette-surface);
}

.pa-ob-track li.done::before,
.pa-ob-track li.done::after {
    background: var(--pa-grad-gold);
}

.pa-ob-track li.done::after {
    border-color: transparent;
}

.pa-ob-track li.now::after {
    border-color: var(--pa-gold-fg);
    box-shadow: 0 0 0 5px var(--pa-gold-wash);
}

.pa-ob-track b {
    display: block;
    font-weight: 650;
}

.pa-ob-track li.now b {
    color: var(--pa-gold-fg);
}

.pa-ob-track span {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
}

/* -- the four steps to launch day, beside the readiness ring -------------- */
.pa-ob-launch {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--pa-gold-border);
    border-radius: var(--pa-radius);
    background: var(--pa-card);
}

.pa-ob-launch-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    border-right: 1px solid var(--pa-border-soft);
    background: rgba(160, 132, 76, .05);
}

html[data-theme="dark"] .pa-ob-launch-side {
    background: rgba(242, 205, 122, .05);
}

/* --p is the percentage the gold arc covers; the page sets it. */
.pa-ob-ring {
    --p: 10;
    position: relative;
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--pa-gold) calc(var(--p) * 1%), var(--pa-border-soft) 0);
}

.pa-ob-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
}

.pa-ob-ring > div {
    position: relative;
    line-height: 1.1;
    text-align: center;
}

.pa-ob-ring b {
    font: 600 24px 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

.pa-ob-ring span {
    display: block;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-ob-paid {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-success);
}

.pa-ob-launch-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 20px;
}

.pa-ob-launch-main h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pa-ob-launch-sub {
    margin: -4px 0 0;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.pa-ob-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--pa-border-soft);
    border-radius: 10px;
    background: var(--pa-card-flat);
}

.pa-ob-step.cur {
    border-color: var(--pa-gold-border);
    background: rgba(160, 132, 76, .07);
}

html[data-theme="dark"] .pa-ob-step.cur {
    background: rgba(242, 205, 122, .07);
}

.pa-ob-step .n {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--pa-border-soft);
    border-radius: 50%;
    font: 600 11px 'JetBrains Mono', ui-monospace, Consolas, monospace;
    color: var(--mud-palette-text-secondary);
}

.pa-ob-step.cur .n {
    border-color: transparent;
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
}

.pa-ob-step b {
    display: block;
    font-size: 13.5px;
}

.pa-ob-step > div > span {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-ob-step .pa-ps-btn,
.pa-ob-manager .pa-ps-btn {
    margin-left: auto;
}

.pa-ob-manager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--pa-border-soft);
    font-size: 13px;
}

/* -- Go-live setup and Keep building -------------------------------------- */
.pa-ob-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pa-ob-open {
    font-size: 12px;
    font-weight: 600;
    color: var(--pa-gold-fg);
}

.pa-ob-open[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.pa-ob-checklist {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pa-ob-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    border-top: 1px solid var(--pa-border-soft);
    font-size: 13.5px;
}

.pa-ob-checklist li:first-child {
    border-top: 0;
}

.pa-ob-checklist b {
    font-weight: 600;
}

.pa-ob-checklist .ck {
    display: grid;
    place-items: center;
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 2px solid var(--mud-palette-text-disabled);
    border-radius: 50%;
}

.pa-ob-checklist li.done .ck {
    border-color: var(--mud-palette-success);
    background: var(--mud-palette-success);
}

/* The tick inside a done step's circle. */
.pa-ob-checklist li.done .ck::after {
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid #06150B;
    border-bottom: 2px solid #06150B;
    transform: rotate(-45deg) translateY(-1px);
}

.pa-ob-checklist li.cur .ck {
    border-color: var(--pa-gold-fg);
}

.pa-ob-checklist .st {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--pa-card-flat);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.pa-ob-checklist li.done .st {
    background: rgba(97, 206, 112, .12);
    color: var(--mud-palette-success);
}

.pa-ob-checklist li.cur .st {
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

.pa-ob-build {
    display: flex;
    flex-direction: column;
}

/* ".pa-ob .pa-ob-build > a" outranks the dark theme's global link colour; the button needs
   flex-start against MudBlazor's global button centring. */
.pa-ob .pa-ob-build > a,
.pa-ob-build > button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 2px;
    border: 0;
    border-top: 1px solid var(--pa-border-soft);
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.pa-ob-build > :first-child {
    border-top: 0;
}

.pa-ob-build > button[aria-busy="true"] {
    cursor: progress;
}

.pa-ob-build .ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

.pa-ob-build b {
    display: block;
    font-size: 13.5px;
}

.pa-ob-build .s {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.pa-ob-build .go {
    margin-left: auto;
    color: var(--mud-palette-text-disabled);
}

@media (max-width: 900px) {
    .pa-ob-launch,
    .pa-ob-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pa-ob-launch-side {
        flex-direction: row;
        border-right: 0;
        border-bottom: 1px solid var(--pa-border-soft);
    }
}

@media (max-width: 640px) {
    .pa-ob-hero {
        padding: 20px 18px;
    }

    .pa-ob-hero h1 {
        font-size: 22px;
    }

    .pa-ob-track {
        min-width: 0;
        width: 100%;
    }

    /* The step's button goes under its words, in line with them, rather than squeezing them. */
    .pa-ob-step {
        flex-wrap: wrap;
    }

    /* The rest of the row after the number (24px) and the gap (12px). */
    .pa-ob-step > div {
        flex: 1 1 calc(100% - 36px);
        min-width: 0;
    }

    .pa-ob-step .pa-ps-btn {
        margin-left: 36px;
    }
}

/* =========================================================================
   HB-26233 - Live Overview (/live-overview), from the Live "overview" view of
   PropGenie Preview v5, on the shared pa-ps-* pieces. The hero is dark in both
   themes, as the mockup keeps it, so its colours are the mockup's dark ones.
   ========================================================================= */
.pa-lv-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border: 1px solid rgba(242, 205, 122, .22);
    border-radius: 16px;
    background: linear-gradient(135deg, #121226 0%, #1B1B3E 100%);
    color: #FCFCFF;
}

/* The rising line in the bottom right corner. */
.pa-lv-spark {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    height: 80%;
    opacity: .5;
    pointer-events: none;
}

.pa-lv-hero .pa-ps-chip.ok {
    color: #61CE70;
}

.pa-lv-since {
    position: absolute;
    top: 20px;
    right: 20px;
}

.pa-lv-dot {
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pa-lv-firm {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pa-lv-firm b {
    font-size: 20px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pa-lv-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
    box-shadow: 0 8px 20px -10px rgba(242, 205, 122, .7);
}

.pa-lv-hero h1 {
    position: relative;
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.pa-lv-hero p {
    position: relative;
    max-width: 44ch;
    margin: 0;
    color: #A3A8BA;
}

.pa-lv-hosts {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.pa-lv-hosts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    font-family: var(--pg-font-mono);
    font-size: 12px;
    font-weight: 500;
}

.pa-lv-hosts .mud-icon-root {
    font-size: 15px;
    color: #F2CD7A;
}

/* What each address is, for screen readers; the icon says it on screen. */
.pa-lv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -- Run your firm from Admin, and the PropGenie tools -------------------- */
.pa-lv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
}

.pa-lv-admin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-lv-admin h3,
.pa-lv .pa-ps-card-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
}

.pa-lv-admin p {
    margin: 0;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.pa-lv-tile-ic {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

.pa-lv-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ".pa-lv .pa-lv-modules a" outranks the dark theme's global link colour. */
.pa-lv .pa-lv-modules a {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid var(--pa-border-soft);
    border-radius: 99px;
    background: var(--pa-card-flat);
    font-size: 12.5px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.pa-lv .pa-lv-modules a:hover {
    border-color: var(--pa-gold-border);
    color: var(--mud-palette-text-primary);
}

.pa-lv-admin .pa-ps-btn {
    align-self: flex-start;
    margin-top: 4px;
}

.pa-lv-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

/* ".pa-lv .pa-lv-tools > a" outranks the dark theme's global link colour; the button needs
   flex-start against MudBlazor's global button centring. */
.pa-lv .pa-lv-tools > a,
.pa-lv-tools > button,
.pa-lv-tools > span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 2px;
    border: 0;
    border-top: 1px solid var(--pa-border-soft);
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

/* The top row of the two columns; written to outrank the link rule above. */
.pa-lv .pa-lv-tools > :nth-child(-n + 2) {
    border-top: 0;
}

.pa-lv-tools > span[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.pa-lv-tools > button[aria-busy="true"] {
    cursor: progress;
}

.pa-lv-tools .ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

.pa-lv-tools b {
    display: block;
    font-size: 13.5px;
}

.pa-lv-tools .s {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 900px) {
    .pa-lv-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .pa-lv-hero {
        padding: 20px 18px;
    }

    .pa-lv-hero h1 {
        font-size: 24px;
    }

    /* Above the firm's name rather than over it. */
    .pa-lv-since {
        position: static;
        align-self: flex-start;
    }

    .pa-lv-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .pa-lv .pa-lv-tools > :nth-child(2) {
        border-top: 1px solid var(--pa-border-soft);
    }
}

/* =========================================================================
   HB-25831 - pre-sale Pricing & earnings page (/pricing), from the "pricing"
   view of the PropGenie-Preview-v3 mockup.
   ========================================================================= */
.pa-pr-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 16px;
    align-items: stretch;
}

.pa-pr-fee {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-color: var(--pa-gold-border);
    background: radial-gradient(420px 200px at 100% 0%, rgba(242, 205, 122, .14), transparent 60%), var(--pa-card);
}

.pa-pr-fee-num {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--pa-gold-fg);
}

.pa-pr-fee-sub {
    margin: 0;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-fee-label {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-fee-cta {
    margin-top: auto;
}

.pa-pr-checks {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pa-pr-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
}

.pa-pr-checks .mud-icon-root {
    margin-top: 1px;
    font-size: 18px;
    color: var(--mud-palette-success);
}

/* -- revenue calculator ---------------------------------------------------- */
.pa-pr-calc {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pa-pr-calc .pa-ps-card-head {
    margin-bottom: 0;
}

.pa-pr-range label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-range label b {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

.pa-pr-gross {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card-flat);
}

.pa-pr-gross span {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.pa-pr-gross b {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
}

.pa-pr-gross small {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-shares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pa-pr-shares > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--pa-border-soft);
    background: var(--pa-card-flat);
}

.pa-pr-shares > div.hot {
    border-color: var(--pa-gold-border);
    background: linear-gradient(160deg, rgba(242, 205, 122, .12), rgba(242, 205, 122, .02));
}

.pa-pr-shares .t {
    font-size: 13px;
    font-weight: 650;
}

.pa-pr-shares .r,
.pa-pr-shares small {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
}

.pa-pr-shares b {
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 24px;
    font-weight: 600;
    color: var(--pa-gold-fg);
}

.pa-pr-assume {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-assume summary {
    cursor: pointer;
}

.pa-pr-assume .pa-pr-range {
    margin-top: 8px;
}

.pa-pr-foot {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--pa-border-soft);
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-foot b {
    color: var(--mud-palette-text-primary);
}

.pa-pr-foot b.gold {
    color: var(--pa-gold-fg);
}

/* -- plans ------------------------------------------------------------------ */
.pa-pr-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.pa-pr-section-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pa-pr-section-head span {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pa-pr-plan {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-pr-plan.hot {
    border-color: var(--pa-gold-border);
    background: linear-gradient(170deg, rgba(242, 205, 122, .10), var(--pa-card-flat));
}

.pa-pr-plan-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pa-pr-plan-top b {
    font-size: 16px;
}

.pa-pr-plan-tag {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.pa-pr-plan-share {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--pa-gold-fg);
}

.pa-pr-plan-share small {
    display: block;
    margin-top: 4px;
    font-family: Inter, var(--mud-typography-default-family);
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
}

.pa-pr-plan-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-pr-plan-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

.pa-pr .pa-pr-plan-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pa-gold-fg);
    text-decoration: none;
}

/* -- PropAccount vs other providers ----------------------------------------- */
.pa-pr-table-wrap {
    overflow-x: auto;
}

.pa-pr-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.pa-pr-compare th {
    padding: 0 12px 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-disabled);
}

.pa-pr-compare td {
    min-width: 120px;
    padding: 11px 12px;
    border-top: 1px solid var(--pa-border-soft);
}

.pa-pr-compare td:first-child {
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
}

.pa-pr-compare-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 8px;
    border: 1px solid var(--pa-gold-border);
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

.pa-pr-compare th.us,
.pa-pr-compare td.us {
    border-left: 2px solid var(--pa-gold-fg);
    border-right: 2px solid var(--pa-gold-fg);
    background: linear-gradient(180deg, rgba(242, 205, 122, .09), rgba(242, 205, 122, .04));
    color: var(--pa-gold-fg);
    font-weight: 650;
}

.pa-pr-compare th.us {
    padding-top: 12px;
    border-top: 2px solid var(--pa-gold-fg);
    border-radius: 12px 12px 0 0;
    letter-spacing: .12em;
}

.pa-pr-compare tbody tr:last-child td.us {
    border-bottom: 2px solid var(--pa-gold-fg);
    border-radius: 0 0 12px 12px;
}

@media (max-width: 1100px) {
    .pa-pr-top,
    .pa-pr-plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .pa-pr-shares {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================================
   HB-25831 - pre-sale Book a call page (/book-a-call), from the "book" view of
   the PropGenie-Preview-v3 mockup, with the launch advisor's Calendly page
   embedded where the mockup draws its own picker.
   ========================================================================= */
.pa-bk-grid {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* No card around the calendar: Calendly draws its own card, so the column only places and clips the frame.
   Calendly lays that card out inside the frame. Below a 650px frame it fills the frame edge to edge; from
   650px it sits 66.4px down with a 2.5% margin each side, so it is 95% of the frame, up to 680px. In that
   layout the frame is made 1/0.95 of the column and pulled up and left by those margins, so the card itself
   fills the column and lines up with the agenda card. Measured against Calendly on 2026-10-27; if Calendly
   changes its layout, only these numbers need updating. */
.pa-bk-calendar {
    position: relative;
    container-type: inline-size;
    min-width: 0;
    max-width: 680px;
    overflow: clip;
    /* Room for the corner of the "Powered by Calendly" ribbon, which overhangs the card. */
    overflow-clip-margin: 8px;
}

/* Beats the global html[data-theme] iframe rule, which paints iframes white before they load. */
.pa-bk .pa-bk-embed {
    display: block;
    width: 100%;
    height: 700px;
    border: 0;
    background-color: transparent;
}

/* After the base rule so it wins. 618px of column is a 650px frame, where Calendly switches to the layout
   described above .pa-bk-calendar. */
@container (min-width: 618px) {
    .pa-bk .pa-bk-embed {
        width: calc(100% / .95);
        margin: -66.4px 0 0 calc(-100% * .025 / .95);
    }
}

/* Stands in for Calendly's card until Calendly has drawn it, about 2s after the page opens. calendly-embed.js marks
   the embed data-ready then, and the rule below lifts the loader that follows it. The spinner and text are the boot
   loader's (#initial-loader), in the theme's Primary, which is the gold the boot loader uses in dark mode. */
.pa-bk-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 1px solid var(--pa-border-soft);
    border-radius: var(--pa-radius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    letter-spacing: .02em;
    transition: opacity .25s ease-out, visibility .25s;
    /* A safety net, like the boot loader's: if Calendly never says it is ready, stop covering it after 10s. */
    animation: paBkLoadingGiveUp 0s 10s forwards;
}

.pa-bk .pa-bk-embed[data-ready] + .pa-bk-loading {
    opacity: 0;
    visibility: hidden;
}

@keyframes paBkLoadingGiveUp {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.pa-bk-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, .08);
    border-top-color: var(--mud-palette-primary);
    border-radius: 50%;
    animation: appLoaderSpin .8s linear infinite;
}

html[data-theme="dark"] .pa-bk-spinner {
    border-color: rgba(255, 255, 255, .12);
    border-top-color: var(--mud-palette-primary);
}

.pa-bk .pa-bk-embed.dark,
.pa-bk .pa-bk-loading.dark,
html[data-theme="dark"] .pa-bk .pa-bk-embed.light,
html[data-theme="dark"] .pa-bk .pa-bk-loading.light {
    display: none;
}

html[data-theme="dark"] .pa-bk .pa-bk-embed.dark {
    display: block;
}

html[data-theme="dark"] .pa-bk .pa-bk-loading.dark {
    display: flex;
}

.pa-bk-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pa-bk-advisor {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icons are plain glyphs in --pa-brand-icon, like the sidebar and Admin home's tiles; --pa-gold-fg stays for
   gold text, which needs the contrast. */
.pa-bk-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--pa-brand-icon);
}

.pa-bk-avatar .mud-icon-root {
    font-size: 32px;
}

.pa-bk-advisor b {
    display: block;
    font-size: 14px;
}

.pa-bk-advisor b + span {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-bk-agenda {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pa-bk-agenda li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.pa-bk-agenda .mud-icon-root {
    flex: none;
    margin-top: 1px;
    color: var(--pa-brand-icon);
}

.pa-bk-agenda b {
    color: var(--mud-palette-text-primary);
}

.pa-bk .pa-bk-newtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--pa-border-soft);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pa-gold-fg);
    text-decoration: none;
}

@media (max-width: 1100px) {
    .pa-bk-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================================
   HB-25831 - SiteFrame, a live page from another site under a title bar,
   from the playbook frame of the PropGenie-Preview-v3 mockup. Dark in both
   themes, as the mockup keeps it: the pages it hosts are dark.
   ========================================================================= */
.pa-sf {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--pa-radius);
    border: 1px solid rgba(242, 205, 122, .22);
    background: #05080F;
    color: #FCFCFF;
}

.pa-sf-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    font-size: 13px;
}

.pa-sf-bar .mud-icon-root {
    flex: none;
    font-size: 18px;
    color: #F2CD7A;
}

.pa-sf-url {
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: #6B7090;
}

/* Beats the global html[data-theme] iframe rule, which paints iframes white before they load. */
.pa-sf .pa-sf-frame {
    display: block;
    width: 100%;
    height: min(78vh, 820px);
    min-height: 520px;
    border: 0;
    background-color: #05080F;
}

@media (max-width: 640px) {
    .pa-sf .pa-sf-frame {
        min-height: 70vh;
    }
}

/* =========================================================================
   HB-25831 - pre-sale Operator's Playbook page (/playbook), from the
   "playbook" view of the PropGenie-Preview-v3 mockup.
   ========================================================================= */
/* A page that hosts a live product uses the full width, as in the mockup. */
.pa-pb {
    max-width: none;
}

.pa-pb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* =========================================================================
   HB-25831 - pre-sale Help center page (/help), from the "faq" view of the
   PropGenie-Preview-v3 mockup.
   ========================================================================= */
.pa-hc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 18px;
    align-items: start;
}

.pa-hc-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pa-hc-count {
    margin-left: 4px;
    opacity: .6;
    font-family: 'JetBrains Mono', monospace;
}

.pa-ps-card.pa-hc-list {
    padding: 6px 18px;
}

.pa-hc .pa-ps-faq summary {
    font-size: 14px;
}

.pa-hc .pa-ps-faq p {
    padding-left: 2px;
}

.pa-hc-topic {
    flex: none;
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-disabled);
}

.pa-hc .pa-hc-topic + .pa-ps-faq-chev {
    margin-left: 0;
}

.pa-hc mark {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(160, 132, 76, .22);
    color: inherit;
}

html[data-theme="dark"] .pa-hc mark {
    background: rgba(242, 205, 122, .25);
}

.pa-hc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 0;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.pa-hc-empty .mud-icon-root {
    font-size: 30px;
    color: var(--pa-gold-fg);
}

.pa-hc-empty p {
    margin: 0;
}

.pa-hc-aside {
    position: sticky;
    /* 14px under the top bar, which in the unified shell includes the path to launch bar (HB-26052). */
    top: calc(var(--pgs-topbar-height, 64px) + var(--pgs-path-height, 0px) + 14px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pa-ps-card.pa-hc-talk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.pa-hc-talk > .mud-icon-root {
    flex: none;
    color: var(--pa-gold-fg);
}

.pa-hc-talk b {
    display: block;
    font-size: 13px;
}

.pa-hc-talk b + span {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.pa-hc-talk .pa-ps-btn {
    margin-left: auto;
}

@media (max-width: 1100px) {
    .pa-hc-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .pa-hc-aside {
        position: static;
    }
}

/* ===== Upsell dialog (HB-25864) =====
   The mockup's lock modal (#lockModal), drawn on MudDialog: .pa-up is the dialog's paper and .pa-up-backdrop its
   overlay (DialogOptions.BackgroundClass). Colours are the mockup's light and dark values; its light golds sit on the
   brand light hue 160,132,76, as everywhere in this file. */
.pa-up-backdrop {
    backdrop-filter: blur(4px);
}

/* MudBlazor paints its own dark scrim inside the overlay, so the mockup's colour goes on that scrim rather than on
   top of it. */
.mud-overlay.pa-up-backdrop .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(16, 24, 40, .45);
}

html[data-theme="dark"] .mud-overlay.pa-up-backdrop .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(0, 0, 0, .6);
}

.mud-dialog.pa-up {
    max-width: 440px;
    font-family: Inter, var(--mud-typography-default-family);
    border: 1px solid rgba(160, 132, 76, .32);
    border-radius: 18px;
    background: linear-gradient(160deg, #FFFFFF, #F6F3FC);
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .45);
}

html[data-theme="dark"] .mud-dialog.pa-up {
    border-color: rgba(242, 205, 122, .22);
    background: linear-gradient(160deg, #1B1B3E, #0E1428);
    box-shadow: none;
}

.pa-up .mud-dialog-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.pa-up-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pa-gold-wash);
    color: var(--pa-gold-fg);
}

.pa-up h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0E1524;
}

.pa-up p {
    margin: 0;
    color: #5B6478;
}

html[data-theme="dark"] .pa-up h3 {
    color: #FCFCFF;
}

html[data-theme="dark"] .pa-up p {
    color: #A3A8BA;
}

.pa-up-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.pa-up a.pa-ps-btn-gold {
    color: var(--pa-on-gold);
}

.pa-up a.pa-ps-btn-ghost {
    color: var(--mud-palette-text-primary);
}

.pa-up-close {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    line-height: 0;
    color: #8992A6;
    cursor: pointer;
}

html[data-theme="dark"] .pa-up-close {
    color: #6B7090;
}

.pa-up-close:hover {
    color: var(--mud-palette-text-primary);
}

/* =========================================================================
   HB-25981 - the pre-sale guided tour (mockup D2-guided-tour-wizard): the
   intro pop-up, the dim with its two lit holes (pg-tour.js draws the path and
   places the rings and the card), the step card, the recap and the top bar's
   Tour button. The dim is the mockup's in both themes; everything else reads
   the shell's --pgs-* colours. Below 1024px, where the sidebar is a drawer,
   the card is a bottom sheet.
   ========================================================================= */
.pg-shell .pg-topbar-tour {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pgs-line);
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--pgs-text);
    cursor: pointer;
}

.pg-shell .pg-topbar-tour:hover {
    border-color: var(--pgs-line-gold);
    background: var(--pgs-gold-wash);
}

.pg-shell .pg-topbar-tour:focus-visible {
    outline: 2px solid var(--pgs-line-gold);
    outline-offset: 2px;
}

.pg-shell .pg-topbar-tour .mud-icon-root {
    font-size: 16px;
}

/* The mockup's "Start here" row, Build your prop firm: its gold ring with a sparkle travelling round it. */
@property --pg-spark {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes pg-spark-run {
    to {
        --pg-spark: 360deg;
    }
}

.pg-shell .pg-nav-link.highlight[data-node="build-firm"] {
    position: relative;
}

.pg-shell .pg-nav-link.highlight[data-node="build-firm"] .pg-nav-icon {
    color: var(--pgs-gold);
    opacity: 1;
}

.pg-shell .pg-nav-link.highlight[data-node="build-firm"]::before,
.pg-shell .pg-nav-link.highlight[data-node="build-firm"]::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pg-spark-run 2.8s linear infinite;
}

.pg-shell .pg-nav-link.highlight[data-node="build-firm"]::before {
    background: conic-gradient(from var(--pg-spark), rgba(242, 205, 122, 0) 0deg, rgba(242, 205, 122, 0) 250deg,
        rgba(242, 205, 122, .55) 300deg, #FFDA72 335deg, #FFFFFF 350deg, #FFDA72 356deg, rgba(242, 205, 122, 0) 360deg);
}

.pg-shell .pg-nav-link.highlight[data-node="build-firm"]::after {
    filter: blur(3px);
    opacity: .9;
    background: conic-gradient(from var(--pg-spark), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 338deg,
        #FFF3C4 350deg, rgba(255, 255, 255, 0) 360deg);
}

@media (prefers-reduced-motion: reduce) {
    .pg-shell .pg-nav-link.highlight[data-node="build-firm"]::before,
    .pg-shell .pg-nav-link.highlight[data-node="build-firm"]::after {
        animation: none;
    }
}

/* While the tour is up the page's end scrolls clear of the card, the Dashboard Builder's frame stops above it, and
   the phase switcher steps aside. */
html.pg-touring .mud-main-content {
    padding-bottom: var(--pg-tour-pad, 60px);
}

html.pg-touring .embedded-app {
    height: calc(100dvh - var(--mud-appbar-height, 64px) - var(--pgs-path-height, 0px) - var(--pg-tour-pad, 0px));
}

html.pg-touring .pg-phase-switch {
    visibility: hidden;
}

/* On phones the Admin Portal and Genie tokens steps open the drawer under the bottom-sheet card, so the sidebar's
   end (the token meter) scrolls clear of it too. The padding goes on the footer: the sidebar's own box stays the
   drawer's height, with its rows overflowing it, so padding there adds no room to scroll. */
@media (max-width: 1023.98px) {
    html.pg-touring .pg-shell .pg-side-foot {
        padding-bottom: var(--pg-tour-pad, 0px);
    }
}

/* A dropdown opened from the lit page (a MudSelect) paints above the dim and the card, below MudBlazor's dialogs. */
html.pg-touring .mud-popover {
    z-index: 1370;
}

/* ---- Intro pop-up ---------------------------------------------------------- */
.pg-tour-modal {
    position: fixed;
    inset: 0;
    z-index: 1360;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow-y: auto;
    background: rgba(16, 24, 40, .45);
    backdrop-filter: blur(4px);
}

html[data-theme="dark"] .pg-tour-modal {
    background: rgba(0, 0, 0, .6);
}

.pg-tour-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--pgs-line-gold);
    border-radius: 18px;
    background: var(--pg-grad-pop, var(--pgs-panel));
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .45);
    font-family: var(--pgs-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--pgs-text);
}

html[data-theme="dark"] .pg-tour-intro {
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}

.pg-tour-x {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--pgs-dim);
    cursor: pointer;
}

.pg-tour-x:hover {
    background: var(--pgs-flat);
    color: var(--pgs-text);
}

.pg-tour-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.pg-tour-brand > span:last-child {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pgs-gold);
}

.pg-tour-brand-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--pgs-grad-gold);
    color: var(--pgs-on-gold);
}

.pg-tour-brand-mark .mud-icon-root {
    font-size: 16px;
}

.pg-tour-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--pgs-line);
}

.pg-tour-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 10px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pgs-dim);
    cursor: pointer;
}

.pg-tour-tabs button .mud-icon-root {
    flex: none;
    font-size: 16px;
}

.pg-tour-tabs button.on {
    border-color: var(--pgs-gold);
    color: var(--pgs-gold);
}

.pg-tour-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 190px;
}

.pg-tour-pane h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
}

.pg-tour-pane p {
    margin: 0;
    color: var(--pgs-muted);
}

.pg-tour-checklist {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pg-tour-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
}

.pg-tour-checklist .mud-icon-root {
    flex: none;
    margin-top: 1px;
    font-size: 18px;
    color: var(--pgs-ok);
}

.pg-tour-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pg-tour-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--pgs-line-gold);
    border-radius: 10px;
    background: var(--pgs-gold-wash);
}

.pg-tour-stats b {
    font-size: 18px;
    color: var(--pgs-gold);
}

.pg-tour-stats span {
    font-size: 11.5px;
    color: var(--pgs-muted);
}

.pg-tour-advisor {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pg-tour-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--pgs-line-gold);
    border-radius: 50%;
    background: var(--pgs-gold-wash);
    color: var(--pgs-gold);
}

.pg-tour-advisor b {
    display: block;
}

.pg-tour-advisor span {
    font-size: 12.5px;
    color: var(--pgs-muted);
}

.pg-tour-intro-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--pgs-line);
}

.pg-tour-dots {
    display: flex;
    gap: 6px;
}

.pg-tour-dots i {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--pg-flat-2, var(--pgs-line));
    transition: width .2s ease;
}

.pg-tour-dots i.on {
    width: 20px;
    background: var(--pgs-gold);
}

.pg-tour-intro-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* ---- The dim, its rings and the veil ------------------------------------------ */
.pg-tour {
    position: fixed;
    inset: 0;
    z-index: 1360;
    pointer-events: none;
    font-family: var(--pgs-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--pgs-text);
}

.pg-tour-dim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Even-odd: the holes take no pointer events, so the lit page and control stay live and the dim swallows the rest. */
.pg-tour-dim path {
    fill: rgba(3, 6, 14, .72);
    pointer-events: fill;
}

.pg-tour-ring,
.pg-tour-veil {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pg-tour-ring-control {
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--pgs-gold), 0 0 30px 4px var(--pgs-line-gold);
}

.pg-tour-ring-page {
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--pgs-line-gold), 0 0 0 6px var(--pgs-gold-wash);
}

.pg-tour-veil {
    border-radius: 16px;
    background: rgba(3, 6, 14, .72);
    opacity: 0;
}

.pg-tour-veil.on {
    animation: pg-tour-veil .45s ease-out;
}

@keyframes pg-tour-veil {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ---- The step card -------------------------------------------------------------- */
.pg-tour-card {
    position: fixed;
    left: 16px;
    bottom: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 318px;
    grid-template-areas: "count steps" "title steps" "text steps" "try steps" "acts steps";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 20px;
    row-gap: 6px;
    box-sizing: border-box;
    width: min(720px, calc(100vw - 32px));
    padding: 16px 18px;
    border: 1px solid var(--pgs-line-gold);
    border-radius: 16px;
    background: var(--pg-grad-pop, var(--pgs-panel));
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .45);
    pointer-events: auto;
}

html[data-theme="dark"] .pg-tour-card {
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9);
}

/* Announces each step to screen readers; the card's own count is aria-hidden. */
.pg-tour-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pg-tour-count {
    grid-area: count;
    font-family: var(--pgs-font-mono);
    font-size: 11px;
    color: var(--pgs-gold);
}

.pg-tour-card h4 {
    grid-area: title;
    margin: 0;
    font-size: 16px;
    font-weight: 650;
}

.pg-tour-text {
    grid-area: text;
    margin: 0;
    font-size: 13px;
    color: var(--pgs-muted);
}

.pg-tour-try {
    grid-area: try;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
}

.pg-tour-try .mud-icon-root {
    flex: none;
    margin-top: 1px;
    font-size: 16px;
    color: var(--pgs-gold);
}

.pg-tour-try b {
    font-weight: 650;
    color: var(--pgs-gold);
}

.pg-tour-try-t {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pg-tour-steps {
    grid-area: steps;
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-content: center;
    gap: 2px 6px;
    margin: 0;
    padding: 0 0 0 18px;
    border-left: 1px solid var(--pgs-line);
    list-style: none;
}

.pg-tour-steps button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--pgs-dim);
    cursor: default;
}

.pg-tour-steps button > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-tour-steps i {
    display: grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--pgs-line);
    border-radius: 99px;
    font: 600 10.5px var(--pgs-font-mono);
    font-style: normal;
    color: var(--pgs-dim);
    transition: width .2s ease;
}

.pg-tour-steps i .mud-icon-root {
    font-size: 13px;
}

.pg-tour-steps .seen button {
    color: var(--pgs-text);
    cursor: pointer;
}

.pg-tour-steps .seen button:hover {
    background: var(--pg-flat-2, var(--pgs-flat));
}

.pg-tour-steps .seen i {
    border-color: var(--pgs-line-gold);
    background: var(--pgs-gold-wash);
    color: var(--pgs-gold);
}

.pg-tour-steps .now button {
    background: var(--pgs-gold-wash);
    box-shadow: inset 0 0 0 1px var(--pgs-line-gold);
    color: var(--pgs-text);
}

.pg-tour-steps .now i {
    border-color: transparent;
    background: var(--pgs-grad-gold);
    color: var(--pgs-on-gold);
}

.pg-tour-acts {
    grid-area: acts;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.pg-tour-skip {
    margin-right: auto;
    padding: 6px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pgs-muted);
    cursor: pointer;
}

.pg-tour-skip:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--pgs-text);
}

.pg-tour-card.stack {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "count" "title" "text" "try" "steps" "acts";
    grid-template-rows: none;
}

.pg-tour-card.stack .pg-tour-steps {
    margin-top: 4px;
    padding: 10px 0 0;
    border-top: 1px solid var(--pgs-line);
    border-left: 0;
}

/* ---- The recap ------------------------------------------------------------------ */
.pg-tour-recap {
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    width: min(640px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--pgs-line-gold);
    border-radius: 18px;
    background: var(--pg-grad-pop, var(--pgs-panel));
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .45);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    animation: pg-tour-in .3s ease .12s backwards;
}

html[data-theme="dark"] .pg-tour-recap {
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}

@keyframes pg-tour-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 10px));
    }
}

.pg-tour-recap-eye {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pgs-gold);
}

.pg-tour-recap h3 {
    margin: -4px 0 0;
    font-size: 20px;
    font-weight: 650;
}

.pg-tour-recap > p {
    margin: 0;
    font-size: 13.5px;
    color: var(--pgs-muted);
}

.pg-tour-recap-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 6px 8px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

/* Scoped past html[data-theme="dark"] a, which would repaint every link the theme's primary. */
.pg-tour .pg-tour-recap-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 100%;
    padding: 7px 10px;
    border: 1px solid var(--pgs-line);
    border-radius: 10px;
    background: var(--pgs-flat);
    text-decoration: none;
    color: var(--pgs-text);
}

.pg-tour .pg-tour-recap-list a:hover {
    border-color: var(--pgs-line-gold);
    background: var(--pgs-gold-wash);
}

.pg-tour-recap-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--pgs-gold-wash);
    color: var(--pgs-gold);
}

.pg-tour-recap-list b {
    display: block;
    font-size: 13px;
    font-weight: 650;
}

.pg-tour-recap-list small {
    display: block;
    font-size: 11.5px;
    color: var(--pgs-muted);
}

.pg-tour-recap-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--pgs-line);
}

.pg-tour a.pa-ps-btn-gold {
    color: var(--pa-on-gold);
}

.pg-tour a.pa-ps-btn-ghost {
    color: var(--mud-palette-text-primary);
}

.pg-tour-recap-x {
    margin-left: auto;
}

.pg-tour button:focus-visible,
.pg-tour a:focus-visible,
.pg-tour-modal button:focus-visible {
    outline: 2px solid var(--pgs-line-gold);
    outline-offset: 2px;
}

/* ---- Phones and portrait tablets: the sidebar is a drawer, the card a bottom sheet ---- */
@media (max-width: 1023.98px) {
    .pg-shell .pg-topbar-tour {
        padding: 0 9px;
    }

    .pg-shell .pg-topbar-tour span {
        display: none;
    }

    .pg-tour-card {
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "count steps" "title title" "text text" "try try" "acts acts";
        grid-template-rows: none;
        column-gap: 10px;
        width: auto;
        padding: 14px 16px;
        border-radius: 18px;
    }

    .pg-tour-steps {
        grid-template-rows: none;
        grid-auto-columns: auto;
        align-items: center;
        justify-content: end;
        gap: 3px;
        padding: 0;
        border: 0;
    }

    .pg-tour-steps button {
        gap: 0;
        padding: 2px;
    }

    .pg-tour-steps button > span {
        display: none;
    }

    .pg-tour-steps .now button,
    .pg-tour-steps .seen button:hover {
        background: none;
        box-shadow: none;
    }

    .pg-tour-steps .now i {
        width: 30px;
    }
}

/* The Tour button costs the phone top bar the width its search box had: the bar tightens and the theme pill shows
   only the mode it is in (a tap still switches), so the search keeps the room it had without the button. */
@media (max-width: 480px) {
    .pg-shell .pg-topbar:has(.pg-topbar-tour) .mud-toolbar-appbar {
        gap: 8px;
    }

    .pg-shell .pg-topbar .pg-topbar-tour {
        justify-content: center;
        width: 32px;
        padding: 0;
        border-color: transparent;
    }

    .pg-shell .pg-topbar:has(.pg-topbar-tour) .pg-theme-opt:not(.on) {
        display: none;
    }
}

/* HB-26068: Fast launch costs the phone bar another icon, and the Suite's token chip more; after the rule above, so its
   gap wins. The user icon goes (its name is already hidden here; Sign out stays), and the bar tightens so the chip,
   which the guided tour's Genie tokens step lights, still fits. */
@media (max-width: 480px) {
    .pg-shell .pg-topbar.pg-topbar-presale .mud-toolbar-appbar {
        gap: 4px;
    }

    .pg-shell .pg-topbar-presale .pg-topbar-user {
        display: none;
    }

    /* Icon-only down here, so as narrow as the Tour button. */
    .pg-shell .pg-topbar-presale .pg-topbar-book,
    .pg-shell .pg-topbar-presale .pg-topbar-launch,
    .pg-shell .pg-topbar-presale .pg-topbar-signout {
        justify-content: center;
        width: 32px;
        padding: 0;
    }

    .pg-shell .pg-topbar-presale .pg-topbar-tokens {
        gap: 4px;
        padding: 0 6px;
    }
}

/* Below 360px even the tight bar has no room for the chip, so the tour lights the Suite's page instead. */
@media (max-width: 359.98px) {
    .pg-shell .pg-topbar-presale .pg-topbar-tokens {
        display: none;
    }
}

@media (max-width: 640px) {
    .pg-tour-steps {
        gap: 2px;
    }

    .pg-tour-steps button {
        padding: 1px;
    }

    .pg-tour-steps i {
        width: 18px;
        height: 18px;
        font-size: 9.5px;
    }

    .pg-tour-steps .now i {
        width: 26px;
    }

    .pg-tour-intro {
        padding: 20px 16px;
    }

    .pg-tour-tabs button .mud-icon-root {
        display: none;
    }

    .pg-tour-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .pg-tour-recap {
        gap: 10px;
        padding: 18px 16px;
    }

    .pg-tour-recap h3 {
        font-size: 18px;
    }

    .pg-tour .pg-tour-recap-list a {
        gap: 8px;
        padding: 7px 8px;
    }

    .pg-tour-recap-ic {
        width: 26px;
        height: 26px;
    }

    .pg-tour-recap-list small {
        display: none;
    }

    .pg-tour-recap-acts {
        flex-direction: column;
        align-items: stretch;
    }

    .pg-tour-recap-x {
        margin-left: 0;
    }
}

/* Below 360px ten dots no longer fit beside the count: they take a row of their own. */
@media (max-width: 359.98px) {
    .pg-tour-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "count" "steps" "title" "text" "try" "acts";
    }

    .pg-tour-steps {
        justify-content: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pg-tour-veil.on,
    .pg-tour-recap,
    .pg-tour-dots i,
    .pg-tour-steps i {
        animation: none;
        transition: none;
    }
}

/* =========================================================================
   HB-25981 - Build your prop firm (/setup), the "setup" view of the
   D2-guided-tour-wizard mockup without its stepper header or, since v5
   (HB-26068), its welcome: Firm, Brand, Website, Dashboard, then the build
   animation and the result. The
   brand previews and template thumbnails paint in the firm's or template's
   own colours, the same in both themes, as the mockup's do.
   ========================================================================= */
.pa-su {
    max-width: 1100px;
}

.pa-su h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
}

.pa-su-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.pa-su-pane {
    display: flex;
    flex-direction: column;
}

.pa-su-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.pa-su-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.pa-su-field small {
    font-weight: 400;
}

.pa-su-note-field {
    margin-top: 14px;
}

.pa-su-input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--pa-border-soft);
    border-radius: var(--pa-radius-sm);
    background: var(--pg-inset, var(--pa-card-flat));
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
}

.pa-su-input:focus {
    outline: none;
    border-color: var(--pa-gold-border);
    box-shadow: 0 0 0 3px rgba(160, 132, 76, .12);
}

html[data-theme="dark"] .pa-su-input:focus {
    box-shadow: 0 0 0 3px rgba(242, 205, 122, .12);
}

.pa-su-q {
    display: block;
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pa-su-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pa-su-choice button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--pa-border-soft);
    border-radius: 12px;
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pa-su-choice button b {
    font-size: 14px;
}

.pa-su-choice button span {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-su-choice button.on {
    border-color: var(--pa-gold-fg);
    background: var(--pa-gold-wash);
}

.pa-su-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--pa-border-soft);
}

.pa-su-brand {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
}

.pa-su-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    border: 1.5px dashed var(--pa-gold-border);
    border-radius: 12px;
    background: rgba(160, 132, 76, .04);
    cursor: pointer;
}

html[data-theme="dark"] .pa-su-drop {
    background: rgba(242, 205, 122, .04);
}

.pa-su-drop > .mud-icon-root {
    font-size: 26px;
    color: var(--pa-gold-ic);
}

.pa-su-drop b {
    display: block;
    font-size: 13.5px;
}

.pa-su-drop small {
    font-size: 12px;
    color: var(--pg-dim);
}

.pa-su-drop img {
    width: 44px;
    height: 44px;
    margin-left: auto;
    object-fit: contain;
    border-radius: 8px;
    background: #FFFFFF;
}

.pa-su-error {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--mud-palette-error);
}

.pa-su-colors-h {
    margin-top: 18px !important;
}

.pa-su-mode {
    margin: 12px 0;
}

.pa-su-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pa-su-presets button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--pa-border-soft);
    border-radius: 10px;
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.pa-su-presets button.on {
    border-color: var(--pa-gold-fg);
    background: var(--pa-gold-wash);
}

.pa-su-sw {
    display: flex;
    flex: none;
}

.pa-su-sw i {
    width: 14px;
    height: 14px;
    margin-right: -4px;
    border: 1.5px solid rgba(0, 0, 0, .25);
    border-radius: 50%;
}

.pa-su-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.pa-su-colors label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--pa-border-soft);
    border-radius: 10px;
    background: var(--pa-card-flat);
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.pa-su-colors input {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.pa-su-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.pa-su-ideas button {
    padding: 5px 10px;
    border: 1px solid var(--pa-border-soft);
    border-radius: 99px;
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pa-su-look {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-su-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pa-su-site {
    --p: #D6A546;
    --s: #0D1830;
    --a: #3CCF86;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 14px;
    background: var(--s);
    color: #FFFFFF;
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7);
}

.pa-su-site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.pa-su-logo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--p);
    color: var(--s);
    font-size: 13px;
    font-weight: 800;
}

.pa-su-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #FFFFFF;
}

.pa-su-site-btn {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--p);
    border-radius: 99px;
    color: var(--p);
    font-size: 11px;
    font-weight: 700;
}

.pa-su-site small {
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--a);
}

.pa-su-site h4 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
}

.pa-su-site-cta {
    align-self: flex-start;
    margin-top: 6px;
    padding: 7px 14px;
    border-radius: 99px;
    background: var(--p);
    color: var(--s);
    font-size: 12px;
    font-weight: 700;
}

.pa-su-dash {
    --a: #3CCF86;
    --s: #0D1830;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    padding: 14px;
    border-radius: 12px;
    background: var(--s);
    color: #FFFFFF;
}

.pa-su-dash small {
    font-size: 11px;
    opacity: .7;
}

.pa-su-dash b {
    font-family: var(--pg-font-mono, monospace);
    font-size: 20px;
}

.pa-su-up {
    font-size: 12px;
    font-weight: 700;
    color: var(--a);
}

.pa-su-dash i {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 44%;
    height: 40px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--a) 45%, transparent), transparent);
    clip-path: polygon(0 80%, 15% 60%, 30% 70%, 48% 35%, 62% 45%, 80% 15%, 100% 5%, 100% 100%, 0 100%);
}

.pa-su-note {
    margin: 0;
    font-size: 12px;
    color: var(--pg-dim);
}

.pa-su-picked {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-su-picked b {
    color: var(--pa-gold-fg);
}

.pa-su-tpls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.pa-su-tpl {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px;
    border: 1.5px solid var(--pa-border-soft);
    border-radius: 12px;
    background: var(--pa-card-flat);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pa-su-tpl:hover {
    border-color: var(--pa-gold-border);
}

.pa-su-tpl.on {
    border-color: var(--pa-gold-fg);
    background: var(--pa-gold-wash);
    box-shadow: 0 0 0 3px rgba(160, 132, 76, .15);
}

html[data-theme="dark"] .pa-su-tpl.on {
    box-shadow: 0 0 0 3px rgba(242, 205, 122, .15);
}

.pa-su-tpl b {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 13.5px;
}

.pa-su-tpl b em {
    display: none;
    font-size: 11px;
    font-style: normal;
    color: var(--pa-gold-fg);
}

.pa-su-tpl.on b em {
    display: inline;
}

.pa-su-tpl > span:last-child {
    font-size: 12px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.pa-su-th {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 9%;
    border-radius: 8px;
    background: var(--tb);
    color: var(--tt);
}

.pa-su-th .n {
    display: flex;
    align-items: center;
    gap: 6%;
}

.pa-su-th .n i {
    width: 16%;
    height: 6px;
    border-radius: 3px;
    background: var(--tt);
    opacity: .5;
}

.pa-su-th .n i:first-child {
    width: 9%;
    height: 9px;
    background: var(--ta);
    opacity: 1;
}

.pa-su-th .h {
    width: 70%;
    height: 12%;
    border-radius: 4px;
    background: var(--tt);
    opacity: .9;
}

.pa-su-th .h2 {
    width: 50%;
    height: 8%;
    border-radius: 4px;
    background: var(--tt);
    opacity: .45;
}

.pa-su-th .c {
    width: 30%;
    height: 13%;
    border-radius: 99px;
    background: var(--ta);
}

.pa-su-th.d {
    flex-direction: row;
    gap: 5%;
    padding: 7%;
}

.pa-su-th.d .side {
    width: 18%;
    border-radius: 5px;
    background: var(--tt);
    opacity: .12;
}

.pa-su-th.d .main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7%;
}

.pa-su-th.d .tiles {
    display: flex;
    gap: 6%;
    height: 24%;
}

.pa-su-th.d .tiles i {
    flex: 1;
    border-radius: 5px;
    background: var(--tt);
    opacity: .14;
}

.pa-su-th.d .chart {
    flex: 1;
    border-radius: 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ta) 55%, transparent), transparent);
    clip-path: polygon(0 75%, 14% 55%, 28% 65%, 45% 30%, 60% 42%, 78% 12%, 100% 4%, 100% 100%, 0 100%);
}

.pa-su-th.genie {
    display: grid;
    place-items: center;
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
}

.pa-su-th.genie .mud-icon-root {
    font-size: 34px;
}

.pa-su-magic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 10px;
    text-align: center;
}

.pa-su-orb {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--pa-grad-gold);
    color: var(--pa-on-gold);
    box-shadow: 0 0 0 10px rgba(242, 205, 122, .12), 0 0 40px rgba(242, 205, 122, .6);
    animation: pa-su-pulse 1.4s ease-in-out infinite;
}

.pa-su-orb .mud-icon-root {
    font-size: 34px;
}

@keyframes pa-su-pulse {
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 16px rgba(242, 205, 122, .08), 0 0 60px rgba(242, 205, 122, .8);
    }
}

.pa-su-tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.pa-su-tasks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--pg-dim);
    transition: color .3s;
}

.pa-su-tasks li.on {
    color: var(--mud-palette-text-primary);
}

.pa-su-tasks li.on .mud-icon-root {
    color: var(--pg-ok);
}

.pa-su-done h2 {
    margin-top: 4px;
    font-size: 24px;
}

.pa-su-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.pa-su .pa-su-res {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--pa-gold-border);
    border-radius: 14px;
    background: var(--pa-card);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.pa-su-res .pa-su-th {
    aspect-ratio: 16 / 9;
}

.pa-su-res b {
    font-size: 15px;
}

.pa-su-res > span {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.pa-su .pa-su-res .pa-su-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-gold-fg);
}

.pa-su .pa-su-res[aria-disabled="true"] {
    opacity: .7;
}

@media (max-width: 900px) {
    .pa-su-brand,
    .pa-su-form,
    .pa-su-choice {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .pa-su {
        padding-bottom: 96px;
    }

    .pa-su-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pa-su-nav {
        align-items: center;
    }

    .pa-su-nav .pa-ps-btn-ghost {
        flex: none;
    }

    .pa-su-nav .pa-ps-btn-gold {
        min-width: 0;
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-su-orb {
        animation: none;
    }
}

/* =========================================================================
   HB-26052 - the path to launch bar (mockup D2-guided-tour-wizard, nav.pathbar
   in its final "calm path bar" form): the top bar's second row, five numbered
   dots with their titles joined by thin lines, and a gold line along the
   bottom edge that grows with the current step. Dark is the mockup's navy
   band. Light is derived from the mockup's earlier light path bar (a gold wash
   over the card colour and dark-on-light lines); the mockup has none of its
   own. PathToLaunchBar renders it; the boot skeleton draws an empty one.
   ========================================================================= */
.pg-path {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--pgs-path-height);
    padding: 0 var(--pgs-content-pad);
    border-top: 1px solid var(--pgs-line);
    border-bottom: 1px solid var(--pgs-line);
    background: linear-gradient(90deg, var(--pgs-gold-wash), transparent 70%), var(--pgs-panel);
    font-family: var(--pgs-font);
    container: pg-path / inline-size;
}

html[data-theme="dark"] .pg-path {
    border-top: 0;
    border-bottom-color: rgba(242, 205, 122, .18);
    background: #0E1830;
}

/* MudAppBar puts all its content in one toolbar row, so the bar hangs under that row, inside the top bar. */
.pg-shell .pg-topbar .pg-path {
    position: absolute;
    top: var(--pgs-topbar-height);
    right: 0;
    left: 0;
}

/* The gold line: PathToLaunchBar sets --pg-path-progress from the current step. */
.pg-path::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: var(--pg-path-progress, 10%);
    height: 2px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #FFDA72, #CD9650);
    transition: width .5s ease;
}

html[data-theme="dark"] .pg-path::after {
    opacity: .7;
}

/* Wider than the screen, the steps scroll sideways inside the bar, never the page. The padding keeps the focus ring
   inside the scroller, which would clip it. */
.pg-path-road {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 1100px;
    margin: 0;
    padding: 4px 2px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.pg-path-road::-webkit-scrollbar {
    display: none;
}

.pg-path-road > li {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
}

.pg-path-road > li:last-child {
    flex: 0 1 auto;
}

/* The line to the next step. */
.pg-path-road > li:not(:last-child)::after {
    content: "";
    flex: 1;
    min-width: 10px;
    height: 1px;
    margin-left: 4px;
    border-radius: 2px;
    background: rgba(16, 24, 40, .12);
}

.pg-path-road > li.done:not(:last-child)::after {
    background: var(--pgs-grad-gold);
}

.pg-path a.pg-path-step,
.pg-path button.pg-path-step {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    padding: 2px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pg-path .pg-path-step:focus-visible {
    outline: 2px solid var(--pgs-line-gold);
    outline-offset: 0;
}

.pg-path-dot {
    display: grid;
    flex: none;
    place-items: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(16, 24, 40, .18);
    border-radius: 50%;
    background: var(--pgs-flat);
    font: 600 10.5px/1 var(--pgs-font-mono);
    color: var(--pgs-muted);
}

.pg-path li.now .pg-path-dot,
.pg-path li.done .pg-path-dot {
    border-color: transparent;
    background: var(--pgs-grad-gold);
    color: var(--pgs-on-gold);
}

.pg-path-title {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pgs-muted);
}

.pg-path li.done .pg-path-title {
    color: var(--pgs-text);
}

.pg-path li.now .pg-path-title,
.pg-path .pg-path-step:hover .pg-path-title {
    color: var(--pgs-gold);
}

html[data-theme="dark"] .pg-path-road > li:not(:last-child)::after {
    background: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .pg-path-road > li.done:not(:last-child)::after {
    background: rgba(242, 205, 122, .6);
}

html[data-theme="dark"] .pg-path-dot {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    color: #C9CEDC;
}

html[data-theme="dark"] .pg-path-title {
    color: #AEB5C8;
}

html[data-theme="dark"] .pg-path li.done .pg-path-title {
    color: #E6E9F1;
}

html[data-theme="dark"] .pg-path li.now .pg-path-title,
html[data-theme="dark"] .pg-path .pg-path-step:hover .pg-path-title {
    color: #F2CD7A;
}

/* ", done" for screen readers; the check mark says it on screen. */
.pg-path-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The band before the phase is known (the boot skeleton, and the layout's first render): no steps and no gold line,
   so it never shows another phase's progress. */
.pg-path-pending::after {
    display: none;
}

/* The boot skeleton's band is in flow under its top bar. */
.pg-boot-path {
    flex: none;
}

@media (max-width: 1023.98px) {
    .pg-path {
        padding: 0 16px;
    }
}

/* Too narrow for every title (all five need about 660px, so phones and a tablet with the drawer open): the current
   step keeps its title and the others show their dots only, so every step stays on screen and the current one is
   never scrolled out of sight. A hidden title still names its link for screen readers; the 28px dots are the touch
   targets. Under 300px (a 320px phone) even the current title goes, and the gold dot alone marks the step. */
@container pg-path (max-width: 699.98px) {
    .pg-path-road > li:not(.now) .pg-path-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .pg-path a.pg-path-step,
    .pg-path button.pg-path-step {
        padding: 4px;
    }
}

@container pg-path (max-width: 299.98px) {
    .pg-path-road > li.now .pg-path-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pg-path::after {
        transition: none;
    }
}