/*
 * Observe's own surfaces beyond the band: the estate map (teams → machines → agents → models → gateways →
 * providers). The band, the strip and the lanes are the instrument itself and stay in enterprise.css.
 *
 * The map is a world of cards on a tray: each node a card in the frame's material, each edge a token-weighted
 * path, the whole thing panned and zoomed by hand. Motion only where a machine reported within two minutes.
 */
.space[data-space="overview"][data-lens="Map"] .band-pane { display: none; }
.space[data-space="overview"][data-lens="Map"] .pane[data-lens="Map"] { display: flex; }
.space[data-space="overview"][data-lens="Map"] .col.main { grid-template-rows: minmax(0, 1fr); }
.map { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.map-view { position: relative; flex: 1 1 auto; min-height: 320px; overflow: hidden; outline: none; touch-action: none; cursor: grab; background: var(--tray); box-shadow: inset 0 0 0 1px var(--tray-edge), inset 0 2px 6px rgba(0, 0, 0, .22); user-select: none; -webkit-user-select: none; }
.map-view:active { cursor: grabbing; }
.map-view:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-fill); }
.map-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.map-lanes, .map-nodes { position: absolute; left: 0; top: 0; }
.map-lane { position: absolute; left: 0; top: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.map-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.map-edge { fill: none; stroke: var(--accent-text); stroke-opacity: .32; stroke-linecap: round; transition: stroke-opacity .2s var(--ease); }
.map-edge.live { stroke-dasharray: 6 9; animation: flow 1.4s linear infinite; stroke-opacity: .6; }
.map-edge[data-dim] { stroke-opacity: .07; animation: none; }
.app[data-motion="paused"] .map-edge.live { animation: none; }
@keyframes flow { to { stroke-dashoffset: -15; } }
/* a node is a card in the frame's material, lit from the top; it lifts under the pointer and settles on press */
.map-node { position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 6px 10px; border-radius: 8px; cursor: grab; background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--card-edge), var(--card-shadow); color: var(--ink); overflow: hidden; transition: box-shadow .2s var(--ease), opacity .2s var(--ease); }
.map-node.dragging { cursor: grabbing; box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--accent-edge), var(--card-lift); z-index: 2; }
@media (hover: hover) { .map-node:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-rim) 70%, #fff), inset 0 0 0 1px var(--card-edge), var(--card-lift); } }
.map-node[data-selected] { box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1.5px var(--accent-fill), var(--card-lift); }
.map-node[data-dim] { opacity: .32; }
.map-node:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.map-node .nm { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 16px; }
.map-node .ln { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.map-node .nm b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* a team's name may take two lines; a machine's stays on one and names its person when another machine shares its label */
.map-node.team .nm b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 15px; }
.map-node .nm .mk { width: 12px; height: 12px; }
.map-node .nm svg:not(.mk) { width: 14px; height: 14px; color: var(--quiet); flex: none; }
.map-node .nm .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.map-node.live .nm .dot { background: var(--good); box-shadow: 0 0 8px var(--good-glow); animation: bp 1.7s var(--ease) infinite; }
.app[data-motion="paused"] .map-node.live .nm .dot { animation: none; }
.map-node.silent { background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 4px, transparent 4px 9px), linear-gradient(180deg, var(--card-a), var(--card-b)); }
.map-node.silent .nm .dot { box-shadow: inset 0 0 0 1.5px var(--warn); }
.map-node .sb { font-size: 12px; line-height: 15px; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* a machine is a chip: one line, its person on hover and in the details */
.map-node.device { padding: 0 7px; display: flex; align-items: center; }
.map-node.device .ln { display: none; }
.map-node.device .nm { font-size: 12px; width: 100%; }
.map-node.device .nm b { flex: 1 1 auto; }
.map-node.device .fg { margin-left: auto; }
.map-node .fg { font: 400 12px/15px var(--mono); letter-spacing: 0; color: var(--ink-2); display: inline-flex; gap: 5px; align-items: baseline; flex: none; }
.map-node .fg small { font-size: 12px; color: var(--quiet); }
.map-node.team .nm b, .map-node.provider .nm b { font-size: 13px; }
.map-node.gateway { border: 1px dashed var(--line-strong); background: transparent; box-shadow: none; cursor: default; }
.map-node.gateway .nm b { font-weight: 500; color: var(--ink-2); }
.map-legend { flex: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--quiet); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend i.e { width: 18px; height: 0; border-top: 2px solid var(--accent-text); opacity: .6; }
.map-legend i.e.live { border-top-style: dashed; opacity: 1; }
.map-legend i.d { width: 12px; height: 8px; border-radius: 2px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: inset 0 0 0 1px var(--card-edge); }
.map-void { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--quiet); font-size: 12px; background: repeating-linear-gradient(-45deg, var(--hatch) 0 6px, transparent 6px 13px); }
.map-void b { font-weight: 500; color: var(--ink-2); }
.map-tools { display: inline-flex; align-items: center; gap: 6px; }
.map-tools .zoom { display: inline-flex; gap: 1px; }
.map-tools .zoom .tb { min-width: 28px; padding: 0 6px; font-size: 14px; line-height: 1; }
@media (max-width: 899px) {
  .map-view { min-height: 70vh; }
  .map-legend { display: none; }
  .map-tools .tb { min-height: 32px; }
}

/* ─── Observe › Flow: the living picture as its own lens; it takes the working area, and Expand takes the screen (Esc closes) ─── */
.space[data-space="overview"][data-lens="Flow"] .band-pane { display: none; }
.space[data-space="overview"][data-lens="Flow"] .pane[data-lens="Flow"] { display: flex; }
.space[data-space="overview"][data-lens="Flow"] .col.main { grid-template-rows: minmax(0, 1fr); }
.pane[data-pane="flow"] .pane-b { display: flex; flex-direction: column; overflow: hidden; }
/* the picture keeps its dark ground in both appearances, as the strip does; the words on it take the strip's ink */
.flow-host { --ink: #EEF2F8; --ink-2: #C3CCDB; --quiet: #94A0B4; --raised: rgba(255, 255, 255, .06); --accent: #7FB4FF; --accent-soft: rgba(91, 155, 255, .16); --accent-edge: rgba(110, 168, 255, .5); --good: #4FE0A8; --good-glow: rgba(79, 224, 168, .85);
  position: relative; flex: 1 1 auto; min-height: 320px; overflow: hidden; color-scheme: dark; background: #070B13 radial-gradient(90% 130% at 58% 55%, #0C1424 0%, #070B13 72%); }
.pane[data-pane="flow"][data-expanded] { position: fixed; inset: 0; z-index: 95; border-radius: 0; border: 0; max-height: none !important; }
.pane[data-pane="flow"][data-expanded] .pane-h { height: 44px; }
@media (max-width: 899px) {
  .flow-host { min-height: 440px; }
}

/* light appearance: the picture is an intentional dark instrument card with the strip's rim, not a slab */
:root[data-theme="light"] .pane[data-pane="flow"]:not([data-expanded]) .flow-host { margin: 8px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .09); }