@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. */
/* platform-base.css — pages that did NOT load design-system.css before the
 * 2026-07-26 consolidation (the root site config and modules/landing).
 * Content is identical to platform.css minus the design-system layer, so those
 * pages keep their exact pre-consolidation appearance while still loading ONE
 * stylesheet. Whether landing/homepage should adopt the design system is a
 * design decision recorded for the founder, deliberately NOT made in a
 * mechanical consolidation.
 */
/* ---- 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 (all 4
 * _platform/legal/*.qmd pages set one) -- 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;
}
/* Panel callout icon (mirrors platform.css / design-system.css — all four
   bundles must carry both rules, or an inline SVG here falls back to its
   intrinsic size and loses the panel accent colour). Launch blocker B13. */
.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;
}
/* 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;
  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;
  /* CLS (launch blocker B4): `width: auto` with no width/height attribute on the
   * <img> means the browser has no intrinsic ratio before the bitmap decodes, so
   * it lays this out at zero width and reflows the whole landing navbar -- and
   * everything under it -- on decode. aspect-ratio gives it the ratio up front.
   * 411x351 is images/general/cover.png's own pixel size; replace both together. */
  aspect-ratio: 411 / 351;
  border-radius: 4px !important;
  box-shadow: none !important;
}
/* Same file, same reason: Quarto's own navbar brand logo. */
.navbar .navbar-logo {
  aspect-ratio: 411 / 351;
}
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;
}
/* a11y audit 2026-07-28 (B9): these two hero CTAs render with zero visible
 * focus indicator (WCAG 2.4.7). Root cause: Bootstrap's own
 * `.btn:focus-visible { outline: 0; box-shadow: var(--bs-btn-focus-box-
 * shadow) }` (specificity 0,2,0) beats this file's sitewide bare
 * `:focus-visible { outline: 3px solid ... }` (specificity 0,1,0) regardless
 * of load order, and --bs-btn-focus-box-shadow is never set for this custom
 * button variant, so the replacement ring Bootstrap intends never appears
 * either -- confirmed live via real Tab-key focus + a matched-CSS-rules walk,
 * not just static analysis. This rule's own specificity (0,3,1) beats
 * Bootstrap's outright, so it doesn't need !important. */
body.iotclass-homepage .btn-action:focus-visible {
  outline: 3px solid rgba(6, 182, 212, 0.6);
  outline-offset: 3px;
  box-shadow: 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;
}

/* ── 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;
}

/* Last-updated banner. This file keeps the pre-consolidation bright-yellow look
 * on purpose: the root site and modules/landing never loaded design-system.css's
 * "subtle" override (see this file's own header comment), so the visual here is
 * the one the old inline style.cssText produced, transplanted verbatim.
 *
 * 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`)
 * instead of a <div> that assets/last-edited-header.html created and spliced in
 * once an async fetch of last-edited.json resolved -- a splice that pushed the
 * whole page down. min-height is derived from this rule's own tokens rather than
 * measured, so it cannot drift: box-sizing is border-box site-wide, so the box is
 * exactly line-box + vertical padding + border.
 *
 * body.iotclass-homepage / body.iotclass-modules-landing hide the banner outright
 * in style/iotclass.css; that `display: none !important` beats the `display:
 * block` here on specificity as well as on !important, so those two custom-layout
 * pages reserve no strip. */
#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(13px * 1.5 + 6px + 6px + 1px);
  line-height: 1.5;
  background: #ffc107;
  color: #212121;
  text-align: center;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  /* 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;
  border-bottom: 1px solid #ffb300;
  visibility: hidden;
}
#last-edited-banner.is-populated {
  visibility: visible;
}

/* 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;
}

/* ==========================================================================
   B9 accessibility re-audit (2026-07-28) -- page-specific overrides
   ========================================================================== */

/* admin/teacher-applications.html: both colors are set inside a `<style>`
 * block embedded directly in content/_platform/admin/teacher-applications.qmd
 * (the access-denied message uses an inline style="" attribute), outside this
 * territory. `!important` here is required to win regardless of that page's
 * own load order, exactly like the module-accent overrides elsewhere in this
 * file that also override page-embedded/inline color. */
