lex-babel 0.19.2

/* Lex HTML Export - Baseline Styles
 * Browser reset + default modern Lex presentation
 * Mobile-first, semantic HTML approach
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;600&family=Source+Sans+3:ital,wght@0,200,400;0,600;0,700;1,400,200;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

/* === CSS Variables for Palette + Rhythm === */
:root {
  /* VSCode Light Theme inspired colors */
  --lex-normal: #000000;
  --lex-muted: #808080;
  --lex-faint: #aaaaaa;
  --lex-faintest: #cccccc;
  --lex-bg: #ffffff;
  --lex-code-bg: #f3f3f3;

  /* Spacing scale */
  --lex-space-025: 0.25rem;
  --lex-space-050: 0.5rem;
  --lex-space-075: 0.75rem;
  --lex-space-100: 1rem;
  --lex-space-125: 1.25rem;
  --lex-space-150: 1.5rem;
  --lex-space-200: 2rem;

  /* Layout tokens derived from legacy pixel values */
  --lex-width-document: 50rem;
  /* 800px */
  --lex-indent-content: var(--lex-space-100);
  --lex-radius-sm: 0.1875rem;
  /* 3px */
  --lex-radius-md: 0.25rem;
  /* 4px */
  --lex-outline-width: 0.125rem;
  /* 2px */
  --lex-border-thin: 0.0625rem;
  /* 1px */
  --lex-breakpoint-sm: 40rem;
  /* 640px */
}

/* === Box Model Reset === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* === Document Structure === */
html {
  font-size: 100%;
  line-height: 1.25;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  min-height: 90vh;
  font-family: 'Geist', Helvetica, 'Source Sans 3', Arial, sans-serif;
  color: var(--lex-normal);
  background: var(--lex-bg);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
}

/* === Lex Document Container === */
.lex-document {
  max-width: var(--lex-width-document);
  margin: 0 auto;
  padding: var(--lex-space-200) var(--lex-space-150);
}

/* === Sessions (Headings and Sections) === */
section.lex-session {
  margin: var(--lex-space-150) 0;
}

section.lex-session:first-child {
  margin-top: 0;
}

.lex-document>section.lex-session {
  margin: var(--lex-space-200) 0;
}

.lex-document>section.lex-session:first-child {
  margin-top: 0;
}

/* === Content Containers (AST container structure) === */
.lex-content {
  padding-left: var(--lex-indent-content);
}

/* #610 (option 1): the `<div class="lex-content">` wrapper is now
 * suppressed when the immediate parent is a `<section>` (the section
 * IS the semantic content area, so the wrapper was pure DOM bloat).
 * Compensate by offsetting the section's direct content children with
 * `margin-left`. `padding-left` is wrong for elements that draw their
 * own box (`.lex-verbatim` has a background + border) — padding would
 * leave the box at the section edge and only push the inner text right.
 * `margin-left` moves the entire box, matching what the wrapper used
 * to do. The captions emitted before code blocks (`.lex-verbatim-subject`)
 * are siblings of `.lex-verbatim` and need the same offset. */
section.lex-session > p,
section.lex-session > .lex-list,
section.lex-session > .lex-verbatim,
section.lex-session > .lex-verbatim-subject,
section.lex-session > .lex-definition,
section.lex-session > .lex-table,
section.lex-session > blockquote,
section.lex-session > figure,
section.lex-session > section.lex-session {
  margin-left: var(--lex-indent-content);
}

/* Top-level sessions retain standard content padding */

/* === Headings with Scaled Sizes === */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Geist', Helvetica, 'Source Sans 3', Arial, sans-serif;
  font-weight: 700;
  color: var(--lex-normal);
  line-height: 1.25;
  margin: var(--lex-space-150) 0 var(--lex-space-150);
}

h1 {
  font-size: 1em;
  margin-top: 0;
  margin-bottom: var(--lex-space-100);
}

h2 {
  font-size: 1em;
  margin-top: var(--lex-space-150);
}

h3 {
  font-size: 1em;
  margin-top: var(--lex-space-125);
}

h4 {
  font-size: 1;
  margin-top: var(--lex-space-100);
}

h5 {
  font-size: 1em;
  margin-top: var(--lex-space-100);
}

h6 {
  font-size: 1em;
  margin-top: var(--lex-space-100);
  font-weight: 600;
}

section.lex-session>h1:first-child,
section.lex-session>h2:first-child,
section.lex-session>h3:first-child,
section.lex-session>h4:first-child,
section.lex-session>h5:first-child,
section.lex-session>h6:first-child {
  margin-top: 0;
}

/* === Paragraphs === */
.lex-paragraph {
  margin: var(--lex-space-100) 0;
  line-height: 1.25;
  color: var(--lex-normal);
}

.lex-paragraph:first-child {
  margin-top: 0;
}

h1+.lex-paragraph,
h2+.lex-paragraph,
h3+.lex-paragraph,
h4+.lex-paragraph,
h5+.lex-paragraph,
h6+.lex-paragraph {
  margin-top: 0;
}

/* === Lists === */
.lex-list {
  margin: var(--lex-space-100) 0;
  padding-left: var(--lex-space-200);
  list-style: none;
  line-height: 1.25;
}

.lex-list:first-child {
  margin-top: 0;
}

