/* /Components/Calendar/Calendar.razor.rz.scp.css */
.calendar[b-vrgkbkeb89] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Weekday header */
.weekdays[b-vrgkbkeb89] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-transform: uppercase;
    font-size: small;
}

.weekday[b-vrgkbkeb89] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Equal fixed width/height so each header cell is a true circle AND the header row keeps a constant
   height regardless of the "today" highlight state. (A content-sized aspect-ratio box changed the row
   height with its state; a fixed height + min-width fixed that but squished the circle into an ellipse
   when the abbreviation was wider than tall.) 2.25rem comfortably fits a 3-letter abbreviation. */
.th-content[b-vrgkbkeb89] {
    box-sizing: border-box;
    width: 2.25rem;
    height: 2.25rem;
    margin: 3px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.weekday.today > .th-content[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-today-background-color) !important;
    color: var(--sessions-calendar-today-text-color) !important;
}

/* Day grid: equal rows that fill the remaining height. grid-template-rows is set inline to
   repeat(rowCount, 1fr) so each week is an equal fraction of the available space. */
.grid[b-vrgkbkeb89] {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Slim gutters between day cells (each a rounded, bordered card) instead of hairline grid lines: the gap
       shows the page surface through and the cells carry their own border. 3px keeps the airier card look
       without wasting width — phone widths drop this to a flush hairline grid entirely (see the xs block at
       the foot). */
    gap: 3px;
    background-color: transparent;
    /* Plays on (re)mount — i.e. each month change, via @key in Home — so navigation fades in rather
       than snapping. The grid element persists through the quick events-load re-render, so events
       fade in with it instead of popping in afterwards. */
    animation: calendar-grid-in-b-vrgkbkeb89 250ms ease-out;
}

@keyframes calendar-grid-in-b-vrgkbkeb89 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Respect users who prefer reduced motion — skip the fade for them. */
@media (prefers-reduced-motion: reduce) {
    .grid[b-vrgkbkeb89] {
        animation: none;
    }
}

.day[b-vrgkbkeb89] {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background-color: var(--sessions-calendar-day-background-color);
    color: var(--sessions-calendar-day-text-color);
    /* Rounded, bordered card now that the cells are gutter-separated rather than line-separated. */
    border: var(--sessions-calendar-day-border-color);
    border-radius: 8px;
}

.day.no-date[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-day-no-date-background-color);
    /* Out-of-month cells recede into the page — no card border. */
    border-color: transparent;
}

.day.today .date-day[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-today-background-color) !important;
    color: var(--sessions-calendar-today-text-color) !important;
}

/* Fills the grid cell (which has a definite height), unlike a table cell. */
.td-content[b-vrgkbkeb89] {
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color 0.15s ease;
}

.day:not(.no-date)[b-vrgkbkeb89] {
    cursor: pointer;
}

.day.selected-day:not(.no-date) .date-day[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-selected-background-color) !important;
    color: var(--sessions-calendar-selected-text-color) !important;
}

.day:not(.no-date) > .td-content:hover[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-hover-background-color);
    color: var(--sessions-calendar-hover-text-color);
}

.date-day[b-vrgkbkeb89] {
    flex-grow: 0;
    aspect-ratio: 1;
    align-self: flex-end;
    text-align: center;
    padding: 5px;
    margin: 3px;
    border-radius: 50%;
}

ol[b-vrgkbkeb89] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 1px 2px 5px 5px;
    padding: 0;
    justify-content: center;
    align-items: flex-start;
}

li[b-vrgkbkeb89] {
    overflow: hidden;
    border-radius: 5px;
    padding: 3px 7px;
    width: 100%;
    background-color: var(--sessions-calendar-event-background-color);
    color: var(--sessions-calendar-event-text-color);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    /* Colour-coded accent spine down the left edge — a mid-tone of the chip's own family (see calendar.css),
       reinforcing the tint code without a second fill. */
    box-shadow: inset 3px 0 0 var(--sessions-calendar-event-accent-color);
}

/* An occurrence from a session the viewer follows (#196): a distinct colour code so followed sessions
   stand out regardless of location. Declared before on-now/:hover/.selected-event so those still win on
   live/interaction state (a followed session that's also on now reads as "on now"). */
li.followed[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-event-followed-background-color);
    color: var(--sessions-calendar-event-followed-text-color);
    box-shadow: inset 3px 0 0 var(--sessions-calendar-event-followed-accent-color);
}

