/* Shared course-mode additions: search, progress, reading time, breadcrumbs,
   self-check / quiz / exam-trap components, print stylesheet, glossary. */

.topic-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;background:var(--chip);color:var(--accent2);flex:0 0 auto;margin-right:2px;}
.topic-icon svg{width:16px;height:16px;}
section.card h2{flex-wrap:wrap;}

.why-how .block:first-child{border-left:3px solid var(--accent);}
.why-how .block:last-child{border-left:3px solid var(--accent2);}
.why-how .block{padding-left:13px;}

.toc-check{display:flex;align-items:center;gap:6px;padding:2px 4px;border-radius:6px;}
.toc-check:hover{background:var(--chip);}
.toc-check input{width:13px;height:13px;accent-color:var(--pro);flex:0 0 auto;}
.toc-check a{padding:4px 0;flex:1;}
.toc-check a:hover{background:none;}

.breadcrumb{font-size:.78rem;color:var(--sub);margin-bottom:14px;}
.breadcrumb a{color:var(--sub);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent2);text-decoration:underline;}

.reading-time{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;color:var(--sub);
  margin-top:8px;}
.reading-time::before{content:"⏱";}

/* --- search --- */
.search-wrap{position:relative;margin-bottom:16px;}
.search-wrap input[type="search"]{width:100%;padding:8px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:.85rem;}
.search-wrap input[type="search"]:focus{outline:2px solid var(--accent2);outline-offset:1px;}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;max-height:340px;overflow-y:auto;z-index:20;
  box-shadow:0 8px 24px rgba(0,0,0,.12);display:none;}
.search-results.open{display:block;}
.search-results a{display:block;padding:8px 10px;font-size:.82rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);}
.search-results a:last-child{border-bottom:none;}
.search-results a:hover{background:var(--chip);}
.search-results .sr-group{color:var(--sub);font-size:.72rem;}
.search-empty{padding:8px 10px;font-size:.8rem;color:var(--sub);}

/* --- progress --- */
.progress-summary{font-size:.72rem;color:var(--sub);margin:0 0 10px;padding:0 8px;}
.progress-bar{height:5px;border-radius:3px;background:var(--line);margin-top:4px;overflow:hidden;}
.progress-bar > span{display:block;height:100%;background:var(--accent2);width:0%;
  transition:width .2s ease;}
.section-check{position:absolute;top:26px;right:28px;display:flex;align-items:center;gap:6px;
  font-size:.72rem;color:var(--sub);user-select:none;}
.section-check input{width:15px;height:15px;accent-color:var(--pro);}
section.card{position:relative;}
.index-card .progress-bar{margin-top:10px;}
.index-card .progress-label{font-size:.7rem;color:var(--sub);margin-top:4px;display:block;}

/* --- self-check --- */
details.selfcheck{background:var(--code-bg);border-radius:10px;padding:2px 16px;margin-top:16px;}
details.selfcheck summary{cursor:pointer;padding:12px 0;font-size:.85rem;font-weight:600;
  color:var(--accent2);list-style:none;}
details.selfcheck summary::-webkit-details-marker{display:none;}
details.selfcheck summary::before{content:"▸ ";}
details.selfcheck[open] summary::before{content:"▾ ";}
details.selfcheck .sc-q{font-size:.9rem;margin-bottom:8px;}
details.selfcheck .sc-a{border-top:1px solid var(--line);padding:10px 0 14px;font-size:.88rem;
  color:var(--sub);}
details.selfcheck .sc-a strong{color:var(--ink);}

/* --- exam trap callout --- */
.trap{border-left:3px solid var(--con);background:var(--con-bg);padding:10px 14px;
  border-radius:6px;font-size:.88rem;margin-top:14px;}
.trap h4{margin:0 0 4px;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--con);}

/* --- prerequisites --- */
.prereq{font-size:.82rem;color:var(--sub);margin:0 0 20px;padding:8px 14px;
  border:1px dashed var(--line);border-radius:8px;background:var(--panel);}
.prereq strong{color:var(--ink);}

/* --- quiz --- */
.quiz{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;margin:36px 0;}
.quiz h2{margin-top:0;font-size:1.2rem;}
.quiz-q{margin:18px 0;padding-bottom:16px;border-bottom:1px solid var(--line);}
.quiz-q:last-of-type{border-bottom:none;}
.quiz-q p.stem{font-size:.92rem;margin:0 0 8px;font-weight:600;}
.quiz-q label{display:block;font-size:.88rem;padding:6px 10px;border-radius:6px;cursor:pointer;}
.quiz-q label:hover{background:var(--chip);}
.quiz-q label input{margin-right:8px;}
.quiz-q .qexplain{display:none;font-size:.82rem;color:var(--sub);margin-top:6px;
  padding:8px 10px;background:var(--code-bg);border-radius:6px;}
.quiz-q.answered .qexplain{display:block;}
.quiz-q.correct label.chosen{background:var(--pro-bg);}
.quiz-q.incorrect label.chosen{background:var(--con-bg);}
.quiz-q.incorrect label.right-answer{background:var(--pro-bg);}
.quiz-submit{background:var(--accent2);color:#fff;border:none;border-radius:8px;
  padding:10px 20px;font-size:.88rem;font-weight:600;cursor:pointer;margin-top:8px;}
.quiz-submit:hover{opacity:.9;}
.quiz-score{font-size:.9rem;font-weight:600;margin-top:14px;display:none;}
.quiz-score.shown{display:block;}

/* --- glossary --- */
.glossary-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px;}
.glossary-term{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;scroll-margin-top:20px;}
.glossary-term dt{font-weight:700;font-size:1rem;margin-bottom:4px;}
.glossary-term dd{margin:0;color:var(--sub);font-size:.9rem;}
.glossary-term dd a{font-size:.82rem;}
.az-jump{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 24px;}
.az-jump a{background:var(--chip);border-radius:6px;padding:4px 10px;font-size:.8rem;
  text-decoration:none;color:var(--ink);}
.az-jump a:hover{background:var(--accent2);color:#fff;}

/* --- print --- */
@media print{
  nav.toc, .pagenav, .search-wrap, .quiz-submit, footer, .section-check{display:none!important;}
  .layout{display:block;}
  main{max-width:100%;padding:0;margin:0;}
  section.card{border:1px solid #ccc;break-inside:avoid;box-shadow:none;}
  body{background:#fff;}
  a{color:#000;text-decoration:underline;}
  details.selfcheck{border:1px solid #ccc;}
  details.selfcheck:not([open]) .sc-a{display:block!important;}
}