/* Reveal sidebar (web/sidebar.js): right-hand card while a bouwnummer is
   revealed, a bottom sheet below 700 px. Same card look as the focus pill
   (index.html): light, translucent, soft shadow - it stays light at night. */
#unit-panel { position: absolute; z-index: 3; top: 64px; right: 12px; width: 300px; box-sizing: border-box;
              max-height: calc(100% - 64px - 40px); overflow-y: auto; overscroll-behavior: contain;
              padding: 14px 16px 16px; border-radius: 12px; color: #1f1f1f;
              background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
              font-size: 13px; line-height: 1.35;
              opacity: 0; visibility: hidden; transform: translateX(calc(100% + 24px));
              transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease,
                          visibility 0s linear 420ms; }
#unit-panel.is-open { opacity: 1; visibility: visible; transform: none;
                      transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease,
                                  visibility 0s; }
#unit-panel .unit-head { display: flex; align-items: flex-start; gap: 8px; }
#unit-panel .unit-head > div { flex: 1; min-width: 0; }
/* floor stepper next to "verdieping N": the bouwnummer straight below / above */
#unit-panel .unit-floorstep { display: inline-flex; gap: 2px; margin-left: -2px; }
#unit-panel .unit-floorstep button { display: inline-grid; place-items: center; width: 26px; height: 24px; padding: 0;
  border: 1px solid #d8d3cc; background: #fff; color: #2b2b2b; cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease; }
#unit-panel .unit-floorstep button:first-child { border-radius: 999px 0 0 999px; }
#unit-panel .unit-floorstep button:last-child { border-radius: 0 999px 999px 0; }
#unit-panel .unit-floorstep button:hover:not(:disabled) { background: #f3efe9; border-color: #bdb6ad; }
#unit-panel .unit-floorstep button:disabled { color: #c4bfb8; cursor: default; }
#unit-panel .unit-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 0.01em; outline: none; }
#unit-panel .unit-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                         color: #4a4a4a; }
#unit-panel .unit-type { padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600;
                         color: #1f4f8f; background: #e6effc; font-variant-numeric: tabular-nums; }
#unit-panel .unit-close { flex: none; width: 30px; height: 30px; margin: -4px -6px 0 0; border: none;
                          border-radius: 999px; background: transparent; color: #444; font-size: 20px;
                          line-height: 1; cursor: pointer; transition: background 150ms ease; }
#unit-panel .unit-close:hover { background: rgba(0, 0, 0, 0.07); }
#unit-panel button:focus-visible { outline: 2px solid #2b7fff; outline-offset: 2px; }

#unit-panel .unit-note { margin: 6px 0 0; font-size: 11px; color: #6b6b6b; }

#unit-panel .unit-others { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4e0da; }
#unit-panel .unit-others h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #4a4a4a; }
#unit-panel .unit-others ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
#unit-panel .unit-other { font: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
                          padding: 6px 10px; border-radius: 999px; border: 1px solid #d8d3cc;
                          background: #fff; color: #2b2b2b; cursor: pointer;
                          transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
/* same amber as the hovered apartment's floor on the map (reveal.js REVEAL_HOVER_COLOR) */
#unit-panel .unit-other:hover, #unit-panel .unit-other:focus-visible, #unit-panel .unit-other.is-hover {
  background: #fff3df; border-color: #ffae3d; color: #1f1f1f; }

/* building mode: the bouwnummers per floor as compact chips with a status dot */
#unit-panel[data-mode="building"] .unit-furnish { display: none; }
#unit-panel .building-units h3 { margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: #4a4a4a; }
#unit-panel .building-floor { display: grid; grid-template-columns: 82px 1fr; gap: 6px; align-items: start;
                              padding: 4px 0; border-top: 1px solid #efebe6; }
#unit-panel .building-floor-label { font-size: 11px; color: #6b6b6b; padding-top: 4px; }
#unit-panel .building-floor ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* a floor with a dollhouse: its label opens it (floors mode) */
#unit-panel .building-floor-open { font: inherit; font-size: 11px; text-align: left; color: #2f5fb3; background: none;
                                   border: 0; margin: 0; padding: 4px 0 0; cursor: pointer; text-decoration: underline;
                                   text-decoration-color: #b9cbe8; text-underline-offset: 2px; }
#unit-panel .building-floor-open::after { content: " \203A"; }
#unit-panel .building-floor-open:hover, #unit-panel .building-floor-open:focus-visible { color: #1d4590;
                                   text-decoration-color: currentColor; }
