/*
 * The cells map mounts (themes lane, 2026-11-05): the toolbar, stage, note, pin and popup around the MapLibre canvas that
 * nexus-assets/js/nexus-cellmap.js draws into [data-nx-map="cells"] and [data-nx-map="picker"]. Tokens only; dark and Light;
 * logical properties; 5px and 2px corners; quiet buttons (the §11 chip look); reduced motion; forced colours.
 */
.nx-cmap-live { display: grid; gap: .5rem; }
.nx-cmap__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.nx-cmap__btn { display: inline-flex; align-items: center; min-block-size: 2rem; padding-inline: .625rem; border: 0; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-surface-2, var(--nx-bg-muted)); color: var(--nx-text-secondary); font: 500 12.5px/1 var(--nx-font-sans, inherit); cursor: pointer; }
.nx-cmap__btn:hover { background: var(--nx-bg-hover); color: var(--nx-text-primary); }
.nx-cmap__btn[aria-pressed="true"] { background: var(--nx-bg-hover); color: var(--nx-text-primary); box-shadow: inset 0 -2px 0 var(--nx-accent); }
.nx-cmap__btn:focus-visible { outline: 2px solid var(--nx-focus, var(--nx-accent)); outline-offset: 2px; }
.nx-cmap__stage { position: relative; inline-size: 100%; block-size: clamp(20rem, 55vh, 36rem); border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); overflow: hidden; background: var(--nx-bg-surface); }
.nx-cmap__stage:focus-visible { outline: 2px solid var(--nx-focus, var(--nx-accent)); outline-offset: 2px; }
.nx-cmap__note { margin: 0; font-size: 12px; line-height: 16px; color: var(--nx-text-muted); }
.nx-cmap__live { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx-cmap__pin { display: block; inline-size: 14px; block-size: 14px; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-accent); border: 2px solid var(--nx-bg-canvas); box-shadow: 0 0 0 1px var(--nx-text-primary); }
.nx-cmap__pop { display: grid; gap: .25rem; font: 13px/1.4 var(--nx-font-sans, inherit); color: var(--nx-text-primary); }
.nx-cmap__pop span { color: var(--nx-text-secondary); font-size: 12px; }
.nx-cmap__pop a { color: var(--nx-accent-text, var(--nx-accent)); }
.nx-cmap-live .maplibregl-popup-content { background: var(--nx-bg-elevated, var(--nx-bg-surface)); color: var(--nx-text-primary); border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); box-shadow: none; padding: .625rem .75rem; }
.nx-cmap-live .maplibregl-popup-tip { display: none; }
.nx-cmap-live .maplibregl-popup-close-button { color: var(--nx-text-muted); }
.nx-cmap-live .maplibregl-ctrl-group { background: var(--nx-bg-elevated, var(--nx-bg-surface)); border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius-sm, 2px); box-shadow: none; }
.nx-cmap-live .maplibregl-ctrl-group button { border-color: var(--nx-border-hairline); }
.nx-cmap-live .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--nx-bg-canvas) 80%, transparent); color: var(--nx-text-muted); }
.nx-cmap-live .maplibregl-ctrl-attrib a { color: var(--nx-text-secondary); }
/* boundary picking and place search */
.nx-cmap__search { display: grid; gap: .375rem; position: relative; }
.nx-cmap__lab { font: 500 12px/16px var(--nx-font-sans, inherit); color: var(--nx-text-secondary); }
.nx-cmap__row { display: flex; flex-wrap: wrap; gap: .375rem; }
.nx-cmap__sel, .nx-cmap__in { min-block-size: 2.25rem; box-sizing: border-box; padding-inline: .625rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); color: var(--nx-text-primary); font: 14px/1.2 var(--nx-font-sans, inherit); }
.nx-cmap__in { inline-size: 100%; }
.nx-cmap__sel:focus-visible, .nx-cmap__in:focus-visible, .nx-cmap__opt:focus-visible { outline: 2px solid var(--nx-focus, var(--nx-accent)); outline-offset: 2px; }
.nx-cmap__res { position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 5; margin: .25rem 0 0; padding: .25rem; list-style: none; max-block-size: 14rem; overflow: auto; background: var(--nx-bg-elevated, var(--nx-bg-surface)); border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); }
.nx-cmap__res[hidden] { display: none; }
.nx-cmap__opt { display: block; inline-size: 100%; min-block-size: 2.25rem; padding-inline: .625rem; border: 0; border-radius: var(--nx-radius-sm, 2px); background: transparent; color: var(--nx-text-secondary); font: 13.5px/1.2 var(--nx-font-sans, inherit); text-align: start; cursor: pointer; }
.nx-cmap__opt:hover { background: var(--nx-bg-hover); color: var(--nx-text-primary); }
.nx-cmap__none { padding: .5rem .625rem; color: var(--nx-text-muted); font-size: 13px; }
.nx-cmap__credit { margin: 0; font-size: 12px; line-height: 16px; color: var(--nx-text-muted); }
@media (forced-colors: active) { .nx-cmap__btn, .nx-cmap__stage { border: 1px solid CanvasText; } .nx-cmap__pin { background: Highlight; } }