/* CORE Objectoriëntatie — de opmaak rond de tekening.
 *
 * EEN EIGEN BESTAND, NIET EEN BLOK IN app.css. De conventie is niet van de
 * applicatie alleen: een rapport en een PDF tonen straks dezelfde ring met
 * dezelfde legenda, en die documenten linken hun stylesheets los. Zo hoeft de
 * opmaak daar niet opnieuw te worden geschreven.
 *
 * DE TEKENING ZELF STAAT HIER NIET IN. Kleuren en geometrie zitten in de SVG,
 * die uit src/data/core-orientation.js komt; dit bestand plaatst hem alleen.
 * Wie hier een kleur zou overschrijven, zou de betekenis overschrijven — rood
 * is de rechterzijde, en dat is geen stijlkeuze.
 *
 * Werkt op de donkere applicatie en op een licht rapport, omdat de ring een
 * doorzichtige achtergrond heeft en de tekst de kleur van zijn omgeving erft.
 */

.core-orient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.core-orient-figure {
  width: 100%;
  max-width: 280px;
}

.core-orient-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Compact: alleen de ring, en kleiner — hij staat in een hoek van een
   plattegrond of naast een fotobalk, niet in het midden van de aandacht. */
.core-orient-compact .core-orient-figure { max-width: 152px; }

.core-orient-full .core-orient-figure { max-width: 300px; }

/* De legenda: vier regels, meer niet. De vier hoeken volgen uit de zijden en
   horen niet in een legenda die in één oogopslag te lezen moet zijn. */
.core-orient-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}

.core-orient-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.core-orient-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: 0 0 auto;
}

.core-orient-colour {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 600;
}

.core-orient-side { opacity: 0.72; }

/* Eén regel uitleg. Bewust één: de regel is de conventie, niet een handleiding. */
.core-orient-rule {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.72;
}

@media (max-width: 520px) {
  .core-orient-legend { gap: 8px 16px; }
  .core-orient-full .core-orient-figure { max-width: 240px; }
}

/* In print telt alleen dat de ring heel blijft en niet over een paginarand
   valt; de kleuren moeten wél gedrukt worden, want ze zijn de betekenis. */
@media print {
  .core-orient { break-inside: avoid; page-break-inside: avoid; }
  .core-orient-figure { max-width: 200px; }
  .core-orient-rule, .core-orient-side { opacity: 1; }
}