/* /Components/AccessCard.razor.rz.scp.css */
/* The first component in this app that needed to lift off the page, which is
   why --elevation-card exists: nothing before this had a card sitting on a
   coloured background. */
.access-card[b-ioab5ee8dm] {
    border: 1px solid var(--color-stale-text);
    border-radius: var(--radius-default);
    box-shadow: var(--elevation-card);
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.access-card__heading[b-ioab5ee8dm] {
    font-size: var(--font-size-heading-1);
    margin-bottom: var(--space-3);
}

/* The two blocks are separated by a rule rather than merely by spacing, so
   "what my credential permits" and "what I can get into on the day" read as
   two answers rather than one list. */
.access-card__block + .access-card__block[b-ioab5ee8dm] {
    border-top: 1px solid var(--color-stale-text);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
}

.access-card__block-heading[b-ioab5ee8dm] {
    font-size: var(--font-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-stale-text);
    margin-bottom: var(--space-2);
}

.access-card__status[b-ioab5ee8dm] {
    font-size: var(--font-size-heading-3);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.access-card__status--approved[b-ioab5ee8dm] {
    color: var(--color-success);
}

.access-card__status--refused[b-ioab5ee8dm],
.access-card__status--withdrawn[b-ioab5ee8dm] {
    color: var(--color-danger);
}

.access-card__details[b-ioab5ee8dm] {
    margin-bottom: 0;
}

.access-card__details dt[b-ioab5ee8dm] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    font-weight: 700;
}

.access-card__details dd[b-ioab5ee8dm] {
    margin-bottom: var(--space-2);
}

.access-card__mocked[b-ioab5ee8dm] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    border-top: 1px solid var(--color-stale-text);
    padding-top: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: 0;
}
/* /Components/ChangeRow.razor.rz.scp.css */
.change-row[b-1pe798xwb4] {
    border: 1px solid var(--color-stale-text);
    border-radius: var(--radius-default);
    box-shadow: var(--elevation-card);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.change-row--foreseeable[b-1pe798xwb4] {
    border-style: dashed;
}

.change-row__what[b-1pe798xwb4] {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--space-1);
}

.change-row__when[b-1pe798xwb4] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-bottom: var(--space-3);
}

/* Small caps-ish labels rather than bold run-in text, so "Why" and "What you
   can do" are scannable as a fixed structure. Every row has the same three
   labelled parts in the same order, which is what lets someone at a barrier
   find the one they need without reading the rest. */
.change-row__field-label[b-1pe798xwb4] {
    font-size: var(--font-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-stale-text);
    margin-bottom: var(--space-1);
}

.change-row__why[b-1pe798xwb4],
.change-row__next[b-1pe798xwb4] {
    margin-bottom: var(--space-3);
}

.change-row__superseded[b-1pe798xwb4] {
    border-left: 3px solid var(--color-stale-text);
    padding-left: var(--space-2);
    margin-bottom: var(--space-3);
}

.change-row__superseded-label[b-1pe798xwb4] {
    font-size: var(--font-size-small);
    font-weight: 700;
    color: var(--color-stale-text);
    margin-bottom: var(--space-1);
}

.change-row__superseded-value[b-1pe798xwb4] {
    text-decoration: line-through;
    margin-bottom: var(--space-1);
}

.change-row__superseded-when[b-1pe798xwb4] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-bottom: 0;
}

.change-row__condition[b-1pe798xwb4] {
    border: 1px dashed var(--color-stale-text);
    border-radius: var(--radius-default);
    padding: var(--space-2);
    margin-bottom: var(--space-3);
}

.change-row__dependency[b-1pe798xwb4] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-bottom: 0;
}

.change-row__decided-by[b-1pe798xwb4] {
    font-size: var(--font-size-small);
    margin-bottom: var(--space-2);
}

.change-row__mocked[b-1pe798xwb4] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    border-top: 1px solid var(--color-stale-text);
    padding-top: var(--space-2);
    margin-bottom: 0;
}

/* The disclosure.
   ------------------------------------------------------------------------
   The row is the control. The default triangle marker is replaced by a chevron
   on the right, so the summary reads as a row that opens rather than as a
   bulleted list item — but the element is still <summary>, so everything the
   browser gives it for free (keyboard operation, the expanded state announced
   to a screen reader, working with no JavaScript) is untouched. */
.change-row__disclosure[b-1pe798xwb4] {
    /* The card's own padding is on .change-row; this holds nothing of its own. */
    margin: 0;
}

