/* ==========================================================================
   diagram.css - vzhled SVG grafiky: bocni pohled, dalekohled, graf.
   Styling for the three SVG views. Barvy odpovidaji dlazdicim s cisly:
   coral = schovano, zelena = videt, morska modra = k obzoru.
   (c) 2026 Richard Lipka <lipka@fav.zcu.cz> - MIT license
   ========================================================================== */

/* --- spolecne / shared ---------------------------------------------------- */

/* Vychozi pismo a barva textu v obrazcich. :where() drzi specificitu na nule:
   ".chart-svg text" (trida + prvek) drive prebilo kazdou barevnou tridu
   popisku, takze popisek schovane casti v dalekohledu byl tmave modry na
   tmave vode misto bileho a popisky os nikdy nezesedly.
   The default font and colour for text in the pictures. :where() keeps the
   specificity at zero: ".chart-svg text" (class + element) used to beat every
   colour class on a label, so the telescope's hidden-part label was dark blue
   on dark water instead of white, and axis labels never turned grey. */
:where(.diagram-svg, .telescope-svg, .chart-svg) text {
  font-family: var(--font);
  fill: var(--deep-800);
}

.dg-halo,
.ts-halo {
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3.4px;
  stroke-linejoin: round;
}

/* --- bocni pohled / side view -------------------------------------------- */

.dg-frame {
  fill: none;
  stroke: rgba(11, 42, 58, 0.18);
  stroke-width: 1.5;
}

/* Barvu tahu urcuje zvolene teleso, proto ji tady zamerne nenastavujeme. */
.dg-surface-line {
  stroke-width: 2.6;
  stroke-linecap: round;
}

.dg-decor path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}

.dg-decor-grass path {
  stroke-width: 1.8;
  opacity: 0.45;
}

.dg-decor-bands path {
  stroke-width: 3;
  opacity: 0.32;
}

.dg-decor-rocks path {
  stroke-width: 2.2;
  opacity: 0.42;
}

.dg-stars circle {
  fill: #fff;
  opacity: 0.85;
}

.dg-chord {
  stroke: rgba(11, 42, 58, 0.55);
  stroke-width: 1.8;
  stroke-dasharray: 7 6;
}

.dg-sight {
  stroke: #d2382a;
  stroke-width: 2.6;
  stroke-dasharray: 11 7;
  stroke-linecap: round;
}

