/* ============================================================================
 * BOX BOX - public/reader.css
 * ----------------------------------------------------------------------------
 * "Только суть". The engine's own notes are marked data-noise and simply not
 * displayed; the toggle puts them back. Nothing is removed from the document,
 * so switching is instant and cannot lose anything.
 * ==========================================================================*/

/* One line of a multi-line paragraph. Block rather than a <br>, so hiding a
   line takes its break with it instead of leaving a gap. */
.md .md-seg { display: block; }

.md [data-noise] { display: none; }

/* With the toggle on, the notes come back - but dimmed and ruled, so it is
   obvious at a glance which lines are for her and which are the workings. */
.md.show-all [data-noise] {
  display: revert;
  opacity: 0.5;
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin-left: -14px;
}

.md.show-all h2[data-noise],
.md.show-all h3[data-noise] {
  opacity: 0.5;
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin-left: -14px;
}

/* -- the toggle ----------------------------------------------------------- */

/* Language chips left, detail toggle right, sharing the tinted strip that
   already sits above the document. They used to be two stacked rows, which
   left the toggle floating alone above the page attached to nothing. */
.docbar {
  display: flex;
  align-items: stretch;
  flex: none;
  background: var(--blue-tint);
  border-bottom: 1px solid var(--line);
}

.docbar:not(:has(.reader-btn)):has(.langbar[hidden]) { display: none; }

.docbar .langbar {
  flex: 1 1 auto;
  border-bottom: 0;
  background: transparent;
}

.readerbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  padding: 9px 24px 9px 12px;
  margin-left: auto;
}

.readerbar:empty { display: none; }

.reader-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 11px/1 var(--mono, ui-monospace, monospace);
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.reader-btn { display: inline-flex; align-items: center; gap: 7px; }
.reader-eye { display: flex; color: var(--faint); }
.reader-eye .ico { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.reader-btn:hover .reader-eye, .reader-btn.on .reader-eye { color: inherit; }

.reader-btn:hover { border-color: var(--accent); color: var(--text); }

.reader-btn.on {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 640px) {
  .readerbar { padding: 0 16px; }
}

/* A citation marker under "show everything": small, raised and quiet, so it
   reads as an annotation rather than as part of the sentence. Hidden entirely
   in the tidy view by the [data-noise] rule above - which is the point, since
   resolving one means scrolling to ## Sources and counting. */
.md.show-all .md-cite {
  font-size: .72em;
  vertical-align: .35em;
  color: var(--faint);
  padding-left: 1px;
}