.source-graph-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  width: 100%;
}

.source-graph-unavailable {
  border: 1px solid #d7e2dc;
  border-radius: 10px;
  color: #55645d;
  padding: 16px;
  text-align: center;
}

.source-graph-item {
  display: grid;
  gap: 14px;
  min-width: 0;
  width: 100%;
}

.source-graph-scroll {
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-inline: contain;
  position: relative;
  touch-action: pan-x pan-y;
}

.source-graph-scroll[data-qac-overflow="false"] {
  overflow-x: hidden;
}

.source-graph-scroll[data-qac-overflow="false"] .source-graph-scroll-hint {
  display: none;
}

.source-graph-scroll[data-qac-overflow="true"] .source-graph-scroll-hint {
  display: grid;
}

.source-graph-canvas {
  background: #fff;
  color: #24352e;
  margin-inline: auto;
  max-width: none;
  min-width: 286px;
  position: relative;
}

.source-graph-relations {
  height: 100%;
  inset: 0;
  overflow: visible;
  position: absolute;
  width: 100%;
}

.source-graph-edge path {
  fill: none;
  stroke: #6d8177;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.source-graph-edge marker path {
  fill: #6d8177;
  stroke: none;
}

.source-graph-edge text {
  fill: #41554b;
  font-size: 11px;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
}

.source-graph-special-node rect {
  fill: #fff;
  stroke: #9eb2a8;
  stroke-width: 1;
}

.source-graph-special-node text {
  fill: #33473d;
  font-size: 11px;
}

.source-graph-special-node line {
  stroke: #4c89d9;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.source-graph-special-node.is-phrase rect,
.source-graph-special-node.is-constituent rect {
  display: none;
}

.source-graph-context-label {
  fill: #65776e !important;
  font-size: 8.5px !important;
}

.source-graph-implied-label {
  fill: #9aa8a1 !important;
  font-family: "KFGQPC Uthmanic Script HAFS", "Noto Naskh Arabic", serif;
  font-size: 24px !important;
}

.source-graph-special-node.is-empty rect,
.source-graph-special-node.is-implied rect {
  stroke-dasharray: 3 2;
}

.source-graph-special-node.is-phrase rect,
.source-graph-special-node.is-constituent rect {
  fill: #f5f9f7;
}

.source-graph-surface {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.source-graph-surface-group {
  pointer-events: auto;
  position: absolute;
  text-align: center;
  top: 120px;
}

.source-graph-arabic {
  color: #1d2b25;
  direction: rtl;
  font-family: "KFGQPC Uthmanic Script HAFS", "Noto Naskh Arabic", serif;
  font-size: clamp(31px, 4vw, 42px);
  line-height: 1.55;
  text-align: center;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.source-graph-segment {
  border-radius: 4px;
  cursor: default;
  display: inline;
  outline-offset: 3px;
}

.source-graph-segment[role="button"] {
  cursor: pointer;
}

.source-graph-segment[role="button"]:focus-visible {
  outline: 2px solid #1f6f54;
}

.source-graph-segment.is-selected,
.source-graph-segment.is-focused {
  box-shadow: 0 2px 0 #1f6f54;
}

.source-graph-segment.is-correct {
  background: #e9f6ef;
}

.source-graph-segment.is-wrong {
  background: #fff0ed;
}

.source-graph-pos-row {
  direction: ltr;
  display: flex;
  gap: 3px;
  margin-top: -5px;
  min-height: 28px;
  width: 100%;
}

.source-graph-pos-label {
  display: block;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
}

html[lang="ur"] .source-graph-pos-label,
html[lang="ar"] .source-graph-pos-label {
  font-family: var(--font-urdu, "Noto Naskh Arabic", serif);
  font-size: 12px;
  line-height: 1.5;
}

.source-pos-det { color: #607d8b; }
.source-pos-n,
.source-pos-propn { color: #1769aa; }
.source-pos-pron { color: #7b4cab; }
.source-pos-v { color: #b85c00; }
.source-pos-p { color: #00796b; }
.source-pos-adj { color: #2e7d32; }
.source-pos-conj { color: #8d6e63; }
.source-pos-rel { color: #5d4037; }
.source-pos-neg { color: #a33a2b; }

.source-graph-gloss {
  color: #5b6d64;
  font-size: 12px;
  line-height: 1.35;
  margin-top: -2px;
  overflow-wrap: anywhere;
  text-align: center;
}

.source-graph-morphology-wrap {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  width: 100%;
}

.source-graph-morphology {
  border-collapse: collapse;
  direction: inherit;
  table-layout: fixed;
  width: 100%;
}

.source-graph-morphology .source-graph-word-col {
  width: 38%;
}

.source-graph-morphology .source-graph-analysis-col {
  width: 62%;
}

.source-graph-morphology th,
.source-graph-morphology td {
  border: 1px solid #dce6e1;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  text-align: start;
  vertical-align: middle;
  white-space: normal;
  word-break: normal;
}

.source-graph-morphology th {
  background: #f4f8f6;
  color: #31483d;
  font-weight: 700;
}

.source-graph-morph-word {
  color: #1d2b25;
  font-family: "KFGQPC Uthmanic Script HAFS", "Noto Naskh Arabic", serif;
  font-size: 30px;
  line-height: 1.55;
  text-align: center !important;
}

.source-graph-morph-analysis {
  color: #35473f;
  line-height: 1.65;
}

.source-graph-asset {
  display: block;
  height: auto;
  margin-inline: auto;
  max-width: none;
}

@media (max-width: 640px) {
  .source-graph-panel {
    gap: 14px;
  }

  .source-graph-canvas {
    min-width: 0;
  }

  .source-graph-pos-label {
    font-size: 10px;
  }

  html[lang="ur"] .source-graph-pos-label,
  html[lang="ar"] .source-graph-pos-label {
    font-size: 11px;
  }

  .source-graph-morphology th,
  .source-graph-morphology td {
    display: table-cell;
    padding: 8px 7px;
  }

  .source-graph-morphology thead {
    display: table-header-group;
  }

  .source-graph-morphology tbody {
    display: table-row-group;
  }

  .source-graph-morphology tr {
    display: table-row;
  }

  .source-graph-morphology td::before {
    content: none !important;
    display: none !important;
  }

  .source-graph-morph-word {
    font-size: clamp(25px, 7vw, 30px);
  }

  .source-graph-morph-analysis {
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (max-width: 360px) {
  .source-graph-morphology .source-graph-word-col {
    width: 36%;
  }

  .source-graph-morphology .source-graph-analysis-col {
    width: 64%;
  }

  .source-graph-morph-word {
    font-size: 24px;
  }
}