/*
 * Методика «Генератор твистов» — оформление страниц плагина.
 *
 * Всё под .twist-methodology, поэтому тема сайта не задета: шрифт, цвет текста и
 * фон берутся у неё, а плагин оформляет только своё — оглавление, навигацию,
 * карточки формул и матрицу.
 */

.twist-methodology {
  --twist-rule: currentColor;
  --twist-accent: #8a5a2b;
  --twist-none: #9a9490;
  --twist-p1: #2f6f9f;
  --twist-p2: #8a4f9f;
}

.twist-methodology * { box-sizing: border-box; }

.twist-methodology .crumb {
  opacity: .65;
  font-size: .85em;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .4em;
}

/* --- обложка ------------------------------------------------------------- */

.twist-methodology .cover { margin: 0 0 2em; text-align: center; }
.twist-methodology .cover img {
  max-width: 22rem;
  width: 100%;
  height: auto;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 8px;
}

/* --- оглавление --------------------------------------------------------- */

.twist-methodology .toc {
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 8px;
  padding: 1.2em 1.5em;
  margin: 1em 0 2em;
}
/* Номера глав стоят в самих заголовках, поэтому нумерация списка с ними спорит. */
.twist-methodology .toc ol { margin: 0; padding-left: 0; list-style: none; }
.twist-methodology .toc li { margin: .3em 0; }
.twist-methodology .toc li.part {
  margin-top: 1em;
  opacity: .65;
  font-size: .9em;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.twist-methodology .toc li.part:first-child { margin-top: 0; }

/* --- навигация ---------------------------------------------------------- */

.twist-methodology .pager {
  display: flex;
  gap: .75em;
  align-items: baseline;
  justify-content: space-between;
  font-size: .95em;
  margin: 0;
}
.twist-methodology .pager.top {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}
.twist-methodology .pager.bottom {
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}
.twist-methodology .pager .prev,
.twist-methodology .pager .next { flex: 1 1 0; min-width: 0; }
.twist-methodology .pager .next { text-align: right; }
.twist-methodology .pager .middle { flex: 0 0 auto; opacity: .7; text-align: center; }
.twist-methodology .pager .spent { opacity: .35; }

/* --- таблицы и матрица -------------------------------------------------- */

.twist-methodology table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-size: .92em;
}
.twist-methodology th,
.twist-methodology td {
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  padding: .5em .6em;
  text-align: left;
  vertical-align: top;
}
.twist-methodology .matrix {
  font: .8em/1.3 ui-monospace, Menlo, Consolas, monospace;
  display: block;
  overflow-x: auto;
}
.twist-methodology .matrix td,
.twist-methodology .matrix th { padding: .3em .25em; text-align: center; }
.twist-methodology .m-none { color: var(--twist-none); }
.twist-methodology .m-p1 { color: var(--twist-p1); font-weight: 600; }
.twist-methodology .m-p2 { color: var(--twist-p2); font-weight: 600; }
.twist-methodology .m-both { color: var(--twist-accent); font-weight: 700; }
.twist-methodology .legend { font-size: .9em; opacity: .75; }
.twist-methodology .legend span { margin-right: 1.2em; white-space: nowrap; }

/* --- карточки формул ---------------------------------------------------- */

.twist-methodology .formula {
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1em 0;
}
.twist-methodology .formula h4 {
  margin: 0 0 .5em;
  font-size: 1.05em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.twist-methodology .formula .label {
  opacity: .65;
  font-size: .85em;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.twist-methodology .ref {
  border-left: 3px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  padding-left: 1em;
  margin-top: .8em;
  font-size: .95em;
}

.twist-methodology code {
  font: .92em/1.4 ui-monospace, Menlo, Consolas, monospace;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 4px;
  padding: .1em .35em;
}

/* --- «Содержание» и «Читалка» ------------------------------------------ */

.twist-methodology .tools { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1em; }
.twist-methodology .toc-open,
.twist-methodology .reader-open {
  display: inline-block;
  font: inherit;
  font-size: .95em;
  line-height: 1.4;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 999px;
  padding: .35em .95em;
  margin: 0;
  cursor: pointer;
}
/* «Читалка» работает только со скриптом — он её и показывает. */
.twist-methodology .reader-open[hidden] { display: none; }

/* Скрипт переносит панель в конец страницы, поэтому класс .twist-methodology
   стоит на ней самой. Фон и цвет текста скрипт берёт у темы. */
.toc-drawer.twist-methodology { position: fixed; inset: 0; z-index: 100000; }
.toc-drawer.twist-methodology[hidden] { display: none; }
.twist-methodology .toc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .25s ease;
}
.twist-methodology .toc-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(22rem, 86vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1em 1.25em 2em;
  background: #fff;
  color: #1c1b19;
  box-shadow: 2px 0 18px rgba(0, 0, 0, .25);
  transform: translateX(-100%);
  transition: transform .25s ease;
  outline: none;
}
.twist-methodology.is-open .toc-backdrop { opacity: 1; }
.twist-methodology.is-open .toc-panel { transform: none; }
.twist-methodology .toc-head {
  display: flex;
  gap: .5em;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 .75em;
}
.twist-methodology .toc-title { font-weight: 600; text-decoration: none; }
.twist-methodology .toc-close {
  font: inherit;
  font-size: 1.1em;
  line-height: 1;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: .2em .4em;
}
.twist-methodology .toc-panel .toc { border: 0; padding: 0; margin: 0; }
.twist-methodology .toc a[aria-current="page"] { font-weight: 700; text-decoration: none; }
html.toc-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .twist-methodology .toc-panel,
  .twist-methodology .toc-backdrop { transition: none; }
}

@media (max-width: 40rem) {
  .twist-methodology .pager { flex-wrap: wrap; }
  .twist-methodology .pager .middle { flex: 1 0 100%; order: 3; margin-top: .75em; }
  .twist-methodology .matrix { font-size: .68em; }
}