/* ── Sidebar ── */
.sidebar-top { padding: 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.search-box { position: relative; }
.search-box input { width: 100%; padding: 8px 28px 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.search-box button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; }
.progress-block { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }
.progress-bar { height: 6px; background: var(--border); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }

.topic > summary, .assessment-panel > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; list-style: none; border-bottom: 1px solid var(--border); }
.topic > summary::-webkit-details-marker, .assessment-panel > summary::-webkit-details-marker { display: none; }
.topic-badge { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.topic-title { flex: 1; font-size: 0.9rem; line-height: 1.3; }
.slt-pill { flex: none; font-size: 0.7rem; padding: 2px 6px; border-radius: 10px; background: var(--bg); color: var(--text-muted); font-weight: 400; }
.sub-list, .assess-list { list-style: none; margin: 0; padding: 0; }
.sub-item, .assess-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 20px; cursor: pointer; font-size: 0.85rem; }
.sub-item:hover, .assess-item:hover { background: var(--bg); }
.sub-item.active, .assess-item.active { background: var(--primary); color: var(--on-primary); }
.sub-item[hidden], .topic[hidden] { display: none; }
.sub-label { flex: 1; }
.tick { color: var(--accent); font-weight: 700; }
.assess-item { flex-direction: column; align-items: flex-start; gap: 0; padding-left: 20px; }
.assess-item span { font-size: 0.75rem; opacity: 0.8; }

.sidebar-footer { padding: 12px; }
.sidebar-footer button { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; }
.sidebar-footer button:hover { border-color: var(--comparison); color: var(--comparison); }
.sub-item.active .tick { color: var(--on-primary); }

.clo-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.clo-bg-1 { background: var(--clo1); }
.clo-bg-2 { background: var(--clo2); }
.clo-bg-3 { background: var(--clo3); }

/* ── Badges & tags ── */
.clo-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; color: var(--on-primary); }
.clo-1 { background: var(--clo1); }
.clo-2 { background: var(--clo2); }
.clo-3 { background: var(--clo3); }
.type-tag { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: var(--on-primary); background: var(--concept); }
.type-operation { background: var(--operation); }
.type-application { background: var(--application); }
.type-comparison { background: var(--comparison); }
.type-sustainability { background: var(--sustain); }
.type-summary { background: var(--summary); }
.type-title, .type-overview { background: var(--primary); }
:root[data-theme="dark"] .type-sustainability { color: var(--bg-dark); }
:root[data-theme="dark"] .type-title, :root[data-theme="dark"] .type-overview { background: var(--clo1); }

