/* «Карта лекции»: full-screen topic tree above the page, the player bar stays usable below it. */
:root {
  --kind-story: #c59d79;
  --kind-argument: #aeb894;
  --kind-question: #8db2c7;
  --kind-reading: #c79ab5;
  --kind-conclusion: #e0c46e;
  --kind-aside: #8f877b;
  --map-link: #c59d79;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --kind-story: #8a5a2c;
    --kind-argument: #55663b;
    --kind-question: #2f6585;
    --kind-reading: #84466a;
    --kind-conclusion: #866b10;
    --kind-aside: #7b7266;
    --map-link: #85562a;
  }
}
:root[data-theme="light"] {
  --kind-story: #8a5a2c;
  --kind-argument: #55663b;
  --kind-question: #2f6585;
  --kind-reading: #84466a;
  --kind-conclusion: #866b10;
  --kind-aside: #7b7266;
  --map-link: #85562a;
}

.map-launch { display: inline-flex; align-items: center; gap: .55rem; margin: 1.5rem auto 0; padding: .45rem 0 .3rem; border: 0; border-bottom: 1px solid var(--accent); background: none; color: var(--accent); font: 400 .92rem / 1.3 var(--font-ui); letter-spacing: .03em; cursor: pointer; transition: color .2s, border-color .2s; }
.map-launch:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.map-launch .ui-icon { width: 1.15rem; height: 1.15rem; }
.player-head:has(.map-launch) { text-align: center; }
.player-head .map-launch { display: flex; width: max-content; }

html.map-open, html.map-open body { overflow: hidden; }
.lecture-map { position: fixed; inset: 0 0 var(--map-dock, 0px) 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--text); }
.lecture-map[hidden] { display: none; }
.lecture-map__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: calc(1.1rem + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px)); padding-inline: max(16px, calc((100% - 76rem) / 2)); border-bottom: 1px solid var(--line); }
.lecture-map__heading { min-width: 0; }
.lecture-map__eyebrow { margin: 0 0 .35rem; color: var(--accent); font: 500 .72rem / 1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.lecture-map__title { margin: 0; font: italic 300 clamp(1.35rem, 2.6vw, 2rem) / 1.2 var(--font-display); text-wrap: balance; }
.lecture-map__tools { display: flex; align-items: center; gap: .3rem 1.1rem; flex-wrap: wrap; }
.lecture-map__tools button { padding: .35rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); font: italic 300 .98rem / 1 var(--font-display); cursor: pointer; }
.lecture-map__tools button:hover { color: var(--accent-bright); border-bottom-color: var(--accent); }
.lecture-map__tools .lecture-map__close { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-left: .4rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); }
.lecture-map__tools .lecture-map__close:hover { border-color: var(--accent); }

.lecture-map__stage { position: relative; min-height: 0; overflow: hidden; }
.lecture-map__svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.lecture-map__svg.is-panning { cursor: grabbing; }
.lecture-map__hint { position: absolute; right: max(16px, calc((100% - 76rem) / 2)); bottom: 1rem; margin: 0; color: var(--dim); font: italic 300 .84rem / 1.4 var(--font-display); text-align: right; pointer-events: none; transition: opacity .4s; }
.lecture-map__hint.is-gone { opacity: 0; }
.lecture-map__legend { position: absolute; left: max(16px, calc((100% - 76rem) / 2)); bottom: 1rem; display: flex; flex-wrap: wrap; gap: .35rem 1rem; max-width: 52%; margin: 0; padding: 0; list-style: none; color: var(--muted); font: 400 .76rem / 1.3 var(--font-ui); pointer-events: none; }
.lecture-map__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.kind-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--kind-aside); }
.legend-link { display: inline-block; width: 1.4rem; border-top: 1px dashed var(--map-link); }

