.arcade-graph-visualizer {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.arcade-graph-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.arcade-graph-summary > div {
  align-items: baseline;
  background: #f4f8f7;
  border: 1px solid #dce8e5;
  border-radius: 10px;
  display: flex;
  gap: 6px;
  padding: 8px 11px;
}

.arcade-graph-summary strong {
  color: var(--navy);
  font-size: 1.08rem;
}

.arcade-graph-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.arcade-graph-schema {
  border-radius: 999px;
  font-weight: 700;
  margin-left: auto;
  padding: 7px 11px;
}

.arcade-graph-schema.is-valid {
  background: var(--teal-soft);
  color: #075b52;
}

.arcade-graph-schema.is-invalid {
  background: var(--coral-soft);
  color: #923b28;
}

.arcade-graph-toolbar {
  align-items: end;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.5fr) minmax(170px, 0.55fr) auto auto auto;
  gap: 10px;
}

.arcade-graph-toolbar > label:not(.arcade-graph-check) {
  display: grid;
  gap: 5px;
}

.arcade-graph-toolbar label > span {
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 700;
}

.arcade-graph-toolbar input[type="search"],
.arcade-graph-toolbar select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.arcade-graph-check {
  align-items: center;
  display: flex;
  gap: 7px;
  min-height: 38px;
  padding: 0 4px;
  white-space: nowrap;
}

.arcade-graph-check input {
  accent-color: var(--teal);
}

.arcade-graph-zoom {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.arcade-graph-export {
  white-space: nowrap;
}

.arcade-graph-filter-panel {
  align-items: center;
  background: #f8faf9;
  border: 1px solid #dce8e5;
  border-radius: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 9px 10px;
  position: relative;
  z-index: 3;
}

.arcade-graph-content-filter {
  min-width: 180px;
  position: relative;
}

.arcade-graph-label-type-filter {
  min-width: 190px;
  position: relative;
}

.arcade-graph-content-filter > summary,
.arcade-graph-label-type-filter > summary {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  font-size: 0.76rem;
  font-weight: 750;
  gap: 8px;
  justify-content: space-between;
  list-style: none;
  min-height: 36px;
  padding: 7px 10px;
}

.arcade-graph-content-filter > summary::-webkit-details-marker,
.arcade-graph-label-type-filter > summary::-webkit-details-marker {
  display: none;
}

.arcade-graph-content-filter > summary::after,
.arcade-graph-label-type-filter > summary::after {
  color: var(--teal);
  content: "▾";
  font-size: 0.78rem;
}

.arcade-graph-content-filter[open] > summary::after,
.arcade-graph-label-type-filter[open] > summary::after {
  content: "▴";
}

.arcade-graph-content-filter > summary:focus-visible,
.arcade-graph-label-type-filter > summary:focus-visible,
.arcade-graph-legend-type:focus-visible,
.arcade-graph-legend-reset:focus-visible,
.arcade-graph-content-actions button:focus-visible {
  outline: 3px solid rgba(13, 129, 117, 0.24);
  outline-offset: 2px;
}

.arcade-graph-content-filter > summary strong,
.arcade-graph-label-type-filter > summary strong {
  background: var(--teal-soft);
  border-radius: 999px;
  color: #075b52;
  font-size: 0.68rem;
  padding: 2px 7px;
}

.arcade-graph-content-popover {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 15px 38px rgba(23, 63, 71, 0.18);
  display: grid;
  gap: 8px;
  left: 0;
  min-width: min(420px, calc(100vw - 48px));
  padding: 10px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 12;
}

.arcade-graph-label-type-popover {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 15px 38px rgba(23, 63, 71, 0.18);
  display: grid;
  gap: 8px;
  left: 0;
  min-width: 270px;
  padding: 10px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 12;
}

.arcade-graph-label-type-popover > p {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
  margin: 0;
}

.arcade-graph-label-type-list {
  border-block: 1px solid #ebe6da;
  display: grid;
  max-height: 270px;
  overflow: auto;
  padding-block: 4px;
}

.arcade-graph-label-type-option {
  align-items: center;
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 20px minmax(0, 1fr) auto;
  padding: 6px;
}

.arcade-graph-label-type-option:hover {
  background: #f4f8f7;
}

.arcade-graph-label-type-option input {
  accent-color: var(--teal);
}

.arcade-graph-label-type-option span {
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
}

.arcade-graph-label-type-option small {
  color: var(--muted);
  font-size: 0.64rem;
}

.arcade-graph-label-type-option .arcade-graph-legend-shape {
  height: 18px;
  width: 18px;
}

.arcade-graph-content-search {
  display: grid;
  gap: 4px;
}

.arcade-graph-content-search span,
.arcade-graph-related-limit span {
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 750;
}

.arcade-graph-content-search input,
.arcade-graph-related-limit input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 34px;
  padding: 7px 9px;
  width: 100%;
}

