/* Демо стола (З-061): плашка режима, отказ правки, плашка входа.
   Токены темы; у пульта демо — свой фиолетовый (ниже), золото — рамкой
   (docs/standards/ui.md §«Золото — только под инверсным текстом»). */

/* Полоса демо — СВОЙ цвет, не цвет стола (слово владельца 14.10: «сделать
   панель управления демо более заметной (другого цвета?) сейчас она сливается
   с интерфейсом»). Фиолетовый не встречается ни в одной теме стола, белый текст
   на нём — 7:1; одинаков в светлой и тёмной теме, чтобы полоса читалась как
   «пульт демо поверх продукта», а не часть продукта. */
:root {
  --pf-demo-ink: #ffffff;
  --pf-demo-fill: #6d28d9;
  --pf-demo-fill-strong: #5b21b6;
  --pf-demo-glow: #a78bfa;
}

.pf-demo__strip {
  position: fixed;
  /* Над строкой состояния стола; по центру без transform — с left: 50%
     ширина полосы ужималась до половины экрана и пульт ломался на две строки. */
  left: 0;
  right: 0;
  bottom: calc(var(--pf-space-md) * 3);
  width: max-content;
  margin-inline: auto;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--pf-space-sm);
  max-width: calc(100vw - 2 * var(--pf-space-md));
  padding: var(--pf-space-sm) var(--pf-space-md);
  border: 2px solid var(--pf-demo-glow);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-demo-fill);
  color: var(--pf-demo-ink);
  font-size: var(--pf-typography-body-size, 15px);
  box-shadow: 0 0 0 4px rgb(109 40 217 / 0.25), 0 8px 24px rgb(0 0 0 / 0.35);
}

.pf-demo__badge {
  padding: 1px var(--pf-space-sm);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-demo-ink);
  color: var(--pf-demo-fill-strong);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pf-demo__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.pf-demo__select {
  border: 1px solid var(--pf-demo-ink);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-demo-fill-strong);
  color: var(--pf-demo-ink);
  font: inherit;
}

/* Главный призыв полосы — белая кнопка с фиолетовым текстом. */
.pf-demo__cta {
  padding: 2px var(--pf-space-md);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-demo-ink);
  color: var(--pf-demo-fill-strong);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.pf-demo__cta:hover,
.pf-demo__cta:focus-visible {
  outline: 2px solid var(--pf-demo-glow);
  outline-offset: 2px;
}

/* «Tour», другой режим — белой рамкой на фиолетовом. */
.pf-demo__tour {
  padding: 2px var(--pf-space-sm);
  border: 1px solid var(--pf-demo-ink);
  border-radius: var(--pf-radius-pill);
  background: transparent;
  color: var(--pf-demo-ink);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.pf-demo__tour:hover,
.pf-demo__tour:focus-visible {
  background: var(--pf-demo-fill-strong);
  outline: 2px solid var(--pf-demo-glow);
}


.pf-demo__toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pf-space-md) * 6);
  transform: translateX(-50%);
  z-index: 901;
  max-width: min(560px, calc(100vw - 2 * var(--pf-space-md)));
  padding: var(--pf-space-sm) var(--pf-space-md);
  border: 2px solid var(--pf-demo-fill);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
  color: var(--pf-color-text-primary);
}

.pf-demo__toast[hidden] {
  display: none;
}

.pf-demo__intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pf-space-md);
  background: rgb(0 0 0 / 0.55);
}

.pf-demo__card {
  max-width: 560px;
  padding: var(--pf-space-lg);
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-color-surface-raised);
  color: var(--pf-color-text-primary);
}

.pf-demo__card h2 {
  margin: 0 0 var(--pf-space-md);
  font-family: var(--pf-typography-heading2-family);
}

.pf-demo__honest {
  color: var(--pf-color-text-secondary);
}

