/* /Components/AddContentModal.razor.rz.scp.css */
/* AddContentModal.razor.css — scoped styles for add-content modal */

.editor-backdrop[b-0sjj1hj1uh] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-2);
}

.editor-modal[b-0sjj1hj1uh] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(640px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.editor-header[b-0sjj1hj1uh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-border-default);
    gap: var(--spacing-2);
}

.editor-title[b-0sjj1hj1uh] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.editor-close[b-0sjj1hj1uh] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xl);
    line-height: 1;
    padding: 0 var(--spacing-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);

    &:hover {
        color: var(--color-text-primary);
    }
}

.editor-body[b-0sjj1hj1uh] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-3);
}

.editor-footer[b-0sjj1hj1uh] {
    display: flex;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    border-top: 1px solid var(--color-border-default);
}

.add-content-form[b-0sjj1hj1uh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.admin-form-group[b-0sjj1hj1uh] {
    margin-bottom: var(--spacing-2);
}

.admin-form-label[b-0sjj1hj1uh] {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-1);
}

.admin-form-input[b-0sjj1hj1uh],
.admin-form-select[b-0sjj1hj1uh] {
    width: 100%;
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-default);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-sans);
    transition: border-color var(--duration-fast) var(--easing-ease);
    box-sizing: border-box;
}

.admin-form-input:focus[b-0sjj1hj1uh],
.admin-form-select:focus[b-0sjj1hj1uh] {
    outline: none;
    border-color: var(--color-purple-medium);
    box-shadow: 0 0 0 2px var(--color-purple-bg-subtle);
}

.admin-form-input:disabled[b-0sjj1hj1uh],
.admin-form-select:disabled[b-0sjj1hj1uh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-form-hint[b-0sjj1hj1uh] {
    display: inline-block;
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.admin-form-checkbox-label[b-0sjj1hj1uh] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.admin-form-checkbox-label input[type="checkbox"][b-0sjj1hj1uh] {
    accent-color: var(--color-purple-medium);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.admin-form-checkbox-label input[type="checkbox"]:disabled[b-0sjj1hj1uh] {
    cursor: not-allowed;
    opacity: 0.5;
}

.admin-radio-stack[b-0sjj1hj1uh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-2);
    background: var(--color-bg-emphasis);
}

.badge-info[b-0sjj1hj1uh] {
    background: var(--color-blue-light-bg);
    color: var(--color-blue);
    border: 1px solid var(--color-blue-border, var(--color-border-default));
    padding: 2px var(--spacing-1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.admin-alert-warning[b-0sjj1hj1uh] {
    background: var(--color-amber-bg);
    border-color: var(--color-amber-border);
    color: var(--color-amber);
}

/* Plan badge styles (duplicated from AdminCopilotFeatures for CSS isolation) */
.features-plan-badge[b-0sjj1hj1uh] {
    display: inline-block;
    padding: 2px var(--spacing-1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-emphasis);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
}

.features-plan-badge-free[b-0sjj1hj1uh] {
    background: var(--color-blue-light-bg);
    color: var(--color-purple-bright);
    border-color: var(--color-purple-border-subtle);
}

.features-plan-badge-student[b-0sjj1hj1uh] {
    background: var(--color-green-dark-bg);
    color: var(--color-green-light);
    border-color: var(--color-green-light-border);
}

.features-plan-badge-pro[b-0sjj1hj1uh] {
    background: var(--color-purple-bg-subtle);
    color: var(--color-purple-bright);
    border-color: var(--color-purple-border);
}

.features-plan-badge-business[b-0sjj1hj1uh] {
    background: var(--color-amber-bg);
    color: var(--color-amber);
    border-color: var(--color-amber-border);
}

.features-plan-badge-proplus[b-0sjj1hj1uh] {
    background: var(--color-purple-bg-dark);
    color: var(--color-purple-bright);
    border-color: var(--color-purple-border);
}

.features-plan-badge-enterprise[b-0sjj1hj1uh] {
    background: var(--color-red-bg);
    color: var(--color-red);
    border-color: var(--color-red-light-border);
}

/* Radio group for plan selection */
.features-plan-radio-label[b-0sjj1hj1uh] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.features-plan-radio-label input[type="radio"][b-0sjj1hj1uh] {
    accent-color: var(--color-purple-medium);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
/* /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/ContentItemEditorModal.razor.rz.scp.css */
.editor-backdrop[b-37blwf9enh] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-2);
}

.editor-modal[b-37blwf9enh] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(700px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.editor-header[b-37blwf9enh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-border-default);
    gap: var(--spacing-2);
}

.editor-title[b-37blwf9enh] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.editor-close[b-37blwf9enh] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xl);
    line-height: 1;
    padding: 0 var(--spacing-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);

    &:hover {
        color: var(--color-text-primary);
    }
}

.editor-body[b-37blwf9enh] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-3);
}

.editor-form-grid[b-37blwf9enh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

.editor-full-width[b-37blwf9enh] {
    grid-column: 1 / -1;
}

.editor-textarea-sm[b-37blwf9enh] {
    resize: vertical;
    min-height: 60px;
}

.editor-textarea-mono[b-37blwf9enh] {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-family-mono, ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace);
    font-size: var(--font-size-xs);
    tab-size: 2;
}

.editor-textarea-lg[b-37blwf9enh] {
    min-height: 300px;
}

.editor-details[b-37blwf9enh] {
    width: 100%;
}

.editor-details summary[b-37blwf9enh] {
    cursor: pointer;
    user-select: none;
}