/* floor mode: the opened floor's bouwnummers in one row */
#unit-panel .floor-units ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* an apartment beside its building's dollhouse: the furnished switch stays */
#unit-panel[data-mode="apartment"][data-revealed="1"] .unit-furnish { display: flex; }
#unit-panel .unit-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px;
                         font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 8px 3px 6px;
                         border-radius: 999px; border: 1px solid #d8d3cc; background: #fff; color: #2b2b2b;
                         cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
#unit-panel .unit-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status, #9a948b); }
#unit-panel .unit-chip.is-sold, #unit-panel .unit-chip.is-unavailable { color: #8a857e; background: #f6f4f1; }
#unit-panel .unit-chip.is-unavailable { cursor: default; }
#unit-panel .unit-chip:hover, #unit-panel .unit-chip:focus-visible, #unit-panel .unit-chip.is-hover {
  background: #e8f0ff; border-color: #0a5cff; color: #1f1f1f; }
#unit-panel .unit-building { font-weight: 600; color: #2b2b2b; }

/* furnished / unfurnished switch (sofa icon): fades the movable furniture */
#unit-panel .unit-furnish { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px;
                            padding: 7px 10px; border: 1px solid #e3ded7; border-radius: 10px;
                            background: #faf8f5; color: #2b2b2b; font: inherit; font-weight: 600;
                            cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
#unit-panel .unit-furnish:hover { background: #f3efe9; border-color: #d8d3cc; }
#unit-panel .unit-furnish-icon { flex: none; color: #2f7bff; transition: color 150ms ease, opacity 150ms ease; }
#unit-panel .unit-furnish-label { flex: 1; text-align: left; }
#unit-panel .unit-switch { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px;
                           background: #2f7bff; transition: background 180ms ease; }
#unit-panel .unit-switch::after { content: ''; position: absolute; top: 2px; left: 16px; width: 14px; height: 14px;
                                  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
                                  transition: left 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#unit-panel .unit-furnish[aria-checked="false"] .unit-switch { background: #c9c4bd; }
#unit-panel .unit-furnish[aria-checked="false"] .unit-switch::after { left: 2px; }
#unit-panel .unit-furnish[aria-checked="false"] .unit-furnish-icon { color: #8a857e; opacity: 0.7; }

