/* Контентные страницы: лендинги разделов, хаб атласов.
 *
 * Отдельно от style.css: тот описывает сетку приложения на весь экран, а здесь обычный
 * документ в колонку. Страница обязана открываться мгновенно и читаться без JavaScript —
 * ни three.js, ни данных атласа она не грузит, только текст и одну картинку.
 * Переменные тем берутся из style.css, он подключается первым.
 */

.page{max-width:760px;margin:0 auto;padding-block:28px 56px;padding-inline:20px}
.page-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 20px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.page-bar .wordmark{font-size:17px}

.page h1{font-family:Spectral,Georgia,serif;font-size:31px;line-height:1.18;font-weight:600;
  letter-spacing:-.005em;margin:20px 0 14px}
.page h2{font-family:Spectral,Georgia,serif;font-size:21px;font-weight:600;margin:34px 0 10px}
.page h3{font-size:15px;font-weight:600;margin:20px 0 6px}
.page p{margin:0 0 12px;font-size:15.5px;line-height:1.62;color:var(--ink)}
.page .lead{font-size:17px;line-height:1.58;color:var(--ink2)}
.page a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:from-font}
.page ul{margin:0 0 12px;padding-left:20px}
.page li{font-size:15.5px;line-height:1.6;margin-bottom:5px}

.cta{display:inline-flex;align-items:center;gap:9px;margin:6px 0 10px;padding:12px 20px;
  background:var(--accent);color:var(--accent-ink);border-radius:10px;font-size:15.5px;
  font-weight:500;text-decoration:none;box-shadow:var(--shadow)}
.cta:hover{filter:brightness(1.07)}
.cta-note{font-size:13px;color:var(--ink3);margin:0 0 22px}

.shot{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--line);
  border-radius:12px;background:var(--stage-a);margin:0 0 8px}
figure{margin:20px 0}
figcaption{font-size:12.5px;color:var(--ink3);line-height:1.5}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line2);border:1px solid var(--line2);border-radius:10px;overflow:hidden;margin:18px 0 26px}
.facts div{background:var(--surface);padding:12px 14px}
.facts b{display:block;font-size:21px;font-family:Spectral,Georgia,serif;font-weight:600}
.facts span{font-size:12.5px;color:var(--ink3)}

.tbl-wrap{overflow-x:auto;margin:0 0 22px}
table.tbl{border-collapse:collapse;width:100%;font-size:14.5px}
table.tbl th{text-align:left;font-weight:600;font-size:12.5px;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.04em;padding:0 12px 7px 0;border-bottom:1px solid var(--line)}
table.tbl td{padding:8px 12px 8px 0;border-bottom:1px solid var(--line2);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl .la{font-style:italic;color:var(--ink2);white-space:nowrap}
table.tbl caption{caption-side:top;text-align:left;font-size:15px;font-weight:600;padding:14px 0 8px}

.qa{border-top:1px solid var(--line2);padding-top:14px;margin-top:14px}
.qa h3{margin-top:0}

.warn{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:8px;
  padding:13px 15px;margin:26px 0;background:var(--surface2)}
.warn p{font-size:14px;margin:0;color:var(--ink2)}
.warn strong{color:var(--ink)}

.src{font-size:13.5px;line-height:1.6;color:var(--ink2)}
.page-foot{border-top:1px solid var(--line);margin-top:40px;padding-top:18px;
  font-size:13px;color:var(--ink3);line-height:1.6}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:22px 0}
/* Рамку носит сам элемент сетки, а не ссылка: у раздела с разбором в карточке две
   ссылки — на трёхмерную модель и на текст, — и обёрткой им служит <div class="pair">.
   Имя «card» здесь занято: так в style.css зовётся панель структуры в приложении,
   и на узком экране она уезжает вниз через order — карточки хаба уехали бы с ней. */
.cards>a,.cards>.pair{display:flex;flex-direction:column;padding:16px 17px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  text-decoration:none;color:var(--ink)}
.cards>a:hover,.cards>.pair:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.cards .go{color:inherit;text-decoration:none}
.cards b{display:block;font-family:Spectral,Georgia,serif;font-size:17px;font-weight:600;margin-bottom:4px}
.cards span{font-size:13.5px;color:var(--ink2);line-height:1.5}
.cards .read{margin-top:auto;padding-top:11px;font-size:13px;color:var(--accent);
  text-decoration:none}
.cards .read:hover{text-decoration:underline}
.cards .soon{border-style:dashed;opacity:.72;pointer-events:none}
.cards .soon b::after{content:" — готовится";font-family:"IBM Plex Sans",sans-serif;
  font-size:11.5px;font-weight:400;color:var(--ink3);letter-spacing:.02em}