.editor-details textarea[b-37blwf9enh] {
    margin-top: var(--spacing-1);
}

.editor-checkbox-row[b-37blwf9enh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.editor-checkbox-label[b-37blwf9enh] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
}

.editor-hint[b-37blwf9enh] {
    color: var(--color-text-secondary);
    font-weight: normal;
    font-size: var(--font-size-xs);
}

.editor-readonly-info[b-37blwf9enh] {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.editor-footer[b-37blwf9enh] {
    display: flex;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    border-top: 1px solid var(--color-border-default);
}
/* /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;
}

/* Content Loading Transition */
.collection-content[b-xfh82wmzot] {
  opacity: 1;
  transition: opacity var(--duration-fast) var(--easing-ease-in-out);
}

.collection-content.loading[b-xfh82wmzot] {
  pointer-events: none;
}

.collection-content.loading .content-grid[b-xfh82wmzot] {
  opacity: 0.5;
}

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

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

html.keyboard-nav .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;
}

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

html.keyboard-nav .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;
}

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

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

html.keyboard-nav .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/HeroBanner.razor.rz.scp.css */
/* ============================================================================
   Hero Banner - Collapsible announcement strip shown above section content
   ============================================================================ */

/* ---- Container ----------------------------------------------------------- */
.hero-banner[b-twz9rgb2bg] {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);
    overflow: hidden;
    padding: 0.75rem;
}

/* ---- Header row (always visible) ---------------------------------------- */
.hero-banner-header[b-twz9rgb2bg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.hero-banner-header-content[b-twz9rgb2bg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-purple-bright);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero-banner-icon[b-twz9rgb2bg] {
    color: var(--color-purple-bright);
    flex-shrink: 0;
}

.hero-banner-label[b-twz9rgb2bg] {
    color: var(--color-purple-bright);
}

/* ---- Header actions wrapper ---------------------------------------------- */
.hero-banner-header-actions[b-twz9rgb2bg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---- "Find a Dev Day" call-to-action link -------------------------------- */
.hero-banner-find-more[b-twz9rgb2bg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: var(--color-purple-dark);
    color: var(--color-text-on-emphasis) !important;
    text-decoration: none !important;
    border: 1px solid var(--color-purple-bright);
    border-radius: 6px;
    height: unset !important;
    line-height: unset !important;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hero-banner-find-more svg[b-twz9rgb2bg] {
    display: block;
    flex-shrink: 0;
}

.hero-banner-find-more:hover[b-twz9rgb2bg] {
    background: var(--color-purple-medium);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis) !important;
}

/* ---- Collapse toggle button ---------------------------------------------- */
.hero-banner-toggle[b-twz9rgb2bg] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: 1px solid var(--color-border-emphasis);
    border-radius: 6px;
    height: unset !important;
    line-height: unset !important;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    transition: border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.hero-banner-toggle:hover[b-twz9rgb2bg] {
    border-color: var(--color-border-emphasis);
    color: var(--color-text-primary);
}

.hero-banner-toggle-label[b-twz9rgb2bg] {
    font-weight: 500;
    display: inline-block;
    min-width: 2.5em;
    text-align: center;
}

/* Rotate chevron when expanded */
.hero-banner-chevron[b-twz9rgb2bg] {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.hero-banner:not(.hero-banner-collapsed) .hero-banner-chevron[b-twz9rgb2bg] {
    transform: rotate(180deg);
}

/* ---- Collapsible content area ------------------------------------------- */
.hero-banner-content[b-twz9rgb2bg] {
    overflow: hidden;
    max-height: 100vh;
    padding-top: 0.75rem;
    opacity: 1;
    transition: max-height 0.3s ease, padding-top 0.3s ease, opacity 0.2s ease;
}

.hero-banner-collapsed .hero-banner-content[b-twz9rgb2bg] {
    max-height: 0;
    padding-top: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---- Cards grid ---------------------------------------------------------- */
.hero-banner-cards[b-twz9rgb2bg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---- Individual card ----------------------------------------------------- */
.hero-banner-card[b-twz9rgb2bg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    background-color: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    padding: 0.75rem;
    transition: border-color 0.15s ease;
}

.hero-banner-card:hover[b-twz9rgb2bg] {
    border-color: var(--color-border-emphasis);
}

.hero-banner-card-logo[b-twz9rgb2bg] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.hero-banner-card-body[b-twz9rgb2bg] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-banner-card-text[b-twz9rgb2bg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    row-gap: 0.125rem;
}

.hero-banner-card-title[b-twz9rgb2bg] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-emphasis);
}

.hero-banner-card-description[b-twz9rgb2bg] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.hero-banner-card-link[b-twz9rgb2bg] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.5rem;
    background: var(--color-purple-dark);
    color: var(--color-text-on-emphasis) !important;
    text-decoration: none !important;
    border: 1px solid var(--color-purple-bright);
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hero-banner-card-link:hover[b-twz9rgb2bg] {
    background: var(--color-purple-medium);
    border-color: var(--color-purple-bright);
    color: var(--color-text-on-emphasis) !important;
}

/* ---- Mobile adjustments -------------------------------------------------- */
@media (max-width: 700px) {
    /* Hide "Find a Dev Day" text on small screens — keep globe icon only */
    .hero-banner-find-more-text[b-twz9rgb2bg] {
        display: none;
    }

    /* Keep button the same height as when text was visible */
    .hero-banner-find-more[b-twz9rgb2bg] {
        min-height: 1.625rem;
    }
}

/* /Components/JsonEditorModal.razor.rz.scp.css */
.json-editor-backdrop[b-olznclhzhr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-2);
}

.json-editor-modal[b-olznclhzhr] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(900px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.json-editor-header[b-olznclhzhr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-border-default);
    gap: var(--spacing-2);
}

.json-editor-title[b-olznclhzhr] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.json-editor-close[b-olznclhzhr] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xl);
    line-height: 1;
    padding: 0 var(--spacing-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);

    &:hover {
        color: var(--color-text-primary);
    }
}

