/* /Components/ContentItemDetail.razor.rz.scp.css */
/* ============================================================================
   Content Item Detail Component
   
   Component-scoped styles for article content display
   ============================================================================ */

/* Article Metadata - below title, before content */
.article-metadata[b-w87tn3lwye] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: calc(var(--spacing-4) * -0.8);
    margin-bottom: var(--spacing-3);
}
/* /Components/ContentItemsGrid.razor.rz.scp.css */
/* ============================================================================
   ContentItemsGrid Component Styles
   
   Handles the content area of section pages and content grid.
   ============================================================================ */

/* Total count badge next to page title */
.content-count[b-xfh82wmzot] {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: 0.7em;
}

/* Error state */
.collection-content .error[b-xfh82wmzot] {
  padding: var(--spacing-6);
  text-align: center;
  color: var(--color-text-secondary);
}

.collection-content .error h2[b-xfh82wmzot] {
  color: var(--color-red);
}

.collection-content .error button[b-xfh82wmzot] {
  margin-top: var(--spacing-3);
}

/* No content state */
.collection-content .no-content[b-xfh82wmzot] {
  padding: var(--spacing-6);
  text-align: center;
  color: var(--color-text-secondary);
}

/* Content Grid Layout */
.content-grid[b-xfh82wmzot] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-4);
}

/* Responsive */
@media (max-width: 768px) {
  .content-grid[b-xfh82wmzot] {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Content Card Skeleton Loading States
   ============================================================================ */

.skeleton-card[b-xfh82wmzot] {
  background: var(--color-bg-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  box-shadow: var(--shadow-md);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 350px;
}

.skeleton-card-title[b-xfh82wmzot] {
  height: 28px;
  width: 70%;
  margin-bottom: var(--spacing-1);
}

.skeleton-card-meta[b-xfh82wmzot] {
  height: 16px;
  width: 40%;
  margin-bottom: var(--spacing-2);
}

.skeleton-card-description[b-xfh82wmzot] {
  height: 16px;
  width: 100%;
  margin-bottom: var(--spacing-2);
  flex: 1;
}

.skeleton-card-description:last-of-type[b-xfh82wmzot] {
  width: 80%;
}

.skeleton-card-tag[b-xfh82wmzot] {
  height: 24px;
  width: 60px;
  border-radius: var(--radius-full);
}

/* ============================================================================
   Infinite Scroll States
   ============================================================================ */

.loading-more-indicator[b-xfh82wmzot] {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-secondary);
}

.loading-spinner[b-xfh82wmzot] {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-purple-bright);
  border-radius: 50%;
  animation: spin-b-xfh82wmzot 1s linear infinite;
  margin-bottom: 0.5rem;
}

@keyframes spin-b-xfh82wmzot {
  to {
    transform: rotate(360deg);
  }
}

.loading-more-indicator p[b-xfh82wmzot] {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.end-of-content[b-xfh82wmzot] {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-secondary);
}

.end-of-content p[b-xfh82wmzot] {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  opacity: 0.8;
}
/* /Components/DateRangeSlider.razor.rz.scp.css */
/* ============================================================================
   DateRangeSlider Component Styles
   
   Interactive dual-handle slider for date range filtering.
   Uses design tokens from design-tokens.css exclusively.
   ============================================================================ */

.date-range-slider[b-cxrfvuxwbz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-2);
}

/* Date range display label */
.date-range-display[b-cxrfvuxwbz] {
    text-align: center;
}

.date-range-label[b-cxrfvuxwbz] {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Slider container positions the dual-handle inputs */
.slider-container[b-cxrfvuxwbz] {
    position: relative;
    height: 32px;
    margin: 0 8px;
}

/* Background track */
.slider-track[b-cxrfvuxwbz] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--color-border-default);
    border-radius: var(--radius-full);
    pointer-events: none;
}

/* Active fill between handles */
.slider-fill[b-cxrfvuxwbz] {
    position: absolute;
    height: 100%;
    background: var(--color-purple-dark);
    border-radius: var(--radius-full);
    pointer-events: none;
}

/* Shared range input reset and styling */
.slider-input[b-cxrfvuxwbz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Thumb styling - WebKit (Chrome, Safari, Edge) */
.slider-input[b-cxrfvuxwbz]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-purple-bright);
    border: 2px solid var(--color-bg-default);
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: -7px;
}

.slider-input[b-cxrfvuxwbz]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px var(--color-purple-bg-subtle);
}

.slider-input:focus-visible[b-cxrfvuxwbz]::-webkit-slider-thumb {
    outline: 2px solid var(--color-purple-bright);
    outline-offset: 2px;
}

/* Thumb styling - Firefox */
.slider-input[b-cxrfvuxwbz]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-purple-bright);
    border: 2px solid var(--color-bg-default);
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider-input[b-cxrfvuxwbz]::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px var(--color-purple-bg-subtle);
}

.slider-input:focus-visible[b-cxrfvuxwbz]::-moz-range-thumb {
    outline: 2px solid var(--color-purple-bright);
    outline-offset: 2px;
}

/* Track styling - Firefox (hide built-in track since we use custom) */
.slider-input[b-cxrfvuxwbz]::-moz-range-track {
    background: transparent;
    border: none;
    height: 4px;
}

/* Track styling - WebKit */
.slider-input[b-cxrfvuxwbz]::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 4px;
}

/* Min/Max labels for slider range endpoints */
.slider-labels[b-cxrfvuxwbz] {
    display: flex;
    justify-content: space-between;
}

.slider-label-min[b-cxrfvuxwbz],
.slider-label-max[b-cxrfvuxwbz] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

/* Preset buttons row */
.date-presets[b-cxrfvuxwbz] {
    display: flex;
    gap: var(--spacing-1);
    flex-wrap: wrap;
    margin-top: var(--spacing-1);
}

.date-preset-button[b-cxrfvuxwbz] {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-default);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.date-preset-button:hover[b-cxrfvuxwbz] {
    background: var(--color-purple-bg-subtle);
    border-color: var(--color-purple-border-subtle);
    color: var(--color-text-primary);
}

/* Prevent sticky hover on touch devices */
@media (hover: none) {
    .date-preset-button:hover:not(.active)[b-cxrfvuxwbz] {
        background: var(--color-bg-default);
        border-color: var(--color-border-default);
        color: var(--color-text-secondary);
    }
}

.date-preset-button.active[b-cxrfvuxwbz] {
    background: var(--color-purple-bg-dark);
    border-color: var(--color-purple-dark);
    color: var(--color-purple-bright);
}

.date-preset-button:focus-visible[b-cxrfvuxwbz] {
    outline: 2px solid var(--color-purple-bright);
    outline-offset: 2px;
}
/* /Components/Header.razor.rz.scp.css */
/* ============================================================================
   Header Component Styles
   
   Uses display: contents to make nav elements stick relative to body,
   allowing them to remain sticky for entire page scroll (not just header height)
   ============================================================================ */

header[b-227b5eymec] {
    display: contents;
    /* Removes header from box tree - nav/subnav become direct children of body for layout */
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================================
   MainLayout Component Styles

   Component-specific styling for site footer (part of MainLayout)
   ============================================================================ */

/* Site Footer - pushed to bottom when content is short */
.site-footer[b-e24poz3lhj] {
  margin-top: auto;
  background: var(--color-bg-default);
  border-top: 1px solid var(--color-border-default);
  margin-top: var(--spacing-8);
  color: var(--color-text-secondary);
}

.footer-content[b-e24poz3lhj] {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-2) var(--spacing-3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  min-height: var(--touch-target-min-size);
}

.footer-content p[b-e24poz3lhj] {
  margin: 0;
  font-size: var(--font-size-sm);
}

.footer-content p a[b-e24poz3lhj] {
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--easing-ease);
  text-decoration: none;
}

.footer-content p a:hover[b-e24poz3lhj] {
  color: var(--color-purple-bright);
  text-decoration: none;
}

.footer-nav[b-e24poz3lhj] {
  display: flex;
  gap: var(--spacing-3);
}

.footer-nav a[b-e24poz3lhj] {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  transition: color var(--duration-fast) var(--easing-ease);
}

.footer-nav a:hover[b-e24poz3lhj] {
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-content[b-e24poz3lhj] {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-3);
  }

  .footer-nav[b-e24poz3lhj] {
    flex-direction: column;
    gap: var(--spacing-2);
  }
}

/* Blazor Error UI - Global utility */
#blazor-error-ui[b-e24poz3lhj] {
  background: linear-gradient(135deg, var(--color-purple-dark) 0%, var(--color-purple-bright) 100%);
  bottom: 0;
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  color: var(--color-text-on-emphasis);
  display: none;
  left: 0;
  padding: var(--spacing-4);
  position: fixed;
  width: 100%;
  z-index: 10000;
  animation: slideUp-b-e24poz3lhj 0.3s var(--easing-ease-out);
  justify-content: center;
  align-items: center;
}

@keyframes slideUp-b-e24poz3lhj {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#blazor-error-ui .error-content[b-e24poz3lhj] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  max-width: 1400px;
  margin: 0 auto;
}

#blazor-error-ui .error-icon[b-e24poz3lhj] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-text-on-emphasis);
}

#blazor-error-ui .error-message[b-e24poz3lhj] {
  min-width: 0;
}

#blazor-error-ui .error-message span[b-e24poz3lhj] {
  font-size: var(--font-size-base);
  color: var(--color-text-on-emphasis);
  line-height: 1.5;
  display: block;
}

#blazor-error-ui .error-actions[b-e24poz3lhj] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
  margin-top: var(--spacing-2);
}

#blazor-error-ui .reload-button[b-e24poz3lhj] {
  background: var(--color-purple-dark);
  border: 1px solid var(--color-purple-bright);
  color: var(--color-text-on-emphasis);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all var(--duration-fast) var(--easing-ease);
  white-space: nowrap;
  display: inline-block;
}