/* An occurrence happening right now: a distinct colour code (the calendar's stand-in for the "On now!"
   tag the pages show). Declared before :hover/.selected-event so those still override it on interaction. */
li.on-now[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-event-on-now-background-color);
    color: var(--sessions-calendar-event-on-now-text-color);
    box-shadow: inset 3px 0 0 var(--sessions-calendar-event-on-now-accent-color);
}

.event-overflow[b-vrgkbkeb89] {
    text-align: center;
    display: inline-block;
    background-color: var(--sessions-calendar-overflow-background-color);
    color: var(--sessions-calendar-overflow-text-color);
    /* The "+N more" row is a plain label, not an event chip — no accent spine. */
    box-shadow: none;
}

li.selected-event[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-event-selected-background-color) !important;
    color: var(--sessions-calendar-event-selected-text-color) !important;
}

li:hover[b-vrgkbkeb89] {
    background-color: var(--sessions-calendar-event-hover-background-color);
    color: var(--sessions-calendar-event-hover-text-color);
}

.event-title[b-vrgkbkeb89] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
}

/* Times never wrap ("8:00 PM" stays whole) and don't shrink; tabular figures + medium weight make them a
   tidy, aligned anchor at the head of each chip. */
.event-time[b-vrgkbkeb89] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Phone widths (#234): on a phone the gutters and per-cell insets waste the room a day cell needs to show its
   sessions. Go dense — a flush, Google-calendar-style grid: collapse the gutters to 1px hairlines drawn by
   the grid's own line-coloured background showing through the gaps, drop the card border and rounding so
   cells butt together, and tighten the inner insets. The whole cell is still the tap target, so nothing gets
   harder to touch. Desktop keeps its slim rounded-card gutters above. */
@media (max-width: 600px) {
    .grid[b-vrgkbkeb89] {
        gap: 1px;
        /* The 1px gaps show this line colour through as hairline grid lines — no per-cell borders needed. */
        background-color: var(--mud-palette-table-lines);
    }

    .day[b-vrgkbkeb89] {
        border: none;
        border-radius: 0;
    }

    /* Out-of-month cells keep a faint fill (not transparent) so the hairline grid stays unbroken across them. */
    .day.no-date[b-vrgkbkeb89] {
        background-color: var(--mud-palette-background-grey);
    }

    .date-day[b-vrgkbkeb89] {
        padding: 3px;
        margin: 2px;
    }

    ol[b-vrgkbkeb89] {
        margin: 1px 2px 3px 3px;
    }

    li[b-vrgkbkeb89] {
        padding: 3px 5px;
        gap: 5px;
    }
}
/* /Components/Calendar/WeekPlanner.razor.rz.scp.css */
/* The week planner reuses the month calendar's event-chip language (the same colour tokens in
   wwwroot/calendar.css). It lays a single week out two ways, keyed off the display orientation:
     - landscape / wide  → seven full-height day COLUMNS (column-first), the default here;
     - portrait / tall    → seven full-width day ROWS (row-first agenda, see the @media block at the foot),
       because seven columns get cramped on a tall, narrow screen — which is the mobile week-view default.
   Each day always states its own date (the week can bleed across a month boundary). The chip/event rules
   deliberately mirror Calendar.razor.css: CSS isolation scopes each component's copy, and the shared
   selectors (li, ol) are too generic to hoist into a global sheet without leaking site-wide. */
.weekplanner[b-q9hekgefuu] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Default (landscape / wide): seven equal, full-height day columns. The slim 3px gap shows the page surface
   through between the rounded day cards, matching the month grid's card look. Portrait on a phone transposes
   this and goes flush/dense — see the foot. */
.grid[b-q9hekgefuu] {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    background-color: transparent;
}

.day[b-q9hekgefuu] {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background-color: var(--sessions-calendar-day-background-color);
    color: var(--sessions-calendar-day-text-color);
    /* Rounded, bordered card, matching the gutter-separated month cells. */
    border: var(--sessions-calendar-day-border-color);
    border-radius: 8px;
}

.td-content[b-q9hekgefuu] {
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.day > .td-content:hover[b-q9hekgefuu] {
    background-color: var(--sessions-calendar-hover-background-color);
    color: var(--sessions-calendar-hover-text-color);
}

/* Dated column header: weekday abbreviation over the day number, with the month shown only where it changes
   (first column / month rollover) so a cross-month week is unambiguous. */
.day-head[b-q9hekgefuu] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 2px 3px;
}

.dow[b-q9hekgefuu] {
    text-transform: uppercase;
    font-size: small;
    color: var(--mud-palette-text-secondary);
}

.date[b-q9hekgefuu] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
}

