@import url('css/fonts.css');
@import url('css/tokens.css');

/* ═══════════════════════════════════════════════════════════════════════════
   Base reset & global styles
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
    color-scheme: light;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-text-default);
    background: var(--color-bg-page);
}

body { margin: 0; background: var(--color-bg-page); }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4, h5, h6 {
    margin-block: 0 var(--space-4);
    line-height: 1.2;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-default);
}
h1 { font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl)); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p { margin-block: 0 var(--space-4); }

/* ── Utility classes (CSP: no inline style= allowed, use these instead) ─ */
.text-muted { color: var(--color-text-muted); }
.pre-wrap { white-space: pre-wrap; }

/* ── Skip navigation link ─────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    z-index: 9999;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    left: var(--space-4);
    top: var(--space-4);
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    white-space: normal;
    overflow: visible;
    padding: var(--space-3) var(--space-5);
    background: var(--color-green-700);
    color: var(--color-neutral-0);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--font-size-md);
    text-decoration: none;
    outline: 3px solid var(--color-amber-400);
    outline-offset: 2px;
}

/* ── Focus visible ring ───────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: 2px;
}

/* Remove outline from programmatic focus targets (skip link destination) */
#main-content:focus { outline: none; }

/* ── Screen-reader only ───────────────────────────────────────────────── */
.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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════════ */

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: var(--space-button-padding-y) var(--space-button-padding-x);
    border: var(--border-width-card) solid var(--color-border-strong);
    border-radius: var(--radius-button);
    background: var(--color-brand);
    color: var(--color-text-on-brand);
    font: inherit;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

button:hover, .btn:hover { background: var(--color-brand-hover); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-border-strong); outline-offset: 2px; }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--color-brand); color: var(--color-text-on-brand); border-color: var(--color-border-strong); }
.btn-primary:hover { background: var(--color-brand-hover); }

.btn-secondary {
    background: transparent;
    color: var(--color-text-default);
    border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-brand-subtle); }

.btn-danger {
    background: var(--color-error-text);
    color: var(--color-neutral-0);
    border-color: var(--color-border-strong);
}
.btn-danger:hover { background: #5a1515; }

.btn-sm { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); }
.btn-lg { min-height: 3.25rem; padding: var(--space-4) var(--space-6); font-size: var(--font-size-lg); }

.button-link {
    min-height: auto;
    min-width: auto;
    padding: 0;
    background: transparent;
    color: var(--color-link);
    border: none;
    font-family: inherit;
    font-weight: inherit;
}
.button-link:hover { background: transparent; color: var(--color-link-hover); text-decoration: underline; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-default);
}
.list-row:last-child { border-bottom: none; }

/* A follow-on row belonging to the one above it (e.g. a pending import's "possible duplicate"
   prompt): indented, no divider, tighter top spacing. */
.list-row-nested {
    padding-top: 0;
    padding-left: var(--space-4);
    border-bottom: none;
    font-size: 0.9em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgb(0 0 0 / 50%);
    z-index: 100;
}

.modal {
    width: min(100%, 28rem);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-card-padding);
    border-radius: var(--radius-card);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Messaging
   ═══════════════════════════════════════════════════════════════════════════ */

