/* ============================================================================
   Oli's Anecdotes — long-form article layout (deep dives)
   ----------------------------------------------------------------------------
   A different MODE from the interactive explainer: this is for reading, not
   clicking. Prose measure, generous headings, callouts. Everything colour /
   size / space comes from oli-dark.css, so a deep dive can't drift from the
   rest of the site. The page bar (pagebar.js) provides the breadcrumb + nav.
   ========================================================================== */

.doc {
  max-width: 760px;                 /* a real reading measure, not 1080 */
  margin: 0 auto;
  padding: 0 var(--md-space-4) 80px;
}

/* --- Masthead ------------------------------------------------------------ */
.doc-head { padding: 44px 0 var(--md-space-6); border-bottom: 1px solid var(--md-outline-variant); margin-bottom: var(--md-space-6); }
.doc-eyebrow {
  font-size: var(--md-text-2xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--md-teal); margin: 0 0 var(--md-space-3);
}
/* was 32px/600. Slightly larger and tighter tracking gives the masthead a
   clear step above h2 without touching the body scale. */
.doc-head h1 { font-size: 36px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; margin: 0 0 var(--md-space-3); }
.doc-head h1 em { font-style: normal; color: var(--md-primary); }
.doc-lede { font-size: var(--md-text-lg); line-height: 1.55; color: var(--md-on-surface-variant); margin: 0; }
.doc-meta { display: flex; gap: var(--md-space-2); flex-wrap: wrap; margin-top: var(--md-space-4); }

/* --- Body typography ----------------------------------------------------- */
/* a hairline above each section makes the structure scannable without
   adding weight or colour. */
.doc h2 {
  font-size: var(--md-text-2xl); font-weight: 600; letter-spacing: -.01em;
  margin: 56px 0 var(--md-space-4); scroll-margin-top: 60px;
  padding-top: var(--md-space-6); border-top: 1px solid var(--md-outline-variant);
}
/* Scoped to a direct child of .doc, not just any h2 in the subtree — the
   Sources heading is also "first-of-type" within its own .sources parent,
   and without the `>` this rule's higher specificity would override
   .sources h2's own margin below and open an unwanted 40px gap there. */
.doc > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 40px; }
.doc h3 { font-size: var(--md-text-lg); font-weight: 600; margin: var(--md-space-6) 0 var(--md-space-2); }
/* was color: var(--md-on-surface-variant) at 14px/1.7. Body copy in a long
   read earns the higher-contrast on-surface; the variant stays for meta. */
.doc p { font-size: var(--md-text-base); line-height: 1.75; color: var(--md-on-surface); margin: 0 0 var(--md-space-4); }
.doc p strong, .doc li strong { color: var(--md-on-surface); font-weight: 600; }
.doc a { color: var(--md-secondary); text-decoration: none; }
.doc a:hover { text-decoration: underline; }
.doc ul, .doc ol { margin: 0 0 var(--md-space-4); padding-left: 1.3em; }
.doc li { font-size: var(--md-text-base); line-height: 1.7; color: var(--md-on-surface); margin-bottom: var(--md-space-2); }
.doc em.term { font-style: normal; color: var(--md-on-surface); }

/* --- Pull-quote (the memorable lines from sources) ----------------------- */
.doc blockquote {
  margin: var(--md-space-6) 0; padding: var(--md-space-2) 0 var(--md-space-2) var(--md-space-4);
  border-left: 3px solid var(--md-primary);
  font-size: var(--md-text-lg); line-height: 1.5; color: var(--md-on-surface);
}
.doc blockquote cite { display: block; margin-top: var(--md-space-2); font-size: var(--md-text-sm); font-style: normal; color: var(--md-on-surface-variant); }

/* --- Callout (reuses the card idiom, adds a tone bar) --------------------- */
.callout {
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg);
  background: var(--md-surface-c); padding: var(--md-space-4);
  margin: var(--md-space-6) 0; border-left-width: 3px;
}
.callout.key  { border-left-color: var(--md-primary); }
.callout.warn { border-left-color: var(--md-error); }
.callout.aside{ border-left-color: var(--md-teal); }
.callout .callout-label { font-size: var(--md-text-2xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--md-space-2); }
.callout.key  .callout-label { color: var(--md-primary); }
.callout.warn .callout-label { color: var(--md-error); }
.callout.aside .callout-label { color: var(--md-teal); }
.callout p:last-child { margin-bottom: 0; }

