/* Opmaak van de matrixrekenmachine (web/matrixrekenmachine.js).
 *
 * Alle kleuren komen uit de lijsten in presentatie.css; enkel de twee
 * herkenningskleuren van A en B staan hier, in dezelfde volgorde als bij de
 * interactieve grafieken: eerst blauw, daarna licht oranje. Zo hebben A en B
 * overal in het venster dezelfde kleur, in de kaartkop, in de symbolen en in
 * de elementen die oplichten.
 */

:root,
:root[data-thema="licht"] {
  --mr-a: #1d5fa8;
  --mr-b: #b45309;
}

@media screen {
  :root[data-thema="donker"] {
    --mr-a: #7ab4f0;
    --mr-b: #f0b25e;
  }
}

.mr {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: .95rem;
  color: var(--kleur-tekst);
}

.mr-a { color: var(--mr-a); }
.mr-b { color: var(--mr-b); }

/* --- Bediening onder een matrix ----------------------------------------- */

/* Wat onder een term van de vergelijking hangt: de orde en de vulknoppen van
 * A of B, en onder C haar orde en de knoppen om ze over te nemen. */
.mr-onder,
.mr-besturing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  /* De onderste laag begint bovenaan, zodat de eerste regel onder elke matrix
   * op dezelfde hoogte staat, ook als er onder de ene meer hangt dan onder de
   * andere. */
  align-self: start;
}

.mr-maatgroep {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  color: var(--kleur-zwak);
}

.mr-maatlabel {
  min-width: 4.2rem;
  text-align: right;
}

/* Op een smal scherm blijft van "rijen" en "kolommen" hun beginletter over, en
 * van Willekeurig haar pijl: de vergelijking moet in haar geheel te zien zijn. */
.mr-kort {
  display: none;
}

.mr-maatwaarde {
  min-width: 1ch;
  text-align: center;
  color: var(--kleur-tekst);
  font-variant-numeric: tabular-nums;
}

.mr-orde-resultaat {
  color: var(--kleur-zwak);
  font-size: .72rem;
}

.mr-snel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
}

/* --- Knoppen ------------------------------------------------------------ */

.mr-knop {
  font: inherit;
  font-size: .82rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .4rem .6rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--straal);
  background: var(--kleur-vlak);
  color: var(--kleur-tekst);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}

/* De gekozen knop staat al op de accentkleur; zou de hover haar tekst ook
 * accent maken, dan valt het opschrift weg. Vandaar dat .mr-aan hier buiten
 * blijft: die knop krijgt haar eigen hover hieronder. */
.mr-knop:hover:not(:disabled):not(.mr-aan) {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent);
}

.mr-knop:disabled {
  opacity: .4;
  cursor: default;
}

.mr-knop.mr-aan {
  background: var(--kleur-accent);
  border-color: var(--kleur-accent);
  color: var(--kleur-op-accent);
}

.mr-knop.mr-aan:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--kleur-accent-zacht);
}

.mr-klein {
  font-size: .75rem;
  padding: .3rem .5rem;
}

.mr-rond {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: 50%;
}

/* --- Matrices ----------------------------------------------------------- */

.mr-mat {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  max-width: 100%;
}

.mr-haak {
  width: .4rem;
  flex: none;
  border: 2px solid var(--kleur-tekst);
}

.mr-haak-links { border-right: 0; border-radius: 3px 0 0 3px; }
.mr-haak-rechts { border-left: 0; border-radius: 0 3px 3px 0; }

.mr-cellen {
  display: grid;
  gap: .15rem;
  padding: .25rem .3rem;
}

.mr-cel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 1.9rem;
  padding: .1rem .3rem;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  transition: background .12s, color .12s;
}

.mr-cel-invoer { padding: 0; }

.mr-veld {
  font: inherit;
  font-size: .9rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  padding: .35rem .2rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: 5px;
  background: var(--kleur-vlak);
  color: inherit;
}

.mr-veld:focus {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 1px;
}

/* De factor r staat als term in de vergelijking, de exponent n rechtsboven
 * de haak; allebei even bewerkbaar als de matrices ernaast. */
.mr-veld-factor {
  width: 3.2rem;
  min-width: 0;
}

.mr-veld-exponent {
  width: 1.9rem;
  min-width: 0;
  font-size: .75rem;
  padding: .12rem .1rem;
}

