/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-8kt02f9pjw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-8kt02f9pjw] {
    flex: 1;
}

.sidebar[b-8kt02f9pjw] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-8kt02f9pjw] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-8kt02f9pjw]  a, .top-row[b-8kt02f9pjw]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-8kt02f9pjw]  a:hover, .top-row[b-8kt02f9pjw]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-8kt02f9pjw]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-8kt02f9pjw] {
        justify-content: space-between;
    }

    .top-row[b-8kt02f9pjw]  a, .top-row[b-8kt02f9pjw]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-8kt02f9pjw] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-8kt02f9pjw] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-8kt02f9pjw]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-8kt02f9pjw], article[b-8kt02f9pjw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-8kt02f9pjw] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 5000;
}

    #blazor-error-ui .dismiss[b-8kt02f9pjw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/Panel.razor.rz.scp.css */
/* The frame every panel shares, and the styles its contents have in common (buttons, fields, the votes stepper,
   errors). The contents come from other components, so those rules reach in with ::deep.
   This file lives in Layout so the style bundle (ordered by path) puts it before Pages and Panels: their own
   rules then win over these where both are equally specific, as they did when everything was in
   Calendar.razor.css. */

/* Over a calendar, a see-through dim (the same as behind an open parts drawer), so the calendar still shows; above
   the bars, the pill and an open day (up to 10003), so they're dimmed with everything else. */
.modal-background[b-3s6u05q96n] {
    width: 100%;
    height: 100%;
    background-color: rgba(10, 6, 20, 0.55);
    z-index: 10004;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* On short screens (a phone on its side) the card scrolls instead of being cut off top and bottom. */
    align-items: safe center;
    overflow-y: auto;
    padding: 1rem 0;
    box-sizing: border-box;
}

    .modal-background.modal-dim[b-3s6u05q96n] {
        animation: panelDim-b-3s6u05q96n 0.15s ease;
    }

    /* Home and joining: no calendar behind them, so the night sky. */
    .modal-background.modal-night-sky[b-3s6u05q96n] {
        background-color: var(--body-background-color);
        background-image: var(--night-sky);
    }

@keyframes panelDim-b-3s6u05q96n {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-background.modal-dim[b-3s6u05q96n] {
        animation: none;
    }
}

    .modal-background .modal-container[b-3s6u05q96n] {
        background-color: var(--card-bg);
        color: var(--card-text);
        opacity: 1;
        width: 30%;
        z-index: 1001;
        border-radius: 30px;
        border: none;
        box-shadow: 0 0 0 2px rgba(166, 120, 175, 0.5), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(166, 120, 175, 0.35);
        display: flex;
        align-items: center;
        flex-direction: column;
        font-family: var(--font-primary);
        padding: 2rem;
        /* For the ✕ in its corner. */
        position: relative;
    }

        /* The ✕: a quiet round icon button in the top-right corner. Four classes deep so it beats the panel's
           full-width button style below. */
        .modal-background .modal-container .panel-close[b-3s6u05q96n] {
            position: absolute;
            top: 12px;
            right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 50%;
            background-color: transparent;
            color: var(--card-text-soft);
            cursor: pointer;
        }

            .modal-background .modal-container .panel-close:hover[b-3s6u05q96n] {
                background-color: color-mix(in srgb, var(--card-text) 10%, transparent);
                color: var(--card-text);
            }

            .modal-background .modal-container .panel-close .material-symbols-rounded[b-3s6u05q96n] {
                font-size: 24px;
            }

        /* The panel itself takes focus when it opens (conjr.focusPanel); its glow already shows where you are. */
        .modal-background .modal-container:focus[b-3s6u05q96n] {
            outline: none;
        }

        .modal-background .modal-container[b-3s6u05q96n]  button {
            width: 100%;
            border-radius: 5px;
            vertical-align: middle;
            margin-top: 10px;
            background-color: var(--primary-button);
            color: white;
            border: none;
            height: 3em;
            position: relative;
        }

            .modal-background .modal-container[b-3s6u05q96n]  button:hover {
                /* --magic-color-hover, but from the theme's button colour. */
                background-color: color-mix(in srgb, var(--primary-button) 80%, grey 20%);
            }

        .modal-background .modal-container[b-3s6u05q96n]  .modal-field {
            text-align: center;
            margin-bottom: 1rem;
        }

            .modal-background .modal-container[b-3s6u05q96n]  .modal-field > label {
                font-size: 0.9em;
            }

            /* Required votes: − and + buttons in the site's button style instead of the browser's tiny arrows. */
            .modal-background .modal-container[b-3s6u05q96n]  .votes-stepper {
                display: flex;
                align-items: stretch;
                gap: 8px;
            }

                .modal-background .modal-container[b-3s6u05q96n]  .votes-stepper .stepper-button {
                    flex: none;
                    width: 3em;
                    height: auto;
                    margin-top: 0;
                    font-size: 1.3rem;
                    line-height: 1;
                }

                    .modal-background .modal-container[b-3s6u05q96n]  .votes-stepper .stepper-button:disabled {
                        background-color: var(--primary-button);
                        opacity: 0.4;
                        cursor: default;
                    }

                .modal-background .modal-container[b-3s6u05q96n]  .votes-stepper input {
                    flex: 1;
                    min-width: 0;
                    -moz-appearance: textfield;
                    appearance: textfield;
                }

                    .modal-background .modal-container[b-3s6u05q96n]  .votes-stepper input::-webkit-inner-spin-button,
                    .modal-background .modal-container[b-3s6u05q96n]  .votes-stepper input::-webkit-outer-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }

        .modal-background .modal-container[b-3s6u05q96n]  .modal-error {
            font-size: 0.8em;
            color: #b3261e;
            margin-top: 0.3em;
        }

        .modal-background .modal-container[b-3s6u05q96n]  .modal-confirm {
            text-align: center;
            margin-top: 1rem;
        }

        .modal-background .modal-container[b-3s6u05q96n]  .modal-secondary {
            background-color: transparent;
            color: var(--secondary-button);
            border: 1px solid var(--secondary-button);
        }

@media only screen and (max-width: 768px) { /* MOBILE */

    .modal-background .modal-container[b-3s6u05q96n] {
        width: 90%;
    }

        /* Gatherings holds cards and the day-part drawers, which need the width more than the panel needs its margin. */
        .modal-background .modal-container.gatherings-panel[b-3s6u05q96n] {
            padding: 1.5rem 1rem;
        }
}

/* Each panel's width (the card is 30% of the window otherwise). On phones max-width takes over. */
/* Settings has had the default 30% width all along (its 420px lost to the card's rule, which came later in
   Calendar.razor.css); kept as it looks today. */
.modal-background .settings-panel[b-3s6u05q96n] {
    max-width: 90%;
}

.modal-background .profile-panel[b-3s6u05q96n] {
    gap: 0.4rem;
    width: 420px;
    max-width: 90%;
}

.modal-background .members-panel[b-3s6u05q96n] {
    width: 400px;
    max-width: 90%;
}

.modal-background .gatherings-panel[b-3s6u05q96n] {
    width: 460px;
    max-width: 90%;
    align-items: stretch;
}

/* Joining and creating share the home panel's width: both open with the mark and wordmark, which need it. */
.modal-background .home-panel[b-3s6u05q96n],
.modal-background .join-panel[b-3s6u05q96n] {
    width: 460px;
    max-width: 90%;
}

.modal-background .confirm-panel[b-3s6u05q96n] {
    width: 380px;
    max-width: 90%;
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/*UPPER BAR*/

.upper-bar[b-kqsksesipk] {
    background-color: var(--magic-color);
    color: var(--button-icon-light);
    z-index: 9999;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    font-family: var(--font-secondary);
    top: 0px;
    padding: 0.4em 0;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    margin-bottom: 8px;
}

    .upper-bar .calendar-heading-container[b-kqsksesipk] {
    }

    .upper-bar .calendar-title-container[b-kqsksesipk] {
        text-align: center;
    }

        .upper-bar .calendar-title-container .title-pill[b-kqsksesipk] {
            font-size: 1.75rem;
        }

/* The calendar's title in a bubble, with the settings cog on its left and share on its right. Desktop shows it in
   the top bar, phones in the bottom bar; the text shortens with "..." when there isn't room. */
.title-pill[b-kqsksesipk] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    font-family: var(--font-secondary);
    line-height: 1.25;
}

    .title-pill .title-pill-text[b-kqsksesipk] {
        min-width: 0;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .title-pill .title-pill-button[b-kqsksesipk] {
        position: relative;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.35em;
        height: 1.35em;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: transparent;
        color: inherit;
        cursor: pointer;
    }

        .title-pill .title-pill-button:hover[b-kqsksesipk] {
            background-color: rgba(255, 255, 255, 0.15);
        }

        /* Material Symbols (index.html), sized with the pill's text. */
        .title-pill .title-pill-button .material-symbols-rounded[b-kqsksesipk] {
            font-size: 0.75em;
        }

    /* "Copied", shown for a moment by conjr.shareChip: under the title pill on desktop (above it on phones). The
   settings panel has its own (Panels/SettingsPanel.razor.css). */
    .title-pill .link-copied[b-kqsksesipk] {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        padding: 0.3em 0.9em;
        border-radius: 12px;
        background-color: var(--magic-color-accent);
        color: #1f1a2e;
        font-family: var(--font-primary);
        font-size: 0.85rem;
        line-height: 1.4;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        display: none;
    }

        .title-pill .link-copied.show[b-kqsksesipk] {
            display: block;
            animation: linkCopied-b-kqsksesipk 1.5s ease forwards;
        }

/* Columns come from the shared calendar grid below; this only sets the text. */
.upper-bar .weekday-heading-row[b-kqsksesipk] {
    font-size: clamp(0.9rem, 1.6vw, 1.4rem);
    line-height: 25px;
    margin-bottom: 10px;
    text-transform: lowercase;
}

    .upper-bar .weekday-heading-row .weekday-heading[b-kqsksesipk] {
        margin: 5px;
        padding: 5px 0;
        display: flex;
        justify-content: center;
        align-self: end;
        overflow: hidden;
        white-space: nowrap;
    }

/* Below ~1500px the calendar reaches the left edge, and the full-size logo (which spans both top-bar rows)
   would cover the "sunday" heading. Keep the same look at two thirds the size (see --logo below), inside the
   title row instead. */
@media only screen and (min-width: 769px) and (max-width: 1500px) {

    .upper-bar .calendar-heading-container[b-kqsksesipk] {
        top: 2px;
        transform: none;
    }
}

/* The "conjr" wordmark's look (outline and glow) is the global .wordmark in app.css, shared with the panels. */

/* In the top bar the wordmark is sized and placed from --logo (set per screen size), so the logo keeps one look at
   every size: the mark a little under --logo across, then a small gap, then the text about 0.66 of --logo tall. */
.upper-bar .calendar-heading-container[b-kqsksesipk] {
    --logo: 75px;
    align-items: center;
}

    .upper-bar .calendar-heading-container .logo-mark[b-kqsksesipk] {
        width: calc(var(--logo) * 0.86);
        margin-right: calc(var(--logo) * 0.14);
    }

    .upper-bar .calendar-heading-container .calendar-heading[b-kqsksesipk] {
        font-size: calc(var(--logo) * 0.66);
        line-height: 1;
        margin: 0;
    }

/* Narrower desktops: two thirds the size, so it fits in the title row (see the block above). Phones set their
   own size below. */
@media only screen and (min-width: 769px) and (max-width: 1500px) {
    .upper-bar .calendar-heading-container[b-kqsksesipk] {
        --logo: 50px;
    }
}

@media only screen and (max-width: 768px) { /* MOBILE */

    /* The top bar takes no height on phones: the logo floats over the left of the pinned month heading,
       and the title lives in the bottom bar. */
    .upper-bar[b-kqsksesipk] {
        height: 0;
        padding: 0;
        margin-bottom: 0;
        box-shadow: none;
    }

        /* The mark and wordmark over the left of the pinned month heading (whose month name is
           right-aligned to make room), sized from --logo like the desktop logo. */
        .upper-bar .calendar-heading-container[b-kqsksesipk] {
            --logo: 44px;
            top: 8px;
            left: 8px;
        }

            .upper-bar .calendar-heading-container .calendar-heading[b-kqsksesipk] {
                display: block;
            }

        .upper-bar .calendar-title-container[b-kqsksesipk] {
            display: none;
        }

        .upper-bar .weekday-heading-row[b-kqsksesipk] {
            display: none;
        }
}

/*CALENDAR*/

/* Desktop: a 7-column grid that shrinks to fit the window. On wide screens each column is the same size as
   the old fixed layout (150px day + borders + margins = 162px); on narrower windows the columns get narrower
   instead of Friday/Saturday being cut off. The weekday headings use the same grid so they line up. */
.calendar-days[b-kqsksesipk],
.upper-bar .weekday-heading-row[b-kqsksesipk] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    max-width: 1150px;
    padding: 0 8px;
    box-sizing: border-box;
    margin: 0 auto;
}

    /* "Show 1 more week / month" under the calendar, centred across the grid and clear of the link chip. */
    .calendar-days .scope-buttons[b-kqsksesipk] {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin: 20px 0 90px;
    }

        .calendar-days .scope-buttons button[b-kqsksesipk] {
            padding: 0.5em 1.3em;
            border: none;
            border-radius: 20px;
            background-color: var(--magic-color);
            color: whitesmoke;
            font-family: var(--font-primary);
            font-size: 1rem;
            box-shadow: 0 0 0 2px var(--magic-color-accent), 0 4px 14px rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }

            .calendar-days .scope-buttons button:hover[b-kqsksesipk] {
                background-color: var(--magic-color-hover);
            }

        .calendar-days .scope-buttons .scope-note[b-kqsksesipk] {
            font-family: var(--font-primary);
            font-size: 0.9rem;
            color: #d9cfee;
        }

    .calendar-days .month-heading[b-kqsksesipk] {
        font-size: 2em;
    }

    .calendar-days .month-heading[b-kqsksesipk] {
        z-index: 10;
        font-family: var(--font-secondary);
        font-size: 40px;
        text-align: center;
        vertical-align: middle;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        background-color: white;
        border-bottom-color: lightgrey !important;
    }

        .calendar-days .month-heading.show-sm-block[b-kqsksesipk] {
            display: none;
        }