.arcade-graph-content-actions {
  display: flex;
  gap: 6px;
}

.arcade-graph-content-actions button,
.arcade-graph-legend-reset {
  background: transparent;
  border: 0;
  color: var(--teal);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 750;
  padding: 3px 4px;
}

.arcade-graph-content-list {
  border-block: 1px solid #ebe6da;
  display: grid;
  max-height: 270px;
  overflow: auto;
  padding-block: 4px;
}

.arcade-graph-content-option {
  align-items: center;
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 7px 6px;
}

.arcade-graph-content-option:hover {
  background: #f4f8f7;
}

.arcade-graph-content-option[hidden] {
  display: none;
}

.arcade-graph-content-option input {
  accent-color: var(--teal);
}

.arcade-graph-content-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.arcade-graph-content-option strong,
.arcade-graph-content-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcade-graph-content-option strong {
  color: var(--navy);
  font-size: 0.72rem;
}

.arcade-graph-content-option small,
.arcade-graph-content-option em {
  color: var(--muted);
  font-size: 0.64rem;
  font-style: normal;
}

.arcade-graph-content-option em {
  background: #f2f0e9;
  border-radius: 999px;
  min-width: 25px;
  padding: 2px 6px;
  text-align: center;
}

.arcade-graph-related-limit {
  display: grid;
  gap: 3px;
  width: 155px;
}

.arcade-graph-shared-only {
  align-items: center;
  align-self: end;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 36px;
  min-width: 146px;
  padding: 5px 9px;
}

.arcade-graph-shared-only:has(input:checked) {
  background: var(--teal-soft);
  border-color: rgba(13, 129, 117, 0.45);
}

.arcade-graph-shared-only input {
  accent-color: var(--teal);
  flex: 0 0 auto;
  height: 16px;
  margin: 0;
  min-height: 0;
  width: 16px;
}

.arcade-graph-shared-only span {
  display: grid;
  gap: 1px;
}

.arcade-graph-shared-only strong {
  color: var(--navy);
  font-size: 0.7rem;
  line-height: 1.05;
}

.arcade-graph-shared-only small {
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.05;
}

.arcade-graph-shared-only:focus-within {
  outline: 3px solid rgba(13, 129, 117, 0.24);
  outline-offset: 2px;
}

.arcade-graph-reset {
  align-self: end;
  min-height: 36px;
}

.arcade-graph-filter-status {
  color: var(--muted);
  flex: 1 1 260px;
  font-size: 0.68rem;
  line-height: 1.35;
  margin: 0;
  text-align: right;
}

.arcade-graph-main {
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.3fr);
  min-height: 520px;
  overflow: hidden;
}

.arcade-graph-canvas {
  background:
    radial-gradient(circle at 50% 50%, rgba(13, 129, 117, 0.075), transparent 55%),
    linear-gradient(rgba(23, 63, 71, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 71, 0.035) 1px, transparent 1px),
    #fbfaf6;
  background-size: auto, 24px 24px, 24px 24px, auto;
  min-width: 0;
  position: relative;
}