.conversation-list { list-style: none; margin: 0; padding: 0; }
.conversation-list li { border-bottom: 1px solid var(--color-border-default); }
.conversation-list li:last-child { border-bottom: none; }
.conversation-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    text-decoration: none;
    color: var(--color-text-default);
}
.conversation-list a:hover { color: var(--color-link-hover); }
.conversation-list .preview {
    flex: 1;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.message {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}
.message.retracted { opacity: 0.6; font-style: italic; }
.message .sender { font-weight: 700; margin-right: var(--space-2); }
.message .time { margin-left: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.message .body { display: block; margin-top: var(--space-1); }

.send-form { display: flex; gap: var(--space-2); }
.send-form .form-input { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   Notifications
   ═══════════════════════════════════════════════════════════════════════════ */

.notification-list { list-style: none; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
    background: var(--color-bg-surface);
    border: var(--border-width-card) solid var(--color-border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-card-padding);
}

/* A plain <table> has no intrinsic width limit — wide cells (URLs, addresses, row actions) can
   blow out a .card's fixed padding sideways. Wrap a table in this to scroll horizontally instead.
   refactor-101 H7 asked for a new `.table-wrap { overflow-x: auto; }` — this pre-existing class
   already does exactly that (added for StoreDiscoveries.razor before H7 was written), so H7's fix
   was applying it to the other admin table pages rather than introducing a duplicate class. */
.table-scroll {
    overflow-x: auto;
}

/* Add alongside .table-scroll for a table whose row COUNT is unbounded (e.g. a locality rollup
   covering the whole US) — caps the box's height and scrolls vertically too, instead of the page
   growing to fit every row. */
.table-scroll-tall {
    max-height: 24rem;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Form utilities
   ═══════════════════════════════════════════════════════════════════════════ */

.form-field {
    display: grid;
    gap: var(--space-1);
}

.form-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-default);
}

.form-input {
    width: 100%;
    min-height: 2.8rem;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-card) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-bg-surface);
    color: var(--color-text-default);
    font: inherit;
    font-size: var(--font-size-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus-visible {
    outline: none;
    border-color: var(--color-border-strong);
    box-shadow: 0 0 0 3px rgb(23 35 28 / 15%);
}

.form-error {
    font-size: var(--font-size-xs);
    color: var(--color-error-text);
}

.checkbox-field {
    display: flex;
    align-items: start;
    gap: var(--space-2);
    margin: var(--space-1) 0;
}

.checkbox-field input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Alert / status messages
   ═══════════════════════════════════════════════════════════════════════════ */

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 4px solid currentColor;
    font-size: var(--font-size-sm);
}

.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-amber-600); border-left-color: var(--color-warning-border); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.badge-brand   { background: var(--color-brand-subtle); color: var(--color-link); }
.badge-success { background: var(--color-success-bg);   color: var(--color-success-text); }
.badge-error   { background: var(--color-error-bg);     color: var(--color-error-text); }
.badge-amber   { background: var(--color-amber-100);    color: var(--color-amber-600); }

/* ═══════════════════════════════════════════════════════════════════════════
   Page header
   ═══════════════════════════════════════════════════════════════════════════ */

.page-header {
    margin-bottom: var(--space-section-gap);
}

.page-header h1 { margin-bottom: var(--space-2); }

.page-header__subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Empty state
   ═══════════════════════════════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state__icon {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.5;
}

.empty-state__heading {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-default);
}

.empty-state__description {
    margin: 0;
    font-size: var(--font-size-sm);
    max-width: 32ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Loading spinner
   ═══════════════════════════════════════════════════════════════════════════ */

.spinner {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-border-default);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: gb-spin 0.8s linear infinite;
}

.spinner-sm { width: 1.25rem; height: 1.25rem; border-width: 2px; }

@keyframes gb-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; opacity: 0.6; }
}

/* Skeleton shimmer */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-sand-100) 25%,
        var(--color-sand-50)  50%,
        var(--color-sand-100) 75%
    );
    background-size: 200% 100%;
    animation: gb-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes gb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

.skeleton-text    { height: 1em; margin-block: 0.4em; }
.skeleton-heading { height: 1.5em; width: 60%; margin-block: 0.5em; }
.skeleton-card    { height: 8rem; border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   Tab widget (WAI-ARIA tabs pattern)
   ═══════════════════════════════════════════════════════════════════════════ */

.tab-list {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--color-border-default);
    margin-bottom: var(--space-6);
}

.tab-btn {
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: -2px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:hover { color: var(--color-text-default); }

.tab-btn[aria-selected="true"] {
    color: var(--color-link);
    border-bottom-color: var(--color-link);
}

.tab-btn:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Site header & navigation (preserved + tokenized)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 4.25rem;
    padding: var(--space-3) clamp(var(--space-4), 5vw, var(--space-12));
    background: var(--color-bg-surface);
    border-bottom: var(--border-width-card) solid var(--color-border-strong);
}