.change-row__summary[b-1pe798xwb4] {
    display: block;
    position: relative;
    padding-right: var(--space-4);
    cursor: pointer;
    list-style: none;
}

.change-row__summary[b-1pe798xwb4]::-webkit-details-marker {
    display: none;
}

.change-row__summary[b-1pe798xwb4]::after {
    content: "";
    position: absolute;
    top: 0.6rem;
    right: var(--space-2);
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--color-stale-text);
    border-bottom: 2px solid var(--color-stale-text);
    transform: rotate(45deg);
    transition: transform 160ms ease-out;
}

.change-row__disclosure[open] > .change-row__summary[b-1pe798xwb4]::after {
    transform: rotate(-135deg);
}

.change-row__summary:focus-visible[b-1pe798xwb4] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-default);
}

/* The last thing in the collapsed layer, and the only text the disclosure adds:
   it names what is behind the row rather than saying "more". A person deciding
   whether to open something should be told what they would be opening. */
.change-row__more[b-1pe798xwb4] {
    display: inline-block;
    font-size: var(--font-size-small);
    color: var(--color-link);
    margin-bottom: 0;
}

.change-row__disclosure[open] > .change-row__summary .change-row__more[b-1pe798xwb4] {
    /* Once it is open, the label has done its job and would only repeat what is
       now visible below it. */
    display: none;
}

.change-row__disclosure[open] > .change-row__summary .change-row__when[b-1pe798xwb4] {
    margin-bottom: var(--space-3);
}

.change-row__detail[b-1pe798xwb4] {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-stale-text);
    margin-top: var(--space-2);
}

/* The arrival.
   ------------------------------------------------------------------------
   A row that has just been written slides and fades in rather than snapping
   into a list it was not in a moment ago. This is the confirmation moment the
   request path never had: v10 made the write's latency observable, and this
   makes its arrival observable.

   Short on purpose. The point is to be noticed, not to be watched — an
   entrance a person has to wait out is a delay wearing an animation's
   clothing. */
@keyframes change-row-arrive-b-1pe798xwb4 {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.change-row--arriving[b-1pe798xwb4] {
    animation: change-row-arrive-b-1pe798xwb4 320ms ease-out;
    border-color: var(--color-success);
}

/* Someone who has asked their system for less motion has asked for less
   motion. The row still marks itself as the new one with its border and its
   opened state — the information survives; only the movement goes. */
@media (prefers-reduced-motion: reduce) {
    .change-row--arriving[b-1pe798xwb4] {
        animation: none;
    }

    .change-row__summary[b-1pe798xwb4]::after {
        transition: none;
    }
}
/* /Components/ForeseeableBadge.razor.rz.scp.css */
.foreseeable-badge[b-rm1le8ute0] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text);
    border: 1px solid var(--color-stale-text);
    border-radius: var(--radius-default);
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-2);
}

/* Outlined rather than filled, and no colour of its own. A conditional change
   is not an alert and not a success — giving it a status colour would tell the
   reader an outcome the app does not know. */
.foreseeable-badge__mark[b-rm1le8ute0] {
    font-size: 1.2em;
    line-height: 1;
}
/* /Components/Icon.razor.rz.scp.css */
/* The glyph sits on the text baseline rather than on the line box, so an icon
   beside a sentence reads as part of it instead of floating above it. */
.icon[b-ce1r2v4l38] {
    display: inline-block;
    vertical-align: -0.125em;

    /* Sized in ems, so an icon in the small meta line comes out smaller than
       one beside body text without either needing its own rule. */
    width: 1em;
    height: 1em;

    /* Keeps the glyph off the word it precedes. Margin rather than a space in
       the markup, which would collapse differently depending on formatting. */
    margin-right: 0.35em;

    /* Decorative: it must never be what a person is trying to click or read
       around. */
    flex-shrink: 0;
}
/* /Components/RequestAccessForm.razor.rz.scp.css */
.request-form[b-senyxol5m4] {
    margin-top: var(--space-3);
}

.request-form__field[b-senyxol5m4] {
    margin-bottom: var(--space-3);
}

