#nav:has(.visit-heading) {
  width: min(360px, calc(100vw - 24px)); padding: var(--space-3);
  border: 1px solid var(--border); border-image: none; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-panel);
}
#nav:has(.visit-heading) p { font-size: var(--text-sm); }

.visit-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.visit-heading small { color: var(--muted); }
.visit-attack { border-top: 1px solid var(--border-soft); padding-top: var(--space-2); }
.visit-attack summary { cursor: pointer; min-height: var(--touch-target); display: flex; align-items: center; font-weight: 700; }
.visit-attack > button { width: 100%; }
.visit-units { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.visit-units button { flex: 1; }
#nav .visit-controls { position: sticky; bottom: calc(-1 * var(--space-3)); padding-block: var(--space-2); background: var(--surface); z-index: var(--z-local-control); }
#nav:has(.visit-heading) button { min-height: var(--touch-target); white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #nav:has(.visit-heading) { width: auto; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #nav:has(.visit-heading) { width: min(360px, 46vw); }
}
/* Keep transient feedback clear of the touch return controls. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  body:has(#nav:not([hidden]) .visit-heading) #toasts {
    left: var(--edge-left, 8px); right: auto; top: max(64px, env(safe-area-inset-top)); bottom: auto;
    width: min(220px, calc(100vw - 160px)); max-height: 24dvh; overflow-y: auto; transform: none;
  }
}
@media (max-height: 500px) and (max-width: 1100px) {
  body:has(#nav:not([hidden]) .visit-heading) #alerts {
    left: var(--edge-left, 8px); right: auto; top: 62px; max-width: min(240px, 40vw); max-height: 24dvh;
  }
  body:has(#nav:not([hidden]) .visit-heading) #toasts { top: calc(70px + var(--alerts-h, 0px)); }
}