/* Схема линий и нитей на шкале времени. Живёт отдельно от app.css: своя
   страница со своей вёрсткой, общим файлам она ничего не должна. */

.scheme{max-width:1360px;margin:0 auto;padding:20px 18px 40px;zoom:var(--ml-zoom,1)}
/* на экране страница — это сама схема; заголовок оставлен для читалок экрана */
.scheme-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Панель управления ─────────────────────────────────────────────── */
.lt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:10px}
.lt-btn{
  background:var(--panel);border:1px solid var(--hairline);border-radius:20px;
  color:var(--text-dim);font:inherit;font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;padding:5px 14px;cursor:pointer}
.lt-btn:hover{color:var(--gold);border-color:var(--gold)}
.lt-check{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text-dim);cursor:pointer}
.lt-check input{accent-color:var(--gold);cursor:pointer}
.lt-range{font-family:Georgia,serif;font-size:13.5px;color:var(--gold)}
.lt-hint{margin-left:auto;font-size:11.5px;color:var(--text-dim)}

/* ── Холст ─────────────────────────────────────────────────────────── */
.lt-plot{
  position:relative;background:var(--sky-hi);
  border:1px solid var(--hairline);border-radius:12px;overflow:hidden;
  cursor:grab;touch-action:none}
.lt-plot.dragging{cursor:grabbing}
.lt-plot svg{display:block;width:100%}

.lt-row-bg{fill:transparent}
.lt-guide{stroke:var(--hairline);stroke-width:1;opacity:.5}
.lt-axis{stroke:var(--hairline);stroke-width:1}
.lt-tick{stroke:var(--hairline);stroke-width:1;opacity:.7}
.lt-tick-label{fill:var(--text-dim);font-size:10px;letter-spacing:.8px;text-anchor:middle}
/* колонка названий: щелчок по строке гасит линию, стрелка ведёт на её статью.
   Надписи прозрачны для мыши — события ловит прямоугольник под ними. */
.lt-hit{fill:transparent;cursor:pointer}
.lt-name{font-family:Georgia,serif;font-size:13px;dominant-baseline:middle;
  pointer-events:none}
.lt-count{fill:var(--text-dim);font-size:10px;dominant-baseline:middle;
  pointer-events:none}
.lt-go{cursor:pointer}
.lt-go rect{fill:transparent}
.lt-go text{fill:var(--text-dim);font-size:12px;dominant-baseline:middle;
  pointer-events:none;opacity:.5}
.lt-go:hover text{fill:var(--gold);opacity:1}
/* погашенная линия: строка остаётся на месте, но приглушена */
.lt-off{opacity:.34}
.lt-narrow .lt-name{font-size:11px}
.lt-narrow .lt-count{font-size:9px}
.lt-spine{stroke-linecap:round}
.lt-dot{cursor:pointer}
/* глухая подложка под кружком: иначе линия раздела перечёркивает номер */
.lt-dot-bg{fill:var(--sky-hi)}
/* точка, о которой сейчас подсказка: она может оказаться далеко от неё */
.lt-dot.lt-on circle:nth-child(2){stroke-width:3;fill-opacity:.6}
.lt-num{font-size:9px;text-anchor:middle;dominant-baseline:central;
  pointer-events:none;font-family:'Segoe UI',system-ui,sans-serif}
.lt-thread{fill:none;stroke-dasharray:5 4;stroke-linejoin:round;stroke-linecap:round;
  pointer-events:none}

/* приглушение: когда что-то выделено, остальному сбавляют яркость */
.lt-dim{opacity:.16}

/* ── Подсказка ─────────────────────────────────────────────────────── */
.lt-tip{
  position:absolute;z-index:3;width:320px;pointer-events:none;
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hairline);border-radius:10px;padding:9px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
html[data-theme="light"] .lt-tip{box-shadow:0 10px 26px rgba(50,80,140,.18)}
.lt-tip-head{display:flex;gap:10px;align-items:flex-start}
.lt-tip-col{min-width:0}
/* главная иллюстрация точки; размер задан жёстко и в разметке тоже —
   иначе высота подсказки меняется в момент загрузки картинки */
.lt-tip-ico{flex:0 0 auto;width:56px;height:56px;border-radius:8px;
  object-fit:cover;border:1px solid var(--hairline);background:var(--sky)}
.lt-tip b{display:block;font-family:Georgia,serif;font-weight:500;font-size:14px;
  line-height:1.3;color:var(--text)}
.lt-tip .lt-tip-date{display:block;font-size:10.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--gold);margin-top:3px}
.lt-tip .lt-tip-sum{display:block;font-family:Georgia,serif;font-size:12.5px;
  line-height:1.5;color:var(--text-soft);margin-top:6px}
.lt-tip .lt-tip-lines{display:block;font-size:10.5px;color:var(--text-dim);margin-top:6px}

/* ── Легенда сквозных сюжетов ──────────────────────────────────────── */
.lt-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lt-chip{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:11.5px;letter-spacing:.6px;color:var(--text-dim);
  background:var(--panel);border:1px solid var(--hairline);border-radius:20px;
  padding:4px 12px 4px 9px}
.lt-chip:hover{color:var(--text)}
.lt-chip.off{opacity:.4}
.lt-chip i{width:16px;height:0;border-top:2px dashed currentColor;flex:none}
.lt-chip-go{margin-left:2px;color:var(--text-dim);text-decoration:none;opacity:.55}
.lt-chip-go:hover{color:var(--gold);opacity:1}

.lt-load{margin-top:12px;font-family:Georgia,serif;font-style:italic;color:var(--text-dim)}

@media (max-width:760px){
  .scheme{padding:20px 12px 40px}
  .lt-hint{margin-left:0;flex-basis:100%}
}