/* /Components/AppButton.razor.rz.scp.css */
.app-btn[b-r67h44xbfk] {
    gap: var(--space-2);
    white-space: nowrap;
}

.app-btn:disabled[b-r67h44xbfk],
.app-btn--disabled[b-r67h44xbfk] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.app-btn__label[b-r67h44xbfk] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.app-btn__spinner[b-r67h44xbfk] {
    animation: app-button-spin-b-r67h44xbfk 900ms linear infinite;
}

@keyframes app-button-spin-b-r67h44xbfk {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/AppCard.razor.rz.scp.css */
.app-card-root[b-5wi04op1h5] {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}
/* /Components/AppIcon.razor.rz.scp.css */
.app-icon[b-le476ozqda] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-icon-size, 1.25rem);
    height: var(--app-icon-size, 1.25rem);
    overflow: hidden;
    font-family: var(--font-family-icon);
    font-size: var(--app-icon-size, 1.25rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" var(--app-icon-fill, 0), "wght" 500, "GRAD" 0, "opsz" 24;
    flex-shrink: 0;
}
/* /Components/AppPageHeader.razor.rz.scp.css */
.app-pagehead[b-pg5ojvjrv2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.app-pagehead__title[b-pg5ojvjrv2] {
    min-width: 0;
}

/* The eyebrow carries its own bottom margin and the h1 its own; inside a
   two-line block both would show as one gap too many. */
.app-pagehead__title .app-eyebrow[b-pg5ojvjrv2] {
    margin-bottom: var(--space-1);
}

.app-pagehead__title h1[b-pg5ojvjrv2] {
    margin-bottom: 0;
}

/* Grows into whatever the title and any action leave, up to the reference's
   400px. Fixed-width, it wrapped into a narrow column against a short title
   like "Groups" while empty space sat between it and the button. */
.app-pagehead__desc[b-pg5ojvjrv2] {
    flex: 1 1 14rem;
    max-width: 25rem;
    margin-bottom: 0;
}

.app-pagehead__actions[b-pg5ojvjrv2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Below Density's own breakpoint the description reads as a lead paragraph
   under the title rather than a column beside it. */
@media (max-width: 44.99rem) {
    .app-pagehead[b-pg5ojvjrv2] {
        align-items: flex-start;
        gap: var(--space-2);
    }

    .app-pagehead__desc[b-pg5ojvjrv2] {
        flex-basis: 100%;
        max-width: none;
    }

    .app-pagehead__actions[b-pg5ojvjrv2] {
        margin-left: 0;
    }
}
/* /Components/AppSection.razor.rz.scp.css */
.app-section[b-wjhceo6p5i] {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.app-section > :is(h2, p)[b-wjhceo6p5i] {
    margin-bottom: 0;
}

.app-section > h2[b-wjhceo6p5i] {
    color: var(--text-primary);
}
/* /Components/Forms/TimeZoneMapPicker.razor.rz.scp.css */
.timezone-picker[b-u6z5gg3zv7] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.timezone-toolbar[b-u6z5gg3zv7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.timezone-search[b-u6z5gg3zv7] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: var(--bg-surface-2);
}

.timezone-search:focus-within[b-u6z5gg3zv7] {
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
}

.timezone-search input[b-u6z5gg3zv7] {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
}

.timezone-search input:focus-visible[b-u6z5gg3zv7] {
    outline: 0;
    box-shadow: none;
}

.timezone-icon[b-u6z5gg3zv7] {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard);
}

.timezone-icon:hover:not(:disabled)[b-u6z5gg3zv7] {
    background: var(--bg-surface-hover);
}

.timezone-icon:disabled[b-u6z5gg3zv7] {
    opacity: 0.5;
    cursor: default;
}

.timezone-map-frame[b-u6z5gg3zv7] {
    position: relative;
    isolation: isolate;
}

.timezone-map[b-u6z5gg3zv7] {
    width: 100%;
    height: 260px;
    background: var(--info-soft);
    cursor: crosshair;
    font-family: var(--font-family-sans);
}

.timezone-map-controls[b-u6z5gg3zv7] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 500;
    display: grid;
    gap: var(--space-1);
}

.timezone-attribution[b-u6z5gg3zv7] {
    position: absolute;
    bottom: var(--space-1);
    right: var(--space-2);
    z-index: 500;
    padding: 0 var(--space-1);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 10px;
    pointer-events: none;
}

.timezone-map-loading[b-u6z5gg3zv7] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 12px;
}

.timezone-picker[b-u6z5gg3zv7]  .leaflet-tooltip {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--tooltip-bg);
    color: var(--tooltip-fg);
    box-shadow: var(--shadow-md);
    font: inherit;
    font-size: 11px;
}

.timezone-picker[b-u6z5gg3zv7]  .leaflet-tooltip-top::before {
    border-top-color: var(--tooltip-bg);
}

.timezone-selection[b-u6z5gg3zv7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    color: var(--accent-primary);
}

.timezone-selection > div[b-u6z5gg3zv7] {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    overflow-wrap: anywhere;
}

.timezone-selection strong[b-u6z5gg3zv7] {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
}

.timezone-selection span[b-u6z5gg3zv7] {
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.timezone-results[b-u6z5gg3zv7] {
    display: grid;
    border-bottom: 1px solid var(--border-subtle);
}

.timezone-result[b-u6z5gg3zv7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.timezone-result:hover[b-u6z5gg3zv7],
.timezone-result:focus-visible[b-u6z5gg3zv7] {
    background: var(--accent-soft);
}

.timezone-offset[b-u6z5gg3zv7] {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.timezone-result-count[b-u6z5gg3zv7],
.timezone-message[b-u6z5gg3zv7] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 560px) {
    .timezone-map[b-u6z5gg3zv7] { height: 220px; }
}
/* /Components/Layout/AppNavToggle.razor.rz.scp.css */
.nav-toggle[b-zf98rqh3wg] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

.nav-toggle:active[b-zf98rqh3wg] {
    transform: scale(0.96);
}

@media (max-width: 44.99rem) {
    .nav-toggle[b-zf98rqh3wg] {
        display: inline-flex;
    }
}
/* /Components/Layout/AppSidebar.razor.rz.scp.css */
/* --- The column ----------------------------------------------------------- */

/* Sticky under the 52px top bar with its own scroll: a long page moves the
   content, not the navigation. */
.app-sidebar[b-ne7c1ff08t] {
    position: sticky;
    top: 52px;
    align-self: flex-start;
    flex: 0 0 216px;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 10px;
    overflow-y: auto;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
}

.app-sidebar[b-ne7c1ff08t]  .nav-heading,
.app-navsheet[b-ne7c1ff08t]  .nav-heading {
    padding: 6px 6px 6px;
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.app-sidebar[b-ne7c1ff08t]  .nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.app-sidebar[b-ne7c1ff08t]  .nav-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.app-sidebar[b-ne7c1ff08t]  .nav-item.active {
    background: var(--accent-soft);
    color: var(--accent-link);
}

.app-sidebar[b-ne7c1ff08t]  .nav-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    margin-bottom: 6px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: var(--accent-fg);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--easing-standard),
                transform var(--duration-fast) var(--easing-standard);
}

.app-sidebar[b-ne7c1ff08t]  .nav-action:hover {
    background: var(--accent-hover);
    color: var(--accent-fg);
    text-decoration: none;
}

.app-sidebar[b-ne7c1ff08t]  .nav-action:active {
    transform: scale(0.98);
}

/* --- Icon rail: 720px to 1023px ------------------------------------------- */

@media (min-width: 45rem) and (max-width: 63.99rem) {
    .app-sidebar[b-ne7c1ff08t] {
        flex-basis: 52px;
        align-items: center;
        padding: 12px 8px;
        overflow: visible;
    }

    .app-sidebar[b-ne7c1ff08t]  .nav-heading {
        display: none;
    }

    .app-sidebar[b-ne7c1ff08t]  .nav-item,
    .app-sidebar[b-ne7c1ff08t]  .nav-action {
        position: relative;
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: var(--radius-lg);
    }

    .app-sidebar[b-ne7c1ff08t]  .nav-item__label {
        display: none;
    }

    /* The label the rail drops has to come back somewhere, or the rail is a
       column of guesses. */
    .app-sidebar[b-ne7c1ff08t]  .nav-item::after,
    .app-sidebar[b-ne7c1ff08t]  .nav-action::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 60;
        padding: 3px 6px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--tooltip-bg);
        color: var(--tooltip-fg);
        font-size: 11px;
        font-weight: 400;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-fast) var(--easing-standard);
    }

    .app-sidebar[b-ne7c1ff08t]  .nav-item:hover::after,
    .app-sidebar[b-ne7c1ff08t]  .nav-item:focus-visible::after,
    .app-sidebar[b-ne7c1ff08t]  .nav-action:hover::after,
    .app-sidebar[b-ne7c1ff08t]  .nav-action:focus-visible::after {
        opacity: 1;
    }
}

/* --- Bottom sheet: below 720px -------------------------------------------- */

.app-navsheet__backdrop[b-ne7c1ff08t],
.app-navsheet[b-ne7c1ff08t] {
    display: none;
}

