/* Research and course pages: the compact paper list, the heading line with its notes and switch,
   and the research map (research/map/).
   The three line colours are validated as a categorical set, all pairs, light and dark. */

/* ---- Compact paper list: tags and the Abstract button share one row ---- */
.research-section { margin-bottom: 1.5rem; }
.research-grid { gap: 0.75rem; }
.research-content { padding: 1rem 1.25rem; }
.paper-title { font-size: var(--font-size-base); line-height: 1.55; }
.paper-note { margin-top: 0.3rem; }
.paper-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.6rem; }
.paper-meta .paper-tags, .paper-meta .paper-abstract-toggle { margin-top: 0; }
.paper-abstract-toggle .paper-expander { padding: 0.2rem 0.6rem; font-size: 0.82rem; }

/* ---- Heading line shared by the research list, the map and the course page ---- */
.course-head .course-description {
    margin: 0; max-width: none; font-size: var(--font-size-base); line-height: 1.65; color: var(--text-primary-light);
    padding: 1rem 1.5rem; border: 1px solid var(--bs-border-color); border-radius: 12px;
    background: linear-gradient(145deg, #ffffff 0%, var(--bg-light) 100%);
}
[data-bs-theme=dark] .course-head .course-description { color: var(--text-primary-dark); background: linear-gradient(145deg, var(--bg-card-dark) 0%, var(--bg-dark) 100%); }

/* the chapter list starts at the same inner edge as the cards above it */
.toc-card { padding: 0.5rem 1.5rem 1.5rem; }

/* CV page: the common column; the download button sits on the heading line */
.cv-container.research-container { max-width: 1200px; padding: 1.5rem 1rem; }
.research-section-first { position: relative; }
.research-headtools { position: absolute; top: 0; right: 0; height: 2.6rem; display: flex; align-items: center; gap: 1.25rem; font-family: var(--font-primary); }
.research-notes { font-size: 0.8rem; color: #5a6a7a; }
/* Between 1200 and 1440px the notes would run into the heading; they wrap to two lines instead. */
@media (min-width: 1200px) and (max-width: 1440px) { .research-headtools .research-notes { max-width: 26rem; text-align: right; line-height: 1.35; } }
[data-bs-theme=dark] .research-notes { color: #a8b0b8; }
.research-view { display: inline-flex; border: 1px solid var(--border-light); border-radius: 0.5rem; overflow: hidden; font-size: 0.82rem; flex: none; }
.research-view a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.7rem; color: var(--text-secondary-light); text-decoration: none; }
.research-view a + a { border-left: 1px solid var(--border-light); }
.research-view a[aria-current=page] { background: var(--color-primary); color: #fff; }
.research-view a:not([aria-current]):hover, .research-view a:not([aria-current]):focus-visible { color: var(--color-primary); background: rgba(26, 58, 92, 0.06); }
.research-view i { font-size: 0.72rem; }
[data-bs-theme=dark] .research-view, [data-bs-theme=dark] .research-view a + a { border-color: var(--border-dark); }
[data-bs-theme=dark] .research-view a { color: var(--text-secondary-dark); }
[data-bs-theme=dark] .research-view a[aria-current=page] { background: var(--color-primary-light); color: #fff; }
[data-bs-theme=dark] .research-view a:not([aria-current]):hover { color: var(--text-primary-dark); background: rgba(138, 180, 216, 0.08); }
@media (max-width: 1199.98px) {
    .research-headtools { position: static; height: auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1rem; margin: -1rem 0 1rem; }
}

/* ---- The map ---- */
.rmap {
    --rm-hte: #1d66a8;
    --rm-platform: #b8742a;
    --rm-dl: #b8336a;
    --rm-ink: #1a3a5c;
    --rm-surface: #ffffff;
    --rm-text: #2c3e50;
    --rm-text-2: #5a6a7a;
    --rm-edge: #e6dfd4;
    --rm-select: rgba(196, 154, 108, 0.35);
    --rm-focus: #a07a4c;
    display: flex;
    flex-direction: column;
}
[data-bs-theme=dark] .rmap {
    --rm-hte: #4290d0;
    --rm-platform: #c8842f;
    --rm-dl: #cf5487;
    --rm-ink: #e8e4df;
    --rm-surface: #1c2836;
    --rm-text: #e8e4df;
    --rm-text-2: #a8b0b8;
    --rm-edge: #2f4053;
    --rm-select: rgba(196, 154, 108, 0.30);
    --rm-focus: #c49a6c;
}
/* Without the script the views follow the map; with it, one view sits above the map. */
.rmap > .research-section-first { order: 1; margin-bottom: 1rem; }
.rmap > .rmap-figure { order: 3; }
.rmap > .rmap-panel { order: 4; }
.rmap-js > .rmap-panel { order: 2; margin: 0 0 0.75rem; min-height: 3.75rem; }
/* the slot above the map stays reserved, so choosing a station never moves the map */
.rmap-js:not(.is-filtered) > .rmap-panel { visibility: hidden; }

.rmap-swatch { display: inline-block; width: 22px; height: 6px; border-radius: 3px; margin-right: 0.5rem; vertical-align: middle; flex: none; }
.rmap-swatch.rmap-c-hte { background: var(--rm-hte); }
.rmap-swatch.rmap-c-platform { background: var(--rm-platform); }
.rmap-swatch.rmap-c-dl { background: var(--rm-dl); }
.rmap-swatch-transfer { width: 16px; height: 3px; border-radius: 2px; background: var(--rm-ink); opacity: 0.5; }

/* Figure */
.rmap-figure { margin: 0; background: var(--rm-surface); border: 1px solid var(--rm-edge); border-radius: 0.75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rmap-svg { display: block; width: 100%; min-width: 880px; height: auto; font-family: var(--font-primary); }
.rmap-bg { fill: transparent; }

.rmap-path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.rmap-c-hte { stroke: var(--rm-hte); }
.rmap-c-platform { stroke: var(--rm-platform); }
.rmap-c-dl { stroke: var(--rm-dl); }
.rmap-path-next { stroke-width: 5; stroke-dasharray: 2 10; opacity: 0.85; }
.rmap-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; }
.rmap-track { cursor: pointer; outline: none; }
.rmap-track:focus-visible .rmap-path { filter: drop-shadow(0 0 3px var(--rm-focus)); }
.rmap-transfer { fill: none; stroke: var(--rm-ink); stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.rmap-transfer-label { fill: var(--rm-text-2); font-size: 12px; font-style: italic; }

.rmap-seg { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.rmap-seg rect { fill: var(--rm-surface); stroke-width: 1.5; }
.rmap-seg-hte rect { stroke: var(--rm-hte); }
.rmap-seg-platform rect { stroke: var(--rm-platform); }
.rmap-seg-dl rect { stroke: var(--rm-dl); }
.rmap-seg text { fill: var(--rm-text); font-size: 11px; font-weight: 500; }
.rmap-seg.is-shown, .rmap-seg.is-peek { opacity: 1; }

.rmap-st { cursor: pointer; outline: none; }
.rmap-mark { fill: var(--rm-surface); stroke: var(--rm-ink); stroke-width: 3; }
.rmap-mark-hte { stroke: var(--rm-hte); stroke-width: 4; }
.rmap-mark-platform { stroke: var(--rm-platform); stroke-width: 4; }
.rmap-mark-dl { stroke: var(--rm-dl); stroke-width: 4; }
.rmap-mark-planned { stroke-dasharray: 3 3; stroke-width: 2.5; }
.rmap-halo { fill: var(--rm-select); stroke: none; opacity: 0; }
.rmap-label { fill: var(--rm-text); font-size: 14px; font-weight: 500; }
.rmap-st-planned .rmap-label { fill: var(--rm-text-2); font-style: italic; font-weight: 400; }
.rmap-sub { fill: var(--rm-text-2); font-size: 11.5px; font-weight: 400; }
.rmap-st:hover .rmap-mark { stroke-width: 4.5; }
.rmap-st:hover .rmap-label { text-decoration: underline; text-decoration-color: var(--color-accent); }
.rmap-st:focus-visible .rmap-halo { opacity: 1; stroke: var(--rm-focus); stroke-width: 2; }
.rmap-st.is-selected .rmap-halo { opacity: 1; }
.rmap-st.is-selected .rmap-mark { stroke: var(--rm-focus); stroke-width: 4.5; }
.rmap-st.is-selected .rmap-label { font-weight: 600; }

/* Line badges at the termini and in the legend: a letter per line, so a line is known
   by more than its colour */
.rmap-badge circle { stroke: var(--rm-surface); stroke-width: 2; }
.rmap-badge-hte circle { fill: var(--rm-hte); }
.rmap-badge-platform circle { fill: var(--rm-platform); }
.rmap-badge-dl circle { fill: var(--rm-dl); }
.rmap-badge text { fill: #fff; font-size: 11px; font-weight: 700; }
.rmap-label.rmap-terminus { font-weight: 700; }
.rmap.is-filtered .rmap-badge { opacity: 0.35; }

/* Legend inside the figure; its entries choose a line */
.rmap-legend line { stroke-width: 6; stroke-linecap: round; }
.rmap-legend text { fill: var(--rm-text); font-size: 13px; }
.rmap-legend .rmap-badge text { fill: #fff; font-size: 10px; }
.rmap.is-filtered .rmap-legend .rmap-badge { opacity: 1; }
.rmap-legend-item { cursor: pointer; outline: none; }
.rmap-legend-item:hover text, .rmap-legend-item:focus-visible text, .rmap-legend-item.is-on text { text-decoration: underline; text-decoration-color: var(--color-accent); }
.rmap-legend .rmap-legend-planned { stroke: var(--rm-text-2); stroke-width: 4; stroke-dasharray: 2 7; }
.rmap-legend .rmap-legend-muted { fill: var(--rm-text-2); font-style: italic; }

/* Selection: everything else recedes */
.rmap.is-filtered .rmap-track:not(.is-on) { opacity: 0.18; }
.rmap.is-filtered .rmap-st:not(.is-on) { opacity: 0.3; }
.rmap.is-filtered .rmap-transfer:not(.is-on), .rmap.is-filtered .rmap-transfer-label { opacity: 0.15; }
.rmap-track, .rmap-st, .rmap-transfer, .rmap-transfer-label, .rmap-halo { transition: opacity 0.2s ease; }

/* Panel above the map: one short view at a time */
.rmap-panel { position: relative; background: var(--rm-surface); border: 1px solid var(--rm-edge); border-radius: 0.75rem; padding: 0.85rem 1.25rem; margin: 0.75rem 0 0; }
.rmap-view + .rmap-view { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rm-edge); }
.rmap-js .rmap-view { display: none; }
.rmap-js .rmap-view.is-active { display: block; margin-top: 0; padding-top: 0; border-top: 0; }
.rmap-view h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; color: var(--rm-text); margin-bottom: 0.3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.rmap-view h4 .rmap-swatch { margin-right: 0; align-self: center; }
.rmap-year { font-family: var(--font-primary); font-size: 0.85rem; font-weight: 400; color: var(--rm-text-2); }
.rmap-planned { font-family: var(--font-primary); font-size: 0.8rem; font-weight: 400; font-style: italic; color: var(--rm-text-2); }
.rmap-links { display: inline-flex; flex-wrap: wrap; gap: 1rem; font-family: var(--font-primary); font-size: 0.85rem; font-weight: 400; margin-left: 0.4rem; }
.rmap-view p { color: var(--rm-text); margin-bottom: 0.3rem; font-size: 0.95rem; }
.rmap-view .rmap-cite { color: var(--rm-text); font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.4rem; }
.rmap-view .paper-abstract-toggle { margin-top: 0; }
.rmap-view .details-content { margin-top: 0.5rem; }
.rmap-view .details-content p { margin: 0; }
.rmap-row .rmap-swatch { width: 16px; height: 5px; margin-right: 0.45rem; }
.rmap-row strong { font-weight: 600; margin-right: 0.3rem; }
.rmap-view .rmap-muted, .rmap-muted { color: var(--rm-text-2); }
.rmap-view .rmap-hint { color: var(--rm-text-2); font-size: 0.85rem; margin: 0.4rem 0 0; }
.rmap-view .rmap-chain { font-size: 0.88rem; color: var(--rm-text-2); }
.rmap-chain em { color: var(--rm-text-2); }
.rmap-arrow { color: var(--rm-text-2); margin: 0 0.15rem; }
.rmap-view a { color: var(--color-primary-light); text-decoration: none; border-bottom: 1px solid transparent; }
[data-bs-theme=dark] .rmap-view a { color: var(--text-accent-dark); }
.rmap-view a:hover, .rmap-view a:focus-visible { border-bottom-color: var(--color-accent); }
.rmap .rmap-view a.rmap-linkline, [data-bs-theme=dark] .rmap .rmap-view a.rmap-linkline { display: inline-flex; align-items: center; color: var(--rm-text); font-weight: 500; }

@media (max-width: 767.98px) {
    .rmap-panel { padding: 0.85rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rmap-track, .rmap-st, .rmap-transfer, .rmap-transfer-label, .rmap-halo, .rmap-seg { transition: none; }
}