/* Оформление «Современный» поверх общих стилей: тёплая «бумага», терракотовый акцент, плотный текст; пост как на Medium (без рамки, одна широкая колонка,
   подпись автора над текстом), комментарии как на Reddit (плотное дерево без карточек, действия
   появляются при наведении). Шрифт — Manrope везде. Подключается последним (base.html). */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f9f6f0; --surface: #f9f6f0; --fg: #2b2724; --fg-read: #312c28; --muted: #776d63; --faint: #978c80;
  --line: #ebe4d9; --line-strong: #dcd2c3; --accent: #b4532a; --accent-soft: #f5e6dc;
  --hover: #f3eee5; --control: #efe8dd; --quote-bg: #f1ebe1; --hl: #fbeccb;
  /* «полезный» — тот же тёплый тон, что бумага: чуть темнее заливка и коричневая метка, без нового оттенка */
  --useful: #7a6544; --useful-soft: #f1e9d8;
  --useful-mark: #3f6fb5; /* только метка «◆ N» свёрнутой ветки: должна отличаться от заливки */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --display: var(--font);
  --col: 1000px;           /* колонка страницы темы */
  --fs-read: 17.5px; --lh-read: 1.65; --fs-read-m: 17px;
  --fs-c: 14.5px; --lh-c: 1.5; --fs-c-m: 15px;
  --clamp-lines: 5;        /* длинный комментарий обрезается до стольких строк (forum.js) */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #1b1916; --surface: #1b1916; --fg: #ebe4d8; --fg-read: #e2dacd; --muted: #a99e90; --faint: #847a6e;
  --line: #2c2823; --line-strong: #423c34; --accent: #e98a5c; --accent-soft: #3a261b;
  --hover: #23201c; --control: #2a2621; --quote-bg: #23201c; --hl: #3a301b;
  --useful: #c9b48a; --useful-soft: #26221b; --useful-mark: #8fb4ea;
} }
:root[data-theme="dark"] {
  --bg: #1b1916; --surface: #1b1916; --fg: #ebe4d8; --fg-read: #e2dacd; --muted: #a99e90; --faint: #847a6e;
  --line: #2c2823; --line-strong: #423c34; --accent: #e98a5c; --accent-soft: #3a261b;
  --hover: #23201c; --control: #2a2621; --quote-bg: #23201c; --hl: #3a301b;
  --useful: #c9b48a; --useful-soft: #26221b; --useful-mark: #8fb4ea;
}

/* ---------- шапка: тише, без «пилюль» ---------- */
.top { background: var(--bg); }
.top-in { min-height: 60px; padding-block: 8px; gap: 22px; }
.logo { font-size: 21px; letter-spacing: -0.03em; font-weight: 800; }
.nav a { padding: 8px 10px; font-weight: 500; border-radius: 8px; }
.nav a.on { background: none; color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); border-radius: 0; }
.search input { background: var(--control); border-color: transparent; }
h1 { font-weight: 800; letter-spacing: -0.025em; }
.keys-hint { color: var(--faint); font-size: 12px; }

/* ---------- страница темы — одна широкая колонка по центру ---------- */
.page:has(.th-meta) { max-width: calc(var(--col) + 40px); padding-top: 36px; }
.page:has(.th-meta) h1 { font-size: 30px; line-height: 1.18; margin-bottom: 18px; }
.crumbs { margin-bottom: 18px; }