#blazor-error-ui .reload-button:hover[b-e24poz3lhj] {
  background: var(--color-purple-medium);
  border-color: var(--color-purple-bright);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#blazor-error-ui .dismiss-button[b-e24poz3lhj] {
  background: var(--color-purple-dark);
  border: 1px solid var(--color-purple-bright);
  color: var(--color-text-on-emphasis);
  cursor: pointer;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  transition: all var(--duration-fast) var(--easing-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

#blazor-error-ui .dismiss-button:hover[b-e24poz3lhj] {
  background: var(--color-purple-medium);
  border-color: var(--color-purple-bright);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Responsive */
@media (max-width: 768px) {
  #blazor-error-ui[b-e24poz3lhj] {
    padding: var(--spacing-3);
  }

  #blazor-error-ui .error-content[b-e24poz3lhj] {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  #blazor-error-ui .error-message[b-e24poz3lhj] {
    flex-basis: 100%;
  }

  #blazor-error-ui .error-message span[b-e24poz3lhj] {
    font-size: var(--font-size-sm);
  }

  #blazor-error-ui .error-actions[b-e24poz3lhj] {
    width: 100%;
    justify-content: flex-end;
  }

  #blazor-error-ui .reload-button[b-e24poz3lhj],
  #blazor-error-ui .dismiss-button[b-e24poz3lhj] {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1p4bzwx3qy],
.components-reconnect-repeated-attempt-visible[b-1p4bzwx3qy],
.components-reconnect-failed-visible[b-1p4bzwx3qy],
.components-pause-visible[b-1p4bzwx3qy],
.components-resume-failed-visible[b-1p4bzwx3qy],
.components-rejoining-animation[b-1p4bzwx3qy] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-retrying[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-failed[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1p4bzwx3qy] {
    display: block;
}


#components-reconnect-modal[b-1p4bzwx3qy] {
    background-color: var(--color-bg-default);
    color: var(--color-text-primary);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 2px solid var(--color-purple-dark);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1p4bzwx3qy 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-1p4bzwx3qy 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1p4bzwx3qy 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

}

#components-reconnect-modal[b-1p4bzwx3qy]::backdrop {
    background-color: var(--color-black-backdrop);
    animation: components-reconnect-modal-fadeInOpacity-b-1p4bzwx3qy 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1p4bzwx3qy {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1p4bzwx3qy {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1p4bzwx3qy {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1p4bzwx3qy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* Prevent visible resize when Blazor hides content before close animation */
    min-height: 140px;
}

#components-reconnect-modal p[b-1p4bzwx3qy] {
    margin: 0;
    text-align: center;
    color: var(--color-text-primary);
}

#components-reconnect-modal button[b-1p4bzwx3qy] {
    border: 0;
    background-color: var(--color-purple-bright);
    color: var(--color-bg-default);
    padding: 4px 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#components-reconnect-modal button:hover[b-1p4bzwx3qy] {
    background-color: var(--color-purple-medium);
}

#components-reconnect-modal button:active[b-1p4bzwx3qy] {
    background-color: var(--color-purple-dark);
}

.components-rejoining-animation[b-1p4bzwx3qy] {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.components-rejoining-animation div[b-1p4bzwx3qy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid var(--color-purple-dark);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Only animate when the reconnect dialog is actively showing — avoids
   mobile browsers treating the animation as already-completed when the
   element was still display:none at page load. */
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation div[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation div[b-1p4bzwx3qy] {
    animation: components-rejoining-animation-b-1p4bzwx3qy 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite backwards;
}

#components-reconnect-modal.components-reconnect-show .components-rejoining-animation div:nth-child(2)[b-1p4bzwx3qy],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation div:nth-child(2)[b-1p4bzwx3qy] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-1p4bzwx3qy {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    5% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}
/* /Components/NavHeader.razor.rz.scp.css */
/* ============================================================================
   NavHeader Component Styles
   
   Component-specific styling for site-wide navigation header.
   Includes hamburger menu, mobile menu panel, and compact header for mobile.
   ============================================================================ */

/* Main Navigation - Sticky at top of viewport */
.main-nav[b-ywddmcb3l6] {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-bg-default);
  border-bottom: 1px solid var(--color-border-default);
  width: 100%;
  min-height: var(--main-nav-height);
}

.main-nav-content[b-ywddmcb3l6] {
  max-width: var(--breakpoint-tablet);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}

/* Navigation links container (desktop) */
.nav-links[b-ywddmcb3l6] {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.site-logo[b-ywddmcb3l6] {
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--easing-ease);
}

.site-logo:hover[b-ywddmcb3l6] {
  color: var(--color-purple-bright);
  text-decoration: none;
}

.site-logo .logo-text[b-ywddmcb3l6] {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

/* Subtle purple underline on homepage logo (desktop only) */
@media (min-width: 1293px) {
  .site-logo.home-active .logo-text[b-ywddmcb3l6] {
    background-image: linear-gradient(var(--color-purple-dark), var(--color-purple-dark));
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 3px;
  }
}

.nav-link[b-ywddmcb3l6] {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--spacing-1) + var(--spacing-1) / 2) var(--spacing-3);
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-ease);
  min-height: var(--touch-target-min-size);
  line-height: 1;
}

.nav-link:hover[b-ywddmcb3l6] {
  background: var(--color-bg-hover-subtle);
  box-shadow: 0 0 0 1px var(--color-purple-bright) inset;
  text-decoration: none;
}

.nav-link.active[b-ywddmcb3l6] {
  color: var(--color-text-on-emphasis);
  background: var(--color-purple-dark);
  border-color: var(--color-purple-bright);
  text-decoration: none;
}

.nav-link.active:hover[b-ywddmcb3l6] {
  background: var(--color-purple-medium);
  text-decoration: none;
}

.about-link[b-ywddmcb3l6] {
  margin-left: auto;
  border: 1px solid var(--color-purple-bright);
  border-radius: var(--radius-md);
  padding: var(--spacing-1) var(--spacing-3);
}

/* ============================================================================
   Hamburger Button (hidden on desktop, visible on mobile)
   ============================================================================ */

.hamburger-btn[b-ywddmcb3l6] {
  display: none;
  position: relative;
  width: var(--touch-target-min-size);
  height: var(--touch-target-min-size);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-ease);
  margin-left: auto;
  margin-right: var(--spacing-1);
}

.hamburger-btn:hover[b-ywddmcb3l6] {
  background: var(--color-bg-hover-subtle);
}

.hamburger-btn:focus-visible[b-ywddmcb3l6] {
  outline: 2px solid var(--color-purple-bright);
  outline-offset: 2px;
}

.hamburger-line[b-ywddmcb3l6] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 30px;
  height: 3px;
  background: var(--color-text-primary);
  border-radius: var(--radius-sm);
  transition: all 0.3s var(--easing-ease);
}

/* Spread lines vertically when closed */
.hamburger-line:nth-child(1)[b-ywddmcb3l6] {
  transform: translate(-50%, calc(-50% - 8px));
}

.hamburger-line:nth-child(3)[b-ywddmcb3l6] {
  transform: translate(-50%, calc(-50% + 8px));
}

/* Hamburger → X animation */
.hamburger-btn.open .hamburger-line:nth-child(1)[b-ywddmcb3l6] {
  transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger-btn.open .hamburger-line:nth-child(2)[b-ywddmcb3l6] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.hamburger-btn.open .hamburger-line:nth-child(3)[b-ywddmcb3l6] {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================================
   Mobile Menu Panel (slide-out from right)
   ============================================================================ */

.mobile-menu[b-ywddmcb3l6] {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  max-height: 100dvh;
  background: var(--color-bg-default);
  border-left: 1px solid var(--color-border-default);
  z-index: 1001;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
  transform: translateX(100%);
  transition: transform 0.3s var(--easing-ease);
  padding: 0;
  flex-direction: column;
}

.mobile-menu[b-ywddmcb3l6]::-webkit-scrollbar {
  width: 6px;
}

.mobile-menu[b-ywddmcb3l6]::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-menu[b-ywddmcb3l6]::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 3px;
}

.mobile-menu[b-ywddmcb3l6]::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover);
}

.mobile-menu.open[b-ywddmcb3l6] {
  transform: translateX(0);
}

/* Mobile menu section header (expandable) */
.mobile-menu-section-header[b-ywddmcb3l6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-ease),
              color var(--duration-fast) var(--easing-ease);
  min-height: 40px;
  flex-shrink: 0;
  text-align: left;
}

.mobile-menu-section-header:hover[b-ywddmcb3l6] {
  background: var(--color-bg-hover-subtle);
}

.mobile-menu-section-header:focus-visible[b-ywddmcb3l6] {
  outline: 2px solid var(--color-purple-bright);
  outline-offset: -2px;
}

.mobile-menu-section-header.active[b-ywddmcb3l6] {
  color: var(--color-purple-bright);
  font-weight: var(--font-weight-semibold);
}

/* Chevron indicator */
.chevron[b-ywddmcb3l6] {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.3s var(--easing-ease);
  flex-shrink: 0;
}

.chevron.expanded[b-ywddmcb3l6] {
  transform: rotate(45deg);
}

/* Sub-items (collections + custom pages) */
.mobile-menu-sub-items[b-ywddmcb3l6] {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-emphasis);
}

.mobile-menu-sub-items a[b-ywddmcb3l6] {
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-lg);
  transition: all var(--duration-fast) var(--easing-ease);
  min-height: 40px;
  border-top: 1px solid var(--color-border-default);
}

.mobile-menu-sub-items a:first-child[b-ywddmcb3l6] {
  border-top: none;
}

.mobile-menu-sub-items a:hover[b-ywddmcb3l6] {
  background: var(--color-bg-hover-subtle);
  color: var(--color-text-primary);
  text-decoration: none;
}

.mobile-menu-sub-items a.active[b-ywddmcb3l6] {
  color: var(--color-purple-bright);
  font-weight: var(--font-weight-semibold);
}

/* About link in mobile menu */
.mobile-menu-link[b-ywddmcb3l6] {
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-border-default);
  min-height: 40px;
  transition: all var(--duration-fast) var(--easing-ease);
}

.mobile-menu-link:hover[b-ywddmcb3l6] {
  background: var(--color-bg-hover-subtle);
  text-decoration: none;
}

.mobile-menu-link.active[b-ywddmcb3l6] {
  color: var(--color-purple-bright);
}

/* ============================================================================
   Mobile Menu Overlay
   ============================================================================ */

.mobile-menu-overlay[b-ywddmcb3l6] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-black-backdrop);
  z-index: 1000;
}

/* ============================================================================
   Responsive - Mobile (≤1292px)
   ============================================================================ */

