/* /Components/Layout/ComicHeader.razor.rz.scp.css */
/* Comic-panel header. Everything here is scoped to ComicHeader; nothing below the header is styled. */

.comic[b-8aryws8cmc] {
    --comic: "Bangers", "Impact", "Arial Narrow", sans-serif;
    position: sticky;
    top: 0;
    z-index: 20; /* below the summary drawer (25), plate bubbles (30) and InfoPopup overlay (1000) */
    color: var(--ink);
    background-color: var(--secondary);
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.3px, transparent 1.8px),
        radial-gradient(circle, rgba(11, 31, 51, 0.16) 1.3px, transparent 1.8px),
        linear-gradient(100deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
    background-size: 9px 9px, 9px 9px, 100% 100%;
    background-position: 0 0, 4.5px 4.5px, 0 0;
    border-bottom: 4px solid var(--ink);
    box-shadow: 0 5px 0 rgba(11, 31, 51, 0.2);
    overflow-x: clip; /* decoration never adds horizontal scroll */
}

.comic-inner[b-8aryws8cmc] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "word scene nav";
    align-items: center;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.7rem 1.6rem 0;
    min-height: 6.4rem;
}

/* Wordmark: a caption box */
.comic-wordmark[b-8aryws8cmc] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    grid-area: word;
    justify-self: start;
    align-self: center;
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.85rem 0.25rem;
    background: #fff;
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    transform: rotate(-1.5deg);
    color: var(--ink);
    text-decoration: none;
}

.comic-wordmark:hover[b-8aryws8cmc] {
    box-shadow: 5px 5px 0 var(--primary);
}

.comic-wordmark:focus-visible[b-8aryws8cmc] {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

.comic-wordmark .chi-stars[b-8aryws8cmc] {
    display: flex;
    gap: 0.22rem;
    align-self: center; /* stars centred over the title */
}

.comic-wordmark .chi-star[b-8aryws8cmc] {
    width: 11px;
    height: 11px;
}

.comic-title[b-8aryws8cmc] {
    font-family: var(--comic);
    font-weight: 400;
    font-size: 2.15rem;
    line-height: 1;
    letter-spacing: 0.035em;
    color: var(--ink);
    text-shadow: 2px 2px 0 var(--secondary);
    white-space: nowrap;
}

/* Skyline + balloon: decorative, sits on the panel's bottom edge */
.comic-scene[b-8aryws8cmc] {
    grid-area: scene;
    position: relative;
    align-self: end;
    justify-self: center;
    width: 16rem;
    height: 6.4rem;
    pointer-events: none;
}

/* viewBox is 240x100: at 5rem tall the drawing is 12rem wide, leaving room on the right for the balloon. */
.skyline[b-8aryws8cmc] {
    position: absolute;
    left: 0.5rem;
    bottom: 0;
    width: 12rem;
    height: 5rem;
    display: block;
}

.sky-front[b-8aryws8cmc] {
    fill: var(--ink);
}

.sky-back[b-8aryws8cmc] {
    fill: rgba(11, 31, 51, 0.45);
}

/* Balloon floats right of the Willis antennas; its tail points down-left at them. */
.balloon[b-8aryws8cmc] {
    position: absolute;
    top: 0.05rem;
    left: 7.35rem;
    padding: 0.3rem 0.8rem 0.24rem;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--comic);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink);
}

