:root{
  --roze:#FAE8E4; --geel:#FFFDE0; --groen:#E9F5EE; --paars:#EFEBF5;
  --blauw:#E6F3FF; --oranje:#FFEED4; --zand:#F5EFE3; --grijs:#F1F1EC;
  --kleur:var(--roze);

  --zwart:#111; --tekst:#151515; --wit:#FFFFFF;
  --structuur:#4a4a4a;
  --kader:color-mix(in srgb, #4a4a4a 34%, transparent);
  --rand:color-mix(in srgb, #4a4a4a 55%, transparent);
  --streep:color-mix(in srgb, #4a4a4a 40%, transparent);
  --vlak:#F1F1EC;
  --grijs-stil:#8a8a8a; --grijs-cijfer:#b4b4b4;

  --letter:Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --tracking:0.2px;
  --ritme:1.6;
  --groot:23px; --gewoon:15px; --klein:12px;
  --vet:600;

  /*
   * De bladzijde is zandkleurig. Zij koos dat op 9 september, en elk lid mag er
   * zelf een van haar acht kleuren van maken, of wit. Die keuze wordt in de
   * browser gezet op de wortel, dus alles wat op de grond staat verandert mee
   * zonder dat er ergens een tweede kleur bijkomt.
   *
   * Skool, Circle en Huddle gebruiken een lichte grijze grond met witte kaarten
   * erop, en dat scheelt lijnen. Nu de grond wit is, moeten de kaarten hun rand
   * wél tonen, anders zweeft alles. Daarom is de kaderlijn hier iets steviger dan
   * de 26 procent van de huisstijl: dat percentage is bedoeld voor een kader in
   * een document, niet voor een kaart die op dezelfde kleur staat als zijn
   * ondergrond.
   *
   * de vlakkleur blijft de kleur grijs uit de Speelveld-acht en is wat een veld,
   * een hover en een voortgangsbalk hun vorm geeft.
   */
  --grond:#F5EFE3;

  /* Ronde vormen, want zij houdt daar meer van dan van hoeken. */
  --bol:14px;     /* vlakken en kaarten */
  --bolletje:10px; /* velden en knopjes */
  --rond:999px;   /* pillen, tabbladen, het zoekveld */

  /*
   * Eén accent, en niet acht. Zij vroeg om minder kleur, en dat is ook wat de
   * drie platformen doen: de omlijsting is grijs en wit, en de kleur komt van
   * de inhoud. Roze is het accent voor wat aan of gekozen is. De andere zeven
   * blijven bestaan, maar alleen nog als herkenningskleur van een kanaal of een
   * uitdaging, niet meer als versiering op elke kaart.
   */
  --accent:#FAE8E4;

  /*
   * Kleine gevulde vormen.
   *
   * Ik had hier eerst acht diepere tinten staan, en zij vond die te donker. Dat
   * klopt: het waren haar kleuren niet meer. Dus blijft de pastel de pastel, en
   * komt het verschil tussen vol en leeg van de lijn eromheen. Een gevuld
   * bolletje heeft de kleur binnenin en een duidelijke rand; een leeg bolletje
   * is doorzichtig met een flauwe rand. Zo lees je het ook op wit, en er komt
   * geen kleur bij die niet van haar is.
   */
  --volrand:#4a4a4a;

  /*
   * Een zachter grijs voor de grote knoppen.
   *
   * De knop stond op de volle structuurkleur en dat las als bijna zwart, wat te
   * hard is naast pastels op zand. Dit is dezelfde kleur, maar met wat van de
   * zandgrond erdoor, zodat hij warm blijft en niet grauw wordt.
   */
  --knop:color-mix(in srgb, #4a4a4a 78%, #F5EFE3);
  --knop-op:color-mix(in srgb, #4a4a4a 92%, #F5EFE3);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grond); color:var(--tekst);
  font-family:var(--letter); font-weight:400; font-size:var(--gewoon);
  line-height:var(--ritme); letter-spacing:var(--tracking);
  text-align:left; -webkit-font-smoothing:antialiased;
}

mark{ background-color: transparent; background-image: linear-gradient(var(--kleur), var(--kleur)); background-repeat: no-repeat; background-size: 100% 1.32em; background-position: 0 .08em; padding: 0 .14em; border-radius: 2px; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
b,strong{font-weight:var(--vet)}

h1,h2,h3{margin:0;letter-spacing:var(--tracking);color:var(--tekst);text-wrap:balance}
h1{font-size:var(--groot);line-height:1.35;font-weight:var(--vet);margin:0 0 8px}
h2{font-size:var(--gewoon);font-weight:var(--vet);margin:0 0 4px}
h3{font-size:var(--gewoon);font-weight:var(--vet);margin:0 0 2px}
p{margin:0 0 18px}
a{color:var(--tekst);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
summary:focus-visible{outline:2px solid var(--structuur);outline-offset:2px}

.stil{color:var(--grijs-stil)}
.klein{font-size:var(--klein)}
.vet{font-weight:var(--vet)}
.af{text-decoration:line-through;text-decoration-color:var(--streep);text-decoration-thickness:1px;color:var(--grijs-stil)}
.dagletter{font-weight:var(--vet)}


/* de acht kleuren om uit te kiezen, in het beheer */
.kleurkiezers{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.kleurkiezer{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:0;width:74px;height:74px;border-radius:var(--bol);cursor:pointer;
  border:1px solid var(--kader);padding:0 0 7px;transition:transform .12s}
.kleurkiezer span{font-size:var(--klein);color:var(--structuur)}
.kleurkiezer:hover{transform:scale(1.05)}
.kleurkiezer.aan{border:2px solid var(--structuur)}
@media (prefers-reduced-motion: reduce){.kleurkiezer{transition:none}}

/* de cijfers: telblokken, balkjes, weekstaven, en de bolletjes per week van een persoon */
.cijferrij{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px}
.cijferrij .telblok{background:var(--wit);border:1px solid var(--kader);border-radius:var(--bol);
  padding:12px 16px;min-width:120px;display:flex;flex-direction:column}
.cijferrij .telblok b{font-size:var(--groot);line-height:1.2}
.cijferbalk{flex:1;height:8px;border-radius:var(--rond);background:var(--grijs);border:1px solid var(--kader);
  overflow:hidden;display:inline-block;margin:0 10px;min-width:60px}
.cijferbalk span{display:block;height:100%;border-right:1px solid var(--structuur)}
.weekstaven{display:flex;gap:8px;align-items:flex-end;height:120px;margin:8px 0 4px}
.weekstaaf{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.weekstaaf .staafvak{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;
  border-bottom:1px solid var(--kader)}
.weekstaaf .staafvak i{display:block;width:40%;border:1px solid var(--kader);border-bottom:0;
  border-radius:var(--bolletje) var(--bolletje) 0 0;min-height:1px}
.bolletje{display:inline-block;width:10px;height:10px;border-radius:var(--rond);border:1px solid var(--kader);
  vertical-align:middle;margin-right:2px}
.bolletje.aan{background:var(--groen);border-color:var(--structuur)}
.weekbolletjes{display:flex;gap:6px;margin:0}
.kaart.persoon summary{cursor:pointer;display:flex;align-items:center;gap:8px}
.kaart.persoon .cijferbalk{max-width:160px}

/* de vertaalwerkbank: jouw tekst boven, het vak om te vertalen eronder */
.blok+.blok,section.blok{margin-top:var(--ritme)}
.taalbalk{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 var(--ritme)}
.taalbalk .knop{border-radius:var(--rond)}
.taalbalk .knop.stil{background:transparent;color:var(--structuur);border:1px solid var(--rand)}
.vertaalrij{border:1px solid var(--kader);border-radius:var(--bol);margin:0 0 8px;background:var(--vlak)}
.vertaalrij>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;cursor:pointer;list-style:none}
.vertaalrij>summary::-webkit-details-marker{display:none}
.vertaalrij>form{padding:0 14px 14px}
.vertaalveld{margin:0 0 12px}
.vertaalveld>label{display:block;font-size:var(--klein);color:var(--grijs-stil)}
.grondtekst{margin:2px 0 6px;padding:8px 10px;border-radius:var(--bolletje);
  background:var(--grond);color:var(--grijs-stil);font-size:var(--klein);white-space:pre-wrap}
.bewaardmerk{margin-left:10px;align-self:center}
input,textarea,select,button{font:inherit;letter-spacing:var(--tracking);text-transform:none}