/* The day number sits in a pill that carries the today / selected highlight, echoing the month grid's
   circular date badge. Named .date-day to share that highlight vocabulary. */
.date-day[b-q9hekgefuu] {
    box-sizing: border-box;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.month-tag[b-q9hekgefuu] {
    text-transform: uppercase;
    font-size: small;
    color: var(--mud-palette-text-secondary);
}

.day.today .date-day[b-q9hekgefuu] {
    background-color: var(--sessions-calendar-today-background-color) !important;
    color: var(--sessions-calendar-today-text-color) !important;
}

.day.selected-day .date-day[b-q9hekgefuu] {
    background-color: var(--sessions-calendar-selected-background-color) !important;
    color: var(--sessions-calendar-selected-text-color) !important;
}

/* Events stack from the top of the (tall) column, so a busy day reads as a list. */
ol[b-q9hekgefuu] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 1px 5px 5px;
    padding: 0;
    align-items: flex-start;
}

li[b-q9hekgefuu] {
    overflow: hidden;
    border-radius: 5px;
    padding: 3px 7px;
    width: 100%;
    background-color: var(--sessions-calendar-event-background-color);
    color: var(--sessions-calendar-event-text-color);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    /* Colour-coded accent spine down the left edge — a mid-tone of the chip's own family (see calendar.css). */
    box-shadow: inset 3px 0 0 var(--sessions-calendar-event-accent-color);
}

li.followed[b-q9hekgefuu] {
    background-color: var(--sessions-calendar-event-followed-background-color);
    color: var(--sessions-calendar-event-followed-text-color);
    box-shadow: inset 3px 0 0 var(--sessions-calendar-event-followed-accent-color);
}

li.on-now[b-q9hekgefuu] {
    background-color: var(--sessions-calendar-event-on-now-background-color);
    color: var(--sessions-calendar-event-on-now-text-color);
    box-shadow: inset 3px 0 0 var(--sessions-calendar-event-on-now-accent-color);
}

.event-overflow[b-q9hekgefuu] {
    text-align: center;
    display: inline-block;
    background-color: var(--sessions-calendar-overflow-background-color);
    color: var(--sessions-calendar-overflow-text-color);
    /* The "+N more" row is a plain label, not an event chip — no accent spine. */
    box-shadow: none;
}

li.selected-event[b-q9hekgefuu] {
    background-color: var(--sessions-calendar-event-selected-background-color) !important;
    color: var(--sessions-calendar-event-selected-text-color) !important;
}

li:hover[b-q9hekgefuu] {
    background-color: var(--sessions-calendar-event-hover-background-color);
    color: var(--sessions-calendar-event-hover-text-color);
}

.event-title[b-q9hekgefuu] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
}

.event-time[b-q9hekgefuu] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Vertical (portrait) displays: transpose the week from column-first to row-first — seven equal, full-width
   day rows, each with its date in a left gutter and its events flowing to the right. This is the mobile
   week-view default, where seven side-by-side columns would be too narrow to read. Pure CSS, so it re-lays
   out instantly on rotate with no flash and no server round-trip. */
@media (orientation: portrait) {
    .grid[b-q9hekgefuu] {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, 1fr);
    }

    /* Date gutter on the left, events to its right. */
    .td-content[b-q9hekgefuu] {
        flex-direction: row;
        align-items: stretch;
    }

    .day-head[b-q9hekgefuu] {
        flex: 0 0 3.5rem;
        justify-content: center;
        padding: 4px 2px;
        /* A hairline divider between the date gutter and the events, echoing the day-card border. */
        border-right: var(--sessions-calendar-day-border-color);
    }

    /* Stack the day number over its month so the gutter stays narrow and every row's date lines up. */
    .date[b-q9hekgefuu] {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* Events fill the rest of the row, vertically centred when there are only a few. */
    ol[b-q9hekgefuu] {
        margin: 5px;
        justify-content: center;
    }
}