@media (max-width: 1292px) {
  /* Nav header sits above mobile menu so hamburger remains clickable when menu is open */
  .main-nav[b-ywddmcb3l6] {
    z-index: 1002;
    min-height: var(--mobile-nav-height);
  }

  .main-nav-content[b-ywddmcb3l6] {
    min-height: var(--mobile-nav-height);
    padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* Hide desktop nav links on mobile */
  .nav-links[b-ywddmcb3l6] {
    display: none;
  }

  /* Show hamburger button on mobile */
  .hamburger-btn[b-ywddmcb3l6] {
    display: flex;
  }

  /* Larger site title on mobile */
  .site-logo .logo-text[b-ywddmcb3l6] {
    font-size: var(--font-size-3xl);
  }

  /* Show mobile menu on mobile (as flex column, positioned fixed, below header) */
  .mobile-menu[b-ywddmcb3l6] {
    display: flex;
    top: var(--mobile-nav-height);
    max-height: calc(100dvh - var(--mobile-nav-height));
  }

  .about-link[b-ywddmcb3l6] {
    margin-left: 0;
  }
}

/* ============================================================================
   Reduced motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .hamburger-line[b-ywddmcb3l6],
  .mobile-menu[b-ywddmcb3l6],
  .chevron[b-ywddmcb3l6] {
    transition: none;
  }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ============================================================================
   About Page Component Styles
   
   Component-specific styling for About.razor page
   Only About-specific styles (team grid layout)
   Page layout uses global .page-without-sidebar from page-container.css
   ============================================================================ */

.team-members[b-u6ack1kw2r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-4);
    margin: 0px;
    grid-auto-rows: 1fr;
}

.team-member[b-u6ack1kw2r] {
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-photo[b-u6ack1kw2r] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--spacing-3);
    display: block;
    border: 3px solid var(--color-purple-medium);
}

.team-member h3[b-u6ack1kw2r] {
    text-align: center;
    margin-top: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.team-role[b-u6ack1kw2r] {
    text-align: center;
    color: var(--color-purple-bright);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--spacing-3) 0;
    font-size: var(--font-size-sm);
}

.team-bio[b-u6ack1kw2r] {
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-4) 0;
    font-size: var(--font-size-sm);
    flex: 1;
}

.team-links[b-u6ack1kw2r] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-top: auto;
}

.team-links a[b-u6ack1kw2r] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    background: var(--color-bg-emphasis);
    border: 1px solid var(--color-border-emphasis);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    transition: all var(--duration-fast) var(--easing-ease);
}

.team-links a:hover[b-u6ack1kw2r] {
    background: var(--color-purple-dark);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis);
}

.team-links .icon[b-u6ack1kw2r] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .team-members[b-u6ack1kw2r] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/AISDLC.razor.rz.scp.css */
/* AI-SDLC Page Styles - Converted from _sdlc.scss */
/* Phase-specific collapsible sections with distinct colors */

/* Phase blocks container */
[b-39sslr21hq] .sdlc-phases {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

/* Base phase block */
[b-39sslr21hq] .sdlc-phase-block {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-purple-border-subtle);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

/* Phase headers */
[b-39sslr21hq] .sdlc-phase-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-section);
    border: none;
    border-bottom: 1px solid var(--color-purple-border-very-subtle);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    position: relative;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

[b-39sslr21hq] .sdlc-phase-header:hover {
    background: var(--color-bg-emphasis);
}

[b-39sslr21hq] .sdlc-phase-header h2,
[b-39sslr21hq] .sdlc-phase-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-on-emphasis);
    flex: 1;
}

[b-39sslr21hq] .sdlc-phase-header h2::after,
[b-39sslr21hq] .sdlc-phase-header h3::after {
    display: none;
}

/* Toggle chevron */
[b-39sslr21hq] .sdlc-phase-toggle {
    font-size: 16px;
    color: var(--color-text-muted);
    transition: transform 0.25s ease;
}

[b-39sslr21hq] .sdlc-phase-toggle.expanded {
    transform: rotate(180deg);
}

/* Phase icon */
[b-39sslr21hq] .sdlc-phase-icon {
    font-size: 20px;
}

/* Phase content - collapsible */
[b-39sslr21hq] .sdlc-phase-content {
    display: none;
    overflow: hidden;
    padding: 0 20px;
}

[b-39sslr21hq] .sdlc-phase-content.expanded {
    display: block;
    padding: 20px;
}

/* Phase-specific colors with left border */
[b-39sslr21hq] .sdlc-phase-ideation {
    border-left: 4px solid var(--color-yellow);
}

[b-39sslr21hq] .sdlc-phase-ideation .sdlc-phase-header {
    background: var(--color-yellow-bg);
}

[b-39sslr21hq] .sdlc-phase-planning {
    border-left: 4px solid var(--color-blue);
}

[b-39sslr21hq] .sdlc-phase-planning .sdlc-phase-header {
    background: var(--color-blue-bg);
}

[b-39sslr21hq] .sdlc-phase-design {
    border-left: 4px solid var(--color-magenta);
}

[b-39sslr21hq] .sdlc-phase-design .sdlc-phase-header {
    background: var(--color-magenta-bg);
}

[b-39sslr21hq] .sdlc-phase-implementation {
    border-left: 4px solid var(--color-green);
}

[b-39sslr21hq] .sdlc-phase-implementation .sdlc-phase-header {
    background: var(--color-green-bg);
}

[b-39sslr21hq] .sdlc-phase-testing {
    border-left: 4px solid var(--color-orange);
}

[b-39sslr21hq] .sdlc-phase-testing .sdlc-phase-header {
    background: var(--color-orange-bg);
}

[b-39sslr21hq] .sdlc-phase-deployment {
    border-left: 4px solid var(--color-pink);
}

[b-39sslr21hq] .sdlc-phase-deployment .sdlc-phase-header {
    background: var(--color-pink-bg);
}

[b-39sslr21hq] .sdlc-phase-maintenance {
    border-left: 4px solid var(--color-teal);
}

[b-39sslr21hq] .sdlc-phase-maintenance .sdlc-phase-header {
    background: var(--color-teal-bg);
}

/* Info sections */
[b-39sslr21hq] .sdlc-info-section {
    margin-bottom: 24px;
}

[b-39sslr21hq] .sdlc-info-section:last-child {
    margin-bottom: 0;
}

[b-39sslr21hq] .sdlc-info-label {
    font-weight: 700;
    color: var(--color-purple-medium);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-purple-border-subtle);
}

[b-39sslr21hq] .sdlc-info-text {
    color: var(--color-text-primary);
    line-height: 1.7;
}

[b-39sslr21hq] .sdlc-info-text h4 {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px 0;
}

[b-39sslr21hq] .sdlc-info-text h4:first-child {
    margin-top: 0;
}

[b-39sslr21hq] .sdlc-info-text p {
    margin: 0 0 12px 0;
}

[b-39sslr21hq] .sdlc-info-text p:last-child {
    margin-bottom: 0;
}

[b-39sslr21hq] .sdlc-info-text ul {
    margin: 8px 0;
    padding-left: 20px;
}

[b-39sslr21hq] .sdlc-info-text ul li {
    margin-bottom: 6px;
}

/* Handover section within phases */
[b-39sslr21hq] .sdlc-handover-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--color-purple-border);
}

[b-39sslr21hq] .sdlc-handover-header {
    font-weight: 600;
    color: var(--color-purple-medium);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* Benefits grid */
[b-39sslr21hq] .sdlc-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 900px) {
    [b-39sslr21hq] .sdlc-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    [b-39sslr21hq] .sdlc-benefits-grid {
        grid-template-columns: 1fr;
    }
}

[b-39sslr21hq] .sdlc-benefit-card {
    display: flex;
    gap: 12px;
    padding: 18px;
    background: var(--color-green-bg);
    border-radius: 6px;
    border: 1px solid var(--color-green-border);
}

[b-39sslr21hq] .sdlc-benefit-card > div {
    flex: 1;
}

[b-39sslr21hq] .sdlc-benefit-card strong {
    display: block;
    color: var(--color-green-light);
    font-size: 16px;
    margin-bottom: 8px;
}

/* Collapsible cards */
[b-39sslr21hq] .sdlc-section-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-purple-border-subtle);
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease, box-shadow 0.5s ease;
    border-left: 4px solid var(--color-border-emphasis);
}

[b-39sslr21hq] .sdlc-card-header {
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-section);
    font-weight: 600;
    user-select: none;
    position: relative;
    font-size: 16px;
    transition: background 0.2s ease;
}

[b-39sslr21hq] .sdlc-card-header:hover {
    background: var(--color-bg-elevated);
}

[b-39sslr21hq] .sdlc-card-icon {
    font-size: 20px;
    transition: transform 0.25s ease;
    position: absolute;
    right: 15px;
}

[b-39sslr21hq] .sdlc-card-icon.expanded {
    transform: rotate(180deg);
}

[b-39sslr21hq] .sdlc-card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    padding: 0 15px;
}

[b-39sslr21hq] .sdlc-card-content.expanded {
    max-height: 1500px;
    padding: 15px;
}

/* Intro section */
[b-39sslr21hq] .sdlc-intro {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--color-bg-elevated);
    border-radius: 6px;
    border: 1px solid var(--color-purple-border-subtle);
}

[b-39sslr21hq] .sdlc-intro p {
    margin: 0;
    line-height: 1.6;
}
/* /Components/Pages/ContentItem.razor.rz.scp.css */
/* ============================================================================
   Content Item Detail Page Layout
   
   - Sidebar sections
   - Navigation buttons
   ============================================================================ */

/* Tags Section - matches homepage Popular Tags exactly */
.sidebar-section.article-tags .tags-cloud[b-p2716yteqy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.sidebar-section.article-tags .sidebar-tag[b-p2716yteqy] {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--easing-ease);
}

.sidebar-section.article-tags .sidebar-tag:hover[b-p2716yteqy] {
    background: var(--color-purple-dark);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis);
}

/* Content Navigation Buttons */
.content-navigation[b-p2716yteqy] {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border-default);
    align-items: center;
}

.nav-button[b-p2716yteqy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all var(--duration-fast) var(--easing-ease);
    min-height: var(--touch-target-min-size);
    cursor: pointer;
}

.nav-button.primary[b-p2716yteqy] {
    background: var(--color-purple-bright);
    color: var(--color-text-on-emphasis);
    border: 2px solid var(--color-purple-bright);
}

