:root {
  color-scheme: light;
  --ink: #20262c;
  --muted: #606972;
  --paper: #f5f6f7;
  --surface: #ffffff;
  --line: #dde1e5;
  --edge: #767676;
  --control-border: #818b95;
  --hover-border: #adb6bf;
  --selected-border: #b7bfc7;
  --neutral-hover: #eef0f2;
  --neutral-selected: #e9ecef;
  --neutral-pressed: #dde1e5;
  --primary-hover: #343c44;
  --primary-pressed: #14191e;
  --error: #8a291b;
  --visible-height: 100dvh;
  --map-foot: 10px;
  --building-long: calc(var(--map-foot) * 100);
  --building-short: calc(var(--map-foot) * 20);
  --building-wide: calc(var(--map-foot) * 30);
  --building-narrow: calc(var(--map-foot) * 20);
  --overview-scale: .5;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --control-min-height: max(44px, 2.75rem);
  --control-primary-min-height: max(48px, 3rem);
  --control-padding-y: var(--space-2);
  --control-padding-x: var(--space-3);
  --field-padding: var(--space-3);
  --nav-item-min-width: 5.5rem;
  --nav-content-height: 3rem;
  --controls-width: 540px;
  --sheet-content-width: 37.5rem;
  --editor-width: 22.5rem;
  --list-row-min-height: 4rem;
  --page-gutter-wide: calc(var(--space-5) + var(--space-4));
  --page-gutter: var(--space-4);
  --page-top-space: var(--space-4);
  --card-inset: var(--space-4);
  --nav-height: calc(var(--nav-content-height) + var(--space-2) * 2 + 1px + env(safe-area-inset-bottom));
  --radius-small: .25rem;
  --radius-control: .5rem;
  --radius-surface: .75rem;
  --radius-sheet: 1rem;
  --radius-map: 2px;
  --map-inset: 12px;
  --map-canvas-min-height: 180px;
  --map-canvas-max-height: 700px;
  --map-pan-step: 48px;
  --map-aisle-wide: 6rem;
  --map-aisle-compact: 3rem;
  --status-swatch-size: .75rem;
  --icon-small: 1rem;
  --icon-action: 1.25rem;
  --icon-stroke: 1.75;
  --leading-body: 1.5;
  --leading-control: 1.25;
  --leading-heading: 1.2;
  --leading-number: 1.1;
  --weight-normal: 400;
  --weight-label: 600;
  --weight-heading: 650;
  --weight-unit: 750;
  --tracking-heading: -.035em;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --shadow-sheet: 0 -4px 24px #00000014;
  --shadow-toast: 0 4px 16px #00000014;
  --page-max-width: 77.5rem;
  --overview-max-width: 60rem;
  --nav-max-width: calc(var(--page-max-width) - var(--page-gutter-wide) * 2);
  --logo-width: 7rem;
  --toast-max-width: 24rem;
  --count-min-width: 1.75rem;
  --text-caption: .75rem;
  --text-label: .875rem;
  --text-body: 1rem;
  --text-total: 1.75rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 100%;
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button, input, select { line-height: var(--leading-control); }
button { cursor: pointer; touch-action: manipulation; }
button, input, select { min-height: var(--control-min-height); }
button { border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface); padding: var(--control-padding-y) var(--control-padding-x); }
button:hover { background: var(--neutral-hover); }
button:active { background: var(--neutral-pressed); }
:focus-visible { outline: var(--focus-width) solid var(--ink); outline-offset: var(--focus-offset); }
input, select, textarea { width: 100%; min-width: 0; border: var(--border-width) solid var(--control-border); border-radius: var(--radius-control); background: var(--surface); padding: var(--field-padding); }
textarea { resize: vertical; line-height: var(--leading-body); }
p { line-height: var(--leading-body); }
.skip-link { position: absolute; left: var(--space-3); top: -100px; padding: var(--space-3); background: white; z-index: 10; }
.skip-link:focus { top: var(--space-2); }
main { max-width: var(--page-max-width); margin: auto; padding: var(--page-top-space) var(--page-gutter) calc(var(--space-5) + env(safe-area-inset-bottom)); }
h2 { line-height: var(--leading-heading); font-weight: var(--weight-heading); }
h1 { font-size: clamp(1.65rem, 4vw, 2rem); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); margin: 0; }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); max-width: var(--controls-width); margin: 0 auto; }
.map-toolbar .building-nav { flex: 1 1 12rem; margin: 0; min-width: 0; }
#filter-toggle, #search-toggle { width: var(--control-min-height); padding: 0; flex-shrink: 0; }
#filter-toggle { display: grid; place-items: center; }
#search-toggle { display: grid; place-items: center; }
#filter-toggle[aria-expanded=true], #filter-toggle[aria-pressed=true],
#search-toggle[aria-expanded=true] { background: var(--neutral-selected); border-color: var(--selected-border); }
#search-panel, #filter-panel { max-width: var(--controls-width); margin: var(--space-3) auto 0; }
#workspace { min-width: 0; container-type: inline-size; }
.building-nav { display: grid; grid-template-columns: minmax(var(--control-min-height), .7fr) repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-1); background: var(--neutral-selected); border-radius: var(--radius-surface); }
.building-nav button { border-color: transparent; border-radius: var(--radius-control); background: transparent; padding: var(--space-2) var(--space-1); font-size: var(--text-label); }
.building-nav span { display: block; font-size: var(--text-caption); margin-top: var(--space-1); }
.building-nav button[aria-pressed=true] { background: var(--surface); border-color: var(--line); font-weight: var(--weight-heading); }
.map-results { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: var(--controls-width); margin: var(--space-2) auto 0; }
#result-note { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-label); color: var(--muted); line-height: var(--leading-body); }
.building-count { min-height: 1.5em; line-height: var(--leading-body); overflow-wrap: anywhere; }
.overview { position: relative; display: grid; grid-template-columns: calc(var(--building-wide) * var(--overview-scale)) minmax(0, 1fr) calc(var(--building-narrow) * var(--overview-scale)); grid-template-rows: auto 1fr; gap: var(--space-5) var(--space-2); max-width: calc((var(--building-wide) + var(--building-narrow)) * var(--overview-scale) + 40px); margin-inline: auto; padding: var(--space-3) 0; }
.overview .back { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: calc(var(--building-wide) * var(--overview-scale)); }
.overview .left { grid-column: 1; grid-row: 2; }
.overview .right { grid-column: 3; grid-row: 2; }
.building-button { display: flex; flex-direction: column; gap: var(--space-1); align-items: stretch; border: 0; border-radius: 0; padding: 0; background: transparent; text-align: left; min-width: 0; }
.building-button:hover, .building-button:active { background: transparent; }
.building-button:focus-visible { outline: var(--focus-width) solid var(--ink); outline-offset: 4px; }
.building-button:hover .unit-grid, .building-button:active .unit-grid { border-color: var(--ink); }
.mini-plan { position: relative; display: block; width: calc(var(--building-width) * var(--overview-scale)); margin-top: var(--space-1); }
.mini-plan .building-map { position: absolute; top: 0; left: 0; margin: 0; transform: scale(var(--overview-scale)); transform-origin: top left; pointer-events: none; }
.building-button strong { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1); font-size: var(--text-body); flex-wrap: wrap; }
.building-button .open-mark { color: var(--muted); width: var(--icon-small); height: var(--icon-small); stroke-width: var(--icon-stroke); flex-shrink: 0; align-self: center; }
.building-button>span { font-size: var(--text-caption); }
.building-button>span:nth-child(2), .building-count { color: var(--muted); }
.building-map, .mini-plan { --building-width: var(--building-wide); }
.building-map.right, .building-button.right .mini-plan { --building-width: var(--building-narrow); }
.building-map { display: block; width: 100%; max-width: var(--building-width); margin: 0 auto; }
.map-canvas .building-map, .mini-plan .building-map { width: var(--building-width); max-width: none; }
#map-view > .building-map > .building-heading, .map-canvas .building-heading { display: none; }
.building-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.building-heading h2 { font-size: var(--text-body); margin: 0; }
.building-heading p { font-size: var(--text-caption); color: var(--muted); margin: 0; }
.unit-grid { display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); height: var(--building-long); gap: 2px; border: var(--border-width) solid var(--edge); background: #fff; padding: 2px; }
.unit-pair { display: grid; min-height: 0; gap: 2px; }
.building-map.back .unit-grid { height: var(--building-short); grid-template-rows: minmax(0, 1fr); }
.building-map.back .unit-button { height: 100%; }
.unit-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; width: 100%; min-height: 44px; background: var(--fill); border: var(--border-width) solid var(--stroke); border-radius: var(--radius-map); padding: 7px 3px; }
.unit-button:hover, .unit-button:active { background-color: var(--fill); }
.unit-button:focus-visible { outline: var(--border-width) solid var(--ink); outline-offset: 2px; }
.unit-selected .unit-button:not(.selected-unit) {
  background-color: color-mix(in srgb, var(--fill) 55%, var(--surface));
}
.unit-button.selected-unit { border-color: var(--ink); outline: var(--border-width) solid var(--ink); outline-offset: 1px; }
.unit-number { line-height: var(--leading-number); font-size: 20px; font-weight: var(--weight-unit); font-variant-numeric: tabular-nums; }
#map-view > .building-map .unit-button, .map-canvas .unit-button { min-height: 44px; padding-block: 3px; gap: 0; }
#map-view > .building-map .unit-number, .map-canvas .unit-number { line-height: 22px; }
.unit-tenant, .unit-rent, .unit-move { font-weight: var(--weight-normal); display: block; max-width: 100%; font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.front-units { min-height: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.front-units.four { grid-template-columns: repeat(4, 1fr); }
.front-units .unit-button { padding: 7px 1px; min-height: 44px; }
.front-units .unit-number { font-size: 16px; }
.map-canvas { position: relative; isolation: isolate; width: 100%; max-width: var(--controls-width); margin: 0 auto; overflow: hidden; overscroll-behavior: contain; touch-action: none; user-select: none; }
.map-canvas .building-map { position: absolute; top: 0; left: 0; margin: 0; transform-origin: top left; }
.map-canvas.is-zoomed { cursor: grab; }
.map-canvas.is-dragging { cursor: grabbing; }
.map-canvas:focus-visible { outline: var(--focus-width) solid var(--ink); }
.focused-building { max-width: var(--controls-width); margin-inline: auto; padding-top: var(--space-3); }
.map-actions { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; display: flex; justify-content: flex-end; }
.map-zoom-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-min-height); padding: var(--control-padding-y) var(--control-padding-x); background: var(--surface); font-size: var(--text-label); font-weight: var(--weight-heading); white-space: nowrap; }
.map-zoom-button svg { flex-shrink: 0; }
.unit-button.nonmatch { background: #fff; border-color: var(--edge); border-style: dashed; color: var(--muted); }
.available { --fill: #dfefd9; --stroke: #446b37; }
.occupied, .rented { --fill: #e0e0e0; --stroke: #626262; }
.reserved { --fill: #f6e8bb; --stroke: #80611b; }
.maintenance, .move-ins-due, .overdue-move-outs { --fill: #f2ded4; --stroke: #9a5032; }
.owner-use { --fill: #e3e1da; --stroke: #636158; }
.unset { --fill: #ffffff; --stroke: #767676; }
.legend { display: flex; gap: var(--space-1) var(--space-2); flex-wrap: wrap; margin: var(--space-2) auto 0; max-width: var(--controls-width); font-size: var(--text-label); }
.legend button { display: flex; align-items: center; gap: var(--space-2); padding: var(--control-padding-y) var(--control-padding-x); background: transparent; border-color: transparent; }
.legend button:hover { background: var(--fill); }
.legend button[aria-pressed=true] { background: var(--fill); border-color: var(--stroke); }
.legend i { flex-shrink: 0; width: var(--status-swatch-size); height: var(--status-swatch-size); display: inline-block; border: var(--border-width) solid var(--stroke); background: var(--fill); }
.filter-panel .legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--space-2); margin: 0; max-width: none; }
.filter-panel .legend button { justify-content: flex-start; min-width: 0; background: var(--surface); border-color: var(--line); text-align: left; }
.filter-panel .legend button:hover { background: var(--neutral-hover); border-color: var(--hover-border); }
.filter-panel .legend button[aria-pressed=true] { background: var(--neutral-selected); border-color: var(--muted); }
#clear-status-filter { flex-shrink: 0; padding: var(--space-2) var(--space-1); border: 0; background: transparent; font-size: var(--text-label); text-decoration: underline; text-underline-offset: 2px; }
.unit-button.owner-use, .legend .owner-use i { background-image: repeating-linear-gradient(135deg, transparent 0 5px, #63615826 5px 6px); }
.unit-button.owner-use .unit-number { background: var(--fill); padding-inline: 3px; }
dialog { position: fixed; inset: auto 0 0; margin: 0; padding: 0; width: 100%; max-width: 100%; height: min(88dvh, var(--visible-height)); max-height: var(--visible-height); border: 0; border-top: var(--border-width) solid var(--line); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sheet); }
dialog::backdrop { background: #22222226; }
dialog.compact-details::backdrop { background: transparent; }
#unit-preview { padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
#unit-preview p { margin: 0 0 var(--space-2); }
#unit-preview p:empty { display: none; }
#preview-tenant { font-weight: var(--weight-label); }
#preview-rent, #preview-status { font-size: var(--text-label); color: var(--muted); }
#open-editor { margin-top: var(--space-2); }
dialog.compact-details { height: auto; max-height: min(50dvh, var(--visible-height)); overflow-y: auto; }
.compact-details .sheet-body, .compact-details .sheet-footer { display: none; }
.compact-details #unit-form { height: auto; }
@media (max-width: 1099px) {
  .map-controls { position: sticky; top: 0; z-index: 2; margin-top: calc(var(--page-top-space) * -1); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--line); background: var(--paper); }
  body.compact-open main { padding-bottom: 50dvh; }
}
#unit-form { height: 100%; display: flex; flex-direction: column; }
.sheet-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--border-width) solid var(--line); flex-shrink: 0; }
.sheet-header h2 { margin: var(--space-1) 0; font-size: var(--text-total); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); }
#close { display: grid; place-items: center; width: var(--control-min-height); padding: 0; background: transparent; }
.sheet-header p { margin: 0; font-size: var(--text-label); color: var(--muted); }
.sheet-body { display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4); min-height: 0; flex: 1; scroll-padding-block: var(--space-4); }
.sheet-body > * { flex-shrink: 0; }
label { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-label); font-weight: var(--weight-label); margin: 0; }
label input, label select, label textarea { font-size: var(--text-body); font-weight: var(--weight-normal); }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-3); }
.sheet-footer { padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: var(--border-width) solid var(--line); flex-shrink: 0; }
.sheet-footer p { font-size: var(--text-caption); margin: var(--space-2) 0 0; color: var(--muted); }
.primary { background: var(--ink); border-color: var(--ink); color: #fff; width: 100%; min-height: var(--control-primary-min-height); font-weight: var(--weight-heading); }
.primary:hover { background: var(--primary-hover); }
.primary:active { background: var(--primary-pressed); border-color: var(--primary-pressed); color: var(--surface); }
#save-error { color: var(--error); margin: 0 0 var(--space-2); }
#save-error:empty { display: none; }
#storage-error { color: var(--error); background: #fff; padding: var(--space-3); border: var(--border-width) solid var(--error); }
#toast { position: fixed; bottom: calc(var(--nav-height) + var(--space-4)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-2); width: max-content; max-width: calc(100% - var(--page-gutter) * 2); padding: var(--space-3) var(--space-4); z-index: 4; background: var(--ink); color: #fff; border-radius: var(--radius-surface); font-size: var(--text-label); box-shadow: var(--shadow-toast); pointer-events: none; }
#toast svg { flex-shrink: 0; }
@media (max-width: 350px) {
  .map-toolbar { flex-wrap: wrap; }
  .map-toolbar .building-nav { flex: 1 0 100%; }
  #filter-toggle { margin-left: auto; }
}
@media (min-width: 600px) {
  :root { --page-gutter: var(--space-5); --page-top-space: var(--space-5); }
  .sheet-body, #unit-preview { width: 100%; max-width: var(--sheet-content-width); margin-inline: auto; }
  .sheet-header, .sheet-footer { padding-inline: max(var(--space-4), calc((100% - var(--sheet-content-width)) / 2 + var(--space-4))); }
}
@media (min-width: 1100px) {
  :root { --page-gutter: var(--page-gutter-wide); --nav-height: calc(var(--nav-content-height) + var(--space-2) * 2); }
  main { padding: var(--page-top-space) var(--page-gutter) var(--space-6); }
  #filter-panel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); max-width: none; }
  #filter-panel .legend { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .map-results { max-width: none; }
  .map-controls { position: sticky; top: 0; z-index: 2; margin-top: calc(var(--page-top-space) * -1); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--line); background: var(--paper); }
  .map-toolbar { max-width: none; }
  #search-panel { max-width: none; }
  #map-view > .building-map { margin-top: var(--space-5); }
  .building-nav { max-width: none; grid-template-columns: repeat(4, minmax(80px, 130px)); justify-content: start; }
  .building-nav span { display: inline; margin-left: var(--space-1); }
  .site-plan { --map-aisle: var(--map-aisle-wide); --site-plan-inset: var(--space-5); display: grid; grid-template-columns: minmax(0, 3fr) var(--map-aisle) minmax(0, 2fr); width: calc(var(--building-wide) + var(--map-aisle) + var(--building-narrow) + var(--site-plan-inset) * 2); max-width: 100%; margin: auto; row-gap: var(--space-5); column-gap: 0; padding: var(--space-3) var(--site-plan-inset); }
  .site-plan .back { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: var(--building-wide); }
  .site-plan .left { grid-column: 1; grid-row: 2; }
  .site-plan .right { grid-column: 3; grid-row: 2; }
  .site-plan .building-heading { display: block; }
  .site-plan .building-heading p { margin-top: var(--space-1); }
  dialog { inset: 0 0 0 auto; border-radius: 0; border-top: 0; height: var(--visible-height); }
  #toast { left: auto; right: var(--space-5); bottom: var(--space-5); transform: none; max-width: var(--toast-max-width); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media (min-width: 1100px) {
  body.editor-docked main { width: calc(100% - var(--editor-width)); max-width: none; margin: 0; padding: var(--space-3) var(--space-4) var(--space-5); }
  body.editor-docked #details { width: var(--editor-width); max-width: var(--editor-width); box-shadow: none; z-index: 5; }
  body.editor-docked .site-plan { --site-plan-inset: 0px; row-gap: var(--space-3); }
  body.editor-docked .site-plan .building-heading { display: flex; margin-bottom: var(--space-2); }
  body.editor-docked .site-plan .building-heading p { margin: 0; }
  body.editor-docked .unit-button:not(.selected-unit) { opacity: 1; }
}

