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

div.sourceCode[data-lang="python"]::before {
  content: "Python";
  background: #3776ab;
}
div.sourceCode[data-lang="javascript"]::before {
  content: "JavaScript";
  background: #f7df1e;
  color: #000;
}
div.sourceCode[data-lang="bash"]::before {
  content: "Bash";
  background: #4eaa25;
}
div.sourceCode[data-lang="json"]::before {
  content: "JSON";
  background: #000000;
}
div.sourceCode[data-lang="yaml"]::before {
  content: "YAML";
  background: #cb171e;
}

/* Code block output */
.cell-output {
  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);
}

.callout.callout-collapse .callout-body-container {
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease;
  overflow: hidden;
}

/* "For Beginners" specific styling */
.callout-tip[data-title*="Beginners"],
.callout-tip[data-title*="beginner"] {
  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;
}

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

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dark);
  padding: 1rem;
  margin-bottom: 0.5rem;
}

/* 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,
#quarto-sidebar > nav > div:first-child {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
  margin: 0 !important;
}

/* Make entire sidebar uniform - no panel effect */
#quarto-sidebar,
.sidebar-navigation,
#quarto-sidebar .sidebar-navigation,
nav.sidebar,
.sidebar.collapse.show {
  background: white !important;
}

.sidebar-logo img,
.sidebar .sidebar-logo img {
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Remove card/panel effects from sidebar title block */
.sidebar-title,
.sidebar-title-block,
#quarto-sidebar .sidebar-title,
#quarto-sidebar .sidebar-title-block,
.sidebar nav > div:first-child,
#quarto-sidebar nav > div:first-child,
.sidebar-title a,
#quarto-sidebar .sidebar-title a,
.sidebar-logo-link,
#quarto-sidebar .sidebar-logo-link {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Remove any panel styling from sidebar tools */
.sidebar-tools-main,
#quarto-sidebar .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.75rem 1rem;
  border-radius: 8px;
  margin: 0.25rem 0.5rem;
  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;
}