.json-editor-body[b-olznclhzhr] {
    flex: 1;
    overflow: hidden;
    padding: var(--spacing-2) var(--spacing-3);
    display: flex;
    flex-direction: column;
}

.json-editor-textarea[b-olznclhzhr] {
    flex: 1;
    width: 100%;
    min-height: 400px;
    resize: vertical;
    font-family: var(--font-family-mono, ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-2);
    tab-size: 2;

    &:focus {
        outline: none;
        border-color: var(--color-purple-bright);
        box-shadow: 0 0 0 2px var(--color-purple-bg-subtle);
    }
}

.json-editor-footer[b-olznclhzhr] {
    display: flex;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    border-top: 1px solid var(--color-border-default);
}
/* /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;
}

@media (hover: hover) {
  .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);
}

@media (hover: hover) {
  .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;
}

@media (hover: hover) {
  #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;
}

@media (hover: hover) {
  #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;
}

@media (hover: hover) {
    #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-2);
  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);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: 4px;
}

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

.logo-copilot-icon[b-ywddmcb3l6] {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.site-logo .logo-text[b-ywddmcb3l6] {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  margin: 6px 0 0px 0;
  padding-bottom: 9px;
  line-height: 1;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

/* Subtle purple underline on homepage logo (desktop only) */
@media (min-width: 1293px) {
  .site-logo.home-active[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;
  }
}

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

@media (hover: hover) {
  .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;
}

@media (hover: hover) {
  .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);
}

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

html.keyboard-nav .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;
}

@media (hover: hover) {
  .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;
}

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

html.keyboard-nav .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);
  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;
}

@media (hover: hover) {
  .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);
}

/* Custom page styling in hamburger menu — match desktop purple accent */
.mobile-menu-sub-items a.mobile-menu-custom-page[b-ywddmcb3l6] {
  border-left: 3px solid var(--color-purple-bright);
}

@media (hover: hover) {
  .mobile-menu-sub-items a.mobile-menu-custom-page:hover[b-ywddmcb3l6] {
    border-left-color: var(--color-purple-medium);
  }
}

.mobile-menu-sub-items a.mobile-menu-custom-page.active[b-ywddmcb3l6] {
  border-left-color: var(--color-purple-bright);
}

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

@media (hover: hover) {
  .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);
    margin: 0px;
    padding: 0px;
  }

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

@media (hover: hover) {
    .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;
    }
}

.discord-section[b-u6ack1kw2r] {
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
}

.discord-section p[b-u6ack1kw2r] {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--spacing-4) 0;
}

.discord-link[b-u6ack1kw2r] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-purple-dark);
    border: 1px solid var(--color-purple-bright);
    border-radius: var(--radius-md);
    color: var(--color-text-on-emphasis);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all var(--duration-fast) var(--easing-ease);
}

@media (hover: hover) {
    .discord-link:hover[b-u6ack1kw2r] {
        background: var(--color-purple-medium);
        border-color: var(--color-purple-bright);
    }
}

.version-info[b-u6ack1kw2r] {
    margin-top: var(--spacing-6);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* /Components/Pages/Admin/AdminCopilotFeatures.razor.rz.scp.css */
/* AdminCopilotFeatures.razor.css */

.features-plans-badges[b-rhoqhdqcgo] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-1);
}

.features-plan-badge[b-rhoqhdqcgo] {
    display: inline-block;
    padding: 2px var(--spacing-1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-emphasis);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
}

.features-plan-badge-free[b-rhoqhdqcgo] {
    background: var(--color-blue-light-bg);
    color: var(--color-purple-bright);
    border-color: var(--color-purple-border-subtle);
}

.features-plan-badge-student[b-rhoqhdqcgo] {
    background: var(--color-green-dark-bg);
    color: var(--color-green-light);
    border-color: var(--color-green-light-border);
}

.features-plan-badge-pro[b-rhoqhdqcgo] {
    background: var(--color-purple-bg-subtle);
    color: var(--color-purple-bright);
    border-color: var(--color-purple-border);
}

.features-plan-badge-business[b-rhoqhdqcgo] {
    background: var(--color-amber-bg);
    color: var(--color-amber);
    border-color: var(--color-amber-border);
}

.features-plan-badge-proplus[b-rhoqhdqcgo] {
    background: var(--color-purple-bg-dark);
    color: var(--color-purple-bright);
    border-color: var(--color-purple-border);
}

.features-plan-badge-enterprise[b-rhoqhdqcgo] {
    background: var(--color-red-bg);
    color: var(--color-red);
    border-color: var(--color-red-light-border);
}

.features-title-link[b-rhoqhdqcgo] {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.features-title-link:hover[b-rhoqhdqcgo] {
    text-decoration: underline;
}

.features-title-text[b-rhoqhdqcgo] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    font-style: italic;
}

/* Editor modal: title */
.features-editor-title[b-rhoqhdqcgo] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.features-editor-title-link[b-rhoqhdqcgo] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.features-editor-title-link a[b-rhoqhdqcgo] {
    color: var(--color-purple-bright);
    text-decoration: none;
}