/* De matrices in de vergelijking zijn even bewerkbaar als die in de kaarten
 * erboven; de twee blijven vanzelf gelijk. Ze staan wat rustiger, want daar
 * gaat het om de bewerking en niet om het invullen. */
.mr-cel-inline .mr-veld {
  font-size: .9rem;
  padding: .3rem .15rem;
}

/* Een element dat aan het resultaat meewerkt. A kleurt blauw, B oranje; zacht
 * is de rij of kolom waar het in staat. De klasse hangt aan de matrix zelf,
 * dus licht het element in de kaart en in de vergelijking samen op. */
.mr-van-a .mr-licht,
.mr-van-a .mr-licht-zacht { color: var(--mr-a); }
.mr-van-b .mr-licht,
.mr-van-b .mr-licht-zacht { color: var(--mr-b); }

.mr-van-a .mr-licht { background: color-mix(in srgb, var(--mr-a) 24%, transparent); }
.mr-van-b .mr-licht { background: color-mix(in srgb, var(--mr-b) 26%, transparent); }
.mr-van-a .mr-licht-zacht { background: color-mix(in srgb, var(--mr-a) 9%, transparent); }
.mr-van-b .mr-licht-zacht { background: color-mix(in srgb, var(--mr-b) 10%, transparent); }

/* Het resultaat draagt de accentkleur van de rekenmachine zelf. Bij een
 * getransponeerde licht hier de kolom op die met de rij in A overeenkomt. */
.mr-van-c .mr-licht,
.mr-van-c .mr-licht-zacht { color: var(--kleur-accent); }
.mr-van-c .mr-licht { background: color-mix(in srgb, var(--kleur-accent) 22%, transparent); }
.mr-van-c .mr-licht-zacht { background: color-mix(in srgb, var(--kleur-accent) 10%, transparent); }

.mr-licht .mr-veld,
.mr-licht-zacht .mr-veld,
.mr-geschrapt .mr-veld,
.mr-fout .mr-veld {
  background: transparent;
  border-color: transparent;
  font-weight: 700;
}

.mr-licht-zacht .mr-veld { font-weight: 400; }

/* De geschrapte rij en kolom bij een ontwikkeling van een determinant. */
.mr-geschrapt {
  background: repeating-linear-gradient(
    135deg, transparent 0 4px, var(--kleur-lijn) 4px 5px);
  opacity: .55;
}

.mr-fout {
  background: color-mix(in srgb, var(--kleur-fout) 20%, transparent);
  color: var(--kleur-fout);
}

/* --- Bewerkingen kiezen -------------------------------------------------- */

.mr-keuze {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .7rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--straal);
  background: var(--kleur-achtergrond);
}

.mr-keuzerij {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .6rem;
}

.mr-keuzelabel {
  flex: none;
  min-width: 5.5rem;
  color: var(--kleur-zwak);
  font-size: .78rem;
}

.mr-keuzeknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.mr-bewerking {
  font-variant-numeric: tabular-nums;
  min-width: 3.4rem;
}

/* --- Uitvoer ------------------------------------------------------------- */

.mr-uitvoer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .9rem .7rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--straal);
  background: var(--kleur-vlak);
}

/* De bewerking staat op een rij: [A] · [B] = [C]. Elke term heeft drie lagen:
 * de matrix, haar naam en haar bediening. Een raster houdt die lagen uit
 * elkaar, zodat de matrices op dezelfde hoogte blijven staan hoeveel er ook
 * onder hangt; elke term levert daarom altijd precies drie elementen. */
.mr-vergelijking {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: auto auto auto;
  align-items: center;
  /* Past de vergelijking niet, dan schuift ze horizontaal in plaats van af te
   * breken: zo blijven de drie lagen recht onder elkaar staan. */
  justify-content: safe center;
  overflow-x: auto;
  column-gap: .5rem;
  row-gap: .3rem;
  padding-bottom: .2rem;
}

.mr-operand {
  display: contents;
}

.mr-operandlabel {
  font-style: italic;
  font-weight: 700;
  font-size: .85rem;
}

.mr-operator {
  font-size: 1.2rem;
  color: var(--kleur-zwak);
}

/* De exponent hoort rechtsboven de haak, niet naast de naam eronder. */
.mr-machtmat {
  display: inline-flex;
  align-items: flex-start;
}