.app-nav { position: fixed; inset: auto 0 0; z-index: 3; background: var(--surface); border-top: var(--border-width) solid var(--line); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); }
.app-nav-inner { display: flex; gap: var(--space-2); max-width: var(--nav-max-width); margin: auto; }
.app-brand { display: none; flex-shrink: 0; width: var(--logo-width); height: auto; }
.app-nav a { line-height: var(--leading-control); display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--nav-content-height); padding: 0; border-radius: var(--radius-control); color: var(--muted); text-decoration: none; font-size: var(--text-caption); }
.app-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-width: min(var(--nav-item-min-width), 100%); max-width: 100%; min-height: var(--control-primary-min-height); padding: var(--space-1) var(--space-1); border-radius: var(--radius-control); }
.app-nav a svg { flex-shrink: 0; }
.app-nav .nav-item > span { overflow-wrap: anywhere; }
.app-nav a[aria-current="page"] .nav-item { background: var(--neutral-selected); }
.app-nav a[aria-current="page"] { color: var(--ink); font-weight: var(--weight-heading); }
.app-nav a:hover { color: var(--ink); }
main { padding-bottom: calc(var(--nav-height) + var(--space-5)); }
#overview-screen { container-type: inline-size; max-width: var(--overview-max-width); margin-inline: auto; }
.overview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.overview-logo { display: block; flex-shrink: 0; width: var(--logo-width); max-width: 100%; height: auto; }
.overview-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.overview-metric { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--card-inset); text-align: left; border-color: var(--line); border-radius: var(--radius-surface); }
.overview-metric:hover { background: var(--neutral-hover); border-color: var(--hover-border); }
.metric-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-height: 2.5em; font-size: var(--text-label); font-weight: var(--weight-label); line-height: var(--leading-control); }
.metric-title svg { flex-shrink: 0; margin-top: 1px; color: var(--muted); }
.metric-title > span { color: var(--muted); }
.metric-value { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.metric-value > strong { display: block; font-size: clamp(1.65rem, 5vw, 2rem); font-weight: var(--weight-heading); line-height: var(--leading-number); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-heading); }
.attention-section { margin-top: var(--space-6); }
.attention-section h2 { margin: 0 0 var(--space-3); font-size: var(--text-body); }
.attention-list { border: var(--border-width) solid var(--line); border-radius: var(--radius-surface); overflow: hidden; background: var(--surface); }
.attention-row { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--icon-small); align-items: center; gap: var(--space-3); width: 100%; min-height: var(--list-row-min-height); border: 0; border-bottom: var(--border-width) solid var(--line); border-radius: 0; background: transparent; text-align: left; padding: var(--space-4) var(--card-inset); font-size: var(--text-label); }
.attention-row > strong { min-width: var(--count-min-width); padding: var(--space-1) var(--space-2); border-radius: var(--radius-small); background: var(--neutral-selected); font-size: var(--text-label); font-weight: var(--weight-label); text-align: center; font-variant-numeric: tabular-nums; }
.attention-row:last-child { border-bottom: 0; }
.attention-row:focus-visible { outline-offset: calc(var(--focus-offset) * -1); }
.attention-row > svg { color: var(--muted); flex-shrink: 0; }
.attention-row > span:last-child { color: var(--muted); }
@media (min-width: 700px) {
  .overview-metrics { gap: var(--space-4); }
  :root { --card-inset: var(--space-5); }
}
@media (min-width: 1100px) {
  .app-nav { inset: 0 0 auto; height: var(--nav-height); border-top: 0; border-bottom: var(--border-width) solid var(--line); padding: var(--space-2) var(--page-gutter-wide); }
  .app-nav-inner { align-items: center; height: 100%; gap: var(--space-3); }
  .app-brand { display: block; margin-right: var(--space-6); }
  .overview-logo { display: none; }
  .app-nav a { flex: 0 0 auto; flex-direction: row; gap: var(--space-2); min-height: var(--control-min-height); padding-inline: var(--space-3); font-size: var(--text-label); }
  .app-nav .nav-item { display: contents; }
  .app-nav a[aria-current="page"] { background: var(--neutral-selected); }
  .app-nav a[aria-current="page"] svg { background: transparent; }
  main { padding-top: calc(var(--nav-height) + var(--page-top-space)); padding-bottom: var(--space-6); }
  .map-controls { top: var(--nav-height); }
  body.editor-docked main { padding-top: calc(var(--nav-height) + var(--page-top-space)); }
  .overview-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}

