/* "Artificial intelligence, layer by layer" (/leren/ai.html). Page styles on
   top of /net/net.css, which this page shares with netwerken.html and
   ai-in-kaart.html and must not edit. Only the concept list, the end-card Lab
   links and a few stage overlays live here. */

/* ---------------- the concept list under each stage ---------------- */
.lc{margin:0 0 26px;}
.lc-hd{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin-bottom:12px;}
.lc-h{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--navy); margin:0;}
.lc-hint{margin:0; font-size:14px; color:var(--muted);}
.lc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; align-items:start;}
.lc-c{background:#fff; border:1.5px solid var(--line); border-radius:14px; transition:border-color .16s, box-shadow .16s;}
#chapters > div:nth-child(even) .lc-c{background:var(--warm);}
.lc-c[open]{border-color:var(--accent); box-shadow:0 12px 24px -20px var(--accent);}
.lc-c summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 14px;
              font-size:15px; font-weight:600; color:var(--navy); line-height:1.3;}
.lc-c summary::-webkit-details-marker{display:none;}
.lc-c summary:hover .lc-t{color:var(--orange);}
.lc-c summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:12px;}
.lc-id{flex:0 0 auto; min-width:34px; font-size:12px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;
       border:1.5px solid var(--accent); border-radius:999px; padding:1px 7px; text-align:center;}
.lc-t{flex:1 1 auto; min-width:0;}
.lc-tag{flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap;}
.lc-tag.is-here{color:#fff; background:var(--accent); border-radius:999px; padding:2px 8px;}
.lc-tag.is-out{color:var(--accent); font-size:15px;}
.lc-b{padding:0 16px 14px 58px; font-size:14.5px; line-height:1.55; color:var(--ink);}
.lc-f{margin:6px 0 0;}
.lc-f b{display:block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:1px;}
.lc-classroom span{font-family:var(--font-display); font-size:16px; color:var(--navy);}
.lc-displaces span{color:var(--muted);}
.lc-go{display:inline-block; margin-top:10px; font-family:var(--font-body); font-size:13.5px; font-weight:700; color:var(--orange);
       background:none; border:none; padding:0; cursor:pointer; text-decoration:none; text-align:left; margin-right:16px;}
.lc-go:hover{text-decoration:underline; text-underline-offset:3px;}
@media (max-width:760px){
  .lc-grid{grid-template-columns:minmax(0,1fr);}
  .lc-b{padding-left:16px;}
}

/* ---------------- the end card's Lab links ---------------- */
.lend-lab{margin:22px 0 4px;}
.lend-h{font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#94A9C4; margin:0 0 10px;}
.lend-links{display:flex; flex-wrap:wrap; gap:8px;}
.lend-a{font-size:14px; font-weight:600; color:#fff; text-decoration:none; border:1.5px solid rgba(255,255,255,.22);
        border-radius:999px; padding:6px 14px; transition:background .16s, border-color .16s;}
.lend-a:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5);}

/* ---------------- overlay bits on the stages ---------------- */
.ov-pick{position:absolute; display:flex; flex-wrap:wrap; gap:6px;}
.ov-card a{color:#F6BC3C; font-weight:700; text-decoration:none;}
.ov-card a:hover{text-decoration:underline;}