.features-editor-title-link a:hover[b-rhoqhdqcgo] {
    text-decoration: underline;
}

/* Plans editor modal */
.features-plans-fieldset[b-rhoqhdqcgo] {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin-bottom: 0;
}

.features-plans-legend[b-rhoqhdqcgo] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    padding: 0 var(--spacing-1);
}

.features-plan-checkbox-label[b-rhoqhdqcgo] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.features-plan-checkbox-label input[type="checkbox"][b-rhoqhdqcgo] {
    accent-color: var(--color-purple-medium);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Radio group for plan selection */
.features-plan-radio-label[b-rhoqhdqcgo] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.features-plan-radio-label input[type="radio"][b-rhoqhdqcgo] {
    accent-color: var(--color-purple-medium);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.features-plan-radio-name[b-rhoqhdqcgo] {
    min-width: 10rem;
    font-weight: var(--font-weight-medium);
}

.features-plan-radio-badges[b-rhoqhdqcgo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.features-ghes-label[b-rhoqhdqcgo] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.features-draft-label[b-rhoqhdqcgo] {
    margin-top: var(--spacing-2);
}

.features-ghes-label input[type="checkbox"][b-rhoqhdqcgo] {
    accent-color: var(--color-purple-medium);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Options row (GHES, etc.) */
.features-editor-options[b-rhoqhdqcgo] {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border-default);
}

/* Delete confirmation row in modal footer */
.features-delete-confirm-text[b-rhoqhdqcgo] {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin-right: auto;
}

/* Publish from YouTube section (shown when editing a draft) */
.features-publish-section[b-rhoqhdqcgo] {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border-default);
}

.features-publish-heading[b-rhoqhdqcgo] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-1);
}

.features-publish-hint[b-rhoqhdqcgo] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-2);
}

.features-publish-input[b-rhoqhdqcgo] {
    width: 100%;
    margin-bottom: var(--spacing-2);
}
/* /Components/Pages/AISDLC.razor.rz.scp.css */
/* AI-SDLC Page Styles */

/* ─── SDLC Phases ─────────────────────────────────────────────────────────── */

[b-39sslr21hq] .sdlc-phases {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

[b-39sslr21hq] .sdlc-phase-card {
    background: var(--color-bg-default);
    border: 1px solid var(--color-purple-border-subtle);
    border-radius: 10px;
    overflow: clip;
}

/* Phase header - always visible, not clickable */
[b-39sslr21hq] .sdlc-phase-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-section);
}

[b-39sslr21hq] .sdlc-phase-header h3 {
    margin: 0;
    padding: 0;
    color: var(--color-text-on-emphasis);
    flex: 1;
}

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

[b-39sslr21hq] .sdlc-phase-icon {
    font-size: 22px;
}

/* Phase body - always visible */
[b-39sslr21hq] .sdlc-phase-body {
    padding: 16px 20px;
}

/* h4 subtitles inside phases */
[b-39sslr21hq] .sdlc-phase-body h4 {
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-purple-border-very-subtle);
}

[b-39sslr21hq] .sdlc-phase-body > div:first-child > h4:first-child {
    margin-top: 0;
}

/* Tool badges */
[b-39sslr21hq] .sdlc-tool-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

[b-39sslr21hq] .sdlc-tool-badge {
    display: inline-block;
    padding: 0.25rem var(--spacing-2);
    border-radius: var(--radius-full);
    background: var(--color-purple-bg-badge);
    border: 1px solid transparent;
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all var(--duration-fast) var(--easing-ease);
    cursor: pointer;
}

@media (hover: hover) {
    [b-39sslr21hq] .sdlc-tool-badge:hover {
        background: var(--color-purple-bg-badge-hover);
        border-color: var(--color-purple-medium);
        color: var(--color-text-on-emphasis);
        text-decoration: none;
    }
}

/* Handover */
[b-39sslr21hq] .sdlc-phase-handover {
    margin-top: 16px;
}

/* Phase-specific colors */
[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);
}

/* ─── Methodologies Section ───────────────────────────────────────────────── */

[b-39sslr21hq] .sdlc-methodologies-section {
    margin-top: 40px;
}



[b-39sslr21hq] .sdlc-methodology-type {
    display: none;
}

/* Methodology meta info */
[b-39sslr21hq] .sdlc-methodology-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 8px 0 0;
    color: var(--color-text-secondary);
}

/* Methodology Mermaid Diagrams */
[b-39sslr21hq] pre.mermaid.sdlc-methodology-diagram {
    margin: 16px 0 0 !important;
    padding: 20px !important;
    background: var(--color-bg-section) !important;
    border: 1px solid var(--color-purple-border-very-subtle) !important;
    border-radius: 8px;
    overflow-x: auto !important;
}

[b-39sslr21hq] .sdlc-methodology-diagram svg {
    max-width: 100%;
    height: auto;
}

/* Methodology comparison table */
[b-39sslr21hq] .sdlc-methodology-comparison {
    margin-top: 16px;
    overflow-x: auto;
}

[b-39sslr21hq] .sdlc-methodology-comparison table {
    width: 100%;
    border-collapse: collapse;
}

[b-39sslr21hq] .sdlc-methodology-comparison th {
    background: var(--color-bg-section);
    color: var(--color-text-on-emphasis);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--color-purple-border);
    font-weight: 600;
}

[b-39sslr21hq] .sdlc-methodology-comparison td {
    padding: 12px 16px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-purple-border-very-subtle);
}

[b-39sslr21hq] .sdlc-methodology-comparison tr:last-child td {
    border-bottom: none;
}