@media (max-width: 44.99rem) {
    .app-sidebar[b-ne7c1ff08t] {
        display: none;
    }

    .app-navsheet__backdrop[b-ne7c1ff08t] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: var(--overlay-scrim);
        animation: app-fade-in var(--duration-overlay-in) var(--easing-decelerate) both;
    }

    .app-navsheet[b-ne7c1ff08t] {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 71;
        padding: 8px 8px 16px;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-subtle);
        border-radius: 14px 14px 0 0;
        box-shadow: var(--shadow-lg);
        animation: app-sheet-in var(--duration-overlay-in) var(--easing-decelerate) both;
    }

    .app-navsheet__handle[b-ne7c1ff08t] {
        width: 36px;
        height: 4px;
        margin: 4px auto 10px;
        border-radius: 999px;
        background: var(--border-strong);
    }

    .app-navsheet[b-ne7c1ff08t]  .nav-item,
    .app-navsheet[b-ne7c1ff08t]  .nav-action {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: var(--radius-lg);
        font-size: 14px;
        color: var(--text-secondary);
        text-decoration: none;
    }

    .app-navsheet[b-ne7c1ff08t]  .nav-item.active {
        background: var(--accent-soft);
        color: var(--accent-link);
    }

    .app-navsheet[b-ne7c1ff08t]  .nav-action {
        justify-content: center;
        margin-bottom: 6px;
        background: var(--accent-primary);
        color: var(--accent-fg);
        font-weight: 500;
    }

    .app-navsheet[b-ne7c1ff08t]  .nav-item:active,
    .app-navsheet[b-ne7c1ff08t]  .nav-action:active {
        transform: scale(0.99);
    }

    /* This sheet keeps its own geometry - it is the one overlay that is replaced
       by a sidebar above 720px rather than becoming a drawer - but it leaves on
       the same tokens and the same keyframes as every other overlay, which are
       declared in overlay.css. The modifier sits on each of the two elements
       because there is no wrapper here to put it on. */
    .app-navsheet__backdrop.app-overlay--closing[b-ne7c1ff08t],
    .app-navsheet.app-overlay--closing[b-ne7c1ff08t] {
        animation-duration: var(--duration-overlay-out);
        animation-timing-function: var(--easing-accelerate);
    }

    .app-navsheet__backdrop.app-overlay--closing[b-ne7c1ff08t] {
        animation-name: app-fade-out;
    }

    .app-navsheet.app-overlay--closing[b-ne7c1ff08t] {
        animation-name: app-sheet-out;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-qrvot7s30t] {
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr) 52px;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-app);
}

.auth-shell__header[b-qrvot7s30t] {
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.auth-shell__brand[b-qrvot7s30t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    text-decoration: none;
}

.auth-shell__brand:hover[b-qrvot7s30t] {
    color: var(--text-primary);
    text-decoration: none;
}

.auth-shell__mark[b-qrvot7s30t] {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    background: var(--accent-primary);
}

.auth-shell__name[b-qrvot7s30t] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Flex, so the page inside can centre itself with `margin: auto`. Centring
   from here with place-items would push the top of a card taller than the
   viewport out of reach; auto margins do not. */
.auth-shell__main[b-qrvot7s30t] {
    display: flex;
    padding: 24px 16px;
    overflow-y: auto;
}

.auth-shell__main:focus[b-qrvot7s30t] {
    outline: none;
}

.auth-shell__footer[b-qrvot7s30t] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* /Components/Layout/InvitationLayout.razor.rz.scp.css */
.invite-shell[b-m6l2ugp8vl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-surface-2);
}

.invite-shell__header[b-m6l2ugp8vl] {
    display: flex;
    align-items: center;
    padding: var(--space-5) var(--space-6);
}

.invite-shell__brand[b-m6l2ugp8vl] {
    display: flex;
    flex-direction: column;
    color: var(--accent-primary);
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
}

.invite-shell__tagline[b-m6l2ugp8vl] {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.invite-shell__main[b-m6l2ugp8vl] {
    width: min(44rem, calc(100% - 2rem));
    margin: 0 auto;
    padding-block: var(--space-4) var(--space-8);
    flex: 1 1 auto;
}

.invite-shell__footer[b-m6l2ugp8vl] {
    padding: var(--space-5) var(--space-6);
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-align: center;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-pcxumx3r6l] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-app);
}

.app-topbar[b-pcxumx3r6l] {
    position: sticky;
    top: 0;
    z-index: 50;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px 0 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.app-brand[b-pcxumx3r6l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 6px;
    color: var(--text-primary);
    text-decoration: none;
}

.app-brand:hover[b-pcxumx3r6l] {
    color: var(--text-primary);
    text-decoration: none;
}

.app-brand__mark[b-pcxumx3r6l] {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    background: var(--accent-primary);
}

.app-brand__name[b-pcxumx3r6l] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app-topbar__spacer[b-pcxumx3r6l] {
    flex: 1;
}

/* Separates the bell from the account control without a literal rule the whole
   bar has to accommodate. */
.app-topbar[b-pcxumx3r6l]  .bell {
    margin-right: 4px;
}

.app-body[b-pcxumx3r6l] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.app-main[b-pcxumx3r6l] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 28px 40px;
}

/* Focused only by the skip link and by FocusOnNavigate, both of which exist to
   tell a keyboard user where they have landed - so this shows a ring rather than
   removing it. :focus-visible keeps it off for a mouse click. */
.app-main:focus[b-pcxumx3r6l] {
    outline: none;
}

.app-main:focus-visible[b-pcxumx3r6l] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.app-content[b-pcxumx3r6l] {
    width: 100%;
    max-width: var(--container-max);
    /* Without this the cap pins content to the left and leaves every spare pixel
       as a gutter on the right - 324px of it on a 1440px screen. */
    margin-inline: auto;
}

@media (min-width: 45rem) and (max-width: 63.99rem) {
    .app-main[b-pcxumx3r6l] {
        padding: 20px 20px 32px;
    }
}

@media (max-width: 44.99rem) {
    .app-topbar[b-pcxumx3r6l] {
        gap: 6px;
        padding: 0 8px 0 4px;
    }

    .app-main[b-pcxumx3r6l] {
        padding: 16px 12px 28px;
    }
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* A button, not a link - it opens the drawer rather than going anywhere - so it
   carries the reset a browser applies to one and an anchor did not need. */
.bell[b-mnrln7n9nb] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.bell:hover[b-mnrln7n9nb] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.bell__badge[b-mnrln7n9nb] {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: var(--accent-fg);
    /* Spread only, in the bar's own colour: this cuts the badge out of what is
       behind it rather than lifting it off the page, so it is a ring and not
       the elevation the shadow tokens carry. Density draws its avatar presence
       dot the same way. */
    box-shadow: 0 0 0 2px var(--bg-surface);
    font-family: var(--font-family-mono);
    font-size: 9px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
}

@media (max-width: 44.99rem) {
    .bell[b-mnrln7n9nb] {
        width: 44px;
        height: 44px;
    }

    .bell__badge[b-mnrln7n9nb] {
        top: 8px;
        right: 8px;
    }
}
/* /Components/Layout/NotificationsDrawer.razor.rz.scp.css */
/* The drawer's contents only. Its geometry, its entrance and its exit are the
   overlay primitive's - `.app-overlay--drawer`, `.app-drawer` and
   `.app-drawer__body` in overlay.css - which is also where the swap to a bottom
   sheet below 720px comes from, free. */

.notif-drawer__head[b-c5ldqgr8kp] {
    flex: none;
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.notif-drawer__headline[b-c5ldqgr8kp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

/* 16/600 is the panel heading in the type scale. It is an h2 rather than an h1:
   the page underneath keeps its own title, and FocusOnNavigate looks for one. */
.notif-drawer__title[b-c5ldqgr8kp] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.notif-drawer__close[b-c5ldqgr8kp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* 32px, like every other icon button that sits beside something clickable. */
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.notif-drawer__close:hover[b-c5ldqgr8kp] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.notif-drawer__tools[b-c5ldqgr8kp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.notif-drawer__filters[b-c5ldqgr8kp] {
    display: flex;
    gap: 6px;
}

/* Paging sits at the end of the list rather than in a bar of its own: the body
   is already a scrolling column, and "older" is where older things are. */
.notif-drawer__more[b-c5ldqgr8kp] {
    display: flex;
    justify-content: center;
}

/* --- the list ------------------------------------------------------------ */

.notif-list[b-c5ldqgr8kp] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notif[b-c5ldqgr8kp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

/* A wash and a dot, not a heavier border. Unread is a state of the row, and the
   accent says so once in each of the two places a reader looks. */
.notif--unread[b-c5ldqgr8kp] {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.notif__main[b-c5ldqgr8kp] {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    justify-items: start;
}

.notif__head[b-c5ldqgr8kp] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.notif__dot[b-c5ldqgr8kp] {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent-primary);
}

/* 11/600 section label. */
.notif__type[b-c5ldqgr8kp] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.notif__time[b-c5ldqgr8kp] {
    margin-left: auto;
    flex: none;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.notif__message[b-c5ldqgr8kp] {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    /* A meeting name with no spaces in it would otherwise push the row wider
       than the drawer. */
    overflow-wrap: anywhere;
}

.notif__open[b-c5ldqgr8kp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.notif__actions[b-c5ldqgr8kp] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
}

.notif__iconbtn[b-c5ldqgr8kp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Adjacent icon buttons stay at 32px: 24px is the bare WCAG 2.5.8 minimum
       and only with clear space around it, which a pair like this does not
       have. */
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.notif__iconbtn:hover[b-c5ldqgr8kp] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.notif__iconbtn--danger:hover[b-c5ldqgr8kp] {
    background: var(--danger-soft);
    color: var(--danger-fg);
}

.notif__iconbtn:disabled[b-c5ldqgr8kp] {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- empty --------------------------------------------------------------- */

/* Names the next thing to do rather than apologising for having nothing. */
.notif-empty[b-c5ldqgr8kp] {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-4) 10px;
}

.notif-empty__title[b-c5ldqgr8kp] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.notif-empty__hint[b-c5ldqgr8kp] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* --- loading ------------------------------------------------------------- */

/* The skeleton is the row, so nothing moves when the answer arrives. */
.notif--skeleton[b-c5ldqgr8kp] {
    /* The real row is as tall as its type line plus its message; these two
       ghosts and the same gaps come to the same height. */
    min-height: 56px;
}

.notif__ghost[b-c5ldqgr8kp] {
    display: block;
    height: 8px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-surface-2), var(--bg-surface-hover), var(--bg-surface-2));
    background-size: 220px 100%;
    animation: notif-shimmer-b-c5ldqgr8kp 1.1s linear infinite;
}

.notif__ghost--type[b-c5ldqgr8kp] {
    width: 84px;
}

.notif__ghost--time[b-c5ldqgr8kp] {
    width: 46px;
    margin-left: auto;
}

.notif__ghost--message[b-c5ldqgr8kp] {
    width: 100%;
    height: 22px;
}

@keyframes notif-shimmer-b-c5ldqgr8kp {
    from {
        background-position: 220px 0;
    }

    to {
        background-position: -220px 0;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zcqhgl9t78],
.components-reconnect-repeated-attempt-visible[b-zcqhgl9t78],
.components-reconnect-failed-visible[b-zcqhgl9t78],
.components-pause-visible[b-zcqhgl9t78],
.components-resume-failed-visible[b-zcqhgl9t78],
.components-rejoining-animation[b-zcqhgl9t78] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-retrying[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-failed[b-zcqhgl9t78],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zcqhgl9t78] {
    display: block;
}

#components-reconnect-modal[b-zcqhgl9t78] {
    width: min(25rem, calc(100% - 1.5rem));
    margin: 20vh auto;
    padding: var(--space-8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: display var(--duration-normal) allow-discrete, overlay var(--duration-normal) allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zcqhgl9t78 var(--duration-normal) both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-zcqhgl9t78 var(--duration-normal) var(--easing-standard), components-reconnect-modal-fadeInOpacity-b-zcqhgl9t78 var(--duration-normal) ease-in-out;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-zcqhgl9t78]::backdrop {
    background-color: var(--overlay-scrim);
    backdrop-filter: blur(8px);
    animation: components-reconnect-modal-fadeInOpacity-b-zcqhgl9t78 var(--duration-normal) ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zcqhgl9t78 {
    0% {
        transform: translateY(16px) scale(0.97);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zcqhgl9t78 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zcqhgl9t78 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zcqhgl9t78] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

#components-reconnect-modal p[b-zcqhgl9t78] {
    margin: 0;
    text-align: center;
    color: var(--text-secondary);
}

#components-reconnect-modal button[b-zcqhgl9t78] {
    border: 1px solid transparent;
    border-radius: 999px;
    min-height: 2.5rem;
    padding: 0.45rem 1.15rem;
    background: var(--accent-primary);
    color: var(--accent-fg);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
}

#components-reconnect-modal button:hover[b-zcqhgl9t78] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

#components-reconnect-modal button:active[b-zcqhgl9t78] {
    transform: translateY(0);
}

.components-rejoining-animation[b-zcqhgl9t78] {
    position: relative;
    width: 72px;
    height: 72px;
}

.components-rejoining-animation div[b-zcqhgl9t78] {
    position: absolute;
    border: 2px solid var(--accent-hover);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-zcqhgl9t78 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-zcqhgl9t78] {
    animation-delay: -0.45s;
}

@keyframes components-rejoining-animation-b-zcqhgl9t78 {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

@media (max-width: 47.99rem) {
    #components-reconnect-modal[b-zcqhgl9t78] {
        margin-top: 16vh;
        padding: var(--space-6);
    }
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-jj03srpddt] {
    position: relative;
    display: flex;
}

.user-menu__trigger[b-jj03srpddt] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 4px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}

.user-menu__trigger:hover[b-jj03srpddt] {
    background: var(--bg-surface-hover);
}

.user-menu__trigger--open[b-jj03srpddt] {
    background: var(--bg-surface-hover);
    border-color: var(--border-strong);
}

.user-menu__avatar[b-jj03srpddt] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--accent-border);
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent-link);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.user-menu__avatar--lg[b-jj03srpddt] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 12px;
}

.user-menu__name[b-jj03srpddt] {
    max-width: 132px;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__caret[b-jj03srpddt] {
    color: var(--text-muted);
}

/* Catches the click that dismisses the menu. Cheaper and more reliable than a
   document-level listener over JS interop. */
.user-menu__backdrop[b-jj03srpddt] {
    position: fixed;
    inset: 0;
    z-index: 45;
}

.user-menu__panel[b-jj03srpddt] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 236px;
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--bg-menu);
    box-shadow: var(--shadow-lg);
    animation: user-menu-in-b-jj03srpddt 180ms var(--easing-standard) both;
}

.user-menu__identity[b-jj03srpddt] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 8px 10px;
}

