/* ═════════════════════════════════════════════════════════════════════
   «Три шага»: живые сцены на копии окна SXfont (assets/js/steps-scene.js).
   Окно свёрстано в «проектных» пикселях 1000×640 и масштабируется целиком
   (--k считает скрипт по ширине места), поэтому координаты курсора
   в сценарии одинаковые на любом экране.
   ═════════════════════════════════════════════════════════════════════ */

.scn { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.scn.is-on { opacity: 1; }

.scn__win {
  position: absolute; left: var(--x, 7%); top: var(--y, 9%);
  width: 1000px; height: 640px;
  transform: scale(var(--k, .7)); transform-origin: 0 0;
  background: #FDFDFD;
  /* скругления вложены: окно 34 = панель инструментов 18 + отступ 16;
     панель 18 = кнопки внутри 9 + отступ 9; карточки 18, как панель */
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05), 0 30px 80px -24px rgba(24,34,12,.45);
  font-family: var(--mac); font-size: 13px; color: #1D1D1F;
}
.scn .ic { width: 16px; height: 16px; display: block; flex: none; }

/* ─── боковая панель ─── */
.scn__side { position: absolute; left: 0; top: 0; bottom: 0; width: 220px; padding: 14px 8px; background: #F7F7F7; border-right: 1px solid #ECECEC; }
/* кружки отодвинуты от дуги угла окна: от неё до кружка столько же воздуха, сколько до края */
.scn__lights { display: flex; gap: 8px; padding: 6px 12px 0; }
.scn__lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.scn__lights i:nth-child(2) { background: #FEBC2E; }
.scn__lights i:nth-child(3) { background: #28C840; }
/* кнопка скрытия панели — на одной линии с серединой панели инструментов */
.scn__sidetop { display: flex; justify-content: flex-end; align-items: center; height: 28px; margin-top: 12px; padding-right: 6px; color: #8E8E93; }
.scn__sidetop .ic { width: 18px; height: 16px; }
.scn__list { margin-top: 16px; display: grid; gap: 1px; }
.scn__list--sep { margin-top: 16px; padding-top: 16px; border-top: 1px solid #ECECEC; }
.scn__row {
  display: flex; align-items: center; gap: 11px;
  height: 28px; padding: 0 12px 0 19px; border-radius: 6px;
  white-space: nowrap; color: #262626;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.scn__row > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.scn__row b { font-weight: 400; font-size: 10.5px; color: #9A9A9E; font-variant-numeric: tabular-nums; }
/* как в приложении: число у строки раздела видно, только когда она выбрана */
.scn__row:not(.is-on) .scn__cnt, .scn__row:not(.is-on) .scn__acnt, .scn__row:not(.is-on) .scn__ncnt { visibility: hidden; }
.scn__row.is-on { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05); }
.scn__row .ic { color: #595959; }
.scn__row img { width: 16px; height: 16px; }
.scn__label { margin: 16px 10px 6px; font-size: 11px; font-weight: 600; color: #9A9A9E; }
.scn__src { display: grid; }
.scn__new { overflow: hidden; }
.scn__plus {
  position: absolute; left: 50%; bottom: 14px; margin-left: -14px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  color: #8E8E93;
}
.scn__plus svg { width: 20px; height: 20px; }

/* ─── панель инструментов ─── */
.scn__bar {
  position: absolute; left: 236px; top: 32px; width: 748px; height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 1px #EDEDED, 0 1px 2px rgba(0,0,0,.03);
}
.scn__size { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: #8E8E93; font-family: var(--mono); font-size: 11px; }
.scn__size .big { font-size: 14px; }
.scn__track { position: relative; width: 104px; height: 6px; border-radius: 3px; background: #E3E3E6; }
.scn__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: #007AFF; }
.scn__knob { position: absolute; top: 50%; left: 40%; width: 20px; height: 14px; margin: -7px 0 0 -10px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.25); }
.scn__views { position: relative; display: flex; gap: 1px; margin-right: 11px; padding: 2px; border-radius: 9px; background: #F5F5F5; }
.scn__views::after { content: ""; position: absolute; right: -11px; top: 5px; bottom: 5px; width: 1px; background: #E5E5E5; }
.scn__views span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #6E6E73; }
.scn__views span:first-child { background: #fff; color: #1D1D1F; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.scn__views .ic { width: 15px; height: 15px; }
.scn__field {
  flex: 1; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px; border-radius: 9px;
  background: #F5F5F5; color: #6E6E73; font-size: 14px;
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
/* в фокусе поле белое с тонкой рамкой, без синего ореола — как в приложении */
.scn__field.is-focus { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.16); }
.scn__field .scn__chev { width: 9px; height: 9px; margin-left: -5px; }
.scn__typed { color: #1D1D1F; white-space: nowrap; }
.scn__typed:empty::before { content: "Введите текст превью"; color: #A1A1A6; }
.scn__caret { width: 1.5px; height: 16px; margin-left: -7px; background: #0A84FF; opacity: 0; }
.scn__field.is-focus .scn__caret { opacity: 1; }
.scn__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; background: #F5F5F5; font-size: 12px; font-weight: 500; white-space: nowrap; }
.scn__btn .ic { width: 15px; height: 15px; }

/* ─── карточки ─── */
.scn__grid {
  --pv: 26px;
  position: absolute; left: 236px; top: 100px; width: 748px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.scn__card {
  position: relative; height: 150px;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 1px #EFEFEF;
  transition: box-shadow .2s var(--ease), translate .2s var(--ease);
}
/* наведение: подъём на 2px и мягкая широкая тень. translate, а не transform:
   transform у карточек двигает сценарий */
.scn__card.is-hover { translate: 0 -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 10px 32px -4px rgba(0,0,0,.09); }
.scn__pv { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px 16px 4px; color: #272727; font-size: var(--pv); line-height: 1.16; text-align: center; }
.scn__pv span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* набранная фраза всегда в две строки: ползунок меняет только размер, без перескоков.
   6.15em — между самым широким словом «Кофейня» (Unbounded 600: 5.95em)
   и самой узкой фразой целиком (Caveat: 6.32em); слово посередине не рвём */
.scn__grid.is-typed .scn__pv span { max-width: 6.15em; overflow-wrap: normal; }
.scn__pv.f-unbounded { font-size: calc(var(--pv) * .84); }
.scn__pv.f-caveat { font-size: calc(var(--pv) * 1.2); }
.scn__pv.f-russo, .scn__pv.f-tektur { font-size: calc(var(--pv) * .94); }
.scn__meta { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px 11px; border-top: 1px solid #F2F2F2; font-size: 11px; color: #6E6E6E; white-space: nowrap; }
.scn__meta span + span { font-family: var(--mono); font-size: 11.5px; color: #6E6E6E; }
.scn__fav, .scn__bolt { position: absolute; top: 12px; width: 16px; height: 16px; color: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s var(--ease); }
.scn__fav { left: 16px; }
.scn__bolt { right: 16px; }
.scn__fav .ic, .scn__bolt .ic { position: absolute; inset: 0; width: 100%; height: 100%; }
.scn__fav .ic { width: 15px; height: 14px; }
.scn__bolt .ic { left: 2px; width: 12px; }
.scn__card.is-hover .scn__fav, .scn__card.is-hover .scn__bolt, .scn__bolt.is-on { opacity: 1; }
.scn__bolt .f { color: var(--bolt-on); opacity: 0; transform: scale(.25); filter: blur(3px); transition: opacity .25s cubic-bezier(.2,0,0,1), transform .42s cubic-bezier(.34,1.7,.5,1), filter .25s cubic-bezier(.2,0,0,1); }
.scn__bolt.is-on .f { opacity: 1; transform: none; filter: none; }
.scn__bolt.is-on .o { opacity: 0; }

/* пустая библиотека: как в приложении */
.scn__empty { position: absolute; left: 236px; top: 100px; width: 748px; height: 520px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: #8E8E93; }
.scn__empty .ic { width: 44px; height: 36px; color: #C7C7CC; }
.scn__empty b { font-size: 17px; font-weight: 600; color: #3A3A3C; }
/* «Выбрать папку…» в приложении — кнопка */
.scn__empty span { margin-top: 4px; padding: 6px 14px; border-radius: 8px; background: #1D1D1F; color: #fff; font-size: 13px; font-weight: 600; }

/* всплывашка под «⊕»: «Новый тег» / «Добавить источник» */
.scn__pop {
  position: absolute; left: 22px; bottom: 56px;
  display: flex; gap: 8px; padding: 12px;
  border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 14px 34px -10px rgba(0,0,0,.35);
  opacity: 0; transform-origin: 88px 100%;
}
.scn__pop::after { content: ""; position: absolute; left: 82px; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); box-shadow: .5px .5px 0 rgba(0,0,0,.1); }
.scn__pop span { height: 32px; padding: 0 13px; display: grid; place-items: center; border-radius: 8px; background: #F2F2F4; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); font-weight: 500; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); }
/* обычная кнопка macOS при нажатии темнеет, а не синеет */
.scn__pop span.is-press { background: #DCDCE0; color: #1D1D1F; }

/* окно выбора папки */
.scn__panel {
  position: absolute; left: 240px; top: 100px; width: 540px; height: 380px;
  display: grid; grid-template-rows: auto 1fr auto;
  border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 30px 70px -20px rgba(0,0,0,.45);
  opacity: 0;
}
.scn__ptitle { padding: 12px 16px; font-size: 13px; font-weight: 600; text-align: center; background: #F6F6F6; border-bottom: 1px solid #E8E8E8; }
.scn__pbody { display: grid; grid-template-columns: 150px 1fr; min-height: 0; }
.scn__pside { padding: 10px 8px; background: #F7F7F7; border-right: 1px solid #ECECEC; font-size: 12px; }
.scn__pside .scn__pgroup { margin: 4px 8px 6px; font-size: 10.5px; font-weight: 600; color: #9A9A9E; }
.scn__pside span { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 6px; color: #333; }
.scn__pside span.is-on { background: rgba(0,0,0,.07); }
.scn__pside .ic { width: 14px; height: 12px; color: #0A84FF; }
.scn__plist { padding: 8px; font-size: 13px; }
.scn__plist span { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 6px; color: #262626; transition: background-color .2s var(--ease), color .2s var(--ease); }
.scn__plist .ic { width: 18px; height: 15px; color: #5AA0F0; }
.scn__plist span.is-sel { background: #0A84FF; color: #fff; }
.scn__plist span.is-sel .ic { color: #fff; }
.scn__pfoot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #EFEFEF; }
.scn__pfoot span { height: 30px; padding: 0 14px; display: grid; place-items: center; border-radius: 7px; background: #F0F0F2; font-weight: 500; }
.scn__pfoot .is-main { background: #0A84FF; color: #fff; }
.scn__pfoot .is-main.is-press { background: #0060D0; }

/* раздел «Активные»: только включённые шрифты */
.scn__grid--active { opacity: 0; }

/* курсор демонстрации: обычная чёрная стрелка macOS, чтобы не спутать с курсором сайта */
/* до старта сцены курсор не виден: иначе он висел в углу, на кружках окна */
.scn__cur { position: absolute; left: 0; top: 0; width: 22px; height: 30px; opacity: 0; transform-origin: 2px 2px; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.scn__ring { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid rgba(10,132,255,.55); opacity: 0; z-index: 4; }

/* ─── на телефоне сцена стоит под каждым шагом, в своей рамке с лугом ─── */
.step__pic { display: none; }
@media (max-width: 900px) {
  .step__pic {
    display: block; position: relative;
    /* 8:7 — окно помещается по высоте целиком: «⊕» внизу боковой панели не обрезан */
    margin-top: 24px; aspect-ratio: 8 / 7;
    border-radius: 18px; overflow: hidden;
    background: #D9DCCB url(../img/ridges-1440.webp) 50% 50% / cover no-repeat;
    box-shadow: var(--shadow-2);
  }
  .step__pic .scn { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scn, .scn * { transition: none !important; }
}
/* телефон боком: картинка шага не выше экрана */
@media (orientation: landscape) and (max-height: 500px) {
  .step__pic { max-width: calc((100svh - 64px) * 8 / 7); }
}