.lex-list-item {
  margin: var(--lex-space-050) 0;
}

.lex-list .lex-list {
  margin: var(--lex-space-050) 0;
}

.lex-list-item::marker {
  color: var(--lex-muted);
}

/* === Definition Lists === */
.lex-definition {
  margin: var(--lex-space-100) 0;
}

.lex-definition dt {
  font-weight: 600;
  font-style: italic;
  color: var(--lex-normal);
  margin-top: var(--lex-space-100);
}

.lex-definition dt:first-child {
  margin-top: 0;
}

.lex-definition dd {
  margin-left: var(--lex-space-150);
  margin-top: var(--lex-space-025);
  margin-bottom: var(--lex-space-050);
  line-height: 1.25;
}

/* #604: `<dd>` body now emits as `<dd><p>…</p>` (the prior
 * `<div class="lex-content"><p class="lex-paragraph">…</p></div>` wrapper
 * is dropped — the dd is already the content container). Compensate for
 * the removed `.lex-paragraph` margin/line-height and the removed
 * `.lex-content` padding-left on bare `<p>` and any nested lists/verbatim
 * children of the dd. */
.lex-definition dd > p {
  margin: var(--lex-space-100) 0;
  line-height: 1.25;
}

.lex-definition dd > p:first-child {
  margin-top: 0;
}

.lex-definition dd > .lex-list,
.lex-definition dd > .lex-verbatim {
  padding-left: var(--lex-indent-content);
}

/* === Verbatim (Code Blocks) === */
.lex-verbatim {
  background: var(--lex-code-bg);
  padding: var(--lex-space-100) var(--lex-space-125);
  margin: var(--lex-space-125) 0;
  border-radius: var(--lex-radius-md);
  overflow-x: auto;
}

.lex-verbatim code {
  background: none;
  padding: 0;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--lex-normal);
  font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Courier New', monospace;
}

/* highlight.js applies its own background to <code>; keep the <pre> background as fallback */
.lex-verbatim code.hljs {
  background: transparent;
}

.lex-verbatim[data-language]::before {
  content: attr(data-language);
  display: block;
  margin-bottom: var(--lex-space-050);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: lowercase;
  color: var(--lex-faint);
  font-family: 'Helvetica Neue', 'Geist', Helvetica, 'Source Sans 3', Arial, sans-serif;
}

@media (max-width: var(--lex-breakpoint-sm)) {
  body {
    font-size: 1.067rem;
    /* 16px */
  }

  .lex-document {
    padding: var(--lex-space-100);
  }

  section.lex-session {
    padding-left: var(--lex-space-100);
  }

  .lex-definition dd {
    margin-left: var(--lex-space-100);
  }

  .lex-verbatim {
    padding: var(--lex-space-075);
    margin: var(--lex-space-100) calc(-1 * var(--lex-space-075));
    border-radius: 0;
  }

  h1 {
    font-size: 1.25em;
  }

  h2 {
    font-size: 1.2em;
  }

  h3 {
    font-size: 1.15em;
  }

  h4,
  h5,
  h6 {
    font-size: 10em;
  }
}

/* === Inline Elements === */
strong {
  font-weight: 700;
  color: var(--lex-normal);
}

em {
  font-style: italic;
  color: var(--lex-normal);
}

code {
  font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  background: var(--lex-code-bg);
  color: var(--lex-normal);
  padding: var(--lex-space-025) var(--lex-space-075);
  border-radius: var(--lex-radius-sm);
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* === Math === */
.lex-math {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  color: var(--lex-normal);
}

/* === Sequence Markers === */
.seq_marker {
  color: var(--lex-muted);
  font-weight: 400;
  margin-right: 0;
}

/* === Links (References) === */
a {
  color: var(--lex-muted);
  text-decoration: underline;
  text-underline-offset: var(--lex-outline-width);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--lex-normal);
}

a:visited {
  color: var(--lex-muted);
}

a:focus {
  outline: var(--lex-outline-width) solid var(--lex-muted);
  outline-offset: var(--lex-outline-width);
}

/* === Responsive Images === */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Selection === */
::selection {
  background: var(--lex-faintest);
  color: var(--lex-normal);
}

/* === Print Styles === */
@media print {
  body {
    font-size: 11pt;
    color: #000;
  }

  .lex-document {
    max-width: 100%;
    padding: 0;
  }

  section.lex-session {
    padding-left: var(--lex-space-100);
    border-left-width: var(--lex-border-thin);
  }

  h1 {
    font-size: 18pt;
  }

  h2 {
    font-size: 16pt;
  }

  h3 {
    font-size: 14pt;
  }

  h4 {
    font-size: 12pt;
  }

  h5,
  h6 {
    font-size: 11pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .lex-verbatim {
    border: var(--lex-border-thin) solid #ccc;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  /* Keep definition terms with their descriptions, and don't split a
   * single definition across pages. */
  dt {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  dd {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  /* Headings shouldn't appear at the bottom of a page orphaned from
   * their first content paragraph. */
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  /* Figures and tables read poorly when split mid-element. */
  figure, table {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }
}

/* Page numbering for paged-media (PDF) rendering. Set on every page;
 * paged renderers (Chromium headless, weasyprint, etc.) honor it. */
@page {
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-size: 9pt;
    color: #666;
  }
}