/* A drag shouldn't select the day text. */
.calendar-days[b-kqsksesipk] {
    user-select: none;
}

    /* Month colours, for the month headings here and each day's card (CalendarDay.razor), so ::deep. */
    .calendar-days[b-kqsksesipk]  .month-1 {
        /*blue chill*/
        --month-rgb: var(--month-1-color);
    }

    .calendar-days[b-kqsksesipk]  .month-2 {
        /*cranberry*/
        --month-rgb: var(--month-2-color);
    }

    .calendar-days[b-kqsksesipk]  .month-3 {
        /*mocha*/
        --month-rgb: var(--month-3-color);
    }

    .calendar-days[b-kqsksesipk]  .month-4 {
        /*toolbox*/
        --month-rgb: var(--month-4-color);
    }

    .calendar-days[b-kqsksesipk]  .month-5 {
        /*medium sea green*/
        --month-rgb: var(--month-5-color);
    }

    .calendar-days[b-kqsksesipk]  .month-6 {
        /*casal*/
        --month-rgb: var(--month-6-color);
    }

    .calendar-days[b-kqsksesipk]  .month-7 {
        /*fire engine red*/
        --month-rgb: var(--month-7-color);
    }

    .calendar-days[b-kqsksesipk]  .month-8 {
        /*mikado yellow*/
        --month-rgb: var(--month-8-color);
    }

    .calendar-days[b-kqsksesipk]  .month-9 {
        /*norther lights blue*/
        --month-rgb: var(--month-9-color);
    }

    .calendar-days[b-kqsksesipk]  .month-10 {
        /*pumpkin orange*/
        --month-rgb: var(--month-10-color);
    }

    .calendar-days[b-kqsksesipk]  .month-11 {
        /*murky green*/
        --month-rgb: var(--month-11-color);
    }

    .calendar-days[b-kqsksesipk]  .month-12 {
        /*black cow*/
        --month-rgb: var(--month-12-color);
    }

@media only screen and (max-width: 768px) { /* MOBILE */

    [b-kqsksesipk] .content {
        padding-top: 0;
    }

    /* Phones: one day per row, as before the desktop grid. */
    .calendar-days[b-kqsksesipk] {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: none;
        padding: 0;
    }

    /* The shared desktop grid rule above would otherwise show the weekday names on phones. */
    .upper-bar .weekday-heading-row[b-kqsksesipk] {
        display: none;
    }


    .calendar-days .month-heading[b-kqsksesipk] {
        position: sticky;
        /* The phone top bar has no height, so the heading pins to the very top. */
        top: 0;
        display: flex;
        justify-content: center;
        align-items: end;
        background-color: var(--magic-color);
        color: whitesmoke;
        border-bottom: 3px solid var(--magic-color-accent) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        /* With the days' own 4px, this leaves 10px above and below the heading (margins add up here). */
        margin: 6px 0;
    }

        /* The first heading sits flush at the top of the screen. Hidden past days come before it, so
               :first-child doesn't match; this picks the first heading among its siblings instead. */
        .calendar-days .month-heading:not(.month-heading ~ .month-heading)[b-kqsksesipk] {
            margin-top: 0;
        }


        .calendar-days .month-heading.show-sm-block[b-kqsksesipk] {
            display: block;
            width: 100%;
            /* Right-aligned, leaving the left for the mark and wordmark. Smaller on narrow phones so
               "September" still clears them. */
            text-align: right;
            padding-right: 16px;
            box-sizing: border-box;
            font-size: clamp(28px, 9.4vw, 40px);
        }


    /* Below the last day, with room left for the bottom bar and the chances-to-meet pill above it. */
    .calendar-days .scope-buttons[b-kqsksesipk] {
        width: 100%;
        margin: 16px 8px 150px;
    }

        /* A little smaller, so both fit side by side on a phone. */
        .calendar-days .scope-buttons button[b-kqsksesipk] {
            padding: 0.5em 1em;
            font-size: 0.9rem;
        }

}


/* PANELS: the frame, its width and the shared button, field and stepper styles are in
   Layout/Panel.razor.css; the mark and wordmark at the top in Shared/PanelHeader.razor.css; the join and
   creation panel in Panels/JoinPanel.razor.css. These are the home panel's contents, drawn here. */

/*BOTTOM BAR: phones only (see the mobile block below). Desktop shows the title and badge in the top bar, and
  a new calendar starts from "Your calendars" (the logo).*/

.button-container[b-kqsksesipk] {
    display: none;
}

@keyframes linkCopied-b-kqsksesipk {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*TIME ZONE NOTE*/

/*SAVE ERROR: the bubble near the bottom (.save-error) is global, in app.css, since the home panel uses it too.*/

@media only screen and (max-width: 768px) { /* MOBILE */

    /* Bottom bar: the title pill stretched across, and the account badge on the right. */
    .button-container[b-kqsksesipk] {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        z-index: 10000;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 12px;
        /* viewport-fit=cover (index.html) lets phones draw the page under the gesture bar; the bar's colour
           runs under it while the buttons stay above it. */
        padding: 6px 16px calc(8px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        background-color: var(--magic-color);
        color: var(--button-icon-light);
        /* Matches the pinned month heading at the top: an accent edge and a shadow. */
        border-top: 3px solid var(--magic-color-accent);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35);
    }

        .button-container .bottom-bar-title[b-kqsksesipk] {
            display: block;
            grid-column: 1;
            grid-row: 1;
            align-self: center;
            min-width: 0;
        }

            /* Fills the bar up to the badge, with the title centred between the cog and share. */
            .button-container .bottom-bar-title .title-pill[b-kqsksesipk] {
                display: flex;
                width: 100%;
                font-size: 1.3rem;
                padding: 4px 6px;
            }

                .button-container .bottom-bar-title .title-pill .title-pill-text[b-kqsksesipk] {
                    flex: 1;
                    text-align: center;
                }

                /* Bigger icons and tap targets than on desktop. */
                .button-container .bottom-bar-title .title-pill .title-pill-button[b-kqsksesipk] {
                    width: 40px;
                    height: 40px;
                }

                    .button-container .bottom-bar-title .title-pill .title-pill-button .material-symbols-rounded[b-kqsksesipk] {
                        font-size: 26px;
                    }

                /* The bar is at the bottom of the screen, so "Copied" shows above the pill. */
                .button-container .bottom-bar-title .title-pill .link-copied[b-kqsksesipk] {
                    top: auto;
                    bottom: calc(100% + 10px);
                }

        .button-container[b-kqsksesipk]  .account-menu--bottom {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
        }
}

/*GATHERINGS AND MEMBERS: a gold pill floating centred at the bottom, on every screen size, with two buttons split by a
  thin line. Gatherings (locked in, summoning, ready to lock and getting close) opens Panels/GatheringsPanel.razor,
  whose list has its own styles in Panels/GatheringsList.razor.css; Members opens Panels/MembersPanel.razor.*/
.sessions-pill[b-kqsksesipk] {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    white-space: nowrap;
    z-index: 2001;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 22px;
    background-color: var(--gold);
    color: #3a2a05;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

    .sessions-pill .pill-button[b-kqsksesipk] {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding: 0.35em 0.9em;
        border: none;
        border-radius: 19px;
        background: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

        .sessions-pill .pill-button:first-child[b-kqsksesipk] {
            overflow: hidden;
        }

        .sessions-pill .pill-button:hover[b-kqsksesipk] {
            background-color: rgba(58, 42, 5, 0.12);
        }

        .sessions-pill .pill-button:focus-visible[b-kqsksesipk] {
            outline: 2px solid #3a2a05;
            outline-offset: -2px;
        }

    .sessions-pill svg[b-kqsksesipk] {
        flex: none;
        width: 1em;
        height: 1em;
    }

    .sessions-pill .pill-divider[b-kqsksesipk] {
        flex: none;
        width: 1px;
        align-self: stretch;
        margin: 6px 0;
        background-color: rgba(58, 42, 5, 0.3);
    }

    .sessions-pill .members-button[b-kqsksesipk] {
        flex: none;
    }

        .sessions-pill .members-button .material-symbols-rounded[b-kqsksesipk] {
            font-size: 1.25em;
        }

        /* The count in a darker bubble, as Trello shows it. */
        .sessions-pill .members-count[b-kqsksesipk] {
            min-width: 1.5em;
            padding: 0 0.4em;
            box-sizing: border-box;
            border-radius: 999px;
            background-color: rgba(58, 42, 5, 0.16);
            font-size: 0.8rem;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
        }

/* Phones: Members keeps its icon and count, so the Gatherings summary keeps its room. */
@media only screen and (max-width: 480px) {
    .sessions-pill .members-word[b-kqsksesipk] {
        display: none;
    }
}

/* Very narrow phones: the pill keeps its first two groups ("1 locked in · 2 ready"). */
@media only screen and (max-width: 360px) {
    .sessions-pill .pill-part:nth-of-type(n+3)[b-kqsksesipk] {
        display: none;
    }
}

@media only screen and (max-width: 768px) { /* MOBILE */

    /* Just above the bottom bar. */
    .sessions-pill[b-kqsksesipk] {
        bottom: 92px;
    }
}

/* The logo in the top bar links home; it shouldn't look like a text link. */
.upper-bar .calendar-heading-container[b-kqsksesipk] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/*HOME: the home panel's styles are in Panels/HomePanel.razor.css.*/

/* Phones' "Tap another day ... · Cancel" while a range waits for its other end. */
.range-banner[b-kqsksesipk] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
}

    .range-banner button[b-kqsksesipk] {
        padding: 0.1em 0.8em;
        border: none;
        border-radius: 12px;
        background-color: var(--magic-color-accent);
        color: #1f1a2e;
        font-family: inherit;
        cursor: pointer;
    }


/* While a drawer is open everything else dims, bars included (they sit at 9999 to 10000), so the day and its drawer
   stand out; tapping or clicking the dim closes it. The open day is lifted above the dim (.parts-open, in
   CalendarDay.razor.css). */
.calendar-days .day-parts-backdrop[b-kqsksesipk] {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background-color: rgba(10, 6, 20, 0.55);
    animation: partsDim-b-kqsksesipk 0.15s ease;
}


@keyframes partsDim-b-kqsksesipk {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-days .day-parts-backdrop[b-kqsksesipk] {
        animation: none;
    }
}

/* /Components/Pages/CalendarDay.razor.rz.scp.css */
/* One day's card (CalendarDay.razor): its look in each state, the voters, your mark, the lock and the parts arrow
   and strip. The grid, the month headings and their colours (.month-N), and the dim behind an open drawer are in
   Calendar.razor.css; the drawer itself in DayPartsDrawer.razor.css. */

/* Month colours (--month-rgb, set by the .month-N rules in Calendar.razor.css) are not used for now. */
.calendar-days .calendar-day[b-2pwe7w23mb] {
    font-family: var(--font-primary);
    /* Warmer (more lavender) the closer a day is to its vote target; --heat is 0 to 1, set per day. */
    background-color: color-mix(in srgb, var(--card-bg), var(--magic-color-accent) calc(var(--heat, 0) * 22%));
    height: 130px;
    /* None in light mode; a soft edge in dark mode (app.css). Voted, agreed and past days hide it with a
           transparent colour rather than removing it, so a vote never changes a card's height. */
    border: var(--day-border);
    border-radius: 10px;
    margin: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.3s ease;
    display: flex;
    align-content: end;
    align-items: end;
    flex-direction: column;
    /* 30px on wide screens, smaller as the columns narrow so "november 1" still fits. */
    font-size: clamp(22px, 2.5vw, 30px);
    position: relative;
    /* Not clipped, so the round lock can sit over the edge; .day-clip clips what must stay inside. */
    overflow: visible;
    box-sizing: content-box;
}

    /* The card's shape, clipping the blocked glow. Clicks pass through to the day. */
    .calendar-days .calendar-day .day-clip[b-2pwe7w23mb] {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: inherit;
        pointer-events: none;
    }

/* Hover just deepens a plain tile's shadow (no lift), and only with a real mouse: touch browsers keep the
           last-tapped tile in :hover, and a hover box-shadow would replace the agreed or locked outline. */
@media (hover: hover) and (pointer: fine) {
    .calendar-days .calendar-day:not(.non-day):not(.voted):not(.agreed):not(.locked):hover[b-2pwe7w23mb] {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
}

/* Past days fade into the background so the eye goes to days you can still pick. */
.calendar-days .calendar-day.non-day[b-2pwe7w23mb] {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

/* Someone can't make it: a faint red glow rising from the bottom, the same whoever it is. Inside .day-clip,
           so it follows the card's rounded corners. */
.calendar-days .calendar-day.blocked .day-clip[b-2pwe7w23mb]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--block-glow), transparent 25%);
    pointer-events: none;
    z-index: 0;
}

/* Your vote: a stronger purple ring and glow, and a deeper lavender card. */
.calendar-days .calendar-day.voted[b-2pwe7w23mb] {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--card-bg), var(--magic-color-accent) calc(14% + var(--heat, 0) * 18%));
    /*box-shadow: 0 0 0 3px var(--magic-color-accent), 0 0 10px 4px rgba(166, 120, 175, 0.71);*/
}

/* While dragging across days with the mouse (conjr.js): the days about to get your vote are outlined, the
           days about to lose it fade. Nothing is saved until the button is let go. */
.calendar-days .calendar-day.drag-mark[b-2pwe7w23mb] {
    outline: 3px dashed var(--magic-color-accent);
    outline-offset: 3px;
}

.calendar-days .calendar-day.drag-clear[b-2pwe7w23mb] {
    opacity: 0.5;
}

/* A drag that started on the block icon: the days about to be blocked. A phone's range start uses the same
           outlines while it waits for the other end. */
.calendar-days .calendar-day.drag-block[b-2pwe7w23mb],
.calendar-days .calendar-day.range-start-block[b-2pwe7w23mb] {
    outline: 3px dashed var(--block);
    outline-offset: 3px;
}

.calendar-days .calendar-day.range-start[b-2pwe7w23mb] {
    outline: 3px dashed var(--magic-color-accent);
    outline-offset: 3px;
}

/* Phones: the day whose long-press menu is open. */
.calendar-days .calendar-day.menu-day[b-2pwe7w23mb] {
    outline: 3px solid var(--magic-color-accent);
    outline-offset: 3px;
}

/* Phones: holding a day opens its menu (conjr.dayPress), not the browser's copy / look-up callout. */
.calendar-days .calendar-day[b-2pwe7w23mb] {
    -webkit-touch-callout: none;
}

    /* Reached the vote target: an accent outline, ready to lock in. Gold is kept for days the group has locked in
           (even if votes drop later). */
    .calendar-days .calendar-day.agreed[b-2pwe7w23mb] {
        border-color: transparent;
        box-shadow: 0 0 0 1px var(--magic-color-accent), 0 0 6px 1px var(--magic-color-accent);
    }

    .calendar-days .calendar-day.locked[b-2pwe7w23mb] {
        border-color: transparent;
        background-color: var(--agreed-bg);
        box-shadow: 0 0 0 1px var(--gold), 0 0 6px 1px rgba(244, 194, 91, 0.7);
    }

    .calendar-days .calendar-day .calendar-day-weekday[b-2pwe7w23mb] {
        display: none;
    }


    .calendar-days .calendar-day .day-button[b-2pwe7w23mb] {
        /* Above the blocked glow. */
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--card-text);
    }

    .calendar-days .calendar-day .calendar-day-text[b-2pwe7w23mb] {
        position: absolute;
        right: 10px;
        top: 5px;
        line-height: 1em;
    }

        .calendar-days .calendar-day .calendar-day-text .day-month[b-2pwe7w23mb] {
            font-size: 0.6em;
            display: inline-block;
            margin-right: 4px;
            font-family: var(--font-calendar-day-number);
            text-transform: lowercase;
        }

        .calendar-days .calendar-day .calendar-day-text .calendar-day-number[b-2pwe7w23mb] {
            font-size: 0.8em;
            font-family: var(--font-calendar-day-number);
        }

    /* Who voted: a row of overlapping initials bubbles (WhoFaces), centred near the bottom of the card. One button
       that opens the day's drawers, names first. Above your mark's icons, so it gets the tap. */
    .calendar-days .calendar-day .vote-count[b-2pwe7w23mb] {
        --face-size: 26px;
        --face-font: 13px;
        --face-ring: var(--card-bg);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 8px;
        display: flex;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: none;
        font-family: var(--font-primary);
        cursor: pointer;
        z-index: 4;
    }