.request-form__field label[b-senyxol5m4] {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.request-form__error[b-senyxol5m4] {
    color: var(--color-danger);
    font-size: var(--font-size-small);
    margin-top: var(--space-1);
    margin-bottom: 0;
}
/* /Components/SignInForm.razor.rz.scp.css */
/* The sign-in screen, in ShopEase's own register: one centred column, capped
   at a readable measure, with the fields sized by the column rather than by the
   page.

   THE CAP LIVES HERE, ON A REAL ELEMENT, AND THAT IS THE FIX. It used to sit on
   `.signin__form` — but that class is on <EditForm>, a *component*, and Blazor
   only stamps its scope attribute onto elements written in this file. The
   compiled `.signin__form[b-xxxxx]` therefore matched nothing, the rule never
   applied, and Bootstrap's `.form-control { width: 100% }` let every input run
   the full width of the content column. A <section> this file owns gets the
   attribute, so the cap actually binds.

   THE SAME DEFECT, FOUND A SECOND TIME. `.signin__form`'s flex layout and its
   `button:disabled` rule were dead for the identical reason — declared against
   a class on <EditForm> itself, never against an element this file actually
   owns. It went unnoticed because a form with no gap between its children
   still LOOKS like a form; it takes a specific "why is the button glued to the
   password field" report to notice the gap that should be there isn't. Both
   rules now target `.signin__form-fields`, a <div> this file writes directly
   inside <EditForm>'s content — which does receive the scope attribute,
   because it is authored here rather than inside a child component. *@
.signin {
    max-width: 32rem;
    margin: 0 auto;
    padding-bottom: var(--space-4);
}

/* Last on the page now rather than first — see the component's own note on that
   reversal. It reads as a statement rather than a warning: it is not an error,
   it is what this page is. */
.signin__notice[b-r32ywxxush] {
    border: 1px solid var(--color-stale-text);
    border-left: 4px solid var(--color-link);
    border-radius: var(--radius-default);
    padding: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: 0;
}

/* The column sizes the form now; the form does not size itself. The class
   below stays on <EditForm> purely as a query hook for tests — Blazor still
   applies a plain HTML class via AdditionalAttributes regardless of CSS scoping,
   so `form.signin__form` is findable even though no *style* here can bind to it. */
.signin__form-fields[b-r32ywxxush] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.signin__field[b-r32ywxxush] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.signin__field label[b-r32ywxxush] {
    font-size: var(--font-size-small);
    font-weight: 700;
}

.signin__error[b-r32ywxxush] {
    color: var(--color-danger);
    font-size: var(--font-size-small);
    display: block;
    margin-top: var(--space-1);
}

/* The published accounts. Between the notice and the form, because they are
   read after "what is this" and before "what do I type". The credential values
   are <code> so they are visually separable from the prose around them and
   survive being copied. */
/* A card beneath the fields, matching ShopEase's `.auth-demo-accounts`. Its
   surface comes from the app's own tokens rather than ShopEase's hardcoded
   light-mode grey, so it holds in the dark theme too. */
.signin__accounts[b-r32ywxxush] {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-stale-text);
    border-radius: var(--radius-default);
}

.signin__accounts h2[b-r32ywxxush] {
    font-size: var(--font-size-heading-3);
}

/* A single column, inside the card. It was a two-column grid when this block
   sat in the full width of the content column; at 32rem two columns would give
   each credential pair about fifteen characters before wrapping. */
.signin__account-list[b-r32ywxxush] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Two lines per account now — username, then password — and no border of its
   own: the block around it is already the card, and a box inside a box says
   the rows are separate things when they are two rows of the same short list. */
.signin__account[b-r32ywxxush] {
    font-size: var(--font-size-small);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* The label and the value stay on one line together; only the two lines within
   an account stack. */
.signin__account-line[b-r32ywxxush] {
    display: flex;
    gap: var(--space-1);
}

.signin__account code[b-r32ywxxush] {
    color: var(--color-code);
}



/* The submitting state has no spinner. The button says what is happening and
   the fields stop accepting input, which is the whole of it — a spinner over a
   600ms simulated wait would be decoration. */
.signin__form-fields button:disabled[b-r32ywxxush] {
    opacity: 0.7;
    cursor: default;
}
/* /Components/StaleIndicator.razor.rz.scp.css */
.stale-indicator[b-4bizqvcrdz] {
    color: var(--color-stale-text);
    font-size: var(--font-size-small);
    margin-bottom: var(--space-2);
}

/* An older state is not a different layout — the headline above it stays
   exactly where it was. What changes is this line, which gains weight and a
   left rule so the difference is visible at a glance rather than only on a
   careful read. A stale headline that renders identically to a fresh one is
   the single failure this whole app exists to prevent. */
.stale-indicator--old[b-4bizqvcrdz] {
    font-weight: 600;
    border-left: 3px solid var(--color-stale-text);
    padding-left: var(--space-2);
}

.stale-indicator__stamp[b-4bizqvcrdz] {
    font-weight: 400;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-91c2lvvh4i] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-91c2lvvh4i] {
    flex: 1;
    background-color: var(--color-surface);
    color: var(--color-text);
}