@keyframes unit-panel-swap { from { opacity: 0.25; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#unit-panel.is-swapping .unit-head, #unit-panel.is-swapping .unit-body { animation: unit-panel-swap 220ms ease-out both; }

/* House mode (a focused Oevers house, web/sidebar.js renderHouse): no
   furniture switch; status chip in its legend colour, price beside it (the
   phone sheet's peek), areas, floor-plan thumbnails and the floor buttons. */
#unit-panel[data-mode="house"] .unit-furnish, #unit-panel[data-mode="apartment"] .unit-furnish { display: none; }
#unit-panel .house-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px;
                            border-radius: 999px; font-size: 12px; font-weight: 600; color: #1f1f1f;
                            background: color-mix(in srgb, var(--status, #9a948b) 16%, #fff); }
#unit-panel .house-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
                                    background: var(--status, #9a948b); }
#unit-panel .house-price { font-weight: 700; color: #1f1f1f; font-variant-numeric: tabular-nums; white-space: nowrap; }
#unit-panel .house-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
#unit-panel .house-facts div { padding: 7px 10px; border-radius: 10px; background: #f6f3ef; }
#unit-panel .house-facts dt { font-size: 11px; color: #6b6b6b; }
#unit-panel .house-facts dd { margin: 1px 0 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
#unit-panel .house-plans, #unit-panel .house-floors { margin-top: 14px; padding-top: 12px;
                                                      border-top: 1px solid #e4e0da; }
#unit-panel .house-plans h3, #unit-panel .house-floors h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600;
                                                            color: #4a4a4a; }
#unit-panel .house-plans ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0;
                              list-style: none; }
#unit-panel .house-plan { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%;
                          padding: 3px; border: 1px solid #e3ded7; border-radius: 8px; background: #fff;
                          font: inherit; font-size: 11px; color: #2b2b2b; cursor: zoom-in;
                          transition: border-color 150ms ease, box-shadow 150ms ease; }
#unit-panel .house-plan img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain;
                              border-radius: 5px; background: #faf8f5; }
#unit-panel .house-plan:hover { border-color: #bdb6ad; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
#unit-panel .house-floor-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
#unit-panel .house-floor { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px;
                           border: 1px solid #d8d3cc; background: #fff; color: #2b2b2b; cursor: pointer;
                           transition: background 150ms ease, border-color 150ms ease; }
#unit-panel .house-floor:hover:not(:disabled) { background: #f3efe9; border-color: #bdb6ad; }
#unit-panel .house-floor:disabled { color: #a49e96; background: #faf8f5; border-style: dashed; cursor: default; }

/* Full-size floor plan (web/sidebar.js createPlanViewer): a modal dialog. */
.plan-viewer { box-sizing: border-box; width: min(92vw, 92vh, 960px); max-width: none; max-height: 96vh;
               padding: 12px; border: none; border-radius: 14px; background: #fff; color: #1f1f1f;
               box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35); overflow: visible; }
.plan-viewer::backdrop { background: rgba(20, 20, 20, 0.6); }
.plan-viewer[open] { animation: plan-viewer-in 180ms ease-out both; }
.plan-viewer figure { margin: 0; }
.plan-viewer img { display: block; width: 100%; height: auto; max-height: calc(96vh - 64px); object-fit: contain; }
.plan-viewer figcaption { margin-top: 6px; font-size: 13px; font-weight: 600; text-align: center; }
.plan-viewer-close { position: absolute; top: -12px; right: -12px; width: 36px; height: 36px; border: none;
                     border-radius: 999px; background: #2b2b2b; color: #fff; font-size: 20px; line-height: 1;
                     cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.plan-viewer-close:hover { background: #454545; }
.plan-viewer-close:focus-visible { outline: 2px solid #2b7fff; outline-offset: 2px; }
@keyframes plan-viewer-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@media (max-width: 699px) {
  .plan-viewer { width: calc(100vw - 24px); padding: 8px; }
  .plan-viewer-close { top: 6px; right: 6px; width: 44px; height: 44px; }
}

/* House pill (web/focusbar.js): "‹ vorige" / "volgende ›" along the street. */
/* the steps end the pill as the back button starts it (4 px in) */
#focus-bar .pill[data-mode="house"] { padding-right: 4px; }
#focus-bar .focus-steps { display: inline-flex; gap: 2px; }
#focus-bar .focus-steps[hidden] { display: none; }
#focus-bar .focus-step { display: inline-flex; align-items: center; gap: 3px; padding: 7px 10px; border: none;
                         font: inherit; font-size: 13px; color: #2b2b2b; background: #f1eee9; cursor: pointer;
                         transition: background 150ms ease, color 150ms ease, opacity 140ms ease; }
#focus-bar .focus-prev { border-radius: 999px 0 0 999px; }
#focus-bar .focus-next { border-radius: 0 999px 999px 0; }
#focus-bar .focus-step:hover:not(:disabled) { background: #e3ded7; }
#focus-bar .focus-step:disabled { color: #bdb7af; cursor: default; }
#focus-bar .focus-step:focus-visible { outline: 2px solid #2b7fff; outline-offset: 2px; }
#focus-bar .pill.is-swapping .focus-steps { opacity: 0.6; }
/* compact screens: arrows only; phones in portrait: the sheet names the house */
@media (max-width: 999px), (max-height: 500px) {
  #focus-bar .focus-step-label { display: none; }
  #focus-bar .focus-step { padding: 7px 9px; }
}
@media (pointer: coarse) {
  #focus-bar .focus-step { min-width: 44px; min-height: 40px; justify-content: center; }
}
/* phones in portrait: the pill (max 100vw - 128 px between the Licht icon
   and its mirror) holds just the way back and the arrows; a long project
   name gives way (ellipsis) before the arrows do */
@media (max-width: 699px) and (orientation: portrait) {
  #focus-bar[data-mode="house"] .focus-name { display: none; }
  #focus-bar .pill[data-mode="house"] { gap: 6px; }
  #focus-bar .pill[data-mode="house"] .focus-back { flex: 0 1 auto; min-width: 0; overflow: hidden;
                                                    text-overflow: ellipsis; padding: 8px 11px; font-size: 12px; }
  #focus-bar .focus-steps { flex: none; }
  #focus-bar .focus-step { min-width: 40px; padding: 7px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-viewer[open] { animation: none; }
}

/* Project chooser (web/projects.js): one card per project standing on its
   map anchor, in the projects view only. Same card look as the pill and the
   sidebar. Sizes match projectCardSize() (the projects camera keeps them on
   screen): 240 px wide, 168 px on narrow screens. The fade/lift is on the
   children: Mapbox sets the marker element's own transform / opacity. */
.project-marker { display: flex; flex-direction: column; align-items: center; }
.project-card { display: block; width: 240px; padding: 0; overflow: hidden; border: none; border-radius: 12px;
                background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
                color: #1f1f1f; font: inherit; text-align: left; cursor: pointer;
                transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease,
                            opacity 320ms ease, visibility 0s; }
.project-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e9e5df; }
.project-card-text { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 11px; }
.project-card-name { font-size: 15px; font-weight: 650; line-height: 1.25; }
.project-card-place { font-size: 12px; color: #4a4a4a; }
.project-card-status { margin-top: 3px; font-size: 12px; font-weight: 600; color: #2b6e3f; }
.project-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.26); }
.project-card:focus-visible { outline: 2px solid #2b7fff; outline-offset: 2px; }
/* the tip pointing at the project's place */
.project-tip { width: 0; height: 0; margin-top: -1px; border: 8px solid transparent; border-bottom: 0;
               border-top-color: rgba(255, 255, 255, 0.96); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
               transition: opacity 320ms ease, visibility 0s; }
/* a card moved off its default place by the projects layout (projects.js
   projectsLayout, when cards would overlap): hanging below its anchor, or
   beside it, the tip pointing at the anchor */
.project-marker.is-below { flex-direction: column-reverse; }
.project-marker.is-below .project-tip { margin: 0 0 -1px; border: 8px solid transparent; border-top: 0;
                                        border-bottom-color: rgba(255, 255, 255, 0.96); }
.project-marker.is-left { flex-direction: row; }
.project-marker.is-left .project-tip { margin: 0 0 0 -1px; border: 8px solid transparent; border-right: 0;
                                       border-left-color: rgba(255, 255, 255, 0.96); }
.project-marker.is-right { flex-direction: row-reverse; }
.project-marker.is-right .project-tip { margin: 0 -1px 0 0; border: 8px solid transparent; border-left: 0;
                                        border-right-color: rgba(255, 255, 255, 0.96); }
/* compact (projects.js projectCardSize / projectsLayout, when the full
   cards can't stand clear of each other): the text only, no photo */
.project-marker.is-compact .project-card img { display: none; }
@media (max-width: 699px) {
  .project-marker.is-compact .project-card { width: 150px; }
}
/* hidden: no hit box over the site - the marker element stays laid out and
   Mapbox sets an inline pointer-events: auto on it (its occlusion handling),
   hence !important */
.project-marker.is-hidden { pointer-events: none !important; }
.project-marker.is-hidden .project-card, .project-marker.is-hidden .project-tip {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms; }
.project-marker.is-hidden .project-card { transform: translateY(8px) scale(0.96); }
@media (max-width: 699px) {
  .project-card { width: 168px; border-radius: 10px; }
  .project-card-text { padding: 7px 9px 9px; }
  .project-card-name { font-size: 13px; }
  .project-card-place, .project-card-status { font-size: 11px; }
}
@media (pointer: coarse) {
  .project-card { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .project-card:hover { transform: none; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .project-card, .project-tip, .project-marker.is-hidden .project-card, .project-marker.is-hidden .project-tip {
    transition: opacity 150ms ease, visibility 0s; transform: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the sheet's drag handle: phones only (below) */
#unit-panel .unit-handle { display: none; }

/* narrow portrait screens (SHEET_QUERY, web/mobile.js): a bottom sheet with a
   drag handle. Peek: bouwnummer, type and the furnished switch; full: the
   rooms (two columns to keep it low) and the other bouwnummers, scrolling
   inside while the header stays put. */
@media (max-width: 699px) and (orientation: portrait) {
  #unit-panel { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 60%;
                display: flex; flex-direction: column; overflow: hidden;
                padding: 22px calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom))
                         calc(16px + env(safe-area-inset-left));
                border-radius: 16px 16px 0 0; transform: translateY(100%); }
  #unit-panel .unit-handle { display: block; position: absolute; top: 0; left: 50%; width: 120px; height: 26px;
                             margin-left: -60px; padding: 0; border: none; background: transparent;
                             cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
  #unit-panel .unit-handle span { position: absolute; top: 8px; left: 50%; width: 40px; height: 5px;
                                  margin-left: -20px; border-radius: 3px; background: #cfc9c1;
                                  transition: background 150ms ease; }
  #unit-panel .unit-handle:hover span, #unit-panel .unit-handle:focus-visible span { background: #a8a197; }
  #unit-panel .unit-handle:focus-visible { outline: none; }
  #unit-panel .unit-head { touch-action: none; }
  #unit-panel .unit-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
                           margin: 0 -4px; padding: 0 4px; }
  #unit-panel[data-sheet="peek"] .unit-body { display: none; }
  #unit-panel .unit-others { margin-top: 10px; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #unit-panel, #unit-panel.is-open { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  #unit-panel.is-open { transition: opacity 150ms ease, visibility 0s; }
  #unit-panel.is-swapping .unit-head, #unit-panel.is-swapping .unit-body { animation: none; }
  #unit-panel .unit-switch, #unit-panel .unit-switch::after { transition: none; }
}

/* Sale status legend (web/app.js initStatusLegend): bottom right above the
   attribution, only in the overview of a project with houses (.is-open).
   Same card look as the other panels; it stays light at night. */
#status-legend { position: absolute; z-index: 2; right: calc(12px + env(safe-area-inset-right));
                 bottom: calc(34px + env(safe-area-inset-bottom)); box-sizing: border-box;
                 padding: 9px 12px 10px; border-radius: 12px; color: #1f1f1f;
                 background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
                 font-size: 12px; line-height: 1.25; pointer-events: none;
                 opacity: 0; transform: translateY(8px);
                 transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#status-legend[hidden] { display: none; }
#status-legend.is-open { opacity: 1; transform: none; }
#status-legend h2 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
#status-legend ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
#status-legend li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
#status-legend .legend-swatch { flex: none; width: 14px; height: 10px; border-radius: 3px;
                                background: color-mix(in srgb, var(--swatch) 55%, #fff);
                                box-shadow: inset 0 0 0 1.5px var(--swatch); }
#status-legend .legend-swatch.is-plot { background: rgba(58, 165, 93, 0.25);
                                        box-shadow: none; outline: 1.5px dashed #3f6d4c; outline-offset: -1.5px; }
/* phones in portrait: compact two-column card; out of the way of the open
   sun card (which spans the screen width there) */
@media (max-width: 699px) and (orientation: portrait) {
  #status-legend { padding: 7px 10px 8px; font-size: 11px; }
  #status-legend h2 { font-size: 11px; margin-bottom: 5px; }
  #status-legend ul { grid-template-columns: auto auto; column-gap: 12px; row-gap: 4px; }
  body:has(#sun-panel:not([hidden])) #status-legend { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #status-legend { transition: opacity 150ms ease; transform: none; }
}
#unit-panel .house-floor-notice { color: #9a3b1c; font-size: 12px; font-weight: 500; }

/* Status labels of a showcase project (web/statuslabels.js): a chip above
   every building's roof in the overview - the status dot in the status
   palette, the name, the status. White on any light preset (legible by
   night too); hidden / collided: faded out, no hit box. */
.status-label { pointer-events: none; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border: 0;
               border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: #1f1f1f;
               box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28); font: inherit; font-size: 12px; font-weight: 600;
               line-height: 16px;
               white-space: nowrap; cursor: pointer; pointer-events: auto;
               transition: transform 180ms ease, opacity 200ms ease, visibility 0s; }
.status-chip:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.36); }
.status-chip:focus-visible { outline: 2px solid #1f1f1f; outline-offset: 2px; }
.status-dot { flex: none; width: 9px; height: 9px; border-radius: 50%;
              box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 0 2.5px rgba(0, 0, 0, 0.12); }
.status-text { font-weight: 400; color: #555; }
/* the leader from the roof dot to the chip (statuslabels.js leaderLine):
   grows upward from the anchor, rotated towards a chip moved aside */
.status-label .status-leader { position: absolute; left: 50%; bottom: 0; width: 1.5px; height: 14px;
  background: rgba(31, 31, 31, 0.7); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.85);
  transform-origin: 50% 100%; pointer-events: none;
  transition: transform 180ms ease, height 180ms ease, opacity 200ms ease; }
.status-label .status-anchor { position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%; background: #1f1f1f; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
  pointer-events: none; transition: opacity 200ms ease; }
.status-label.is-hidden .status-leader, .status-label.is-hidden .status-anchor { opacity: 0; }
/* the project's combined label (zoomed out): a little larger */
.status-label.is-group .status-chip { font-size: 13px; padding: 4px 11px 4px 8px; }
.status-label.is-hidden { pointer-events: none !important; }
.status-label.is-hidden .status-chip { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms; }
@media (max-width: 699px) {
  .status-chip { gap: 4px; padding: 2px 7px 2px 6px; font-size: 11px; line-height: 15px; }
  .status-dot { width: 8px; height: 8px; }
}
@media (pointer: coarse) {
  .status-chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .status-chip, .status-label.is-hidden .status-chip { transition: opacity 120ms ease, visibility 0s; }
}