/* ==========================================================================
   prose.css — document rendering. Follows Zed's markdown preview, plus a
   Tufte-style sidenote margin.
   ========================================================================== */

/* The document block centres as a unit: the measure column plus the sidenote
   gutter. Prose sits at the left of it, notes float out into the gutter. */
/* `ch` resolves against the element's own font-size, so .doc must carry the
   prose size. Otherwise the container is measured in 14px characters while its
   contents are measured in 16px ones, and the column neither fits nor centres. */
.doc {
  font-size: var(--buffer-size);
  max-width: calc(var(--measure) + var(--sidenote-gap) + var(--sidenote-w));
  margin: 0 auto;
  padding: 40px 24px 33vh; /* bottom pad so the last line can reach eye level */
}

.prose {
  max-width: var(--measure);
  line-height: var(--prose-line);
  color: var(--text);
}

/* ---- Front matter -------------------------------------------------------- */

.doc__header {
  max-width: var(--measure);
  margin-bottom: 34px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-variant);
}

.doc__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: var(--ui-size-sm);
  color: var(--text-muted);
}

.doc__meta dt {
  display: inline;
  color: var(--text-placeholder);
}
.doc__meta dt::after {
  content: " ";
}
.doc__meta dd {
  display: inline;
  margin: 0;
}
.doc__meta > div {
  display: flex;
  gap: 5px;
}

/* ---- Headings ------------------------------------------------------------ */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin: 1.8em 0 0.6em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  scroll-margin-top: 24px;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h1 {
  font-size: 1.625em;
  letter-spacing: -0.01em;
}
.prose h2 {
  font-size: 1.3125em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--border-variant);
}
.prose h3 {
  font-size: 1.125em;
}
.prose h4 {
  font-size: 1em;
}
.prose h5,
.prose h6 {
  font-size: 0.9375em;
  color: var(--text-muted);
}

/* Anchor link, revealed on hover — the ¶ affordance. */
.heading-anchor {
  margin-left: 0.4em;
  color: var(--text-placeholder);
  opacity: 0;
  font-weight: 400;
  text-decoration: none;
}
.prose :is(h1, h2, h3, h4, h5, h6):hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}

/* Brief flash when the outline panel jumps you to a heading. */
@keyframes heading-flash {
  from {
    background: var(--search-match);
  }
  to {
    background: transparent;
  }
}
.prose :target {
  animation: heading-flash 1.2s ease-out;
}

/* ---- Block elements ------------------------------------------------------ */

.prose p {
  margin: 0 0 1.15em;
}

.prose ul,
.prose ol {
  margin: 0 0 1.15em;
  padding-left: 2ch;
}

.prose li {
  margin-bottom: 0.3em;
}
.prose li > ul,
.prose li > ol {
  margin: 0.3em 0 0;
}

.prose li::marker {
  color: var(--syn-punctuation);
}

.prose blockquote {
  margin: 0 0 1.15em;
  padding: 0.1em 0 0.1em 1.5ch;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}
.prose blockquote > :last-child {
  margin-bottom: 0;
}

.prose hr {
  height: 0;
  margin: 2.2em 0;
  border: 0;
  border-top: 1px solid var(--border-variant);
}

.prose img,
.prose video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em 0;
  border-radius: var(--radius);
}

.prose figure {
  margin: 1.5em 0;
}
.prose figcaption {
  margin-top: 0.5em;
  font-size: 0.8125em;
  color: var(--text-muted);
}

.prose a {
  color: var(--text-accent);
  text-decoration-color: var(--border-focused);
  text-underline-offset: 0.2em;
}
.prose a:hover {
  text-decoration: underline;
}

.prose strong {
  font-weight: 700;
}
.prose em {
  font-style: italic;
}

/* ---- Code ---------------------------------------------------------------- */

.prose code {
  font-family: var(--font);
  font-size: 0.9375em;
  font-variant-ligatures: contextual;
}

/* Inline code takes Ayu's markup-literal orange. */
.prose :not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--bg-panel);
  border-radius: 3px;
  color: var(--syn-literal);
}

