/* Layout of main_exp2.cpp: Reset / Failure and the instruction line above the
   city view (68% of the width), Context / Experiment panel on the right.
   ItemSpacing is the ImGui default (8, 4) in this applet. */

.columns { flex: 1; min-height: 0; display: flex; gap: var(--pad); }
.left { flex: 0 0 68%; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.right { flex: 1; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }

.toolbar { gap: var(--pad); }
.view { flex: 1; min-height: 0; position: relative; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
canvas.nl-view.attack.over-node { cursor: pointer; }

.section { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding-top: calc(4 * var(--u)); }
#distance-plot { height: calc(60 * var(--u)); }
.nl-plot i.unreachable { background: rgb(255, 0, 0); }

@media (max-width: 700px) {
  body { overflow: auto; }
  .nl-window { position: static; margin: var(--pad); }
  .columns { flex-direction: column; }
  .left { flex: none; }
  .view { flex: none; height: 70vh; }
  .right { overflow: visible; }
}