/* Interactive Elements and Visual Enhancements */\n\n/* Progressive Disclosure System */\n.collapsible {\n  background: var(--md-default-bg-color);\n  border: 1px solid var(--md-default-fg-color--lighter);\n  border-radius: var(--radius-md);\n  margin: var(--spacing-md) 0;\n  overflow: hidden;\n  transition: var(--hover-transition);\n}\n\n.collapsible:hover {\n  box-shadow: var(--shadow-light);\n}\n\n.collapsible-header {\n  padding: var(--spacing-md) var(--spacing-lg);\n  background: rgba(255, 153, 0, 0.05);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: var(--hover-transition);\n  user-select: none;\n}\n\n.collapsible-header:hover {\n  background: rgba(255, 153, 0, 0.1);\n}\n\n.collapsible-title {\n  font-weight: 600;\n  color: var(--md-primary-fg-color--dark);\n  margin: 0;\n  flex: 1;\n}\n\n.collapsible-icon {\n  color: var(--md-primary-fg-color);\n  transition: transform 0.3s ease;\n  font-size: 1.2rem;\n}\n\n.collapsible[aria-expanded=\"true\"] .collapsible-icon {\n  transform: rotate(180deg);\n}\n\n.collapsible-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease, padding 0.3s ease;\n  padding: 0 var(--spacing-lg);\n}\n\n.collapsible[aria-expanded=\"true\"] .collapsible-content {\n  max-height: 1000px;\n  padding: var(--spacing-lg);\n}\n\n/* Read More/Less Functionality */\n.expandable-content {\n  position: relative;\n}\n\n.expandable-content.collapsed {\n  max-height: 200px;\n  overflow: hidden;\n}\n\n.expandable-content.collapsed::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: linear-gradient(transparent, var(--md-default-bg-color));\n  pointer-events: none;\n}\n\n.read-more-toggle {\n  background: var(--md-primary-fg-color);\n  color: white;\n  border: none;\n  padding: var(--spacing-sm) var(--spacing-lg);\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  font-weight: 500;\n  transition: var(--hover-transition);\n  margin-top: var(--spacing-md);\n  display: block;\n}\n\n.read-more-toggle:hover {\n  background: var(--md-primary-fg-color--dark);\n  transform: translateY(-1px);\n}\n\n/* Difficulty and Time Indicators */\n.content-badges {\n  display: flex;\n  gap: var(--spacing-sm);\n  margin: var(--spacing-md) 0;\n  flex-wrap: wrap;\n}\n\n.difficulty-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-xs) var(--spacing-md);\n  border-radius: var(--radius-xl);\n  font-size: 0.8rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.difficulty-beginner {\n  background: var(--success-color);\n  color: white;\n}\n\n.difficulty-intermediate {\n  background: var(--warning-color);\n  color: white;\n}\n\n.difficulty-advanced {\n  background: var(--error-color);\n  color: white;\n}\n\n.time-badge {\n  background: var(--info-color);\n  color: white;\n  padding: var(--spacing-xs) var(--spacing-md);\n  border-radius: var(--radius-xl);\n  font-size: 0.8rem;\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n.time-badge::before {\n  content: '⏱';\n}\n\n.prerequisite-badge {\n  background: var(--secondary-color);\n  color: white;\n  padding: var(--spacing-xs) var(--spacing-md);\n  border-radius: var(--radius-xl);\n  font-size: 0.8rem;\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n.prerequisite-badge::before {\n  content: '📋';\n}\n\n/* Tooltips */\n.tooltip {\n  position: relative;\n  display: inline-block;\n  cursor: help;\n}\n\n.tooltip::before {\n  content: attr(data-tooltip);\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  padding: var(--spacing-sm) var(--spacing-md);\n  border-radius: var(--radius-md);\n  font-size: 0.8rem;\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s, transform 0.3s;\n  z-index: 1000;\n  margin-bottom: var(--spacing-xs);\n}\n\n.tooltip::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 5px solid transparent;\n  border-top-color: rgba(0, 0, 0, 0.9);\n  opacity: 0;\n  transition: opacity 0.3s;\n  pointer-events: none;\n  z-index: 1000;\n}\n\n.tooltip:hover::before,\n.tooltip:focus::before {\n  opacity: 1;\n  transform: translateX(-50%) translateY(-5px);\n}\n\n.tooltip:hover::after,\n.tooltip:focus::after {\n  opacity: 1;\n}\n\n/* Interactive Diagrams */\n.interactive-diagram {\n  background: var(--md-default-bg-color);\n  border: 1px solid var(--md-default-fg-color--lighter);\n  border-radius: var(--radius-lg);\n  padding: var(--spacing-xl);\n  margin: var(--spacing-xl) 0;\n  position: relative;\n  overflow: hidden;\n}\n\n.diagram-controls {\n  position: absolute;\n  top: var(--spacing-md);\n  right: var(--spacing-md);\n  display: flex;\n  gap: var(--spacing-sm);\n  z-index: 10;\n}\n\n.diagram-control {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--md-default-fg-color--lighter);\n  background: var(--md-default-bg-color);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--hover-transition);\n  font-size: 0.9rem;\n}\n\n.diagram-control:hover {\n  background: var(--md-primary-fg-color);\n  color: white;\n  border-color: var(--md-primary-fg-color);\n}\n\n.diagram-node {\n  background: white;\n  border: 2px solid var(--md-primary-fg-color);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-md);\n  cursor: pointer;\n  transition: var(--hover-transition);\n  position: absolute;\n  min-width: 120px;\n  text-align: center;\n  box-shadow: var(--shadow-light);\n}\n\n.diagram-node:hover {\n  transform: scale(1.05);\n  box-shadow: var(--shadow-medium);\n  z-index: 5;\n}\n\n.diagram-node.active {\n  background: var(--md-primary-fg-color);\n  color: white;\n}\n\n.diagram-node.highlighted {\n  border-color: var(--success-color);\n  background: rgba(76, 175, 80, 0.1);\n  animation: pulse 2s infinite;\n}\n\n.diagram-connection {\n  position: absolute;\n  background: var(--md-primary-fg-color--light);\n  height: 2px;\n  transform-origin: left center;\n  z-index: 1;\n}\n\n.diagram-connection::after {\n  content: '';\n  position: absolute;\n  right: -6px;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 6px solid transparent;\n  border-left-color: var(--md-primary-fg-color--light);\n}\n\n.diagram-connection.active {\n  background: var(--success-color);\n  animation: flowAnimation 2s linear infinite;\n}\n\n.diagram-connection.active::after {\n  border-left-color: var(--success-color);\n}\n\n@keyframes flowAnimation {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 20px 0;\n  }\n}\n\n/* Content Relationship Indicators */\n.related-content {\n  background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n  border-left: 4px solid var(--info-color);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-lg);\n  margin: var(--spacing-xl) 0;\n}\n\n.related-content-header {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  margin-bottom: var(--spacing-md);\n}\n\n.related-content-icon {\n  font-size: 1.2rem;\n  color: var(--info-color);\n}\n\n.related-content-title {\n  font-weight: 600;\n  color: var(--md-default-fg-color--dark);\n  margin: 0;\n}\n\n.related-links {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: var(--spacing-sm);\n}\n\n.related-link {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-sm) var(--spacing-md);\n  background: white;\n  border-radius: var(--radius-md);\n  text-decoration: none;\n  color: var(--md-default-fg-color);\n  transition: var(--hover-transition);\n  border: 1px solid var(--md-default-fg-color--lightest);\n}\n\n.related-link:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--shadow-light);\n  border-color: var(--md-primary-fg-color);\n}\n\n.related-link-icon {\n  font-size: 0.9rem;\n  color: var(--md-primary-fg-color);\n}\n\n/* Interactive Code Examples */\n.interactive-code {\n  position: relative;\n  margin: var(--spacing-lg) 0;\n}\n\n.code-controls {\n  position: absolute;\n  top: var(--spacing-sm);\n  right: var(--spacing-sm);\n  display: flex;\n  gap: var(--spacing-xs);\n  z-index: 10;\n}\n\n.code-control {\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  border: none;\n  border-radius: var(--radius-sm);\n  padding: var(--spacing-xs) var(--spacing-sm);\n  cursor: pointer;\n  font-size: 0.8rem;\n  transition: var(--hover-transition);\n}\n\n.code-control:hover {\n  background: var(--md-primary-fg-color);\n}\n\n.code-output {\n  background: #1a1a1a;\n  color: #00ff00;\n  padding: var(--spacing-md);\n  border-radius: 0 0 var(--radius-md) var(--radius-md);\n  font-family: 'Courier New', monospace;\n  white-space: pre-wrap;\n  min-height: 60px;\n  border-top: 1px solid var(--md-default-fg-color--lighter);\n}\n\n/* Animated Progress Indicators */\n.animated-progress {\n  position: relative;\n  background: var(--md-default-fg-color--lightest);\n  height: 12px;\n  border-radius: var(--radius-sm);\n  overflow: hidden;\n  margin: var(--spacing-md) 0;\n}\n\n.animated-progress-bar {\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    var(--md-primary-fg-color),\n    var(--md-accent-fg-color),\n    var(--md-primary-fg-color)\n  );\n  background-size: 200% 100%;\n  border-radius: var(--radius-sm);\n  animation: progressShimmer 2s ease-in-out infinite;\n  transition: width 0.8s ease;\n}\n\n@keyframes progressShimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n/* Quick Actions Menu */\n.quick-actions {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  z-index: 1000;\n}\n\n.quick-actions-toggle {\n  width: 56px;\n  height: 56px;\n  background: var(--md-primary-fg-color);\n  color: white;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  box-shadow: var(--shadow-medium);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.4rem;\n  transition: var(--hover-transition);\n}\n\n.quick-actions-toggle:hover {\n  background: var(--md-primary-fg-color--dark);\n  transform: scale(1.05);\n}\n\n.quick-actions-menu {\n  position: absolute;\n  bottom: 70px;\n  right: 0;\n  background: white;\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-heavy);\n  padding: var(--spacing-sm);\n  opacity: 0;\n  transform: translateY(20px) scale(0.8);\n  transition: all 0.3s ease;\n  pointer-events: none;\n  min-width: 200px;\n}\n\n.quick-actions.open .quick-actions-menu {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  pointer-events: auto;\n}\n\n.quick-action-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border-radius: var(--radius-md);\n  text-decoration: none;\n  color: var(--md-default-fg-color);\n  transition: var(--hover-transition);\n  margin-bottom: var(--spacing-xs);\n}\n\n.quick-action-item:hover {\n  background: rgba(255, 153, 0, 0.1);\n}\n\n.quick-action-item:last-child {\n  margin-bottom: 0;\n}\n\n.quick-action-icon {\n  font-size: 1.1rem;\n  color: var(--md-primary-fg-color);\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n  .collapsible-header {\n    padding: var(--spacing-md);\n  }\n  \n  .collapsible-content {\n    padding: 0 var(--spacing-md);\n  }\n  \n  .collapsible[aria-expanded=\"true\"] .collapsible-content {\n    padding: var(--spacing-md);\n  }\n  \n  .content-badges {\n    justify-content: center;\n  }\n  \n  .related-links {\n    grid-template-columns: 1fr;\n  }\n  \n  .quick-actions {\n    bottom: 80px; /* Account for mobile toolbar */\n  }\n  \n  .diagram-controls {\n    position: relative;\n    top: 0;\n    right: 0;\n    justify-content: center;\n    margin-bottom: var(--spacing-md);\n  }\n  \n  .interactive-diagram {\n    padding: var(--spacing-md);\n  }\n}\n\n/* Loading States for Interactive Elements */\n.interactive-loading {\n  position: relative;\n  pointer-events: none;\n  opacity: 0.6;\n}\n\n.interactive-loading::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--md-default-fg-color--lighter);\n  border-top: 2px solid var(--md-primary-fg-color);\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: translate(-50%, -50%) rotate(0deg); }\n  100% { transform: translate(-50%, -50%) rotate(360deg); }\n}\n\n/* Error States */\n.interactive-error {\n  border: 2px dashed var(--error-color);\n  background: rgba(244, 67, 54, 0.05);\n  color: var(--error-color);\n  text-align: center;\n  padding: var(--spacing-lg);\n  border-radius: var(--radius-md);\n}\n\n.interactive-error::before {\n  content: '⚠';\n  font-size: 2rem;\n  display: block;\n  margin-bottom: var(--spacing-sm);\n}\n\n/* Success States */\n.interactive-success {\n  border: 2px solid var(--success-color);\n  background: rgba(76, 175, 80, 0.05);\n  color: var(--success-color);\n  padding: var(--spacing-md);\n  border-radius: var(--radius-md);\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.interactive-success::before {\n  content: '✅';\n  font-size: 1.2rem;\n}