/* ============================================================================
   Inschalen — de vormgeving
   ============================================================================

   Dit scherm is een leesscherm met keuzes, geen formulier. De vormgeving volgt
   daaruit:

   * De **niveaukaarten staan naast elkaar**, precies zoals in het handboek, waar
     de functiegroepen kolommen van één tabel zijn. Naast elkaar kun je ze
     vergelijken; onder elkaar lees je ze los en kies je de eerste die redelijk
     klinkt.
   * De **tekst is de knop**. Er staat geen radioknop naast een samenvatting; de
     hele handboektekst is aanklikbaar. Wat je kiest is wat je leest.
   * De stappen zijn **genummerd en groeien**: er staat nooit een stap in beeld
     waarvoor de vorige nog niet af is. Zo kan er geen bedrag worden ingevuld
     voordat er een groep is, en dat is precies de fout die dit scherm moet
     voorkomen.
   ========================================================================= */

.inschaalblad { max-inline-size: 1180px; }

.inschaalkop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ruimte-5); flex-wrap: wrap;
  margin: var(--ruimte-3) 0 var(--ruimte-6);
  padding-bottom: var(--ruimte-4); border-bottom: 1px solid var(--border-strong);
}
.inschaalkop .context {
  display: block; font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
.inschaalkop h1 { font-size: var(--tekst-pagina); margin: 0; }
.inschaalkop .onder { margin: 4px 0 0; color: var(--text-secondary); }
.inschaalkop .scheid { color: var(--text-muted); margin: 0 5px; }
.inschaalpeil { display: flex; align-items: center; gap: var(--ruimte-2); }
.inschaalpeil label { font-size: var(--tekst-m); color: var(--text-secondary); }

/* --- De stappen ------------------------------------------------------------ */

.inschaalstappen { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ruimte-6); }

.inschaalstap {
  background: var(--vlak); border: 1px solid var(--border-strong);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-1); overflow: hidden;
}
.inschaalstap .stapkop {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-4) var(--ruimte-5);
  border-bottom: 1px solid var(--border); background: var(--vlak-zacht);
}
.inschaalstap .stapkop h2 { margin: 0; font-size: var(--tekst-sectie); }
.stapnr {
  flex: none; inline-size: 26px; block-size: 26px; display: grid; place-items: center;
  border-radius: var(--radius-pil); background: var(--vlak-diep);
  border: 1px solid var(--border-strong);
  font-size: var(--tekst-m); font-weight: 700; color: var(--text-secondary);
}
.inschaalstap.klaar .stapnr {
  background: var(--accent); border-color: var(--accent);
  color: var(--tekst-op-accent);
}
.inschaalstap .staplijf { padding: var(--ruimte-5); }
.inschaalstap .toelichting { max-inline-size: 78ch; margin-top: 0; }

/* --- Stap 1: de familiekeuze ----------------------------------------------- */

.familiekeuze {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--ruimte-3); margin-top: var(--ruimte-4);
}
.familiekaart {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: var(--ruimte-4);
  background: var(--vlak); border: 1px solid var(--border);
  border-radius: var(--radius-2); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel),
              box-shadow var(--duur-snel);
}
.familiekaart:hover { border-color: var(--border-interactive); }
.familiekaart.gekozen {
  border-color: var(--accent-vorm); background: var(--accent-zacht);
  box-shadow: inset 0 0 0 1px var(--accent-vorm);
}
.familiekaart:focus-visible { outline: none; box-shadow: var(--focus-gloed); }
.fcode {
  font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .06em;
  color: var(--text-muted);
}
.fnaam { font-size: var(--tekst-xl); font-weight: 650; color: var(--text-primary);
  line-height: 1.25; }
.fomschrijving { font-size: var(--tekst-m); color: var(--text-secondary);
  line-height: 1.45; margin-top: 2px; }
.fbereik { font-size: var(--tekst-m); font-weight: 600; color: var(--accent-tekst);
  margin-top: var(--ruimte-2); }
.fvoorbeelden { font-size: var(--tekst-xs); color: var(--text-muted); line-height: 1.4; }

/* --- Stap 2: de karakteristieken ------------------------------------------- */

