@import '_content/GVS.Components/GVS.Components.pzmjlubzle.bundle.scp.css';
@import '_content/GVS.MapComponent/GVS.MapComponent.j8jbrsvl27.bundle.scp.css';

/* /Components/Home/DashboardMap.razor.rz.scp.css */
/* The card itself keeps the dashboard's own surface (mh-card, from gvs-myhome.css); only the map
   body is styled here. */
.dm-card[b-1ht6xq00aa]
{
    padding-bottom: 0;
}


.dm-open[b-1ht6xq00aa]
{
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--gvs-fg-3);
    text-decoration: none;
    white-space: nowrap;
}

.dm-open:hover[b-1ht6xq00aa]
{
    text-decoration: underline;
}

/* A height rather than an aspect ratio: the map is a perspective view whose subject is the building,
   and letting it grow with the column width would leave a very tall card on a wide monitor. clamp()
   keeps it worth looking at on a phone without eating the whole viewport.

   Shortened from 42vh/520px because the card was pushing the dashboard past the viewport and giving
   the page a scrollbar it did not have before. The figure that removes the scroll exactly depends on
   the heights of the search hero and product launcher above it, which come from GVS.Components and
   change at their own breakpoints -- so this is a deliberate reduction, not an arithmetic fit, and
   --dm-body-height exists so it can be tuned in one place rather than hunted for. */
.dm-body[b-1ht6xq00aa]
{
    position: relative;
    width: 100%;
    height: var(--dm-body-height, clamp(220px, 30vh, 380px));
    overflow: hidden;
    border-radius: 0 0 var(--gvs-radius-lg, 12px) var(--gvs-radius-lg, 12px);
}

/* TrackingMap renders into whatever box it is given, so it is told to fill this one. ::deep because
   the element belongs to the RCL and carries its scope attribute, not this component's. */
.dm-body[b-1ht6xq00aa]  > *
{
    width: 100%;
    height: 100%;
}

