.onto-browser { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.onto-browser h2, .onto-browser h3, .onto-browser p { margin: 0; }
.onto-browser .onto-toolbar, .onto-browser .onto-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.onto-browser label { display: flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: .375rem; }
.onto-browser input[type="range"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
.onto-browser input[type="search"] { width: min(24rem, 100%); }
.onto-browser .onto-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.onto-browser .onto-pane { min-width: 0; border: 1px solid var(--line, #475569); border-radius: .5rem; overflow: hidden; }
.onto-browser .onto-pane header { position: static; display: grid; gap: .25rem; z-index: auto; padding: .75rem; border-bottom: 1px solid var(--line, #475569); }
.onto-browser .onto-graph { height: clamp(24rem, 53vh, 42rem); }
.onto-browser .onto-key { display: inline-flex; align-items: center; gap: .375rem; }
.onto-browser .onto-swatch { width: .75rem; height: .75rem; border-radius: 50%; background: var(--onto-color); }
.onto-browser .onto-details { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); gap: .75rem; }
.onto-browser .onto-results { max-height: 16rem; overflow: auto; display: grid; align-content: start; gap: .25rem; }
.onto-browser .onto-results button { text-align: start; overflow-wrap: anywhere; }
.onto-browser .onto-inspector { padding: .75rem; border: 1px solid var(--line, #475569); border-radius: .5rem; overflow-wrap: anywhere; display: grid; align-content: start; gap: .5rem; }
.onto-browser .onto-inspector p { max-width: 80ch; white-space: pre-wrap; }
.onto-browser .onto-mapping { border-inline-start: .1875rem solid var(--onto-color); padding-inline-start: .75rem; display: grid; gap: .375rem; }
.onto-browser button[aria-pressed="true"] { outline: 2px solid var(--accent, #38bdf8); outline-offset: -2px; }
.onto-browser [hidden] { display: none !important; }
@media (max-width: 800px) {
  .onto-browser .onto-panes, .onto-browser .onto-details { grid-template-columns: 1fr; }
  .onto-browser .onto-graph { height: 25rem; }
}
