/* Common slide utilities for Reveal.js decks: article mode, topbar, TOC, notes, slide numbers, and font sizing */
:root {
  --accent: #003366;
  --secondary: #005a36;
  --soft: #f4f6fb;
  --base-font-size: 150%;
  --topbar-h: 46px;
  --bottom-safe: 40px;
}

/* Base tweaks to Reveal theme */
.reveal h1, .reveal h2, .reveal h3 { color: var(--accent); }
.reveal section img { max-width: 100%; height: auto; }

/* Font scaling via CSS var */
.reveal { font-size: var(--base-font-size); }

/* Normal Page Layout */
body {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   SLIDE PRESENTATION VIEWPORT & DYNAMIC SCROLLING ENGINE
   ========================================================================== */
.reveal {
  position: absolute !important;
  top: var(--topbar-h, 46px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--topbar-h, 46px)) !important;
  overflow: hidden !important;
}

/* Slide Section Dynamic Sizing: Top-aligned scrolling if tall, centered if short */
.reveal .slides > section {
  box-sizing: border-box !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  padding: 24px 28px 36px 28px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 51, 102, 0.35) transparent !important;
}

.reveal .slides > section::-webkit-scrollbar {
  width: 7px;
}
.reveal .slides > section::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}
.reveal .slides > section::-webkit-scrollbar-thumb {
  background: rgba(0, 51, 102, 0.35);
  border-radius: 4px;
}
.reveal .slides > section::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 51, 102, 0.65);
}

/* Slide Page Number Badge */
.slide-page-badge {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--accent, #003366) !important;
  background: rgba(0, 51, 102, 0.08) !important;
  border: 1px solid rgba(0, 51, 102, 0.2) !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
  user-select: none !important;
  z-index: 100 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

html.fullscreen-active .slide-page-badge {
  background: rgba(0, 51, 102, 0.15) !important;
}

/* Toggle Hide Slide Numbers */
html.hide-slide-numbers .slide-page-badge,
html.hide-slide-numbers .reveal .slide-number {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   ARTICLE / READING MODE (Continuous Document Scrolling)
   ========================================================================== */
html.article-mode,
html.article-mode.reveal-full-page,
html.article-mode body,
html.article-mode body.reveal-viewport,
html.article-mode .reveal-viewport {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: static !important;
  background: #f4f6fb !important;
}

html.article-mode body {
  padding-top: calc(var(--topbar-h) + 16px) !important;
  padding-bottom: 60px !important;
  box-sizing: border-box !important;
}

html.article-mode .reveal {
  position: static !important;
  width: min(1000px, 94vw) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  zoom: 1 !important;
  overflow: visible !important;
  display: block !important;
  box-shadow: none !important;
}

html.article-mode .reveal .slides {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  zoom: 1 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  text-align: left !important;
  perspective: none !important;
}

html.article-mode .reveal .slides section,
html.article-mode .reveal .slides section.past,
html.article-mode .reveal .slides section.future,
html.article-mode .reveal .slides section.present {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2.2rem 2.5rem !important;
  background: #ffffff !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 51, 102, 0.06) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  overflow: visible !important;
  text-align: left !important;
}

html.article-mode .reveal .slides section[hidden] {
  display: block !important;
  visibility: visible !important;
}

html.article-mode .reveal .slides section h2 {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--secondary) !important;
  padding-bottom: 0.3em !important;
  margin-top: 0 !important;
  margin-bottom: 0.8em !important;
}

html.article-mode .reveal .slides section ul {
  display: block !important;
  margin: 0.8rem 0 1.2rem 1.5rem !important;
  line-height: 1.6 !important;
}

html.article-mode .reveal .slides section li {
  margin-bottom: 0.5rem !important;
}

/* Fragments always visible in article mode */
html.article-mode .reveal .fragment {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

/* Hide presentation overlays in article mode */
html.article-mode .reveal > .controls,
html.article-mode .reveal > .progress,
html.article-mode .reveal > .slide-number,
html.article-mode .reveal > .backgrounds,
html.article-mode .reveal .playback {
  display: none !important;
}

/* ==========================================================================
   FULLSCREEN & PSEUDO-FULLSCREEN STYLING
   ========================================================================== */
html.pseudo-fullscreen,
html.pseudo-fullscreen body {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99990 !important;
  background: #000 !important;
  overflow: hidden !important;
}

html.fullscreen-active .topbar {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
html.fullscreen-active .topbar button {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
html.fullscreen-active .topbar button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}
html.fullscreen-active .topbar .font-size-label,
html.fullscreen-active .topbar .figure-size-label {
  color: #e2e8f0 !important;
}
html.fullscreen-active .topbar .bar-sep {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================================
   TOPBAR NAVIGATION CONTROLS
   ========================================================================== */
.topbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h, 46px);
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dbe2ea;
  z-index: 100000 !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  box-sizing: border-box;
}

.topbar .bar-sep { width: 1px; height: 22px; background: #dbe2ea; flex-shrink: 0; }
.topbar .spacer { flex: 1 1 auto; }

.topbar button {
  padding: 5px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #1e293b;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.topbar button:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.topbar button:active {
  transform: scale(0.96);
}

.topbar button.active-toggle {
  background: rgba(0, 51, 102, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.topbar .font-size-label,
.topbar .figure-size-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #334155;
  user-select: none;
}

.topbar #font-size-range {
  display: inline-block !important;
  width: 130px;
  cursor: pointer;
}

.topbar #font-size-percent {
  min-width: 3.5ch;
  text-align: right;
  font-family: monospace;
  color: #64748b;
}

/* Drawing overlay */
.draw-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 99980;
  pointer-events: none;
}
html.drawing-active #draw-canvas {
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}

