/* ==========================================================================
   Виджеты модуля «Графика и эффекты»: SVG, обводка, clip-path,
   фильтры и типографские мелочи.
   ========================================================================== */

/* --- Анатомия SVG ---------------------------------------------------------- */
.sa { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s4); }
.sa__code { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; align-content: start; }
.sa__line {
  padding: 5px var(--s2);
  border-radius: 5px;
  cursor: help;
  transition: background var(--fast) var(--ease);
}
.sa__line code { font-size: .74rem; color: var(--tok-tag); white-space: pre-wrap; }
.sa__line--plain { cursor: default; }
.sa__line.is-hot, .sa__line:hover { background: var(--accent-soft); }

.sa__view { display: grid; gap: var(--s3); justify-items: center; align-content: start; }
.sa__svg {
  width: 200px;
  max-width: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--bg-deep);
  border-radius: var(--r-sm);
}
.sa__svg text { fill: var(--text-soft); stroke: none; font-family: var(--font-text); }
.sa__canvas { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.sa__svg [data-part] { transition: stroke var(--fast) var(--ease), fill var(--fast) var(--ease); cursor: help; }
.sa__svg [data-part].is-hot { stroke: var(--ok); stroke-width: 3.4; }
.sa__svg text[data-part].is-hot { fill: var(--ok); stroke: none; }
.sa__note { font-size: .84rem; color: var(--text-soft); text-align: center; min-height: 2.6em; }

/* --- Лаборатория обводки ------------------------------------------------------ */
.st { padding: var(--s5); }
.st__svg { width: 180px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st__track { stroke: var(--border-strong); stroke-width: 6; }
.st__line { stroke: var(--ok); stroke-width: 6; }

/* --- Редактор clip-path ---------------------------------------------------------- */
.cp { padding: var(--s5); }
.cp__area { position: relative; width: min(420px, 100%); aspect-ratio: 3 / 2; margin-inline: auto; touch-action: none; }
.cp__shape {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #7c5cff, #b06cff 55%, #4bd1a0);
  border-radius: 4px;
}
.cp__overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cp__overlay polygon { fill: none; stroke: #fff; stroke-width: .6; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.cp__dots { position: absolute; inset: 0; }
.cp__dot {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.cp__dot:hover { transform: scale(1.2); }
.cp__dot:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

/* --- Смеситель фильтров -------------------------------------------------------------- */
.fm { padding: var(--s5); }
.fm__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); width: 100%; }
.fm__item { margin: 0; display: grid; gap: var(--s2); justify-items: center; }
.fm__item figcaption { font-size: .78rem; color: var(--text-mute); }
.fm__art {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background:
    radial-gradient(circle at 30% 30%, #ffd166 0 18%, transparent 18.5%),
    radial-gradient(circle at 72% 62%, #4bd1a0 0 22%, transparent 22.5%),
    linear-gradient(135deg, #7c5cff, #f2777a);
}
.fm__art--backdrop {
  position: relative;
  background: rgb(255 255 255 / .18);
  border: 1px solid rgb(255 255 255 / .3);
}
.fm__art--backdrop::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: var(--r-sm);
  background:
    radial-gradient(circle at 30% 30%, #ffd166 0 18%, transparent 18.5%),
    radial-gradient(circle at 72% 62%, #4bd1a0 0 22%, transparent 22.5%),
    linear-gradient(135deg, #7c5cff, #f2777a);
}
.fm__item:has(.fm__art--backdrop) { isolation: isolate; }

/* --- Типографские мелочи ---------------------------------------------------------------- */
.td__list { display: grid; gap: var(--s2); }
.td__row { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.td__row input { margin-top: 4px; accent-color: var(--accent); }
.td__label { display: grid; gap: 1px; font-size: .9rem; }
.td__label i { font-style: normal; font-size: .78rem; color: var(--text-mute); }

.td { padding: var(--s5); align-items: start; }
.td__sheet {
  width: 100%;
  padding: var(--s5);
  background: #fdfcfa;
  color: #1b1a17;
  border-radius: var(--r-sm);
  font-family: Georgia, "Times New Roman", serif;
}
.td__title { margin: 0 0 var(--s3); font-family: inherit; font-size: 1.35rem; line-height: 1.2; }
.td__text { margin: 0; font-size: 1rem; line-height: 1.35; }
.td__text a { color: #6544e0; }

.td__sheet.is-balance .td__title { text-wrap: balance; }
.td__sheet.is-pretty .td__text { text-wrap: pretty; }
.td__sheet.is-measure .td__text { max-inline-size: 60ch; }
.td__sheet.is-leading .td__text { line-height: 1.7; }
.td__sheet.is-hyphens .td__text { hyphens: auto; text-align: justify; }
.td__sheet.is-caps .td__text::first-letter {
  float: inline-start;
  font-size: 3.1em;
  line-height: .84;
  padding-inline-end: .08em;
  padding-block-start: .04em;
}
.td__sheet.is-underline .td__text a {
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

@media (max-width: 700px) {
  .sa, .fm__pair { grid-template-columns: 1fr; }
}