.nav-button.primary:hover[b-p2716yteqy] {
    background: var(--color-purple-bright);
    border-color: var(--color-purple-bright);
    box-shadow: var(--shadow-md);
}

.nav-button.secondary[b-p2716yteqy] {
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid var(--color-border-default);
}

.nav-button.secondary:hover[b-p2716yteqy] {
    background: var(--color-bg-default);
    border-color: var(--color-purple-bright);
    color: var(--color-purple-bright);
}

/* Loading and Error States */
.loading[b-p2716yteqy],
.error[b-p2716yteqy] {
    text-align: center;
    padding: var(--spacing-8);
}

.error[b-p2716yteqy] {
    background: var(--color-red-bg);
    border: 1px solid var(--color-red);
    border-radius: var(--radius-md);
    margin: var(--spacing-4);
}

.error button[b-p2716yteqy] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-purple-dark);
    color: var(--color-text-on-emphasis);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: all var(--duration-fast) var(--easing-ease);
}

.error button:hover[b-p2716yteqy] {
    background: var(--color-purple-bright);
}

/* Responsive Design */
@media (max-width: 1292px) {
    /* Sidebar already handles responsive in shared CSS */
}

@media (max-width: 640px) {
    .content-navigation[b-p2716yteqy] {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .nav-button[b-p2716yteqy] {
        width: 100%;
    }
}
/* /Components/Pages/DXSpace.razor.rz.scp.css */
/* DX Space Page - Component Scoped Styles */

/* Container */
.dx-container[b-b1mle0rodj] {
    max-width: 100%;
}

/* Intro Section */
.dx-intro[b-b1mle0rodj] {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.7;
}

.dx-intro p[b-b1mle0rodj] {
    margin-bottom: 1.5rem;
}

.dx-quote[b-b1mle0rodj] {
    border-left: 4px solid var(--color-purple-dark);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--color-bg-default);
    font-style: italic;
    font-size: 1.1rem;
}

.dx-quote cite[b-b1mle0rodj] {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Section Cards (Expandable) */
.dx-section-card[b-b1mle0rodj] {
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: var(--color-bg-default);
}

.dx-card-header[b-b1mle0rodj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--color-bg-default);
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
    transition: background-color 0.2s ease;
}

.dx-card-header:hover[b-b1mle0rodj] {
    background: var(--color-bg-emphasis);
}

.dx-card-header:focus-visible[b-b1mle0rodj] {
    outline: 2px solid var(--color-purple-bright);
    outline-offset: -2px;
}

.dx-card-icon[b-b1mle0rodj] {
    transition: transform 0.3s ease;
    font-size: 0.875rem;
}

.dx-card-icon.expanded[b-b1mle0rodj] {
    transform: rotate(180deg);
}

.dx-card-content[b-b1mle0rodj] {
    display: none;
    padding: 1.5rem;
}

.dx-card-content.expanded[b-b1mle0rodj] {
    display: block;
}

/* Section Intro */
.dx-section-intro[b-b1mle0rodj] {
    margin-bottom: 1.5rem;
}

