/* FIT retains the compact matrix; readable view uses native-sized controls. */
.nexus-field { display: contents; }
.nexus-field-label { display: none; }
html.nexus-readable body { height: auto; min-height: 100dvh; overflow: auto; font-size: 16px; }
html.nexus-readable #nexus-instrument { width: 100%; max-width: 1920px; min-height: 100dvh; padding: 16px; }
html.nexus-readable :is(button, input, select) { font-size: 16px !important; line-height: 1.35 !important; min-height: 48px; }
html.nexus-readable :is(h2, h3) { font-size: 22px !important; line-height: 1.3 !important; }
html.nexus-readable h1 { font-size: 40px; }
html.nexus-readable :is(.status-pill, .network-state, .metric span, .endpoint-type, .network-stat span, .network-help-label, .network-grid span, .network-event, .monitor-line, .monitor-line > *, .network-link > *, .network-help code) { font-size: 14px !important; line-height: 1.5 !important; letter-spacing: .03em; }
html.nexus-readable :is(.endpoint-name, .network-stat strong) { font-size: 16px !important; line-height: 1.5 !important; }
html.nexus-readable .metric strong { font-size: 28px !important; }
html.nexus-readable .hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
html.nexus-readable .status-stack { flex-wrap: wrap; gap: 10px; }
html.nexus-readable .status-pill { min-height: 44px; }
html.nexus-readable .workspace { grid-template-columns: minmax(260px, .65fr) minmax(0, 2fr); }
html.nexus-readable :is(.routes, .keymaps) { min-width: 0; gap: 16px; }
html.nexus-readable :is(.route-grid-head, .keymap-grid-head) { display: none; }
html.nexus-readable :is(.route, .keymap) { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px; gap: 16px; }
html.nexus-readable .nexus-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html.nexus-readable .nexus-field-label { display: block; font-size: 14px; line-height: 1.4; color: #c3c9d3; }
html.nexus-readable .route .nexus-field:nth-child(2), html.nexus-readable .route .nexus-field:nth-child(3) { grid-column: span 2; }
html.nexus-readable :is(.route, .keymap) input[type="checkbox"] { width: 28px; height: 48px; margin: 0; }
html.nexus-readable :is(.delete-route, .delete-keymap) { width: 48px; }
html.nexus-readable .lower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.nexus-readable .network-diagnostics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.nexus-readable .endpoint-name { white-space: normal; overflow-wrap: anywhere; }
html.nexus-readable .network-help { grid-template-columns: minmax(0, 1fr); }
html.nexus-readable .monitor { height: 320px; }
html.nexus-readable .icon-action { width: 48px; min-width: 48px; }
html.nexus-readable :is(button, input, select):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 1000px) {
  html.nexus-readable .workspace, html.nexus-readable .lower-grid { grid-template-columns: minmax(0, 1fr); }
  html.nexus-readable .device-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html.nexus-readable .device-panel .section-head { grid-column: 1 / -1; }
  html.nexus-readable .endpoint-group + .endpoint-group { margin: 0; }
}
@media (max-width: 600px) {
  html.nexus-readable #nexus-instrument { padding: 8px; }
  html.nexus-readable .panel, html.nexus-readable .hero { padding: 12px; }
  html.nexus-readable :is(.route, .keymap) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  html.nexus-readable .device-panel, html.nexus-readable .network-grid { grid-template-columns: minmax(0, 1fr); }
  html.nexus-readable .overview-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.nexus-readable .button-row { justify-content: flex-start; }
  html.nexus-readable .status-stack { width: 100%; justify-content: flex-start; }
  html.nexus-readable .status-pill { min-width: 0; width: 100%; white-space: normal; padding: 8px; }
  html.nexus-readable .network-link { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  html.nexus-readable .route .nexus-field:nth-child(7) { grid-column: span 2; }
}
/* Override earlier app typography without reducing touch targets. */
html[data-hx-font-app="midi-hub"].nexus-readable #nexus-instrument :is(button, input, select) { font-size: 16px !important; line-height: 1.4 !important; }
/* Compact route rows: endpoints together, routing parameters directly below. */
html.nexus-readable :is(h2, h3) { font-size: 19px !important; }
html.nexus-readable :is(.route, .keymap) { padding: 10px; gap: 10px; }
html.nexus-readable .nexus-field { gap: 4px; }
html.nexus-readable .nexus-field-label { font-size: 12px; }
html[data-hx-font-app="midi-hub"].nexus-readable #nexus-instrument :is(button, input, select) { font-size: 14px !important; min-height: 42px; }
html.nexus-readable :is(.route, .keymap) input[type="checkbox"] { width: 24px; height: 42px; }
html.nexus-readable .route { grid-template-columns: repeat(12, minmax(0, 1fr)); }
html.nexus-readable .route .nexus-field:nth-child(1) { grid-column: span 1; }
html.nexus-readable .route .nexus-field:nth-child(2) { grid-column: span 5; }
html.nexus-readable .route .nexus-field:nth-child(3) { grid-column: span 6; }
html.nexus-readable .route .nexus-field:nth-child(4),
html.nexus-readable .route .nexus-field:nth-child(5),
html.nexus-readable .route .nexus-field:nth-child(6) { grid-column: span 2; }
html.nexus-readable .route .nexus-field:nth-child(7) { grid-column: span 3; }
html.nexus-readable .route .nexus-field:nth-child(n+8) { grid-column: span 1; }
html.nexus-readable .keymap { grid-template-columns: 60px minmax(90px, 1fr) repeat(4, minmax(75px, 1fr)) 60px; }
html.nexus-readable .note-range input { min-width: 0; }
@media (max-width: 600px) {
  html.nexus-readable :is(.route, .keymap) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.nexus-readable .route .nexus-field:nth-child(n) { grid-column: span 1; }
  html.nexus-readable .route .nexus-field:nth-child(2),
  html.nexus-readable .route .nexus-field:nth-child(3),
  html.nexus-readable .route .nexus-field:nth-child(7) { grid-column: span 2; }
  html.nexus-readable .route .nexus-field:nth-child(1) { grid-column: 1 / -1; }
}

/* Keep the display-mode control in the header corner in both views. */
#nexus-instrument .hero { position: relative; padding-right: 76px !important; }
#nexus-instrument .hero > #fullscreen-toggle {
  position: absolute; top: 14px; right: 14px;
  width: 42px; min-width: 42px; height: 42px; min-height: 42px;
  margin: 0; padding: 0;
}