/* Desktop: the bubbles stack down the day's left edge, opposite the offered block, leaving the bottom for
           the parts arrow and strip. */
@media only screen and (min-width: 769px) {
    .calendar-days .calendar-day .vote-count[b-2pwe7w23mb] {
        left: 8px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

        .calendar-days .calendar-day .vote-count[b-2pwe7w23mb]  .who-faces {
            flex-direction: column;
        }

        .calendar-days .calendar-day .vote-count[b-2pwe7w23mb]  .who-face {
            margin-left: 0;
            margin-top: -7px;
        }

            .calendar-days .calendar-day .vote-count[b-2pwe7w23mb]  .who-face:first-child {
                margin-top: 0;
            }
}

/* YOUR MARK: the check (I can) or block (I can't) icon in the middle of the day. Only your own mark shows; with a
   mouse, hovering an unmarked day (or tabbing into it with the keyboard) offers both. The check, the usual choice,
   stays centred; a small block waits by the day's right edge. The layer covers the day, but clicks on the space
   around the icons fall through to it. Above the day's link (z-index 1), under the open voter list (3). */
.calendar-days .calendar-day .day-marks[b-2pwe7w23mb] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    .calendar-days .calendar-day .day-marks .day-mark[b-2pwe7w23mb] {
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        background: none;
        color: var(--magic-color-accent);
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
    }


    .calendar-days .calendar-day.locked .day-marks .day-mark-yes[b-2pwe7w23mb] {
        color: var(--gold);
    }

    .calendar-days .calendar-day .day-marks .day-mark .material-symbols-rounded[b-2pwe7w23mb] {
        font-size: 30px;
    }
    /* The check glyph is drawn smaller than the block circle; this evens them out. */
    .calendar-days .calendar-day .day-marks .day-mark-yes .material-symbols-rounded[b-2pwe7w23mb] {
        font-size: 42px;
    }
    /* Offered by the day's right edge, small. */
    .calendar-days .calendar-day .day-marks .day-mark-no[b-2pwe7w23mb] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--block);
    }

        .calendar-days .calendar-day .day-marks .day-mark-no .material-symbols-rounded[b-2pwe7w23mb] {
            font-size: 18px;
        }
    /* Your mark: centred, full size. */
    .calendar-days .calendar-day .day-marks.mine-no .day-mark-no[b-2pwe7w23mb] {
        position: static;
        transform: none;
    }

        .calendar-days .calendar-day .day-marks.mine-no .day-mark-no .material-symbols-rounded[b-2pwe7w23mb] {
            font-size: 36px;
        }

    .calendar-days .calendar-day .day-marks.mine-yes .day-mark-yes[b-2pwe7w23mb],
    .calendar-days .calendar-day .day-marks.mine-no .day-mark-no[b-2pwe7w23mb] {
        display: flex;
    }
    /* The choice of both only shows on a day without your mark: once it's checked or blocked, you take that off first
   (by clicking it, or the day for a ✓) to get the choice back. */
    @media (hover: hover) and (pointer: fine) {

        .calendar-days .calendar-day:hover .day-marks:not(.mine-yes):not(.mine-no) .day-mark[b-2pwe7w23mb] {
            display: flex;
        }

        /* Separate from :hover, so a browser without :has() still gets the rule above. */
        .calendar-days .calendar-day:has(:focus-visible) .day-marks:not(.mine-yes):not(.mine-no) .day-mark[b-2pwe7w23mb] {
            display: flex;
        }
        /* While dragging across days (day-dragging on <html>, from conjr.dayDrag), only the dotted outlines show:
       the days passed over don't offer the icons. */
        .day-dragging .calendar-days .calendar-day:hover .day-marks:not(.mine-yes):not(.mine-no) .day-mark[b-2pwe7w23mb] {
            display: none;
        }
        /* Grey until pointed at: then the check turns the accent purple and the block red. */
        .calendar-days .calendar-day .day-marks .day-mark[aria-pressed="false"][b-2pwe7w23mb] {
            color: lightgrey;
        }

        .calendar-days .calendar-day .day-marks .day-mark-yes[aria-pressed="false"]:hover[b-2pwe7w23mb] {
            color: var(--magic-color-accent);
        }

        .calendar-days .calendar-day .day-marks .day-mark-no[aria-pressed="false"]:hover[b-2pwe7w23mb] {
            color: var(--block);
        }
    }

    @media only screen and (max-width: 768px) { /* MOBILE */

        .calendar-days .calendar-day[b-2pwe7w23mb] {
            font-size: 30px;
        }
        /* A month starting on a Saturday or Monday: the heading already separates it, so no weekend gap. */
        .calendar-days .month-heading + .calendar-day.gap-before[b-2pwe7w23mb] {
            margin-top: 4px;
        }
        /* Compact rows: date and weekday on the left, voters on the right. */
        .calendar-days .calendar-day[b-2pwe7w23mb] {
            width: calc(100% - 16px);
            height: 64px;
            margin: 4px 8px;
        }

            .calendar-days .calendar-day.gap-before[b-2pwe7w23mb] {
                margin-top: 16px;
            }

        @media(hover:hover) and (pointer:fine) {
            .calendar-days .calendar-day:not(.non-day):hover[b-2pwe7w23mb] {
                transform: none;
            }
        }
        /* "Wed" above the day number, both clear of the round lock on the left edge. The pair is centred in
               the row: 13px weekday, 2px gap, 34px number. */
        .calendar-days .calendar-day .calendar-day-weekday[b-2pwe7w23mb] {
            display: inline;
            position: absolute;
            left: 38px;
            top: calc(50% - 25px);
            font-size: 13px;
            line-height: 1;
            color: var(--card-text-soft);
        }

        .calendar-days .calendar-day.non-day[b-2pwe7w23mb] {
            display: none;
        }

        .calendar-days .calendar-day .day-button .calendar-day-text[b-2pwe7w23mb] {
            position: absolute;
            left: 38px;
            top: calc(50% - 10px);
            right: auto;
            line-height: 1;
        }

            .calendar-days .calendar-day .day-button .calendar-day-text .day-month[b-2pwe7w23mb] {
                display: none;
            }

        .calendar-days .calendar-day .day-button .calendar-day-number[b-2pwe7w23mb] {
            font-size: 34px;
        }

        .calendar-days .calendar-day .vote-count[b-2pwe7w23mb] {
            --face-size: 30px;
            --face-font: 14px;
            left: 80px;
            right: auto;
            bottom: auto;
            top: 50%;
            transform: translateY(-50%);
        }

        .calendar-days .calendar-day .day-marks .day-mark .material-symbols-rounded[b-2pwe7w23mb] {
            font-size: 24px;
        }

        .calendar-days .calendar-day .day-marks .day-mark-yes .material-symbols-rounded[b-2pwe7w23mb] {
            font-size: 34px;
        }

        .calendar-days .calendar-day .day-marks.mine-no .day-mark-no .material-symbols-rounded[b-2pwe7w23mb] {
            font-size: 29px;
        }
    }
    /* The badges: what's going on with the day, in a row across the top edge, half on and half off it, like the time dots on
   a part (docs/vision.md, "The day as the command centre"). A gold lock for each thing locked on the day (the day, or a
   part or time in it), a sparkle while it's being summoned, an open lock while something on it is ready to lock. On
   phones they run down the left edge instead. Any of them opens the day's drawers. Above the day's link and the open
   voter list. */
    .calendar-days .calendar-day .day-badges[b-2pwe7w23mb] {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
        display: flex;
        gap: 4px;
    }

        .calendar-days .calendar-day .day-badges .day-badge[b-2pwe7w23mb] {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: 2px solid var(--gold);
            border-radius: 50%;
            background-color: var(--card-bg);
            color: var(--card-text);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

            .calendar-days .calendar-day .day-badges .day-badge .material-symbols-rounded[b-2pwe7w23mb] {
                font-size: 16px;
            }
            /* Locked: filled gold, to read as done. */
            .calendar-days .calendar-day .day-badges .day-badge.badge-locked[b-2pwe7w23mb] {
                background-color: var(--gold);
                color: #3a2a05;
            }

                .calendar-days .calendar-day .day-badges .day-badge.badge-locked .material-symbols-rounded[b-2pwe7w23mb] {
                    font-variation-settings: 'FILL' 1;
                }
    /* Ready: the summoning's purple circle with a still gold glow (app.css, --ready-glow), an offer rather than a fact. */
            .calendar-days .calendar-day .day-badges .day-badge.badge-ready[b-2pwe7w23mb] {
                border-color: var(--magic-color-accent);
                background-color: var(--magic-color);
                color: #f1e3f5;
                box-shadow: var(--ready-glow);
            }

    @media (hover:hover) and (pointer: fine) {
        .calendar-days .calendar-day .day-badges .day-badge.badge-ready:hover[b-2pwe7w23mb] {
            box-shadow: var(--ready-glow-hover);
        }
    }
    /* Being summoned: the accent, not gold (it isn't locked in until everyone's good to go), with the glint running round
       it (app.css, SUMMONING GLINT) and the sparkle lighting up as it passes. Days start at different points, so several
       summonings don't flash together. */
    .calendar-days .calendar-day .day-badges .day-badge.badge-summoning[b-2pwe7w23mb] {
        --summon-ring: conic-gradient(from var(--summon-angle), transparent 0 40%, var(--summon-glint) 85%, var(--summon-glint-tip) 93%, transparent 98%);
        position: relative;
        isolation: isolate;
        border-color: transparent;
        background: none;
        color: #f1e3f5;
        box-shadow: 0 0 10px 1px var(--glow);
        text-shadow: 0 0 6px var(--summon-glint), 0 0 2px var(--summon-glint);
        animation: summonGlint var(--summon-glint-cycle) linear infinite;
    }

        /* The badge draws nothing itself: the glow is ::before, and the ring with the fill is ::after, over it, so only
           the glow past the edge shows. */
        .calendar-days .calendar-day .day-badges .day-badge.badge-summoning[b-2pwe7w23mb]::before,
        .calendar-days .calendar-day .day-badges .day-badge.badge-summoning[b-2pwe7w23mb]::after {
            content: "";
            position: absolute;
            z-index: -1;
            border-radius: 50%;
            pointer-events: none;
        }

        .calendar-days .calendar-day .day-badges .day-badge.badge-summoning[b-2pwe7w23mb]::before {
            inset: -4px;
            background: var(--summon-ring);
            filter: blur(5px);
        }

        .calendar-days .calendar-day .day-badges .day-badge.badge-summoning[b-2pwe7w23mb]::after {
            inset: -2px;
            border: 2px solid transparent;
            background: linear-gradient(var(--magic-color), var(--magic-color)) padding-box, var(--summon-ring) border-box, linear-gradient(var(--magic-color-accent), var(--magic-color-accent)) border-box;
        }

    .calendar-days .calendar-day:nth-child(3n+2) .day-badges .day-badge.badge-summoning[b-2pwe7w23mb] {
        animation-delay: calc(var(--summon-glint-cycle) * -0.4);
    }

    .calendar-days .calendar-day:nth-child(3n) .day-badges .day-badge.badge-summoning[b-2pwe7w23mb] {
        animation-delay: calc(var(--summon-glint-cycle) * -0.7);
    }

    @media (prefers-reduced-motion: reduce) {
        .calendar-days .calendar-day .day-badges .day-badge.badge-summoning[b-2pwe7w23mb] {
            animation: none;
        }
    }

    @media only screen and (max-width: 768px) { /* MOBILE */
        /* Rows: down the left edge, centred top to bottom. The card is only 8px from the screen edge, so just 6px of them
       hangs outside; the weekday and number start after them (38px). */
        .calendar-days .calendar-day .day-badges[b-2pwe7w23mb] {
            top: 50%;
            left: -6px;
            flex-direction: column;
            gap: 2px;
            transform: translateY(-50%);
        }

            .calendar-days .calendar-day .day-badges .day-badge[b-2pwe7w23mb] {
                width: 24px;
                height: 24px;
            }

                .calendar-days .calendar-day .day-badges .day-badge .material-symbols-rounded[b-2pwe7w23mb] {
                    font-size: 14px;
                }
    }
    /*DAY PARTS (docs/vision.md, item 6): the arrow that opens a day's parts drawer, the strip of part icons on days
  where anyone has marked a part. The dim behind an open drawer is in Calendar.razor.css; the drawer itself is
  DayPartsDrawer.razor(.css): it floats just under the day, over the days below.*/

    .calendar-days .calendar-day .day-parts-toggle[b-2pwe7w23mb] {
        position: absolute;
        left: 50%;
        bottom: 1px;
        transform: translateX(-50%);
        z-index: 3;
        display: none;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 22px;
        padding: 0;
        border: none;
        background: none;
        color: var(--card-text-soft);
        cursor: pointer;
    }

        .calendar-days .calendar-day .day-parts-toggle .material-symbols-rounded[b-2pwe7w23mb] {
            font-size: 24px;
            transition: transform 0.15s ease;
        }

    .calendar-days .calendar-day.parts-open .day-parts-toggle .material-symbols-rounded[b-2pwe7w23mb] {
        transform: rotate(180deg);
    }
    /* With a mouse the arrow shows on hover (and while open). Once the strip is there, it opens the drawer instead. */
    @media (hover: hover) and (pointer: fine) {
        .calendar-days .calendar-day:not(.has-parts):hover .day-parts-toggle[b-2pwe7w23mb],
        .calendar-days .calendar-day:not(.has-parts):has(:focus-visible) .day-parts-toggle[b-2pwe7w23mb],
        .calendar-days .calendar-day.parts-open:not(.has-parts) .day-parts-toggle[b-2pwe7w23mb] {
            display: flex;
        }

        .day-dragging .calendar-days .calendar-day:hover .day-parts-toggle[b-2pwe7w23mb] {
            display: none;
        }
    }

    .calendar-days .calendar-day .day-parts-strip[b-2pwe7w23mb] {
        position: absolute;
        left: 50%;
        bottom: 6px;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        gap: 2px;
        padding: 2px;
        border: none;
        border-radius: 8px;
        background: none;
        cursor: pointer;
    }

    @media (hover:hover) and (pointer:fine) {
        .calendar-days .calendar-day .day-parts-strip:hover[b-2pwe7w23mb] {
            background-color: color-mix(in srgb, var(--card-text) 8%, transparent);
        }
    }

    .calendar-days .calendar-day .strip-part[b-2pwe7w23mb] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 24px;
        border-radius: 6px;
        color: color-mix(in srgb, var(--card-text-soft) 55%, transparent);
        /* The dots for times inside a part (PartDots.razor), small here: three must fit across. */
        --dot-size: 5px;
    }

        .calendar-days .calendar-day .strip-part .material-symbols-rounded[b-2pwe7w23mb] {
            font-size: 19px;
        }
    /* A part's state, the same in the strip and the drawer, following the day's rules: lavender once anyone is in (one
   shade, the day's fullest warmth), a deeper lavender for your ✓, an accent outline once agreed, gold once locked,
   and a faint red rising from the bottom when anyone else can't. Only your own marks colour the icon: your ✓ in the
   accent (gold once locked), your ✗ in red; otherwise it keeps the plain part's colour. ::deep reaches the drawer's parts
   (DayPartsDrawer.razor), which is drawn inside the day. */
    .calendar-days .calendar-day[b-2pwe7w23mb]  .part-heat {
        background-color: color-mix(in srgb, var(--magic-color-accent) 22%, transparent);
    }
    /* The same outline and soft glow as an agreed day. */
    .calendar-days .calendar-day[b-2pwe7w23mb]  .part-agreed {
        box-shadow: inset 0 0 0 1px var(--magic-color-accent), 0 0 6px 1px var(--magic-color-accent);
    }

    .calendar-days .calendar-day[b-2pwe7w23mb]  .part-mine-yes {
        color: var(--magic-color-accent);
        background-color: color-mix(in srgb, var(--magic-color-accent) 32%, transparent);
    }

    .calendar-days .calendar-day[b-2pwe7w23mb]  .part-mine-no {
        color: var(--block);
        background-color: color-mix(in srgb, var(--block) 14%, transparent);
    }

    .calendar-days .calendar-day[b-2pwe7w23mb]  .part-locked {
        background-color: color-mix(in srgb, var(--gold) 18%, transparent);
        box-shadow: inset 0 0 0 1px var(--gold);
    }

        .calendar-days .calendar-day[b-2pwe7w23mb]  .part-locked.part-mine-yes {
            color: var(--gold);
        }

    .calendar-days .calendar-day[b-2pwe7w23mb]  .part-blocked {
        background-image: linear-gradient(to top, var(--block-glow), transparent 70%);
    }

    .calendar-days .calendar-day.parts-open[b-2pwe7w23mb] {
        z-index: 10003;
    }

    @media only screen and (max-width: 768px) { /* MOBILE */
        /* The arrow sits at the row's right edge, its whole height the tap target. Once the strip shows, the strip takes
       its place (and opens the drawer), as on desktop. */
        .calendar-days .calendar-day:not(.has-parts) .day-parts-toggle[b-2pwe7w23mb] {
            display: flex;
        }

        .calendar-days .calendar-day .day-parts-toggle[b-2pwe7w23mb] {
            left: auto;
            right: 0;
            top: 0;
            bottom: 0;
            width: 40px;
            height: auto;
            transform: none;
            color: color-mix(in srgb, var(--card-text-soft) 75%, transparent);
        }
        /* In the arrow's place at the right edge. */
        .calendar-days .calendar-day .day-parts-strip[b-2pwe7w23mb] {
            left: auto;
            right: 10px;
            bottom: auto;
            top: 50%;
            transform: translateY(-50%);
        }

        .calendar-days .calendar-day .strip-part[b-2pwe7w23mb] {
            width: 30px;
            height: 28px;
        }

            .calendar-days .calendar-day .strip-part .material-symbols-rounded[b-2pwe7w23mb] {
                font-size: 21px;
            }
    }
