/* kredits-pupildata.css — icon chips and SEN level colours for pupil data.
   Categories and colours follow the school seating tool the icons come from. */
.kpd-chip {
  width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; line-height: 1;
}
.kpd-chip-fsm     { background: var(--pd-fsm); color: var(--pd-fsm-text); }
.kpd-chip-medical { background: var(--pd-medical); color: var(--pd-medical-text); }
.kpd-chip-allergy { background: var(--pd-allergy); color: var(--pd-allergy-text); }
.kpd-chip-exam    { background: var(--pd-exam); color: var(--pd-exam-text); }
.kpd-chip-eal     { background: var(--pd-eal); color: var(--pd-eal-text); }
.kpd-chip-senneed { background: var(--pd-sen); color: var(--pd-sen-text); }
.kpd-chip-learner { background: var(--pd-learner); color: var(--pd-learner-text); }
.kpd-chip-note    { background: var(--pd-note); color: var(--pd-note-text); }
.kpd-chip .k-icon { width: 12px; height: 12px; stroke-width: 2; }
.kpd-key .kpd-chip .k-icon { width: 11px; height: 11px; }
.kpd-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.kpd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* SEN level colours the whole card: left bar + tint */
.kpd-lvl-1 { border-color: var(--pd-level-1-border) !important; border-left: 5px solid var(--pd-level-1) !important; background: var(--pd-level-1-tint) !important; }
.kpd-lvl-2 { border-color: var(--pd-level-2-border) !important; border-left: 5px solid var(--pd-level-2) !important; background: var(--pd-level-2-tint) !important; }
.kpd-lvl-3 { border-color: var(--pd-level-3-border) !important; border-left: 5px solid var(--pd-level-3) !important; background: var(--pd-level-3-tint) !important; }
.kpd-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.kpd-swatch-1 { background: var(--pd-level-1); } .kpd-swatch-2 { background: var(--pd-level-2); } .kpd-swatch-3 { background: var(--pd-level-3); }

.kpd-key { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 11px; color: var(--text2); }
.kpd-key-item { display: inline-flex; align-items: center; gap: 5px; }
.kpd-key .kpd-chip { width: 16px; height: 16px; font-size: 8.5px; }