/* stagekit: layout and typography. Reads every colour, font and size from
 * the theme tokens (themes/default.css or the project's theme.css). */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--white); font-family: var(--font); overflow: hidden; }
a { color: var(--blue); text-decoration: none; }

/* --- the stage: one slide visible, scaled to the window --------------------- */
.deck { position: relative; width: 100%; height: 100%; }
.slide {
  position: absolute; left: 50%; top: 50%;
  width: var(--slide-w); height: var(--slide-h);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  background: var(--bg);
  display: none;
  padding: var(--margin);
  text-transform: var(--lowercase);
  font-size: var(--normal);
  line-height: 1.35;
}
.slide.current { display: block; }
/* Code wird nie kleingeschrieben: `True`, `None`, Klassennamen und Bezeichner
 * muessen stehen bleiben, wie sie im Programm stehen. */
.slide pre, .slide code, .slide .code, .slide .keep-case, .slide .keep-case * { text-transform: none; }

/* --- the building blocks (same names as slidekit's content blocks) --------- */
.slide h2 {                       /* the small grey heading top left */
  position: absolute; left: var(--margin); top: calc(var(--margin) * 0.55);
  margin: 0; font-size: var(--small); font-weight: normal; color: var(--gray);
}
.content {                        /* one box, vertically centred, left aligned */
  position: absolute; left: var(--margin); right: var(--margin); top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.5em;
}
.content.center { align-items: center; text-align: center; }
.header { font-size: var(--small); color: var(--gray); }
.statement { font-size: var(--large); line-height: 1.2; color: var(--white); }
.lines { font-size: var(--normal); color: var(--white); }
.lines.mono, .mono { font-family: var(--mono); }
.lines > div, .code > div { min-height: 1.35em; }
.code { font-family: var(--mono); font-size: var(--normal); color: var(--white); white-space: pre; }
.code .kw { color: var(--blue); }
.code .num { color: var(--yellow); }
.dim { color: var(--gray-dark); }
.sidenote { font-size: var(--small); color: var(--gray); }
.remark { font-size: var(--small); color: var(--yellow); }
.footnote { position: absolute; left: var(--margin); bottom: calc(var(--margin) * 0.55); font-size: var(--tiny); color: var(--gray); }
.footnote.right { left: auto; right: var(--margin); }
/* the punchline: one yellow sentence at the bottom, always the small size, always
 * the same place. A slide that carries one gets .has-punch, which shortens the
 * content area above so the two never touch. */
.punch { position: absolute; left: var(--margin); right: var(--margin); bottom: calc(var(--margin) * 1.05); text-align: center; font-size: var(--small); color: var(--yellow); }
.slide.has-punch .figure, .slide.has-punch .cols3, .slide.has-punch .cols4, .slide.has-punch .two { bottom: calc(var(--margin) * 2.1); }
.slide.has-punch .content { bottom: calc(var(--margin) * 1.6); }
.bright { color: var(--white); }
.y { color: var(--yellow); } .b { color: var(--blue); } .g { color: var(--green); } .r { color: var(--red); } .gr { color: var(--gray); }

/* --- title, agenda, section slides ------------------------------------------ */
.slide.title .content { justify-content: center; }
.slide.title .title-text { font-size: var(--large); line-height: 1.15; }
.slide.title .subtitle-text { font-size: var(--small); color: var(--gray); margin-top: 0.8em; }
.slide.agenda .content { gap: 0.15em; }
.slide.agenda .agenda-item { font-size: var(--normal); color: var(--gray-light); }
.slide.agenda .agenda-item .n { display: inline-block; width: 1.6em; color: var(--gray); font-family: var(--mono); }
.slide.part .content { justify-content: center; }
.slide.part .part-text { font-size: var(--large); }
.slide.part .part-n { font-size: var(--small); color: var(--gray); font-family: var(--mono); }

/* --- the location bar: which part are we in -------------------------------- */
.location {
  position: absolute; left: var(--margin); right: var(--margin); bottom: calc(var(--margin) * 0.3);
  display: flex; align-items: center; gap: 24px; font-size: var(--tiny); color: var(--gray);
}
.location .bar { flex: 1; height: 4px; background: var(--gray-dark); position: relative; }
.location .seg { position: absolute; top: -14px; bottom: -14px; cursor: pointer; }
.location .seg:hover { background: rgba(255,255,255,0.06); }
.location .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--part-color); }
.location .bar .tick { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--bg); }
.slide.title .location, .slide.agenda .location, .slide.part .location { display: none; }

/* --- steps: build a slide up piece by piece --------------------------------- */
[data-step] { visibility: hidden; }
[data-step].shown { visibility: visible; }
/* a hidden step must not leave its borders behind (collapsed table borders would) */
.slide [data-step]:not(.shown), .slide [data-step]:not(.shown) * { border-color: transparent; }
.slide.no-hold [data-step] { display: none; }
.slide.no-hold [data-step].shown { display: revert; }