/* /Components/Pages/DayDetailsDrawer.razor.rz.scp.css */
/* What's happening on a day, opened with its parts drawer (docs/vision.md, "The day as the command centre"). Floating
   above the day on desktop; at the top of the parts drawer on phones, and on desktop when there's no room above (the
   page marks the day data-details-flip; DayPartsDrawer.razor.css shows the inline one). */

.dynamic-row-wrapper[b-55gndp0bp4] {
    display: grid;
    grid-template-rows: 0fr;
    animation: expandRow-b-55gndp0bp4 0.4s ease-out forwards;
}

.dynamic-row-content[b-55gndp0bp4] {
    overflow: hidden;
}

/* 2. The actual content inside the row fades in */
.dynamic-row-inner[b-55gndp0bp4] {
    opacity: 0;
    animation: fadeIn-b-55gndp0bp4 0.3s ease-in 0.2s forwards; /* Delays slightly until expansion finishes */
}

/* --- Animations --- */
@keyframes expandRow-b-55gndp0bp4 {
    to {
        grid-template-rows: 1fr;
    }
}

@keyframes fadeIn-b-55gndp0bp4 {
    to {
        opacity: 1;
    }
}

.day-details[b-55gndp0bp4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--card-text);
    font-family: var(--font-primary);
    font-size: 14px;
    text-align: left;
    cursor: default;
    box-sizing: border-box;
    overflow: hidden;
}

    .day-details.floating[b-55gndp0bp4] {
        position: absolute;
        bottom: calc(100% + 20px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 60;
        width: 340px;
        max-height: 60vh;
        overflow-y: auto;
        padding: 10px;
        border-radius: 12px;
        background-color: var(--card-bg);
        border: 1px solid color-mix(in srgb, var(--magic-color-accent) 35%, transparent);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        animation: detailsIn-b-55gndp0bp4 0.18s ease both;
    }

        .day-details.floating.edge-start[b-55gndp0bp4] {
            left: -6px;
            transform: none;
        }

        .day-details.floating.edge-end[b-55gndp0bp4] {
            left: auto;
            right: -6px;
            transform: none;
        }

    .day-details.inline[b-55gndp0bp4] {
        margin-bottom: 8px;
    }

@keyframes detailsIn-b-55gndp0bp4 {
    from {
        opacity: 0;
        translate: 0 6px;
    }
}

.day-details .details-title[b-55gndp0bp4] {
    font-size: 15px;
    font-weight: 700;
    padding: 0 2px;
}

@keyframes fadeIn-b-55gndp0bp4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.day-details .details-block[b-55gndp0bp4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    animation: fadeIn-b-55gndp0bp4 0.5s ease-in-out forwards;
}

    .day-details .details-block.block-locked[b-55gndp0bp4] {
        background-color: color-mix(in srgb, var(--gold) 12%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
    }

    .day-details .details-block.block-ready[b-55gndp0bp4] {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
    }

    .day-details .details-block.block-summoning[b-55gndp0bp4] {
        background-color: color-mix(in srgb, var(--magic-color-accent) 9%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magic-color-accent) 45%, transparent);
    }

        .day-details .details-block.block-summoning.waiting[b-55gndp0bp4] {
            box-shadow: inset 0 0 0 2px var(--magic-color-accent);
        }

        /* Someone can't: it turns red, so the group sees it. */
        .day-details .details-block.block-summoning.blocked[b-55gndp0bp4] {
            background-color: color-mix(in srgb, var(--block) 12%, transparent);
            box-shadow: inset 0 0 0 2px var(--block);
        }

        /* Until then the glint runs round it (app.css, SUMMONING GLINT): a faint accent ring (the full accent while it's
           waiting on you) in a transparent 2px border, with the padding 2px less so it stays the same size. The block
           draws nothing itself: the glow is ::before, and the ring with the tinted fill is ::after, over it, so only
           the glow past the edge shows. Not once it's red: that's something to see, not to act on. */
        .day-details .details-block.block-summoning:not(.blocked)[b-55gndp0bp4] {
            --summon-ring: conic-gradient(from var(--summon-angle), transparent 0 68%, var(--summon-glint) 90%, var(--summon-glint-tip) 94%, transparent 97%);
            --summon-base: color-mix(in srgb, var(--magic-color-accent) 45%, var(--card-bg));
            position: relative;
            isolation: isolate;
            padding: 6px 8px;
            border: 2px solid transparent;
            background: none;
            box-shadow: none;
            animation: fadeIn-b-55gndp0bp4 0.5s ease-in-out forwards, summonGlint var(--summon-glint-cycle) linear infinite;
        }

            .day-details .details-block.block-summoning.waiting:not(.blocked)[b-55gndp0bp4] {
                --summon-base: var(--magic-color-accent);
            }

            .day-details .details-block.block-summoning:not(.blocked)[b-55gndp0bp4]::before,
            .day-details .details-block.block-summoning:not(.blocked)[b-55gndp0bp4]::after {
                content: "";
                position: absolute;
                inset: -2px;
                z-index: -1;
                border-radius: inherit;
                pointer-events: none;
            }

            .day-details .details-block.block-summoning:not(.blocked)[b-55gndp0bp4]::before {
                background: var(--summon-ring);
                filter: blur(5px);
            }

            .day-details .details-block.block-summoning:not(.blocked)[b-55gndp0bp4]::after {
                border: 2px solid transparent;
                background: linear-gradient(color-mix(in srgb, var(--magic-color-accent) 9%, transparent), color-mix(in srgb, var(--magic-color-accent) 9%, transparent)) padding-box,
                    linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--summon-ring) border-box,
                    linear-gradient(var(--summon-base), var(--summon-base)) border-box;
            }

    /* A summoning that ended without locking: said once, quietly, until something else happens on the day. */
    .day-details .details-block.block-ended[b-55gndp0bp4] {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--block) 45%, transparent);
    }

        .day-details .block-ended .details-label .material-symbols-rounded[b-55gndp0bp4] {
            color: var(--block);
        }

/* How a summoning got where it is: its steps, folded away. */
.day-details .details-story[b-55gndp0bp4] {
    font-size: 12px;
    color: var(--card-text-soft);
}

    .day-details .details-story summary[b-55gndp0bp4] {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        list-style: none;
        cursor: pointer;
        font-weight: 700;
    }

        .day-details .details-story summary[b-55gndp0bp4]::-webkit-details-marker {
            display: none;
        }

        .day-details .details-story summary .material-symbols-rounded[b-55gndp0bp4] {
            font-size: 16px;
            transition: transform 0.2s ease;
        }

    .day-details .details-story[open] summary .material-symbols-rounded[b-55gndp0bp4] {
        transform: rotate(180deg);
    }

    /* A chat: one message per line, each starting with the person's name pill (ActivityMessage). */
    .day-details .details-story ul[b-55gndp0bp4] {
        margin: 6px 0 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.day-details .details-label[b-55gndp0bp4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--card-text-soft);
}

    .day-details .details-label .material-symbols-rounded[b-55gndp0bp4] {
        font-size: 16px;
    }

.day-details .block-locked .details-label .material-symbols-rounded[b-55gndp0bp4] {
    color: var(--gold);
    font-variation-settings: 'FILL' 1;
}

.day-details .block-summoning .details-label .material-symbols-rounded[b-55gndp0bp4] {
    color: var(--magic-color-accent);
}

.day-details .details-who[b-55gndp0bp4] {
    font-size: 13px;
    color: var(--card-text-soft);
}

.day-details .details-note[b-55gndp0bp4] {
    font-size: 12px;
    color: #8a6a1c;
}

.day-details .details-hint[b-55gndp0bp4] {
    font-size: 12px;
    color: var(--card-text-soft);
}

.day-details .details-actions[b-55gndp0bp4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.day-details .details-action[b-55gndp0bp4] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0.35em 0.8em;
    border: none;
    border-radius: 16px;
    background-color: var(--primary-button);
    color: whitesmoke;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .day-details .details-action .material-symbols-rounded[b-55gndp0bp4] {
        font-size: 16px;
    }

    .day-details .details-action.details-unlock[b-55gndp0bp4] {
        background-color: transparent;
        color: var(--secondary-button);
        box-shadow: inset 0 0 0 1px var(--secondary-button);
    }

    .day-details .details-action.details-lock[b-55gndp0bp4] {
        flex: none;
        background-color: var(--gold);
        color: #3a2a05;
    }

    /* Share's "Copied", shown for a moment by conjr.shareChip. */
    .day-details .details-action .link-copied[b-55gndp0bp4] {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: 0.3em 0.9em;
        border-radius: 12px;
        background-color: var(--magic-color-accent);
        color: #1f1a2e;
        white-space: nowrap;
        display: none;
    }

        .day-details .details-action .link-copied.show[b-55gndp0bp4] {
            display: block;
        }

.day-details .details-ready[b-55gndp0bp4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .day-details .details-ready > .material-symbols-rounded[b-55gndp0bp4] {
        color: var(--card-text-soft);
    }

.day-details .details-ready-text[b-55gndp0bp4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.day-details .details-ready-name[b-55gndp0bp4] {
    font-weight: 700;
}

/* The summoning's one option: its name and tag, then its bar with ✓ (good to go) and block. */
.day-details .summon-head[b-55gndp0bp4] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.day-details .summon-icon[b-55gndp0bp4] {
    font-size: 20px;
    color: var(--magic-color-accent);
}

.day-details .summon-name[b-55gndp0bp4] {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
}

    .day-details .summon-name.out[b-55gndp0bp4] {
        color: var(--block);
        text-decoration: line-through;
    }

.day-details .summon-tag[b-55gndp0bp4] {
    flex: none;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--magic-color-accent) 20%, transparent);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .day-details .summon-tag.tag-waiting[b-55gndp0bp4] {
        background-color: var(--magic-color);
        color: #f1e3f5;
    }

    .day-details .summon-tag.tag-all[b-55gndp0bp4] {
        background-color: var(--gold);
        color: #3a2a05;
    }

    .day-details .summon-tag.tag-out[b-55gndp0bp4] {
        background-color: color-mix(in srgb, var(--block) 18%, transparent);
        color: var(--block);
    }

.day-details .summon-bar[b-55gndp0bp4] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.day-details .summon-count[b-55gndp0bp4] {
    flex: none;
    padding: 0 6px;
    border-radius: 9px;
    background-color: color-mix(in srgb, var(--magic-color-accent) 22%, transparent);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

    .day-details .summon-count.can-t[b-55gndp0bp4] {
        background-color: color-mix(in srgb, var(--block) 20%, transparent);
        color: var(--block);
    }

.day-details .bar[b-55gndp0bp4] {
    position: relative;
    flex: 1;
    height: 6px;
    margin: 0 2px;
    border-radius: 3px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--card-text) 12%, transparent);
}

    .day-details .bar .bar-in[b-55gndp0bp4],
    .day-details .bar .bar-out[b-55gndp0bp4] {
        position: absolute;
        top: 0;
        height: 100%;
        transition: width 0.3s ease;
    }

    .day-details .bar .bar-in[b-55gndp0bp4] {
        left: 0;
        background-color: var(--magic-color-accent);
    }

    .day-details .bar .bar-out[b-55gndp0bp4] {
        right: 0;
        background-color: var(--block);
    }

.day-details .summon-mark[b-55gndp0bp4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .day-details .summon-mark.summon-yes[b-55gndp0bp4] {
        background-color: color-mix(in srgb, var(--magic-color-accent) 22%, transparent);
        color: var(--magic-color-accent);
    }

        .day-details .summon-mark.summon-yes.on[b-55gndp0bp4] {
            background-color: var(--magic-color-accent);
            color: #1f1a2e;
        }

    .day-details .summon-mark.summon-no[b-55gndp0bp4] {
        background-color: color-mix(in srgb, var(--block) 14%, transparent);
        color: var(--block);
    }

        .day-details .summon-mark.summon-no.on[b-55gndp0bp4] {
            background-color: var(--block);
            color: #fff;
        }

/* No room above (the page marks the day): at the top of the parts drawer instead. Hidden but still laid out, so
   conjr.fitDayDetails can keep measuring where it would float without showing it (and re-showing it would restart
   the cards' fade-in each time). */
.calendar-days .calendar-day[data-details-flip] .day-details.floating[b-55gndp0bp4] {
    visibility: hidden;
    pointer-events: none;
}

@media only screen and (max-width: 768px) { /* MOBILE */
    /* Phones: inside the parts drawer, under the row, instead. */
    .day-details.floating[b-55gndp0bp4] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .day-details.floating[b-55gndp0bp4] {
        animation: none;
    }

    .day-details .details-block[b-55gndp0bp4],
    .day-details .details-story summary .material-symbols-rounded[b-55gndp0bp4],
    .day-details .summon-tag[b-55gndp0bp4],
    .day-details .summon-mark[b-55gndp0bp4],
    .day-details .bar .bar-in[b-55gndp0bp4],
    .day-details .bar .bar-out[b-55gndp0bp4] {
        transition: none;
    }

    /* The summoning's ring stays, with no glint. */
    .day-details .details-block.block-summoning:not(.blocked)[b-55gndp0bp4] {
        animation: fadeIn-b-55gndp0bp4 0.5s ease-in-out forwards;
    }
}
/* /Components/Pages/DayPartsDrawer.razor.rz.scp.css */
/* A day's parts drawer, on the calendar and in a summoning's card in Gatherings (Focus). The part colours (.part-heat,
   .part-locked and so on) are shared with the day's strip, so they are in CalendarDay.razor.css, reaching in with
   ::deep (and in GatheringsList.razor.css for the card). */

/* The drawer. */
.calendar-days .day-parts[b-h3bxylkueu] {
    padding: 8px;
    border-radius: 12px;
    background-color: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--magic-color-accent) 35%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--card-text);
    font-family: var(--font-primary);
    font-size: 14px;
    text-align: left;
    cursor: default;
    box-sizing: border-box;
}

