:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d232a;
  background: #eef0ef;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }
button, select, input { font: inherit; }
button, select, .file-button { min-height: 38px; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }

.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr; }
.topbar { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 18px 22px; background: #f8f8f5; border-bottom: 1px solid #c9ceca; }
.eyebrow, .section-label { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #59636a; }
h1 { margin: 0; font-size: 22px; font-weight: 600; }
.controls { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.controls label { display: grid; gap: 4px; font-size: 12px; color: #4a535a; }
.file-button, button, select { border: 1px solid #aeb6b1; background: #ffffff; border-radius: 7px; padding: 8px 12px; color: #1d232a; }
.file-button { display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; }
.file-button input { display: none; }
#surveyButton { background: #20282e; color: white; border-color: #20282e; }

.status-strip { display: flex; justify-content: space-between; gap: 16px; padding: 8px 22px; font-size: 12px; color: #4d575e; border-bottom: 1px solid #c9ceca; background: #f1f3f1; }
.workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.map-panel { position: relative; min-height: 540px; background: #e6e9e7; overflow: hidden; }
#topologyCanvas { width: 100%; height: 100%; display: block; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; color: #5b656b; padding: 32px; pointer-events: none; }
.empty-state span { max-width: 520px; font-size: 13px; line-height: 1.5; }
.hidden { display: none; }
.inspector { padding: 18px; border-left: 1px solid #c9ceca; background: #f8f8f5; overflow: auto; }
.inspector section + section { border-top: 1px solid #d9ddda; margin-top: 18px; padding-top: 18px; }
.details { line-height: 1.5; font-size: 13px; margin-bottom: 10px; }
.muted { color: #7b8489; }
.neighbour-list { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.7; }
.feature-list { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: 0; font-size: 12px; }
.feature-list dt { color: #59636a; }
.feature-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.small-copy { margin: 0; font-size: 12px; line-height: 1.55; color: #687279; }

@media (max-width: 820px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .workspace { grid-template-columns: 1fr; }
  .map-panel { min-height: 58vh; }
  .inspector { border-left: 0; border-top: 1px solid #c9ceca; }
  .status-strip { flex-direction: column; }
}

#liveButton { background: #ffffff; }
#liveButton.recording { background: #303b42; color: #ffffff; border-color: #303b42; }
.live-badge {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  z-index: 2;
  border: 1px solid rgba(42, 53, 60, 0.28);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(248, 248, 245, 0.9);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding: 14px 14px 12px; }
  .controls { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .controls > * { width: 100%; }
  .controls label { align-content: end; }
  .file-button, button, select { min-height: 46px; }
  #liveButton { grid-column: 1 / -1; }
  #surveyButton { grid-column: 1 / -1; }
  .status-strip { padding: 8px 14px; }
  .map-panel { min-height: 56svh; }
  .inspector { padding: 16px 14px calc(18px + env(safe-area-inset-bottom)); }
}

/* Phase 0.6: the map remains data-first, but its interaction states borrow a quiet flower/star language. */
.map-panel {
  background:
    radial-gradient(circle at 78% 18%, rgba(222, 228, 247, 0.62), transparent 29%),
    radial-gradient(circle at 18% 76%, rgba(239, 226, 211, 0.44), transparent 32%),
    linear-gradient(180deg, #edf0ee 0%, #e7ebe9 100%);
}
#topologyCanvas {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.map-hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: min(520px, calc(100% - 28px));
  z-index: 2;
  border: 1px solid rgba(104, 117, 128, 0.2);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(249, 249, 246, 0.86);
  backdrop-filter: blur(10px);
  color: #59636f;
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
}
.neighbour-list { list-style: none; padding-left: 0; display: grid; gap: 6px; }
.neighbour-button {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  text-align: left;
  border: 1px solid rgba(125, 137, 148, 0.26);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  color: #46515d;
  font-size: 12px;
}
.neighbour-button:active { transform: translateY(1px); }

@media (max-width: 820px) {
  .map-hint { bottom: 12px; font-size: 11px; }
  .neighbour-button { min-height: 46px; }
}