.balloon[b-8aryws8cmc]::before,
.balloon[b-8aryws8cmc]::after {
    content: "";
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.balloon[b-8aryws8cmc]::before {
    left: 0.85rem;
    bottom: -1rem;
    width: 1.35rem;
    height: 1.05rem;
    background: var(--ink);
}

.balloon[b-8aryws8cmc]::after {
    left: calc(0.85rem + 4px);
    bottom: calc(-1rem + 7px);
    width: calc(1.35rem - 9px);
    height: calc(1.05rem - 7px);
    background: #fff;
}

/* Nav: comic buttons; the current page sits on a red starburst */
.comic-nav[b-8aryws8cmc] {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.comic-nav[b-8aryws8cmc]  a {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.8rem;
    font-family: var(--comic);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.comic-nav[b-8aryws8cmc]  a:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.comic-nav[b-8aryws8cmc]  a:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.comic-nav[b-8aryws8cmc]  a.active {
    color: #fff;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    text-shadow: 2px 2px 0 var(--ink);
}

.comic-nav[b-8aryws8cmc]  a.active::before {
    content: "";
    position: absolute;
    inset: -11px -14px;
    z-index: -1;
    background: var(--primary);
    clip-path: polygon(50.0% 0.0%, 58.0% 14.9%, 71.7% 5.0%, 72.4% 21.9%, 89.1% 18.8%, 82.4% 34.4%, 98.7% 38.9%, 86.0% 50.0%, 98.7% 61.1%, 82.4% 65.6%, 89.1% 81.2%, 72.4% 78.1%, 71.7% 95.0%, 58.0% 85.1%, 50.0% 100.0%, 42.0% 85.1%, 28.3% 95.0%, 27.6% 78.1%, 10.9% 81.2%, 17.6% 65.6%, 1.3% 61.1%, 14.0% 50.0%, 1.3% 38.9%, 17.6% 34.4%, 10.9% 18.8%, 27.6% 21.9%, 28.3% 5.0%, 42.0% 14.9%);
    filter: drop-shadow(2px 2px 0 var(--ink));
}

@media (max-width: 1100px) {
    .comic-title[b-8aryws8cmc] {
        font-size: 1.85rem;
    }
    .comic-nav[b-8aryws8cmc]  a {
        font-size: 1.1rem;
        padding: 0 0.65rem;
    }
}

/* Under ~900px the nav drops to its own row; the skyline shrinks beside the wordmark, then goes under ~600px. */
@media (max-width: 900px) {
    .comic-inner[b-8aryws8cmc] {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "word scene"
            "nav nav";
        gap: 0.55rem 1rem;
        padding: 0.6rem 0.9rem 0.75rem;
        min-height: 0;
    }
    .comic-scene[b-8aryws8cmc] {
        justify-self: end;
        align-self: end;
        margin: -1.3rem 0 -0.2rem;
        transform: scale(0.8);
        transform-origin: bottom right;
    }
    .comic-wordmark[b-8aryws8cmc] {
        margin-bottom: 0.15rem;
    }
    .comic-nav[b-8aryws8cmc] {
        justify-content: flex-start;
        margin-bottom: 0;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .comic-inner[b-8aryws8cmc] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "word"
            "nav";
    }
    .comic-scene[b-8aryws8cmc] {
        display: none;
    }
}

@media (max-width: 520px) {
    .comic-inner[b-8aryws8cmc] {
        padding: 0.5rem 0.75rem 0.65rem;
    }
    .comic-wordmark[b-8aryws8cmc] {
        padding: 0.2rem 0.6rem 0.15rem;
        box-shadow: 3px 3px 0 var(--ink);
    }
    .comic-title[b-8aryws8cmc] {
        font-size: 1.45rem;
    }
    .comic-wordmark .chi-star[b-8aryws8cmc] {
        width: 9px;
        height: 9px;
    }
    .comic-nav[b-8aryws8cmc] {
        gap: 0.4rem;
        justify-content: space-between;
    }
    .comic-nav[b-8aryws8cmc]  a {
        font-size: 1rem;
        letter-spacing: 0.03em;
        padding: 0 0.5rem;
        box-shadow: 2px 2px 0 var(--ink);
        border-width: 2px;
    }
    .comic-nav[b-8aryws8cmc]  a.active::before {
        inset: -8px -9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .comic-nav[b-8aryws8cmc]  a {
        transition: none;
    }
}

/* The Who button (WhoMenu) is a nav button between "2026 rates" and "About". Under ~900px it moves out of the nav row
   to the top-right corner of the header, beside the wordmark, so the nav row stays four buttons and the header no taller. */
@media (max-width: 900px) {
    .comic-inner.has-who[b-8aryws8cmc] {
        position: relative;
    }
    .comic-inner.has-who .comic-scene[b-8aryws8cmc] {
        margin-right: 7.5rem;
    }
}

@media (max-width: 600px) {
    .comic-inner.has-who .comic-wordmark[b-8aryws8cmc] {
        max-width: calc(100% - 7.4rem);
    }
}
/* Phones: the sticky header slides up out of the way while the page scrolls down and comes back on any scroll up
   (site.js sets html.mast-hidden; with no script it simply stays put), so the header, the analytics bar and the
   totals bar never cover a third of the screen together. */
@media (max-width: 600px) {
    .comic[b-8aryws8cmc] {
        transition: transform 0.2s ease;
    }
    html.mast-hidden .comic[b-8aryws8cmc] {
        transform: translateY(calc(-100% - 10px));
    }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
    .comic[b-8aryws8cmc] {
        transition: none;
    }
}

/* Narrow phones (320–360px): the four nav buttons stay on one row (Estimate, New taxes, 2026 rates, About; Who keeps
   its corner beside the wordmark) and the wordmark leaves room for the Who button. */
@media (max-width: 360px) {
    .comic-inner[b-8aryws8cmc] {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    .comic-title[b-8aryws8cmc] {
        font-size: 1.2rem;
    }
    .comic-wordmark .chi-star[b-8aryws8cmc] {
        width: 8px;
        height: 8px;
    }
    .comic-nav[b-8aryws8cmc] {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }
    .comic-nav[b-8aryws8cmc]  a {
        font-size: 0.9rem;
        letter-spacing: 0.02em;
        padding: 0 0.4rem;
    }
    .comic-nav[b-8aryws8cmc]  a.active::before {
        inset: -7px -6px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-tycvo1vpwv] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Height of the sticky ComicHeader: anchors in main use it for scroll-margin-top so they land below it. */
    --mast: 7.4rem;
}

@media (max-width: 900px) {
    .shell[b-tycvo1vpwv] { --mast: 9.8rem; }
}

@media (max-width: 600px) {
    .shell[b-tycvo1vpwv] { --mast: 8.7rem; }
}

@media (max-width: 520px) {
    .shell[b-tycvo1vpwv] { --mast: 7.75rem; }
}

/* The old masthead rules (::deep nav a) also reached the ledger's jump nav inside main. Carried over unchanged so
   nothing below the header changes; the header's own nav is styled in ComicHeader.razor.css. */
main[b-tycvo1vpwv]  nav a {
    color: #d7e7f2;
    text-decoration: none;
    border-bottom: none;
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
}

main[b-tycvo1vpwv]  nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

main[b-tycvo1vpwv]  nav a.active {
    color: #fff;
    background: var(--primary);
}

@media (max-width: 900px) {
    main[b-tycvo1vpwv]  nav a {
        padding: 0.3rem 0.55rem;
    }
}

/* The page is one newsprint sheet under the header: main and footer share its colour and fine grain. */
main[b-tycvo1vpwv] {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1.65rem 2rem 3rem;
    background-color: var(--paper);
    box-shadow: 0 0 0 1px #d8d1bf;
    background-image: radial-gradient(rgba(0, 0, 0, 0.035) 0.6px, transparent 0.7px);
    background-size: 3px 3px;
}

footer[b-tycvo1vpwv] {
    border-top: 4px double var(--ink);
    padding: 1rem 1.5rem 2.2rem;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--ink);
    background-color: var(--paper);
    box-shadow: 0 0 0 1px #d8d1bf;
    font-size: 0.92rem;
    width: 100%;
    text-align: center;
}

footer p[b-tycvo1vpwv] {
    margin: 0.55rem auto 0;
    max-width: 72ch;
}

.footer-nav[b-tycvo1vpwv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Rows sit far enough apart that the 44px phone tap areas of two wrapped rows don't overlap. */
    gap: 0.75rem 1rem;
    margin: 0.55rem 0 0;
    max-width: none;
    width: 100%;
}

.footer-nav a[b-tycvo1vpwv] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--ink);
    font-family: var(--narrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-stars[b-tycvo1vpwv] {
    justify-content: center;
}

.footer-stars .chi-star[b-tycvo1vpwv] {
    background: var(--star);
    opacity: 0.85;
}

@media (max-width: 600px) {
    main[b-tycvo1vpwv] {
        padding: 1rem 0.875rem 2.5rem;
    }

    footer[b-tycvo1vpwv] {
        padding: 1rem 0.875rem 2rem;
    }
}
/* /Components/Layout/WhoMenu.razor.rz.scp.css */
/* The header's "Who" button and panel. Its place in the header grid (area "who") is set in ComicHeader.razor.css. */

/* The header's "Who" button and panel. On desktop it is one of the nav buttons (same box as ComicHeader's
   .comic-nav a); under ~900px it sits in the header's top-right corner (see the end of this file). */

.who-menu[b-xz1qchkgkh] {
    position: relative;
    display: block;
}

.who-menu > summary[b-xz1qchkgkh] {
    position: relative;
    isolation: isolate;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 0.8rem;
    font-family: var(--comic);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--ink);
    background: #fff;
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.who-menu > summary:hover[b-xz1qchkgkh] {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.who-menu > summary[b-xz1qchkgkh]::-webkit-details-marker {
    display: none;
}

.who-menu > summary[b-xz1qchkgkh]::after {
    content: "";
    border: 5px solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
    margin-top: 2px;
}

.who-menu[open] > summary[b-xz1qchkgkh]::after {
    border-top: 0;
    border-bottom: 5px solid currentColor;
}

.who-menu > summary:focus-visible[b-xz1qchkgkh] {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* On a Who page the button sits on the same red starburst as the current nav page. */
.who-menu > summary.is-current[b-xz1qchkgkh] {
    color: #fff;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    text-shadow: 2px 2px 0 var(--ink);
}

.who-menu > summary.is-current[b-xz1qchkgkh]::before {
    content: "";
    position: absolute;
    inset: -11px -14px;
    z-index: -1;
    background: var(--primary);
    clip-path: polygon(50.0% 0.0%, 58.0% 14.9%, 71.7% 5.0%, 72.4% 21.9%, 89.1% 18.8%, 82.4% 34.4%, 98.7% 38.9%, 86.0% 50.0%, 98.7% 61.1%, 82.4% 65.6%, 89.1% 81.2%, 72.4% 78.1%, 71.7% 95.0%, 58.0% 85.1%, 50.0% 100.0%, 42.0% 85.1%, 28.3% 95.0%, 27.6% 78.1%, 10.9% 81.2%, 17.6% 65.6%, 1.3% 61.1%, 14.0% 50.0%, 1.3% 38.9%, 17.6% 34.4%, 10.9% 18.8%, 27.6% 21.9%, 28.3% 5.0%, 42.0% 14.9%);
    filter: drop-shadow(2px 2px 0 var(--ink));
}

/* The two small faces show only in the phone corner button; the desktop button is text like its neighbours. */
.wm-faces[b-xz1qchkgkh] {
    display: none;
}

.wm-faces img[b-xz1qchkgkh],
.wm-faces .wm-initials[b-xz1qchkgkh] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--star);
    background: #ddd;
}

.wm-faces > :nth-child(n + 2)[b-xz1qchkgkh] {
    margin-left: -9px;
}

.wm-initials[b-xz1qchkgkh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 0.6rem/1 var(--narrow);
    color: var(--ink);
}

.who-panel[b-xz1qchkgkh] {
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(24rem, calc(100vw - 1.5rem));
    background: var(--card);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 0.3rem;
    z-index: 40;
}

.wm-panel-h[b-xz1qchkgkh] {
    margin: 0.35rem 0.6rem 0.1rem;
    font: 700 0.72rem/1.2 var(--narrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.wm-panel-f[b-xz1qchkgkh] {
    margin: 0.2rem 0.6rem 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--line);
    font: 400 0.85rem/1.3 var(--narrow);
    color: var(--muted);
}

.wm-face[b-xz1qchkgkh] {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--star);
    background: #ddd;
    flex: 0 0 auto;
}

a.who-row[b-xz1qchkgkh] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 64px;
    padding: 0.5rem 0.6rem;
    color: var(--ink);
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    font-family: var(--text);
}

/* The More row has its own box so the nav button styles (.comic-nav a) do not reach it: a plain text row, no border or shadow. */
.who-panel a.who-more[b-xz1qchkgkh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 48px;
    margin: 0;
    padding: 0.5rem 0.6rem;
    color: var(--primary);
    text-decoration: none;
    text-transform: none;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
    transform: none;
    font: 700 1.05rem/1.2 var(--narrow);
    letter-spacing: 0.02em;
}

.who-panel a.who-more > span + span[b-xz1qchkgkh] {
    font: 700 1.5rem/1 var(--narrow);
}

.who-panel a.who-more:hover[b-xz1qchkgkh] {
    background: var(--primary-soft);
    transform: none;
    box-shadow: none;
}

.who-panel a.who-more:focus-visible[b-xz1qchkgkh] {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}

a.who-row + a.who-row[b-xz1qchkgkh] {
    border-top: 1px solid var(--line);
}

.wm-nm[b-xz1qchkgkh] {
    display: block;
    font-family: var(--cond);
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1.1;
}

.wm-of[b-xz1qchkgkh] {
    display: block;
    font: 400 0.88rem/1.25 var(--narrow);
    color: var(--muted);
}

.wm-go[b-xz1qchkgkh] {
    font: 700 1.5rem/1 var(--narrow);
    color: var(--primary);
}

/* Hover: the nav's lift and bigger shadow (.comic-nav a:hover) must not reach the rows. */
.who-panel a.who-row:hover[b-xz1qchkgkh] {
    background: var(--primary-soft);
    transform: none;
    box-shadow: none;
}

a.who-row:focus-visible[b-xz1qchkgkh] {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}

@media (max-width: 1100px) {
    .who-menu > summary[b-xz1qchkgkh] {
        font-size: 1.1rem;
        padding: 0 0.65rem;
    }
}

/* Phone and small tablet: the corner button (faces + "Who"), out of the nav row. */
@media (max-width: 900px) {
    .who-menu[b-xz1qchkgkh] {
        position: absolute;
        top: 0.55rem;
        right: 1.4rem;
    }
    .who-menu > summary[b-xz1qchkgkh] {
        font-size: 1.2rem;
        padding: 0 0.55rem 0 0.5rem;
    }
    .wm-faces[b-xz1qchkgkh] {
        display: inline-flex;
    }
    /* No starburst in the corner: a plain red button. */
    .who-menu > summary.is-current[b-xz1qchkgkh] {
        color: #fff;
        background: var(--primary);
        border-color: var(--ink);
        box-shadow: 3px 3px 0 var(--ink);
    }
    .who-menu > summary.is-current[b-xz1qchkgkh]::before {
        display: none;
    }
}

@media (max-width: 520px) {
    .who-menu[b-xz1qchkgkh] {
        right: 0.75rem;
        top: 0.5rem;
    }
    .who-menu > summary[b-xz1qchkgkh] {
        font-size: 1rem;
        letter-spacing: 0.03em;
        padding: 0 0.5rem 0 0.4rem;
        border-width: 2px;
        box-shadow: 2px 2px 0 var(--ink);
        gap: 0.35rem;
    }
    .who-menu > summary.is-current[b-xz1qchkgkh] {
        box-shadow: 2px 2px 0 var(--ink);
    }
    .who-menu > summary[b-xz1qchkgkh]::after {
        border-width: 4px;
    }
}

/* Narrow phones (320–360px): one face and a smaller button, so it never touches the wordmark. */
@media (max-width: 360px) {
    .who-menu[b-xz1qchkgkh] {
        right: 0.6rem;
    }
    .who-menu > summary[b-xz1qchkgkh] {
        font-size: 0.9rem;
        padding: 0 0.4rem 0 0.35rem;
        gap: 0.25rem;
    }
    .wm-faces > :nth-child(n + 2)[b-xz1qchkgkh] {
        display: none;
    }
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
/* Feedback page: the 404 page's comic panel, holding the address. main resets --ink etc. to newspaper colours,
   so the header's comic tokens are restated here. */
.fb[b-yxwcpz3cq5] {
    --k-ink: #0b1f33;
    --k-red: #c8102e;
    --k-cream: #fffaf1;
    --k-comic: "Bangers", "Impact", "Arial Narrow", sans-serif;
    box-sizing: border-box;
    width: min(100%, 36rem);
    margin: 2rem auto 0;
    color: var(--k-ink);
    text-align: center;
}

.fb-lede[b-yxwcpz3cq5] {
    margin-top: 1rem;
    text-align: center;
    font-size: 1.25rem;
}

.fb-panel[b-yxwcpz3cq5] {
    box-sizing: border-box;
    width: 100%;
    padding: 2.1rem 1.5rem 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    background-color: #fff;
    background-image: radial-gradient(circle, rgba(94, 179, 212, 0.5) 1.5px, transparent 2px);
    background-size: 9px 9px;
    border: 4px solid var(--k-ink);
    box-shadow: 6px 6px 0 var(--k-ink);
}

.fb-caption[b-yxwcpz3cq5] {
    margin: 0;
    padding: 0.35rem 1.1rem 0.25rem;
    font-family: var(--k-comic);
    font-weight: 400;
    font-size: 2.2rem;
    letter-spacing: 0.06em;
    line-height: 1.05;
    color: var(--k-ink);
    background: var(--k-cream);
    border: 3px solid var(--k-ink);
    box-shadow: 4px 4px 0 var(--k-ink);
    transform: rotate(-2deg);
}

.fb-address[b-yxwcpz3cq5] {
    margin: 0.2rem 0 0;
    font-family: var(--narrow);
    font-weight: 700;
    font-size: clamp(1.2rem, 4.2vw, 1.9rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.fb-address a[b-yxwcpz3cq5] {
    color: var(--k-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.fb-address a:hover[b-yxwcpz3cq5] {
    color: var(--k-red);
}

.fb-actions[b-yxwcpz3cq5] {
    margin: 0.2rem 0 0;
}

.fb-btn[b-yxwcpz3cq5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.1rem 1.5rem 0;
    font-family: var(--k-comic);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: var(--k-red);
    text-shadow: 2px 2px 0 var(--k-ink);
    border: 3px solid var(--k-ink);
    box-shadow: 4px 4px 0 var(--k-ink);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.fb-btn:hover[b-yxwcpz3cq5] {
    color: #fff;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--k-ink);
}

.fb-btn:focus-visible[b-yxwcpz3cq5],
.fb-address a:focus-visible[b-yxwcpz3cq5] {
    outline: 3px solid var(--k-red);
    outline-offset: 4px;
}

.fb-note[b-yxwcpz3cq5] {
    margin: 1.8rem auto 0;
    max-width: 32rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    color: #2f2f2f;
}

@media (prefers-reduced-motion: reduce) {
    .fb-btn[b-yxwcpz3cq5] { transition: none; }
    .fb-btn:hover[b-yxwcpz3cq5] { transform: none; }
}

@media (max-width: 600px) {
    .fb[b-yxwcpz3cq5] { margin-top: 1.4rem; }

    .fb-panel[b-yxwcpz3cq5] {
        padding: 1.5rem 1rem 1.6rem;
        box-shadow: 5px 5px 0 var(--k-ink);
    }

    .fb-caption[b-yxwcpz3cq5] { font-size: 1.9rem; }
    .fb-address[b-yxwcpz3cq5] { font-size: 1.2rem; }
    .fb-lede[b-yxwcpz3cq5] { font-size: 1.12rem; }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* 404 page: one centred comic panel in the header's palette. main resets --ink etc. to newspaper colours,
   so the header's comic tokens are restated here. Nothing here uses .card, so main .card's margins don't apply. */
.nf404[b-kmd36x3h0j] {
    --k-ink: #0b1f33;
    --k-sky: #5eb3d4;
    --k-red: #c8102e;
    --k-cream: #fffaf1;
    --k-comic: "Bangers", "Impact", "Arial Narrow", sans-serif;
    box-sizing: border-box;
    width: min(100%, 34rem);
    min-height: calc(100vh - var(--mast, 7.4rem) - 12rem);
    margin: 0 auto;
    padding: 1.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--k-ink);
    text-align: center;
}

.nf404-panel[b-kmd36x3h0j] {
    box-sizing: border-box;
    width: 100%;
    padding: 2.2rem 1.5rem 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    background-color: #fff;
    background-image: radial-gradient(circle, rgba(94, 179, 212, 0.5) 1.5px, transparent 2px);
    background-size: 9px 9px;
    border: 4px solid var(--k-ink);
    box-shadow: 6px 6px 0 var(--k-ink);
}

.nf404-burst[b-kmd36x3h0j] {
    position: relative;
    width: 15rem;
    max-width: 70%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transform: rotate(-6deg);
}

.nf404-burst svg[b-kmd36x3h0j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(5px 5px 0 var(--k-ink));
}

.nf404-burst-ink[b-kmd36x3h0j] { fill: var(--k-ink); }
.nf404-burst-red[b-kmd36x3h0j] { fill: var(--k-red); }

.nf404-burst span[b-kmd36x3h0j] {
    position: relative;
    font-family: var(--k-comic);
    font-size: 5.4rem;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: 3px 3px 0 var(--k-ink);
    transform: rotate(6deg) translateY(0.04em);
}

.nf404-caption[b-kmd36x3h0j] {
    margin: 0;
    padding: 0.4rem 1.1rem 0.3rem;
    font-family: var(--k-comic);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 2.7rem);
    letter-spacing: 0.05em;
    line-height: 1.05;
    color: var(--k-ink);
    background: var(--k-cream);
    border: 3px solid var(--k-ink);
    box-shadow: 4px 4px 0 var(--k-ink);
    transform: rotate(-2deg);
}

.nf404-helper[b-kmd36x3h0j] {
    margin: 1.6rem 0 0;
    max-width: 32rem;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.4;
    color: #141414;
}

.nf404-actions[b-kmd36x3h0j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem 1.1rem;
    margin: 1.2rem 0 0;
}

.nf404-btn[b-kmd36x3h0j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.1rem 1.25rem 0;
    font-family: var(--k-comic);
    font-size: 1.45rem;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--k-ink);
    background: #fff;
    border: 3px solid var(--k-ink);
    box-shadow: 4px 4px 0 var(--k-ink);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.nf404-btn:hover[b-kmd36x3h0j] {
    color: var(--k-ink);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--k-ink);
}

.nf404-btn-primary[b-kmd36x3h0j],
.nf404-btn-primary:hover[b-kmd36x3h0j] {
    color: #fff;
    background: var(--k-red);
    text-shadow: 2px 2px 0 var(--k-ink);
}

.nf404-btn:focus-visible[b-kmd36x3h0j] {
    outline: 3px solid var(--k-red);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .nf404-btn[b-kmd36x3h0j] { transition: none; }
    .nf404-btn:hover[b-kmd36x3h0j] { transform: none; }
}

@media (max-width: 600px) {
    .nf404[b-kmd36x3h0j] {
        min-height: 0;
        padding: 0.6rem 0 0.5rem;
    }

    .nf404-panel[b-kmd36x3h0j] {
        padding: 1.5rem 1rem 1.7rem;
        gap: 1.1rem;
        box-shadow: 5px 5px 0 var(--k-ink);
    }

    .nf404-burst[b-kmd36x3h0j] { width: 11rem; }
    .nf404-burst span[b-kmd36x3h0j] { font-size: 4rem; }
    .nf404-caption[b-kmd36x3h0j] { font-size: 1.9rem; }
    .nf404-helper[b-kmd36x3h0j] { font-size: 1.05rem; margin-top: 1.3rem; }

    .nf404-btn[b-kmd36x3h0j] {
        flex: 1 1 auto;
        min-width: 9rem;
        font-size: 1.3rem;
    }
}