.calendar-days .calendar-day .day-parts[b-h3bxylkueu] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
}

    .calendar-days .calendar-day .day-parts.day-parts-start[b-h3bxylkueu] {
        left: -6px;
        transform: none;
    }

    .calendar-days .calendar-day .day-parts.day-parts-end[b-h3bxylkueu] {
        left: auto;
        right: -6px;
        transform: none;
    }

/* On the calendar it fades in, dropping into place under the day. `translate` rather than `transform`, which already
   centres it. */
@keyframes partsIn-b-h3bxylkueu {
    from {
        opacity: 0;
        translate: 0 -6px;
    }
}

.calendar-days .calendar-day .day-parts[b-h3bxylkueu] {
    animation: partsIn-b-h3bxylkueu 0.18s ease both;
}

/* A part's times roll open under the parts, and shut again: a grid row growing from nothing to its content's height.
   The clip reaches past the sides for the lock hanging off a time's left edge. */
.times-roll[b-h3bxylkueu] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.22s ease, opacity 0.22s ease;
}

    .times-roll.open[b-h3bxylkueu] {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .times-roll > .times-clip[b-h3bxylkueu] {
        min-height: 0;
        overflow: hidden;
        margin: 0 -12px;
        padding: 0 12px;
    }

/* Who's marked a part, tapped from its count. */
@keyframes whoIn-b-h3bxylkueu {
    from {
        opacity: 0;
    }
}

.calendar-days .day-parts .day-parts-who[b-h3bxylkueu] {
    animation: whoIn-b-h3bxylkueu 0.18s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-days .calendar-day .day-parts[b-h3bxylkueu],
    .calendar-days .day-parts .day-parts-who[b-h3bxylkueu] {
        animation: none;
    }

    .times-roll[b-h3bxylkueu] {
        transition: none;
    }
}

/* What's happening on the day (DayDetailsDrawer), at the top: on phones, and on desktop when there's no room for it
   above the day (the page marks the day data-details-flip). Otherwise it floats above the day instead. */
.day-parts .day-parts-details[b-h3bxylkueu] {
    display: none;
}

.calendar-days .calendar-day[data-details-flip] .day-parts .day-parts-details[b-h3bxylkueu] {
    display: block;
}

/* The part a summoning is asking about now: a small sparkle on its top-left corner. */
.calendar-days .day-parts .day-part .summoned-spark[b-h3bxylkueu] {
    position: absolute;
    top: -7px;
    left: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid var(--magic-color-accent);
    border-radius: 50%;
    background-color: var(--magic-color);
    color: #f1e3f5;
    pointer-events: none;
}

    .calendar-days .day-parts .day-part .summoned-spark .material-symbols-rounded[b-h3bxylkueu] {
        font-size: 11px;
    }

.calendar-days .day-parts .day-parts-list[b-h3bxylkueu] {
    display: flex;
    gap: 6px;
}

.calendar-days .day-parts .day-part[b-h3bxylkueu] {
    position: relative;
    width: 72px;
    flex: none;
    border-radius: 10px;
}

    .calendar-days .day-parts .day-part .day-part-main[b-h3bxylkueu] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        width: 100%;
        /* The same height for every part, with room kept at the bottom for its count and its times arrow, so nothing
               grows when votes arrive. */
        height: 100px;
        padding: 16px 0 0;
        border: none;
        border-radius: 10px;
        background-color: color-mix(in srgb, var(--card-text) 7%, transparent);
        color: var(--card-text-soft);
        font-family: inherit;
        font-size: 12px;
        cursor: pointer;
    }

@media (hover:hover) and (pointer:fine) {

    .calendar-days .day-parts .day-part .day-part-main:hover[b-h3bxylkueu] {
        background-color: color-mix(in srgb, var(--card-text) 12%, transparent);
    }
}

.calendar-days .day-parts .day-part:is(.part-heat, .part-mine-no, .part-locked, .part-blocked) .day-part-main[b-h3bxylkueu] {
    background-color: transparent;
}

/* Only your own marks colour the icon and name. */
.calendar-days .day-parts .day-part:is(.part-mine-yes, .part-mine-no) .day-part-main[b-h3bxylkueu] {
    color: inherit;
}

.calendar-days .day-parts .day-part .day-part-icon[b-h3bxylkueu] {
    position: relative;
    font-size: 24px;
}

/* Your block, in the top-right corner, in the part's own colour and always there until you use it; then it
           goes, and the part's own red shows the block (tapping the part takes it off). */
.calendar-days .day-parts .day-part .day-part-block[b-h3bxylkueu] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--card-text-soft);
    cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {

    .calendar-days .day-parts .day-part .day-part-block:hover[b-h3bxylkueu] {
        background-color: color-mix(in srgb, var(--card-text) 15%, transparent);
    }
}

/* Hidden once you've ✓ the part (take the ✓ off first); agreed and locked parts still offer it. */
.calendar-days .day-parts .day-part.part-mine-yes .day-part-block[b-h3bxylkueu] {
    display: none;
}

.calendar-days .day-parts .day-part .day-part-block .material-symbols-rounded[b-h3bxylkueu] {
    font-size: 15px;
}

/* Lock in (once agreed: purple with a still gold glow, as the day's ready badge) or unlock (gold), centred over the top
   edge. */
.calendar-days .day-parts .day-part .day-part-lock[b-h3bxylkueu] {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--magic-color-accent);
    background-color: var(--magic-color);
    color: #f1e3f5;
    box-shadow: var(--ready-glow);
    cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {

    .calendar-days .day-parts .day-part .day-part-lock:not(.locked):hover[b-h3bxylkueu] {
        box-shadow: var(--ready-glow-hover);
    }
}

    .calendar-days .day-parts .day-part .day-part-lock.locked[b-h3bxylkueu] {
        border-color: var(--gold);
        background-color: var(--gold);
        color: #3a2a05;
        box-shadow: none;
    }


    .calendar-days .day-parts .day-part .day-part-lock .material-symbols-rounded[b-h3bxylkueu] {
        font-size: 15px;
    }

/* The times arrow, a plain ⌄ along the bottom of the square (⌃ while its times are open). */
.calendar-days .day-parts .day-part .day-part-times-toggle[b-h3bxylkueu] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0;
    padding-bottom: 3px;
    border: none;
    border-radius: 0 0 10px 10px;
    background: none;
    color: var(--card-text-soft);
    cursor: pointer;
}

    .calendar-days .day-parts .day-part .day-part-times-toggle:hover[b-h3bxylkueu] {
        background-color: color-mix(in srgb, var(--card-text) 12%, transparent);
    }

    .calendar-days .day-parts .day-part .day-part-times-toggle .material-symbols-rounded[b-h3bxylkueu] {
        font-size: 20px;
        transition: transform 0.15s ease;
    }

.calendar-days .day-parts .day-part.times-open .day-part-times-toggle .material-symbols-rounded[b-h3bxylkueu] {
    transform: rotate(180deg);
}

/* The open part, underlined, so it's clear whose times are below. */
.calendar-days .day-parts .day-part.times-open .day-part-main[b-h3bxylkueu] {
    box-shadow: inset 0 -2px 0 var(--card-text-soft);
}

/* "✓ 2 ✗ 1" just above the arrow: tap for who. */
.calendar-days .day-parts .day-part .day-part-count[b-h3bxylkueu] {
    position: absolute;
    bottom: 21px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    padding: 1px 8px;
    border: none;
    border-radius: 9px;
    background-color: color-mix(in srgb, var(--card-text) 10%, transparent);
    color: var(--card-text);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
}

.calendar-days .day-parts .day-part-count-no[b-h3bxylkueu] {
    color: var(--block);
}

/* A part's names (WhoNames), under the parts. */
.calendar-days .day-parts .day-parts-who[b-h3bxylkueu] {
    margin-top: 8px;
}

/* The whole day's who-list (WhoList), above the parts: its name on the left, the folded list beside it, the names
   rolling open underneath across the drawer's width. */
.calendar-days .day-parts .day-parts-whole[b-h3bxylkueu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0 2px 8px;
}

    .calendar-days .day-parts .day-parts-whole[b-h3bxylkueu]  .who-list {
        display: contents;
    }

    .calendar-days .day-parts .day-parts-whole[b-h3bxylkueu]  .who-roll {
        flex-basis: 100%;
    }

.calendar-days .day-parts .day-parts-whole-name[b-h3bxylkueu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--card-text-soft);
    font-size: 13px;
}

    .calendar-days .day-parts .day-parts-whole-name .material-symbols-rounded[b-h3bxylkueu] {
        font-size: 16px;
    }

@media only screen and (max-width: 768px) { /* MOBILE */

    /* Phones: what's happening on the day, stacked first, then the parts. */
    .day-parts .day-parts-details[b-h3bxylkueu] {
        display: block;
    }

    /* The row's width, over the days below (a day can't run off a phone's edge, so no need to line up). */
    .calendar-days .calendar-day .day-parts[b-h3bxylkueu],
    .calendar-days .calendar-day .day-parts.day-parts-start[b-h3bxylkueu],
    .calendar-days .calendar-day .day-parts.day-parts-end[b-h3bxylkueu] {
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        transform: none;
    }

        .calendar-days .calendar-day .day-parts .day-parts-list[b-h3bxylkueu] {
            justify-content: space-between;
        }

        .calendar-days .calendar-day .day-parts .day-part[b-h3bxylkueu] {
            flex: 1;
            width: auto;
            max-width: 84px;
        }
}
/* /Components/Pages/PartDots.razor.rz.scp.css */
.part-dots[b-6v6djx2ha5] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    display: flex;
    gap: calc(var(--dot-size, 10px) * 0.4);
    pointer-events: none;
}

.part-dot[b-6v6djx2ha5] {
    width: var(--dot-size, 10px);
    height: var(--dot-size, 10px);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--card-bg);
}

    .part-dot.dot-yes[b-6v6djx2ha5] {
        background-color: var(--magic-color-accent);
    }

    .part-dot.dot-locked[b-6v6djx2ha5] {
        background-color: var(--gold);
    }

    .part-dot.dot-no[b-6v6djx2ha5] {
        background-color: var(--block);
    }
/* /Components/Pages/PartTimesDrawer.razor.rz.scp.css */
/* One part's times, under the parts in the parts drawer. The cell colours (.part-heat, .part-locked and so on) are
   the parts', in CalendarDay.razor.css. */

.part-times[b-z0oh3xc3rk] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--card-text) 12%, transparent);
}

.part-times-heading[b-z0oh3xc3rk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--card-text-soft);
    font-size: 13px;
}

    .part-times-heading .material-symbols-rounded[b-z0oh3xc3rk] {
        font-size: 18px;
    }

/* Two columns, one hour per row (7:00 7:30 / 8:00 8:30 …). A finger swipe scrolls the page as usual; holding a time
   first starts selecting, and conjr.timeDrag then stops the scroll. Holding never selects text or brings up the phone's
   own menu. */
.part-times-grid[b-z0oh3xc3rk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    padding-left: 10px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* The whole cell is one box, the same width whatever its state: the time and counts, then the block inside it at the
   right. The part colours (CalendarDay.razor.css) replace this plain background once anyone has marked it. */
.part-time[b-z0oh3xc3rk] {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--card-text) 7%, transparent);
    color: var(--card-text-soft);
}

    /* The time, set in from the left (clear of the lock): the whole of it, up to the counts, is the tap target. */
    .part-time .part-time-main[b-z0oh3xc3rk] {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0 0 0 18px;
        border: none;
        border-radius: 8px;
        background: none;
        color: inherit;
        font-family: inherit;
        font-size: 14px;
        cursor: pointer;
    }

@media (hover:hover) and (pointer:fine) {

    .part-time .part-time-main:hover[b-z0oh3xc3rk] {
        background-color: color-mix(in srgb, var(--card-text) 6%, transparent);
    }
}

/* Only your own marks colour the time. */
.part-time:is(.part-mine-yes, .part-mine-no) .part-time-main[b-z0oh3xc3rk] {
    color: inherit;
}

.part-time.part-mine-no .part-time-text[b-z0oh3xc3rk] {
    text-decoration: line-through;
}
/* While dragging (conjr.timeDrag): the times about to be marked, blocked or cleared, as for days. */
.part-time.drag-mark[b-z0oh3xc3rk] {
    outline: 2px dashed var(--magic-color-accent);
    outline-offset: 1px;
}

