/* Виджеты статьи «Направляющие линии». Только они: общая обвязка в assets/textbook.css.

   Демо-слайд здесь — это SVG с viewBox 640×360 (у маленьких слайдов 300×169).
   Кегли подписей заданы в единицах viewBox, а не в пикселях: статья про углы
   и направления, и единственный способ сохранить угол линии на любом экране —
   масштабировать слайд целиком. На телефоне это тот же слайд, только меньше.

   Своих цветов в файле нет: всё покрашено токенами школьной темы плюс #eef0f7
   и #dcdce6 — подложка карточки и пунктир продолжения линии, обе из палитры
   раздела. Цвета демо-слайдов живут в данных виджетов, то есть в widgets.js. */

/* ==== Общее для всех виджетов статьи ==== */

.ln-frame{
  margin-top:var(--s-3);
  background:#fbfbff; border:1px solid var(--line); border-radius:var(--r-md); padding:10px;
}
.ln-svg{display:block; width:100%; height:auto;}
.ln-paper{fill:var(--surface); stroke:var(--line); stroke-width:1;}

.ln-kick{
  font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; fill:var(--muted);
}
.ln-foot{font-size:11px; fill:var(--muted);}
.ln-title{fill:var(--ink); font-size:23px; font-weight:700;}
.ln-sub{fill:var(--muted); font-size:13px;}
.ln-logo{fill:var(--muted); font-size:13px; font-weight:700; letter-spacing:.5px;}