.dx-section-intro h3[b-b1mle0rodj] {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.dx-section-intro p[b-b1mle0rodj] {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

/* DORA Metrics Grid */
.dx-metrics-grid[b-b1mle0rodj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.dx-metric-card[b-b1mle0rodj] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

.dx-metric-icon[b-b1mle0rodj] {
    font-size: 2rem;
    flex-shrink: 0;
}

.dx-metric-card strong[b-b1mle0rodj] {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.dx-metric-question[b-b1mle0rodj] {
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.dx-metric-detail h4[b-b1mle0rodj] {
    font-size: 0.9rem;
    margin: 1rem 0 0.5rem;
    color: var(--color-text-primary);
}

.dx-metric-detail p[b-b1mle0rodj] {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.dx-metric-detail ul[b-b1mle0rodj] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.95rem;
}

.dx-metric-detail li[b-b1mle0rodj] {
    margin-bottom: 0.25rem;
}

/* SPACE Grid */
.dx-space-grid[b-b1mle0rodj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dx-space-card[b-b1mle0rodj] {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

.dx-space-letter[b-b1mle0rodj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--color-purple-dark);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 8px;
    flex-shrink: 0;
}

.dx-space-content[b-b1mle0rodj] {
    flex: 1;
}

.dx-space-content strong[b-b1mle0rodj] {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.dx-space-content > p[b-b1mle0rodj] {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.dx-space-detail h4[b-b1mle0rodj] {
    font-size: 0.9rem;
    margin: 1rem 0 0.5rem;
}

.dx-space-detail ul[b-b1mle0rodj] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.95rem;
}

.dx-space-detail li[b-b1mle0rodj] {
    margin-bottom: 0.25rem;
}

/* DevEx Stats Grid */
.dx-stats-grid[b-b1mle0rodj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.dx-stat-card[b-b1mle0rodj] {
    text-align: center;
    padding: 1.5rem;
    background: var(--color-purple-dark);
    border-radius: 12px;
    color: white;
}

.dx-stat-number[b-b1mle0rodj] {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.dx-stat-card p[b-b1mle0rodj] {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.95;
}

/* DevEx Dimensions Grid */
.dx-devex-grid[b-b1mle0rodj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.dx-devex-card[b-b1mle0rodj] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

.dx-devex-icon[b-b1mle0rodj] {
    font-size: 2rem;
    flex-shrink: 0;
}

.dx-devex-card strong[b-b1mle0rodj] {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.dx-devex-card > div > p[b-b1mle0rodj] {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.dx-devex-card h4[b-b1mle0rodj] {
    font-size: 0.9rem;
    margin: 1rem 0 0.5rem;
}

.dx-devex-card ul[b-b1mle0rodj] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.95rem;
}

.dx-devex-card li[b-b1mle0rodj] {
    margin-bottom: 0.25rem;
}

/* Relationships Diagram */
.dx-relationship-diagram[b-b1mle0rodj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dx-relationship-item[b-b1mle0rodj] {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

.dx-relationship-header[b-b1mle0rodj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dx-relationship-icon[b-b1mle0rodj] {
    font-size: 1.5rem;
}

.dx-relationship-header strong[b-b1mle0rodj] {
    font-size: 1.1rem;
}

.dx-relationship-item p[b-b1mle0rodj] {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.dx-relationship-arrow[b-b1mle0rodj] {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    padding: 0 0.5rem;
}

/* Choice Grid */
.dx-choice-grid[b-b1mle0rodj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.dx-choice-card[b-b1mle0rodj] {
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

.dx-choice-card h4[b-b1mle0rodj] {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.dx-choice-card ul[b-b1mle0rodj] {
    margin: 0;
    padding-left: 1.25rem;
}

.dx-choice-card li[b-b1mle0rodj] {
    margin-bottom: 0.5rem;
}

/* Steps List */
.dx-steps-list[b-b1mle0rodj] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dx-step[b-b1mle0rodj] {
    display: flex;
    gap: 1.25rem;
}

.dx-step-number[b-b1mle0rodj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-purple-dark);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.dx-step-content[b-b1mle0rodj] {
    flex: 1;
}

.dx-step-content strong[b-b1mle0rodj] {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.dx-step-content > p[b-b1mle0rodj] {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.dx-step-tips[b-b1mle0rodj] {
    background: var(--color-bg-default);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 0.75rem;
}

.dx-step-tips h4[b-b1mle0rodj] {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.dx-step-tips ul[b-b1mle0rodj] {
    margin: 0;
    padding-left: 1.25rem;
}

.dx-step-tips li[b-b1mle0rodj] {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

/* Tools Grid */
.dx-tools-grid[b-b1mle0rodj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.dx-tool-card[b-b1mle0rodj] {
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

.dx-tool-card strong[b-b1mle0rodj] {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.dx-tool-type[b-b1mle0rodj] {
    font-size: 0.85rem;
    color: var(--color-purple-dark);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.dx-tool-card > p:last-child[b-b1mle0rodj] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

/* Resources List */
.dx-resources-list[b-b1mle0rodj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dx-resource[b-b1mle0rodj] {
    padding: 1rem 1.25rem;
    background: var(--color-bg-default);
    border-radius: 6px;
    border-left: 4px solid var(--color-purple-dark);
}

.dx-resource strong[b-b1mle0rodj] {
    display: block;
    margin-bottom: 0.5rem;
}

.dx-resource p[b-b1mle0rodj] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

/* Practices Grid */
.dx-practices-grid[b-b1mle0rodj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.dx-practice-do[b-b1mle0rodj],
.dx-practice-dont[b-b1mle0rodj] {
    padding: 1.25rem;
    border-radius: 8px;
}

.dx-practice-do[b-b1mle0rodj] {
    background: var(--color-green-light-bg);
    border: 1px solid var(--color-green-light-border);
}

.dx-practice-dont[b-b1mle0rodj] {
    background: var(--color-red-light-bg);
    border: 1px solid var(--color-red-light-border);
}

.dx-practice-do h4[b-b1mle0rodj],
.dx-practice-dont h4[b-b1mle0rodj] {
    margin-top: 0;
    margin-bottom: 1rem;
}

.dx-practice-do ul[b-b1mle0rodj],
.dx-practice-dont ul[b-b1mle0rodj] {
    margin: 0;
    padding-left: 1.25rem;
}

.dx-practice-do li[b-b1mle0rodj],
.dx-practice-dont li[b-b1mle0rodj] {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

/* Insight Box */
.dx-insight-box[b-b1mle0rodj] {
    background: var(--color-amber-bg);
    border: 1px solid var(--color-amber-border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.dx-insight-box h4[b-b1mle0rodj] {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--color-amber);
}

.dx-insight-box p[b-b1mle0rodj] {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .dx-metrics-grid[b-b1mle0rodj],
    .dx-devex-grid[b-b1mle0rodj],
    .dx-tools-grid[b-b1mle0rodj],
    .dx-choice-grid[b-b1mle0rodj],
    .dx-practices-grid[b-b1mle0rodj] {
        grid-template-columns: 1fr;
    }

    .dx-relationship-diagram[b-b1mle0rodj] {
        flex-direction: column;
    }

    .dx-relationship-arrow[b-b1mle0rodj] {
        transform: rotate(90deg);
    }

    .dx-relationship-item[b-b1mle0rodj] {
        max-width: 100%;
    }

    .dx-space-card[b-b1mle0rodj],
    .dx-metric-card[b-b1mle0rodj],
    .dx-devex-card[b-b1mle0rodj] {
        flex-direction: column;
    }

    .dx-space-letter[b-b1mle0rodj] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }

    .dx-stats-grid[b-b1mle0rodj] {
        grid-template-columns: 1fr;
    }

    .dx-stat-number[b-b1mle0rodj] {
        font-size: 2.5rem;
    }

    .dx-step[b-b1mle0rodj] {
        flex-direction: column;
    }

    .dx-step-number[b-b1mle0rodj] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
}
/* /Components/Pages/GenAI.razor.rz.scp.css */
/* =================================================================
   GenAI Page - FAQ and More Information Blocks
   ================================================================= */

/* FAQ Block Styling */
.genai-faq[b-alckei0axu] {
    background: var(--color-pink-light-bg);
    border: 1px solid var(--color-pink-light-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin: var(--spacing-4) 0;
}

.genai-faq-header[b-alckei0axu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-3);
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--color-text-emphasis);
}

.genai-faq-icon[b-alckei0axu] {
    font-size: 1.5rem;
    line-height: 1;
}

.genai-faq-item[b-alckei0axu] {
    margin-bottom: var(--spacing-3);
}

.genai-faq-item:last-child[b-alckei0axu] {
    margin-bottom: 0;
}

.genai-faq-question[b-alckei0axu] {
    font-weight: 600;
    color: var(--color-text-emphasis);
    margin-bottom: var(--spacing-1);
}

.genai-faq-answer[b-alckei0axu] {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

/* More Information Block Styling */
.genai-more-info[b-alckei0axu] {
    background: var(--color-purple-bg-subtle);
    border: 1px solid var(--color-purple-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin: var(--spacing-4) 0;
}

.genai-more-info-header[b-alckei0axu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-2);
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--color-text-emphasis);
}

.genai-more-info-icon[b-alckei0axu] {
    font-size: 1.5rem;
    line-height: 1;
}

.genai-more-info ul[b-alckei0axu] {
    margin: 0;
    padding-left: var(--spacing-4);
    list-style: disc;
}

.genai-more-info li[b-alckei0axu] {
    margin-bottom: var(--spacing-1);
    color: var(--color-text-primary);
}

.genai-more-info li:last-child[b-alckei0axu] {
    margin-bottom: 0;
}

.genai-more-info a[b-alckei0axu] {
    color: var(--color-purple-medium);
    text-decoration: none;
}

.genai-more-info a:hover[b-alckei0axu] {
    color: var(--color-purple-bright);
    text-decoration: underline;
}
/* /Components/Pages/GitHubCopilotFeatures.razor.rz.scp.css */
/* ============================================================================
   GitHub Copilot Features Page Styles
   
   Page-specific layout only - cards inherit from global cards.css
   ============================================================================ */

/* Intro Section */
.custom-page-container[b-bw5jyrzhtn] {
  max-width: 100%;
}

.custom-page-intro[b-bw5jyrzhtn] {
  margin-bottom: var(--spacing-5);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.custom-page-intro p[b-bw5jyrzhtn] {
  margin-bottom: var(--spacing-2);
  color: var(--color-text-primary);
}

.custom-page-note[b-bw5jyrzhtn] {
  background: var(--color-amber-bg);
  border-left: 4px solid var(--color-amber);
  padding: var(--spacing-2) var(--spacing-3);
  margin: var(--spacing-3) 0;
  border-radius: var(--radius-sm);
}

.custom-page-note strong[b-bw5jyrzhtn] {
  color: var(--color-amber);
  font-weight: var(--font-weight-bold);
}

.custom-page-links[b-bw5jyrzhtn] {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  flex-wrap: wrap;
}

/* Subscription Tiers */
.features-tiers[b-bw5jyrzhtn] {
  margin-bottom: var(--spacing-6);
}

.features-tiers h2[b-bw5jyrzhtn] {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-3);
  color: var(--color-text-emphasis);
}

.features-tiers-grid[b-bw5jyrzhtn] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.features-tier-card[b-bw5jyrzhtn] {
  background: var(--color-bg-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-normal) var(--easing-ease-out), 
              box-shadow var(--duration-normal) var(--easing-ease-out);
}

.features-tier-card:hover[b-bw5jyrzhtn] {
  border-color: var(--color-purple-medium);
  box-shadow: var(--shadow-md);
}

.features-tier-card h3[b-bw5jyrzhtn] {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--spacing-1) 0;
  color: var(--color-purple-bright);
}

.features-tier-tagline[b-bw5jyrzhtn] {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
  line-height: var(--line-height-normal);
}

.features-tier-price[b-bw5jyrzhtn] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border-default);
}

.price-amount[b-bw5jyrzhtn] {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-purple-bright);
}

.price-period[b-bw5jyrzhtn] {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.price-yearly[b-bw5jyrzhtn] {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.features-tier-features[b-bw5jyrzhtn] {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.features-tier-features li[b-bw5jyrzhtn] {
  padding: var(--spacing-1) 0;
  padding-left: 1.75rem;
  position: relative;
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.features-tier-features li[b-bw5jyrzhtn]::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-green-light);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

/* Feature Sections */
.features-video-section[b-bw5jyrzhtn] {
  margin-bottom: var(--spacing-6);
}

.features-video-section h2[b-bw5jyrzhtn] {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-2);
  color: var(--color-text-emphasis);
}

.features-section-plans[b-bw5jyrzhtn] {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--spacing-3);
}

/* Sidebar Filters */
.sidebar-section[b-bw5jyrzhtn] {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border-default);
}

.sidebar-heading[b-bw5jyrzhtn] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-emphasis);
  margin: 0 0 var(--spacing-2) 0;
}

.filter-controls[b-bw5jyrzhtn] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.filter-toggle[b-bw5jyrzhtn] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}

.filter-toggle input[type="checkbox"][b-bw5jyrzhtn] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  accent-color: var(--color-purple-medium);
}

.filter-toggle:hover[b-bw5jyrzhtn] {
  color: var(--color-text-emphasis);
}

.filter-toggle input[type="checkbox"]:focus-visible[b-bw5jyrzhtn] {
  outline: var(--focus-outline-width) solid var(--color-purple-bright);
  outline-offset: var(--focus-outline-offset);
}

/* Responsive */
@media (max-width: 768px) {
  .features-tiers-grid[b-bw5jyrzhtn] {
    grid-template-columns: 1fr;
  }

  .custom-page-links[b-bw5jyrzhtn] {
    flex-direction: column;
  }

  .custom-page-links a[b-bw5jyrzhtn] {
    text-align: center;
  }
}

/* Print */
@media print {
  .features-tier-card[b-bw5jyrzhtn] {
    border-color: var(--color-print-border);
    page-break-inside: avoid;
  }

  .custom-page-links a[b-bw5jyrzhtn] {
    background: transparent;
    color: var(--color-print-text);
    border: 1px solid var(--color-print-border);
  }
}

/* /Components/Pages/GitHubCopilotHandbook.razor.rz.scp.css */
/* ============================================================================
   GitHub Copilot Handbook Page Styles
   ============================================================================ */

/* Handbook Hero Section - Featured book presentation */
.handbook-hero[b-rbpzmqqexh] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-6);
    align-items: start;
    padding: var(--spacing-5);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-left: 4px solid var(--color-purple-medium);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-5);
    position: relative;
}

/* Book cover container with glow effect */
.handbook-hero-cover[b-rbpzmqqexh] {
    position: relative;
    z-index: 1;
}

.handbook-hero-cover img[b-rbpzmqqexh] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow:
        var(--shadow-2xl),
        var(--border-glow-white);
}

/* Subtle glow behind the book */
.handbook-cover-glow[b-rbpzmqqexh] {
    position: absolute;
    inset: 10%;
    background: radial-gradient(ellipse, var(--color-purple-dark) 0%, transparent 70%);
    opacity: 0.3;
    filter: blur(40px);
    z-index: -1;
}

/* Hero content area */
.handbook-hero-content[b-rbpzmqqexh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.handbook-tagline[b-rbpzmqqexh] {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-purple-bright);
}

.handbook-description[b-rbpzmqqexh] {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* Metadata grid */
.handbook-meta[b-rbpzmqqexh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-1);
}

.handbook-meta-item[b-rbpzmqqexh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.handbook-meta-label[b-rbpzmqqexh] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
}

.handbook-meta-value[b-rbpzmqqexh] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Introduction text */
.handbook-intro-text[b-rbpzmqqexh] {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-bg-default);
    border-left: 3px solid var(--color-purple-medium);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.handbook-intro-text p[b-rbpzmqqexh] {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-primary);
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .handbook-hero[b-rbpzmqqexh] {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--spacing-4);
    }

    .handbook-hero-cover[b-rbpzmqqexh] {
        max-width: 200px;
        margin: 0 auto;
    }

    .handbook-hero-content[b-rbpzmqqexh] {
        align-items: center;
    }

    .handbook-meta[b-rbpzmqqexh] {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
}
/* /Components/Pages/GitHubCopilotLevels.razor.rz.scp.css */
/* Scoped CSS for GitHub Copilot Levels page */

/* Video embeds for each level */
[b-7jhk3b2eyp] .levels-video {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    margin: var(--spacing-6) 0;
    border-radius: var(--radius-lg);
    background: var(--color-bg-default);
    overflow: hidden;
}

[b-7jhk3b2eyp] .levels-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
}
/* /Components/Pages/GitHubCopilotVSCodeUpdates.razor.rz.scp.css */
/* Scoped CSS for GitHub Copilot VS Code Updates page */

/* Latest Update Section - Full content display */
.latest-update-section[b-s4inpj7tvx] {
    margin-top: var(--spacing-lg);
}

.latest-update-header[b-s4inpj7tvx] {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-default);
}

.latest-update-title[b-s4inpj7tvx] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-text-primary);
}

/* No content message */
.no-content-message[b-s4inpj7tvx] {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-xl);
}
/* /Components/Pages/SectionCollection.razor.rz.scp.css */
/* ============================================================================
   Section Collection Page Component Styles
   
   Component-specific styling for SectionCollection.razor page
   Uses global .page-with-sidebar layout from page-container.css
   ============================================================================ */

/* ============================================================================
   Section Collection Page Skeleton Loading States
   ============================================================================ */

.skeleton-header[b-jr960ytlwd] {
  height: 220px;
  width: 100%;
  margin-bottom: 0;
}

.skeleton-title[b-jr960ytlwd] {
  height: 36px;
  width: 60%;
  margin-bottom: var(--spacing-2);
}

.skeleton-description[b-jr960ytlwd] {
  height: 20px;
  width: 80%;
}

.skeleton-nav[b-jr960ytlwd] {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skeleton-nav-item[b-jr960ytlwd] {
  height: 44px;
  width: 100%;
  margin-bottom: var(--spacing-2);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .skeleton-header[b-jr960ytlwd] {
    height: 160px;
  }
}
/* /Components/ResponsiveImage.razor.rz.scp.css */
/* ============================================================================
   ResponsiveImage Component - Picture element with format fallbacks
   ============================================================================ */

/* Picture element acting as background container - fills parent */
picture.background-image-container[b-p0w0ji1ezu] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* Hide source elements - they're metadata only, shouldn't render */
picture.background-image-container source[b-p0w0ji1ezu] {
    display: none;
}

/* For images used as backgrounds - center and cover the container */
picture.background-image-container img.background-image[b-p0w0ji1ezu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Let browser handle progressive loading naturally - no forced dimensions */
}

/* For regular responsive images */
picture img[b-p0w0ji1ezu] {
    max-width: 100%;
    height: auto;
    display: block;
}
/* /Components/SectionBanner.razor.rz.scp.css */
/* ============================================================================
   Section Banner - Decorative hero banner for section pages
   (Restored from original PageHeader.razor.css)
   ============================================================================ */

/* Universal Section Banner - Same height on all pages */
.section-banner[b-j7kjv6ocz7] {
    height: 220px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transition: height 0.3s ease;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border-default);
    /* Background images are set via CSS classes (e.g., .section-banner-bg-ai) */
    /* Full-size images used for banners for quality */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Section background image classes for banners (using full-size images) */
/* Using image-set for progressive enhancement - JXL → WebP → JPG fallback */
.section-banner-bg-ai[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/ai.jxl') type('image/jxl'),
            url('/images/section-backgrounds/ai.webp') type('image/webp'),
            url('/images/section-backgrounds/ai.jpg') type('image/jpeg'));
}

.section-banner-bg-github-copilot[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/github-copilot.jxl') type('image/jxl'),
            url('/images/section-backgrounds/github-copilot.webp') type('image/webp'),
            url('/images/section-backgrounds/github-copilot.jpg') type('image/jpeg'));
}

.section-banner-bg-azure[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/azure.jxl') type('image/jxl'),
            url('/images/section-backgrounds/azure.webp') type('image/webp'),
            url('/images/section-backgrounds/azure.jpg') type('image/jpeg'));
}

.section-banner-bg-ml[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/ml.jxl') type('image/jxl'),
            url('/images/section-backgrounds/ml.webp') type('image/webp'),
            url('/images/section-backgrounds/ml.jpg') type('image/jpeg'));
}

.section-banner-bg-devops[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/devops.jxl') type('image/jxl'),
            url('/images/section-backgrounds/devops.webp') type('image/webp'),
            url('/images/section-backgrounds/devops.jpg') type('image/jpeg'));
}

.section-banner-bg-dotnet[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/dotnet.jxl') type('image/jxl'),
            url('/images/section-backgrounds/dotnet.webp') type('image/webp'),
            url('/images/section-backgrounds/dotnet.jpg') type('image/jpeg'));
}

.section-banner-bg-security[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/security.jxl') type('image/jxl'),
            url('/images/section-backgrounds/security.webp') type('image/webp'),
            url('/images/section-backgrounds/security.jpg') type('image/jpeg'));
}

.section-banner-bg-all[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/all.jxl') type('image/jxl'),
            url('/images/section-backgrounds/all.webp') type('image/webp'),
            url('/images/section-backgrounds/all.jpg') type('image/jpeg'));
}

.section-banner-bg-none[b-j7kjv6ocz7] {
    background-image: image-set(url('/images/section-backgrounds/none.jxl') type('image/jxl'),
            url('/images/section-backgrounds/none.webp') type('image/webp'),
            url('/images/section-backgrounds/none.jpg') type('image/jpeg'));
}

/* Collapsed state when scrolled */
.section-banner.collapsed[b-j7kjv6ocz7] {
    height: 0;
    overflow: hidden;
}

.section-banner[b-j7kjv6ocz7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay-banner);
}

.section-banner[b-j7kjv6ocz7]::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, var(--color-overlay-banner-edge), transparent);
    pointer-events: none;
}