.user-menu__identity-text[b-jj03srpddt] {
    min-width: 0;
    display: grid;
}

.user-menu__identity-name[b-jj03srpddt] {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__identity-email[b-jj03srpddt] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__divider[b-jj03srpddt] {
    height: 1px;
    margin: 0 4px 4px;
    background: var(--border-subtle);
}

.user-menu__item[b-jj03srpddt] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.user-menu__item:hover[b-jj03srpddt] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.user-menu__item--danger[b-jj03srpddt] {
    color: var(--danger-fg);
}

.user-menu__item--danger:hover[b-jj03srpddt] {
    background: var(--danger-soft);
    color: var(--danger-fg);
}

.user-menu__signed-out[b-jj03srpddt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes user-menu-in-b-jj03srpddt {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 44.99rem) {
    .user-menu__name[b-jj03srpddt],
    .user-menu__caret[b-jj03srpddt] {
        display: none;
    }

    .user-menu__trigger[b-jj03srpddt] {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .user-menu__avatar[b-jj03srpddt] {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-lg);
        font-size: 11px;
    }

    .user-menu__panel[b-jj03srpddt] {
        position: fixed;
        top: 58px;
        right: 8px;
        left: 8px;
        width: auto;
    }

    .user-menu__item[b-jj03srpddt] {
        min-height: 44px;
        font-size: 14px;
    }

    .user-menu__signed-out .app-btn[b-jj03srpddt] {
        width: auto;
        height: 32px;
    }
}
/* /Components/Pages/Attendance.razor.rz.scp.css */
.att-caption[b-d11dr8db3j] {
    font-size: 12px;
    color: var(--text-secondary);
}

.att-table[b-d11dr8db3j] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    overflow: hidden;
}

.att-head[b-d11dr8db3j],
.att-row[b-d11dr8db3j] {
    display: grid;
    grid-template-columns: minmax(160px, 2fr) 104px minmax(96px, 1fr) 84px 64px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.att-head[b-d11dr8db3j] {
    height: 30px;
    background: var(--bg-surface-2);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.att-row[b-d11dr8db3j] {
    height: 32px;
    font-size: 12px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--easing-standard);
}

.att-row:last-child[b-d11dr8db3j] {
    border-bottom: 0;
}

.att-row:hover[b-d11dr8db3j] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.att-name[b-d11dr8db3j] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-when[b-d11dr8db3j] {
    color: var(--text-secondary);
}

.att-num[b-d11dr8db3j] {
    font-family: var(--font-family-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    text-align: right;
}

.att-badge[b-d11dr8db3j] {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid var(--idle-border);
    border-radius: var(--radius-sm);
    background: var(--idle-soft);
    color: var(--idle-fg);
    font-size: 11px;
}

.att-badge--ok[b-d11dr8db3j] {
    border-color: var(--ok-border);
    background: var(--ok-soft);
    color: var(--ok-fg);
}

/* Below 720px the five columns stop fitting, so each row becomes a small
   stacked card and the header row's labels move onto the cells. */
@media (max-width: 44.99rem) {
    .att-head[b-d11dr8db3j] {
        display: none;
    }

    .att-row[b-d11dr8db3j] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        height: auto;
        padding: 10px 12px;
    }

    .att-row > span[data-label]:not(.att-name)[b-d11dr8db3j]::before {
        content: attr(data-label) " ";
        margin-right: 4px;
        font-family: var(--font-family-sans);
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .att-name[b-d11dr8db3j] {
        grid-column: 1;
        font-size: 13px;
        font-weight: 500;
        white-space: normal;
    }

    .att-row > span[data-label="Status"][b-d11dr8db3j] {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .att-row > span[data-label="Status"][b-d11dr8db3j]::before {
        content: none;
    }

    .att-when[b-d11dr8db3j],
    .att-row > span[data-label="Present"][b-d11dr8db3j],
    .att-row > span[data-label="Rate"][b-d11dr8db3j] {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* --- Marking -------------------------------------------------------------- */

/* The rows were links to a page with no attendance controls on it. They open
   in place now, so the table can be used rather than only read. */
.att-row--button[b-d11dr8db3j] {
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    text-align: inherit;
    font: inherit;
}

.att-row--button:focus-visible[b-d11dr8db3j] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.att-panel[b-d11dr8db3j] {
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
}

.att-people[b-d11dr8db3j] {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.att-person[b-d11dr8db3j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 0;
}

.att-person__who[b-d11dr8db3j] {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.att-person__state[b-d11dr8db3j] {
    font-size: 12px;
    color: var(--text-muted);
}

.att-person__actions[b-d11dr8db3j] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.att-choice[b-d11dr8db3j] {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.att-choice--on[b-d11dr8db3j] {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--accent-fg);
    font-weight: 600;
}

.att-choice:focus-visible[b-d11dr8db3j] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.att-choice:disabled[b-d11dr8db3j] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/Auth/AccountDeleted.razor.rz.scp.css */
/* Centred with auto margins inside AuthLayout's flex main: unlike
   place-items, this never pushes the top of a tall card out of reach. */
.auth-page[b-6ebx4eunlu] {
    width: min(26rem, 100%);
    margin: auto;
}

.auth-card[b-6ebx4eunlu] {
    width: 100%;
}

.auth-form-grid[b-6ebx4eunlu] {
    grid-template-columns: 1fr;
}

.auth-footer-text[b-6ebx4eunlu] {
    text-align: center;
    font-size: 0.9rem;
    margin: 0;
}
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* Centred with auto margins inside AuthLayout's flex main: unlike
   place-items, this never pushes the top of a tall card out of reach. */
.auth-page[b-hbwqlh89mf] {
    width: min(26rem, 100%);
    margin: auto;
}

.auth-card[b-hbwqlh89mf] {
    width: 100%;
}

.auth-form-grid[b-hbwqlh89mf] {
    grid-template-columns: 1fr;
}

.auth-footer-text[b-hbwqlh89mf] {
    text-align: center;
    font-size: 0.9rem;
    margin: 0;
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Centred with auto margins inside AuthLayout's flex main: unlike
   place-items, this never pushes the top of a tall card out of reach. */
.auth-page[b-m9fapa8jz4] {
    width: min(24rem, 100%);
    margin: auto;
}

/* AppCard and AppButton render their own root elements, which do not carry
   this page's scope attribute - ::deep is what reaches them. */
.auth-page[b-m9fapa8jz4]  .auth-card {
    width: 100%;
    padding: 20px;
}

.auth-form-grid[b-m9fapa8jz4] {
    grid-template-columns: 1fr;
}

.auth-page[b-m9fapa8jz4]  .auth-submit {
    width: 100%;
}

.auth-footer-text[b-m9fapa8jz4] {
    margin: 0;
    font-size: 11.5px;
    text-align: center;
    color: var(--text-muted);
}

.auth-footer-sep[b-m9fapa8jz4] {
    margin: 0 6px;
    color: var(--border-strong);
}

.auth-divider[b-m9fapa8jz4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
}

.auth-divider span[b-m9fapa8jz4] {
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
}

.auth-divider[b-m9fapa8jz4]::before,
.auth-divider[b-m9fapa8jz4]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.google-sign-in-btn[b-m9fapa8jz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                transform var(--duration-fast) var(--easing-standard);
}

.google-sign-in-btn:hover[b-m9fapa8jz4] {
    background: var(--bg-surface-hover);
}

.google-sign-in-btn:active[b-m9fapa8jz4] {
    transform: scale(0.98);
}

.google-icon[b-m9fapa8jz4] {
    flex-shrink: 0;
}

@media (max-width: 44.99rem) {
    .auth-page[b-m9fapa8jz4]  .auth-card {
        padding: 16px;
    }

    .google-sign-in-btn[b-m9fapa8jz4] {
        height: 40px;
    }
}
/* /Components/Pages/Auth/Profile.razor.rz.scp.css */
.profile-page[b-qh3apqiizs] {
    gap: var(--space-4);
}

.profile-grid[b-qh3apqiizs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: start;
    gap: var(--space-4);
}

.profile-form-grid[b-qh3apqiizs] {
    grid-template-columns: 1fr;
}

.profile-main[b-qh3apqiizs],
.profile-side[b-qh3apqiizs] {
    min-width: 0;
    gap: var(--space-4);
}

.profile-inline-field[b-qh3apqiizs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}

.profile-actions[b-qh3apqiizs] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
}

.profile-actions--wrap[b-qh3apqiizs] {
    flex-wrap: wrap;
}

.profile-badge[b-qh3apqiizs] {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--idle-border);
    border-radius: 999px;
    background: var(--idle-soft);
    color: var(--idle-fg);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.profile-badge--ok[b-qh3apqiizs] {
    border-color: var(--ok-border);
    background: var(--ok-soft);
    color: var(--ok-fg);
}

.profile-badge--warn[b-qh3apqiizs] {
    border-color: var(--warn-border);
    background: var(--warn-soft);
    color: var(--warn-fg);
}

.profile-facts[b-qh3apqiizs] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.profile-fact[b-qh3apqiizs] {
    display: grid;
    grid-template-columns: minmax(6rem, 0.6fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: 2rem;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.profile-fact:last-child[b-qh3apqiizs] {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-fact dt[b-qh3apqiizs] {
    color: var(--text-muted);
    font-size: 12px;
}

.profile-fact dd[b-qh3apqiizs] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-callout[b-qh3apqiizs] {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-lg);
    background: var(--warn-soft);
}

.profile-callout p[b-qh3apqiizs] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.password-rules[b-qh3apqiizs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.password-rule[b-qh3apqiizs] {
    display: inline-flex;
    align-items: center;
    min-height: 1.375rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--idle-border);
    border-radius: 999px;
    background: var(--idle-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.password-rule--met[b-qh3apqiizs] {
    border-color: var(--ok-border);
    background: var(--ok-soft);
    color: var(--ok-fg);
}

.profile-skeleton[b-qh3apqiizs] {
    display: grid;
    gap: var(--space-3);
}

.profile-skeleton--primary[b-qh3apqiizs] {
    min-height: 19rem;
}

.profile-ghost[b-qh3apqiizs] {
    display: block;
    width: 100%;
    height: 0.75rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-surface-2), var(--bg-surface-hover), var(--bg-surface-2));
    background-size: 220px 100%;
    animation: profile-shimmer-b-qh3apqiizs 1.1s linear infinite;
}

.profile-ghost--short[b-qh3apqiizs] {
    width: 8rem;
}

.profile-ghost--title[b-qh3apqiizs] {
    width: 14rem;
    height: 1rem;
}

.profile-ghost--button[b-qh3apqiizs] {
    width: 7rem;
    height: 2rem;
}

@keyframes profile-shimmer-b-qh3apqiizs {
    from {
        background-position: 220px 0;
    }

    to {
        background-position: -220px 0;
    }
}

.danger-card[b-qh3apqiizs] {
    border-color: var(--danger-border);
}

.danger-list[b-qh3apqiizs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding-left: 1.1rem;
    font-size: 12px;
    color: var(--text-secondary);
}

.danger-button[b-qh3apqiizs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-lg);
    background: var(--danger-soft);
    color: var(--danger-fg);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--easing-standard),
        border-color var(--duration-fast) var(--easing-standard),
        transform var(--duration-fast) var(--easing-standard);
}

.danger-button:hover[b-qh3apqiizs] {
    border-color: var(--danger-fg);
    background: var(--bg-surface-hover);
}

.danger-button:focus-visible[b-qh3apqiizs] {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.danger-button:active[b-qh3apqiizs] {
    transform: scale(0.98);
}

.danger-button:disabled[b-qh3apqiizs] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 900px) {
    .profile-grid[b-qh3apqiizs] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .profile-inline-field[b-qh3apqiizs],
    .profile-fact[b-qh3apqiizs] {
        grid-template-columns: 1fr;
    }

    .profile-actions[b-qh3apqiizs],
    .profile-actions > .app-btn[b-qh3apqiizs],
    .profile-actions > .danger-button[b-qh3apqiizs] {
        width: 100%;
    }

    .profile-actions[b-qh3apqiizs] {
        align-items: stretch;
    }
}
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* Centred with auto margins inside AuthLayout's flex main: unlike
   place-items, this never pushes the top of a tall card out of reach. */
.auth-page[b-hvubd7kmxk] {
    width: min(26rem, 100%);
    margin: auto;
}

.auth-card[b-hvubd7kmxk] {
    width: 100%;
}

.auth-form-grid[b-hvubd7kmxk] {
    grid-template-columns: 1fr;
}

.auth-footer-text[b-hvubd7kmxk] {
    text-align: center;
    font-size: 0.9rem;
    margin: 0;
}

.auth-divider[b-hvubd7kmxk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
}

.auth-divider span[b-hvubd7kmxk] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.auth-divider[b-hvubd7kmxk]::before,
.auth-divider[b-hvubd7kmxk]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.google-sign-in-btn[b-hvubd7kmxk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 2.75rem;
    padding: 0.62rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}

.google-sign-in-btn:hover[b-hvubd7kmxk] {
    background: var(--bg-surface-2);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-subtle));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.google-sign-in-btn:active[b-hvubd7kmxk] {
    transform: translateY(0);
}

.google-icon[b-hvubd7kmxk] {
    flex-shrink: 0;
}
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* Centred with auto margins inside AuthLayout's flex main: unlike
   place-items, this never pushes the top of a tall card out of reach. */
.auth-page[b-ohhf5bn7fj] {
    width: min(26rem, 100%);
    margin: auto;
}

.auth-card[b-ohhf5bn7fj] {
    width: 100%;
}

.auth-form-grid[b-ohhf5bn7fj] {
    grid-template-columns: 1fr;
}

.auth-footer-text[b-ohhf5bn7fj] {
    text-align: center;
    font-size: 0.9rem;
    margin: 0;
}
/* /Components/Pages/Auth/VerifyEmail.razor.rz.scp.css */
/* Centred with auto margins inside AuthLayout's flex main: unlike
   place-items, this never pushes the top of a tall card out of reach. */
.auth-page[b-uhmq9ap2gz] {
    width: min(26rem, 100%);
    margin: auto;
}

.auth-card[b-uhmq9ap2gz] {
    width: 100%;
}

.auth-form-grid[b-uhmq9ap2gz] {
    grid-template-columns: 1fr;
}

.auth-footer-text[b-uhmq9ap2gz] {
    text-align: center;
    font-size: 0.9rem;
    margin: 0;
}
/* /Components/Pages/EventDetails.razor.rz.scp.css */
.event-details-page[b-lf9ixiak35] {
    gap: var(--space-4);
}

.event-details-hero[b-lf9ixiak35] {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 82%, var(--accent-soft)), var(--bg-surface));
}

.event-details-hero__meta[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-details-stat[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
}

.event-details-stat__label[b-lf9ixiak35] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.event-details-layout[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.event-summary-grid[b-lf9ixiak35],
.totals-list[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr;
    margin: 0;
}

.event-summary-grid div[b-lf9ixiak35],
.totals-list div[b-lf9ixiak35] {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-surface-2) 72%, var(--bg-surface));
}

.event-summary-grid dt[b-lf9ixiak35],
.totals-list dt[b-lf9ixiak35] {
    margin-bottom: var(--space-1);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.event-summary-grid dd[b-lf9ixiak35],
.totals-list dd[b-lf9ixiak35] {
    margin: 0;
    font-weight: 600;
}

.schedule-list[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-3);
}

.schedule-day[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 74%, transparent);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, var(--bg-surface-2)), var(--bg-surface));
}

.schedule-day__header[b-lf9ixiak35] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.schedule-day__header h3[b-lf9ixiak35] {
    margin-bottom: 0;
}

.schedule-day__header span[b-lf9ixiak35] {
    color: var(--text-secondary);
}

.schedule-slots[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-2);
}

.schedule-slot[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-surface-2) 78%, var(--bg-surface));
}