.sidebar[b-91c2lvvh4i] {
    background-image: linear-gradient(
        180deg,
        var(--color-sidebar-grad-start) 0%,
        var(--color-sidebar-grad-end) 70%);
}

/* The theme strip that used to sit here is gone, not repurposed — appearance
   is a Settings field now, and nothing about it lives in the layout. What sits
   above the content column instead is the session row, which is a different
   thing for a different reason: it reports state rather than changing it, and
   it has to survive the breakpoint the sidebar does not. Its own rules live in
   app.css beside the component they style. */

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

    .sidebar[b-91c2lvvh4i] {
        width: 200px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    /* Hidden completely rather than narrowed to a rail: a rail would need its
       own icon-only affordances and tooltips to stay readable, which is a
       second navigation to keep correct. The content column simply takes the
       width back. */
    .page--sidebar-hidden .sidebar[b-91c2lvvh4i] {
        display: none;
    }

    article[b-91c2lvvh4i] {
        max-width: 60rem;
        padding-left: var(--space-4) !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-sojmff8vk8] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.navbar-brand[b-sojmff8vk8] {
    font-size: 1.1rem;
    color: var(--color-sidebar-text);
}

/* The three scaffold icons that used to live here — a house, a plus-square and
   a nested list — came from the project template and were never redrawn when
   this app stopped being a generic list-and-add app. They described actions
   this app does not have, so they are gone rather than restyled. The nav items
   carry their labels alone. */

/* Body size, not small. These are the app's primary destinations and they sat
   two steps below the text of the screens they lead to — 0.875rem against a
   1rem working area — which read as a caption rather than as navigation. A
   destination label has no reason to be quieter than the content behind it, and
   at this size it also clears the 1rem floor comfortably for anyone enlarging
   text. */
.nav-item[b-sojmff8vk8] {
    font-size: var(--font-size-body);
    padding-bottom: var(--space-2);
}

    .nav-item:first-of-type[b-sojmff8vk8] {
        padding-top: var(--space-3);
    }

    .nav-item:last-of-type[b-sojmff8vk8] {
        padding-bottom: var(--space-3);
    }

    .nav-item[b-sojmff8vk8]  a {
        color: var(--color-nav-item);
        border-radius: var(--radius-default);
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        padding-left: var(--space-2);
    }

/* Active and hover stay as translucency over whatever gradient sits beneath
   them, so they carry to the second theme without needing a token of their
   own — there is no fixed colour here to redefine. */
.nav-item[b-sojmff8vk8]  a.active {
    background-color: rgba(255, 255, 255, 0.37);
    color: var(--color-sidebar-text);
}

.nav-item[b-sojmff8vk8]  a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-sidebar-text);
}

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

    .collapse[b-sojmff8vk8] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-sojmff8vk8] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* The glyph beside each destination's label. Decorative, so it is spaced like
   punctuation rather than aligned like a column: the label is what the row is,
   and the icon sits next to it without claiming a gutter of its own. */
/* Scaled with the label it sits beside. The glyph carries its own width and
   height attributes at 16px — CSS outranks them, so the icon grows here without
   Icon.razor's contract changing for the match surfaces that still want 16. */
.nav-item[b-sojmff8vk8]  svg.icon {
    width: 20px;
    height: 20px;
    margin-right: var(--space-2);
    flex: none;
}
/* /Pages/EventDetails.razor.rz.scp.css */
.detail__kickoff[b-tu1uww04ip] {
    margin-bottom: var(--space-2);
}

.detail__unplayed[b-tu1uww04ip],
.detail__loading[b-tu1uww04ip] {
    color: var(--color-stale-text);
    font-size: var(--font-size-small);
}

.detail__error[b-tu1uww04ip] {
    color: var(--color-danger);
}

.detail__access[b-tu1uww04ip],
.detail__dependency[b-tu1uww04ip],
.detail__gate[b-tu1uww04ip] {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-stale-text);
}

.detail__access h2[b-tu1uww04ip],
.detail__dependency h2[b-tu1uww04ip],
.detail__gate h2[b-tu1uww04ip] {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--space-2);
}

