/* yaniktoim — стиль форка zohar-sulam с расширениями poyasneniya (article-page)
 * + стихи (Courier New), эпиграфы, цитаты, сворачиваемый TOC, semi-bold вместо CAPS.
 */
:root {
  --fg: #1a1a1a;
  --muted: #666;
  --accent: #6b2d5c;     /* можно сменить — оператор уточнит */
  --bg: #fdfcf7;
  --card: #fff;
  --border: #e0dbce;
  --done: #2d7a3e;
  --pending: #999;
  --soft: #f6f1e3;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 18px;
  line-height: 1.4;
  color: var(--fg);
  background: var(--bg);
}
.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.wrap.wide { max-width: 1200px; }

/* Главная: картинка слева + поле со стихом справа на её высоту */
.hero {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  margin: 0 0 20px;
}
.hero-img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0;
}
.hero-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* по центру вертикально */
  align-items: flex-end;     /* прижато к правому краю */
  text-align: right;
}
.hero-text p { margin: 0 0 0.9rem; }
.hero-text p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-text { align-items: flex-start; text-align: left; }
}

header.breadcrumbs {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}
header.breadcrumbs a { color: var(--muted); text-decoration: none; }
header.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
header.breadcrumbs .sep { margin: 0 0.4rem; }
/* главная: крошки слева + поле поиска справа */
header.breadcrumbs.has-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin: 0;
}
.search-form input[type="search"] {
  width: 200px;
  padding: 0.35rem 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: normal;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--fg);
}
.search-form input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}
.search-form input[type="search"]::placeholder { color: var(--muted); font-weight: normal; }
.search-form .search-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-form .search-btn:hover { color: var(--accent); border-color: var(--accent); }
.search-form .search-btn svg { display: block; }
@media (max-width: 560px) {
  header.breadcrumbs.has-search { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .search-form input[type="search"] { width: 100%; }
}
/* страница поиска */
.search-page #search-results {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--fg);
  --pagefind-ui-background: var(--card);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-tag: var(--bg);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-font: Georgia, 'Times New Roman', Times, serif;
}
.search-page #search-results .pagefind-ui__search-input {
  font-weight: normal;
  font-family: Georgia, 'Times New Roman', Times, serif;
  padding-right: calc(20px * var(--pagefind-ui-scale)) !important;
}
.search-page #search-results .pagefind-ui__search-clear { display: none !important; }

.site-logo {
  display: block;
  margin: 0 auto 1.5rem;
}

h1 { font-size: 1.9rem; margin: 0 0 1.5rem; color: var(--accent); font-weight: normal; }
h2 { font-size: 1.4rem; margin: 2.2rem 0 0.8rem; color: var(--accent); font-weight: normal; }
h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; color: var(--accent); font-weight: normal; }

p { margin: 0 0 1rem; text-align: justify; }
/* «См. также: …» trailing block — менее жирный, чуть сдвинут, без justify.
 * Соседние такие подряд визуально группируются через сжатые отступы. */
p.see-also {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.25rem 0;
  text-align: left;
}
p.see-also + p.see-also { margin-top: 0.15rem; }
p.see-also:first-of-type { margin-top: 1.5rem; }
strong { font-weight: bold; }
em { font-style: italic; }
a { color: var(--accent); }
a:hover { color: #4a1e42; }

/* TOC of sections / chapters / articles */
ul.toc { list-style: none; padding: 0; margin: 0; }
ul.toc li {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px dashed var(--border);
  display: flex; align-items: baseline; gap: 0.8rem;
}
ul.toc li:last-child { border-bottom: none; }
ul.toc a { text-decoration: none; flex: 1; color: var(--fg); }
ul.toc a:hover { color: var(--accent); text-decoration: underline; }
ul.toc .num {
  display: inline-block; min-width: 2.6rem;
  color: var(--muted); font-size: 0.9rem; text-align: right;
}
ul.toc .meta { color: var(--muted); font-size: 0.85rem; margin-left: auto; }
/* Article entry in section index that hasn't been transformed/rendered yet —
 * shown grayed out, not clickable. */
ul.toc li.pending { color: var(--pending); }
ul.toc li.pending .title { color: var(--pending); cursor: not-allowed; }
ul.toc li.pending .num { color: var(--pending); }

p.meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }

/* Article page (wide) */
.article-page .byline { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.5rem; }
.article-page .byline a { color: var(--muted); }