.schedule-slot--confirmed[b-lf9ixiak35] {
    border: 1px solid color-mix(in srgb, var(--ok-fg) 52%, var(--border-subtle));
    background: var(--ok-soft);
}

.schedule-slot__flag[b-lf9ixiak35] {
    display: inline-flex;
    margin-top: var(--space-2);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    background: color-mix(in srgb, var(--ok-fg) 18%, var(--bg-surface));
    color: var(--ok-fg);
    font-size: 0.82rem;
    font-weight: 600;
}

.vote-actions[b-lf9ixiak35] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.vote-button[b-lf9ixiak35] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 2.35rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}

/* Scoped away from the selected state. Three pseudo-classes outrank the single
   class below, so hovering a selected button repainted its label in the same
   colour as its background - primary on primary, a contrast ratio of 1:1 - and
   the label vanished under the cursor that had just chosen it. */
.vote-button:hover:not(:disabled):not(.vote-button--selected)[b-lf9ixiak35] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));
    color: var(--accent-primary);
}

.vote-button--selected[b-lf9ixiak35] {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--accent-fg);
}

.vote-button--selected:hover:not(:disabled)[b-lf9ixiak35] {
    transform: translateY(-1px);
    background: var(--accent-hover);
}

.vote-button:focus-visible[b-lf9ixiak35] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.vote-button:disabled[b-lf9ixiak35] {
    cursor: not-allowed;
    opacity: 0.55;
}

