/* "Teaching it without a screen" (/leren/classroom-practice.html). Page styles
   on top of /net/net.css, which is shared and must not be edited. */

/* "Say it in class" under each stage */
.cp-say{margin:0 0 14px; padding:16px 22px 18px; border-radius:18px; background:#fff; border-left:4px solid var(--accent);}
#chapters > div:nth-child(even) .cp-say{background:var(--warm);}
.cp-say-k{display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px;}
.cp-say p{margin:0; font-family:var(--font-display); font-size:19px; line-height:1.4; color:var(--navy);}

/* the closing section: three ways to say it, check yourself */
#cp-close{padding-top:80px;}
.cpc-h{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.2vw,36px); color:var(--navy); margin:0 0 6px;}
.cpc-sub{margin:0 0 18px; color:var(--muted); max-width:60ch;}
.cpc-say{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:46px;}
.cpc-say > div{background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:16px 20px;}
.cpc-say b{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--orange); border-radius:999px; padding:2px 10px; margin-bottom:8px;}
.cpc-say p{margin:0; font-family:var(--font-display); font-size:17.5px; line-height:1.45; color:var(--navy);}
.cpc-check{display:flex; flex-direction:column; gap:10px; margin-bottom:46px;}
.cpc-q{background:#fff; border:1.5px solid var(--line); border-radius:18px; transition:border-color .16s, box-shadow .16s;}
.cpc-q[open]{border-color:var(--teal); box-shadow:0 14px 26px -22px var(--teal);}
.cpc-q summary{list-style:none; cursor:pointer; display:flex; gap:14px; align-items:flex-start; padding:16px 20px; font-weight:600; color:var(--navy); font-size:16.5px; line-height:1.4;}
.cpc-q summary::-webkit-details-marker{display:none;}
.cpc-q summary:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:16px;}
.cpc-n{flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; background:var(--teal); color:#fff;}
.cpc-rev{margin-left:auto; flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--teal); white-space:nowrap; padding-top:4px;}
.cpc-q[open] .cpc-rev{visibility:hidden;}
.cpc-a{margin:0; padding:0 20px 18px 62px; font-size:15.5px; line-height:1.6; color:var(--ink);}

/* materials inside the navy end card */
.lend-lab{margin:22px 0 6px;}
.lend-h{font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#94A9C4; margin:16px 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);}
.lend-a .id{color:#F6BC3C; font-weight:700; margin-right:6px;}
.lend-a .en{color:#8FA6C2; font-weight:500; margin-left:6px; font-size:12px;}

/* links dropped onto a stage */
.ov-links{position:absolute; display:flex; flex-direction:column; gap:8px;}
.ov-links a{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#052950; background:#F6BC3C;
            border-radius:999px; padding:8px 16px; text-decoration:none; box-shadow:0 10px 22px -12px #F6BC3C; width:max-content; max-width:100%;}
.ov-links a.sec{background:rgba(255,255,255,.1); color:#fff; box-shadow:none; border:1.5px solid rgba(255,255,255,.3);}
.ov-links a:hover{filter:brightness(1.08);}
.ov-links.is-off{display:none;}

@media (max-width:760px){
  .cpc-say{grid-template-columns:minmax(0,1fr);}
  .cpc-a{padding-left:20px;}
  .cpc-rev{display:none;}
}