/* ── Slide ── */
.slide { max-width: 1000px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px 32px; }
.breadcrumb { font-size: 0.8rem; color: var(--text-muted); }
.slide-meta { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.slide-title { margin: 4px 0 16px; color: var(--primary); line-height: 1.25; }
:root[data-theme="dark"] .slide-title { color: var(--text); }
.slide-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.items { padding-left: 20px; margin: 0 0 12px; }
.items li { margin-bottom: 10px; }
.draft-tag { font-size: 0.65rem; padding: 1px 6px; border-radius: 4px; background: var(--clo2); color: var(--on-primary); vertical-align: middle; }
.draft-note { font-size: 0.85rem; padding: 8px 12px; border-left: 4px solid var(--clo2); background: color-mix(in srgb, var(--clo2) 12%, var(--surface)); margin: 8px 0; }
.context-line { color: var(--text-muted); font-style: italic; }

.diagram-placeholder { min-height: 180px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border: 2px dashed var(--border); border-radius: 8px; background: var(--bg); color: var(--text-muted); font-size: 0.9rem; margin: 12px 0; }

/* ── SVG diagrams ── */
.diagram { margin: 12px 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 4px; }
.slide-cols:has(.diagram) { grid-template-columns: 1fr 1.25fr; }
.slide-visual .diagram:first-child { margin-top: 0; }
.slide-body > .diagram { max-width: 640px; margin-left: auto; margin-right: auto; }
.dg-t { fill: var(--text); font: 12px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.dg-s { font-size: 10.5px; }
.dg-halo { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.dg-b { font-weight: 700; }
.dg-onlight { fill: var(--bg-dark); }
.dg-box { fill: var(--surface); stroke: var(--text-muted); stroke-width: 1.5; }
.dg-a { fill: color-mix(in srgb, var(--clo1) 20%, var(--surface)); stroke: var(--clo1); }
.dg-g { fill: color-mix(in srgb, var(--accent) 20%, var(--surface)); stroke: var(--accent); }
.dg-o { fill: color-mix(in srgb, var(--clo2) 25%, var(--surface)); stroke: var(--clo2); }
.dg-r { fill: color-mix(in srgb, var(--comparison) 18%, var(--surface)); stroke: var(--comparison); }
.dg-p { fill: color-mix(in srgb, var(--clo3) 20%, var(--surface)); stroke: var(--clo3); }
.dg-k { fill: color-mix(in srgb, var(--text-muted) 22%, var(--surface)); stroke: var(--text-muted); }
.dg-circ { fill-opacity: 0.35; stroke-width: 1.5; }
.dg-dash { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg-dash-l { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.dg-line { stroke: var(--text-muted); stroke-width: 1.2; fill: none; }
.dg-axis { stroke: var(--text); stroke-width: 1.5; }
.dg-curve { fill: none; stroke: var(--clo1); stroke-width: 2.5; }
.dg-arrow { stroke: var(--text); stroke-width: 1.6; fill: none; marker-end: url(#dg-arr); }
.dg-head { fill: var(--text); }
.dg-ray { stroke: var(--clo2); stroke-width: 2; }
.dg-ray-l { stroke: var(--clo2); stroke-width: 1.2; stroke-dasharray: 3 3; }
.dg-sun { fill: var(--clo2); }
.dg-water { fill: color-mix(in srgb, var(--clo1) 28%, var(--surface)); stroke: var(--clo1); stroke-width: 1; }
.dg-fill { stroke: none; }
.dg-f-coal { fill: color-mix(in srgb, var(--text) 80%, var(--surface)); }
.dg-ring { fill: none; stroke: var(--c); }
.dg-sw { fill: var(--c); }
.dg-c-oil { --c: var(--comparison); }
.dg-c-coal { --c: color-mix(in srgb, var(--text) 80%, var(--surface)); }
.dg-c-gas { --c: var(--operation); }
.dg-c-nf { --c: var(--accent); }
.dg-c-hydro { --c: var(--clo1); }
.dg-c-nuc { --c: var(--clo3); }
.dg-c-wind { --c: var(--application); }
.dg-c-solar { --c: var(--clo2); }
.dg-c-oth { --c: var(--border); }
.dg-f-gas { fill: var(--operation); }
.dg-f-hydro { fill: var(--clo1); }
.dg-f-re { fill: var(--accent); }
.dg-f-solar { fill: var(--clo2); }
.dg-f-oth { fill: var(--text-muted); }
.dg-f-tower { fill: color-mix(in srgb, var(--text-muted) 45%, var(--surface)); stroke: var(--text-muted); stroke-width: 1; }
.dg-f-found { fill: color-mix(in srgb, var(--text-muted) 55%, var(--surface)); }
.dg-blade { stroke: var(--text); stroke-width: 6; stroke-linecap: round; fill: none; }
.dg-tower { stroke: var(--text-muted); stroke-width: 6; }
.dg-pen { stroke: var(--text-muted); stroke-width: 7; fill: none; }
.dg-mirror { stroke: var(--clo1); stroke-width: 5; stroke-linecap: round; }
.dg-wire { stroke: var(--text); stroke-width: 1.8; }
.source-note { font-size: 0.75rem; color: var(--text-muted); margin: 8px 0 0; }

.flowchart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.flow-box { padding: 8px 14px; border-radius: 6px; border: 2px solid var(--operation); background: color-mix(in srgb, var(--operation) 10%, var(--surface)); font-size: 0.85rem; font-weight: 600; }
.flow-arrow { color: var(--operation); font-weight: 700; }

.table-scroll { overflow-x: auto; max-width: 100%; }
.slide-text, .slide-body { min-width: 0; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
.app-table thead th, .matrix-table thead th { background: var(--primary); color: var(--on-primary); }
.comp-table thead th:first-child { background: var(--accent); color: var(--on-primary); }
.comp-table thead th:last-child { background: var(--comparison); color: var(--on-primary); }
.matrix-table tbody th, .app-table tbody th { background: var(--bg); width: 140px; }

.title-card { text-align: center; padding: 24px 0; }
.title-clos { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.subtopic-list { display: inline-block; text-align: left; line-height: 2; }
.mind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mind-box { padding: 12px; border: 1px solid var(--border); border-left: 6px solid var(--clo1); border-radius: 6px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.mind-box span { font-size: 0.85rem; color: var(--text-muted); }
.clo-border-2 { border-left-color: var(--clo2); }
.clo-border-3 { border-left-color: var(--clo3); }

.callout { padding: 14px 18px; border-radius: 8px; margin: 12px 0; border-left: 6px solid; }
.callout h3 { margin: 0 0 6px; }
.callout-green { border-color: var(--sustain); background: color-mix(in srgb, var(--sustain) 12%, var(--surface)); }
.callout-purple { border-color: var(--summary); background: color-mix(in srgb, var(--summary) 12%, var(--surface)); }

.slide-footer { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted); }
.slide-nav { position: sticky; bottom: 0; z-index: 50; max-width: 1000px; margin: 16px auto 0; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.slide-nav button { padding: 8px 18px; border: 0; border-radius: 6px; background: var(--primary); color: var(--on-primary); font: inherit; cursor: pointer; }
.slide-nav button:disabled { opacity: 0.4; cursor: default; }
.slide-counter { color: var(--text-muted); font-size: 0.9rem; }

.assess-card { max-width: 800px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px 28px; }
.assess-card small { color: var(--accent); }

@media (max-width: 768px) {
  .slide-cols { grid-template-columns: 1fr; }
  .slide { padding: 18px 16px; }
}

.slide-links ul { list-style: none; margin: 0; padding: 0 0 4px; }
.slide-link { padding: 5px 12px 5px 38px; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; }
.slide-link:hover { background: var(--bg); color: var(--text); }
.slide-link.current { color: var(--accent); font-weight: 700; }
@media print { .slide-links { display: none; } }

.type-activity { background: var(--clo3); }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.act-card { border: 1px solid var(--border); border-top: 5px solid var(--clo1); border-radius: 8px; padding: 14px 18px; background: var(--bg); }
.act-group { border-top-color: var(--clo3); }
.act-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.act-badge { font-size: 0.65rem; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px; color: var(--on-primary); background: var(--clo1); vertical-align: middle; }
.act-group .act-badge { background: var(--clo3); }
.act-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--text-muted); margin: 0 0 8px; }
.act-card ol { padding-left: 20px; margin: 0 0 10px; }
.act-card li { margin-bottom: 6px; }
.act-answer { font-size: 0.85rem; border-top: 1px dashed var(--border); padding-top: 8px; }
.act-answer summary { cursor: pointer; font-weight: 600; color: var(--text-muted); }
.act-links ul { margin: 0; padding-left: 20px; }
.act-links li { margin-bottom: 4px; }
@media (max-width: 768px) { .act-grid { grid-template-columns: 1fr; } }

/* ── Introduction slide ── */
.type-intro { background: var(--primary-2); }
.slide-intro { --intro-bg: #07111c; background: linear-gradient(120deg, var(--bg-dark) 0%, var(--intro-bg) 70%); border-color: var(--primary-2); color: var(--on-primary); }
.slide-intro .breadcrumb, .slide-intro .slide-footer { color: var(--text-muted); border-color: var(--primary-2); }
.slide-intro .slide-title { color: var(--gold); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; }
.intro-card { display: grid; grid-template-columns: 1fr 250px; gap: 20px; align-items: end; }
.intro-name { margin: 0; font-size: 2rem; line-height: 1.15; }
.intro-role { font-family: ui-monospace, Consolas, monospace; color: var(--gold-soft); margin: 4px 0 14px; }
.intro-bio { line-height: 1.65; margin: 0 0 14px; }
.intro-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 14px; padding: 0; }
.intro-chips li { font-size: 0.75rem; padding: 4px 12px; border: 1px solid var(--primary-2); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--gold-soft); }
.intro-mail { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; margin: 0 0 12px; }
.intro-mail a { color: var(--gold); }
.intro-course { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 0.8rem; }
.intro-course span { padding-right: 10px; border-right: 1px solid var(--primary-2); }
.intro-course span:last-child { border-right: 0; }
.intro-photo { width: 100%; max-height: 520px; object-fit: cover; object-position: top; align-self: stretch; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 78%, transparent 100%); mask-composite: intersect; }
@media (max-width: 768px) {
  .intro-card { grid-template-columns: 1fr; }
  .intro-photo { max-height: 340px; width: 60%; margin: 0 auto; }
  .intro-name { font-size: 1.5rem; }
}

.intro-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.intro-item { padding-left: 12px; font-weight: 600; }
.intro-item[hidden] { display: none; }