.karakteristiek { margin-top: var(--ruimte-6); }
.karakteristiek:first-of-type { margin-top: var(--ruimte-5); }
.karakkop { display: flex; align-items: baseline; gap: var(--ruimte-3);
  flex-wrap: wrap; }
.karakkop h3 { margin: 0; font-size: var(--tekst-kaart); }
.karakmerk {
  font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 9px; border-radius: var(--radius-pil);
  background: var(--vlak-diep); color: var(--text-muted);
  border: 1px solid var(--border);
}
/* De drie die de indeling bepalen zijn zichtbaar anders dan de vierde. Zonder dat
   verschil lijkt Fysieke aspecten even zwaar te wegen, en dat is niet zo. */
.karakmerk.beslist {
  background: var(--accent-zacht); color: var(--accent-tekst);
  border-color: var(--accent-rand);
}
.karakuitleg { margin: var(--ruimte-2) 0 2px; max-inline-size: 80ch;
  color: var(--text-secondary); }
.karakpunten { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-m);
  color: var(--text-muted); }

/* De niveaus naast elkaar, met horizontaal schuiven als ze niet passen. Zeven
   functiegroepen op één rij lukt niet op elk scherm, en ze onder elkaar zetten
   haalt juist het vergelijken weg waar deze weergave voor bestaat. */
.niveaus {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: var(--ruimte-3);
  overflow-x: auto; padding-bottom: var(--ruimte-2);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.niveau {
  display: flex; flex-direction: column; gap: var(--ruimte-2); text-align: left;
  padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-3);
  background: var(--vlak); border: 1px solid var(--border);
  border-radius: var(--radius-2); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel);
}
.niveau:hover { border-color: var(--border-interactive); background: var(--vlak-zacht); }
.niveau.gekozen {
  border-color: var(--accent-vorm); background: var(--accent-zacht);
  box-shadow: inset 0 0 0 1px var(--accent-vorm);
}
.niveau:focus-visible { outline: none; box-shadow: var(--focus-gloed); }
.niveaukop { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-2); }
.niveaugroep {
  font-size: var(--tekst-m); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.niveau.gekozen .niveaugroep { color: var(--accent-tekst); }
.niveaukop svg { width: 16px; height: 16px; color: var(--accent-tekst); }
.niveautekst { font-size: var(--tekst-m); line-height: 1.5; color: var(--text-primary); }
.niveaubron { font-size: var(--tekst-xs); color: var(--text-muted); margin-top: auto;
  padding-top: var(--ruimte-2); }

/* --- Stap 3: de uitkomst --------------------------------------------------- */

.uitkomstvak {
  padding: var(--ruimte-4) var(--ruimte-5);
  background: var(--accent-zacht); border: 1px solid var(--accent-rand);
  border-radius: var(--radius-2); margin-bottom: var(--ruimte-5);
}
/* Een uitkomst waar het handboek geen zekerheid over geeft, ziet er ook niet
   zeker uit. */
.uitkomstvak.onzeker {
  background: var(--warning-bg); border-color: var(--warning-border);
}
.uitkomstgroep {
  display: block; font-size: var(--tekst-sectie); font-weight: 700;
  color: var(--accent-tekst);
}
.uitkomstvak.onzeker .uitkomstgroep { color: var(--warning); }
.uitkomstgroep.geen { color: var(--warning); }
.uitkomstreden { margin: var(--ruimte-2) 0 0; max-inline-size: 80ch; }
.uitkomstregel { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-m);
  color: var(--text-secondary); }

.afwijkveld {
  padding: var(--ruimte-4); border-radius: var(--radius-2);
  background: var(--warning-bg); border: 1px solid var(--warning-border);
}

/* --- Stap 5: het salaris --------------------------------------------------- */

.salarisuitkomst {
  display: flex; align-items: center; gap: var(--ruimte-5); flex-wrap: wrap;
  padding: var(--ruimte-4) var(--ruimte-5); margin-bottom: var(--ruimte-4);
  background: var(--vlak-zacht); border: 1px solid var(--border);
  border-radius: var(--radius-2);
}
.salarisuitkomst .label { display: block; font-size: var(--tekst-m);
  color: var(--text-secondary); }