.rental-dates { min-width: 0; margin: 0; border-block: var(--border-width) solid var(--line); }
.rental-dates summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--control-primary-min-height); padding-block: var(--space-3); font-size: var(--text-label); font-weight: var(--weight-label); cursor: pointer; list-style: none; }
.rental-dates summary::-webkit-details-marker { display: none; }
.rental-dates[open] summary svg { transform: rotate(180deg); }
.rental-dates summary svg { color: var(--muted); flex-shrink: 0; }
.rental-date-fields { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-1) 0 var(--space-4); border: 0; }
#preview-dates { font-size: var(--text-label); color: var(--muted); line-height: var(--leading-body); }
input[type="date"] { min-width: 0; max-width: 100%; min-height: var(--control-min-height); }
@media (max-width: 350px) {
  .overview-metric { padding: var(--space-3); }
  .metric-value { gap: var(--space-2); }

}

@container (max-width: 280px) {
  .overview { grid-template-columns: 1fr; }
  .overview .back, .overview .left, .overview .right { grid-column: 1; grid-row: auto; justify-self: center; }
}

@container (max-width: 17rem) {
  .overview-metrics { grid-template-columns: 1fr; }
}

:where(.app-nav, #filter-toggle, #search-toggle, #close, #toast) svg {
  width: var(--icon-action);
  height: var(--icon-action);
  stroke-width: var(--icon-stroke);
}
.map-zoom-button svg {
  width: var(--icon-action);
  height: var(--icon-action);
  stroke-width: var(--icon-stroke);
}
:where(.metric-title, .attention-row, .rental-dates summary) svg {
  width: var(--icon-small);
  height: var(--icon-small);
  stroke-width: var(--icon-stroke);
}

