/* matrix.css — de Dynamic IAM Maturity Matrix, in de huisstijl.
 *
 * Eén bron voor twee plekken: het eerste tabblad van de app en een sectie van
 * de startpagina. Alles staat onder `.dm` en elke klasse begint met `dm-`,
 * want de startpagina heeft haar eigen `.band`, `.top` en `.panel`, en een
 * matrix die die overneemt, of eraan meegeeft, is twee pagina's die elkaar
 * stilletjes veranderen.
 *
 * Kleur, letter en ruimte komen uit kern/unitgates.css (--ug-*). Geen eigen
 * palet, geen webfont, geen donkere modus: de huisstijl kent die niet. Kobalt
 * draagt de eisen; rood en amber komen hier niet voor.
 */

/* Eén kolom die niet breder wordt dan haar plek: anders groeit zij mee met
   de matrix, die 850 pixels breed is, en schuift de hele pagina opzij in
   plaats van alleen het matrixvak. */
.dm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ug-s5);
  color: var(--ug-ink); font-family: var(--ug-font);
  font-size: 14px; line-height: var(--ug-lh-base); --dm-cw: 34px; --dm-lw: 228px;
  --dm-rw: 76px; --dm-rh: 26px; }
.dm *, .dm *::before, .dm *::after { box-sizing: border-box; }

/* kop */
.dm-kop { display: grid; gap: var(--ug-s2); }
.dm .dm-titel { font-family: var(--ug-font); font-weight: 700; font-size: var(--ug-fs-2xl);
  letter-spacing: var(--ug-track-display); line-height: var(--ug-lh-tight); margin: 0; }
/* Als sectie van een pagina zo groot als de koppen van de andere secties. */
.dm h2.dm-titel { font-size: var(--ug-fs-xl); }
.dm .dm-lede { margin: 0; color: var(--ug-steel); max-width: 68ch; font-size: var(--ug-fs-md); }

/* niveaukeuze */
.dm-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: var(--ug-hairline) solid var(--ug-ink); border-radius: var(--ug-radius);
  background: var(--ug-surface); overflow: hidden; }
.dm-picker button { appearance: none; border: 0; border-left: var(--ug-hairline) solid var(--ug-hair);
  background: transparent; color: var(--ug-ink); font: inherit; text-align: left;
  padding: var(--ug-s3) var(--ug-s4); cursor: pointer; display: grid; gap: 2px; min-width: 0;
  transition: background var(--ug-dur) var(--ug-ease), color var(--ug-dur) var(--ug-ease); }
.dm-picker button:first-child { border-left: 0; }
.dm-picker button:hover { background: var(--ug-surface-alt); }
.dm-picker button:focus-visible { outline: 2px solid var(--ug-cobalt); outline-offset: -3px; }
.dm-picker .dm-n { font-weight: 700; font-size: var(--ug-fs-lg); line-height: 1;
  letter-spacing: var(--ug-track-display); }
.dm-picker .dm-t { font-size: var(--ug-fs-sm); color: var(--ug-steel); line-height: 1.3; }
.dm-picker button[aria-checked="true"] { background: var(--ug-cobalt); color: #fff; }
.dm-picker button[aria-checked="true"] .dm-t { color: #fff; opacity: .85; }

/* samenvatting */
.dm-samenvatting { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--ug-s5); align-items: start; }
.dm-niveau { display: grid; gap: var(--ug-s2); }
.dm .dm-niveau h2, .dm .dm-niveau h3 { font-family: var(--ug-font); font-weight: 700; font-size: var(--ug-fs-lg);
  letter-spacing: var(--ug-track-display); margin: 0; line-height: 1.2; }
.dm .dm-niveau p { margin: 0; color: var(--ug-steel); max-width: 62ch; }
.dm-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ug-s3);
  margin-top: var(--ug-s2); }
.dm-cijfer { border-top: var(--ug-firm) solid var(--ug-ink); padding-top: 6px; }
.dm-cijfer .dm-v { font-family: var(--ug-font-mono); font-weight: 600; font-size: var(--ug-fs-lg);
  font-variant-numeric: tabular-nums; }
