/*
 * Wyglad grafu argumentacji. Wspolny dla wersji na stronie i dla planszy,
 * z ktorej robiony jest zrzut do tekstu eseju, zeby oba wygladaly tak samo.
 * Estetyka: dawna rycina, papier i sepia.
 */

.graf-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, "Times New Roman", serif;
}

.graf-paper { fill: #efe3ca; }

/* ---- kartusz ---- */
.graf-title {
  font-size: 40px;
  letter-spacing: 7px;
  fill: #2f2419;
  font-weight: 600;
}
.graf-sub {
  font-size: 20px;
  fill: #6d5c46;
  font-style: italic;
  letter-spacing: 0.3px;
}
.graf-rule { stroke: #a9946f; stroke-width: 1; }

/* ---- pudelka ---- */
.graf-box    { fill: #f8f1e0; stroke: #2f2419; stroke-width: 1.6; }
.graf-box-in { fill: none;    stroke: #2f2419; stroke-width: 0.6; opacity: 0.55; }

.graf-zalozenie .graf-box { fill: #f2e5c4; stroke-width: 2.2; }
.graf-obserwacja .graf-box,
.graf-fakt .graf-box { fill: #f1ebdb; stroke: #6d5c46; stroke-width: 1.2; }
.graf-obserwacja .graf-box-in,
.graf-fakt .graf-box-in { stroke: #6d5c46; }
.graf-wniosek .graf-box { fill: #f6eed9; stroke-width: 2.2; }
.graf-teza .graf-box { fill: #f2e5c4; stroke-width: 3; }
.graf-teza .graf-box-in { stroke-width: 1; opacity: 0.8; }
.graf-atak .graf-box { fill: #f6e7e0; stroke: #9a3b26; stroke-width: 1.4; }
.graf-atak .graf-box-in { stroke: #9a3b26; }

/* ---- tekst w pudelkach ---- */
.graf-tag {
  font-size: 15px;
  letter-spacing: 2.2px;
  fill: #8a7454;
  font-weight: 600;
}
.graf-atak .graf-tag { fill: #9a3b26; }

.graf-body { font-size: 21px; fill: #241c13; }
.graf-teza .graf-body,
.graf-wniosek .graf-body { font-size: 22px; }
.graf-zalozenie .graf-body { font-size: 22px; }

.graf-atak .graf-body { font-size: 19.5px; }
.graf-subtext { font-size: 18px; fill: #4a3d2c; font-style: italic; }
.graf-atak .graf-subtext { font-size: 17px; }
.graf-note { font-size: 16px; fill: #8a7454; font-style: italic; }

/* ---- polaczenia ---- */
.graf-link { fill: none; }
.graf-link-wynika     { stroke: #2f2419; stroke-width: 2; }
.graf-link-przeslanka { stroke: #6d5c46; stroke-width: 1.6; stroke-dasharray: 7 6; }
.graf-link-atak       { stroke: #9a3b26; stroke-width: 1.6; stroke-dasharray: 3 5; }

/* ---- legenda ---- */
.graf-legend-label { font-size: 17px; fill: #4a3d2c; }
.graf-legend-note  { font-size: 16px; fill: #8a7454; font-style: italic; }

/* ---- interakcja (tylko wersja na stronie) ---- */
.graf-page .graf-node { cursor: pointer; }
.graf-page .graf-node,
.graf-page .graf-link { transition: opacity 220ms ease; }
.graf-page .graf-node.is-dim,
.graf-page .graf-link.is-dim { opacity: 0.28; }
.graf-page .graf-node.is-on .graf-box { stroke-width: 3.2; }
.graf-page .graf-node.is-on .graf-box-in { opacity: 0.9; }
.graf-page .graf-link.is-on { stroke-width: 3; }
.graf-page .graf-node:focus { outline: none; }
.graf-page .graf-node:focus .graf-box { stroke: #9a3b26; stroke-width: 3.2; }
.graf-page .graf-node:hover .graf-box { fill: #fdf7e8; }
.graf-page .graf-atak:hover .graf-box { fill: #fbeee8; }

@media (prefers-reduced-motion: reduce) {
  .graf-page .graf-node, .graf-page .graf-link { transition: none; }
}