/* Phone portrait: two things at once, both scoped tighter than the portrait block above (so larger portrait
   screens — tablets — keep the roomier, card look) and placed after it so these equal-specificity overrides
   win.
   (#240) The seven agenda rows share one fixed, often-short height, so the tall stacked date label — weekday
   over number over month — could outgrow a row and be clipped top and bottom by the day card's overflow
   (worst on the taller weekday + date + month columns). Compact the label — tight line-heights, a slightly
   smaller date pill, no inter-line gap — so the whole thing fits a short row.
   (#234) Go dense to match the month grid: collapse the row gutters to 1px hairlines (the grid's own
   line-coloured background showing through) and drop the card border and rounding, reclaiming row height. */
@media (orientation: portrait) and (max-width: 600px) {
    .grid[b-q9hekgefuu] {
        gap: 1px;
        background-color: var(--mud-palette-table-lines);
    }

    .day[b-q9hekgefuu] {
        border: none;
        border-radius: 0;
    }

    .day-head[b-q9hekgefuu] {
        gap: 0;
        padding: 2px;
    }

    .dow[b-q9hekgefuu],
    .month-tag[b-q9hekgefuu] {
        font-size: 0.7rem;
        line-height: 1.15;
    }

    .date-day[b-q9hekgefuu] {
        min-width: 1.6rem;
        height: 1.6rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
#components-reconnect-modal[b-xqrc6tfh1z] {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1400;
    overflow: hidden;
    background-color: transparent;
    border: none;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
}

#components-reconnect-modal[b-xqrc6tfh1z]::backdrop {
    background: rgba(10, 16, 28, 0.5);
}

#components-reconnect-modal.components-reconnect-show[b-xqrc6tfh1z],
#components-reconnect-modal[open][b-xqrc6tfh1z],
#components-reconnect-modal.components-reconnect-failed[b-xqrc6tfh1z],
#components-reconnect-modal.components-reconnect-repeated-attempt[b-xqrc6tfh1z],
#components-reconnect-modal.components-reconnect-paused[b-xqrc6tfh1z],
#components-reconnect-modal.components-reconnect-resume-failed[b-xqrc6tfh1z],
#components-reconnect-modal.components-pause[b-xqrc6tfh1z],
#components-reconnect-modal.components-resume-failed[b-xqrc6tfh1z] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.components-reconnect-backdrop[b-xqrc6tfh1z] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(90% 60% at 80% 0%, color-mix(in srgb, var(--mud-palette-primary, #594AE2) 12%, transparent), transparent 60%), radial-gradient(80% 55% at 0% 100%, color-mix(in srgb, var(--mud-palette-info, #2196f3) 16%, transparent), transparent 62%), rgba(8, 12, 20, 0.5);
}