@container (max-width: 48rem) {
  .site-plan { --map-aisle: var(--map-aisle-compact); }
}

.select-field { position: relative; display: block; min-width: 0; }
.select-field select { appearance: none; -webkit-appearance: none; padding-inline-end: calc(var(--field-padding) + var(--icon-small) + var(--space-2)); }
.select-field > svg { position: absolute; inset-inline-end: var(--field-padding); top: 50%; transform: translateY(-50%); width: var(--icon-small); height: var(--icon-small); stroke-width: var(--icon-stroke); color: var(--muted); pointer-events: none; }
@media (forced-colors: active) {
  .select-field select { appearance: auto; -webkit-appearance: auto; padding-inline-end: var(--field-padding); }
  .select-field > svg { display: none; }
}

.active-filter-chip { display: inline-flex; align-items: center; max-width: 100%; padding: var(--space-1) var(--space-2); border: var(--border-width) solid var(--stroke); border-radius: var(--radius-small); background: var(--fill); color: var(--ink); font-size: var(--text-label); font-weight: var(--weight-label); line-height: var(--leading-control); }

.map-label-controls { display: flex; justify-content: flex-end; max-width: var(--controls-width); margin: var(--space-2) auto 0; }
.map-label-toggle { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-surface); background: var(--neutral-selected); }
.map-label-toggle button { border-color: transparent; background: transparent; font-size: var(--text-label); }
.map-label-toggle button[aria-pressed="true"] { background: var(--surface); border-color: var(--line); font-weight: var(--weight-label); }
.unit-rent { font-variant-numeric: tabular-nums; }
.building-rent-total { display: block; margin-top: var(--space-1); color: var(--ink); font-weight: var(--weight-label); font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) {
  .map-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start; }
  .map-toolbar { width: 100%; grid-column: 1; grid-row: 1; }
  .map-label-controls { max-width: none; margin: 0; grid-column: 2; grid-row: 1; }
  #search-panel, #filter-panel, .map-results { grid-column: 1 / -1; width: 100%; }
}