/* --- Figure (inline SVG diagrams) ---------------------------------------- */
.doc figure { margin: var(--md-space-6) 0; }
/* box-sizing is explicit because article pages never load site.css, which is
   where the global border-box reset lives. Without this, width:100% plus
   32px padding and 2px border overflows the container by ~10px. */
.doc figure svg {
  box-sizing: border-box;
  width: 100%; height: auto; display: block;
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg);
  background: var(--md-surface-c); padding: var(--md-space-4);
}
.doc figcaption { font-size: var(--md-text-xs); color: var(--md-outline); margin-top: var(--md-space-2); text-align: center; }

/* --- Table --------------------------------------------------------------- */
.doc .table-wrap { overflow-x: auto; margin: var(--md-space-4) 0; border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--md-text-md); min-width: 460px; }
.doc th, .doc td { text-align: left; padding: var(--md-space-3); border-bottom: 1px solid var(--md-outline-variant); vertical-align: top; }
.doc th { color: var(--md-on-surface); font-weight: 600; background: var(--md-surface-high); }
.doc td { color: var(--md-on-surface-variant); }
.doc tr:last-child td { border-bottom: 0; }

/* --- "One level up" + sibling nav ---------------------------------------- */
.doc-updot { font-size: var(--md-text-sm); margin: 0 0 var(--md-space-4); }
.doc-updot a { color: var(--md-secondary); }
.next-nav { display: grid; gap: var(--md-space-3); grid-template-columns: 1fr 1fr; margin-top: 56px; }
.next-nav a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg);
  background: var(--md-surface-c); padding: var(--md-space-4);
  transition: background .15s ease;
}
.next-nav a:hover { background: var(--md-surface-high); }
.next-nav .nn-label { font-size: var(--md-text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--md-teal); margin: 0 0 4px; }
.next-nav .nn-title { font-size: var(--md-text-base); font-weight: 600; color: var(--md-on-surface); margin: 0; }
.next-nav .nn-blurb { font-size: var(--md-text-md); color: var(--md-on-surface-variant); margin: 4px 0 0; }

/* --- Sources ------------------------------------------------------------- */
.sources { margin-top: 56px; padding-top: var(--md-space-6); border-top: 1px solid var(--md-outline-variant); }
/* border-top/padding-top reset: .doc h2 now carries a hairline for body
   section breaks, but .sources already has its own via the rule above —
   without this reset the nested h2 would stack a second one. */
.sources h2 { font-size: var(--md-text-lg); margin: 0 0 var(--md-space-3); border-top: 0; padding-top: 0; }
.sources ol { font-size: var(--md-text-md); color: var(--md-on-surface-variant); }
.sources li { margin-bottom: var(--md-space-2); line-height: 1.5; }
.sources .asof { color: var(--md-outline); font-size: var(--md-text-xs); }

@media (max-width: 620px) {
  .doc-head h1 { font-size: 26px; }
  .next-nav { grid-template-columns: 1fr; }
}

/* --- Code blocks (engineering pages) ------------------------------------- */
.doc pre {
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  font-family: var(--md-mono); font-size: var(--md-text-sm); line-height: 1.6;
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-md);
  padding: var(--md-space-4); overflow-x: auto; margin: var(--md-space-4) 0;
}
.doc pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.doc :not(pre) > code {
  font-family: var(--md-mono); font-size: 0.88em;
  background: var(--md-surface-high); color: var(--md-secondary);
  padding: 1px 5px; border-radius: 5px;
}
.doc pre .c { color: var(--md-outline); }
.doc pre .k { color: var(--md-primary); }
.doc pre .s { color: var(--md-tertiary); }

/* --- Glossary references (auto-linked acronyms in prose) ------------------ */
.doc a.gloss-ref {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted var(--md-outline); cursor: help;
  transition: color .12s ease, border-color .12s ease;
}
.doc a.gloss-ref:hover { color: var(--md-secondary); border-bottom-color: var(--md-secondary); }