/* Исторический задачник. Подключается слотом $extraCss только на своих
   страницах: в общий app.css это не идёт, как и стили схемы и игр.

   Переменная --c у каждого блока — цвет культуры (см. Problems::CULTURE_COLOR).
   Она красит вертикальную черту, точку и подписи, и больше ничего: цвет здесь
   служит указателем «откуда это», а не украшением. */

.page-problems .content{max-width:1000px}
.page-problems h1{margin-bottom:4px}

/* ── Сводка и служебные строки ─────────────────────────────────────────── */
.pb-stats{font-size:12.5px;letter-spacing:.6px;color:var(--text-dim);
  margin:14px 0 4px;line-height:1.9}
.pb-stats b{color:var(--text-soft);font-weight:600}
.pb-draft-note{font-size:12.5px;color:var(--gold);margin-top:2px}
.pb-draft{display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--sky);background:var(--gold);border-radius:3px;padding:1px 6px}
.pb-h2{font-family:Georgia,serif;font-weight:400;font-size:22px;
  margin:34px 0 6px;display:flex;align-items:baseline;gap:10px}
.pb-count{font-size:12px;letter-spacing:1.4px;color:var(--text-dim);
  font-family:'Segoe UI',system-ui,sans-serif}
.pb-back{margin-top:28px;font-size:13px}
.pb-back a{color:var(--text-dim)}
.pb-back a:hover{color:var(--link)}