@media (min-width: 1100px) {
  @container (max-width: 40rem) {
    .map-controls { grid-template-columns: minmax(0, 1fr); }
    .map-label-controls { grid-column: 1; grid-row: auto; margin-top: var(--space-2); }
  }
}

.scheduled-moves { --fill: var(--neutral-selected); --stroke: #606972; }
.overdue-move { color: #88432b; font-weight: var(--weight-label); }

.field-error { color: var(--error); font-size: var(--text-label); font-weight: var(--weight-normal); }
[aria-invalid="true"] { border-color: var(--error); }

.building-nav button:hover, .map-label-toggle button:hover { background: var(--neutral-hover); }
.building-nav button:active, .map-label-toggle button:active { background: var(--neutral-pressed); }
.building-nav button[aria-pressed="true"], .map-label-toggle button[aria-pressed="true"] { background: var(--surface); border-color: var(--muted); }
.overview-metric:active, .attention-row:active { background: var(--neutral-pressed); }
#close:hover, #clear-status-filter:hover, .map-zoom-button:hover { background: var(--neutral-hover); }
#close:active, #clear-status-filter:active, .map-zoom-button:active { background: var(--neutral-pressed); }
.app-nav a:hover { background: var(--neutral-hover); }
.app-nav a:active { background: var(--neutral-pressed); }
.unit-button:hover { border-color: var(--ink); }

#filter-toggle[aria-expanded=true], #filter-toggle[aria-pressed=true], #search-toggle[aria-expanded=true] { border-color: var(--muted); }
.app-nav a[aria-current="page"] .nav-item { box-shadow: inset 0 0 0 var(--border-width) var(--muted); }
@media (min-width: 1100px) {
  .app-nav a[aria-current="page"] { box-shadow: inset 0 0 0 var(--border-width) var(--muted); }
  .app-nav a[aria-current="page"] .nav-item { box-shadow: none; }
  body.editor-docked .unit-button:not(.selected-unit) { background-color: var(--fill); }
  body.editor-docked .unit-button.nonmatch { background-color: var(--surface); }
}
.unit-selected .unit-button.nonmatch:not(.selected-unit) { background-color: var(--surface); }

.app-nav a:active, #clear-status-filter:active { color: var(--ink); }
.attention-row:active > svg, .overview-metric:active .metric-title svg { color: var(--ink); }

.app-nav .nav-label { display: grid; }
.nav-label > span, .nav-label::after { grid-area: 1 / 1; }
.nav-label::after { content: attr(data-label); font-weight: var(--weight-heading); visibility: hidden; }
.app-nav .brand-link { display: none; }
.overview-logo img { display: block; width: 100%; height: auto; }
.overview-logo { min-height: var(--control-min-height); align-content: center; border-radius: var(--radius-control); }
@media (min-width: 1100px) {
  .app-nav .brand-link { display: flex; flex: 0 0 var(--logo-width); margin-right: var(--space-6); padding: 0; }
  .brand-link .app-brand { margin: 0; width: 100%; }
  .app-nav .brand-link:hover, .app-nav .brand-link:active { background: transparent; }
}

@media (max-width: 1099px) {
  .app-nav a:hover, .app-nav a:active { background: transparent; }
  .app-nav a:hover .nav-item { background: var(--neutral-hover); }
  .app-nav a[aria-current="page"]:hover .nav-item { background: var(--neutral-selected); }
  .app-nav a:active .nav-item, .app-nav a[aria-current="page"]:active .nav-item { background: var(--neutral-pressed); }
}

.nav-return-icon { display: none; }
@media (max-width: 1099px) {
  .units-from-overview .nav-overview-icon { display: none; }
  .units-from-overview .nav-return-icon { display: block; }
}

.building-header-button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: 0; border: 0; background: transparent; text-align: left; font-size: var(--text-body); }
.building-header-button strong { font-weight: var(--weight-heading); }
.building-header-button small { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-caption); font-weight: var(--weight-normal); line-height: var(--leading-body); }
.building-header-button svg { flex-shrink: 0; width: var(--icon-small); height: var(--icon-small); color: var(--muted); stroke-width: var(--icon-stroke); }
.building-header-button:hover { background: var(--neutral-hover); }
.building-header-button:active { background: var(--neutral-pressed); }