@media (hover: hover) {
    [b-39sslr21hq] .sdlc-methodology-comparison tr:hover td {
        background: var(--color-bg-elevated);
    }
}

/* ─── Preconditions Section ───────────────────────────────────────────────── */

[b-39sslr21hq] .sdlc-preconditions-section {
    margin-top: 40px;
}

[b-39sslr21hq] .sdlc-preconditions-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

[b-39sslr21hq] .sdlc-precondition-item {
    border: 1px solid var(--color-purple-border-very-subtle);
    border-radius: 8px;
    overflow: hidden;
}

[b-39sslr21hq] .sdlc-precondition-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-purple-border-very-subtle);
}

[b-39sslr21hq] .sdlc-precondition-header h3 {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

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

[b-39sslr21hq] .sdlc-precondition-icon {
    font-size: 24px;
    flex-shrink: 0;
}

[b-39sslr21hq] .sdlc-precondition-body {
    padding: var(--spacing-3) var(--spacing-4);
}



/* Metrics grid */
[b-39sslr21hq] .sdlc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0;
}

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

[b-39sslr21hq] .sdlc-metric-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-purple-border-very-subtle);
}

[b-39sslr21hq] .sdlc-metric-icon {
    font-size: 24px;
    flex-shrink: 0;
}

[b-39sslr21hq] .sdlc-metric-card strong {
    display: block;
    margin-bottom: 4px;
}

/* ─── Benefits ────────────────────────────────────────────────────────────── */

[b-39sslr21hq] .sdlc-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-39sslr21hq] .sdlc-benefit-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--color-green);
    background: var(--color-bg-default);
}

[b-39sslr21hq] .sdlc-benefit-icon {
    color: var(--color-green);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.5;
}

[b-39sslr21hq] .sdlc-benefit-item strong {
    display: block;
    margin-bottom: 2px;
}

[b-39sslr21hq] .sdlc-benefit-item p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ─── Challenges ──────────────────────────────────────────────────────────── */

[b-39sslr21hq] .sdlc-challenge-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-39sslr21hq] .sdlc-challenge-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--color-orange);
    background: var(--color-bg-default);
}

[b-39sslr21hq] .sdlc-challenge-icon {
    flex-shrink: 0;
    line-height: 1.5;
}

[b-39sslr21hq] .sdlc-challenge-item strong {
    display: block;
    margin-bottom: 2px;
}

[b-39sslr21hq] .sdlc-challenge-item p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* /Components/Pages/Authors.razor.rz.scp.css */
/* ============================================================================
   Authors Page Component Styles

   Component-specific styling for Authors.razor page
   Page uses global .page-with-sidebar layout from page-container.css
   Sidebar uses global .sidebar-list, .sidebar-link-button from sidebar.css
   Content grid, infinite scroll, and end-of-content are handled by
   ContentItemsGrid component (reused via AuthorName parameter).
   ============================================================================ */

/* Author filter input in sidebar */
.author-filter-box[b-0ohoq22x6h] {
    position: relative;
    margin-bottom: var(--spacing-2);
}

.author-filter-input[b-0ohoq22x6h] {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    padding-right: var(--spacing-8);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color var(--duration-fast) var(--easing-ease);
    box-sizing: border-box;
}

.author-filter-input:focus[b-0ohoq22x6h] {
    border-color: var(--color-purple-bright);
}

.author-filter-input[b-0ohoq22x6h]::placeholder {
    color: var(--color-text-secondary);
}

/* Remove browser native search cancel button */
.author-filter-input[b-0ohoq22x6h]::-webkit-search-decoration,
.author-filter-input[b-0ohoq22x6h]::-webkit-search-cancel-button,
.author-filter-input[b-0ohoq22x6h]::-webkit-search-results-button,
.author-filter-input[b-0ohoq22x6h]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.author-filter-clear[b-0ohoq22x6h] {
    position: absolute;
    right: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: var(--spacing-1);
    line-height: 1;
}

.author-filter-clear:hover[b-0ohoq22x6h] {
    color: var(--color-text-primary);
}

.author-filter-no-results[b-0ohoq22x6h] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-3);
    font-style: italic;
}

/* Scrollable author list */
.author-sidebar-list[b-0ohoq22x6h] {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-emphasis) transparent;
}

/* Select prompt shown when no author is selected */
.authors-select-prompt[b-0ohoq22x6h] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.no-content[b-0ohoq22x6h] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}
/* /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);
}

@media (hover: hover) {
    .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);
}

@media (hover: hover) {
    .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);
}

@media (hover: hover) {
    .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);
}

@media (hover: hover) {
    .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 (no longer expandable) */