.vote-submit-bar[b-lf9ixiak35],
.vote-state[b-lf9ixiak35] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-2);
}

.vote-submit-bar span[b-lf9ixiak35],
.vote-state span[b-lf9ixiak35] {
    color: var(--text-secondary);
}

.vote-state[b-lf9ixiak35] {
    display: grid;
    justify-content: initial;
}

.schedule-slot dl[b-lf9ixiak35] {
    display: flex;
    gap: var(--space-3);
    margin: 0;
}

.schedule-slot dl div[b-lf9ixiak35] {
    text-align: right;
}

.schedule-slot dt[b-lf9ixiak35] {
    margin-bottom: var(--space-1);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.schedule-slot dd[b-lf9ixiak35] {
    margin: 0;
    font-weight: 700;
}

.participant-list[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.participant-list li[b-lf9ixiak35] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-surface-2) 72%, var(--bg-surface));
}

.participant-list__current[b-lf9ixiak35] {
    border: 1px solid color-mix(in srgb, var(--accent-primary) 34%, var(--border-subtle));
    background: color-mix(in srgb, var(--accent-soft) 54%, var(--bg-surface));
}

.participant-list strong[b-lf9ixiak35],
.participant-list span[b-lf9ixiak35],
.participant-list small[b-lf9ixiak35] {
    display: block;
}

.participant-list span[b-lf9ixiak35],
.participant-list small[b-lf9ixiak35] {
    color: var(--text-secondary);
}

.schedule-empty-state[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-surface-2) 72%, var(--bg-surface));
}

.event-details__placeholder[b-lf9ixiak35] {
    height: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--bg-surface-2) 80%, transparent), color-mix(in srgb, var(--border-subtle) 80%, transparent), color-mix(in srgb, var(--bg-surface-2) 80%, transparent));
    background-size: 200% 100%;
    animation: event-details-loading-b-lf9ixiak35 1.4s linear infinite;
}

.event-details__placeholder--wide[b-lf9ixiak35] {
    width: 70%;
    height: 1.4rem;
}

@keyframes event-details-loading-b-lf9ixiak35 {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (max-width: 63.99rem) {
}

@media (max-width: 47.99rem) {
    .event-details-hero__meta[b-lf9ixiak35],
    .event-summary-grid[b-lf9ixiak35],
    .totals-list[b-lf9ixiak35] {
        grid-template-columns: 1fr;
    }

    .schedule-day__header[b-lf9ixiak35],
    .participant-list li[b-lf9ixiak35],
    .vote-submit-bar[b-lf9ixiak35] {
        flex-direction: column;
        align-items: flex-start;
    }

    .vote-actions[b-lf9ixiak35] {
        grid-template-columns: 1fr;
    }

    .schedule-slot dl[b-lf9ixiak35] {
        width: 100%;
        justify-content: space-between;
    }

    .schedule-slot dl div[b-lf9ixiak35] {
        text-align: left;
    }
}
/* --- Organizer controls --------------------------------------------------- */

.organizer-invite__row[b-lf9ixiak35] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.organizer-invite__row .form-input[b-lf9ixiak35] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Cancelling and closing are both hard to undo, so each asks first and the
   question sits beside the button that answers it. */
.organizer-confirm[b-lf9ixiak35] {
    align-self: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- The restructured page ------------------------------------------------ */

/* Was a two-column grid with a sidebar. The stylesheet never delivered the
   second column at any width - `.event-details-main` and `.event-details-sidebar`
   carried no rules at all, and an empty `@media (max-width: 63.99rem) {}` was
   what remained of the rule that once did - so the "sidebar" holding the
   participant list stacked below the whole poll on a 1280px screen. It is one
   column now, on purpose, and the grid gets the width. */

.ed-head[b-lf9ixiak35] {
    display: grid;
    gap: var(--space-1);
}

.ed-head h1[b-lf9ixiak35] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ed-head__meta[b-lf9ixiak35] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.ed-dot[b-lf9ixiak35] {
    color: var(--text-muted);
}

.ed-head__desc[b-lf9ixiak35] {
    margin: var(--space-1) 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.ed-card[b-lf9ixiak35],
.ed-decide[b-lf9ixiak35] {
    display: block;
}

/* The count the page never carried. It replaces a card that counted proposed
   dates and time slots - both of which the reader can see by looking. */
.ed-progress[b-lf9ixiak35] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

.ed-progress__track[b-lf9ixiak35] {
    flex: 1 1 12rem;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-surface-3);
    overflow: hidden;
}

.ed-progress__fill[b-lf9ixiak35] {
    height: 100%;
    border-radius: 999px;
    background: var(--accent-primary);
    transition: width var(--duration-normal) var(--easing-standard);
}

.ed-progress__label[b-lf9ixiak35] {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.ed-submit[b-lf9ixiak35] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.ed-submit__progress[b-lf9ixiak35] {
    font-size: 12px;
    color: var(--text-muted);
}

.ed-moved[b-lf9ixiak35] {
    margin: 0 0 var(--space-3);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Quiet, and last. Calling a meeting off is not what an organizer opens this
   page to do, and it used to sit in the same row as Close the poll. */
.ed-danger[b-lf9ixiak35] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
}

@media (max-width: 44.99rem) {
    .ed-submit[b-lf9ixiak35] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Events.razor.rz.scp.css */
/* Density's data table, as the app-shell artboard draws this page: 30px head,
   32px rows, tabular numerals, bordered not shadowed. The same geometry the
   results grid is built from - one table in this product, drawn twice. */

.polls-page[b-p3l1wvtxry] {
    gap: var(--space-4);
}

/* Caption left, controls right, on one line that wraps rather than a card with
   its own heading explaining what a filter is. */
.polls-toolbar[b-p3l1wvtxry] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.polls-toolbar__caption[b-p3l1wvtxry] {
    font-size: 12px;
    color: var(--text-secondary);
}

.polls-toolbar__controls[b-p3l1wvtxry] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
}

.polls-search[b-p3l1wvtxry] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-muted);
}

.polls-search:focus-within[b-p3l1wvtxry] {
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
}

.polls-search__input[b-p3l1wvtxry] {
    width: 8rem;
    border: 0;
    background: none;
    font-size: 12px;
    color: var(--text-primary);
}

/* The pill carries the ring, so the input must not draw one of its own. The
   global `:focus-visible` in app.css sets `box-shadow: var(--focus-ring)`, and
   clearing only `outline` left that shadow painting a second, rectangular ring
   at 5px radius inside the pill's 999px one - on mouse clicks too, because a
   text input matches `:focus-visible` however it was focused. `:focus` alone
   would do - `:focus-visible` is a subset of it - but naming both means a rule
   added later against one state cannot slip past this. Scoped CSS compiles to
   `.polls-search__input:focus[b-...]`, three components against the bare
   global's one, so this wins on specificity without `!important`. */
.polls-search__input:focus[b-p3l1wvtxry],
.polls-search__input:focus-visible[b-p3l1wvtxry] {
    outline: 0;
    box-shadow: none;
}

/* `type="search"` hands WebKit a native clear glyph that no stylesheet here
   touches: it renders in a system grey that follows neither token set, at a
   size well under the 24px WCAG 2.5.8 floor this codebase already refuses to
   go below for `.sp-iconbtn`, and inside a 24px pill at that. Restyling it
   means `appearance: none` plus a hand-drawn glyph, which is a second icon
   vocabulary beside `AppIcon`. So it is suppressed, and an in-place clear -
   if it is wanted - belongs in the markup as a real button. */
.polls-search__input[b-p3l1wvtxry]::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
}

.poll-filters[b-p3l1wvtxry] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- The table ------------------------------------------------------------ */

.ptable[b-p3l1wvtxry] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    overflow: hidden;
}

/* The scroll lives in the card, so the page itself never moves sideways. */
.ptable__scroll[b-p3l1wvtxry] {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.ptable__rail[b-p3l1wvtxry] {
    min-width: 620px;
}

.ptable__row[b-p3l1wvtxry] {
    display: grid;
    /* Every track is sized without reference to its contents, because each row
       is its own grid container: an intrinsic track resolves per row, so a row
       reading "in 5h" and one reading "17 Sep, 11:00" sized their last column
       differently, the fr tracks absorbed different leftovers, and the status
       column landed at a different x in every row. 96px is enough for the
       longest this column can hold - `d MMM, HH:mm` in the invariant culture is
       at most 13 characters, and IBM Plex Mono at 11.5px is 6.9px a character. */
    grid-template-columns: minmax(160px, 2fr) 148px minmax(96px, 1fr) 76px 96px;
    align-items: center;
    /* Without a gap the tally runs straight into the time beside it. */
    gap: var(--space-3);
    height: 32px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--easing-standard);
}