.salarisuitkomst .bedrag { font-size: var(--tekst-kaart); font-weight: 650;
  font-variant-numeric: tabular-nums; }
.salarisuitkomst .bedrag.groot { font-size: var(--tekst-sectie); font-weight: 700; }
.salarisuitkomst .pijl { color: var(--text-muted); display: flex; }
.salarisuitkomst .pijl svg { width: 20px; height: 20px; }

.geenbedrag {
  padding: var(--ruimte-4); margin-bottom: var(--ruimte-4);
  background: var(--information-bg); border: 1px solid var(--information-border);
  border-radius: var(--radius-2);
}
.geenbedrag p { margin: 0 0 var(--ruimte-2); max-inline-size: 78ch; }
.geenbedrag p:last-child { margin-bottom: 0; }

.waarschuwing {
  display: flex; align-items: flex-start; gap: var(--ruimte-2);
  color: var(--warning); font-weight: 600; max-inline-size: 78ch;
}
.waarschuwing svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }

.inschaalvoet {
  margin-top: var(--ruimte-6); padding-top: var(--ruimte-5);
  border-top: 1px solid var(--border-strong);
}
.inschaalvoet .label { display: block; margin-top: var(--ruimte-2);
  color: var(--text-secondary); max-inline-size: 78ch; }

/* --- De geschiedenis ------------------------------------------------------- */

.eerdereinschalingen { margin-bottom: var(--ruimte-6); }
.eerdereinschalingen h2 { font-size: var(--tekst-kaart); margin: 0 0 var(--ruimte-3); }
.inschaallijst {
  background: var(--vlak); border: 1px solid var(--border-strong);
  border-radius: var(--radius-3); overflow: hidden;
}
.inschaalregel {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr) 12rem auto;
  gap: var(--ruimte-4); align-items: center;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--border);
}
.inschaalregel:last-child { border-bottom: none; }
.inschaalregel.voorstel { background: var(--warning-bg); }
.igroep { font-weight: 700; font-variant-numeric: tabular-nums; }
.igroep .ijaar { display: block; font-size: var(--tekst-m); font-weight: 500;
  color: var(--text-secondary); }
.iwat { min-inline-size: 0; }
.ifamilie { display: block; }
.idatum { display: block; font-size: var(--tekst-m); color: var(--text-secondary); }
.iacties { display: flex; gap: var(--ruimte-2); justify-content: flex-end; }

@media (max-width: 1023px) {
  .inschaalregel { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--ruimte-2); }
  .iwat { grid-column: 1 / -1; }
  .iacties { grid-column: 1 / -1; justify-content: flex-start; }
  .niveaus { grid-auto-columns: minmax(13rem, 80%); }
}

/* --- De cao-salaristabel ---------------------------------------------------- */

.caotabel { font-variant-numeric: tabular-nums; }
.caotabel th[scope="row"] { font-weight: 700; text-align: left; }
.caotabel td.leeg { color: var(--text-muted); }
/* Een bedrag dat niet letterlijk uit de cao-tabel is overgenomen hoort er anders
   uit te zien dan een bedrag dat dat wel is. */
.caotabel td.afgeleid { color: var(--warning); font-style: italic; }

.caoplak {
  margin-top: var(--ruimte-7); padding-top: var(--ruimte-5);
  border-top: 1px solid var(--border-strong);
}
.caoplak h2 { font-size: var(--tekst-kaart); margin: 0 0 var(--ruimte-2); }
.caoplak textarea { font-family: var(--letter-vast); font-size: var(--tekst-m);
  white-space: pre; overflow-wrap: normal; overflow-x: auto; }

.voorbeeldvak {
  margin-top: var(--ruimte-4); padding: var(--ruimte-4);
  background: var(--vlak-zacht); border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
}
.voorbeeldvak > p { margin-top: 0; }
.voorbeeldfouten {
  margin: 0 0 var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--warning-bg); border: 1px solid var(--warning-border);
  border-radius: var(--radius-2); color: var(--warning);
}
.voorbeeldfouten li { margin-left: var(--ruimte-4); }