.site-brand {
    color: var(--color-text-default);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.site-header nav a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.site-header nav a:hover {
    color: var(--color-text-default);
    background: var(--color-bg-subtle);
}

.account-menu { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; }
.account-menu form { display: inline; }
.account-menu__name { color: var(--color-text-muted); }

/* AccountLinks renders each AuthorizeView branch's bare copy wrapped in its own single flex item
   (this pair for signed-out, .account-menu__account-links below for signed-in) so app.css can hide
   just that branch below the mobile breakpoint (see the media query) without touching the other,
   which has no wrapper of its own to hide since only one AuthorizeView branch ever renders at a
   time. Being one flex item instead of bare <a>/<form> children means the parent .account-menu's own
   `gap` no longer separates them — this repeats that same gap internally so the desktop header looks
   exactly as it did before the branch had a wrapper. */
.account-menu__auth-links { display: inline-flex; align-items: center; gap: 0.85rem; }

/* Signed-in counterpart to .account-menu__auth-links above — same reasoning, for the Profile /
   Account / Sign out trio (the Sign out control is a <form>, so this wraps a <div> rather than a
   <span>: a <form> is flow content, not the phrasing content a <span> may contain). */
.account-menu__account-links { display: inline-flex; align-items: center; gap: 0.85rem; }

/* ── Mobile nav toggle & panel ────────────────────────────────────────── */
/* Hidden above the breakpoint — the desktop .primary-nav covers every destination there. */
.nav-toggle {
    display: none;
}

.mobile-nav-panel {
    display: none;
}

/* ── Page container ───────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: clamp(var(--space-4), 5vw, var(--space-8));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Account pages (preserved + tokenized)
   ═══════════════════════════════════════════════════════════════════════════ */

.account-page { display: grid; min-height: calc(100vh - 4.25rem); place-items: start center; padding: clamp(2rem, 7vw, 5rem) 1rem; }
.account-card { width: min(100%, 34rem); padding: clamp(1.5rem, 5vw, 3rem); border: var(--border-width-card) solid var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-bg-surface); box-shadow: var(--shadow-card); }
.account-card h1 { margin-top: .25rem; font-size: clamp(1.8rem, 5vw, 2.5rem); }
.eyebrow { margin: 0; color: var(--color-link); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.account-card form { display: grid; gap: .65rem; margin: 1.5rem 0; }
.account-card input:not([type="checkbox"]) { width: 100%; min-height: 2.8rem; padding: .65rem .75rem; border: var(--border-width-card) solid var(--color-border-strong); border-radius: var(--radius-input); font: inherit; }
.account-development-note { padding: .8rem 1rem; border: 1px dashed var(--color-warning-border); border-radius: var(--radius-md); background: var(--color-warning-bg); }
.account-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 40rem) {
    /* .account-menu__auth-links / .account-menu__account-links: the signed-out "Sign in" / "Create
       account" pair and the signed-in "Profile" / "Account" / "Sign out" trio, respectively.
       AccountLinks renders the same branch again inside .mobile-nav-panel (its own labelled
       "Account" section) via SiteHeader, so hiding either here doesn't lose the destinations — it
       just stops them wrapping to a second line and inflating the header's height. Signed-in, that
       wrap was a measured ~39px horizontal overflow at 375px (.site-header's scrollWidth 414px vs.
       clientWidth 375px). */
    .primary-nav,
    .account-menu__name,
    .account-menu__auth-links,
    .account-menu__account-links {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
        /* Pushes the toggle to the header's right edge instead of leaving it sitting beside the
           brand with dead space after it — most reachable for a thumb, and where a hamburger is
           conventionally expected. */
        margin-left: auto;
    }

    /* .account-menu keeps its own margin-left: auto unconditionally (for desktop, where it's the
       only thing pushing right — the toggle is display: none there). At this breakpoint that now
       competes with .nav-toggle's own auto margin above: two auto margins in one flex row share
       the available free space between them, so without this override the toggle stops short of
       the true right edge (verified — it lands with a visible gap before the edge, not flush).
       Zeroing it here lets .nav-toggle's margin do the whole job; .account-menu is now empty at this
       breakpoint either way — signed out, its content moved into the panel (see
       .account-menu__auth-links); signed in, likewise (see .account-menu__account-links, added
       alongside it once the same wrap-to-a-second-line overflow this comment used to describe as
       "out of scope" turned out to need the identical fix) — so it no longer needs to push itself,
       since it already trails the toggle in DOM order. */
    .account-menu {
        margin-left: 0;
    }

    /* :not([hidden]) rather than a bare .mobile-nav-panel rule: an author stylesheet rule always
       beats the browser's own default `[hidden] { display: none }` rule regardless of specificity,
       so a plain `display: flex` here would defeat the `hidden` attribute SiteHeader.razor.js
       toggles. Excluding [hidden] from the selector lets the unconditional `display: none` above
       (outside this media query) win whenever the attribute is present, at any width. */
    .mobile-nav-panel:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: var(--space-4);
        background: var(--color-bg-surface);
        border-bottom: var(--border-width-card) solid var(--color-border-strong);
        box-shadow: var(--shadow-card);
        z-index: 50;
        /* The panel is absolutely positioned inside .site-header (position: relative), so a
           percentage length here resolves against the header's own box — 100% is exactly the
           header's real, content-driven height (the nav toggle is its tallest flex item, not a
           guessed constant), whatever that turns out to be. On a short viewport (landscape phone,
           or a small phone with browser chrome eating vertical space) the panel's own content can
           otherwise exceed the remaining space with no way to reach the bottom links. dvh accounts
           for mobile browser chrome showing/hiding; vh is the fallback for browsers that don't
           support dvh yet (the vh rule is overridden by the dvh one wherever both are supported,
           since a later declaration of the same property wins). */
        max-height: calc(100vh - 100%);
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        /* Without this, scrolling the panel to its end and continuing to scroll would scroll the
           page underneath it (scroll chaining) instead of just stopping. */
        overscroll-behavior: contain;
    }

    .mobile-nav-panel nav {
        display: flex;
        flex-direction: column;
    }

    /* Higher specificity than ".site-header nav a" (0,1,2) on purpose: that desktop rule still
       supplies color/weight/hover for every link here, including the Admin one (it lives inside
       this same <nav> — see AdminNavLink), but its 0.5rem/0.75rem desktop padding is too small a
       touch target on a phone. ".site-header .mobile-nav-panel a" (0,2,1) wins on specificity
       alone, letting one rule fix both the touch target and the Admin link (it has no other
       nav-scoped selector of its own to fall back on). Matches the 2.75rem minimum every button
       and .btn in this file already enforces.

       Also targets .button-link (0,3,0) for the same reason: AccountLinks' Sign out control is a
       <button class="button-link">, and .button-link explicitly zeroes min-height/min-width/padding
       (it's meant to read as an inline text link elsewhere in the app) — without an equally-specific
       override here it would beat this rule and render as a bare, misaligned, sub-minimum hit area
       directly beneath the padded Profile/Account rows above it. */
    .site-header .mobile-nav-panel a,
    .site-header .mobile-nav-panel .button-link {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: var(--space-3);
    }

    .mobile-nav-panel__section {
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border-default);
    }

    .mobile-nav-panel__section-label {
        margin: 0 0 var(--space-1);
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: var(--font-size-xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* The signed-in visitor's display name, shown only in the panel's "Account" section —
       .account-menu__name (the header's own copy) is unconditionally hidden at this breakpoint
       above, but the name is still useful context once Profile/Account/Sign out have moved here, so
       AccountLinks renders it again rather than dropping it. Not wrapped in .account-menu__name
       itself: that class is in the unconditional hide list above and would just be hidden again. */
    .mobile-nav-panel__account-name {
        margin: 0 0 var(--space-2);
        color: var(--color-text-muted);
        font-weight: 600;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blazor form validation states
   ═══════════════════════════════════════════════════════════════════════════ */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success-text);
}

.invalid {
    outline: 1px solid var(--color-error-text);
}

.validation-message {
    color: var(--color-error-text);
    font-size: var(--font-size-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blazor error boundary
   ═══════════════════════════════════════════════════════════════════════════ */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+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."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border-strong);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--color-text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}