/* ============================================================
   Leerlijnen — NT2-methodes uitgezet als lijnen over het ERK.
   Reuses the site tokens from main.css (--ink, --brand, --line,
   --surface, --muted). Light theme only, DIN font inherited.
   ============================================================ */

.ll{
    clear:both; /* the site's .intro floats left — start the chart below it */
    --ll-label-w:208px;
    --ll-pad:16px;
    --ll-track:#f1f4fa;
    --ll-grid:#ebeff7;
    /* vaardigheid-kleuren — afgestemd op het navy/cyaan palet */
    --c-alle:#3f568f;
    --c-schrijf:#0f8a8a;
    --c-lees:#c2751c;
    --c-woord:#b3456e;
    margin-top:1.25rem;
    color:var(--ink);
}

/* ---------- controls ---------- */
.ll-controls{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-bottom:14px}
.ll-control{display:flex;align-items:center;gap:10px}
.ll-control__label{
    font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);
}
.ll-seg{display:inline-flex;background:var(--ll-track);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.ll-seg button{
    border:0;background:transparent;color:var(--muted);
    font:inherit;font-size:13px;font-weight:700;line-height:1;
    padding:7px 15px;border-radius:999px;cursor:pointer;
    transition:background .15s,color .15s,box-shadow .15s;
}
.ll-seg button:hover{color:var(--ink)}
.ll-seg button[aria-pressed="true"]{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(42,62,119,.18)}
.ll-seg button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- card ---------- */
.ll-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 1px 2px rgba(37,50,70,.05);
    padding:22px 22px 24px;
    overflow-x:auto;
}
.ll-chart{min-width:560px}

/* ---------- axis ---------- */
.ll-axis{display:grid;grid-template-columns:var(--ll-label-w) 1fr;align-items:end;margin-bottom:6px}
.ll-axis__title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:8px}
.ll-plot{position:relative;margin:0 var(--ll-pad)}
.ll-ticks{position:relative;height:30px}
.ll-tick{position:absolute;top:0;bottom:0;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center}
.ll-tick .cefr{font-weight:800;font-size:14px;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:7px;min-width:30px;text-align:center;padding:3px 8px}

/* ---------- groups ---------- */
.ll-group{margin-top:14px}
.ll-group-head{display:flex;align-items:center;gap:9px;padding:6px 2px 8px}
.ll-swatch{width:11px;height:11px;border-radius:4px;flex:none}
.ll-group-name{font-size:13px;font-weight:700;color:var(--ink)}
.ll-group-count{font-size:12px;color:var(--muted);font-weight:600}

/* ---------- row ---------- */
.ll-row{display:grid;grid-template-columns:var(--ll-label-w) 1fr;align-items:center;border-radius:10px;padding:7px 0;transition:background .15s}
.ll-row:hover{background:var(--brand-tint)}
.ll-row .ll-label{padding-right:14px;min-width:0}
.ll-title{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;line-height:1.25}
a.ll-title:hover .ll-name{color:var(--brand);text-decoration:underline}
.ll-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-age{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;font-weight:600;color:var(--muted)}
.ll-age svg{width:13px;height:13px;opacity:.85;flex:none}

/* ---------- the line ---------- */
.ll-track{position:relative;height:30px}
.ll-gridline{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--ll-grid);transform:translateX(-50%)}
.ll-line{position:absolute;top:50%;height:9px;border-radius:999px;transform:translateY(-50%);background:var(--clr);box-shadow:0 1px 3px color-mix(in srgb,var(--clr) 35%,transparent);transition:left .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1)}
/* A "to" that is a range (A1-A2) fades out instead of ending on a dot. */
.ll-line.is-soft{box-shadow:none;-webkit-mask-image:linear-gradient(to right,#000 55%,transparent 100%);mask-image:linear-gradient(to right,#000 55%,transparent 100%)}
.ll-dot{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);background:var(--clr);border:3px solid var(--clr);transition:left .45s cubic-bezier(.4,0,.2,1);z-index:2;background:#fff}

/* ---------- legend ---------- */
.ll-legend{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ll-legend h3{width:100%;margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ll-legend .ll-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink)}
.ll-legend .ll-linekey{width:22px;height:8px;border-radius:999px;background:var(--clr)}

.ll-empty{margin:18px 2px 4px;color:var(--muted);font-size:13px}
.ll-edit{margin-top:14px;font-size:12px}

@media (max-width:640px){
    .ll{--ll-label-w:132px;--ll-pad:12px}
    .ll-title{font-size:12.5px}
    .ll-tick .cefr{font-size:12px;min-width:26px}
}