.building-header-button { width: 100%; margin-inline: 0; padding: var(--space-1) var(--space-2); }

.filter-calendar { flex-shrink: 0; width: var(--icon-small); height: var(--icon-small); stroke-width: var(--icon-stroke); color: var(--muted); }
.filter-calendar-overdue { color: var(--stroke); }

#search { height: var(--control-min-height); padding-block: var(--control-padding-y); }

#workspace { overflow-anchor: none; }

@media (min-width: 1100px) {
  .desktop-map { padding-top: var(--space-3); }
  .desktop-map-canvas { max-width: none; }
  .desktop-map-canvas > .site-plan { position: absolute; top: 0; left: 0; max-width: none; margin: 0; padding-block: 0; transform-origin: top left; }
  .desktop-map-canvas .site-plan .building-map { position: static; width: 100%; max-width: var(--building-width); }
  .desktop-map-canvas .site-plan .building-heading { display: block; }
}

@media (max-width: 1099px) {
  body:not(.compact-open) main:has(#workspace:not([hidden])) { padding-bottom: var(--nav-height); }
}

.map-canvas::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--canvas-control-space, 0px); background: var(--paper); z-index: 1; }
.map-canvas .map-actions { z-index: 2; }

.map-canvas.is-zoomed::after { content: ""; position: absolute; inset: 0; border: var(--border-width) solid var(--line); z-index: 3; pointer-events: none; }

