/**
 * YAZME · КНИГИ — общая витрина
 * ---------------------------------------------------------------------------
 * Этот файл идёт ПОВЕРХ /story/assets/story.css. Оттуда мы намеренно берём
 * готовый конструктор обложек (.st-cover со всеми темами и коллажами) —
 * дублировать семь тем ради второй витрины было бы враньём про «одну систему».
 * Здесь только то, чего в story.css нет: сводный чарт, сетка каталога,
 * бейдж интерактивной книги и экран выбора при создании.
 *
 * Префикс yzb- (yazme books). Шапка раздела живёт в includes/yz_books_topbar.php.
 */

:root{
  --yzb-world:#c084fc;          /* цвет интерактивных книг — один на весь раздел */
  --yzb-text:#7c6cff;
  --yzb-gap:clamp(12px,2vw,20px);
}

.yzb-app{
  min-height:100dvh;
  background:var(--yz-bg,#101218);
  color:var(--yz-text,#e9ebf1);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); /* под доком сайта */
}
.yzb-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(12px,3vw,26px)}
.yzb-app a{color:inherit;text-decoration:none}

/* ------------------------------------------------------------ типографика */
.yzb-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yz-text-soft,#8b93a7);font-weight:700}
.yzb-h1{font-size:clamp(24px,4vw,36px);line-height:1.14;letter-spacing:-.025em;margin:4px 0 0;font-weight:800}
.yzb-h2{font-size:clamp(18px,2.4vw,23px);letter-spacing:-.015em;margin:0;font-weight:750}
.yzb-sub{color:var(--yz-text-soft,#8b93a7);font-size:14px}
.yzb-rowhead{display:flex;align-items:baseline;gap:14px;margin:34px 0 14px;flex-wrap:wrap}
.yzb-rowhead .yzb-sub{margin-left:auto}

/* ----------------------------------------------------------------- бейдж */
/* Единственное место, где читатель видит разницу движков. Сидит на обложке,
   а не поперёк дороги: тип книги — свойство карточки, а не отдельный раздел. */
.yzb-badge{position:absolute;top:7px;left:7px;z-index:4;
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;
  background:var(--yzb-world);color:#20123a;font:800 11px/1 Inter,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.yzb-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--yzb-world) 45%,transparent);
  background:color-mix(in srgb,var(--yzb-world) 12%,transparent);
  color:var(--yzb-world);font:800 9.5px/1.6 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}

/* ------------------------------------------------------------------ чарт */
.yzb-chart-top{display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:clamp(16px,3vw,28px);
  align-items:center;margin-top:18px}
.yzb-chart-top .cv{position:relative;display:block}
.yzb-chart-top .rk{position:absolute;right:-10px;top:-14px;z-index:5;
  font:900 44px/1 Inter,sans-serif;color:#fff;text-shadow:0 4px 22px rgba(0,0,0,.75)}
.yzb-chart-top h3{font-size:clamp(20px,3vw,28px);letter-spacing:-.025em;margin:0 0 4px;font-weight:800}
.yzb-chart-top .an{color:var(--yz-text-soft,#8b93a7);font-size:14px;margin:8px 0 12px;max-width:58ch}
.yzb-chart-top .st{color:var(--yz-text-soft,#8b93a7);font-size:13.5px}
.yzb-chart-top .st b{color:var(--yz-text,#e9ebf1)}

.yzb-chart{margin-top:22px}
.yzb-chrow{display:grid;grid-template-columns:34px 46px 1fr auto auto;gap:14px;align-items:center;
  padding:9px 8px;border-radius:12px;border-bottom:1px solid var(--yz-line,rgba(255,255,255,.07));
  transition:background .15s}
.yzb-chrow:hover{background:var(--yz-surface,rgba(255,255,255,.05))}
.yzb-chrow .rk{font:800 16px/1 Inter,sans-serif;color:var(--yz-text-soft,#8b93a7);text-align:center}
.yzb-chrow .cv{width:46px;position:relative}
.yzb-chrow .i{min-width:0}
.yzb-chrow .t{font-size:14.5px;font-weight:650;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  overflow:hidden;text-overflow:ellipsis}
.yzb-chrow .a{font-size:12.5px;color:var(--yz-text-soft,#8b93a7)}
.yzb-chrow .g,.yzb-chrow .n{font-size:13px;color:var(--yz-text-soft,#8b93a7);text-align:right;white-space:nowrap}
.yzb-chrow .n small{display:block;font-size:10.5px;opacity:.75}
.yzb-chrow[hidden]{display:none}
@media(max-width:640px){
  .yzb-chrow{grid-template-columns:26px 40px 1fr auto;gap:10px}
  .yzb-chrow .g{display:none}
}

.yzb-more{display:block;margin:16px auto 0;border:1px solid var(--yz-line,rgba(255,255,255,.12));
  background:transparent;color:var(--yz-text-soft,#8b93a7);border-radius:22px;padding:9px 20px;
  font:650 13.5px Inter,sans-serif;cursor:pointer}
.yzb-more:hover{color:var(--yz-text,#e9ebf1)}

/* --------------------------------------------------------------- каталог */
.yzb-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 10px}
.yzb-fl{border:1px solid var(--yz-line,rgba(255,255,255,.12));border-radius:22px;padding:7px 15px;
  font:600 13.5px Inter,sans-serif;color:var(--yz-text-soft,#8b93a7);cursor:pointer;transition:.15s;
  background:transparent;white-space:nowrap}
.yzb-fl:hover{color:var(--yz-text,#e9ebf1)}
.yzb-fl.on{background:var(--yz-text,#e9ebf1);color:var(--yz-bg,#101218);border-color:transparent;font-weight:700}
.yzb-fl.world{border-color:color-mix(in srgb,var(--yzb-world) 45%,transparent);color:var(--yzb-world)}
.yzb-fl.world.on{background:var(--yzb-world);color:#20123a}
.yzb-sep{width:1px;height:22px;background:var(--yz-line,rgba(255,255,255,.14));margin:0 4px}

.yzb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--yzb-gap);margin-top:8px}
.yzb-gc{display:block}
.yzb-gc .cv{position:relative}
.yzb-gc .t{font-size:13px;font-weight:650;margin-top:8px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yzb-gc .a{font-size:11.5px;color:var(--yz-text-soft,#8b93a7);margin-top:2px}

/* --------------------------------------------------------------- авторы */
.yzb-authors{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.yzb-au{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;
  border:1px solid var(--yz-line,rgba(255,255,255,.09));background:var(--yz-card,rgba(255,255,255,.03));transition:.15s}
.yzb-au:hover{border-color:var(--yz-line-strong,rgba(255,255,255,.2))}
.yzb-au .av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--yz-surface,#262b36);font:700 13px Inter,sans-serif;color:var(--yz-text-soft,#8b93a7)}
.yzb-au .av img{width:100%;height:100%;object-fit:cover;display:block}
.yzb-au .n{display:block;font-size:13.5px;font-weight:650}
.yzb-au .c{display:block;font-size:11.5px;color:var(--yz-text-soft,#8b93a7)}

/* ------------------------------------------------- экран выбора создания */
.yzb-create{padding:clamp(26px,6vw,54px) 0 30px;text-align:center}
.yzb-create h1{font-size:clamp(24px,4.2vw,34px);letter-spacing:-.025em;margin:0 0 8px;font-weight:800}
.yzb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;
  max-width:820px;margin:26px auto 0;text-align:left}
.yzb-tile{position:relative;overflow:hidden;display:block;padding:22px;border-radius:18px;
  border:1px solid var(--yz-line,rgba(255,255,255,.1));background:var(--yz-card,rgba(255,255,255,.03));
  transition:.18s}
.yzb-tile:hover{transform:translateY(-2px);border-color:var(--yz-line-strong,rgba(255,255,255,.22))}
.yzb-tile .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:20px;margin-bottom:13px}
.yzb-tile.t .ic{background:color-mix(in srgb,var(--yzb-text) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--yzb-text) 38%,transparent)}
.yzb-tile.w .ic{background:color-mix(in srgb,var(--yzb-world) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--yzb-world) 38%,transparent)}
.yzb-tile h3{margin:0 0 6px;font-size:19px;font-weight:750;letter-spacing:-.015em}
.yzb-tile p{margin:0 0 12px;color:var(--yz-text-soft,#8b93a7);font-size:14px;line-height:1.55}
.yzb-tile ul{margin:0;padding-left:17px;color:var(--yz-text-soft,#8b93a7);font-size:12.5px}
.yzb-tile li{margin:4px 0}
.yzb-tile .go{margin-top:15px;display:inline-block;font-size:13.5px;font-weight:700}
.yzb-tile.t .go{color:var(--yzb-text)} .yzb-tile.w .go{color:var(--yzb-world)}
.yzb-tile .glow{position:absolute;right:-30%;bottom:-60%;width:230px;height:230px;border-radius:50%;
  filter:blur(52px);opacity:.35;pointer-events:none}
.yzb-tile.t .glow{background:var(--yzb-text)} .yzb-tile.w .glow{background:var(--yzb-world)}

/* ---------------------------------------------------------------- пустое */
.yzb-empty{text-align:center;padding:56px 20px;color:var(--yz-text-soft,#8b93a7)}
.yzb-empty .em{font-size:40px;margin-bottom:10px}
.yzb-note{border-left:3px solid var(--yzb-world);border-radius:0 12px 12px 0;padding:12px 16px;
  background:color-mix(in srgb,var(--yzb-world) 8%,transparent);font-size:13.5px;
  color:var(--yz-text-soft,#8b93a7);margin:16px 0}

/* Переключатель периода чарта: справа от заголовка на широком экране,
   отдельной строкой на телефоне — иначе он жмёт заголовок в две строки. */
.yzb-per{margin:0 0 0 auto}

/* --------------------------------------------------------------- телефон */
@media (max-width:620px){
  .yzb-per{margin:6px 0 0;width:100%}
  .yzb-rowhead{gap:8px;margin:26px 0 12px}
  .yzb-rowhead .yzb-sub{margin-left:0}

  /* первое место: обложка поменьше, а номер уезжает ВНУТРЬ обложки —
     снаружи он налезал на заголовок соседней колонки */
  .yzb-chart-top{grid-template-columns:96px 1fr;gap:14px}
  .yzb-chart-top .rk{font-size:26px;right:auto;left:6px;top:2px;
    text-shadow:0 2px 12px rgba(0,0,0,.9)}
  .yzb-pill{font-size:9px;padding:2px 6px}
  .yzb-chart-top .an{display:none}          /* аннотация уводит первый экран вниз */

  .yzb-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
  .yzb-authors{grid-template-columns:1fr}
  .yzb-tiles{gap:12px}
  .yzb-tile{padding:18px}
  .yzb-fl{padding:6px 13px;font-size:13px}
}

/* ------------------------------------------------------------- подвал */
.yzb-footer{margin-top:52px;padding:22px 0 10px;border-top:1px solid var(--yz-line,rgba(255,255,255,.08));
  color:var(--yz-text-soft,#8b93a7);font-size:13px;text-align:center}
.yzb-footer a{border-bottom:1px solid transparent}
.yzb-footer a:hover{border-color:currentColor}

/* Обложка внутри наших сеток: story.css задаёт .st-cover, нам нужно только
   гарантировать пропорцию и контейнер для cqw-размеров внутри тем. */
.yzb-app .st-cover{aspect-ratio:2/3;container-type:inline-size;border-radius:12px;overflow:hidden;position:relative}

/* Готовая картинка-обложка: ничего поверх неё не рисуем — ни названия, ни
   затемнения. Рисунок показываем как есть. */
.yzb-app .st-cover.yzb-cover-img{background:var(--yz-surface,#20242e)}
.yzb-app .st-cover.yzb-cover-img .photo{width:100%;height:100%;object-fit:cover;display:block}