/* «Всё сохранено» в строке состояния в демо — неправда: демо ничего не
   сохраняет (плашка входа, полоса режима). «Первые шаги · N из 5» — ход
   онбординга аккаунта стенда записи, не посетителя; в демо ведёт гид.
   Прячем, не меняя стол. */
#wb-status-saved,
#wb-status-steps {
  display: none !important;
}

/* Выбор режима на плашке входа: «готовая книга» / «книга с нуля». Две
   равные карточки-кнопки рамкой (не заливкой акцента — правило золота). */
.pf-demo__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pf-space-sm);
  margin: var(--pf-space-md) 0;
}

.pf-demo__choice {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-md);
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-sunken);
  color: var(--pf-color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pf-demo__choice:hover,
.pf-demo__choice:focus-visible {
  border-color: var(--pf-color-border-focus);
  background: var(--pf-color-surface-selected);
}

.pf-demo__choice strong {
  font-size: 1.05em;
}

.pf-demo__choice span {
  color: var(--pf-color-text-secondary);
}

/* Строка «на самом деле этот шаг занял …» в пузырьке гида книги с нуля. */
.pf-demo__took {
  margin: var(--pf-space-xs) 0 0;
  color: var(--pf-color-text-secondary);
  font-size: 0.92em;
}

/* ------------------------------------------------------------------------
   Книга сама (режим 2, demo-play.js): карточка шага в углу, пульсирующая
   рамка на кнопке следующего шага, ход задания, «что изменилось».
   Цвет — фиолетовый пульта демо: подсказки демо не путаются со столом. */

.pf-demo__pulse {
  position: fixed;
  z-index: 950;
  display: none;
  border: 3px solid var(--pf-demo-fill);
  border-radius: var(--pf-radius-md);
  box-shadow: 0 0 0 4px rgb(167 139 250 / 0.45);
  pointer-events: none;
  animation: pf-demo-pulse 1.4s ease-in-out infinite;
}

@keyframes pf-demo-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgb(167 139 250 / 0.55);
  }
  50% {
    box-shadow: 0 0 0 10px rgb(167 139 250 / 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-demo__pulse {
    animation: none;
  }
}

.pf-demo__coach {
  position: fixed;
  left: var(--pf-space-md);
  bottom: calc(var(--pf-space-md) * 6.5);
  z-index: 940;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
  width: min(380px, calc(100vw - 2 * var(--pf-space-md)));
  max-height: min(62vh, calc(100vh - var(--pf-space-md) * 12));
  overflow-y: auto;
  padding: var(--pf-space-md);
  border: 2px solid var(--pf-demo-fill);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-color-surface-raised);
  color: var(--pf-color-text-primary);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.35);
}

.pf-demo__coach-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pf-space-xs) var(--pf-space-sm);
}

.pf-demo__coach-count {
  padding: 0 var(--pf-space-sm);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-demo-fill);
  color: var(--pf-demo-ink);
  font-size: 0.85em;
  font-weight: 600;
}

.pf-demo__coach-title {
  flex: 1;
  font-size: 1.05em;
}

.pf-demo__coach-text,
.pf-demo__done-text {
  margin: 0;
  line-height: 1.45;
}

.pf-demo__coach-took {
  margin: 0;
  color: var(--pf-color-text-secondary);
  font-size: 0.92em;
}

.pf-demo__coach-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-sm);
}