/* --- pictures, drawings, embeds ------------------------------------------- */
.slide img.photo { position: absolute; top: 0; right: 0; height: 100%; }
.slide .photo-text { position: absolute; left: var(--margin); top: 0; bottom: 0; width: 45%; display: flex; align-items: center; font-size: var(--large); line-height: 1.15; }
.figure { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--margin) * 1.4); bottom: calc(var(--margin) * 0.9); display: flex; align-items: center; justify-content: center; }
.figure svg { width: 100%; height: 100%; }     /* viewBox scales to fit, aspect kept */
.figure.left { justify-content: flex-start; }
/* three or four equal columns of cards, top aligned */
.cols3, .cols4 { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--margin) * 1.4); bottom: calc(var(--margin) * 0.9); display: grid; gap: 60px; align-items: start; }
.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols3.center, .cols4.center { align-items: center; }
.embed { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--margin) * 1.3); bottom: calc(var(--margin) * 0.8); }
.embed iframe { width: 100%; height: 100%; border: 1px solid var(--gray-dark); border-radius: 12px; background: var(--bg); }
/* zoomed embeds: a demo page is laid out for a desktop window; on a projector it
 * wants to be larger. .z125 / .z150 scale the frame by 1.25 / 1.5. */
.embed iframe { transform-origin: 0 0; }
.embed.z125 iframe { width: 80%; height: 80%; transform: scale(1.25); }
.embed.z150 iframe { width: 66.667%; height: 66.667%; transform: scale(1.5); }
.two { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--margin) * 1.4); bottom: calc(var(--margin) * 0.9); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.two > * { min-width: 0; }

/* --- tables: truth tables, byte rows, aligned equations ---------------------
 * Everything countable is set in the code font. A quiet frame, a header row
 * with a rule beneath, generous columns. .hl highlights a column. */
table.tt { border-collapse: separate; border-spacing: 0; font-family: var(--mono); font-size: var(--small);
           border: 1px solid var(--gray-dark); border-radius: 10px; overflow: hidden; }
table.tt th { font-weight: normal; color: var(--gray); padding: 10px 26px; text-align: center; min-width: 2.4em;
              border-bottom: 1px solid var(--gray-dark); background: #0b0d10; }
table.tt th.sep, table.tt td.sep { border-left: 1px solid var(--gray-dark); }
table.tt td { padding: 6px 26px; text-align: center; color: var(--gray-light); }
table.tt tr + tr td { border-top: 1px solid #14171a; }
table.tt td.on { color: var(--yellow); }
table.tt tr.now td { color: var(--white); background: #14171a; }
table.tt th.hl, table.tt td.hl { background: #16191d; color: var(--yellow); }
table.tt.large { font-size: var(--normal); }
table.tt.large th { padding: 12px 34px; } table.tt.large td { padding: 8px 34px; }

/* a written addition: label, bits, decimal; a rule above the result */
table.sum { border-collapse: collapse; font-family: var(--mono); font-size: var(--normal); color: var(--gray-light); }
table.sum td { padding: 2px 0; white-space: pre; }
table.sum td.lab { color: var(--gray); font-size: var(--small); padding-right: 1.2em; }
table.sum td.bits { letter-spacing: 0.35em; }
table.sum td.dec { color: var(--gray); padding-left: 1.2em; text-align: right; }
table.sum tr.result td { border-top: 2px solid var(--gray-light); padding-top: 8px; color: var(--white); }
table.sum tr.carries td { color: var(--yellow); }   /* same size as the bits: the columns must line up */

/* aligned equations: term, "=", the rest */
table.eq { border-collapse: collapse; font-size: var(--normal); }
table.eq td { padding: 8px 0; vertical-align: baseline; }
table.eq td.term { color: var(--yellow); padding-right: 0.6em; }
table.eq td.eqs { color: var(--gray); padding: 8px 0.6em; }
table.eq td.note { color: var(--gray); font-size: var(--small); padding-left: 1.2em; }

.lines.pre { white-space: pre; }

/* --- notes are never shown on the slide ----------------------------------- */
.notes { display: none; }

/* --- the slide counter, small, bottom right -------------------------------- */
.counter { position: fixed; right: 12px; bottom: 8px; font-family: var(--mono); font-size: 12px; color: var(--gray-dark); z-index: 5; }
.counter.hidden { display: none; }
/* the control bar of an embedded deck (?bar=1): back, counter, forward, full
 * screen. Small and quiet, so the slide keeps the attention. */
.embedbar { position: fixed; right: 12px; top: 12px; z-index: 6; display: flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--gray-dark); border-radius: 999px; padding: 4px 10px; }
.embedbar button { background: none; border: 0; color: var(--gray-light); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.embedbar button:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.embedbar button svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.embedbar .counter { position: static; min-width: 4.5em; text-align: center; color: var(--gray); }

/* --- print: every slide on its own page, unscaled ------------------------- */
@media print {
  html, body { overflow: visible; background: var(--bg); }
  .deck { width: auto; height: auto; }
  .slide { display: block; position: relative; left: 0; top: 0; transform: none; page-break-after: always; break-after: page; }
  .slide [data-step] { visibility: visible; }
  .counter { display: none; }
  @page { size: 1920px 1080px; margin: 0; }
}
body.print { overflow: auto; }
body.print .deck { width: auto; height: auto; }
body.print .slide { display: block; position: relative; left: 0; top: 0; transform: none; margin: 0 auto; }
body.print .slide [data-step] { visibility: visible; }

/* --- the notes window ------------------------------------------------------ */
body.notes-view { overflow: auto; background: #111; color: var(--gray-light); font-size: 20px; padding: 24px; }
body.notes-view h1 { font-size: 16px; color: var(--gray); font-weight: normal; margin: 0 0 10px; }
body.notes-view .nv-current { font-size: 26px; line-height: 1.5; color: var(--white); margin-bottom: 30px; }
body.notes-view .nv-next { color: var(--gray); }
body.notes-view .nv-next h1 { color: var(--gray-dark); }
body.notes-view .nv-clock { position: fixed; right: 24px; top: 20px; font-family: var(--mono); color: var(--gray); }