/* Список разборов соседних разделов в конце страницы. */
.page .also{list-style:none;padding:0;margin:0 0 8px}
.page .also li{font-size:14.5px;line-height:1.55;margin:0;padding:8px 0;color:var(--ink3);
  border-bottom:1px solid var(--line2)}
.page .also li:last-child{border-bottom:0}

/* ── страница пожеланий ───────────────────────────────────────────────────
 * Список живой: он приходит с /api/feedback/board уже после загрузки страницы.
 * Поэтому у карточек нет ни теней, ни рамок по кругу — только левая черта, которая
 * и кодирует состояние: серая у принятого, цвета акцента у взятого в работу,
 * зелёная у сделанного. Так состояние читается до того, как прочитан текст.
 */
.wishes{margin:22px 0 0;padding:0;list-style:none}
.wish{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;
  padding:15px 0 15px 14px;border-left:2px solid var(--line);border-bottom:1px solid var(--line2)}
.wish:first-child{border-top:1px solid var(--line2)}
.wish.planned{border-left-color:var(--accent)}
.wish.done{border-left-color:var(--good)}
.wish.declined{border-left-color:var(--line);opacity:.72}
.wish h3{margin:0 0 4px;font-family:Spectral,Georgia,serif;font-size:17px;font-weight:600;line-height:1.3}
.wish p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.wish .mark{margin-top:7px;font-size:13px;color:var(--ink3)}
.wish .mark b{font-weight:500;color:var(--good)}
.wish.planned .mark b{color:var(--accent)}
.wish .meta{margin-top:6px;font-size:12px;color:var(--ink3)}

/* голос: число крупно, подпись мелко — нажимать можно по всему прямоугольнику */
.wish .vote{display:flex;flex-direction:column;align-items:center;gap:1px;width:52px;padding:7px 0 6px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink2);
  font-variant-numeric:tabular-nums;transition:border-color .12s,color .12s}
.wish .vote b{font-size:16px;font-weight:600;line-height:1.1}
.wish .vote span{font-size:10.5px;letter-spacing:.02em}
.wish .vote:hover{border-color:var(--accent);color:var(--accent)}
.wish .vote.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.wish .vote:disabled{cursor:default;background:none;border-style:dashed}
.wish .vote:disabled:hover{border-color:var(--line);color:var(--ink3)}

.wish-empty{margin:20px 0;padding:16px 18px;border:1px dashed var(--line);border-radius:10px;
  font-size:14.5px;color:var(--ink2)}
.wish-load{margin:22px 0;font-size:14.5px;color:var(--ink3)}

/* форма прямо на странице: человек уже прочитал, чего просят другие, и дописывает своё */
.wish-form{margin:26px 0 0;padding:17px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface)}
.wish-form h2{margin:0 0 4px;font-size:18px}
.wish-form .chips{margin:12px 0 10px}
.wish-form textarea{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--line);
  border-radius:9px;color:var(--ink);font-family:inherit;font-size:14.5px;line-height:1.5;
  resize:vertical;min-height:92px}
.wish-form textarea:focus{outline:none;border-color:var(--accent)}
.wish-form .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.wish-form .say{font-size:12.5px;color:var(--ink3)}
.wish-form .say.bad{color:var(--bad)}
.wish-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ── страница отзывов ─────────────────────────────────────────────────────
 * Отзыв — цитата, поэтому и оформлен цитатой: крупнее и спокойнее карточки
 * пожелания, без кнопок. Левая черта различает тон: акцентная у благодарности,
 * тёплая предупредительная у критики — критика не прячется, но читается сразу.
 */
.reviews{margin:22px 0 0;padding:0;list-style:none}
.review{padding:16px 0 16px 16px;border-bottom:1px solid var(--line2);border-left:3px solid var(--accent);
  margin:0}
.review:first-child{border-top:1px solid var(--line2)}
.review.critique{border-left-color:var(--warn)}
.review blockquote{margin:0}
.review blockquote p{margin:0 0 8px;font-family:Spectral,Georgia,serif;font-size:17px;line-height:1.55;
  color:var(--ink)}
.review blockquote p:last-child{margin-bottom:0}
.review .answer{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--ink2)}
.review .answer b{font-weight:500;color:var(--accent)}
.review .meta{margin:8px 0 0;font-size:12px;color:var(--ink3)}

@media (max-width:560px){
  .page h1{font-size:25px}
  .page h2{font-size:19px}
  .page-bar{padding:9px 14px;gap:10px}
  .wish{grid-template-columns:44px minmax(0,1fr);gap:11px;padding-left:11px}
  .wish .vote{width:44px}
  .wish h3{font-size:16px}
  .review{padding-left:12px}
  .review blockquote p{font-size:16px}
}