/* === Matematyka ósmoklasisty: Geom Widget styles ===
 * Reużywane w każdym module który używa geom-widget.
 * Używa CSS variables z głównego szkieletu (--ink, --primary, --surface-2, itp.)
 * Dark-theme-aware przez CSS variables, które mogą być nadpisane w danym module.
 */

.matma-geom {
  display: block;
  max-width: 100%;
  height: auto;

  /* Lokalne zmienne: nadpisywalne per-moduł */
  --geom-stroke: var(--ink, #F3EFE6);
  --geom-fill: var(--surface-2, #1B232F);
  --geom-label: var(--ink, #F3EFE6);
  --geom-accent: var(--primary, #4684FF);
  --geom-grid: var(--line, #202A38);
  --geom-muted: var(--ink-muted, #6B7785);
  --geom-vertex: var(--primary, #4684FF);
  --geom-3d-front: rgba(37, 99, 235, 0.18);
  --geom-3d-side: rgba(37, 99, 235, 0.10);
  --geom-3d-top: rgba(37, 99, 235, 0.26);
}

/* ============ TEKST / ETYKIETY ============ */
.matma-geom text {
  fill: var(--geom-label);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.matma-geom .geom-label {
  fill: var(--geom-label);
}
.matma-geom .geom-vertex-label {
  fill: var(--geom-label);
  font-size: 13px;
  font-weight: 600;
}
.matma-geom .geom-side-label {
  fill: var(--geom-accent);
  font-size: 12px;
  font-weight: 600;
}
.matma-geom .geom-axis-label {
  fill: var(--geom-muted);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
}
.matma-geom .geom-axis-num {
  fill: var(--geom-muted);
  font-size: 10px;
  font-weight: 400;
}

/* ============ LINIE / KRAWĘDZIE ============ */
.matma-geom line,
.matma-geom .geom-edge {
  stroke: var(--geom-stroke);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}
.matma-geom .geom-edge-hidden {
  stroke: var(--geom-stroke);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  stroke-linecap: round;
  opacity: 0.55;
  fill: none;
}
.matma-geom .geom-axis {
  stroke: var(--geom-muted);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.matma-geom .geom-grid {
  stroke: var(--geom-grid);
  stroke-width: 0.8;
  opacity: 0.7;
}
.matma-geom .geom-radius {
  stroke: var(--geom-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}
.matma-geom .geom-chord {
  stroke: var(--geom-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}
.matma-geom .geom-tangent {
  stroke: var(--geom-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
  fill: none;
}
.matma-geom .geom-arrow {
  fill: var(--geom-muted);
  stroke: none;
}
.matma-geom .geom-right-angle {
  fill: none;
  stroke: var(--geom-muted);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: miter;
}

/* ============ FIGURY PŁASKIE (shapes) ============ */
.matma-geom circle.geom-shape,
.matma-geom polygon.geom-shape,
.matma-geom path.geom-shape {
  fill: var(--geom-fill);
  stroke: var(--geom-stroke);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* ============ WIERZCHOŁKI / PUNKTY ============ */
.matma-geom .geom-vertex,
.matma-geom .geom-point,
.matma-geom circle.geom-vertex {
  fill: var(--geom-vertex);
  stroke: none;
  transition: r 0.15s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  pointer-events: auto;
  cursor: pointer;
}
.matma-geom .geom-vertex:hover,
.matma-geom circle.geom-vertex:hover {
  fill: var(--gold, #F4B740);
}

/* ============ ŚCIANY 3D ============ */
.matma-geom .geom-face-front {
  fill: var(--geom-3d-front);
  stroke: var(--geom-stroke);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.matma-geom .geom-face-side {
  fill: var(--geom-3d-side);
  stroke: var(--geom-stroke);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.matma-geom .geom-face-top {
  fill: var(--geom-3d-top);
  stroke: var(--geom-stroke);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.matma-geom .geom-face-hidden-ref {
  fill: transparent;
  stroke: none;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .matma-geom .geom-vertex {
    transition: none !important;
  }
}

/* === RESPONSIVE ===
 * Gdy szerokość kontenera < 320px, zmniejszamy font-size etykiet
 * żeby nie wyjechały poza viewBox.
 */
@media (max-width: 360px) {
  .matma-geom text { font-size: 12px; }
  .matma-geom .geom-side-label { font-size: 11px; }
  .matma-geom .geom-axis-num { font-size: 9px; }
}

/* === Moduł-specific overrides ===
 * Każdy moduł może ustawić --geom-accent na własny kolor, żeby geom-widget
 * używał palety modułu. Np.:
 *
 *   .geometria-plaska .matma-geom { --geom-accent: #0B9C6F; }
 *   .algebra .matma-geom         { --geom-accent: #BA5AFF; }
 *
 * Bez takiego override'u, używa --primary apki (niebieski).
 */