.part-time.drag-block[b-z0oh3xc3rk] {
    outline: 2px dashed var(--block);
    outline-offset: 1px;
}

.part-time.drag-clear[b-z0oh3xc3rk] {
    opacity: 0.5;
}
/* The time a summoning is asking about now: a small sparkle on its top-left corner (the lock hangs off the middle). */
.part-time .summoned-spark[b-z0oh3xc3rk] {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid var(--magic-color-accent);
    border-radius: 50%;
    background-color: var(--magic-color);
    color: #f1e3f5;
    pointer-events: none;
}

    .part-time .summoned-spark .material-symbols-rounded[b-z0oh3xc3rk] {
        font-size: 10px;
    }

/* The counts, one button that shows who (the names under the times). */
.part-time .part-time-who[b-z0oh3xc3rk] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: none;
    height: 100%;
    margin: 0;
    padding: 0 2px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.part-times-who[b-z0oh3xc3rk] {
    margin-top: 8px;
}

/* The counts look exactly like a part's. */
.part-time-count[b-z0oh3xc3rk] {
    flex: none;
    padding: 1px 6px;
    border-radius: 9px;
    background-color: color-mix(in srgb, var(--card-text) 10%, transparent);
    color: var(--card-text);
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
}

.part-time-count-no[b-z0oh3xc3rk] {
    margin-right: 2px;
    color: var(--block);
}
/* Your block, at the right. Hidden once you've ✓ the time, as on a part. */
.part-time .part-time-block[b-z0oh3xc3rk] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--card-text-soft);
    cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {

    .part-time .part-time-block:hover[b-z0oh3xc3rk] {
        background-color: color-mix(in srgb, var(--card-text) 15%, transparent);
    }
}

.part-time.part-mine-yes .part-time-block[b-z0oh3xc3rk] {
    display: none;
}

.part-time .part-time-block .material-symbols-rounded[b-z0oh3xc3rk] {
    font-size: 15px;
}
/* Lock in (once agreed: purple with a still gold glow, as the day's ready badge) or unlock (gold), hanging off the cell's
   left edge, half on and half off. */
.part-time .part-time-lock[b-z0oh3xc3rk] {
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid var(--magic-color-accent);
    border-radius: 50%;
    background-color: var(--magic-color);
    color: #f1e3f5;
    box-shadow: var(--ready-glow);
    cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {

    .part-time .part-time-lock:not(.locked):hover[b-z0oh3xc3rk] {
        box-shadow: var(--ready-glow-hover);
    }
}

    .part-time .part-time-lock.locked[b-z0oh3xc3rk] {
        border-color: var(--gold);
        background-color: var(--gold);
        color: #3a2a05;
        box-shadow: none;
    }

    .part-time .part-time-lock .material-symbols-rounded[b-z0oh3xc3rk] {
        font-size: 13px;
    }

/* Phones: taller cells with bigger times, easier to hit with a finger, and no hover tint (a tap leaves the hover
   state behind until the next tap elsewhere). Kept out of the rules above: Blazor's scoped CSS doesn't handle @media
   nested inside a rule. */
@media only screen and (max-width: 768px) { /* MOBILE */

    .part-time[b-z0oh3xc3rk] {
        height: 40px;
    }

        .part-time .part-time-main[b-z0oh3xc3rk] {
            font-size: 24px;
        }

}
/* /Components/Panels/DayMenu.razor.rz.scp.css */
/* The long-press menu: a sheet from the bottom of the screen, over a dim of the page (and above the bottom bar). */
.sheet-backdrop[b-cbuiwcd9ur] {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: rgba(20, 16, 32, 0.45);
    animation: sheetFade-b-cbuiwcd9ur 0.15s ease both;
}

    .sheet-backdrop .sheet[b-cbuiwcd9ur] {
        width: 100%;
        max-width: 480px;
        box-sizing: border-box;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        background-color: var(--card-bg);
        color: var(--card-text);
        box-shadow: 0 0 0 2px rgba(166, 120, 175, 0.5), 0 -8px 30px rgba(0, 0, 0, 0.45);
        font-family: var(--font-primary);
        animation: sheetUp-b-cbuiwcd9ur 0.2s ease both;
    }

        /* It takes focus when it opens (conjr.focusPanel); its edge already shows where you are. */
        .sheet-backdrop .sheet:focus[b-cbuiwcd9ur] {
            outline: none;
        }

        .sheet-backdrop .sheet .sheet-title[b-cbuiwcd9ur] {
            margin-bottom: 12px;
            text-align: center;
            font-size: 1.05rem;
            font-weight: bold;
        }

        .sheet-backdrop .sheet .sheet-options[b-cbuiwcd9ur] {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .sheet-backdrop .sheet .sheet-option[b-cbuiwcd9ur] {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-height: 72px;
            padding: 10px 8px;
            border: 1px solid color-mix(in srgb, var(--card-text) 18%, transparent);
            border-radius: 14px;
            background-color: transparent;
            color: var(--card-text);
            font-family: inherit;
            font-size: 0.95rem;
            cursor: pointer;
        }

            .sheet-backdrop .sheet .sheet-option .material-symbols-rounded[b-cbuiwcd9ur] {
                font-size: 28px;
            }

            .sheet-backdrop .sheet .sheet-option.sheet-yes .material-symbols-rounded[b-cbuiwcd9ur] {
                color: var(--magic-color-accent);
            }

            .sheet-backdrop .sheet .sheet-option.sheet-no .material-symbols-rounded[b-cbuiwcd9ur] {
                font-size: 24px;
                color: var(--block);
            }

            /* Your current mark: filled, so tapping it reads as taking it off. */
            .sheet-backdrop .sheet .sheet-option.sheet-yes.active[b-cbuiwcd9ur] {
                border-color: var(--magic-color-accent);
                background-color: color-mix(in srgb, var(--magic-color-accent) 22%, transparent);
            }

            .sheet-backdrop .sheet .sheet-option.sheet-no.active[b-cbuiwcd9ur] {
                border-color: var(--block);
                background-color: color-mix(in srgb, var(--block) 18%, transparent);
            }

        .sheet-backdrop .sheet .sheet-cancel[b-cbuiwcd9ur] {
            width: 100%;
            height: 3em;
            margin-top: 12px;
            border: none;
            border-radius: 10px;
            background-color: color-mix(in srgb, var(--card-text) 10%, transparent);
            color: var(--card-text);
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
        }

@keyframes sheetFade-b-cbuiwcd9ur {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sheetUp-b-cbuiwcd9ur {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sheet-backdrop[b-cbuiwcd9ur],
    .sheet-backdrop .sheet[b-cbuiwcd9ur] {
        animation: none;
    }
}
/* /Components/Panels/GatheringsList.razor.rz.scp.css */
/* Gatherings: setting up, then locked in, summoning, ready to lock and getting close, then nudging, in the panel the gold
   pill opens (the pill is in Pages/Calendar.razor.css). Buttons go three classes deep so they beat the panel's full-width
   button style (.modal-container button). */

.gatherings[b-pldc1pygew] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--font-primary);
    text-align: left;
}

/* The name, a one-line summary, and the bell once pings are on. */
/* Clear of the panel's ✕ in the top-right corner. */
.gatherings .gatherings-head[b-pldc1pygew] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 44px 0 4px;
}

    .gatherings .gatherings-head .gatherings-title[b-pldc1pygew] {
        flex: 1;
        min-width: 0;
    }

        .gatherings .gatherings-head .gatherings-title h2[b-pldc1pygew] {
            margin: 0;
            font-family: var(--font-wordmark);
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.2;
            color: inherit;
        }

        .gatherings .gatherings-head .gatherings-title p[b-pldc1pygew] {
            margin: 0;
            font-size: 0.85rem;
            opacity: 0.8;
        }

    .gatherings .gatherings-head .gatherings-bell[b-pldc1pygew] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: color-mix(in srgb, var(--magic-color-accent) 30%, transparent);
        color: inherit;
        cursor: pointer;
    }

        .gatherings .gatherings-head .gatherings-bell .material-symbols-rounded[b-pldc1pygew] {
            font-variation-settings: 'FILL' 1;
        }

        .gatherings .gatherings-head .gatherings-bell.muted[b-pldc1pygew] {
            background-color: color-mix(in srgb, currentColor 10%, transparent);
            opacity: 0.75;
        }

            .gatherings .gatherings-head .gatherings-bell.muted .material-symbols-rounded[b-pldc1pygew] {
                font-variation-settings: 'FILL' 0;
            }