@media (min-width: 1100px) {
  main:has(#workspace:not([hidden])), body.editor-docked main:has(#workspace:not([hidden])) { padding-bottom: var(--space-3); }
}

@media (max-width: 1099px) {
  body:not(.compact-open) main:has(#workspace:not([hidden]) [data-map-canvas]) { padding-bottom: calc(var(--nav-height) + var(--space-3)); }
}

.map-label-toggle { max-width: 100%; flex-wrap: wrap; }


.rental-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rental-actions button { flex: 1 1 8rem; }
#unit-preview .rental-actions { margin-top: var(--space-3); }

.field-hint { color: var(--muted); font-size: var(--text-label); font-weight: var(--weight-normal); }

.rental-dates summary > span { min-width: 0; }
#address-summary, #rental-date-summary { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-label); font-weight: var(--weight-normal); overflow-wrap: anywhere; }
#address-summary[hidden], #rental-date-summary[hidden] { display: none; }
.address-locality { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-2); }
.address-locality label, .address-locality input { min-width: 0; }
@media (max-width: 350px) { .address-locality { grid-template-columns: 1fr 1fr; } .address-locality label:first-child { grid-column: 1 / -1; } }

.license-fields { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-4) 0 0; border: 0; border-top: var(--border-width) solid var(--line); }
.license-fields legend { padding: 0 var(--space-2) 0 0; font-size: var(--text-label); font-weight: var(--weight-label); }

.auth-locked > :not(#auth-gate) { display: none !important; }
#auth-gate { max-width: 28rem; margin: 15dvh auto; padding: var(--space-5); }
#auth-gate img { display: block; margin-bottom: var(--space-5); height: auto; }
#auth-gate h1 { font-size: var(--text-total); }
#auth-gate p { color: var(--muted); }
#session-sign-out { position: fixed; right: var(--space-3); top: var(--space-2); z-index: 4; font-size: var(--text-caption); }
@media (max-width: 1099px) { #session-sign-out { position: static; display: block; margin: var(--space-2) var(--page-gutter) var(--space-2) auto; } }

.notification-settings { max-width: var(--overview-max-width); margin: var(--space-6) auto 0; padding-top: var(--space-5); border-top: var(--border-width) solid var(--line); }
.notification-settings h2 { margin: 0 0 var(--space-3); font-size: var(--text-body); }
.notification-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notification-settings p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-label); }
main:has(#overview-screen[hidden]) .notification-settings { display: none; }
button:disabled { cursor: default; opacity: .6; }