/* Modern light. Live Floor: map, legend, building scene, overlay labels, issue list, event feed. */
.dashboard { isolation: isolate; min-height: 680px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); box-shadow: var(--shadow-sm); }
.floor-section { flex: 1 1 68%; min-width: 0; padding: 24px; border-right: 1px solid var(--rule); }
.section-heading { align-items: center; justify-content: space-between; margin-bottom: 20px; }
.legend { gap: 14px; color: var(--ink-2); font-size: .78rem; font-weight: 500; }.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend-dot, .availability-marker { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }.equipment-dot { background: var(--ink-2); }.responder-dot, .available { background: var(--ok); }.unavailable-dot, .unavailable { background: var(--muted); }.offered { background: var(--info); }.assigned-dot, .assigned { background: var(--warn); }
.floor { position: relative; height: 600px; overflow: hidden; overscroll-behavior: contain; touch-action: pan-y; cursor: default; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.floor.is-pan-armed { cursor: grab; }
.floor.is-panning { cursor: grabbing; }
/* One scene supports both the default 2D plan and optional 2.5D overview.
   Screen-space pan/zoom lives outside the 3D projection so proportions hold. */
.building-stage { position: absolute; inset: 0; transform: translate3d(var(--pan-x, 0), var(--pan-y, 0), 0) scale(var(--zoom, 1)); transform-origin: center; transition: transform .18s ease-out; will-change: transform; }
.building-viewport { position: absolute; inset: 0; display: grid; place-items: center; perspective: 3200px; }
.building { --yaw: var(--yaw-user, -35deg); --pitch: var(--pitch-user, 58deg); position: relative; width: 76%; height: 40%; transform-style: preserve-3d; transform: translateY(30px) rotateX(var(--pitch)) rotateZ(var(--yaw)) translateZ(calc(var(--focus-level, 0) * -175px)); transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.floor-plane { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; transform: translateZ(calc(var(--level) * 175px)); border: 1px solid var(--rule); border-radius: 6px; background: color-mix(in srgb, var(--paper-raised) 55%, transparent); opacity: .3; transition: opacity .35s ease, border-color .35s ease, visibility .35s ease; }
.floor-plane.active-floor { border-color: var(--rule-strong); background: var(--paper-raised); opacity: 1; }
.floor-plane:not(.active-floor) .node-shape { border-width: 1px; }
.floor-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 16.66% 25%; opacity: .4; }
/* Signage painted on the floor: same axes as the plane it names, sized so it
   survives the 2.5D foreshortening rather than counter-rotating out of it. */
.floor-tag { position: absolute; top: 8px; left: 12px; color: var(--ink-3); font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
/* Machines and responders lie in the floor plane and share its axes, so in 2.5D
   they foreshorten with the floor instead of billboarding square to the camera.
   Readable text is the overlay layer's job, which is what frees them to tilt. */
.map-node { position: absolute; z-index: 1; pointer-events: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; white-space: nowrap; cursor: pointer; transform: translate(-50%, -50%); transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
/* Wireframes, not filled icons: at ~24 machines per floor, outlines stay readable. */
.node-shape { display: block; width: 15px; height: 15px; margin: 0 auto; border: 1.5px solid currentColor; background: none; }
.responder .node-shape { width: 12px; height: 12px; border-radius: 50%; }
.node-copy { display: none; }
.active-floor .map-node:hover .node-copy, .map-node.focused .node-copy, .active-floor .active-equipment .node-copy { display: block; margin-top: 3px; }
.floor:not(.view-2d) .node-copy { display: none !important; }
.map-label-layer { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.map-overlay-label { position: absolute; display: grid; min-width: 72px; max-width: 132px; gap: 1px; padding: 5px 7px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); font-size: .64rem; line-height: 1.2; text-align: center; white-space: nowrap; box-shadow: var(--shadow-sm); }
.map-overlay-label > * { overflow: hidden; text-overflow: ellipsis; }
.map-overlay-label > span { color: var(--ink-3); font-size: .56rem; }
.map-overlay-label::after { position: absolute; top: 100%; left: var(--leader-x); width: 1px; height: var(--leader-height); background: linear-gradient(var(--rule), transparent); content: ""; }
.map-overlay-label[data-label-placement="below"]::after { display: none; }
.map-overlay-label[data-label-placement="below"]::before { position: absolute; bottom: 100%; left: var(--leader-x); width: 1px; height: var(--leader-height); background: linear-gradient(transparent, var(--rule)); content: ""; }
.map-overlay-label.responder { border-color: var(--ok); }
.floor.view-2d .map-label-layer { display: none; }
.map-node:hover, .map-node.focused { z-index: 3; }
.map-node.focused .node-shape { outline: 2px solid var(--accent); outline-offset: 3px; }
.active-equipment .node-shape { border-width: 2px; background: var(--danger); animation: pulse-node 2.2s infinite; }
.floor.view-2d .building-viewport { perspective: none; }
.floor.view-2d .building { --yaw: 0deg; --pitch: 0deg; width: 88%; height: 70%; transform: none; }
.floor.view-2d .floor-plane { transform: none; }
.floor.view-2d .floor-plane:not(.active-floor) { visibility: hidden; opacity: 0; pointer-events: none; }
.building-controls { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; max-width: calc(100% - 24px); padding: 6px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); box-shadow: var(--shadow-md); cursor: default; }
.control-group { display: inline-flex; align-items: center; gap: 4px; padding-left: 7px; border-left: 1px solid var(--rule); }
.control-group:first-child { padding-left: 0; border-left: 0; }
.building-controls button { min-width: 29px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: none; background: var(--paper-raised); color: var(--ink); font-size: .72rem; line-height: 1.4; }
.building-controls button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
.building-controls #reset-map { min-width: 48px; }
.building-hint { color: var(--ink-3); font-size: .7rem; font-weight: 600; }
/* Top-right is the only corner that stays free: floor signage is painted at
   each plane's top-left, and the control bar sits bottom-right and wraps
   leftward into the bottom-left corner on a narrow map. */
.map-help { position: absolute; top: 12px; right: 12px; z-index: 4; margin: 0; padding: 5px 9px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper-raised); color: var(--ink-3); font-size: .66rem; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .building-stage, .building, .floor-plane, .map-node { transition-duration: 0s !important; } .active-equipment .node-shape { animation: none; } }
@keyframes pulse-node { 50% { opacity: .45; } }
.equipment { color: var(--ink-2); }.responder { color: var(--ok-ink); }.responder.unavailable { color: var(--muted); }.responder.offered { color: var(--info); }.responder.assigned { color: var(--warn-ink); }.active-equipment { color: var(--danger-ink); }.node-label { display: block; color: var(--ink); font-size: .72rem; font-weight: 650; }.node-status, .issue-label { display: block; margin-top: 2px; color: var(--ink-3); font-size: .62rem; font-weight: 500; }.issue-label { color: var(--danger-ink); font-weight: 700; }.issue-ring { position: absolute; top: -13px; left: 50%; width: 57px; height: 57px; border: 2px solid var(--danger); border-radius: 50%; transform: translateX(-50%); animation: pulse 2.2s infinite; } @keyframes pulse { 50% { transform: translateX(-50%) scale(1.15); opacity: .4; } }
.issue-dot { background: var(--danger); }.lower-grid { gap: 20px; margin-top: 20px; }.lower-grid > section { flex: 1 1 50%; min-width: 0; }.issue-list, .event-feed { display: grid; gap: 7px; max-height: 245px; overflow-y: auto; }.issue-card { display: grid; gap: 4px; width: 100%; border-color: var(--rule); background: var(--paper-raised); text-align: left; box-shadow: none; }.issue-card span { color: var(--ink-3); font-size: .72rem; }.issue-card.selected { border-color: var(--accent); background: var(--accent-wash); }
.feed-event { display: grid; grid-template-columns: 42px 1fr; gap: 8px; width: 100%; padding: 8px; border: 0; border-left: 2px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); color: inherit; text-align: left; font-size: .72rem; font-weight: inherit; box-shadow: none; }.feed-event:hover, .feed-event.selected { background: var(--paper-sunk); border-left-color: var(--accent); }.feed-event:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }.feed-event time { color: var(--ink-3); font-variant-numeric: tabular-nums; }.feed-event-copy { display: grid; gap: 2px; min-width: 0; }.feed-event-copy > span { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }.feed-event.disagreement { border-left-color: var(--warn); background: var(--accent-wash); }
/* Figures and IDs are monospaced; labels stay in the UI font. */
.issue-card strong, .feed-event time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.issue-card { border-left: 3px solid var(--rule); }
.issue-card:has(.issue-dot) { border-left-color: var(--danger); }
.issue-card.selected { border-left-color: var(--accent); }
.feed-event.disagreement { border-left-color: var(--accent); }