.mr-machtmat sup {
  font-size: .7rem;
  font-weight: 700;
  margin-left: .1rem;
}

/* Alles in het uitvoervak staat onder elkaar, gecentreerd: de expressie, het
 * resultaat en wat eronder hoort. */
.mr-resultaat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.mr-mat-resultaat .mr-cel {
  font-size: 1rem;
}

.mr-klikbaar { cursor: pointer; }

.mr-mat-resultaat .mr-klikbaar:hover,
.mr-mat-resultaat .mr-gekozen {
  background: var(--kleur-accent-zacht);
  outline: 1px solid var(--kleur-accent);
}

.mr-cel:focus-visible,
.mr-term:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 1px;
}

.mr-melding {
  max-width: 34rem;
  text-align: center;
  color: var(--kleur-zwak);
}

.mr-melding.mr-kan-niet {
  color: var(--kleur-fout);
}

.mr-melding.mr-goed {
  color: var(--kleur-goed);
}

.mr-uitleg {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  align-items: center;
  min-height: 3.2rem;
  text-align: center;
}

.mr-uitlegregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  font-variant-numeric: tabular-nums;
}

.mr-tip {
  color: var(--kleur-zwak);
  font-size: .85rem;
  max-width: 34rem;
}

.mr-sym {
  font-style: italic;
  font-weight: 700;
}

.mr-c { color: var(--kleur-accent); }

.mr-uitkomst {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.2rem;
  font-weight: 700;
}

/* --- Determinanten -------------------------------------------------------- */

.mr-mat-klein .mr-cel {
  min-width: 1.6rem;
  min-height: 1.4rem;
  font-size: .8rem;
  padding: 0 .2rem;
}

.mr-mat-klein .mr-haak { width: .25rem; border-width: 1px; }

.mr-ontwikkel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}

.mr-ontwikkeling {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}

.mr-term {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem .3rem;
  border-radius: 5px;
  border: 1px solid transparent;
}

.mr-term:hover,
.mr-term.mr-gekozen {
  background: var(--kleur-accent-zacht);
  border-color: var(--kleur-accent);
}

.mr-termteken {
  font-size: 1rem;
  color: var(--kleur-zwak);
}

/* --- Breuken ------------------------------------------------------------- */

.mr-getal {
  display: inline-flex;
  align-items: center;
  gap: .05em;
}

.mr-breuk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-size: .82em;
  vertical-align: middle;
}

.mr-noemer {
  border-top: 1px solid currentColor;
  padding-top: .05em;
}

/* --- Smal scherm --------------------------------------------------------- */

@media (max-width: 34rem) {
  .mr { font-size: .9rem; }

  .mr-lang { display: none; }

  .mr-kort { display: inline; }

  .mr-maatlabel {
    min-width: 1ch;
    font-style: italic;
  }

  .mr-keuzelabel { min-width: 100%; }

  .mr-cel { min-width: 1.9rem; }
}

/* --- Het venster om de rekenmachine heen --------------------------------- */

/* De rekenmachine komt in hetzelfde soort venster als de leerplandoelen
 * (presentatie.css, .pres-hulp), maar mag breder: twee matrices naast elkaar
 * en een rij bewerkingsknoppen hebben plaats nodig. */
/* .pres-hulp is een grid met place-items: center. Zonder deze kolom groeit de
 * baan mee met de inhoud, en dan slaat width: 100% op die te brede baan; een
 * matrix van orde zes duwde het venster zo buiten het scherm. */
.pres-rekenmachine {
  padding: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.pres-rekenmachine > div {
  box-sizing: border-box;
  justify-self: center;
  width: min(58rem, 100%);
  max-width: none;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  outline: none;
  padding: 1.2rem 1.4rem 1.4rem;
}

.pres-rekenmachine h2 {
  margin: .2rem 0 .8rem;
  font-size: 1.1rem;
  text-align: left;
}

.pres-rekenmachine-knoppen {
  display: flex;
  flex: none;
  gap: .4rem;
}

@media (max-width: 34rem) {
  .pres-rekenmachine {
    padding: .4rem;
  }

  .pres-rekenmachine > div {
    padding: .8rem;
    max-height: calc(100dvh - .8rem);
  }
}