/* Embeddable component styles: no body, header or global button rules. */
.diagram-root {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.diagram-root > .diagram-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}
.diagram-root > .diagram-canvas:focus-visible {
  box-shadow: inset 0 0 0 2px #769ddb;
}
.graph-minimap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 180px;
  height: 120px;
  border: 1px solid #587491;
  background: #0b111c;
  z-index: 2;
}
.graph-workbench {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 12px;
  background: #152238;
  max-height: 112px;
  overflow: auto;
}
.graph-workbench output {
  color: #a9c4dd;
  font-size: 10px;
  align-self: center;
}
.graph-explorer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}
.graph-explorer input,
.graph-explorer select {
  width: 100%;
  min-width: 0;
}
.graph-results {
  max-height: 150px;
  overflow: auto;
}
.graph-results button {
  display: block;
  width: 100%;
  font-size: 10px;
  text-align: left;
}
.graph-properties {
  max-width: 720px;
  max-height: 85vh;
  overflow: auto;
  background: #142137;
  color: #deebfa;
  border: 1px solid #698ab0;
  border-radius: 8px;
}
.graph-properties::backdrop,
.graph-config::backdrop {
  background: #0009;
}
.graph-properties form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.graph-properties h3,
.graph-properties p,
.graph-properties output {
  grid-column: 1/-1;
}
.graph-properties label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.graph-properties textarea {
  min-height: 100px;
  font: 12px monospace;
}
.graph-properties > button {
  display: block;
  margin: 6px;
  width: 95%;
  text-align: left;
}
.graph-config {
  width: 80vw;
  height: 75vh;
  background: #10151f;
  color: #dbe5f2;
  border: 1px solid #587491;
  padding: 0;
  overflow: hidden;
}
.config-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.config-head strong {
  flex: 1;
}
.config-area {
  position: relative;
  height: calc(100% - 90px);
}
.config-area canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.config-area textarea {
  position: absolute;
  top: 20px;
  left: 70px;
  width: 2px;
  height: 20px;
  opacity: 0.01;
  resize: none;
}
.graph-config output {
  display: block;
  padding: 8px;
  font-size: 11px;
}
.streambar input[type="number"] {
  width: 65px;
}
.graph-outline {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 210px;
  max-height: 140px;
  overflow: auto;
  z-index: 2;
  background: #101c2ceb;
  border: 1px solid #354e6d;
}
.graph-outline button {
  display: block;
  width: 100%;
  font-size: 10px;
  text-align: left;
}
.graph-status-pill {
  font-size: 9px;
  color: #edba78;
}
.graph-workbench {
  display: block;
  max-height: 110px;
  overflow: auto;
  padding: 4px 10px;
}
.graph-tool-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 4px;
}
.graph-tool-tabs button {
  font-size: 10px;
  padding: 3px 10px;
  background: #253851;
}
.graph-tool-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.graph-tool-panel[hidden] {
  display: none;
}
.graph-explorer {
  margin-top: 0;
  margin-bottom: 18px;
}
.graph-explorer details > button,
.graph-explorer details > input,
.graph-explorer details > select {
  margin: 4px 0;
}
.graph-explorer summary {
  cursor: pointer;
  color: #9fb4cf;
  font-size: 10px;
}
.graph-workbench output {
  white-space: normal;
}
.streambar #stream-stats {
  max-width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.embedded-find{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px;background:#142238}.embedded-find[hidden]{display:none}.embedded-find input{min-width:0;width:140px;background:#101a29;color:#dce6f5;border:1px solid #40536e;padding:4px}.embedded-find button{font:inherit;padding:4px 8px}

.graph-config:has(>.embedded-find:not([hidden])) .config-area{height:calc(100% - 125px)!important}