/* ── Классы: строка кнопок ─────────────────────────────────────────────── */
.pb-chips{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 8px}
.pb-chip{display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 12px;border-radius:99px;text-decoration:none;
  border:1px solid var(--hairline);color:var(--text-dim);
  font-size:12.5px;letter-spacing:.4px;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.pb-chip b{font-weight:600;font-size:11px;color:var(--text-dim);opacity:.75}
.pb-chip:hover{color:var(--text);border-color:var(--link)}
.pb-chip.is-on{color:var(--sky);background:var(--gold);border-color:var(--gold)}
.pb-chip.is-on b{color:var(--sky);opacity:.7}

/* ── Обзор: культуры и их источники ────────────────────────────────────── */
.pb-culture{margin:22px 0 0;padding-left:16px;border-left:2px solid var(--c,#8fa3c4)}
.pb-culture h3{font-family:Georgia,serif;font-weight:400;font-size:19px;
  display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pb-culture h3 a{color:var(--c,var(--text));text-decoration:none}
.pb-culture h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.pb-sources{list-style:none;padding:0;margin:0;display:grid;gap:7px}
/* Строка источника: значок слева, название с датой — одним блоком справа.
   Блок нужен именно потому, что на телефоне дата переносится под название:
   без него она уходила бы под значок и столбец названий ломался. */
.pb-sources li{display:flex;align-items:center;gap:10px}
.pb-src-text{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
/* Значок обложки. Слот держится всегда, даже когда обложки нет: у сводных
   источников документа не существует, и таких девятнадцать — если слот
   убирать, столбец названий будет прыгать. Пустой слот ничего не рисует. */
.pb-src-cover{flex:none;display:block;width:34px;height:34px;border-radius:5px}
.pb-src-cover img{display:block;width:100%;height:100%;object-fit:cover;
  border-radius:5px;border:1px solid var(--hairline)}
.pb-src-cover:hover img{border-color:var(--c,var(--link))}
.pb-src-title{color:var(--text);text-decoration:none;font-size:15px;
  border-bottom:1px solid transparent}
.pb-src-title:hover{border-bottom-color:var(--c,var(--link))}
.pb-src-meta{font-size:11.5px;letter-spacing:.7px;color:var(--text-dim)}
/* «вне карты» — не украшение, а долг: у источника нет своей точки */
.pb-nomap{margin-left:6px;padding:1px 6px;border-radius:3px;
  border:1px dashed var(--hairline);font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text-dim)}
.pb-nomap-note{color:var(--text-dim);font-family:Georgia,serif}

/* ── Разделы школьного курса ───────────────────────────────────────────── */
.pb-topics{list-style:none;padding:0;margin:12px 0 0;
  display:flex;flex-wrap:wrap;gap:6px}
.pb-topics li{display:inline-flex;align-items:baseline;gap:6px;
  padding:4px 10px;border-radius:6px;border:1px solid var(--hairline);
  font-size:12.5px}
.pb-topics a{color:var(--text-soft);text-decoration:none}
.pb-topics li:hover{border-color:var(--link)}
.pb-topics li span{font-size:11px;color:var(--text-dim)}

/* ── Карточки задач ────────────────────────────────────────────────────── */
.pb-cards{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.pb-card{padding:14px 16px 12px;border-radius:11px;
  border:1px solid var(--hairline);border-left:3px solid var(--c,#8fa3c4);
  background:rgba(140,180,255,.05);
  transition:background-color .15s ease,border-color .15s ease}
html[data-theme="light"] .pb-card{background:rgba(70,110,160,.05)}
.pb-card:hover{background:rgba(140,180,255,.09)}
html[data-theme="light"] .pb-card:hover{background:rgba(70,110,160,.08)}
.pb-card-title{font-family:Georgia,serif;font-size:17.5px;color:var(--text);
  text-decoration:none;line-height:1.25}
.pb-card-title:hover{color:var(--c,var(--gold))}
.pb-card-src{font-size:11.5px;letter-spacing:.6px;color:var(--text-dim);margin-top:3px}
.pb-card-src a{color:var(--text-dim);text-decoration:none}
.pb-card-src a:hover{color:var(--link)}
.pb-card-text{font-size:13.5px;line-height:1.55;color:var(--text-soft);margin-top:7px}
.pb-card-meta{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text-dim);margin-top:9px}

/* ── Страница источника ────────────────────────────────────────────────── */
.pb-src h1{border-left:3px solid var(--c);padding-left:14px;margin-left:-17px}
.pb-orig-title{font-family:Georgia,serif;font-style:italic;color:var(--text-dim);
  margin-bottom:4px}
.pb-src-descr{margin:14px 0 18px;line-height:1.65;color:var(--text-soft)}
.pb-src-descr p{margin-bottom:10px}
/* Обложка источника — врезка справа, как портрет в биографии: рассказ о
   документе идёт рядом с самим документом, а не под ним. Правила .prose сюда
   не достают (страница источника не «проза»), поэтому вид задан целиком. */
/* Ширина врезки та же, что у портрета в биографии, но высота ограничена:
   титульный лист бывает вдвое выше рассказа о нём, и тогда слева остаётся
   пустое поле в полэкрана. Высокая обложка ужимается по высоте, а врезка
   обжимает её по ширине — поэтому width:auto, а не жёсткие 252. */
.pb-cover{float:right;width:auto;max-width:252px;margin:4px 0 16px 26px;clear:right}
.pb-cover img{display:block;width:auto;max-width:100%;max-height:380px;
  height:auto;border-radius:10px;
  border:1px solid var(--hairline);background:rgba(140,180,255,.05)}
html[data-theme="light"] .pb-cover img{background:rgba(70,110,160,.05)}
.pb-cover figcaption{font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;
  line-height:1.45;color:var(--text-dim);margin-top:7px;padding-left:2px}
.pb-cover .fig-credit{display:block;font-size:10.5px;letter-spacing:.6px;
  margin-top:3px;color:var(--text-dim);opacity:.72;text-decoration:none}
/* Титульный лист бывает высоким — выше всего рассказа о документе. Сетка
   карточек тогда встала бы рядом с обложкой и сузилась вдвое, поэтому список
   задач начинается ниже неё, а не сбоку. */
.pb-src .pb-h2{clear:right}

/* ── Чертёж задачи ─────────────────────────────────────────────────────
   Правила .prose сюда не достают: страница задачи — не «проза». Чертёж
   вклеивается в страницу целиком (см. figures()), поэтому переменные темы
   внутри него работают и он перекрашивается вместе с сайтом. */
.pb-fig{margin:26px 0 4px}
.pb-fig figure{margin:0}
.pb-fig svg{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}
.pb-fig img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto;
  border-radius:10px;border:1px solid var(--hairline)}
.pb-fig figcaption{max-width:760px;margin:8px auto 0;
  font-family:'Segoe UI',system-ui,sans-serif;font-size:12.5px;line-height:1.45;
  color:var(--text-dim);text-align:center}
.pb-fig .fig-credit{display:block;font-size:10.5px;letter-spacing:.6px;margin-top:3px;
  color:var(--text-dim);opacity:.72;text-decoration:none}

/* ── Страница задачи ───────────────────────────────────────────────────── */
.pb-kicker{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--c,var(--text-dim));margin-bottom:6px}
.pb-one h1{font-size:32px;line-height:1.15}
.pb-meta{font-size:12.5px;letter-spacing:.6px;color:var(--text-dim);margin-top:6px}

/* Два языка рядом. Слева подлинник, справа наша запись; посередине волосок —
   он и есть граница между языками. На узком экране колонки встают друг под
   друга, волосок переезжает наверх правой колонки. */
.pb-two{display:grid;gap:0 32px;margin:26px 0 0;
  grid-template-columns:1fr 1fr;align-items:start}
.pb-two-solo{grid-template-columns:1fr}
.pb-two>section{min-width:0}
.pb-two .pb-now{padding-left:32px;margin-left:-32px;
  border-left:1px solid var(--hairline)}
.pb-two-solo .pb-now{padding-left:0;margin-left:0;border-left:0}
.pb-two h2{font-family:Georgia,serif;font-weight:400;font-size:12px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--text-dim);
  margin-bottom:10px;font-style:normal}
.pb-then-body{font-family:Georgia,serif;font-size:16.5px;line-height:1.72;
  color:var(--text-soft);font-style:italic}
.pb-then-body p{margin-bottom:10px}
/* подлинник читается как выписка из документа, поэтому и подложка своя */
.pb-then{padding:14px 16px;border-radius:10px;
  background:color-mix(in srgb, var(--c) 9%, transparent)}
html[data-theme="light"] .pb-then{background:color-mix(in srgb, var(--c) 13%, transparent)}
.pb-now-body{font-size:16.5px;line-height:1.72;color:var(--text)}
.pb-now-body p{margin-bottom:10px}

.pb-answer{margin:24px 0 0}
.pb-answer>summary{font-size:13px}
.pb-answer .fold-body{font-size:17px;line-height:1.6}

.pb-block{margin-top:26px}
.pb-block h2{font-family:Georgia,serif;font-weight:400;font-size:12px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--text-dim);
  margin-bottom:8px}
.pb-block p{margin-bottom:10px;line-height:1.7;color:var(--text-soft)}
.pb-note{padding-left:16px;border-left:2px solid var(--c)}
.pb-todo{margin-top:22px;font-size:12.5px;color:var(--text-dim);font-style:italic}

/* ── Подвал задачи: строки «поле — значение» ───────────────────────────── */
.pb-foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--hairline)}
.pb-foot-row{font-size:13px;line-height:1.7;color:var(--text-soft);margin-bottom:3px}
.pb-foot-row>span:first-child{display:inline-block;min-width:132px;
  font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-dim);vertical-align:baseline}
