/* /Components/Calendar/AreaCalendar.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-f0h1rgfeyw] {
    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-f0h1rgfeyw] {
    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. */
/* The pin rides the nav row as one of its items — it holds its size there rather than stretching or
   shrinking with the row.

   It is also what the first-visit bubble hangs off: position:relative makes this box the bubble's
   containing block, so "centred under the pin" is simply 50% of it. Keep it holding nothing but the pin, or
   that centre stops being the pin's. */
.location-line[b-f0h1rgfeyw] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* The first-visit bubble itself (#459). Drawn here rather than by MudPopover's paper, because a speech
   bubble is a surface plus an arrow and the paper has no notion of the arrow. Deliberately the loud
   surface — the accent colour, not the page's — since the whole point is that it be the thing a first-time
   visitor cannot read past. */
.area-hint[b-f0h1rgfeyw] {
    /* Hung off the pin (.location-line) rather than laid out in the nav row: the row is the page's tightest
       real estate and the bubble must not take a line of it. Above the grid, which starts right underneath. */
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Clear of the pin, leaving exactly the arrow's height to bridge the gap. */
    margin-top: 10px;
    /* Wide enough for the sentence on a desktop, never wider than the box it has to sit in — which
       AreaCalendar.razor.js measures, because the page is inset from the window by the layout's padding and
       only the browser knows by how much. The viewport is the fallback for before that measurement lands. */
    width: max-content;
    max-width: min(22rem, var(--area-hint-max-width, calc(100vw - 2rem)));
    padding: 0.5rem 0.5rem 0.5rem 0.85rem;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: var(--mud-elevation-8);
    /* Centred on the pin, then moved back by however much that hung off the side of the screen — which on a
       phone is plenty, since the pin sits near the left edge of a wrapped nav row (#459). The shift is set
       by AreaCalendar.razor.js and is zero wherever there is room, which is every desktop. */
    transform: translateX(calc(-50% + var(--area-hint-shift, 0px)));
}

/* The arrow, pointing back up at the pin. A bordered zero-size box is the standard triangle: only the
   bottom edge is coloured, so the box reads as a wedge whose tip is at the top. */
.area-hint[b-f0h1rgfeyw]::before {
    content: "";
    position: absolute;
    top: -10px;
    /* The arrow rides the bubble, so it gives back whatever the bubble moved and stays over the pin — the
       bubble shifts, what it points at does not. Clamped short of the bubble's own corners so it is always
       a tail on a surface rather than a triangle floating off the end of one. */
    left: clamp(14px, calc(50% - var(--area-hint-shift, 0px)), calc(100% - 14px));
    transform: translateX(-50%);
    border-inline: 8px solid transparent;
    border-bottom: 10px solid var(--mud-palette-primary);
}

/* The sentence takes what the row has left; the button keeps its own width. */
.area-hint-text[b-f0h1rgfeyw] {
    flex: 1 1 auto;
}

/* "Got it" sits on the accent surface, so it takes its colour from the bubble (Color.Inherit) and needs a
   ground of its own to read as a control rather than as more of the sentence. */
.area-hint[b-f0h1rgfeyw]  .area-hint-dismiss {
    flex: 0 0 auto;
    background-color: rgb(255 255 255 / 0.18);
}

.area-hint[b-f0h1rgfeyw]  .area-hint-dismiss:hover {
    background-color: rgb(255 255 255 / 0.3);
}

/* The place name is bounded by structure (Area.ShortName takes the first line of the address) but not by
   width — one component can still be "Kirkcudbrightshire". Cap and ellipsise it so a long name can't grow
   the nav row and push the month picker onto a line of its own; the name in full is in the tooltip and in
   the picker. rem on wide screens, viewport-relative on narrow ones, matching the month picker's cap. */
.location-name[b-f0h1rgfeyw] {
    display: inline-block;
    max-width: min(9rem, 34vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* The ellipsis box sits on the text baseline by default, which lifts the label off centre next to the
       pin; bottom-aligning it puts the name back in line with the icon and the count. */
    vertical-align: bottom;
}

/* The count trails the name as the second value: the name answers "here is where", the count "is there
   anything here". It used to be quieter than the name (0.75 opacity, plain text) and testers read straight
   past it — the one figure that separates "nothing on here" from "the page didn't load" was the least
   noticeable thing on the row (#394). It is a pill now: its own ground, its own weight, and no uppercasing
   (it sits inside a MudButton) so the empty case can spell itself out as a sentence. */
.location-count[b-f0h1rgfeyw] {
    margin-left: 0.4em;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

/* The second figure, present only when the grid is drawing followed sessions from outside the area (#370).
   It borrows the followed chips' own colours so the pill and the chips it accounts for are visibly the same
   thing — the viewer can match the number to what's on the grid without being told which chips it means. */
.location-followed[b-f0h1rgfeyw] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.3em;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background-color: var(--sessions-calendar-event-followed-background-color);
    color: var(--sessions-calendar-event-followed-text-color);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

/* MudIcon renders its svg as a child component, so the scope attribute never lands on it — ::deep is the
   only way to reach it. Size.Small is still a shade taller than the pill's text; bring it down to the
   figure it sits beside so the pill keeps the same height as the count pill next to it. */
.location-followed[b-f0h1rgfeyw]  .mud-icon-root {
    font-size: 1rem;
}

/* The inert readout, on a page whose area came from the URL. Deliberately not styled as the button: it is
   the secondary text colour rather than the accent, and it has no hover or pointer, so nothing about it
   offers a click it would not honour. Padding matches the text button's so the nav row keeps its rhythm
   whichever form is showing. */
.location-fixed[b-f0h1rgfeyw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 6px 8px;
    color: var(--mud-palette-text-secondary);
    cursor: default;
}

/* The week on screen (#389). One of the nav row's own items, holding its size there the way the location
   pin does — it must never be the thing that pushes the row to another line, because the page is a fixed
   height and every line the header takes is one the grid does not get. Quiet, because it is a readout and
   not a control, but weighted, because it is the answer to "where am I" that the picker beside it cannot
   give in week view. */
.week-range[b-f0h1rgfeyw] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* MudSwipeArea is a plain div, so it would collapse the height chain between .calendar-host and the grid
   inside it (which sizes itself against a definite height). Pass the host's height straight through.
   ::deep because the class lands on a child component's root, which carries no scope attribute. */
.calendar-host[b-f0h1rgfeyw]  .calendar-swipe {
    height: 100%;
    min-height: 0;
    /* MudSwipeArea ships touch-action:none, which claims pinch-zoom along with the drag. Give the browser
       two fingers back: the grid is exactly what a viewer with poor sight wants to magnify, and nothing in
       here pans, so one finger is ours to read without taking the zoom with it. */
    touch-action: pinch-zoom;
}

/* Playing a step in (#389). A period change remounts the grid (@key on the displayed date), so an animation
   on it replays on every navigation — and giving that animation a direction is what makes a step read as
   MOVEMENT along the calendar rather than as the contents being swapped out underneath you. It is the swipe
   gesture's other half: the drag now has somewhere to have gone.

   The offset is small on purpose. There is only ever one grid — the outgoing period is destroyed the moment
   the new one mounts — so a full-width slide would be a grid flying in across empty space. A short travel
   plus the fade carries the direction without pretending to a hand-off that isn't there.

   Which axis the travel runs along follows the layout, not the gesture: portrait stacks the week into rows
   running down the screen (WeekPlanner.razor.css transposes it there), so the period moves vertically; a
   wide screen lays the days out across, so it moves sideways. Held as a pair of custom properties because
   they are read from inside the keyframes, which the grid inherits them down to. */
.calendar-host[b-f0h1rgfeyw] {
    --calendar-step-x: 1;
    --calendar-step-y: 0;
}

@media (orientation: portrait) {
    .calendar-host[b-f0h1rgfeyw] {
        --calendar-step-x: 0;
        --calendar-step-y: 1;
    }
}

/* The grid belongs to the month/week components, so ::deep to reach it; the class saying which way the step
   went is on the host, which does not remount, so the newly mounted grid picks up the right keyframes. */
.calendar-host[b-f0h1rgfeyw]  .grid {
    animation: calendar-step-in-b-f0h1rgfeyw 250ms ease-out;
}

.calendar-host.step-forward[b-f0h1rgfeyw]  .grid {
    animation-name: calendar-step-forward-b-f0h1rgfeyw;
}

.calendar-host.step-back[b-f0h1rgfeyw]  .grid {
    animation-name: calendar-step-back-b-f0h1rgfeyw;
}

/* Later periods live below (portrait) or to the right, so a forward step arrives from there and settles. */
@keyframes calendar-step-forward-b-f0h1rgfeyw {
    from {
        opacity: 0;
        transform: translate(calc(var(--calendar-step-x) * 8%), calc(var(--calendar-step-y) * 8%));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes calendar-step-back-b-f0h1rgfeyw {
    from {
        opacity: 0;
        transform: translate(calc(var(--calendar-step-x) * -8%), calc(var(--calendar-step-y) * -8%));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* A first paint, or a view switch, went in no direction — it only appears. */
@keyframes calendar-step-in-b-f0h1rgfeyw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Respect users who prefer reduced motion: no travel, and no fade either — the period simply is what it is.
   The range readout above the grid still says where the step landed, so nothing is carried by motion alone. */
@media (prefers-reduced-motion: reduce) {
    .calendar-host[b-f0h1rgfeyw]  .grid,
    .calendar-host.step-forward[b-f0h1rgfeyw]  .grid,
    .calendar-host.step-back[b-f0h1rgfeyw]  .grid {
        animation: none;
    }
}

/* 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-f0h1rgfeyw]  .month-nav-picker {
    max-width: min(12rem, 60vw);
}

/* Phone (#389): the chevrons are what moves the range, and on a handset they were the last thing a tester
   found — a bare 24px mark on no ground, reading as decoration flanking the picker rather than as the
   controls. The tap target was never the problem: it already measures 48px, the platform minimum on Android
   and iOS alike. What was missing was any sign of where it was. Draw it — an edge and a ground of its own,
   held at that same 48px, which the border would otherwise grow — and size the mark inside to match. */
@media (max-width: 600px) {
    .calendar-page[b-f0h1rgfeyw]  .nav-step {
        width: 48px;
        height: 48px;
        border: 1px solid var(--mud-palette-lines-default);
        background-color: var(--mud-palette-background-grey);
    }

    .calendar-page[b-f0h1rgfeyw]  .nav-step .mud-icon-root {
        font-size: 1.75rem;
    }
}

/* Portrait week view (#535): the days run down the screen, so the chevrons point along them — back up, onward
   down — rather than sideways across a layout that no longer goes that way. A quarter turn clockwise takes
   the left chevron to up and the right to down. The condition must stay the one WeekPlanner.razor.css
   transposes the week under; month view is still a grid laid out across, so it keeps left and right. */
@media (orientation: portrait) {
    .calendar-page[b-f0h1rgfeyw]  .nav-step-week .mud-icon-root {
        transform: rotate(90deg);
    }
}
/* /Components/Calendar/BaseCalendar.razor.rz.scp.css */
/* The cell a day's chips sit in, shared by the month grid (Calendar.razor) and the week planner
   (WeekPlanner.razor) through a common CssScope (see Sessions.Web.csproj) — the documented way to inherit
   scoped CSS from a base component, needed because BaseCalendar renders no markup of its own for a scope to
   be stamped on.

   Only what is true of both. Each grid namespaces its rules under its root (.calendar / .weekplanner), which
   outranks anything here, so a rule in this sheet can add to a grid but never override one — a grid that
   wants something different states it for itself, and those are the only rules left in the two sheets.
   What a chip looks like is in DayChips.razor.css, beside the component that draws it. */

/* Seven equal columns filling the height left to them, the cells separated by a slim gutter that shows the
   page surface through rather than by hairlines. The week planner transposes this to seven rows in portrait
   and says so itself; how a navigation plays the grid in belongs to whatever knew which way it went, and is
   in AreaCalendar.razor.css. */
.grid[sessions-day-grid] {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    background-color: transparent;
}

/* A day is a rounded, bordered card, and positioned so the month grid's date badge can float over it. */
.day[sessions-day-grid] {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background-color: var(--sessions-calendar-day-background-color);
    color: var(--sessions-calendar-day-text-color);
    border: var(--sessions-calendar-day-border-color);
    border-radius: 8px;
}

/* Fills the cell (which has a definite height), unlike a table cell would.

   The pointer is here rather than on .day because this is the element that carries the click that opens the
   day — the two grids used to disagree about which of them said it, one each, to the same visible effect. */
.td-content[sessions-day-grid] {
    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[sessions-day-grid] {
    background-color: var(--sessions-calendar-hover-background-color);
    color: var(--sessions-calendar-hover-text-color);
}

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

/* The day's chips. Where they sit within the cell, and how far in from its edges, is each grid's own — the
   month stacks them up from the floor, the week centres them in a row.

   A size container, because the chips size themselves to it (DayChips.razor.css). It contains the inline
   axis only, so the list's height is untouched, which matters: that height is what the fit measurement
   reads to decide how many chips a cell can hold. */
ol[sessions-day-grid] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    align-items: flex-start;
    container-type: inline-size;
}

/* Phone widths (#234): the gutters and rounded cards cost a cell width and height it needs for its
   sessions, so the grid goes flush — 1px hairlines drawn by the grid's own line-coloured background showing
   through the gaps, and no per-cell border or rounding. The whole cell is still the tap target, so nothing
   gets harder to touch.

   These override the rules above, which is only possible because they are in the same sheet: a grid's own
   rules are namespaced and outrank everything here, so anything that has to win against one of those cannot
   live in this file. */
@media (max-width: 600px) {
    .grid[sessions-day-grid] {
        gap: 1px;
        background-color: var(--mud-palette-table-lines);
    }

    .day[sessions-day-grid] {
        border: none;
        border-radius: 0;
    }

    .grid ol[sessions-day-grid] {
        gap: 2px;
        /* (#535) On a phone the whole day is one tap target: a busy cell is mostly chips, so a tap anywhere on
           a day opens that day, and the day dialog is where each session is a link of its own. Taken off the
           list rather than the chips so the "+N" row goes with them — it only ever opened the same dialog.
           Pointer events only: the chips stay links to a keyboard or a screen reader. The fit script reads
           this off the list, so it must stay on the list itself (see BaseCalendar.razor.js / CalendarFit). */
        pointer-events: none;
    }
}
/* /Components/Calendar/Calendar.razor.rz.scp.css */
.calendar[sessions-day-grid] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

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

.calendar .weekday[sessions-day-grid] {
    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. */
.calendar .th-content[sessions-day-grid] {
    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%;
}

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

/* How a month change is played in is no longer here: both grids now slide it in the direction the step went
   (AreaCalendar.razor.css), and only the thing that knows which way that was can say. Everything else about
   the grid is in BaseCalendar.razor.css. */

/* Leading/trailing cells belonging to the previous or next month. Like the week view, they show their
   real date and sessions rather than sitting blank, but a greyer fill and a muted date number keep them
   reading as "not this month" so the displayed month stays the focus. Still fully interactive. */
.calendar .day.other-month[sessions-day-grid] {
    background-color: var(--sessions-calendar-day-other-month-background-color);
}

.calendar .day.other-month .date-day[sessions-day-grid] {
    color: var(--mud-palette-text-secondary);
    background-color: var(--sessions-calendar-day-other-month-background-color);
}

/* Declared after the other-month fill so a hovered cell wins over it; the today marker carries !important
   and so keeps its own colour either way. */
.calendar .day > .td-content:hover .date-day[sessions-day-grid] {
    background-color: var(--sessions-calendar-hover-background-color);
}

/* Floats over the cell instead of taking a row of it. A month cell's height is almost entirely spoken for
   by its chips, and this badge in the flow was costing 45 of the ~99px an 800px-tall window leaves — more
   than a chip and its "+N" row together, which is why the grid squashed chips on any screen shorter than
   about 1010px. Out of the flow the list gets the whole cell (see ol), and the two only meet on a day busy
   enough to fill it. .day is already positioned, so this needs nothing else.

   Opaque, and painted with the surface it sits on, so where it does land on a chip it occludes cleanly
   rather than laying the date over a title — the other-month and hover variants below keep it matching. */
.calendar .date-day[sessions-day-grid] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    /* A fixed square, not a content-sized aspect-ratio box: shrink-to-fit sized the width off the digits, so
       "1" drew a narrow oval while "13" came out round — the same trap .th-content documents above. Being
       out of the flow, a fixed size costs the cell nothing. 1.75rem comfortably fits two digits. */
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    border-radius: 50%;
    background-color: var(--sessions-calendar-day-background-color);
}

/* Chips stack up from the floor of the cell, so the badge floating at its top-right stays clear of them on
   every day that isn't busy enough to fill the cell. */
.calendar ol[sessions-day-grid] {
    justify-content: flex-end;
    margin: 1px 2px 5px 5px;
}

/* 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) {
    /* (#390) The badge no longer costs the list any height (it floats — see .date-day above), but on a phone
       it is a big number over a cell only ~50px wide, so a busy day's top chip would disappear under it.
       Smaller here, which keeps it clear of the chips at every phone size we render at. */
    .calendar .date-day[sessions-day-grid] {
        font-size: 0.75rem;
        width: 1.25rem;
        height: 1.25rem;
        margin: 1px;
    }

    .calendar ol[sessions-day-grid] {
        margin: 0 2px 2px 3px;
    }

}
/* /Components/Calendar/DayChips.razor.rz.scp.css */
/* What a chip looks like, beside the component that draws it (DayChips.razor).

   Scoped to this component alone, like any other. A chip looks the same wherever it is drawn, so nothing
   here is named for one grid or the other; a grid that needs to tune one for its own cells reaches in from
   its own sheet with ::deep, and wins on specificity — `.calendar ::deep .event-link` emits as
   `.calendar[sessions-day-grid] .event-link`, three classes against the two of a rule here. */

li[b-jjq39u5mtu] {
    overflow: hidden;
    border-radius: 5px;
    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;
    /* Colour-coded accent spine down the left edge — a mid-tone of the chip's own family (the tokens above),
       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 so those still win on live/interaction state (a
   followed session that is also on now reads as "on now"). */
li.followed[b-jjq39u5mtu] {
    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 so that still overrides it on interaction. */
li.on-now[b-jjq39u5mtu] {
    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);
}
/* A cancelled date, kept in the grid so a viewer looking for the session sees that it is off rather than
   finding nothing at all. Struck and dimmed rather than given its own colour code: it is an absence, not
   another kind of event. Declared last so it dims whatever tint the chip already carries. */
li.cancelled[b-jjq39u5mtu] {
    opacity: 0.6;
}
li.cancelled .event-title[b-jjq39u5mtu] {
    text-decoration: line-through;
}
/* The fit script's stand-in for a chip (see CalendarFit / BaseCalendar.razor.js). Out of the flow and
   invisible, so it adds nothing to the list and no viewer meets it — it is there so a row's height can be
   measured in any cell, including one the cap has emptied. It is an li, so it picks up the same height rules
   a real chip does, which is the point. */
.fit-probe[b-jjq39u5mtu] {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}
.event-overflow[b-jjq39u5mtu] {
    display: flex;
    /* Overrides the chip row's centring so the button fills the row and its whole height is the tap target. */
    align-items: stretch;
    background-color: var(--sessions-calendar-overflow-background-color);
    color: var(--sessions-calendar-overflow-text-color);
    /* Not an event chip, so no accent spine: an outline instead, which is what makes it read as a control
       (#461). An inset shadow rather than a border because a border adds height, and the fit measurement
       (CalendarFit) takes one chip's height as the height of this row too. */
    box-shadow: inset 0 0 0 1px var(--sessions-calendar-overflow-border-color);
}
/* The whole row is the button, the way a chip's whole box is its link (see .event-link): it opens the day
   dialog, where the sessions the cell couldn't fit are. Stripped back to the row it sits in — a button
   brings its own font, border and background, none of which belong here. */
.overflow-button[b-jjq39u5mtu] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    /* Left, on the line a chip's text starts from, because this row is one of the list's items and not a
       caption under it. Centred, it read as a message about the cell rather than a thing in it — most
       obviously in a cell too short for any chip, where it is the only row there is. */
    justify-content: flex-start;
    /* "+3 more" is one token: never broken across lines by a month cell barely wider than it. */
    white-space: nowrap;
    padding: 3px 7px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
/* The button carries its label twice, "+3 more" and "+3"; the words unless the cell is too narrow for them
   (the container query at the foot of this sheet). */
.overflow-short[b-jjq39u5mtu] {
    display: none;
}
.overflow-button:focus-visible[b-jjq39u5mtu] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}
li:hover[b-jjq39u5mtu] {
    background-color: var(--sessions-calendar-event-hover-background-color);
    color: var(--sessions-calendar-event-hover-text-color);
}
/* The chip's whole box is one link to the occurrence page (see BaseCalendar.EventHref) — it carries the
   padding and inner layout so every pixel of the chip is the link's hit area, while the li keeps the colour
   code. Anchors inherit none of the chip's colour by default, hence the explicit inherit + no underline. */
.event-link[b-jjq39u5mtu] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    /* Baseline, not centre: the time is set a size down from the title (see .event-time), and centring two
       different type sizes sits the smaller one's baseline above the larger's — the time read as floating
       over the title rather than as part of the same line. Baseline puts them on one line, which is what a
       chip is. Safe despite the title's overflow: hidden — that clause synthesizes a baseline for INLINE
       blocks, not for flex items, so the title still offers its text's own. */
    align-items: baseline;
    gap: 7px;
    padding: 3px 7px;
    color: inherit;
    text-decoration: none;
}
/* Chips are keyboard-focusable, so they need a visible focus ring; inset so it is not clipped by the cell's
   overflow: hidden. */
.event-link:focus-visible[b-jjq39u5mtu] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}
.event-title[b-jjq39u5mtu] {
    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 do not shrink; tabular figures and a medium weight make them
   a tidy, aligned anchor at the head of each chip.

   em rather than rem: the time is one size down from whatever its own chip is set in, so the hierarchy holds
   in a 14px week row and a 12px month cell alike, and there is one rule to change rather than one per grid
   per breakpoint. The title is the part worth reading; the time gives back the width it can. */
.event-time[b-jjq39u5mtu] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
}
/* Phone widths: a chip is its text plus the least padding that still reads as one — 24px, which is also
   WCAG 2.5.8's minimum target size. It holds that height rather than shrinking, because a flex column would
   otherwise squeeze a busy day's chips into slivers to make them all "fit"; the surplus goes to the count
   row instead (#390). Each grid tightens its own insets around this. */
/* Phone widths: a chip is its text plus the least padding that still reads as one — 24px, which is also
   WCAG 2.5.8's minimum target size. It holds that height rather than shrinking, because a flex column would
   otherwise squeeze a busy day's chips into slivers to make them all "fit"; the surplus goes to the count
   row instead (#390).

   Only the chip rule is here. The grids also go flush and dense at this width, identically, and that rule
   cannot live in this sheet: each grid namespaces its own rules under its root, which puts them at higher
   specificity than anything here, so a shared rule can add to a grid but never override one. What is shared
   here is what no grid sheet mentions. */
@media (max-width: 600px) {
    li[b-jjq39u5mtu] {
        flex: 0 0 auto;
        box-sizing: border-box;
        min-height: 1.5rem;
    }

    /* Give back the vertical space a short phone cell needs for another row. Height, not width, so it is
       true of both grids whatever shape their cells are — each of them used to ask for this separately. */
    .event-link[b-jjq39u5mtu],
    .overflow-button[b-jjq39u5mtu] {
        padding-block: 2px;
    }
}

/* A cell too narrow to say much. A phone month cell's list measures 50px against a week row's 322px, and at
   that width the time alone fills the chip; smaller type and tighter insets buy the title a few more pixels.
   Asked of the container rather than of the grid that owns it, because what makes a chip cramped is the box
   it is in — the month grid is only where that happens to be true today. The list declares itself a size
   container in each grid's own sheet. */
@container (max-width: 120px) {
    .event-link[b-jjq39u5mtu] {
        font-size: 0.75rem;
        padding-inline: 4px;
        gap: 4px;
    }

    .event-overflow[b-jjq39u5mtu] {
        font-size: 0.75rem;
    }

    .overflow-button[b-jjq39u5mtu] {
        padding-inline: 4px;
    }
}

/* Too narrow for "+3 more" at the size above: "+12 more" needs about 58px with its insets, and a phone's
   month cell has 40-50px. The count alone still sits in an outlined button, so it still reads as one. */
@container (max-width: 64px) {
    .overflow-full[b-jjq39u5mtu] {
        display: none;
    }

    .overflow-short[b-jjq39u5mtu] {
        display: inline;
    }
}
/* /Components/Calendar/DaySessionsDialog.razor.rz.scp.css */
/* The day dialog's session rows (#391).

   The rows have been real links since 05091f5, but nothing about them said so: a text button on a plain
   background reads as a printed list, and a phone has no hover to correct that impression. So the
   affordance is carried by the resting state — a tinted, bordered row, a trailing chevron,
   and a target tall enough to hit — with a pressed state for the tap itself. */
.day-sessions[b-zab04snbmu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.day-sessions[b-zab04snbmu]  .day-session-row {
    /* Android's 48dp minimum, held as a floor rather than left to the two lines of label to reach. */
    min-height: 48px;
    /* Label left, chevron hard right. MudButton's inner label span inherits justify-content from the
       root, so setting it here spreads the two. */
    justify-content: space-between;
    text-align: start;
    /* The row's own outline. Neutral rather than the button's colour, so the cancelled/on-now/followed
       colour coding stays where it is — in the text. */
    border: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-grey);
    /* A row is content — a time and a session's name — not a verb. MudBlazor's button typography
       uppercases it by default, which shouts the title and loses its own capitalisation. */
    text-transform: none;
}

/* Everything on the row except the chevron: the label and the status chips that qualify it. One flex group
   so the row's space-between has exactly two things to push apart — without it the chips became siblings of
   the label and the chevron, and the row spread all four evenly across its width.

   Wraps, because a cancelled night that also moved carries three chips and a phone's dialog is not wide
   enough for them beside a title; the label keeps the first line and the chips drop under it. */
.day-sessions[b-zab04snbmu]  .day-session-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* The row's own words. Sized to its text rather than growing into the row's slack, so a chip sits against
   the title it qualifies instead of drifting across the gap to the chevron. It still shrinks and wraps when
   the title is long — what it must not do is claim space it isn't using. */
.day-sessions[b-zab04snbmu]  .day-session-label {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The time range and its zone, on its own line under the title (#453). Smaller and dimmed rather than
   recoloured, so the row's cancelled/on-now/followed colour still reaches it. */
.day-sessions[b-zab04snbmu]  .day-session-time {
    font-size: 0.8125rem;
    opacity: 0.8;
}

/* The tap itself. MudBlazor's ripple covers the gesture on a mouse; this is what a finger sees while it
   is still down. */
.day-sessions[b-zab04snbmu]  .day-session-row:active {
    background-color: var(--mud-palette-action-default-hover);
}
/* /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). What a chip looks like
   is not here: that is the same in both grids and lives once, in BaseCalendar.razor.css, which reaches this
   sheet through a shared CssScope. Every rule below is namespaced under .weekplanner for that same reason —
   the shared scope is on the month grid's markup too. */
.weekplanner[sessions-day-grid] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 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. */
.weekplanner .day-head[sessions-day-grid] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 2px 3px;
}

.weekplanner .dow[sessions-day-grid] {
    text-transform: uppercase;
    font-size: small;
    color: var(--mud-palette-text-secondary);
}

.weekplanner .date[sessions-day-grid] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
}

/* The day number sits in a pill that carries the today highlight, echoing the month grid's circular
   date badge. Named .date-day to share that highlight vocabulary. */
.weekplanner .date-day[sessions-day-grid] {
    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;
}

.weekplanner .month-tag[sessions-day-grid] {
    text-transform: uppercase;
    font-size: small;
    color: var(--mud-palette-text-secondary);
}

/* 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) {
    /* Seven full-width day ROWS instead of seven columns. */
    .weekplanner .grid[sessions-day-grid] {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, 1fr);
    }

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

    .weekplanner .day-head[sessions-day-grid] {
        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. */
    .weekplanner .date[sessions-day-grid] {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* Events fill the rest of the row, vertically centred when there are only a few. */
    .weekplanner ol[sessions-day-grid] {
        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) {
    .weekplanner .day-head[sessions-day-grid] {
        gap: 0;
        padding: 2px;
    }

    .weekplanner .dow[sessions-day-grid],
    .weekplanner .month-tag[sessions-day-grid] {
        font-size: 0.7rem;
        line-height: 1.15;
    }

    .weekplanner .date-day[sessions-day-grid] {
        min-width: 1.6rem;
        height: 1.6rem;
    }
}
/* /Components/HiddenPageHeading.razor.rz.scp.css */
/* In the document and in the accessibility tree, but not on screen. Deliberately NOT display:none or
   visibility:hidden — both remove the element from the accessibility tree, which is the one thing this
   heading exists to be in. The clip-rect pair is the long-standing form of this: it keeps the element a
   focusable 1px box, so FocusOnNavigate can move focus to it, without the 0x0 size that some browsers
   refuse to focus. */
.visually-hidden[b-b16a97f9hi] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Instance/SessionTitle.razor.rz.scp.css */
/* Up to three flex items on a wrapping row: Leading, the heading group and Trailing. The heading group's
   basis is the title on one line, so a title that won't fit beside Trailing pushes Trailing onto the next
   line; one that won't fit beside Leading either takes a line of its own below it, leaving Leading alone on
   the line above — on a phone, that is most titles. Only then does the title shrink to the row and wrap its
   text: it goes multi-line only once it has the row to itself. The heading's auto margin keeps Trailing on
   the right when they share a line, and at the start when it is alone. */
.session-title[b-93pdcp1bpe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.session-title-heading[b-93pdcp1bpe] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    margin-right: auto;
}

/* The icon button carries its own padding, so the row's gap would set it well apart from the title it
   belongs to; this pulls it back to the pencil's distance on the other side. */
.session-title-leading[b-93pdcp1bpe] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: -12px;
}

/* min-width: 0 lets the heading shrink below its one-line width, so it wraps and the pencil keeps its
   place; overflow-wrap covers a single unbreakable word (a URL) that would otherwise overflow the page. */
.session-title-heading[b-93pdcp1bpe]  h1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* One heading line tall, with the pencil centred in it: the pencil sits against the title's first line
   however many lines the title wraps to. Must track the Typo.h4 the heading is set in. */
.session-title-action[b-93pdcp1bpe] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: calc(var(--mud-typography-h4-size) * var(--mud-typography-h4-lineheight));
}

.session-title-trailing[b-93pdcp1bpe] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* The follow control renders nothing until it has loaded (and nothing if the read fails). An empty group
   would still take a line of its own under a long title. */
.session-title-trailing:empty[b-93pdcp1bpe] {
    display: none;
}
/* /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/Search/PlaceLines.razor.rz.scp.css */
/* MudText sets a <p>, which carries block margins and body line-height. Both are wrong for two lines
   stacked inside one dropdown row: the row grows and the pair stops reading as one item. */
.place-lines[b-65c81f03tr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.place-lines[b-65c81f03tr]  p {
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Search/SessionSearch.razor.rz.scp.css */
/* The chip replaces what's IN the search box, not the box itself: the slot keeps the field's shell — the
   same pill outline, the same 40px height, the same magnifier at the same offset — so a committed search
   still reads as the search control rather than as a coloured tag floating in the bar. The host's layout
   classes (flex-grow-1, the max-width) come in on Class/Style exactly as they did on the field. The border
   colour is the one MudBlazor gives an outlined input, so the shell tracks the theme. */
.search-chip-slot[b-fc2lc7rlq8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 1px 6px 1px 12px;
    border: 0.8px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
}

/* The magnifier holds the start-adornment slot it had on the field, and holds its size whatever the label
   does — it's the "this is the search" marker, not decoration on the chip. */
.search-chip-slot[b-fc2lc7rlq8]  .search-chip-adornment {
    flex: 0 0 auto;
}

/* ::deep reaches the MudChip child. Its default margin would offset it from where the input's box sat, and
   an unbounded width would let a long place name push the app bar's other controls out — so it's capped to
   the slot. MudChip fixes its own height for a single line; a wrapped label has to be allowed to grow. */
.search-chip-slot[b-fc2lc7rlq8]  .mud-chip {
    margin: 0;
    max-width: 100%;
    height: auto;
    min-height: 32px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* The label says what the calendar is actually scoped to, so it wraps in full rather than truncating —
   an elided place name ("Portobello, Edinburgh, Sco…") is exactly the part a reader needs. Wrapping
   anywhere keeps an unbroken token inside the slot instead of pushing it off a phone screen. */
.search-chip-slot[b-fc2lc7rlq8]  .mud-chip-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A label long enough to wrap drops a type step with tighter leading: vertical space in a fixed-height app
   bar is the scarce thing, and the wrapped lines have to fit inside it. Short labels keep the chip's normal
   size; a label long enough to need a fourth line at that step drops one further, which buys back the width
   to hold it in three. Measured at 375px against the bar's 56px. */
.search-chip-slot--wrapping[b-fc2lc7rlq8]  .mud-chip-content {
    font-size: 0.75rem;
    line-height: 1.25;
}

.search-chip-slot--dense[b-fc2lc7rlq8]  .mud-chip-content {
    font-size: 0.6875rem;
    line-height: 1.15;
}

/* At that size the label is long enough to need every pixel of the bar's height, so the shell and the chip
   give up their vertical padding to it. */
.search-chip-slot--dense[b-fc2lc7rlq8] {
    padding-top: 0;
    padding-bottom: 0;
}

.search-chip-slot--dense[b-fc2lc7rlq8]  .mud-chip {
    padding-top: 0;
    padding-bottom: 0;
}

/* The icon and the dismiss button are fixed targets: they hold their size whatever the label does, rather
   than being squeezed by it. */
.search-chip-slot[b-fc2lc7rlq8]  .mud-chip .mud-chip-icon,
.search-chip-slot[b-fc2lc7rlq8]  .mud-chip .mud-chip-close-button {
    flex: 0 0 auto;
}

/* On a phone the shell is the wrong trade: the bar is already tight, and the outline plus the magnifier eat
   width the label needs — the chip reads better filling the slot on its own, as it did before the shell.
   Desktop has the room, and there the framing is what stops the chip floating loose in the bar. Same
   breakpoint as the app bar's own phone rules (app.css).

   Measured in the running app at 375px, signed out: the home button, the sign-in button and the menu leave
   the search about 167px, so a wrapped label takes the denser step straight away rather than at the second
   threshold — at that size the bar holds a label of about 72 characters, against 44 at the desktop step. */
@media (max-width: 600px) {
    .search-chip-slot[b-fc2lc7rlq8] {
        border: 0;
        padding: 0;
    }

    .search-chip-slot[b-fc2lc7rlq8]  .search-chip-adornment {
        display: none;
    }

    .search-chip-slot--wrapping[b-fc2lc7rlq8]  .mud-chip-content {
        font-size: 0.6875rem;
        line-height: 1.15;
    }
}