/*
 * The Estate Nexus behind the strip's words (web/lib/nexus.ts).
 *
 * The strip keeps its own dark ground in both appearances, as the public console's does; the picture is a canvas
 * under the words, and every word that has to be read — the figures around the core, the policy line, the legend,
 * the hover and the event chips — is in the DOM at 12 px or more, placed through the CSS object model.
 */
.conhead[data-nexus] { height: clamp(250px, 20vw, 300px); align-items: flex-start; padding-top: 12px; background: #070B13 radial-gradient(90% 130% at 58% 55%, #0C1424 0%, #070B13 72%); }
/* the words keep their contrast: a short veil under the first row only */
.conhead[data-nexus]::before { z-index: 2; background: linear-gradient(180deg, rgba(7, 11, 19, .82) 0, rgba(7, 11, 19, .42) 34px, rgba(7, 11, 19, 0) 66px); }
.conhead[data-nexus] > :not(.nexus) { position: relative; z-index: 3; }
.nexus { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: auto; cursor: default; }
.nexus[data-door] { cursor: pointer; }
.nexus canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nexus .nx-fig, .nexus .nx-core, .nexus .nx-legend, .nexus .nx-tip, .nexus .nx-ev { position: absolute; pointer-events: none; white-space: nowrap; }
/* the figures around the core: a live reading each, its words under it */
.nx-fig { transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.nx-fig b { font: 500 15px/18px var(--mono); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.nx-fig[data-top] b { font-size: 24px; line-height: 26px; font-weight: 400; letter-spacing: -.01em; }
.nx-fig span { font: 400 12px/14px var(--sans); color: var(--quiet); }
.nx-fig[data-hot] b { color: #FFA093; }
/* Enforce: the same picture in another light */
.nexus[data-mode="enforce"] .nx-fig[data-k="approved"] b, .nexus[data-mode="enforce"] .nx-fig[data-k="would"] b { color: var(--ink); }
.nx-dlp { position: absolute; transform: translate(-50%, 0); font: 400 12px/15px var(--sans); color: var(--ink-2); white-space: nowrap; pointer-events: none; }
/* a figure aligns by the side of the core it stands on (the renderer says which): the left one ends at its anchor, the right one starts there */
.nx-fig[data-side="left"] { transform: translate(-100%, -50%); align-items: flex-end; text-align: right; }
.nx-fig[data-side="right"] { transform: translate(0, -50%); align-items: flex-start; text-align: left; }
/* a phone: the two side figures flank the core; the top figure becomes a line under the policy */
.nexus[data-layout="vertical"] .nx-fig b { font-size: 18px; line-height: 20px; }
.nexus[data-layout="vertical"] .nx-fig span { max-width: 118px; white-space: normal; }
.nexus[data-layout="vertical"] .nx-fig[data-top] { flex-direction: row; align-items: baseline; gap: 6px; transform: translate(-50%, 0); }
.nexus[data-layout="vertical"] .nx-fig[data-top] b { font-size: 13px; line-height: 16px; }
.nexus[data-layout="vertical"] .nx-fig[data-top] span { max-width: none; white-space: nowrap; }
.nexus[data-layout="vertical"] .nx-legend { transform: none; }
/* the policy under the core */
.nx-core { transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.nx-core b { font: 600 12px/15px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.nx-core span { font: 400 12px/15px var(--sans); color: var(--quiet); }
.nx-legend { transform: translate(0, -100%); font: 400 12px/15px var(--sans); color: var(--quiet); }
.nexus[data-layout="wide"] .nx-legend { transform: translate(-100%, 0); }
.nexus[data-layout="vertical"] .nx-core { flex-direction: row; gap: 8px; align-items: baseline; transform: translate(-50%, 0); }
.nx-tip { z-index: 4; max-width: 320px; padding: 4px 8px; border-radius: 6px; font: 400 12px/16px var(--sans); color: var(--ink); background: rgba(7, 11, 19, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .5); white-space: normal; }
/* an event on the shield says what it was and when, then goes */
.nx-ev { z-index: 4; padding: 3px 8px; border-radius: 5px; font: 500 12px/16px var(--sans); color: var(--ink); background: rgba(7, 11, 19, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transition: opacity .24s var(--ease); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.nx-ev[data-side="left"] { transform: translate(-100%, -50%); }
.nx-ev[data-side="right"] { transform: translate(0, -50%); }
.nexus[data-layout="vertical"] .nx-ev { transform: none; }
.nx-ev[data-on] { opacity: 1; }
.nx-ev[data-tone="stop"] { box-shadow: inset 0 0 0 1px rgba(255, 98, 86, .6); color: #FFB8AE; }
.nx-ev[data-tone="warn"] { box-shadow: inset 0 0 0 1px rgba(255, 186, 82, .55); color: #FFDCA6; }
.nx-ev[data-tone="new"] { box-shadow: inset 0 0 0 1px rgba(198, 221, 255, .55); color: #DCE8FF; }
@media (max-width: 1599px) { .conhead[data-nexus] { height: clamp(240px, 22vw, 300px); } }
/* a phone: the words wrap into two rows at the top; under them the nexus stands upright */
@media (max-width: 899px) {
  .conhead[data-nexus] { height: 440px; padding: 8px 12px 0; align-content: flex-start; }
  .conhead[data-nexus]::before { background: linear-gradient(180deg, rgba(7, 11, 19, .82) 0, rgba(7, 11, 19, .4) 60px, rgba(7, 11, 19, 0) 96px); }
}
@media (prefers-reduced-motion: reduce) { .nx-ev { transition: none; } }

/* ─── Observe › Map · Live: lights on the edges, a desk beside the map (web/views/map.ts) ─── */
.map-body { display: flex; flex: 1 1 auto; min-height: 0; }
.map-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-live-note { color: var(--ink-2); }
.map-desk { width: 236px; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 10px 12px; border-left: 1px solid var(--line); background: var(--panel); overflow: auto; }
.map-desk-h { font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.map-desk-list { display: flex; flex-direction: column; gap: 6px; }
.map-desk-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--ink); cursor: pointer; font: 400 12px/15px var(--sans);
  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); transition: transform .2s var(--spring), box-shadow .22s var(--ease); }
@media (hover: hover) { .map-desk-row:not([disabled]):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-rim) 70%, #fff), inset 0 0 0 1px var(--accent-edge), var(--card-lift); } }
.map-desk-row:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.map-desk-row[disabled] { cursor: default; opacity: .72; }
.map-desk-row .k { font-size: 12px; color: var(--quiet); }
.map-desk-row b { font-weight: 500; font-size: 13px; line-height: 17px; }
.map-desk-row .s { color: var(--ink-2); }
.map-desk-note { margin-top: auto; font: 400 12px/15px var(--sans); color: var(--quiet); }
@media (max-width: 899px) { .map-desk { display: none; } }