/* мета темы: тихие текстовые кнопки вместо «пилюль» */
.th-meta { gap: 6px 14px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.th-meta .btn { background: none; border: 0; min-height: 0; padding: 4px 2px; color: var(--muted); font-weight: 500; }
.th-meta .btn:hover { background: none; color: var(--fg); }
.th-meta .btn[aria-pressed="true"] { background: none; color: var(--accent); }
.th-meta a { color: var(--muted); }
.th-meta a:hover { color: var(--fg); }
.src { background: none; }

/* ---------- пост: без рамки и колонки автора ---------- */
/* Подпись «аватар · имя · дата» над текстом собирается сеткой: блоки .author и .body не рисуются
   (display: contents), их содержимое встаёт в сетку поста. Разметка та же, что у «Тетради». */
.post.op:not(.article) { display: grid; grid-template-columns: 32px auto minmax(0, 1fr); column-gap: 10px;
  align-items: center; border: 0; background: none; border-radius: 0; }
.post.op:not(.article) > .author, .post.op:not(.article) > .body { display: contents; }
.post.op:not(.article) .ava { grid-column: 1; grid-row: 1 / span 2; width: 32px; height: 32px; margin: 0; font-size: 12px; }
.post.op:not(.article) .a-name { grid-column: 2; grid-row: 1; font-size: 15px; }
.post.op:not(.article) .author .badge { grid-column: 3; grid-row: 1; justify-self: start; margin: 0; }
.post.op:not(.article) .a-sub { display: none; }
.post.op:not(.article) .b-head { grid-column: 2 / -1; grid-row: 2; margin: 0; font-size: 14px; }
.post.op:not(.article) .body > :not(.b-head) { grid-column: 1 / -1; }
.post.op:not(.article) .text { margin-top: 16px; }
.post.op.article { border: 0; background: none; }
.post.op.article .body { padding-inline: 0; }
.post.op.article .body > * { max-width: none; }

.post.op .text, .post.article .text { font-size: var(--fs-read); line-height: var(--lh-read); max-width: none; color: var(--fg-read); }
.post.op .text p, .post.article .text p { margin: 0 0 1.1em; }
.post.op .text blockquote { margin: 1.2em 0; padding: 0 0 0 22px; border-left: 3px solid var(--fg); color: var(--fg); font-style: italic; }
.post.op .text ul, .post.op .text ol { padding-left: 1.3em; margin-bottom: 1.1em; }
.post.op .text li + li { margin-top: .45em; }
.post.op .text b, .post.op .text strong { font-weight: 700; }
.text a { color: inherit; text-decoration-color: var(--line-strong); }
.text a:hover { color: var(--accent); text-decoration-color: currentColor; }
.post.op .media { margin-top: 22px; }
.post.op .reacts { margin-top: 18px; }
.post.op .acts { margin-top: 12px; }
.re { background: none; }

/* действия: тихий текст вместо ряда серых «пилюль» */
.acts { gap: 2px 14px; }
.acts a, .acts button { background: none; padding: 2px 0; min-height: 0; color: var(--faint); font-weight: 500; }
.acts a:hover, .acts button:hover, .acts button[aria-pressed="true"] { background: none; color: var(--accent); }

/* ---------- панель над комментариями и «лучшие ответы» — без рамок ---------- */
.toolbar { margin-top: 28px; border-bottom: 0; }
.toolbar .count { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.toolbar .btn { background: none; border-color: var(--line); font-weight: 500; }
.viewsw { background: none; }
.best { border: 0; background: none; border-radius: 0; margin: 4px 0 20px; }
.best h3 { border: 0; padding: 0 0 6px; }
.best li { padding: 8px 0; border-top: 1px solid var(--line); }

/* ---------- дерево комментариев: плотно, без карточек, тонкие направляющие ---------- */
.comments.tree { --indent: 18px; --line-w: 1.5px; background: none; border: 0; border-radius: 0; padding: 0; }
.comments.tree .post.c, .comments.tree .post.c + .post.c { padding: 6px 8px 6px calc(var(--depth, 0) * var(--indent) + 4px); background-position: 13px 0; }
.comments.tree .folded, .comments.tree .more-branch { background-position: 13px 0; }
.comments.tree [data-rail-highlight]::after { left: calc(13px + var(--rail-depth) * var(--indent)); }
.comments.tree .post.c[data-depth="0"], .comments.tree .post.c + .post.c[data-depth="0"] { border-top: 1px solid var(--line); }
.comments.tree .post.c:is(:hover, :focus-within) { background-color: transparent; }
.comments.tree .post.c.collapsed, .comments.tree .post.c + .post.c.collapsed { padding-block: 4px; }
.comments.tree .text { font-size: var(--fs-c); line-height: var(--lh-c); max-width: none; }
.comments.tree .b-head { font-size: 12px; gap: 2px 8px; margin-bottom: 3px; }
.comments.tree .b-head .ava { width: 20px; height: 20px; font-size: 9px; }
.comments.tree .b-head .num-id { opacity: 0; }
.comments.tree .post.c:is(:hover, :focus-within) .b-head .num-id { opacity: 1; }
/* без мыши номер не проявится, а невидимый он переносится на вторую строку шапки */
@media (hover: none) { .comments.tree .b-head .num-id { display: none; } }
.comments.tree .quote { background: none; border-left-width: 2px; padding: 0 10px; }
.comments.tree .re { border-color: var(--line); padding: 2px 9px; }
.fold-btn { border: 0; background: none; width: 22px; min-width: 22px; height: 22px; padding: 0; border-radius: 50%;
  line-height: 22px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--muted); }
.fold-btn:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* действия комментария: на устройствах с мышью — плавающая панель при наведении, строку не занимают */
@media (hover: hover) {
  .comments .post.c .acts { position: absolute; top: 6px; right: 6px; z-index: 2; margin: 0; padding: 4px 12px;
    gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
  .comments .post.c:is(:hover, :focus-within) .acts { opacity: 1; pointer-events: auto; }
}
/* сохранённый комментарий отмечен звёздочкой в шапке: кнопка видна только при наведении */
.comments .post.c:has(form[data-toggle="save"] [aria-pressed="true"]) .a-name::after { content: " ★"; color: var(--accent); }

/* полезный автор: заливка комментария без рамки, имя без синей метки-«бабла» (направляющие остаются поверх) */
.comments.tree .post.c.useful .a-name, .comments.tree .post.c.useful .a-name a { color: var(--fg); }
.comments.tree .post.c.useful .badge { display: none; }
.badge.useful { background: var(--useful); color: var(--bg); }
/* свёрнутая ветка с полезными авторами: «◆ N» рядом с «+N», чтобы их ответы не потерялись (forum.js) */
.fold-useful { background: var(--useful-mark); color: var(--bg); font-weight: 800; font-size: 12px; line-height: 1;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

/* «новое» — точка у шапки, а не заливка строки: при первом открытии новым оказывается всё */
.comments.tree .post.c.new-c, .comments.tree .post.c + .post.c.new-c { background-color: transparent; }
.comments.tree .b-head .new { font-size: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); align-self: center; }

/* «новое» + «полезный»: заливка полезного важнее точки «новое» */
/* заливка — только под самим комментарием: от его отступа до правого края; под направляющими предков бумага */
.comments.tree .post.c.useful, .comments.tree .post.c + .post.c.useful { background-color: transparent;
  background-image: repeating-linear-gradient(to right, var(--line-strong) 0 var(--line-w), transparent var(--line-w) var(--indent)),
    linear-gradient(var(--useful-soft), var(--useful-soft));
  background-size: calc(var(--depth, 0) * var(--indent)) 100%, calc(100% - var(--depth, 0) * var(--indent)) 100%;
  background-position: 13px 0, 100% 0; background-repeat: no-repeat; }

/* бесполезный автор: короткий комментарий бледный, почти сливается с фоном; при наведении или фокусе — как обычно */
.comments .post.c.useless > .body, .comments .post.c.useless > .author { opacity: 0.38; transition: opacity 160ms ease; }
.comments .post.c.useless:is(:hover, :focus-within) > .body, .comments .post.c.useless:is(:hover, :focus-within) > .author { opacity: 1; }
/* и ссылка на такой комментарий (:target) его не подсвечивает: бледность важнее */
.comments .post.c.useless:target, .comments:not(.tree) .post.c.useless:target, .comments .post.c.useless:target .body { background: none; }
@media (prefers-reduced-motion: reduce) { .comments .post.c.useless > .body, .comments .post.c.useless > .author { transition: none; } }

/* бесполезный автор: одна приглушённая строка */
.comments.tree .folded { background-color: transparent; padding-block: 8px; font-size: 13px; color: var(--faint); }

/* ---------- без рамок: «Подряд», цитаты, кнопки, реакции, таблица тем ---------- */
/* «Подряд» — как дерево: без карточек и колонки автора, автор строкой над текстом
   (та же сетка из прежней разметки, что у поста), между комментариями тонкая линия. */
.comments:not(.tree) { padding-left: 0; }
.comments:not(.tree)::before, .comments:not(.tree) .post.c::before { display: none; }
.comments:not(.tree) .post.c { display: grid; grid-template-columns: 20px auto auto minmax(0, 1fr); column-gap: 8px;
  align-items: center; margin: 0; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none; }
.comments:not(.tree) .post.c:first-child { border-top: 0; }
.comments:not(.tree) .post.c > .author, .comments:not(.tree) .post.c > .body { display: contents; }
.comments:not(.tree) .post.c .ava { grid-column: 1; grid-row: 1; width: 20px; height: 20px; margin: 0; font-size: 9px; }
.comments:not(.tree) .post.c .a-name { grid-column: 2; grid-row: 1; font-size: 12px; }
.comments:not(.tree) .post.c .author .badge { grid-column: 3; grid-row: 1; margin: 0; }
.comments:not(.tree) .post.c .a-sub { display: none; }
.comments:not(.tree) .post.c .b-head { grid-column: 4; grid-row: 1; margin: 0; font-size: 12px; }
.comments:not(.tree) .post.c .body > :not(.b-head) { grid-column: 1 / -1; }
.comments:not(.tree) .post.c .body > .b-head + * { margin-top: 6px; }
.comments:not(.tree) .text { font-size: var(--fs-c); line-height: var(--lh-c); max-width: none; }
.comments:not(.tree) .post.c.useful { background: var(--useful-soft); }
.comments:not(.tree) .post.c.useful .badge { display: none; }
.comments:not(.tree) .post.c:target { background: var(--hl); }
.comments:not(.tree) .folded, .comments.tree .folded { border: 0; border-radius: 0; background: none; padding-inline: 4px; }
.comments:not(.tree) .folded-d { margin: 0; border-top: 1px solid var(--line); }

.quote { background: none; border-left-width: 2px; border-radius: 0; padding: 0 12px; }
.quote:is(:hover, :focus-visible) { background: none; }
.toolbar .btn, .viewsw { border: 0; }
.toolbar .btn:hover { background: var(--hover); }
.re, .comments.tree .re { border: 0; background: var(--control); }
.tbl { border: 0; border-radius: 0; background: none; }
.row, .row:first-child, .row:last-child, .row:only-child { border-radius: 0; }
.row.head { background: none; }

@media (max-width: 680px) {
  .comments:not(.tree) .post.c .b-head .num-id { display: none; }
  .top-in { flex-wrap: nowrap; gap: 14px; min-height: 52px; padding: 6px 16px; }
  .logo { font-size: 18px; flex-shrink: 0; }
  .nav { flex-wrap: nowrap; overflow-x: auto; flex-basis: auto; scrollbar-width: none; }
  .nav a { padding: 8px; }
  .page:has(.th-meta) { padding: 22px 16px 40px; }
  .page:has(.th-meta) h1 { font-size: 24px; }
  .post.op:not(.article) { grid-template-columns: 30px auto minmax(0, 1fr); }
  .post.op:not(.article) .ava { width: 30px; height: 30px; }
  .post.op .text, .post.article .text { font-size: var(--fs-read-m); }
  .toolbar { gap: 6px; }
  .toolbar .count { flex-basis: 100%; }
  .toolbar .btn { min-height: 30px; padding: 4px 12px; font-size: 13px; }
  .viewsw { font-size: 13px; order: 5; }
  .viewsw a { padding: 4px 10px; }
  .comments.tree { --indent: 14px; }
  .comments.tree .post.c, .comments.tree .post.c + .post.c { padding-left: calc(var(--depth, 0) * var(--indent) + 2px); padding-right: 0; background-position: 10px 0; }
  .comments.tree .folded, .comments.tree .more-branch { background-position: 10px 0; }
  .comments.tree .post.c.useful, .comments.tree .post.c + .post.c.useful { background-position: 10px 0, 100% 0; }
  .comments.tree .text { font-size: var(--fs-c-m); }
}

/* невидимый якорь записи: возврат после пометки автора прокручивает сюда без подсветки :target */
.post > .anchor { scroll-margin-top: 20px; position: absolute; top: 0; left: 0; width: 0; height: 0; }