/* ITPlugg course modules */
/* ===== v19.4: Programmering 1 som interaktiv webbkurs ===== */
.programming-course-hub{margin:0 0 18px;border:1px solid rgba(51,214,192,.32);border-radius:18px;background:linear-gradient(145deg,var(--bg2),rgba(51,214,192,.055));overflow:hidden}
.prog-course-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:18px;border-bottom:1px solid var(--line)}
.prog-course-head h3{margin:3px 0 5px;font-size:21px}.prog-course-head p{margin:0;color:var(--mut);max-width:68ch}.prog-course-count{font:11px var(--m);color:var(--teal);white-space:nowrap;border:1px solid var(--teal-d);border-radius:999px;padding:6px 10px}
.prog-moment-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.prog-moment-btn{border:1px solid var(--line);background:var(--bg);color:var(--txt);border-radius:11px;padding:10px;text-align:left;cursor:pointer;font:inherit}.prog-moment-btn:hover{border-color:var(--teal-d)}.prog-moment-btn[data-on="1"]{border-color:var(--teal);background:rgba(51,214,192,.09)}.prog-moment-btn span{display:block;font:10px var(--m);color:var(--teal);margin-bottom:3px}.prog-moment-btn b{font-size:12.5px;line-height:1.3}
.prog-moment-summary{padding:15px 18px 5px}.prog-moment-summary h3{margin:0 0 5px}.prog-moment-summary p{margin:0;color:var(--mut);font-size:13.5px}.prog-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}.prog-goal{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:12.5px}.prog-goal i{font-style:normal;color:var(--teal)}
.prog-lesson-list{display:grid;gap:10px;padding:12px 18px 18px}.prog-lesson{margin:0;padding:0;border-radius:13px;overflow:hidden}.prog-lesson summary{padding:14px 15px;display:flex;justify-content:space-between;gap:12px;align-items:center}.prog-lesson summary:before{display:none}.prog-lesson-title small{display:block;color:var(--mut);font-weight:400;font-size:11.5px;margin-top:3px}.prog-lesson-state{font:10px var(--m);color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 7px;white-space:nowrap}.prog-lesson[data-done="1"] .prog-lesson-state{color:var(--teal);border-color:var(--teal-d)}
.prog-lesson-body{padding:0 15px 15px;border-top:1px solid var(--line)}.prog-lesson-intro{font-size:14.5px}.prog-key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}.prog-key{border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:12.5px;background:rgba(255,255,255,.015)}
.prog-code-shell{margin:13px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#071522}.light .prog-code-shell{background:#eaf0f5}.prog-code-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);font:11px var(--m);color:var(--mut)}.prog-copy{padding:5px 8px;font-size:11px}.prog-code{margin:0;padding:13px;white-space:pre-wrap;overflow:auto;font:13px/1.55 var(--m);color:var(--txt)}
.prog-walkthrough{counter-reset:walk;display:grid;gap:7px;margin:12px 0}.prog-walkthrough div{counter-increment:walk;display:flex;gap:9px;font-size:13px}.prog-walkthrough div:before{content:counter(walk);width:21px;height:21px;flex:0 0 auto;border-radius:7px;background:rgba(51,214,192,.12);color:var(--teal);display:grid;place-items:center;font:10px var(--m)}
.prog-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.prog-note{border-radius:10px;padding:10px 11px;font-size:13px}.prog-note.mistake{border:1px solid rgba(242,178,51,.38);background:rgba(242,178,51,.07)}.prog-note.task{border:1px solid rgba(51,214,192,.34);background:rgba(51,214,192,.06)}.prog-note b{display:block;margin-bottom:3px}
.prog-lesson-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.prog-overview-card{margin-top:14px;padding:14px;border:1px solid rgba(51,214,192,.3);border-radius:14px;background:rgba(51,214,192,.055)}.prog-overview-card h3{margin:0 0 4px}.prog-overview-card p{margin:0 0 10px;color:var(--mut);font-size:13px}.prog-overview-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.prog-course-head{display:block}.prog-course-count{display:inline-block;margin-top:10px}.prog-moment-tabs{grid-template-columns:1fr 1fr}.prog-goals,.prog-key-grid,.prog-note-grid{grid-template-columns:1fr}}
@media(max-width:430px){.prog-moment-tabs{grid-template-columns:1fr}.prog-lesson-list,.prog-moment-tabs,.prog-moment-summary{padding-left:12px;padding-right:12px}.prog-course-head{padding:15px 12px}.prog-lesson summary{align-items:flex-start}.prog-lesson-state{font-size:9px}}

.dkt-level-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.dkt-level-box{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.025)}.dkt-level-box h4{margin:0 0 8px;font-size:13px}.dkt-level-box.level3{border-color:rgba(242,178,51,.42);background:rgba(242,178,51,.055)}.dkt-level-box ul{margin:0;padding-left:18px;color:var(--mut);font-size:13px}.dkt-level-box li+li{margin-top:5px}.dkt-example{margin:12px 0;padding:12px;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;background:rgba(51,214,192,.055);font-size:13.5px}.dkt-example b{display:block;margin-bottom:4px}.dkt-block-label{font:10px var(--m);letter-spacing:.1em;color:var(--amber);text-transform:uppercase}
@media(max-width:760px){.dkt-level-grid{grid-template-columns:1fr}}