/* Shared styles for all course-NN.html slide decks.
   Single source of truth: edit here, not in the HTML files. */

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

body { font-family: 'Droid Serif'; }
h1, h2, h3 {
  font-family: 'Yanone Kaffeesatz';
  font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
.remark-inline-code { background-color: #F0F0F0; }

/* Two-column layout, used via remark's content classes:
   .left-column[ ... ] and .right-column[ ... ] */
.left-column  { width: 52%; float: left; }
.right-column { width: 44%; float: right; }
.right-column img { max-width: 100%; }
/* Anything after the columns must clear their floats, otherwise it wraps
   beside them. Most visible on incremental '--' steps, which remark renders
   by appending to the previous slide. */
.left-column + *:not(.right-column),
.right-column + * { clear: both; }
/* Opt-in vertical centering: put '.middle' on BOTH columns, i.e.
   .left-column.middle[ ... ] and .right-column.middle[ ... ].
   Floats have no vertical alignment, so this swaps them for inline-block,
   which centres the two boxes against each other. */
.left-column.middle,
.right-column.middle {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

/* Quotes: plain markdown '>' blockquotes.
   remark ships no blockquote styling, so it is all defined here. */
blockquote {
  margin: 1em 0;
  padding: 0.4em 1.2em;
  border-left: 5px solid #8B7EC8;
  background-color: #F7F6FB;
  font-style: italic;
  color: #333;
}
blockquote p { margin: 0.4em 0; }

/* AI prompt snippets, used via remark's content class: .prompt[ ... ]
   'display: block' matters: remark emits a <span> when the content fits on
   one line, and only a <div> when it spans several. */
.prompt {
  display: block;
  position: relative;
  margin: 1em 0;
  padding: 0.6em 1em 0.6em 2.8em;
  border: 2px dashed #3D9A8B;
  border-radius: 6px;
  background-color: #F1FAF8;
  font-family: 'Ubuntu Mono', monospace;
  font-size: 0.95em;
  color: #234;
  text-align: left;
}
.prompt::before {
  content: "🤖";
  position: absolute;
  left: 0.7em;
  top: 0.5em;
  font-size: 1.1em;
}
.prompt p { margin: 0.3em 0; }
/* Opt-in shrink for one long prompt: .prompt.small[ ... ].
   'em' keeps it relative to the surrounding text, and the block's
   padding/gutter scale with it since they are in 'em' too. */
.prompt.small { font-size: 0.75em; }
/* remark hard-codes '.remark-code { font-size: 18px }', an absolute size
   that ignores the prompt's own em sizing. Make code inside a prompt
   follow the block instead. */
.prompt .remark-code,
.prompt pre,
.prompt code { font-size: inherit; }

/* Tables. remark ships no table styling, so it is all defined here. */
table { border-collapse: collapse; margin: 0.8em 0; }
th, td { border: 1px solid #CCC; padding: 0.25em 0.7em; text-align: left; }
th { background-color: #F0F0F0; font-weight: bold; }