a.ptable__row:hover[b-p3l1wvtxry] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

a.ptable__row:focus-visible[b-p3l1wvtxry] {
    outline: 0;
    box-shadow: inset var(--focus-ring);
}

.ptable__row--head[b-p3l1wvtxry] {
    height: 30px;
    background: var(--bg-surface-2);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.ptable__row:last-child[b-p3l1wvtxry] {
    border-bottom: 0;
}

.ptable__cell[b-p3l1wvtxry] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ptable__cell--name[b-p3l1wvtxry] {
    font-weight: 500;
}

.ptable__cell--soft[b-p3l1wvtxry] {
    color: var(--text-secondary);
}

.ptable__cell--num[b-p3l1wvtxry] {
    text-align: right;
    font-family: var(--font-family-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* The skeleton matches the row it stands in for, so the table does not resize
   under the reader when the data lands. */
.ptable__row--skeleton[b-p3l1wvtxry] {
    cursor: default;
}

.ptable__ghost[b-p3l1wvtxry] {
    display: inline-block;
    height: 8px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-surface-2), var(--bg-surface-hover), var(--bg-surface-2));
    background-size: 220px 100%;
    animation: ptable-shimmer-b-p3l1wvtxry 1.1s linear infinite;
}

.ptable__cell--num .ptable__ghost[b-p3l1wvtxry] {
    float: right;
}

@keyframes ptable-shimmer-b-p3l1wvtxry {
    from {
        background-position: 220px 0;
    }

    to {
        background-position: -220px 0;
    }
}

.ptable__foot[b-p3l1wvtxry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 30px;
    padding: 0 12px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
    font-size: 11px;
    color: var(--text-muted);
}

/* The timezone was a headline statistic beside the poll counts. It is a
   footnote, so it reads as one. */
.ptable__zone[b-p3l1wvtxry] {
    font-family: var(--font-family-mono);
}

.ptable__blank[b-p3l1wvtxry] {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.ptable__blank-title[b-p3l1wvtxry] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.ptable__blank p[b-p3l1wvtxry] {
    max-width: 20rem;
    margin: 0;
}

/* --- Status tag ----------------------------------------------------------- */

.ptag[b-p3l1wvtxry] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 18px;
    padding: 0 7px;
    border: 1px solid var(--idle-border);
    border-radius: 999px;
    background: var(--idle-soft);
    color: var(--idle-fg);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.ptag__dot[b-p3l1wvtxry] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.ptag--info[b-p3l1wvtxry] {
    border-color: var(--info-border);
    background: var(--info-soft);
    color: var(--info-fg);
}

.ptag--ok[b-p3l1wvtxry] {
    border-color: var(--ok-border);
    background: var(--ok-soft);
    color: var(--ok-fg);
}

.ptag--warn[b-p3l1wvtxry] {
    border-color: var(--warn-border);
    background: var(--warn-soft);
    color: var(--warn-fg);
}

.ptag--danger[b-p3l1wvtxry] {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger-fg);
}

/* --- Empty state ---------------------------------------------------------- */

.poll-empty[b-p3l1wvtxry],
[b-p3l1wvtxry] .poll-empty {
    border-style: dashed;
    border-color: var(--border-strong);
}

/* --- The phone shape ------------------------------------------------------ */

.pcards[b-p3l1wvtxry] {
    display: none;
    gap: var(--space-2);
}

.pcard[b-p3l1wvtxry] {
    display: grid;
    gap: var(--space-2);
    padding: 11px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    color: var(--text-primary);
    text-decoration: none;
}

.pcard:hover[b-p3l1wvtxry] {
    color: var(--text-primary);
    text-decoration: none;
}

.pcard:focus-visible[b-p3l1wvtxry] {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.pcard__head[b-p3l1wvtxry] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pcard__name[b-p3l1wvtxry] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 500;
}

.pcard__meta[b-p3l1wvtxry] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11.5px;
    color: var(--text-muted);
}

.pcard__group[b-p3l1wvtxry] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The two numbers travel together, so the row still reads right when a poll
   has no group to name. */
.pcard__nums[b-p3l1wvtxry] {
    display: flex;
    flex: none;
    gap: var(--space-2);
    margin-left: auto;
}

.pcard__num[b-p3l1wvtxry] {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
}

.pcard--skeleton[b-p3l1wvtxry] {
    gap: var(--space-2);
}

/* Density's own breakpoint. The table becomes cards rather than a table
   squeezed - the same swap the results grid makes. */