/* «Сделать за меня» — главная кнопка карточки: заливка фиолетовым, белый текст. */
.pf-demo__coach-auto {
  padding: var(--pf-space-xs) var(--pf-space-md);
  border: 0;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-demo-fill);
  color: var(--pf-demo-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pf-demo__coach-auto:hover,
.pf-demo__coach-auto:focus-visible {
  background: var(--pf-demo-fill-strong);
  outline: 2px solid var(--pf-demo-glow);
  outline-offset: 2px;
}

.pf-demo__coach-auto:disabled {
  opacity: 0.6;
  cursor: progress;
}

.pf-demo__coach-quiet,
.pf-demo__coach-fold {
  padding: 2px var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-pill);
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.pf-demo__coach-quiet:hover,
.pf-demo__coach-fold:hover {
  border-color: var(--pf-demo-glow);
  color: var(--pf-color-text-primary);
}

/* Ход задания. */
.pf-demo__job {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.pf-demo__job-head {
  display: flex;
  align-items: center;
  gap: var(--pf-space-xs);
  margin: 0;
  font-weight: 600;
}

.pf-demo__job-speed {
  color: var(--pf-color-text-secondary);
  font-weight: 400;
}

.pf-demo__job-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pf-demo-fill);
  animation: pf-demo-pulse 1s ease-in-out infinite;
}

.pf-demo__job-bar {
  height: 6px;
  overflow: hidden;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-color-surface-sunken);
}

.pf-demo__job-bar i {
  display: block;
  height: 100%;
  background: var(--pf-demo-fill);
  transition: width 0.3s linear;
}

.pf-demo__calls {
  margin: 0;
  padding-left: var(--pf-space-md);
  font-size: 0.9em;
  line-height: 1.4;
}

.pf-demo__call-at {
  color: var(--pf-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.pf-demo__typed {
  max-height: 180px;
  margin: 0;
  overflow: hidden;
  padding: var(--pf-space-sm);
  border-left: 3px solid var(--pf-demo-glow);
  background: var(--pf-color-surface-sunken);
  color: var(--pf-color-text-primary);
  font-family: var(--pf-typography-body-family, inherit);
  font-size: 0.88em;
  line-height: 1.45;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column-reverse;
}

/* Итог шага: что изменилось в каноне. */
.pf-demo__done {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding-bottom: var(--pf-space-sm);
  border-bottom: 1px solid var(--pf-color-border-subtle);
}

.pf-demo__done-head {
  margin: 0;
  font-weight: 600;
}

.pf-demo__done-sub {
  margin: var(--pf-space-xs) 0 0;
  color: var(--pf-color-text-secondary);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pf-demo__changes {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
}

.pf-demo__change {
  padding: var(--pf-space-sm);
  border-left: 3px solid var(--pf-demo-glow);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-sunken);
}

.pf-demo__change-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-xs) var(--pf-space-sm);
}

.pf-demo__change-head strong {
  flex: 1;
}

.pf-demo__change-new {
  padding: 0 var(--pf-space-xs);
  border: 1px solid var(--pf-demo-glow);
  border-radius: var(--pf-radius-pill);
  font-size: 0.8em;
}

.pf-demo__change-heading {
  margin: var(--pf-space-xs) 0 0;
  color: var(--pf-color-text-secondary);
  font-size: 0.85em;
}

.pf-demo__change ul {
  margin: 2px 0 0;
  padding-left: var(--pf-space-md);
  font-size: 0.88em;
  line-height: 1.4;
}

.pf-demo__change-more {
  margin: 2px 0 0;
  color: var(--pf-color-text-secondary);
  font-size: 0.85em;
}


.pf-demo__coach-scroll {
  margin: 0;
  padding-left: var(--pf-space-sm);
  border-left: 3px solid var(--pf-demo-fill);
  font-weight: 600;
}

.pf-demo__done > .pf-demo__coach-quiet {
  align-self: flex-start;
}

/* Меню «⋯» полосы и короткий призыв — только на телефоне (ниже). */
.pf-demo__extra {
  display: contents;
}

.pf-demo__more,
.pf-demo__cta-short {
  display: none;
}

/* ------------------------------------------------------------------------
   Телефон (З-066, слово владельца 14.10: «смотреть деморежим обычно будут на
   смартфоне … оптимизировать под него»). Только страница /demo; стол на
   компьютере не меняется. Тот же запрос — PHONE в demo-mode.js.
   - полоса демо — одна тонкая строка внизу на месте строки состояния;
   - шапка и путь романа — по одной строке, лишнее листается вбок;
   - колонки стола листаются вбок с привязкой к колонке: сцены → текст →
     правая панель — касанием.
   Селекторы стола — через :root: demo-mode.css стоит первым в <head>, и
   workbench.css с той же силой селектора перебил бы эти правила. */