.dm-error[b-1ht6xq00aa]
{
    margin: 0;
    padding: 16px;
    color: var(--gvs-color-error, #b00020);
}

/* Above the phone breakpoint, app.css turns the dashboard into a viewport-height column and hands
   this card's section the one row that grows. These rules carry that down through the card to the
   map body, so it fills what is left exactly rather than leaving a band of white beneath it.

   Deliberately at the END of this file: a media query adds no specificity, so this only beats the
   plain .dm-body height above it by coming later in source order. Moving it up silently restores
   the clamp and the white space with it.

   The breakpoint is kept in step with app.css. Below it the card keeps its clamped height and the
   page scrolls, because a phone genuinely needs more than one viewport for the greeting, hero and
   launcher, and squeezing a 3D card into the remainder would serve nobody. */
@media (min-width: 769px)
{
    .dm-card[b-1ht6xq00aa]
    {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .dm-body[b-1ht6xq00aa]
    {
        flex: 1 1 auto;
        /* Whatever the row leaves, with a floor so a short window gives a small map rather than a
           sliver. */
        height: auto;
        min-height: 220px;
    }
}
/* /Components/Map/MapToolbar.razor.rz.scp.css */
/* The toolbar's own styles. Its POSITIONING stays in Map.razor.css, which has to win a specific
   cascade fight against ".map-page ::deep > *" -- see the comment there. */

.map-toolbar[b-zgicnkz0cw]
{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    padding: 0.25rem;
    border: 1px solid var(--mud-palette-lines-default, #d7dbe0);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

/* Controls that belong together sit together, with the gap doing the grouping rather than a
   border -- three bordered boxes inside a bordered bar reads as a cage. */
.map-toolbar[b-zgicnkz0cw]  .toolbar-group
{
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-sep
{
    width: 1px;
    align-self: stretch;
    margin: 0.2rem 0.3rem;
    background: var(--mud-palette-lines-default, #d7dbe0);
}

/* Pushes status and the edit action to the far end, so the controls read left and the things that
   are NOT controls read right. */
.map-toolbar[b-zgicnkz0cw]  .toolbar-spacer
{
    flex: 0 0 auto;
    width: 0.5rem;
}

/* --- The shared control shape ----------------------------------------------------------- */

.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl
{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-primary, #222);
    font-size: 0.82rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl:hover
{
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl:focus-visible
{
    outline: 2px solid var(--mud-palette-primary, #1976d2);
    outline-offset: 1px;
}

/* TOGGLE. The state is the fill, not the text: these used to read "Labels: On" / "Labels: Off"
   and you had to read the word to know where you were. */
.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl--toggle[aria-pressed="true"],
.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl--on
{
    border-color: var(--mud-palette-primary, #1976d2);
    background: var(--mud-palette-primary-hover, rgba(25, 118, 210, 0.12));
    color: var(--mud-palette-primary, #1976d2);
    font-weight: 600;
}

/* PICKER. Carries its current value and a chevron, so the selection is legible closed. */
.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl--picker
{
    border-color: var(--mud-palette-lines-default, #d7dbe0);
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl--open
{
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl__value
{
    font-weight: 600;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl__chevron
{
    width: 0;
    height: 0;
    margin-left: 0.1rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.6;
}

/* ACTION. The only thing here that leaves the page, so it is the only outlined control. */
.map-toolbar[b-zgicnkz0cw]  .toolbar-ctl--action
{
    border-color: var(--mud-palette-lines-default, #d7dbe0);
}

/* STATUS. Not a control: no border, no hover, nothing that invites a click. */
.map-toolbar[b-zgicnkz0cw]  .toolbar-status
{
    padding: 0 0.4rem;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary, #666);
    white-space: nowrap;
}

/* --- Panels ------------------------------------------------------------------------------ */

.map-toolbar[b-zgicnkz0cw]  .toolbar-options
{
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 12rem;
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-option
{
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-option:hover
{
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-option--on
{
    background: var(--mud-palette-primary-hover, rgba(25, 118, 210, 0.12));
    color: var(--mud-palette-primary, #1976d2);
    font-weight: 600;
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-check
{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.3rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-radios
{
    margin: 0.3rem 0 0;
    padding: 0.3rem 0 0;
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default, #d7dbe0);
}

.map-toolbar[b-zgicnkz0cw]  .toolbar-radios legend
{
    padding: 0;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary, #666);
}

/* --- Responsive --------------------------------------------------------------------------
   Collapse order, loosest first: the things that are not controls go before the controls do.
   An overlay bar cannot wrap -- a second row would cover the map it floats on -- so the last
   resort is scrolling, which keeps every control one gesture away. A single nested mega-menu
   would bury them two. */

@media (max-width: 1279.98px)
{
    /* md: status is the least urgent thing here, and its tooltip still carries it. */
    .map-toolbar[b-zgicnkz0cw]  .toolbar-status
    {
        display: none;
    }
}

@media (max-width: 959.98px)
{
    /* sm: toggles and the action lose their words; the icon plus its title carries them.
       Pickers keep their VALUE, which is the whole reason they are pickers. */
    .map-toolbar[b-zgicnkz0cw]  .toolbar-ctl--toggle .toolbar-ctl__label,
    .map-toolbar[b-zgicnkz0cw]  .toolbar-ctl--action .toolbar-ctl__label
    {
        display: none;
    }

    .map-toolbar[b-zgicnkz0cw]  .toolbar-ctl__value
    {
        max-width: 6rem;
    }
}

@media (max-width: 599.98px)
{
    /* xs: everything to icons, and the bar scrolls. */
    .map-toolbar[b-zgicnkz0cw]
    {
        max-width: calc(100vw - 16px);
        overflow-x: auto;
    }

    .map-toolbar[b-zgicnkz0cw]  .toolbar-ctl__label
    {
        display: none;
    }

    .map-toolbar[b-zgicnkz0cw]  .toolbar-spacer
    {
        flex: 0 0 0.25rem;
    }
}
/* /Components/Map/MapToolbarMenu.razor.rz.scp.css */
.toolbar-menu[b-a0sl9ijjyn]
{
    position: relative;
    display: inline-block;
}

/* Covers the viewport so the next click anywhere lands here and closes the panel, rather than
   reaching the map underneath. Below the panel, above everything else. */
.toolbar-menu__backdrop[b-a0sl9ijjyn]
{
    position: fixed;
    inset: 0;
    z-index: 19;
}

.toolbar-menu__panel--sites[b-a0sl9ijjyn]
{
    min-width: 22rem;
}

.toolbar-menu__panel[b-a0sl9ijjyn]
{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 12rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, #d7dbe0);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
/* /Pages/FloorPlanEditor.razor.rz.scp.css */

/* Issue rows that name a shape are buttons. Styled to sit flush with the plain rows so the panel
   still reads as a list rather than a column of controls. */
.fp-issue--locatable[b-q591ey8cdo] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    font: inherit;
    cursor: pointer;
}

.fp-issue--locatable:hover[b-q591ey8cdo] {
    filter: brightness(0.96);
}

/* Count of blocking-looking problems beside Publish. Amber, not red: the plan publishes anyway,
   so this is a to-do list rather than a refusal. */
.fp-error-note[b-q591ey8cdo] {
    align-self: center;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(232, 163, 61, 0.16);
    color: #8a5a10;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Published plans stranded on a deleted building, said on the empty floor someone lands on while
   looking for them. Amber like .fp-error-note and for the same reason: nothing is broken here, and
   the drawing is still in the database -- it is a repair to make, not a failure to report. */
.fp-empty-orphaned[b-q591ey8cdo] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    background: rgba(232, 163, 61, 0.16);
    color: #8a5a10;
    font-size: 0.8rem;
    line-height: 1.45;
}
/* /Pages/Map.razor.rz.scp.css */
.map-page[b-2fkcsepnsw]
{
    position: relative;
    width: 100%;
    /* Fills whatever height the shell's mh-canvas (app.css) hands down, rather than computing
       viewport-minus-header itself: the header's real height changes at GVS.Components' own
       breakpoints (see the mh-root/mh-canvas overrides in app.css), so a hardcoded number here
       could never track it reliably. */
    flex: 1 1 auto;
    min-height: 0;
}

.map-error[b-2fkcsepnsw]
{
    margin: 0;
    padding: 8px 12px;
    color: var(--gvs-color-error, #b00020);
}

.map-page[b-2fkcsepnsw]  > *
{
    width: 100%;
    height: 100%;
}

/* Declared after the ::deep rule above (equal specificity: one class + one scope attribute on
   both sides) so this wins the cascade and restores auto sizing -- otherwise the toolbar, as a
   direct child of .map-page, would be stretched to 100% x 100% and its invisible box would cover
   the whole map, blocking clicks/drags on the canvas beneath it. */
.map-page[b-2fkcsepnsw]  .map-toolbar
{
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: auto;
    height: auto;
}

.map-btn[b-2fkcsepnsw]
{
    padding: 6px 10px;
    font-size: 0.85rem;
    border: 1px solid var(--gvs-color-border, #ccc);
    border-radius: 4px;
    background: var(--gvs-color-surface, #fff);
    color: var(--gvs-color-text, #222);
    cursor: pointer;
}

.map-btn:hover[b-2fkcsepnsw]
{
    background: var(--gvs-color-surface-hover, #f0f0f0);
}

/* Move the floor/layers selector to the bottom-left (the component defaults it to mid-left). Higher
   specificity than the RCL's own scoped rule (two classes here vs one class + one scope attr), so
   this wins. */
.map-page[b-2fkcsepnsw]  .tracking-map-overlay--floors
{
    top: auto;
    bottom: 12px;
    left: 12px;
}

/* Hide the playback timeline: it's for history scrubbing, which the live map doesn't use, and it
   otherwise occupies the bottom strip where the floor selector now sits. */
.map-page[b-2fkcsepnsw]  .tracking-map-overlay--timeline
{
    display: none;
}

/* The people panel floats over the map's right edge, the same overlay technique as .map-toolbar
   above (and for the same reason: it must opt back out of the width:100%/height:100% that
   ".map-page ::deep > *" stretches every direct child to). top+bottom+height:auto (rather than a
   plain height) lets it stretch to fill the column between them without any single fixed height. */
.map-people-panel[b-2fkcsepnsw]
{
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 10;
    width: 260px;
    height: auto;
    max-width: calc(100% - 16px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--gvs-color-surface, #fff);
    border: 1px solid var(--gvs-color-border, #ccc);
    border-radius: 6px;
    color: var(--gvs-color-text, #222);
}

.map-people-panel__title[b-2fkcsepnsw]
{
    margin: 0;
    font-size: 0.95rem;
}

.map-people-panel__empty[b-2fkcsepnsw]
{
    margin: 0;
    font-size: 0.85rem;
    color: var(--gvs-color-text-muted, #666);
}

.map-people-group__title[b-2fkcsepnsw]
{
    margin: 4px 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gvs-color-text-muted, #666);
}

.map-people-list[b-2fkcsepnsw]
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-people-row[b-2fkcsepnsw]
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--gvs-color-border, #eee);
}

.map-people-row__label[b-2fkcsepnsw]
{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.map-people-row__toggles[b-2fkcsepnsw]
{
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.map-toggle-btn[b-2fkcsepnsw]
{
    padding: 3px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--gvs-color-border, #ccc);
    border-radius: 4px;
    background: var(--gvs-color-surface, #fff);
    color: var(--gvs-color-text, #222);
    cursor: pointer;
    white-space: nowrap;
}

.map-toggle-btn:hover[b-2fkcsepnsw]
{
    background: var(--gvs-color-surface-hover, #f0f0f0);
}

.map-toggle-btn--active[b-2fkcsepnsw]
{
    background: var(--gvs-color-primary, #1565c0);
    border-color: var(--gvs-color-primary, #1565c0);
    color: var(--gvs-color-on-primary, #fff);
}

/* Narrow viewports (phones/small tablets in portrait): the tall right-hand column would eat most of
   the map width, so the panel instead becomes a short strip pinned along the bottom -- full width,
   capped height, still scrollable -- leaving the map usable above it. */
@media (max-width: 768px)
{
    .map-people-panel[b-2fkcsepnsw]
    {
        top: auto;
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto;
        max-width: none;
        max-height: 35%;
    }
}

/* The location history panel opens on the opposite (left) side from the always-present people
   panel, below the toolbar -- same floating-overlay technique as .map-toolbar/.map-people-panel
   above. Sized to its own short content (a title, three lines, a close button) rather than
   stretching the column like the people panel does -- height:auto opts back out of the
   ".map-page ::deep > *" width:100%/height:100% stretch (same reason .map-toolbar does), while
   max-height still caps a long value so it scrolls instead of overflowing the map. */
.map-history-panel[b-2fkcsepnsw]
{
    position: absolute;
    top: 56px;
    left: 8px;
    z-index: 11;
    width: 260px;
    height: auto;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 64px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--gvs-color-surface, #fff);
    border: 1px solid var(--gvs-color-border, #ccc);
    border-radius: 6px;
    color: var(--gvs-color-text, #222);
}

.map-history-panel__header[b-2fkcsepnsw]
{
    display: flex;
    /* Top-aligned rather than centred now the heading can be two lines: centring would drag the
       close button down beside the area line instead of leaving it level with the title. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* The title and its area line as one block, so the close button stays at the header's right edge.
   min-width: 0 is what actually lets the title's ellipsis work -- a flex item's default min-width
   is auto, which refuses to shrink below its content and would push the button off the panel. */
.map-history-panel__heading[b-2fkcsepnsw]
{
    min-width: 0;
}

/* The clicked room's area, under its name. Deliberately quieter than the title: it is context for
   the thing you clicked, not the thing itself. */
.map-history-panel__area[b-2fkcsepnsw]
{
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--gvs-color-text-muted, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-history-panel__title[b-2fkcsepnsw]
{
    margin: 0;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-history-panel__close[b-2fkcsepnsw]
{
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--gvs-color-border, #ccc);
    border-radius: 4px;
    background: var(--gvs-color-surface, #fff);
    color: var(--gvs-color-text, #222);
    cursor: pointer;
}

.map-history-panel__close:hover[b-2fkcsepnsw]
{
    background: var(--gvs-color-surface-hover, #f0f0f0);
}

.map-history-panel__empty[b-2fkcsepnsw]
{
    margin: 0;
    font-size: 0.85rem;
    color: var(--gvs-color-text-muted, #666);
}

.map-history-list[b-2fkcsepnsw]
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-history-row[b-2fkcsepnsw]
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    border-bottom: 1px solid var(--gvs-color-border, #eee);
}

.map-history-row__label[b-2fkcsepnsw]
{
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gvs-color-text-muted, #666);
}

.map-history-row__value[b-2fkcsepnsw]
{
    font-size: 0.85rem;
}

/* Same bottom-strip treatment as .map-people-panel, but stacked just above it (both are anchored to
   the bottom on a narrow viewport) rather than on top of it -- the people panel's own strip below
   occupies up to 35% of the height pinned at the very bottom, so this one sits in the 30% band just
   above that, with a 16px gap between the two. */
@media (max-width: 768px)
{
    .map-history-panel[b-2fkcsepnsw]
    {
        top: auto;
        left: 8px;
        right: 8px;
        bottom: calc(35% + 16px);
        width: auto;
        max-width: none;
        max-height: 30%;
    }
}

/* Site picker. Anchored to its button so the menu opens under it rather than pushing the
   toolbar around every time it is used. */
.map-sites[b-2fkcsepnsw] {
    position: relative;
    display: inline-block;
}

.map-sites__menu[b-2fkcsepnsw] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 17rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, #d7dbe0);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

.map-sites__actions[b-2fkcsepnsw] {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.map-sites__row[b-2fkcsepnsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

/* Takes the row's spare width so the action column keeps its own, and so a long building name
   truncates rather than shoving the button off the end. */
.map-sites__pick[b-2fkcsepnsw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    cursor: pointer;
}

.map-sites__text[b-2fkcsepnsw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

/* The site is context for the building above it, so it is set back rather than competing. */
.map-sites__site[b-2fkcsepnsw] {
    font-size: 0.72rem;
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-sites__name[b-2fkcsepnsw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-sites__only[b-2fkcsepnsw] {
    flex: 0 0 auto;
    border: 1px solid var(--mud-palette-lines-default, #d7dbe0);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
}

.map-sites__only:hover[b-2fkcsepnsw] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}

.map-sites__skipped[b-2fkcsepnsw] {
    opacity: 0.75;
}

/* Arrange canvas. Sits over the map rather than replacing it, so the estate being rearranged
   stays visible behind and the change is not a context switch. */
.map-arrange[b-2fkcsepnsw] {
    position: absolute;
    inset: 3.2rem 0 0 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 92%, transparent);
}

/* The bar carries the only way out of this overlay, so it sits inside the overlay itself and
   above it in the stack -- the close control must never be behind the thing it closes. */
.map-arrange__bar[b-2fkcsepnsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, #d7dbe0);
}

.map-arrange__hint[b-2fkcsepnsw] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.map-arrange__done[b-2fkcsepnsw] {
    flex: 0 0 auto;
    font-weight: 600;
}

.map-arrange__canvas[b-2fkcsepnsw] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    /* Without this a drag selects the labels instead of moving the building. */
    user-select: none;
    touch-action: none;
}

.map-arrange__rect[b-2fkcsepnsw] {
    fill: rgba(47, 107, 216, 0.16);
    stroke: #2f6bd8;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    cursor: grab;
}

.map-arrange__rect--dragging[b-2fkcsepnsw] {
    fill: rgba(47, 107, 216, 0.3);
    cursor: grabbing;
}

.map-arrange__label[b-2fkcsepnsw] {
    text-anchor: middle;
    dominant-baseline: middle;
    /* Size is set per building as an SVG attribute, in metres -- see LabelSize. A CSS size here
       would be read as user units and write the name across the whole estate. */
    fill: var(--mud-palette-text-primary, #2a3038);
    /* The label must never swallow the pointer, or a drag started on the text does nothing. */
    pointer-events: none;
}

/* The overlay legend floats over the map's bottom-left corner -- opposite the people panel's
   right-hand column, and below the history panel that opens down the same edge -- using the same
   floating-overlay technique as .map-people-panel above, and the same surface tokens. width/height
   auto for the reason .map-toolbar sets them: ".map-page ::deep > *" would otherwise stretch this
   aside to 100% x 100% and its invisible box would swallow every click on the canvas.
   Required rather than decorative: the star ramp cannot be read from colour alone, so this key and
   the star digit on the room are together what make that mode legible.
   Sits below both panels in the stack (they are 10 and 11) -- a panel the reader opened wins the
   corner, because the legend is passive and stays put. */
.map-legend[b-2fkcsepnsw]
{
    position: absolute;
    left: 8px;
    /* Lifted clear of the shell's sidebar collapse button, which floats over this exact corner and
       was covering the key. That button belongs to GVS.Components, so its height is not knowable
       from this repo -- hence a generous clearance behind a custom property rather than a number
       tuned to one build of a package we do not control. Override --map-legend-bottom if the
       button ever grows. */
    bottom: var(--map-legend-bottom, 76px);
    z-index: 9;
    width: auto;
    height: auto;
    max-width: calc(100% - 16px);
    /* Leaves the toolbar its 56px at the top and the sidebar button its clearance at the bottom,
       so a six-row star key scrolls inside itself rather than growing under either. */
    max-height: calc(100% - 132px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--gvs-color-surface, #fff);
    border: 1px solid var(--gvs-color-border, #ccc);
    border-radius: 6px;
    color: var(--gvs-color-text, #222);
    font-size: 0.8rem;
}

.map-legend__list[b-2fkcsepnsw]
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-legend__row[b-2fkcsepnsw]
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-legend__swatch[b-2fkcsepnsw]
{
    width: 12px;
    height: 12px;
    border-radius: 3px;
    /* The swatch is the whole point of the row, so it must never be squeezed by a long label. */
    flex: 0 0 auto;
}

.map-legend__label[b-2fkcsepnsw]
{
    white-space: nowrap;
}

.map-legend__empty[b-2fkcsepnsw]
{
    margin: 0;
    font-size: 0.85rem;
    color: var(--gvs-color-text-muted, #666);
}

/* Narrow viewports: the bottom of the map is already spoken for -- the people panel takes the
   lowest 35% as a full-width strip and the history panel the 30% band above it -- so the legend
   moves up under the toolbar (the 56px the history panel uses on desktop, which is free here) and
   lays its rows out as a wrapping line rather than a six-row column over the map. */
@media (max-width: 768px)
{
    .map-legend[b-2fkcsepnsw]
    {
        top: 56px;
        bottom: auto;
        left: 8px;
        right: 8px;
        max-width: none;
        max-height: 30%;
    }

    .map-legend__list[b-2fkcsepnsw]
    {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 12px;
    }
}