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

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

   Своих цветов в файле нет: всё покрашено токенами школьной темы плюс #eef0f7,
   #dcdce6 и #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-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-none{fill:none;}
.fr-stroke{fill:none; stroke:var(--ink); stroke-width:1.6;}
.fr-stroke-soft{fill:none; stroke:#dcdce6; stroke-width:1.6;}
.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-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-big-bg{fill:var(--ink);}
.fr-big-v{fill:#fff; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;}
.fr-big-t{fill:#d9d9de; font-size:12px; font-weight:600;}

/* Акцентный контур: им подсвечивается то, чем читатель сейчас управляет. */
.fr-stroke.is-hot{stroke:var(--accent);}
.fr-tint-hot{fill:#ffe8e8;}

/* ==== ИНТЕРАКТИВ 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-cell .fr-svg{transition:filter 220ms var(--ease-out);}
.fr-grid.is-squint .fr-svg{filter:blur(3.2px);}

/* ==== ИНТЕРАКТИВ 4 — стороны рамки кликабельны ==== */

.fr-side{cursor:pointer;}
.fr-side .fr-hit{fill:transparent; stroke:transparent; stroke-width:22;}
.fr-side .fr-seg{stroke:var(--ink); stroke-width:2.4; stroke-linecap:butt;
  transition:stroke 140ms var(--ease-out), opacity 140ms var(--ease-out);}
.fr-side.is-off .fr-seg{stroke:#dcdce6; stroke-dasharray:4 7;}   /* выключенная сторона остаётся призраком: так видно, куда вернуть линию */
.fr-side:hover .fr-seg{stroke:var(--accent);}
.fr-side:active .fr-seg{stroke-width:3.2;}
.fr-side:focus{outline:none;}
.fr-side:focus-visible .fr-seg{stroke:var(--accent); stroke-width:3.4;}

/* ==== ИНТЕРАКТИВ 6 — независимые тумблеры уровней ==== */

.fr-toggles{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-2);}
.fr-tg{
  appearance:none; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600;
  height:44px; padding:0 16px; border-radius:var(--pill);
  background:var(--surface); color:var(--muted); border:1.5px solid var(--line);
  transition:background-color 160ms var(--ease-out), color 160ms var(--ease-out),
             border-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
.fr-tg:hover{border-color:var(--ink); color:var(--ink);}
.fr-tg:active{transform:scale(.97);}
.fr-tg[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff;}

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

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

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

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

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

.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){
  .fr-frame{padding:6px;}
  .fr-bar{gap:8px;}
  .fr-count{font-size:12.5px;}
  .fr-goals{flex-direction:column; gap:7px;}
  .fr-goals li{font-size:13.5px;}
  .v-line{font-size:13.5px;}
  .fr-grid{gap:8px;}
  .fr-cell{padding:5px;}
  .fr-controls{flex-direction:column; gap:var(--s-2);}
  .fr-toggles{flex-direction:column;}
  .fr-tg{width:100%;}
}

/* Функциональные изменения (стороны рамки, уровни вложенности, отступ) остаются
   мгновенными: гасим только декоративные переходы. Перечислены все анимируемые
   селекторы виджетов — иначе снимок состояния ловит переход на полпути. */
@media (prefers-reduced-motion: reduce){
  .fr-side .fr-seg, .fr-tg, .fr-gm, .ex-card img, .fr-cell .fr-svg{transition:none;}
}