/* =========================================================
   Grafos   componentes só desta página

   Camada 3 de 3: styles.css → llm.css → didatica.css → aqui.
   O mapa SVG, as arestas listadas, as triplas extraídas e o
   confronto lado a lado.
   ========================================================= */

/* =========================
   O mapa
   ========================= */
.grf-map {
  margin-top: var(--md);
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius);
  background: rgba(14, 16, 22, .02);
  overflow: hidden;
}

.grf-map svg {
  display: block;
  width: 100%;
  height: 380px;
}

.grf-map--short svg { height: 300px; }

/* arestas */
.grf-edge {
  stroke: rgba(14, 16, 22, .22);
  stroke-width: .3;
  transition: stroke .25s ease, stroke-width .25s ease;
}

.grf-edge.is-dim { stroke: rgba(14, 16, 22, .07); }

.grf-edge.is-path {
  stroke: var(--c-purple);
  stroke-width: .9;
}

/* nós */
.grf-node { cursor: pointer; }

.grf-node circle {
  fill: var(--c, var(--c-blue));
  stroke: #fff;
  stroke-width: .6;
  transition: r .25s ease, opacity .25s ease;
}

.grf-node text {
  fill: var(--bg);
  font-family: var(--font-mono);
  font-size: 2.5px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: .9px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity .25s ease;
}

.grf-node.is-dim circle { opacity: .28; }
.grf-node.is-dim text { opacity: .3; }

.grf-node.is-hot circle { stroke-width: .8; }

.grf-node.is-sel circle {
  stroke: var(--c, var(--c-blue));
  stroke-width: 1.4;
}

.grf-node:hover circle { r: 3.6; }
.grf-node:hover text { opacity: 1; }

/* =========================
   Arestas listadas (etapa 2)
   ========================= */
.grf-edges {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 2);
  margin-top: var(--md);
}

.grf-edge-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr auto;
  gap: calc(var(--sm) / 1.2);
  align-items: center;
  padding: calc(var(--sm) / 1.5) var(--sm);
  border: 1px solid var(--hair-soft);
  border-left: 3px solid var(--c, var(--hair));
  border-radius: 8px;
  background: #fff;
}

.grf-edge-row__dir {
  font-size: calc(var(--sm) / 1.2);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-45);
}

.grf-edge-row__rel {
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.04);
  color: var(--ink-60);
}

.grf-edge-row__node {
  font-size: calc(var(--md) / 1.06);
  font-weight: 700;
  color: var(--c, var(--bg));
}

/* =========================
   Extração de triplas
   ========================= */
.grf-source {
  margin-top: var(--md);
  padding: var(--sm);
  border-radius: 9px;
  background: rgba(14, 16, 22, .03);
  font-size: calc(var(--md) / 1.04);
  line-height: 1.7;
}

.grf-triples {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 2);
  margin-top: var(--md);
}

.grf-triple {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: calc(var(--sm) / 1.2);
  align-items: center;
  padding: calc(var(--sm) / 1.4) var(--sm);
  border: 1px solid var(--hair-soft);
  border-radius: 9px;
  background: #fff;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}

.grf-triple:hover { border-color: var(--ink-45); }

.grf-triple.is-on {
  border-color: var(--c-blue);
  background: rgba(47, 111, 237, .05);
}

.grf-triple.is-bad.is-on {
  border-color: var(--c-pink);
  background: rgba(209, 67, 107, .06);
}

.grf-triple__s,
.grf-triple__o {
  font-size: calc(var(--md) / 1.08);
  font-weight: 700;
}

.grf-triple__r {
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.06);
  color: var(--ink-45);
  white-space: nowrap;
}

.grf-triple__flag {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(63, 185, 80, .14);
  color: var(--c-green);
  font-size: calc(var(--sm) / 1.2);
  font-weight: 700;
}

.grf-triple.is-bad .grf-triple__flag {
  background: rgba(209, 67, 107, .14);
  color: var(--c-pink);
}

.grf-note {
  margin-top: var(--md);
  padding: calc(var(--sm) / 1.3) var(--sm);
  border-left: 3px solid var(--hair);
  border-radius: 0 8px 8px 0;
  background: rgba(14, 16, 22, .025);
  font-size: calc(var(--md) / 1.08);
  line-height: 1.65;
  color: var(--ink-80);
}

.grf-note.is-bad {
  border-left-color: var(--c-pink);
  background: rgba(209, 67, 107, .07);
}

/* =========================
   Confronto grafo × vetor
   ========================= */
.grf-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md);
}

.grf-verdict {
  margin-top: var(--md);
  padding: calc(var(--sm) / 1.3) var(--sm);
  border-radius: 8px;
  background: rgba(63, 185, 80, .09);
  color: var(--ink-80);
  font-size: calc(var(--md) / 1.06);
  font-weight: 700;
}

.grf-verdict.is-bad {
  background: rgba(209, 67, 107, .1);
  color: var(--c-pink);
}

/* um salto do caminho percorrido */
.grf-hop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--sm) / 1.4);
  padding: calc(var(--sm) / 1.5) calc(var(--sm) / 1.1);
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
  background: #fff;
}

.grf-hop.is-last {
  border-color: var(--prompt-green);
  background: rgba(63, 185, 80, .06);
}

.grf-hop__node {
  font-size: calc(var(--md) / 1.08);
  font-weight: 700;
  color: var(--c, var(--bg));
}

.grf-hop__rel {
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.1);
  color: var(--ink-45);
}

/* a travessia andou contra a seta da aresta */
.grf-hop__back {
  color: var(--c-amber);
  font-size: calc(var(--sm) / 1.02);
  cursor: help;
}

/* =========================
   Comunidades
   ========================= */
.grf-comms {
  display: flex;
  flex-direction: column;
  gap: var(--md);
  margin-top: var(--md);
}

.grf-comm {
  padding: var(--sm);
  border: 1px solid var(--hair-soft);
  border-left: 3px solid var(--c, var(--c-blue));
  border-radius: 9px;
  background: color-mix(in srgb, var(--c, #fff) 5%, #fff);
}

.grf-comm__name {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.6);
  font-size: calc(var(--md) / 1.02);
  font-weight: 700;
  margin-bottom: calc(var(--sm) / 2.4);
}

.grf-comm__members {
  margin-top: calc(var(--sm) / 1.6);
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.1);
  color: var(--ink-45);
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 900px) {
  .grf-versus { grid-template-columns: 1fr; }
  .grf-triple { grid-template-columns: 1fr auto; row-gap: calc(var(--sm) / 2.4); }
  .grf-triple__o { grid-column: 1; }
}

@media (max-width: 640px) {
  .grf-map svg { height: 300px; }
  .grf-map--short svg { height: 260px; }
  .grf-node text { font-size: 3.1px; }
  .grf-edge-row { grid-template-columns: 40px 1fr; row-gap: calc(var(--sm) / 2.4); }
}