#tapp-access-denied-message {
  /* 3.19:1 -> darkened 22% toward black -> 4.89:1 against the page's #f5f5f5.
   * #7F8C8D * 0.78 = #636d6e. */
  color: color-mix(in srgb, #7f8c8d 78%, black) !important;
}
.tapp-signin-btn {
  /* white text at 3.28:1 on the button's own #16A085 -> background darkened
   * 18% toward black -> 4.67:1. (.tapp-signin-btn:hover's own #138D75 was
   * checked as a reuse candidate first -- only 4.12:1, not reused.) */
  background: color-mix(in srgb, #16a085 82%, black) !important;
}

/* Homepage (index.qmd, root -- outside this territory) brand-colour misses,
 * open since 2026-07-26 (docs-internal/ops/accessibility-audit.md). Colors
 * are defined in index.qmd's own embedded <style>/inline `--jc` custom
 * properties, so overridden here with !important, same technique as
 * .tapp-signin-btn above. Each is darkened the minimum that clears 4.5:1
 * while staying visually the same hue -- ratios computed with the WCAG
 * relative-luminance formula, not eyeballed. */

/* .g-role: 4.43:1 (#c2570b on #fffdf9) -> darkened 5% toward black -> 4.83:1.
 * Uniform color across all .g-role instances (Ada/Clara/Gus/Sammy cards), so
 * one rule is correct here (unlike .j-kicker below, no per-card variation to
 * preserve). */
.g-role {
  color: color-mix(in srgb, #c2570b 95%, black) !important;
}

/* .j-kicker/.j-go: color comes from --jc, set per-card via an inline
 * style="--jc:#xxxxxx" on each .j-card (4 different colors, one per card).
 * Only the amber "Deciders" card (href="...#module-3", --jc:#d97706) fails,
 * at 3.19:1 -- the other three (#1d4ed8, #0f766e, #7c3aed) were not flagged
 * and must not be touched, so the override targets that one card by its
 * stable href rather than .j-kicker/.j-go generally. Darkened 20% toward
 * black -> 4.73:1. */
.j-card[href$="#module-3"] {
  --jc: color-mix(in srgb, #d97706 80%, black) !important;
}

/* .module-badge on /landing/: color comes from --module-color, set per-card
 * via inline style="--module-color:#xxxxxx" on each #module-N section (see
 * modules/landing -- outside this territory). Only Module 2 (#D84315,
 * 4.44:1) and Module 4 (#43A047, 3.30:1) fail; the other 7 modules were not
 * flagged and must not be touched, so these target the two failing sections
 * by their stable #module-2/#module-4 ids. --module-color also drives
 * .module-header's border-bottom accent, which darkens slightly along with
 * it -- an intentional, harmless side effect, not a second bug. */
#module-2 {
  /* white on #D84315 4.44:1 -> darkened 4% toward black -> 4.78:1. */
  --module-color: color-mix(in srgb, #d84315 96%, black) !important;
}
#module-4 {
  /* white on #43A047 3.30:1 -> darkened 18% toward black -> 4.70:1. */
  --module-color: color-mix(in srgb, #43a047 82%, black) !important;
}

/* /landing/ (modules/landing -- outside this territory) has zero visible h1:
 * its real <h1 class="title">Browse Modules</h1> exists (Quarto's normal
 * title-block render of the qmd's `title:` front-matter) but is inside
 * #title-block-header, which body.iotclass-modules-landing hides with
 * display:none below -- and display:none removes an element from the
 * accessibility tree entirely, so axe's page-has-heading-one sees zero h1
 * (WCAG 1.3.1/2.4.6, a11y audit 2026-07-28 Finding B). Same root cause and
 * same fix as the 15 animation pages already fixed on 2026-07-26 (see e.g.
 * docs/animations/anomaly-detection-demo.html's own inline style comment):
 * swap display:none for the visually-hidden-but-still-in-the-tree clip
 * technique, so the real h1 stays exactly as invisible on screen while
 * staying reachable by assistive tech. Scoped to .iotclass-modules-landing
 * only -- body.iotclass-homepage already has a second, genuinely visible h1
 * ("Master the Internet of Things") elsewhere on the page and was not
 * flagged, so it is untouched. */
body.iotclass-modules-landing #title-block-header {
  display: block !important;
  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;
}