/* The highlighter canvas never takes pointer events - #draw-canvas sits on top
   and is the single input surface for both tools. */
.highlight-canvas {
  z-index: 99979;
  pointer-events: none !important;
  /* The whole point: yellow multiplied over black text leaves the glyphs black.
     Strokes are painted opaque and this blend is applied once to the finished
     canvas, so scrubbing over the same words does not darken them. */
  mix-blend-mode: multiply;
}

/* A fat marker nib reads better than a crosshair when highlighting. */
html.drawing-active.tool-hl #draw-canvas { cursor: cell; }

/* Colour swatch. Deliberately narrow - the toolbar already carries eleven
   controls - and it doubles as the indicator of which colour is loaded, so it
   stays visible whether or not the highlighter is the active tool. */
.topbar button.hl-swatch {
  width: 30px;
  min-width: 30px;
  padding: 0;
  height: 24px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}
.topbar button.hl-swatch:hover { border-color: #475569; }
html.fullscreen-active .topbar button.hl-swatch {
  /* The fullscreen rule paints every button translucent white, which would hide
     the colour this button exists to show. The colour itself is set inline with
     !important by setHlColor() in slides-common.js, which beats that rule; this
     block only restyles the border. (It used to say `background-color: inherit
     !important`, which pulled in the dark fullscreen toolbar and made the chip
     look black whatever colour was loaded.) */
  border-color: rgba(255,255,255,0.85) !important;
}

/* ==========================================================================
   LASER POINTER
   ========================================================================== */
#laser-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 99990;
  pointer-events: none;
  border-radius: 50%;
  display: none;
  will-change: transform;
}
#laser-dot.laser-dot,
#laser-dot.laser-xl,
#laser-dot.laser-halo { display: block; }