/* Карточка этапа или метрики: подложка, подпись, число. */
.ln-card-bg{fill:#eef0f7; stroke:#dcdce6; stroke-width:1;}
.ln-card-t{fill:var(--ink); font-size:13px; font-weight:600;}
.ln-card-v{fill:var(--muted); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;}

/* Блок вывода: то, ради чего слайд, и то, чем должен кончаться маршрут. */
.ln-big-bg{fill:var(--ink); stroke:var(--ink);}
.ln-big-v{fill:#fff; font-size:30px; font-weight:700; font-variant-numeric:tabular-nums;}
.ln-big-t{fill:#d9d9de; font-size:12px; font-weight:600;}
.ln-big.is-hit .ln-big-bg{fill:var(--ok); stroke:var(--ok);}

/* ==== Маршрут и линии ==== */

.ln-route{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;}
.ln-route.is-ok{stroke:var(--ok);}
.ln-stop{fill:var(--surface); stroke:var(--accent); stroke-width:2.5;}
.ln-stop.is-ok{stroke:var(--ok);}
.ln-num{fill:var(--ink); font-size:11px; font-weight:700; }
.ln-walker{fill:var(--accent);}

.ln-ray{stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;}
.ln-ray.is-ok{stroke:var(--ok);}
.ln-ghost{fill:none; stroke:#dcdce6; stroke-width:1.5; stroke-dasharray:6 6;}
.ln-tip{fill:var(--accent);}
.ln-tip.is-ok{fill:var(--ok);}
.ln-arrow{fill:none; stroke:var(--muted); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.ln-chart-bar{fill:#7a7a7a;}

/* Нейтральный режим: в карточках квиза линия не должна выдавать ответ цветом. */
.ln-route.is-mute, .ln-ray.is-mute, .ln-gaze.is-mute, .ln-stop.is-mute{stroke:var(--muted);}
.ln-tip.is-mute{fill:var(--muted);}

/* Фигура героя: рисуем сами, фотографий со стороны в статье нет. */
.ln-fig-body{fill:var(--ink);}
.ln-fig-head{fill:var(--ink);}
.ln-fig-face{fill:#fff;}
.ln-gaze{stroke:var(--accent); stroke-width:2; stroke-dasharray:7 5; stroke-linecap:round;}
.ln-gaze.is-ok{stroke:var(--ok);}

/* Маленькие слайды (гонка и квиз): тот же рисовальщик, свой кегль. */
.ln-mini .ln-kick{font-size:7px; letter-spacing:.4px;}
.ln-mini .ln-foot{font-size:6.5px;}
.ln-mini .ln-title{font-size:12px;}
.ln-mini .ln-sub{font-size:7px;}
.ln-mini .ln-logo{font-size:7px;}
.ln-mini .ln-card-t, .ln-mini .ln-card-v{font-size:7px;}
.ln-mini .ln-big-v{font-size:15px;}
.ln-mini .ln-big-t{font-size:6.5px;}
.ln-mini .ln-num{font-size:6.5px;}
.ln-mini .ln-route, .ln-mini .ln-stop, .ln-mini .ln-ray, .ln-mini .ln-gaze{stroke-width:2;}

/* ==== Управление прямо на слайде ==== */

.ln-card[tabindex], .ln-big[tabindex]{cursor:grab; touch-action:none;}
.ln-card[tabindex] .ln-card-bg{transition:stroke 140ms var(--ease-out);}
.ln-card[tabindex]:hover .ln-card-bg{stroke:var(--ink);}
.ln-card[tabindex]:active, .ln-big[tabindex]:active{cursor:grabbing;}
.ln-card[tabindex]:focus, .ln-big[tabindex]:focus{outline:none;}
.ln-card[tabindex]:focus-visible .ln-card-bg{stroke:var(--accent); stroke-width:2.5;}
.ln-big[tabindex] .ln-big-bg{transition:stroke 140ms var(--ease-out);}
.ln-big[tabindex]:hover .ln-big-bg{stroke:var(--accent); stroke-width:2;}
.ln-big[tabindex]:focus-visible .ln-big-bg{stroke:var(--accent); stroke-width:3;}

.ln-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:var(--s-2);
}
.ln-count{font-size:13.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}

.v-line{
  margin-top:var(--s-2); font-size:14px; font-weight:700; line-height:1.4; min-height:1.4em;
  color:var(--muted);
}
.v-line[data-tone="ok"]{color:var(--ok-text);}
.v-line[data-tone="bad"]{color:var(--err-text);}

/* ==== ИНТЕРАКТИВ 3 — два слайда рядом ==== */

.ln-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:var(--s-3);}
@media (max-width:560px){ .ln-grid{grid-template-columns:1fr;} }
.ln-cell{
  background:#fbfbff; border:1px solid var(--line); border-radius:var(--r-md); padding:8px;
}
.ln-cap{display:block; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--ink);}

/* ==== ИНТЕРАКТИВ 7 — карточки квиза ==== */

.errcard .ln-svg{border-radius:var(--r-sm);}
.err-explain{min-height:1em;}

/* ==== ИНТЕРАКТИВ 8 — условия задачи ==== */

.ln-goals{
  list-style:none; margin:var(--s-2) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 20px;
}
.ln-goals li{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; color:var(--muted);
}
.ln-goals li.is-on{color:var(--ink);}
.ln-gm{
  width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid var(--line); background:var(--surface);
  transition:background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.ln-goals li.is-on .ln-gm{background:var(--ok); border-color:var(--ok);}

/* ==== Блок живых примеров ==== */

.ex-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 18px;}
@media (max-width:820px){ .ex-grid{grid-template-columns:repeat(2,1fr); gap:18px 14px;} }
@media (max-width:560px){ .ex-grid{grid-template-columns:1fr;} }

.ex-card{display:block; text-decoration:none; color:inherit;}
.ex-card img{
  display:block; width:100%; height:auto; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface);
  transition:box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.ex-card:hover img{box-shadow:var(--shadow); border-color:#d9d9e6; transform:translateY(-2px);}
.ex-card:active img{transform:none;}
.ex-card:focus-visible{outline:none;}
.ex-card:focus-visible img{outline:2px solid var(--accent); outline-offset:3px;}
.ex-card p{margin:10px 2px 0; font-size:14.5px; line-height:1.45; color:var(--muted);}
.ex-card p b{color:var(--ink); font-weight:600;}

/* ==== Телефон ==== */

@media (max-width:640px){
  .ln-frame{padding:6px;}
  .ln-bar{gap:8px;}
  .ln-count{font-size:12.5px;}
  .ln-goals{flex-direction:column; gap:7px;}
  .ln-goals li{font-size:13.5px;}
  .v-line{font-size:13.5px;}
  .ln-grid{gap:8px;}
  .ln-cell{padding:5px;}
}

/* Функциональные изменения (угол линии, место карточки) остаются мгновенными:
   гасим только декоративные переходы. Перечислены все анимируемые селекторы
   виджетов — иначе снимок состояния ловит переход на полпути, и на скриншоте
   рамка выходит серой вместо акцентной. */
@media (prefers-reduced-motion: reduce){
  .ln-card[tabindex] .ln-card-bg, .ln-big[tabindex] .ln-big-bg, .ln-gm, .ex-card img{transition:none;}
}