@import url("https://assets.bux.osu.edu/bux-webfonts2/bux-webfonts2.css");

.reveal h1 {
  text-align: center;
  font-family: "BuckeyeSerif", Georgia, serif;
  font-weight: 700;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------/*
/* vertical line below headings */
.reveal h2 {
  text-align: center;
  position: relative;
  padding-bottom: 0.3em;
  margin-bottom: 0.6em;
  font-family: "BuckeyeSerif", Georgia, serif;
  font-weight: 700;
}

.reveal h2::after {
  content: "";
  position: absolute;
  bottom: 0.45em;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 2px;
  background-color: var(--color-secondary);
}

/* --------------------------------------------------------------------------/*
/* h3 and lower headings: dark gray instead of the h1/h2 accent color */
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  color: #666666;
}

.reveal h3 {
  font-size: 1.25em !important;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------/*
/* h3 styled like a slide title (h2), for titles inside columns:
   a real h2 there would start a new slide and break navigation */
.reveal h3.h2-style {
  font-size: 1.6em !important;
  line-height: 1.25;
  text-align: center;
  position: relative;
  padding-bottom: 0.3em;
  margin-bottom: 0.6em;
  font-family: "BuckeyeSerif", Georgia, serif;
  font-weight: 700;
  color: var(--color-primary);
}

.reveal h3.h2-style::after {
  content: "";
  position: absolute;
  bottom: 0.15em;
  /* lower than h2's 0.45em to offset the tighter line-height */
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 2px;
  background-color: var(--color-secondary);
}

/* --------------------------------------------------------------------------/*
/* Auto-generated TOC ("Overview") slide */
#TOC ul {
  font-size: 1.15em;
  line-height: 2;
}

/* --------------------------------------------------------------------------/*
/* caption */
p.caption {
  text-align: center !important;
  color: #949da2 !important;
  font-size: 0.85em !important;
  font-style: italic !important;
}

.legend2 {
  text-align: center !important;
  color: #949da2 !important;
  font-size: 0.85em !important;
  font-style: italic !important;
  margin-top: -30px;
}

.legend2.legend-left,
.legend2.legend-left p {
  text-align: left !important;
}

.smaller-table table {
  font-size: 0.93em;
}

/* Tables with an explicit tbl-colwidths get a <colgroup> with % widths,
   but under the default table-layout:auto those are only hints -- a long
   cell (e.g. a code span that can't wrap) can still force its column
   wider, throwing off the percentages. Forcing fixed layout makes
   tbl-colwidths authoritative, which matters when two tables are meant
   to line up visually (e.g. a build across consecutive slides).

   That alone isn't enough though: reveal's theme gives table only
   `margin: auto`, no width, so each table still shrinks to fit its own
   content -- a short table (e.g. one row) ends up narrower overall than
   a long one, and the same column percentages then map to different
   absolute widths. Adding width:100% makes every such table fill the
   slide's content column, so percentages line up in absolute terms too.

   Scoped to tables that actually have a colgroup so auto-sized tables
   are unaffected. */
.reveal table:has(colgroup) {
  table-layout: fixed;
  width: 100%;
}

/* --------------------------------------------------------------------------/*
/* mermaid diagrams */

/* Quarto's mermaid runtime replaces <pre class="mermaid"> with a bare
   <svg class="mermaid-js"> (the .mermaid element itself is removed from
   the DOM), and sets sizing/alignment via an inline style attribute at
   render time -- so the selector must target svg.mermaid-js directly,
   and !important is needed to win over that inline style. */
.diagram-wide svg.mermaid-js {
  width: 60% !important;
  max-width: 60% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* --------------------------------------------------------------------------/*
/* details sections */

details>summary {
  display: block;
  position: relative;
  padding: 10px 30px 10px 10px;
  background-color: #d9e4d9;
  border: none;
  border-radius: 25px;
  /*box-shadow: 3px 3px 4px black;*/
}

/* A summary's native disclosure triangle only shows when its computed
   display is list-item (the default), so display:block already suppresses
   it -- no need for display:flex, which used to split summary's text and
   any inline elements (e.g. `` `code` ``) into separate side-by-side flex
   items instead of one flowing, wrapping paragraph. The chevron is redrawn
   via ::after and absolutely positioned so it stays out of that flow,
   matching details.details-quiz below */
details>summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid #6b7a6b;
  border-bottom: 2px solid #6b7a6b;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.2s ease;
}

