/* CSLib visual identity, taken from the www.cslib.io sources
   (cslib-community.github.io: static/css/style.css, .white-brown-gradient): Open Sans, a sienna palette, and the brown gradient. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --cslib-primary: #A0522D;      /* --color-primary on cslib.io */
  --cslib-primary-dark: #8B4513; /* --color-primary-focus */
  --cslib-accent: #D35400;       /* the square in the CSLib logo */
  --cslib-surface: #E5D0BA;      /* --color-surface */
  --cslib-tint: #f7efe6;
  --cslib-gradient: linear-gradient(135deg, #CCAE8E 5%, #B8936F 40%, #A0704A 100%);
  --text-dark: #2F1A0F;          /* --color-text */
  --text-muted: #5C3A21;         /* --color-text-light */
  --bg-code: #f8fafc;
  --border-code: #e2e8f0;
}

/* ── Base typography ── */
.reveal {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;
  /* Slide pixels, never vh/vw: reveal.js already scales the 1280×720 slide to
     the window, so viewport units would scale twice and drift against the
     rest of the slide on another screen. 1vh of the slide = 7.2px. */
  font-size: 24.5px;
  color: var(--text-dark);
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  text-transform: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 500;
  color: var(--text-dark);
}

.reveal .slides section {
  text-align: left;
  /* In slide pixels, not vw: reveal.js scales the 1280×720 slide up to the
     window, so a 3vw side margin came out at about 2cm. 40px leaves the
     content 94% of the slide width, the proportion of Leo's 3vw. */
  padding: 14px 40px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Slide header (logo + teal line) ── */
.slide-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0.5em;
}
.slide-header img {
  height: 43px;
  flex-shrink: 0;
}
.slide-header::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--cslib-primary);
}

/* ── Title slide (two-part layout) ── */
.title-slide {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  padding: 0 !important;
}
.title-slide .top-area {
  padding: 1.2em 1.5em 0.8em;
  /* Must match the gradient stop in `titleSlide` (Main.lean). */
  height: 25%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.title-slide .logo {
  height: 100%;
  max-height: 140px;
}
.title-slide .title-band {
  /* The blue comes from the section's full-window background gradient. */
  background: transparent;
  flex: 1;
  padding: 1em 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.reveal .title-slide h1 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0 0 0.6em 0;
  color: var(--text-dark);
}
.title-slide .meta {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.6;
}
.title-slide .meta strong {
  font-weight: 700;
  color: var(--text-dark);
}
.title-slide .date {
  font-size: 0.85em;
  font-weight: 300;
  color: var(--text-muted);
  margin-top: auto;
  padding-bottom: 0.5em;
}
/* Where the deck lives, under the date: smaller, and not a loud link. */
.title-slide .date .url {
  font-size: 0.8em;
  color: inherit;
  text-decoration: none;
}

/* ── Content slides ── */
.reveal h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 0.5em 0;
  color: var(--text-dark);
}

.reveal ul {
  font-size: 0.9em;
  font-weight: 300;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.2em;
}
.reveal ul ul {
  font-size: 1em;
}
.reveal ul li {
  margin-bottom: 0.25em;
}

.reveal p {
  font-size: 0.9em;
  font-weight: 300;
  line-height: 1.6;
  margin: 0.4em 0;
}

.reveal strong {
  font-weight: 600;
  color: var(--text-dark);
}

.reveal em {
  font-style: italic;
}

.reveal a {
  color: var(--cslib-primary);
  font-weight: 600;
}

/* ── Code blocks (non-Lean) ── */
.reveal pre {
  font-size: 0.68em;
  width: fit-content;
  max-width: 90%;
  margin: 0.5em auto;
  box-shadow: none;
  border: 1px solid var(--border-code);
  border-radius: 6px;
  background: var(--bg-code);
}
.reveal pre code {
  padding: 0.8em 1em;
  max-height: 504px;
  background: var(--bg-code);
}

/* ── Inline code ── */
.reveal code {
  font-size: 0.9em;
  background: #f1f5f9;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.reveal pre code {
  background: var(--bg-code);
  padding: 0.8em 1em;
}