@media (max-width: 44.99rem) {
    .ptable__scroll[b-p3l1wvtxry] {
        display: none;
    }

    /* The footer and the filtered-empty state live inside the table, which sits
       before the cards in the markup - without this they read as a header above
       a list they are summing up. */
    .ptable[b-p3l1wvtxry] {
        order: 2;
        border: 0;
        border-radius: 0;
        background: none;
        overflow: visible;
    }

    .pcards[b-p3l1wvtxry] {
        order: 1;
    }

    .ptable__foot[b-p3l1wvtxry] {
        margin-top: var(--space-2);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
    }

    .ptable__blank[b-p3l1wvtxry] {
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        background: var(--bg-surface);
    }

    .pcards[b-p3l1wvtxry] {
        display: grid;
    }

    .polls-toolbar__controls[b-p3l1wvtxry] {
        width: 100%;
        margin-left: 0;
    }

    .polls-search[b-p3l1wvtxry] {
        flex: 1;
    }

    .polls-search__input[b-p3l1wvtxry] {
        width: 100%;
    }
}
/* /Components/Pages/GroupDetails.razor.rz.scp.css */
.group-meta[b-kwupp60tqo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.group-meta__item[b-kwupp60tqo] {
    display: flex;
    flex-direction: column;
}

.group-meta__label[b-kwupp60tqo] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.member-list[b-kwupp60tqo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.member[b-kwupp60tqo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.member__who[b-kwupp60tqo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 16rem;
}

.member__email[b-kwupp60tqo] {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.member__role[b-kwupp60tqo] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.member__actions[b-kwupp60tqo] {
    display: flex;
    gap: var(--space-2);
}

.member__action[b-kwupp60tqo] {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
}

.member__action:hover[b-kwupp60tqo] {
    background: var(--bg-surface-2);
}

.member__action--danger[b-kwupp60tqo] {
    color: var(--danger-fg);
}

.member__action:disabled[b-kwupp60tqo] {
    opacity: 0.6;
    cursor: default;
}

.danger-card[b-kwupp60tqo] {
    border-color: color-mix(in srgb, var(--danger-fg) 35%, var(--border-subtle));
}

.danger-button[b-kwupp60tqo] {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid color-mix(in srgb, var(--danger-fg) 45%, var(--border-subtle));
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--danger-fg);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.danger-button:hover[b-kwupp60tqo] {
    background: color-mix(in srgb, var(--danger-fg) 8%, transparent);
}

.danger-button:disabled[b-kwupp60tqo] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/Groups.razor.rz.scp.css */
.groups-toolbar[b-ediwx0mynp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.groups-toolbar__caption[b-ediwx0mynp] {
    font-size: 12px;
    color: var(--text-secondary);
}

.group-list[b-ediwx0mynp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.group-card[b-ediwx0mynp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.group-card__main[b-ediwx0mynp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 18rem;
    color: inherit;
    text-decoration: none;
}

.group-card__main:hover .group-card__name[b-ediwx0mynp] {
    text-decoration: underline;
}

.group-card__name[b-ediwx0mynp] {
    font-size: 1rem;
}

.group-card__meta[b-ediwx0mynp],
.group-card__since[b-ediwx0mynp] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-dashboard[b-m8f49dsfpa] {
    gap: var(--space-8);
}

.dashboard-panel__header[b-m8f49dsfpa],
.dashboard-list-item[b-m8f49dsfpa],
.event-row[b-m8f49dsfpa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.dashboard-metrics[b-m8f49dsfpa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.dashboard-metric[b-m8f49dsfpa],
[b-m8f49dsfpa] .dashboard-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 6rem;
}

.dashboard-metric .app-icon[b-m8f49dsfpa],
[b-m8f49dsfpa] .dashboard-metric .app-icon {
    color: var(--accent-primary);
}

.dashboard-metric strong[b-m8f49dsfpa],
.dashboard-metric span[b-m8f49dsfpa] {
    display: block;
}

.dashboard-metric strong[b-m8f49dsfpa],
[b-m8f49dsfpa] .dashboard-metric strong {
    font-size: 1.25rem;
    line-height: 1;
}

.dashboard-metric span[b-m8f49dsfpa],
[b-m8f49dsfpa] .dashboard-metric span {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
}

.dashboard-metrics[b-m8f49dsfpa]  .dashboard-metric:nth-child(2) .app-icon {
    color: var(--danger-fg);
}

.dashboard-panel[b-m8f49dsfpa],
[b-m8f49dsfpa] .dashboard-panel {
    gap: var(--space-4);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-panel__header h2[b-m8f49dsfpa] {
    margin-bottom: 0;
}

.dashboard-panel__header > h2[b-m8f49dsfpa] {
    font-size: 1.25rem;
    font-weight: 600;
}

.text-link[b-m8f49dsfpa] {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.72rem;
    text-decoration: none;
}

.dashboard-list[b-m8f49dsfpa],
.event-list[b-m8f49dsfpa] {
    display: grid;
    gap: var(--space-2);
}

.dashboard-list-item[b-m8f49dsfpa],
.event-row[b-m8f49dsfpa] {
    color: inherit;
    text-decoration: none;
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-surface-2));
    transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}


.dashboard-list-item--urgent[b-m8f49dsfpa]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0.25rem;
    background: var(--accent-primary);
}

.dashboard-list-item__topline[b-m8f49dsfpa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.dashboard-list-item:hover[b-m8f49dsfpa],
.event-row:hover[b-m8f49dsfpa] {
    color: inherit;
    border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.dashboard-list-item h3[b-m8f49dsfpa],
.event-row h3[b-m8f49dsfpa] {
    margin-bottom: var(--space-1);
    font-size: 0.75rem;
}

.dashboard-list-item p[b-m8f49dsfpa],
.event-row p[b-m8f49dsfpa] {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.dashboard-list-item__aside[b-m8f49dsfpa] {
    display: flex;
    align-items: center;
    justify-items: end;
    gap: var(--space-2);
    color: var(--accent-primary);
    white-space: nowrap;
}

.dashboard-list-item__aside strong[b-m8f49dsfpa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 600;
}


.dashboard-status[b-m8f49dsfpa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: 0.7rem;
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
    background: var(--bg-surface-3);
    font-weight: 600;
}

.dashboard-status--urgent[b-m8f49dsfpa] {
    background: var(--danger-soft);
    color: var(--danger-fg);
}

.event-date-chip[b-m8f49dsfpa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    min-height: 3rem;
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 0.1rem;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    flex-shrink: 0;
}

.event-date-chip span[b-m8f49dsfpa] {
    color: var(--accent-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.event-date-chip strong[b-m8f49dsfpa] {
    font-size: 1rem;
    line-height: 1;
}

.event-row > div[b-m8f49dsfpa] {
    flex: 1;
    min-width: 0;
}

.event-row p[b-m8f49dsfpa] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.event-row__state[b-m8f49dsfpa] {
    color: var(--border-strong);
}

.event-row__state--confirmed[b-m8f49dsfpa] {
    color: var(--accent-primary);
}





.dashboard-empty-state[b-m8f49dsfpa] {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-2);
}

.dashboard-auth-prompt[b-m8f49dsfpa] {
    border-style: solid;
    background: color-mix(in srgb, var(--bg-surface) 82%, var(--bg-surface-2));
}

.dashboard-empty-state span[b-m8f49dsfpa] {
    color: var(--text-secondary);
}

.dashboard-skeleton[b-m8f49dsfpa] {
    min-height: 4.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--bg-surface-2), color-mix(in srgb, var(--border-subtle) 70%, var(--bg-surface)), var(--bg-surface-2));
    background-size: 200% 100%;
    animation: dashboard-loading-b-m8f49dsfpa 1.3s linear infinite;
}

@keyframes dashboard-loading-b-m8f49dsfpa {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (max-width: 47.99rem) {
    .dashboard-panel__header[b-m8f49dsfpa],
    .dashboard-list-item[b-m8f49dsfpa] {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-metrics[b-m8f49dsfpa] {
        grid-template-columns: 1fr;
    }

    .dashboard-list-item__aside[b-m8f49dsfpa] {
        justify-items: start;
    }
}
/* /Components/Pages/VoteInvitation.razor.rz.scp.css */
.invite-page[b-10x74dynmn] {
    width: min(40rem, 100%);
    margin-inline: auto;
}

.invite-card[b-10x74dynmn] {
    width: 100%;
}

.invite-meta[b-10x74dynmn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.invite-meta__item[b-10x74dynmn] {
    display: flex;
    flex-direction: column;
}

.invite-meta__label[b-10x74dynmn] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.slot-list[b-10x74dynmn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.slot[b-10x74dynmn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.slot--confirmed[b-10x74dynmn] {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-subtle));
    background: var(--bg-surface-2);
}

.slot__when[b-10x74dynmn] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 13rem;
    font-size: 0.95rem;
}

.slot__when span[b-10x74dynmn] {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.slot__badge[b-10x74dynmn] {
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--accent-primary);
    color: var(--accent-fg);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slot__counts[b-10x74dynmn] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.slot__count--yes[b-10x74dynmn] {
    color: var(--text-primary);
    font-weight: 600;
}

.slot__choice[b-10x74dynmn] {
    display: flex;
    gap: var(--space-2);
}

.slot__button[b-10x74dynmn] {
    min-width: 5.5rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    cursor: pointer;
}

/* Scoped away from the chosen state. The hover fill used to be the very same
   colour that meant "I cannot" was selected, so hovering any button made it look
   as though it had already been chosen. */
.slot__button:hover:not(.slot__button--yes):not(.slot__button--no)[b-10x74dynmn] {
    background: var(--bg-surface-2);
}

.slot__button:focus-visible[b-10x74dynmn] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.slot__button--yes[b-10x74dynmn] {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--accent-fg);
    font-weight: 600;
}

/* "I can" is white on indigo and unmistakable. "I cannot" used to keep the same
   text colour, weight and border, swapping only a transparent background for a
   near-white fill - a 1.05:1 change on a white card, so somebody marking
   themselves unavailable got no real confirmation. WCAG 1.4.11 asks 3:1 for a
   state indicator; this inverts the button instead. */
.slot__button--no[b-10x74dynmn] {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-surface);
    font-weight: 600;
}

.slot__button--yes:hover[b-10x74dynmn],
.slot__button--no:hover[b-10x74dynmn] {
    filter: brightness(1.15);
}

.slot__yours[b-10x74dynmn] {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.invite-decline[b-10x74dynmn] {
    padding: 0.5rem 0.8rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.invite-decline:hover[b-10x74dynmn] {
    color: var(--text-primary);
}

.invite-decline:disabled[b-10x74dynmn] {
    opacity: 0.6;
    cursor: default;
}

/* Declining is irreversible from the organizer's side and used to happen on one
   unconfirmed click, right beside "Send my answer". The confirm step gets a
   visible prompt and a button that reads as the destructive one. */
.invite-decline__confirm[b-10x74dynmn] {
    align-self: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.invite-decline--confirm[b-10x74dynmn] {
    border: 1px solid var(--danger-border, currentColor);
    border-radius: var(--radius-md, 6px);
    color: var(--danger-fg, inherit);
    text-decoration: none;
    font-weight: 600;
}

.invite-decline:focus-visible[b-10x74dynmn],
.invite-decline--confirm:focus-visible[b-10x74dynmn] {
    outline: 2px solid var(--accent-primary, currentColor);
    outline-offset: 2px;
}

/* Day heading above each group of times, so a date is stated once rather than
   repeated as its own heading on every slot that falls on it. */
.slot-day[b-10x74dynmn] {
    margin: var(--space-3) 0 var(--space-1);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.slot-day:first-of-type[b-10x74dynmn] {
    margin-top: 0;
}

/* --- Submit bar ----------------------------------------------------------- */

.invite-submit[b-10x74dynmn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

/* The reader's own progress through the options. It says "you" because this page
   used to count how many other people had answered, and a bare "2 of 3" on the
   page that stopped doing that reads as the thing that was taken away. */
.invite-submit__progress[b-10x74dynmn] {
    font-size: 12px;
    color: var(--text-muted);
}

.invite-moved[b-10x74dynmn] {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

@media (max-width: 44.99rem) {
    .invite-submit[b-10x74dynmn] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Scheduling/ParticipantPanel.razor.rz.scp.css */
/* One row per person: who, what they said, and the two things the organizer can
   do about it. Geometry from Density's user cells - a 24px avatar tile, the
   address at 12.5px with a quieter second line - on the row-with-actions shape
   the attendance panel already uses. */

.ppanel[b-qssvoq5cyc] {
    display: grid;
    gap: var(--space-3);
}

.ppanel__note[b-qssvoq5cyc] {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.ppanel__list[b-qssvoq5cyc] {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pperson[b-qssvoq5cyc] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--bg-surface-2);
}

/* The people the panel exists for. A border rather than a fill, so the row is
   marked without being shouted at, and never by colour alone - the status column
   says "No answer yet" in words. */
.pperson--silent[b-qssvoq5cyc] {
    border-color: var(--warn-border);
    background: var(--warn-soft);
}

.pperson__avatar[b-qssvoq5cyc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--bg-surface-3);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
}

.pperson__who[b-qssvoq5cyc] {
    display: grid;
    min-width: 0;
}

.pperson__email[b-qssvoq5cyc] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12.5px;
    color: var(--text-primary);
}

.pperson__kind[b-qssvoq5cyc] {
    font-size: 11px;
    color: var(--text-muted);
}

.pperson__state[b-qssvoq5cyc] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.pperson__status[b-qssvoq5cyc] {
    font-size: 12px;
    color: var(--text-secondary);
}

.pperson__when[b-qssvoq5cyc] {
    font-size: 11px;
    color: var(--text-muted);
}

.pperson__actions[b-qssvoq5cyc] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* 32px, not the 24px Density gives a lone row action. These sit adjacent, and
   24px is the bare WCAG 2.5.8 minimum only with clear space around it - the same
   reason the poll builder's icon buttons are 32px. */
.pperson__btn[b-qssvoq5cyc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.pperson__btn:hover:not(:disabled)[b-qssvoq5cyc] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.pperson__btn:active:not(:disabled)[b-qssvoq5cyc] {
    transform: scale(0.98);
}

.pperson__btn:disabled[b-qssvoq5cyc] {
    color: var(--text-muted);
    cursor: not-allowed;
}

.pperson__btn:focus-visible[b-qssvoq5cyc] {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.pperson__fallback[b-qssvoq5cyc] {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--text-secondary);
}

@media (max-width: 44.99rem) {
    .pperson[b-qssvoq5cyc] {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
        padding: var(--space-3);
    }

    .pperson__state[b-qssvoq5cyc] {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    /* Labelled and full-size on touch. An unlabelled icon on a phone is a guess,
       and these two send mail and hand out a credential. */
    .pperson__actions[b-qssvoq5cyc] {
        grid-column: 1 / -1;
        gap: var(--space-2);
    }

    .pperson__btn[b-qssvoq5cyc] {
        flex: 1 1 0;
        justify-content: center;
        height: 40px;
        border-color: var(--border-strong);
        background: var(--bg-surface);
        font-size: 12px;
    }
}
/* /Components/Scheduling/PollAnswerList.razor.rz.scp.css */
/* Geometry from Density's scheduling-poll section: a bordered day group with a
   26px header on --bg-surface-2, option rows on a 4px grid. The answer control
   is the same segmented control the poll builder uses to choose the vote type,
   so the setting and the answer it governs look like the same system. */

.answer-list[b-lc7n7oxntq] {
    display: grid;
    gap: var(--space-3);
}

.answer-list__rule[b-lc7n7oxntq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

/* The poll's own rule, stated before anybody can break it. It is never an error
   colour: the reader has not done anything wrong by reading it. */
.answer-list__ruletag[b-lc7n7oxntq] {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-2);
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.02em;
}

.answer-day[b-lc7n7oxntq] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    overflow: hidden;
}

.answer-day__head[b-lc7n7oxntq] {
    min-height: 26px;
    margin: 0;
    padding: 5px 12px 4px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.answer-day__list[b-lc7n7oxntq] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.answer-slot[b-lc7n7oxntq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    min-height: 38px;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.answer-slot:last-child[b-lc7n7oxntq] {
    border-bottom: 0;
}

.answer-slot--confirmed[b-lc7n7oxntq] {
    background: var(--ok-soft);
}

.answer-slot__when[b-lc7n7oxntq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
}

/* The same instant where it was proposed. It sits inside the time column rather
   than on a row of its own, so a twenty-option poll grows by a line of 11px text
   per row and not by a row. */
.answer-slot__elsewhere[b-lc7n7oxntq] {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--text-muted);
}

.answer-slot__range[b-lc7n7oxntq] {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.answer-slot__badge[b-lc7n7oxntq] {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border: 1px solid var(--ok-border);
    border-radius: var(--radius-sm);
    background: var(--ok-soft);
    color: var(--ok-fg);
    font-size: 10px;
}

.answer-slot__yours[b-lc7n7oxntq] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Full width so it sits under both columns rather than squeezing the control. */
.answer-slot__error[b-lc7n7oxntq] {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 11px;
    color: var(--danger-fg);
    overflow-wrap: anywhere;
}

/* --- The answer control --------------------------------------------------- */

.answer-choice[b-lc7n7oxntq] {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    background: var(--bg-surface-2);
}

.answer-choice__btn[b-lc7n7oxntq] {
    height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--easing-standard),
                color var(--duration-normal) var(--easing-standard);
}

.answer-choice__btn:hover:not(:disabled)[b-lc7n7oxntq] {
    color: var(--text-primary);
}

.answer-choice__btn:active:not(:disabled)[b-lc7n7oxntq] {
    transform: scale(0.98);
}

.answer-choice__btn:disabled[b-lc7n7oxntq] {
    color: var(--text-muted);
    cursor: not-allowed;
}

.answer-choice__btn:focus-visible[b-lc7n7oxntq] {
    outline: 0;
    box-shadow: var(--focus-ring);
}

/* Tone carries the meaning, and the label carries it too - the selected state is
   never colour alone. */
.answer-choice__btn--on.answer-choice__btn--yes[b-lc7n7oxntq] {
    background: var(--ok-fg);
    color: var(--accent-fg);
}

.answer-choice__btn--on.answer-choice__btn--no[b-lc7n7oxntq] {
    background: var(--danger-fg);
    color: var(--accent-fg);
}

.answer-choice__btn--on.answer-choice__btn--none[b-lc7n7oxntq] {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
}

/* Below the 720px swap the row stacks and every target grows to 44px. A 24px
   segment is the bare WCAG 2.5.8 minimum and only with clear space around it;
   these three sit adjacent. */
@media (max-width: 44.99rem) {
    .answer-slot[b-lc7n7oxntq] {
        grid-template-columns: 1fr;
        padding: var(--space-3);
    }

    .answer-choice[b-lc7n7oxntq] {
        width: 100%;
    }

    .answer-choice__btn[b-lc7n7oxntq] {
        flex: 1 1 0;
        height: 40px;
        padding: 0 var(--space-2);
    }
}
/* /Components/Scheduling/PollResultGrid.razor.rz.scp.css */
/* Density's data table (30px head, 32px rows, tabular numerals, bordered not
   shadowed) arranged as a matrix. The reference has no results grid of its own -
   its scheduling-poll section is the creator's option picker and says in so many
   words that results live in a view the file does not contain - so this is
   composed from the table geometry rather than copied from a pattern. */

.vgrid[b-vv0ddu5sdn] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    overflow: hidden;
}

.vgrid__scroll[b-vv0ddu5sdn] {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.vgrid__scroll:focus-visible[b-vv0ddu5sdn] {
    outline: 0;
    box-shadow: inset var(--focus-ring);
}

.vgrid__rail[b-vv0ddu5sdn] {
    display: grid;
    /* --vgrid-slots is set inline: it is data, not design. */
    grid-template-columns: 190px repeat(var(--vgrid-slots), 68px);
    min-width: min-content;
}

.vgrid__cell[b-vv0ddu5sdn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-primary);
}

/* The pinned column must be opaque, or the times slide under the names. */
.vgrid__name[b-vv0ddu5sdn] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
}

.vgrid__who[b-vv0ddu5sdn] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vgrid__name--silent .vgrid__who[b-vv0ddu5sdn] {
    color: var(--text-secondary);
}

.vgrid__head[b-vv0ddu5sdn],
.vgrid__foot[b-vv0ddu5sdn] {
    height: 30px;
    background: var(--bg-surface-2);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.vgrid__head[b-vv0ddu5sdn] {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 42px;
    line-height: 1.25;
}

.vgrid__head.vgrid__name[b-vv0ddu5sdn] {
    align-items: flex-start;
    justify-content: center;
}

.vgrid__day[b-vv0ddu5sdn] {
    font-size: 10px;
    text-transform: uppercase;
}

.vgrid__time[b-vv0ddu5sdn] {
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.vgrid__foot[b-vv0ddu5sdn] {
    border-bottom: 0;
    border-top: 1px solid var(--border-subtle);
}

.vgrid__total[b-vv0ddu5sdn] {
    justify-content: center;
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.vgrid__of[b-vv0ddu5sdn] {
    color: var(--text-muted);
}

.vgrid__vote[b-vv0ddu5sdn] {
    justify-content: center;
    font-size: 13px;
}

.vgrid__vote--yes[b-vv0ddu5sdn] { background: var(--ok-soft); color: var(--ok-fg); }
.vgrid__vote--no[b-vv0ddu5sdn] { background: var(--danger-soft); color: var(--danger-fg); }
.vgrid__vote--none[b-vv0ddu5sdn] { color: var(--text-muted); }

/* The leading column is tinted the whole way down, so the eye can follow it from
   the time at the top to the total at the bottom. */
.vgrid__cell--leading[b-vv0ddu5sdn] { box-shadow: inset 0 0 0 1px var(--accent-border); }
.vgrid__foot.vgrid__cell--leading[b-vv0ddu5sdn] { background: var(--accent-soft); color: var(--accent-primary); }
.vgrid__head.vgrid__cell--leading[b-vv0ddu5sdn] { background: var(--accent-soft); }
.vgrid__cell--confirmed[b-vv0ddu5sdn] { box-shadow: inset 0 0 0 1px var(--ok-border); }
.vgrid__foot.vgrid__cell--confirmed[b-vv0ddu5sdn],
.vgrid__head.vgrid__cell--confirmed[b-vv0ddu5sdn] { background: var(--ok-soft); color: var(--ok-fg); }

/* --- Chips ---------------------------------------------------------------- */

.vgrid__tag[b-vv0ddu5sdn] {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 17px;
    padding: 0 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-2);
    color: var(--text-muted);
    font-size: 10px;
}

.vgrid__tag--warn[b-vv0ddu5sdn] { border-color: var(--warn-border); background: var(--warn-soft); color: var(--warn-fg); }
.vgrid__tag--ok[b-vv0ddu5sdn] { border-color: var(--ok-border); background: var(--ok-soft); color: var(--ok-fg); }
.vgrid__tag--lead[b-vv0ddu5sdn] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-primary); }

/* --- Legend --------------------------------------------------------------- */

.vgrid__legend[b-vv0ddu5sdn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-3) 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

.vgrid__legend span[b-vv0ddu5sdn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vgrid__key[b-vv0ddu5sdn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
}

.vgrid__key--yes[b-vv0ddu5sdn] { background: var(--ok-soft); color: var(--ok-fg); }
.vgrid__key--no[b-vv0ddu5sdn] { background: var(--danger-soft); color: var(--danger-fg); }

.vgrid__legend__gap[b-vv0ddu5sdn] { color: var(--warn-fg); }

/* --- The narrow view ------------------------------------------------------ */

.vcards[b-vv0ddu5sdn] {
    display: none;
    gap: var(--space-2);
}

.vcard[b-vv0ddu5sdn] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-3);
}

.vcard--leading[b-vv0ddu5sdn] {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.vcard__head[b-vv0ddu5sdn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.vcard__when[b-vv0ddu5sdn] {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.vcard__tally[b-vv0ddu5sdn] {
    margin: var(--space-1) 0 var(--space-2);
    font-size: 12px;
    color: var(--text-secondary);
}

.vcard__details summary[b-vv0ddu5sdn] {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    color: var(--accent-link);
    cursor: pointer;
}

.vcard__details summary:focus-visible[b-vv0ddu5sdn] {
    outline: 0;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.vcard__list[b-vv0ddu5sdn] {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    font-size: 12px;
}

.vcard__list dt[b-vv0ddu5sdn] {
    color: var(--text-muted);
    font-size: 11px;
}

.vcard__list dd[b-vv0ddu5sdn] {
    margin: 0;
    overflow-wrap: anywhere;
}

/* 44.99rem is 720px, the width the whole system swaps geometry at. */
@media (max-width: 44.99rem) {
    .vgrid[b-vv0ddu5sdn] { display: none; }
    .vcards[b-vv0ddu5sdn] { display: grid; }
}