/* Beamer Theme CSS - Crane Color Scheme */
/* Crane uses amber accents on white background */

@font-face {
  font-family: 'MonaLisa';
  src: url('MonaLisa-webfont.woff2') format('woff2'),
       url('MonaLisa-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Crane color palette (for text pages) */
  --crane-amber: #f9a825;
  --crane-amber-light: #ffd95a;
  --crane-amber-dark: #c17900;
  --crane-blue: #1565c0;

  /* Solarized Light color palette (for graphs) */
  --sol-base03: #002b36;
  --sol-base02: #073642;
  --sol-base01: #586e75;
  --sol-base00: #657b83;
  --sol-base0: #839496;
  --sol-base1: #93a1a1;
  --sol-base2: #eee8d5;
  --sol-base3: #fdf6e3;

  /* Solarized accent colors (for graphs) */
  --sol-yellow: #b58900;
  --sol-orange: #cb4b16;
  --sol-red: #dc322f;
  --sol-magenta: #d33682;
  --sol-violet: #6c71c4;
  --sol-blue: #268bd2;
  --sol-cyan: #2aa198;
  --sol-green: #859900;

  /* Frame colors - Crane (white background, amber accents) */
  --frame-bg: #ffffff;
  --frame-title-bg: var(--crane-amber);
  --frame-title-text: #000000;
  --frame-subtitle-text: #333333;
  --frame-border: #e0e0e0;

  /* Text colors - Crane */
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-muted: #666666;
  --link-color: var(--crane-blue);

  /* Spacing */
  --frame-padding: 2rem;
  --frame-max-width: 90%;

  /* Typography */
  --font-sans: 'Computer Modern Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Computer Modern Serif', Georgia, serif;
  --font-mono: 'Computer Modern Typewriter', 'Courier New', monospace;
}

/* Reset and base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: clamp(18px, 1.67vw, 32px);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: #ffffff;
  line-height: 1.6;
}

/* Beamer Frame */
.frame {
  background: var(--frame-bg);
  max-width: var(--frame-max-width);
  margin: 2rem auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.frame-title-bar {
  background: var(--frame-title-bg);
  padding: 0.75rem var(--frame-padding);
  border-radius: 4px 4px 0 0;
}

.frame-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--frame-title-text);
}

.frame-subtitle {
  margin: 0 0 0 0;
  font-size: 1.15rem;
  color: var(--frame-subtitle-text);
  font-weight: 600;
}

.frame-content {
  padding: calc(var(--frame-padding) / 2);
  min-height: 400px;
  background: #ffffff;
}