/* Homepage banner - background image set via .section-banner-bg-* classes */
/* Overlay gradient applied via .section-banner::before pseudo-element */
.home-banner[b-j7kjv6ocz7] {
    /* No additional background needed - uses section background classes */
}

.section-banner-content[b-j7kjv6ocz7] {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--color-text-on-emphasis);
    padding: var(--spacing-2);
    max-width: 1000px;
    width: 100%;
}

.header-text-overlay[b-j7kjv6ocz7] {
    position: relative;
    background: var(--color-black-backdrop);
    backdrop-filter: blur(3px);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-purple-border-very-subtle);
    width: 850px;
    max-width: 90%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-banner-content .banner-title[b-j7kjv6ocz7] {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0;
    font-weight: var(--font-weight-bold);
    text-shadow: var(--text-shadow-lg);
    line-height: var(--line-height-heading);
}

/* RSS icon link next to banner title - mobile only.
   Positioned absolutely so the title stays visually centered. */
.banner-rss-link[b-j7kjv6ocz7] {
    display: none;
    position: absolute;
    right: var(--spacing-1);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-on-emphasis);
    opacity: 0.85;
    transition: opacity var(--duration-fast) var(--easing-ease);
    line-height: 1;
    border-radius: var(--radius-md);
    min-width: var(--touch-target-min-size);
    min-height: var(--touch-target-min-size);
    align-items: center;
    justify-content: center;
}

.banner-rss-link:hover[b-j7kjv6ocz7] {
    opacity: 1;
}

.banner-rss-link svg[b-j7kjv6ocz7] {
    display: block;
}

.section-banner-content .banner-description[b-j7kjv6ocz7] {
    font-size: var(--font-size-lg);
    margin: 0;
    opacity: 0.95;
    text-shadow: var(--text-shadow-sm);
    color: var(--color-text-on-emphasis);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
/* Mobile/desktop title toggle - shows "Home" on mobile for homepage */
.banner-title-mobile[b-j7kjv6ocz7] {
    display: none;
}

@media (max-width: 1292px) {
    .banner-title-desktop[b-j7kjv6ocz7] {
        display: none;
    }

    .banner-title-mobile[b-j7kjv6ocz7] {
        display: inline;
    }

    .section-banner[b-j7kjv6ocz7] {
        height: 170px;
    }

    .header-text-overlay[b-j7kjv6ocz7] {
        padding: var(--spacing-2);
        min-height: 80px;
    }

    .section-banner-content .banner-title[b-j7kjv6ocz7] {
        margin-bottom: 0;
    }

    .section-banner-content .banner-description[b-j7kjv6ocz7] {
        font-size: var(--font-size-sm);
        max-width: 70%;
    }

    .banner-rss-link[b-j7kjv6ocz7] {
        display: inline-flex;
    }
}

@media (max-width: 640px) {
    .section-banner[b-j7kjv6ocz7] {
        height: 120px;
    }

    .header-text-overlay[b-j7kjv6ocz7] {
        padding: var(--spacing-1);
    }

    .section-banner-content .header-title[b-j7kjv6ocz7] {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .section-banner:not(.home-banner) .banner-title[b-j7kjv6ocz7] {
        word-spacing: 100vw;
    }

    .section-banner-content .banner-description[b-j7kjv6ocz7] {
        display: none;
    }
}
/* /Components/SectionCard.razor.rz.scp.css */
/* ============================================================================
   SectionCard Component Styles
   
   Component-specific styling for SectionCard.razor
   Displays section overview with background image, title, description, and collections
   ============================================================================ */

/* Section Card Container - Allows collections to be outside the clickable card */
.section-card-container[b-k5a5xhdagl] {
  background: var(--color-bg-default);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  transition: all var(--duration-normal) var(--easing-ease-out);
  box-shadow: var(--shadow-md);
  position: relative;
  cursor: pointer;
  /* Note: No overflow:hidden - allows focus outlines to be visible */
}

.section-card-container:hover[b-k5a5xhdagl] {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-purple-medium);
}

/* Section Card - Clickable link area stretched over full container */
.section-card[b-k5a5xhdagl] {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.section-card[b-k5a5xhdagl]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-lg);
}

.section-card-container:focus-within[b-k5a5xhdagl] {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-purple-medium);
}

.section-card-header[b-k5a5xhdagl] {
  height: 140px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Rounded top corners to match container */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* Background images are set via CSS classes (e.g., .section-bg-ai) */
  /* Thumbnails used for cards (400x140px) for performance */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Section background image classes for cards (using thumbnails) */
/* Using image-set for progressive enhancement - JXL → WebP → JPG fallback */
.section-bg-ai[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/ai.jxl') type('image/jxl'),
      url('/images/section-thumbnails/ai.webp') type('image/webp'),
      url('/images/section-thumbnails/ai.jpg') type('image/jpeg'));
}

.section-bg-github-copilot[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/github-copilot.jxl') type('image/jxl'),
      url('/images/section-thumbnails/github-copilot.webp') type('image/webp'),
      url('/images/section-thumbnails/github-copilot.jpg') type('image/jpeg'));
}

.section-bg-azure[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/azure.jxl') type('image/jxl'),
      url('/images/section-thumbnails/azure.webp') type('image/webp'),
      url('/images/section-thumbnails/azure.jpg') type('image/jpeg'));
}

.section-bg-ml[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/ml.jxl') type('image/jxl'),
      url('/images/section-thumbnails/ml.webp') type('image/webp'),
      url('/images/section-thumbnails/ml.jpg') type('image/jpeg'));
}

.section-bg-devops[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/devops.jxl') type('image/jxl'),
      url('/images/section-thumbnails/devops.webp') type('image/webp'),
      url('/images/section-thumbnails/devops.jpg') type('image/jpeg'));
}

