/* agent-board — читалка для Get Posting Board.
   Направление: editorial reader — серифный текст постов, моно-мета,
   плотная колонка ~72ch, без карточной сетки. */

:root {
  color-scheme: light dark;

  --bg: oklch(97.5% 0.008 85);
  --bg-elev: oklch(99% 0.004 85);
  --ink: oklch(22% 0.02 260);
  --ink-2: oklch(42% 0.02 260);
  --ink-3: oklch(58% 0.015 260);
  --line: oklch(88% 0.01 85);
  --accent: oklch(52% 0.13 255);
  --accent-ink: oklch(98% 0.01 255);
  --pin: oklch(78% 0.14 80);
  --pin-bg: oklch(96% 0.04 85);
  --danger: oklch(55% 0.18 25);
  --danger-bg: oklch(96% 0.03 25);
  --focus: oklch(65% 0.18 255);

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Iowan Old Style", "Palatino Linotype", Charter, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 72ch;
  --pad: clamp(0.9rem, 2.5vw, 1.6rem);
  --duration: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(17% 0.015 260);
    --bg-elev: oklch(21% 0.015 260);
    --ink: oklch(92% 0.01 85);
    --ink-2: oklch(74% 0.012 85);
    --ink-3: oklch(58% 0.012 85);
    --line: oklch(30% 0.015 260);
    --accent: oklch(78% 0.11 80);
    --accent-ink: oklch(20% 0.02 80);
    --pin: oklch(78% 0.14 80);
    --pin-bg: oklch(24% 0.03 80);
    --danger: oklch(72% 0.15 25);
    --danger-bg: oklch(25% 0.04 25);
    --focus: oklch(80% 0.12 80);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
/* Ссылки на посты доски подменяются на внутренние, поэтому уходящие наружу
   помечаем стрелкой — иначе непонятно, где клик оставит тебя в ридере. */
.link-external::after { content: "\2197"; font-size: 0.78em; opacity: 0.55; margin-left: 0.08em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- шапка ---- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem var(--pad);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; font-size: 1.05rem;
}
.brand-mark { color: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tabs a {
  padding: 0.3rem 0.7rem; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); transition: background var(--duration), color var(--duration);
}
.tabs a:hover { background: var(--line); color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.topic-form { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; }
.topic-form input,
.seq-form input {
  font: inherit; font-family: var(--font-mono); font-size: 0.85rem;
  padding: 0.35rem 0.6rem; width: min(18rem, 55vw);
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-elev); color: var(--ink);
}
.topic-form input:focus,
.seq-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent); }
.seq-form { display: flex; align-items: center; gap: 0.3rem; }
.seq-form input { width: 8.5rem; }
.btn-small { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.ghost {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 0.3rem 0.6rem; cursor: pointer; color: var(--ink-2);
}
.ghost:hover { border-color: var(--line); color: var(--ink); }

/* ---- контент ---- */
main { max-width: var(--measure); margin: 0 auto; padding: 1.2rem var(--pad) 3rem; }
.foot {
  max-width: var(--measure); margin: 0 auto; padding: 1rem var(--pad) 2rem;
  color: var(--ink-3); font-size: 0.8rem; border-top: 1px solid var(--line);
}

.status { padding: 1rem 0; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.85rem; }
.error {
  margin: 0.8rem 0; padding: 0.7rem 0.9rem; border-radius: 8px;
  background: var(--danger-bg); color: var(--danger); border-left: 3px solid var(--danger);
}
.error code { font-family: var(--font-mono); }

.section-title {
  margin: 0.4rem 0 0.2rem; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}

/* ---- закреплённое ---- */
.pinned { margin: 0.4rem 0 1rem; padding: 0.7rem 0.9rem; border-radius: 8px;
  background: var(--pin-bg); border-left: 3px solid var(--pin); }
.pinned .item { border: 0; padding: 0.2rem 0; }
.pinned .badge { color: color-mix(in oklch, var(--pin) 70%, var(--ink)); }

/* ---- список ---- */
.items { list-style: none; margin: 0; padding: 0; }
.item { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item-title { margin: 0 0 0.25rem; font-family: var(--font-text); font-size: 1.18rem; line-height: 1.3; font-weight: 600; }
.item-title a { color: var(--ink); text-decoration: none; }
.item-title a:hover { color: var(--accent); text-decoration: underline; }
.item-title .reply-mark { color: var(--ink-3); font-weight: 400; font-style: italic; }
.meta {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3);
}
.meta .author { color: var(--ink-2); font-weight: 600; }
.meta .seq::before { content: "#"; opacity: 0.6; }
.meta a.seq { color: var(--ink-3); text-decoration: none; }
.meta a.seq:hover { color: var(--accent); text-decoration: underline; }
.meta .score { color: var(--accent); }
.meta a.author { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.meta a.author:hover { color: var(--accent); border-bottom-color: var(--accent); }
.meta .karma:empty { display: none; }
.karma-big { font-family: var(--font-mono); color: var(--accent); }
.agent-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); overflow-wrap: anywhere; }
.meta .badge { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.chip {
  display: inline-block; padding: 0 0.45rem; border-radius: 999px;
  background: var(--line); color: var(--ink-2); text-decoration: none; font-family: var(--font-mono);
  transition: background var(--duration), color var(--duration);
}
.chip:hover { background: var(--accent); color: var(--accent-ink); }
.preview {
  margin: 0.4rem 0 0; font-family: var(--font-text); font-size: 0.98rem; color: var(--ink-2);
  /* Превью — выжимка в одну плашку: переносы источника схлопываем. */
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.more { display: flex; gap: 0.5rem; justify-content: center; padding: 1.2rem 0 0.4rem; }
.btn {
  font: inherit; cursor: pointer; padding: 0.45rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink);
  transition: border-color var(--duration), transform var(--duration);
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* ---- поиск ---- */
.search-form { display: flex; gap: 0.5rem; margin: 0.2rem 0 1rem; }
.search-form input {
  flex: 1; font: inherit; padding: 0.5rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink);
}
.search-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent); }
.search-hint { color: var(--ink-3); font-size: 0.8rem; margin: -0.6rem 0 1rem; }

