/* =========================================================================
   GEOMETOR • Cusa — De Docta Ignorantia et Scripta Mathematica
   Classical Latin Typography, Apparatus Tables & Interactive .euclid-graphic SVG Styling
   Complements foundation theme's book_layout.html, _book.scss & geometor_interactive.js
   ========================================================================= */

:root {
  --cusa-accent: #0284c7;
  --cusa-accent-soft: rgba(2, 132, 199, 0.10);
  --cusa-border: rgba(100, 116, 139, 0.25);
  --cusa-folio-fg: #64748b;
  --cusa-latin-font: "Gentium Plus", "EB Garamond", "Palatino Linotype",
    "Noto Serif", "Times New Roman", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cusa-accent: #38bdf8;
    --cusa-accent-soft: rgba(56, 189, 248, 0.12);
    --cusa-border: rgba(148, 163, 184, 0.24);
    --cusa-folio-fg: #94a3b8;
  }
}

html[data-theme="dark"] {
  --cusa-accent: #38bdf8;
  --cusa-accent-soft: rgba(56, 189, 248, 0.12);
  --cusa-border: rgba(148, 163, 184, 0.24);
  --cusa-folio-fg: #94a3b8;
}

html[data-theme="light"] {
  --cusa-accent: #0284c7;
  --cusa-accent-soft: rgba(2, 132, 199, 0.10);
  --cusa-border: rgba(100, 116, 139, 0.25);
  --cusa-folio-fg: #64748b;
}

/* Classical serif readability on synchronized -la track pages and epigraphs */
.book-content :lang(la),
.book-track-la .book-body p,
.book-body blockquote em {
  font-family: var(--cusa-latin-font);
  line-height: 1.82;
  letter-spacing: 0.005em;
}