/* Text uses AA-safe inks; map outlines retain the brighter status marks. */
.responder .node-shape { border-color: var(--ok); }
.responder.offered .node-shape { border-color: var(--info); }
.responder.assigned .node-shape { border-color: var(--warn); }
.responder.unavailable .node-shape { border-color: var(--muted); }
.active-equipment .node-shape { border-color: var(--danger); }

/* Name-first task rows and a quiet, structured event timeline. */
.issue-card { gap: 6px; padding: 12px; border-radius: var(--radius-sm); }
.issue-card .issue-row-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.issue-card .issue-row-heading strong { font-family: var(--font-sans); font-size: .88rem; }
.issue-card .issue-row-description { color: var(--ink-2); font-family: var(--font-sans); font-size: .76rem; line-height: 1.4; }
.issue-card .issue-row-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.issue-card .issue-row-meta span { font-size: .68rem; color: var(--ink-3); }
.issue-card .issue-row-meta span:first-child { font-family: var(--font-mono); }
.feed-event { position: relative; padding: 10px 8px 10px 16px; }
.event-marker { position: absolute; top: 15px; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.feed-event.selected .event-marker, .feed-event.disagreement .event-marker { background: var(--accent); }
.feed-event-copy { min-width: 0; }
.feed-event-copy strong { line-height: 1.4; }
.equipment .node-shape { width: 17px; height: 15px; border-radius: 3px; border-width: 1.5px; background: var(--paper-sunk); box-shadow: inset 0 -4px 0 var(--rule); }
.equipment.active-equipment .node-shape { background: var(--danger); box-shadow: none; }
.responder .node-shape { border-width: 2px; background: var(--paper-raised); }
.building-controls { gap: 10px; padding: 7px; }
.building-controls .control-group + .control-group { padding-left: 8px; border-left: 1px solid var(--rule); }
.issue-card .issue-row-heading strong { color: var(--ink); font-weight: 600; }