.dm-cijfer .dm-v small { font-size: 13px; color: var(--ug-steel); font-weight: 400; }
.dm-cijfer .dm-k { font-size: var(--ug-fs-sm); color: var(--ug-steel); }
.dm-domeinen { display: grid; gap: var(--ug-s2); }
.dm-dom { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
.dm-dom .dm-naam { font-weight: 600; font-size: 13px; }
.dm-dom .dm-meter { height: 10px; background: var(--ug-l0); border-radius: var(--ug-radius); overflow: hidden; }
.dm-dom .dm-meter i { display: block; height: 100%; width: 0; background: var(--ug-cobalt);
  transition: width var(--ug-dur-slow) var(--ug-ease); }
.dm-dom .dm-num { font-family: var(--ug-font-mono); font-size: var(--ug-fs-sm); text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ug-steel); }

/* de matrix */
.dm-paneel { background: var(--ug-surface); border: var(--ug-hairline) solid var(--ug-hair);
  border-radius: var(--ug-radius); padding-block: var(--ug-s3) 10px; }
.dm-paneelkop { padding-inline: var(--ug-s4); margin-bottom: 10px; }
.dm-legenda { display: flex; flex-wrap: wrap; gap: var(--ug-s2) 18px; font-size: var(--ug-fs-sm);
  color: var(--ug-steel); }
.dm-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.dm-sw { width: 20px; height: 14px; border-radius: var(--ug-radius); border: 1px dashed var(--ug-hair);
  display: inline-block; background: var(--ug-surface); }
.dm-sw.dm-nieuw { background: var(--ug-cobalt); border: 1px solid var(--ug-cobalt); }
.dm-sw.dm-al { background: var(--ug-cobalt-tint); border: 1px solid var(--ug-cobalt); }

.dm-scroll { overflow-x: auto; padding-inline: var(--ug-s4); }
.dm-matrix { position: relative; width: calc(var(--dm-lw) + 16 * var(--dm-cw) + var(--dm-rw)); }
.dm-bandbg { position: absolute; top: 0; bottom: 0; background: var(--ug-surface-alt); z-index: 0;
  transition: background var(--ug-dur) var(--ug-ease); }
.dm-bandbg.dm-oneven { background: transparent; }
.dm-bandbg.dm-sel { background: var(--ug-cobalt-tint); }
.dm-mrij { position: relative; z-index: 1; display: grid;
  grid-template-columns: var(--dm-lw) calc(16 * var(--dm-cw)) var(--dm-rw); align-items: center; }
.dm-mkop .dm-banden { position: relative; height: 26px; }
.dm-mkop .dm-bandlabel { position: absolute; top: 0; height: 26px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px; color: var(--ug-steel);
  border-left: var(--ug-hairline) solid var(--ug-hair); transition: color var(--ug-dur) var(--ug-ease); }
.dm-mkop .dm-bandlabel.dm-sel { color: var(--ug-cobalt); }
.dm-mkop .dm-schalen { position: relative; height: 22px; }
.dm-mkop .dm-schalen span { position: absolute; top: 2px; width: var(--dm-cw); text-align: center;
  font-family: var(--ug-font-mono); font-size: var(--ug-fs-xs); color: var(--ug-steel);
  font-variant-numeric: tabular-nums; }
.dm-mkop .dm-schalen span.dm-in { color: var(--ug-ink); font-weight: 600; }
.dm-mkop .dm-lbl-h, .dm-mkop .dm-eis-h { font-family: var(--ug-font-mono); font-size: var(--ug-fs-xs);
  letter-spacing: var(--ug-track-label); text-transform: uppercase; color: var(--ug-steel); }
.dm-mkop .dm-eis-h { text-align: center; }
.dm-groep { padding: var(--ug-s3) 0 var(--ug-s1); font-weight: 700; font-size: 14px; position: relative;
  z-index: 1; width: var(--dm-lw); }
.dm-groep small { font-weight: 400; color: var(--ug-steel); font-size: var(--ug-fs-sm); margin-left: 6px; }
.dm-rij { height: var(--dm-rh); border-bottom: var(--ug-hairline) solid var(--ug-surface-alt); }
.dm-rij:hover { background: var(--ug-cobalt-tint); }
.dm-lbl { display: flex; gap: 10px; align-items: baseline; min-width: 0; padding-right: var(--ug-s2); }
.dm-lbl .dm-id { font-family: var(--ug-font-mono); font-size: var(--ug-fs-xs); color: var(--ug-steel);
  width: 30px; flex: none; }
