/* Просмотрщик листов манускрипта + каталог «Манускрипт» + полноэкранный лайтбокс.
   Мобильные правила вынесены в viewer_mobile.css (подключать последним). */

/* ---- Широкий режим страниц с просмотрщиком (роутер добавляет main.wide) ---- */
main.wide { max-width: 1720px; }
main.wide.has-toc { max-width: 1820px; grid-template-columns: 1fr 260px; }
main.wide .page-head, main.wide .page-body { max-width: 100%; }
/* текстовые блоки держим читаемой ширины, а просмотрщик/сетки/фигуры - во всю ширину */
main.wide .page-head > *,
main.wide .page-body > p,
main.wide .page-body > h2,
main.wide .page-body > h3,
main.wide .page-body > ul,
main.wide .page-body > ol,
main.wide .page-body > blockquote,
main.wide .page-body > .plain-lead,
main.wide .page-body > .lead,
main.wide .page-body > .analogy,
main.wide .page-body > .step,
main.wide .page-body > .takeaway,
main.wide .page-body > .lang-note { max-width: 900px; }
main.wide .folio-viewer, main.wide figure,
main.wide .scan-grid, main.wide .folio-cards { max-width: 100%; }
main.wide .fv-stage { max-height: 84vh; }
main.wide .scan-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.folio-viewer {
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--panel); margin: 26px 0; max-width: 100%;
}
.fv-toolbar { padding: 12px 14px 4px; border-bottom: 1px solid var(--rule); }
.fv-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fv-chip {
  appearance: none; cursor: pointer; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-soft); padding: 5px 12px;
  font-family: system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
}
.fv-chip:hover { color: var(--ink); background: var(--panel2); }
.fv-chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.fv-sliders { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 8px; }
.fv-sliders label {
  display: flex; align-items: center; gap: 8px;
  font-family: system-ui, sans-serif; font-size: 12px; color: var(--ink-soft);
}
.fv-sliders .fv-lbl { min-width: 58px; }
.fv-sliders input[type="range"] { width: 120px; accent-color: var(--accent); }
.fv-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 600;
  color: var(--accent); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums;
}
.fv-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--rule); background: var(--panel2);
}
.fv-title { font-family: system-ui, sans-serif; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.fv-btn {
  appearance: none; cursor: pointer; border: 1px solid var(--rule); border-radius: 8px;
  background: transparent; color: var(--ink-soft); padding: 6px 12px;
  font-family: system-ui, sans-serif; font-size: 13px;
}
.fv-btn:hover { color: var(--ink); background: var(--code-bg); }
.fv-stage {
  overflow: auto; max-height: 76vh; background: #0d0b08; cursor: grab;
  touch-action: pan-x pan-y;
}
.fv-stage:active { cursor: grabbing; }
.fv-stage img { display: block; width: 100%; height: auto; user-select: none; cursor: zoom-in; }
.fv-credit {
  padding: 7px 14px; font-family: system-ui, sans-serif; font-size: 11.5px;
  color: var(--ink-soft); border-top: 1px solid var(--rule);
}

/* ---- Лайтбокс (fancybox) ---- */
html.fv-lb-open { overflow: hidden; }
.fv-lightbox { position: fixed; inset: 0; z-index: 1000; }
.fv-lightbox[hidden] { display: none; }
.fv-lb-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 4, 0.93); backdrop-filter: blur(2px); }
/* размеры боковой панели (переключаются классом .min на .fv-lightbox) */
.fv-lightbox { --side: 232px; }
.fv-lightbox.min { --side: 60px; }