.components-reconnect-surface[b-xqrc6tfh1z] {
    width: min(480px, 100%);
    border-radius: var(--mud-default-borderradius, 12px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #e0e0e0) 70%, transparent);
    background: var(--mud-palette-surface, #fff);
    box-shadow: var(--mud-elevation-24, 0 16px 30px rgba(0, 0, 0, 0.28));
    color: var(--mud-palette-text-primary, #1f2937);
    padding: 20px 20px 18px;
}

.components-reconnect-header[b-xqrc6tfh1z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.components-reconnect-header h2[b-xqrc6tfh1z] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.components-reconnect-status-dot[b-xqrc6tfh1z] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mud-palette-warning, #f59e0b);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-warning, #f59e0b) 25%, transparent);
}

.components-reconnect-supporting[b-xqrc6tfh1z],
.components-reconnect-message[b-xqrc6tfh1z] {
    margin: 0;
    line-height: 1.45;
    font-size: 0.95rem;
}

.components-reconnect-supporting[b-xqrc6tfh1z] {
    color: var(--mud-palette-text-secondary, #52607a);
    margin-bottom: 14px;
}

.components-reconnect-message[b-xqrc6tfh1z] {
    font-weight: 500;
}

.components-reconnect-danger[b-xqrc6tfh1z] {
    color: var(--mud-palette-error, #b00020);
}

.components-reconnect-actions[b-xqrc6tfh1z] {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.components-reconnect-first-attempt-visible[b-xqrc6tfh1z],
.components-reconnect-repeated-attempt-visible[b-xqrc6tfh1z],
.components-reconnect-failed-visible[b-xqrc6tfh1z],
.components-pause-visible[b-xqrc6tfh1z],
.components-resume-failed-visible[b-xqrc6tfh1z] {
    display: none;
}

dialog[open].components-reconnect-show .components-reconnect-first-attempt-visible[b-xqrc6tfh1z] {
    display: block;
}

dialog[open].components-reconnect-show .components-rejoin-loader[b-xqrc6tfh1z] {
    display: inline-flex;
}

dialog[open].components-reconnect-failed .components-reconnect-failed-visible[b-xqrc6tfh1z] {
    display: block;
}

dialog[open].components-reconnect-failed #components-reconnect-button[b-xqrc6tfh1z] {
    display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-reconnect-repeated-attempt-visible[b-xqrc6tfh1z] {
    display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-rejoin-loader[b-xqrc6tfh1z] {
    display: inline-flex;
}

dialog[open].components-reconnect-paused .components-pause-visible[b-xqrc6tfh1z],
dialog[open].components-pause .components-pause-visible[b-xqrc6tfh1z] {
    display: block;
}

dialog[open].components-reconnect-paused #components-resume-button[b-xqrc6tfh1z],
dialog[open].components-pause #components-resume-button[b-xqrc6tfh1z],
dialog[open].components-reconnect-resume-failed #components-resume-button[b-xqrc6tfh1z],
dialog[open].components-resume-failed #components-resume-button[b-xqrc6tfh1z] {
    display: block;
}

dialog[open].components-reconnect-resume-failed .components-resume-failed-visible[b-xqrc6tfh1z],
dialog[open].components-resume-failed .components-resume-failed-visible[b-xqrc6tfh1z] {
    display: block;
}

.components-rejoin-loader[b-xqrc6tfh1z] {
    display: none;
    margin-bottom: 10px;
    gap: 8px;
}

.components-rejoin-loader div[b-xqrc6tfh1z] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary, #594AE2);
    animation: reconnect-pulse-b-xqrc6tfh1z 1.2s infinite ease-in-out both;
}

.components-rejoin-loader div:nth-child(1)[b-xqrc6tfh1z] {
    animation-delay: -0.24s;
}

.components-rejoin-loader div:nth-child(2)[b-xqrc6tfh1z] {
    animation-delay: -0.12s;
}

@keyframes reconnect-pulse-b-xqrc6tfh1z {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

#components-reconnect-button[b-xqrc6tfh1z],
#components-resume-button[b-xqrc6tfh1z] {
    display: none;
    min-width: 92px;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--mud-palette-primary, #594AE2);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: filter 140ms ease, transform 140ms ease;
}

#components-reconnect-button:hover[b-xqrc6tfh1z],
#components-resume-button:hover[b-xqrc6tfh1z] {
    filter: brightness(0.95);
}

#components-reconnect-button:active[b-xqrc6tfh1z],
#components-resume-button:active[b-xqrc6tfh1z] {
    transform: translateY(1px);
}

@media (max-width: 600px) {
    .components-reconnect-backdrop[b-xqrc6tfh1z] {
        padding: 14px;
    }

    .components-reconnect-surface[b-xqrc6tfh1z] {
        padding: 16px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Fill the content area (which app.css sizes to the viewport) and clip rather than scroll, so the
   calendar's bottom can never run past the visible field of view. Column layout so the month-nav
   header takes its natural height and the calendar grid flexes to fill whatever remains. */
.calendar-page[b-zwfb9hj00b] {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The calendar fills the space left under the nav header. min-height:0 lets it shrink within the
   flex column so its internal grid (height:100%) resolves against a definite height instead of
   overflowing. */
.calendar-host[b-zwfb9hj00b] {
    flex: 1 1 0;
    min-height: 0;
}

/* The location-context line is a quiet caption under the nav row: it takes its natural height in the
   flex column and its text centres/wraps on a narrow viewport rather than pushing the calendar. */
.location-line[b-zwfb9hj00b] {
    flex: 0 0 auto;
}

/* The month/year picker's input defaults to width:100%, which would stretch across the header and
   push the chevrons out. Cap it responsively — rem on wide screens, viewport-relative on narrow ones
   so it shrinks on mobile instead of a fixed px. ::deep reaches into the MudDatePicker child; its
   inline popover is portaled to MudPopoverProvider, so this width never touches the popup. */
.calendar-page[b-zwfb9hj00b]  .month-nav-picker {
    max-width: min(12rem, 60vw);
}