@media (max-width: 760px), (max-height: 500px) {
  :root {
    --pf-demo-bar: 40px;
  }

  .pf-demo__strip {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    min-height: var(--pf-demo-bar);
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    border-width: 2px 0 0;
    border-radius: 0;
    font-size: 13px;
    box-shadow: none;
  }

  .pf-demo__text {
    display: none;
  }

  .pf-demo__cta {
    margin-left: auto;
    padding: 2px var(--pf-space-sm);
  }

  .pf-demo__cta-long {
    display: none;
  }

  .pf-demo__cta-short {
    display: inline;
  }

  .pf-demo__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    border: 1px solid var(--pf-demo-ink);
    border-radius: var(--pf-radius-pill);
    background: transparent;
    color: var(--pf-demo-ink);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  /* Меню «⋯»: Tour, другой режим, язык — столбиком над полосой. */
  .pf-demo__extra {
    display: none;
  }

  .pf-demo__strip--open .pf-demo__extra {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 6px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--pf-demo-glow);
    border-radius: var(--pf-radius-md);
    background: var(--pf-demo-fill);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  }

  .pf-demo__strip--open .pf-demo__tour,
  .pf-demo__strip--open .pf-demo__select {
    min-height: 34px;
    font-size: 14px;
  }

  .pf-demo__toast {
    bottom: calc(var(--pf-demo-bar) + 12px);
  }

  /* Стол — над полосой; строка состояния в демо не нужна (полоса на её месте). */
  :root .wb-page--desk {
    height: calc(100dvh - var(--pf-demo-bar) - env(safe-area-inset-bottom, 0px));
  }

  :root .wb-status {
    display: none !important;
  }

  /* Шапка — одна строка, кнопки листаются вбок. */
  :root .wb-top {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 8px;
    scrollbar-width: none;
  }

  :root .wb-top::-webkit-scrollbar,
  :root .wb-stagebar__row::-webkit-scrollbar {
    display: none;
  }

  :root .wb-top > * {
    flex: none;
  }

  :root .wb-top__novel {
    max-width: 14ch;
    padding-left: var(--pf-space-sm);
  }

  :root .wb-top__spacer {
    display: none;
  }

  /* Путь романа — одна строка (свёрнут по умолчанию, demo-mode.js). */
  :root .wb-stagebar {
    padding: 2px 8px;
  }

  :root .wb-stagebar__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  :root .wb-stagebar__row > * {
    flex: none;
  }

  :root .wb-stagebar--closed .wb-stagebar__opt {
    display: none;
  }

  /* Колонки — листание вбок с привязкой: касание ведёт от панели к панели. */
  :root .wb-desk {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  :root .wb-desk > .wb-col {
    scroll-snap-align: start;
  }

  :root .wb-desk > .wb-split {
    display: none;
  }

  /* Плашка входа: на низком экране карточка листается. */
  .pf-demo__intro {
    align-items: flex-start;
    overflow-y: auto;
  }

  .pf-demo__card {
    padding: var(--pf-space-md);
  }

  /* Гид книги сама — лист над полосой во всю ширину. */
  .pf-demo__coach {
    left: 0;
    right: 0;
    bottom: calc(var(--pf-demo-bar) + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 42vh;
    padding: var(--pf-space-sm) var(--pf-space-md);
    border-width: 2px 0 0;
    border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
  }
}

/* Телефон вертикально: колонка — почти весь экран, край соседней виден. */
@media (max-width: 760px) {
  :root .wb-desk > .wb-col {
    flex: 0 0 90vw !important;
    width: 90vw !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}