/* Экран book-demo.html (T-003) — пример стилей экрана.
   Правило: только @layer screens, только токены, только классы с
   префиксом экрана (.demo-…), без изменений общих компонентов. */
@layer screens {
  /* Обложка */
  .demo-cover__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .demo-cover__visual .photo-frame { width: min(100%, 380px); }
  .demo-cover__title { margin-top: var(--space-1); }
  .demo-cover__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
  .demo-cover__themes { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

  /* Оглавление */
  .demo-toc__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
  .demo-toc__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; }
  @media (min-width: 640px) { .demo-toc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .demo-toc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* Неделя */
  .demo-week__photos { position: relative; }
  .demo-week__photos .photo-frame--mini { position: absolute; right: -2%; top: 14%; }
  .demo-week__photos > .photo-frame:first-child { width: 78%; }
  .demo-week__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
  .demo-week__num { font-size: calc(var(--fs-3xl) * var(--font-display-scale)); color: var(--color-accent-ink); }
  .demo-week__add { align-self: flex-start; }

  /* Ты родился */
  .demo-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .demo-facts > div { padding: var(--space-3) var(--space-4); background: var(--color-surface); border-radius: var(--radius-md); border: var(--border-width) var(--border-style) var(--color-line); }
  .demo-facts dt { font-size: var(--fs-xs); color: var(--color-ink-muted); }
  .demo-facts dd { margin: 0; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: calc(var(--fs-lg) * var(--font-display-scale)); }
  .demo-facts .demo-facts__wide { grid-column: 1 / -1; }
}
@layer screens {
  @media (max-width: 899px) {
    .demo-cover__visual .photo-frame { width: min(72%, 280px); }
  }
}