/* stijl.css — de mobiele voorkant (stap 14).
 *
 * Ontworpen voor één hand en één duim:
 *   - basislettergrootte 17 px, dus leesbaar zonder inzoomen;
 *   - elk raakvlak (link, knop, uitklapper) minstens 44 px hoog;
 *   - nergens een hover-effect: op een telefoon bestaat hover niet;
 *   - brede tabellen schuiven horizontaal in hun eigen vak, zodat de
 *     pagina zelf nooit breder wordt dan het scherm;
 *   - de veilige zones (inkeping, thuisbalk) blijven vrij via env().
 */

:root {
  --achtergrond: #12161c;
  --kaart: #1b212b;
  --kaart-licht: #232b37;
  --tekst: #e8eaee;
  --tekst-zacht: #a8b0bd;
  --rand: #2e3846;
  --accent: #7fb2ff;
  --rood: #ff8080;
  --rood-vlak: #3a1d20;
  --groen: #7fe0a8;
  --groen-vlak: #16301f;
  --oranje: #ffcf7f;
  --oranje-vlak: #33280f;
  --grijs: #b6bec9;
  --grijs-vlak: #242a33;
}

* { box-sizing: border-box; }

html {
  font-size: 17px;                 /* leesbaar zonder inzoomen */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
}

h1 { font-size: 1.35rem; margin: 0 0 6px; }
h2 { font-size: 1.12rem; margin: 30px 0 10px; padding-top: 12px; border-top: 1px solid var(--rand); }
h3 { font-size: 1rem; margin: 20px 0 8px; }

p { margin: 8px 0; }
ul { margin: 8px 0 8px 18px; padding: 0; }
li { margin: 4px 0; }

.onder, .uitleg, .peiling {
  color: var(--tekst-zacht);
  font-size: 0.86rem;
  line-height: 1.5;
}

header .onder { margin-bottom: 4px; }

/* De uitklapper en de spronglijst: raakvlakken van 44 px. */
summary, nav a, .knop {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--kaart);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.86rem;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

nav a { color: var(--tekst); }

details {
  margin: 12px 0;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 4px 12px 10px;
}

summary { border: 0; background: transparent; padding-left: 0; padding-right: 0; font-weight: 600; }
summary::-webkit-details-marker { color: var(--tekst-zacht); }

/* Het scorebord: de kleur zegt de stand, de cijfers staan er altijd bij. */
.stand {
  border: 1px solid var(--rand);
  border-left-width: 6px;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
  background: var(--kaart);
}
.stand.rood { border-left-color: var(--rood); background: var(--rood-vlak); }
.stand.groen { border-left-color: var(--groen); background: var(--groen-vlak); }
.stand.oranje { border-left-color: var(--oranje); background: var(--oranje-vlak); }
.stand.grijs { border-left-color: var(--grijs); background: var(--grijs-vlak); }

.stand .kop { font-weight: 700; margin: 0 0 6px; }
.stand .kern { margin: 0 0 6px; }
.stand p:last-child { margin-bottom: 0; }

.cijfers { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cijfer {
  flex: 1 1 9em;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 10px 12px;
}
.cijfer .label { display: block; font-size: 0.76rem; color: var(--tekst-zacht); }
.cijfer .waarde { display: block; font-size: 1.25rem; font-weight: 700; }
.cijfer .bij { display: block; font-size: 0.76rem; color: var(--tekst-zacht); }

/* Tabellen: het vak schuift, de pagina niet. */
.schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
table { border-collapse: collapse; font-size: 0.82rem; }
th, td {
  border: 1px solid var(--rand);
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
}
th { background: var(--kaart-licht); color: var(--tekst); }
tr:nth-child(even) td { background: #171d25; }

.leeg { color: var(--tekst-zacht); font-style: italic; }

/* De lijst met de twintig fondsen (stap 18): het eerste scherm van de app.
 * Elke regel is één raakvlak van minstens 44 px. De kleur links zegt de stand,
 * maar de woorden staan er altijd bij — een kleur alleen is op een telefoon in de
 * zon niet te lezen, en "groen" mag nooit het enige zijn wat er staat. */
.lijst { list-style: none; margin: 10px 0; padding: 0; }
.lijst li { margin: 8px 0; }

.rij-link {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-left-width: 6px;
  border-radius: 12px;
  background: var(--kaart);
  color: inherit;
  text-decoration: none;
}
.rij-link.groen { border-left-color: var(--groen); background: var(--groen-vlak); }
.rij-link.rood { border-left-color: var(--rood); background: var(--rood-vlak); }
.rij-link.oranje { border-left-color: var(--oranje); background: var(--oranje-vlak); }
.rij-link.grijs { border-left-color: var(--grijs); background: var(--grijs-vlak); }

.rij-kop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}
.rij-naam { overflow-wrap: anywhere; }
.rij-koers { white-space: nowrap; }
.rij-onder, .rij-kans, .rij-basislijn {
  display: block;
  font-size: 0.8rem;
  color: var(--tekst-zacht);
}
.rij-stand { display: block; font-size: 0.86rem; margin-top: 2px; }
.zacht { color: var(--tekst-zacht); }

.melding {
  border: 1px solid var(--rand);
  border-left: 6px solid var(--oranje);
  border-radius: 12px;
  background: var(--kaart);
  padding: 10px 14px;
  margin: 12px 0;
}

/* De balk die verschijnt als de telefoon geen verbinding heeft. */
#offline {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--oranje-vlak);
  border: 1px solid var(--oranje);
  color: var(--tekst);
  font-size: 0.84rem;
}
#offline[hidden] { display: none; }

footer { margin-top: 32px; border-top: 1px solid var(--rand); padding-top: 14px; }
code { font-size: 0.82rem; word-break: break-word; }

/* De grafieken op de pagina per aandeel (draaiboek stap 19). De SVG heeft een vast
   viewBox en schaalt mee met de breedte van het scherm; de hoogte volgt daaruit.
   Geen vaste pixelbreedte, want dan zou de grafiek op een telefoon buiten het vak
   vallen en horizontaal moeten schuiven. */
.grafiek-titel {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 .25rem;
}
.grafiek-waarde {
  font-size: .95rem;
  opacity: .85;
  margin: 0 0 .5rem;
}
.grafiek {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1rem;
  overflow: visible;
}

/* De reden en het nieuws op de pagina per aandeel (draaiboek stap 19).

   De gewone tabel zet elke cel op één regel; in de reden staat per kenmerk een
   uitleg van een hele zin, en die zou de tabel op een telefoon meters breed maken.
   Alleen die tabel wikkelt daarom, en alleen daar. */
table.wrap th, table.wrap td { white-space: normal; }
table.wrap td:first-child, table.wrap th:first-child { white-space: nowrap; }

/* Elk artikel is één raakvlak van minstens 44 px, net als een regel in de lijst.
   De titel staat vet, de bron en de twee tijdstippen eronder in het klein — die
   twee tijdstippen horen er letterlijk bij, want zonder het moment waarop wij een
   artikel binnenhaalden is het niet te controleren. */
.nieuws-link {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--kaart);
  color: inherit;
  text-decoration: none;
}
.nieuws-link .kop { display: block; font-weight: 600; }
.nieuws-link .bij {
  display: block;
  font-size: 0.78rem;
  color: var(--tekst-zacht);
  margin-top: 4px;
}