details[open]>summary::after {
  transform: translateY(-50%) rotate(45deg);
}

details {
  border-radius: 25px;
  background-color: #d9e4d9;
  padding: 5px 5px;
  margin-left: 5px;
  border-left-width: 0px;
  border-left-style: solid;
  border-left-color: #DCCFDE;
  border-radius: 5px;
}

/* --------------------------------------------------------------------------/*
/* ?? */
.quarto-float {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------/*
/* Markdown code blocks: image syntax */

/* Pandoc's markdown grammar tags an image, ![alt](src), as an "Alert" token
   (span.al), which the atom-one theme paints bold green on a dark red
   background -- so an image example looks like an error next to the plainly
   highlighted link examples. Reset it to the default code text. The theme's
   own rule is just `code span.al`, so this wins on specificity alone. */
.reveal pre.sourceCode.markdown code span.al,
.reveal div.sourceCode code.markdown span.al {
  color: inherit;
  background-color: transparent;
  font-weight: inherit;
}

/* --------------------------------------------------------------------------/*
/* Callouts */
/* Border colors matched to the .blue/.amber/.teal highlight classes
   below, so callouts and inline highlights read as one palette */
.callout-warning {
  border: 2.5px solid var(--color-amber) !important;
  border-left: 5px solid var(--color-amber) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.callout-tip {
  border: 2.5px solid var(--color-teal) !important;
  border-left: 5px solid var(--color-teal) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.callout-note {
  border: 2.5px solid var(--color-blue) !important;
  border-left: 5px solid var(--color-blue) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.callout-important {
  border: 2.5px solid #d63384 !important;
  border-left: 5px solid #d63384 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.callout-caution {
  border: 2.5px solid #fd7e14 !important;
  border-left: 5px solid #fd7e14 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Quiz/question callout: Quarto's callout div extension strips any
   class it doesn't recognize, so a bare .callout-quiz class on the
   callout div itself never survives rendering. Instead, wrap the
   callout in an outer div carrying .callout-quiz:
     ::: {.callout-quiz}
     ::: {.callout-note}
     ...
     :::
     ::: */
.reveal .callout-quiz div.callout.callout-note,
.callout-quiz div.callout.callout-note,
.reveal .quiz div.callout.callout-note,
.quiz div.callout.callout-note {
  border: 2.5px solid #6f42c1 !important;
  border-left: 5px solid #6f42c1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.reveal .callout-quiz div.callout.callout-note.callout-style-default .callout-title,
.callout-quiz div.callout.callout-note .callout-title,
.reveal .quiz div.callout.callout-note.callout-style-default .callout-title,
.quiz div.callout.callout-note .callout-title {
  background-color: rgba(111, 66, 193, 0.1) !important;
}

.reveal .callout-quiz div.callout.callout-note .callout-icon::before,
.callout-quiz div.callout.callout-note .callout-icon::before,
.reveal .quiz div.callout.callout-note .callout-icon::before,
.quiz div.callout.callout-note .callout-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(111, 66, 193)" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.187a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/></svg>') !important;
}

/* .quiz is a newer, single-fence variant of .callout-quiz above: since
   "quiz" (unlike "callout-quiz") doesn't start with "callout-", Quarto's
   revealjs renderer doesn't strip it and instead auto-splits it into the
   same wrapper-div structure, so only one fence is needed in the source:
     ::: {.callout-note .quiz}
     ...
     ::: */

/* Info callout: a neutral, gray (OSU brand grays) informational box,
   for slides where the content itself is already colorful and the
   blue/teal of .callout-note/.callout-tip would clash or blend in.
   Uses a rounded-square "i" icon, a variant on the note's circled "i".
   Single-fence like .quiz above:
     ::: {.callout-note .info}
     ...
     ::: */
.reveal .info div.callout.callout-note,
.info div.callout.callout-note {
  border: 2.5px solid #666666 !important;
  border-left: 5px solid #666666 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.reveal .info div.callout.callout-note.callout-style-default .callout-title,
.info div.callout.callout-note .callout-title {
  background-color: var(--color-secondary-light) !important;
}

.reveal .info div.callout.callout-note .callout-icon::before,
.info div.callout.callout-note .callout-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(102, 102, 102)" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>') !important;
}

/* Discussion callout: identical to .callout-quiz (purple accent, tinted
   header) but with the Font Awesome "comments" glyph instead of a question
   mark, for open discussion prompts rather than quiz questions. Uses the
   FA6 Free webfont (already loaded via the fontawesome quarto extension)
   directly instead of an inline SVG:
     ::: {.callout-discussion}
     ::: {.callout-note}
     ...
     :::
     ::: */
.reveal .callout-discussion div.callout.callout-note,
.callout-discussion div.callout.callout-note {
  border: 2.5px solid #6f42c1 !important;
  border-left: 5px solid #6f42c1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.reveal .callout-discussion div.callout.callout-note.callout-style-default .callout-title,
.callout-discussion div.callout.callout-note .callout-title {
  background-color: rgba(111, 66, 193, 0.1) !important;
}

.reveal .callout-discussion div.callout.callout-note .callout-icon::before,
.callout-discussion div.callout.callout-note .callout-icon::before {
  background-image: none !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f086" !important;
  color: rgb(111, 66, 193) !important;
  font-size: 1.2em;
  line-height: 1.25em;
  text-align: center;
}

/* Quiz-styled <details> block: mimics .callout-quiz as closely as
   possible (purple accent, rounded corners, tinted header, question
   icon) but for a plain <details>/<summary> element:
     <details class="details-quiz"><summary>Question?</summary>
     Answer...
     </details> */
details.details-quiz {
  border: 2.5px solid #6f42c1 !important;
  border-left: 5px solid #6f42c1 !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin-left: 0;
  overflow: hidden;
}

details.details-quiz>summary {
  background-color: rgba(111, 66, 193, 0.1) !important;
  display: block !important;
  position: relative;
  padding: 0.75em 2em 0.75em 2.5em !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

details.details-quiz[open]>summary {
  margin-bottom: 0 !important;
}

/* details.details-quiz has padding:0 (to avoid a gap under the summary),
   so give the body content its own inset without affecting summary's
   own layout/padding. Padding (not margin) is used so it isn't swamped
   by browser default indents on <ul>/<ol> or collapsed by adjoining
   margins. */
details.details-quiz>summary~* {
  padding-left: 1em !important;
  padding-right: 1em !important;
  box-sizing: border-box !important;
}

details.details-quiz> :nth-child(2) {
  padding-top: 0.75em !important;
}

details.details-quiz> :last-child {
  padding-bottom: 0.75em !important;
}

details.details-quiz>summary::before {
  content: "";
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25em;
  height: 1.25em;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(111, 66, 193)" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.187a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/></svg>');
}

/* Absolutely positioned (not flex) so it stays out of summary's normal
   text flow -- see details>summary::after above for why */
details.details-quiz>summary::after {
  content: "";
  position: absolute;
  right: 0.9em;
  top: 50%;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid #6f42c1;
  border-bottom: 2px solid #6f42c1;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.2s ease;
}

details.details-quiz[open]>summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* --------------------------------------------------------------------------/*
/* Colored column boxes */

/* The revealjs theme resets div.columns to display:initial, undoing
   pandoc's own flex layout, so re-declare it here to restore equal-height
   columns (align-items: stretch is flex's default, made explicit) */
.reveal .columns {
  display: flex;
  align-items: stretch;
}

.box-prim,
.box-sec,
.box-tert,
.box-blue,
.box-amber,
.box-teal {
  box-sizing: border-box;
}

.box-primary {
  border: 2px solid var(--color-primary);
  border-top: 5px solid var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.box-secondary {
  border: 2px solid var(--color-secondary);
  border-top: 5px solid var(--color-secondary);
  background-color: var(--color-secondary-light);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.box-tertiary {
  border: 2px solid var(--color-tertiary);
  border-top: 5px solid var(--color-tertiary);
  background-color: var(--color-tertiary-light);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.box-blue {
  border: 2px solid var(--color-blue);
  border-top: 7px solid var(--color-blue);
  background-color: var(--color-blue-light);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.box-amber {
  border: 2px solid var(--color-amber);
  border-top: 7px solid var(--color-amber);
  background-color: var(--color-amber-light);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.box-teal {
  border: 2px solid var(--color-teal);
  border-top: 7px solid var(--color-teal);
  background-color: var(--color-teal-light);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

/* --------------------------------------------------------------------------/*
/* .compare: a light, aligned three-column comparison (row labels + two
   options), as a less boxy alternative to a table. Children are plain
   divs in row order: header row (.cmp-head, with .cmp-chat / .cmp-agent
   for the two option headers), then per row a .cmp-label and two cells. */
.compare {
  display: grid;
  grid-template-columns: 20% 1fr 1fr;
  column-gap: 1.5em;
  margin-top: 0.8em;
}

.compare>div {
  padding: 0.45em 0;
  border-bottom: 1px solid #DDDDDD;
}

.compare>div:nth-last-child(-n+3) {
  border-bottom: none;
}

.compare p {
  margin: 0;
}

.compare .cmp-head {
  font-size: 1.15em;
  font-weight: 700;
  padding-bottom: 0.2em;
  border-bottom: 3px solid transparent;
}

.compare .cmp-chat {
  color: var(--color-amber);
  border-bottom-color: var(--color-amber);
}

.compare .cmp-agent {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
}

.compare .cmp-label {
  font-weight: 700;
  color: #666666;
}

/* --------------------------------------------------------------------------/*
/* kbd: browsers render monospace faces larger than the surrounding
   sans-serif text at the same font-size, which is exaggerated at
   reveal.js's large slide scale */
kbd {
  font-size: 0.9em;
  padding: 0.05em 0.4em;
  line-height: 1;
  background-color: #eef0f2;
  color: var(--color-tertiary);
  border: 1px solid var(--color-secondary);
  border-radius: 4px;
  box-shadow: 0 1.5px 0 var(--color-secondary);
}

/* --------------------------------------------------------------------------/*
/* Accent colors for highlighting -- see theme_slides.scss for brand colors */
.blue {
  color: var(--color-blue);
  font-weight: 600;
}

.amber {
  color: var(--color-amber);
  font-weight: 600;
}

.teal {
  color: var(--color-teal);
  font-weight: 600;
}

.todo {
  background-color: yellow;
  font-style: italic;
}

/* --------------------------------------------------------------------------/*
/* Custom title slide (see title-slide.html template partial) */
.reveal .title-slide-custom {
  text-align: center;
}

.title-slide-logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3.5em;
  margin-top: 3em;
}

.title-slide-logo {
  height: 2.8em;
  width: auto;
}

.title-slide-text .title {
  color: var(--color-primary);
  font-size: 1.5em;
  margin-bottom: 0.3em;
}

.title-slide-text .subtitle {
  font-size: 1.2em;
  font-weight: 400;
  color: var(--color-tertiary);
  margin-bottom: 1.3em;
}

.title-slide-text .author {
  font-size: 1.05em;
  font-weight: 600;
  margin-bottom: 0.2em;
}

.title-slide-text .date {
  font-size: 0.95em;
  color: #4f4f4f;
}

.title-slide-rule {
  width: 8em;
  margin: 1em auto 0;
  border: none;
  border-top: 2px solid var(--color-secondary);
}

/* Hide the persistent corner logo and footer link on the title slide --
   redundant with the larger logos already shown there, and on decks
   with a two-line title the footer would otherwise collide with them.
   !important is needed because Reveal's footer plugin sets an inline
   style="display: block" on every slide change. */
.reveal:has(section.title-slide-custom.present) .slide-logo,
.reveal:has(section.title-slide-custom.present) .footer {
  display: none !important;
}

/* --------------------------------------------------------------------------/*
/* Full-width figures */

/* Quarto's revealjs theme caps every image at `max-width: 95%`, so a
   `width="105%"` attribute on an image does nothing -- the image still
   stops short of the slide edges. `.img-wide` lifts that cap and lets a
   figure spill past the 1050x700 slide box into the empty band reveal
   leaves around it (its `margin: 0.1` setting), which is where the extra
   room is. 118% is the widest that still fits on a 16:10 display; a 16:9
   screen has room for ~130%, a 4:3 one only ~111%. Centering uses
   margin-left + translateX because `margin: 0 auto` collapses to 0 once
   the box is wider than its container, which would left-align it. The
   width is a CSS variable so a tall/narrow image (which would otherwise
   overflow the slide's fixed height at 118%) can dial in a smaller
   custom width via an inline style, while still bypassing the 95% cap:
     ![](../img/foo.png){.img-wide fig-alt="..."}
     ![](../img/tall.png){.img-wide style="--img-width: 90%" fig-alt="..."} */
.reveal section img.img-wide,
.reveal img.img-wide {
  width: var(--img-width, 118%) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  display: block !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
}

/* Reference list: much smaller text than body */
.reveal #refs,
.reveal #refs .csl-entry,
.reveal .references,
.reveal .references .csl-entry {
  font-size: 0.85em !important;
  line-height: 1.25;
}

.reveal #refs .csl-entry,
.reveal .references .csl-entry {
  margin-bottom: 0.3em;
}