/* lifegraph.dev layout corrections, 2026-09-13.
   One measure per column, and code blocks that do not clip. Additive only. */

/* ---- record.html: one right edge, not three -------------------------------
   The column already sets the measure. Per-element ch caps fought it, so each
   block ended somewhere different. Remove the caps and let the column govern. */
.doc { max-width: min(74ch, 94vw); }
.doc .standfirst,
.doc .why p,
.doc p,
.doc li,
footer .disc { max-width: none; }

/* The eyebrow label is a label, it should sit tight, but on its own line. */
.doc .eyebrow { max-width: none; }

/* ---- code blocks: fit the real line lengths, and look scrollable ---------- */
pre {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-size: clamp(0.70rem, 0.92vw, 0.84rem);
  line-height: 1.5;
}
pre.diagram { font-size: clamp(0.62rem, 0.80vw, 0.76rem); }

/* macOS hides overflow scrollbars, so a clipped block looks like a bug.
   Give it a permanent, quiet one. */
pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
pre::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.30); }
pre { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }

/* ---- phone ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .doc, .wrap { padding-left: 18px; padding-right: 18px; }
  .doc { max-width: 100%; }
  pre { font-size: 0.68rem; }
}