/* 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] {
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

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

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

.dx-metric-header strong[b-b1mle0rodj] {
    font-size: 1.1rem;
    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] {
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

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

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

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

.dx-space-description[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] {
    padding: 1.25rem;
    background: var(--color-bg-default);
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
}

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

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

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

.dx-devex-card > 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: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dx-relationship-item[b-b1mle0rodj] {
    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);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 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-header[b-b1mle0rodj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

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

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

.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] {
        grid-template-columns: 1fr;
    }

    .dx-relationship-arrow[b-b1mle0rodj] {
        justify-self: center;
    }

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

    .dx-stat-number[b-b1mle0rodj] {
        font-size: 2.5rem;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-details[b-0l2wnaa20j] {
    background: var(--color-bg-emphasis);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.error-details h2[b-0l2wnaa20j],
.error-details h3[b-0l2wnaa20j] {
    color: var(--color-text-emphasis);
    margin-top: var(--spacing-3);
}

.error-details h2:first-child[b-0l2wnaa20j] {
    margin-top: 0;
}

.error-details p[b-0l2wnaa20j] {
    color: var(--color-text-primary);
}

.stack-trace[b-0l2wnaa20j] {
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    padding: var(--spacing-2);
    overflow-x: auto;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.error-message[b-0l2wnaa20j] {
    background: var(--color-bg-emphasis);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}

.error-message h2[b-0l2wnaa20j] {
    color: var(--color-text-emphasis);
}

.error-message p[b-0l2wnaa20j] {
    color: var(--color-text-primary);
}

.request-id[b-0l2wnaa20j] {
    margin-top: var(--spacing-4);
    color: var(--color-text-primary);
}

.request-id code[b-0l2wnaa20j] {
    background: var(--color-bg-emphasis);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.request-id-muted[b-0l2wnaa20j] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.dev-mode-notice[b-0l2wnaa20j] {
    margin-top: var(--spacing-4);
    padding: var(--spacing-2);
    background: var(--color-amber-bg);
    border-left: 4px solid var(--color-amber);
    border-radius: var(--radius-md);
}

.dev-mode-notice h3[b-0l2wnaa20j] {
    color: var(--color-amber);
    margin-top: 0;
}

.dev-mode-notice p[b-0l2wnaa20j] {
    color: var(--color-text-primary);
}
/* /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;
}

@media (hover: hover) {
    .genai-more-info a:hover[b-alckei0axu] {
        color: var(--color-purple-bright);
        text-decoration: underline;
    }
}
/* /Components/Pages/GitHubCopilotDiscord.razor.rz.scp.css */
/* ============================================================================
   GitHub Copilot Discord Page Styles
   ============================================================================ */

.discord-page[b-8psczfz7iz] {
  max-width: none;
}

.discord-header[b-8psczfz7iz] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-5);
}

.discord-logo[b-8psczfz7iz] {
  color: #5865F2;
  flex-shrink: 0;
}

.discord-header h1[b-8psczfz7iz] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.discord-tagline[b-8psczfz7iz] {
  margin: var(--spacing-1) 0 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

.discord-content[b-8psczfz7iz] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
  align-items: start;
}

.discord-main[b-8psczfz7iz] {
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

.discord-main p[b-8psczfz7iz] {
  margin-bottom: var(--spacing-3);
}

.discord-intro[b-8psczfz7iz] {
  font-size: var(--font-size-xl);
}

.discord-aside[b-8psczfz7iz] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
}

.discord-cta[b-8psczfz7iz] {
  text-align: center;
}

.discord-join-btn[b-8psczfz7iz] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  background: #5865F2;
  color: #fff;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-fast) var(--easing-ease);
  box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
}

@media (hover: hover) {
  .discord-join-btn:hover[b-8psczfz7iz] {
    background: #4752C4;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(88, 101, 242, 0.4);
    transform: translateY(-1px);
  }
}

.discord-members[b-8psczfz7iz] {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.8;
  margin: 0;
}

.discord-members strong[b-8psczfz7iz] {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.discord-member-title[b-8psczfz7iz] {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .discord-header h1[b-8psczfz7iz] {
    font-size: var(--font-size-xl);
  }

  .discord-content[b-8psczfz7iz] {
    grid-template-columns: 1fr;
  }
}
/* /Components/Pages/GitHubCopilotFeatures.razor.rz.scp.css */
/* ============================================================================
   GitHub Copilot Features Page Styles
   
   Page-specific layout only - cards inherit from global cards.css
   ============================================================================ */

/* No link underlines on features page */
.custom-page-container a[b-bw5jyrzhtn],
.custom-page-container a:hover[b-bw5jyrzhtn],
.features-tiers-sidebar a[b-bw5jyrzhtn],
.features-tiers-sidebar a:hover[b-bw5jyrzhtn] {
  text-decoration: none;
}

/* 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 - Sidebar */
.features-tiers-sidebar[b-bw5jyrzhtn] {
  display: flex;
  flex-direction: column;
  /* Stretch to full sidebar height so sticky child has room to work */
  flex: 1;
  min-height: 100%;
}

/* Scrollable area for tier cards only (sticky + scrollbar starts below heading) */
.features-tiers-scroll[b-bw5jyrzhtn] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  position: sticky;
  top: calc(var(--sticky-header-height) + var(--spacing-2));
  max-height: calc(100vh - var(--sticky-header-height) - var(--spacing-6));
  overflow-y: auto;
  padding-right: var(--spacing-1);
  min-height: 0;
  /* Thin scrollbar */
  scrollbar-width: thin;
}

.features-tiers-scroll[b-bw5jyrzhtn]::-webkit-scrollbar {
  width: 4px;
}

.features-tiers-scroll[b-bw5jyrzhtn]::-webkit-scrollbar-track {
  background: transparent;
}

.features-tiers-scroll[b-bw5jyrzhtn]::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--radius-sm);
}

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

@media (hover: hover) {
  .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-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
  line-height: var(--line-height-normal);
}

/* View Features link */
.features-tier-link[b-bw5jyrzhtn] {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-purple-bright);
  text-decoration: none;
}

@media (hover: hover) {
  .features-tier-link:hover[b-bw5jyrzhtn] {
    text-decoration: none;
  }
}

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

.features-tier-features li[b-bw5jyrzhtn] {
  padding: 0.2rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  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-sm);
}

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