/* Subtle styling for treatise/paragraph folio markers */
.folio-marker,
.book-folio {
  color: var(--cusa-folio-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* Concordance and apparatus table refinement */
.book-body table.docutils,
main table.docutils {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  font-size: 0.94rem;
}

.book-body table.docutils th,
main table.docutils th {
  border-bottom: 2px solid var(--cusa-border);
  text-align: left;
  padding: 0.55rem 0.7rem;
}

.book-body table.docutils td,
main table.docutils td {
  border-bottom: 1px solid var(--cusa-border);
  padding: 0.55rem 0.7rem;
  vertical-align: top;
}

/* =========================================================================
   Interactive .euclid-graphic SVG Styling (Light & Dark Adaptive)
   Inline .. picture:: SVGs strip embedded <style> so theme switching works
   cleanly via html[data-theme] and prefers-color-scheme.
   ========================================================================= */

.euclid-graphic {
  --svg-bg: #fafaf9;
  --ink: #1c1917;
  --label-halo: rgba(250, 250, 249, 0.92);
  --carrier: #334155;
  --conic: #0284c7;
  --cross: #0e7490;
  --quad: #4338ca;
  --pappus-even: #d97706;
  --pappus-odd: #db2777;
  --steiner: #7c3aed;
  --harmonic: #059669;
  --golden: #b45309;
  --pt-given: #0f172a;
  --pt-meet: #d97706;
  --pt-steiner: #7c3aed;
  --pt-harmonic: #059669;
  --tri-square: #d97706;
  --tri-circle: #0284c7;
  --tri-diamond: #db2777;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-color-scheme: dark) {
  .euclid-graphic {
    --svg-bg: #141417;
    --ink: #f4f4f5;
    --label-halo: rgba(20, 20, 23, 0.92);
    --carrier: #cbd5e1;
    --conic: #38bdf8;
    --cross: #38bdf8;
    --quad: #818cf8;
    --pappus-even: #fbbf24;
    --pappus-odd: #f472b6;
    --steiner: #c084fc;
    --harmonic: #34d399;
    --golden: #facc15;
    --pt-given: #f8fafc;
    --pt-meet: #fbbf24;
    --pt-steiner: #c084fc;
    --pt-harmonic: #34d399;
    --tri-square: #fbbf24;
    --tri-circle: #38bdf8;
    --tri-diamond: #f472b6;
  }
}

html[data-theme="dark"] .euclid-graphic {
  --svg-bg: #141417;
  --ink: #f4f4f5;
  --label-halo: rgba(20, 20, 23, 0.92);
  --carrier: #cbd5e1;
  --conic: #38bdf8;
  --cross: #38bdf8;
  --quad: #818cf8;
  --pappus-even: #fbbf24;
  --pappus-odd: #f472b6;
  --steiner: #c084fc;
  --harmonic: #34d399;
  --golden: #facc15;
  --pt-given: #f8fafc;
  --pt-meet: #fbbf24;
  --pt-steiner: #c084fc;
  --pt-harmonic: #34d399;
  --tri-square: #fbbf24;
  --tri-circle: #38bdf8;
  --tri-diamond: #f472b6;
}

html[data-theme="light"] .euclid-graphic {
  --svg-bg: #fafaf9;
  --ink: #1c1917;
  --label-halo: rgba(250, 250, 249, 0.92);
  --carrier: #334155;
  --conic: #0284c7;
  --cross: #0e7490;
  --quad: #4338ca;
  --pappus-even: #d97706;
  --pappus-odd: #db2777;
  --steiner: #7c3aed;
  --harmonic: #059669;
  --golden: #b45309;
  --pt-given: #0f172a;
  --pt-meet: #d97706;
  --pt-steiner: #7c3aed;
  --pt-harmonic: #059669;
  --tri-square: #d97706;
  --tri-circle: #0284c7;
  --tri-diamond: #db2777;
}

.euclid-graphic .geom-circle.conic-curve {
  fill: none;
  stroke: var(--conic, #0284c7);
  stroke-width: 1.95;
  opacity: 0.86;
}

.euclid-graphic .geom-line {
  fill: none;
  stroke: var(--carrier, #334155);
  stroke-width: 1.75;
  stroke-linecap: round;
}

.euclid-graphic .carrier-line {
  stroke: var(--carrier, #334155);
  stroke-width: 2.15;
  opacity: 0.94;
}

.euclid-graphic .cross-line {
  stroke: var(--cross, #0e7490);
  stroke-width: 1.35;
  stroke-opacity: 0.68;
}

.euclid-graphic .quad-line {
  stroke: var(--quad, #4338ca);
  stroke-width: 1.65;
  stroke-opacity: 0.84;
}

.euclid-graphic .diagonal-line {
  stroke-dasharray: 5 3.5;
}

.euclid-graphic .pappus-line {
  stroke-width: 2.65;
  opacity: 0.96;
}

.euclid-graphic .pappus-even {
  stroke: var(--pappus-even, #d97706);
}

.euclid-graphic .pappus-odd {
  stroke: var(--pappus-odd, #db2777);
}

.euclid-graphic .steiner-line {
  stroke: var(--steiner, #7c3aed);
  stroke-width: 2.45;
  stroke-dasharray: 6 3.5;
}

.euclid-graphic .harmonic-line {
  stroke: var(--harmonic, #059669);
  stroke-width: 2.35;
}

.euclid-graphic .geom-segment.golden-segment {
  fill: none;
  stroke: var(--golden, #b45309);
  stroke-width: 3.6;
  stroke-linecap: round;
  opacity: 0.85;
}

.euclid-graphic .geom-segment.harmonic-segment {
  fill: none;
  stroke: var(--harmonic, #059669);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.78;
}

.euclid-graphic .geom-polygon.hexagon-poly {
  fill: var(--cross, #0e7490);
  fill-opacity: 0.05;
  stroke: var(--cross, #0e7490);
  stroke-width: 1.4;
  stroke-opacity: 0.42;
  stroke-linejoin: round;
}

.euclid-graphic .geom-polygon.tri-square {
  fill: var(--tri-square, #d97706);
  fill-opacity: 0.11;
  stroke: var(--tri-square, #d97706);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.euclid-graphic .geom-polygon.tri-circle {
  fill: var(--tri-circle, #0284c7);
  fill-opacity: 0.09;
  stroke: var(--tri-circle, #0284c7);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.euclid-graphic .geom-polygon.tri-diamond {
  fill: var(--tri-diamond, #db2777);
  fill-opacity: 0.12;
  stroke: var(--tri-diamond, #db2777);
  stroke-width: 1.9;
  stroke-linejoin: round;
}

.euclid-graphic .geom-point {
  fill: var(--pt-given, #0f172a);
  stroke: var(--svg-bg, #fafaf9);
  stroke-width: 1.5;
}

.euclid-graphic .meet-point {
  fill: var(--pt-meet, #d97706);
}

.euclid-graphic .steiner-point {
  fill: var(--pt-steiner, #7c3aed);
  stroke-width: 1.9;
}

.euclid-graphic .harmonic-point {
  fill: var(--pt-harmonic, #059669);
  stroke-width: 1.8;
}

.euclid-graphic .aux-point {
  opacity: 0.78;
}

.euclid-graphic .geom-label {
  fill: var(--ink, #1c1917);
  font-size: 13px;
  font-weight: 600;
  paint-order: stroke fill;
  stroke: var(--label-halo, rgba(250, 250, 249, 0.92));
  stroke-width: 3.6px;
  stroke-linejoin: round;
  user-select: none;
}

.euclid-graphic .geom-label-sub {
  font-size: 9.8px;
  font-weight: 600;
}