img.diagram {
  display: block; max-width: 100%; height: auto; margin: 0 0 2rem;
  border-radius: 4px;
}

article {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  padding: 2rem 2.4rem;
}
article p:first-of-type { margin-top: 0; }

/* Red-line indent for prose paragraphs inside article body. */
.article-page article p { text-indent: 3em; }
.article-page article p.attribution,
.article-page article p.colophon,
.article-page article p.byline,
.article-page article .epigraph p,
.article-page article .epilogue p,
.article-page article blockquote.q p,
.article-page article details.music p { text-indent: 0; }
.article-page article h2 { font-size: 1.7rem; text-align: center; margin: 2.6rem 0 1rem; }
/* Title-echo: a body paragraph that repeats the h1 text but carries an
 * inline footnote marker. Same h2 styling, smaller top margin (it sits
 * right under the byline / attribution area, not deep in the article). */
.article-page article h2.subtitle { margin: 1.2rem 0 1.4rem; }
.article-page article h3 { font-size: 1.3rem; text-align: center; margin: 2.2rem 0 0.8rem; }
.article-page article h2 .back-to-toc,
.article-page article h3 .back-to-toc {
  text-decoration: none;
  font-size: 0.85em;
  color: var(--muted);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.article-page article h2 .back-to-toc:hover,
.article-page article h3 .back-to-toc:hover { color: var(--accent); }
.article-page article p.attribution {
  /* Inherit base <p> typography (Georgia, 18px, color --fg, justify).
   * Just a 1-line gap before the TOC. */
  margin: 0 0 1.7rem;
}
.article-page article p.attribution + p.attribution {
  margin-bottom: 0;
}
.article-page article p.colophon {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 2.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

/* Inline TOC (сворачиваемое оглавление статьи, появляется если ≥3 h2/h3) */
/* TOC — MediaWiki-style: narrow, light border, neutral background.
 * Sits inline-block so it doesn't span the full column width. */
details.article-toc {
  display: inline-block;
  margin: 2rem 0 2rem;
  background: #f8f9fa;
  border: 1px solid #a2a9b1;
  padding: 0.6rem 1.1rem 0.7rem;
  min-width: 18rem;
  /* font inherits from body (Georgia 18px) */
}
details.article-toc:first-child { margin-top: 0; }
details.article-toc summary {
  cursor: pointer;
  font-weight: normal;
  color: var(--fg);
  list-style: none;
  text-align: center;
  padding: 0.1rem 0 0.2rem;
  border-bottom: 1px solid transparent;
}
details.article-toc summary::-webkit-details-marker { display: none; }
details[open].article-toc summary {
  border-bottom-color: #c8ccd1;
  margin-bottom: 0.4rem;
}
details.article-toc ol {
  margin: 0; padding-left: 1.6rem;
  list-style-type: decimal;
}
details.article-toc ol li { margin: 0.15rem 0; }
details.article-toc a {
  text-decoration: none;
  color: #0645ad; /* mw-style link blue */
}
details.article-toc a:hover { text-decoration: underline; }

/* Music block (раскрываемый youtube) */
details.music {
  margin: 1.4rem 0 1.6rem;
  background: #e8f1f7;            /* light blue — distinguishes from quote blocks */
  border-left: 3px solid #5a8bb5;  /* matching blue accent */
  /* font-size inherits from body (Georgia 18px) — same as paragraphs */
}
details.music summary {
  padding: 0.8rem 1rem; cursor: pointer; list-style: none; text-align: left;
}
details.music summary::-webkit-details-marker { display: none; }
details.music summary .label { color: var(--muted); margin-right: 0.4rem; }
details.music summary .title { color: var(--accent); font-style: italic; text-decoration: underline; }
details.music summary .caret { color: var(--muted); margin-left: 0.4rem; display: inline-block; transition: transform 0.15s; }
details.music summary .ext {
  color: var(--muted); text-decoration: none; margin-left: 0.8rem;
  font-size: 0.9em; padding: 0 0.3rem;
}
details.music summary .ext:hover { color: var(--accent); }
details.music[open] summary .caret { transform: rotate(90deg); }
details.music .player { padding: 0 1rem 1rem; }
details.music .player iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* Музыкальный блок без URL — тот же визуал, что и у details.music summary,
 * но статичный <div>: не раскрывается, без caret, без ↗. */
.music-noplayer {
  margin: 1.4rem 0 1.6rem;
  background: #e8f1f7;
  border-left: 3px solid #5a8bb5;
}
.music-noplayer .summary {
  padding: 0.8rem 1rem;
  text-align: left;
}
.music-noplayer .summary .label { color: var(--muted); margin-right: 0.4rem; }
.music-noplayer .summary .title { color: var(--accent); font-style: italic; }

/* Группа подряд идущих music-блоков с одинаковым label.
 * Label рендерится один раз через data-label::before; внутренние .label
 * скрываются; блоки склеиваются по вертикали. */
.music-group {
  margin: 1.4rem 0 1.6rem;
  background: #e8f1f7;             /* light blue — distinct from quote/epigraph */
  border-left: 3px solid #5a8bb5;  /* matching blue accent */
  padding: 1.9rem 1.4rem 0.9rem 1.4rem;
  position: relative;
}
.music-group::before {
  content: attr(data-label);
  position: absolute;
  top: 0.35rem;
  left: 0.9rem;
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3a3a3a;
  opacity: 0.85;
  pointer-events: none;
}
/* Если перед группой уже стоит h2 с тем же названием (trailing-music на
 * конце статьи), рендер ставит классу .music-group ещё .has-heading —
 * тогда дублирующий label-prefix не рисуется. */
.music-group.has-heading::before { display: none; }

.music-group > details.music,
.music-group > .music-noplayer,
.music-group > .music-flat {
  margin: 0 0 0.25rem 0;
  background: transparent;
  border-left: none;
}
.music-group > :last-child { margin-bottom: 0; }
.music-group .label { display: none; }
.music-group details.music summary,
.music-group .music-noplayer .summary {
  padding: 0.3rem 0;
}

/* Нумерованная группа параграфов: [num]...[/num] */
ol.num {
  margin: 1.2rem 0 1.4rem;
  padding-left: 2.4rem;
}
ol.num li {
  margin-bottom: 0.8rem;
  padding-left: 0.3rem;
}
ol.num li::marker {
  color: var(--accent);
  font-weight: bold;
}
/* Параграф внутри li — без text-indent (нумерация уже даёт визуальный отступ) */
.article-page article ol.num li,
.article-page article ol.num li p { text-indent: 0; text-align: justify; }

/* Поэзия (стихи) */
.poem {
  font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 1.125rem;
  /* Block sized to its widest line; left edge fixed at 1/3 of the
   * article's content width. Lines inside share that left edge —
   * short lines hang left, the widest line defines block width. */
  text-align: left;
  white-space: pre-wrap;
  width: fit-content;
  max-width: 66%;
  margin: 1.6rem 0 1.6rem 33%;
  color: #2a2a2a;
}
.poem .title {
  display: block; font-weight: bold; margin-bottom: 0.6rem;
  text-align: center;
  text-transform: none;
}

/* Эпиграф / эпилог / цитата */
.epigraph, .epilogue, blockquote.q {
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding: 1.4rem 1.4rem 0.6rem;
  margin: 1.4rem 0;
  background: var(--soft);
  position: relative;
}
/* Small label ("Эпиграф" / "Эпилог" / "Цитата") in the top-right corner.
 * Pulled from the `data-label` attribute the renderer sets per-block. */
.epigraph::before, .epilogue::before, blockquote.q::before {
  content: attr(data-label);
  position: absolute;
  top: 0.35rem; right: 0.9rem;
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  pointer-events: none;
  color: #3a3a3a;
}
.epigraph .cite, .epilogue .cite, blockquote.q .cite {
  display: block; text-align: right; font-style: normal; color: var(--muted);
  font-size: 0.9rem; margin-top: 0.4rem;
}

/* Epigraph-specific: pulled to the right, 2/3 width, accent bar on the
 * right edge, label on the left.  Цитата (blockquote.q) — полное зеркало:
 * прижата к левому краю, полоса слева, метка справа.  .epilogue — третий
 * вариант, conventional left-aligned full-width (см. ниже). */
.epigraph {
  width: 66%;
  margin-left: auto;
  margin-right: 0;
  border-left: none;
  border-right: 3px solid var(--accent);
  padding: 1.4rem 1.4rem 0.6rem 1rem;
}
.epigraph::before {
  left: 0.9rem;
  right: auto;
}

blockquote.q {
  width: 66%;
  margin-left: 0;
  margin-right: auto;
  /* border-left already comes from the shared base rule above */
  padding: 1.4rem 1rem 0.6rem 1.4rem;
}
/* Label «Цитата» — справа сверху (mirror of эпиграф's left label) — это
 * уже дефолт из общего ::before правила (right: 0.9rem), отдельный
 * override не нужен. */

/* Override the global p { text-align: justify } for boxed quotes —
 * justify растягивает длинные абзацы на всю ширину box-а, короткие
 * <br>-разбитые блоки рядом этим не «болеют», и получается разнобой.
 * И для эпиграфов, и для цитат — везде ровно по левому краю. */
.epigraph p, blockquote.q p { text-align: left; }

@media (max-width: 700px) {
  /* Full width on narrow screens — оба прижимаются к краю экрана. */
  .epigraph, blockquote.q { width: auto; }
}

/* Zohar references → local mirror at imyavel.github.io/zohar-sulam. */
a.zohar {
  color: #7a5a1a;
  text-decoration: none;
  border-bottom: 1px dotted #7a5a1a;
}
a.zohar:hover {
  color: #5a3e10;
  border-bottom-style: solid;
}

/* Internal corpus links (proza.ru/agent017 → local rendered article).
 * Distinct from external links: accent colour, no underline by default —
 * marks them as part of our own corpus while still being clickable. */
a.internal {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
a.internal:hover { text-decoration: underline; border-bottom: none; }

/* Bold replacement for source CAPS — Georgia only ships 400 & 700 weights,
 * so weight alone tops out at 700. A faint same-colour text-shadow gives
 * an extra visual heft beyond that. */
.sb {
  font-weight: 700;
  text-shadow: 0.025em 0 0 currentColor;
}

/* Сноски wiki-style */
.article-page sup a { text-decoration: none; color: var(--accent); }
.article-page sup a:hover { text-decoration: underline; }
ol.notes {
  margin: 0; padding-left: 1.5rem; font-size: 0.95rem; color: var(--muted);
}
ol.notes li { margin-bottom: 0.5rem; }
ol.notes a { color: var(--muted); text-decoration: underline; }
ol.notes a.backref { text-decoration: none; margin-right: 0.3rem; }
ol.notes li:target, sup:target a { background: #fff3cd; }

/* Анонимные сноски — без номера-маркера, идут после нумерованных.
 * Префикс («См. также:» по умолчанию или кастомный из `[^|...]:`) ставит
 * рендер в текст li, отдельным CSS не дублируется. */
ol.notes li.anon { list-style: none; margin-left: -1.5rem; }
ol.notes li.anon::before { content: ""; }
/* Зазор между последней нумерованной и первой анонимной — мягко отделяет. */
ol.notes li.anon:first-of-type { margin-top: 0.8rem; }

/* Footnote popup-bubble (shown on hover over a [N] sup link). */
.footnote-bubble {
  position: absolute;
  z-index: 1000;
  max-width: 28rem;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.footnote-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.footnote-bubble.below { transform-origin: top center; }
.footnote-bubble::after {
  content: "";
  position: absolute;
  left: 50%; margin-left: -7px;
  width: 0; height: 0;
  border: 7px solid transparent;
  border-top-color: var(--card);
  bottom: -14px;
  filter: drop-shadow(0 1px 0 var(--border));
}
.footnote-bubble.below::after {
  bottom: auto;
  top: -14px;
  border-top-color: transparent;
  border-bottom-color: var(--card);
  filter: drop-shadow(0 -1px 0 var(--border));
}
.footnote-bubble a { color: var(--accent); }

/* Navigation between articles */
nav.article-nav {
  display: flex; justify-content: space-between; margin-top: 2rem;
  padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.95rem;
}
nav.article-nav a { text-decoration: none; }

/* Navigation between section indexes (mirrors article prev/next) */
nav.section-nav {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
nav.section-nav a {
  display: flex; flex-direction: column; max-width: 46%;
  text-decoration: none;
}
nav.section-nav a.next { margin-left: auto; text-align: right; align-items: flex-end; }
nav.section-nav .dir {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.4rem;
}
nav.section-nav .title { color: var(--accent); font-size: 1.05rem; line-height: 1.3; }
nav.section-nav a:hover .title { text-decoration: underline; }

/* Footer */
footer.footer {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.85rem; text-align: center;
}
footer.footer p { margin: 0.35rem 0; line-height: 1.5; }
footer.footer p.editinfo { font-style: italic; opacity: 0.85; }
footer.footer a { color: var(--muted); text-decoration: underline; }
footer.footer a:hover { color: var(--accent); }
footer.footer .stats-inline { margin-top: 0.6rem; }
footer.footer .stats-inline .num { color: #888; font-variant-numeric: tabular-nums; }
footer.footer .stats-inline .sep { opacity: 0.5; margin: 0 0.35rem; }

/* Edit affordance (edit mode only; hidden for readers via [hidden]) */
.edit-fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 1.3rem; line-height: 1;
  text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  opacity: 0.85; transition: opacity 0.15s, transform 0.15s;
}
.edit-fab:hover { opacity: 1; transform: scale(1.06); }
.edit-fab[hidden] { display: none; }   /* beat .edit-fab's display:flex */
/* "Вход" state — discreet: most visitors don't need it. Muted outlined pill,
   low opacity, no bright fill; only becomes prominent on hover. */
.edit-fab.login {
  width: auto; height: auto; padding: 0.3rem 0.8rem; border-radius: 1.2rem;
  font-size: 0.8rem; font-weight: 400;
  background: var(--soft); color: var(--fg);
  border: 1px solid var(--border); box-shadow: none; opacity: 1;
}
/* Emphasis only on hover; no lingering focus ring after a mouse click. */
.edit-fab.login:hover { transform: none; background: var(--card); border-color: var(--accent); color: var(--accent); }
.edit-fab.login:focus:not(:focus-visible) { outline: none; }

/* In-page (wiki-style) editor */
.yanik-editbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0.6rem; margin: 0 0 0.9rem; border: 1px solid var(--border);
  border-radius: 0.4rem; background: var(--card);
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.9rem;
}
.yanik-editbar .yanik-grow { flex: 1 1 auto; }
.yanik-editbar button {
  font: inherit; cursor: pointer; padding: 0.3rem 0.7rem;
  border: 1px solid #cdbfae; border-radius: 0.35rem; background: #fff; color: var(--fg);
}
.yanik-editbar button:hover { background: var(--soft); }
.yanik-editbar button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.yanik-editbar .yanik-signlabel { font-size: 0.85rem; color: var(--muted); }
.yanik-editbar .yanik-signer {
  font: inherit; padding: 0.25rem 0.4rem; border: 1px solid #cdbfae;
  border-radius: 0.35rem; background: #fff; color: var(--fg); max-width: 14rem;
}
.yanik-editbar .yanik-signchip { font-size: 0.85rem; padding: 0.2rem 0.5rem; border-radius: 0.35rem; background: var(--soft); }
.yanik-editbar .yanik-signchip.ok { color: var(--done); }
.yanik-editbar .yanik-signchip.warn { color: #b06f00; }
.yanik-astate { font-size: 0.9rem; margin: 0 0 0.6rem; }
.yanik-users { display: flex; flex-direction: column; gap: 0.35rem; max-height: 14rem; overflow: auto; }
.yanik-userrow { display: flex; align-items: center; gap: 0.4rem; }
.yanik-userrow .yanik-unick { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yanik-status { font-size: 0.85rem; color: var(--muted); }
.yanik-status.dirty { color: #b06f00; }
.yanik-status.ok    { color: var(--done); }
.yanik-status.err   { color: #b00020; }
.yanik-ta {
  width: 100%; min-height: 60vh; box-sizing: border-box; padding: 0.9rem;
  border: 1px solid var(--border); border-radius: 0.4rem; resize: vertical;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 14px; line-height: 1.55; tab-size: 2; background: #fffdf8; color: var(--fg);
}
.yanik-preview { display: block; }
dialog.yanik-settings {
  border: 1px solid #cdbfae; border-radius: 0.5rem; padding: 1rem 1.2rem; width: min(420px, 92vw);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
dialog.yanik-settings label { display: block; margin: 0.5rem 0 0.15rem; font-size: 0.85rem; color: #444; }
dialog.yanik-settings input { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid #cdbfae; border-radius: 0.3rem; font: inherit; }
dialog.yanik-settings .hint { font-size: 0.78rem; color: #888; margin-top: 0.6rem; line-height: 1.4; }
dialog.yanik-settings .row { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.9rem; }
dialog.yanik-settings button { font: inherit; cursor: pointer; padding: 0.32rem 0.8rem; border: 1px solid #cdbfae; border-radius: 0.35rem; background: #fff; }
dialog.yanik-settings button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }