@import url("generated-figure-widths.css");
/* Per-figure display widths, generated by scripts/generate-figure-widths.py from each
 * figure's own typography so its labels render near the page's 16px body text.
 * Imported first on purpose: chapter-local #fig-<id> rules (49 chapters, 146 figures)
 * are authored by hand and must keep winning as deliberate overrides. */
/* ---- BEGIN self-hosted fonts (2026-07-26, launch blocker B4 perf fix) ----
 * Replaces the fonts.googleapis.com @import chain (page -> this stylesheet ->
 * Google's CSS -> the actual .woff2 file: 2 extra network round-trips before
 * the real font can even start downloading) with same-origin variable-font
 * files referenced directly via @font-face, subset to "latin" only (Latin-1
 * covers this site's English + accented-Latin content; the "latin-ext"
 * Google was also serving is ~1.7x heavier per family and unused here).
 * font-display: swap keeps text visible immediately in the fallback face;
 * the paired "* Fallback" faces below use size-adjust/ascent-override/
 * descent-override computed from each font's own OS/2 + hhea tables against
 * Arial's published reference metrics (unitsPerEm 2048, hhea ascent 1854,
 * descent -434, xAvgCharWidth 904 -- the standard reference baseline for
 * this technique, e.g. next/font's automatic local-fallback generator), so
 * the fallback-to-webfont swap reflows the page by only a few px instead of
 * the ~0.14 CLS the homepage <h1> was measured contributing
 * (docs-internal/ops/performance-audit.md, cls-culprits-insight). See
 * docs-internal/ops/performance-b4.md for the exact metric derivation and
 * the measured before/after. Font files: assets/fonts/*.woff2 (repo-tracked,
 * ~97 KB combined for all 3 families vs. the 220-296 KB/page "Font" transfer
 * weight measured before this fix on chapter/guide pages).
 */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  size-adjust: 111.69%;
  ascent-override: 91.68%;
  descent-override: 35.81%;
  line-gap-override: 0%;
  src: local("Arial");
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/source-code-pro-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Code Pro Fallback";
  size-adjust: 135.93%;
  ascent-override: 72.39%;
  descent-override: 20.08%;
  line-gap-override: 0%;
  src: local("Arial");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  size-adjust: 138.27%;
  ascent-override: 70.06%;
  descent-override: 17.44%;
  line-gap-override: 0%;
  src: local("Arial");
}
/* ---- END self-hosted fonts ---- */

/* ---- BEGIN self-hosted bootstrap-icons override (2026-07-28, launch
 * blocker B4 remainder, cause 1 of 3) ----
 * Quarto's own site_libs/bootstrap/bootstrap-icons.css (regenerated on every
 * build, not ours to edit) declares @font-face { font-family: "bootstrap-icons";
 * src: url(".../bootstrap-icons.woff") format("woff"); } with no font-display,
 * which computed as font-display: block -- 176 KB, no woff2, shipped on every
 * page. This block re-declares the SAME font-family (and the same implicit
 * normal/400 weight+style Quarto's rule uses, so the two rules' descriptors
 * match) with a self-hosted woff2 (128 KB, byte-identical glyph set and
 * cmap -- converted from Quarto's own .woff via fontTools, verified) and
 * font-display: swap. Per the CSS Fonts spec, when two @font-face rules have
 * matching descriptors the later one in document order wins entirely -- this
 * stylesheet loads after site_libs/bootstrap/bootstrap-icons.css on every
 * page class that includes this bundle (verified in rendered <head> order),
 * so the browser fetches only this woff2 and never Quarto's woff. Font file:
 * assets/fonts/bootstrap-icons.woff2 (repo-tracked). See
 * docs-internal/ops/LAUNCH-BLOCKER-REGISTER.md B4 for the full remainder and
 * measured before/after.
 */
@font-face {
  font-family: "bootstrap-icons";
  font-display: swap;
  src: url("../assets/fonts/bootstrap-icons.woff2") format("woff2");
}
/* ---- END self-hosted bootstrap-icons override ---- */

/* platform.css — the single IoTClass stylesheet.
 *
 * Consolidation 2026-07-26 (task #34, founder directive: "one CSS file, no
 * competing styles"). Built as:
 *   [1] style/iotclass.css with 486 verified-dead selectors pruned
 *       (266 whole rule blocks + 55 comma-group trims; evidence:
 *        temp/ceo-drafts-20260726/css-dead-selectors.md — every selector
 *        checked against all 2,557 built pages plus JS/template rescue).
 *   [2] style/design-system.css appended UNCHANGED as the authoritative layer.
 *
 * Ordering is deliberate and preserves today's rendering exactly: where the two
 * files set the same property on the same selector (28 cases, 60 property
 * pairs), design-system.css already wins in the browser today via source order
 * + !important, and it still wins here for the same reason. This merge changes
 * NO appearance; it removes a redundant HTTP request, ~37KB of dead rules, and
 * the file-vs-file cascade fight. Conflict evidence:
 * temp/ceo-drafts-20260726/css-conflict-resolution.md
 *
 * Known follow-ups (NOT part of this merge, deliberately):
 *   - 109 repeated per-page inline <style> blocks (~1.1MB) are hoistable.
 *   - 3 design questions flagged for the founder (sidebar module accents,
 *     link colour source, superseded homepage block) — recorded, not changed.
 */

/* ==== LAYER 1: platform base (pruned iotclass.css) ==== */

/* ===========================================
   IoT Class Design Tokens
   ===========================================
   Single source of truth for all design values
   IEEE Professional Color Palette + Modern Typography
   =========================================== */

:root {
  /* ===== IEEE Professional Color Palette ===== */
  /* Primary Brand Colors */
  --ieee-navy: #2c3e50;
  --ieee-teal: #16a085;
  --ieee-orange: #e67e22;

  /* Semantic aliases */
  --color-primary: var(--ieee-navy);
  --color-secondary: var(--ieee-teal);
  --color-accent: var(--ieee-orange);

  /* Neutral Palette */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ===== Flat Interaction System ===== */
  --flat-page-bg: var(--gray-50);
  --flat-surface: #ffffff;
  --flat-surface-muted: #f7f8fa;
  --flat-surface-hover: #fbfcfe;
  --flat-border: #dbdcdd;
  --flat-border-strong: #c7c9cc;
  --flat-text: #21242c;
  --flat-text-muted: #475774;
  --flat-text-subtle: #646b7a;
  --flat-accent: #1865f2;
  --flat-control-bg: #f1f3f5;
  --flat-control-hover: #e7ebf0;
  --flat-shadow: none;
  --flat-focus-ring: #1865f2;
  --flat-radius-sm: var(--radius-sm);
  --flat-radius-md: var(--radius-md);
  --flat-radius-lg: var(--radius-lg);
  --interactive-all: #335c7d;
  --interactive-all-soft: #eef5fa;
  --interactive-all-ink: #24445f;
  --interactive-game: #b35c00;
  --interactive-game-soft: #fff3df;
  --interactive-game-ink: #6f3800;
  --interactive-simulation: #007c6e;
  --interactive-simulation-soft: #e3f8f4;
  --interactive-simulation-ink: #00564e;
  --interactive-animation: #1f5fbf;
  --interactive-animation-soft: #edf3ff;
  --interactive-animation-ink: #184a99;
  --interactive-lab: #7b3f98;
  --interactive-lab-soft: #f7ecfb;
  --interactive-lab-ink: #592c6d;
  --interactive-hardware-sim: #9a5200;
  --interactive-hardware-sim-soft: #fff0e0;
  --interactive-hardware-sim-ink: #713b00;
  --interactive-knowledge-check: #246b3d;
  --interactive-knowledge-check-soft: #e8f6ee;
  --interactive-knowledge-check-ink: #14532d;

  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* ===== Typography Scale ===== */
  /* Base: 16px (1rem) - Modern 8pt grid aligned */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */

  /* Font Families */
  --font-family-base:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-family-heading: var(--font-family-base);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ===== Spacing Scale (8pt grid) ===== */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */

  /* ===== Figure Sizing ===== */
  --iot-figure-max-width: 640px;
  --iot-figure-compact-max-width: 560px;
  --iot-figure-wide-max-width: 980px;

  /* ===== Border Radius ===== */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-full: 9999px; /* Pills/circles */

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ===== Touch Targets (WCAG 2.1 AA) ===== */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-target-large: 56px;

  /* ===== Focus States ===== */
  --focus-ring-color: rgba(59, 130, 246, 0.5);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ===== Legacy Compatibility ===== */
  --primary-blue: var(--ieee-navy);
  --primary-dark: #1a252f;
  --accent-purple: #845ec2;
  --gradient-primary: linear-gradient(135deg, var(--ieee-navy) 0%, var(--ieee-teal) 100%);
  --gradient-dark: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
  --gradient-accent: linear-gradient(135deg, var(--ieee-teal) 0%, var(--ieee-orange) 100%);
}
/* ===== FOUC Prevention & Component Placeholders ===== */
/* Moved from per-module _quarto.yml <style> blocks to single source of truth */
#quarto-sidebar .sidebar-item a {
  transition: none !important;
}
iot-knowledge-check:not(:defined),
iot-matching-quiz:not(:defined),
iot-ordering-quiz:not(:defined),
iot-label-quiz:not(:defined),
iot-code-quiz:not(:defined),
iot-video:not(:defined),
iot-simulator:not(:defined),
iot-animation:not(:defined) {
  display: block;
  min-height: 100px;
  background: #f5f5f5;
  border-radius: 8px;
}
iot-knowledge-check,
iot-matching-quiz,
iot-ordering-quiz,
iot-label-quiz,
iot-code-quiz,
iot-video,
iot-simulator,
iot-animation,
.inline-knowledge-check,
.iot-quiz-matching,
.iot-quiz-ordering,
.iot-quiz-label,
.iot-quiz-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
/* Display outputs should fill the available width instead of inheriting console-output chrome. */
.cell-output.cell-output-display {
  background: transparent;
  border-left: 0;
  padding: 0;
  margin: 1rem 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
}
/* Quarto wraps OJS outputs in anonymous divs that otherwise shrink to min-content. */
.cell-output.cell-output-display > div,
.cell-output.cell-output-display > div > [id^="ojs-cell-"],
.cell-output.cell-output-display .observablehq,
.cell-output.cell-output-display .observablehq > form[class^="oi-"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* OJS controls need more room than Quarto's default 120px labels. */
.observablehq > form[class^="oi-"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-lg);
  background: var(--flat-surface);
  box-shadow: var(--flat-shadow);
}
.observablehq > form[class^="oi-"] > label {
  flex: 1 1 clamp(10rem, 20vw, 15rem);
  width: auto !important;
  max-width: 100%;
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--flat-text);
  font-weight: var(--font-weight-semibold);
}
.observablehq > form[class^="oi-"] > div[class$="-input"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 12rem;
  min-width: min(12rem, 100%);
  max-width: 100%;
}
.observablehq > form[class^="oi-"] input[type="number"],
.observablehq > form[class^="oi-"] input[type="text"],
.observablehq > form[class^="oi-"] select {
  min-height: 2.25rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--gray-800);
  padding: 0.35rem 0.5rem;
}
.observablehq > form[class^="oi-"] input[type="number"],
.observablehq > form[class^="oi-"] input[type="text"] {
  flex: 0 0 min(10rem, 45%);
}
.observablehq > form[class^="oi-"] input[type="range"],
.observablehq > form[class^="oi-"] select {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}
.observablehq > form[class^="oi-"] input[type="range"] {
  accent-color: var(--ieee-teal);
}

@media (max-width: 700px) {
  .observablehq > form[class^="oi-"] {
    flex-direction: column;
  }

  .observablehq > form[class^="oi-"] > label,
  .observablehq > form[class^="oi-"] > div[class$="-input"] {
    width: 100% !important;
    flex-basis: auto;
    min-width: 0;
  }

  .observablehq > form[class^="oi-"] input[type="number"],
  .observablehq > form[class^="oi-"] input[type="text"] {
    flex-basis: 7.5rem;
  }
}
/* ===== Landing Page: Book Grid & Hero ===== */
/* Moved from root _quarto.yml <style> block to single source of truth */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}
.book-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #888;
}
.hero {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #2c3e50 0%, #16a085 100%);
  color: white;
  margin: -1rem -1rem 2rem -1rem;
  border-radius: 0 0 20px 20px;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}
.stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}
.stat {
  text-align: center;
}
/* ===== Global Resets ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Navigation links - no underline by default */
nav a,
.nav-link,
.sidebar a,
.breadcrumb a {
  text-decoration: none;
}
nav a:hover,
.nav-link:hover,
.sidebar a:hover,
.breadcrumb a:hover {
  text-decoration: none;
  color: var(--color-secondary);
}
main.content p a,
main.content li a,
#quarto-document-content p a,
#quarto-document-content li a,
#quarto-document-content td a {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}
/* =============================================
   IoT Class - Consolidated Theme
   Merged from: styles.css,
components.css,
educational-components.css,
sidebar-optimizer.css,
iot-simulator.css
   ============================================= */

/* ===== Skip Link (keyboard accessibility) ===== */
.skip-link-nav {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  background: #2c3e50;
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75rem;
}
/* --- Section: Modern Theme (was styles.css) --- */

/*------------------------------------------------------------------------------
  IoT Class - Modern Tier-Based Theme
  Adapted from AI for Sensor Data Playbook styling principles
  12 Parts organized by learning tier with gradient color scheme
------------------------------------------------------------------------------*/

:root {
  /* Primary Palette - IoT Theme */
  --iot-midnight: #2c3e50;
  --iot-navy: #2e5cb8;
  --iot-ocean: #3498db;
  --iot-azure: #2e5cb8;
  --iot-sky: #00a3b4;
  --iot-electric: #00b878;
  --iot-mint: #27ae60;

  /* Neutral Palette */
  --iot-sand: #f5f5f5;
  --iot-cloud: #ececec;
  --iot-mist: #e0e0e0;
  --iot-foam: #ffffff;
  --iot-border: #bdbdbd;
  --iot-border-light: rgba(189, 189, 189, 0.5);
  --iot-muted: #757575;
  --iot-text-dark: #2c3e50;

  /* Accent Colors */
  --iot-accent-warning: #f7ca18;
  --iot-accent-error: #e74c3c;

  /* Effects */
  --iot-highlight: rgba(46, 92, 184, 0.12);
  --iot-shadow-md: 0 8px 24px rgba(44, 62, 80, 0.1);
  --iot-shadow-lg: 0 16px 48px rgba(44, 62, 80, 0.14);
  --iot-shadow-xl: 0 24px 64px rgba(44, 62, 80, 0.18);

  /* Gradients */
  --gradient-tech: linear-gradient(135deg, #2980b9 0%, #2e5cb8 35%, #00a3b4 65%, #27ae60 100%);
  --gradient-sky: linear-gradient(135deg, #00a3b4 0%, #27ae60 100%);
  --gradient-subtle: linear-gradient(
    135deg,
    rgba(46, 92, 184, 0.05) 0%,
    rgba(0, 163, 180, 0.05) 100%
  );

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family:
    "Source Sans 3",
    "Source Sans 3 Fallback",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--iot-text-dark);
  background: var(--iot-sand);
  margin: 0;
  padding: 0;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main.content {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}
/* Keep long MathJax display equations readable on phones instead of clipping. */
#quarto-document-content mjx-container[display="true"],
main.content mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  padding-bottom: 0.15rem;
}
/* worked-numbers-inline-math-overflow (P3 wave-3 fix,
2026-07-22): the rule
   above only ever matched mjx-container[display="true"] -- MathJax DISPLAY
   math ($$...$$). INLINE math ($...$) had zero overflow protection at all:
   its default `display: inline; overflow-x: visible` means a single wide
   inline formula can overflow a narrow container (e.g. a .physfn-card
   "Worked Numbers" bullet list) with no scroll mechanism whatsoever,
not
   even a hidden/inaccessible one. `display: inline-block` is required
   below because CSS `overflow` has no effect on plain `display: inline`
   boxes. Root-caused live via Playwright DOM inspection against
   wsn/duty-cycle-worked-examples (see temp/ceo-drafts-20260722/p3w3-fixes.md
   class 1) -- a wave-3 pre-flight `grep` had wrongly concluded this class
   was already fixed everywhere by matching .physfn-card's generic
   `overflow-x: auto` (present in the base template of all 316+ files)
   instead of a math-specific rule. */
#quarto-document-content mjx-container:not([display="true"]) {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  #quarto-document-content mjx-container[display="true"],
  main.content mjx-container[display="true"] {
    font-size: 0.92em;
    text-align: left;
  }
}
#quarto-content {
  background: transparent;
  padding: 2rem 1rem 2.5rem;
  gap: 0.5rem;
  max-width: 100%;
}
/* floating-feedback-widget-content-overlap (P3 wave-3 fix,
2026-07-22): the
   "Feedback" button (assets/js/content-flagging.js `applyButtonLayout()`) is
   `position: fixed; right: 20px; bottom: 20px;` set via inline style,
so it
   always floats over the same bottom-right viewport corner regardless of
   page content -- normally harmless because the last on-page content sits
   well above it,
except on short chapters with too few headings to generate
   a TOC sidebar,
where the content column widens/lengthens into that corner
   and its last element (often a Knowledge Check) ends up rendered under the
   button (edge-fog/edge-vs-cloud-debate). Reserve permanent clearance below
   all page content -- roughly 2x the button's own footprint (~64px: 20px
   offset + ~44px pill height) -- so the last element on ANY page,
long or
   short,
TOC or no TOC,
never reaches the button's zone. Harmless on long
   pages (a little extra whitespace at the very end); cannot be fixed on the
   button itself since its `.style.cssText` inline styles out-specificity
   any stylesheet rule without `!important`,
and this is the safer layer. */
#quarto-content {
  padding-bottom: 6rem;
}
.page-columns {
  max-width: 100%;
  gap: 0.5rem;
}
main.content > *:first-child {
  margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--iot-midnight);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
h1 {
  font-size: 2.75rem;
  background: var(--gradient-subtle);
  border-left: 5px solid var(--iot-azure);
  border-bottom: 2px solid var(--iot-border-light);
  padding: 0.75rem 1.25rem 0.75rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  transition: border-left-color var(--transition-base);
}
h1:hover {
  border-left-color: var(--iot-electric);
}
h2 {
  font-size: 2.1rem;
  border-bottom: 2px solid var(--iot-mist);
  padding-bottom: 0.6rem;
  margin-top: 2.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  transition: color var(--transition-base);
}
h2::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-sky);
  border-radius: 2px;
}
h3 {
  font-size: 1.65rem;
  /* a11y audit 2026-07-28 (B9): Bootstrap's own reboot sets
   * `h3, .h3, h4, .h4 { opacity: 0.9 }` (same specificity as this rule; we
   * only win on `color` because this file loads after bootstrap's, cascade
   * order, not specificity -- opacity was never contested here so bootstrap's
   * 0.9 always applied). That blended var(--iot-ocean) #3498db down to an
   * effective #47a1de on the #f5f5f5 body background used by _platform pages
   * -- 2.59:1, below even the 3:1 large-text floor this 1.65rem/700 heading
   * qualifies for. opacity:1 alone only reaches 2.89:1 (still short), so the
   * color itself is darkened 12% toward black on top of that -- 3.64:1,
   * comfortable margin above 3:1, without touching the shared --iot-ocean
   * variable (also used by a:hover/a:focus elsewhere, which already pass and
   * shouldn't move). */
  color: color-mix(in srgb, var(--iot-ocean) 88%, black);
  opacity: 1;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--iot-sky);
  transition: all var(--transition-base);
}
h3:hover {
  color: var(--iot-azure);
  border-left-color: var(--iot-electric);
}
h4 {
  font-size: 1.35rem;
  color: var(--iot-navy);
  margin-top: 1.75rem;
  margin-bottom: 0.85rem;
}
/* Title block - minimal single colored bar */
#title-block-header.quarto-title-block {
  position: relative;
  background: var(--pc-main, var(--iot-azure));
  border-radius: 6px;
  border: none;
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: none;
  overflow: hidden;
}
#title-block-header.quarto-title-block:hover {
  transform: none;
  box-shadow: none;
}
/* Remove all decorative elements */
#title-block-header.quarto-title-block::before,
#title-block-header.quarto-title-block::after {
  display: none;
}
/* Remove ALL borders from nested elements inside title block */
#title-block-header *,
#title-block-header *::before,
#title-block-header *::after {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Hide breadcrumbs in title block */
#title-block-header .quarto-title-breadcrumbs,
#title-block-header nav.quarto-title-breadcrumbs,
.quarto-title-breadcrumbs {
  display: none !important;
}
/* Title - white text on colored bar */
#title-block-header.quarto-title-block .title,
body #title-block-header .title {
  font-size: 1.4rem;
  color: #ffffff !important;
  margin: 0;
  padding: 0;
  border-bottom: none;
  line-height: 1.35;
  font-weight: 600;
}
/* Chapter number link in title - also white */
#title-block-header .title a,
#title-block-header .title .chapter-number {
  color: #ffffff !important;
  text-decoration: none;
}
/* Description (Quarto's `description:` front-matter) needs the same white-on-
 * colored-bar treatment as .title above. This is NOT the same case as
 * .subtitle below: .subtitle is Quarto boilerplate and is deliberately
 * hidden, but description: is author-written summary content -- hiding it
 * would delete real content just to dodge a contrast failure.
 * Root cause (a11y audit 2026-07-28, B9): #title-block-header's background
 * is var(--pc-main, var(--iot-azure)) -- a mid-blue -- but .description had
 * no color override at all, so it rendered in ordinary body-text color at
 * 1.74:1 against that blue. white on the same banner measures 6.29:1. */
#title-block-header.quarto-title-block .description,
body #title-block-header .description {
  color: #ffffff !important;
}
/* Hide subtitle,
meta info */
#title-block-header.quarto-title-block .subtitle,
body #title-block-header .subtitle,
#title-block-header .quarto-categories,
#title-block-header .quarto-category,
#title-block-header .quarto-title-meta,
#title-block-header .quarto-title-meta-heading,
#title-block-header .quarto-title-meta-contents,
#title-block-header .keywords {
  display: none !important;
}
/* Navigation — hide Quarto's default header bars visually; module bar replaces them.
   Use clip instead of display:none so Quarto's sidebar toggle + search JS still work. */
#quarto-header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.quarto-secondary-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--iot-border-light);
  box-shadow: var(--iot-shadow-md);
  transition: box-shadow var(--transition-base);
}
.quarto-secondary-nav:hover {
  box-shadow: var(--iot-shadow-lg);
}
.quarto-secondary-nav .btn {
  color: var(--iot-midnight);
  transition: all var(--transition-base);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
}
.quarto-secondary-nav .btn:hover {
  color: var(--iot-azure);
  background: var(--iot-highlight);
}
/* Sidebar */
#quarto-sidebar {
  background: rgba(255, 255, 255, 0.97);
  border-right: 1px solid var(--iot-border-light);
  box-shadow: var(--iot-shadow-md);
  padding: 0.4rem 0.75rem 1rem 0.75rem;
  /* Ensure adequate width for chapter navigation */
  min-width: 280px;
  width: var(--bs-sidebar-width, 300px);
}
body.nav-sidebar .sidebar-navigation {
  overflow: visible !important;
  max-height: none;
}
body.nav-sidebar .sidebar-menu-container {
  max-height: none;
}
body.nav-sidebar .sidebar {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}
body.nav-sidebar #quarto-sidebar {
  max-height: none !important;
  height: max-content !important;
  min-height: 0;
}
/* ==========================================
   SIDEBAR WIDTH FIX FOR MODULE PAGES
   Ensure sidebar has adequate width on all pages
   ========================================== */

/* Left sidebar - enforce minimum 280px width */
#quarto-sidebar,
.sidebar.sidebar-navigation {
  min-width: 280px !important;
  flex-shrink: 0;
}
/* Let Quarto handle grid - don't override */
/* Grid settings come from _quarto.yml */

/* When margin sidebar is hidden,
use two-column layout */
body.quarto-book .page-columns:not(:has(#quarto-margin-sidebar)) {
  grid-template-columns: minmax(280px, 300px) 1fr;
}
/* Ensure sidebar column doesn't shrink below minimum */
body.quarto-book #quarto-sidebar-glass-pane + .sidebar-menu-container {
  width: 100%;
  min-width: 260px;
}
/* ==========================================
   COMPACT SIDEBAR STYLING FOR 200+ CHAPTERS
   ========================================== */

#quarto-sidebar .sidebar-item {
  margin: 0.05rem 0;
}
/* Make items more compact for better navigation with 200+ chapters */
#quarto-sidebar .sidebar-item-container {
  min-height: auto;
  padding: 0;
}
/* Force no capitalization on chapter links - increased specificity */
body #quarto-sidebar .sidebar-item a .sidebar-item-text,
body .sidebar-item-text,
#quarto-sidebar .sidebar-item-text {
  text-transform: none;
}
#quarto-sidebar .sidebar-item a {
  color: var(--iot-text-dark);
  font-weight: 500;
  padding: 0.28rem 0.5rem;
  display: block;
  border-radius: 4px;
  transition: all var(--transition-fast);
  border-left: 2px solid transparent;
  font-size: 0.76rem;
  line-height: 1.25;
  text-transform: none;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-text {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Hover will be handled by JavaScript for part-specific colors */
#quarto-sidebar .sidebar-item a:hover {
  transform: translateX(2px);
}
/* Active chapter - fallback style,
JS will override with part color */
#quarto-sidebar .sidebar-item a.active {
  font-weight: 600;
}
#quarto-sidebar .sidebar-search {
  margin: 0.3rem 0 0.4rem;
}
/* Margin sidebar (Right TOC) - Clean base styling */
#quarto-margin-sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 1rem 0.5rem 0.5rem !important;
  overflow: visible;
}
#quarto-margin-sidebar:hover {
  box-shadow: none !important;
}
#TOC {
  position: sticky;
  top: 5rem;
  width: 100%;
}
#TOC ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
  border-left: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#TOC li {
  margin: 0;
  line-height: 1.25;
}
#TOC a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--iot-text-dark);
  transition: all var(--transition-base);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  line-height: 1.2;
  font-size: 0.85rem;
  width: 100%;
  text-decoration: none;
  white-space: normal;
}
#TOC a:hover {
  color: var(--iot-azure);
  background: var(--iot-highlight);
  font-weight: 600;
}
#TOC a.active {
  color: var(--iot-azure);
  font-weight: 700;
  position: relative;
}
#TOC a.active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: var(--iot-azure);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--iot-azure);
}
#TOC a .header-section-number {
  font-weight: 600;
  min-width: 2.1rem;
  text-align: right;
  color: var(--iot-muted);
}
/* Links */
a {
  color: var(--iot-azure);
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
}
a:hover,
a:focus {
  color: var(--iot-ocean);
  text-decoration: none;
}
a:hover::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-sky);
  animation: linkUnderline 0.3s ease-out;
}

@keyframes linkUnderline {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}
a:visited {
  color: var(--iot-navy);
}
/* Code and pre */
code,
pre {
  font-family:
    "Source Code Pro", "Source Code Pro Fallback", ui-monospace, SFMono-Regular, "DejaVu Sans Mono",
    monospace;
  font-size: 0.95rem;
}
code {
  background: var(--iot-cloud);
  color: var(--iot-midnight);
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--iot-border-light);
  font-weight: 500;
  transition: all var(--transition-fast);
}
code:hover {
  background: var(--iot-mist);
  border-color: var(--iot-border);
}
pre {
  background: var(--iot-cloud);
  border-left: 4px solid var(--iot-azure);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  overflow-x: auto;
  max-width: 100%;
  margin: 2rem 0;
  box-shadow: var(--iot-shadow-md);
  position: relative;
  transition: all var(--transition-base);
}
pre:hover {
  box-shadow: var(--iot-shadow-lg);
  border-left-color: var(--iot-electric);
}
pre::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.03));
  pointer-events: none;
}
pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.9rem;
}
/* Tables */
table {
  width: 100%;
  margin: 2.5rem 0;
  border-collapse: collapse;
  background: var(--iot-foam);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--iot-shadow-md);
  border: 1px solid var(--iot-border-light);
  transition: box-shadow var(--transition-base);
}
table:hover {
  box-shadow: var(--iot-shadow-lg);
}
table code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
thead {
  background: var(--gradient-tech);
  color: var(--iot-foam);
  position: relative;
}
thead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-sky);
}
thead th {
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-align: left;
}
tbody td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--iot-mist);
  font-size: 0.95rem;
  transition: background-color var(--transition-fast);
}
tbody tr:nth-child(even) {
  background: var(--iot-sand);
}
tbody tr:last-child td {
  border-bottom: none;
}
tbody tr:hover {
  background: var(--iot-highlight);
}
tbody tr:hover td {
  color: var(--iot-midnight);
}
/* Callouts */
div.callout {
  margin: 2rem 0;
  padding: 1.75rem 2rem;
  border-left: 5px solid;
  border-radius: 14px;
  background: var(--iot-foam);
  box-shadow: var(--iot-shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
div.callout::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}
div.callout:hover {
  box-shadow: var(--iot-shadow-lg);
  transform: translateY(-2px);
}
div.callout-note {
  border-left-color: var(--iot-azure);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.02));
}
div.callout-note::before {
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent);
}
div.callout-tip {
  border-left-color: var(--iot-mint);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
}
div.callout-tip::before {
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.15), transparent);
}
div.callout-warning {
  border-left-color: var(--iot-accent-warning);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
}
div.callout-warning::before {
  background: radial-gradient(circle at top right, rgba(234, 179, 8, 0.15), transparent);
}
div.callout-important,
div.callout-caution {
  border-left-color: var(--iot-accent-error);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
}
div.callout-important::before,
div.callout-caution::before {
  background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.15), transparent);
}
.callout-title {
  font-weight: 700;
  color: var(--iot-midnight);
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
/* Blockquotes */
blockquote {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem 1.75rem 2.25rem;
  border-left: 5px solid var(--iot-electric);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(6, 182, 212, 0.02));
  border-radius: 14px;
  color: var(--iot-text-dark);
  font-style: italic;
  box-shadow: var(--iot-shadow-md);
  position: relative;
  transition: all var(--transition-base);
}
blockquote:hover {
  box-shadow: var(--iot-shadow-lg);
  transform: translateX(4px);
  border-left-color: var(--iot-mint);
}
blockquote::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 4rem;
  color: var(--iot-electric);
  opacity: 0.2;
  font-style: normal;
  line-height: 1;
}
blockquote p {
  margin: 0;
  position: relative;
  z-index: 1;
}
/* Figures */
figure {
  margin: 3rem 0;
  text-align: center;
}
img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: var(--iot-shadow-lg);
  transition: all var(--transition-slow);
  border: 1px solid var(--iot-border-light);
}
/* Generated figures - preserve aspect ratio */
.cell-output-display img,
.quarto-figure img,
figure.quarto-float img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
img:hover {
  box-shadow: var(--iot-shadow-xl);
  transform: scale(1.02);
}
figcaption {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--iot-muted);
  font-style: italic;
  padding: 0.5rem 1rem;
  background: var(--iot-sand);
  border-radius: 8px;
  display: inline-block;
}
/* ==========================================
   PART HEADERS IN SIDEBAR - COMPACT
   Uses --pc-main from part-colors JS system
   ========================================== */

.sidebar-item.sidebar-item-section {
  margin-top: 0.6rem;
  margin-bottom: 0.25rem;
}
/* Part header container - unified bar layout */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container {
  display: flex;
  align-items: center;
  background: var(--pc-main, #2c3e50);
  border-radius: 5px;
  overflow: hidden;
  transition: all var(--transition-fast);
}
/* Part header text - uses module's assigned color */
/* Using #quarto-sidebar prefix for higher specificity to override link color rules */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-text,
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  border-radius: 0;
  display: block;
  flex: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  /* No separate background - container handles it */
  background: transparent;
  color: var(--pc-text, #ffffff);
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}
/* Part div inside (contains the part name) */
.sidebar-item.sidebar-item-section .part {
  font-weight: 700;
  color: inherit;
}
/* Toggle button - unified with container */
#quarto-sidebar .sidebar-item.sidebar-item-section .sidebar-item-toggle {
  padding: 0.4rem 0.5rem;
  background: transparent;
  color: var(--pc-text, #ffffff);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hover state for part headers - apply to container */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ==========================================
   CHAPTER ITEMS - STYLED BY JAVASCRIPT
   JavaScript handles all part-specific colors
   ========================================== */

/* Nested chapters under parts */
ul.sidebar-section {
  margin-top: 0.25rem;
  padding-left: 0.5rem;
}
ul.sidebar-section li.sidebar-item {
  margin: 0.05rem 0;
}
/* Base chapter link styling - JS will apply colors */
/* Increased specificity to avoid !important */
body ul.sidebar-section .sidebar-item a,
#quarto-sidebar ul.sidebar-section .sidebar-item a {
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.25rem 0.45rem;
  border-left: 2px solid transparent;
  color: #2c3e50;
  border-radius: 4px;
  transition: all var(--transition-fast);
  display: block;
}
/* Mermaid diagram styling */
.mermaid {
  font-size: 16px !important;
  background: var(--iot-foam);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--iot-shadow-md);
  margin: 2rem 0;
  overflow-x: auto;
}
.mermaid .label {
  font-size: 14px !important;
  font-family:
    "Source Sans 3",
    "Source Sans 3 Fallback",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  fill: var(--iot-text-dark) !important;
}
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  fill: var(--iot-cloud) !important;
  stroke: var(--iot-azure) !important;
  stroke-width: 2px !important;
}
/* Responsive tweaks */
@media (max-width: 1200px) {
  #quarto-content {
    padding: 2.25rem 1.5rem 3rem;
    gap: 1rem;
  }

  #title-block-header.quarto-title-block {
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 992px) {
  #quarto-content {
    padding: 2rem 1.5rem 2.75rem;
  }

  #quarto-margin-sidebar {
    position: static;
    margin-top: 1rem;
    padding: 0.5rem 0.25rem;
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
  }

  #quarto-sidebar {
    box-shadow: none;
    padding: 0.75rem 0.5rem;
    /* Maintain minimum width even on medium screens when sidebar is visible */
    min-width: 260px !important;
  }

  .sidebar-item.sidebar-item-section > .sidebar-item-text,
  .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text {
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    /* Inherit module color from base styles */
  }

  /* Book layout on medium screens - stack TOC below content */
  body.quarto-book .page-columns {
    grid-template-columns: minmax(260px, 280px) 1fr;
  }
}
/* Large screens - ensure proper three-column layout */
@media (min-width: 1200px) {
  /* Enforce sidebar widths on large screens */
  #quarto-sidebar {
    min-width: 280px;
    width: 300px;
    max-width: 320px;
    flex-shrink: 0;
  }

  #quarto-margin-sidebar {
    min-width: 330px;
    width: clamp(330px, 30vw, 420px);
  }

  /* Three-column grid for book pages */
  body.quarto-book .page-columns {
    display: grid;
    grid-template-columns: 300px 1fr minmax(330px, 420px);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  #quarto-content {
    padding: 1.65rem 0.5rem 2.5rem;
  }

  .quarto-page-breadcrumbs,
  .quarto-page-breadcrumbs .breadcrumb {
    max-width: 100%;
    min-width: 0;
  }

  .quarto-page-breadcrumbs .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    overflow-wrap: anywhere;
  }

  .quarto-page-breadcrumbs .breadcrumb-item {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .quarto-page-breadcrumbs .breadcrumb-item a,
  .quarto-page-breadcrumbs .breadcrumb-item.active {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #title-block-header.quarto-title-block {
    padding: 0.5rem 0.85rem;
  }

  #title-block-header.quarto-title-block .title,
  body #title-block-header .title {
    font-size: 1.2rem;
  }

  .sidebar-item.sidebar-item-section > .sidebar-item-text,
  .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text {
    font-size: 0.68rem;
    padding: 0.3rem 0.45rem;
    letter-spacing: 0.04em;
    /* Inherit module color from base styles */
  }

  ul.sidebar-section .sidebar-item a {
    font-size: 0.72rem;
    padding: 0.22rem 0.4rem;
  }

  #quarto-margin-sidebar {
    padding: 1rem 0.85rem;
  }

  #TOC .toc-title {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }

  #TOC a {
    font-size: 0.82rem;
  }

  #TOC li {
    margin-bottom: 0.3rem;
  }

  /* On phones, collapse Quarto book pages to a true single column. */
  body.nav-sidebar .page-columns,
  body.docked .page-columns {
    grid-template-columns:
      [screen-start] 0.25rem
      [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
        0,
        1fr
      )
      [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 0.25rem
      [screen-end] !important;
    column-gap: 0 !important;
  }

  body.nav-sidebar main.content,
  body.nav-sidebar main.content.column-body,
  body.docked main.content,
  body.docked main.content.column-body {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
/* Lists */
ul,
ol {
  padding-left: 1.2rem;
}
li {
  margin-bottom: 0.35rem;
}
/* Selection / focus */
::selection {
  background: rgba(59, 130, 246, 0.35);
  color: var(--iot-midnight);
}
:focus-visible {
  outline: 3px solid rgba(6, 182, 212, 0.6);
  outline-offset: 3px;
}
/* Print styles */
@media print {
  body {
    background: white;
  }

  .quarto-secondary-nav,
  #quarto-sidebar,
  #quarto-margin-sidebar,
  .nav-footer {
    display: none;
  }

  #quarto-content {
    max-width: 100%;
  }
}
/* --- Section: Components (was components.css) --- */

/*-- scss:rules --*/

/*=====================================
  COMPONENT STYLES
  Code blocks,
callouts,
tables,
images,
nav
=====================================*/

/* ===== CODE BLOCKS ===== */
.sourceCode,
pre.sourceCode {
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 204, 0.15);
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow-x: auto;
}
pre {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
code {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 0.9em;
}
/* Inline code */
p code,
li code {
  background: rgba(0, 102, 204, 0.08);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  color: var(--primary-dark);
  font-size: 0.875em;
  border: 1px solid rgba(0, 102, 204, 0.15);
}
/* Code language badge */
div.sourceCode::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--primary-blue);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-family-base);
}
/* Code block output */
.cell-output:not(.cell-output-display) {
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
  border-left: 4px solid var(--success);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
}
/* ===== CALLOUT BOXES - Clean nbdev-inspired design ===== */
.callout {
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border: 1px solid;
  border-left-width: 3px;
  background: #ffffff;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}
.callout:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px -2px rgba(0, 0, 0, 0.06);
}
/* Collapsible callouts - smooth transitions */
.callout.callout-collapse {
  overflow: hidden;
}
.callout.callout-collapse .callout-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.callout.callout-collapse .callout-title::after {
  content: "▼";
  font-size: 0.75em;
  transition: transform 0.3s ease;
  opacity: 0.6;
}
.callout.callout-collapse.collapsed .callout-title::after {
  transform: rotate(-90deg);
}
/* "For Beginners" specific styling */
.callout-tip[data-title*="Beginners"] {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #bbf7d0;
  border-left-color: #10b981;
}
.callout-tip[data-title*="Beginners"] .callout-title,
.callout-tip[data-title*="beginner"] .callout-title {
  color: #047857;
  font-weight: 600;
}
/* Note - Blue theme */
.callout-note {
  background: #f0f9ff;
  border-color: #e0f2fe;
  border-left-color: #38bdf8;
}
.callout-note .callout-title {
  color: #0369a1;
}
/* Tip - Green theme */
.callout-tip {
  background: #f0fdf4;
  border-color: #dcfce7;
  border-left-color: #22c55e;
}
.callout-tip .callout-title {
  color: #15803d;
}
/* Warning - Amber theme */
.callout-warning {
  background: #fffbeb;
  border-color: #fef3c7;
  border-left-color: #f59e0b;
}
.callout-warning .callout-title {
  color: #b45309;
}
/* Important/Caution - Rose theme */
.callout-important,
.callout-caution {
  background: #fff1f2;
  border-color: #ffe4e6;
  border-left-color: #f43f5e;
}
.callout-important .callout-title,
.callout-caution .callout-title {
  color: #be123c;
}
/* Callout title styling */
.callout-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
/* Callout body */
.callout-body {
  color: #374151;
  line-height: 1.7;
  font-size: 0.9375rem;
}
.callout-body p {
  margin: 0.5rem 0;
}
.callout-body p:first-child {
  margin-top: 0;
}
.callout-body p:last-child {
  margin-bottom: 0;
}
.callout-body ul,
.callout-body ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}
.callout-body li {
  margin: 0.375rem 0;
}
/* Code blocks within callouts */
.callout-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.875em;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.callout-body pre {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 1rem;
  margin: 0.75rem 0;
  overflow-x: auto;
}
/* ===== TABLES ===== */
table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: 0.95rem;
}
thead {
  background: var(--gradient-dark);
  color: white;
}
thead th {
  padding: 1rem 1.25rem;
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tbody tr {
  background: white;
  transition: all 0.2s ease;
}
tbody tr:nth-child(even) {
  background: var(--gray-50);
}
tbody tr:hover {
  background: rgba(0, 102, 204, 0.05);
  transform: scale(1.01);
}
tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}
tbody tr:last-child td {
  border-bottom: none;
}
/* Compact tables */
table.compact {
  font-size: 0.875rem;
}
table.compact th,
table.compact td {
  padding: 0.75rem 1rem;
}
/* ===== IMAGES & FIGURES ===== */
figure {
  margin: 2.5rem 0;
  text-align: center;
}
figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
}
figure img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
figcaption,
.figure-caption {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--gray-700);
  font-style: italic;
  text-align: center;
}
/* Keep figures visually proportional to the text column.
   Use .figure-wide,
or .figure-compact around an image when a
   specific teaching diagram needs a different scale. */
.figure-compact {
  --iot-figure-max-width: var(--iot-figure-compact-max-width);
}
.figure-wide {
  --iot-figure-max-width: var(--iot-figure-wide-max-width);
}
.quarto-figure,
figure.quarto-float,
figure.figure {
  max-width: min(100%, var(--iot-figure-max-width));
  margin-left: auto;
  margin-right: auto;
}
.quarto-figure img.figure-img,
figure.quarto-float img,
figure.figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}
.quarto-figure img.figure-img[src$=".svg"],
figure.quarto-float img[src$=".svg"],
figure.figure img[src$=".svg"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.quarto-figure img.figure-img[src$=".svg"]:hover,
figure.quarto-float img[src$=".svg"]:hover,
figure.figure img[src$=".svg"]:hover {
  transform: none;
  box-shadow: none;
}
/* Actuator local browser labs and wiring maps */
.browser-lab-card,
.wiring-map {
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-lg);
  background: var(--flat-surface);
  box-shadow: var(--flat-shadow);
}
.browser-lab-card {
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
}
.browser-lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}
.wiring-map {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--spacing-md) 0;
}
/* a11y audit 2026-07-28 (B9): this scroll container's content genuinely
 * overflows (672px table in a 655px/330px box at desktop/mobile widths) with
 * no way for a keyboard-only user to reach the cut-off part -- no tabindex,
 * no visible scrollbar affordance either (WCAG 2.1.1). assets/js/
 * iotclass-ui.js's normalizeWiringMapScrollRegions() sets tabindex="0" +
 * role="region" + aria-label at runtime (these are static content markup,
 * out of this territory); this is the focus style for that tabindex. */
.wiring-map:focus-visible {
  outline: 3px solid rgba(6, 182, 212, 0.6);
  outline-offset: -3px;
}
.wiring-map table {
  width: 100%;
  min-width: 42rem;
  margin: 0;
}
.wiring-map th {
  background: var(--ieee-navy);
  color: #fff;
}
.wiring-map td,
.wiring-map th {
  vertical-align: top;
}

@media (max-width: 700px) {
  .browser-lab-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== BLOCKQUOTES ===== */
blockquote {
  background: linear-gradient(135deg, rgba(132, 94, 194, 0.05) 0%, rgba(0, 102, 204, 0.05) 100%);
  border-left: 4px solid var(--accent-purple);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 8px;
  font-style: italic;
  color: var(--gray-700);
}
blockquote p:last-child {
  margin-bottom: 0;
}
/* ===== LISTS ===== */
ul,
ol {
  margin: 1rem 0;
  padding-left: 2rem;
}
li {
  margin: 0.5rem 0;
  line-height: 1.7;
}
ul li::marker {
  color: var(--primary-blue);
}
ol li::marker {
  color: var(--primary-blue);
  font-weight: 600;
}
/* ===== SIDEBAR & NAVIGATION ===== */
.sidebar {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-right: 1px solid var(--gray-200);
}
/* Remove panel styling from sidebar header/logo area - make header blend with sidebar */
.sidebar-logo,
#quarto-sidebar .sidebar-logo,
.sidebar-header,
#quarto-sidebar .sidebar-header,
.sidebar-header-stacked,
#quarto-sidebar .sidebar-header-stacked {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0.25rem !important;
  margin: 0 !important;
}
/* Override Bootstrap spacing on sidebar header */
#quarto-sidebar .sidebar-header.pt-lg-2 {
  padding-top: 0 !important;
}
#quarto-sidebar .sidebar-header.mt-2,
#quarto-sidebar .mt-2.flex-shrink-0 {
  margin-top: 0.15rem !important;
}
/* Override Quarto sidebar-header wrapper padding */
#quarto-sidebar .quarto-sidebar-header,
#quarto-sidebar > div {
  padding: 0 !important;
}
/* Make entire sidebar uniform - no panel effect */
#quarto-sidebar,
.sidebar-navigation,
nav.sidebar {
  background: white !important;
}
img.sidebar-logo,
#quarto-sidebar img.sidebar-logo {
  max-width: 56px !important;
  width: 56px !important;
  height: auto !important;
  /* CLS (launch blocker B4): `height: auto` on an <img> with no width/height
   * attribute leaves the sidebar header height unknown until the bitmap
   * decodes. 411x351 is images/general/cover.png's own pixel size. */
  aspect-ratio: 411 / 351;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
/* Hide dark-mode logo variant — project uses light theme only.
   Quarto generates both light-content and dark-content img tags but
   does not include CSS to hide the inactive variant for single-theme builds. */
.sidebar-logo.dark-content {
  display: none !important;
}
/* Remove card/panel effects from sidebar title block */
.sidebar-title,
.sidebar-logo-link,
#quarto-sidebar .sidebar-logo-link {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
/* Sidebar header: logo + title side-by-side */
#quarto-sidebar .sidebar-header-stacked,
#quarto-sidebar .sidebar-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem;
  flex-wrap: nowrap !important;
}
/* Keep sidebar logo link compact */
.sidebar-logo-link {
  min-height: 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
/* Tools inline after title text */
#quarto-sidebar .sidebar-tools-main {
  display: inline-flex !important;
  gap: 0.15rem;
  margin: 0;
  vertical-align: middle;
}
/* Hide sidebar header elements — replaced by module info bar */
#quarto-sidebar .quarto-sidebar-header,
#quarto-sidebar .sidebar-header-stacked,
#quarto-sidebar .sidebar-header,
#quarto-sidebar .sidebar-logo-link {
  display: none !important;
}
/* Sidebar Part Title - Shows module/part name at top of sidebar */
#quarto-sidebar .quarto-sidebar-header:has(.sidebar-part-title) {
  display: block !important;
}
.sidebar-part-title {
  display: block !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  background: var(--pc-main, #2c3e50) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.1rem;
}
/* Navbar "← All Modules" link - white in header bar,
always visible */
/* Note: font-weight: 700 causes brownish color rendering on green background */
/* Use same styling as .navbar-brand for consistent white appearance */
/* Include :visited to override global a:visited rule */
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link:visited,
.navbar .navbar-nav .nav-link .menu-text,
.navbar .navbar-nav .nav-link:visited .menu-text,
.navbar .navbar-nav .nav-link span,
.navbar .navbar-nav .nav-link:visited span {
  color: #ccd1d5 !important; /* Same as navbar-brand: rgb(204, 209, 213) */
  font-weight: 500 !important; /* Medium weight - 700 causes color rendering issues */
  text-decoration: none;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:hover .menu-text,
.navbar .navbar-nav .nav-link:hover span {
  color: #ffffff !important;
  text-decoration: none;
}
/* Make the navbar itself have the module color */
.navbar {
  background-color: var(--pc-main, #2c3e50) !important;
}
/* Always show navbar items (don't collapse into hamburger) */
.navbar .navbar-collapse {
  display: flex !important;
  flex-basis: auto !important;
}
.navbar .navbar-nav {
  flex-direction: row !important;
}
/* Hide hamburger menu toggle on all screens */
.navbar .navbar-toggler {
  display: none !important;
}
/* Position "← All Modules" link before the title */
.navbar .navbar-nav.me-auto {
  order: -1;
  margin-right: 1rem !important;
}
/* Keep old book-nav-header styles for backwards compatibility with stale HTML */
.book-nav-header {
  display: block !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  background: var(--pc-main, #2c3e50) !important;
}
/* Remove any panel styling from sidebar tools */
.sidebar-tools-main,
.quarto-navigation-tool {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
.sidebar-navigation a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  margin: 0 0.25rem;
  transition: all 0.2s ease;
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 500;
}
.sidebar-navigation a:hover {
  background: rgba(0, 102, 204, 0.08);
  color: var(--primary-blue);
  transform: translateX(4px);
}
.sidebar-navigation a.active {
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}
/* ===== PART HEADERS - Color-coded by section ===== */
.part {
  color: white;
  padding: 0.85rem 1.35rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1.2rem 0.3rem 0.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  border-left: 6px solid rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Add subtle gradient overlay for depth */
.part::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}
.part:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateX(5px) scale(1.02);
  letter-spacing: 0.12em;
}
/* Hide chapter numbers for legal pages everywhere */
/* Sidebar */
.sidebar-item a[href*="/legal/"] .chapter-number,
/* Breadcrumb */
.breadcrumb a[href*="/legal/"] .chapter-number,
/* Prev/next navigation */
nav a[href*="/legal/"] .chapter-number,
/* Any link to legal pages */
a[href*="/legal/"] .chapter-number {
  display: none !important;
}
/* ===== BADGES & LABELS ===== */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--primary-blue);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: white;
}
/* ===== NAVIGATION BREADCRUMBS ===== */
.breadcrumb {
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
.breadcrumb a {
  color: var(--gray-700);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--primary-blue);
}
/* Hierarchical breadcrumb styling */
.breadcrumb-item {
  display: inline-block;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 0.5rem;
  color: var(--gray-500);
  font-weight: 600;
}
/* Part-level breadcrumb (e.g.,
"Sensing & Actuation") */
.breadcrumb-part {
  font-weight: 700;
  color: var(--primary-dark);
}
/* Section-level breadcrumb (e.g.,
"Sensor Types") */
.breadcrumb-section {
  font-weight: 600;
  color: var(--gray-700);
}
/* Subsection-level breadcrumb */
.breadcrumb-subsection {
  font-weight: 500;
  color: var(--gray-600);
}
/* Current chapter (active) */
.breadcrumb-chapter {
  font-weight: 500;
  color: var(--gray-700);
}
.breadcrumb-chapter.active {
  color: var(--gray-900);
  font-weight: 600;
}
/* Hide chapter numbers in breadcrumbs (handled by JS) */
.breadcrumb .chapter-number {
  display: none;
}
/* ==========================================================================
   CROSS-BOOK NAVIGATION
   Module switcher,
prev/next navigation,
back-to-all-modules button
   Moved from cross-book-navigation.js to prevent style flash (FOUC)
   ========================================================================== */

/* Module Switcher */
.module-switcher {
  margin: 1rem 0;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.module-switcher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  cursor: pointer;
}
.current-module-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.module-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.module-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.switcher-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: #6b7280;
  transition: color 0.2s;
}
.switcher-toggle:hover {
  color: #111827;
}
.module-switcher-menu {
  border-top: 1px solid #e5e7eb;
}
.switcher-modules {
  max-height: 400px;
  overflow-y: auto;
}
.switcher-module {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid transparent;
  text-decoration: none;
  color: #111827;
  transition: all 0.2s;
}
.switcher-module:hover {
  background: #f9fafb;
}
.switcher-module.active {
  background: #f0f9ff;
  font-weight: 600;
}
.module-number {
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 500;
}
.module-title {
  font-size: 0.9rem;
}
.module-chapters {
  font-size: 0.75rem;
  color: #6b7280;
}
/* Back to All Modules Button */
.back-to-all-modules {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.back-to-all-modules:hover {
  background: #f0f9ff;
  border-color: #2563eb;
  transform: translateX(-2px);
}
/* Module Navigation (Prev/Next) */
.module-navigation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 4rem 0 2rem;
  padding: 2rem 0;
  border-top: 2px solid #e5e7eb;
}
.module-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-left: 5px solid;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s;
}
.module-nav-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.nav-direction {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.nav-module-name {
  font-size: 1.25rem;
  font-weight: 700;
}
.nav-module-desc {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
}
.module-nav-prev {
  text-align: left;
}
.module-nav-next {
  text-align: right;
}
/* Breadcrumb enhancements for cross-book navigation */
.breadcrumb-module a {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
/* Responsive cross-book navigation */
@media (max-width: 768px) {
  .module-navigation {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .module-nav-next {
    text-align: left;
  }
}
/* ==========================================================================
   LANDING PAGE STATS & FILTERS
   Module cards,
filter bar,
scroll animations
   Moved from landing-stats.js to prevent style flash (FOUC)
   ========================================================================== */

/* Ripple effect for module cards */
.module-card {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
/* Filter bar */
.module-filter-bar {
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-width: 1200px;
}
.filter-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.filter-container label {
  font-weight: 600;
  color: #374151;
}
.filter-container select {
  padding: 0.5rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}
.filter-container select:hover {
  border-color: #2563eb;
}
.filter-container select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Scroll animations */
.animate-ready {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.animate-in {
  opacity: 1;
  transform: translateY(0);
}
/* Smooth stat counter transitions */
#stat-modules,
#stat-parts,
#stat-chapters {
  display: inline-block;
  min-width: 3ch;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-container select {
    width: 100%;
  }
}
/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--gradient-primary);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}
/* ===== SEARCH BOX ===== */
.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}
.search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
/* ===== GLOBAL RESOURCE SEARCH ===== */
.global-search-container {
  color: var(--flat-text, #21242c);
  display: grid;
  gap: var(--spacing-md, 1rem);
  margin: 0 auto var(--spacing-xl, 2rem);
  max-width: 1040px;
  width: 100%;
}
.global-search-header {
  display: grid;
  gap: var(--spacing-xs, 0.25rem);
}
.global-search-header h2 {
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-2xl, 1.5rem);
  line-height: var(--line-height-tight, 1.25);
  margin: 0;
}
.global-search-header .search-description {
  color: var(--flat-text-muted, #475774);
  margin: 0;
}
.global-search-input-wrapper {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  box-shadow: none;
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
}
.global-search-label {
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-snug, 1.375);
}
.global-search-field {
  align-items: center;
  display: flex;
  position: relative;
}
.global-search-field .search-icon {
  border: 2px solid var(--flat-text-subtle, #646b7a);
  border-radius: 50%;
  height: 0.85rem;
  left: 1rem;
  pointer-events: none;
  position: absolute;
  width: 0.85rem;
}
.global-search-field .search-icon::after {
  background: var(--flat-text-subtle, #646b7a);
  content: "";
  height: 2px;
  left: 0.62rem;
  position: absolute;
  top: 0.68rem;
  transform: rotate(45deg);
  transform-origin: left center;
  width: 0.42rem;
}
.global-search-input {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border-strong, #c7c9cc);
  border-radius: 8px;
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-normal, 1.5);
  min-height: 48px;
  padding: 0.75rem 1rem 0.75rem 2.65rem;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  width: 100%;
}
.global-search-input::placeholder {
  color: var(--flat-text-subtle, #646b7a);
}
.global-search-input:focus {
  border-color: var(--flat-focus-ring, #1865f2);
  box-shadow: 0 0 0 3px rgba(24, 101, 242, 0.16);
  outline: none;
}
.global-search-input-meta {
  align-items: start;
  display: flex;
  gap: var(--spacing-md, 1rem);
  justify-content: space-between;
}
.global-search-input-meta .search-help,
.global-search-input-meta .search-stats {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  margin: 0;
}
.global-search-input-meta .search-stats {
  font-weight: var(--font-weight-semibold, 600);
  text-align: right;
  white-space: nowrap;
}
.global-search-container .search-loading {
  align-items: center;
  background: var(--flat-surface-muted, #f7f8fa);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  color: var(--flat-text-muted, #475774);
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
}
.global-search-container .search-loading[hidden] {
  display: none;
}
.global-search-container .spinner {
  animation: global-search-spin 0.8s linear infinite;
  border: 3px solid var(--flat-border, #dbdcdd);
  border-radius: 50%;
  border-top-color: var(--flat-accent, #1865f2);
  height: 1.5rem;
  width: 1.5rem;
}

@keyframes global-search-spin {
  to {
    transform: rotate(360deg);
  }
}
.global-search-results {
  display: grid;
  gap: var(--spacing-md, 1rem);
}
.global-search-container .search-state {
  background: var(--flat-surface-muted, #f7f8fa);
  border: 1px dashed var(--flat-border-strong, #c7c9cc);
  border-radius: 8px;
  color: var(--flat-text-muted, #475774);
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-lg, 1.5rem);
}
.global-search-container .search-error {
  background: #fff1f2;
  border-color: #b42318;
  color: #7a1b12;
}
.global-search-container .search-no-results {
  background: #fff7ed;
  border-color: #b66000;
  color: #713b00;
}
.global-search-container .search-state-title {
  color: inherit;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-snug, 1.375);
  margin: 0;
}
.global-search-container .search-state-detail {
  margin: 0;
}
.global-search-container .search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 0.5rem);
  margin-top: var(--spacing-xs, 0.25rem);
}
.global-search-container .search-suggestion {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border-strong, #c7c9cc);
  border-radius: 6px;
  color: var(--flat-text, #21242c);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  min-height: 36px;
  padding: 0.4rem 0.7rem;
}
.global-search-container .search-suggestion:hover,
.global-search-container .search-suggestion:focus-visible {
  background: var(--interactive-all-soft, #eef5fa);
  border-color: var(--flat-accent, #1865f2);
  color: var(--interactive-all-ink, #24445f);
  outline: none;
}
.global-search-container .search-gallery-group {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
.global-search-container .gallery-group-header {
  align-items: center;
  background: var(--flat-surface-muted, #f7f8fa);
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
  border-left: 4px solid var(--gallery-color, var(--flat-accent, #1865f2));
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.85rem 1rem;
}
.global-search-container .gallery-icon {
  align-items: center;
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  display: inline-flex;
  font-size: 1rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.global-search-container .gallery-group-title {
  min-width: 0;
}
.global-search-container .gallery-group-title h3 {
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-snug, 1.375);
  margin: 0;
}
.global-search-container .gallery-group-title p {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  margin: 0.1rem 0 0;
}
.global-search-container .gallery-count {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
}
.global-search-container .gallery-group-items {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}
.global-search-container .search-result-entry + .search-result-entry {
  border-top: 1px solid var(--flat-border, #dbdcdd);
}
.global-search-container .search-result-item {
  color: var(--flat-text, #21242c);
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  padding: 1rem;
  text-decoration: none;
}
.global-search-container .search-result-item:hover,
.global-search-container .search-result-item:focus-visible,
.global-search-container .search-result-item.is-active {
  background: var(--interactive-all-soft, #eef5fa);
  box-shadow: inset 3px 0 0 var(--flat-accent, #1865f2);
  color: var(--flat-text, #21242c);
  outline: none;
  text-decoration: none;
}
.global-search-container .result-header {
  align-items: start;
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
}
.global-search-container .result-icon {
  align-items: center;
  background: var(--flat-control-bg, #f1f3f5);
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.95rem;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}
.global-search-container .result-titles {
  min-width: 0;
}
.global-search-container .result-title {
  color: var(--flat-text, #21242c);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-snug, 1.375);
  overflow-wrap: anywhere;
}
.global-search-container .result-subtitle {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  margin-top: 0.1rem;
  overflow-wrap: anywhere;
}
.global-search-container .result-meta {
  color: var(--flat-text-subtle, #646b7a);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.25rem);
}
.global-search-container .result-meta span {
  background: var(--flat-surface-muted, #f7f8fa);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 4px;
  font-size: var(--font-size-xs, 0.75rem);
  line-height: var(--line-height-snug, 1.375);
  padding: 0.15rem 0.4rem;
}
.global-search-container .result-description,
.global-search-container .result-chapter {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-normal, 1.5);
  overflow-wrap: anywhere;
}
.global-search-container .result-chapter {
  color: var(--interactive-all-ink, #24445f);
  font-weight: var(--font-weight-medium, 500);
}
.global-search-container mark {
  background: #fff4e3;
  border-radius: 3px;
  color: #713b00;
  padding: 0 0.1rem;
}

@media (max-width: 640px) {
  .global-search-container {
    gap: var(--spacing-sm, 0.5rem);
  }

  .global-search-header h2 {
    font-size: var(--font-size-xl, 1.25rem);
  }

  .global-search-input-wrapper,
  .global-search-container .search-state {
    padding: var(--spacing-md, 1rem);
  }

  .global-search-container .gallery-group-header {
    align-items: stretch;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .global-search-container .global-search-input-meta {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .global-search-container .global-search-input-meta .search-stats {
    text-align: left;
    white-space: normal;
  }

  .global-search-container .gallery-count {
    grid-column: 2;
    white-space: normal;
  }

  .global-search-container .search-result-item {
    padding: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-input,
  .global-search-container .spinner {
    animation: none;
    transition: none;
  }
}
/* ===== HORIZONTAL RULES ===== */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
  margin: 3rem 0;
}
/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
/* ===== EMBED WRAPPERS (Wokwi,
CircuitJS,
YouTube) ===== */
.embed {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  margin: 1.5rem 0;
  overflow: hidden;
}
.embed-header {
  background: var(--gradient-primary);
  color: #fff;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.embed-frame {
  display: block;
  width: 100%;
  border: 0;
}
.embed-caption {
  padding: 0.5rem 0.75rem 0.9rem;
  color: var(--gray-700);
  font-style: italic;
  background: #fafafa;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* ===== QUIZ (Lightweight MCQ pattern) ===== */
.quiz,
.mcq {
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-lg);
  padding: 1rem;
  box-shadow: var(--flat-shadow);
  background: var(--flat-surface);
  margin: 1.25rem 0;
}
/* ===== KNOWLEDGE CHECK (Collapsible inline concept checks) ===== */
.knowledge-check {
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-lg);
  background: var(--flat-surface);
  margin: 1.5rem 0;
  box-shadow: var(--flat-shadow);
}
.knowledge-check summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--interactive-knowledge-check-ink);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
  transition: background-color var(--transition-fast);
  border-radius: var(--flat-radius-md);
}
.knowledge-check summary:hover {
  background: var(--interactive-knowledge-check-soft);
}
.knowledge-check summary::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.knowledge-check summary::marker {
  content: "";
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.knowledge-check .mcq {
  margin: 0.75rem 0;
  border-color: var(--flat-border);
  background: var(--flat-surface-muted);
}
.knowledge-check-badge {
  display: inline-block;
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-left: auto;
}
/* ===== KNOWLEDGE CHECK TOGGLE BUTTON ===== */
#knowledge-check-toggle {
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  background: var(--interactive-knowledge-check);
  color: #ffffff;
  border: 1px solid var(--interactive-knowledge-check);
  width: 56px;
  height: 56px;
  border-radius: var(--flat-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--flat-shadow);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  z-index: 999;
  font-weight: 700;
}
#knowledge-check-toggle:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}
#knowledge-check-toggle:active {
  transform: translateY(-2px) scale(1.02);
}
#knowledge-check-toggle.hidden-mode {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}
#knowledge-check-toggle.hidden-mode:hover {
  box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
}
/* Tooltip for toggle button */
#knowledge-check-toggle::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  margin-right: 0.75rem;
}
#knowledge-check-toggle:hover::after {
  opacity: 1;
}
.mt-1 {
  margin-top: var(--spacing-xs);
}
.mt-2 {
  margin-top: var(--spacing-sm);
}
/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 45px;
    height: 45px;
  }

  table {
    font-size: 0.875rem;
  }

  thead th,
  tbody td {
    padding: 0.75rem;
  }

  /* Mobile callout improvements */
  .callout {
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-radius: 6px;
  }

  .callout-title {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
  }

  .callout-body {
    font-size: 0.875rem;
    line-height: 1.65;
  }

  /* Collapsible callouts - better touch targets */
  .callout[data-bs-toggle="collapse"] .callout-title {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* Mobile code blocks */
  .sourceCode,
  pre.sourceCode {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    font-size: 0.8125rem;
  }

  div.sourceCode::before {
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
    top: 0.5rem;
    right: 0.5rem;
  }

  /* Mobile figure/image handling */
  figure {
    margin: 1rem 0;
  }

  figure img {
    max-width: 100%;
    height: auto;
  }

  figcaption {
    font-size: 0.8125rem;
    padding: 0.5rem;
  }

  /* Mobile Mermaid diagrams */
  .mermaid {
    overflow-x: auto;
    max-width: 100%;
    font-size: 0.75rem;
  }

  /* Navigation touch targets */
  .sidebar-item a {
    min-height: 44px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
  }

  /* Table horizontal scroll */
  .table-responsive,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Optional stacked tables for dense comparison tables on small screens.
   QMD pages opt in with: ::: {.table-responsive .iot-stack-table-wrap}
*/
.iot-stack-table-wrap table {
  width: 100%;
}
#quarto-document-content table.iot-stack-table {
  width: 100%;
}

@media (max-width: 700px) {
  .iot-stack-table-wrap {
    overflow-x: visible;
  }

  #quarto-document-content table.iot-stack-table thead {
    display: none;
  }

  #quarto-document-content table.iot-stack-table,
  #quarto-document-content table.iot-stack-table tbody,
  #quarto-document-content table.iot-stack-table tr,
  #quarto-document-content table.iot-stack-table td,
  #quarto-document-content table.iot-stack-table th {
    display: block;
    width: 100%;
  }

  #quarto-document-content table.iot-stack-table tr[data-iot-stack-header="true"] {
    display: none !important;
  }

  #quarto-document-content table.iot-stack-table tr {
    margin: 0 0 1rem;
    border: 1px solid #d9e5ea;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  #quarto-document-content table.iot-stack-table td,
  #quarto-document-content table.iot-stack-table th {
    border: 0;
    border-bottom: 1px solid #edf2f7;
    padding: 0.8rem 0.9rem;
    text-align: left !important;
    white-space: normal;
  }

  #quarto-document-content table.iot-stack-table td:last-child,
  #quarto-document-content table.iot-stack-table th:last-child {
    border-bottom: 0;
  }

  #quarto-document-content table.iot-stack-table td::before,
  #quarto-document-content table.iot-stack-table th::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5b6f7f;
  }
}
/* Extra small screens */
@media (max-width: 480px) {
  .callout {
    padding: 0.875rem 1rem;
    margin: 0.75rem 0;
  }

  .callout-title {
    font-size: 0.875rem;
  }

  .callout-body {
    font-size: 0.8125rem;
  }

  .sourceCode,
  pre.sourceCode {
    padding: 0.75rem;
    font-size: 0.75rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.375rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  /* Touch targets - still need 44px minimum */
  .back-to-top {
    width: 48px;
    height: 48px;
  }

  #knowledge-check-toggle {
    width: 52px;
    height: 52px;
  }
}
/* ===== RIGHT SIDEBAR (TABLE OF CONTENTS) STYLING ===== */
/* Base styling for right sidebar with part-aware accents */
#quarto-margin-sidebar {
  --toc-accent: #2f4f4f;
  --toc-accent-border: #2f4f4f;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  padding: 0.5rem 0.75rem 0.5rem 0.25rem !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  /* Allow vertical scroll, allow horizontal overflow for text wrapping */
  overflow-x: visible;
  overflow-y: auto;
  /* Ensure content stays within bounds */
  box-sizing: border-box;
  max-width: 100%;
}
/* TOC navigation styling */
nav#TOC {
  font-size: 0.82rem;
  line-height: 1.5;
  /* Allow TOC text to wrap properly */
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}
nav#TOC ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
nav#TOC li {
  margin: 0;
}
#quarto-margin-sidebar nav#TOC a,
nav#TOC a {
  display: block;
  position: relative;
  padding: 0.15rem 0.75rem 0.15rem 0.5rem;
  color: #495057 !important;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  border-radius: 3px;
  transition: none !important;
  line-height: 1.3;
  background: none !important;
  /* Allow text to wrap - prevent cutoff */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: 0.78rem;
  min-height: 0;
  /* Constrain to parent width with safety margin */
  max-width: calc(100% - 0.5rem);
  box-sizing: border-box;
}
/* toc-nav-heading-number-midbreak (P3 wave-4 fix,
2026-07-22): the
   `overflow-wrap: anywhere; word-break: break-word;` above is meant for the
   heading TITLE text (so long multi-word titles wrap instead of overflowing
   the sidebar) but both properties are inherited,
so a right-sidebar TOC
   entry's `.header-section-number` badge (e.g. "44.21") inherits them too --
   combined with the badge's own narrow `min-width: 2.1rem` (#TOC a
   .header-section-number,
above),
a two-digit sub-section number has just
   enough width pressure to break mid-digit ("44.2" / "1") instead of
   wrapping at the space before the title. Numbers never need to wrap; give
   the badge its own explicit `white-space: nowrap` so it always renders as
   one unbroken token regardless of column width. */
#quarto-margin-sidebar nav#TOC a .header-section-number,
nav#TOC a .header-section-number {
  white-space: nowrap;
}
/* Ensure TOC text wraps properly within container bounds */
#quarto-margin-sidebar nav#TOC ul,
nav#TOC ul {
  padding-right: 1rem;
}
nav#TOC li {
  /* Allow text to wrap instead of truncating */
  overflow: visible;
}
#quarto-margin-sidebar nav#TOC a:hover,
nav#TOC a:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #212529 !important;
}
/* Active section highlighting */
#quarto-margin-sidebar nav#TOC a.active,
nav#TOC a.active {
  background: rgba(0, 0, 0, 0.06) !important;
  border-left-color: var(--toc-accent-border);
  border-left-width: 3px;
  font-weight: 600;
  color: #2c3e50 !important;
}
/* Nested items */
nav#TOC ul ul {
  padding-left: 0.75rem;
  margin: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}
nav#TOC ul ul a {
  font-size: 0.75rem;
  padding: 0.2rem 0.3rem 0.2rem 0.5rem;
}
/* TOC actions (Edit this page,
Report issue) */
nav#TOC .toc-actions {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e0e0e0;
}
/* Responsive adjustments */
@media (max-width: 1399px) {
  #quarto-margin-sidebar {
    padding: 0.5rem 0.25rem;
  }
}

@media (max-width: 991px) {
  #quarto-margin-sidebar {
    border-left: none;
    box-shadow: none;
  }
}
/* Sidebar color indicators for collapsed sections */
.sidebar-item-container .collapse-indicator {
  color: inherit;
  transition: transform 0.3s ease;
}
/* Sidebar chapter indicators - disabled to prevent visual issues */
/* .sidebar-item a::before { content: "•"; ... }
- removed */

/* ===== SIDEBAR STYLING & LAYOUT ===== */
.sidebar {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}
/* Sidebar layout - fixed sidebars,
adaptive content */
@media (min-width: 1100px) {
  /* Three-column: sidebar (left) | content (fill) | TOC (right) */
  body.docked .page-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
    grid-template-columns:
      [screen-start] 0px
      [screen-start-inset page-start] 325px
      [page-start-inset] 0px
      [body-start-outset] 0px
      [body-start] 1.5rem
      [body-content-start] 1fr
      [body-content-end] 1.5rem
      [body-end] 200px
      [body-end-outset] 0px
      [page-end-inset] 0px
      [page-end] 0px
      [screen-end-inset] 1rem
      [screen-end] !important;
  }
}
/* Two-column below 1100px: sidebar + content,
TOC hidden */
@media (min-width: 992px) and (max-width: 1099px) {
  body.docked .page-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
    grid-template-columns:
      [screen-start] 0px
      [screen-start-inset page-start] 325px
      [page-start-inset] 0px
      [body-start-outset] 0px
      [body-start] 1.5rem
      [body-content-start] 1fr
      [body-content-end] 0px
      [body-end] 0px
      [body-end-outset] 0px
      [page-end-inset] 0px
      [page-end] 0px
      [screen-end-inset] 1.5rem
      [screen-end] !important;
  }

  #quarto-margin-sidebar {
    display: none !important;
  }
}

@media (min-width: 992px) {
  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-content.page-columns {
    display: grid !important;
    width: min(100%, 1840px);
    max-width: 1840px;
    margin-inline: auto;
    box-sizing: border-box;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar {
    grid-column: screen-start-inset / page-start-inset;
    grid-row: 1 / span 4;
    align-self: start;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-margin-sidebar {
    grid-column: body-end / page-end;
    grid-row: 1;
    align-self: start;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content,
  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    main.content.column-body {
    grid-column: body-content-start / body-content-end;
    justify-self: start;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation {
    grid-column: body-content-start / body-content-end;
  }

  /* Left sidebar - fixed at 325px, flush left */
  #quarto-sidebar,
  #quarto-sidebar .sidebar-navigation {
    width: 325px !important;
    min-width: 0 !important;
    max-width: 325px !important;
  }

  /* Right sidebar (TOC) - sticky, right-aligned */
  #quarto-margin-sidebar {
    position: sticky !important;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0.75rem;
  }
}

@media (min-width: 769px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-sidebar
    .sidebar-search,
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-header
    #quarto-search,
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-header
    .aa-DetachedSearchButton {
    display: none !important;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #global-search-btn {
    display: none !important;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .quarto-secondary-nav {
    display: none !important;
  }
}
/* Prevent horizontal overflow */
html {
  overflow-x: hidden;
}
/* ===== MEDIA VERSIONING PICKER ===== */
/* Version indicator on images and diagrams with alternatives */
.media-version-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(44, 62, 80, 0.85);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.media-version-container:hover .media-version-indicator,
figure:hover .media-version-indicator,
[id^="fig-"]:hover .media-version-indicator {
  opacity: 1;
}
.media-version-indicator:hover {
  transform: scale(1.1);
  background: rgba(22, 160, 133, 0.95);
}
.media-version-indicator .version-icon {
  font-size: 14px;
}
.media-version-indicator .version-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
/* Container for images with version indicators */
.media-version-container {
  position: relative;
  display: inline-block;
}
/* Unified admin media indicator (same for images and diagrams) */
.admin-media-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(44, 62, 80, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Show indicator on hover - works for both images and diagrams */
.admin-media-container:hover .admin-media-indicator,
figure:hover .admin-media-indicator,
[id^="fig-"]:hover .admin-media-indicator,
.quarto-figure:hover .admin-media-indicator,
.cell-output-display:hover .admin-media-indicator {
  opacity: 1;
}
.admin-media-indicator:hover {
  transform: scale(1.1);
  background: rgba(22, 160, 133, 0.95);
}
/* Unified admin media container */
.admin-media-container {
  position: relative;
  display: inline-block;
}
/* Option badge in picker panel */
.option-badge {
  background: rgba(22, 160, 133, 0.2);
  color: #16a085;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
}
/* Toggle indicator on figures with alternatives (legacy) */
.media-toggle-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(44, 62, 80, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.media-toggle-indicator:hover {
  opacity: 1;
  transform: scale(1.05);
}
.media-toggle-indicator .toggle-icon {
  font-size: 14px;
}
.media-toggle-indicator .toggle-count {
  font-size: 10px;
  opacity: 0.85;
}
/* Media picker panel */
.media-picker-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  min-width: 350px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.media-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #2c3e50;
  color: white;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}
.media-panel-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.media-panel-close:hover {
  opacity: 1;
}
.media-panel-body {
  padding: 16px;
}
.media-type-section {
  margin-bottom: 16px;
}
.media-type-section:last-of-type {
  margin-bottom: 0;
}
.media-type-section h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}
.media-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.media-option:hover {
  background: #f5f5f5;
}
.media-option.selected {
  background: #e8f6f3;
  border-color: #16a085;
}
.media-option input {
  margin: 0;
  cursor: pointer;
}
.option-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}
.option-source,
.option-file {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.media-panel-actions {
  margin-top: 16px;
  text-align: right;
  border-top: 1px solid #eee;
  padding-top: 12px;
}
.apply-media-btn {
  background: #16a085;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}
.apply-media-btn:hover {
  background: #138d75;
}
/* Panel info section */
.media-panel-info {
  padding: 8px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #666;
}
/* Type badges */
.media-type-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.media-type-badge.image {
  background: #e8f6f3;
  color: #16a085;
}
.media-type-badge.diagram {
  background: #fdf2e9;
  color: #e67e22;
}
/* Admin preview section */
.media-preview-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.media-preview-section h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
}
.preview-container {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-placeholder {
  color: #999;
  font-size: 12px;
  font-style: italic;
}
/* Admin tools section */
.admin-tools-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.admin-tools-section h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 14px;
}
.admin-tool-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.apply-all-btn,
.reset-selection-btn {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s;
}
.apply-all-btn {
  background: #e67e22;
  color: white;
}
.apply-all-btn:hover {
  background: #d35400;
}
.reset-selection-btn {
  background: #95a5a6;
  color: white;
}
.reset-selection-btn:hover {
  background: #7f8c8d;
}
/* Diagram indicator styling */
.diagram-indicator {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}
.diagram-indicator:hover {
  background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
}
/* Library browser section */
.library-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
/* Library option - increased specificity to avoid !important */
.library-images .library-option {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 11px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}
.library-option.selected {
  background: #e8f6f3;
  border-color: #16a085;
}
/* Backdrop */
.media-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
/* Responsive adjustments */
@media (max-width: 480px) {
  .media-picker-panel {
    min-width: 290px;
    max-width: calc(100vw - 40px);
  }

  .media-panel-header {
    padding: 10px 14px;
    font-size: 14px;
  }

  .media-panel-body {
    padding: 12px;
  }

  .media-option {
    padding: 6px;
    gap: 6px;
  }

  .option-source,
  .option-file {
    max-width: 80px;
  }
}
/* ===== PROGRESSIVE DISCLOSURE LAYER SYSTEM ===== */
/* Three-tier content disclosure: Core (always visible),
Practical (togglable),
Deep (collapsed by default) */

/* Layer Core - Always visible,
base content with no special styling */
.layer-core {
  /* Standard content - no special styling needed */
}
/* Layer Practical - Visible by default,
can be toggled */
/* Used for hands-on examples,
code samples,
implementation details */
.layer-practical {
  border-left: 3px solid #16a085;
  padding-left: 1rem;
  margin: 1rem 0;
  background: linear-gradient(90deg, rgba(22, 160, 133, 0.03) 0%, transparent 100%);
}
/* Layer Deep - Collapsed by default */
/* Used for advanced theory,
edge cases,
optimization details,
mathematical proofs */
.layer-deep {
  background: #f8f9fa;
  border-left: 3px solid #7f8c8d;
  margin: 1rem 0;
}
/* Deep Dive callout styling - enhanced for progressive disclosure */
.callout-note[data-title*="Deep Dive"] {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-color: #e9ecef;
  border-left-color: #7f8c8d;
  border-left-width: 4px;
}
.callout-note[data-title*="Deep Dive"] .callout-title,
.callout-note[data-title*="deep dive"] .callout-title {
  color: #495057;
  font-weight: 600;
}
.callout-note[data-title*="Deep Dive"] .callout-title::before,
.callout-note[data-title*="deep dive"] .callout-title::before {
  content: "Advanced ";
  font-size: 0.7rem;
  background: #7f8c8d;
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  vertical-align: middle;
}
/* Deep Dive callout body */
.callout-note[data-title*="Deep Dive"] .callout-body {
  color: #495057;
  font-size: 0.9rem;
}
/* Mathematical content within Deep Dive sections */
.callout-note[data-title*="Deep Dive"] .math {
  background: white;
  padding: 0.5rem;
  border-radius: 4px;
  margin: 0.5rem 0;
}
/* ===== PRINT STYLES ===== */
@media print {
  .hero-section,
  .features-section,
  .pathway-section,
  .testimonial-section,
  .cta-section,
  .sidebar,
  .back-to-top {
    display: none;
  }

  figure img {
    box-shadow: none;
  }
}
/* --- Section: Educational Components (was educational-components.css) --- */

/*=====================================
  EDUCATIONAL COMPONENTS v1.0
  Kids content,
executive summaries,
research papers,
labs
  IEEE Color Palette: #2C3E50,
#16A085,
#E67E22,
#7F8C8D
=====================================*/

/* ===== KIDS CONTENT - COMICS & ELI5 ===== */

/* Kids panel container - collapsible section for children's content */
.kids-panel {
  border: 3px solid #ffb347;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8e7 0%, #fffdf5 100%);
  margin: 2rem 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(255, 179, 71, 0.2);
  transition: all 0.3s ease;
}
.kids-panel:hover {
  box-shadow: 0 6px 20px rgba(255, 179, 71, 0.3);
  transform: translateY(-2px);
}
.kids-panel-header {
  background: linear-gradient(135deg, #ffb347 0%, #ffcc80 100%);
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
  transition: background 0.2s ease;
}
.kids-panel-header:hover {
  background: linear-gradient(135deg, #ffa726 0%, #ffb74d 100%);
}
.kids-panel.collapsed .kids-panel-toggle {
  transform: rotate(-90deg);
}
.kids-panel-body {
  padding: 1.5rem;
  animation: slideDown 0.3s ease;
}
.kids-panel.collapsed .kids-panel-body {
  display: none;
}
/* Flat bridge from academic chapters to the separate IoT Kids Books unit */
.iot-kids-book-link {
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid #16a085;
  border-radius: 4px;
  background: #f6fbfa;
  color: #1f2937;
}
.iot-kids-book-link__text {
  display: grid;
  gap: 0.25rem;
}
.iot-kids-book-link__eyebrow {
  color: #52616b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.iot-kids-book-link__title {
  font-weight: 700;
}
.iot-kids-book-link__title a {
  color: #0b6657;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}
.iot-kids-book-link__reason {
  color: #52616b;
  font-size: 0.95rem;
}
/* ELI5 (Explain Like I'm 5) styling */
.eli5-section {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border-left: 4px solid #4caf50;
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
}
/* Comic Panel Layout */
.comic-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.comic-panel {
  background: white;
  border: 3px solid #2c3e50;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 4px 4px 0 #2c3e50;
  transition: transform 0.2s ease;
}
.comic-panel:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #2c3e50;
}
.comic-speech-bubble {
  background: #f5f5f5;
  border: 2px solid #333;
  border-radius: 20px;
  padding: 0.75rem 1rem;
  position: relative;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.comic-speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #333;
}
.comic-speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f5f5f5;
  z-index: 1;
}
/* Character badges for comic characters */
.character-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
/* Age indicator */
.age-indicator {
  display: inline-block;
  background: #e3f2fd;
  color: #1565c0;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.5rem;
}
/* ===== EXECUTIVE SUMMARY CARDS ===== */

.executive-summary {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border: 1px solid #e0e0e0;
  border-left: 5px solid #2c3e50;
  border-radius: 0 12px 12px 0;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Key metrics table in executive summary */
.executive-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
/* Decision criteria in executive summary */
.decision-criteria {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.criteria-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.criteria-list li {
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
  color: #555;
}
.criteria-list li.positive::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}
.criteria-list li.negative::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #e74c3c;
  font-weight: bold;
}
.criteria-list li.neutral::before {
  content: "○";
  position: absolute;
  left: 0;
  color: #95a5a6;
}
/* Case study snapshot */
.case-study-snapshot {
  background: linear-gradient(135deg, #e8f6f3 0%, #f0faf8 100%);
  border: 1px solid #a3d9cc;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* ===== RESEARCH PAPER REFERENCES ===== */

.scholarly-references {
  background: linear-gradient(135deg, #fff3e0 0%, #fffaf0 100%);
  border: 1px solid #ffe0b2;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}
.scholarly-references-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #ffe0b2;
}
.scholarly-references-header h3 {
  margin: 0;
  color: #e65100;
  font-size: 1.1rem;
  font-weight: 700;
}
.scholarly-references-header::before {
  content: "📚";
  font-size: 1.5rem;
}
.paper-category {
  margin: 1.25rem 0;
}
.paper-category h4 {
  color: #bf360c;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  padding-left: 0.5rem;
  border-left: 3px solid #ff5722;
}
.paper-card {
  background: white;
  border: 1px solid #ffccbc;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}
.paper-card:hover {
  border-color: #ff5722;
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.15);
}
.paper-card:last-child {
  margin-bottom: 0;
}
.paper-title {
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.paper-venue {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.paper-authors {
  color: #666;
  font-size: 0.85rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.paper-contribution {
  color: #555;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.paper-relevance {
  background: #f5f5f5;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #666;
}
.paper-relevance strong {
  color: #e65100;
}
.paper-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.paper-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.paper-link.ieee {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}
.paper-link.ieee:hover {
  background: #1565c0;
  color: white;
}
.paper-link.acm {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.paper-link.acm:hover {
  background: #2e7d32;
  color: white;
}
.paper-link.arxiv {
  background: #f3e5f5;
  color: #7b1fa2;
  border: 1px solid #ce93d8;
}
.paper-link.arxiv:hover {
  background: #7b1fa2;
  color: white;
}
.paper-link.bibtex {
  background: #eceff1;
  color: #546e7a;
  border: 1px solid #b0bec5;
}
.paper-link.bibtex:hover {
  background: #546e7a;
  color: white;
}
/* Paper difficulty indicator */
.paper-difficulty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: #666;
  margin-left: 0.5rem;
}
.paper-difficulty .star {
  color: #ffc107;
}
.paper-difficulty .star.empty {
  color: #e0e0e0;
}
/* Paper reading guide */
.paper-reading-guide {
  background: #fffde7;
  border: 1px solid #fff59d;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* ===== PRACTICAL LAB EXERCISES ===== */

.practical-lab {
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
  border: 2px solid #90caf9;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
}
.practical-lab::before {
  content: "Hands-On Lab";
  position: absolute;
  top: -12px;
  left: 20px;
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  color: white;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}
.practical-lab-header {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #bbdefb;
}
.practical-lab h2,
.practical-lab h3 {
  color: #1565c0;
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}
.lab-meta-item .icon {
  font-size: 1rem;
}
/* Lab difficulty stars */
.lab-difficulty {
  display: inline-flex;
  gap: 0.15rem;
}
.lab-difficulty .star {
  color: #ffc107;
  font-size: 0.9rem;
}
.lab-difficulty .star.empty {
  color: #e0e0e0;
}
/* Learning objectives */
.lab-objectives {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.lab-objectives h4 {
  color: #1565c0;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lab-objectives h4::before {
  content: "🎯";
}
.lab-objectives ul {
  margin: 0;
  padding-left: 1.5rem;
}
.lab-objectives li {
  color: #333;
  font-size: 0.9rem;
  margin: 0.4rem 0;
}
/* Lab steps */
.lab-step {
  background: white;
  border: 1px solid #bbdefb;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 3.5rem;
}
.lab-step p {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
/* Lab checkpoints */
.lab-checkpoint {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.lab-checkpoint h4 {
  color: #2e7d32;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lab-checkpoint h4::before {
  content: "✓";
  background: #4caf50;
  color: white;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.lab-checkpoint ul {
  margin: 0;
  padding-left: 1.5rem;
}
.lab-checkpoint li {
  color: #33691e;
  font-size: 0.9rem;
  margin: 0.3rem 0;
}
/* Lab extensions/challenges */
.lab-extensions {
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* Lab troubleshooting */
.lab-troubleshooting {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* Lab equipment list */
.lab-equipment {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
/* LAB-UX-1: flat lab and grading surfaces */
.practical-lab {
  border: 1px solid var(--flat-border, #dbdcdd);
  border-top: 4px solid var(--interactive-lab, #7b3f98);
  border-radius: 8px;
  background: var(--flat-surface, #ffffff);
  box-shadow: none;
}
.practical-lab::before {
  position: static;
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 4px 8px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface-muted, #f7f8fa);
  box-shadow: none;
  color: var(--interactive-lab-ink, #592c6d);
  letter-spacing: 0.04em;
}
.practical-lab-header {
  display: grid;
  gap: 10px;
  margin-top: 0;
  border-bottom-color: var(--flat-border, #dbdcdd);
}
.practical-lab h2,
.practical-lab h3,
.lab-objectives h4,
.lab-checkpoint h4 {
  color: var(--flat-text, #21242c);
}
.lab-progress-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.lab-progress-bar .progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--flat-control-bg, #e7ebf0);
}
.lab-progress-bar .progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--flat-accent, #1865f2);
  transition: width 0.2s ease;
}
.lab-completed .lab-progress-bar .progress-fill {
  background: #2e7d32;
}
.lab-progress-bar .progress-text {
  color: var(--flat-text-muted, #475774);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.lab-progress-reset {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}
.lab-progress-reset:hover,
.lab-progress-reset:focus {
  border-color: var(--flat-accent, #1865f2);
  color: #164ca7;
}
.lab-objectives,
.lab-step,
.lab-checkpoint {
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-step {
  padding-left: 3.25rem;
}
.lab-objectives li,
.lab-checkpoint li {
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--flat-text, #21242c);
}
.lab-objectives li.completed,
.lab-checkpoint li.completed {
  border-color: #b8d9c1;
  background: #f1f8f4;
  color: #255c30;
}
.lab-objectives input.lab-checkbox,
.lab-checkpoint input.lab-checkbox {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  accent-color: var(--flat-accent, #1865f2);
  vertical-align: middle;
}
.lab-objectives input.lab-checkbox:focus-visible,
.lab-checkpoint input.lab-checkbox:focus-visible,
.lab-progress-reset:focus-visible,
.lab-button:focus-visible,
.lab-submission-form input:focus-visible,
.lab-submission-form textarea:focus-visible,
.lab-grading-form input:focus-visible,
.lab-grading-form textarea:focus-visible {
  outline: 3px solid rgba(24, 101, 242, 0.25);
  outline-offset: 2px;
}
.lab-submission,
.lab-grading,
.lab-auth-required,
.lab-access-denied {
  display: grid;
  gap: 16px;
  margin: 1.5rem 0;
  padding: 18px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
}
.lab-submission-header,
.lab-grading-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
}
.lab-submission-header h3,
.lab-grading-header h3,
.lab-auth-required h3 {
  margin: 0;
  color: var(--flat-text, #21242c);
}
.lab-type-badge,
.lab-student-name,
.lab-criterion-weight {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 999px;
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text-muted, #475774);
  font-size: 0.78rem;
  font-weight: 750;
}
.lab-submission-form,
.lab-grading-form,
.lab-submission-details {
  display: grid;
  gap: 14px;
}
.lab-form-group,
.lab-detail-item,
.lab-criterion {
  display: grid;
  gap: 8px;
}
.lab-form-group label,
.lab-criterion-header label,
.lab-detail-item strong {
  color: var(--flat-text, #21242c);
  font-weight: 750;
}
.lab-submission-form input,
.lab-submission-form textarea,
.lab-grading-form input,
.lab-grading-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  font: inherit;
}
.lab-form-group small,
.lab-detail-item p {
  color: var(--flat-text-muted, #475774);
}
.lab-self-assessment {
  display: grid;
  gap: 8px;
}
.lab-self-assessment .lab-checkbox {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-self-assessment .lab-checkbox input {
  width: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--flat-accent, #1865f2);
}
.lab-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.lab-button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}
.lab-button-primary {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-accent, #1865f2);
  color: #ffffff;
}
.lab-button-secondary {
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-button:hover,
.lab-button:focus {
  border-color: var(--flat-accent, #1865f2);
}
.lab-button-primary:hover,
.lab-button-primary:focus {
  background: #134fbf;
  color: #ffffff;
}
.lab-button:disabled,
.lab-button[aria-disabled="true"] {
  border-color: var(--flat-border, #dbdcdd);
  background: var(--flat-control-bg, #e7ebf0);
  color: var(--flat-text-subtle, #646b7a);
  cursor: not-allowed;
}
.lab-status {
  padding: 10px 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text-muted, #475774);
  font-size: 0.9rem;
}
.lab-status-error,
.lab-access-denied {
  border-color: #efb8b2;
  background: #fff8f7;
  color: #9f241d;
}
.lab-status-info {
  border-color: #bfd2f8;
  background: #f4f7ff;
  color: #164ca7;
}
.lab-criterion {
  padding: 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-criterion-header,
.lab-criterion-input {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.lab-criterion-input input {
  max-width: 120px;
}
.lab-criterion-max {
  color: var(--flat-text-muted, #475774);
  font-weight: 750;
}
.lab-grade-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-grade-total,
.lab-grade-letter {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--flat-text, #21242c);
  font-weight: 800;
}
.lab-grade-letter {
  min-width: 42px;
  min-height: 34px;
  justify-content: center;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
}
.lab-auth-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #fff0ee;
  color: #9f241d;
  font-weight: 850;
}
.lab-auth-required p {
  margin: 0;
  color: var(--flat-text-muted, #475774);
}
/* ===== CAPSTONE PROJECT CARDS ===== */

.capstone-project {
  background: linear-gradient(135deg, #f3e5f5 0%, #fcf5ff 100%);
  border: 2px solid #ce93d8;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}
/* ===== COMPARISON TABLES (Enhanced) ===== */

.comparison-table-wrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.comparison-table thead {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}
.comparison-table th {
  color: white;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.comparison-table th:first-child {
  border-top-left-radius: 12px;
}
.comparison-table th:last-child {
  border-top-right-radius: 12px;
}
.comparison-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.9rem;
  vertical-align: top;
}
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.comparison-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
.comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.comparison-table tbody tr:nth-child(even) {
  background: #fafafa;
}
.comparison-table tbody tr:hover {
  background: #f0f7ff;
}
/* Comparison indicators */
.comparison-good {
  color: #27ae60;
  font-weight: 500;
}
/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .comic-strip {
    grid-template-columns: 1fr;
  }

  .executive-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .lab-step {
    padding-left: 1rem;
    padding-top: 3rem;
  }

  .lab-step-number {
    left: 1rem;
    top: 0.75rem;
  }

  .paper-links {
    flex-direction: column;
  }

  .paper-link {
    justify-content: center;
  }

  .capstone-project-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .case-study-stats {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .kids-panel-header {
    padding: 0.875rem 1rem;
  }

  .kids-panel-body {
    padding: 1rem;
  }

  .executive-summary {
    padding: 1rem;
  }

  .practical-lab {
    padding: 1rem;
  }

  .scholarly-references {
    padding: 1rem;
  }

  .executive-metrics {
    grid-template-columns: 1fr;
  }

  .lab-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}
/* ===== PRINT STYLES ===== */

@media print {
  .kids-panel,
  .executive-summary,
  .practical-lab,
  .scholarly-references,
  .capstone-project {
    break-inside: avoid;
    box-shadow: none;
    border-width: 1px;
  }

  .kids-panel.collapsed .kids-panel-body {
    display: block;
  }

  .paper-links {
    display: none;
  }
}
/* =============================================
   IoT Class - Interactive Features
   Merged from: image-versions.css,
glossary-tooltips.css,
progress-tracker.css,
chapter-quiz.css
   ============================================= */

/* --- Section: Image Version Switcher (was image-versions.css) --- */
/*=====================================
  IMAGE VERSION SWITCHER STYLES
  For selecting between different image versions/sources

  IEEE Color Palette:
  - Navy:   #2C3E50
  - Teal:   #16A085
  - Orange: #E67E22
  - Gray:   #7F8C8D
=====================================*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* IEEE Color Palette */
  --vs-navy: #2c3e50;
  --vs-teal: #16a085;
  --vs-orange: #e67e22;
  --vs-gray: #7f8c8d;

  /* Derived colors */
  --vs-teal-light: #1abc9c;
  --vs-gray-light: #95a5a6;

  /* UI colors */
  --vs-bg: #ffffff;
  --vs-bg-hover: #f8f9fa;
  --vs-border: #e0e0e0;
  --vs-text: #333333;
  --vs-text-muted: #666666;
  --vs-shadow: rgba(0, 0, 0, 0.15);
  --vs-shadow-lg: rgba(0, 0, 0, 0.25);

  /* Animation timing */
  --vs-transition-fast: 0.15s ease;
  --vs-transition: 0.25s ease;
}
/* ===== VERSION SWITCHER BUTTON/ICON ===== */
.version-switcher {
  position: relative;
  display: inline-block;
}
/* Container class used by iotclass-versions.js */
.version-switcher-container {
  position: relative;
}
/* Show button on figure hover */
.version-switcher:hover .version-switcher-trigger,
[id^="fig-"]:hover .version-switcher-trigger,
.version-switcher:hover .version-switcher-btn,
figure:hover .version-switcher-btn,
.quarto-figure:hover .version-switcher-btn,
[id^="fig-"]:hover .version-switcher-btn {
  opacity: 1;
  transform: scale(1);
}
/* Alias for version-switcher-btn (used by iotclass-versions.js) */
.version-switcher-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 4px 8px;
  background: var(--vs-navy);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--vs-transition),
    transform var(--vs-transition),
    background var(--vs-transition-fast);
  box-shadow: 0 2px 8px var(--vs-shadow);
}
.version-switcher-btn:hover {
  background: var(--vs-teal);
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--vs-shadow-lg);
}
.version-switcher-btn:active {
  transform: scale(0.98);
}
.version-switcher-btn:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 160, 133, 0.4),
    0 2px 8px var(--vs-shadow);
}
.version-switcher-btn .version-icon {
  font-size: 14px;
}
.version-switcher-btn .version-count {
  font-size: 11px;
  background: var(--vs-teal);
  padding: 1px 5px;
  border-radius: 10px;
}
/* Button hover state */
.version-switcher-trigger:hover {
  background: var(--vs-teal);
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--vs-shadow-lg);
}
/* Button active/pressed state */
.version-switcher-trigger:active {
  transform: scale(0.98);
}
/* Button focus state for accessibility */
.version-switcher-trigger:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 160, 133, 0.4),
    0 2px 8px var(--vs-shadow);
}
/* Version switcher icon (layers/stack icon using CSS) */
.version-switcher-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: 14px;
  height: 12px;
}
/* Alternative: Unicode icon */
.version-switcher-trigger[data-icon="layers"]::before {
  content: "\229E"; /* Squared plus */
  font-size: 16px;
  line-height: 1;
}
/* Version count badge */
.version-switcher-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
/* ===== VERSION DROPDOWN PANEL ===== */
.version-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;

  min-width: 280px;
  max-width: 380px;
  max-height: 400px;

  margin-top: 8px;

  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: 8px;

  box-shadow: 0 8px 24px var(--vs-shadow-lg);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--vs-transition),
    visibility var(--vs-transition),
    transform var(--vs-transition);

  overflow: hidden;
}
/* Show dropdown when active */
.version-switcher.is-open .version-switcher-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Dropdown header */
.version-switcher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  background: var(--vs-navy);
  color: #ffffff;

  font-weight: 600;
  font-size: 14px;
}
/* Dropdown body/content */
.version-switcher-body {
  max-height: 320px;
  padding: 12px;
  overflow-y: auto;
}
/* Scrollbar styling for dropdown */
.version-switcher-body::-webkit-scrollbar {
  width: 6px;
}
/* ===== VERSION LIST ===== */
.version-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 6px;

  list-style: none;
  margin: 0;
  padding: 0;
}
/* Version item */
.version-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;

  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: 6px;

  cursor: pointer;
  transition:
    background var(--vs-transition-fast),
    border-color var(--vs-transition-fast),
    transform var(--vs-transition-fast);
}
/* Selected/current version */
.version-switcher-item.is-current,
.version-switcher-item.is-selected {
  background: #e8f6f3;
  border-color: var(--vs-teal);
}
.version-switcher-item.is-selected:hover {
  background: #d4ede8;
}
/* Radio input (hidden visually but accessible) */
.version-switcher-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Custom radio indicator */
.version-switcher-radio {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  flex-shrink: 0;

  background: #ffffff;
  border: 2px solid var(--vs-border);
  border-radius: 50%;

  transition:
    border-color var(--vs-transition-fast),
    background var(--vs-transition-fast);
}
.version-switcher-item.is-selected .version-switcher-radio {
  border-color: var(--vs-teal);
  background: var(--vs-teal);
}
.version-switcher-item.is-selected .version-switcher-radio::after {
  opacity: 1;
  transform: scale(1);
}
/* Version item content */
.version-switcher-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* ===== VERSION TYPE BADGES ===== */
.version-switcher-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 3px 8px;

  border-radius: 4px;

  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  white-space: nowrap;
  flex-shrink: 0;
}
/* Original image badge - Navy */
.version-switcher-badge--original {
  background: rgba(44, 62, 80, 0.15);
  color: var(--vs-navy);
}
/* Mermaid SVG badge - Teal */
.version-switcher-badge--mermaid {
  background: rgba(22, 160, 133, 0.15);
  color: var(--vs-teal);
}
/* DrawIO badge - Orange */
.version-switcher-badge--drawio {
  background: rgba(230, 126, 34, 0.15);
  color: var(--vs-orange);
}
/* Academic source badge - Gray */
.version-switcher-badge--academic {
  background: rgba(127, 140, 141, 0.15);
  color: var(--vs-gray);
}
/* SVG badge */
.version-switcher-badge--svg {
  background: rgba(155, 89, 182, 0.15);
  color: #8e44ad;
}
/* PNG/JPG badge */
.version-switcher-badge--raster {
  background: rgba(52, 152, 219, 0.15);
  color: #2980b9;
}
/* Badge with icon */
.version-switcher-badge-icon {
  font-size: 11px;
  line-height: 1;
}
/* ===== VERSION SECTION GROUPS ===== */
.version-switcher-section {
  margin-bottom: 16px;
}
/* ===== DROPDOWN FOOTER/ACTIONS ===== */
.version-switcher-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 12px 16px;

  border-top: 1px solid var(--vs-border);
  background: var(--vs-bg-hover);
}
/* ===== CURRENT VERSION INDICATOR ===== */
.version-switcher-current {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;

  background: rgba(22, 160, 133, 0.1);
  border-radius: 4px;

  font-size: 11px;
  color: var(--vs-teal);
}
/* ===== BACKDROP FOR MODAL BEHAVIOR ===== */
.version-switcher-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 999;

  background: rgba(0, 0, 0, 0.3);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--vs-transition),
    visibility var(--vs-transition);
}
.version-switcher-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}
/* Version switcher animations */
@keyframes versionSwitcherFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes versionSwitcherSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Transition state for image switching */
.version-switcher-transition img {
  transition: opacity 300ms ease;
}
/* ===== PREVIEW THUMBNAIL ===== */
.version-switcher-preview {
  width: 48px;
  height: 36px;
  flex-shrink: 0;

  border-radius: 4px;
  overflow: hidden;

  background: var(--vs-bg-hover);
  border: 1px solid var(--vs-border);
}
.version-switcher-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.version-switcher-preview--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--vs-gray-light);
  font-size: 16px;
}
/* ===== RESPONSIVE DESIGN ===== */

/* Tablet and below */
@media (max-width: 768px) {
  .version-switcher-trigger {
    min-width: 40px;
    height: 40px;
    padding: 8px 10px;

    /* Always visible on mobile for better discoverability */
    opacity: 0.85;
    transform: scale(1);
  }

  .version-switcher-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;

    min-width: 100%;
    max-width: 100%;
    max-height: 70vh;

    margin-top: 0;
    border-radius: 16px 16px 0 0;

    transform: translateY(100%);
  }

  .version-switcher.is-open .version-switcher-dropdown,
  .version-switcher-dropdown.is-visible {
    transform: translateY(0);
  }

  .version-switcher-header {
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
  }

  .version-switcher-body {
    padding: 16px;
    max-height: calc(70vh - 140px);
  }

  .version-switcher-item {
    padding: 14px 16px;

    /* Touch-friendly target size (44px minimum) */
    min-height: 54px;
  }

  .version-switcher-footer {
    padding: 16px 20px;
  }

  .version-switcher-apply {
    flex: 1;
    padding: 12px 20px;
    font-size: 14px;
  }
}
/* Small mobile */
@media (max-width: 480px) {
  .version-switcher-trigger {
    top: 4px;
    right: 4px;
    min-width: 36px;
    height: 36px;
  }

  .version-switcher-count {
    display: none;
  }

  .version-switcher-dropdown {
    max-height: 80vh;
  }

  .version-switcher-item {
    gap: 8px;
  }

  .version-switcher-preview {
    width: 40px;
    height: 30px;
  }

  .version-switcher-badge {
    padding: 2px 6px;
    font-size: 9px;
  }
}
/* ===== INTEGRATION WITH QUARTO FIGURES ===== */

/* Ensure figure container can hold positioned elements */
figure.version-switcher,
[id^="fig-"].version-switcher {
  position: relative;
}
/* Style adjustments for figures with version switcher */
figure.version-switcher img {
  transition: opacity var(--vs-transition);
}
/* Loading spinner overlay */
.version-switcher-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: none;

  width: 32px;
  height: 32px;

  border: 3px solid var(--vs-border);
  border-top-color: var(--vs-teal);
  border-radius: 50%;

  animation: vs-spin 0.8s linear infinite;
}
figure.version-switcher.is-loading .version-switcher-loading {
  display: block;
}

@keyframes vs-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ===== PRINT STYLES ===== */
@media print {
  .version-switcher-trigger,
  .version-switcher-dropdown,
  .version-switcher-backdrop {
    display: none !important;
  }
}
/* ===== ANIMATION KEYFRAMES ===== */
@keyframes vs-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vs-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== UTILITY CLASSES ===== */
.version-switcher--compact .version-switcher-trigger {
  min-width: 28px;
  height: 28px;
  padding: 4px 6px;
  font-size: 12px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
  .version-switcher-trigger {
    border: 2px solid #ffffff;
  }

  .version-switcher-item {
    border-width: 2px;
  }

  .version-switcher-item.is-current,
  .version-switcher-item.is-selected {
    border-width: 3px;
  }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .version-switcher-trigger,
  .version-switcher-dropdown,
  .version-switcher-item,
  .version-switcher-backdrop,
  .version-switcher-radio::after {
    transition: none;
  }

  .version-switcher-loading {
    animation: none;
  }
}
/* ===== VERSION SWITCHER PANEL (used by iotclass-versions.js) ===== */
.version-switcher-panel {
  position: fixed;
  z-index: 10000;
  min-width: 280px;
  max-width: 380px;
  max-height: 70vh;
  background: var(--vs-bg, #ffffff);
  border: 1px solid var(--vs-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
.version-switcher-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--vs-navy, #2c3e50);
  color: #ffffff;
}
.version-switcher-panel .panel-title {
  font-weight: 600;
  font-size: 14px;
}
.version-switcher-panel .panel-close {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.version-switcher-panel .panel-close:hover {
  opacity: 1;
}
.version-switcher-panel .panel-info {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vs-border, #e0e0e0);
  font-size: 12px;
  color: var(--vs-text-muted, #666666);
}
.version-switcher-panel .panel-info strong {
  color: var(--vs-text, #333333);
  word-break: break-word;
}
.version-switcher-panel .panel-options {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}
.version-switcher-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  border: 2px solid transparent;
}
.version-switcher-option:hover {
  background: var(--vs-bg-hover, #f8f9fa);
}
.version-switcher-option--selected {
  background: rgba(22, 160, 133, 0.1);
  border-color: var(--vs-teal, #16a085);
}
.version-switcher-option .option-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.version-switcher-option .option-content {
  flex: 1;
  min-width: 0;
}
.version-switcher-option .option-label {
  font-weight: 500;
  font-size: 13px;
  color: var(--vs-text, #333333);
  display: block;
}
.version-switcher-option .option-description {
  font-size: 11px;
  color: var(--vs-text-muted, #666666);
  display: block;
  margin-top: 2px;
}
.version-switcher-option .option-preview {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--vs-border, #e0e0e0);
  flex-shrink: 0;
}
.version-switcher-option .option-check {
  color: var(--vs-teal, #16a085);
  font-size: 16px;
  flex-shrink: 0;
}
.version-switcher-panel .panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--vs-border, #e0e0e0);
  display: flex;
  justify-content: flex-end;
}
.version-switcher-panel .panel-reset {
  background: transparent;
  border: 1px solid var(--vs-border, #e0e0e0);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--vs-text-muted, #666666);
  transition: all 0.15s;
}
.version-switcher-panel .panel-reset:hover {
  background: var(--vs-bg-hover, #f8f9fa);
  color: var(--vs-text, #333333);
}
/* Backdrop for modal-like behavior */
.version-switcher-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
/* --- Section: Glossary Tooltips (was glossary-tooltips.css) --- */
/**
 * Glossary Tooltip Styles
 * Interactive hover definitions for IoT terminology
 */

/* Glossary term styling - underline indicates clickable/hoverable */
.glossary-term {
  border-bottom: 1px dotted #16a085;
  cursor: help;
  color: inherit;
  transition: border-color 0.2s ease;
}
.glossary-term:hover,
.glossary-term:focus {
  border-bottom-color: #e67e22;
  outline: none;
}
/* Tooltip container */
.glossary-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 320px;
  padding: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e5e5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none;
}
.glossary-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Tooltip header */
.glossary-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 8px 8px 0 0;
}
.glossary-tooltip-term {
  font-weight: bold;
  color: white;
  font-size: 14px;
}
.glossary-tooltip-link {
  font-size: 11px;
  color: #85c1e9;
  text-decoration: none;
  transition: color 0.2s ease;
}
.glossary-tooltip-link:hover {
  color: white;
  text-decoration: underline;
}
/* Tooltip content */
.glossary-tooltip-definition {
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #2c3e50;
  border-bottom: 1px solid #e5e5e5;
}
.glossary-tooltip-simple {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
  background: #f8f9fa;
  border-radius: 0 0 8px 8px;
}
.glossary-tooltip-simple::before {
  content: "In simple terms: ";
  font-weight: 600;
  color: #16a085;
}
/* Mobile adjustments */
@media (max-width: 768px) {
  .glossary-tooltip {
    max-width: 280px;
    left: 10px !important;
    right: 10px;
  }
}
/* Print - hide tooltips */
@media print {
  .glossary-tooltip {
    display: none !important;
  }

  .glossary-term {
    border-bottom: none;
  }
}
/* --- Section: Progress Tracker (was progress-tracker.css) --- */
/**
 * Progress Tracker Styles
 * Styling for learning progress,
milestones,
and achievements
 */

/* Progress Badge */
.progress-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  background: var(--flat-surface, #ffffff);
  color: #0f5f55;
  padding: 4px 10px;
  border-radius: var(--flat-radius-md, 6px);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
  margin-left: 10px;
}
.progress-badge:hover,
.progress-badge:focus-visible {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-control-hover, #e7ebf0);
  outline: none;
}
.progress-score {
  font-size: 14px;
}
.progress-label {
  font-size: 10px;
  opacity: 0.9;
}
/* Milestone Notification */
.milestone-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 1px solid #d8a15f;
  background: #fff5e8;
  color: #7a4a12;
  padding: 15px 20px;
  border-radius: var(--flat-radius-lg, 8px);
  display: flex;
  align-items: center;
  gap: 15px;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  z-index: 10000;
}
.milestone-notification.show {
  transform: translateX(0);
}
.milestone-icon {
  font-size: 32px;
}
.milestone-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}
.milestone-name {
  font-size: 16px;
  font-weight: bold;
  margin: 3px 0;
}
.milestone-desc {
  font-size: 12px;
  opacity: 0.9;
}
/* Progress Modal */
.progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.progress-modal-content {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  padding: 1.5rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.progress-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
  font-size: 20px;
  cursor: pointer;
  color: var(--flat-text-muted, #475774);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.progress-modal-close:hover,
.progress-modal-close:focus-visible {
  background: var(--flat-control-hover, #e7ebf0);
  color: var(--flat-text, #21242c);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.progress-modal h3 {
  margin: 0 0 20px 0;
  color: var(--flat-text, #21242c);
  font-size: 22px;
}
.progress-modal h4 {
  margin: 20px 0 15px 0;
  color: var(--flat-text, #21242c);
  font-size: 16px;
}
/* Progress Stats Grid */
.progress-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}
/* Milestone List */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.milestone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff5e8;
  padding: 12px 15px;
  border: 1px solid #d8a15f;
  border-radius: var(--flat-radius-md, 6px);
}
.milestone-info {
  flex: 1;
}
.milestone-info strong {
  color: var(--flat-text, #21242c);
}
.milestone-info small {
  color: var(--flat-text-muted, #475774);
}
/* Progress Footer */
.progress-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progress-footer small {
  color: var(--flat-text-muted, #475774);
}
.progress-reset {
  background: #ffffff;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  padding: 6px 12px;
  border-radius: var(--flat-radius-md, 6px);
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.progress-reset:hover,
.progress-reset:focus-visible {
  background: #e74c3c;
  color: white;
  outline: none;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
  .progress-badge {
    padding: 3px 8px;
    font-size: 11px;
  }

  .milestone-notification {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .progress-modal-content {
    padding: 20px;
    margin: 10px;
  }

  .progress-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-value {
    font-size: 24px;
  }
}
/* --- Section: Chapter Quiz (was chapter-quiz.css) --- */
/**
 * Chapter Quiz Styles
 * Comprehensive styling for multi-question chapter quizzes
 */

/* Main Container */
.chapter-quiz {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
/* Header */
.cq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 12px;
  color: white;
  margin-bottom: 30px;
}
.cq-title h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
}
.cq-description {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}
.cq-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  min-width: 100px;
  justify-content: center;
}
.cq-timer-warning {
  animation: pulse-timer 1s ease-in-out infinite;
}

@keyframes pulse-timer {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.cq-timer-icon {
  font-size: 24px;
}
/* Progress Bar */
.cq-progress-container {
  margin-bottom: 30px;
}
.cq-progress-bar {
  width: 100%;
  height: 8px;
  background: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a085 0%, #27ae60 100%);
  transition: width 0.3s ease;
}
.cq-progress-text {
  text-align: center;
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 600;
}
/* Question Container */
.cq-question-container {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.cq-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
}
.cq-question-number {
  font-size: 14px;
  font-weight: 600;
  color: #16a085;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-flag-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid #ecf0f1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #7f8c8d;
  transition: all 0.2s;
}
.cq-flag-button:hover {
  border-color: #3498db;
  color: #3498db;
}
.cq-flag-icon {
  font-size: 16px;
}
.cq-question-text {
  font-size: 18px;
  color: #2c3e50;
  line-height: 1.6;
  margin-bottom: 25px;
}
/* Options */
.cq-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cq-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: 16px;
  position: relative;
}
.cq-option:hover {
  border-color: #16a085;
  background: #e8f6f3;
}
.cq-option.cq-selected {
  border-color: #16a085;
  background: #d5f4e6;
}
.cq-option-letter {
  width: 36px;
  height: 36px;
  background: #ecf0f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #2c3e50;
  flex-shrink: 0;
}
.cq-selected .cq-option-letter {
  background: #16a085;
  color: white;
}
.cq-option-text {
  flex: 1;
}
.cq-option-check {
  opacity: 0;
  color: #16a085;
  font-size: 20px;
  transition: opacity 0.2s;
}
.cq-selected .cq-option-check {
  opacity: 1;
}
/* Navigation */
.cq-navigation {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}
.cq-nav-button {
  padding: 12px 30px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s;
}
.cq-nav-button:hover:not(:disabled) {
  background: #1a252f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.cq-nav-button:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.5;
}
.cq-nav-button.cq-submit {
  background: #27ae60;
}
.cq-nav-button.cq-submit:hover {
  background: #229954;
}
.cq-nav-button.cq-review {
  background: #3498db;
}
.cq-nav-button.cq-review:hover {
  background: #2874a6;
}
.cq-nav-button.cq-retry {
  background: #e67e22;
}
.cq-nav-button.cq-retry:hover {
  background: #d68910;
}
/* Question Navigator */
.cq-question-navigator {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cq-nav-title {
  font-size: 14px;
  font-weight: 600;
  color: #7f8c8d;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  gap: 10px;
}
.cq-nav-number {
  width: 45px;
  height: 45px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #7f8c8d;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}
.cq-nav-number:hover {
  border-color: #16a085;
  background: #e8f6f3;
}
.cq-nav-number.cq-current {
  border-color: #2c3e50;
  background: #2c3e50;
  color: white;
}
.cq-nav-number.cq-answered {
  border-color: #16a085;
  background: #d5f4e6;
  color: #16a085;
}
.cq-nav-number.cq-flagged {
  position: relative;
}
.cq-nav-number.cq-flagged::after {
  content: "🚩";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
}
/* Review Screen */
.cq-review {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cq-review h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}
.cq-review p {
  color: #7f8c8d;
  margin-bottom: 30px;
}
.cq-review-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}
.cq-review-stat {
  text-align: center;
}
.cq-review-stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #16a085;
  margin-bottom: 5px;
}
.cq-review-stat-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-review-warning {
  padding: 15px 20px;
  background: #fef5e7;
  border-left: 4px solid #e67e22;
  border-radius: 4px;
  margin-bottom: 25px;
  color: #a04000;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cq-warning-icon {
  font-size: 24px;
}
.cq-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}
.cq-review-item {
  padding: 20px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.cq-review-item:hover {
  border-color: #16a085;
  background: #e8f6f3;
}
.cq-review-item.cq-unanswered {
  border-color: #e67e22;
  background: #fef5e7;
}
.cq-review-item.cq-flagged {
  border-color: #3498db;
  background: #ebf5fb;
}
.cq-review-item-number {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}
.cq-review-item-status {
  font-size: 14px;
  color: #7f8c8d;
}
.cq-review-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}
/* Results */
.cq-results {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.cq-results-header {
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 40px;
}
.cq-results-header.cq-passed {
  background: linear-gradient(135deg, #d5f4e6 0%, #a9dfbf 100%);
}
.cq-results-header.cq-failed {
  background: linear-gradient(135deg, #fef5e7 0%, #fad7a0 100%);
}
.cq-results-icon {
  font-size: 64px;
  margin-bottom: 20px;
}
.cq-results-header h2 {
  margin: 0 0 10px 0;
  font-size: 32px;
  color: #2c3e50;
}
.cq-results-header p {
  margin: 0;
  font-size: 16px;
  color: #7f8c8d;
}
.cq-results-score {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}
.cq-results-score-circle {
  position: relative;
  width: 200px;
  height: 200px;
}
.cq-results-score-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cq-results-score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.cq-results-percentage {
  font-size: 48px;
  font-weight: bold;
  color: #2c3e50;
}
.cq-results-fraction {
  font-size: 18px;
  color: #7f8c8d;
}
.cq-results-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.cq-results-stat {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}
.cq-results-stat-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.cq-results-stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}
.cq-results-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Detailed Review */
.cq-detailed-review {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cq-detailed-review h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}
.cq-detailed-review p {
  color: #7f8c8d;
  margin-bottom: 30px;
}
.cq-review-questions {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
}
.cq-review-question {
  padding: 25px;
  border-radius: 12px;
  border: 2px solid #ecf0f1;
}
.cq-review-question.cq-correct {
  border-color: #27ae60;
  background: #d5f4e6;
}
.cq-review-question.cq-incorrect {
  border-color: #e74c3c;
  background: #fadbd8;
}
.cq-review-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.cq-review-question-number {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-review-question-result {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}
.cq-review-question-result.cq-correct {
  background: #27ae60;
  color: white;
}
.cq-review-question-result.cq-incorrect {
  background: #e74c3c;
  color: white;
}
.cq-review-question-text {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 20px;
  line-height: 1.6;
}
.cq-review-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.cq-review-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
}
.cq-review-option.cq-correct-answer {
  border-color: #27ae60;
  background: #d5f4e6;
}
.cq-review-option.cq-user-answer:not(.cq-correct-answer) {
  border-color: #e74c3c;
  background: #fadbd8;
}
.cq-option-badge {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.cq-option-badge.cq-right {
  background: #27ae60;
  color: white;
}
.cq-option-badge.cq-wrong {
  background: #e74c3c;
  color: white;
}
.cq-review-explanation {
  padding: 15px;
  background: #fef9e7;
  border-radius: 8px;
  border-left: 4px solid #f39c12;
  font-size: 14px;
  color: #5d4037;
  line-height: 1.6;
}
/* Max Attempts */
.cq-max-attempts {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.cq-max-attempts-icon {
  font-size: 72px;
  margin-bottom: 20px;
}
.cq-max-attempts h2 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}
.cq-max-attempts p {
  color: #7f8c8d;
  margin-bottom: 30px;
}
/* Responsive Design */
@media (max-width: 768px) {
  .chapter-quiz {
    padding: 10px;
  }

  .cq-header {
    flex-direction: column;
    gap: 20px;
  }

  .cq-timer {
    width: 100%;
  }

  .cq-question-container {
    padding: 20px;
  }

  .cq-navigation {
    flex-direction: column;
  }

  .cq-nav-button {
    width: 100%;
  }

  .cq-nav-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
  }

  .cq-nav-number {
    width: 40px;
    height: 40px;
  }

  .cq-results-stats,
  .cq-review-stats {
    grid-template-columns: 1fr 1fr;
  }

  .cq-results-actions,
  .cq-review-actions {
    flex-direction: column;
  }

  .cq-results-actions .cq-nav-button,
  .cq-review-actions .cq-nav-button {
    width: 100%;
  }
}
/* Print Styles */
@media print {
  .cq-timer,
  .cq-navigation,
  .cq-question-navigator,
  .cq-flag-button,
  .cq-results-actions,
  .cq-review-actions {
    display: none !important;
  }

  .chapter-quiz {
    max-width: 100%;
  }

  .cq-header {
    background: white;
    color: black;
    border: 1px solid #ecf0f1;
  }
}
/**
 * IoT Class Feedback & Progress Tracking Styles
 */

/* === FEEDBACK SECTION === */

.iotclass-feedback-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
}
.feedback-container h4,
.feedback-heading {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}
.feedback-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.feedback-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}
.feedback-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.feedback-btn.feedback-up:hover,
.feedback-btn.feedback-up.selected {
  border-color: #16a085;
  background: #e8f8f5;
}
.feedback-btn.feedback-down:hover,
.feedback-btn.feedback-down.selected {
  border-color: #e67e22;
  background: #fef5e7;
}
.feedback-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.feedback-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}
.feedback-label {
  font-size: 0.85rem;
  color: #666;
}
.feedback-comment-section {
  margin-top: 1rem;
}
.feedback-comment-section textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}
.feedback-comment-section textarea:focus {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}
.feedback-submit-btn {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.feedback-submit-btn:hover {
  background: #138d75;
}
.feedback-thanks {
  text-align: center;
  color: #16a085;
  font-weight: 500;
  padding: 1rem;
  background: #e8f8f5;
  border-radius: 8px;
}
/* === PROGRESS TRACKING (now at bottom of page) === */

.iotclass-progress-check {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.progress-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  font-size: 0.9rem;
  color: #666;
  transition: all 0.2s;
}
.progress-checkbox-label:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
.progress-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #16a085;
}
.progress-checkbox:checked + .progress-checkbox-text {
  color: #16a085;
  font-weight: 500;
}
.iotclass-progress-check.progress-saved .progress-checkbox-label {
  background: #e8f8f5;
  border-color: #16a085;
}
/* === ADMIN LINK === */

.iotclass-admin-link {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.admin-link-btn,
.admin-logout-btn {
  font-size: 0.85rem;
  color: #666;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  transition: all 0.2s;
}
.admin-link-btn:hover {
  background: #f8f9fa;
  color: #2c3e50;
}
.admin-logout-btn:hover {
  background: #fee;
  color: #c00;
}
/* === ADMIN MODAL === */

.iotclass-admin-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
.admin-modal-content {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #2c3e50;
  color: white;
}
.admin-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}
.admin-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.admin-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
}
.admin-loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}
/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card.stat-up {
  background: #e8f8f5;
}
.stat-card.stat-down {
  background: #fef5e7;
}
.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
}
/* Feedback List */
.admin-feedback-list {
  margin-top: 1.5rem;
}
.admin-feedback-list h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}
.feedback-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.feedback-item.up {
  border-left: 3px solid #16a085;
}
.feedback-item.down {
  border-left: 3px solid #e67e22;
}
.feedback-vote {
  font-size: 1.2rem;
}
.feedback-chapter {
  font-weight: 500;
  color: #2c3e50;
}
.feedback-comment {
  flex: 1;
  color: #666;
  font-style: italic;
}
.feedback-time {
  font-size: 0.8rem;
  color: #999;
}
.comment-status.status-resolved {
  background: #28a745;
  color: white;
}
/* Error message */
.feedback-error {
  background: #f8d7da;
  color: #721c24;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  text-align: center;
}
/* Feedback actions row */
.feedback-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.feedback-cancel-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.feedback-cancel-btn:hover {
  background: #5a6268;
}
/* Admin login form */
.admin-login-form {
  text-align: center;
}
.admin-login-form p {
  margin-bottom: 1rem;
  color: #666;
}
.admin-username-input,
.admin-password-input {
  width: 100%;
  max-width: 300px;
  padding: 0.75rem 1rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.admin-username-input:focus,
.admin-password-input:focus {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}
.admin-login-actions {
  margin-top: 1rem;
}
.admin-login-submit {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.admin-login-submit:hover {
  background: #138d75;
}
.admin-login-submit:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}
/* Admin error */
.admin-error {
  text-align: center;
  padding: 2rem;
  color: #721c24;
}
/* Empty message */
.empty-message {
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}
/* Admin footer */
.admin-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  text-align: center;
  color: #999;
}
/* === RESPONSIVE === */

@media (max-width: 600px) {
  .feedback-buttons {
    flex-direction: column;
    align-items: center;
  }

  .feedback-btn {
    width: 100%;
    max-width: 200px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-modal-content {
    max-height: 100vh;
    border-radius: 0;
  }
}
/* === SECTION-LEVEL FEEDBACK (Hover Popup System) === */

/* Trigger icon that appears on section headers */
.section-feedback-trigger {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  vertical-align: middle;
}
/* Show trigger on header hover */
h2:hover .section-feedback-trigger,
h3:hover .section-feedback-trigger,
h4:hover .section-feedback-trigger,
h5:hover .section-feedback-trigger,
.section-feedback-trigger:hover {
  opacity: 1;
}
.trigger-icon {
  font-size: 0.85em;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  transition: all 0.15s ease;
}
.trigger-icon:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
.trigger-icon.trigger-done {
  background: #e8f8f5;
  border-color: #16a085;
  color: #16a085;
  opacity: 0.7;
}
/* Feedback popup panel */
.section-feedback-popup {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  z-index: 10000;
  min-width: 160px;
}
.popup-header {
  font-size: 0.75rem;
  color: #666;
  text-align: center;
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid #eee;
}
.popup-actions {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}
.popup-btn {
  background: none;
  border: 1px solid transparent;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  line-height: 1;
}
.popup-btn:hover {
  background: #f0f0f0;
  border-color: #ddd;
  transform: scale(1.1);
}
.popup-up:hover {
  background: #e8f8f5;
  border-color: #16a085;
}
.popup-down:hover {
  background: #fef5e7;
  border-color: #e67e22;
}
.popup-star:hover {
  background: #fff8e1;
  border-color: #f9a825;
}
.popup-comment:hover {
  background: #e3f2fd;
  border-color: #2196f3;
}
/* Star rating popup */
.star-rating-popup {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  z-index: 1000;
  min-width: 250px;
  margin-top: 0.5rem;
}
.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}
.rating-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
.rating-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #555;
}
.star-rating {
  display: flex;
  gap: 0.15rem;
}
.star-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #ddd;
  transition:
    color 0.1s,
    transform 0.1s;
  padding: 0;
  line-height: 1;
}
.star-btn:hover {
  transform: scale(1.2);
}
.star-btn.active,
.star-btn:hover,
.star-rating:hover .star-btn {
  color: #f9a825;
}
.star-rating .star-btn:hover ~ .star-btn {
  color: #ddd;
}
/* Section comment modal */
.section-comment-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
.section-comment-cancel {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.section-comment-cancel:hover {
  background: #5a6268;
}
.section-comment-submit {
  background: #e67e22;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.section-comment-submit:hover {
  background: #d35400;
}
.section-comment-submit:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}
/* Vote count badges */
.vote-count {
  font-size: 0.75rem;
  color: #999;
  margin-left: -0.2rem;
}
/* Section feedback submitted state */
.section-feedback.submitted {
  opacity: 0.8;
}
/* === CHAPTER RATING GRID === */

.chapter-rating-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.chapter-rating-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.chapter-rating-item .rating-label {
  font-size: 0.9rem;
  color: #555;
}
.chapter-star-rating {
  display: flex;
  gap: 0.25rem;
}
.chapter-star-rating .star-btn {
  font-size: 1.5rem;
}
/* === MODAL ACTION BUTTONS === */

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.btn-primary {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.btn-primary:hover {
  background: #138d75;
}
.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.btn-secondary:hover {
  background: #5a6268;
}
/* Section feedback done state */
.section-feedback-done {
  color: #16a085;
  font-size: 0.9rem;
  font-weight: bold;
}
/* Rating comment in modal */
.rating-comment {
  margin-top: 0.75rem;
}
.rating-comment-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.rating-comment-input:focus {
  outline: none;
  border-color: #16a085;
}
/* Section comment form in modal */
.section-comment-form p {
  margin: 0 0 0.75rem 0;
  color: #555;
}
.section-comment-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}
.section-comment-input:focus {
  outline: none;
  border-color: #e67e22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}
/* Admin login error */
.admin-login-error {
  color: #dc3545;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem;
  margin: 0.5rem 0;
}
/* Admin stats section */
.admin-stats h3,
.admin-feedback-list h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}
.feedback-section {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
}
/* === MODULE INFO BAR (replaces user status bar) === */

/* CLS fix (register B4 "Remaining", closed 2026-07-28). .iotclass-user-status
 * is built and inserted as document.body.firstChild by assets/js/
 * iotclass-ui.js's initUserStatusBar() -- client-side, well after first
 * paint -- 0.165 CLS on its own, the single biggest post-B4 layout-shift
 * source. Unlike #last-edited-banner (B4's own fix, below), there is no
 * Quarto include-before-body hook available in this territory to pre-place
 * real markup: that lives in assets/*.html + scripts/generate-book-
 * configs.py, both outside style/** and assets/js/iotclass-ui.js. So the
 * reservation is a body::before box instead of pre-placed markup, removed
 * the instant a real .iotclass-user-status exists as body's own child.
 * body:has(> .iotclass-user-status) is a *live* selector, so:
 *   - client-side (the common path): the JS still creates+inserts the bar in
 *     one synchronous call, same as before; the reservation and the real bar
 *     never coexist in a rendered frame, so no shift is ever painted.
 *   - scripts/serve.sh's local-dev-only server-side injection (rule 9c,
 *     outside this territory): the real bar already exists at first paint,
 *     so :has() removes the reservation immediately too, before it would
 *     ever have been visible -- no double-height flash.
 * Height is measured (Playwright, chromium, 2026-07-28), not derived from
 * padding/line-height tokens the way #last-edited-banner's is: this row's
 * height is set by its tallest flex child (search button, badge, admin
 * Dashboard/Logout buttons -- each with its own padding), which doesn't
 * reduce to a single font-size/line-height calc(), and is IDENTICAL across
 * all three auth states (guest/reader/admin change badge content, not row
 * height). Two tiers, matching the component's own max-width:767px
 * breakpoint: desktop/tablet measured 47.6-49.4px depending on whether
 * assets/js/toc-mobile-toggle.js's inline "Contents" button is present
 * (BREAKPOINT=992, outside this territory) -- 50px covers both. Below
 * 767px that same inline button plus the left-side module name no longer
 * fit on one line and the row wraps to two -- measured 60.2px at 375px
 * width; 61px covers it. Re-measure if this row's own content changes. */
body:not(.iotclass-homepage):not(.iotclass-modules-landing)::before {
  content: "";
  display: block;
  height: 50px;
}
@media (max-width: 767px) {
  body:not(.iotclass-homepage):not(.iotclass-modules-landing)::before {
    height: 61px;
  }
}
/* The hide rule repeats both :not() exclusions from the reservation rule
 * above -- not for their logical effect (a page with a real
 * .iotclass-user-status is never body.iotclass-homepage/-modules-landing
 * anyway, both of which hide that element outright), but because CSS
 * specificity is compared bucket-by-bucket, and two :not()s are worth two
 * class-level points: body:has(...)::before alone is (0,1,2), weaker than
 * the reservation rule's (0,2,2), so it silently lost every time despite
 * appearing later in the file -- measured, not assumed: CLS was still 0.126
 * at 375px with the reservation and the real bar both rendering stacked on
 * top of each other, permanently, until this was corrected to (0,3,2). */
body:has(> .iotclass-user-status):not(.iotclass-homepage):not(.iotclass-modules-landing)::before {
  content: none;
  display: none;
}

.iotclass-user-status {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #2c3e50;
  color: white;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* CLS fix (register B4 "Remaining", 2026-07-28): min-height matches the
   * body::before reservation above (50/61px). Without it, this row still
   * shifted after insertion -- measured 0.084 combined CLS at 375px from two
   * further steps: it briefly renders shorter right after
   * document.body.insertBefore() (~37px, before its own content settles),
   * then assets/js/toc-mobile-toggle.js (BREAKPOINT=992, a separate script,
   * outside this territory) inserts its inline "Contents" button into
   * .module-bar-right some tens of ms later, growing the row to its final
   * height. min-height forces the box to its final size from the instant it
   * exists, independent of when either script's content actually lands in
   * it. */
  min-height: 50px;
}
@media (max-width: 767px) {
  .iotclass-user-status {
    min-height: 61px;
  }
}
.user-status-content {
  max-width: 1840px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
/* Left side: home link + logo + module name */
.module-bar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.module-bar-home {
  color: inherit !important;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s;
}
.module-bar-home:hover {
  opacity: 0.85;
  color: inherit !important;
  text-decoration: none;
}
/* Sidebar toggle button in the module bar */
.module-bar-sidebar-toggle {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  line-height: 1;
}
.module-bar-sidebar-toggle:hover {
  opacity: 1;
}
/* Search button in the module bar */
.module-bar-search {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.module-bar-search:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.module-bar-search kbd {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  font-family: inherit;
  color: inherit !important;
}
.module-bar-search .bi {
  font-size: 0.85rem;
}
.iotclass-user-status .module-bar-search,
.iotclass-user-status .module-bar-search .module-bar-search-label {
  color: #1f2933 !important;
}
.iotclass-user-status .module-bar-search {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
}
.iotclass-user-status .module-bar-search:hover,
.iotclass-user-status .module-bar-search:focus-visible {
  background: #f8fafc !important;
  color: #111827 !important;
}
.iotclass-user-status .module-bar-search .bi,
.iotclass-user-status .module-bar-search kbd {
  color: #1f2933 !important;
}
.iotclass-user-status .module-bar-search kbd {
  background: #eef2f7 !important;
  border-color: #cbd5e1 !important;
}
.iotclass-user-status .user-status-badge {
  background: #ffffff !important;
  color: #1f2933 !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 999px !important;
  padding: 0.18rem 0.55rem !important;
}
.iotclass-user-status .user-status-badge .status-icon,
.iotclass-user-status .user-status-badge .status-text,
.iotclass-user-status .user-status-badge .status-text strong {
  color: #1f2933 !important;
}
.module-bar-separator {
  opacity: 0.35;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.module-bar-logo {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.module-bar-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Right side: user badge + actions */
.module-bar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.user-status-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.status-icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.status-text {
  color: inherit;
  opacity: 1;
}
.status-text strong {
  color: #f1c40f;
}
.user-id {
  font-family: monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}
.admin-badge .status-text {
  color: #f1c40f;
}
.admin-badge .status-text strong {
  color: #f1c40f;
}
.reader-badge .status-text {
  opacity: 1;
}
.guest-badge .status-text {
  opacity: 1;
  font-style: italic;
}

@media (max-width: 640px) {
  .iotclass-user-status {
    padding: 0.4rem 0.75rem;
  }

  .user-status-content {
    gap: 0.5rem;
  }

  .module-bar-right {
    gap: 0.35rem;
  }

  .module-bar-search {
    padding: 0.25rem 0.5rem;
    gap: 0.3rem;
  }

  .module-bar-search kbd {
    display: none;
  }
}

@media (max-width: 480px) {
  .module-bar-home {
    font-size: 0.8rem;
  }

  .guest-badge .status-text {
    display: none;
  }
}
.user-status-actions {
  display: flex;
  gap: 0.5rem;
}
.status-btn {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s;
}
.status-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}
.status-dashboard-btn {
  background: rgba(22, 160, 133, 0.3);
  border-color: #16a085;
}
.status-dashboard-btn:hover {
  background: rgba(22, 160, 133, 0.5);
}
.status-logout-btn {
  background: rgba(231, 76, 60, 0.2);
  border-color: rgba(231, 76, 60, 0.5);
}
.status-logout-btn:hover {
  background: rgba(231, 76, 60, 0.4);
}
.status-login-btn {
  background: rgba(52, 152, 219, 0.2);
  border-color: rgba(52, 152, 219, 0.5);
}
.status-login-btn:hover {
  background: rgba(52, 152, 219, 0.4);
}
/* Auth and profile surfaces */
.iotclass-auth-button,
.iotclass-auth-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-control-bg, #f1f3f5);
  color: var(--flat-text, #21242c);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.iotclass-auth-button:hover:not(:disabled),
.iotclass-auth-button:focus-visible:not(:disabled),
.iotclass-auth-trigger:hover:not(:disabled),
.iotclass-auth-trigger:focus-visible:not(:disabled) {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-control-hover, #e7ebf0);
  color: var(--flat-text, #21242c);
  outline: none;
}
.iotclass-auth-button:focus-visible,
.iotclass-auth-trigger:focus-visible {
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.iotclass-auth-button-compact {
  min-height: 2rem;
  padding: 0.42rem 0.7rem;
  font-size: 0.78rem;
}
.iotclass-auth-button-secondary {
  background: #ffffff;
  color: var(--flat-text-muted, #475774);
}
.iotclass-auth-button-unavailable,
.iotclass-auth-trigger-unavailable,
.iotclass-auth-trigger-unavailable:hover,
.iotclass-auth-trigger-unavailable:focus-visible {
  border-color: var(--flat-border, #dbdcdd);
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text-subtle, #646b7a);
  cursor: not-allowed;
}
.iotclass-auth-provider-mark {
  color: #1f5fbf;
  font-weight: 800;
}
.iotclass-auth-panel {
  display: grid;
  gap: 0.85rem;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.25rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  text-align: center;
}
.iotclass-auth-panel h2 {
  margin: 0;
  color: var(--flat-text, #21242c);
  font-size: 1.25rem;
  line-height: 1.25;
}
.iotclass-auth-panel p {
  margin: 0;
  color: var(--flat-text-muted, #475774);
}
.iotclass-auth-panel-muted {
  color: var(--flat-text-muted, #475774);
}
.iotclass-auth-panel-error {
  border-color: #f0b7b7;
  background: #fff7f7;
}
.iotclass-auth-panel-error p {
  color: #9f2d2d;
}
.iotclass-auth-panel-unavailable {
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-auth-profile-mini,
.iotclass-auth-profile-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.iotclass-auth-profile-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.iotclass-auth-avatar {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: 50%;
}
.iotclass-auth-avatar-mini {
  width: 1.6rem;
  height: 1.6rem;
}
.iotclass-auth-profile-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.iotclass-auth-name {
  font-weight: 700;
}
.iotclass-auth-xp {
  color: #0f5f55;
  font-size: 0.75rem;
  font-weight: 700;
}
.iotclass-auth-role {
  padding: 0.12rem 0.45rem;
  border: 1px solid #d8a15f;
  border-radius: 4px;
  background: #fff5e8;
  color: #7a4a12;
  font-size: 0.68rem;
  font-weight: 800;
}
.iotclass-auth-profile-link-compact,
.iotclass-auth-profile-link-mini {
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--flat-radius-md, 6px);
}
.iotclass-auth-profile-link-compact:hover,
.iotclass-auth-profile-link-compact:focus-visible,
.iotclass-auth-profile-link-mini:hover,
.iotclass-auth-profile-link-mini:focus-visible {
  border-color: var(--flat-border-strong, #cfd4da);
  background: var(--flat-control-hover, #e7ebf0);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.iotclass-auth-level-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid #9dcfc5;
  border-radius: 4px;
  background: #e8f6f3;
  color: #0f5f55;
  font-size: 0.72rem;
  font-weight: 800;
}
.iotclass-profile-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
}
.iotclass-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-profile-avatar {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: 50%;
}
.iotclass-profile-header h2,
.iotclass-profile-header p {
  margin: 0;
}
.iotclass-profile-header h2 {
  font-size: 1.35rem;
}
.iotclass-profile-header p,
.iotclass-profile-progress-label,
.iotclass-profile-stats span {
  color: var(--flat-text-muted, #475774);
}
.iotclass-profile-streak {
  display: inline-flex;
  margin-top: 0.45rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 4px;
  background: #ffffff;
  color: var(--flat-text-muted, #475774);
  font-size: 0.78rem;
  font-weight: 700;
}
.iotclass-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-profile-stats div {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border-right: 1px solid var(--flat-border, #dbdcdd);
  text-align: center;
}
.iotclass-profile-stats div:last-child {
  border-right: 0;
}
.iotclass-profile-stats strong {
  font-size: 1.55rem;
  line-height: 1;
}
.iotclass-profile-progress,
.iotclass-profile-badges,
.iotclass-profile-actions {
  padding: 1rem 1.25rem;
}
.iotclass-profile-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
}
.iotclass-profile-progress-track {
  overflow: hidden;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-profile-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--flat-accent, #1865f2);
}
.iotclass-profile-badges {
  border-top: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-profile-badges h3 {
  margin: 0 0 0.75rem;
  color: var(--flat-text, #21242c);
  font-size: 1rem;
}
.iotclass-profile-badges > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.6rem;
}
.iotclass-profile-badge {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
  text-align: center;
}
.iotclass-profile-badge-icon {
  color: var(--flat-text-muted, #475774);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.iotclass-profile-actions {
  display: flex;
  gap: 0.6rem;
  border-top: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-profile-actions .iotclass-auth-button:first-child {
  flex: 1;
}

@media (max-width: 640px) {
  .iotclass-profile-header,
  .iotclass-profile-actions,
  .iotclass-profile-progress-label {
    align-items: stretch;
    flex-direction: column;
  }

  .iotclass-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iotclass-profile-stats div:nth-child(2n) {
    border-right: 0;
  }
}
/* Learner dashboard surface */
.iotclass-dashboard-enhanced #dashboard-content {
  display: none !important;
}
.iotclass-dashboard-shell {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--flat-text, #21242c);
}
.iotclass-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem;
  align-items: stretch;
  padding: 1rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
}
.iotclass-dashboard-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.iotclass-dashboard-avatar {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: 50%;
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-kicker {
  margin: 0 0 0.25rem;
  color: #0f5f55;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.iotclass-dashboard-profile h2 {
  margin: 0;
  color: var(--flat-text, #21242c);
  font-size: 1.7rem;
  line-height: 1.2;
}
.iotclass-dashboard-profile p,
.iotclass-dashboard-status p,
.iotclass-dashboard-note {
  margin: 0;
  color: var(--flat-text-muted, #475774);
}
.iotclass-dashboard-status {
  display: grid;
  align-content: center;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-status > span {
  font-weight: 800;
}
.iotclass-dashboard-pill {
  display: inline-flex;
  width: fit-content;
  padding: 0.22rem 0.55rem;
  border: 1px solid #9dcfc5;
  border-radius: 4px;
  background: #e8f6f3;
  color: #0f5f55;
  font-size: 0.78rem;
  font-weight: 800;
}
.iotclass-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
}
.iotclass-dashboard-stat {
  display: grid;
  gap: 0.25rem;
  min-height: 5.5rem;
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--flat-border, #dbdcdd);
  text-align: center;
}
.iotclass-dashboard-stat:last-child {
  border-right: 0;
}
.iotclass-dashboard-stat strong {
  color: var(--flat-text, #21242c);
  font-size: 1.5rem;
  line-height: 1;
}
.iotclass-dashboard-stat span,
.iotclass-dashboard-panel-heading span,
.iotclass-dashboard-activity small {
  color: var(--flat-text-muted, #475774);
  font-size: 0.82rem;
}
.iotclass-dashboard-panel,
.iotclass-dashboard-actions {
  padding: 1rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
}
.iotclass-dashboard-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.iotclass-dashboard-panel-heading h3 {
  margin: 0;
  color: var(--flat-text, #21242c);
  font-size: 1rem;
}
.iotclass-dashboard-progress-track,
.iotclass-dashboard-meter-track {
  overflow: hidden;
  border-radius: 999px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-progress-track {
  height: 0.8rem;
}
.iotclass-dashboard-progress-track span,
.iotclass-dashboard-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1865f2;
}
.iotclass-dashboard-note {
  margin-top: 0.55rem;
  font-size: 0.88rem;
}
.iotclass-dashboard-path-section {
  display: grid;
  gap: 0.75rem;
}
.iotclass-dashboard-path-section .iotclass-dashboard-panel-heading {
  margin-bottom: 0;
}
.iotclass-dashboard-path-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
.iotclass-dashboard-next-link:hover,
.iotclass-dashboard-next-link:focus-visible {
  border-color: var(--flat-accent, #1865f2);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.iotclass-dashboard-ring {
  --path-progress: 0;
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 4.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--flat-surface, #ffffff) 0 55%, transparent 56%),
    conic-gradient(
      var(--ring-color) calc(var(--path-progress) * 1%),
      var(--flat-surface-muted, #f7f8fa) 0
    );
}
.iotclass-dashboard-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: inherit;
}
.iotclass-dashboard-ring span {
  position: relative;
  z-index: 1;
  color: var(--flat-text, #21242c);
  font-size: 0.82rem;
  font-weight: 900;
}
.iotclass-dashboard-path-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.iotclass-dashboard-path-copy strong,
.iotclass-dashboard-path-copy small {
  overflow-wrap: anywhere;
}
.iotclass-dashboard-path-copy small {
  color: var(--flat-text-muted, #475774);
  font-size: 0.78rem;
}
.iotclass-dashboard-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1rem;
}
.iotclass-dashboard-next-title {
  margin: 0;
  color: var(--flat-text, #21242c);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.25;
}
.iotclass-dashboard-next-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 2.5rem;
  margin-top: 0.85rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text, #21242c);
  font-weight: 800;
  text-decoration: none;
}
.iotclass-dashboard-streak-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-streak-values div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.85rem;
  border-right: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-dashboard-streak-values div:last-child {
  border-right: 0;
}
.iotclass-dashboard-streak-values strong {
  color: var(--flat-text, #21242c);
  font-size: 1.2rem;
  line-height: 1;
}
.iotclass-dashboard-streak-values span {
  color: var(--flat-text-muted, #475774);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}
.iotclass-dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
}
.iotclass-dashboard-meter-row {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.iotclass-dashboard-meter-row:last-child {
  margin-bottom: 0;
}
.iotclass-dashboard-meter-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.88rem;
}
.iotclass-dashboard-meter-label strong {
  color: #0f5f55;
}
.iotclass-dashboard-meter-track {
  height: 0.55rem;
}
.iotclass-dashboard-meter-track span {
  background: #0f5f55;
}
.iotclass-dashboard-activity {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.iotclass-dashboard-activity li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  min-height: 3rem;
  padding: 0.6rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-activity-type {
  color: #7a4a12;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.iotclass-dashboard-activity strong,
.iotclass-dashboard-activity small {
  display: block;
}
.iotclass-dashboard-empty-row {
  grid-template-columns: minmax(0, 1fr) !important;
  color: var(--flat-text-muted, #475774);
}
.iotclass-dashboard-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.iotclass-dashboard-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text, #21242c);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.iotclass-dashboard-actions a:hover,
.iotclass-dashboard-actions a:focus-visible {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-control-hover, #e7ebf0);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .iotclass-dashboard-hero,
  .iotclass-dashboard-focus-grid,
  .iotclass-dashboard-columns {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iotclass-dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iotclass-dashboard-stat:nth-child(3n) {
    border-right: 0;
  }

  .iotclass-dashboard-stat:nth-child(n + 4) {
    border-top: 1px solid var(--flat-border, #dbdcdd);
  }
}

@media (max-width: 640px) {
  .iotclass-dashboard-shell {
    margin: 0.75rem 0;
  }

  .iotclass-dashboard-profile {
    align-items: flex-start;
  }

  .iotclass-dashboard-avatar {
    width: 3.25rem;
    height: 3.25rem;
  }

  .iotclass-dashboard-profile h2 {
    font-size: 1.35rem;
  }

  .iotclass-dashboard-stats,
  .iotclass-dashboard-path-grid,
  .iotclass-dashboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iotclass-dashboard-stat:nth-child(3n) {
    border-right: 1px solid var(--flat-border, #dbdcdd);
  }

  .iotclass-dashboard-stat:nth-child(2n) {
    border-right: 0;
  }

  .iotclass-dashboard-stat:nth-child(n + 3) {
    border-top: 1px solid var(--flat-border, #dbdcdd);
  }

  .iotclass-dashboard-activity li {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .iotclass-dashboard-path-grid,
  .iotclass-dashboard-streak-values {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-path-card {
    min-height: 5.25rem;
  }

  .iotclass-dashboard-streak-values div {
    border-right: 0;
    border-bottom: 1px solid var(--flat-border, #dbdcdd);
  }

  .iotclass-dashboard-streak-values div:last-child {
    border-bottom: 0;
  }
}
/* Tablet: hide logo,
keep module name */
@media (max-width: 767px) {
  .module-bar-logo {
    display: none;
  }

  .module-bar-separator {
    display: none;
  }

  .module-bar-name {
    max-width: 200px;
    font-size: 0.82rem;
  }

  .iotclass-user-status {
    padding: 0.35rem 0.75rem;
  }
}
/* Small mobile: hide module name,
keep just home link + badge */
@media (max-width: 480px) {
  .module-bar-name {
    display: none;
  }

  .status-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
  }
}
/* === ADMIN IMAGE VERSION MANAGEMENT === */

.admin-image-container {
  position: relative;
  display: inline-block;
}
/* Image Version Panel */
.admin-image-panel {
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 280px;
  max-width: 350px;
  z-index: 10001;
  overflow: hidden;
}
.image-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #2c3e50;
  color: white;
  font-weight: 500;
}
.image-panel-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.image-panel-body {
  padding: 1rem;
}
.version-item.selected {
  background: #e8f8f5;
  border-color: #16a085;
}
/* Add Version Modal Form */
.add-version-form .form-group {
  margin-bottom: 1rem;
}
.add-version-form label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.35rem;
}
.add-version-form input[type="text"],
.add-version-form select,
.add-version-form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
.add-version-form input:focus,
.add-version-form select:focus,
.add-version-form textarea:focus {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}
/* === ADMIN SOURCE TAGGING === */

.admin-source-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  font-size: 0.85em;
  padding: 0.15rem 0.3rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  vertical-align: middle;
}
h2:hover .admin-source-indicator,
h3:hover .admin-source-indicator,
h4:hover .admin-source-indicator,
h5:hover .admin-source-indicator,
.admin-source-indicator:hover {
  opacity: 1;
}
.admin-source-indicator:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
/* Source Tag Panel */
.admin-source-panel {
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 260px;
  max-width: 320px;
  z-index: 10001;
  overflow: hidden;
}
.source-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: #34495e;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
}
.source-panel-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.source-panel-body {
  padding: 0.75rem;
}
.source-list {
  max-height: 200px;
  overflow-y: auto;
}
.source-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  transition: all 0.15s ease;
}
.source-item:hover {
  background: #f8f9fa;
}
.source-item.tagged {
  background: #e8f8f5;
  border-color: #16a085;
}
.source-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}
.source-name {
  flex: 1;
  font-size: 0.9rem;
  color: #333;
}
.source-toggle-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.source-item.tagged .source-toggle-btn {
  background: #16a085;
  border-color: #16a085;
  color: white;
}
.source-toggle-btn:hover {
  background: #e9ecef;
}
.source-actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}
.manage-sources-btn {
  width: 100%;
  padding: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #555;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.manage-sources-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
.no-sources {
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.75rem 0;
}
/* Source Tag Bar (displayed on sections) */
.source-tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}
.source-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Quick Source Menu (right-click context menu) */
.quick-source-menu {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  z-index: 10002;
  overflow: hidden;
}
.source-menu-header {
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #eee;
}
.source-menu-item {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.1s ease;
}
.source-menu-item:hover {
  background: #f0f0f0;
}
.source-menu-cancel {
  color: #888;
  border-top: 1px solid #eee;
  text-align: center;
}
/* Source Management Modal */
.source-management {
  max-height: 60vh;
  overflow-y: auto;
}
.source-list-manage {
  margin-bottom: 1.5rem;
}
.source-manage-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.source-color-block {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}
.source-manage-item .source-name {
  flex: 1;
  font-weight: 500;
}
.source-type {
  font-size: 0.8rem;
  color: #888;
  text-transform: capitalize;
}
.source-edit-btn,
.source-delete-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}
.source-edit-btn:hover {
  background: #e8f8f5;
  border-color: #16a085;
}
.source-delete-btn:hover {
  background: #fee;
  border-color: #e74c3c;
  color: #e74c3c;
}
.add-source-section {
  padding-top: 1rem;
  border-top: 2px solid #eee;
}
.add-source-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: #333;
}
.form-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.form-row input,
.form-row select {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
}
.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: #16a085;
}
.source-color-input {
  width: 50px !important;
  flex: 0 0 50px !important;
  padding: 0.25rem !important;
  cursor: pointer;
}
.source-desc-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.75rem;
}
.add-source-btn {
  width: 100%;
  padding: 0.6rem;
  background: #16a085;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.add-source-btn:hover {
  background: #138d75;
}
/* === TRANSFER LOG DASHBOARD === */

.transfer-log-container {
  max-height: 60vh;
  overflow-y: auto;
}
/* Transfer Filters */
.transfer-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
}
/* Transfer List */
.transfer-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Empty state */
.transfer-empty {
  text-align: center;
  padding: 2rem;
  color: #888;
  font-style: italic;
}
/* Transfer log actions */
.transfer-log-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.transfer-action-btn.btn-danger {
  color: #dc3545;
}
.transfer-action-btn.btn-danger:hover {
  background: #fee;
  border-color: #dc3545;
}
/* Admin Modal Tabs */
.admin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
}
.admin-tab {
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: #666;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-tab:hover {
  color: #333;
  background: #f8f9fa;
}
.admin-tab.active {
  color: #16a085;
  border-bottom-color: #16a085;
  font-weight: 500;
}
.admin-tab-content {
  display: none;
}
.admin-tab-content.active {
  display: block;
}
/* =============================================
   Part-Colors: Sidebar Module Colors
   Uses CSS custom properties set by part-colors.js:
   --pc-main,
--pc-light,
--pc-border,
--pc-text
   ============================================= */

/* --- Pre-JavaScript Fallback Styles ---
   These rules apply BEFORE part-colors.js adds data-pc attributes.
   They use CSS custom properties (set by inline CSS injected by serve.sh)
   so sidebar shows correct module colors IMMEDIATELY on page load.
   Fallback values (after comma) are used if no inline CSS is present. */

/* Fallback for sidebar section headers (before JS adds data-pc-header) */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container {
  background: var(--pc-main, #2c3e50);
  border-radius: 6px;
  margin: 0.5rem 0;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-text {
  color: var(--pc-text, #ffffff);
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.grid-container h3,
.quick-links-grid h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Learning Hubs generated catalog */
.hub-catalog {
  margin: 1.5rem 0 2rem;
  color: #1f2933;
}
.hub-catalog__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hub-catalog__stat {
  border-left: 4px solid #5c0000;
  background: #f6f8fa;
  padding: 0.85rem 1rem;
}
.hub-catalog__stat span {
  display: block;
  color: #52606d;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hub-catalog__stat strong {
  display: block;
  color: #102a43;
  font-size: 1.55rem;
  line-height: 1.15;
}
.hub-catalog__controls {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr) minmax(12rem, 1.2fr);
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.9rem;
}
.hub-catalog__field span {
  display: block;
  margin-bottom: 0.25rem;
  color: #334e68;
  font-size: 0.82rem;
  font-weight: 700;
}
.hub-catalog__field input,
.hub-catalog__field select {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid #bcccdc;
  border-radius: 6px;
  background: #fff;
  color: #102a43;
  font-size: 0.95rem;
  line-height: 1.25;
  padding: 0.45rem 0.65rem;
}
.hub-catalog__field input:focus,
.hub-catalog__field select:focus {
  border-color: #0f766e;
  outline: 3px solid rgba(15, 118, 110, 0.18);
}
.hub-catalog__books {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.hub-catalog__book {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.15rem;
  border: 1px solid #d9e2ec;
  border-left: 4px solid var(--hub-book-color, #2c3e50);
  border-radius: 6px;
  background: #fff;
  color: #243b53;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.hub-catalog__book:hover,
.hub-catalog__book.is-active {
  background: #f0f7f7;
  border-color: var(--hub-book-color, #2c3e50);
}
.hub-catalog__book strong {
  color: #52606d;
  font-size: 0.78rem;
}
.hub-catalog__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}
.hub-catalog__panel {
  min-width: 0;
}
.hub-catalog__panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  border-bottom: 2px solid #e6edf3;
  margin-bottom: 0.7rem;
  padding-bottom: 0.35rem;
}
.hub-catalog__panel-heading h3 {
  margin: 0;
  color: #102a43;
  font-size: 1.05rem;
  line-height: 1.25;
}
.hub-catalog__panel-heading span {
  color: #52606d;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.hub-catalog__part-list {
  display: grid;
  gap: 0.65rem;
}
.hub-catalog__part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  border-left: 4px solid var(--hub-part-color, #2c3e50);
  background: #f8fafc;
  padding: 0.75rem 0.85rem;
}
.hub-catalog__part-title {
  color: #0f4c81;
  font-weight: 800;
  text-decoration: none;
}
.hub-catalog__part-title:hover {
  color: #0f766e;
  text-decoration: underline;
}
.hub-catalog__part p {
  margin: 0.25rem 0 0;
  color: #52606d;
  font-size: 0.88rem;
  line-height: 1.35;
}
.hub-catalog__part-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
  justify-content: center;
  color: #52606d;
  font-size: 0.78rem;
  text-align: right;
}
.hub-catalog__part-meta strong {
  color: #243b53;
  font-size: 0.85rem;
  white-space: nowrap;
}
.hub-catalog__chapter-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.4rem;
}
.hub-catalog__chapter-list li {
  padding-left: 0.1rem;
}
.hub-catalog__chapter-list a {
  color: #0f4c81;
  font-weight: 800;
  text-decoration: none;
}
.hub-catalog__chapter-list a:hover {
  color: #0f766e;
  text-decoration: underline;
}
.hub-catalog__chapter-list span {
  display: block;
  color: #627d98;
  font-size: 0.8rem;
  line-height: 1.35;
}
.hub-catalog__empty {
  margin: 0;
  border-left: 4px solid #829ab1;
  background: #f6f8fa;
  color: #334e68;
  padding: 0.9rem 1rem;
}

@media (max-width: 900px) {
  .hub-catalog__controls,
  .hub-catalog__content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hub-catalog__stats {
    grid-template-columns: 1fr;
  }

  .hub-catalog__part {
    grid-template-columns: 1fr;
  }

  .hub-catalog__part-meta {
    align-items: flex-start;
    text-align: left;
  }
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-toggle {
  color: var(--pc-text, #ffffff);
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
/* Fallback for sidebar links (before JS adds data-pc) */
#quarto-sidebar .sidebar-item a:not([data-pc]) {
  background: var(--pc-light, #f0f4f8);
  color: var(--pc-fg, #2c3e50);
  border-left: 2px solid var(--pc-border, #5a7a9a);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  /* NO transition here - prevents visible animation when JS adds [data-pc] */
  /* Match [data-pc] rules to prevent layout shift */
  display: block;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
  text-decoration: none;
}
#quarto-sidebar .sidebar-item a:not([data-pc]):hover {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff);
  transform: translateX(2px);
  font-weight: 600;
}
/* Fallback active state (before JS adds data-pc) - white text on dark background */
#quarto-sidebar .sidebar-item a:not([data-pc]).active {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff) !important;
  font-weight: 600;
}
#quarto-sidebar .sidebar-item a:not([data-pc]).active .menu-text,
#quarto-sidebar .sidebar-item a:not([data-pc]).active .chapter-number,
#quarto-sidebar .sidebar-item a:not([data-pc]).active .chapter-title,
#quarto-sidebar .sidebar-item a:not([data-pc]).active span {
  color: var(--pc-text, #ffffff) !important;
}
/* Fallback for sidebar list items (before JS adds data-pc) */
#quarto-sidebar .sidebar-item li:not([data-pc]) {
  margin: 0;
  padding: 0;
}
/* --- End Pre-JavaScript Fallback Styles --- */

/* Common styling for all part-colored sidebar links */
#quarto-sidebar .sidebar-item a[data-pc] {
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  margin: 0;
  border-radius: 3px;
  display: block;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.1s ease;
  background: var(--pc-light, #f0f4f8);
  color: var(--pc-fg, #2c3e50);
  border-left: 2px solid var(--pc-border, #5a7a9a);
}
#quarto-sidebar .sidebar-item a[data-pc]:hover {
  transform: translateX(2px);
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff);
  font-weight: 600;
}
#quarto-sidebar .sidebar-item a[data-pc].active {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff) !important;
  font-weight: 600;
}
/* Ensure nested spans in active links also get white text */
#quarto-sidebar .sidebar-item a[data-pc].active .menu-text,
#quarto-sidebar .sidebar-item a[data-pc].active .chapter-number,
#quarto-sidebar .sidebar-item a[data-pc].active .chapter-title,
#quarto-sidebar .sidebar-item a[data-pc].active span {
  color: var(--pc-text, #ffffff) !important;
}
#quarto-sidebar .sidebar-item a[data-pc] .menu-text,
#quarto-sidebar .sidebar-item a[data-pc] span {
  color: inherit;
}
#quarto-sidebar li[data-pc] {
  margin: 0;
  padding: 0;
}
/* Part section containers - unified bar design */
#quarto-sidebar .sidebar-item-section[data-pc-section] {
  margin: 0.5rem 0;
  padding: 0;
}
#quarto-sidebar .sidebar-item-section[data-pc-section] > .sidebar-item-container {
  display: flex;
  align-items: center;
  background: var(--pc-main, #2c3e50);
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* Part section headers - NO separate background,
uses container */
#quarto-sidebar [data-pc-header] {
  padding: 0.5rem 0.75rem;
  display: block;
  flex: 1;
  min-width: 0;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  text-decoration: none;
  background: transparent;
  color: var(--pc-text, #ffffff);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}
#quarto-sidebar [data-pc-header] .menu-text {
  color: inherit;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > .sidebar-item-text,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > a.sidebar-link,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .menu-text,
#quarto-sidebar .sidebar-part-title,
.sidebar-part-title {
  color: color-mix(in srgb, var(--pc-main, #2c3e50) 48%, #111827) !important;
}
/* Part toggle buttons - NO separate background,
uses container */
#quarto-sidebar [data-pc-toggle] {
  background: transparent;
  color: var(--pc-text, #ffffff);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 0.6rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hover effect on the container */
#quarto-sidebar .sidebar-item-section[data-pc-section] > .sidebar-item-container:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
   INLINE KNOWLEDGE CHECKS
   Moved from inline-knowledge-checks.js to prevent style flash (FOUC)
   ========================================================================== */

.inline-knowledge-check {
  background: var(--flat-surface);
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-lg);
  box-shadow: var(--flat-shadow);
  padding: 1rem;
  margin: 1.25rem 0;
  color: var(--flat-text);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}
.inline-knowledge-check:hover {
  border-color: var(--flat-border-strong);
  border-left-color: var(--interactive-knowledge-check);
}
.ikc-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--flat-border);
}
.ikc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
}
.ikc-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ikc-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--flat-text);
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.ikc-xp {
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.ikc-xp-earned {
  background: var(--interactive-knowledge-check-soft) !important;
  color: var(--interactive-knowledge-check-ink) !important;
}
.ikc-xp-missed {
  background: var(--flat-surface-muted) !important;
  color: var(--flat-text-subtle) !important;
}
.ikc-attempts {
  background: var(--flat-surface-muted);
  color: var(--flat-text-muted);
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin-right: auto;
}
.ikc-mode-quiz .ikc-header {
  background: transparent;
  color: var(--flat-text);
}
.ikc-mode-quiz .ikc-title,
.ikc-mode-quiz .ikc-attempts {
  color: inherit !important;
}
.ikc-incorrect-attempt {
  border-color: var(--danger) !important;
  background: #fdeceb !important;
}
.ikc-question {
  font-size: var(--font-size-base);
  color: var(--flat-text);
  margin-bottom: 0.9rem;
  line-height: 1.5;
}
.ikc-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ikc-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  background: var(--flat-surface);
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--flat-text);
}
.ikc-option:hover:not(.ikc-disabled) {
  border-color: var(--interactive-knowledge-check);
  background: var(--interactive-knowledge-check-soft);
}
.ikc-option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 1.6rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--flat-surface-muted);
  color: var(--flat-text-muted);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.ikc-option-text {
  flex: 1;
}
.ikc-disabled {
  cursor: default;
  opacity: 1;
}
.ikc-correct {
  border-color: var(--interactive-knowledge-check) !important;
  background: var(--interactive-knowledge-check-soft) !important;
}
.ikc-correct .ikc-option-letter {
  background: var(--interactive-knowledge-check);
  border-color: var(--interactive-knowledge-check);
  color: #ffffff;
}
.ikc-incorrect {
  border-color: var(--danger) !important;
  background: #fdeceb !important;
}
.ikc-incorrect .ikc-option-letter {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
.ikc-feedback {
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--flat-surface-muted);
  font-size: var(--font-size-sm);
}
.ikc-result-correct {
  color: var(--interactive-knowledge-check-ink);
  font-weight: var(--font-weight-bold);
}
.ikc-result-incorrect {
  color: #9d2f24;
  font-weight: var(--font-weight-bold);
}
.ikc-explanation {
  margin-top: 0.9rem;
  padding: 0.75rem 0.8rem;
  background: var(--flat-surface-muted);
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-sm);
  color: var(--flat-text-muted);
}
.ikc-explanation summary {
  cursor: pointer;
  color: var(--flat-text);
  font-weight: var(--font-weight-bold);
}
.ikc-explanation-body {
  margin-top: 0.5rem;
}
.ikc-celebration {
  position: absolute;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}
.ikc-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* IKC Multi-select mode */
.ikc-instruction {
  font-size: var(--font-size-sm);
  color: var(--flat-text-subtle);
  margin-bottom: 0.6rem;
}
.ikc-option.ikc-selected .ikc-checkbox {
  background: var(--interactive-knowledge-check);
  border-color: var(--interactive-knowledge-check);
}
.ikc-option.ikc-selected .ikc-checkbox::after {
  content: "\2713";
}
.ikc-option.ikc-selected {
  border-color: var(--interactive-knowledge-check);
  background: var(--interactive-knowledge-check-soft);
}
.ikc-option.ikc-disabled.ikc-correct .ikc-checkbox {
  background: var(--interactive-knowledge-check);
  border-color: var(--interactive-knowledge-check);
}
.ikc-option.ikc-disabled.ikc-correct .ikc-checkbox::after {
  content: "\2713";
}
.ikc-option.ikc-disabled.ikc-incorrect .ikc-checkbox {
  background: var(--danger);
  border-color: var(--danger);
}
.ikc-option.ikc-disabled.ikc-incorrect .ikc-checkbox::after {
  content: "\2717";
}
.ikc-option.ikc-missed {
  border-color: var(--warning) !important;
  background: #fff6d6 !important;
}
.ikc-option.ikc-missed .ikc-checkbox {
  background: var(--warning);
  border-color: var(--warning);
}
.ikc-option.ikc-missed .ikc-checkbox::after {
  content: "!";
  font-weight: bold;
}
.ikc-submit-btn {
  margin-top: 0.65rem;
  min-height: var(--touch-target-min);
  padding: 0.6rem 1rem;
  background: var(--interactive-knowledge-check);
  color: #ffffff;
  border: 1px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  align-self: flex-start;
}
.ikc-submit-btn:hover:not(:disabled) {
  background: var(--interactive-knowledge-check-ink);
  border-color: var(--interactive-knowledge-check-ink);
}
.ikc-submit-btn:disabled {
  background: var(--flat-surface-muted);
  border-color: var(--flat-border);
  color: var(--flat-text-subtle);
  cursor: not-allowed;
}
.ikc-option:focus-visible,
.ikc-submit-btn:focus-visible {
  outline: 3px solid rgba(24, 101, 242, 0.45);
  outline-offset: 2px;
}
/* ==========================================================================
   TOAST NOTIFICATIONS
   Error handler toast animations
   Moved from error-handler.js to prevent style flash (FOUC)
   ========================================================================== */

@keyframes iotclass-toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes iotclass-toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* Export toast animation (from export-utils.js) */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}
/* Badge notification animations (from badge-system.js) */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* ==========================================================================
   GAMIFICATION STYLES
   Moved from gamification.js to prevent style flash (FOUC)
   ========================================================================== */

.streak-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: bold;
  margin-left: 10px;
  cursor: pointer;
}
.streak-flame {
  font-size: 16px;
}
.gamification-notification {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  z-index: 10001;
}
.gamification-notification.show {
  transform: translateX(0);
}
.badge-notification {
  background: linear-gradient(135deg, #fef5e7 0%, #fcf3cf 100%);
  border: 2px solid #f39c12;
}
.xp-notification {
  background: linear-gradient(135deg, #e8f6f3 0%, #d5f4e6 100%);
  border: 2px solid #27ae60;
  padding: 10px 20px;
}
.xp-amount {
  font-size: 20px;
  font-weight: bold;
  color: #27ae60;
}
.xp-reason {
  color: #666;
  font-size: 13px;
  margin-left: 10px;
}
.challenge-notification {
  background: linear-gradient(135deg, #e8f6f3 0%, #d5f4e6 100%);
  border: 2px solid #27ae60;
}
.level-notification {
  background: linear-gradient(135deg, #e8daef 0%, #d2b4de 100%);
  border: 2px solid #9b59b6;
}
.gn-icon {
  font-size: 36px;
}
.gn-title {
  font-size: 11px;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 1px;
}
.gn-name {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}
.gn-desc {
  font-size: 12px;
  color: #666;
}
.gn-xp {
  font-size: 14px;
  font-weight: bold;
  color: #27ae60;
  margin-top: 5px;
}
.daily-challenge-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 280px;
  z-index: 1000;
  overflow: hidden;
}
.daily-challenge-widget.collapsed .dcw-content {
  display: none;
}
.daily-challenge-widget.completed {
  border: 2px solid #27ae60;
}
.dcw-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  cursor: pointer;
}
.dcw-icon {
  font-size: 20px;
}
.dcw-title {
  flex: 1;
  font-weight: bold;
}
.dcw-toggle {
  font-size: 12px;
  transition: transform 0.3s;
}
.collapsed .dcw-toggle {
  transform: rotate(-90deg);
}
.dcw-content {
  padding: 15px;
}
.dcw-name {
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}
.dcw-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}
.dcw-progress-bar {
  background: #eee;
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}
.dcw-progress-fill {
  background: linear-gradient(90deg, #3498db, #2980b9);
  height: 100%;
  transition: width 0.5s ease;
}
.completed .dcw-progress-fill {
  background: linear-gradient(90deg, #27ae60, #1e8449);
}
.dcw-progress-text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}
.dcw-reward {
  font-size: 13px;
  font-weight: bold;
  color: #f39c12;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .daily-challenge-widget {
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
  }

  .gamification-notification {
    left: 10px;
    right: 10px;
    bottom: 100px;
  }
}
/* ==========================================================================
   KNOWLEDGE GRAPH SIDEBAR
   Styles for sidebar-panel.js knowledge map component
   Added Feb 2026 - these classes were missing,
causing unstyled sidebar
   ========================================================================== */

.kg-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: width 0.3s ease;
}
.kg-sidebar-collapsed {
  width: 40px !important;
}
.kg-sidebar-collapsed .kg-sidebar-content {
  display: none;
}
.kg-sidebar-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #64748b;
  transition: all 0.2s;
  z-index: 10;
}
.kg-sidebar-toggle:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.kg-sidebar-toggle-icon {
  line-height: 1;
}
.kg-sidebar-content {
  padding: 50px 12px 12px;
  overflow-y: auto;
  flex: 1;
}
.kg-sidebar-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.kg-sidebar-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.kg-sidebar-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
}
.kg-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.kg-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.kg-search-input::placeholder {
  color: #94a3b8;
}
/* View Buttons */
.kg-view-buttons {
  display: flex;
  gap: 4px;
}
.kg-view-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 11px;
  color: #64748b;
  transition: all 0.2s;
}
.kg-view-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.kg-view-btn.active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: white;
}
.kg-view-btn svg {
  width: 16px;
  height: 16px;
}
/* Collapsible Sections */
.kg-sidebar-collapsible .kg-section-content {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.kg-sidebar-collapsible.collapsed .kg-section-content {
  max-height: 0;
  padding: 0;
}
.kg-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-align: left;
}
.kg-section-header:hover {
  color: #1e3a5f;
}
.kg-section-toggle {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s;
}
.kg-section-content {
  padding-top: 8px;
}
/* Filter Items */
.kg-filter-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kg-filter-item:hover {
  color: #1e3a5f;
}
.kg-filter-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.kg-part-filter {
  padding: 4px 0;
}
.kg-part-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.kg-part-filters {
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 8px;
}
.kg-select-all-btn {
  padding: 4px 8px;
  margin-right: 4px;
  margin-top: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: white;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.kg-select-all-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
/* Difficulty Badges */
.kg-difficulty-badge {
  font-size: 10px;
}
.kg-difficulty-beginner {
  color: #16a085;
}
.kg-difficulty-intermediate {
  color: #e67e22;
}
.kg-difficulty-advanced {
  color: #8e44ad;
}
.kg-difficulty-filters,
.kg-feature-filters {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Zoom Controls */
.kg-zoom-controls {
  display: flex;
  gap: 4px;
}
.kg-zoom-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 16px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.kg-zoom-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
/* Legend */
.kg-legend-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kg-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}
.kg-legend-shape {
  width: 14px;
  text-align: center;
}
.kg-legend-circle {
  color: #16a085;
}
.kg-legend-square {
  color: #e67e22;
}
.kg-legend-hexagon {
  color: #8e44ad;
}
.kg-legend-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}
.kg-legend-line {
  width: 20px;
  font-size: 10px;
  letter-spacing: -1px;
}
.kg-legend-solid {
  color: #c0392b;
}
.kg-legend-dashed {
  color: #95a5a6;
}
.kg-legend-dotted {
  color: #3498db;
}
/* Stats */
.kg-stats {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px !important;
  border-bottom: none !important;
}
.kg-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kg-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1e3a5f;
}
.kg-stat-label {
  font-size: 12px;
  color: #64748b;
}
/* Responsive */
@media (max-width: 768px) {
  .kg-sidebar {
    width: 100% !important;
    max-height: 40vh;
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }

  .kg-sidebar-collapsed {
    max-height: 40px;
  }

  .kg-sidebar-toggle {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
  }

  .kg-sidebar-content {
    padding-top: 40px;
  }
}
/* =============================================
   Mobile TOC Toggle
   =============================================
   Floating toggle button and slide-out drawer
   for Table of Contents on mobile/tablet viewports
   ============================================= */

/* Toggle Button */
.toc-mobile-toggle {
  display: none; /* Hidden by default, shown via JS */
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1040;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ieee-navy, #2c3e50);
  color: white;
  border: none;
  border-radius: var(--radius-xl, 12px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.toc-mobile-toggle:hover {
  background: var(--ieee-teal, #16a085);
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15);
}
.toc-mobile-toggle:active {
  transform: translateY(0);
}
.toc-mobile-toggle.active {
  background: var(--ieee-teal, #16a085);
}
.toc-mobile-toggle .toc-icon {
  flex-shrink: 0;
}
.toc-mobile-toggle .toc-toggle-text {
  white-space: nowrap;
}
.toc-mobile-toggle-inline {
  position: static;
  bottom: auto;
  right: auto;
  z-index: auto;
  padding: 0.35rem 0.55rem;
  min-width: 34px;
  min-height: 34px;
  border-radius: 5px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}
.toc-mobile-toggle-inline:hover,
.toc-mobile-toggle-inline:active {
  background: rgba(255, 255, 255, 0.25);
  transform: none;
  box-shadow: none;
}
.toc-mobile-toggle-inline .toc-toggle-text {
  display: none;
}
/* Hide text on very small screens,
show just icon */
@media (max-width: 400px) {
  .toc-mobile-toggle {
    padding: 14px;
    border-radius: 50%;
  }
  .toc-mobile-toggle .toc-toggle-text {
    display: none;
  }
}
/* Backdrop Overlay */
.toc-mobile-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1045;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.toc-mobile-backdrop.visible {
  opacity: 1;
  visibility: visible;
}
/* Drawer */
.toc-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85vw;
  max-width: 360px;
  background: white;
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.toc-mobile-drawer.open {
  transform: translateX(0);
}
/* Drawer Header */
.toc-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
  background: var(--gray-50, #f8fafc);
  flex-shrink: 0;
}
.toc-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ieee-navy, #2c3e50);
}
.toc-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 6px);
  color: var(--gray-500, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
}
.toc-drawer-close:hover {
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-700, #334155);
}
.toc-drawer-close:focus-visible {
  outline: 2px solid var(--ieee-teal, #16a085);
  outline-offset: 2px;
}
/* Drawer Content */
.toc-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  -webkit-overflow-scrolling: touch;
}
/* Style the cloned TOC inside drawer */
.toc-drawer-content #toc-mobile-content {
  display: block !important;
  position: static !important;
  width: 100% !important;
  padding: 0 16px;
  background: transparent;
  box-shadow: none;
}
.toc-drawer-content #toc-mobile-content #TOC {
  padding: 0;
}
.toc-drawer-content #toc-mobile-content #TOC .toc-title {
  display: none; /* We have our own header */
}
.toc-drawer-content #toc-mobile-content #TOC ul {
  padding-left: 0;
  margin: 0;
}
.toc-drawer-content #toc-mobile-content #TOC ul ul {
  padding-left: 16px;
}
.toc-drawer-content #toc-mobile-content #TOC li {
  margin-bottom: 4px;
}
.toc-drawer-content #toc-mobile-content #TOC a {
  display: block;
  padding: 10px 12px;
  color: var(--gray-700, #334155);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border-radius: var(--radius-md, 6px);
  transition: all 0.15s ease;
}
.toc-drawer-content #toc-mobile-content #TOC a:hover {
  background: var(--gray-100, #f1f5f9);
  color: var(--ieee-teal, #16a085);
}
.toc-drawer-content #toc-mobile-content #TOC a.active {
  background: rgba(22, 160, 133, 0.1);
  color: var(--ieee-teal, #16a085);
  font-weight: 500;
}
/* Responsive adjustments */
@media (min-width: 992px) {
  /* Hide mobile TOC elements on large screens */
  .toc-mobile-toggle,
  .toc-mobile-drawer,
  .toc-mobile-backdrop {
    display: none !important;
  }
}
/* Show toggle on medium/small screens */
@media (max-width: 991.98px) {
  /* Keep the original TOC hidden on smaller screens */
  #quarto-margin-sidebar {
    display: none !important;
  }

  /* Ensure toggle is visible when JS enables it */
  body.toc-mobile-ready .toc-mobile-toggle {
    display: flex;
  }
}
/* Safe area insets for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .toc-mobile-toggle {
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: calc(24px + env(safe-area-inset-right));
  }

  .toc-mobile-drawer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* ============================================
   TOC Toggle Button - Collapsible Right Sidebar
   ============================================ */

/* TOC Toggle Button */
.toc-toggle-btn {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1050;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--pc-main, #2c3e50);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}
.toc-toggle-btn:hover {
  background: var(--pc-main, #2c3e50);
  filter: brightness(1.1);
  transform: scale(1.05);
}
.toc-toggle-btn svg {
  width: 20px;
  height: 20px;
}
/* ===========================================
   TOC Layout - Let Quarto handle it naturally
   Grid settings come from _quarto.yml
   =========================================== */

/* Hide custom toggle button - not needed */
.toc-toggle-btn {
  display: none !important;
}
/* Hide custom overlay - not needed */
.toc-overlay {
  display: none !important;
}
/* Hide toggle on small screens (TOC moves inline) */
@media (max-width: 991px) {
  .toc-toggle-btn {
    display: none;
  }
}
/* Overlay when TOC is expanded */
.toc-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1035;
}
.toc-overlay.active {
  display: block;
}
/* ==========================================================================
   IoT Quiz & Component Styles (Consolidated)
   All interactive component CSS in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Matching Quiz (.imq-)
   -------------------------------------------------------------------------- */
.iot-quiz-matching {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.imq-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}
.imq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.imq-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.imq-xp {
  background: rgba(255, 255, 255, 0.2);
  /* a11y audit 2026-07-28 (B9): no color was set here, so this pill inherited
   * whatever text color its ancestor happened to have instead of the header's
   * own `color: white` -- fine when inheritance actually reaches .imq-header's
   * dark navy gradient (5.3-6.0:1), but a real 3.78:1 failure was caught twice
   * on unrelated pages when it didn't (actuators-labs.html, B9 re-audit note:
   * "assumes a dark ancestor"). Explicit color removes the dependency on
   * inheritance entirely, matching .imq-xp-earned/-missed below which already
   * set their own color rather than relying on it. */
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.imq-xp-earned {
  background: #16a085 !important;
  color: white;
}
.imq-xp-missed {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}
.imq-question {
  padding: 16px 20px 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}
.imq-instruction {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
}
.imq-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px 12px;
}
.imq-left-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.imq-right-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.imq-left-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  min-height: 44px;
}
.imq-left-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1f2937;
  flex: 1;
}
.imq-drop-zone {
  min-width: 100px;
  min-height: 36px;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 4px 8px;
  background: white;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.imq-drop-zone.imq-drag-over {
  border-color: #3498db;
  background: #ebf5fb;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.imq-drop-zone.imq-has-match {
  border-style: solid;
  border-color: #3498db;
  background: #ebf5fb;
}
.imq-drop-placeholder {
  font-size: 0.8rem;
  color: var(--flat-text-muted, #475774);
  font-style: italic;
}
.imq-drop-zone.imq-has-match .imq-drop-placeholder {
  display: none;
}
.imq-right-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f0f9ff;
  border: 2px solid #bae6fd;
  border-radius: 8px;
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.3s ease;
  user-select: none;
  font-size: 0.9rem;
  color: #1e3a5f;
  min-height: 44px;
  width: 100%;
}
.imq-right-item,
.imq-drop-zone {
  appearance: none;
}
.imq-right-item:hover {
  border-color: #3498db;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
  transform: translateY(-1px);
}
.imq-right-item.imq-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  border-color: #3498db;
  background: #ebf5fb;
}
.imq-right-item.imq-selected {
  border-color: #e67e22;
  background: #fef9f3;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}
.imq-right-item.imq-correct {
  background: #f0fdf4;
  border-color: #16a085;
  cursor: default;
}
.imq-right-item.imq-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
  cursor: default;
}
.imq-left-item.imq-correct {
  background: #f0fdf4;
  border-color: #16a085;
}
.imq-left-item.imq-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
}
.imq-actions {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}
.imq-check-btn,
.imq-reset-btn {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.imq-check-btn:hover:not(:disabled),
.imq-reset-btn:hover {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}
.imq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.imq-right-item:focus-visible,
.imq-drop-zone:focus-visible,
.imq-check-btn:focus-visible,
.imq-reset-btn:focus-visible {
  outline: 3px solid rgba(52, 152, 219, 0.42);
  outline-offset: 2px;
}
.imq-right-item:disabled,
.imq-drop-zone:disabled {
  cursor: default;
}
.imq-reset-btn {
  background: #6b7280;
}
.imq-reset-btn:hover {
  background: #4b5563;
}
.imq-feedback {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.imq-result-correct {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}
.imq-result-incorrect {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}
.imq-explanation {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}
.imq-explanation strong {
  color: #2c3e50;
}
.imq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 4rem;
  animation: imq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes imq-celebrate {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
.imq-error {
  padding: 20px;
  background: #fef3f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #991b1b;
  text-align: center;
}
/* Dark mode */
.quarto-dark .iot-quiz-matching {
  background: #1f2937;
  border-color: #374151;
}
.quarto-dark .imq-question {
  color: #f3f4f6;
}
.quarto-dark .imq-instruction {
  color: #9ca3af;
}
.quarto-dark .imq-left-item {
  background: #111827;
  border-color: #374151;
}
.quarto-dark .imq-left-text {
  color: #f3f4f6;
}
.quarto-dark .imq-drop-zone {
  border-color: #4b5563;
  background: #1f2937;
}
.quarto-dark .imq-drop-placeholder {
  color: #cbd5e1;
}
.quarto-dark .imq-drop-zone.imq-drag-over {
  border-color: #3498db;
  background: #1e3a5f;
}
.quarto-dark .imq-right-item {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}
.quarto-dark .imq-right-item:hover {
  border-color: #3498db;
}
.quarto-dark .imq-right-item.imq-correct {
  background: #064e3b;
  border-color: #16a085;
}
.quarto-dark .imq-right-item.imq-incorrect {
  background: #4c1d1d;
  border-color: #e74c3c;
}
.quarto-dark .imq-left-item.imq-correct {
  background: #064e3b;
  border-color: #16a085;
}
.quarto-dark .imq-left-item.imq-incorrect {
  background: #4c1d1d;
  border-color: #e74c3c;
}
.quarto-dark .imq-check-btn {
  background: #3498db;
}
.quarto-dark .imq-check-btn:hover:not(:disabled) {
  background: #2980b9;
}
.quarto-dark .imq-result-correct {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}
.quarto-dark .imq-result-incorrect {
  background: #4c1d1d;
  color: #fecaca;
  border-color: #991b1b;
}
.quarto-dark .imq-explanation {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}
.quarto-dark .imq-explanation strong {
  color: #93c5fd;
}
/* Responsive */
@media (max-width: 600px) {
  .imq-board {
    grid-template-columns: 1fr;
  }

  .imq-left-item {
    flex-wrap: wrap;
  }

  .imq-drop-zone {
    min-width: 80px;
    width: 100%;
  }

  .imq-right-item {
    font-size: 0.85rem;
  }
}
/* --------------------------------------------------------------------------
   Ordering Quiz (.ioq-)
   -------------------------------------------------------------------------- */
.iot-quiz-ordering {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ioq-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}
.ioq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ioq-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.ioq-xp {
  background: rgba(255, 255, 255, 0.2);
  /* a11y audit 2026-07-28 (B9): see .imq-xp above -- same missing-color/
   * assumed-dark-ancestor bug, same shared XP-badge component family. */
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.ioq-xp-earned {
  background: #16a085 !important;
  color: white;
}
.ioq-xp-missed {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}
.ioq-instruction {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
}
.ioq-list {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ioq-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.3s ease;
  user-select: none;
  gap: 10px;
}
.ioq-item:hover {
  border-color: #3498db;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
}
.ioq-item.ioq-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  border-color: #3498db;
  background: #ebf5fb;
}
.ioq-item.ioq-drag-over {
  border-color: #e67e22;
  background: #fef9f3;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}
.ioq-item.ioq-touch-active {
  border-color: #3498db;
  background: #ebf5fb;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
  transform: scale(1.02);
  z-index: 10;
}
.ioq-item.ioq-correct {
  background: #f0fdf4;
  border-color: #16a085;
}
.ioq-item.ioq-correct .ioq-position {
  background: #16a085;
  color: white;
}
.ioq-item.ioq-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
}
.ioq-item.ioq-incorrect .ioq-position {
  background: #e74c3c;
  color: white;
}
.ioq-item.ioq-disabled {
  cursor: default;
  pointer-events: none;
}
.ioq-item.ioq-disabled .ioq-arrows,
.ioq-item.ioq-disabled .ioq-drag-handle {
  visibility: hidden;
}
.ioq-position {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #2c3e50;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ioq-item-text {
  flex: 1;
  font-size: 0.95rem;
  color: #1f2937;
  line-height: 1.4;
}
.ioq-correction {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.8rem;
  color: #16a085;
  font-weight: 600;
  font-style: italic;
}
.ioq-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.ioq-arrow-up,
.ioq-arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.6rem;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
}
.ioq-arrow-up:hover:not(:disabled),
.ioq-arrow-down:hover:not(:disabled) {
  background: #3498db;
  color: white;
  border-color: #3498db;
}
.ioq-arrow-up:disabled,
.ioq-arrow-down:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ioq-drag-handle {
  color: #9ca3af;
  font-size: 1.1rem;
  cursor: grab;
  flex-shrink: 0;
  padding: 0 2px;
}
.ioq-actions {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}
.ioq-check-btn {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ioq-check-btn:hover {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}
.ioq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ioq-arrow-up:focus-visible,
.ioq-arrow-down:focus-visible,
.ioq-check-btn:focus-visible {
  outline: 3px solid rgba(52, 152, 219, 0.42);
  outline-offset: 2px;
}
.ioq-feedback {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ioq-result-correct {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}
.ioq-result-incorrect {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}
.ioq-explanation {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}
.ioq-explanation strong {
  color: #2c3e50;
}
.ioq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 4rem;
  animation: ioq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes ioq-celebrate {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
/* Dark mode */
.quarto-dark .iot-quiz-ordering {
  background: #1f2937;
  border-color: #374151;
}
.quarto-dark .ioq-instruction {
  color: #9ca3af;
}
.quarto-dark .ioq-item {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
.quarto-dark .ioq-item:hover {
  border-color: #3498db;
}
.quarto-dark .ioq-item.ioq-dragging {
  background: #1e3a5f;
}
.quarto-dark .ioq-item.ioq-drag-over {
  background: #3b2a1a;
  border-color: #e67e22;
}
.quarto-dark .ioq-item.ioq-correct {
  background: #064e3b;
  border-color: #16a085;
}
.quarto-dark .ioq-item.ioq-incorrect {
  background: #4c1d1d;
  border-color: #e74c3c;
}
.quarto-dark .ioq-item-text {
  color: #f3f4f6;
}
.quarto-dark .ioq-correction {
  color: #34d399;
}
.quarto-dark .ioq-arrow-up,
.quarto-dark .ioq-arrow-down {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}
.quarto-dark .ioq-arrow-up:hover:not(:disabled),
.quarto-dark .ioq-arrow-down:hover:not(:disabled) {
  background: #3498db;
  color: white;
  border-color: #3498db;
}
.quarto-dark .ioq-drag-handle {
  color: #6b7280;
}
.quarto-dark .ioq-check-btn {
  background: #3498db;
}
.quarto-dark .ioq-check-btn:hover {
  background: #2980b9;
}
.quarto-dark .ioq-result-correct {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}
.quarto-dark .ioq-result-incorrect {
  background: #4c1d1d;
  color: #fecaca;
  border-color: #991b1b;
}
.quarto-dark .ioq-explanation {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}
.quarto-dark .ioq-explanation strong {
  color: #93c5fd;
}

@media (max-width: 600px) {
  .ioq-item {
    padding: 8px 10px;
    gap: 6px;
  }

  .ioq-item-text {
    font-size: 0.85rem;
  }

  .ioq-position {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 0.7rem;
  }

  .ioq-arrow-up,
  .ioq-arrow-down {
    width: 22px;
    height: 18px;
    font-size: 0.55rem;
  }

  .ioq-drag-handle {
    display: none;
  }
}
/* --------------------------------------------------------------------------
   Code Quiz (.icq-)
   -------------------------------------------------------------------------- */
.iot-quiz-code {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin: 1.5em 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.icq-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}
.icq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.icq-title {
  flex-grow: 1;
}
.icq-lang {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.icq-xp {
  background: rgba(22, 160, 133, 0.3);
  /* a11y audit 2026-07-28 (B9): see .imq-xp above -- same missing-color/
   * assumed-dark-ancestor bug, same shared XP-badge component family. */
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.icq-xp-earned {
  background: rgba(22, 160, 133, 0.8) !important;
  color: #ffffff;
}
.icq-xp-missed {
  background: rgba(231, 76, 60, 0.3) !important;
  color: #ffffff;
  text-decoration: line-through;
}
.icq-question {
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 1px solid #e5e7eb;
}
.icq-instruction {
  padding: 8px 16px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
  border-bottom: 1px solid #e5e7eb;
}
.icq-code-container {
  background: #1e1e2e;
  overflow-x: auto;
  margin: 0;
}
.icq-code-block {
  padding: 12px 0;
  min-width: 0;
}
.icq-line {
  display: flex;
  align-items: center;
  min-height: 28px;
  line-height: 1.6;
  padding: 0 16px 0 0;
  max-width: 100%;
  overflow-x: auto;
}
.icq-line-num {
  display: inline-block;
  width: 44px;
  min-width: 44px;
  text-align: right;
  padding-right: 16px;
  color: #6c7086;
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.8rem;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid #313244;
  margin-right: 16px;
}
.icq-line-content {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.9rem;
  color: #cdd6f4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}
.icq-line-blank {
  background: rgba(22, 160, 133, 0.08);
}
.icq-blank-select {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.85rem;
  background: #313244;
  color: #f9e2af;
  border: 1px dashed #89b4fa;
  max-width: 100%;
  text-overflow: ellipsis;
  border-radius: 4px;
  padding: 2px 8px;
  min-width: min(200px, 100%);
  max-width: 100%;
  width: min(100%, 42ch);
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  appearance: auto;
}
.icq-blank-select:hover {
  border-color: #74c7ec;
  background: #45475a;
}
.icq-blank-select:focus {
  border-color: #89b4fa;
  box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
}
.icq-blank-select.icq-correct {
  background: rgba(22, 160, 133, 0.25);
  border-color: #16a085;
  color: #a6e3a1;
  border-style: solid;
}
.icq-blank-select.icq-incorrect {
  background: rgba(231, 76, 60, 0.25);
  border-color: #e74c3c;
  color: #f38ba8;
  border-style: solid;
}
.icq-correct-answer {
  display: block;
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.8rem;
  color: #a6e3a1;
  margin-top: 2px;
  padding-left: 4px;
}
.icq-actions {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid #e5e7eb;
}
.icq-check-btn {
  background: #2c3e50;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    opacity 0.2s;
}
.icq-check-btn:hover:not(:disabled) {
  background: #16a085;
}
.icq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icq-blank-select:focus-visible,
.icq-check-btn:focus-visible {
  outline: 3px solid rgba(137, 180, 250, 0.42);
  outline-offset: 2px;
}
.icq-feedback {
  padding: 12px 16px;
  font-size: 0.95rem;
  border-top: 1px solid #e5e7eb;
}
.icq-result-correct {
  color: #16a085;
  font-weight: 600;
}
.icq-result-incorrect {
  color: #e74c3c;
  font-weight: 600;
}
.icq-explanation {
  padding: 12px 16px;
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;
  font-size: 0.9rem;
  color: #166534;
  line-height: 1.5;
}
.icq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  animation: icq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes icq-celebrate {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}
.icq-error {
  padding: 20px;
  background: #fef3f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #991b1b;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .iot-quiz-code {
    border-color: #374151;
    background: #1f2937;
  }
  .icq-question {
    color: #e5e7eb;
    border-bottom-color: #374151;
  }
  .icq-instruction {
    color: #9ca3af;
    border-bottom-color: #374151;
  }
  .icq-actions {
    border-top-color: #374151;
  }
  .icq-feedback {
    border-top-color: #374151;
  }
  .icq-explanation {
    background: #064e3b;
    border-top-color: #065f46;
    color: #a7f3d0;
  }
}

@media (max-width: 600px) {
  .icq-header {
    flex-wrap: wrap;
  }

  .icq-code-container {
    overflow-x: hidden;
  }

  .icq-code-block {
    width: 100%;
    min-width: 0;
  }

  .icq-line {
    align-items: flex-start;
    padding-right: 8px;
    overflow-x: visible;
  }

  .icq-line-num {
    width: 32px;
    min-width: 32px;
    padding-right: 8px;
    margin-right: 8px;
  }

  .icq-line-content {
    width: 100%;
    min-width: 0;
    word-break: break-word;
  }

  .icq-blank-select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 2px 0;
  }
}
/* --------------------------------------------------------------------------
   Label Quiz (.ilq-)
   -------------------------------------------------------------------------- */
.iot-quiz-label {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ilq-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}
.ilq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ilq-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.ilq-xp {
  background: rgba(255, 255, 255, 0.2);
  /* a11y audit 2026-07-28 (B9): see .imq-xp above -- same missing-color/
   * assumed-dark-ancestor bug, same shared XP-badge component family. */
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.ilq-xp-earned {
  background: #16a085 !important;
  color: white;
}
.ilq-xp-missed {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}
.ilq-question {
  padding: 16px 20px 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}
.ilq-instruction {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
}
.ilq-diagram-container {
  position: relative;
  margin: 0 20px 16px;
  min-height: 180px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}
.ilq-diagram-image {
  display: block;
  width: 100%;
  height: auto;
}
.ilq-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e74c3c;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
  padding: 0;
}
.ilq-hotspot:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 3px 12px rgba(231, 76, 60, 0.5);
}
.ilq-hotspot-number {
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.ilq-hotspot-selected {
  background: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}
.ilq-hotspot-correct {
  background: #16a085 !important;
  box-shadow: 0 2px 8px rgba(22, 160, 133, 0.4) !important;
}
.ilq-hotspot-incorrect {
  background: #e74c3c !important;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5) !important;
}
.ilq-hotspot-disabled {
  cursor: default;
  pointer-events: none;
}

@keyframes ilq-pulse {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  }
  50% {
    box-shadow: 0 2px 16px rgba(231, 76, 60, 0.7);
  }
}
.ilq-hotspot:not(.ilq-hotspot-selected):not(.ilq-hotspot-correct):not(.ilq-hotspot-incorrect):not(
    .ilq-hotspot-disabled
  ) {
  animation: ilq-pulse 2s infinite;
}
.ilq-selections {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ilq-selection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.ilq-row-correct {
  background: #f0fdf4;
  border-color: #16a085;
}
.ilq-row-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
}
.ilq-selection-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #e74c3c;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ilq-row-correct .ilq-selection-marker {
  background: #16a085;
}
.ilq-row-incorrect .ilq-selection-marker {
  background: #e74c3c;
}
.ilq-select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #1f2937;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ilq-select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}
.ilq-select:disabled {
  background: #f3f4f6;
  cursor: default;
  opacity: 0.8;
}
.ilq-selection-status {
  min-width: 80px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ilq-status-correct {
  color: #16a085;
  font-weight: 600;
}
.ilq-status-incorrect {
  color: #e74c3c;
  font-weight: 600;
}
.ilq-correct-answer {
  color: #16a085;
  font-size: 0.8rem;
  font-weight: 500;
  font-style: italic;
}
.ilq-actions {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}
.ilq-check-btn {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ilq-check-btn:hover:not(:disabled) {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}
.ilq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ilq-hotspot:focus-visible,
.ilq-select:focus-visible,
.ilq-check-btn:focus-visible {
  outline: 3px solid rgba(52, 152, 219, 0.42);
  outline-offset: 2px;
}
.ilq-feedback {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ilq-result-correct {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}
.ilq-result-incorrect {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}
.ilq-explanation {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}
.ilq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  animation: ilq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes ilq-celebrate {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}

@media (max-width: 600px) {
  .ilq-hotspot {
    width: 26px;
    height: 26px;
  }
  .ilq-hotspot-number {
    font-size: 0.7rem;
  }
  .ilq-selection-row {
    flex-wrap: wrap;
  }
  .ilq-select {
    min-width: 0;
  }
  .ilq-selection-status {
    min-width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ikc-celebration,
  .imq-celebration,
  .ioq-celebration,
  .icq-celebration,
  .ilq-celebration,
  .ilq-hotspot:not(.ilq-hotspot-selected):not(.ilq-hotspot-correct):not(.ilq-hotspot-incorrect):not(
      .ilq-hotspot-disabled
    ) {
    animation: none !important;
  }
}
/* --------------------------------------------------------------------------
   Video Component (.ivid-)
   -------------------------------------------------------------------------- */
.iot-video-embed {
  display: block;
  margin: 1.5em 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ivid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}
.ivid-icon {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  padding: 0.14rem 0.45rem;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.ivid-title {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivid-description {
  padding: 10px 16px;
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.5;
}
.ivid-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000000;
}
.ivid-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ivid-placeholder:focus {
  outline: 2px solid #16a085;
  outline-offset: -2px;
}
.ivid-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.9;
  z-index: 1;
}
.ivid-placeholder:hover .ivid-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 1;
}
.ivid-play-btn svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.ivid-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.ivid-fallback {
  padding: 10px 16px;
  text-align: center;
  font-size: 0.85rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}
.ivid-fallback a {
  color: #16a085;
  text-decoration: underline;
  font-weight: 500;
}
.ivid-fallback a:hover {
  color: #0e7c61;
}

@media (max-width: 600px) {
  .ivid-header {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .ivid-description {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

@media (prefers-color-scheme: dark) {
  .iot-video-embed {
    border-color: #374151;
    background: #1f2937;
  }
  .ivid-description {
    color: #d1d5db;
    border-bottom-color: #374151;
  }
  .ivid-fallback {
    background: #1f2937;
    border-top-color: #374151;
  }
}
/* =============================================
   Landing Pages
   Scoped overrides for the homepage and browse-modules pages.
   ============================================= */

body.iotclass-homepage,
body.iotclass-modules-landing {
  --landing-bg: var(--flat-surface, #ffffff);
  --landing-surface: var(--flat-surface, #ffffff);
  --landing-surface-hover: var(--flat-surface-hover, #f7f8fa);
  --landing-border: var(--flat-border, #dbdcdd);
  --landing-text: var(--flat-text, #21242c);
  --landing-muted: var(--flat-text-muted, #475774);
  --landing-subtle: var(--flat-text-subtle, #646b7a);
  --landing-accent: var(--flat-accent, #1865f2);
  --landing-content-width: 1120px;
  background: var(--landing-bg);
  color: var(--landing-text);
}
body.iotclass-homepage {
  --landing-bg: var(--flat-surface, #ffffff);
  --landing-surface: var(--flat-surface, #ffffff);
  --landing-surface-hover: var(--flat-surface-hover, #f7f8fa);
  --landing-border: var(--flat-border, #dbdcdd);
  --landing-text: var(--flat-text, #21242c);
  --landing-muted: var(--flat-text-muted, #475774);
  --landing-subtle: var(--flat-text-subtle, #646b7a);
  --landing-accent: var(--flat-accent, #1865f2);
  --landing-content-width: 1120px;
  background: var(--landing-bg);
}
body.iotclass-homepage #quarto-header,
body.iotclass-homepage #title-block-header,
body.iotclass-homepage footer.footer,
body.iotclass-homepage .iotclass-user-status,
body.iotclass-homepage #content-flag-btn,
body.iotclass-homepage #content-flag-modal,
body.iotclass-modules-landing #quarto-header,
body.iotclass-modules-landing #title-block-header,
body.iotclass-modules-landing footer.footer,
body.iotclass-modules-landing .iotclass-user-status,
body.iotclass-modules-landing #content-flag-btn,
body.iotclass-modules-landing #content-flag-modal {
  display: none !important;
}
body.iotclass-homepage .page-layout-custom,
body.iotclass-homepage #quarto-content,
body.iotclass-modules-landing .page-layout-custom,
body.iotclass-modules-landing #quarto-content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
}
body.iotclass-homepage #quarto-content,
body.iotclass-modules-landing #quarto-content {
  gap: 0;
}
body.iotclass-homepage .skip-link:not(:focus):not(:focus-visible),
body.iotclass-modules-landing .skip-link:not(:focus):not(:focus-visible) {
  top: -120px;
}
body.iotclass-homepage .landing-navbar,
body.iotclass-modules-landing .landing-navbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  padding: 10px 28px;
  background: var(--landing-bg);
  border-bottom: 1px solid var(--landing-border);
  font-size: 16px;
}
body.iotclass-homepage .landing-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
}
body.iotclass-modules-landing .landing-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
}
/* /landing/ header parity with homepage: escape the constrained quarto page
   container so the navbar + beta banner run full-bleed,
exactly like the
   homepage header (they share identical markup; only this wrapper differed). */
body.iotclass-modules-landing {
  overflow-x: clip;
}
body.iotclass-modules-landing .landing-navbar,
body.iotclass-modules-landing .construction-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.iotclass-modules-landing .landing-navbar {
  padding: 10px 28px;
}
body.iotclass-homepage .landing-nav-logo,
body.iotclass-modules-landing .landing-nav-logo {
  display: block;
  line-height: 0;
  text-decoration: none;
}
body.iotclass-homepage .landing-nav-logo img,
body.iotclass-modules-landing .landing-nav-logo img {
  display: block;
  width: auto;
  height: 34px;
  border-radius: 4px !important;
  box-shadow: none !important;
}
body.iotclass-homepage .landing-nav-toggle,
body.iotclass-modules-landing .landing-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--landing-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--landing-text);
  cursor: pointer;
}
body.iotclass-homepage .landing-nav-toggle:hover,
body.iotclass-modules-landing .landing-nav-toggle:hover {
  border-color: #c7c9cc;
  background: #f7f8fa;
}
body.iotclass-homepage .landing-nav-toggle:focus-visible,
body.iotclass-modules-landing .landing-nav-toggle:focus-visible {
  outline: 3px solid rgba(24, 101, 242, 0.28);
  outline-offset: 2px;
}
body.iotclass-homepage .landing-nav-toggle-lines,
body.iotclass-homepage .landing-nav-toggle-lines::before,
body.iotclass-homepage .landing-nav-toggle-lines::after,
body.iotclass-modules-landing .landing-nav-toggle-lines,
body.iotclass-modules-landing .landing-nav-toggle-lines::before,
body.iotclass-modules-landing .landing-nav-toggle-lines::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}
body.iotclass-homepage .landing-nav-toggle-lines,
body.iotclass-modules-landing .landing-nav-toggle-lines {
  position: relative;
}
body.iotclass-homepage .landing-nav-toggle-lines::before,
body.iotclass-homepage .landing-nav-toggle-lines::after,
body.iotclass-modules-landing .landing-nav-toggle-lines::before,
body.iotclass-modules-landing .landing-nav-toggle-lines::after {
  position: absolute;
  left: 0;
}
body.iotclass-homepage .landing-nav-toggle-lines::before,
body.iotclass-modules-landing .landing-nav-toggle-lines::before {
  top: -6px;
}
body.iotclass-homepage .landing-nav-toggle-lines::after,
body.iotclass-modules-landing .landing-nav-toggle-lines::after {
  top: 6px;
}
body.iotclass-homepage .landing-nav-center,
body.iotclass-modules-landing .landing-nav-center {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 22px;
  min-width: 0;
}
body.iotclass-homepage .landing-nav-center a,
body.iotclass-modules-landing .landing-nav-center a {
  color: var(--landing-muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
body.iotclass-homepage .landing-nav-center a:hover,
body.iotclass-modules-landing .landing-nav-center a:hover,
body.iotclass-modules-landing .landing-nav-active {
  color: var(--landing-accent);
}
body.iotclass-homepage .landing-nav-center a:hover {
  color: var(--landing-accent);
}
body.iotclass-homepage .landing-nav-right,
body.iotclass-modules-landing .landing-nav-right {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}
body.iotclass-homepage .landing-nav-login-btn,
body.iotclass-modules-landing .landing-nav-login-btn {
  min-height: 34px;
  padding: 8px 18px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #f1f3f5;
  color: var(--landing-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.iotclass-homepage .landing-nav-login-btn {
  border: 1px solid #cfd4da;
  background: #f1f3f5;
  color: var(--landing-text);
}
body.iotclass-homepage .landing-nav-login-btn:hover,
body.iotclass-modules-landing .landing-nav-login-btn:hover {
  background: #e7ebf0;
}
body.iotclass-homepage .landing-nav-login-btn:hover {
  background: #e7ebf0;
}
body.iotclass-homepage .construction-banner,
body.iotclass-modules-landing .construction-banner {
  width: 100%;
  padding: 12px 20px;
  background: #ffde21;
  color: #000000;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}
body.iotclass-homepage .construction-banner-label {
  margin-right: 10px;
  font-weight: 800;
}
body.iotclass-modules-landing .construction-banner-label {
  margin-right: 10px;
  font-weight: 800;
}
body.iotclass-homepage .content-block {
  max-width: var(--landing-content-width);
  margin: 0 auto;
  padding: 0 30px;
  overflow-x: clip;
  overflow-y: visible;
}
body.iotclass-homepage .hero-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 30px;
  margin-bottom: 0;
  text-align: center;
}
body.iotclass-homepage .hero-banner:first-of-type {
  padding-top: 58px;
  padding-bottom: 48px;
}
body.iotclass-homepage .hero-banner h1 {
  margin-top: 10px;
  margin-bottom: 40px;
  padding-left: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--landing-text);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
}
body.iotclass-homepage .hero-banner h1 {
  margin-bottom: 24px;
  font-size: clamp(42px, 7vw, 72px);
  letter-spacing: 0;
}
body.iotclass-homepage .hero-banner h1::before,
body.iotclass-homepage .gallery-header::before {
  content: none;
  display: none;
}
body.iotclass-homepage .hero-banner p {
  max-width: 75%;
  margin: 0 auto 40px;
  color: var(--landing-muted);
  font-size: 20px;
  line-height: 1.6;
}
body.iotclass-homepage .landing-home-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
body.iotclass-homepage .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 165px;
  padding: 20px 48px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}
body.iotclass-homepage .btn-action-primary {
  background: var(--landing-accent);
  color: #ffffff !important;
  font-weight: 700;
  line-height: 20px;
}
body.iotclass-homepage .btn-action-primary:hover {
  background: #35acf0;
  color: #f9fafb !important;
  text-decoration: none;
}
body.iotclass-homepage .btn-action-secondary {
  border: 1px solid #cfd4da;
  background: #f1f3f5;
  color: var(--landing-text) !important;
  font-weight: 700;
  line-height: 20px;
}
body.iotclass-homepage .btn-action-secondary:hover {
  border-color: #c7c9cc;
  background: #e7ebf0;
  color: var(--landing-text) !important;
  text-decoration: none;
}
body.iotclass-homepage .landing-navbar a::after,
body.iotclass-homepage .btn-action::after,
body.iotclass-homepage .gallery-card::after,
body.iotclass-homepage .mastery-card::after,
body.iotclass-homepage .platform-card::after,
body.iotclass-homepage .site-footer a::after,
body.iotclass-modules-landing .landing-navbar a::after,
body.iotclass-modules-landing .part-card::after,
body.iotclass-modules-landing .site-footer a::after {
  content: none !important;
  display: none !important;
}
body.iotclass-homepage #continue-reading-container {
  max-width: var(--landing-content-width);
  margin: 20px auto;
  padding: 0 20px;
}
body.iotclass-homepage .platform-section {
  --segment-accent: var(--landing-accent);
  --segment-tint: #f3f8fc;
  --platform-accent: var(--segment-accent);
  max-width: var(--landing-content-width);
  margin: 56px auto;
  padding: 0 30px;
}
body.iotclass-homepage .platform-section--intro {
  margin-top: 26px;
}
body.iotclass-homepage .segment-orient {
  --segment-accent: #546e7a;
  --segment-tint: #eef3f5;
}
body.iotclass-homepage .segment-learn {
  --segment-accent: #8b0000;
  --segment-tint: #f9ecec;
}
body.iotclass-homepage .segment-practice {
  --segment-accent: #1976d2;
  --segment-tint: #eaf2fc;
}
body.iotclass-homepage .segment-books {
  --segment-accent: #9a6f00;
  --segment-tint: #fff8db;
}
body.iotclass-homepage .segment-design {
  --segment-accent: #546e7a;
  --segment-tint: #eef3f5;
}
body.iotclass-homepage .platform-section-header {
  max-width: 780px;
  margin: 0 auto 24px;
  text-align: center;
}
body.iotclass-homepage .platform-kicker,
body.iotclass-homepage .platform-card-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-left: 3px solid var(--platform-accent, var(--landing-accent));
  padding-left: 9px;
  color: var(--platform-accent, var(--landing-accent));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.iotclass-homepage .platform-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.iotclass-homepage .platform-label-row--left {
  justify-content: flex-start;
}
body.iotclass-homepage .platform-status-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid #e2b400;
  border-radius: 999px;
  background: #fff3bf;
  color: #5c4300;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.iotclass-homepage .platform-section-header h2 {
  margin: 12px 0 10px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--landing-text);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
}
body.iotclass-homepage .platform-section-header h2::before {
  content: none;
  display: none;
}
body.iotclass-homepage .platform-section-header p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 1rem;
  line-height: 1.6;
}
body.iotclass-homepage .learning-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
body.iotclass-homepage .learning-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--landing-border);
  border-top: 4px solid var(--segment-accent);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--segment-tint) 0%, #ffffff 78%);
  color: inherit;
  text-align: left;
  text-decoration: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .learning-step:hover {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(180deg, var(--segment-tint) 0%, var(--landing-surface-hover) 100%);
}
body.iotclass-homepage .learning-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--segment-accent);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}
body.iotclass-homepage .learning-step-title {
  align-self: center;
  color: var(--landing-text);
  font-size: 1rem;
  font-weight: 800;
}
body.iotclass-homepage .learning-step-copy {
  grid-column: 1 / -1;
  color: var(--landing-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
body.iotclass-homepage .platform-grid {
  display: grid;
  gap: 18px;
}
body.iotclass-homepage .platform-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.iotclass-homepage .platform-card,
body.iotclass-homepage .platform-feature-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 22px;
  border: 1px solid var(--landing-border);
  border-top: 4px solid var(--platform-accent, var(--landing-accent));
  border-radius: 8px;
  background: linear-gradient(180deg, var(--segment-tint, #f8fafc) 0%, var(--landing-surface) 78%);
  color: inherit;
  text-align: left;
  text-decoration: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .platform-card:hover {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(
    180deg,
    var(--segment-tint, #f8fafc) 0%,
    var(--landing-surface-hover) 100%
  );
}
body.iotclass-homepage .platform-card h3,
body.iotclass-homepage .platform-feature-card h3 {
  margin: 14px 0 10px;
  color: var(--landing-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}
body.iotclass-homepage .platform-card p,
body.iotclass-homepage .platform-feature-card p {
  flex: 1;
  margin: 0 0 18px;
  color: var(--landing-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}
body.iotclass-homepage .platform-card-link {
  margin-top: auto;
  color: var(--platform-accent, var(--landing-accent));
  font-size: 0.9rem;
  font-weight: 700;
}
body.iotclass-homepage .platform-card-note {
  margin-top: auto;
  color: var(--landing-subtle);
  font-size: 0.9rem;
  font-weight: 700;
}
body.iotclass-homepage .platform-card--static {
  cursor: default;
}
body.iotclass-homepage .platform-card--static:hover {
  transform: none;
  border-color: var(--landing-border);
  background: linear-gradient(180deg, var(--segment-tint, #f8fafc) 0%, var(--landing-surface) 78%);
}
body.iotclass-homepage .platform-section--split {
  margin-top: 42px;
}
body.iotclass-homepage .platform-feature-card {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.85fr);
  align-items: center;
  gap: 24px;
}
body.iotclass-homepage .platform-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.iotclass-homepage .platform-feature-list span {
  border: 1px solid #d9dee5;
  border-radius: 6px;
  background: #f7f8fa;
  color: var(--landing-text);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 10px 12px;
  text-align: center;
}
body.iotclass-homepage .gallery-section {
  --gallery-accent: var(--segment-accent);
  padding: 40px 20px 0;
  text-align: center;
}
body.iotclass-homepage .gallery-header {
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--landing-text);
  font-size: 2rem;
  font-weight: 700;
}
body.iotclass-homepage .gallery-subheader {
  max-width: 600px;
  margin: 0 auto;
  color: var(--landing-muted);
  font-size: 1.1rem;
}
body.iotclass-homepage .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 100%;
  margin: 34px auto 0;
  padding: 0;
}
body.iotclass-homepage .gallery-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--landing-border);
  border-top: 4px solid var(--gallery-accent, var(--segment-accent));
  border-radius: 8px;
  background: linear-gradient(180deg, var(--segment-tint, #f8fafc) 0%, var(--landing-surface) 78%);
  color: inherit;
  text-align: left;
  text-decoration: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .gallery-card:hover {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(
    180deg,
    var(--segment-tint, #f8fafc) 0%,
    var(--landing-surface-hover) 100%
  );
}
body.iotclass-homepage .gallery-card * {
  pointer-events: none;
}
body.iotclass-homepage .gallery-icon {
  align-self: flex-start;
  margin-bottom: 18px;
  padding-left: 10px;
  border-left: 4px solid currentColor;
  color: var(--gallery-accent, var(--landing-accent)) !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
body.iotclass-homepage .gallery-title {
  margin: 0 0 12px;
  color: var(--landing-text);
  font-size: 20px;
  font-weight: 700;
}
body.iotclass-homepage .gallery-description {
  flex-grow: 1;
  margin: 0 0 15px;
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.6;
}
body.iotclass-homepage .gallery-count {
  padding-left: 10px;
  margin-bottom: 15px;
  border-left: 3px solid var(--gallery-accent, var(--landing-accent));
  color: var(--landing-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.iotclass-homepage .gallery-link {
  margin-top: auto;
  color: var(--gallery-accent, var(--landing-accent));
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
body.iotclass-homepage .mastery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 100%;
  margin: 2rem auto 0;
  padding: 0;
}
body.iotclass-homepage .mastery-grid p {
  display: contents;
}
body.iotclass-homepage .mastery-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 140px;
  padding: 1.25rem;
  border: 1px solid var(--landing-border);
  border-left: 5px solid var(--card-accent, var(--segment-accent));
  border-radius: 8px;
  background: linear-gradient(180deg, var(--card-tint, var(--segment-tint)) 0%, #ffffff 85%);
  text-align: left;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .mastery-card:hover {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(
    180deg,
    var(--card-tint, var(--segment-tint)) 0%,
    var(--landing-surface-hover) 100%
  );
}
body.iotclass-homepage .mastery-title {
  margin-bottom: 8px;
  color: var(--landing-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
body.iotclass-homepage .mastery-desc {
  color: var(--landing-muted);
  font-size: 13px;
  line-height: 1.5;
}
body.iotclass-modules-landing .modules-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 30px 50px;
}
body.iotclass-modules-landing .module-section {
  margin-bottom: 25px;
}
body.iotclass-modules-landing .module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--module-color, var(--landing-accent));
}
body.iotclass-modules-landing .module-header h2 {
  margin: 0;
  color: var(--landing-text) !important;
  font-size: 1.1rem;
  font-weight: 600;
}
body.iotclass-modules-landing .module-badge {
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--module-color, var(--landing-accent));
  color: var(--module-text, #ffffff);
  font-size: 0.7rem;
  font-weight: 600;
}
body.iotclass-modules-landing .module-desc {
  margin-left: auto;
  color: var(--landing-subtle);
  font-size: 0.8rem;
  font-style: italic;
}
body.iotclass-modules-landing .parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
body.iotclass-modules-landing .part-card {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--landing-border);
  border-left: 3px solid var(--part-color, var(--module-color, var(--landing-accent)));
  border-radius: 8px;
  background: var(--landing-surface);
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
body.iotclass-modules-landing .part-card:hover {
  transform: translateY(-1px);
  border-color: #c7c9cc;
  background: var(--landing-surface-hover);
}
body.iotclass-modules-landing .part-card h3 {
  margin: 0 0 4px;
  color: var(--landing-text) !important;
  font-size: 0.9rem;
  font-weight: 500;
}
body.iotclass-modules-landing .part-card p {
  margin: 0 0 6px;
  color: var(--landing-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}
body.iotclass-modules-landing .part-card .chapters {
  color: var(--part-color, var(--module-color, var(--landing-accent)));
  font-size: 0.7rem;
  font-weight: 600;
}
body.iotclass-homepage .site-footer,
body.iotclass-modules-landing .site-footer {
  margin-top: 60px;
  padding: 40px 20px 30px;
  border-top: 1px solid var(--landing-surface);
  background: #2d3139;
  color: rgba(255, 255, 255, 0.7);
}
body.iotclass-homepage .site-footer .footer-container,
body.iotclass-modules-landing .site-footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
}
body.iotclass-homepage .site-footer .footer-columns,
body.iotclass-modules-landing .site-footer .footer-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 30px;
}
body.iotclass-homepage .site-footer .footer-logo-container,
body.iotclass-modules-landing .site-footer .footer-logo-container {
  display: flex;
  align-items: center;
}
body.iotclass-homepage .site-footer .footer-logo,
body.iotclass-modules-landing .site-footer .footer-logo {
  width: auto;
  height: 200px;
  border-radius: 6px;
}
body.iotclass-homepage .site-footer .footer-column,
body.iotclass-modules-landing .site-footer .footer-column {
  min-width: 150px;
}
body.iotclass-homepage .site-footer .footer-column h4,
body.iotclass-modules-landing .site-footer .footer-column h4 {
  margin: 0 0 15px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
body.iotclass-homepage .site-footer .footer-column ul,
body.iotclass-modules-landing .site-footer .footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.iotclass-homepage .site-footer .footer-column li,
body.iotclass-modules-landing .site-footer .footer-column li {
  margin-bottom: 10px;
}
body.iotclass-homepage .site-footer a,
body.iotclass-modules-landing .site-footer a {
  color: #d8dde6;
  font-size: 14px;
  text-decoration: none;
}
body.iotclass-homepage .site-footer a:hover,
body.iotclass-modules-landing .site-footer a:hover {
  color: #ffffff;
}
body.iotclass-homepage .site-footer .footer-bottom,
body.iotclass-modules-landing .site-footer .footer-bottom {
  padding-top: 20px;
  border-top: 1px solid var(--landing-surface);
}
body.iotclass-homepage .site-footer .footer-bottom-content,
body.iotclass-modules-landing .site-footer .footer-bottom-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
body.iotclass-homepage .site-footer .footer-copyright,
body.iotclass-modules-landing .site-footer .footer-copyright {
  margin: 0;
  color: #d8dde6;
  font-size: 13px;
}
body.iotclass-homepage .site-footer .footer-legal-links,
body.iotclass-modules-landing .site-footer .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
body.iotclass-homepage .site-footer .footer-legal-links a,
body.iotclass-modules-landing .site-footer .footer-legal-links a {
  font-size: 13px;
}

@media (min-width: 900px) {
  body.iotclass-homepage .content-block {
    padding: 0 50px;
  }
}

@media (min-width: 1200px) {
  body.iotclass-homepage .content-block,
  body.iotclass-homepage .platform-section {
    padding: 0;
  }
}

@media (max-width: 900px) {
  body.iotclass-homepage .platform-grid--four,
  body.iotclass-homepage .platform-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.iotclass-homepage .platform-feature-card {
    grid-template-columns: 1fr;
  }

  body.iotclass-homepage .learning-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.iotclass-homepage .mastery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  body.iotclass-homepage .landing-navbar,
  body.iotclass-modules-landing .landing-navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 15px;
  }

  body.iotclass-homepage .landing-nav-logo img,
  body.iotclass-modules-landing .landing-nav-logo img {
    height: 28px;
  }

  body.iotclass-homepage .landing-nav-center,
  body.iotclass-modules-landing .landing-nav-center {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0;
  }

  body.iotclass-homepage .landing-nav-center a,
  body.iotclass-modules-landing .landing-nav-center a {
    font-size: 0.78rem;
  }

  body.iotclass-homepage .landing-nav-login-btn,
  body.iotclass-modules-landing .landing-nav-login-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready,
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    align-items: center;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready .landing-nav-toggle,
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready .landing-nav-toggle {
    display: inline-flex;
    justify-self: end;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready .landing-nav-center,
  body.iotclass-homepage .landing-navbar.landing-nav-ready .landing-nav-right,
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready .landing-nav-center,
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready .landing-nav-right {
    display: none;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center,
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center {
    display: flex;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a,
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:hover,
  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:focus-visible,
  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-active,
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:hover,
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:focus-visible,
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-active {
    border-color: var(--landing-border);
    background: #f7f8fa;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready[data-nav-open="true"] .landing-nav-right,
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-right {
    display: flex;
    grid-column: 1 / -1;
    justify-content: stretch;
    width: 100%;
    padding-top: 4px;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-login-btn,
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-login-btn {
    width: 100%;
  }

  body.iotclass-homepage .construction-banner,
  body.iotclass-modules-landing .construction-banner {
    padding: 10px 15px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
  }

  body.iotclass-homepage .hero-banner h1,
  body.iotclass-homepage .hero-banner h2 {
    margin-bottom: 25px;
    font-size: 32px;
  }

  body.iotclass-homepage .hero-banner p {
    max-width: 95%;
    margin-bottom: 25px;
    font-size: 16px;
  }

  body.iotclass-homepage .btn-action {
    min-width: 140px;
    padding: 14px 28px;
    font-size: 14px;
  }

  body.iotclass-homepage .platform-section {
    margin: 38px auto;
    padding: 0 18px;
  }

  body.iotclass-homepage .platform-section-header h2 {
    font-size: 28px;
  }

  body.iotclass-homepage .platform-card,
  body.iotclass-homepage .platform-feature-card {
    min-height: 0;
    padding: 18px;
  }

  body.iotclass-modules-landing .modules-container {
    padding: 15px;
  }

  body.iotclass-modules-landing .parts-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }

  body.iotclass-modules-landing .module-header {
    flex-wrap: wrap;
  }

  body.iotclass-modules-landing .module-desc {
    width: 100%;
    margin-top: 5px;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  body.iotclass-homepage .platform-grid--four,
  body.iotclass-homepage .platform-grid--three,
  body.iotclass-homepage .learning-flow,
  body.iotclass-homepage .platform-feature-list {
    grid-template-columns: 1fr;
  }

  body.iotclass-homepage .mastery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  body.iotclass-homepage .mastery-card {
    min-height: 120px;
    padding: 1rem;
  }

  body.iotclass-homepage .mastery-title {
    font-size: 14px;
  }

  body.iotclass-homepage .mastery-desc {
    font-size: 12px;
  }

  body.iotclass-homepage .site-footer .footer-columns,
  body.iotclass-modules-landing .site-footer .footer-columns {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

  body.iotclass-homepage .site-footer .footer-logo-container,
  body.iotclass-modules-landing .site-footer .footer-logo-container {
    justify-content: center;
  }

  body.iotclass-homepage .site-footer .footer-logo,
  body.iotclass-modules-landing .site-footer .footer-logo {
    height: 120px;
  }

  body.iotclass-homepage .site-footer .footer-column,
  body.iotclass-modules-landing .site-footer .footer-column {
    min-width: auto;
  }

  body.iotclass-homepage .site-footer .footer-bottom-content,
  body.iotclass-modules-landing .site-footer .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }

  body.iotclass-homepage .site-footer .footer-legal-links,
  body.iotclass-modules-landing .site-footer .footer-legal-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  body.iotclass-homepage .gallery-grid {
    grid-template-columns: 1fr;
    padding: 0 15px;
    margin: 20px auto;
  }

  body.iotclass-homepage .gallery-card {
    min-height: 200px;
    padding: 20px;
  }
}
/* ==========================================================
   Readable Code,
Config,
and Worked-Example Blocks
   ----------------------------------------------------------
   Course pages include real code,
CLI snippets,
router config,
calculations,
and ASCII timing diagrams. These final overrides
   keep those blocks readable on narrow screens and stop long
   plain-text examples from looking like broken raw output.
   ========================================================== */

main div.sourceCode,
main pre {
  max-width: 100%;
  border: 1px solid rgba(21, 94, 43, 0.14);
  border-left: 4px solid #1b7f5a;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(27, 127, 90, 0.055), transparent 42%),
    linear-gradient(135deg, #fbfdfc 0%, #f6faf8 100%);
  box-shadow: 0 10px 24px rgba(21, 50, 69, 0.08);
  margin: 1.1rem 0 1.4rem;
}
main div.sourceCode {
  padding: 0;
  overflow: hidden;
}
main div.sourceCode pre,
main pre:not(.sourceCode) {
  padding: 1rem 1.15rem;
}
main pre,
main pre code {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
main pre {
  overflow-x: auto;
  line-height: 1.55;
  font-size: clamp(0.78rem, 0.73rem + 0.2vw, 0.9rem);
}
main div.sourceCode pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
main .callout-body pre,
main .callout-body div.sourceCode {
  margin: 0.85rem 0;
}

@media (max-width: 640px) {
  main div.sourceCode pre,
  main pre:not(.sourceCode) {
    padding: 0.85rem;
  }

  main pre {
    font-size: 0.72rem;
    line-height: 1.5;
  }
}
/* ==========================================================
   Khan-Inspired Flat Chapter Surfaces
   ----------------------------------------------------------
   Shared chapter/book pages should read like a clean learning
   surface: white background,
subtle borders,
flat stacked blocks,
and figures without decorative panels.
   ========================================================== */

:root {
  --learn-page-bg: var(--flat-surface, #ffffff);
  --learn-surface: var(--flat-surface, #ffffff);
  --learn-surface-muted: var(--flat-surface-muted, #f7f8fa);
  --learn-border: var(--flat-border, #dbdcdd);
  --learn-border-strong: var(--flat-border-strong, #c7c9cc);
  --learn-text: var(--flat-text, #21242c);
  --learn-text-muted: var(--flat-text-muted, #475774);
  --learn-blue: var(--flat-accent, #1865f2);
  --learn-blue-soft: #edf3fe;
  --learn-green: #008f7a;
  --learn-green-soft: #e5f8f4;
  --learn-amber: #b66000;
  --learn-amber-soft: #fff4e3;
  --learn-red: #b42318;
  --learn-red-soft: #fff1f2;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) {
  background: var(--learn-page-bg);
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-content,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-content {
  background: var(--learn-page-bg);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content {
  background: var(--learn-surface);
  color: var(--learn-text);
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--learn-border);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 1.1rem;
  margin: 0 0 1.75rem;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block
  .title,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #title-block-header .title,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block
  .title,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #title-block-header .title {
  color: var(--learn-text) !important;
  font-size: clamp(1.85rem, 1.45rem + 1.35vw, 2.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header
  .title
  a,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header
  .title
  .chapter-number,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header
  .title
  .chapter-number {
  color: var(--learn-text) !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h4,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h4 {
  color: var(--learn-text);
  background: transparent;
  border-left: 0;
  box-shadow: none;
  letter-spacing: 0;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1:not(.title),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1:not(.title) {
  border-bottom: 1px solid var(--learn-border);
  border-radius: 0;
  padding: 0 0 0.7rem;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2 {
  border-bottom: 1px solid var(--learn-border);
  padding-bottom: 0.55rem;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3 {
  padding-left: 0;
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:hover {
  color: var(--learn-text);
  border-left-color: transparent;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content a:hover::after,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  a:hover::after,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content a:hover::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar a:hover::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover::after {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar {
  background: var(--learn-surface) !important;
  border-right: 1px solid var(--learn-border);
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a {
  border-left: 3px solid transparent;
  border-radius: 6px;
  color: var(--learn-text-muted);
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a:hover {
  background: var(--learn-blue-soft);
  color: var(--learn-blue);
  border-left-color: var(--learn-blue);
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  .sidebar-navigation
  a.active,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a.active {
  background: var(--learn-blue-soft) !important;
  color: #1b50b3 !important;
  border-left-color: var(--pc-main, var(--learn-blue)) !important;
  box-shadow: none !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active
  *,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active
  * {
  color: #1b50b3 !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-margin-sidebar,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-margin-sidebar {
  background: transparent !important;
  box-shadow: none !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a {
  color: var(--learn-text-muted);
  border-left: 3px solid transparent;
  border-radius: 6px;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active {
  background: var(--learn-blue-soft);
  color: var(--learn-blue);
  border-left-color: var(--learn-blue);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main pre,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main pre {
  background: var(--learn-surface-muted);
  border: 1px solid var(--learn-border);
  border-left: 4px solid var(--learn-green);
  border-radius: 8px;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode pre,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode pre {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main p code,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main li code,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main p code,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main li code {
  background: var(--learn-surface-muted);
  border: 1px solid var(--learn-border);
  border-radius: 4px;
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main table,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main table {
  border: 1px solid var(--learn-border);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead {
  background: var(--learn-surface-muted);
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead::after {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead th,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead th {
  border-bottom: 1px solid var(--learn-border);
  color: var(--learn-text);
  letter-spacing: 0;
  text-transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover {
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover {
  background: var(--learn-blue-soft);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout {
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-left: 4px solid var(--learn-blue);
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:hover {
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-note,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-note {
  border-left-color: var(--learn-blue);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-tip,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-tip {
  border-left-color: var(--learn-green);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-warning,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-warning {
  border-left-color: var(--learn-amber);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-important,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-caution,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-important,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-caution {
  border-left-color: var(--learn-red);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote {
  background: var(--learn-surface-muted);
  border: 1px solid var(--learn-border);
  border-left: 4px solid var(--learn-green);
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  main
  .quarto-figure
  img.figure-img,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  main
  figure.quarto-float
  img,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main img,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  main
  .quarto-figure
  img.figure-img,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure.quarto-float img,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img:hover,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main img:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img:hover,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main img:hover {
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figcaption,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .figure-caption,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figcaption,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .figure-caption {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--learn-text-muted);
  display: block;
  padding: 0;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .browser-lab-card,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .wiring-map,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .browser-lab-card,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .wiring-map {
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 8px;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .nav-page,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .nav-page {
  background: var(--learn-surface);
  border-top: 1px solid var(--learn-border);
  box-shadow: none;
}

@media (max-width: 768px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block {
    padding: 0 0 0.85rem;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block
    .title,
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header
    .title,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block
    .title,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #title-block-header .title {
    font-size: 1.55rem;
  }
}
/* CEO interim component CSS removed 2026-07-09: component pack (design-system.css) owns code chrome now. */

/* Must stay LAST: on /landing/ the banner's generic width:100% rule (shared with
   homepage) would otherwise re-shrink it to the quarto container width. */
body.iotclass-modules-landing div.construction-banner {
  width: 100vw;
}

/* ==== LAYER 2: design system (authoritative) ==== */
/* ============================================================================
   IoTClass Design System — PILOT (privacy modules)
   Goal: Khan-Academy-style — flat, modern, elegant, content-forward.
   Strategy: a token-based override layer loaded AFTER iotclass.css.
   It flattens depth (shadows/gradients), refines type/spacing, and uses the
   per-module accent (--pc-main) sparingly. Scoped to pilot books for now;
   promote to global once approved.
   ============================================================================ */

:root {
  --ds-font:
    "Inter", "Inter Fallback", "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --ds-ink: #1f2933; /* primary text */
  --ds-ink-soft: #52606d; /* secondary text */
  --ds-ink-faint: #7b8794; /* captions / meta */
  --ds-line: #e6e8eb; /* hairlines */
  --ds-line-strong: #d2d6dc;
  --ds-surface: #ffffff;
  --ds-surface-alt: #f7f9fb; /* subtle panels */
  --ds-accent: var(--pc-main, #8e24aa);
  --ds-accent-link: color-mix(in srgb, var(--ds-accent) 52%, black);
  --ds-radius: 12px;
  --ds-radius-sm: 8px;
  --ds-measure: 46rem; /* comfortable reading width */
  --ds-block-width: 100%; /* framed blocks fill the chapter block column */
}

/* ---- Base typography ---------------------------------------------------- */
body {
  font-family: var(--ds-font) !important;
  color: var(--ds-ink) !important;
  background: var(--ds-surface) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.005em;
}
#quarto-document-content p,
#quarto-document-content li,
#quarto-document-content > ul,
#quarto-document-content > ol,
#quarto-document-content blockquote {
  max-width: var(--ds-measure);
}
#quarto-document-content p {
  margin: 0 0 1.15rem;
}

h1,
h2,
h3,
h4,
h5,
.quarto-title-block .title {
  font-family: var(--ds-font) !important;
  color: var(--ds-ink) !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
  font-weight: 700 !important;
}
#quarto-document-content h2 {
  font-size: 1.6rem !important;
  margin-top: 2.6rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ds-line) !important;
}
#quarto-document-content h3 {
  font-size: 1.25rem !important;
  margin-top: 1.9rem !important;
}
#quarto-document-content h2::after {
  /* slim accent tick under h2 */
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--ds-accent);
  margin-top: 0.4rem;
  margin-bottom: -0.42rem;
}

a,
a:visited {
  color: var(--ds-accent-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Flatten depth (the "modern/non-3D" ask) ---------------------------- */
.card,
.callout,
.panel,
.sidebar,
#quarto-sidebar,
.sidebar-item,
.quarto-title-block,
figure,
.iotclass-card,
blockquote,
#quarto-document-content table,
.nav-tabs,
.tab-content {
  box-shadow: none !important;
  background-image: none !important; /* kill gradients */
  text-shadow: none !important;
}

/* ---- Page chrome & layout ---------------------------------------------- */
.quarto-title-block .title {
  font-size: 2.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.35rem;
}
#title-block-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ds-line);
}
main.content {
  padding-top: 1.5rem;
}

/* ---- Width discipline ---------------------------------------------------
   Founder rule: running prose keeps the reading measure; every framed block
   uses one shared block-column width so pages have exactly two visible tiers. */
#quarto-document-content
  :where(
    .callout,
    section[data-iot-panel-category],
    div.sourceCode,
    pre,
    details.iot-code-disclosure,
    figure,
    table,
    .table,
    iot-embed,
    iot-knowledge-check,
    .inline-knowledge-check,
    .iot-child-links,
    .iot-lab-identity-band,
    .cell-output-display,
    .observablehq,
    [id^="ojs-cell"],
    iot-matching-quiz,
    iot-ordering-quiz,
    iot-label-quiz,
    iot-code-quiz
  ) {
  box-sizing: border-box;
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

#quarto-document-content
  p:has(
    > :where(
      iot-embed,
      iot-simulator,
      iot-animation,
      iot-video,
      iot-resource,
      iot-knowledge-check,
      iot-matching-quiz,
      iot-ordering-quiz,
      iot-label-quiz,
      iot-code-quiz,
      .inline-knowledge-check
    )
  ) {
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

#quarto-document-content
  p:has(
    > :where(
      iot-embed,
      iot-simulator,
      iot-animation,
      iot-video,
      iot-resource,
      iot-knowledge-check,
      .inline-knowledge-check
    )
  )
  > :where(
    iot-embed,
    iot-simulator,
    iot-animation,
    iot-video,
    iot-resource,
    iot-knowledge-check,
    iot-matching-quiz,
    iot-ordering-quiz,
    iot-label-quiz,
    iot-code-quiz,
    .inline-knowledge-check
  ) {
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

#quarto-document-content :where(figure, .quarto-figure, figure.quarto-float, figure.figure) {
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

/* Figures render at their AUTHORED size and only shrink to fit a narrow column.
   This previously forced width: 100% !important, which stretched every diagram
   to fill the content column: on a 1920px screen a 628px figure rendered at
   1088px, a 73% upscale, and its 22px labels rendered at 38px. Because the
   estate's median figure carries 12px text on an 800px canvas, the stretch
   happened to flatter the average figure and wrecked any figure already
   authored at a readable text size -- which is why it survived so long.
   Keep max-width so narrow columns and mobile still shrink correctly. */
#quarto-document-content :where(figure img, figure svg, .quarto-figure img.figure-img) {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ---- Sidebar / nav: clean, flat, accent-aware -------------------------- */
#quarto-sidebar,
.sidebar.sidebar-navigation {
  background: var(--ds-surface) !important;
  border-right: 1px solid var(--ds-line) !important;
}
#quarto-sidebar .sidebar-item-text {
  color: var(--ds-ink-soft) !important;
  font-weight: 500;
}
#quarto-sidebar .sidebar-item a.active,
#quarto-sidebar .sidebar-link.active {
  color: var(--ds-accent) !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, var(--ds-accent) 9%, white) !important;
  border-radius: var(--ds-radius-sm);
  box-shadow: inset 3px 0 0 var(--ds-accent) !important;
}
#quarto-sidebar .sidebar-item a:hover {
  color: var(--ds-accent) !important;
}
.sidebar-title,
.sidebar-part-title {
  color: var(--ds-accent) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ---- Callouts (Summary / Key Takeaway): flat with accent edge ---------- */
.callout {
  border: 1px solid var(--ds-line) !important;
  border-left: 4px solid var(--ds-accent) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface-alt) !important;
}
.callout .callout-title,
.callout-title-container {
  font-weight: 600 !important;
  color: var(--ds-ink) !important;
}

/* Bespoke deep-author note callouts (pc-<module>-note) carry hardcoded
   off-brand hues (e.g. steel-blue). Unify them onto the flat accent edge so
   they match the standard callouts and the module color. Scoped to true note
   boxes (ends/contains "-note"); does NOT touch figures, cards, or grids. */
#quarto-document-content [class*="-note"] {
  border: 1px solid var(--ds-line) !important;
  border-left: 4px solid var(--ds-accent) !important;
  background: var(--ds-surface-alt) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: none !important;
}
#quarto-document-content [class*="-note"] strong,
#quarto-document-content [class*="-note"] b,
#quarto-document-content [class*="-note"] .pc-pbd-note-title {
  color: var(--ds-ink) !important;
}

/* ---- Figures: centered, framed, AUTO-NUMBERED ------------------------- */
#quarto-document-content {
  counter-reset: ds-fig;
}
#quarto-document-content figure,
#quarto-document-content .pc-pbd-figure,
#quarto-document-content [class*="-figure"] {
  counter-increment: ds-fig;
}

/* duplicate-figure-caption (P3 wave-3 fix, 2026-07-22): a figure authored
   with Quarto's NATIVE crossref syntax (`![caption](img){#fig-id}`) already
   bakes its own "Figure X.Y: " prefix straight into the caption text, using
   Quarto's own chapter-scoped crossref counter -- built HTML confirmed
   `<figcaption class="quarto-float-caption-bottom quarto-float-caption
   quarto-float-fig">Figure&nbsp;4.1: RFID Tag Types Compared</figcaption>`.
   That counter is entirely independent of `ds-fig` below, so the two
   systems were double-numbering every Quarto-native figure ("Figure 3.
   Figure 4.1: RFID Tag Types Compared", rfid-nfc-uwb). Opt Quarto-native
   figures out of the `ds-fig` counter entirely (both the increment and the
   injected prefix) rather than patching the 3 affected chapters -- one
   shared selector fix here covers every current and future Quarto-native
   figure estate-wide, and raw-HTML (non-crossref) figures keep their
   existing clean sequential "Figure 1.", "Figure 2." numbering unaffected
   (Quarto-native figures no longer consume a number from that sequence
   either, so it stays contiguous on mixed pages). */
#quarto-document-content figure.quarto-float-fig {
  counter-increment: none;
}

#quarto-document-content figure {
  margin: 2rem auto !important;
  text-align: center;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  padding: 1.1rem 1.1rem 0.5rem !important;
  background: var(--ds-surface) !important;
  max-width: 760px;
}
#quarto-document-content figure img,
#quarto-document-content figure svg {
  max-width: 100%;
  height: auto;
}
#quarto-document-content figcaption,
#quarto-document-content figure figcaption {
  color: var(--ds-ink-soft) !important;
  font-size: 0.92rem !important;
  line-height: 1.55;
  margin-top: 0.75rem !important;
  text-align: center !important;
}
#quarto-document-content figcaption:not(.quarto-float-caption)::before {
  content: "Figure " counter(ds-fig) ". ";
  font-weight: 700;
  color: var(--ds-accent);
}

/* ---- Knowledge Check (<iot-knowledge-check>) -------------------------- */
/* Grey panel so the quiz reads as a distinct "do this" block; the answer
   options are WHITE cards that lift off the grey (clear tap targets). */
.inline-knowledge-check,
iot-knowledge-check.inline-knowledge-check {
  background: var(--ds-surface-alt) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: none !important;
}
/* Options are already white from the component — do NOT override their
   background (that would clobber the correct/incorrect feedback colors).
   Just a hairline border so each reads as a distinct white card on the grey,
   and an accent edge on hover. */
.inline-knowledge-check .ikc-option {
  border: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}
.inline-knowledge-check .ikc-option:hover {
  border-color: var(--ds-accent) !important;
}

/* ---- Tables: flat, clean ---------------------------------------------- */
/* table-column-text-clipped-right-edge / table-column-text-overflow-clipped
   (P3 wave-5 visual-review, 2026-07-22 -- ux-design/location-awareness-indoor
   and others): a real <table> with `table-layout: auto` (the default) sizes
   each column from its own content's natural width; when the sum of those
   natural widths exceeds the space this narrower reading column gives the
   table, the excess used to be silently DISCARDED by `overflow: hidden`
   here -- no wrap fallback, no scrollbar, right-hand columns (often the
   most important one, e.g. "Recommendation"/"Suitable?") losing content
   with no visual affordance that anything was cut. DOM-measured live: the
   clipped table's own scrollWidth/clientWidth both looked "fine" (`overflow:
   hidden` on a non-scrolling element reports its OWN box size, not the
   content it discarded), but a full-viewport screenshot showed the table's
   right edge genuinely extending past the rest of the page's content
   column with text glyphs missing -- confirmed via `elementHandle.
   screenshot()`, not just a DOM measurement (that measurement is
   structurally blind to this exact failure mode). `overflow-x: auto` is
   the same fix already established for `.physfn-card` (P3 wave-3) and the
   `cix-table` family (P3 wave-5 §6.5 fix) for the identical fixed-content-
   wider-than-container shape: the reader now gets a real horizontal
   scrollbar/cue instead of a silent, invisible cut. Applies to every plain
   <table> estate-wide in one shared rule. */
#quarto-document-content table {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm);
  overflow-x: auto;
  display: block;
}
#quarto-document-content thead th {
  background: var(--ds-surface-alt) !important;
  color: var(--ds-ink) !important;
  border-bottom: 2px solid var(--ds-line-strong) !important;
}
#quarto-document-content td,
#quarto-document-content th {
  border-color: var(--ds-line) !important;
}

/* table-cell-midword-break (P2 visual-review sweep, 2026-07-22): Bootstrap's
   vendored table CSS already sets `overflow-wrap: break-word` on table
   cells, so a narrow column whose longest word doesn't fit its own line
   breaks mid-word with no hyphen mark ("Connectivity" -> "Connecti" /
   "vity"). Adding `hyphens: auto` (the site already sets lang="en" on
   <html>, which is what the browser's hyphenation dictionary keys off)
   turns that into a properly hyphenated break instead of a bare split.
   Purely cosmetic -- does not change *when* a cell wraps, only how the
   break is marked. Fixes every real <table> estate-wide in one rule. */
#quarto-document-content td,
#quarto-document-content th {
  hyphens: auto;
}

/* ledger-grid-midword-break-no-hyphen (P3 wave-3 fix, 2026-07-22): the exact
   same table-cell-midword-break mechanism above, but for the custom
   div-based "ledger" pseudo-table pattern (`<div class="<prefix>-ledger">`
   wrapping `<div>` cell children, each per-file <style> block setting
   `overflow-wrap: anywhere` on the cell divs with no `hyphens`) that this
   site uses in ~280 chapters estate-wide as an alternative to a real
   <table> -- confirmed via grep that every instance follows the identical
   `.<prefix>-ledger > div { ... overflow-wrap: anywhere; }` shape (only the
   chapter-specific class prefix changes), so a single attribute-wildcard
   selector covers all of them without 280 per-file edits. The report's
   7-chapter finding (reference-architectures) was this pattern's first
   *reported* occurrence, not its full extent -- fixed estate-wide here
   since the mechanism and the fix are identical everywhere it appears.
   `apps-depth-grid` (iot-reference-architectures-applications.qmd) is the
   one observed naming outlier that uses a "-grid" suffix instead of
   "-ledger" for the same component; listed explicitly rather than widened
   to `[class*="-grid"]`, which would also match unrelated grid classes
   (e.g. `.physfn-grid`) that already have their own overflow handling. */
#quarto-document-content [class*="-ledger"] > div,
#quarto-document-content .apps-depth-grid > div {
  hyphens: auto;
}

/* ---- Code: soft, flat -------------------------------------------------- */
#quarto-document-content pre,
#quarto-document-content code {
  background: var(--ds-surface-alt) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
}

/* ---- Depth panels (<iot-depth> web component) ------------------------- */
/* The component (shadow DOM) reads these custom properties from its host.
   Feed it the MODULE color and a white/flat palette so the depth layers are
   white cards with a full solid accent LEFT rail (set in iot-depth.js). */
iot-depth {
  --part-color: var(--pc-main, #8e24aa); /* primary accent source */
  --module-color: var(--pc-main, #8e24aa); /* fallback accent source */
  --flat-surface: #ffffff; /* panel background = white */
  --flat-border: var(--ds-line); /* hairline frame */
  --flat-text: var(--ds-ink); /* readable body text */
  /* Override the layer surfaces: WHITE cards + a full solid module-color LEFT
     rail (subtle). These vars exist only here, so non-pilot modules keep the
     original tinted layers until the design is promoted globally. */
  --iot-depth-layer-bg: #ffffff;
  --iot-depth-layer-border: var(--ds-line);
  --iot-depth-layer-rail: var(--pc-main, #8e24aa);
}

/* ---- Right "On This Page" TOC: smart auto-rule ------------------------
   Depth-authored chapters put their real headings INSIDE the <iot-depth>
   component, so Quarto's right TOC is structurally near-empty (only trailing
   Summary / See Also). Detect those pages via :has(iot-depth) and hide the
   TOC + left-anchor the reading column. FLAT chapters (no <iot-depth>) keep
   their normal right TOC and the standard 3-column layout untouched.
   The depth selector (Overview/Practitioner/Under the Hood) is the real
   on-page nav for depth chapters, so nothing useful is lost. */
body:has(iot-depth) #quarto-margin-sidebar {
  display: none !important;
}
/* Content LEFT-anchored beside the sidebar at a fixed measure; freed right
   space becomes whitespace so the sidebar↔content gap stays CONSTANT at any
   window width (no gap that grows when you widen the browser). */
body:has(iot-depth) main.content,
body:has(iot-depth) .page-columns main.content {
  grid-column: body-content-start / page-end !important;
  justify-self: start !important;
  max-width: 50rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#quarto-margin-sidebar .sidebar-toc-link {
  color: var(--ds-ink-faint) !important;
}
#quarto-margin-sidebar .sidebar-toc-link.active {
  color: var(--ds-accent) !important;
  border-left-color: var(--ds-accent) !important;
}

#quarto-margin-sidebar nav#TOC a.active .header-section-number,
nav#TOC a.active .header-section-number {
  color: var(--ds-ink, #1f2937) !important;
}

/* ---- Right TOC width +60% (200px -> 320px) -----------------------------
   On FLAT chapters the right "On this page" rail was a cramped 200px grid
   track, so multi-word heading titles wrapped. Widen the [body-end] track to
   320px; the [body-content-start] 1fr content column absorbs the difference
   (no horizontal scroll). Depth chapters span content across this track, so
   they are unaffected. Mirrors iotclass.css's >=1100px docked grid exactly. */
@media (min-width: 1100px) {
  body.docked .page-columns {
    grid-template-columns:
      [screen-start] 0px
      [screen-start-inset page-start] 325px
      [page-start-inset] 0px
      [body-start-outset] 0px
      [body-start] 1.5rem
      [body-content-start] 1fr
      [body-content-end] 1.5rem
      [body-end] 320px
      [body-end-outset] 0px
      [page-end-inset] 0px
      [page-end] 0px
      [screen-end-inset] 1rem
      [screen-end] !important;
  }
}

/* ===========================================================================
   CHROME — make the top bar / banners elegant (module color as ACCENT, not bleed)
   =========================================================================== */
/* Top navbar: white, dark text, slim module-accent top stripe (Khan-style) */
.navbar,
#quarto-header > nav.navbar,
.navbar.navbar-expand-lg {
  background: #ffffff !important;
  background-image: none !important;
  border-top: 3px solid var(--ds-accent) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}
.navbar .navbar-title,
.navbar .navbar-brand,
.navbar a,
.navbar .nav-link,
.navbar .menu-text,
.navbar-brand-container,
.navbar .quarto-navbar-tools a {
  color: var(--ds-ink) !important;
}
.navbar a:hover,
.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
  color: var(--ds-accent) !important;
}
.navbar #quarto-search input,
.navbar .aa-Input,
.navbar .aa-DetachedSearchButton {
  background: var(--ds-surface-alt) !important;
  color: var(--ds-ink-soft) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 999px !important;
}
.navbar .navbar-logo {
  filter: none !important;
  /* CLS (launch blocker B4): this <img> carries no width/height attributes, and
   * the CSS that sizes it fixes the height only. Until the bitmap arrives the
   * browser therefore has no intrinsic ratio, lays the logo out at zero width,
   * and reflows the navbar the moment it decodes. aspect-ratio supplies the
   * ratio up front, which is what a width/height attribute pair would have done.
   * 411x351 is images/general/cover.png's own pixel size -- if that file is
   * replaced, this ratio has to be replaced with it. */
  aspect-ratio: 411 / 351;
}

/* The real iotclass top bar (.iotclass-user-status): color-coded to the module,
   but dark enough that white search/status text stays WCAG AA even on frosted
   controls. JS sets an inline accent; this override keeps it flat and legible. */
.iotclass-user-status {
  background: color-mix(in srgb, var(--ds-accent) 50%, black) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-top: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-accent) 42%, black) !important;
  box-shadow: none !important;
}
.iotclass-user-status a,
.iotclass-user-status span,
.iotclass-user-status .menu-text,
.iotclass-user-status button,
.iotclass-user-status .nav-link,
.iotclass-user-status .navbar-title,
.iotclass-user-status .navbar-brand {
  color: #ffffff !important;
}
.iotclass-user-status a:hover,
.iotclass-user-status button:hover {
  color: #ffffff !important;
  opacity: 0.82;
}
/* status chip ("Guest" etc.): frosted white pill on the colored bar */
.iotclass-user-status .user-badge,
.iotclass-user-status [class*="badge"],
.iotclass-user-status [class*="status-chip"] {
  background: #ffffff !important;
  color: #1f2933 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
}

.iotclass-user-status .user-status-badge .status-icon,
.iotclass-user-status .user-status-badge .status-text,
.iotclass-user-status .user-status-badge .status-text strong {
  color: #1f2933 !important;
}
/* search affordance: frosted on the colored bar */
.iotclass-user-status #quarto-search input,
.iotclass-user-status .aa-DetachedSearchButton {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
}
.iotclass-user-status #quarto-search input::placeholder,
.iotclass-user-status .aa-DetachedSearchButton .aa-DetachedSearchButtonPlaceholder {
  color: rgba(255, 255, 255, 0.82) !important;
}
.navbar .aa-DetachedSearchButton {
  background: var(--ds-surface-alt) !important;
  color: var(--ds-ink-soft) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 999px !important;
}

.iotclass-user-status .module-bar-search {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #1f2933 !important;
}

.iotclass-user-status .module-bar-search .module-bar-search-label,
.iotclass-user-status .module-bar-search .bi,
.iotclass-user-status .module-bar-search kbd {
  color: #1f2933 !important;
}

.iotclass-user-status .module-bar-search kbd {
  background: #eef2f7 !important;
  border-color: #cbd5e1 !important;
}

/* Last-updated banner: subtle, not bright yellow */
#last-edited-banner,
.last-edited-banner,
.content-update-banner {
  background: var(--ds-surface-alt) !important;
  background-image: none !important;
  color: var(--ds-ink-soft) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
/* CLS fix (launch blocker B4). #last-edited-banner is static markup from first
 * paint now (assets/last-edited-banner-body.html via `include-before-body`,
 * wired by scripts/generate-book-configs.py) instead of a div that
 * assets/last-edited-header.html created and spliced in once an async fetch of
 * assets/data/last-edited.json resolved. That splice pushed the whole page down
 * and was a measured layout-shift source on every module page. These properties
 * replace the inline style.cssText the script used to set; the script now only
 * sets textContent and adds .is-populated.
 *
 * The strip is reserved on every page, which is right: last-edited.json has an
 * entry for 1,850 pages, so it is occupied in practice, not dead space. The two
 * custom-layout pages that do not want it (body.iotclass-homepage,
 * body.iotclass-modules-landing) hide it with display:none !important in
 * style/iotclass.css, which still wins over the display:block below.
 *
 * min-height is derived, not measured: box-sizing is border-box site-wide, so the
 * box is exactly line-box + vertical padding + border. Writing it as a calc() over
 * the same tokens the rule above sets (font-size 0.78rem, the 6px/16px padding and
 * 1px border below) means it stays exact if the type scale is retuned -- a
 * hard-coded pixel height would silently drift back into shifting. line-height is
 * pinned here for the same reason: inheriting it would make the reserved height
 * depend on whatever ancestor rule last touched it. */
#last-edited-banner {
  /* Full-bleed, as it was when the script spliced it in above the fixed navbar.
   * Quarto puts include-before-body content inside the article column, so
   * without this the strip would render inset and read as a content card rather
   * than a site-level notice. Same idiom the construction banner already uses. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
  box-sizing: border-box;
  min-height: calc(0.78rem * 1.5 + 6px + 6px + 1px);
  line-height: 1.5;
  padding: 6px 16px;
  text-align: center;
  /* System stack, matching the inline style this replaces. Deliberately not
   * var(--ds-font): the strip must not wait on, or reflow with, a webfont. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1040;
  visibility: hidden;
}
#last-edited-banner.is-populated {
  visibility: visible;
}
#last-edited-banner a {
  color: var(--ds-ink-soft) !important;
}

/* Sidebar header: clean title in accent, no filled block */
#quarto-sidebar .sidebar-title,
.sidebar-title,
.sidebar-header,
#quarto-sidebar .sidebar-header,
.sidebar-part-title {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ds-accent) !important;
  border: none !important;
}
.sidebar-part-title {
  font-weight: 700 !important;
  padding: 0.4rem 0.25rem 0.8rem !important;
  font-size: 0.95rem !important;
}

/* Sidebar items: clean white, module-accent only on hover/active */
#quarto-sidebar .sidebar-item a[data-pc],
#quarto-sidebar .sidebar-item-section[data-pc-section] {
  background: transparent !important;
  background-image: none !important;
  color: var(--ds-ink-soft) !important;
  box-shadow: none !important;
}
#quarto-sidebar .sidebar-item a[data-pc]:hover {
  background: color-mix(in srgb, var(--ds-accent) 7%, white) !important;
  color: var(--ds-accent) !important;
}
#quarto-sidebar .sidebar-item a[data-pc].active {
  background: color-mix(in srgb, var(--ds-accent) 11%, white) !important;
  color: var(--ds-accent) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--ds-accent) !important;
  border-radius: 6px !important;
}
/* Sidebar SECTION headers: iotclass.css fills these with the section --pc-main
   (a solid colour block + white text). On sectioned modules that stacks into a
   "wall of colour" (very heavy on the red families). Flatten to a clean
   Khan-style label: no fill, the section name in the module colour, uppercase.
   Colour-coding stays (top bar + coloured labels); the heaviness is gone. */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > .sidebar-item-text,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > a.sidebar-link,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .menu-text {
  color: color-mix(in srgb, var(--pc-main, var(--ds-accent)) 58%, black) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.74rem !important;
}
/* section toggle / chevron: muted ink, not white-on-fill */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-toggle,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container i.bi,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .chevron-icon {
  color: var(--ds-ink-faint) !important;
  background: transparent !important;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container:hover {
  background: color-mix(in srgb, var(--pc-main, var(--ds-accent)) 7%, white) !important;
}

#quarto-sidebar .sidebar-part-title,
#quarto-sidebar .sidebar-title,
.sidebar-part-title,
.sidebar-title {
  color: color-mix(in srgb, var(--pc-main, var(--ds-accent)) 58%, black) !important;
}

/* the feedback FAB: keep but flatten */
.feedback-fab,
#feedback-button,
.feedback-button {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* ===========================================================================
   COMPONENT PACK PILOT — section depth, quiet code, panels, KC chrome
   =========================================================================== */

.iot-section-depth-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f7f8fa;
  /* CLS fix (B4 remainder, cause 2 of 3, 2026-07-28): min-height companion to
   * the header::after reservation below -- same "reserve, then also pin"
   * pairing the sticky auth-strip fix established, in case anything else
   * ever grows this box post-insert. */
  min-height: 105px;
}

/* CLS fix (B4 remainder, cause 2 of 3, 2026-07-28). style/components.js's
 * initSectionDepthToggle() inserts this whole "Reading depth" toggle nav as
 * a live DOM node, afterend of #title-block-header, well after first paint
 * (it's the component-pack bundle, deliberately non-blocking). Root-caused
 * live under the same CDP throttling as .b4tmp/b4perf-measure.mjs
 * (.b4tmp/capture-at-shift.mjs, synchronous PerformanceObserver capture):
 * the toggle's insertion pushes every following element -- starting with
 * the chapter's first callout -- down by its own ~207px box (175px content
 * + 14/18px margins at mobile widths, measured live), which the Layout
 * Shift API reports as that callout's IN-VIEWPORT rect shrinking (the
 * element itself never resizes; it just gets pushed mostly below the
 * fold). This is the "~205px collapsible callout CLS" / "section-depth
 * toggle resizes" cause named in the B4 register -- it was never a
 * collapse, it was late insertion above existing content.
 *
 * Reserving the toggle's own footprint on #title-block-header, from first
 * paint, means the callout is already in its FINAL position before the
 * toggle mounts, and mounting the real toggle exactly fills the reserved
 * gap (net-zero shift). Height is per breakpoint (see the matching
 * overrides inside .iot-section-depth-toggle's own two @media blocks
 * below) since the toggle's flex layout -- and therefore its height --
 * changes at the same breakpoints. Scoped two ways so it can't misfire:
 * :has(~ section.depth-l*) only reserves on pages that actually HAVE
 * depth-tagged content (initSectionDepthToggle bails out and never inserts
 * the toggle at all if a chapter has none, so reserving unconditionally
 * would leave a permanent empty gap on those pages); :not(:has(+
 * .iot-section-depth-toggle)) drops the reservation the instant the real
 * toggle exists as the header's next sibling, same tick. */
header#title-block-header:has(~ section.depth-l0, ~ section.depth-l1, ~ section.depth-l2):not(
    :has(+ .iot-section-depth-toggle)
  )::after {
  content: '';
  display: block;
  height: 105px;
}

.iot-section-depth-toggle__heading {
  display: grid;
  min-width: 10.5rem;
  flex: 0 0 auto;
  gap: 2px;
}

.iot-section-depth-toggle__kicker {
  color: #3f4f5f;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.iot-section-depth-toggle__prompt {
  color: var(--ds-ink);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.2;
}

.iot-section-depth-toggle__controls {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.iot-section-depth-toggle__button {
  display: inline-flex;
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 12.25rem;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid #b8c2cc;
  border-radius: 8px;
  padding: 7px 10px;
  background: #ffffff;
  color: var(--ds-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.iot-section-depth-toggle__button[aria-pressed="true"] {
  border-color: #435563;
  background: #435563;
  color: #ffffff;
}

.iot-section-depth-toggle__button[aria-disabled="true"] {
  border-color: #ccd4dc;
  background: #f2f4f7;
  color: #71808d;
  cursor: not-allowed;
  opacity: 0.82;
}

.iot-section-depth-toggle__button:not([aria-pressed="true"]):not([aria-disabled="true"]):hover {
  border-color: #8795a1;
  background: #eef2f5;
}

.iot-section-depth-toggle__icon,
.iot-section-depth-current__icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
}

.iot-section-depth-toggle__icon svg,
.iot-section-depth-current__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-section-depth-toggle__text,
.iot-section-depth-current__text {
  display: grid;
  gap: 1px;
  min-width: 0;
  white-space: nowrap;
}

.iot-section-depth-toggle__text strong,
.iot-section-depth-current__text strong {
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: normal;
  word-break: keep-all;
}

.iot-section-depth-toggle__text span,
.iot-section-depth-current__text span {
  color: currentColor;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  opacity: 0.82;
  overflow-wrap: normal;
  word-break: keep-all;
}

.iot-section-depth-toggle__button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 28%, transparent);
  outline-offset: 2px;
}

.iot-section-depth-current {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  margin: 0 0 0.9rem;
  color: #435563;
  font-size: 0.86rem;
  line-height: 1.2;
}

/* CLS fix (B4 remainder, cause 2 of 3, 2026-07-28). style/components.js's
 * initSectionDepthToggle() runs after the chapter's full HTML (all three
 * depth levels visible) has already painted, then calls applyDepth() with
 * the sitewide default 'practitioner' (L1) unless a URL hash or a stored
 * iotclass.sectionDepth.choice preference says otherwise. For any chapter
 * with .depth-l2 ("under the hood") content, that call sets section.hidden
 * on every depth-l2 section -- a real post-paint collapse, root-caused live
 * (ResizeObserver + computed-style trace, see .b4tmp/inspect-idx26.mjs)
 * shrinking a callout's containing section from its full rendered height to
 * 0 well after first paint: exactly the "section-depth toggle resizes"
 * cause named in the B4 register alongside the collapsible callout.
 *
 * Default-hiding .depth-l2 here, from first paint, matches the common-case
 * *result* of that same default ('practitioner' never shows L2) with zero
 * shift instead of a visible-then-hidden pop. applyDepth() already stamps
 * every section with data-iot-depth-visible ("true"/"false") in the same
 * pass that decides hidden/not, so the override condition below tracks the
 * script's own source of truth rather than duplicating its depth logic:
 * once a resolved depth actually includes L2 (explicit "Under the Hood"
 * pick, a stored preference, or a #hash deep-link into L2 content),
 * data-iot-depth-visible="true" is set and this rule stops matching, same
 * tick, revealing the section. That remaining pop (stored/hash-into-L2 only,
 * a minority path since the sitewide default is L1) is accepted deliberately
 * -- pre-hiding L2 unconditionally would trade today's shrink-by-default for
 * a grow-by-default on every page instead, which is worse, not better. */
section.depth-l2:not([data-iot-depth-visible="true"]) {
  display: none;
}

body.iot-toc-hidden #quarto-margin-sidebar {
  display: none !important;
}

body.iot-toc-hidden main.content,
body.iot-toc-hidden .page-columns main.content {
  grid-column: body-content-start / page-end !important;
  justify-self: start !important;
  max-width: 50rem !important;
}

body.nav-sidebar.docked:has(iot-depth):not(.iotclass-homepage):not(.iotclass-modules-landing)
  main.content,
body.nav-sidebar.docked:has(iot-depth):not(.iotclass-homepage):not(.iotclass-modules-landing)
  main.content.column-body {
  grid-column: body-content-start / page-end !important;
  justify-self: start !important;
  width: 100% !important;
  max-width: 50rem !important;
}

#quarto-margin-sidebar [data-iot-toc-entry-hidden="true"] {
  display: none !important;
}

main.content div.sourceCode,
main.content pre,
#quarto-document-content div.sourceCode,
#quarto-document-content pre {
  /* Founder 2026-07-09 (07-09u): code reads best on a crisp WHITE box with a light border. */
  border: 1px solid var(--ds-line-strong) !important;
  border-left: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

#quarto-document-content div.sourceCode {
  position: relative;
  overflow: auto !important;
}

#quarto-document-content div.sourceCode::before {
  content: attr(data-code-lang);
  position: sticky;
  top: 0.45rem;
  left: 0.6rem;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  margin: 0.45rem 0 0 0.55rem;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  background: #ffffff;
  color: var(--ds-ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#quarto-document-content div.sourceCode pre {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0.45rem 1rem 1rem !important;
}

/* code-block-horizontal-overflow (P3 wave-2 visual-review, 2026-07-22 --.6.2):
   `div.sourceCode` above already sets `overflow: auto !important`, and
   `#quarto-document-content pre > code.sourceCode` forces `white-space: pre
   !important` (never wrap, so hand-formatted code/output stays intact) --
   live DOM verification during this pass confirmed every reported instance
   already renders a working horizontal scrollbar (offsetHeight exceeds
   clientHeight by a consistent 17px, matching the native scrollbar track).
   The real defect is discoverability, not function: the native
   browser-default scrollbar is thin and low-contrast against the block's
   white background, so a reader skimming a screenshot (or the page itself)
   reads a mid-word cutoff as permanently lost content rather than "scroll
   right for more" -- exactly the wave-2 report's own framing. Thicken and
   color the thumb so the scroll affordance is unmistakable at a glance;
   this does not change the underlying overflow/white-space mechanism. */
#quarto-document-content div.sourceCode {
  scrollbar-width: auto;
  scrollbar-color: var(--ds-accent) var(--ds-surface-alt);
}

#quarto-document-content div.sourceCode::-webkit-scrollbar {
  height: 11px;
}

#quarto-document-content div.sourceCode::-webkit-scrollbar-track {
  background: var(--ds-surface-alt);
  border-radius: 999px;
}

#quarto-document-content div.sourceCode::-webkit-scrollbar-thumb {
  background: var(--ds-accent);
  border-radius: 999px;
  border: 2px solid var(--ds-surface-alt);
}

/* worked-numbers-inline-math-overflow: same discoverable-scrollbar treatment
   as the code-block fix above, applied estate-wide to any MathJax container
   that ends up individually scrollable inside a narrow card (per-chapter
   `.physfn-card mjx-container` rules cap width + set overflow-x per chapter;
   this only adds the visible thumb styling on top, harmless when a formula
   fits and never scrolls). */
#quarto-document-content mjx-container {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-accent) var(--ds-surface-alt);
}

#quarto-document-content mjx-container::-webkit-scrollbar {
  height: 7px;
}

#quarto-document-content mjx-container::-webkit-scrollbar-track {
  background: var(--ds-surface-alt);
  border-radius: 999px;
}

#quarto-document-content mjx-container::-webkit-scrollbar-thumb {
  background: var(--ds-accent);
  border-radius: 999px;
}

/* worked-numbers-inline-math-overflow recurrence, P3 wave-3 fix (2026-07-22).
   The scrollbar styling above was verified NOT to render in practice: live
   Playwright measurement on wsn/duty-cycle-worked-examples found
   `mjx-container.offsetHeight === mjx-container.clientHeight` (zero space
   reserved for a scrollbar) even though `scrollWidth > clientWidth` is
   genuinely true and the box IS mechanically scrollable (`scrollLeft`
   works). Isolated the trigger: nesting a second `overflow-x: auto`
   scroll container (`.physfn-card`) directly around an already-auto-overflow
   mjx-container suppresses the inner element's own scrollbar rendering in
   this Chromium build -- a synthetic reproduction confirmed the SAME
   mjx-container renders its scrollbar normally the moment it is not nested
   inside another auto-overflow-x ancestor. Rather than remove
   `.physfn-card`'s own overflow-x:auto (a estate-wide baseline safety net
   for other kinds of overflow, out of scope to touch here), add a
   paint-based "scroll shadow" that does not depend on the native scrollbar
   rendering at all, plus mitigations that reduce how often a formula needs
   to scroll in the first place. `.physfn-card`'s background is solid white
   in every variant, so a white-to-transparent edge fade is safe here; this
   is intentionally scoped to `.physfn-card` rather than applied to every
   mjx-container site-wide (a white fade would look wrong over non-white
   backgrounds elsewhere). */
#quarto-document-content .physfn-card mjx-container,
main.content .physfn-card mjx-container {
  background-image:
    linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 14px),
    linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 14px),
    linear-gradient(to right, rgba(57, 107, 131, 0.55), rgba(57, 107, 131, 0) 8px),
    linear-gradient(to left, rgba(57, 107, 131, 0.55), rgba(57, 107, 131, 0) 8px);
  background-repeat: no-repeat;
  background-position:
    left center,
    right center,
    left center,
    right center;
  background-size:
    14px 100%,
    14px 100%,
    8px 100%,
    8px 100%;
  /* `local` fade layers scroll WITH the content (only shown at the true start/
     end of the formula); `scroll` accent layers stay pinned to the box edge
     as a constant "this is scrollable" cue. */
  background-attachment: local, local, scroll, scroll;
}

#quarto-document-content .physfn-card mjx-container[display="true"],
main.content .physfn-card mjx-container[display="true"] {
  font-size: 88% !important;
}

/* Widen the worked-numbers card grid slightly (230px -> 255px min column)
   so more display equations fit without scrolling at all. Uses the
   #quarto-document-content prefix for higher specificity than the
   byte-identical `.physfn-card`/`.physfn-grid` block copy-pasted into each
   of the 334 chapter files, so this is a single shared fix rather than 334
   per-file edits (still allows the browser to fall back to fewer, wider
   columns via `auto-fit`; verified it does not collapse the flagship
   3-column layout to 1 column at 1280px). */
#quarto-document-content .physfn-grid,
main.content .physfn-grid {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

#quarto-document-content pre > code.sourceCode {
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: pre !important;
}

#quarto-document-content pre,
#quarto-document-content pre code {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#quarto-document-content .code-copy-button {
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--ds-ink-soft) !important;
}

#quarto-document-content .callout div.sourceCode,
#quarto-document-content [data-iot-panel-category] div.sourceCode {
  /* Inside a panel the code box stays a WHITE light-bordered box (single light
     frame — the panel provides the color, the code box provides contrast). */
  border: 1px solid var(--ds-line-strong) !important;
  border-left: 1px solid var(--ds-line-strong) !important;
  border-radius: 6px !important;
  background: var(--ds-surface) !important;
}

#quarto-document-content .callout div.sourceCode pre,
#quarto-document-content [data-iot-panel-category] div.sourceCode pre {
  border: 0 !important;
  background: transparent !important;
}

#quarto-document-content .callout div.sourceCode::before,
#quarto-document-content [data-iot-panel-category] div.sourceCode::before {
  background: #ffffff;
}

details.iot-code-disclosure {
  margin: 1rem 0 1.25rem;
  border: 0 !important;
  background: transparent !important;
}

details.iot-code-disclosure > summary {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2rem;
  border: 0;
  border-radius: 6px;
  padding: 0.15rem 0.25rem;
  color: var(--ds-ink-soft);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.3;
}

details.iot-code-disclosure > summary:hover {
  color: var(--ds-accent);
  background: color-mix(in srgb, var(--ds-accent) 7%, white);
}

details.iot-code-disclosure[open] > summary {
  margin-bottom: 0.55rem;
}

[data-iot-panel-category="game"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="simulation"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="animation"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="foundation"] {
  --iot-panel-accent: #5c6873;
  --iot-panel-tint: #eef1f3;
}

[data-iot-panel-category="lab"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="hardware"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="check"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

#quarto-document-content .callout[data-iot-panel-category],
#quarto-document-content section[data-iot-panel-category] {
  border: 1px solid color-mix(in srgb, var(--iot-panel-accent) 24%, var(--ds-line)) !important;
  border-left: 4px solid var(--iot-panel-accent) !important;
  background: var(
    --iot-panel-tint,
    color-mix(in srgb, var(--iot-panel-accent) 10%, white)
  ) !important;
}

.iot-panel-icon {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  place-items: center;
  margin-right: 0.45rem;
  color: var(--iot-panel-accent, var(--ds-accent));
  vertical-align: -0.25rem;
}

.iot-panel-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-lab-identity-band {
  --iot-lab-accent: #0f766e;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin: 0.25rem 0 1.35rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--iot-lab-accent) 22%, var(--ds-line));
  border-left: 4px solid var(--iot-lab-accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--iot-lab-accent) 9%, white);
  color: var(--ds-ink);
}

.iot-lab-identity-band__label,
.iot-lab-identity-band__chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.iot-lab-identity-band__label {
  color: var(--iot-lab-accent);
  font-size: 0.92rem;
  font-weight: 800;
}

.iot-lab-identity-band__icon,
.iot-lab-nav-icon,
.iot-lab-collection-nav-icon,
.iot-nav-icon,
.iot-toc-nav-icon {
  --iot-nav-icon-color: #475569;
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--iot-nav-icon-color, var(--iot-lab-accent, #0f766e));
}

.iot-lab-identity-band__icon svg,
.iot-lab-nav-icon svg,
.iot-lab-collection-nav-icon svg,
.iot-nav-icon svg,
.iot-toc-nav-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-nav-icon--lab {
  --iot-nav-icon-color: var(--iot-lab-accent, #0f766e);
}

.iot-nav-icon--quiz {
  --iot-nav-icon-color: #475569;
}

.iot-nav-icon--map {
  --iot-nav-icon-color: #2563eb;
}

.iot-nav-icon--page {
  --iot-nav-icon-color: #94a3b8;
}

.iot-lab-chip {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding: 0.16rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--iot-lab-accent) 24%, var(--ds-line));
  border-radius: 999px;
  background: white;
  color: color-mix(in srgb, var(--iot-lab-accent) 72%, var(--ds-ink));
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.iot-lab-chip--advanced {
  border-color: color-mix(in srgb, var(--iot-lab-accent) 42%, var(--ds-line));
  background: color-mix(in srgb, var(--iot-lab-accent) 14%, white);
  color: #0b5c54;
}

#quarto-sidebar a.iot-lab-nav-link,
.sidebar a.iot-lab-nav-link,
#quarto-sidebar a.iot-lab-collection-nav-link,
.sidebar a.iot-lab-collection-nav-link,
#quarto-sidebar a.iot-nav-link,
.sidebar a.iot-nav-link,
#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  gap: 0.25rem;
}

#quarto-sidebar a.iot-lab-collection-nav-link,
.sidebar a.iot-lab-collection-nav-link {
  --iot-lab-accent: #0f766e;
}

@media (max-width: 640px) {
  .iot-lab-identity-band {
    align-items: flex-start;
  }

  .iot-lab-identity-band__chips {
    width: 100%;
  }
}

#quarto-document-content
  .callout[data-iot-panel-category]
  .callout-icon-container[data-iot-panel-suppressed="true"] {
  display: none !important;
}

#quarto-document-content .iot-panel [style*="border-left"],
#quarto-document-content .callout [style*="border-left"],
#quarto-document-content .iot-panel [data-iot-panel-nested-bar-suppressed="true"],
#quarto-document-content .callout [data-iot-panel-nested-bar-suppressed="true"] {
  border-left: 0 !important;
  border-left-width: 0 !important;
  border-left-color: transparent !important;
}

#quarto-document-content
  .callout:has(
    :where(iot-knowledge-check, iot-matching-quiz, iot-ordering-quiz, iot-label-quiz, iot-code-quiz)
  ),
#quarto-document-content
  section.callout-question:has(
    :where(iot-knowledge-check, iot-matching-quiz, iot-ordering-quiz, iot-label-quiz, iot-code-quiz)
  ) {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.iot-kc-group-label {
  margin: 1.2rem 0 0.45rem !important;
  color: var(--ds-ink);
  font-size: 0.92rem;
  font-weight: 800;
}

iot-knowledge-check,
iot-matching-quiz,
iot-ordering-quiz,
iot-label-quiz,
iot-code-quiz,
iot-knowledge-check.iot-kc-standard,
iot-matching-quiz.iot-assessment-standard,
iot-ordering-quiz.iot-assessment-standard,
iot-label-quiz.iot-assessment-standard,
iot-code-quiz.iot-assessment-standard,
iot-knowledge-check.inline-knowledge-check,
iot-knowledge-check.inline-knowledge-check.iot-kc-standard,
.iot-quiz-matching.iot-assessment-standard,
.iot-quiz-ordering.iot-assessment-standard,
.iot-quiz-label.iot-assessment-standard,
.iot-quiz-code.iot-assessment-standard {
  /* Founder 2026-07-09 (§9.6 v1.3): Knowledge Checks are NEUTRAL GREY site-wide —
     module color is reserved for explore panels. */
  --iot-kc-accent: var(--ds-ink-faint, #7b8794);
  --iot-kc-accent-strong: color-mix(in srgb, var(--iot-kc-accent) 55%, black);
  --iot-kc-accent-tint: color-mix(in srgb, var(--iot-kc-accent) 8%, white);
  --iot-kc-line: color-mix(in srgb, var(--iot-kc-accent) 22%, var(--ds-line));
  display: block;
  margin: 1.05rem 0 1.25rem;
  border: 1px solid var(--iot-kc-line) !important;
  border-left: 4px solid var(--iot-kc-accent) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--iot-kc-accent-tint) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.iot-assessment-standard :where(.ikc-header, .imq-header, .ioq-header, .ilq-header, .icq-header) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  padding: 0.72rem 0.95rem !important;
  background: var(--iot-kc-accent-tint) !important;
  color: var(--ds-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--iot-kc-line) !important;
  border-radius: 0 !important;
}

.iot-assessment-standard
  :where(.ikc-icon, .imq-icon, .ioq-icon, .ilq-icon, .icq-icon).iot-assessment-family-icon,
.iot-assessment-variant-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--iot-kc-accent-strong) !important;
  color: #ffffff !important;
}

.iot-assessment-standard
  :where(.ikc-icon, .imq-icon, .ioq-icon, .ilq-icon, .icq-icon).iot-assessment-family-icon
  svg,
.iot-assessment-variant-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iot-assessment-standard :where(.ikc-title, .imq-title, .ioq-title, .ilq-title, .icq-title) {
  flex: 0 0 auto !important;
  color: var(--ds-ink) !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.iot-assessment-variant {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 12rem;
  color: var(--ds-ink-soft);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
}

.iot-assessment-variant-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.iot-assessment-standard :where(.ikc-xp, .imq-xp, .ioq-xp, .ilq-xp, .icq-xp) {
  margin-left: auto !important;
  background: #ffffff !important;
  color: var(--iot-kc-accent-strong) !important;
  border: 1px solid var(--iot-kc-line) !important;
  border-radius: 999px !important;
  padding: 0.2rem 0.58rem !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.iot-assessment-standard .icq-lang {
  background: #ffffff !important;
  color: var(--iot-kc-accent-strong) !important;
  border-color: var(--iot-kc-line) !important;
}

.iot-assessment-standard
  :where(.ikc-instruction, .imq-instruction, .ioq-instruction, .ilq-instruction, .icq-instruction) {
  color: var(--ds-ink-soft) !important;
}

.iot-child-links {
  margin: 1.6rem 0 !important;
  border: 1px solid color-mix(in srgb, var(--ds-accent) 22%, var(--ds-line));
  border-left: 4px solid var(--ds-accent);
  border-radius: var(--ds-radius-sm);
  padding: 1rem 1.05rem;
  background: color-mix(in srgb, var(--ds-accent) 8%, white);
}

.iot-child-links > h2,
.iot-child-links > h3,
.iot-child-links > h4 {
  margin-top: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.iot-child-links > h2::after,
.iot-child-links > h3::after,
.iot-child-links > h4::after {
  content: none !important;
}

.iot-child-links ul {
  display: grid;
  gap: 0.6rem;
  max-width: none !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.iot-child-links li {
  position: relative;
  max-width: none !important;
  padding-left: 1.65rem;
}

.iot-child-links li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0.2rem;
  width: 0.62rem;
  height: 0.62rem;
  border-top: 2px solid var(--ds-accent);
  border-right: 2px solid var(--ds-accent);
  transform: rotate(45deg);
}

#quarto-document-content .observablehq [style*="color:#3498DB"],
#quarto-document-content .observablehq [style*="color: #3498DB"],
#quarto-document-content .observablehq [style*="color:#3498db"],
#quarto-document-content .observablehq [style*="color: #3498db"] {
  color: #1d5f8f !important;
}

#quarto-document-content .observablehq [style*="color:#7F8C8D"],
#quarto-document-content .observablehq [style*="color: #7F8C8D"],
#quarto-document-content .observablehq [style*="color:#7f8c8d"],
#quarto-document-content .observablehq [style*="color: #7f8c8d"] {
  color: #52606d !important;
}

#quarto-document-content .observablehq [style*="color:#E67E22"],
#quarto-document-content .observablehq [style*="color: #E67E22"],
#quarto-document-content .observablehq [style*="color:#e67e22"],
#quarto-document-content .observablehq [style*="color: #e67e22"] {
  color: #9a4d00 !important;
}

#quarto-document-content .observablehq [style*="color:#16A085"],
#quarto-document-content .observablehq [style*="color: #16A085"],
#quarto-document-content .observablehq [style*="color:#16a085"],
#quarto-document-content .observablehq [style*="color: #16a085"] {
  color: #0b6f5f !important;
}

@media (max-width: 1280px) and (min-width: 761px) {
  .iot-section-depth-toggle {
    align-items: stretch;
    flex-direction: column;
    /* CLS fix (B4 remainder): taller stacked layout at this width. */
    min-height: 154px;
  }

  .iot-section-depth-toggle__controls {
    justify-content: stretch;
  }

  .iot-section-depth-toggle__button {
    max-width: none;
  }

  header#title-block-header:has(~ section.depth-l0, ~ section.depth-l1, ~ section.depth-l2):not(
      :has(+ .iot-section-depth-toggle)
    )::after {
    height: 154px;
  }
}

@media (max-width: 760px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content,
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    .page-columns
    main.content,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-columns main.content,
  body.iot-section-depth-ready main.content,
  body.iot-section-depth-ready .page-columns main.content {
    grid-column: screen-start / screen-end !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-right: 0.85rem !important;
    padding-left: 0.85rem !important;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-document-content,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-document-content,
  body.iot-section-depth-ready #quarto-document-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .iot-section-depth-toggle {
    align-items: stretch;
    flex-direction: column;
    /* CLS fix (B4 remainder): tallest layout -- stacked buttons + wrap,
     * inside the full-bleed main.content this breakpoint also sets above. */
    min-height: 207px;
  }

  .iot-section-depth-toggle__controls {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .iot-section-depth-toggle__button {
    flex: 1 1 8rem;
    max-width: none;
  }

  header#title-block-header:has(~ section.depth-l0, ~ section.depth-l1, ~ section.depth-l2):not(
      :has(+ .iot-section-depth-toggle)
    )::after {
    height: 207px;
  }
}

#quarto-sidebar a.iot-nav-link,
.sidebar a.iot-nav-link,
#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  display: inline-flex !important;
  align-items: flex-start;
  gap: 0.35rem;
}

#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  gap: 0.25rem;
}

#quarto-sidebar a.iot-nav-link > .menu-text,
.sidebar a.iot-nav-link > .menu-text,
#quarto-margin-sidebar a.iot-toc-nav-link > .menu-text,
#TOC a.iot-toc-nav-link > .menu-text {
  flex: 1 1 auto;
  min-width: 0;
}

#quarto-sidebar a.iot-nav-link--map,
.sidebar a.iot-nav-link--map {
  width: calc(100% - 0.55rem) !important;
  margin-left: 0.55rem !important;
}

/* ---- Mermaid post-render class mirror (fixes estate-wide label clipping,
   P2 visual-review sweep 2026-07-22, 8/8 Mermaid chapters affected) --------
   Root cause: Quarto's stock runtime (site_libs/quarto-diagram/mermaid-init.js)
   renders each `<pre class="mermaid mermaid-js">` in place, then DELETES that
   wrapper and reattaches the finished `<svg>` as a bare sibling carrying only
   the "mermaid-js" class -- never "mermaid". Every `.mermaid ...` rule in
   iotclass.css therefore only matches during Mermaid's brief internal
   label-measurement pass (while the svg is still momentarily nested inside
   the .mermaid wrapper) and silently stops matching at final paint: labels
   revert to Mermaid's own generic "default" theme (Trebuchet MS 16px,
   #ECECFF/#9370DB lavender) instead of the site's 14px Source Sans 3 / teal
   theme. Because each node's box is sized from the (smaller, 14px) measured
   text but the label then paints at the larger reverted 16px, text overflows
   its box -- mid-word clipping with no ellipsis, identical at every viewport
   width (confirmed via live DOM inspection: post-render `svg.className` is
   "flowchart mermaid-js", no "mermaid" class survives).
   Fix: mirror every iotclass.css `.mermaid ...` rule onto the post-swap
   `.mermaid-js` class so paint-time styling matches measurement-time styling
   again. This is additive (does not touch iotclass.css) and loads after it,
   so it wins the cascade without needing higher specificity. */
.mermaid-js {
  font-size: 16px !important;
  max-width: 100%;
  height: auto;
  min-height: 300px;
  background: var(--iot-foam);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--iot-shadow-md);
  margin: 2rem 0;
  overflow-x: auto;
}

.mermaid-js .nodeLabel,
.mermaid-js .edgeLabel,
.mermaid-js .label,
.mermaid-js text {
  font-size: 14px !important;
  font-family:
    "Source Sans 3",
    "Source Sans 3 Fallback",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  fill: var(--iot-text-dark) !important;
}

.mermaid-js .cluster-label text,
.mermaid-js .cluster text {
  font-size: 16px !important;
  font-weight: 600 !important;
  fill: var(--iot-midnight) !important;
}

.mermaid-js .node rect,
.mermaid-js .node circle,
.mermaid-js .node polygon {
  fill: var(--iot-cloud) !important;
  stroke: var(--iot-azure) !important;
  stroke-width: 2px !important;
}

.mermaid-js .cluster rect {
  fill: var(--iot-sand) !important;
  stroke: var(--iot-border) !important;
  stroke-width: 1px !important;
  rx: 8px;
  ry: 8px;
}

.mermaid-js .edgePath .path {
  stroke: var(--iot-navy) !important;
  stroke-width: 2px !important;
}

.mermaid-js .arrowheadPath {
  fill: var(--iot-navy) !important;
}

/* worked-example-code-block-low-contrast (P3 wave-4 fix, 2026-07-22).
   A bare <pre> used for a "Worked example:"/"Classification example:"
   narrative walkthrough (not real source code) is meant to render as a dark
   navy card with light text. Every affected analytics-ml chapter already
   defines its OWN per-chapter `.xxx-layer pre { background: #0bXXXX
   !important; color: #eXXXXX !important; }` rule in an inline <style> block
   -- but that selector's specificity (0 IDs, 1 class, 1 type) can never
   out-rank the two site-wide `#quarto-document-content pre` rules above
   (line ~411 "soft, flat" and line ~883 the founder 2026-07-09u white-pre
   default), each of which is (1 ID, 0 classes, 1 type) -- regardless of
   !important or declaration order, an ID always beats a class. Confirmed
   live via getComputedStyle + CSSOM rule inspection in a real browser
   (data-fusion-introduction.qmd's worked example rendered background
   rgb(255,255,255) / color rgb(231,238,247), i.e. the founder's white-pre
   default won and the chapter's own dark rule silently lost). The one
   chapter that happened to render correctly (anomaly-detection.qmd) did so
   by accident, via a fragile per-block ID selector
   (`#practitioner-ado-zscore-persistence > pre`) that only a single block
   in a single chapter had -- not a scalable pattern.
   Fix: give every such block a single shared class
   (`iot-worked-example`, applied to the 13 flagged chapters' <pre> tags,
   23 blocks total) and style it here with specificity (1 ID, 1 class, 1
   type) -- unconditionally higher than the two global rules above, so this
   wins regardless of cascade order. No more per-chapter ID hacks needed;
   any future chapter can opt in by adding this one class. */
#quarto-document-content pre.iot-worked-example,
#quarto-document-content pre.iot-worked-example code {
  background: #0b1220 !important;
  color: #f8fafc !important;
}
#quarto-document-content pre.iot-worked-example * {
  color: #f8fafc !important;
}

/* ── Search reachability on the two custom-layout pages (accessibility audit,
   2026-07-26). The homepage and /landing/ hide #quarto-header wholesale for
   their hero designs, which also removed the ONLY search control — search was
   unreachable there by mouse or keyboard. Keep the header's chrome hidden but
   float the search control itself, so Quarto's search JS keeps its DOM and both
   pages regain search. ─────────────────────────────────────────────────────── */
body.iotclass-homepage #quarto-header,
body.iotclass-modules-landing #quarto-header {
  display: block !important;
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  z-index: 60;
  pointer-events: none;
}
body.iotclass-homepage #quarto-header .navbar,
body.iotclass-modules-landing #quarto-header .navbar {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.5rem 0.75rem !important;
  min-height: 0 !important;
}
body.iotclass-homepage #quarto-header .navbar-brand-container,
body.iotclass-homepage #quarto-header .navbar-toggler,
body.iotclass-homepage #quarto-header #navbarCollapse,
body.iotclass-modules-landing #quarto-header .navbar-brand-container,
body.iotclass-modules-landing #quarto-header .navbar-toggler,
body.iotclass-modules-landing #quarto-header #navbarCollapse {
  display: none !important;
}
body.iotclass-homepage #quarto-search,
body.iotclass-modules-landing #quarto-search {
  display: block !important;
  pointer-events: auto;
}

/* Native MathML rendering (format.html.html-math-method: mathml, launch blocker
 * B4). MathML Core gives single-character <mi> a default `text-transform:
 * math-auto`, which maps the letter into the Mathematical Alphanumeric Symbols
 * block (U+1D400+). That block exists only in a dedicated math font, and plenty
 * of Android and Linux installs ship none -- on a box with no math font every
 * variable rendered as a tofu box, confirmed by screenshot on this build before
 * these rules existed. Turning the transform off keeps the plain ASCII letter
 * and italicises it with the page's own fonts, which is both universally
 * available and close to what the old MathJax CHTML output looked like.
 *
 * Safe here specifically: all 25,951 <mi> elements in a full build are
 * single-character, so no function name (\sin, \log) can be wrongly
 * italicised, and the 2,780 mathvariant="normal" cases (\text, \mathrm) are
 * put back upright below. Re-check both counts if heavier notation is added. */
math {
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", "Noto Sans Math", math, serif;
}
math mi {
  text-transform: none;
  font-style: italic;
}
math mi[mathvariant="normal"] {
  font-style: normal;
}