/* 2026-10-04 — supplied 01/04 canonical references and 11/15 coverage boards.
   Visual adaptation only; source renderers, permissions and real data stay intact. */
.canvas.route-post:has(.reading-page) {
  max-width: 1536px;
  padding: 22px 56px 120px;
}
.reading-page { position: relative; }
.reading-page .reading-type-tabs { display: none; }
.reading-page .reading-breadcrumb {
  position: absolute;
  top: 0;
  right: 12.5%;
  margin: 0;
  z-index: 2;
}
.reading-page .reading-breadcrumb > .muted,
.reading-page .reading-breadcrumb > [data-route="feed"] { display: none; }
.reading-page:has(.reading-breadcrumb [data-action="preview"]) { padding-top: 48px; }
.reading-page:has(.reading-breadcrumb [data-action="preview"]) .reading-breadcrumb {
  left: 158px;
  right: auto;
}
.reading-page .reading-layout {
  grid-template-columns: 134px minmax(0, 1008px) 46px;
  gap: 24px;
  justify-content: start;
}
.reading-page .reading-spine {
  top: 94px;
  padding-top: 20px;
  font-size: 11px;
}
.reading-page .reading-spine > .eyebrow,
.reading-page .reading-spine-bottom { display: none; }
.reading-page .reading-spine-item { min-height: 108px; gap: 14px; }
.reading-page .reading-spine-item:nth-of-type(2) { min-height: 248px; }
.reading-page .reading-spine-item small { font-size: 11px; margin-top: 6px; }
.reading-page .reading-author-row {
  justify-content: flex-start;
  margin: 0 0 9px;
  gap: 24px;
  min-height: 40px;
}
.reading-page .reading-author-row .author { gap: 12px; font-size: 13px; }
.reading-page .reading-author-row .author > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.reading-page .reading-author-row .author .muted { margin: 0; font-size: 12px; }
.reading-page .reading-author-row .text-link { color: inherit; }
.reading-page .reading-author-divider { color: var(--muted); }
.reading-page .reading-author-row .author > div > .muted { color: #8d93a1; }
.reading-page .reading-author-row .author > div > .muted .text-link { color: #8d93a1; }
.reading-page .reading-author-row > .btn {
  min-height: 33px;
  padding: 6px 14px;
  font-size: 12px;
}
.reading-page .reading-title-block > .eyebrow { display: none; }
.reading-page .reading-title-block h1 {
  font: 350 32px/1.2 var(--serif);
  letter-spacing: -.015em;
  max-width: none;
  margin: 8px 0 12px;
  overflow-wrap: anywhere;
}
.reading-page .reading-hero { margin: 0 0 12px; }
.reading-page .reading-hero > :is(img, video) {
  display: block;
  width: 100%;
  aspect-ratio: 4.55;
  object-fit: cover;
  border-radius: 0;
}
.reading-page .reading-hero > audio { width: 100%; }
.reading-page .reading-hero figcaption {
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.5;
}
.reading-page .reading-hero figcaption:not(:has(span:first-child:not(:empty))) { display: none; }
.reading-page .reading-prose {
  max-width: 820px;
  font: 400 14px/1.45 var(--serif);
  color: #a9adba;
}
.reading-page .reading-prose p { margin: 0 0 10px; }
.reading-page .reading-prose .reading-lead { font-size: inherit; line-height: inherit; color: inherit; }
.reading-page .reading-prose :is(h2,h3,h4) { color: var(--text); font-weight: 400; line-height: 1.3; }
.reading-page .reading-prose h2 { font-size: 26px; margin: 28px 0 12px; }
.reading-page .reading-prose blockquote {
  margin: 22px 0;
  padding: 3px 0 3px 18px;
  font-size: 18px;
}
.reading-page .reading-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.reading-page .reading-secondary-image { max-width: 820px; margin: 14px 0; }
.reading-page .reading-secondary-image > :is(img, video) {
  display: block;
  width: 100%;
  height: 66px;
  object-fit: cover;
  object-position: center;
}
.reading-page .reading-secondary-image > audio { width: 100%; }
.reading-page .reading-secondary-image figcaption:empty { display: none; }
.reading-page .reading-endmark { display: none; }
.reading-page .reading-post-footer {
  min-height: 40px;
  padding: 4px 0 8px;
  gap: 18px;
}
.reading-page .reading-post-footer .chip { font-size: 11px; border-radius: 999px; padding: 5px 10px; }
.reading-page .reading-post-footer > .btn { font-size: 12px; padding: 4px 0; }
.reading-page .reading-appreciation {
  gap: 10px;
  padding: 8px 0;
  font-size: 11px;
  color: var(--muted);
}
.reading-page .reading-appreciation > .btn { min-height: 28px; font-size: 11px; padding: 4px 0; }
.reading-page .reading-discussion { padding-top: 4px; max-width: 750px; }
.reading-page .reading-discussion-heading { margin: 4px 0 10px; }
.reading-page .reading-discussion-heading h2 { font: 500 12px/1.5 var(--ui); color: var(--muted); }
.reading-page .reading-discussion-heading h2 span { font-size: inherit; }
.reading-page .reading-comment-form {
  min-height: 48px;
  margin-bottom: 16px;
  padding: 6px 12px;
  gap: 12px;
  border-radius: 13px;
  background: linear-gradient(120deg, #111620, #10121a);
}
.reading-page .reading-comment-form .reading-send {
  color: #fff;
  background: linear-gradient(145deg,#7d89ff,#4a4cff);
  box-shadow: inset 0 1px 4px #ffffff38, 0 2px 12px #4345dd30;
}
.reading-page .reading-comment { gap: 12px; margin-bottom: 17px; }
.reading-page .reading-comment-content p { margin: 4px 0; font-size: 12px; line-height: 1.6; }
.reading-page .reading-comment-meta { font-size: 11px; }
.reading-page .reading-comment-nested { margin-left: 48px; }
.reading-page .reading-action-rail { top: 180px; margin-top: 105px; gap: 22px; }
.reading-page .reading-action-rail small { font-size: 12px; }
.reading-page .reading-next { margin-top: 28px; padding-top: 20px; }
.reading-page .reading-response-bar { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--border); padding: 6px 0; }
.reading-page .reading-response-bar .reading-post-footer { order: 2; flex: 1; min-width: 0; border: 0; padding: 0; }
.reading-page .reading-response-bar .reading-appreciation { order: 1; flex: 0 1 330px; min-width: 0; width: auto; margin: 0; padding: 0; }
@media (min-width: 1101px) {
  .reading-page .reading-post-footer { padding-left: 350px; }
  .reading-page .reading-appreciation { width: 330px; margin-top: -43px; min-height: 43px; }
  .reading-page .reading-appreciation > .muted { font-size: 10px; }
  .reading-page .reading-appreciation > .btn:last-child { font-size: 0; }
  .reading-page .reading-appreciation > .btn:last-child .icon { width: 17px; height: 17px; }
  .reading-page .reading-discussion { margin-top: 8px; }
}

/* Distinct renderer roles from board 11: reading scale follows the content type. */
.reading-page.reading-type-story .reading-title-block h1 { font-size: 34px; max-width: none; }
.reading-page.reading-type-story .reading-hero > :is(img,video) { aspect-ratio: 4.55; }
.reading-page.reading-type-article .reading-title-block h1 { font-size: 42px; max-width: 850px; }
.reading-page.reading-type-article .reading-prose { font: 400 17px/1.65 var(--serif); }
.reading-page.reading-type-article .reading-hero > :is(img,video) { aspect-ratio: 3.6; }
.reading-page.reading-type-news .reading-prose,
.reading-page.reading-type-question .reading-prose,
.reading-page.reading-type-media .reading-prose { font: 400 14px/1.65 var(--ui); }
.reading-page.reading-type-news .reading-title-block h1 { font-size: 34px; max-width: 840px; }
.reading-page.reading-type-question .reading-layout,
.reading-page.reading-type-media .reading-layout { grid-template-columns: 134px minmax(0, 920px) 46px; }
.reading-page.reading-type-question .reading-title-block h1 { max-width: 760px; }
.reading-page.reading-type-question .reading-poll { background: #0c1018; border-radius: 8px; }
.reading-page.reading-type-media .reading-media-main > button > img { aspect-ratio: 2.7; }
.reading-page.reading-type-media .reading-media-main figcaption { font-size: 12px; }
.reading-page.reading-type-media .reading-media-thumbnails { gap: 10px; }
.reading-page.reading-type-media .reading-media-thumbnails > button { border-radius: 5px; }

/* Canonical desktop composer: wide writing canvas and a quiet publication panel. */
.canvas.route-editor:has(.editor-page) {
  max-width: 1536px;
  padding: 20px 20px 100px;
}
.visual-preview:has(.editor-page) .topbar { height: 50px; min-height: 50px; }
.editor-page { position: relative; }
.editor-page .editor-topline { height: 0; margin: 0; position: relative; }
.editor-page .editor-topline > div:first-child { display: none; }
.editor-page .editor-top-actions { position: absolute; top: 0; right: 8px; gap: 14px; z-index: 2; }
.editor-page .editor-top-actions > .editor-saved { position: absolute; top: 72px; right: 392px; white-space: nowrap; }
.editor-page .editor-type-tabs {
  gap: 0;
  min-height: 44px;
  margin: 0 380px 0 18px;
  border-bottom: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.editor-page .editor-type-tabs > button { padding: 12px 20px; font-size: 14px; }
.editor-page .editor-workspace { grid-template-columns: minmax(0, 1fr) 348px; gap: 30px; }
.editor-page .editor-canvas { border-radius: 8px; background: transparent; }
.editor-page .editor-stage-bar { padding: 24px 22px; border-bottom: 0; min-height: 74px; }
.editor-page .editor-stages { font-size: 11px; gap: 14px; letter-spacing: .015em; }
.editor-page .editor-stage i { width: 18px; height: 18px; }
.editor-page .editor-stage .icon { width: 18px; height: 18px; }
.editor-page .editor-stage-bar > .muted { display: none; }
.editor-page .editor-document { padding: 22px 104px 40px; max-width: 958px; }
.editor-page .editor-title-field textarea {
  font: 350 32px/1.22 var(--serif);
  letter-spacing: -.015em;
  min-height: 42px;
  field-sizing: content;
  padding: 0;
  resize: none;
}
.editor-page .editor-intro-field textarea {
  font: 400 14px/1.85 var(--ui);
  min-height: 92px;
  field-sizing: content;
  resize: none;
  padding: 10px 0 6px;
}
.editor-page .editor-format-bar.toolbar {
  width: max-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 3px;
  background: linear-gradient(145deg,#1a1e28,#10141c);
  border-radius: 6px;
  box-shadow: 0 8px 24px #0005;
}
.editor-page .editor-format-bar .icon-btn { min-height: 29px; width: 32px; }
.editor-page .editor-cover { margin: 0 0 12px; }
.editor-page .editor-cover > img { aspect-ratio: 3.05; border-radius: 0; }
.editor-page .editor-cover-control { right: 10px; top: 10px; }
.editor-page .editor-cover figcaption input { text-align: left; font-size: 11px; padding: 6px 0; }
.editor-page .editor-rich-text { font: 400 14px/1.85 var(--ui); min-height: 68px; padding: 6px 0; }
.editor-page .editor-quote { margin: 14px 0 22px; padding-left: 20px; }
.editor-page .editor-quote textarea { min-height: 54px; font: italic 18px/1.5 var(--serif); padding: 0; field-sizing: content; }
.editor-page .editor-add-row { padding-top: 20px; margin-top: 18px; }
.editor-page .editor-inspector {
  position: sticky;
  top: 84px;
  padding: 24px 22px;
  min-height: calc(100vh - 130px);
  background: linear-gradient(135deg,#11151e,#0c1017);
  border-radius: 8px;
}
.editor-page .editor-inspector-header { border-bottom: 1px solid var(--border); padding: 0 12px 18px; margin-bottom: 25px; }
.editor-page .editor-inspector-header h2 { font-size: 14px; font-weight: 400; position: relative; }
.editor-page .editor-inspector-header h2::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -25px; height: 2px; background: var(--accent); }
.editor-page .editor-inspector-preview { color: var(--muted); font-size: 12px; padding: 6px 10px; min-height: 34px; border-radius: 5px; }
.editor-page .editor-inspector-preview:hover { color: var(--text); background: #ffffff06; }
.editor-page .editor-inspector-header .chip { background: transparent; border: 0; color: var(--muted); font-size: 11px; }
.editor-page .editor-inspector .field { font-size: 12px; color: var(--muted); gap: 10px; }
.editor-page .editor-inspector .field { margin-bottom: 0; }
.editor-page .editor-inspector .field :is(input,select) { font-size: 12px; color: var(--text); }
.editor-page .editor-inspector .section-rule { margin: 23px 0; padding: 0; }
.editor-page .editor-community-field select { background: transparent; border: 0; padding: 0 0 0 50px; min-height: 38px; }
.editor-page .editor-community-detail { gap: 12px; }
.editor-page .editor-community-detail { margin: -38px 0 18px; pointer-events: none; }
.editor-page .editor-community-detail > .muted { display: none; }
.editor-page .editor-community-detail > img { width: 38px; height: 38px; }
.editor-page .editor-community-detail > .muted { font-size: 12px; }
.editor-page .editor-tag-chips { gap: 6px; margin-top: 10px; }
.editor-page .editor-tag-chips .chip { font-size: 11px; padding: 5px 8px; background: #1c202d; border-radius: 6px; }
.editor-page .editor-cover-preview { gap: 16px; }
.editor-page .editor-cover-preview > img { width: 140px; height: 94px; border-radius: 4px; object-fit: cover; }
.editor-page .editor-cover-empty { width: 100%; aspect-ratio: 3.05; border: 1px dashed #303848; border-radius: 6px; background: #0c1119; color: #7d8596; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12px; }
.editor-page .editor-cover-empty .icon { width: 28px; height: 28px; }
.editor-page .editor-cover-preview .editor-cover-empty { width: 140px; height: 94px; flex-shrink: 0; flex-direction: column; gap: 8px; font-size: 10px; }
.editor-page .editor-cover-preview .btn { font-size: 11px; padding: 7px 8px; }
.editor-page .editor-readiness li { font-size: 12px; padding: 4px 0; }
.editor-page .editor-readiness .icon { width: 16px; height: 16px; }
.editor-page .editor-checkbox { font-size: 11px; }
.editor-page .editor-footer {
  grid-column: 1;
  width: calc(100% - 378px);
  margin-top: 0;
  bottom: 18px;
  padding: 15px 16px;
  border-radius: 0 0 8px 8px;
  min-height: 72px;
  gap: 12px;
}
.editor-page .editor-footer-actions { gap: 14px; }
.editor-page .editor-footer-actions .btn { font-size: 13px; min-height: 40px; padding: 10px 15px; }
.editor-page .editor-footer-status { gap: 12px; }

@media (max-width: 1200px) and (min-width: 701px) {
  .canvas.route-post:has(.reading-page) { padding: 24px 32px 120px; }
  .reading-page .reading-layout,
  .reading-page.reading-type-question .reading-layout,
  .reading-page.reading-type-media .reading-layout { grid-template-columns: 92px minmax(0,1fr) 40px; gap: 20px; }
  .reading-page .reading-title-block h1 { font-size: 32px; }
  .reading-page .reading-hero > :is(img,video) { aspect-ratio: 3.6; }
  .editor-page .editor-workspace { grid-template-columns: minmax(0,1fr) 286px; gap: 20px; }
  .editor-page .editor-document { padding: 15px 42px 32px; }
  .editor-page .editor-inspector { padding: 20px 18px; }
  .editor-page .editor-cover-preview > img { width: 102px; height: 70px; }
  .editor-page .editor-footer { width: calc(100% - 306px); }
  .editor-page .editor-top-actions > .editor-saved { right: 324px; }
  .editor-page .editor-stage-bar > .muted { display: none; }
  .editor-page .editor-type-tabs { margin-right: 315px; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .reading-page .reading-layout,
  .reading-page.reading-type-question .reading-layout,
  .reading-page.reading-type-media .reading-layout { grid-template-columns: minmax(0,1fr) 40px; }
  .reading-page .reading-spine { display: none; }
  .reading-page .reading-author-row .author > div { display: block; }
  .reading-page .reading-author-divider { display: none; }
  .reading-page .reading-title-block h1 { font-size: 32px; }
  .editor-page .editor-type-tabs { margin-right: 50px; }
  .editor-page .editor-workspace { grid-template-columns: minmax(0,1fr); }
  .editor-page .editor-inspector { position: static; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
  .editor-page .editor-footer { width: 100%; }
  .editor-page .editor-top-actions > .editor-saved { display: none; }
}
@media (max-width: 700px) {
  .visual-preview:has(.editor-page) .topbar { height: 64px; min-height: 64px; }
  .canvas.route-post:has(.reading-page) { padding: 14px 20px 110px; }
  .reading-page .reading-breadcrumb { position: static; margin: 0 0 14px; }
  .reading-page .reading-breadcrumb > [data-route="feed"] { display: inline-flex; min-height: 36px; }
  .reading-page .reading-layout,
  .reading-page.reading-type-question .reading-layout,
  .reading-page.reading-type-media .reading-layout { display: block; }
  .reading-page .reading-spine,
  .reading-page .reading-action-rail { display: none; }
  .reading-page .reading-article { display: flex; flex-direction: column; }
  .reading-page .reading-hero { order: -3; margin: 0 -20px 18px; }
  .reading-page .reading-hero > :is(img,video),
  .reading-page.reading-type-story .reading-hero > :is(img,video),
  .reading-page.reading-type-article .reading-hero > :is(img,video) { aspect-ratio: 1.8; width: 100%; }
  .reading-page .reading-hero figcaption { padding: 0 20px; }
  .reading-page .reading-title-block { order: -2; }
  .reading-page .reading-title-block > .eyebrow { display: block; font-size: 10px; color: var(--accent); }
  .reading-page .reading-title-block h1,
  .reading-page.reading-type-story .reading-title-block h1,
  .reading-page.reading-type-article .reading-title-block h1,
  .reading-page.reading-type-news .reading-title-block h1 { font: 400 27px/1.18 var(--serif); margin: 8px 0 18px; letter-spacing: -.015em; }
  .reading-page .reading-author-row { order: -1; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0 0 18px; }
  .reading-page .reading-author-row .author > div { display: block; }
  .reading-page .reading-author-row .author { font-size: 12px; gap: 10px; }
  .reading-page .reading-author-row .author .muted { font-size: 10px; margin-top: 3px; }
  .reading-page .reading-author-row .avatar { width: 38px; height: 38px; }
  .reading-page .reading-author-row > .btn { font-size: 11px; min-height: 35px; padding: 7px 10px; }
  .reading-page .reading-prose,
  .reading-page.reading-type-article .reading-prose { font: 400 13px/1.7 var(--ui); max-width: 100%; }
  .reading-page .reading-prose p { margin-bottom: 14px; }
  .reading-page .reading-prose blockquote { font: italic 19px/1.55 var(--serif); }
  .reading-page .reading-secondary-image > :is(img,video) { height: 105px; }
  .reading-page .reading-appreciation { flex-wrap: wrap; padding: 10px 0; }
  .reading-page .reading-appreciation > .muted { flex-basis: auto; flex: 1; min-width: 110px; }
  .reading-page .reading-comment-form { padding: 6px 8px; gap: 6px; }
  .reading-page .reading-comment-form > .avatar { width: 28px; height: 28px; }
  .reading-page .reading-comment-form > .icon-btn:not(.reading-send) { display: inline-flex; width: 30px; min-height: 34px; }
  .reading-page .reading-comment-nested { margin-left: 26px; }
  .reading-page .reading-comment-content p { font-size: 12px; }
  .reading-page .reading-discussion-heading h2 { font-size: 11px; }
  .reading-page .reading-post-footer { flex-wrap: wrap; }
  .reading-page .reading-response-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .reading-page .reading-response-bar .reading-appreciation { flex: auto; min-height: 36px; width: 100%; }
  .reading-page .reading-response-bar .reading-post-footer { flex: auto; width: 100%; }
  .reading-page .reading-post-footer .chip { font-size: 10px; }
  .reading-page .reading-poll { padding: 18px 14px; }
  .reading-page:has(.reading-breadcrumb [data-action="preview"]) { padding-top: 0; }
  .reading-page.reading-type-media .reading-media-main > button > img { aspect-ratio: 1.7; }
  .reading-page .reading-media-thumbnails { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .canvas.route-editor:has(.editor-page) { padding: 16px 18px 110px; }
  .editor-page .editor-topline { height: auto; margin-bottom: 12px; min-height: 48px; }
  .editor-page .editor-topline > div:first-child { display: block; }
  .editor-page .editor-topline .eyebrow { display: none; }
  .editor-page .editor-topline .page-heading { font: 600 14px/1.4 var(--ui); margin: 0; }
  .editor-page .editor-top-actions { top: 0; right: 0; gap: 4px; }
  .editor-page .editor-top-actions > .editor-saved { position: static; font-size: 9px; white-space: normal; max-width: 100px; }
  .editor-page .editor-type-tabs { margin: 0 0 14px; gap: 7px; min-height: 38px; border: 0; }
  .editor-page .editor-type-tabs > button { font-size: 11px; padding: 7px 12px; min-height: 34px; border: 1px solid var(--border); border-radius: 8px; flex-shrink: 0; }
  .editor-page .editor-type-tabs > button.active { border-color: var(--accent); background: #11162a; }
  .editor-page .editor-workspace { display: block; }
  .editor-page .editor-canvas { border: 0; background: transparent; overflow: visible; }
  .editor-page .editor-stage-bar { display: none; }
  .editor-page .editor-document { padding: 0; }
  .editor-page .editor-document { display: flex; flex-direction: column; }
  .editor-page .editor-title-field { order: 0; }
  .editor-page .editor-intro-field { order: 1; }
  .editor-page .editor-format-bar.toolbar { order: 2; }
  .editor-page .editor-body-field { order: 3; }
  .editor-page .editor-cover { order: 4; }
  .editor-page .editor-quote { order: 5; }
  .editor-page :is(.editor-special,.editor-added-block) { order: 6; }
  .editor-page .editor-add-row { order: 7; }
  .editor-page .editor-title-field::before { content: "Заголовок"; display: block; font: 11px/1.5 var(--ui); color: var(--muted); margin: 0 0 6px; }
  .editor-page .editor-title-field textarea { border: 1px solid var(--border); background: #0b0f16; border-radius: 8px; font: 400 14px/1.55 var(--ui); min-height: 58px; padding: 10px 12px; field-sizing: content; }
  .editor-page .editor-intro-field textarea { font: 400 13px/1.65 var(--ui); min-height: 68px; padding: 12px 0; }
  .editor-page .editor-format-bar.toolbar { width: 100%; background: #10151d; margin: 4px 0 0; border-radius: 8px 8px 0 0; padding: 4px; gap: 5px; }
  .editor-page .editor-format-bar .icon-btn { min-height: 34px; }
  .editor-page .editor-cover { margin: 14px 0 10px; }
  .editor-page .editor-cover > img { aspect-ratio: 2.3; border-radius: 8px; }
  .editor-page .editor-cover > .editor-cover-empty { aspect-ratio: 2.3; }
  .editor-page .editor-rich-text { font: 400 13px/1.7 var(--ui); min-height: 144px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #0b0f16; }
  .editor-page .editor-rich-text:focus { border-color: var(--accent); }
  .editor-page .editor-quote { margin: 18px 0; }
  .editor-page .editor-quote textarea { min-height: 64px; font-size: 17px; }
  .editor-page .editor-inspector { position: static; display: grid; grid-template-columns: minmax(0,1fr); padding: 20px 16px; margin-top: 20px; gap: 16px; min-height: 0; }
  .editor-page .editor-inspector-header { padding: 0 0 12px; margin-bottom: 0; }
  .editor-page .editor-inspector .section-rule { margin: 0; }
  .editor-page .editor-community-detail { margin: -54px 0 0; }
  .editor-page .editor-cover-preview > img { width: 120px; height: 78px; }
  .editor-page .editor-footer { width: 100%; margin: 16px 0 0; bottom: 84px; padding: 10px; border-radius: 10px; min-height: 58px; }
  .editor-page .editor-footer-actions { gap: 8px; width: 100%; }
  .editor-page .editor-footer-actions .btn { font-size: 11px; min-height: 36px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-page *, .editor-page * { scroll-behavior: auto; }
}

/* Reference 13: these panels render only genuine route/API failures. The image
   is atmospheric presentation; messages, codes and retry controls remain real. */
.visual-preview .canvas > .empty-state.boundary-state[data-state] {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: min(100%, 420px);
  max-width: 420px;
  min-height: 510px;
  margin: 32px auto 96px;
  padding: 202px 36px 32px;
  overflow: hidden;
  border: 1px solid #27303d;
  border-radius: 12px;
  background: #050a12;
  text-align: left;
}
.boundary-state .boundary-hero {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 290px;
  background: linear-gradient(180deg, rgb(2 6 12 / 25%), rgb(3 8 15 / 5%) 35%, #050a12 94%),
    linear-gradient(90deg, rgb(2 6 12 / 45%), transparent 50%, rgb(2 6 12 / 40%)),
    url("./assets/passage.jpg") center 25% / cover no-repeat;
}
.boundary-state .boundary-code {
  position: absolute;
  top: 18px;
  left: 22px;
  font: 500 11px/1.5 var(--ui);
  letter-spacing: .08em;
  color: #c1c7d2;
}
.visual-preview .canvas > .empty-state.boundary-state[data-state] h2 {
  font: 400 29px/1.2 var(--serif);
  font-variation-settings: "wght" 300;
  letter-spacing: -.012em;
  margin: 0 0 12px;
}
.visual-preview .canvas > .empty-state.boundary-state[data-state] p {
  margin: 0 0 28px;
  max-width: 100%;
  color: var(--muted);
  font: 400 14px/1.6 var(--ui);
  overflow-wrap: anywhere;
}
.boundary-state .boundary-actions { display: grid; gap: 10px; margin-top: auto; }
.boundary-state .boundary-actions > .btn {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  gap: 8px;
}
.boundary-state .boundary-actions > .primary {
  background: linear-gradient(110deg, #555bf5, #444bce);
  border-color: #6570ed;
  color: #fff;
}
.boundary-state .boundary-actions > .quiet { border: 1px solid var(--border); background: transparent; color: #c0c4d0; }
@media (max-width: 700px) {
  .visual-preview .canvas > .empty-state.boundary-state[data-state] {
    margin: 16px auto 24px;
    min-height: 460px;
    padding: 184px 24px 26px;
  }
  .visual-preview .canvas > .empty-state.boundary-state[data-state] h2 { font-size: 27px; }
}
@media (max-width: 350px) {
  .visual-preview .canvas > .empty-state.boundary-state[data-state] { padding-left: 20px; padding-right: 20px; }
  .visual-preview .canvas > .empty-state.boundary-state[data-state] h2 { font-size: 25px; }
}
/* Actual parentId hierarchy and a single composer inside the selected branch. */
.reading-comment-thread{min-width:0;position:relative}
.reading-comment-thread>.reading-comment{margin-left:0;margin-bottom:18px}
.reading-comment-children{margin:0 0 20px 36px;padding-left:14px;border-left:1px solid var(--border,#252a33);min-width:0}
.reading-comment-thread[data-depth="5"] .reading-comment-children{margin-left:0;padding-left:10px}
.reading-parent-context{font-size:11px;line-height:1.5;margin:0 0 7px 44px;color:var(--muted,#9299a7);max-width:calc(100% - 44px);text-align:left;overflow-wrap:anywhere}
.reading-comment-composer{min-width:0}
.reading-comment-composer [name="comment"]{scroll-margin-block:100px}
.reading-reply-slot>.reading-comment-composer{margin:0 0 18px 44px}
.reading-reply-context{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:12px;color:var(--muted,#9299a7)}
.reading-reply-context[hidden]{display:none}
.reading-reply-context .icon-btn{width:28px;height:28px;min-width:28px}
.reading-reply-context span{overflow-wrap:anywhere}
.reading-comment-thread .reading-comment-form{width:100%;min-width:0;margin-bottom:0}
.reading-comment-thread .reading-comment-field{min-width:0}
@media(max-width:700px){.reading-comment-children{margin-left:16px;padding-left:8px}.reading-comment-thread[data-depth="3"] .reading-comment-children{margin-left:0;padding-left:6px}.reading-reply-slot>.reading-comment-composer{margin-left:0}.reading-parent-context{margin-left:0;max-width:100%}.reading-comment-form{gap:8px}}