.pb-foot-row a{color:var(--link);text-decoration:none}
.pb-foot-row a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Листание по источнику ─────────────────────────────────────────────── */
.pb-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.pb-nav a{display:block;padding:11px 14px;border-radius:10px;
  border:1px solid var(--hairline);text-decoration:none;
  font-family:Georgia,serif;font-size:15px;color:var(--text);
  transition:border-color .15s ease,background-color .15s ease}
.pb-nav a:hover{border-color:var(--c);background:rgba(140,180,255,.06)}
.pb-nav span{display:block;font-family:'Segoe UI',system-ui,sans-serif;
  font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:3px}
.pb-next{text-align:right}

/* ── Узкий экран ───────────────────────────────────────────────────────── */
@media (max-width:820px){
  .pb-two{grid-template-columns:1fr;gap:20px}
  .pb-two .pb-now{padding-left:0;margin-left:0;border-left:0;
    padding-top:18px;border-top:1px solid var(--hairline)}
  .pb-one h1{font-size:26px}
  .pb-foot-row>span:first-child{display:block;min-width:0;margin-bottom:1px}
}
@media (max-width:560px){
  .pb-cover{float:none;width:100%;max-width:none;margin:14px 0 18px}
  .pb-cover img{max-height:none;width:100%}
  .pb-nav{grid-template-columns:1fr}
  .pb-next{text-align:left}
  .pb-src h1{margin-left:0;padding-left:12px}
}