.detail__status[b-tu1uww04ip] {
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.detail__status--granted[b-tu1uww04ip] {
    color: var(--color-success);
}

.detail__status--revoked[b-tu1uww04ip] {
    color: var(--color-danger);
}

.detail__gate-agree[b-tu1uww04ip] {
    color: var(--color-success);
}

/* Neutral, not red. A disagreement is not the holder's error and not a
   refusal — it is two systems saying different things, and colouring it as a
   failure would tell the reader which side lost. */
.detail__gate-disagree[b-tu1uww04ip] {
    border: 1px solid var(--color-stale-text);
    border-left: 4px solid var(--color-stale-text);
    border-radius: var(--radius-default);
    padding: var(--space-3);
}

.detail__gate-disagree dt[b-tu1uww04ip] {
    font-size: var(--font-size-small);
    font-weight: 700;
    color: var(--color-stale-text);
}

.detail__gate-disagree dd[b-tu1uww04ip] {
    margin-bottom: var(--space-2);
}

.detail__mocked[b-tu1uww04ip] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-top: var(--space-2);
}

/* Sits where the access status would be, at the same weight. The boundary is
   stated in place rather than by removing the section, so nothing on the page
   silently disappears depending on who is reading it. */
.detail__signed-out[b-tu1uww04ip] {
    color: var(--color-stale-text);
    max-width: 40rem;
}
/* /Pages/EventList.razor.rz.scp.css */
/* The controls wrap rather than shrink: a select narrow enough to fit beside
   everything else at 320px is a select whose longest option cannot be read. */
.matches__filters[b-fp91hjbxl2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.matches__filter[b-fp91hjbxl2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    /* Wide enough for "Knockout rounds" and "Not yet played" without
       truncation, and free to grow into whatever room is left. */
    flex: 1 1 12rem;
}

.matches__filter label[b-fp91hjbxl2] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
}

.matches__item[b-fp91hjbxl2] {
    margin-bottom: var(--space-4);
}

.matches__meta[b-fp91hjbxl2] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-bottom: var(--space-2);
}

.matches__error[b-fp91hjbxl2] {
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-default);
    padding: var(--space-3);
}

.matches__empty[b-fp91hjbxl2],
.matches__loading[b-fp91hjbxl2] {
    color: var(--color-stale-text);
}
/* /Pages/Help.razor.rz.scp.css */
.help__intro[b-oo8lf2i3ti] {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--space-3);
}

/* Said once, in small print, because it is a fact about the page rather than
   part of its content: everything is shut, open what you came for. */
.help__hint[b-oo8lf2i3ti] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-bottom: var(--space-4);
}

/* Organised by where the person is in the process rather than by topic,
   because the question someone brings to this page is almost always tied to a
   stage: "nothing has happened yet", "I have been approved, now what",
   "I am at the gate and it will not scan".
   ------------------------------------------------------------------------
   Each stage is now its own closed section rather than one heading in a long
   scroll. The rules below all read from <details>, so the open and closed
   states are the browser's own — no JavaScript, no state to get wrong, and
   nothing that could fail to load on the offline path this page terminates. */
.help__section[b-oo8lf2i3ti] {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-stale-text);
}

.help__section:last-of-type[b-oo8lf2i3ti] {
    border-bottom: none;
}

/* The heading is the control. Its own font size and weight are unchanged, so
   the page still reads as a document with headings rather than as a list of
   buttons — the chevron and the pointer are the only things that say it
   opens. */
.help__summary[b-oo8lf2i3ti] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
}

.help__summary[b-oo8lf2i3ti]::-webkit-details-marker {
    display: none;
}

.help__summary[b-oo8lf2i3ti]::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4rem;
    border-right: 2px solid var(--color-link);
    border-bottom: 2px solid var(--color-link);
    transform: rotate(-45deg);
    transition: transform 160ms ease-out;
}

.help__section[open] > .help__summary[b-oo8lf2i3ti]::before {
    transform: rotate(45deg);
}

.help__summary:focus-visible[b-oo8lf2i3ti] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-default);
}

.help__summary h2[b-oo8lf2i3ti] {
    font-size: var(--font-size-heading-1);
    margin-bottom: 0;
}

/* Closed, a section is one line; open, its body needs the space back. */
.help__section[open] > .help__summary[b-oo8lf2i3ti] {
    margin-bottom: var(--space-3);
}

.help__section ul[b-oo8lf2i3ti] {
    padding-left: 1.25rem;
}

.help__section li[b-oo8lf2i3ti] {
    margin-bottom: var(--space-2);
}

.help__mocked[b-oo8lf2i3ti] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
}