/* Per-section Filter Buttons */
.features-section-filters[b-bw5jyrzhtn] {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
  flex-wrap: wrap;
}

.features-filter-btn[b-bw5jyrzhtn] {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-emphasis);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--easing-ease-out),
              color var(--duration-normal) var(--easing-ease-out);
}

@media (hover: hover) {
  .features-filter-btn:hover[b-bw5jyrzhtn] {
    border-color: var(--color-purple-medium);
    color: var(--color-text-emphasis);
  }
}

html.keyboard-nav .features-filter-btn:focus-visible[b-bw5jyrzhtn] {
  outline: var(--focus-outline-width) solid var(--color-purple-bright);
  outline-offset: var(--focus-outline-offset);
}

.features-filter-btn.active[b-bw5jyrzhtn] {
  border-color: var(--color-purple-bright);
  color: var(--color-purple-bright);
  background: var(--color-purple-bg-subtle);
}

/* Feature Cards Grid - 3 per row */
.features-cards-grid[b-bw5jyrzhtn] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

/* Feature Card Thumbnails */
.feature-card-thumbnail[b-bw5jyrzhtn] {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
}

.feature-card-thumbnail img[b-bw5jyrzhtn] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.feature-card-play-icon[b-bw5jyrzhtn] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-ease-out);
}

@media (hover: hover) {
  .feature-card:hover .feature-card-play-icon[b-bw5jyrzhtn] {
    opacity: 1;
  }
}

[b-bw5jyrzhtn] .feature-card {
  min-height: auto;
}

[b-bw5jyrzhtn] .feature-card h3 {
  margin-top: 0;
}

/* Non-clickable cards (no video) */
[b-bw5jyrzhtn] .feature-card-static {
  cursor: default;
}

@media (hover: hover) {
  [b-bw5jyrzhtn] .feature-card-static:hover {
    border-color: var(--color-border-default);
    box-shadow: none;
    transform: none;
  }
}

/* Responsive - disable sticky sidebar when layout becomes single-column */
@media (max-width: 1292px) {
  .features-tiers-scroll[b-bw5jyrzhtn] {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 1200px) {
  .features-cards-grid[b-bw5jyrzhtn] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .features-cards-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);
  }

  .feature-card-thumbnail[b-bw5jyrzhtn] {
    display: none;
  }
}

/* /Components/Pages/GitHubCopilotGettingStarted.razor.rz.scp.css */
/* =================================================================
   Getting Started Page - More Information Blocks
   Reuses the established pattern from GenAI pages
   ================================================================= */

.getting-started-more-info[b-6jn765syys] {
    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;
}

.getting-started-more-info-header[b-6jn765syys] {
    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);
}

.getting-started-more-info-icon[b-6jn765syys] {
    font-size: 1.5rem;
    line-height: 1;
}

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

.getting-started-more-info li[b-6jn765syys] {
    margin-bottom: var(--spacing-1);
    color: var(--color-text-primary);
}

.getting-started-more-info li:last-child[b-6jn765syys] {
    margin-bottom: 0;
}

.getting-started-more-info a[b-6jn765syys] {
    color: var(--color-purple-medium);
    text-decoration: none;
}

@media (hover: hover) {
    .getting-started-more-info a:hover[b-6jn765syys] {
        color: var(--color-purple-bright);
        text-decoration: underline;
    }
}
/* /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: clip;
}

[b-7jhk3b2eyp] .levels-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
}
/* /Components/Pages/GitHubCopilotToolTips.razor.rz.scp.css */
/* ============================================================================
   GitHub Copilot Tool Tips Page Styles
   ============================================================================ */

.tooltips-grid[b-hlxnz259qv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-4);
}

.tooltips-card[b-hlxnz259qv] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease;
}

@media (hover: hover) {
    .tooltips-card:hover[b-hlxnz259qv] {
        border-color: var(--color-purple-medium);
    }
}

.tooltips-card-header[b-hlxnz259qv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.tooltips-card-header h3[b-hlxnz259qv] {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--color-text-emphasis);
}

.tooltips-category[b-hlxnz259qv] {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-purple-bright);
    background: var(--color-purple-bg-subtle);
    border: 1px solid var(--color-purple-border-subtle);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.tooltips-card p[b-hlxnz259qv] {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--color-text-primary);
    flex-grow: 1;
}

.tooltips-card .btn[b-hlxnz259qv] {
    align-self: flex-start;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .tooltips-grid[b-hlxnz259qv] {
        grid-template-columns: 1fr;
    }
}
/* /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
   ============================================================================ */

/* ============================================================================
   Content Type Filter Buttons
   ============================================================================ */

.content-type-filter[b-jr960ytlwd] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}

.content-type-btn[b-jr960ytlwd] {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-ease);
}

@media (hover: hover) {
  .content-type-btn:hover[b-jr960ytlwd] {
    background: var(--color-bg-hover-subtle);
    border-color: var(--color-purple-bright);
    color: var(--color-text-emphasis);
  }
}

.content-type-btn.active[b-jr960ytlwd] {
  background: var(--color-purple-dark);
  border-color: var(--color-purple-bright);
  color: var(--color-text-on-emphasis);
}

@media (hover: hover) {
  .content-type-btn.active:hover[b-jr960ytlwd] {
    background: var(--color-purple-medium);
  }
}

/* ============================================================================
   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/ReviewDiff.razor.rz.scp.css */
.diff-view[b-u542oniz6v] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    overflow-x: auto;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-emphasis);
}

.diff-line[b-u542oniz6v] {
    display: flex;
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0 0.5rem;
    min-height: 1.4em;
}