.arcade-graph-empty {
  align-items: center;
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 7px;
  left: 50%;
  max-width: 330px;
  padding: 18px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.arcade-graph-empty[hidden] {
  display: none;
}

.arcade-graph-empty strong {
  color: var(--navy);
}

.arcade-graph-empty span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.arcade-graph-canvas svg {
  cursor: grab;
  display: block;
  height: 520px;
  touch-action: none;
  width: 100%;
}

.arcade-graph-canvas svg.is-panning {
  cursor: grabbing;
}

.arcade-graph-pan-surface {
  fill: transparent;
  pointer-events: all;
}

.arcade-graph-ring-guides {
  pointer-events: none;
}

.arcade-graph-ring-guides.is-hidden {
  display: none;
}

.arcade-graph-ring-guide {
  fill: none;
  opacity: 0.72;
  stroke: #2563eb;
  stroke-dasharray: 7 6;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.arcade-graph-neighborhood-menu {
  position: fixed;
  z-index: 10000;
  width: 340px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid #cddcd9;
  border-radius: 10px;
  background: white;
  box-shadow: 0 8px 30px #173f4733;
}

.arcade-graph-neighborhood-menu button {
  display: block;
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #173f47;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.arcade-graph-neighborhood-menu button:hover,
.arcade-graph-neighborhood-menu button:focus-visible {
  background: #e4f3ef;
}

.arcade-graph-canvas-hint {
  background: rgba(255, 253, 248, 0.9);
  border-radius: 7px;
  bottom: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  left: 10px;
  margin: 0;
  padding: 5px 7px;
  pointer-events: none;
  position: absolute;
}

.arcade-graph-detail {
  background: var(--panel);
  border-left: 1px solid var(--line);
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 18px;
}

.arcade-graph-detail h4 {
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 4px 0 14px;
}

.arcade-graph-detail > p:not(.arcade-graph-detail-kicker),
.arcade-graph-detail blockquote {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.arcade-graph-detail-kicker {
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.arcade-graph-detail dl {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.arcade-graph-detail dl > div {
  border-bottom: 1px solid #ebe6da;
  display: grid;
  gap: 3px;
  padding-bottom: 7px;
}

.arcade-graph-detail dt {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.arcade-graph-detail dd {
  color: var(--ink);
  font-size: 0.78rem;
  margin: 0;
}

.arcade-graph-detail blockquote {
  border-left: 3px solid var(--gold);
  margin: 14px 0 0;
  padding: 4px 0 4px 10px;
}

.arcade-graph-edge-line {
  fill: none;
  stroke: #8a999c;
  stroke-opacity: 0.48;
  stroke-width: 1.25;
}

.arcade-graph-canvas marker path {
  fill: #8a999c;
}

.arcade-graph-edge.is-technical .arcade-graph-edge-line {
  stroke-dasharray: 4 4;
  stroke-opacity: 0.8;
}

.arcade-graph-edge-hit {
  fill: none;
  pointer-events: stroke;
  stroke: transparent;
  stroke-width: 13;
}

.arcade-graph-edge-label {
  dominant-baseline: central;
  fill: var(--navy);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(255, 253, 248, 0.96);
  stroke-linejoin: round;
  stroke-width: 4px;
}

.arcade-graph-edge-label.is-hidden {
  display: none;
}

.arcade-graph-edge:hover .arcade-graph-edge-line,
.arcade-graph-edge:focus .arcade-graph-edge-line,
.arcade-graph-edge.is-connected .arcade-graph-edge-line {
  stroke: var(--teal);
  stroke-opacity: 0.82;
  stroke-width: 2;
}

.arcade-graph-edge.is-selected .arcade-graph-edge-line {
  stroke: var(--coral);
  stroke-opacity: 1;
  stroke-width: 2.8;
}

.arcade-graph-edge.is-query-match .arcade-graph-edge-line {
  stroke: #c9362b;
  stroke-dasharray: none;
  stroke-opacity: 0.72;
  stroke-width: 1.8;
}

.arcade-graph-edge.is-query-match.is-approximate .arcade-graph-edge-line {
  stroke-dasharray: 6 4;
}

.arcade-graph-edge.is-query-match:hover .arcade-graph-edge-line,
.arcade-graph-edge.is-query-match:focus .arcade-graph-edge-line,
.arcade-graph-edge.is-query-match.is-connected .arcade-graph-edge-line,
.arcade-graph-edge.is-query-match.is-selected .arcade-graph-edge-line {
  stroke: #a8241b;
  stroke-opacity: 1;
  stroke-width: 2.8;
}

.arcade-graph-edge.is-filtered {
  display: none;
}

.arcade-graph-node {
  cursor: pointer;
  outline: none;
}

.arcade-graph-node.is-filtered {
  display: none;
}

.arcade-graph-node.is-dragging {
  cursor: grabbing;
}

.arcade-graph-node-shape {
  fill: #dcefeb;
  stroke: rgba(23, 63, 71, 0.28);
  stroke-width: 1.5;
}

.arcade-graph-node.type-content .arcade-graph-node-shape {
  fill: var(--navy);
  stroke: var(--navy);
}

.arcade-graph-node.is-query-content .arcade-graph-node-shape {
  fill: #c9362b;
  stroke: #8f1d17;
  stroke-width: 2.5;
}

.arcade-graph-node.is-query-content .arcade-graph-node-label {
  fill: #8f1d17;
  font-weight: 500;
}

.arcade-graph-node.type-statement .arcade-graph-node-shape {
  fill: #f5e9c9;
  stroke: #b58b2c;
}

.arcade-graph-node.type-organization .arcade-graph-node-shape {
  fill: #dcefeb;
  stroke: #0d8175;
}

.arcade-graph-node.type-person .arcade-graph-node-shape {
  fill: #f8e4dd;
  stroke: #c95d45;
}

.arcade-graph-node.type-location .arcade-graph-node-shape {
  fill: #e3ebd4;
  stroke: #71864c;
}

.arcade-graph-node.type-event .arcade-graph-node-shape {
  fill: #e6def2;
  stroke: #79609c;
}

.arcade-graph-node.type-abstract .arcade-graph-node-shape,
.arcade-graph-node.type-identifier .arcade-graph-node-shape {
  fill: #e5e8e8;
  stroke: #718085;
}

.arcade-graph-node.type-entity .arcade-graph-node-shape {
  fill: #d9e6f4;
  stroke: #496f98;
}

.arcade-graph-node.is-cross-method .arcade-graph-node-shape {
  filter: saturate(80%);
  stroke: #df6f55;
  stroke-dasharray: 6 4;
  stroke-width: 3;
}

.arcade-graph-node.type-unknown .arcade-graph-node-shape,
.arcade-graph-node.is-invalid .arcade-graph-node-shape {
  fill: var(--coral-soft);
  stroke: var(--coral);
  stroke-dasharray: 3 2;
}

.arcade-graph-node:hover .arcade-graph-node-shape,
.arcade-graph-node:focus .arcade-graph-node-shape,
.arcade-graph-node.is-connected .arcade-graph-node-shape {
  filter: drop-shadow(0 2px 4px rgba(23, 63, 71, 0.2));
  stroke-width: 2.5;
}

.arcade-graph-node.is-selected .arcade-graph-node-shape {
  filter: drop-shadow(0 0 6px rgba(223, 111, 85, 0.55));
  stroke: var(--coral);
  stroke-width: 3.5;
}

.arcade-graph-node.is-dimmed {
  opacity: 0.14;
}

.arcade-graph-node-label {
  fill: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(255, 253, 248, 0.96);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0;
}

.arcade-graph-node.is-identifier-label .arcade-graph-node-label {
  font-weight: 500;
  opacity: 1;
}

.arcade-graph-node.has-forced-label .arcade-graph-node-label {
  opacity: 1;
}

.arcade-graph-node.type-content .arcade-graph-node-label,
.arcade-graph-node.is-key-node .arcade-graph-node-label,
.arcade-graph-node:hover .arcade-graph-node-label,
.arcade-graph-node:focus .arcade-graph-node-label,
.arcade-graph-node.is-selected .arcade-graph-node-label,
.arcade-graph-node.is-connected .arcade-graph-node-label,
.arcade-graph-node.is-search-match .arcade-graph-node-label {
  opacity: 1;
}

.arcade-graph-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.arcade-graph-legend > span,
.arcade-graph-legend-type {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 6px;
}

.arcade-graph-legend-type {
  background: #fff;
  border: 1px solid #dce8e5;
  border-radius: 999px;
  cursor: pointer;
  min-height: 31px;
  padding: 4px 8px 4px 5px;
}

.arcade-graph-legend-type:hover {
  background: #f4f8f7;
  border-color: #a7ccc6;
}

.arcade-graph-legend-type.is-disabled {
  background: #f4f4f1;
  border-style: dashed;
  opacity: 0.58;
}

.arcade-graph-legend-type.is-disabled > span:not(.arcade-graph-legend-state) {
  text-decoration: line-through;
}

.arcade-graph-legend-type.is-disabled .arcade-graph-legend-shape {
  filter: grayscale(1);
}

.arcade-graph-legend-state {
  align-items: center;
  background: var(--teal-soft);
  border-radius: 50%;
  color: #075b52;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 850;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.arcade-graph-legend-type.is-disabled .arcade-graph-legend-state {
  background: #e8e6df;
  color: #5e696b;
}

.arcade-graph-legend-reset[hidden] {
  display: none;
}

.arcade-graph-legend small {
  color: var(--muted);
}

.arcade-graph-legend-shape {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.arcade-graph-legend-shape.type-content .arcade-graph-node-shape {
  fill: var(--navy);
  stroke: var(--navy);
}

.arcade-graph-legend-shape.type-statement .arcade-graph-node-shape {
  fill: #f5e9c9;
  stroke: #b58b2c;
}

.arcade-graph-legend-shape.type-organization .arcade-graph-node-shape {
  fill: #dcefeb;
  stroke: #0d8175;
}

.arcade-graph-legend-shape.type-person .arcade-graph-node-shape {
  fill: #f8e4dd;
  stroke: #c95d45;
}

.arcade-graph-legend-shape.type-location .arcade-graph-node-shape {
  fill: #e3ebd4;
  stroke: #71864c;
}

.arcade-graph-legend-shape.type-event .arcade-graph-node-shape {
  fill: #e6def2;
  stroke: #79609c;
}

.arcade-graph-legend-shape.type-entity .arcade-graph-node-shape {
  fill: #d9e6f4;
  stroke: #496f98;
}

.arcade-graph-legend-shape.type-abstract .arcade-graph-node-shape,
.arcade-graph-legend-shape.type-identifier .arcade-graph-node-shape {
  fill: #e5e8e8;
  stroke: #718085;
}

.arcade-graph-shared-legend i {
  width: 18px;
  height: 14px;
  border: 2px dashed #df6f55;
  border-radius: 4px;
  filter: saturate(80%);
}

.arcade-graph-node-index {
  background: #fff;
  border: 1px solid #dce8e5;
  border-radius: 11px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.arcade-graph-node-index-heading {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.arcade-graph-node-index-heading h4 {
  color: var(--navy);
  font-size: 0.92rem;
  margin: 0;
}

.arcade-graph-node-index-heading p {
  color: var(--muted);
  font-size: 0.72rem;
  margin: 3px 0 0;
}

.arcade-graph-node-index-table-wrap {
  border: 1px solid #e4ebe9;
  border-radius: 8px;
  max-height: 360px;
  overflow: auto;
}

.arcade-graph-node-index-table {
  border-collapse: collapse;
  font-size: 0.74rem;
  min-width: 680px;
  table-layout: fixed;
  width: 100%;
}

.arcade-graph-node-index-table th,
.arcade-graph-node-index-table td {
  border-bottom: 1px solid #e8eeec;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.arcade-graph-node-index-table th {
  background: #f4f8f7;
  color: var(--navy);
  font-size: 0.68rem;
  letter-spacing: 0.035em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.arcade-graph-node-index-table th:nth-child(1),
.arcade-graph-node-index-table td:nth-child(1) {
  width: 118px;
}

.arcade-graph-node-index-table th:nth-child(2),
.arcade-graph-node-index-table td:nth-child(2) {
  width: 29%;
}

.arcade-graph-node-index-table th:nth-child(3),
.arcade-graph-node-index-table td:nth-child(3) {
  width: 105px;
}

.arcade-graph-node-index-table tbody tr:last-child td {
  border-bottom: 0;
}

.arcade-graph-node-index-table tbody tr:hover {
  background: #f8faf9;
}

.arcade-graph-node-index-table code {
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 750;
}

.arcade-graph-query-legend {
  border-left: 1px solid var(--line);
  margin-left: 3px;
  padding-left: 10px;
}

.arcade-graph-query-legend i {
  background: #c9362b;
  border: 2px solid #8f1d17;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.arcade-graph-query-legend b {
  border-top: 2px solid #c9362b;
  display: inline-block;
  margin-left: 3px;
  width: 20px;
}

.arcade-graph-swatch {
  background: #dcefeb;
  border: 1px solid rgba(23, 63, 71, 0.28);
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.arcade-graph-swatch.type-content { background: var(--navy); }
.arcade-graph-swatch.type-statement { background: #f5e9c9; border-color: #b58b2c; transform: rotate(45deg); }
.arcade-graph-swatch.type-person { background: #f8e4dd; border-color: #c95d45; }
.arcade-graph-swatch.type-location { background: #e3ebd4; border-color: #71864c; }
.arcade-graph-swatch.type-event { background: #e6def2; border-color: #79609c; }
.arcade-graph-swatch.type-abstract,
.arcade-graph-swatch.type-identifier { background: #e5e8e8; border-color: #718085; }

.arcade-graph-validation {
  border-left: 3px solid var(--coral);
  color: #7f3526;
  font-size: 0.78rem;
  padding: 2px 0 2px 12px;
}

.arcade-graph-validation summary {
  cursor: pointer;
  font-weight: 700;
}

.arcade-graph-validation ul {
  margin-bottom: 0;
}

.arcade-graph-error {
  background: var(--coral-soft);
  border-left: 3px solid var(--coral);
  border-radius: 8px;
  color: #7f3526;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
}

.graph-preview-section {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px;
}

.graph-preview-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.graph-preview-heading h3 {
  margin: 0 0 4px;
}

.graph-preview-heading p {
  margin: 0;
}

.arcade-graph-editor {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.arcade-graph-editor-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.arcade-graph-editor-spacer {
  flex: 1;
}

.arcade-graph-editor-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}

.arcade-graph-editor-grid > [data-editor-canvas] {
  min-width: 0;
}

.arcade-graph-editor-grid .arcade-graph-visualizer {
  margin-top: 0;
}

.arcade-graph-editor-inspector {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-height: 760px;
  min-height: 320px;
  overflow: auto;
  padding: 16px;
}

.arcade-graph-editor-inspector h4 {
  color: var(--navy);
  margin: 4px 0 14px;
}

.arcade-graph-editor-inspector h5 {
  color: var(--navy);
  margin: 18px 0 8px;
}

.arcade-graph-editor-form {
  display: grid;
  gap: 10px;
}

.arcade-graph-editor-form label {
  color: var(--navy);
  display: grid;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 4px;
}

.arcade-graph-editor-form input,
.arcade-graph-editor-form select,
.arcade-graph-editor-form textarea,
.arcade-graph-editor-output textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  padding: 8px 9px;
  width: 100%;
}

.arcade-graph-editor-form textarea {
  min-height: 76px;
  resize: vertical;
}

.arcade-graph-editor-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 3px 0 0;
}

.arcade-graph-editor-form-error,
.is-invalid-text {
  color: #923b28;
}

.is-valid-text {
  color: #075b52;
}

.arcade-graph-editor-form-error:empty {
  display: none;
}

.arcade-graph-editor-errors {
  color: #7f3526;
  font-size: 0.75rem;
  padding-left: 19px;
}

.arcade-graph-editor-message {
  background: var(--teal-soft);
  border-radius: 8px;
  color: #075b52;
  font-size: 0.76rem;
  padding: 8px 10px;
}

.arcade-graph-editor-list {
  display: grid;
  gap: 5px;
}

.arcade-graph-editor-list button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--navy);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 7px 8px;
  text-align: left;
}

.arcade-graph-editor-output {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px 12px;
}

.arcade-graph-editor-output summary {
  color: var(--navy);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
}

.arcade-graph-editor-output textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  margin-top: 9px;
  min-height: 260px;
  resize: vertical;
}

@media (max-width: 980px) {
  .arcade-graph-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .arcade-graph-main {
    grid-template-columns: 1fr;
  }

  .arcade-graph-detail {
    border-left: 0;
    border-top: 1px solid var(--line);
    min-height: 180px;
  }

  .arcade-graph-editor-grid {
    grid-template-columns: 1fr;
  }

  .arcade-graph-editor-inspector {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .arcade-graph-schema {
    margin-left: 0;
    width: 100%;
  }

  .arcade-graph-toolbar {
    grid-template-columns: 1fr;
  }

  .arcade-graph-node-index-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .arcade-graph-node-index-heading .arcade-graph-export {
    align-self: flex-start;
  }

  .arcade-graph-filter-panel {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .arcade-graph-content-popover,
  .arcade-graph-label-type-popover {
    min-width: 0;
    position: static;
    width: 100%;
  }

  .arcade-graph-related-limit {
    width: 100%;
  }

  .arcade-graph-filter-status {
    text-align: left;
  }

  .arcade-graph-canvas svg {
    height: 430px;
  }

  .graph-preview-heading {
    align-items: stretch;
    flex-direction: column;
  }
}