/* Экран readonly.html (T-009): книга по ссылке, режим «только чтение».
   Скрытие кнопок владельца — base.css ([data-readonly] [data-owner-only]).
   Здесь — плашка гостя и раскладка страниц (как в book-demo, префикс .ro-). */
@layer screens {
  /* ---------- Плашка «Вы смотрите дневник Миши» ---------- */
  .ro-banner { flex: none; padding: 0 var(--space-2) var(--space-2); }
  .ro-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    max-width: var(--spread-max);
    margin-inline: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-ink);
    border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  .ro-banner__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-page); color: var(--color-accent-ink); }
  .ro-banner__icon svg { width: 18px; height: 18px; }
  .ro-banner__text { flex: 1 1 14rem; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; }
  .ro-banner__text strong { color: var(--color-accent-ink); }
  .ro-banner__text span { color: var(--color-ink-muted); }
  .ro-banner__link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-sm); font-weight: 700; }
  @media (max-width: 599px) {
    .ro-banner__text span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ro-banner__inner { padding-block: var(--space-1); }
    .ro-banner__link { min-height: 32px; margin-left: calc(32px + var(--space-3)); }
  }
  @media (min-width: 900px) {
    .ro-banner { padding-inline: calc(var(--tap-lg) + var(--space-6)); }
  }

  /* ---------- Обложка ---------- */
  .ro-cover__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ro-cover__visual .photo-frame { width: min(72%, 280px); }
  .ro-cover__actions { gap: var(--space-3); margin-top: var(--space-2); }
  .ro-cover__by { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
  @media (min-width: 900px) { .ro-cover__visual .photo-frame { width: min(100%, 380px); } }

  /* ---------- Оглавление ---------- */
  .ro-toc__head { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); }
  .ro-toc__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .ro-toc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .ro-toc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ro-card--soon:hover { transform: none; box-shadow: var(--shadow-md); }
  .chapter-card--empty.ro-card--soon:hover { box-shadow: none; }

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

  /* ---------- Ты родился ---------- */
  .ro-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .ro-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); }
  .ro-facts dt { font-size: var(--fs-xs); color: var(--color-ink-muted); }
  .ro-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)); }
  .ro-facts .ro-facts__wide { grid-column: 1 / -1; }
  .ro-end { font-style: italic; }
}