#laser-dot.laser-dot {
  width: 20px; height: 20px;
  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,0.95) 0%, rgba(255,64,64,0.95) 38%,
              rgba(220,0,0,0.55) 70%, rgba(220,0,0,0) 100%);
  box-shadow: 0 0 14px 5px rgba(255, 40, 40, 0.45);
}
#laser-dot.laser-xl {
  width: 44px; height: 44px;
  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,0.95) 0%, rgba(255,64,64,0.92) 34%,
              rgba(220,0,0,0.5) 68%, rgba(220,0,0,0) 100%);
  box-shadow: 0 0 30px 12px rgba(255, 40, 40, 0.4);
}
/* A ring, not a disc: it frames a region without covering anything inside. */
#laser-dot.laser-halo {
  width: 170px; height: 170px;
  background: transparent;
  border: 7px solid rgba(255, 186, 8, 0.9);
  box-shadow: 0 0 22px 4px rgba(255, 186, 8, 0.5),
              inset 0 0 22px 4px rgba(255, 186, 8, 0.35);
}

/* Hide the arrow over the slide the way PowerPoint does, but leave the toolbar
   its cursor - otherwise the controls become unusable while the laser is on. */
html.laser-active .reveal { cursor: none; }
html.laser-active .topbar,
html.laser-active .topbar * { cursor: pointer; }
html.laser-active.drawing-active #draw-canvas { cursor: none; }

/* Presenter overlays are screen-only. A full-viewport fixed canvas
   carrying mix-blend-mode must never reach the PDF export. */
@media print {
  .draw-canvas,
  #laser-dot { display: none !important; }
}