/* Learning Hubs - Dark Slate */
.part-hubs {
  background: linear-gradient(135deg, #2f4f4f 0%, #3d6363 100%);
  border-left-color: #4a7575;
}

.part-hubs:hover {
  background: linear-gradient(135deg, #3d6363 0%, #2f4f4f 100%);
}

/* Applications - Red */
.part-applications {
  background: linear-gradient(135deg, #9a0000 0%, #b00000 100%);
  border-left-color: #c41e1e;
}

.part-applications:hover {
  background: linear-gradient(135deg, #b00000 0%, #9a0000 100%);
}

/* Architecture Foundations - Brown */
.part-architecture,
.part-foundations {
  background: linear-gradient(135deg, #77370b 0%, #8f4410 100%);
  border-left-color: #a55118;
}

.part-architecture:hover,
.part-foundations:hover {
  background: linear-gradient(135deg, #8f4410 0%, #77370b 100%);
}

/* Architecture Distributed - Orange */
.part-distributed {
  background: linear-gradient(135deg, #d4652f 0%, #e07840 100%);
  border-left-color: #e88b52;
}

.part-distributed:hover {
  background: linear-gradient(135deg, #e07840 0%, #d4652f 100%);
}

/* Sensing - Golden Yellow */
.part-sensing {
  background: linear-gradient(135deg, #d4a500 0%, #e6b800 100%);
  border-left-color: #f0c820;
}

.part-sensing:hover {
  background: linear-gradient(135deg, #e6b800 0%, #d4a500 100%);
}

/* Fundamentals - Dark Maroon */
.part-fundamentals {
  background: linear-gradient(135deg, #640000 0%, #7a0000 100%);
  border-left-color: #8f1010;
}

.part-fundamentals:hover {
  background: linear-gradient(135deg, #7a0000 0%, #640000 100%);
}

/* Networking Fundamentals - Dark Green */
.part-communication,
.part-networking,
.part-net-fundamentals,
.part-networking-fundamentals {
  background: linear-gradient(135deg, #2e5b3a 0%, #3d7048 100%);
  border-left-color: #4a8556;
}

.part-communication:hover,
.part-networking:hover,
.part-net-fundamentals:hover,
.part-networking-fundamentals:hover {
  background: linear-gradient(135deg, #3d7048 0%, #2e5b3a 100%);
}

/* Short-Range Protocols - Medium Green */
.part-short-range {
  background: linear-gradient(135deg, #548235 0%, #6b9a42 100%);
  border-left-color: #7ead52;
}

.part-short-range:hover {
  background: linear-gradient(135deg, #6b9a42 0%, #548235 100%);
}

/* Long-Range & App Protocols - Light Green */
.part-long-range {
  background: linear-gradient(135deg, #70a349 0%, #7fb356 100%);
  border-left-color: #8fc365;
}

.part-long-range:hover {
  background: linear-gradient(135deg, #7fb356 0%, #70a349 100%);
}

/* Data - Navy Blue */
.part-data {
  background: linear-gradient(135deg, #1b4f72 0%, #21618c 100%);
  border-left-color: #2874a6;
}

.part-data:hover {
  background: linear-gradient(135deg, #21618c 0%, #1b4f72 100%);
}

/* Security - Deep Plum */
.part-security {
  background: linear-gradient(135deg, #6b2d5b 0%, #7d3568 100%);
  border-left-color: #8f4078;
}

.part-security:hover {
  background: linear-gradient(135deg, #7d3568 0%, #6b2d5b 100%);
}

/* Human Factors - Purple */
.part-human {
  background: linear-gradient(135deg, #7a2573 0%, #8d2e86 100%);
  border-left-color: #9a3799;
}

.part-human:hover {
  background: linear-gradient(135deg, #8d2e86 0%, #7a2573 100%);
}

/* Design - Silver Gray */
.part-design {
  background: linear-gradient(135deg, #7b8a8b 0%, #95a5a6 100%);
  border-left-color: #abb7b7;
}

.part-design:hover {
  background: linear-gradient(135deg, #95a5a6 0%, #7b8a8b 100%);
}

/* Products - Slate Blue */
.part-products {
  background: linear-gradient(135deg, #34495e 0%, #5d6d7e 100%);
  border-left-color: #6e7f8f;
}

.part-products:hover {
  background: linear-gradient(135deg, #5d6d7e 0%, #34495e 100%);
}

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

.part2 {
  background: var(--gradient-accent);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1rem 0.5rem 0.5rem;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.part2:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(2px);
}

/* ===== CHAPTER HEADERS ===== */
.chapter-header {
  background: var(--gradient-primary);
  color: white;
  padding: 3rem 2rem;
  border-radius: 16px;
  margin: -1rem -1rem 3rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.chapter-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.chapter-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.chapter-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0.5rem 0 1rem;
  color: white;
}

.chapter-description {
  font-size: 1.125rem;
  opacity: 0.95;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-width: 800px;
}

.chapter-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.meta-item {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.badge-primary {
  background: var(--primary-blue);
  color: white;
}

.badge-success {
  background: var(--success);
  color: white;
}

.badge-warning {
  background: var(--warning);
  color: var(--gray-900);
}

.badge-danger {
  background: var(--danger);
  color: white;
}

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

.btn-outline {
  background: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-outline:hover {
  background: var(--primary-blue);
  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);
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: var(--gray-700);
}

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

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

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

/* ===== 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;
}
.text-right {
  text-align: right;
}

.mb-1 {
  margin-bottom: var(--spacing-xs);
}
.mb-2 {
  margin-bottom: var(--spacing-sm);
}
.mb-3 {
  margin-bottom: var(--spacing-md);
}
.mb-4 {
  margin-bottom: var(--spacing-lg);
}

/* ===== 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(--gray-200);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  background: #fff;
  margin: 1.25rem 0;
}

.mcq-question {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.mcq-choices {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0;
}

.mcq-choices li {
  margin: 0.5rem 0;
}

.mcq-choices button {
  width: 100%;
  text-align: left;
  background: #f7f9fc;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mcq-choices button:hover,
.mcq-choices button:focus {
  background: rgba(0, 102, 204, 0.08);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.mcq-choices button.correct {
  background: #e8f5e9;
  border-color: var(--success);
}

.mcq-choices button.incorrect {
  background: #ffebee;
  border-color: var(--danger);
}

.mcq-explanation {
  display: none;
  margin-top: 0.75rem;
  background: #fafafa;
  border-left: 3px solid var(--primary-blue);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

.mcq-explanation.show {
  display: block;
}

.mcq-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mcq-actions button {
  background: #f7f9fc;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mcq-actions button:hover,
.mcq-actions button:focus {
  background: rgba(0, 102, 204, 0.08);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.mcq-choices button.selected {
  background: rgba(0, 102, 204, 0.08);
  border-color: rgba(0, 102, 204, 0.25);
}

.mcq-choices input[type="number"] {
  width: 8rem;
  margin-left: 0.5rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

.mcq-choices input[type="number"].correct {
  border-color: var(--success);
  background: #e8f5e9;
}

.mcq-choices input[type="number"].incorrect {
  border-color: var(--danger);
  background: #ffebee;
}

/* ===== KNOWLEDGE CHECK (Collapsible inline concept checks) ===== */
.knowledge-check {
  border: 2px solid #e0f2fe;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
  transition: all 0.3s ease;
}

.knowledge-check.hidden {
  display: none;
}

.knowledge-check summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: #0369a1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
  transition: all 0.2s ease;
  border-radius: 10px;
}

.knowledge-check summary:hover {
  background: rgba(14, 165, 233, 0.05);
}

.knowledge-check summary::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.knowledge-check summary::marker {
  content: "";
}

.knowledge-check[open] summary::before {
  transform: rotate(180deg);
  content: "▼";
  font-size: 0.625rem;
}

.knowledge-check-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--gray-700);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.knowledge-check .mcq {
  margin: 0.75rem 0;
  border: 1px solid #e0f2fe;
  background: white;
}

.knowledge-check-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
  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: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  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;
}
.mb-5 {
  margin-bottom: var(--spacing-xl);
}

.mt-1 {
  margin-top: var(--spacing-xs);
}
.mt-2 {
  margin-top: var(--spacing-sm);
}
.mt-3 {
  margin-top: var(--spacing-md);
}
.mt-4 {
  margin-top: var(--spacing-lg);
}
.mt-5 {
  margin-top: var(--spacing-xl);
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
  .chapter-header {
    padding: 2rem 1.5rem;
    margin: -1rem -1rem 2rem;
  }

  .chapter-header h1 {
    font-size: 2rem;
  }

  .chapter-meta {
    flex-direction: column;
    gap: 0.75rem;
  }

  .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;
  }
}

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

/* ===== 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;
  --toc-accent-hover: rgba(47, 79, 79, 0.14);
  --toc-accent-active: rgba(47, 79, 79, 0.24);
  --toc-accent-soft: rgba(47, 79, 79, 0.08);
  --toc-accent-glow: rgba(47, 79, 79, 0.3);
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-left: 1px solid #e0e0e0;
  padding: 1.5rem 1rem;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.03);
  position: relative;
}

/* Learning Hubs - Dark Slate */
body[class*="hubs"] #quarto-margin-sidebar,
body[data-page*="hubs"] #quarto-margin-sidebar {
  --toc-accent: #2f4f4f;
  --toc-accent-border: #2f4f4f;
  --toc-accent-hover: rgba(47, 79, 79, 0.16);
  --toc-accent-active: rgba(47, 79, 79, 0.26);
  --toc-accent-soft: rgba(47, 79, 79, 0.1);
  --toc-accent-glow: rgba(47, 79, 79, 0.32);
}

/* Applications - Red */
body[class*="applications-and-use-cases"] #quarto-margin-sidebar,
body[data-page*="applications"] #quarto-margin-sidebar {
  --toc-accent: #9a0000;
  --toc-accent-border: #9a0000;
  --toc-accent-hover: rgba(154, 0, 0, 0.16);
  --toc-accent-active: rgba(154, 0, 0, 0.26);
  --toc-accent-soft: rgba(154, 0, 0, 0.1);
  --toc-accent-glow: rgba(154, 0, 0, 0.32);
}

/* Architecture - Brown */
body[class*="architectures"] #quarto-margin-sidebar,
body[data-page*="architecture"] #quarto-margin-sidebar {
  --toc-accent: #77370b;
  --toc-accent-border: #77370b;
  --toc-accent-hover: rgba(119, 55, 11, 0.16);
  --toc-accent-active: rgba(119, 55, 11, 0.26);
  --toc-accent-soft: rgba(119, 55, 11, 0.1);
  --toc-accent-glow: rgba(119, 55, 11, 0.32);
}

/* Sensing - Golden Yellow */
body[class*="sensing-and-actuation"] #quarto-margin-sidebar,
body[data-page*="sensing"] #quarto-margin-sidebar {
  --toc-accent: #d4a500;
  --toc-accent-border: #d4a500;
  --toc-accent-hover: rgba(212, 165, 0, 0.16);
  --toc-accent-active: rgba(212, 165, 0, 0.26);
  --toc-accent-soft: rgba(212, 165, 0, 0.1);
  --toc-accent-glow: rgba(212, 165, 0, 0.32);
}

/* Networking Fundamentals - Dark Green */
body[class*="networking-and-communications"] #quarto-margin-sidebar,
body[data-page*="communication"] #quarto-margin-sidebar,
body[data-page*="networking"] #quarto-margin-sidebar {
  --toc-accent: #2e5b3a;
  --toc-accent-border: #2e5b3a;
  --toc-accent-hover: rgba(46, 91, 58, 0.16);
  --toc-accent-active: rgba(46, 91, 58, 0.26);
  --toc-accent-soft: rgba(46, 91, 58, 0.1);
  --toc-accent-glow: rgba(46, 91, 58, 0.32);
}

/* Data - Navy Blue */
body[class*="data-management-and-analytics"] #quarto-margin-sidebar,
body[data-page*="data"] #quarto-margin-sidebar {
  --toc-accent: #1b4f72;
  --toc-accent-border: #1b4f72;
  --toc-accent-hover: rgba(27, 79, 114, 0.16);
  --toc-accent-active: rgba(27, 79, 114, 0.26);
  --toc-accent-soft: rgba(27, 79, 114, 0.1);
  --toc-accent-glow: rgba(27, 79, 114, 0.32);
}

/* Security - Deep Plum */
body[class*="privacy-and-security"] #quarto-margin-sidebar,
body[data-page*="security"] #quarto-margin-sidebar,
body[data-page*="privacy"] #quarto-margin-sidebar {
  --toc-accent: #6b2d5b;
  --toc-accent-border: #6b2d5b;
  --toc-accent-hover: rgba(107, 45, 91, 0.16);
  --toc-accent-active: rgba(107, 45, 91, 0.26);
  --toc-accent-soft: rgba(107, 45, 91, 0.1);
  --toc-accent-glow: rgba(107, 45, 91, 0.32);
}

/* Human Factors - Purple */
body[class*="human-factors-and-interaction"] #quarto-margin-sidebar,
body[data-page*="human"] #quarto-margin-sidebar {
  --toc-accent: #7a2573;
  --toc-accent-border: #7a2573;
  --toc-accent-hover: rgba(122, 37, 115, 0.16);
  --toc-accent-active: rgba(122, 37, 115, 0.26);
  --toc-accent-soft: rgba(122, 37, 115, 0.1);
  --toc-accent-glow: rgba(122, 37, 115, 0.32);
}

/* Design - Silver Gray */
body[class*="design-strategies-and-prototyping"] #quarto-margin-sidebar,
body[data-page*="design"] #quarto-margin-sidebar {
  --toc-accent: #7b8a8b;
  --toc-accent-border: #7b8a8b;
  --toc-accent-hover: rgba(123, 138, 139, 0.16);
  --toc-accent-active: rgba(123, 138, 139, 0.26);
  --toc-accent-soft: rgba(123, 138, 139, 0.1);
  --toc-accent-glow: rgba(123, 138, 139, 0.3);
}

/* Products - Slate Blue */
body[class*="iot-products"] #quarto-margin-sidebar,
body[data-page*="products"] #quarto-margin-sidebar {
  --toc-accent: #34495e;
  --toc-accent-border: #34495e;
  --toc-accent-hover: rgba(52, 73, 94, 0.16);
  --toc-accent-active: rgba(52, 73, 94, 0.26);
  --toc-accent-soft: rgba(52, 73, 94, 0.1);
  --toc-accent-glow: rgba(52, 73, 94, 0.3);
}

/* TOC navigation styling - Ultra Compact */
nav#TOC {
  font-size: 0.7rem;
  line-height: 1.2;
}

nav#TOC .toc-title {
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--toc-accent);
  margin-bottom: 0.3rem;
  padding-bottom: 0.2rem;
  position: relative;
}

nav#TOC .toc-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--toc-accent) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.65;
  pointer-events: none;
}

nav#TOC ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

nav#TOC li {
  margin: 0;
}

nav#TOC a {
  display: block;
  position: relative;
  padding: 0.1rem 0.3rem 0.1rem 0.9rem;
  color: #495057;
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 2px;
  transition: all 0.15s ease;
  line-height: 1.2;
  background: none;
}

nav#TOC a::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: var(--toc-accent-border);
  opacity: 0.3;
  transition: all 0.15s ease;
}

nav#TOC a:hover {
  background: linear-gradient(
    90deg,
    var(--toc-accent-hover, rgba(0, 0, 0, 0.07)) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-left-color: var(--toc-accent-border);
  color: #212529;
  transform: translateX(4px);
  box-shadow: 0 6px 18px var(--toc-accent-soft, rgba(0, 0, 0, 0.05));
}

nav#TOC a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 6px var(--toc-accent-hover, rgba(0, 0, 0, 0.05));
}

/* Active section highlighting with part-specific shading */
nav#TOC a.active {
  background: linear-gradient(
    90deg,
    var(--toc-accent-active, rgba(0, 0, 0, 0.18)) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-left-color: var(--toc-accent-border);
  border-left-width: 4px;
  font-weight: 600;
  color: #1f1f1f;
  box-shadow: 0 10px 22px var(--toc-accent-glow, rgba(0, 0, 0, 0.12));
}

nav#TOC a.active::before {
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 0 0 8px var(--toc-accent-active, rgba(0, 0, 0, 0.1));
}

/* Nested items - Ultra Compact */
nav#TOC ul ul {
  padding-left: 0.5rem;
  margin: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.04);
}

nav#TOC ul ul a {
  font-size: 0.65rem;
  padding: 0.05rem 0.2rem 0.05rem 0.8rem;
  border-left-width: 1px;
  border-radius: 2px;
  background: none;
}

nav#TOC ul ul a::before {
  left: 0.3rem;
  width: 0.15rem;
  height: 0.15rem;
  opacity: 0.25;
}

nav#TOC ul ul a:hover::before,
nav#TOC ul ul a.active::before {
  left: 0.3rem;
}

/* Responsive adjustments */
@media (max-width: 1399px) {
  #quarto-margin-sidebar {
    padding: 1rem 0.75rem;
  }
}