/* Setting up: a row for each step left. */
.gatherings .gatherings-setup[b-pldc1pygew] {
    display: flex;
    flex-direction: column;
    padding: 2px 12px;
    border-radius: 12px;
    background-color: color-mix(in srgb, currentColor 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
    font-size: 0.85rem;
    line-height: 1.35;
}

    .gatherings .gatherings-setup .setup-row[b-pldc1pygew],
    .gatherings .gatherings-setup .setup-fold[b-pldc1pygew] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 0;
    }

    .gatherings .gatherings-setup .setup-fold[b-pldc1pygew] {
        width: 100%;
        height: auto;
        margin: 0;
        border: none;
        background: none;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        text-align: left;
        cursor: pointer;
    }

        .gatherings .gatherings-setup .setup-fold:hover[b-pldc1pygew] {
            background: none;
        }

    .gatherings .gatherings-setup .setup-icon[b-pldc1pygew] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: color-mix(in srgb, var(--magic-color-accent) 25%, transparent);
        font-size: 20px;
    }

    .gatherings .gatherings-setup .setup-text[b-pldc1pygew] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .gatherings .gatherings-setup .setup-name[b-pldc1pygew] {
        font-size: 0.95rem;
        font-weight: 500;
    }

    .gatherings .gatherings-setup .setup-note[b-pldc1pygew] {
        opacity: 0.8;
    }

    .gatherings .gatherings-setup .setup-action[b-pldc1pygew] {
        flex: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0.4em 1em;
        border: none;
        border-radius: 16px;
        background-color: var(--magic-color-accent);
        color: #1f1a2e;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

/* The arrows on sections and the folded setup card point up while open. */
.gatherings .chevron[b-pldc1pygew] {
    flex: none;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

    .gatherings .chevron.open[b-pldc1pygew] {
        transform: rotate(180deg);
    }

.gatherings .gatherings-empty[b-pldc1pygew] {
    margin: 4px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* The sections hang off a thin line, gold to purple to faint, through their icons (16px in: the icons' centres). The
   cards sit over it and keep the full width. */
.gatherings .gatherings-sections[b-pldc1pygew] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .gatherings .gatherings-sections[b-pldc1pygew]::before {
        content: "";
        position: absolute;
        left: 15px;
        top: 20px;
        bottom: 20px;
        width: 2px;
        background: linear-gradient(var(--gold), var(--magic-color-accent) 45%, color-mix(in srgb, currentColor 15%, transparent));
    }

    .gatherings .gatherings-sections .section-head[b-pldc1pygew] {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 6px 4px 6px 0;
        border: none;
        border-radius: 10px;
        background: none;
        color: inherit;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }

        /* Not the panel's purple button hover (Panel.razor.css): the underlined label is enough. */
        .gatherings .gatherings-sections .section-head:hover[b-pldc1pygew] {
            background: none;
        }

        .gatherings .gatherings-sections .section-head:hover .section-label[b-pldc1pygew] {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

    .gatherings .section-head .section-icon[b-pldc1pygew] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 18px;
    }

    .gatherings .section-head.section-locked .section-icon[b-pldc1pygew] {
        background-color: var(--gold);
        color: #3a2a05;
        font-variation-settings: 'FILL' 1;
    }

    /* Ready: the purple circle with the still gold glow of the day's ready badge (app.css, --ready-glow). */
    .gatherings .section-head.section-ready .section-icon[b-pldc1pygew] {
        background-color: var(--magic-color);
        color: #e3d6f0;
        box-shadow: 0 0 0 2px var(--magic-color-accent), var(--ready-glow);
    }

    .gatherings .section-head.section-close .section-icon[b-pldc1pygew] {
        background-color: var(--magic-color);
        color: #e3d6f0;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--magic-color-accent) 45%, transparent);
    }

    .gatherings .section-head .section-name[b-pldc1pygew] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .gatherings .section-head .section-label[b-pldc1pygew] {
        font-size: 1rem;
        font-weight: 700;
    }

    .gatherings .section-head .section-preview[b-pldc1pygew] {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    .gatherings .section-head .section-count[b-pldc1pygew] {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        box-sizing: border-box;
        border-radius: 11px;
        background-color: color-mix(in srgb, currentColor 14%, transparent);
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 22px;
        text-align: center;
    }

    .gatherings .section-head.section-locked .section-count[b-pldc1pygew] {
        background-color: var(--gold);
        color: #3a2a05;
    }

    .gatherings .gatherings-sections .section-body[b-pldc1pygew] {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 2px 0 10px;
    }

/* The accordions (and the folded setup card) roll open and shut: a grid row growing from nothing to its content's
   height. The clip hides what's past the row while it moves; it reaches 16px past the sides and 8px above, with the
   same padding inside, so the cards' glow isn't cut off. Closed ones are inert, so focus can't land in them. */
.gatherings .section-collapse[b-pldc1pygew],
.gatherings .setup-collapse[b-pldc1pygew] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.22s ease, opacity 0.22s ease;
}

    .gatherings .section-collapse.open[b-pldc1pygew],
    .gatherings .setup-collapse.open[b-pldc1pygew] {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .gatherings .section-collapse > .section-clip[b-pldc1pygew],
    .gatherings .setup-collapse > .setup-rows[b-pldc1pygew] {
        min-height: 0;
        overflow: hidden;
    }

    .gatherings .section-collapse > .section-clip[b-pldc1pygew] {
        margin: -8px -16px 0;
    }

        .gatherings .gatherings-sections .section-collapse > .section-clip > .section-body[b-pldc1pygew] {
            padding: 10px 16px;
        }

/* The same roll for smaller things that come and go: a finished setup row (and the card with the last one), and the
   line saying what just moved. They stay drawn, rolled shut, so they can roll away. */
.gatherings .roll[b-pldc1pygew] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.22s ease, opacity 0.22s ease;
}

    .gatherings .roll.open[b-pldc1pygew] {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .gatherings .roll > .roll-clip[b-pldc1pygew] {
        min-height: 0;
        overflow: hidden;
    }

/* New things fade in, dropping into place: cards arriving in a section (or shown by "Show all"), and the bell once pings
   are on. Cards are keyed by what they're about, so it's the new one that fades in, not whichever came last. */
@keyframes gatherIn-b-pldc1pygew {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.gatherings .section-body > .session[b-pldc1pygew],
.gatherings .gatherings-head .gatherings-bell[b-pldc1pygew] {
    animation: gatherIn-b-pldc1pygew 0.22s ease both;
}

/* What just moved: a short line under the name, tinted for what happened (gold locked in, purple summoning, red didn't
   come together). Tapping it goes back to the card. */
.gatherings .roll .gatherings-notice[b-pldc1pygew] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 12px;
    border: none;
    border-radius: 12px;
    background-color: rgba(244, 194, 91, 0.16);
    box-shadow: inset 0 0 0 1px rgba(244, 194, 91, 0.5);
    color: inherit;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .gatherings .roll .gatherings-notice .material-symbols-rounded[b-pldc1pygew] {
        font-size: 18px;
        color: var(--gold);
    }

    .gatherings .roll .gatherings-notice.notice-summoning[b-pldc1pygew] {
        background-color: color-mix(in srgb, var(--magic-color-accent) 18%, transparent);
        box-shadow: inset 0 0 0 1px var(--magic-color-accent);
    }

        .gatherings .roll .gatherings-notice.notice-summoning .material-symbols-rounded[b-pldc1pygew] {
            color: var(--magic-color-accent);
        }

    .gatherings .roll .gatherings-notice.notice-ended[b-pldc1pygew] {
        background-color: color-mix(in srgb, var(--block) 14%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--block) 60%, transparent);
        cursor: default;
    }

        .gatherings .roll .gatherings-notice.notice-ended .material-symbols-rounded[b-pldc1pygew] {
            color: var(--block);
        }

/* The card something just moved to: a gold glow that swells once and fades, so the eye lands on it. */
@keyframes arrivedPulse-b-pldc1pygew {
    40% {
        box-shadow: 0 0 0 3px var(--gold), 0 0 28px 8px rgba(244, 194, 91, 0.7);
    }
}

.gatherings .section-body > .session.arrived[b-pldc1pygew] {
    animation: gatherIn-b-pldc1pygew 0.22s ease both, arrivedPulse-b-pldc1pygew 1.6s ease 0.15s 1;
}

/* Summonings glint (with the fade-in and pulse above, since they share animation); each card starts at a different point
   so they don't flash together. */
.gatherings .section-body > .session.summoning[b-pldc1pygew] {
    animation: gatherIn-b-pldc1pygew 0.22s ease both, summonGlint var(--summon-glint-cycle) linear infinite;
}

    .gatherings .section-body > .session.summoning:nth-child(3n+2)[b-pldc1pygew] {
        animation-delay: 0s, calc(var(--summon-glint-cycle) * -0.4);
    }

    .gatherings .section-body > .session.summoning:nth-child(3n)[b-pldc1pygew] {
        animation-delay: 0s, calc(var(--summon-glint-cycle) * -0.7);
    }

    .gatherings .section-body > .session.summoning.arrived[b-pldc1pygew] {
        animation: gatherIn-b-pldc1pygew 0.22s ease both, arrivedPulse-b-pldc1pygew 1.6s ease 0.15s 1, summonGlint var(--summon-glint-cycle) linear infinite;
    }

@media (prefers-reduced-motion: reduce) {
    /* The ring and glow stay, with no glint. */
    .gatherings .section-body > .session.summoning[b-pldc1pygew],
    .gatherings .section-body > .session.summoning.arrived[b-pldc1pygew],
    .gatherings .section-head.section-summoning .section-icon[b-pldc1pygew] {
        animation: none;
    }

    /* No pulse: a steady gold edge while the line shows. */
    .gatherings .section-body > .session.arrived[b-pldc1pygew] {
        animation: none;
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .gatherings .section-collapse[b-pldc1pygew],
    .gatherings .setup-collapse[b-pldc1pygew],
    .gatherings .roll[b-pldc1pygew] {
        transition: none;
    }

    .gatherings .section-body > .session[b-pldc1pygew],
    .gatherings .gatherings-head .gatherings-bell[b-pldc1pygew] {
        animation: none;
    }
}

/* A card: what it's about on the left, and the eye that takes you to its day on the right. */
.gatherings .session[b-pldc1pygew] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background-color: var(--card-bg);
    color: var(--card-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

    /* The next session gets the locked-in gold; days ready to lock get the accent ring, like on the calendar. */
    /* Its glow the same size as a summoning's. */
    .gatherings .session.session-next[b-pldc1pygew] {
        box-shadow: 0 0 0 2px var(--gold), 0 0 14px 1px rgba(244, 194, 91, 0.45);
    }

    .gatherings .session.session-ready[b-pldc1pygew] {
        box-shadow: 0 0 0 2px var(--magic-color-accent), 0 0 14px 1px var(--glow);
    }

    /* A summoning: the accent ring with the glint (app.css, SUMMONING GLINT). The card keeps a transparent 2px border
       (so -2px margins keep it where the ring was) and draws nothing itself: the glow is ::before, and the ring with
       the card's fill is ::after, over it, so only the glow past the edge shows. */
    .gatherings .session.summoning[b-pldc1pygew] {
        --summon-ring: conic-gradient(from var(--summon-angle), transparent 0 68%, var(--summon-glint) 90%, var(--summon-glint-tip) 94%, transparent 97%);
        position: relative;
        isolation: isolate;
        margin: 0 -2px;
        border: 2px solid transparent;
        background: none;
        /* Both glows (this halo and the glint's, ::before) at a little over half, softer than the icon's. */
        box-shadow: 0 0 14px 1px color-mix(in srgb, var(--glow) 56%, transparent);
    }

        .gatherings .session.summoning[b-pldc1pygew]::before,
        .gatherings .session.summoning[b-pldc1pygew]::after {
            content: "";
            position: absolute;
            inset: -2px;
            z-index: -1;
            border-radius: inherit;
            pointer-events: none;
        }

        .gatherings .session.summoning[b-pldc1pygew]::before {
            background: var(--summon-ring);
            filter: blur(7px);
            opacity: 0.56;
        }

        .gatherings .session.summoning[b-pldc1pygew]::after {
            box-sizing: border-box;
            border: 2px solid transparent;
            background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--summon-ring) border-box, linear-gradient(var(--magic-color-accent), var(--magic-color-accent)) border-box;
        }

    .gatherings .session .session-main[b-pldc1pygew] {
        flex: 1;
        min-width: 0;
    }

    /* The eye: closes the panel and opens the day on the calendar. Three classes deep so it beats the panel's
       full-width button style. */
    .gatherings .session .session-eye[b-pldc1pygew] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: color-mix(in srgb, var(--magic-color-accent) 22%, transparent);
        color: var(--card-text);
        cursor: pointer;
    }

        .gatherings .session .session-eye:hover[b-pldc1pygew] {
            background-color: color-mix(in srgb, var(--magic-color-accent) 38%, transparent);
        }

/* A summoning's card: what it's asking about now, and where that stands for you. */
.gatherings .session .summon-current[b-pldc1pygew] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.85rem;
}

    .gatherings .session .summon-current .material-symbols-rounded[b-pldc1pygew] {
        font-size: 18px;
        color: var(--magic-color-accent);
    }

    .gatherings .session .summon-current .summon-option[b-pldc1pygew] {
        flex: 1;
        min-width: 0;
        font-weight: 700;
    }

.gatherings .session .summon-tag[b-pldc1pygew] {
    flex: none;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--magic-color-accent) 20%, transparent);
}

    .gatherings .session .summon-tag.tag-waiting[b-pldc1pygew] {
        background-color: var(--magic-color);
        color: #f1e3f5;
    }

    .gatherings .session .summon-tag.tag-out[b-pldc1pygew] {
        background-color: color-mix(in srgb, var(--block) 18%, transparent);
        color: var(--block);
    }

.gatherings .session-label[b-pldc1pygew] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--card-text-soft);
}

.gatherings .session .session-date[b-pldc1pygew] {
    font-size: 1.05rem;
    font-weight: bold;
}

.gatherings .section-body .sessions-more[b-pldc1pygew] {
    display: block;
    width: auto;
    height: auto;
    margin: -2px 4px 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.85;
    cursor: pointer;
}

.gatherings .session-who[b-pldc1pygew] {
    font-size: 0.85rem;
    color: var(--card-text-soft);
}


/* Nudging, at the bottom: "Quiet lately?" and a gold Nudge. */
.gatherings .gatherings-nudge[b-pldc1pygew] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background-color: rgba(244, 194, 91, 0.12);
    box-shadow: inset 0 0 0 1px rgba(244, 194, 91, 0.4);
    font-size: 0.85rem;
    line-height: 1.35;
}

    .gatherings .gatherings-nudge > .material-symbols-rounded[b-pldc1pygew] {
        flex: none;
        color: var(--gold);
    }

    .gatherings .gatherings-nudge .nudge-text[b-pldc1pygew] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .gatherings .gatherings-nudge .nudge-name[b-pldc1pygew] {
        font-size: 0.95rem;
        font-weight: 500;
    }

    .gatherings .gatherings-nudge .nudge-note[b-pldc1pygew] {
        opacity: 0.8;
    }

    .gatherings .gatherings-nudge .nudge-action[b-pldc1pygew] {
        flex: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0.45em 1.1em;
        border: none;
        border-radius: 18px;
        background-color: var(--gold);
        color: #3a2a05;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
    }

        .gatherings .gatherings-nudge .nudge-action:disabled[b-pldc1pygew] {
            opacity: 0.55;
            cursor: default;
        }

/* Summoning's icon: the glint (app.css, SUMMONING GLINT) on its ring, with the sparkle lighting up as it passes. 36px
   with -2px margins, so its centre stays on the line. Drawn like the cards: the glow is ::before, the ring and fill
   ::after over it. */
.gatherings .section-head.section-summoning .section-icon[b-pldc1pygew] {
    --summon-ring: conic-gradient(from var(--summon-angle), transparent 0 40%, var(--summon-glint) 85%, var(--summon-glint-tip) 93%, transparent 98%);
    position: relative;
    isolation: isolate;
    width: 36px;
    height: 36px;
    margin: 0 -2px;
    box-sizing: border-box;
    background: none;
    color: #f1e3f5;
    box-shadow: 0 0 12px 2px var(--glow);
    text-shadow: 0 0 8px var(--summon-glint), 0 0 2px var(--summon-glint);
    animation: summonGlint var(--summon-glint-cycle) linear infinite;
}

    .gatherings .section-head.section-summoning .section-icon[b-pldc1pygew]::before,
    .gatherings .section-head.section-summoning .section-icon[b-pldc1pygew]::after {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
    }

    .gatherings .section-head.section-summoning .section-icon[b-pldc1pygew]::before {
        inset: -3px;
        background: var(--summon-ring);
        filter: blur(6px);
    }

    .gatherings .section-head.section-summoning .section-icon[b-pldc1pygew]::after {
        inset: 0;
        border: 2.5px solid transparent;
        background: linear-gradient(var(--magic-color), var(--magic-color)) padding-box, var(--summon-ring) border-box, linear-gradient(var(--magic-color-accent), var(--magic-color-accent)) border-box;
    }

.gatherings .section-head.section-summoning .section-count[b-pldc1pygew] {
    background-color: var(--magic-color-accent);
    color: #1f1a2e;
}

/* /Components/Panels/GatheringsPanel.razor.rz.scp.css */
.modal-background .gatherings-panel .gatherings-done[b-ioih694qfq] {
    margin-top: 4px;
}
/* /Components/Panels/HomePanel.razor.rz.scp.css */
/* The calendars this device has opened, and starting a new one. The panel's width and its buttons come from
   Layout/Panel.razor.css; the mark and wordmark from Shared/PanelHeader.razor.css. */

.modal-background .home-panel .home-heading[b-rsvdrommq5] {
    align-self: flex-start;
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    font-weight: bold;
}

.modal-background .home-panel .home-empty[b-rsvdrommq5] {
    align-self: flex-start;
    color: var(--card-text-soft);
}

