/* Map editors (B1): shared shell, canvas layers, side panel rows. */

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.map-zoom {
  display: inline-flex;
  align-items: center;
}
.map-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.map-layout > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.map-panel {
  gap: var(--sp-3);
}
.map-scroll {
  overflow: auto;
  padding: 0;
  max-height: 78vh;
}
.map-canvas {
  display: block;
  touch-action: none;
  user-select: none;
}
.map-canvas__bg {
  fill: var(--surface-2);
}
.map-canvas__empty {
  fill: var(--text-2);
  font-size: 28px;
}
.map-grid line {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.25;
}
.map-north circle {
  fill: var(--surface);
  stroke: var(--border);
}
.map-north text {
  font-size: 18px;
  font-weight: 700;
  fill: var(--text);
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: 6px;
  vertical-align: middle;
}
.flip-x .icon {
  transform: scaleX(-1);
}

/* Walking paths */
.path-edge {
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.85;
  cursor: pointer;
}
.path-edge.is-selected {
  stroke-width: 10;
  opacity: 1;
}
.path-node circle:not(.path-problem) {
  fill: #fff;
  stroke: #2f6fb5;
  stroke-width: 3;
  cursor: pointer;
}
.path-node.is-selected circle:not(.path-problem) {
  fill: var(--primary);
}
.path-problem {
  fill: none;
  stroke: var(--amber);
  stroke-width: 4;
}
.path-problem.is-dashed {
  stroke-dasharray: 6 4;
}
.path-chip text {
  fill: #fff;
  font-size: 13px;
  font-weight: 700;
}
.shop-dot circle:not(.path-problem) {
  fill: #7a8a9a;
  opacity: 0.8;
}
.route-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 7;
  stroke-dasharray: 14 10;
  stroke-linecap: round;
}
.route-end {
  fill: var(--primary);
}
.route-halo {
  fill: var(--primary);
  opacity: 0.2;
}
.route-steps {
  margin: 0;
  padding-inline-start: 20px;
  line-height: 1.6;
}
.problem-row {
  text-align: start;
  background: var(--amber-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Shop placement */
.shop-pin {
  cursor: grab;
}
.shop-pin circle {
  stroke: #fff;
  stroke-width: 2;
}
.shop-pin.is-selected circle {
  stroke-width: 4;
}
.shop-pin__star {
  fill: #fff;
  font-size: 16px;
}
.shop-pin__label {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
}
.place-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  text-align: start;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.place-row.is-selected {
  border-inline-start-color: var(--primary);
}
.place-row__main {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* Floors */
.align-overlay line {
  stroke: #2f6fb5;
  stroke-width: 3;
  opacity: 0.7;
}
.align-frame {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-dasharray: 10 8;
}

/* Amenities & landmarks */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.amenity-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.amenity-tile.is-on {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.amenity-code {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
}
.amenity rect {
  fill: #fff;
  stroke: #4f5b5a;
  stroke-width: 2;
  cursor: grab;
}
.amenity.is-selected rect {
  stroke: var(--primary);
  stroke-width: 3;
}
.amenity text {
  font-size: 11px;
  font-weight: 800;
  fill: #1e1a14;
  pointer-events: none;
}
.landmark polygon {
  stroke: #4f5b5a;
  stroke-width: 2;
  opacity: 0.85;
  cursor: grab;
}
.landmark.is-selected polygon {
  stroke: var(--primary);
  stroke-width: 4;
}
.colour-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: none;
  flex-shrink: 0;
}

/* Kiosk Console (B4) */
.it-only {
  border: 1px solid var(--border);
  background: transparent;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}
.console-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--sp-4);
  align-items: start;
}
@media (max-width: 1000px) {
  .console-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric__value {
  font-size: 22px;
  font-weight: 700;
}
.spark {
  width: 120px;
  height: 34px;
}
.spark polyline {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
}
.spark polyline.is-warn {
  stroke: var(--amber);
}
.hour-bars {
  display: flex;
  gap: 2px;
}
.hour-bar {
  flex: 1;
  height: 22px;
  border-radius: 3px;
  background: var(--grey-soft, var(--surface-3));
}
.hour-bar.is-online,
.legend-dot.is-online {
  background: var(--green);
}
.hour-bar.is-offline,
.legend-dot.is-offline {
  background: var(--red);
}
.legend-dot.is-none {
  background: var(--grey-soft, var(--surface-3));
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.legend-dot.is-warn {
  background: var(--amber);
}
.problem-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tech {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: #1e1a14;
  color: #e1b85f;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow: auto;
}
.console-shot__img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.progress {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--amber);
}
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.action-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  min-height: 96px;
  padding: var(--sp-3);
  text-align: start;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.action-card.is-danger {
  border-color: var(--red);
}
.action-card.is-danger strong,
.action-card.is-danger .icon {
  color: var(--red-text, var(--red));
}
.terminal {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: #1e1a14;
  color: #e8e2d6;
  border: 1px solid #3a342c;
  overflow: hidden;
}
.terminal__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #3a342c;
}
.terminal__bar:last-child {
  border-bottom: 0;
  border-top: 1px solid #3a342c;
}
.terminal__bar .caption {
  color: #c9c1b2;
}
.terminal__body {
  height: 300px;
  overflow: auto;
  padding: 8px 12px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
}
.terminal__time {
  color: #b5ac9e;
}
.terminal__tag {
  display: inline-block;
  width: 44px;
  color: #c9c1b2;
}
.terminal__tag.is-warn {
  color: #e0a94a;
}
.terminal__tag.is-error {
  color: #f07c6e;
}
.command {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  font-size: 10px;
  text-align: center;
}
.stepper span {
  border-top: 3px solid var(--surface-3);
  padding-top: 2px;
  color: var(--text-2);
}
.stepper span.is-on {
  border-top-color: var(--green);
}
.stepper span.is-failed {
  border-top-color: var(--red);
}

/* Global Preview (B5) */
.global-preview {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  overflow: auto;
}
.gp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.gp-bar .input {
  width: auto;
  max-width: 240px;
}
.gp-badge {
  background: #8f5e14;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  border-radius: 4px;
}
.gp-stage {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-4);
}
.gp-info {
  width: 260px;
}