/* ── layout ──
 * Page layout and the document container the buffer lives in.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Page layout ───────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--bg-page);
  color: var(--fg);
  overflow-x: hidden;
}

/* thin, theme-aware scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
  border: 2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

body {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size);
  line-height: var(--line-height);
}

button { font-family: inherit; }

/* ── Document container ────────────────────────────── */
#document-container {
  /* flex: 1 is dead now that #app-shell is a grid (grid items ignore flex; sizing
     comes from #app-shell's own flex: 1 + grid stretch instead) — kept as a harmless
     no-op documenting the pre-sidebar layout; don't remove #app-shell's flex: 1 thinking
     this is the one doing the work. */
  flex: 1;
  overflow-y: auto;
  padding: 40px 24px 32px;
  position: relative;
  scroll-behavior: smooth;
}

/* The buffer hugs the left, vim-style, instead of floating in a centred column:
   centring pushed the line-number gutter into the middle of the screen and left a
   dead strip between the sidebar and the text. padding-left reserves the gutter. */
/* padding-right reserves the row-action lane the same way, now that the hover
   controls sit on that side. Without it they hang past the container's content box
   and, because overflow-y:auto makes overflow-x auto too, drag a horizontal
   scrollbar onto the note. The column hugs left via margin-right:auto, so at normal
   widths this only eats slack — nothing moves. */
#document-container { padding-left: 78px; padding-right: 112px; }
#doc-col, #document-container > .block, #document-container > * {
  max-width: var(--col-width);
  margin-left: 0;
  margin-right: auto;
}
/* No line-number gutter to reserve room for when the numbers are hidden, so both
   lanes collapse. The hover controls do NOT go away here — `@media (hover: none)`
   hides them on touch, but a narrow window on a mouse still has them — so they tuck
   inside the column instead of hanging past it. Left outside, they added 76px of
   overflow and put a horizontal scrollbar on the note. */
@media (max-width: 820px) { #document-container { padding-left: 24px; padding-right: 24px; } }