.modal-background .home-panel .home-calendars[b-rsvdrommq5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.modal-background .home-panel .home-calendar[b-rsvdrommq5] {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--card-text) 6%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-text) 12%, transparent);
}

    /* Three classes deep so they beat the panel's full-width button style (.modal-container button). */
    .modal-background .home-panel .home-calendar .home-calendar-open[b-rsvdrommq5] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        width: auto;
        height: auto;
        margin: 0;
        padding: 10px 14px;
        border-radius: 10px 0 0 10px;
        background-color: transparent;
        color: var(--card-text);
        text-align: left;
    }

        .modal-background .home-panel .home-calendar .home-calendar-open:hover[b-rsvdrommq5] {
            background-color: color-mix(in srgb, var(--magic-color-accent) 18%, transparent);
        }

    .modal-background .home-panel .home-calendar .home-calendar-title[b-rsvdrommq5] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.1rem;
        font-weight: bold;
    }

    .modal-background .home-panel .home-calendar .home-calendar-meta[b-rsvdrommq5] {
        font-size: 0.85rem;
        color: var(--card-text-soft);
    }

    .modal-background .home-panel .home-calendar .home-calendar-remove[b-rsvdrommq5] {
        flex: none;
        width: 44px;
        height: auto;
        margin: 0;
        padding: 0;
        border-radius: 0 10px 10px 0;
        background-color: transparent;
        color: var(--card-text-soft);
        font-size: 1.4rem;
        line-height: 1;
    }

        .modal-background .home-panel .home-calendar .home-calendar-remove:hover[b-rsvdrommq5] {
            background-color: color-mix(in srgb, #b3261e 15%, transparent);
            color: #b3261e;
        }

.modal-background .home-panel .home-new[b-rsvdrommq5] {
    margin: 0 0 1.4rem;
}

/* "Removed ... · Undo", shown for a few seconds above the panel. Its bubble is the global .save-error in app.css. */
.home-undo[b-rsvdrommq5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .home-undo button[b-rsvdrommq5] {
        padding: 0.1em 0.8em;
        border: none;
        border-radius: 12px;
        background-color: var(--magic-color-accent);
        color: #1f1a2e;
        font-family: inherit;
        cursor: pointer;
    }
/* /Components/Panels/JoinPanel.razor.rz.scp.css */
/* Joining or creating a calendar. The panel's width and its buttons, fields and stepper come from
   Layout/Panel.razor.css; the mark and wordmark from Shared/PanelHeader.razor.css. */

.modal-background .modal-container .modal-shared-message[b-5o04z0mebh] {
    text-align: center;
}

    .modal-background .modal-container .modal-shared-message .modal-shared-title-container[b-5o04z0mebh] {
        display: block;
        font-size: 2rem;
    }

        .modal-background .modal-container .modal-shared-message .modal-shared-title-container .modal-shared-title[b-5o04z0mebh] {
            display: inline-block;
            margin: 15px;
            border-bottom: 1px dotted;
        }

.modal-background .modal-container .already-here[b-5o04z0mebh] {
    text-align: center;
    margin: 0.5rem 0 1rem;
}

    .modal-background .modal-container .already-here .already-here-label[b-5o04z0mebh] {
        display: block;
        font-size: 0.8em;
        margin-bottom: 0.3em;
    }

    .modal-background .modal-container .already-here .already-here-name[b-5o04z0mebh] {
        width: auto;
        height: auto;
        margin: 0.2em;
        padding: 0.3em 0.9em;
        border-radius: 20px;
    }
/* /Components/Panels/MembersPanel.razor.rz.scp.css */
/* The heading, as Gatherings has it (GatheringsList.razor.css), clear of the ✕. */
.members-head[b-5lmfsfgrf1] {
    align-self: stretch;
    padding: 0 44px 0 4px;
}

    .members-head h2[b-5lmfsfgrf1] {
        margin: 0;
        font-family: var(--font-wordmark);
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.2;
        color: inherit;
    }

    .members-head p[b-5lmfsfgrf1] {
        margin: 0;
        font-size: 0.85rem;
        opacity: 0.8;
    }

/* A row each: the name's pill on the left, when on the right. */
.members-list[b-5lmfsfgrf1] {
    align-self: stretch;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.members-row[b-5lmfsfgrf1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--card-text) 6%, transparent);
}

/* The person's voter colour, as in WhoNames.razor.css, a little bigger. */
.members-person[b-5lmfsfgrf1] {
    min-width: 0;
    max-width: 60%;
    padding: 1px 10px;
    border-radius: 999px;
    background-color: hsl(var(--voter-hue, 270) 35% 45%);
    color: white;
    font-weight: 700;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    /* You: a ring around your pill. */
    .members-person.me[b-5lmfsfgrf1] {
        box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3.5px var(--card-text);
    }

.members-when[b-5lmfsfgrf1] {
    flex: none;
    font-size: 0.85rem;
    color: var(--card-text-soft);
    white-space: nowrap;
}

.modal-background .members-panel .members-done[b-5lmfsfgrf1] {
    margin-top: 16px;
}
/* /Components/Panels/ProfilePanel.razor.rz.scp.css */
/* Profile panel: your badge, your name (and changing it), and dark mode. The panel's width and its buttons and
   fields come from Layout/Panel.razor.css. */

/* The same bubble as your votes on the days, only bigger. */
.modal-background .profile-panel .profile-badge[b-wz06l4cm1l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--card-bg);
    box-shadow: 0 0 0 3px var(--magic-color-accent), 0 0 24px var(--glow);
    background-color: hsl(var(--voter-hue, 270) 35% 45%);
    color: white;
    font-size: 44px;
    font-weight: bold;
    /* Capitals sit a little high; see .voter in the calendar. */
    padding-top: 0.1em;
    margin-bottom: 0.6rem;
}

.modal-background .profile-panel .profile-name[b-wz06l4cm1l] {
    font-size: 2rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.modal-background .profile-panel .profile-caption[b-wz06l4cm1l] {
    font-size: 0.85em;
    color: var(--card-text-soft);
    margin-bottom: 0.4rem;
}

.modal-background .profile-panel form[b-wz06l4cm1l] {
    width: 100%;
}

.modal-background .profile-panel .theme-switch[b-wz06l4cm1l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1.2rem;
    padding: 0.8rem 0;
    border-top: 1px solid color-mix(in srgb, var(--card-text) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--card-text) 15%, transparent);
    cursor: pointer;
}

    /* A sliding switch drawn on the checkbox itself. */
    .modal-background .profile-panel .theme-switch input[b-wz06l4cm1l] {
        appearance: none;
        position: relative;
        width: 48px;
        height: 28px;
        margin: 0;
        border-radius: 14px;
        background-color: color-mix(in srgb, var(--card-text) 25%, transparent);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .modal-background .profile-panel .theme-switch input[b-wz06l4cm1l]::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: white;
            transition: transform 0.2s ease;
        }

        .modal-background .profile-panel .theme-switch input:checked[b-wz06l4cm1l] {
            background-color: var(--magic-color-accent);
        }

            .modal-background .profile-panel .theme-switch input:checked[b-wz06l4cm1l]::after {
                transform: translateX(20px);
            }
/* /Components/Panels/RemoveVotePanel.razor.rz.scp.css */
.modal-background .confirm-panel .confirm-text[b-3m6q86eld9] {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;
}
/* /Components/Panels/SettingsPanel.razor.rz.scp.css */
/* Calendar settings, opened from the cog. The panel's width and its buttons, fields and stepper come from
   Layout/Panel.razor.css. */

.modal-background .settings-panel h3[b-775adw2nml] {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.modal-background .settings-panel form[b-775adw2nml] {
    width: 100%;
}

/* The calendar's time zone, under the fields. */
.modal-background .settings-panel .settings-time-zone[b-775adw2nml] {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: var(--card-text-soft);
    text-align: center;
}

/* The calendar's key, which isn't shown anywhere else, with a way to share or copy its link. */
.modal-background .settings-panel .settings-link[b-775adw2nml] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    width: 100%;
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--card-text) 15%, transparent);
    font-size: 0.9rem;
}

    .modal-background .settings-panel .settings-link .settings-link-label[b-775adw2nml] {
        color: var(--card-text-soft);
    }

    .modal-background .settings-panel .settings-link .settings-link-key[b-775adw2nml] {
        font-weight: bold;
        letter-spacing: 0.04em;
    }

    .modal-background .settings-panel .settings-link .settings-link-copy[b-775adw2nml] {
        position: relative;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0.3em 0.9em;
        border-radius: 16px;
        font-size: 0.85rem;
    }

/* "Copied", shown for a moment above "Share link" by conjr.shareChip. Matches the title pill's. */
.settings-link .link-copied[b-775adw2nml] {
    position: absolute;
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0.3em 0.9em;
    border-radius: 12px;
    background-color: var(--magic-color-accent);
    color: #1f1a2e;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    display: none;
}

    .settings-link .link-copied.show[b-775adw2nml] {
        display: block;
        animation: linkCopied-b-775adw2nml 1.5s ease forwards;
    }

@keyframes linkCopied-b-775adw2nml {
    0% { opacity: 0; }
    15% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}
/* /Components/Shared/AccountMenu.razor.rz.scp.css */
/* The page renders two menus: Top (desktop, top-right of the window) and Bottom (phones, in the bottom
   action bar). Each is hidden at the width where the other applies. */

.account-menu[b-3sgrh4nafg] {
    font-family: var(--font-primary);
    z-index: 2;
}

/* Pinned to the window's top-right (not the bar's): the calendar can be wider than the window. */
.account-menu--top[b-3sgrh4nafg] {
    position: fixed;
    top: 0.6em;
    right: 16px;
}

.account-menu--bottom[b-3sgrh4nafg] {
    display: none;
}

.account-button[b-3sgrh4nafg] {
    display: flex;
    align-items: center;
    gap: 0.3em;
    background: transparent;
    color: var(--button-icon-light, whitesmoke);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 0.25em 0.9em;
    font-size: 1rem;
    cursor: pointer;
}

    .account-button:hover[b-3sgrh4nafg] {
        background-color: var(--magic-color-hover);
    }

.account-caret[b-3sgrh4nafg] {
    font-size: 0.8em;
}

.account-initial[b-3sgrh4nafg] {
    display: none;
}

@media only screen and (max-width: 768px) { /* MOBILE: initial badge in the bottom action bar */

    .account-menu--top[b-3sgrh4nafg] {
        display: none;
    }

    /* Placed in the bottom bar's button row by Calendar.razor.css. */
    .account-menu--bottom[b-3sgrh4nafg] {
        display: block;
        position: relative;
    }

    /* Looks like the person's voter bubble on the days (Calendar.razor.css): their hue, a white ring, and the
       same top padding to centre the capital. :hover too, since touch screens keep it after a tap. */
    .account-button[b-3sgrh4nafg],
    .account-button:hover[b-3sgrh4nafg] {
        width: 40px;
        height: 40px;
        padding: 0.1em 0 0;
        justify-content: center;
        border-radius: 50%;
        background-color: hsl(var(--voter-hue, 270) 35% 45%);
        color: white;
        border: 2px solid var(--card-bg);
    }

    .account-name[b-3sgrh4nafg] {
        display: none;
    }

    .account-initial[b-3sgrh4nafg] {
        display: inline;
        font-weight: bold;
        font-size: 1.2rem;
    }
}
/* /Components/Shared/ActivityMessage.razor.rz.scp.css */
/* The pill, then the words in their own column, so a long line wraps under the words, not under the pill. */
.activity-message[b-j89dsgk2d5] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

/* The person's voter colour (CalendarDay.razor.css), as the background of their name. */
.activity-person[b-j89dsgk2d5] {
    flex: none;
    max-width: 10em;
    padding: 0 7px;
    border-radius: 999px;
    background-color: hsl(var(--voter-hue, 270) 35% 45%);
    color: white;
    font-weight: 700;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-text[b-j89dsgk2d5] {
    min-width: 0;
}

    .activity-text > span + span[b-j89dsgk2d5]::before {
        content: " · ";
        font-style: normal;
        color: var(--card-text-soft);
    }

.activity-said[b-j89dsgk2d5] {
    color: var(--card-text);
}

/* What the summoning did: said by no one. */
.activity-note[b-j89dsgk2d5] {
    font-style: italic;
    color: var(--card-text-soft);
}

.activity-when[b-j89dsgk2d5] {
    color: var(--card-text-soft);
    opacity: 0.75;
}
/* /Components/Shared/PanelHeader.razor.rz.scp.css */
/* The top of the home and creation panels: the mark, with the wordmark under it. The wordmark's look (outline and
   glow) is the global .wordmark in app.css; these size and place them. */

.modal-background .modal-container .logo-mark-panel[b-ad539gzy1f] {
    width: 104px;
    margin-bottom: 10px;
}

.modal-background .modal-container .panel-wordmark[b-ad539gzy1f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

/* The "conjr" wordmark under the mark, without a pill behind it. */
.modal-background .modal-container .title-name[b-ad539gzy1f] {
    font-size: 4.2rem;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.modal-background .modal-container .title-heading[b-ad539gzy1f] {
    margin-bottom: 35px;
    margin-top: 20px;
}
/* /Components/Shared/WhoFaces.razor.rz.scp.css */
/* A row of overlapping bubbles. Where they sit sets --face-size, --face-font and --face-ring (the colour behind them,
   which the ring between bubbles matches). */
.who-faces[b-i6mcobykup] {
    display: inline-flex;
    align-items: center;
    flex: none;
    line-height: 1;
}

.who-face[b-i6mcobykup] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--face-size, 22px);
    height: var(--face-size, 22px);
    margin-left: -7px;
    border-radius: 50%;
    border: 2px solid var(--face-ring, var(--card-bg));
    background-color: hsl(var(--voter-hue, 270) 35% 45%);
    color: white;
    font-size: var(--face-font, 11px);
    font-weight: bold;
    box-sizing: border-box;
    /* Capitals sit a little above the centre of their line box, so a small top padding centres the letter itself in
       the circle (measured for Alegreya Sans: within 0.2px). */
    padding-top: 0.1em;
}

    .who-face:first-child[b-i6mcobykup] {
        margin-left: 0;
    }

    .who-face.more[b-i6mcobykup] {
        background-color: #5D5C58;
        font-size: calc(var(--face-font, 11px) - 2px);
    }

    /* Someone who can't: their bubble, faded, with a line through it. */
    .who-face.cant[b-i6mcobykup] {
        position: relative;
        filter: saturate(0.35);
        opacity: 0.85;
    }

        .who-face.cant[b-i6mcobykup]::after {
            content: "";
            position: absolute;
            left: 2px;
            right: 2px;
            top: 50%;
            height: 2px;
            background-color: white;
            transform: rotate(-45deg);
        }
/* /Components/Shared/WhoList.razor.rz.scp.css */
.who-list[b-1tjfb2nv2r] {
    --face-size: 22px;
    --face-font: 11px;
    font-size: 0.85rem;
    color: var(--card-text-soft);
}

/* The folded list: bubbles, count and a small arrow, the whole of it one button. Under .who-list, to win over the
   panels' own button style (.modal-container button, Panel.razor.css), as it shows in Gatherings. */
div.who-list button.who-fold[b-1tjfb2nv2r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 2px 6px 2px 2px;
    border: none;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    div.who-list button.who-fold:hover[b-1tjfb2nv2r] {
        background-color: color-mix(in srgb, var(--card-text) 8%, transparent);
    }
}

.who-count[b-1tjfb2nv2r] {
    white-space: nowrap;
}

.who-chevron[b-1tjfb2nv2r] {
    font-size: 18px;
    transition: transform 0.22s ease;
}

    .who-chevron.open[b-1tjfb2nv2r] {
        transform: rotate(180deg);
    }

/* The names roll open and shut under it, as the Gatherings sections do: a grid row growing from nothing to its
   content's height. Closed, it's inert, so focus can't land in it. */
.who-roll[b-1tjfb2nv2r] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.22s ease, opacity 0.22s ease;
}

    .who-roll.open[b-1tjfb2nv2r] {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .who-roll > .who-clip[b-1tjfb2nv2r] {
        min-height: 0;
        overflow: hidden;
        /* Room for your pill's ring, which the clip would otherwise cut. */
        padding: 6px 4px 2px;
        margin: 0 -4px;
    }

@media (prefers-reduced-motion: reduce) {
    .who-roll[b-1tjfb2nv2r],
    .who-chevron[b-1tjfb2nv2r] {
        transition: none;
    }
}
/* /Components/Shared/WhoNames.razor.rz.scp.css */
/* Two columns: the labels, as wide as the widest of them, and the pills wrapping beside them. Lined up by their tops
   (a label and a pill are the same height), not their baselines: the label's icon puts its baseline off. */
.who-names[b-sdktw19z14] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--card-text) 6%, transparent);
    font-size: 13px;
    text-align: left;
}

.who-title[b-sdktw19z14] {
    grid-column: 1 / -1;
    color: var(--card-text);
    font-weight: 700;
}

.who-row[b-sdktw19z14] {
    display: contents;
}

.who-label[b-sdktw19z14] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--card-text-soft);
    white-space: nowrap;
}

    .who-label .material-symbols-rounded[b-sdktw19z14] {
        font-size: 15px;
    }

.who-row.cant .who-label[b-sdktw19z14] {
    color: var(--block);
}

.who-people[b-sdktw19z14] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The person's voter colour as the background of their name, as in the activity chat (ActivityMessage.razor.css). */
.who-person[b-sdktw19z14] {
    max-width: 10em;
    padding: 0 7px;
    border-radius: 999px;
    background-color: hsl(var(--voter-hue, 270) 35% 45%);
    color: white;
    font-weight: 700;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .who-row.cant .who-person[b-sdktw19z14] {
        filter: saturate(0.35);
        opacity: 0.85;
        text-decoration: line-through;
    }

    /* Not answered yet: just an outline. */
    .who-row.waiting .who-person[b-sdktw19z14] {
        background-color: transparent;
        color: var(--card-text-soft);
        box-shadow: inset 0 0 0 1.5px hsl(var(--voter-hue, 270) 35% 55%);
    }

    /* You: a ring around your pill. */
    .who-person.me[b-sdktw19z14] {
        box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3.5px var(--card-text);
    }

    .who-row.waiting .who-person.me[b-sdktw19z14] {
        box-shadow: inset 0 0 0 1.5px hsl(var(--voter-hue, 270) 35% 55%), 0 0 0 2px var(--card-bg), 0 0 0 3.5px var(--card-text);
    }