/* TOC */
.toc-menu { position: relative; }
.toc-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 100010;
}
.toc-dropdown[hidden] { display: none; }
.toc-dropdown ul { list-style: none; margin: 0; padding: 0; }
.toc-dropdown li { margin: 0; }
.toc-dropdown a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--accent, #003366);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.3;
}
.toc-dropdown a:hover { background: #eef6fc; }

/* ==========================================================================
   NOTES SIDEBAR & EXPORT CONTROLS
   ========================================================================== */
.notes-sidebar {
  position: fixed;
  top: var(--topbar-h, 46px);
  right: 0;
  bottom: 0;
  width: min(38vw, 440px);
  max-width: 100%;
  background: #ffffff;
  border-left: 1px solid #dbe2ea;
  z-index: 99995;
  display: none;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
}
.notes-sidebar.open {
  display: flex !important;
}
.notes-sidebar .notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 10px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.notes-sidebar .notes-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.notes-sidebar .notes-close-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: bold;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.notes-sidebar .notes-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.notes-sidebar textarea {
  flex: 1 1 auto;
  width: calc(100% - 28px);
  margin: 14px;
  padding: 12px;
  resize: none;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-sizing: border-box;
  background: #fafafa;
}
.notes-sidebar textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}
.notes-sidebar .notes-footer {
  padding: 10px 14px 14px 14px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  gap: 8px;
}
.notes-sidebar .notes-export-btn {
  flex: 1;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--secondary, #005a36);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s ease;
}
.notes-sidebar .notes-export-btn:hover {
  background: #004429;
}
.notes-sidebar .notes-clear-btn {
  padding: 9px 12px;
  font-size: 0.85rem;
  background: #ffffff;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.notes-sidebar .notes-clear-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* =========================================================================
   Interactive Question & Click-to-Reveal Solution Components
   ========================================================================= */
.qa-card {
  background: #ffffff;
  border: 2px solid var(--accent, #003366);
  border-radius: 8px;
  padding: 0.9rem 1.2rem;
  margin: 0.8rem 0;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08);
}
.qa-card h4 {
  color: var(--accent, #003366);
  margin: 0 0 0.4rem 0;
  font-size: 1.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.solution-reveal {
  margin: 0.8rem 0;
  width: 100%;
  text-align: left;
}
.solution-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: #ffffff !important;
  background: var(--secondary, #005a36) !important;
  border: 1px solid #004429 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 90, 54, 0.25) !important;
  user-select: none !important;
  line-height: 1.3 !important;
}
.solution-btn:hover {
  background: #004429 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 90, 54, 0.35) !important;
}
.solution-btn.revealed {
  background: #475569 !important;
  border-color: #334155 !important;
}
.solution-body {
  margin-top: 0.7rem;
  animation: fadeInSol 0.22s ease-in-out;
}
.solution-body[hidden] {
  display: none !important;
}
@keyframes fadeInSol {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   ARTICLE MODE: RESTORE TOUCH SCROLLING
   --------------------------------------------------------------------------
   reveal.js sets `touch-action: pinch-zoom` on .reveal so that finger swipes
   drive slide navigation rather than scrolling the page. That is right in
   slides mode. In article mode .reveal becomes the tall scrolling document,
   and pinch-zoom disables touch panning entirely: the page still scrolls with
   a mouse wheel or programmatically, but not with a finger. Reading mode
   therefore worked on a laptop and appeared frozen on a phone.

   Not inside the phone media query on purpose - touch laptops and tablets are
   wider than 767px and hit exactly the same problem.
   ========================================================================== */
html.article-mode .reveal,
html.article-mode .reveal .slides,
html.article-mode .reveal .slides section {
  touch-action: auto !important;
}

/* ==========================================================================
   NARROW VIEWPORTS (phones)
   --------------------------------------------------------------------------
   The toolbar is one fixed-height row. That fits a laptop (at 1440px its
   content measures exactly 1440px) but not a phone: on a 390px viewport the
   same content is 753px wide, so five of the eight controls were cut off and
   "Reading Mode" wrapped out of the 46px bar.

   Here the bar wraps onto up to three short rows inside a taller bar, and the
   reveal.js arrows are scaled down and tucked into the corner rather than
   overflowing it. Labels are kept (not swapped for bare icons) because
   slides-common.js rewrites button text on toggle.
   ========================================================================== */
@media (max-width: 767px) {
  :root { --topbar-h: 88px; }

  .topbar {
    flex-wrap: wrap !important;
    align-content: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 6px;
  }

  /* A flexible spacer would swallow an entire row once the bar wraps. */
  .topbar .spacer,
  .topbar .bar-sep { display: none !important; }

  .topbar button {
    padding: 3px 6px;
    font-size: 0.68rem;
    border-radius: 5px;
    gap: 3px;
    white-space: nowrap;
  }

  .topbar .font-size-label { gap: 4px; font-size: 0.68rem; }
  .topbar .font-size-label input[type="range"] { width: 64px; }

  /* Keep the TOC panel on-screen instead of running off the right edge. */
  .toc-dropdown {
    min-width: 0;
    width: min(86vw, 320px);
    max-height: 55vh;
  }

  /* Slide-advance arrows: smaller, and anchored inside the bottom-right
     corner. env() is a no-op without viewport-fit=cover, but costs nothing
     and keeps them clear of the iOS home indicator if that is ever added. */
  .reveal .controls {
    right: 6px !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    transform: scale(0.6);
    transform-origin: bottom right;
  }
}


/* ===================================================================
   Hand-tuned lecture decks (EE 316 lectures 01 and 02)
   Only new selectors - existing decks are untouched.
   =================================================================== */

/* Reveal's white theme shouts: uppercase headings, everything centred.
   Undo that first. */
.reveal h1, .reveal h2, .reveal h3 { text-transform: none; letter-spacing: -0.01em; }
.reveal section { text-align: left; }
.reveal h2 {
  font-size: 1.4em;
  line-height: 1.2;
  margin: 0 0 0.9rem;
  color: #16202c;
  font-weight: 650;
}
.reveal section > p,
.reveal section > ul,
.reveal section > ol { font-size: 0.7em; line-height: 1.55; }
.reveal li { margin: 0.35em 0; }
.reveal ul, .reveal ol { display: block; margin-left: 1.1em; }

/* Title slide */
.reveal .subtitle {
  font-size: 0.8em; color: #5b6875; margin: 0.2rem 0 1.6rem; font-weight: 600;
}
.reveal .byline { font-size: 0.6333em; color: #5b6875; line-height: 1.5; }

/* A single emphasised line under a paragraph */
.reveal .note-line {
  font-size: 0.6333em; color: #5b6875; border-left: 3px solid #d8dee5;
  padding-left: 0.7rem; margin-top: 1.1rem;
}
.reveal .warn-line {
  font-size: 0.6667em; background: #fdf5ec; border: 1px solid #e6d3b3;
  border-left: 4px solid #8a5a00; border-radius: 6px;
  padding: 0.6rem 0.85rem; margin-top: 1rem;
}

/* Display equation given room to breathe */
.reveal .big-eq { margin: 1.4rem 0; text-align: center; overflow-x: auto; }

/* Facts block on the logistics slide */
.reveal .facts-slide { margin: 0.6rem 0 0; font-size: 0.6667em; }
.reveal .facts-slide > div {
  display: flex; gap: 1rem; padding: 0.42rem 0; border-bottom: 1px solid #e8ecf1;
}
.reveal .facts-slide dt {
  flex: 0 0 10.5556em; font-weight: 650; color: #5b6875; font-size: 0.9em;
  text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.12rem;
}
.reveal .facts-slide dd { margin: 0; }

/* Tables: quiet rules, no heavy borders */
.reveal .slide-table { font-size: 0.82em; border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
.reveal .slide-table th {
  text-align: left; font-size: 0.665em; text-transform: uppercase;
  letter-spacing: 0.05em; color: #5b6875; border-bottom: 2px solid #d8dee5;
  padding: 0.45rem 0.6rem 0.35rem;
}
.reveal .slide-table td { padding: 0.42rem 0.6rem; border-bottom: 1px solid #eef1f4; }
.reveal .scroll-slide { overflow-x: auto; }

/* Figures sit below the text and stay modest */
.reveal .slide-figure-container { margin: 1.1rem 0 0; text-align: center; }
.reveal .slide-figure-container img {
  max-height: 46vh; max-width: 100%; height: auto; width: auto;
  border-radius: 6px; box-shadow: 0 2px 10px rgb(22 32 44 / 12%);
}
.reveal .slide-figure-container.small-figure img { max-height: 26vh; }

/* Closing slide */
.reveal .closing { font-size: 1em; color: #5b6875; margin-top: 2rem; }

/* Numbered lists that carry the structure of an argument */
.reveal ol > li { padding-left: 0.2em; }
.reveal ol > li::marker { font-weight: 650; color: #1558c0; }

/* Two-column comparison used on the review deck */
.reveal .two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  margin: 0.9rem 0 0; text-align: left;
}
.reveal .two-col > div {
  background: #f7f9fb; border: 1px solid #e3e9ef; border-radius: 8px;
  padding: 0.85rem 1rem;
}
.reveal .two-col h3 {
  font-size: 0.6667em; margin: 0 0 0.4rem; color: #1558c0; font-weight: 650;
}
.reveal .two-col p { font-size: 0.6533em; margin: 0.3rem 0; }
@media (max-width: 900px) {
  .reveal .two-col { grid-template-columns: 1fr; gap: 0.8rem; }
}

/* Inline SVG diagrams authored for the hand-tuned decks */
.reveal .diagram { width: 100%; max-width: 560px; height: auto; max-height: 42vh; display: block; margin: 0 auto; }
.reveal .figure-caption { font-size: 0.5867em; color: #5b6875; margin: 0.5rem 0 0; text-align: center; }

/* SVG diagram plus its caption, stacked and centred */
.reveal .diagram-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
.reveal .diagram-wrap .diagram { margin: 0; }
.reveal .diagram-wrap .figure-caption { margin: 0.35rem 0 0; }

/* A wider diagram that sits above an equation needs a shorter height budget */
.reveal .diagram.diagram-wide { max-width: 660px; max-height: 30vh; }

/* Embedded CircuitEmbed widgets (learncircuits.org/tools) */
.reveal .circuit-host,
.reveal circuit,
.reveal .circuit-embed-root {
  display: block;
  font-size: 14px;
  text-align: left;
  line-height: normal;
}
.reveal .circuit-embed-root table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.reveal .circuit-embed-root table td,
.reveal .circuit-embed-root table th {
  padding: 0;
  border-bottom: none;
}

/* ==========================================================================
   Responsive Split-Panel (.work-beside)
   Switches to single-column (stacked) view if the circuit figure gets too
   large or if the container width is constrained, ensuring problem work
   equations never clip or overflow horizontally.
   ========================================================================== */
.reveal .work-beside {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: flex-direction 0.2s ease;
}

.reveal .work-beside figure.circuit-fig {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0.2rem 0 0;
}

.reveal .work-beside figure.circuit-fig img,
.reveal .work-beside figure.circuit-fig svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.reveal .work-beside .problem-work {
  flex: 1 1 auto;
  min-width: 0;
}

/* Lists in the work column must not out-grow the column.
   The deck-wide rule is `.reveal ul { width: 95%; }`, which sets the CONTENT
   box to 95% and then the browser's 40px bullet gutter is added on top,
   because box-sizing is content-box here. On a full-width slide the 5% slack
   is ~55px and swallows the gutter. In a .work-beside column it is only
   ~32px, so the list ends up ~8px WIDER than the column it sits in and its
   text runs past the heading rule to the very edge of the stage - which is
   what "the right column is cut off" looks like on a projector, and what it
   really is once the font slider is raised or the display overscans.
   Reported on deck 07 slide 20, 2026-09-22.

   Fixed by sizing the list to the column with border-box, so the gutter is
   inside the width rather than added to it. Specificity (0,3,1) beats the
   deck-local `.reveal ul` (0,1,1), so this holds even though the deck's own
   <style> block is loaded afterwards. */
.reveal .work-beside .problem-work ul,
.reveal .work-beside .problem-work ol {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding-left: 1.3em;
}

/* Single-Column (Stacked) Mode */
.reveal .work-beside.single-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.reveal .work-beside.single-column figure.circuit-fig {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 1.2rem auto !important;
  text-align: center !important;
}

.reveal .work-beside.single-column figure.circuit-fig img,
.reveal .work-beside.single-column figure.circuit-fig svg {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.reveal .work-beside.single-column figure.circuit-fig figcaption {
  text-align: center !important;
  margin-top: 0.35rem !important;
}

.reveal .work-beside.single-column .problem-work {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 100% !important;
}

@media (max-width: 960px) {
  .reveal .work-beside {
    flex-direction: column !important;
    align-items: center !important;
  }
  .reveal .work-beside figure.circuit-fig {
    width: 100% !important;
    margin: 0 auto 1.2rem auto !important;
    text-align: center !important;
  }
  .reveal .work-beside .problem-work {
    width: 100% !important;
  }
}

html.article-mode .reveal .work-beside {
  flex-direction: column !important;
  align-items: center !important;
}
html.article-mode .reveal .work-beside figure.circuit-fig {
  width: 100% !important;
  margin: 0 auto 1.2rem auto !important;
  text-align: center !important;
}
html.article-mode .reveal .work-beside .problem-work {
  width: 100% !important;
}

@media print {
  .reveal .work-beside {
    display: flex !important;
    flex-direction: row !important;
  }
  .reveal .work-beside figure.circuit-fig {
    flex: 0 0 300px !important;
    max-width: 320px !important;
    margin: 0.2rem 0 0 !important;
  }
  .reveal .work-beside .problem-work {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   Circuit Schematic SVG Overlay Annotations (.fig-overlay)
   Allows circuit schematics to be interactively annotated with node markers,
   branch current arrows, supernode boundaries, and stepped callout badges
   synchronized with equation derivations via Reveal.js fragments.
   ========================================================================== */
.reveal .fig-overlay {
  display: block;
  margin: 0 auto;
  overflow: visible;
}
.reveal .fig-overlay .loop { fill: none; stroke: #b3261e; stroke-width: 2.2; }
.reveal .fig-overlay .head { fill: #b3261e; stroke: none; }
.reveal .fig-overlay .mlbl { fill: #b3261e; text-anchor: middle;
  font: italic 700 16px "Times New Roman", Times, serif; }

.reveal .fig-overlay .node { fill: #1558c0; stroke: none; }
.reveal .fig-overlay .nlbl { fill: #1558c0; text-anchor: middle;
  font: italic 700 17px "Times New Roman", Times, serif; }

.reveal .fig-overlay .bound { fill: none; stroke: #005a36; stroke-width: 2.2;
  stroke-dasharray: 7 5; }
.reveal .fig-overlay .blbl { fill: #005a36; text-anchor: middle;
  font: 600 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Callout badges and result labels */
.reveal .fig-overlay .callout { rx: 4px; ry: 4px; }
.reveal .fig-overlay .callout-blue { fill: #eff6ff; stroke: #1d4ed8; stroke-width: 1.5; }
.reveal .fig-overlay .callout-red { fill: #fef2f2; stroke: #b91c1c; stroke-width: 1.5; }
.reveal .fig-overlay .callout-green { fill: #ecfdf5; stroke: #047857; stroke-width: 1.5; }
.reveal .fig-overlay .callout-amber { fill: #fffbeb; stroke: #d97706; stroke-width: 1.5; }
.reveal .fig-overlay .callout-txt {
  font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
}
.reveal .fig-overlay .txt-blue { fill: #1d4ed8; }
.reveal .fig-overlay .txt-red { fill: #b91c1c; }
.reveal .fig-overlay .txt-green { fill: #047857; }
.reveal .fig-overlay .txt-amber { fill: #d97706; }

/* In SVG fragments, transition cleanly */
.reveal .fig-overlay g.fragment {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ==========================================================================
   Stepped Circuit Figures (.step-stack)
   Stacks sequentially revealed circuit diagrams in the exact same grid cell
   so transitions between derivation steps are seamless and jitter-free.
   ========================================================================== */
.reveal .step-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
.reveal .step-stack > .step {
  grid-area: 1 / 1 !important;
  min-width: 0 !important;
}
.reveal .step-stack .step span {
  display: block;
}
.reveal .step-stack img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.reveal .work-beside figure.circuit-fig.step-stack {
  flex: 0 0 380px;
  max-width: 380px;
}
.reveal .work-beside.single-column figure.circuit-fig.step-stack {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto 1.2rem auto !important;
}
/* Reading mode and print can't click, so a stack shows its FIRST state (the
   circuit as given) and its LAST (fully annotated), one above the other.
   :first-/:last-of-type, NOT :last-child - every stack ends in a <figcaption>,
   so no .step is ever the last child, and `.step:not(:last-child)` hid every
   step: until 2026-09-24 each stepped slide printed, and read, with no circuit
   at all. */
html.article-mode .reveal .step-stack {
  display: block !important;
}
html.article-mode .step-stack > .step:not(:first-of-type):not(:last-of-type) {
  display: none !important;
}
html.article-mode .step-stack > .step:last-of-type:not(:first-of-type) {
  margin-top: 0.6rem;
}
html.article-mode .step-stack .fragment {
  opacity: 1 !important;
  visibility: visible !important;
}
@media print {
  .reveal .step-stack {
    display: block !important;
  }
  .step-stack > .step:not(:first-of-type):not(:last-of-type) {
    display: none !important;
  }
  .step-stack > .step:last-of-type:not(:first-of-type) {
    margin-top: 0.4rem;
  }
  .step-stack .fragment {
    opacity: 1 !important;
    visibility: visible !important;
  }
}