@media (prefers-reduced-motion: reduce) {
    .help__summary[b-oo8lf2i3ti]::before {
        transition: none;
    }
}
/* /Pages/Landing.razor.rz.scp.css */
.landing__lede[b-91pzisaodj] {
    font-size: var(--font-size-heading-3);
    max-width: 42rem;
}

/* The disclosure is not a footnote and is not styled as one. It reads at body
   weight, in the flow, where someone deciding what this is will actually meet
   it. */
.landing__disclosure[b-91pzisaodj] {
    border-left: 3px solid var(--color-stale-text);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-4) 0;
    max-width: 42rem;
}

/* One way on, and it is the only control on the page. The two equally-weighted
   entry blocks that used to sit here are gone with the section they styled —
   this is a single primary action, so it is styled as one rather than as a pair
   that had to be kept from out-ranking each other. */
.landing__cta[b-91pzisaodj] {
    display: inline-block;
    margin-bottom: var(--space-4);
}

/* A statement, not an alert: nothing went wrong. It sits above the heading
   because it is about what just happened, and the heading is about what this
   page is. */
.landing__signed-out[b-91pzisaodj] {
    border: 1px solid var(--color-success);
    border-radius: var(--radius-default);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    max-width: 42rem;
}
/* /Pages/MyAccess.razor.rz.scp.css */
/* A single column at every width, on purpose. The headline and the change
   history are sequential by nature — newest-effective-first — and a two-column
   split at desktop would imply they can be read in either order. */

.my-access__matches[b-80qmiumtgd] {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.my-access__matches li[b-80qmiumtgd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-stale-text);
}

.my-access__matches li:last-child[b-80qmiumtgd] {
    border-bottom: none;
}

.my-access__match-status[b-80qmiumtgd] {
    font-size: var(--font-size-small);
    font-weight: 700;
}

.my-access__match-status--granted[b-80qmiumtgd] {
    color: var(--color-success);
}

.my-access__match-status--revoked[b-80qmiumtgd] {
    color: var(--color-danger);
}

.my-access__changes-heading[b-80qmiumtgd] {
    font-size: var(--font-size-heading-1);
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
}

/* Silence gets a box of its own rather than blank space below the headline.
   An empty area reads as "nothing loaded"; a stated absence reads as "checked,
   and nothing moved". */
.my-access__no-changes[b-80qmiumtgd] {
    border: 1px dashed var(--color-stale-text);
    border-radius: var(--radius-default);
    padding: var(--space-3);
    color: var(--color-text);
}

.my-access__empty[b-80qmiumtgd],
.my-access__error[b-80qmiumtgd] {
    border: 1px solid var(--color-stale-text);
    border-radius: var(--radius-default);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.my-access__error[b-80qmiumtgd] {
    border-color: var(--color-danger);
}

.my-access__refresh-failed[b-80qmiumtgd] {
    color: var(--color-danger);
    font-size: var(--font-size-small);
    margin-bottom: var(--space-3);
}

.my-access__identity[b-80qmiumtgd] {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-stale-text);
}

.my-access__identity h2[b-80qmiumtgd] {
    font-size: var(--font-size-heading-3);
}

.my-access__identity dt[b-80qmiumtgd] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    font-weight: 700;
}

.my-access__identity dd[b-80qmiumtgd] {
    margin-bottom: var(--space-2);
}

.my-access__mocked[b-80qmiumtgd] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
}

.my-access__help-link[b-80qmiumtgd] {
    margin-top: var(--space-3);
}

/* The gate, stated as an offer rather than a refusal. Same treatment as the
   empty state it sits beside, because it is the same kind of message: a true
   statement about why there is nothing here yet. */
.my-access__signed-out[b-80qmiumtgd] {
    border: 1px solid var(--color-stale-text);
    border-radius: var(--radius-default);
    padding: var(--space-3);
    max-width: 40rem;
}
/* /Pages/Registration.razor.rz.scp.css */
.request__meta[b-v2mwr8h7pw] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-bottom: var(--space-3);
}

.request__loading[b-v2mwr8h7pw] {
    color: var(--color-stale-text);
}

.request__error[b-v2mwr8h7pw] {
    color: var(--color-danger);
}

.request__mocked[b-v2mwr8h7pw] {
    font-size: var(--font-size-small);
    color: var(--color-stale-text);
    margin-top: var(--space-3);
}

.request__signed-out[b-v2mwr8h7pw] {
    border: 1px solid var(--color-stale-text);
    border-radius: var(--radius-default);
    padding: var(--space-3);
    max-width: 40rem;
}