/* вертикальная панель инструментов слева */
.fv-side {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--side); z-index: 3;
  background: rgba(28, 22, 15, 0.97); border-right: 1px solid var(--rule);
  overflow-y: auto; overflow-x: visible; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 10px;
  transition: width .18s ease;
}
.fv-min-toggle {
  appearance: none; cursor: pointer; border: 1px solid var(--rule); border-radius: 8px;
  background: transparent; color: var(--ink-soft); padding: 7px 8px;
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: system-ui, sans-serif; font-size: 11.5px; font-weight: 600;
}
.fv-min-toggle:hover { color: var(--ink); background: var(--panel2); }
.fv-lightbox.min .fv-min-toggle svg { transform: rotate(180deg); }
.fv-vpresets { display: flex; flex-direction: column; gap: 4px; }
.fv-vchip {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%;
  justify-content: flex-start; border-radius: 8px; padding: 7px 9px; text-align: left;
}
.fv-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.fv-vlabel { font-family: system-ui, sans-serif; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.fv-lightbox.min .fv-vlabel { display: none; }
.fv-lightbox.min .fv-side { padding: 10px 6px; }
.fv-lightbox.min .fv-vchip,
.fv-lightbox.min .fv-min-toggle { justify-content: center; padding: 8px 0; }
.fv-lightbox.min .fv-vsliders { display: none; }

/* стилизованные подсказки (как .tip на сайте); позиция задаётся из JS (position:fixed,
   чтобы не обрезались прокруткой панели) */
.fv-tip {
  position: fixed; transform: translateY(-50%);
  width: 210px; background: var(--panel2); color: var(--ink); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 9px 12px;
  font-family: system-ui, sans-serif; font-size: 12px; line-height: 1.45; font-weight: 400;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); opacity: 0; visibility: hidden;
  transition: opacity .12s; z-index: 1100; pointer-events: none;
}
.fv-tip b { display: block; color: var(--accent); font-size: 12.5px; margin-bottom: 3px; }
.fv-tip.show { opacity: 1; visibility: visible; }

/* ползунки в панели: компактно, без засечек */
.fv-vsliders { display: flex; flex-direction: column; gap: 7px; margin-top: 2px;
  border-top: 1px solid var(--rule); padding-top: 8px; }
.fv-vsliders label {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; row-gap: 2px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.fv-vsliders .fv-lbl {
  grid-column: 1; font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); min-width: 0;
}
.fv-vsliders .fv-num {
  grid-column: 2; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px;
  color: var(--accent); min-width: 30px; text-align: right;
}
.fv-vsliders input[type="range"] {
  grid-column: 1 / -1; width: 100%; height: 4px; margin: 1px 0 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: var(--rule); border-radius: 3px; accent-color: var(--accent);
}
.fv-vsliders input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 1px solid #0d0b08; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.fv-vsliders input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer;
}

/* компактный заголовок группы в панели */
.fv-lenses-head {
  font-family: system-ui, -apple-system, sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft);
  margin: 8px 2px 0; padding-top: 8px; border-top: 1px solid var(--rule);
}
.fv-lightbox.min .fv-lenses-head { text-align: center; font-size: 0; padding-top: 6px; }

/* «Волшебные очки» и инструменты-кружки - единый стиль, тонкая золотая оправа */
.fv-lenses { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 0 2px; }
/* Оправа - золотое кольцо, СТЕКЛО ВНУТРИ ПРОЗРАЧНОЕ: сквозь него видно фон панели,
   как сквозь настоящую цветную линзу в оправе. */