.diff-line-equal[b-u542oniz6v] {
    background: transparent;
    color: var(--color-text-primary);
}

.diff-line-insert[b-u542oniz6v] {
    background: var(--color-green-dark-bg);
    color: var(--color-green-light);
}

.diff-line-delete[b-u542oniz6v] {
    background: var(--color-red-bg);
    color: var(--color-red);
}

.diff-prefix[b-u542oniz6v] {
    width: 1.2em;
    flex-shrink: 0;
    user-select: none;
    opacity: 0.5;
}

.diff-text[b-u542oniz6v] {
    flex: 1;
}

.diff-trailing-ws[b-u542oniz6v] {
    opacity: 0.5;
    text-decoration: underline;
}
/* /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;
}

@media (hover: hover) {
    .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 */
}

@media (hover: hover) {
  .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: clip;
  /* 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;
  background: none;
  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 */
@media (hover: hover) {
  .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 */
@media (hover: hover) {
  .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(var(--section-grid-columns, 2), 1fr);
  gap: var(--spacing-4);
}

/* Desktop - uses inherited --section-grid-columns from .page-with-sidebar */
@media (min-width: 1293px) {
  .grid[b-161019qk11] {
    grid-template-columns: repeat(var(--section-grid-columns, 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;
}

@media (hover: hover) {
    .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;
}

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

html.keyboard-nav .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);
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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);
    }
}

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

@media (hover: hover) {
    .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);
}

@media (hover: hover) {
    [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/SidebarToggle.razor.rz.scp.css */
/* ============================================================================
   Sidebar Toggle Button
   
   Desktop-only button to collapse/expand the sidebar.
   Hidden on mobile where MobileSidebarToolbar handles sidebar display.
   ============================================================================ */

.sidebar-toggle[b-aplengd9k7] {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-emphasis);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-ease);
  position: absolute;
  top: calc(var(--spacing-1) / 2);
  right: 0;
  z-index: 1;
}

/* Desktop only - show toggle button */
@media (min-width: 1293px) {
  .sidebar-toggle[b-aplengd9k7] {
    display: flex;
  }
}

.sidebar-toggle:hover[b-aplengd9k7] {
  background: var(--color-purple-dark);
  color: var(--color-text-on-emphasis);
  border-color: var(--color-purple-bright);
}

html.keyboard-nav .sidebar-toggle:focus-visible[b-aplengd9k7] {
  outline: 2px solid var(--color-purple-bright);
  outline-offset: 2px;
}

/* In collapsed state, switch to static positioning so it stays centered in the 48px column */
html.sidebar-collapsed .sidebar-toggle[b-aplengd9k7] {
  position: static;
  margin: calc(var(--spacing-1) / 2) auto 0;
}

.sidebar-toggle-icon[b-aplengd9k7] {
  flex-shrink: 0;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sidebar-toggle[b-aplengd9k7] {
    transition: none;
  }
}
/* /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);
    /* 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;
        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;
    }

    @media (hover: hover) {
        .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 styling in mobile dropdown — match desktop purple accent */
    .sub-nav-dropdown-custom[b-vcn1ka0kjb] {
        border-left: 3px solid var(--color-purple-bright);
        padding-left: calc(var(--spacing-4) - 3px);
    }

    .sub-nav-dropdown-custom[b-vcn1ka0kjb]::after {
        font-size: 0.85em;
        color: var(--color-purple-bright);
        opacity: 0.5;
        margin-left: 0.15em;
        vertical-align: super;
        position: relative;
        top: -0.35em;
    }

    @media (hover: hover) {
        .sub-nav-dropdown-custom:hover[b-vcn1ka0kjb] {
            border-left-color: var(--color-purple-medium);
        }
    }

    .sub-nav-dropdown-custom.active[b-vcn1ka0kjb] {
        border-left-color: var(--color-purple-bright);
    }

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

/* ============================================================================
   Sub-Navigation Button Styles
   ============================================================================ */

.btn-subnav[b-vcn1ka0kjb] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    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);
}

@media (hover: hover) {
    .btn-subnav:hover[b-vcn1ka0kjb] {
        background: var(--color-bg-hover-subtle);
        box-shadow: 0 0 0 1px var(--color-purple-bright) inset;
        color: var(--color-text-emphasis);
        text-decoration: none;
    }
}

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

@media (hover: hover) {
    .btn-subnav.active:hover[b-vcn1ka0kjb] {
        background: var(--color-purple-medium);
        color: var(--color-text-on-emphasis);
        text-decoration: none;
    }
}

html.keyboard-nav .btn-subnav:focus-visible[b-vcn1ka0kjb] {
    outline: 3px solid var(--color-purple-bright) !important;
    outline-offset: 2px !important;
    transition: none !important;
    border-radius: var(--radius-md);
    text-decoration: none;
}

/* Custom page sparkle indicator — subtle star after custom page links */
.btn-subnav-custom[b-vcn1ka0kjb] {
    border-color: var(--color-purple-bright);
}

.btn-subnav-custom[b-vcn1ka0kjb]::after {
    font-size: 0.85em;
    color: var(--color-purple-bright);
    opacity: 0.5;
    margin-left: 0.15em;
    vertical-align: super;
    position: relative;
    top: -0.35em;
}

@media (hover: hover) {
    .btn-subnav-custom:hover[b-vcn1ka0kjb]::after {
        opacity: 0.8;
    }
}

.btn-subnav-custom.active[b-vcn1ka0kjb]::after {
    color: var(--color-text-on-emphasis);
    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;
    }
}