.section-bg-dotnet[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/dotnet.jxl') type('image/jxl'),
      url('/images/section-thumbnails/dotnet.webp') type('image/webp'),
      url('/images/section-thumbnails/dotnet.jpg') type('image/jpeg'));
}

.section-bg-security[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/security.jxl') type('image/jxl'),
      url('/images/section-thumbnails/security.webp') type('image/webp'),
      url('/images/section-thumbnails/security.jpg') type('image/jpeg'));
}

.section-bg-all[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/all.jxl') type('image/jxl'),
      url('/images/section-thumbnails/all.webp') type('image/webp'),
      url('/images/section-thumbnails/all.jpg') type('image/jpeg'));
}

.section-bg-none[b-k5a5xhdagl] {
  background-image: image-set(url('/images/section-thumbnails/none.jxl') type('image/jxl'),
      url('/images/section-thumbnails/none.webp') type('image/webp'),
      url('/images/section-thumbnails/none.jpg') type('image/jpeg'));
}

.section-overlay[b-k5a5xhdagl] {
  background: var(--gradient-overlay-dark);
  width: 100%;
  padding: var(--spacing-3);
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.section-card h2[b-k5a5xhdagl] {
  color: var(--color-text-on-emphasis);
  margin: 0;
  font-size: var(--font-size-2xl);
  text-shadow: var(--text-shadow-md);
  font-weight: var(--font-weight-semibold);
  transition: color var(--duration-fast) var(--easing-ease);
}

/* Light up heading when hovering anywhere on container */
.section-card-container:hover .section-card h2[b-k5a5xhdagl] {
  color: var(--color-purple-bright);
}

.section-body[b-k5a5xhdagl] {
  padding: var(--spacing-3);
}

.section-description[b-k5a5xhdagl] {
  color: var(--color-text-secondary);
  margin: 0;
  transition: color var(--duration-fast) var(--easing-ease);
}

/* Light up description when hovering anywhere on container */
.section-card-container:hover .section-description[b-k5a5xhdagl] {
  color: var(--color-text-primary);
}

.section-collections[b-k5a5xhdagl] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  padding: 0 var(--spacing-3) var(--spacing-3) var(--spacing-3);
}
/* /Components/SectionCardsGrid.razor.rz.scp.css */
/* ============================================================================
   Section Cards Grid Component
   
   - Section grid layout
   - Responsive grid system
   ============================================================================ */

.sections-grid[b-161019qk11] {
  margin-bottom: var(--spacing-6);
}

/* Grid Layout */
.grid[b-161019qk11] {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns - no auto-calculation */
  gap: var(--spacing-4);
}

/* Desktop - 3 columns */
@media (min-width: 1293px) {
  .grid[b-161019qk11] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsive Grid */
@media (max-width: 768px) {
  .grid[b-161019qk11] {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }
}

/* ============================================================================
   Section Card Skeleton Loading States
   ============================================================================ */

.skeleton-card-link[b-161019qk11] {
  display: block;
  pointer-events: none;
}

.skeleton-section-card[b-161019qk11] {
  background: var(--color-bg-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.skeleton-section-card .section-card-header[b-161019qk11] {
  height: 140px;
  width: 100%;
  margin-bottom: 0;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}

.skeleton-section-card .section-overlay[b-161019qk11] {
  width: 100%;
  padding: var(--spacing-3);
  display: flex;
  align-items: flex-end;
}

.skeleton-section-card .section-body[b-161019qk11] {
  padding: var(--spacing-3);
}

.skeleton-section-card .skeleton-description[b-161019qk11] {
  height: 16px;
  width: 100%;
  margin-bottom: var(--spacing-2);
}

.skeleton-section-card .skeleton-collections[b-161019qk11] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}

.skeleton-section-card .skeleton-badge[b-161019qk11] {
  height: 24px;
  width: 60px;
  border-radius: var(--radius-full);
}
/* /Components/SidebarSearch.razor.rz.scp.css */
/* Search box styling */
.search-box[b-6ljvam2anm] {
    position: relative;
    width: 100%;
}

.search-input[b-6ljvam2anm] {
    width: 100%;
    padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-2);
    padding-right: var(--spacing-5); /* Space for clear button */
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-default);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    line-height: var(--line-height-body);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* Hide all native search input decorations and clear buttons */
.search-input[b-6ljvam2anm]::-webkit-search-decoration,
.search-input[b-6ljvam2anm]::-webkit-search-cancel-button,
.search-input[b-6ljvam2anm]::-webkit-search-results-button,
.search-input[b-6ljvam2anm]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* Hide clear button in IE/Edge */
.search-input[b-6ljvam2anm]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

.search-input:focus[b-6ljvam2anm] {
    outline: none;
    border-color: var(--color-purple-medium);
}

/* Focus-visible: no box-shadow ring — keyboard users get the global
   html.keyboard-nav :focus-visible outline from base.css instead.
   border-color change from :focus above provides adequate feedback for touch. */
.search-input:focus-visible[b-6ljvam2anm] {
    outline: none;
    border-color: var(--color-purple-medium);
}

.search-input[b-6ljvam2anm]::placeholder {
    color: var(--color-text-muted);
}

/* Clear button */
.search-clear-button[b-6ljvam2anm] {
    position: absolute;
    right: var(--spacing-1);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-1);
    border-radius: var(--radius-sm);
    line-height: 1;
    font-size: var(--font-size-lg);
    transition: color var(--duration-fast), background-color var(--duration-fast);
    z-index: 10;
}

.search-clear-button:hover[b-6ljvam2anm] {
    color: var(--color-text-primary);
    background-color: var(--color-purple-bg-subtle);
}

/* Keyboard users get the global html.keyboard-nav :focus-visible outline */
.search-clear-button:focus-visible[b-6ljvam2anm] {
    outline: none;
}

.search-clear-button:active[b-6ljvam2anm] {
    transform: translateY(-50%) scale(0.95);
}
/* /Components/SidebarTagCloud.razor.rz.scp.css */
/* ============================================================================
   SidebarTagCloud Component - Interactive Tag Cloud for Filtering
   
   Component-scoped styles for the tag cloud sidebar widget.
   Uses the same design language as other sidebar interactive elements.
   Tag cloud uses size variations to show tag popularity (quantile-based).
   ============================================================================ */

/* Tag Cloud Container - Tighter spacing for cloud effect */
.tag-cloud[b-gfg8ahgh56] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    line-height: 1.8;
}

/* Individual Tag Button - Base styling */
.tag-cloud-item[b-gfg8ahgh56] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--easing-ease);
    cursor: pointer;
    white-space: nowrap;
}

.tag-cloud-item:hover[b-gfg8ahgh56] {
    background: var(--color-purple-dark);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis);
}

/* On touch devices, :hover "sticks" after tapping.
   Reset hover to default so deselected buttons look normal immediately. */
@media (hover: none) {
    .tag-cloud-item:hover:not(.selected)[b-gfg8ahgh56] {
        background: var(--color-bg-default);
        border-color: var(--color-border-default);
        color: var(--color-text-primary);
    }

    .tag-cloud-item.selected:hover[b-gfg8ahgh56] {
        background: var(--color-purple-dark);
        border-color: var(--color-purple-bright);
    }
}

.tag-cloud-item:focus-visible[b-gfg8ahgh56] {
    outline: 2px solid var(--color-purple-bright);
    outline-offset: 2px;
}

.tag-cloud-item:active[b-gfg8ahgh56] {}

/* Selected state - tag is currently active filter */
.tag-cloud-item.selected[b-gfg8ahgh56] {
    background: var(--color-purple-dark);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis);
}

.tag-cloud-item.selected:hover[b-gfg8ahgh56] {
    background: var(--color-purple-medium);
    border-color: var(--color-purple-bright);
}

/* Disabled state - tag would result in 0 items (dynamic counts feature) */
.tag-cloud-item.disabled[b-gfg8ahgh56] {
    background: var(--color-bg-default);
    border-color: var(--color-border-default);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.5;
}

.tag-cloud-item.disabled:hover[b-gfg8ahgh56] {
    background: var(--color-bg-default);
    border-color: var(--color-border-default);
    color: var(--color-text-tertiary);
    transform: none;
}

/* Size variations - Bigger differences for clear visual hierarchy */
.tag-size-small[b-gfg8ahgh56] {
    font-size: 0.75rem;
    /* 12px - noticeably smaller */
    padding: 0.1875rem 0.5rem;
}

.tag-size-medium[b-gfg8ahgh56] {
    font-size: 0.9375rem;
    /* 15px - default readable size */
    padding: 0.25rem 0.75rem;
}

.tag-size-large[b-gfg8ahgh56] {
    font-size: 1.125rem;
    /* 18px - clearly prominent */
    font-weight: var(--font-weight-semibold);
    padding: 0.3125rem 0.875rem;
}

/* Tag count width classes - Based on original (unfiltered) digit count
   This prevents layout shift when count changes from "123" to "5" during filtering
   Width is determined by the initial count, not the current filtered count */
.tag-count-1d[b-gfg8ahgh56],
.tag-count-2d[b-gfg8ahgh56],
.tag-count-3d[b-gfg8ahgh56],
.tag-count-4d[b-gfg8ahgh56] {
    display: inline-block;
    text-align: right;
}

.tag-count-1d[b-gfg8ahgh56] { min-width: 1ch; }  /* Single digit: 1-9 */
.tag-count-2d[b-gfg8ahgh56] { min-width: 2ch; }  /* Two digits: 10-99 */
.tag-count-3d[b-gfg8ahgh56] { min-width: 3ch; }  /* Three digits: 100-999 */
.tag-count-4d[b-gfg8ahgh56] { min-width: 4ch; }  /* Four digits: 1000+ */

/* Text/status messages within the sidebar section */
.sidebar-text[b-gfg8ahgh56] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.sidebar-text.error[b-gfg8ahgh56] {
    color: var(--color-red);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .tag-cloud[b-gfg8ahgh56] {
        gap: 0.25rem;
    }

    .tag-size-small[b-gfg8ahgh56] {
        font-size: 0.6875rem;
    }

    .tag-size-medium[b-gfg8ahgh56] {
        font-size: 0.8125rem;
    }

    .tag-size-large[b-gfg8ahgh56] {
        font-size: 0.9375rem;
    }
}