.prose pre {
  margin: 0 0 1.4em;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-variant);
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.6;
  tab-size: 2;
}

.prose pre code {
  padding: 0;
  background: none;
  color: var(--text);
  font-size: 0.875em;
}

/* Ayu Light syntax classes, emitted by the build's highlighter. */
.tok-keyword {
  color: var(--syn-keyword);
}
.tok-string {
  color: var(--syn-string);
}
.tok-function {
  color: var(--syn-function);
}
.tok-number,
.tok-constant {
  color: var(--syn-constant);
}
.tok-comment {
  color: var(--syn-comment);
}
.tok-operator {
  color: var(--syn-operator);
}
.tok-type {
  color: var(--syn-type);
}
.tok-tag,
.tok-property {
  color: var(--syn-tag);
}
.tok-punctuation {
  color: var(--syn-punctuation);
}

/* ---- Tables -------------------------------------------------------------- */

.prose table {
  width: 100%;
  margin: 0 0 1.4em;
  border-collapse: collapse;
  font-size: 0.9375em;
}

.prose th,
.prose td {
  padding: 6px 10px;
  border: 1px solid var(--border-variant);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--bg-panel);
  font-weight: 600;
}

/* ==========================================================================
   Sidenotes

   Markup contract, identical to the one already in use at dev/bengaskin so
   existing content migrates without rewriting:

     <label for="sn-1" class="margin-toggle sidenote-number"></label>
     <input type="checkbox" id="sn-1" class="margin-toggle"/>
     <span class="sidenote">…</span>

   Order is load-bearing. The narrow-viewport reveal is
   `.margin-toggle:checked + .sidenote`, an adjacent-sibling selector, so the
   span must immediately follow the input. The note is a <span>, never a
   <div>/<p>, because it sits inside a paragraph — the build flattens block
   content to phrasing before emitting.
   ========================================================================== */

.prose {
  counter-reset: sidenote-counter;
}

/* The label is empty; the number is generated. It also *is* the toggle, so
   clicking the marker expands the note in inline mode. */
.sidenote-number {
  counter-increment: sidenote-counter;
  cursor: pointer;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  color: var(--text-accent);
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  padding-left: 0.15em;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  color: var(--text-accent);
  font-size: 0.8em;
  vertical-align: super;
  line-height: 0;
  padding-right: 0.3em;
}

input.margin-toggle {
  display: none;
}

/* Marginnotes carry their own visible ⊕ label; sidenotes do not. */
label.margin-toggle:not(.sidenote-number) {
  display: none;
}

.sidenote,
.marginnote {
  float: right;
  clear: right;
  width: var(--sidenote-w);
  margin-right: calc(-1 * (var(--sidenote-w) + var(--sidenote-gap)));
  margin-bottom: 1.3em;
  font-size: 0.8125em;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: left;
  position: relative;
  top: -0.3em; /* align to the x-height of the referring line */
}

.sidenote > :last-child,
.marginnote > :last-child {
  margin-bottom: 0;
}

/* Notes inside an inset block need a deeper pull to clear the block's padding. */
.prose blockquote .sidenote,
.prose blockquote .marginnote,
.prose .diary-box .sidenote,
.prose .crib .sidenote {
  margin-right: calc(-1 * (var(--sidenote-w) + var(--sidenote-gap) + 2ch));
}

/* ---- Long notes ----------------------------------------------------------
   The margin is a float queue: a note's top is max(its anchor, the bottom of
   the previous note), so one long note displaces every note after it. Notes
   past the build's length threshold get `sidenote--long` and collapse to a
   peek that opens on hover or focus, keeping the queue clear.
   -------------------------------------------------------------------------- */

.sidenote--long {
  max-height: 4.4em;
  overflow: hidden;
  cursor: pointer;
  transition: max-height 0.18s ease;
}

.sidenote--long::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--bg-editor));
  pointer-events: none;
}

.sidenote--long:hover,
.sidenote--long:focus,
.sidenote--long:focus-within {
  max-height: 60em;
  z-index: 5;
  background: var(--bg-editor);
}