@media (max-width: 991px) {
  #quarto-margin-sidebar {
    border-left: none;
    box-shadow: none;
  }
}

/* ===== LEFT SIDEBAR COLOR-CODED NAVIGATION ===== */
/* Color indicators for navigation items based on PART */
.sidebar-item a {
  position: relative;
  transition: all 0.3s ease;
  border-radius: 6px;
  margin: 2px 8px;
}

/* Learning Hubs - Dark Slate */
.sidebar-section[aria-label*="Learning Hubs"] .sidebar-item a,
.sidebar-item a[href*="/hubs/"] {
  border-left: 4px solid #2f4f4f;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Learning Hubs"] .sidebar-item a:hover,
.sidebar-item a[href*="/hubs/"]:hover {
  background: linear-gradient(90deg, rgba(47, 79, 79, 0.15) 0%, rgba(47, 79, 79, 0.05) 100%);
  border-left-color: #3d6363;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Learning Hubs"] .sidebar-item a.active,
.sidebar-item a[href*="/hubs/"].active {
  background: linear-gradient(90deg, rgba(47, 79, 79, 0.2) 0%, rgba(47, 79, 79, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Applications - Red */
.sidebar-section[aria-label*="Applications"] .sidebar-item a,
.sidebar-item a[href*="applications-and-use-cases"] {
  border-left: 4px solid #9a0000;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Applications"] .sidebar-item a:hover,
.sidebar-item a[href*="applications-and-use-cases"]:hover {
  background: linear-gradient(90deg, rgba(154, 0, 0, 0.15) 0%, rgba(154, 0, 0, 0.05) 100%);
  border-left-color: #b00000;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Applications"] .sidebar-item a.active,
.sidebar-item a[href*="applications-and-use-cases"].active {
  background: linear-gradient(90deg, rgba(154, 0, 0, 0.2) 0%, rgba(154, 0, 0, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Architecture - Brown */
.sidebar-section[aria-label*="Architecture"] .sidebar-item a,
.sidebar-item a[href*="architectures"] {
  border-left: 4px solid #77370b;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Architecture"] .sidebar-item a:hover,
.sidebar-item a[href*="architectures"]:hover {
  background: linear-gradient(90deg, rgba(119, 55, 11, 0.15) 0%, rgba(119, 55, 11, 0.05) 100%);
  border-left-color: #8f4410;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Architecture"] .sidebar-item a.active,
.sidebar-item a[href*="architectures"].active {
  background: linear-gradient(90deg, rgba(119, 55, 11, 0.2) 0%, rgba(119, 55, 11, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Sensing and Actuation - Golden Yellow */
.sidebar-section[aria-label*="Sensing"] .sidebar-item a,
.sidebar-item a[href*="sensing-and-actuation"] {
  border-left: 4px solid #d4a500;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Sensing"] .sidebar-item a:hover,
.sidebar-item a[href*="sensing-and-actuation"]:hover {
  background: linear-gradient(90deg, rgba(212, 165, 0, 0.15) 0%, rgba(212, 165, 0, 0.05) 100%);
  border-left-color: #e6b800;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Sensing"] .sidebar-item a.active,
.sidebar-item a[href*="sensing-and-actuation"].active {
  background: linear-gradient(90deg, rgba(212, 165, 0, 0.2) 0%, rgba(212, 165, 0, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Communication Networks - Dark Green */
.sidebar-section[aria-label*="Communication"] .sidebar-item a,
.sidebar-item a[href*="networking-and-communications"] {
  border-left: 4px solid #2e5b3a;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Communication"] .sidebar-item a:hover,
.sidebar-item a[href*="networking-and-communications"]:hover {
  background: linear-gradient(90deg, rgba(46, 91, 58, 0.15) 0%, rgba(46, 91, 58, 0.05) 100%);
  border-left-color: #3d7048;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Communication"] .sidebar-item a.active,
.sidebar-item a[href*="networking-and-communications"].active {
  background: linear-gradient(90deg, rgba(46, 91, 58, 0.2) 0%, rgba(46, 91, 58, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Data Analytics - Navy Blue */
.sidebar-section[aria-label*="Data"] .sidebar-item a,
.sidebar-item a[href*="data-management-and-analytics"] {
  border-left: 4px solid #1b4f72;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Data"] .sidebar-item a:hover,
.sidebar-item a[href*="data-management-and-analytics"]:hover {
  background: linear-gradient(90deg, rgba(27, 79, 114, 0.15) 0%, rgba(27, 79, 114, 0.05) 100%);
  border-left-color: #21618c;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Data"] .sidebar-item a.active,
.sidebar-item a[href*="data-management-and-analytics"].active {
  background: linear-gradient(90deg, rgba(27, 79, 114, 0.2) 0%, rgba(27, 79, 114, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Privacy and Security - Deep Plum */
.sidebar-section[aria-label*="Privacy"] .sidebar-item a,
.sidebar-item a[href*="privacy-and-security"] {
  border-left: 4px solid #6b2d5b;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Privacy"] .sidebar-item a:hover,
.sidebar-item a[href*="privacy-and-security"]:hover {
  background: linear-gradient(90deg, rgba(107, 45, 91, 0.15) 0%, rgba(107, 45, 91, 0.05) 100%);
  border-left-color: #7d3568;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Privacy"] .sidebar-item a.active,
.sidebar-item a[href*="privacy-and-security"].active {
  background: linear-gradient(90deg, rgba(107, 45, 91, 0.2) 0%, rgba(107, 45, 91, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Human Factors - Purple */
.sidebar-section[aria-label*="Human"] .sidebar-item a,
.sidebar-item a[href*="human-factors-and-interaction"] {
  border-left: 4px solid #7a2573;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Human"] .sidebar-item a:hover,
.sidebar-item a[href*="human-factors-and-interaction"]:hover {
  background: linear-gradient(90deg, rgba(122, 37, 115, 0.15) 0%, rgba(122, 37, 115, 0.05) 100%);
  border-left-color: #8d2e86;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Human"] .sidebar-item a.active,
.sidebar-item a[href*="human-factors-and-interaction"].active {
  background: linear-gradient(90deg, rgba(122, 37, 115, 0.2) 0%, rgba(122, 37, 115, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Design Strategies - Silver Gray */
.sidebar-section[aria-label*="Design"] .sidebar-item a,
.sidebar-item a[href*="design-strategies-and-prototyping"] {
  border-left: 4px solid #7b8a8b;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Design"] .sidebar-item a:hover,
.sidebar-item a[href*="design-strategies-and-prototyping"]:hover {
  background: linear-gradient(90deg, rgba(123, 138, 139, 0.15) 0%, rgba(123, 138, 139, 0.05) 100%);
  border-left-color: #95a5a6;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Design"] .sidebar-item a.active,
.sidebar-item a[href*="design-strategies-and-prototyping"].active {
  background: linear-gradient(90deg, rgba(123, 138, 139, 0.2) 0%, rgba(123, 138, 139, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* IoT Products - Slate Blue */
.sidebar-section[aria-label*="Products"] .sidebar-item a,
.sidebar-item a[href*="iot-products"] {
  border-left: 4px solid #34495e;
  padding-left: 12px;
}

.sidebar-section[aria-label*="Products"] .sidebar-item a:hover,
.sidebar-item a[href*="iot-products"]:hover {
  background: linear-gradient(90deg, rgba(52, 73, 94, 0.15) 0%, rgba(52, 73, 94, 0.05) 100%);
  border-left-color: #5d6d7e;
  transform: translateX(3px);
}

.sidebar-section[aria-label*="Products"] .sidebar-item a.active,
.sidebar-item a[href*="iot-products"].active {
  background: linear-gradient(90deg, rgba(52, 73, 94, 0.2) 0%, rgba(52, 73, 94, 0.08) 100%);
  border-left-width: 5px;
  font-weight: 600;
}

/* Sidebar color indicators for collapsed sections */
.sidebar-item-container .collapse-indicator {
  color: inherit;
  transition: transform 0.3s ease;
}

.sidebar-item-container[aria-expanded="true"] .collapse-indicator {
  transform: rotate(90deg);
}

/* Add small color dots before each chapter title for better visual cue */
.sidebar-item a::before {
  content: "•";
  position: absolute;
  left: -2px;
  font-size: 20px;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
  opacity: 0.6;
}

.sidebar-item a.active::before {
  opacity: 1;
  font-weight: bold;
}

/* ===== SIDEBAR STYLING (Width handled by Quarto grid) ===== */
.sidebar {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

/* Remove any forced width overrides - let Quarto handle responsive layout */
/* Width is now properly set in _quarto.yml using grid configuration */

/* ===== 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-source-group {
  margin-bottom: 12px;
}

.library-source-group h5 {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
}

.library-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Library option - increased specificity to avoid !important */
.library-images .library-option,
button.library-option,
.library-option {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 11px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

.library-option:hover {
  background: #e9ecef;
}

.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-practical::before {
  content: "Practical";
  display: inline-block;
  background: #16a085;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* 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"],
.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,
.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,
.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;
  }

  .chapter-header {
    background: none;
    color: var(--gray-900);
    box-shadow: none;
  }

  figure img {
    box-shadow: none;
  }
}