/* ── Dark background slides (section breaks) ── */
.reveal section[data-background-gradient]:not(.title-slide) {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
.reveal section[data-background-gradient]:not(.title-slide) h1,
.reveal section[data-background-gradient]:not(.title-slide) h2 {
  color: var(--text-dark) !important;
  font-size: 2em;
  font-weight: 600;
}
.reveal section[data-background-gradient]:not(.title-slide) p,
.reveal section[data-background-gradient]:not(.title-slide) li {
  color: var(--text-dark);
  font-size: 1.1em;
}
.reveal section[data-background-gradient]:not(.title-slide) em {
  color: var(--text-dark);
}
.reveal section[data-background-gradient]:not(.title-slide) strong {
  color: var(--text-dark);
}
.reveal section[data-background-gradient]:not(.title-slide) code {
  background: rgba(255, 255, 255, 0.35);
  color: var(--text-dark);
}

/* ── Blockquotes ── */
.reveal blockquote {
  font-size: 0.85em;
  border-left: 4px solid var(--cslib-primary);
  padding: 0.3em 0.8em;
  margin: 0.5em 0;
  background: var(--cslib-tint);
  border-radius: 0 6px 6px 0;
}

/* A second paragraph in a quote is its source: last line of the box,
   right-aligned, smaller, italic. */
.reveal blockquote p + p {
  text-align: right;
  font-size: 0.75em;
  font-style: italic;
  margin-top: 0.4em;
}

/* ── Two-column layout ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  align-items: start;
}

/* ── Table styling ── */
.reveal table.slide-table {
  font-size: 0.75em;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.5em 0 !important;
  table-layout: auto;
  box-sizing: border-box;
}
.reveal table.slide-table th {
  background: var(--cslib-primary);
  color: white;
  font-weight: 600;
  padding: 0.4em 0.8em;
  text-align: left;
}
.reveal table.slide-table td {
  padding: 0.3em 0.8em;
}
.reveal table.slide-table tr:nth-child(even) td {
  background: #f8fafc;
}

/* ── Lean code: syntax colors ── */
.reveal,
.reveal section {
  --verso-code-keyword-color: #cf222e;
  --verso-code-const-color: #0550ae;
  --verso-code-var-color: #1e293b;
  --verso-code-color: #1e293b;
  --verso-code-font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  --verso-info-indicator-color: var(--cslib-primary);
  --verso-code-keyword-weight: 700;
}

.reveal code.hl.lean.block {
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: 6px;
  box-shadow: none;
  padding: 0.8em 1em;
  line-height: 1.55;
  width: 95%;
  max-width: 95%;
  text-align: left;
}
/* Code size. verso-slides' own stylesheet loads after this one and sets
   0.55em on `.reveal code.hl.lean.block`, so these selectors are one class
   more specific. 0.7em fills the 1280-wide slide: the longest blocks (80
   columns, ~20 lines) still fit, measured on every slide. Next to the info
   panel the box is half as wide, so there it stays 0.55em. */
.reveal .slides code.hl.lean.block { font-size: 0.7em; }
.reveal .slides .code-with-panel code.hl.lean.block { font-size: 0.55em; }

.code-with-panel {
  border: 1px solid var(--border-code);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: none;
}
.code-with-panel > code.hl.lean.block {
  border: none;
  border-radius: 6px 0 0 6px;
  background: var(--bg-code);
}
.code-with-panel > .panel-cell {
  background: #f8fafc;
  border-left: 1px solid var(--border-code);
}
.code-with-panel > .info-panel,
.code-with-panel .info-panel {
  font-size: 0.45em;
  color: var(--text-dark);
}

.reveal code.hl.lean.inline {
  background: #f1f5f9;
  border-radius: 3px;
  padding: 0.1em 0.3em;
  font-size: 0.85em;
}

.command-output.information {
  background: var(--cslib-tint);
  border-color: var(--cslib-primary);
  border-radius: 4px;
  font-size: 0.9em;
}

.reveal .hl.lean .has-info.information .token:not(.tactic-state):not(.tactic-state *),
.reveal .hl.lean .has-info.information .inter-text:not(.tactic-state):not(.tactic-state *) {
  text-decoration-color: rgba(8, 145, 178, 0.35);
}

.hl.lean .keyword {
  font-weight: 700 !important;
}

.hl.lean .var {
  font-style: normal !important;
}

.hl.lean .hover-container {
  display: block;
}

/* ── Images ── */
.reveal section img {
  max-width: 70%;
  max-height: 324px;
  object-fit: contain;
}
.reveal section img.img-tall {
  max-height: 504px;
  max-width: 95%;
}
.reveal section img.img-small {
  max-height: 180px;
  max-width: 40%;
}
.reveal section img.img-wide {
  max-width: 90%;
  max-height: 288px;
}

/* ── hstack layout ── */
.reveal .r-hstack {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5em;
}
.reveal .r-hstack > ul { flex: 1; }
.reveal .r-hstack > p  { flex: 1; }
.reveal .r-hstack > hr,
.reveal .r-hstack > p:empty { display: none; }

/* ── CSLib accents on reveal.js chrome ── */
.reveal-viewport {
  --r-link-color: #A0522D;
  --r-link-color-dark: #8B4513;
  --r-link-color-hover: #8B4513;
  --r-selection-background-color: #E5D0BA;
  --r-heading-color: #2F1A0F;
  --r-main-color: #2F1A0F;
}
.reveal a,
.reveal a:visited { color: var(--cslib-primary); }
.reveal a:hover { color: var(--cslib-primary-dark); }
.reveal .controls { color: var(--cslib-primary); }
.reveal .progress { color: var(--cslib-primary); }
/* Slide number: brown on a white box on every slide. On the brown gradient
   of the title and section breaks, the white box is what keeps it legible.
   Bottom left: the navigation arrows take the bottom right, and there the
   number covered the "down" arrow of vertical groups. */
.reveal .slide-number {
  background-color: #ffffff;
  color: var(--cslib-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  border-radius: 4px;
  padding: 5px 9px;
  left: 10px;
  right: auto;
  bottom: 10px;
  box-shadow: 0 1px 3px rgba(47, 26, 15, 0.25);
}
.reveal .slide-number a { color: var(--cslib-primary); }
/* On the brown gradient the sienna arrows vanish: draw them in dark brown. */
.reveal:has(.slides > section.present[data-background-gradient]) .controls {
  color: var(--text-dark);
}

/* Extra room above a block: wrap it in `:::attr («class» := "space-above")`. */
.reveal .space-above { margin-top: 1.2em !important; }

/* Display math: Verso wraps it in <code class="math display">; drop the code
   styling and KaTeX's large default margins. */
.reveal code.math.display {
  display: block;
  background: none;
  border: none;
  padding: 0;
}
.reveal .katex-display { margin: 0.3em 0; }

/* Authors of the CSLib code a slide uses: `:::attr («class» := "credits")`. */
.reveal .credits {
  font-size: 0.5em !important;
  color: #7a6a5e;
  margin-top: 0.8em !important;
}
.reveal .credits a { color: inherit; text-decoration: underline dotted; }

/* The Mathlib dependency graph fills its half of the `hstack`, as the tall
   images in Leo's deck do. */
.reveal section img[alt="Mathlib dependency graph"] {
  max-width: 100%;
  max-height: 504px;
}