/* ============================================================================
   Tag Button Styles (from sidebar.css)
   Interactive tags for filtering/navigation within sidebar contexts
   ============================================================================ */

/* Tag Button - Interactive tags for filtering/navigation */
.sidebar-tag-button[b-gfg8ahgh56] {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--easing-ease);
    cursor: pointer;
}

.sidebar-tag-button:hover[b-gfg8ahgh56] {
    background: var(--color-purple-dark);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis);
    transform: translateY(-2px);
}

/* Prevent sticky hover on touch devices */
@media (hover: none) {
    .sidebar-tag-button:hover:not(.active)[b-gfg8ahgh56] {
        background: var(--color-bg-default);
        border-color: var(--color-border-default);
        color: var(--color-text-primary);
        transform: none;
    }

    .sidebar-tag-button.active:hover[b-gfg8ahgh56] {
        background: var(--color-purple-dark);
        border-color: var(--color-purple-bright);
    }
}

.sidebar-tag-button.active[b-gfg8ahgh56] {
    background: var(--color-purple-dark);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis);
}

.sidebar-tag-button.active:hover[b-gfg8ahgh56] {
    background: var(--color-purple-medium);
    border-color: var(--color-purple-bright);
}

/* Tags cloud container - spacing between tags */
.sidebar-tags-cloud[b-gfg8ahgh56] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

/* Skeleton loader for tag cloud - subtle loading state */
.tag-cloud-skeleton[b-gfg8ahgh56] {
    display: inline-block;
    height: 1.75rem;
    width: 6rem;
    background: linear-gradient(90deg,
            var(--color-bg-default) 0%,
            var(--color-border-default) 50%,
            var(--color-bg-default) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-pulse-b-gfg8ahgh56 1.5s ease-in-out infinite;
}

.tag-cloud-skeleton:nth-child(2n)[b-gfg8ahgh56] {
    width: 8rem;
}

.tag-cloud-skeleton:nth-child(3n)[b-gfg8ahgh56] {
    width: 10rem;
}

.tag-cloud-skeleton:nth-child(4n)[b-gfg8ahgh56] {
    width: 5rem;
}

.tag-cloud-skeleton:nth-child(5n)[b-gfg8ahgh56] {
    width: 7rem;
}

@keyframes skeleton-pulse-b-gfg8ahgh56 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
/* /Components/SidebarToc.razor.rz.scp.css */
/* ============================================================================
   SidebarToc Component - Table of Contents with Scroll-Spy
   
   Component-scoped styles for the sidebar table of contents widget.
   Provides hierarchical navigation with active section highlighting.
   
   NOTE: Uses ::deep for elements created via RenderTreeBuilder in @code block.
   Blazor CSS isolation only scopes markup elements, not programmatic ones.
   ============================================================================ */

.sidebar-toc[b-c3puy6sudk] {
    position: sticky;
    top: 100px;
    /* Stick below the header (70px) + SubNav (30px) */
}

.sidebar-toc-inner[b-c3puy6sudk] {
    /* No max-height - let it grow naturally */
}

/* toc-list is in markup, so scoping works directly */
.toc-list[b-c3puy6sudk] {
    list-style: none;
    padding: var(--spacing-3);
    /* Extra padding on right to prevent focus outline clipping */
    padding-right: calc(var(--spacing-3) + 4px);
    margin: 0;
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    /* Ensure focus outlines aren't clipped */
    overflow: visible;
}

/* All elements below are created via RenderTreeBuilder - use ::deep */
[b-c3puy6sudk] .toc-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: var(--spacing-3);
    /* Use display:none for instant collapse with no layout shift */
    display: none;
}

/* If there's only one h2 heading, auto-expand it by default */
.toc-list:has(.toc-depth-0:only-child)[b-c3puy6sudk]  .toc-depth-0 > .toc-sublist {
    display: block;
}

/* Expanded state only when explicitly set by JavaScript */
[b-c3puy6sudk] .toc-item.expanded > .toc-sublist {
    display: block;
}

[b-c3puy6sudk] .toc-item {
    margin: 0;
}

[b-c3puy6sudk] .toc-link {
    display: block;
    padding: var(--spacing-1) var(--spacing-2);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: all var(--duration-fast) var(--easing-ease);
}

[b-c3puy6sudk] .toc-link:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-emphasis);
}

/* Active state for current section (scroll-spy) */
[b-c3puy6sudk] .toc-link.active {
    color: var(--color-purple-bright);
    background: var(--color-bg-emphasis);
    border-left-color: var(--color-purple-bright);
}

/* Depth-based styling for visual hierarchy */
[b-c3puy6sudk] .toc-depth-0 > .toc-link {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

[b-c3puy6sudk] .toc-depth-1 > .toc-link {
    font-size: var(--font-size-sm);
}

[b-c3puy6sudk] .toc-depth-2 > .toc-link {
    font-size: var(--font-size-xs);
}

/* All links fully visible */
[b-c3puy6sudk] .toc-link {
    opacity: 1;
}

/* Mobile TOC mode: H2 items are tappable to expand/collapse */
.toc-mobile-mode[b-c3puy6sudk]  .toc-depth-0 > .toc-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Chevron indicator for expandable H2 items in mobile mode */
.toc-mobile-mode[b-c3puy6sudk]  .toc-depth-0:has(.toc-sublist) > .toc-link::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s var(--easing-ease);
    flex-shrink: 0;
    margin-left: var(--spacing-2);
}

.toc-mobile-mode[b-c3puy6sudk]  .toc-depth-0.expanded:has(.toc-sublist) > .toc-link::after {
    transform: rotate(45deg);
}
/* /Components/SubNav.razor.rz.scp.css */
/* ============================================================================
   Sub-Navigation - Horizontal navigation below page header
   ============================================================================ */

.sub-nav[b-vcn1ka0kjb] {
    position: sticky;
    top: 76px;
    /* Sticks below main-nav (76px is main-nav height) */
    z-index: 999;
    background: var(--color-bg-default);
    border-bottom: 1px solid var(--color-border-default);
    margin-bottom: var(--spacing-4);
    /* Vertical padding: spacing-1; wrapper adds 4px more for focus outline */
    padding: var(--spacing-1);
    /* Allow dropdown menu to overflow on desktop;
       mobile override below handles the dropdown case */
    overflow: visible;
    /* Reserve height to prevent layout shift before buttons render */
    min-height: var(--sub-nav-height);
}

.sub-nav-wrapper[b-vcn1ka0kjb] {
    max-width: var(--max-width-content);
    margin: 0 auto;
    /* Extra vertical padding to prevent focus outline clipping */
    padding: 4px var(--spacing-4);
    display: flex;
    justify-content: center;
    gap: var(--spacing-1);
    flex-wrap: wrap;
}

/* Mobile dropdown - hidden on desktop */
.sub-nav-mobile[b-vcn1ka0kjb] {
    display: none;
}

/* Mobile: SubNav becomes a dropdown */
@media (max-width: 1292px) {
    .sub-nav[b-vcn1ka0kjb] {
        position: sticky;
        top: var(--mobile-nav-height);
        padding: 0;
        margin-bottom: var(--spacing-2);
        min-height: var(--touch-target-min-size);
    }

    .sub-nav-wrapper[b-vcn1ka0kjb] {
        display: none;
    }

    .sub-nav-mobile[b-vcn1ka0kjb] {
        display: block;
        position: relative;
    }

    .sub-nav-dropdown-toggle[b-vcn1ka0kjb] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-3);
        width: 100%;
        padding: var(--spacing-2) var(--spacing-4);
        background: var(--color-bg-default);
        border: none;
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        min-height: var(--touch-target-min-size);
    }

    .sub-nav-chevron[b-vcn1ka0kjb] {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s var(--easing-ease);
        flex-shrink: 0;
    }

    .sub-nav-chevron.expanded[b-vcn1ka0kjb] {
        transform: rotate(-135deg);
    }

    .sub-nav-dropdown-menu[b-vcn1ka0kjb] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg-default);
        border-bottom: 1px solid var(--color-border-default);
        border-top: 1px solid var(--color-border-default);
        box-shadow: var(--shadow-md);
        z-index: 998;
    }

    .sub-nav-dropdown-item[b-vcn1ka0kjb] {
        display: flex;
        align-items: center;
        padding: var(--spacing-2) var(--spacing-4);
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: var(--font-size-lg);
        min-height: var(--touch-target-min-size);
        border-bottom: 1px solid var(--color-border-default);
        transition: all var(--duration-fast) var(--easing-ease);
    }

    .sub-nav-dropdown-item:last-child[b-vcn1ka0kjb] {
        border-bottom: none;
    }

    .sub-nav-dropdown-item:hover[b-vcn1ka0kjb] {
        background: var(--color-bg-hover-subtle);
        color: var(--color-text-primary);
        text-decoration: none;
    }

    .sub-nav-dropdown-item.active[b-vcn1ka0kjb] {
        color: var(--color-purple-bright);
        font-weight: var(--font-weight-semibold);
    }

    /* Custom page sparkle indicator in mobile dropdown */
    .sub-nav-dropdown-custom[b-vcn1ka0kjb]::after {
        content: '✦';
        font-size: 0.85em;
        color: var(--color-purple-bright);
        opacity: 0.5;
        margin-left: 0.15em;
        vertical-align: super;
        position: relative;
        top: -0.35em;
    }

    .sub-nav-dropdown-custom.active[b-vcn1ka0kjb]::after {
        opacity: 0.7;
    }
}

/* Homepage SubNav: fully hidden on desktop,
   only show the mobile dropdown on tablet/mobile */
.sub-nav-homepage[b-vcn1ka0kjb] {
    padding: 0;
    min-height: 0;
    border-bottom: none;
    background: transparent;
}

.sub-nav-homepage .sub-nav-wrapper[b-vcn1ka0kjb] {
    display: none;
}

.sub-nav-homepage .sub-nav-mobile[b-vcn1ka0kjb] {
    display: none;
}

@media (max-width: 1292px) {
    .sub-nav-homepage[b-vcn1ka0kjb] {
        padding: 0;
        border-bottom: 1px solid var(--color-border-default);
    }

    .sub-nav-homepage .sub-nav-mobile[b-vcn1ka0kjb] {
        display: block;
    }
}