/* Stijlblad van de koersenpagina op charts.beursbox.nl (T016).

   `teken.py` zet dit bestand ongewijzigd naast `index.html`, `logo.png`,
   `goud.svg` en `bitcoin.svg` in de uitvoermap. De pagina laadt daarmee alles
   van haar eigen herkomst: er staat hier geen @import, geen @font-face en geen
   url() die buiten de map wijst, dus de browser van de lezer haalt niets bij
   een derde op en de pagina blijft staan als zo'n derde uitvalt. Dat is
   dezelfde regel die `pagina.html` in zijn kop noemt; het stijlblad is de
   plek waar hij het makkelijkst stilzwijgend breekt.

   Drie dingen liggen hier vast en horen bij de tekening, niet bij de tekst:

     de letters       Roboto en Roboto Slab -- de twee letters die beursbox.nl
                      zelf voert. Ze worden niet meegeleverd en niet geladen:
                      wie ze heeft ziet ze, de rest krijgt de rij erachter, die
                      op Windows, macOS en Linux elk een echte letter noemt en
                      niet alleen `sans-serif`.
     de accenten      #fcd535 voor goud, #6eb48c voor bitcoin. Kleur draagt
                      nergens de betekenis alleen: elke grafiek heeft ook een
                      kop, en elk getal staat er in cijfers bij.
     de verhouding    3,2 : 1, binnen de 3:1 tot 4:1 uit de twee specs in
                      docs/charts.beursbox.nl/. De verhouding staat op de SVG
                      en niet op een vaste hoogte, zodat een smal scherm de
                      tekening schaalt in plaats van hem af te snijden.

   Cijfers staan overal in tabelcijfers (`tabular-nums`). Evenredige cijfers
   schuiven horizontaal bij elke verversing, en de assen en de bijschriften
   worden elke vijf minuten opnieuw geschreven. */

:root {
  --letter: Roboto, "Helvetica Neue", Arial, "Liberation Sans", system-ui, sans-serif;
  --letter-kop: "Roboto Slab", Georgia, "Liberation Serif", "Times New Roman", serif;

  --goud: #fcd535;
  --bitcoin: #6eb48c;

  --inkt: #1c2331;
  --inkt-zacht: #5b6572;
  --papier: #ffffff;
  --lijn: #e2e6ec;

  /* 16 / 5 = 3,2 : 1. Blijft tussen 3:1 en 4:1 als hij ooit verschoven wordt. */
  --verhouding: 16 / 5;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.25rem 3rem;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: 17px;
  line-height: 1.6;
}

/* Kop van de site: logo links, de zes menu-items eronder of ernaast. */
.kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--lijn);
}
.logo img { display: block; height: auto; max-width: 200px; }

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu a {
  color: var(--inkt);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover,
.menu a:focus { border-bottom-color: var(--goud); }

main { max-width: 62rem; margin: 0 auto; }

/* De regel met het tijdstip van de momentopname, en de verouderingsregel als
   de nieuwste balk te oud is. Beide staan er in cijfers; de gele rand is een
   hulp erbij en niet de drager. */
.meldingen {
  margin: 1.5rem 0 .5rem;
  padding: .6rem .9rem;
  background: #fbfbfc;
  border-left: 4px solid var(--goud);
  color: var(--inkt-zacht);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.meldingen:empty { display: none; }

.grafiek { margin: 2.5rem 0; }

.grafiek h2 {
  font-family: var(--letter-kop);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .6rem;
}

/* De tekening zelf. `width: 100%` plus `aspect-ratio` laat de SVG meeschalen
   met de kolom; de tekenaar zet dezelfde verhouding in zijn viewBox, zodat de
   lijn niet uitrekt als de twee ooit uit elkaar lopen. */
.grafiek svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--verhouding);
  overflow: visible;
}

/* Alle tekst in de tekening is een label bij een getal: de assen, de waarde
   bij de referentielijn, de tijden onder de grafiek. Tabelcijfers dus, en één
   keer hier in plaats van per element in de tekencode. */
.grafiek svg text {
  font-family: var(--letter);
  font-size: 11px;
  fill: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* De koerslijn: 1,5px, effen, geen vlakvulling en geen kleurverloop -- de
   vulling onder de lijn is wat elke bibliotheek standaard tekent en leest als
   willekeurige beurswidget. Goud geel, bitcoin groen. */
.grafiek .koerslijn {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#goud .koerslijn { stroke: var(--goud); }
#bitcoin .koerslijn { stroke: var(--bitcoin); }
#bitcoin .volume { fill: var(--bitcoin); fill-opacity: .35; }

/* De banden van de drie handelssessies liggen alleen over de goudgrafiek. Ze
   zijn oriëntatie en geen inhoud: hoogstens 6% dekking, anders vechten ze met
   de lijn. De naam staat één keer bovenaan per sessie en niet één keer per
   band -- zie de toelichting bij `sessies` in `namen.json`. */
.grafiek .sessie { fill: var(--inkt); fill-opacity: .05; }
.grafiek .sessie-naam { fill: var(--inkt-zacht); font-size: 10px; }

/* De verticale strepen van de tijdas. De dagrand is zwaarder dan de strepen
   binnen de dag, want daar sluit en opent de beurs: dat is de enige sprong in
   de lijn die geen koersbeweging is, en hij moet zonder de tijden te lezen te
   zien zijn. */
.grafiek .tijdlijn { stroke: var(--lijn); stroke-width: .75; }
.grafiek .dagrand {
  stroke: var(--inkt-zacht);
  stroke-width: 2;
  stroke-opacity: .45;
}

/* De referentielijn: 1px gestreept en duidelijk lichter dan de koerslijn. */
.grafiek .referentielijn {
  stroke: var(--inkt-zacht);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  stroke-opacity: .55;
}
.grafiek .rooster { stroke: var(--lijn); stroke-width: 1; }
.grafiek .as { stroke: var(--lijn); stroke-width: 1; }

.bijschrift {
  margin: .6rem 0 0;
  color: var(--inkt-zacht);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Elk getal buiten de tekening -- een koers in een zin, een tijd in een
   melding -- draagt dezelfde cijfers. */
.getal {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .grafiek svg { aspect-ratio: 3 / 1; }
}