.dm-lbl .dm-nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-rij.dm-uit .dm-nm { color: var(--ug-steel); }
.dm-spoor { position: relative; height: var(--dm-rh); }
.dm-balk { position: absolute; left: 3px; top: 50%; height: 18px; margin-top: -9px; width: 0;
  border-radius: var(--ug-radius); background: var(--ug-cobalt-tint);
  transition: width var(--ug-dur-slow) var(--ug-ease); }
.dm-cel { position: absolute; top: 50%; margin-top: -8px; width: calc(var(--dm-cw) - 8px); height: 16px;
  border-radius: var(--ug-radius); border: 1px dashed var(--ug-hair); display: flex; align-items: center;
  justify-content: center; font-family: var(--ug-font-mono); font-size: var(--ug-fs-xs);
  color: var(--ug-steel); background: var(--ug-surface);
  transition: background var(--ug-dur) var(--ug-ease), color var(--ug-dur) var(--ug-ease),
              border-color var(--ug-dur) var(--ug-ease); }
.dm-cel.dm-al { border-style: solid; border-color: var(--ug-cobalt); background: var(--ug-cobalt-tint);
  color: var(--ug-ink); font-weight: 600; }
.dm-cel.dm-nieuw { border-style: solid; border-color: var(--ug-cobalt); background: var(--ug-cobalt);
  color: #fff; font-weight: 600; }
.dm-eiskolom { display: flex; justify-content: center; }
.dm-chip { display: inline-flex; align-items: baseline; gap: 5px; min-width: 58px; justify-content: center;
  padding: 2px var(--ug-s2); border-radius: var(--ug-radius); font-family: var(--ug-font-mono);
  font-size: 12px; border: var(--ug-hairline) solid var(--ug-hair); color: var(--ug-steel);
  transition: background var(--ug-dur) var(--ug-ease), color var(--ug-dur) var(--ug-ease); }
.dm-chip b { font-size: 13px; }
.dm-chip.dm-aan { background: var(--ug-ink); color: var(--ug-surface); border-color: var(--ug-ink); }
.dm-grens { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--ug-cobalt);
  z-index: 2; pointer-events: none;
  transition: left var(--ug-dur-slow) var(--ug-ease), opacity var(--ug-dur) var(--ug-ease); }
.dm-grens span { position: absolute; top: -2px; left: 6px; white-space: nowrap;
  font-family: var(--ug-font-mono); font-size: var(--ug-fs-xs); color: #fff; background: var(--ug-cobalt);
  padding: 1px 6px; border-radius: var(--ug-radius); }

/* nieuw op dit niveau */
.dm-delta { display: grid; gap: 10px; }
.dm .dm-delta h2, .dm .dm-delta h3 { font-family: var(--ug-font); font-weight: 700; font-size: var(--ug-fs-md); margin: 0; }
.dm-deltagroepen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dm-dg { min-width: 0; border-top: var(--ug-hairline) solid var(--ug-hair); padding-top: var(--ug-s2); }
.dm .dm-dg h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.dm-dg h4 small { color: var(--ug-steel); font-weight: 400; font-family: var(--ug-font-mono); }
.dm-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dm-tag { font-family: var(--ug-font-mono); font-size: var(--ug-fs-xs); padding: 1px 6px;
  border-radius: var(--ug-radius); background: var(--ug-cobalt-tint); color: var(--ug-ink); }
.dm-geen { color: var(--ug-steel); font-size: var(--ug-fs-sm); }
.dm .dm-voet { color: var(--ug-steel); font-size: var(--ug-fs-sm); max-width: 80ch; margin: 0; }

@media (max-width: 860px) {
  .dm-samenvatting { grid-template-columns: minmax(0, 1fr); }
  .dm-deltagroepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dm-picker .dm-t { display: none; }
  .dm-picker button { padding: 10px 6px; text-align: center; }
  .dm-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-deltagroepen { grid-template-columns: minmax(0, 1fr); }
  .dm { --dm-lw: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .dm * { transition: none !important; }
}