/* ==========================================================================
   pythagorean-theorem-calculator.css — the scaled triangle figure

   The diagram is drawn to the real proportions of whatever was entered, so a
   3-4-5 looks visibly different from a 1-20-20.02. That is the whole point of
   showing it: the picture has to be honest about the shape.
   ========================================================================== */

.pt-figure {
  display: flex;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 65%),
    var(--bg-soft);
}

.pt-figure svg { width: 100%; max-width: 420px; height: auto; }

.pt-tri {
  fill: color-mix(in srgb, var(--primary) 14%, transparent);
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.pt-right { fill: none; stroke: var(--primary); stroke-width: 2; opacity: .65; }

.pt-label {
  fill: var(--heading);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}
.pt-label.is-solved { fill: var(--green-dark); }
[data-theme="dark"] .pt-label.is-solved { fill: #6EE7B7; }

.pt-sub {
  fill: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

.pt-angle { fill: none; stroke: var(--muted); stroke-width: 1.6; opacity: .8; }

@media (max-width: 575.98px) {
  .pt-figure { padding: 10px; }
  .pt-label { font-size: 14px; }
  .pt-sub { font-size: 11px; }
}