/* nodes */
.map-node { cursor: pointer; outline: none; }
.map-node__hit { fill: transparent; }
.map-node__dot { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.map-node.has-children .map-node__dot { fill: var(--line-strong); }
.map-node.has-children.is-open .map-node__dot { fill: var(--bg); }
.map-node__label { fill: var(--muted-strong); font: 400 14px var(--font-ui); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; transition: fill .2s; }
.map-node__time { fill: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.map-node__more { fill: var(--accent); font: italic 300 12.5px var(--font-display); }
.map-node.depth-0 .map-node__label { fill: var(--text); font: italic 400 21px var(--font-display); }
.map-node.depth-0 .map-node__dot { fill: var(--accent); stroke: var(--accent); }
.map-node.depth-1 .map-node__label { fill: var(--text); font: 400 16.5px var(--font-display); }
.map-node.depth-1 .map-node__time { font-family: var(--font-ui); }
.map-node.depth-3 .map-node__label { fill: var(--muted); font-size: 12.5px; font-style: italic; }
.map-node.depth-3 .map-node__dot { fill: var(--line-strong); stroke: none; }
.map-node.depth-2 .map-node__dot { stroke: var(--kind-color, var(--line-strong)); stroke-width: 1.6; }
.map-node.depth-2.has-children .map-node__dot, .map-node.depth-2 .map-node__dot { fill: var(--kind-color); }
.map-node.depth-2.is-open .map-node__dot { fill: var(--bg); }
.map-node:hover .map-node__label, .map-node:focus-visible .map-node__label { fill: var(--accent-bright); }
.map-node:focus-visible .map-node__dot { stroke: var(--accent-bright); stroke-width: 2.4; }
.map-node.is-selected .map-node__title { fill: var(--accent-bright); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.map-node.is-now .map-node__dot { stroke: var(--accent-bright); stroke-width: 2.4; filter: drop-shadow(0 0 5px var(--accent)); }
.map-node.on-path .map-node__time { fill: var(--accent); }

.kind-story { --kind-color: var(--kind-story); }
.kind-argument { --kind-color: var(--kind-argument); }
.kind-question { --kind-color: var(--kind-question); }
.kind-reading { --kind-color: var(--kind-reading); }
.kind-conclusion { --kind-color: var(--kind-conclusion); }
.kind-aside { --kind-color: var(--kind-aside); }
.kind-dot.kind-story, .kind-dot.kind-argument, .kind-dot.kind-question, .kind-dot.kind-reading, .kind-dot.kind-conclusion, .kind-dot.kind-aside { background: var(--kind-color); }

/* tree edges and idea links */
.map-edge { fill: none; stroke: var(--line-strong); stroke-width: 1; transition: stroke .3s, stroke-width .3s; }
.map-edge.depth-3 { stroke: var(--line); }
.map-edge.on-path { stroke: var(--accent); stroke-width: 1.6; }
.map-link { fill: none; stroke: var(--map-link); stroke-width: 1.1; stroke-dasharray: 3 4; opacity: .55; transition: opacity .25s, stroke-width .25s; }
.map-link:hover { stroke-width: 2; opacity: 1; }
.lecture-map__links.has-active .map-link { opacity: .14; }
.lecture-map__links.has-active .map-link.is-active { opacity: 1; stroke-width: 1.8; stroke-dasharray: none; }

/* reading card */
.lecture-map__card { position: absolute; top: 1rem; right: max(16px, calc((100% - 76rem) / 2)); width: min(23rem, calc(100% - 32px)); max-height: calc(100% - 2rem); overflow-y: auto; padding: 1.1rem 1.25rem 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 40px var(--shadow); }
.lecture-map__card h3 { margin: .5rem 0 .55rem; font: 400 1.3rem / 1.3 var(--font-display); text-wrap: balance; }
.lecture-map__kind { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font: 500 .7rem / 1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.lecture-map__gist { margin: 0 0 1rem; color: var(--muted-strong); font: 400 .95rem / 1.6 var(--font-reading); }
.lecture-map__listen { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem .5rem .75rem; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent-bright); font: 400 .88rem / 1 var(--font-ui); cursor: pointer; }
.lecture-map__listen:hover { background: var(--accent-wash); }
.lecture-map__listen .ui-icon { width: 1rem; height: 1rem; }
.lecture-map__connections { display: grid; gap: .8rem; margin: 1.15rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.lecture-map__connections button { padding: 0; border: 0; background: none; color: var(--text); font: 400 .95rem / 1.4 var(--font-display); text-align: left; cursor: pointer; }
.lecture-map__connections button:hover { color: var(--accent-bright); }
.lecture-map__relation { color: var(--accent); font: italic 300 .92rem / 1 var(--font-display); }
.lecture-map__connections p { margin: .25rem 0 0; color: var(--muted); font: 400 .8rem / 1.5 var(--font-ui); }

@media (max-width: 1100px) {
  .lecture-map__hint { display: none; }
}
@media (max-width: 720px) {
  .lecture-map__head { align-items: flex-start; gap: .7rem; padding-block: calc(.8rem + env(safe-area-inset-top, 0px)) .7rem; }
  .lecture-map__heading { flex: 1 1 calc(100% - 3.5rem); }
  .lecture-map__tools { order: 3; flex-basis: 100%; gap: .2rem 1rem; }
  .lecture-map__tools .lecture-map__close { position: absolute; top: calc(.8rem + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
  .lecture-map__hint { display: none; }
  .lecture-map__legend { display: none; }
  .lecture-map__card { top: auto; bottom: .75rem; right: 16px; left: 16px; width: auto; max-height: 52%; }
}

/* Phones: the same map as an outline that opens in place, the card under the tapped line. */
.lecture-map.is-outline .lecture-map__svg, .lecture-map.is-outline .lecture-map__legend, .lecture-map.is-outline .lecture-map__hint, .lecture-map.is-outline .lecture-map__card, .lecture-map.is-outline [data-map-action="fit"] { display: none; }
.lecture-map__outline { position: absolute; inset: 0; overflow-y: auto; padding: 1rem max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); overscroll-behavior: contain; }
.map-outline, .map-outline ol { margin: 0; padding: 0; list-style: none; }
.map-outline ol { margin-left: .3rem; padding-left: 1rem; border-left: 1px solid var(--line-strong); }
.map-outline li { position: relative; }
.map-outline ol > li::before { content: ''; position: absolute; left: -1rem; top: 1.35rem; width: .75rem; border-top: 1px solid var(--line-strong); }
.map-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: .55rem; width: 100%; padding: .55rem 0; border: 0; background: none; color: var(--muted-strong); font: 400 .95rem / 1.4 var(--font-ui); text-align: left; cursor: pointer; }
.map-row__dot { width: .6rem; height: .6rem; border: 1.3px solid var(--line-strong); border-radius: 50%; background: var(--bg); transform: translateY(-.05rem); }
.map-row.has-children .map-row__dot { background: var(--line-strong); }
.map-row.has-children.is-open .map-row__dot { background: var(--bg); }
.map-row.depth-2 .map-row__dot { border-color: var(--kind-color); background: var(--kind-color); }
.map-row.depth-2.is-open .map-row__dot { background: var(--bg); }
.map-row.depth-0 { grid-template-columns: auto minmax(0, 1fr); color: var(--text); font: italic 400 1.3rem / 1.3 var(--font-display); }
.map-row.depth-0 .map-row__dot { background: var(--accent); border-color: var(--accent); }
.map-row.depth-1 { color: var(--text); font: 400 1.08rem / 1.35 var(--font-display); }
.map-row.depth-3 { color: var(--muted); font-size: .86rem; font-style: italic; }
.map-row__time { color: var(--dim); font: 400 .72rem / 1 var(--font-ui); font-variant-numeric: tabular-nums; min-width: 2.6rem; }
.map-row__more { color: var(--accent); font: italic 300 .85rem / 1 var(--font-display); }
.map-row.is-selected .map-row__title { color: var(--accent-bright); }
.map-row.is-now .map-row__dot { border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-wash); }
.map-row.on-path .map-row__time { color: var(--accent); }
.map-row__card { margin: .1rem 0 .7rem 1.15rem; padding: .9rem 1rem 1rem; border-left: 2px solid var(--accent); background: var(--surface); }
.map-row__card .lecture-map__kind, .map-row__card h3 { display: none; }
.map-row__card .lecture-map__gist { font-size: .92rem; }
.map-row__card .lecture-map__connections { margin-top: .9rem; padding-top: .8rem; }