.fv-lens {
  position: relative; width: 42px; height: 42px; flex: 0 0 auto; padding: 0; cursor: pointer;
  border: none; border-radius: 50%; background: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.fv-lens::before {                 /* сама оправа */
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: linear-gradient(135deg, #f2d489 0%, #c79a3c 45%, #9a6c22 58%, #ecc86e 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 63%, #000 64%);
          mask: radial-gradient(circle, transparent 0 63%, #000 64%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.fv-lens .lens-glass {
  position: absolute; inset: 3px; border-radius: 50%; z-index: 1;
  backdrop-filter: blur(1.2px) saturate(1.35);
  -webkit-backdrop-filter: blur(1.2px) saturate(1.35);
  box-shadow: inset 0 -6px 10px rgba(255,255,255,.18), inset 0 3px 8px rgba(0,0,0,.35),
              inset 0 0 0 1px rgba(255,255,255,.16);
}
/* Цветные линзы - настоящие стеклянные шары (нарезаны из набора, `figs/lens/*.png`,
   альфа-канал по кругу). Собственная подсветка и каустика уже в картинке, поэтому
   градиенты и блик для них отключены. */
.fv-lens-red .lens-glass,
.fv-lens-blue .lens-glass,
.fv-lens-green .lens-glass,
.fv-lens-gold .lens-glass {
  inset: 2px; background-repeat: no-repeat; background-position: center;
  background-size: 100% 100%; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.fv-lens-red .lens-glass   { background-image: url(../figs/lens/red.png); }
.fv-lens-blue .lens-glass  { background-image: url(../figs/lens/blue.png); }
.fv-lens-green .lens-glass { background-image: url(../figs/lens/green.png); }
.fv-lens-gold .lens-glass  { background-image: url(../figs/lens/amber.png); }
/* у шаров свой блик - наш стеклянный отключаем */
.fv-lens-red .lens-glare, .fv-lens-blue .lens-glare,
.fv-lens-green .lens-glare, .fv-lens-gold .lens-glare { display: none; }

.fv-lens-tool .lens-glass {
  background:
    radial-gradient(ellipse 58% 34% at 50% 80%, rgba(226,214,190,.28), rgba(226,214,190,0) 70%),
    radial-gradient(circle at 50% 60%, rgba(120,108,88,.42) 0 52%, rgba(38,30,18,.62) 100%);
}
/* «Оригинал» - бесцветное стекло: снимает светофильтры, не трогая масштаб */
.fv-clear-btn .lens-glass {
  background:
    radial-gradient(ellipse 58% 34% at 50% 80%, rgba(255,255,255,.38), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 60%, rgba(232,226,212,.22) 0 52%, rgba(120,112,96,.34) 100%);
}
.fv-clear-btn .lens-icon   { color: #f0e6d2; }
.fv-lens .lens-icon {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  color: #f0e2c2; pointer-events: none;
}
.fv-lens .lens-icon .fv-ico { width: 17px; height: 17px; }
.fv-lens .lens-glare {
  position: absolute; top: 5px; left: 50%; width: 22px; height: 11px; border-radius: 50%; z-index: 2;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.92), rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 78%);
  pointer-events: none;
}
.fv-lens:hover { transform: translateY(-1px); }
/* нажатый кружок виден отчётливо: золотое кольцо, свечение и «утопленность» */
.fv-lens.active {
  box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(203,164,94,.7), 0 2px 6px rgba(0,0,0,.5);
  transform: translateY(1px);
}
.fv-lens.active .lens-glass { filter: saturate(1.55) brightness(1.18); }
/* никаких значков-точек поверх стекла: они читаются как отдельная кнопка.
   Нажатое состояние = золотое кольцо + свечение + лёгкое «утапливание». */
.fv-lens .lens-glare, .fv-lens .lens-glass, .fv-lens .lens-icon { pointer-events: none; }

/* мини-переключатель режима очков */
.fv-gmode {
  display: flex; margin: 8px 0 2px; border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden; background: var(--panel);
}
.fv-gm {
  flex: 1; padding: 5px 8px; background: none; border: 0; cursor: pointer;
  font-family: system-ui, sans-serif; font-size: 11.5px; letter-spacing: .02em;
  color: var(--ink-soft);
}
.fv-gm + .fv-gm { border-left: 1px solid var(--rule); }
.fv-gm:hover { color: var(--ink); background: var(--panel2); }
.fv-gm.active { background: var(--accent); color: var(--bg); font-weight: 600; }
.fv-lightbox.min .fv-gmode { display: none; }
.fv-candle-btn.active { box-shadow: 0 0 0 2px #ffb861, 0 0 14px rgba(255,160,60,.6), 0 2px 5px rgba(0,0,0,.6); }
.fv-candle-btn.active .lens-icon { color: #ffe0a0; }

/* компактные иконочные кнопки (трансформации, свеча) */
.fv-transforms { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
.fv-mini {
  position: relative; width: 34px; height: 34px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.fv-mini:hover { color: var(--ink); background: var(--panel2); }
.fv-mini.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.fv-mini .fv-ico { width: 17px; height: 17px; }

/* лупа - увеличительное стекло в золотой оправе, следует за курсором */
.fv-loupe {
  position: fixed; z-index: 1090; width: 190px; height: 190px; border-radius: 50%;
  display: none; pointer-events: none; background-repeat: no-repeat; background-color: #0d0b08;
  box-shadow: 0 0 0 3px #8a5f1c, 0 0 0 7px #cba45e, 0 0 0 9px #6a4a15,
              0 10px 30px rgba(0,0,0,.75), inset 0 0 30px rgba(0,0,0,.5);
}
.fv-loupe::after {
  content: ""; position: absolute; top: 14px; left: 20px; width: 60px; height: 34px;
  border-radius: 50%; background: linear-gradient(to bottom right, rgba(255,255,255,.28), rgba(255,255,255,0));
  transform: rotate(-24deg); pointer-events: none;
}

/* слой свечи - тёплый мерцающий свет над сценой */
.fv-candle-layer {
  position: absolute; left: var(--side); right: 0; top: 0; bottom: 0; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .25s, left .18s ease;
}
.fv-candle-layer.on { opacity: 1; }
.fv-candle-dark, .fv-candle-glow { position: absolute; inset: 0; }
.fv-candle-glow { mix-blend-mode: soft-light; }

/* сцена - вся площадь справа от панели */
.fv-lb-stage {
  position: absolute; left: var(--side); right: 0; top: 0; bottom: 0; z-index: 1;
  max-height: none; height: auto; background: transparent;
  overflow: auto; text-align: center; touch-action: pan-x pan-y;
  transition: left .18s ease;
}
/* базовый вид лайтбокса - вписать лист в экран; зум задаёт явную ширину (см. viewer.js) */
.fv-lb-stage img {
  display: inline-block; width: auto; height: auto;
  max-width: 100%; max-height: 96vh; margin: 0 auto; cursor: grab;
}
.fv-lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  appearance: none; cursor: pointer; width: 44px; height: 44px;
  border: 1px solid var(--rule); border-radius: 50%; background: rgba(36, 29, 20, 0.85);
  color: var(--ink); font-size: 20px; line-height: 1;
}
.fv-lb-arrow:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.fv-lb-prev { left: calc(var(--side) + 12px); transition: left .18s ease; }
.fv-lb-next { right: 14px; }
.fv-lb-close {
  position: absolute; top: 12px; right: 14px; z-index: 4; appearance: none; cursor: pointer;
  width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 50%;
  background: rgba(36, 29, 20, 0.9); color: var(--ink); font-size: 24px; line-height: 1;
}
.fv-lb-close:hover { background: var(--warn); color: #fff; border-color: var(--warn); }
.fv-lb-caption {
  position: absolute; left: var(--side); right: 0; bottom: 10px; z-index: 2; text-align: center;
  font-family: system-ui, sans-serif; font-size: 13px; color: var(--ink-soft);
  text-shadow: 0 1px 6px #000; transition: left .18s ease; pointer-events: none;
}

/* мягкая защита: изображения нельзя перетаскивать/сохранять драгом */
.page-body img, .scan-cell img, .folio-card img, .fv-img, .fv-loupe, figure img {
  -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none;
}
/* строка лицензии в футере */
#foot-license {
  font-family: system-ui, sans-serif; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-soft); opacity: .85; max-width: 640px; margin-top: 6px;
}

/* авто-ссылка на лист в тексте статьи (открывает полноэкранный редактор) */
a.folio-link {
  color: var(--link); text-decoration: none; white-space: nowrap;
  border-bottom: 1px dotted var(--accent-soft); cursor: pointer;
}
a.folio-link:hover { color: var(--accent); border-bottom-style: solid; background: rgba(203,164,94,.08); }
a.folio-link .fl-ico {
  width: .74em; height: .74em; margin-left: 2px; vertical-align: -0.04em; opacity: .8;
}

/* каталог */
.sec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 14px; }
.sec-chip {
  appearance: none; cursor: pointer; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-soft); padding: 6px 13px;
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600;
}
.sec-chip:hover { color: var(--ink); background: var(--panel2); }
.sec-chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.scan-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px; margin: 14px 0 30px; max-width: 100%;
}
.scan-cell {
  cursor: pointer; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  background: var(--panel); transition: border-color .15s, transform .15s;
}
.scan-cell:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.scan-cell img { display: block; width: 100%; height: 118px; object-fit: cover; background: #0d0b08; max-width: 100%; }
.scan-cell span {
  display: block; padding: 4px 7px; font-family: system-ui, sans-serif;
  font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.scan-cell:hover span { color: var(--ink); }

/* карточки историй страниц */
.folio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 18px 0 30px; max-width: 100%; }
.folio-card {
  display: block; text-decoration: none; border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; background: var(--panel); transition: border-color .15s, transform .15s;
}
.folio-card:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.folio-card img { display: block; width: 100%; height: 130px; object-fit: cover; background: #0d0b08; max-width: 100%; }
.folio-card .fc-body { padding: 10px 13px 13px; }
.folio-card .fc-folio {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.folio-card h3 { margin: 4px 0 5px; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.folio-card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }