/* ═══════════════════════════════════════════════════════════════
   kunskapslage.css – Thevin
   Fliken Kunskapsläge i Elevresultat.

   Tokens ur global.css, inga egna färgvärden, golvet 12px.
   Grönt och rött betyder här över och under klassens nivå — samma
   innebörd som rätt och fel, inte en handlingsfärg. Bärnsten
   (--accent) används bara till sorteringsknapparna, som är handling.
   ═══════════════════════════════════════════════════════════════ */

.kl-topp      { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
                padding: 10px 14px; margin-bottom: 12px;
                background: var(--surface); border: 1px solid var(--border); }
.kl-kryss     { display: flex; align-items: center; gap: 8px; cursor: pointer;
                font-size: var(--t-liten); color: var(--text); }
.kl-kryss input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.kl-hjalp     { display: inline-block; margin-left: 5px; width: 14px; height: 14px;
                line-height: 14px; text-align: center; font-size: var(--t-meta);
                color: var(--muted2); border: 1px solid var(--border); cursor: help; }

.kl-info      { font-size: var(--t-liten); color: var(--muted2);
                line-height: 1.6; padding: 14px 4px; }
.kl-fel       { color: var(--wrong); }

/* ── Matrisen ─────────────────────────────────────────────────── */
.kl-wrap      { overflow-x: auto; border: 1px solid var(--border); }
.kl-tabell    { border-collapse: collapse; width: 100%; font-size: var(--t-liten); }
.kl-tabell th,
.kl-tabell td { border-bottom: 1px solid var(--border); padding: 0; }

.kl-tabell thead th { background: var(--surface2); text-align: left;
                      vertical-align: bottom; white-space: nowrap; }

/* Elevnamnet står still när man scrollar i sidled. Utan det tappar man
   vilken rad man läser så fort kursen har fler än fem kapitel. */
.kl-namnkol, .kl-namn { position: sticky; left: 0; z-index: 1;
                        background: var(--surface); }
.kl-tabell thead .kl-namnkol { background: var(--surface2); }
.kl-namn      { padding: 7px 12px; white-space: nowrap; color: var(--text);
                border-right: 1px solid var(--border); }

.kl-sortknapp { background: none; border: none; cursor: pointer;
                font-family: 'Sora', sans-serif; font-size: var(--t-meta);
                font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
                color: var(--muted); padding: 9px 12px; text-align: left;
                max-width: 170px; white-space: normal; line-height: 1.4; }
.kl-sortknapp:hover { color: var(--accent); }

.kl-cell      { text-align: center; padding: 7px 10px; white-space: nowrap;
                border-left: 1px solid var(--border); }
.kl-proc      { font-family: 'JetBrains Mono', monospace; font-size: var(--t-liten);
                font-weight: 600; display: inline-block; min-width: 34px; }
.kl-avv       { font-family: 'JetBrains Mono', monospace; font-size: var(--t-meta);
                color: var(--muted2); margin-left: 6px; }
.kl-n         { font-family: 'JetBrains Mono', monospace; font-size: var(--t-meta);
                color: var(--muted2); margin-left: 6px; }
.kl-streck    { color: var(--muted2); }

.kl-over      { background: var(--correct-dim); }
.kl-over   .kl-proc { color: var(--correct); }
.kl-under     { background: var(--wrong-dim); }
.kl-under  .kl-proc { color: var(--wrong); }
.kl-vantat    { background: var(--surface); }
.kl-tunt      { background: var(--surface2); }

/* Kurskolumnen längst till höger är en sammanfattning, inte ett kapitel. */
.kl-summakol,
.kl-summa     { border-left: 2px solid var(--border); }
.kl-summa     { font-weight: 600; }

.kl-klassrad  { background: var(--surface2); color: var(--muted2);
                font-family: 'JetBrains Mono', monospace; }
.kl-tabell tfoot td { border-top: 2px solid var(--border); border-bottom: none;
                      padding: 8px 10px; }
.kl-tabell tfoot .kl-namn { font-weight: 600; color: var(--text);
                            background: var(--surface2); }

/* ── Förklaringen ─────────────────────────────────────────────── */
.kl-forklaring { margin-top: 14px; padding: 12px 14px;
                 background: var(--surface); border: 1px solid var(--border); }
.kl-forklaring p { font-size: var(--t-meta); color: var(--muted2);
                   line-height: 1.7; margin: 0 0 8px; max-width: 70ch; }
.kl-forklaring p:last-child { margin-bottom: 0; }
.kl-forklaring strong { color: var(--text); }

.kl-legend    { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                font-size: var(--t-meta); color: var(--muted2); margin-bottom: 10px; }
.kl-prick     { width: 11px; height: 11px; display: inline-block;
                border: 1px solid var(--border); margin-left: 14px; }
.kl-legend .kl-prick:first-child { margin-left: 0; }
.kl-prick.kl-over   { background: var(--correct-dim); border-color: var(--correct); }
.kl-prick.kl-under  { background: var(--wrong-dim);   border-color: var(--wrong); }
.kl-prick.kl-vantat { background: var(--surface); }
.kl-prick.kl-tunt   { background: var(--surface2); }