.sidenote--long:hover::after,
.sidenote--long:focus::after,
.sidenote--long:focus-within::after {
  opacity: 0;
}

.sidenote--long:focus-visible {
  outline: 1px solid var(--text-accent);
  outline-offset: 2px;
}

/* An explicitly expanded note is never re-collapsed. */
.margin-toggle:checked + .sidenote--long {
  max-height: none;
}
.margin-toggle:checked + .sidenote--long::after {
  content: none;
}

/* ---- Inline mode ---------------------------------------------------------
   Used when the sidenote gutter is switched off, or the pane is too narrow to
   hold one. Notes collapse behind their marker and open on click.
   -------------------------------------------------------------------------- */

.doc[data-notes="inline"] {
  max-width: var(--measure);
}

.doc[data-notes="inline"] .sidenote,
.doc[data-notes="inline"] .marginnote {
  display: none;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0.9em 0;
  padding: 0.7em 1.5ch;
  border-left: 2px solid var(--border-focused);
  background: var(--bg-panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  top: 0;
  max-height: none;
  overflow: visible;
  cursor: auto;
}

.doc[data-notes="inline"] .sidenote--long::after {
  content: none;
}

.doc[data-notes="inline"] .margin-toggle:checked + .sidenote,
.doc[data-notes="inline"] .margin-toggle:checked + .marginnote {
  display: block;
}

.doc[data-notes="inline"] .sidenote-number::after {
  content: counter(sidenote-counter) "\00a0▸";
}
.doc[data-notes="inline"] .sidenote-number:has(+ .margin-toggle:checked)::after {
  content: counter(sidenote-counter) "\00a0▾";
}

/* ---- Translation apparatus ----------------------------------------------
   Carried over from the translation corpus: {crib} for a subordinated literal
   rendering of retained foreign-language text, {box} for the author's own
   ruled or framed passages, {figure} for plates.
   -------------------------------------------------------------------------- */

.prose .crib {
  display: block;
  margin: 0.5em 0 1em;
  padding-left: 1.5ch;
  border-left: 1px solid var(--border-variant);
  font-size: 0.875em;
  color: var(--text-muted);
}

.prose .diary-box {
  margin: 1.6em 0;
  padding: 0.9em 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.prose .diary-box > :last-child {
  margin-bottom: 0;
}

/* Page/folio markers from the source edition, set in the left margin.
   Floated rather than absolutely positioned, so the marker travels with the
   line it precedes and needs no positioned ancestor. */
.prose .page-marker {
  float: left;
  width: 4ch;
  margin-left: -6ch;
  font-size: 0.6875em;
  line-height: calc(var(--prose-line) / 0.6875);
  text-align: right;
  color: var(--text-placeholder);
  user-select: none;
}

/* No room for a left margin in inline mode — inline the marker instead. */
.doc[data-notes="inline"] .page-marker {
  float: none;
  width: auto;
  margin: 0 0.5ch 0 0;
  text-align: left;
}

/* KaTeX, when maths is present. */
.prose .katex-display {
  margin: 1.4em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2em 0;
}

/* ---- Print ---------------------------------------------------------------
   Must stay last in the file. The inline-mode rules above would otherwise hide
   every unchecked sidenote on a print page and drop the whole apparatus.
   -------------------------------------------------------------------------- */

@media print {
  .title-bar,
  .status-bar,
  .dock,
  .tab-bar,
  .breadcrumb,
  .palette-backdrop,
  .heading-anchor {
    display: none !important;
  }

  .workspace,
  .pane__content {
    display: block;
    height: auto;
    overflow: visible;
  }

  .doc {
    max-width: none;
    padding: 0;
  }

  .sidenote,
  .marginnote {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0.5rem 0 0.9rem;
    padding: 0;
    border: 0;
    background: none;
    top: 0;
    color: inherit;
    cursor: auto;
  }

  .sidenote--long::after {
    content: none;
  }

  input.margin-toggle,
  label.margin-toggle:not(.sidenote-number) {
    display: none;
  }
}