.frame-footer {
  background: #ffffff;
  border-top: 1px solid var(--frame-border);
  padding: 0.5rem var(--frame-padding);
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* Full-bleed mode - breaks out of frame */
.full-bleed {
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.full-bleed .frame-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Title slide - Crane (white background with amber title/subtitle box) */
.title-slide {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: #ffffff;
}

.title-slide .title-box {
  background: var(--crane-amber);
  padding: 1.5rem 3rem 1.25rem 3rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.title-slide h1 {
  font-size: 2.5rem;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.title-slide h2 {
  font-size: 1.25rem;
  margin: 0;
  padding: 0 1rem;
  color: var(--text-primary);
  font-weight: normal;
}

.title-slide .author {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: 1rem 0 0.25rem 0;
}

.title-slide .institute {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0.125rem 0;
}

.title-slide .date {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0.25rem 0;
}

/* Section headers - Crane (white background with amber title) */
.section-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: #ffffff;
}

.section-header .section-title-box {
  background: var(--crane-amber);
  padding: 1.5rem 3rem;
  border-radius: 8px;
}

.section-header h1 {
  font-size: 2.5rem;
  margin: 0;
  color: var(--text-primary);
}

.section-header h2 {
  font-size: 1.25rem;
  margin: 1rem 0 0 0;
  color: var(--text-secondary);
  font-weight: normal;
}

/* Compact section header: chapter title shares the screen with its content
   instead of occupying a full viewport (used by readings.html). */
.section-header.compact {
  min-height: auto;
  padding: 3.5rem 2rem 0.5rem;
}

/* Content that sits directly under a compact section header, with no
   frame chrome or title bar of its own. */
.section-body {
  max-width: var(--frame-max-width);
  margin: 0 auto 2rem auto;
  padding: 0 calc(var(--frame-padding) / 2);
  background: transparent;
}

/* Credit line under an embedded video. */
.video-credit {
  max-width: 440px;
  margin: 0.6rem auto 0 auto;
  font-size: 0.8em;
  line-height: 1.45;
  color: var(--text-muted);
}

.video-credit a {
  color: var(--crane-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

/* Chicago-style reference list */
.reference-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reference-list li {
  margin: 0 0 1.5rem 0;
  padding-left: 2.2rem;
  text-indent: -2.2rem;
  line-height: 1.55;
}

.reference-list li::before {
  content: none;
}

.reference-list a {
  color: var(--crane-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.reference-list a:hover {
  background: var(--crane-amber-light, #fff8e1);
  border-bottom-color: var(--crane-amber, #f9a825);
}

.reference-list .ref-note {
  display: block;
  text-indent: 0;
  font-size: 0.85em;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  line-height: 1.3;
}

p {
  margin: 0 0 1rem 0;
}

/* Lists - Beamer style */
ul, ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.6rem;
}

/* Itemize bullets - triangles like Beamer */
ul {
  list-style: none;
}

ul > li::before {
  content: "▸";
  color: var(--crane-amber-dark);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

ul ul > li::before {
  content: "▹";
}

/* Enumerate - Beamer circles (drawn with drop shadow) */
ol {
  list-style: none;
  counter-reset: beamer-enum;
}

ol > li {
  counter-increment: beamer-enum;
}

ol > li::before {
  content: counter(beamer-enum);
  background: var(--crane-amber);
  color: #000000;
  font-weight: bold;
  font-size: 0.75em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -2em;
  margin-right: 0.5em;
  border: 1.5px solid #000000;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Nested enumerate: sub-items count 1.1, 1.2, ... in a smaller amber pill */
ol ol {
  margin: 0.4rem 0 0 0;
}
ol ol > li::before {
  content: counters(beamer-enum, ".");
  width: auto;
  min-width: 1.5em;
  padding: 0 0.45em;
  border-radius: 1em;
  font-size: 0.7em;
  margin-left: -2.4em;
}

/* Block environments - Crane theme (amber title, light yellow body, black text, no borders) */
.block-group {
  display: grid;
  grid-template-columns: 1fr auto 3fr;
  row-gap: 1rem;
}
.block-group > .block {
  grid-column: 2;
}
.block {
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}

.block-title {
  background: var(--crane-amber);
  padding: 0.6rem 1rem;
  font-weight: bold;
  color: #000000;
}

.block {
  margin-bottom: 1em;
}

.block-body {
  background: #fff8e1;  /* Light yellow */
  color: #000000;
  perspective: 800px;
}
.block-body-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.block-body.flipped .block-body-inner {
  transform: rotateY(180deg);
}
.block-body-front,
.block-body-back {
  backface-visibility: hidden;
}
.block-body-front {
  position: relative;
  background: #fff8e1;
  padding: 1rem;
  border-radius: 0 0 6px 6px;
}
.block-body-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  background: repeating-linear-gradient(
    45deg, #fff, #fff 8px, #f0d68a 8px, #f0d68a 10px);
  border: 2px solid #f0d68a;
  border-radius: 0 0 6px 6px;
  user-select: none;
}
.flip-circle {
  background: #ffffff;
  border: 2px solid #f0d68a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flip-circle .flip-q {
  color: #c17900;
  -webkit-text-stroke: 3px #c17900;
  -webkit-text-fill-color: transparent;
  font-family: 'MonaLisa', Georgia, serif;
  line-height: 1;
}

/* Source citation closing a quoted block body */
.block-cite {
  display: block;
  margin-top: 0.7rem;
  text-align: right;
  font-size: 0.8em;
  color: var(--text-muted);
}

/* Definition, Example, Alert blocks - all use same Crane styling */

/* Emphasis */
.structure {
  color: var(--crane-blue);
  font-weight: bold;
}

.alert-text {
  color: #c62828;
  font-weight: bold;
}

/* Key equation highlight box */
.key-equation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

.key-equation > div {
  display: inline-block;
  background: #fff8e1;
  border: 2px solid var(--crane-amber);
  border-radius: 8px;
  padding: 0.4rem 1.2rem;
  font-size: 1.15em;
}

.key-equation .katex-display {
  margin: 0.3em 0;
}

.key-equation-tag {
  font-family: 'Times New Roman', serif;
  font-size: 1.1em;
  color: var(--crane-amber-dark);
}

/* Simple booktabs-style data table: horizontal rules only, no verticals. */
.data-table {
  border-collapse: collapse;
  margin: 1.1rem auto 0.4rem auto;
}

.data-table th,
.data-table td {
  padding: 0.45rem 1.2rem;
  text-align: left;
}

.data-table thead th {
  border-top: 2px solid var(--text-primary);
  border-bottom: 1px solid var(--text-primary);
  font-weight: 700;
}

.data-table tbody tr:last-child td {
  border-bottom: 2px solid var(--text-primary);
}

/* Two-column layout */
.columns {
  display: flex;
  gap: 2rem;
}

.column {
  flex: 1;
}

.column-narrow {
  flex: 0.4;
}

.column-wide {
  flex: 0.6;
}

/* Beamer description lists — dt and dd on same line */
dl.beamer-description {
  margin: 0;
}

dl.beamer-description dt {
  float: left;
  clear: left;
  font-weight: bold;
  margin-right: 0.4em;
  margin-top: 0.5rem;
}

dl.beamer-description dt::after {
  content: "";
}

dl.beamer-description dd {
  margin-left: 0;
  margin-top: 0.5rem;
  overflow: hidden; /* keeps dd beside float */
}

dl.beamer-description dd + dt:first-of-type,
dl.beamer-description dt:first-of-type {
  margin-top: 0;
}

dl.beamer-description dt:first-of-type + dd {
  margin-top: 0;
}

/* LaTeX font size helpers */
.fs-14pt { font-size: 1.27em; line-height: 1.3; }
.fs-11pt { font-size: 1em; line-height: 1.5; }
.fs-10pt { font-size: 0.91em; line-height: 1.4; }

/* LaTeX vertical spacing helpers — \vspace after title bar */
.vspace-neg-9mm > .frame-content { padding-top: 0; }
.vspace-neg-5mm > .frame-content { padding-top: 0.4rem; }
.vspace-neg-4mm > .frame-content { padding-top: 0.55rem; }
.vspace-neg-3mm > .frame-content { padding-top: 0.7rem; }

/* Pull quote — verbatim passages inside a reading frame */
.pullquote {
  margin: 1rem 0 1rem 1.5rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 4px solid var(--crane-amber);
  color: var(--text-secondary);
  font-style: italic;
}

.pullquote .attrib {
  display: block;
  margin-top: 0.35rem;
  font-style: normal;
  font-size: 0.85em;
  color: var(--text-muted);
}

/* Reveal animations - hidden by default */
.reveal {
  opacity: 0;
  transform: translateY(20px);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Horizontal scroll container */
.scroll-section {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}

.scroll-track {
  display: flex;
  width: fit-content;
}

.scroll-panel {
  width: 100vw;
  min-height: 100vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #ffffff;
}

/* Graph container */
.graph-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.graph-container svg {
  width: 100%;
  height: auto;
}

/* ============================================
   OVERLAY SYSTEM
   For frames with Beamer overlays (\pause, \uncover, <1->)
   ============================================ */

.overlay-frame {
  position: relative;
}

.overlay-frame .frame-title-bar {
  position: sticky;
  top: 0;
  z-index: 10;
}

.overlay-frame .frame-content {
  transition: transform 0.4s ease;
}

.overlay-frame .overlay {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.overlay-frame .overlay.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Print styles */
@media print {
  body {
    background: white;
  }

  .frame {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
    margin: 1rem auto;
  }

  .full-bleed {
    min-height: auto;
    page-break-before: always;
  }

  .scroll-section {
    overflow: visible;
  }

  .scroll-track {
    flex-direction: column;
    width: 100%;
  }

  .scroll-panel {
    width: 100%;
    min-height: auto;
    page-break-inside: avoid;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .overlay-frame .overlay {
    opacity: 1;
    transform: none;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .frame {
    margin: 1rem;
    border-radius: 0;
  }

  .frame-content {
    padding: 1rem;
  }

  .columns {
    flex-direction: column;
    gap: 1rem;
  }

  .title-slide h1,
  .section-header h1 {
    font-size: 2rem;
  }

  .title-slide .title-box,
  .section-header .section-title-box {
    padding: 1rem 1.5rem;
  }
}

/* ============================================
   Persuasion frame — debate clip + FRED chart
   need real vertical room; the FRED embed must
   be tall enough to show its x-axis years.
   ============================================ */
#persuasion .frame-content {
  min-height: 720px;
}

#persuasion .columns {
  align-items: flex-start;
}

#persuasion .fred-embed {
  width: 100%;
  height: 620px;
  border: 0;
  display: block;
}

@media (max-width: 768px) {
  #persuasion .frame-content {
    min-height: 0;
  }

  #persuasion .fred-embed {
    height: 480px;
  }
}

/* ============================================
   Dropbox-hosted video (share link + &raw=1)
   ============================================ */
.dropbox-video {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  background: #000;
}

/* Phantom copy of the opening bullet, sitting above the Rationality clip. It is
   hidden but still occupies space, so it reserves the height of the text beside
   it and drops the clip to the foot of the list — tracking text wrapping at any
   width without a hard-coded offset. Dropped once the columns stack. */
.clip-spacer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  .clip-spacer {
    display: none;
  }
}