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

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

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

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

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

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

/* Карточка демо-слайда: подложка, подпись, число. */
.fr-fill{fill:#eef0f7;}
.fr-fill-hot{fill:var(--ink);}
.fr-card-t{fill:var(--muted); font-size:12px; font-weight:600; letter-spacing:.4px;}
.fr-card-v{fill:var(--ink); font-size:21px; font-weight:700; font-variant-numeric:tabular-nums;}
.fr-card-vw{fill:#fff; font-size:21px; font-weight:700; font-variant-numeric:tabular-nums;}
.fr-card-tw{fill:#d9d9de; font-size:12px; font-weight:600; letter-spacing:.4px;}
.fr-row-t{fill:var(--ink); font-size:14px; font-weight:600;}
.fr-row-v{fill:var(--muted); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;}
.fr-huge{fill:var(--ink); font-size:58px; font-weight:700; font-variant-numeric:tabular-nums;}
.fr-line{fill:#dcdce6;}
.fr-line-dark{fill:#afafaf;}
.fr-line-w{fill:#7a7a7a;}
.fr-stroke{fill:none; stroke:var(--line); stroke-width:1.4;}

/* Ось и отражение: ось всегда акцентная, отражение всегда полупрозрачное. */
.fr-axis{stroke:var(--accent); stroke-width:1.4; stroke-dasharray:6 6; opacity:.75;}
.fr-ghost{opacity:.32;}
.fr-miss{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-dasharray:4 4;}

/* ==== Органы управления ==== */

.fr-controls{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); margin-top:var(--s-2);}
.fr-ctl{display:flex; flex-direction:column; gap:2px;}

.fr-goals{
  list-style:none; margin:var(--s-2) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 20px;
}
.fr-goals li{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; color:var(--muted);
}
.fr-goals li.is-on{color:var(--ink);}
.fr-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);
}
.fr-goals li.is-on .fr-gm{background:var(--ok); border-color:var(--ok);}

/* ==== Счётчик и вердикт ==== */

.fr-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:var(--s-2);
}
.fr-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 — два слайда рядом и путь взгляда ==== */

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

/* Путь взгляда: ломаная появляется целиком, точки проявляются по очереди.
   Порядок важнее скорости, поэтому шаг задержки крупный и одинаковый. */
.fr-trail{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; opacity:0;
  transition:opacity 260ms var(--ease-out);}
.fr-stop{opacity:0; transition:opacity 200ms var(--ease-out);}
.fr-stop circle{fill:var(--accent);}
.fr-stop text{fill:#fff; font-size:12px; font-weight:700;}
.is-on .fr-trail, .is-on .fr-stop{opacity:1;}

/* ==== ИНТЕРАКТИВ 5 — шкала мёртвой зоны ====
   Доли колонок повторяют доли бегунка: 3 единицы из 220, затем 61 из 220,
   остальное — зона видимого сдвига. Поэтому подсветка совпадает с тем,
   где сейчас стоит ручка. */

.fr-scale{display:grid; grid-template-columns:1.4fr 27.7fr 70.9fr; gap:3px; margin-top:2px;}
.fr-zone{
  height:6px; border-radius:var(--pill); background:var(--line); min-width:3px;
  transition:background-color 160ms var(--ease-out);
}
.fr-zone.is-on{background:var(--accent);}
.fr-zone-names{margin:6px 0 0; font-size:11.5px; color:var(--muted);}

/* ==== ИНТЕРАКТИВ 6 — прищур ==== */

.fr-blur{transition:filter 220ms var(--ease-out);}
.is-blur .fr-blur{filter:blur(4px);}

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

.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);}

@media (prefers-reduced-motion: reduce){
  .fr-trail, .fr-stop, .fr-blur, .fr-gm, .fr-zone, .ex-card img{transition:none;}
}