.dg-pole {
  stroke: var(--deep-800);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.dg-observer {
  fill: #10394f;
}

.dg-observer-body {
  fill: #1f8fa8;
}

.dg-eye {
  fill: #fff;
  stroke: #d2382a;
  stroke-width: 3;
}

.dg-horizon-dot {
  fill: var(--sun);
  stroke: #fff;
  stroke-width: 2.5;
}

.dg-horizon-tick {
  stroke: var(--sun);
  stroke-width: 2.4;
  stroke-dasharray: 5 4;
}

.dg-object-hidden {
  opacity: 0.28;
}

.dg-hidden-fill {
  opacity: 0.55;
}

.dg-hatch-line {
  stroke: var(--coral-dark);
  stroke-width: 2.4;
}

/* kotovaci cary / dimension lines */

.dg-dim-line,
.dg-dim-tick {
  stroke: var(--deep-800);
  stroke-width: 2;
}

.dg-dim-label {
  font-size: 18px;
  font-weight: 700;
  fill: var(--deep-800);
}

.dg-dim-hidden .dg-dim-line,
.dg-dim-hidden .dg-dim-tick {
  stroke: var(--coral-dark);
}
.dg-dim-hidden .dg-dim-label {
  fill: var(--coral-dark);
}

.dg-dim-visible .dg-dim-line,
.dg-dim-visible .dg-dim-tick {
  stroke: var(--kelp-dark);
}
.dg-dim-visible .dg-dim-label {
  fill: var(--kelp-dark);
}

.dg-dim-eye .dg-dim-line,
.dg-dim-eye .dg-dim-tick {
  stroke: #10394f;
}

.dg-dim-bulge .dg-dim-line,
.dg-dim-bulge .dg-dim-tick {
  stroke: #06344a;
}

/* popisky / labels */

/* Tmavsi odstin slunecne zlute: cista --sun na svetle obloze skoro neni
   videt. Stejna barva jako "za obzorem" v meritku pod obrazkem.
   A darker shade of the sun colour: plain --sun is barely visible on a pale
   sky. Same colour as "beyond the horizon" on the ruler below. */
.dg-label {
  font-size: 18px;
  font-weight: 700;
  fill: #b57312;
}

.dg-you {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.06em;
  fill: #10394f;
}

.dg-small {
  font-size: 15px;
  fill: var(--muted);
}

.dg-note {
  font-size: 15px;
  fill: var(--muted);
}

.dg-value {
  font-size: 20px;
  font-weight: 700;
  fill: var(--deep-800);
}

/* meritko a osy / ruler and axes */

.dg-axis-line,
.dg-axis-tick {
  stroke: rgba(11, 42, 58, 0.4);
  stroke-width: 1.6;
}

.dg-arrowhead {
  fill: var(--deep-800);
}

.dg-total-line {
  stroke: var(--deep-800);
  stroke-width: 2;
}

.dg-span-horizon .dg-dim-line,
.dg-span-horizon .dg-dim-tick {
  stroke: var(--sea-600);
  stroke-width: 3;
}
.dg-span-horizon .dg-dim-label {
  fill: var(--sea-600);
  font-size: 17px;
}

.dg-span-beyond .dg-dim-line,
.dg-span-beyond .dg-dim-tick {
  stroke: var(--sun);
  stroke-width: 3;
}
.dg-span-beyond .dg-dim-label {
  fill: #b57312;
  font-size: 17px;
}

.dg-scalebar-line {
  stroke: var(--deep-800);
  stroke-width: 2.2;
}

/* --- dalekohled / telescope ---------------------------------------------- */

.ts-rim {
  fill: none;
  stroke: var(--deep-800);
  stroke-width: 12;
  opacity: 0.9;
}

.ts-rim-inner {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 3;
}

/* Barvy opet urcuje zvolene teleso. */
.ts-horizon {
  stroke-width: 3;
}

.ts-waves path {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.42;
}

.ts-stars circle {
  fill: #fff;
  opacity: 0.85;
}

.ts-ghost {
  opacity: 0.24;
}

.ts-ghost-box {
  fill: none;
  stroke: var(--coral-dark);
  stroke-width: 2.4;
  stroke-dasharray: 8 6;
}

/* Opar a prelud. Barvu oparu urcuje obloha telesa, proto ji nastavuje kod.
   Haze and mirage. The haze colour comes from the body's sky, set in code. */
.ts-haze {
  pointer-events: none;
}

/* Pruhlednost preludu a jeho pruhu pocita kod podle oparu, proto ji tady
   NESMI nastavovat CSS: pravidlo stylopisu v SVG prebije atribut.
   The opacity of the mirage and its strip is computed in code from the haze,
   so CSS must NOT set it here: a stylesheet rule beats the attribute in SVG. */

.ts-note {
  font-size: 14px;
  font-weight: 700;
  fill: var(--muted);
}

.ts-note-mirage {
  fill: var(--coral-dark);
}

.ts-dim-line,
.ts-dim-tick {
  stroke: var(--kelp-dark);
  stroke-width: 2.4;
}

.ts-label {
  font-size: 20px;
  font-weight: 700;
  fill: var(--kelp-dark);
}

.ts-hidden-label {
  font-size: 17px;
  font-weight: 700;
  fill: rgba(255, 255, 255, 0.95);
}

.ts-empty {
  font-size: 19px;
  font-weight: 700;
  fill: var(--muted);
}

.ts-caption {
  font-size: 21px;
  font-weight: 800;
  fill: var(--deep-800);
}

.ts-subcaption {
  font-size: 15px;
  fill: var(--muted);
}

/* --- graf / chart --------------------------------------------------------- */

.ch-band-full {
  fill: rgba(47, 158, 111, 0.13);
}
.ch-band-partial {
  fill: rgba(242, 169, 59, 0.15);
}
.ch-band-hidden {
  fill: rgba(232, 105, 92, 0.15);
}

.ch-band-label {
  font-size: 15px;
  font-weight: 700;
  fill: var(--muted);
}

.ch-grid {
  stroke: rgba(11, 42, 58, 0.1);
  stroke-width: 1;
}

.ch-tick {
  font-size: 14px;
  fill: var(--muted);
}

.ch-area {
  fill: rgba(31, 143, 168, 0.22);
}

.ch-curve {
  stroke: var(--sea-600);
  stroke-width: 3.4;
  stroke-linejoin: round;
}

.ch-marker {
  stroke-width: 2.4;
  stroke-dasharray: 8 6;
}

.ch-marker-start {
  stroke: var(--kelp-dark);
}

.ch-marker-vanish {
  stroke: var(--coral-dark);
}

.ch-marker-label {
  font-size: 15px;
  font-weight: 700;
  fill: var(--deep-800);
}

/* Bila obalka pod textem, aby popisek prekryl krivku i mrizku a zustal citelny. */
.ch-halo {
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3.6px;
  stroke-linejoin: round;
}

.ch-now {
  stroke: var(--deep-800);
  stroke-width: 2;
}

.ch-now-dot {
  fill: #fff;
  stroke: var(--deep-800);
  stroke-width: 3;
}

.ch-frame {
  fill: none;
  stroke: rgba(11, 42, 58, 0.25);
  stroke-width: 1.5;
}

.ch-axis-title {
  font-size: 15px;
  font-weight: 600;
  fill: var(--muted);
}

/* --- kruhove schema / the circular map ------------------------------------ */

:where(.map-svg) text {
  font-family: var(--font);
  fill: var(--deep-800);
}

/* Barvu vyplne urcuje zvolene teleso, proto ji tady nenastavujeme. */
.hm-globe {
  stroke: rgba(11, 42, 58, 0.25);
  stroke-width: 1.5;
}

.hm-inset-face {
  opacity: 0.9;
}

.hm-inset-rim {
  stroke: rgba(11, 42, 58, 0.3);
  stroke-width: 2;
}

.hm-horizon-area {
  fill: var(--sun);
  stroke: #b57312;
  stroke-width: 1.6;
}

.hm-vanish-area {
  fill: rgba(232, 105, 92, 0.62);
  stroke: var(--coral-dark);
  stroke-width: 1.6;
}

.hm-observer {
  fill: #fff;
  stroke: var(--deep-900);
  stroke-width: 2;
}

/* Kruh aktualni vzdalenosti - jediny, ktery se hybe s posuvnikem. */
.hm-now-ring {
  stroke: var(--deep-900);
  stroke-width: 2.2;
  stroke-dasharray: 7 5;
}

.hm-swatch-now {
  fill: none;
  stroke: var(--deep-900);
  stroke-width: 2.6;
  stroke-dasharray: 5 3.5;
}

/* krouzek kolem misteczka, ktere vyrez zvetsuje */
.hm-mark {
  stroke: var(--deep-800);
  stroke-width: 1.6;
}

.hm-callout {
  stroke: var(--deep-800);
  stroke-width: 1.2;
  stroke-dasharray: 6 5;
  opacity: 0.5;
}

.hm-scalebar {
  stroke: var(--deep-900);
  stroke-width: 2.2;
}

.hm-scale-label {
  font-size: 14px;
  font-weight: 700;
  fill: var(--deep-900);
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3.4px;
  stroke-linejoin: round;
}

.hm-caption {
  font-size: 16px;
  font-weight: 700;
  fill: var(--deep-800);
}

.hm-note {
  font-size: 14px;
  fill: var(--muted);
}

.hm-swatch {
  stroke: #fff;
  stroke-width: 2;
}

.hm-swatch-horizon {
  fill: var(--sun);
}

.hm-swatch-vanish {
  fill: rgba(232, 105, 92, 0.85);
}

.hm-legend {
  font-size: 16px;
  font-weight: 700;
  fill: var(--deep-800);
}

.hm-legend-value {
  font-size: 17px;
  font-weight: 700;
  fill: var(--deep-900);
  font-variant-numeric: tabular-nums;
}

.hm-legend-detail {
  font-size: 15px;
  fill: var(--muted);
}

/* --- meze viditelnosti / limits of sight ---------------------------------- */

.lm-dot {
  fill: var(--deep-700);
  stroke: #fff;
  stroke-width: 2;
}

.lm-dot-active {
  fill: var(--coral);
  stroke: #fff;
  stroke-width: 3;
}

.lm-dot-label {
  font-size: 14px;
  font-weight: 700;
  fill: var(--deep-800);
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3.4px;
  stroke-linejoin: round;
}

/* --- odecitani ukazovatkem / the pointer read-out -------------------------- */

/* Vrstva nesmi chytat udalosti, jinak by si nitkovy kriz stal sam sobe
   v ceste. / The layer must not catch events, or the crosshair would sit in
   the pointer's own way. */
.rd-chart {
  cursor: crosshair;
}

.rd-layer {
  pointer-events: none;
}

.rd-line {
  stroke: var(--deep-800);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.7;
}

.rd-dot {
  fill: var(--deep-800);
  stroke: #fff;
  stroke-width: 2.5;
}

/* Prazdny krouzek: skutecny bod lezi za okrajem meritka. */
.rd-dot-out {
  fill: #fff;
  stroke: var(--deep-800);
}

.rd-plate {
  fill: var(--paper);
  stroke: var(--deep-800);
  stroke-width: 1.2;
}

.rd-value {
  font-size: 14px;
  font-weight: 700;
  fill: var(--deep-900);
  font-variant-numeric: tabular-nums;
}

.dg-warn {
  font-size: 18px;
  font-weight: 800;
  fill: var(--coral-dark);
}

/* --- rezim Geometrie / the geometry construction -------------------------- */

:where(.geometry-svg) text {
  font-family: var(--font);
  fill: var(--deep-800);
}

.gm-body {
  stroke-width: 2;
}

.gm-radius {
  stroke: var(--deep-800);
  stroke-width: 2.4;
}

.gm-hypotenuse {
  stroke: var(--deep-800);
  stroke-width: 1.6;
  stroke-dasharray: 6 5;
  opacity: 0.75;
}

.gm-sight {
  stroke: #d2382a;
  stroke-width: 3;
  stroke-linecap: round;
}

.gm-right-angle {
  stroke: #d2382a;
  stroke-width: 2.2;
}

.gm-arc {
  stroke-width: 6;
  stroke-linecap: round;
}

.gm-arc-observer {
  stroke: var(--sea-500);
}

.gm-arc-object {
  stroke: var(--coral);
}

.gm-height {
  stroke-width: 5;
  stroke-linecap: round;
}

.gm-height-observer {
  stroke: var(--sea-600);
}

.gm-height-object {
  stroke: var(--coral-dark);
}

.gm-angle {
  stroke-width: 2.4;
  fill: none;
}

.gm-angle-observer {
  stroke: var(--sea-600);
}

.gm-angle-object {
  stroke: var(--coral-dark);
}

.gm-point {
  fill: var(--deep-900);
  stroke: #fff;
  stroke-width: 2;
}

.gm-point-small {
  stroke-width: 1.5;
}

.gm-symbol {
  font-size: 21px;
  font-weight: 700;
  font-style: italic;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3.6px;
  stroke-linejoin: round;
}

.gm-symbol-small {
  font-size: 15px;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.gm-label {
  font-size: 16px;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3.6px;
  stroke-linejoin: round;
}

.gm-role {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3.4px;
  stroke-linejoin: round;
}

.gm-observer-fill {
  fill: var(--sea-600);
}

.gm-object-fill {
  fill: var(--coral-dark);
}

/* Poznamka lezi pres kouli, proto ma bilou obalku. / The note sits over the
   ball, hence the white halo. */
.gm-note {
  font-size: 14px;
  fill: var(--muted);
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3.4px;
  stroke-linejoin: round;
}

/* Otaznik misto hodnoty v rezimu pro ucitele.
   A question mark in place of a value, in teacher mode. */
.gm-ask {
  fill: var(--coral-dark);
  font-weight: 800;
}

.geo-teacher .gm-q {
  cursor: pointer;
}

.geo-teacher .gm-q:hover {
  text-decoration: underline;
}

/* --- cernobila konstrukce pro tisk / black and white for print ----------- */
/* Tady stylopis zamerne prebiji atributy: barvy koule prichazeji z palety
   telesa jako atributy a pro tisk se maji zahodit. Pozorovatel je plnou
   carou, objekt carkovane - to nahradi modrou a cervenou.
   Here the stylesheet deliberately beats the attributes: the ball's colours
   arrive from the body's palette as attributes and must go for print. The
   observer is drawn solid and the object dashed, in place of blue and red. */
.geo-bw .gm-body {
  fill: #fff;
  stroke: #000;
}

.geo-bw .gm-radius,
.geo-bw .gm-hypotenuse,
.geo-bw .gm-sight,
.geo-bw .gm-right-angle,
.geo-bw .gm-arc,
.geo-bw .gm-height,
.geo-bw .gm-angle {
  stroke: #000;
}

.geo-bw .gm-hypotenuse {
  opacity: 1;
}

.geo-bw .gm-sight {
  stroke-width: 2.6;
}

.geo-bw .gm-arc {
  stroke-width: 5;
  stroke-linecap: butt;
}

.geo-bw .gm-height {
  stroke-width: 4;
  stroke-linecap: butt;
}

.geo-bw .gm-arc-object {
  stroke-dasharray: 10 6;
}

.geo-bw .gm-height-object {
  stroke-dasharray: 6 4;
}

.geo-bw .gm-angle-object {
  stroke-dasharray: 5 4;
}

.geo-bw .gm-point {
  fill: #000;
}

.geo-bw .geometry-svg text,
.geo-bw .gm-ask {
  fill: #000;
}

/* Grafy pod konstrukci / the charts under the construction */
.geo-bw .ch-band-full {
  fill: #ededed;
}

.geo-bw .ch-curve,
.geo-bw .ch-marker-start,
.geo-bw .ch-marker-vanish,
.geo-bw .ch-now,
.geo-bw .ch-now-dot {
  stroke: #000;
}

.geo-bw .ch-grid {
  stroke: #d0d0d0;
}

.geo-bw .ch-frame {
  stroke: #000;
}

.geo-bw .chart-svg text {
  fill: #000;
}

/* Znacka prerusene cary na stozaru: skutecna vyska je vetsi nez obrazek.
   The break mark on the mast: the real height exceeds the picture. */
.dg-break line {
  stroke: var(--deep-700, #124a63);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.75;
}