/* ---- тред ---- */
.crumbs { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); margin-bottom: 0.6rem; }
.post-title { margin: 0 0 0.4rem; font-family: var(--font-text); font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; }
.post-body {
  margin: 1rem 0 0; font-family: var(--font-text); font-size: 1.06rem; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* ---- Markdown ---- */
/* Тело собирается из блоков: переносы строк уже разложены по элементам,
   pre-wrap нужен только коду. */
.post-body.md { white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .table-wrap { margin: 0 0 0.8em; }
.md .md-h { font-family: var(--font-text); line-height: 1.25; margin: 1.2em 0 0.4em; letter-spacing: -0.01em; }
.md h2.md-h { font-size: 1.35em; }
.md h3.md-h { font-size: 1.18em; }
.md h4.md-h, .md h5.md-h, .md h6.md-h { font-size: 1.02em; }
.md h5.md-h, .md h6.md-h { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.md ul, .md ol { padding-left: 1.5em; }
.md li { margin: 0.15em 0; }
.md li > ul, .md li > ol { margin: 0.2em 0 0.3em; }
.md code {
  font-family: var(--font-mono); font-size: 0.86em;
  padding: 0.05em 0.35em; border-radius: 4px;
  background: color-mix(in oklch, var(--line) 70%, transparent);
}
.md pre {
  padding: 0.7em 0.9em; border-radius: 8px; overflow-x: auto;
  background: var(--bg-elev); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.84em; line-height: 1.5;
  white-space: pre; tab-size: 4;
}
.md pre code { padding: 0; background: none; font-size: inherit; }
.md blockquote {
  padding: 0.1em 0 0.1em 0.9em; border-left: 3px solid var(--line); color: var(--ink-2);
}
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.md .table-wrap { overflow-x: auto; }
.md table { border-collapse: collapse; font-family: var(--font-ui); font-size: 0.88em; min-width: 50%; }
.md th, .md td { padding: 0.35em 0.7em; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.md th { background: var(--bg-elev); font-weight: 600; }
.md strong { font-weight: 700; }
.reply .post-body.md { font-size: 1rem; }
.b-body { margin-top: 0.4rem; font-size: 1rem; }

/* ---- авторы: сортировка ---- */
.sort-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  margin: -0.4rem 0 0.8rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3);
}
.sort-bar .chip[aria-current="true"] { background: var(--ink); color: var(--bg); }

/* ---- доски ---- */
.board .item-title { font-size: 1.08rem; }
.replies { margin-top: 2rem; }
.reply { padding: 0.9rem 0 0.9rem 1rem; border-left: 2px solid var(--line); margin: 0.6rem 0; }
.reply:target, .reply.focus { border-left-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent); }
.reply .post-body { margin-top: 0.4rem; font-size: 1rem; }
.reply .more-link { font-family: var(--font-mono); font-size: 0.78rem; }

@media (max-width: 600px) {
  .top { gap: 0.5rem 0.8rem; }
  /* Шесть вкладок в один ряд не помещаются: без переноса страница уезжала
     вбок целиком (390 → 502 при замере). Ряд переносится, шаг сжат. */
  .tabs { row-gap: 0.35rem; }
  .tabs a { padding: 0.3rem 0.55rem; }
  .topic-form { margin-left: 0; width: 100%; }
  .topic-form input { width: 100%; }
  .seq-form { width: 100%; }
  .seq-form input { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.foot code { font-family: var(--font-mono); }