/* ===========================================================================
   RAREPAD page layout for the ledger, the learn pages and the misprint.
   Shared by /dashboard, /learn and the 404 page: three small pages off the same
   desk, one file rather than three files of a few lines each.
   Layout only: composition, sticky columns, one off widths. No colour, no
   radius, no shadow, no font, no new component. Everything visual lives in
   rarepad.css. Prefix: dk-
   =========================================================================== */

/* ---- ledger -------------------------------------------------------------- */
.dk-lead { margin-top: var(--s5); }
.dk-gap { margin-top: var(--s4); }
.dk-foot { margin-top: var(--s4); }

/* ---- learn --------------------------------------------------------------- */
.dk-index-hd { margin-bottom: var(--s2); }
.dk-learn { margin-top: var(--s6); }
.dk-learn > .dk-index { position: sticky; top: 80px; }
/* the article title sits under its page mark, ahead of the first paragraph */
.rp-prose .dk-art-t { margin: var(--s2) 0 var(--s5); }

/* the article at 64ch, the mono footnotes in the rail beside it, the pager
   under the article. One column below 1080px, notes after the article. */
.dk-body {
  display: grid;
  grid-template-columns: minmax(0, 64ch) minmax(0, 1fr);
  grid-template-areas: "art side" "tail side";
  gap: 0 var(--s5);
  align-items: start;
}
.dk-body > .dk-col { grid-area: art; min-width: 0; }
.dk-body > .dk-side { grid-area: side; align-self: stretch; position: sticky; top: 80px; }
.dk-body > .dk-tail { grid-area: tail; max-width: 64ch; }
.dk-side-note { margin-top: var(--s3); }
.dk-learn .rp-pager { justify-content: space-between; margin-top: 0; }

/* ---- misprint ------------------------------------------------------------ */
.dk-void { max-width: 560px; margin: var(--s6) auto 0; }
.dk-void-t { margin: var(--s2) 0 var(--s5); }
.dk-plate-bd { display: flex; align-items: center; justify-content: center; min-height: 208px; }
.dk-mark { display: block; }
.dk-mark svg { display: block; width: 112px; height: 112px; }

@media (max-width: 1080px) {
  .dk-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "art" "side" "tail";
    gap: var(--s5) 0;
  }
  .dk-body > .dk-side { position: static; max-width: 64ch; }
}
@media (max-width: 900px) {
  .dk-learn > .dk-index { position: static; }
}
@media (max-width: 560px) {
  .dk-void { margin-top: var(--s4); }
  .dk-plate-bd { min-height: 160px; }
  .dk-mark svg { width: 88px; height: 88px; }
}