/* ============================================================
   diagramz — classic Macintosh (System 7) look, 1-bit monochrome
   ============================================================ */

* { box-sizing: border-box; }

:root {
  --mac-font: 'Pixelify Sans', 'Chicago', 'Geneva', 'Helvetica Neue', monospace;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--mac-font);
  font-size: 14px;
  color: #000;
  -webkit-font-smoothing: none;
  cursor: default;
}

body {
  user-select: none;
  -webkit-user-select: none;
}

/* calm System 7 gray desktop */
#desktop {
  position: fixed;
  top: 24px; left: 0; right: 0; bottom: 0;
  background: #bdbdbd;
  z-index: 1;
}

/* ============ MENU BAR ============ */
#menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: #fff;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: stretch;
  z-index: 1000;
  padding-left: 8px;
}
.menu { position: relative; display: flex; align-items: stretch; }
.menu-title {
  display: flex; align-items: center;
  padding: 0 12px;
  font-weight: 700;
}
.apple-logo { font-size: 15px; }
.menu.open .menu-title { background: #000; color: #fff; }
.menu-drop {
  display: none;
  position: absolute;
  top: 22px; left: 0;
  min-width: 220px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 2px 0;
  z-index: 1001;
}
.menu.open .menu-drop { display: block; }
.menu-item {
  position: relative;
  padding: 3px 14px 3px 26px;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.menu-item:hover:not(.disabled) { background: #000; color: #fff; }
.menu-item.disabled { color: #888; }
.menu-key { opacity: 0.8; }
.menu-item.checked::before {
  content: '✓';
  position: absolute;
  left: 9px;
}
.menu-sep { border-top: 1px dotted #000; margin: 3px 1px; }
#menubar-right {
  margin-left: auto;
  display: flex; align-items: center;
  padding: 0 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ============ WINDOWS ============ */
.window {
  position: absolute;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  display: flex;
  flex-direction: column;
}
.window[hidden] { display: none; }

/* full-screen diagram: cover the whole display, menu bar and all */
.window.fullscreen {
  position: fixed;
  inset: 0;
  width: auto !important;
  height: auto !important;
  border: none;
  box-shadow: none;
  z-index: 3000;
}
.window.fullscreen .resize-grip { display: none; }
#fs-exit {
  position: fixed;
  top: 6px; right: 8px;
  z-index: 3001;
  font-family: var(--mac-font);
  font-size: 11px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 3px 8px;
  cursor: pointer;
}
#fs-exit:active { background: #000; color: #fff; }

.titlebar {
  position: relative;
  height: 22px;
  border-bottom: 2px solid #000;
  background: #fff;
  flex: none;
}
.title-stripes {
  position: absolute;
  inset: 3px 4px;
  background: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 3px);
  pointer-events: none;
}
.title-text {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  height: 100%;
  display: flex; align-items: center;
  background: #fff;
  padding: 0 10px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 72%;
  overflow: hidden;
}
.title-text .crumb { cursor: pointer; }
.title-text .crumb:hover { text-decoration: underline; }
.title-text .crumb-sep { padding: 0 5px; opacity: 0.7; }
.closebox {
  position: absolute;
  top: 4px; left: 8px;
  width: 13px; height: 13px;
  background: #fff;
  border: 1.5px solid #000;
  z-index: 2;
  cursor: pointer;
}
.closebox:active { background: #000; }
.treebox {
  position: absolute;
  top: 4px; left: 28px;
  width: 13px; height: 13px;
  background: #fff;
  border: 1.5px solid #000;
  z-index: 2;
  cursor: pointer;
  padding: 1px;
}
.treebox svg { width: 100%; height: 100%; display: block; }
.treebox:active { background: #000; }

/* inactive windows: plain title bar, hidden controls — classic Mac */
.window.inactive .title-stripes { display: none; }
.window.inactive .closebox,
.window.inactive .treebox { visibility: hidden; }
.window.inactive .title-text { color: #777; }
.window.inactive { box-shadow: 1px 1px 0 #000; }

.win-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.win-grip {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  z-index: 3;
  background:
    linear-gradient(135deg, transparent 0 50%, #000 50% 57%, transparent 57% 71%, #000 71% 78%, transparent 78% 92%, #000 92% 100%);
}

/* ============ DIAGRAM WINDOW BODY ============ */
.viewport {
  flex: 1;
  overflow: auto;
  position: relative;
  background: #fff;
  min-height: 0;
}
.viewport::-webkit-scrollbar { width: 14px; height: 14px; }
.viewport::-webkit-scrollbar-track {
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0 / 2px 2px;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
}
.viewport::-webkit-scrollbar-thumb { background: #fff; border: 2px solid #000; }
.viewport::-webkit-scrollbar-corner { background: #fff; border: 2px solid #000; }

.world {
  position: relative;
  width: 3000px;
  height: 2000px;
  background: #fff;
  transform-origin: 50% 50%;
}
.world.animating { pointer-events: none; }

.edge-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the layer sits on top of the nodes; let clicks fall through to boxes
     everywhere except on the lines and endpoint handles themselves
     (those opt back in via pointer-events on .edge-hit / .endpoint) */
  pointer-events: none;
}
.nodes-layer { position: absolute; inset: 0; pointer-events: none; }

.empty-hint {
  position: absolute;
  top: 120px;
  transform: translateX(-50%);
  color: #999;
  font-size: 16px;
  pointer-events: none;
  white-space: nowrap;
}

/* ============ NODES ============ */
.node {
  position: absolute;
  background: #fff;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: default;
}
.node .node-label {
  padding: 4px;
  text-align: center;
  word-break: break-word;
  white-space: pre-wrap;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  line-height: 1.15;
}
/* a node that opens another diagram: stacked-paper look */
.node.portal {
  box-shadow: 3px 3px 0 #fff, 5px 5px 0 #000;
}
.node.has-image .node-label { text-decoration: underline; }
.node .node-icon {
  flex: none;
  width: 16px; height: 16px;
  margin-left: 6px;
  pointer-events: none;
}
.node .node-icon svg { width: 100%; height: 100%; display: block; }
.node.has-icon .node-label { text-align: left; }
.node .node-badge {
  position: absolute;
  top: 1px; right: 3px;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}
/* dark gray fill: flip text, icon, and badge to white */
.node.dark-fill .node-label { color: #fff; }
.node.dark-fill .node-badge { color: #fff; }
.node.dark-fill .node-icon { filter: invert(1); }
.node.selected { border-width: 3px; }
.node.selected::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed #000;
  pointer-events: none;
}
.node .resize-handle {
  display: none;
  position: absolute;
  right: -5px; bottom: -5px;
  width: 11px; height: 11px;
  background: #000;
  cursor: nwse-resize;
}
.node.selected .resize-handle { display: block; }

/* inline label editor */
.label-editor {
  position: absolute;
  z-index: 50;
  border: 1px dashed #000;
  background: #fff;
  font-family: var(--mac-font);
  text-align: center;
  resize: none;
  outline: none;
  overflow: hidden;
  line-height: 1.15;
  padding: 4px;
}

/* ============ EDGES ============ */
.edges-g path.edge-line, .ghost-edge {
  stroke: #000;
  stroke-width: 1.5;
  fill: none;
}
.ghost-edge { stroke-dasharray: 4 3; }
.edges-g path.edge-hit {
  stroke: transparent;
  stroke-width: 14;
  fill: none;
  cursor: pointer;
  pointer-events: stroke;
}
.edges-g g.selected path.edge-line { stroke-width: 3; }
.edges-g text {
  font-family: var(--mac-font);
  font-size: 11px;
  fill: #000;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5;
  text-anchor: middle;
  cursor: pointer;
}
.edges-g rect.endpoint {
  display: none;
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: all;
  cursor: move;
}
.edges-g g.selected rect.endpoint { display: block; }

/* ghost box while drawing + marquee */
.ghost-box {
  position: absolute;
  border: 1.5px dashed #000;
  background: transparent;
  pointer-events: none;
}
.marquee {
  position: absolute;
  border: 1px dashed #000;
  background: transparent;
  pointer-events: none;
}

/* ============ NOTES (paper scraps layered on the diagram) ============ */
.note {
  position: absolute;
  background: #fff;
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  z-index: 5;
}
.note .note-title {
  flex: none;
  height: 17px;
  border-bottom: 1px solid #000;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}
.note .note-body {
  flex: 1;
  font-size: 11px;
  line-height: 1.35;
  padding: 4px 7px;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.note .note-fold {
  position: absolute;
  top: 0; right: 0;
  width: 11px; height: 11px;
  background: linear-gradient(225deg, #bdbdbd 0 48%, #000 48% 56%, #fff 56% 100%);
  pointer-events: none;
}
.note.selected { border-width: 2.5px; }
.note.selected::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed #000;
  pointer-events: none;
}
.note .resize-handle {
  display: none;
  position: absolute;
  right: -5px; bottom: -5px;
  width: 11px; height: 11px;
  background: #000;
  cursor: nwse-resize;
}
.note.selected .resize-handle { display: block; }
.note-editor { text-align: left; font-size: 11px; }

.edges-g path.note-link {
  stroke: #000;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  fill: none;
}

/* ============ CHECK WINDOW ============ */
.check-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  background: #fff;
  font-size: 13px;
}
.check-summary {
  font-weight: 700;
  margin-bottom: 8px;
}
.check-group {
  font-weight: 700;
  margin: 10px 0 3px;
  border-bottom: 1px dotted #000;
  padding-bottom: 2px;
}
.check-row {
  padding: 2px 4px 2px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.check-row:hover { background: #000; color: #fff; }
.check-icon { display: inline-block; width: 18px; }

/* ============ IMAGE VIEW (drilled into an image node) ============ */
.image-view {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 2px solid #000;
  background: #fff;
  box-shadow: 3px 3px 0 #fff, 5px 5px 0 #000;
}
.image-view img {
  max-width: 100%;
  max-height: calc(100% - 60px);
  border: 2px solid #000;
  filter: grayscale(1) contrast(1.05);
}
.image-view .image-caption { font-weight: 700; }
.image-view .image-note { font-size: 11px; color: #666; }

/* ============ STATUS BAR ============ */
.statusbar {
  flex: none;
  height: 22px;
  border-top: 2px solid #000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 0 10px;
  font-size: 12px;
  background: #fff;
  overflow: hidden;
  white-space: nowrap;
}
.statusbar .status-hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusbar .status-saved { flex: none; }

/* ============ TOOL PALETTE ============ */
.palette-window { width: 46px; }
.palette-window .titlebar { height: 14px; }
.palette-window .titlebar .closebox { top: 1px; left: 4px; width: 11px; height: 11px; }
.palette-window .win-body { padding-bottom: 5px; }
.palette-window .tool {
  width: 32px; height: 32px;
  margin: 5px auto 0;
  display: block;
  background: #fff;
  border: 2px solid #000;
  padding: 4px;
  cursor: pointer;
}
.palette-window .tool svg { width: 100%; height: 100%; display: block; }
.palette-window .tool.active { background: #000; }
.palette-window .tool.active svg path,
.palette-window .tool.active svg rect { stroke: #fff; }
.palette-window .tool.active svg path[fill="#000"] { fill: #fff; }

/* tool-specific cursors */
body.tool-box .viewport { cursor: crosshair; }
body.tool-arrow .viewport { cursor: crosshair; }

/* ============ CONTEXT MENU ============ */
#context-menu {
  position: fixed;
  display: none;
  min-width: 210px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 2px 0;
  z-index: 5000;
  font-size: 14px;
}

/* ============ STYLE PICKERS (color swatches + 3x3 label grid) ============ */
.swatch-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.swatch-row {
  display: flex;
  gap: 5px;
  align-items: center;
}
.swatch {
  width: 16px;
  height: 16px;
  border: 1.5px solid #000;
  cursor: pointer;
  flex: none;
  box-sizing: border-box;
}
.swatch:hover { outline: 2px solid #000; outline-offset: 1px; }
.swatch.active { box-shadow: 0 0 0 1.5px #fff inset, 0 0 0 3px #000 inset; }
.swatch-none {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.swatch-none::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px; top: 50%;
  border-top: 1.5px solid #000;
  transform: rotate(-45deg);
}

.align-grid {
  display: grid;
  grid-template-columns: repeat(3, 11px);
  grid-template-rows: repeat(3, 11px);
  gap: 2px;
  padding: 2px;
  border: 1.5px solid #000;
  background: #fff;
  width: max-content;
}
.align-cell {
  background: #fff;
  border: 1px solid #999;
  cursor: pointer;
  box-sizing: border-box;
}
.align-cell:hover { border-color: #000; background: #ddd; }
.align-cell.active { background: #000; border-color: #000; }

/* labeled widget rows inside the context menu */
.menu-custom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 26px;
}
.menu-custom-label {
  font-size: 11px;
  color: #555;
  width: 34px;
  flex: none;
}

/* the Box Style dialog */
.style-dialog { min-width: 280px; }
.style-section { margin-bottom: 14px; }
.style-section:last-child { margin-bottom: 2px; }
.style-label {
  font-size: 11px;
  color: #555;
  margin-bottom: 6px;
}
.style-dialog .swatch { width: 22px; height: 22px; }
.style-dialog .align-grid {
  grid-template-columns: repeat(3, 16px);
  grid-template-rows: repeat(3, 16px);
  gap: 3px;
}

/* inspector style row */
.insp-style-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 0;
}

/* ============ SYSTEM TREE ============ */
.tree-body {
  flex: 1;
  overflow: auto;
  padding: 8px 4px;
  font-size: 13px;
  background: #fff;
}
.tree-row {
  padding: 2px 8px;
  white-space: nowrap;
  cursor: pointer;
}
.tree-row:hover { text-decoration: underline; }
.tree-row.current { background: #000; color: #fff; }
.tree-prefix {
  font-family: 'Monaco', monospace;
  white-space: pre;
  font-size: 11px;
}
.tree-icon { margin: 0 4px 0 2px; }

/* ============ INSPECTOR ============ */
.insp-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  background: #fff;
  font-size: 13px;
}
.insp-head {
  font-weight: 700;
  border-bottom: 2px solid #000;
  padding-bottom: 5px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insp-field {
  display: block;
  margin-bottom: 8px;
}
.insp-field span {
  display: block;
  font-size: 11px;
  color: #555;
  margin-bottom: 2px;
}
.insp-field input,
.insp-field select,
.insp-field textarea {
  width: 100%;
  font-family: var(--mac-font);
  font-size: 13px;
  border: 2px solid #000;
  background: #fff;
  padding: 3px 6px;
  outline: none;
  border-radius: 0;
}
.insp-field select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 49%, #000 50%), linear-gradient(-45deg, transparent 49%, #000 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.insp-field textarea { height: 56px; resize: none; }
.insp-info {
  font-size: 11px;
  color: #555;
  border-top: 1px dotted #000;
  margin-top: 8px;
  padding-top: 6px;
  line-height: 1.5;
}
.insp-body .mac-btn { margin-top: 6px; }
.insp-subhead {
  font-size: 11px;
  font-weight: 700;
  margin: 10px 0 5px;
  border-top: 1px dotted #000;
  padding-top: 7px;
}
.insp-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  cursor: pointer;
}
.insp-check {
  width: 15px; height: 15px;
  border: 1.5px solid #000;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  flex: none;
}
.insp-check.on { background: #000; color: #fff; }

/* ============ DIAGRAM PICKER ============ */
.pick-list {
  border: 2px solid #000;
  max-height: 260px;
  overflow: auto;
  margin-top: 4px;
}
.pick-row { padding: 5px 10px; cursor: pointer; }
.pick-row:hover { background: #000; color: #fff; }
.pick-row .pick-meta { opacity: 0.65; font-size: 11px; }

/* ============ FILE BROWSER (shared library) ============ */
.files-window .win-body { background: #fff; }
.files-head {
  flex: none;
  display: flex;
  border-bottom: 2px solid #000;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  gap: 8px;
}
.files-list {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.files-row {
  display: flex;
  gap: 8px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px dotted #ccc;
}
.files-row.selected { background: #000; color: #fff; }
.files-row.current .fcol-name::after { content: ' •'; }
.fcol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcol-name { flex: 3; min-width: 0; }
.fcol-desc { flex: 3; min-width: 0; opacity: 0.75; }
.fcol-date { flex: 2; min-width: 0; text-align: right; }
.files-empty { padding: 20px; color: #777; font-size: 13px; }
.files-actions {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 8px 18px 10px 10px;
  border-top: 2px solid #000;
  align-items: center;
}
.files-spacer { flex: 1; }

/* ============ EXPORT WINDOW ============ */
.export-window .win-body { background: #fff; }
.export-tabs {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 2px solid #000;
  flex-wrap: wrap;
}
.export-tab { padding: 2px 10px; font-size: 12px; }
.export-tab.active { background: #000; color: #fff; }
.export-area {
  flex: 1;
  min-height: 0;
  margin: 10px;
  font-family: 'Geneva', 'Monaco', monospace;
  font-size: 11px;
  border: 2px solid #000;
  padding: 8px;
  resize: none;
  outline: none;
  white-space: pre;
  overflow: auto;
  user-select: text;
  -webkit-user-select: text;
}
.export-actions {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 10px 10px;
  padding-right: 20px;
}

/* ============ DIALOGS ============ */
#dialog-root {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: none;
}
#dialog-root.open { display: block; }
.dialog-overlay { position: absolute; inset: 0; }
.dialog {
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: min(720px, 90vw);
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
}
.dialog .dialog-title {
  position: relative;
  height: 22px;
  border-bottom: 2px solid #000;
}
.dialog .dialog-body {
  padding: 16px;
  font-size: 14px;
  max-height: 60vh;
  overflow: auto;
}
.dialog .dialog-body textarea {
  width: 640px;
  max-width: 100%;
  height: 320px;
  font-family: 'Geneva', 'Monaco', monospace;
  font-size: 11px;
  border: 2px solid #000;
  padding: 8px;
  resize: none;
  outline: none;
  white-space: pre;
}
.dialog .dialog-body input[type="text"] {
  width: 100%;
  font-family: var(--mac-font);
  font-size: 14px;
  border: 2px solid #000;
  padding: 5px 8px;
  outline: none;
}
.dialog .dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 14px;
}
.mac-btn {
  font-family: var(--mac-font);
  font-size: 13px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 7px;
  padding: 4px 18px;
  cursor: pointer;
}
.mac-btn:active { background: #000; color: #fff; }
.mac-btn.default { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #000; }

/* ============ PATHS: a transaction as a ball of light ============ */
.paths-body {
  flex: 1;
  overflow: auto;
  padding: 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.paths-empty { color: #555; padding: 6px 2px; line-height: 1.4; }
.paths-row { display: flex; align-items: center; gap: 6px; }
.paths-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paths-count { color: #777; font-size: 11px; flex: none; }
.paths-play, .paths-mini {
  font-family: var(--mac-font);
  font-size: 11px;
  background: #fff;
  border: 1.5px solid #000;
  cursor: pointer;
  padding: 1px 6px;
  flex: none;
}
.paths-play:active, .paths-mini:active { background: #000; color: #fff; }
.paths-new { align-self: flex-start; margin-top: 6px; }
.paths-build-head { font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 4px; }
.paths-stops { display: flex; flex-direction: column; gap: 3px; max-height: 45%; overflow: auto; }
.paths-stop-row { display: flex; align-items: baseline; gap: 6px; }
.paths-stop-num {
  flex: none; width: 16px; height: 16px;
  border: 1.5px solid #000; border-radius: 50%;
  font-size: 10px; text-align: center; line-height: 14px;
}
.paths-stop-where { color: #777; font-size: 10px; margin-left: auto; }
.paths-hint { color: #555; line-height: 1.35; min-height: 30px; }
.paths-hint.flash { color: #000; font-weight: bold; }
.paths-speed-row { display: flex; align-items: center; gap: 8px; }
.paths-speed-row.sub { margin: -2px 0 4px 28px; }
.paths-speed-row input[type="range"] { flex: 1; }
.paths-btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; }
.paths-btn-row .mac-btn { padding: 3px 10px; font-size: 12px; }
.paths-btn-row .mac-btn:disabled { color: #999; border-color: #999; cursor: default; }
.paths-btn-row .mac-btn:disabled:active { background: #fff; color: #999; }

/* boxes you may pick next get marching ants; the current stop is bolded */
@keyframes path-ants { to { outline-offset: 5px; } }
.node.path-eligible {
  outline: 2px dashed #009DDC;
  outline-offset: 3px;
  cursor: crosshair;
  animation: path-ants 0.6s ease-in-out infinite alternate;
}
.node.path-current {
  outline: 3px solid #000;
  outline-offset: 3px;
}

/* the ball of light */
.light-ball {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe89a 45%, rgba(255, 224, 120, 0) 72%);
  box-shadow:
    0 0 6px 2px rgba(255, 240, 170, 0.95),
    0 0 16px 6px rgba(255, 220, 100, 0.55),
    0 0 1px 1.5px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 60;
  transition: opacity 200ms;
}
.light-ball.pulse { animation: ball-pulse 260ms ease-out; }
@keyframes ball-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(2.1); }
  100% { transform: scale(1); }
}