/* =========================================================
   SKAO Sphinx Theme
   Extends PyData Sphinx Theme with SKAO branding

   This file only overrides pydata's CSS custom properties
   with SKAO brand colors. All components use pydata's
   variable names for consistency.
   ========================================================= */

/* =========================================================
   SKAO Brand Color Overrides for PyData Theme
   Colors from ska-javascript-components
   Additional colors per SKAO UI Style Guide
   https://confluence.skatelescope.org/display/SWSI/Graphical+Color+Pallet
   as Magenta does not meet accessibility requirements
   ========================================================= */

/* Light theme - override pydata's light mode colors
   Per SKAO UI Style Guide: avoid magenta as it conflicts with alarm colors */
html:not([data-theme]),
html[data-theme="light"] {
    /* Primary: SKAO deep navy blue (LIGHT_SECONDARY main) */
    --pst-color-primary: #070068;
    --pst-color-primary-bg: #e0c7ff;

    /* Secondary: SKAO purple (LIGHT_SECONDARY light) */
    --pst-color-secondary: #472A97;
    --pst-color-secondary-bg: #f4eefb;

    /* Accent: SKAO purple - avoiding magenta per style guide */
    --pst-color-accent: #472A97;
    --pst-color-accent-bg: #f4eefb;

    /* Hover shades (pydata's compiled defaults are teal/violet) */
    --pst-color-primary-highlight: #2d24a0;
    --pst-color-secondary-highlight: #5c3ab8;

    /* Links use primary color */
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    /* Background colors (from LIGHT_PRIMARY) */
    --pst-color-background: #FFFFFF;
    --pst-color-on-background: #FFFFFF;  /* White for navbar, cards, elevated elements */
    --pst-color-surface: #F4F9FD;        /* Light gray for grouped/nested sections */
    --pst-color-on-surface: #212121;

    /* Text colors */
    --pst-color-text-base: #212121;
    --pst-color-text-muted: #48566b;

    /* Border colors */
    --pst-color-border: #C1C6CA;  /* LIGHT_PRIMARY main */
    --pst-color-border-muted: rgba(7, 0, 104, 0.15);

    /* Tables: pydata defaults heading-bg to surface, which equals the
       zebra-low row colour, so headers read as ordinary rows. A distinct
       heading background lets pydata's 2px primary underline show as the
       header accent. Hover replaces pydata's off-palette violet. */
    --pst-color-table-heading-bg: var(--pst-color-on-background);
    --pst-color-table-row-hover-bg: #e8eff8;

    /* Status colors - SKAO UI Style Guide aligned
       Shapes use these colors with white text for contrast */
    --pst-color-success: #015B00;  /* SKAO success green */
    --pst-color-success-bg: #d4e9dc;
    /* Orange for warnings (yellow reserved for dark mode). Darkened from
       #FB8C00, which was 2.37:1 on white and 1.93:1 on the warning-bg;
       #C24E00 is 4.79:1 on white and 3.90:1 on the warning-bg. The
       darker base needs light text where warning is a solid background
       (pydata's skip-link, sphinx-design warning badges): pydata's
       default warning-text #14181e is only 3.7:1 on #C24E00. */
    --pst-color-warning: #C24E00;
    --pst-color-warning-bg: #ffe5b4;
    --pst-color-warning-text: #FFFFFF;
    --pst-color-danger: #AD1F1F;   /* SKAO high-level error red */
    --pst-color-danger-bg: #f8d7da;
    --pst-color-info: #1565c0;     /* Blue for info (similar to #87C3EB darkened) */
    --pst-color-info-bg: #e1f0fb;
}

/* Dark theme - override pydata's dark mode colors
   Uses the Developer Portal's blue accent for readability on dark
   backgrounds; SKAO yellow is reserved for warning states.
   Avoid magenta in dark mode as it conflicts with alarm colors */
html[data-theme="dark"] {
    /* Primary: light blue accent (Developer Portal dark mode) */
    --pst-color-primary: #64b5f6;
    --pst-color-primary-bg: #0d2c4d;

    /* Secondary: lighter blue, used for link hover */
    --pst-color-secondary: #90caf9;
    --pst-color-secondary-bg: #102a43;

    /* Accent: consistent with primary */
    --pst-color-accent: #64b5f6;
    --pst-color-accent-bg: #0d2c4d;

    /* Hover shades (pydata's compiled defaults are teal/violet);
       dark text on the light-blue hover for contrast */
    --pst-color-primary-highlight: #42a5f5;
    --pst-color-secondary-highlight: #64b5f6;
    --pst-color-secondary-highlight-text: #14181e;

    /* Links - blue for visibility on dark backgrounds */
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    /* Background colors - SKAO dark theme (from DARK_PRIMARY).
       surface intentionally deviates from DARK_PRIMARY main (#484848):
       muted text (#9ca4af) on #484848 is 3.63:1 (fails WCAG AA);
       on #363636 it is 4.8:1. surface also drives the table zebra-low
       rows and inline-code chips, so this fixes those in one place. */
    --pst-color-background: #121212;
    --pst-color-on-background: #212121;
    --pst-color-surface: #363636;
    --pst-color-on-surface: #f3f4f5;

    /* Text colors */
    --pst-color-text-base: #FFFFFF;
    --pst-color-text-muted: #9ca4af;

    /* Border colors - slightly lighter than the darkened surfaces so
       component outlines stay visible */
    --pst-color-border: #545454;
    --pst-color-border-muted: rgba(255, 255, 255, 0.12);

    /* Tables: pydata defaults heading-bg to surface, which equals the
       zebra-low row colour, so headers read as ordinary rows. A distinct
       heading background lets pydata's 2px primary underline show as the
       header accent. Hover replaces pydata's off-palette violet. */
    --pst-color-table-heading-bg: var(--pst-color-on-background);
    --pst-color-table-row-hover-bg: #2a3b50;
    --pst-color-table-inner-border: #3a3a3a;
    /* outer border defaults to surface, which darkened to #363636 -
       align it with the component border colour instead */
    --pst-color-table-outer-border: var(--pst-color-border);

    /* Status colors - lightened variants of SKAO UI Style Guide colors
       for text readability on dark backgrounds (WCAG AA contrast) */
    --pst-color-success: #6ABF69;  /* Lightened #015B00 for contrast */
    --pst-color-success-bg: #1a3d1a;
    --pst-color-warning: #FFE939;  /* SKAO yellow - good contrast on dark */
    --pst-color-warning-bg: #3d2a00;
    --pst-color-danger: #FF5F52;   /* Lightened #AD1F1F for contrast */
    --pst-color-danger-bg: #4e111b;
    --pst-color-info: #87C3EB;     /* SKAO informational blue */
    --pst-color-info-bg: #0a2351;
}

/* =========================================================
   SKAO Font Override
   Noto Sans is loaded from Google Fonts by the theme itself
   (see ska_ser_sphinx_theme.setup); overriding pydata's font
   variables applies it to body text and headings alike.
   ========================================================= */
html {
    --pst-font-family-base: 'Noto Sans', Helvetica, Arial, sans-serif;
    --pst-font-family-heading: 'Noto Sans', Helvetica, Arial, sans-serif;

    /* Compact single-line header (pydata default is 4rem) */
    --pst-header-height: 3.5rem;
}

/* =========================================================
   SKAO Tables & Inline Code
   ========================================================= */

/* Bold headers reinforce the primary-coloured underline pydata draws
   under thead */
.bd-content table th {
    font-weight: 600;
}

/* Inline code chips default to a --pst-color-surface background, which
   equals the zebra-low table row colour - a translucent chip stays
   visible on any row or panel background */
code.literal {
    background-color: rgba(7, 0, 104, 0.05);
}

html[data-theme="dark"] code.literal {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   SKAO Code Blocks
   Backgrounds come from the pygments styles (monokai in dark mode);
   a hairline border separates blocks from the page like other surfaces
   ========================================================= */
div.highlight {
    border: 1px solid var(--pst-color-border-muted);
}

/* =========================================================
   SKAO Navbar Styling
   Matches SKAO website typography while using pydata colors
   ========================================================= */

/* Main navbar nav items - compact enough to keep every label on a
   single line (large light-weight type made items like "Pipeline
   Machinery" wrap inside their own nav entry) */
.bd-header .navbar-nav .nav-link {
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.4rem 0.75rem;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Remove pydata's default underline/border styles */
.bd-header .navbar-nav .nav-link::before,
.bd-header .navbar-nav .nav-link::after {
    display: none !important;
}

/* Navbar item hover - use pydata's link hover color */
.bd-header .navbar-nav .nav-link:hover {
    color: var(--pst-color-link-hover);
}

/* Active navbar item - subtle underline indicator */
.bd-header .navbar-nav .nav-item.current > .nav-link {
    position: relative;
}

.bd-header .navbar-nav .nav-item.current > .nav-link::after {
    display: block !important;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background-color: var(--pst-color-link);
}

/* Logo/brand text styling */
.navbar-brand {
    font-size: 1.1rem;
    font-weight: 400;
    white-space: nowrap;
}

/* Let the header brand column grow with long logo text instead of
   overlapping the centered nav links (the col-lg-3 column class in
   pydata's bundled stylesheet fixes it at 25% width) */
.bd-header .navbar-header-items__start {
    width: auto;
    flex-shrink: 0;
}

/* Search button - match nav item sizing */
.bd-header .search-button {
    font-size: 0.95rem;
    padding: 0.4rem 0.75rem;
}

/* Theme switcher button */
.bd-header .theme-switch-button {
    font-size: 1.1rem;
}

/* =========================================================
   SKAO Hero Section
   Uses SKAO brand gradient (navy blue to magenta)
   ========================================================= */

/* Hide the page's own RST title when a hero banner immediately
   follows it - the hero provides its own title */
h1:has(+ .skao-hero) {
    display: none;
}

.skao-hero {
    padding: 3rem 2.5rem;
    margin: 0 0 2rem 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* Light mode - subtle gradient with brand colors */
    background: linear-gradient(
        135deg,
        rgba(7, 0, 104, 0.05) 0%,
        rgba(231, 0, 104, 0.08) 100%
    );
}

/* Dark mode hero with SKAO brand gradient */
html[data-theme="dark"] .skao-hero {
    /* SKAO main gradient: magenta (#E70068) to navy blue (#070068) */
    background: linear-gradient(
        225deg,
        #070068 0%,
        #1a0a50 30%,
        #3d0a58 60%,
        #6b0a5c 80%,
        #E70068 100%
    );
}

/* Star field effect for dark mode */
html[data-theme="dark"] .skao-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.4) 1px, transparent 0),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.25) 1px, transparent 0),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.35) 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 160px 25px, rgba(255,255,255,0.45) 1px, transparent 0),
        radial-gradient(1px 1px at 250px 50px, rgba(255,255,255,0.3) 1px, transparent 0),
        radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,0.2) 1px, transparent 0),
        radial-gradient(1.2px 1.2px at 400px 35px, rgba(255,255,255,0.35) 1px, transparent 0),
        radial-gradient(1px 1px at 500px 75px, rgba(255,255,255,0.25) 1px, transparent 0);
    pointer-events: none;
    opacity: 0.6;
}

.skao-hero-content {
    position: relative;
    z-index: 1;
}

.skao-hero-title {
    color: var(--pst-color-text-base);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    border: none;
    padding: 0;
}

.skao-hero-description {
    font-size: 1.1rem;
    color: var(--pst-color-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    max-width: 700px;
}

.skao-hero-link {
    color: var(--pst-color-accent);
    text-decoration: none;
    font-weight: 500;
}

.skao-hero-link:hover {
    color: var(--pst-color-link-hover);
}

/* Hero search box */
.skao-hero-search {
    display: flex;
    align-items: center;
    max-width: 600px;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

html[data-theme="dark"] .skao-hero-search {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.skao-hero-search:hover {
    border-color: var(--pst-color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .skao-hero-search:hover {
    background: rgba(255, 255, 255, 0.12);
}

.skao-hero-search-icon {
    font-size: 1.1rem;
    margin-right: 0.75rem;
    opacity: 0.6;
}

.skao-hero-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--pst-color-text-muted);
    outline: none;
    cursor: pointer;
}

.skao-hero-search-input::placeholder {
    color: var(--pst-color-text-muted);
    opacity: 0.8;
}

/* =========================================================
   SKAO Checklist
   ========================================================= */
.skao-checklist {
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.skao-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pst-color-border-muted);
}

.skao-checklist-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.skao-checklist-item:first-child {
    padding-top: 0;
}

.skao-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--pst-color-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.skao-checkbox:hover {
    border-color: var(--pst-color-accent);
    background: var(--pst-color-accent-bg);
}

.skao-checkbox.checked {
    background: var(--pst-color-accent);
    border-color: var(--pst-color-accent);
}

.skao-checkbox.checked::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Dark text on the light-blue dark-mode accent for contrast */
html[data-theme="dark"] .skao-checkbox.checked::after {
    color: var(--pst-color-accent-bg);
}

.skao-checklist-content {
    flex: 1;
}

.skao-checklist-label {
    font-weight: 600;
    color: var(--pst-color-text-base);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.skao-checklist-desc {
    font-size: 0.875rem;
    color: var(--pst-color-text-muted);
    line-height: 1.5;
}

.skao-checklist-link {
    color: var(--pst-color-link);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.skao-checklist-link:hover {
    color: var(--pst-color-link-hover);
}

.skao-checklist-link::after {
    content: '→';
}

/* =========================================================
   SKAO Timeline Navigation
   ========================================================= */
.skao-timeline-container {
    margin: 2rem 0;
}

.skao-timeline-nav {
    display: flex;
    align-items: center;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Step pills are <button> elements (keyboard focusable); the theme JS
   turns them into an ARIA tab list that filters the panels below */
.skao-timeline-step {
    padding: 0.45rem 1.25rem;
    background: transparent;
    border: 1px solid var(--pst-color-border);
    color: var(--pst-color-text-muted);
    font-family: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    border-radius: 999px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.skao-timeline-step:hover {
    color: var(--pst-color-text-base);
    background: var(--pst-color-surface);
}

.skao-timeline-step:focus-visible {
    outline: 2px solid var(--pst-color-accent);
    outline-offset: 2px;
}

.skao-timeline-step.active {
    background: var(--pst-color-accent-bg);
    border-color: var(--pst-color-accent);
    color: var(--pst-color-accent);
}

.skao-timeline-chevron {
    color: var(--pst-color-text-muted);
    font-size: 1.25rem;
    font-weight: 300;
}

/* Filtered mode (applied by JS): show only the selected step's panel
   and drop its header - the active pill already names the step, so
   repeating it above the tasks was redundant. Non-selected panels are
   hidden with hidden="until-found" so find-in-page still reaches their
   text; content-visibility keeps the element's own box, so collapse the
   flex gap and strip the border to make them truly invisible. */
.js-filtered .skao-accordions {
    gap: 0;
}

.js-filtered .skao-accordion[hidden] {
    border: none;
}

.js-filtered .skao-accordion-header {
    display: none;
}

.js-filtered .skao-accordion-body {
    border-top: none;
}

.js-filtered .skao-accordion-body:focus-visible {
    outline: 2px solid var(--pst-color-accent);
    outline-offset: -2px;
}

.js-filtered .skao-accordion[open] {
    border-color: var(--pst-color-border);
}

/* =========================================================
   SKAO Accordions
   ========================================================= */
.skao-accordions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skao-accordion {
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    overflow: hidden;
}

.skao-accordion[open] {
    border-color: var(--pst-color-accent);
}

.skao-accordion-header {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--pst-color-text-base);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.skao-accordion-header::-webkit-details-marker {
    display: none;
}

.skao-accordion-header::before {
    content: '▶';
    font-size: 0.75rem;
    color: var(--pst-color-accent);
    transition: transform 0.2s ease;
}

.skao-accordion[open] .skao-accordion-header::before {
    transform: rotate(90deg);
}

.skao-accordion-header:hover {
    background: var(--pst-color-surface);
}

.skao-accordion[open] .skao-accordion-header {
    background: var(--pst-color-accent-bg);
}

.skao-accordion-body {
    padding: 1.25rem;
    border-top: 1px solid var(--pst-color-border);
    background: var(--pst-color-surface);
}

/* =========================================================
   SKAO Task Items
   ========================================================= */
.skao-task-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pst-color-border-muted);
}

.skao-task-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.skao-task-item:first-child {
    padding-top: 0;
}

.skao-task-bullet {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: var(--pst-color-accent);
    border-radius: 50%;
    margin-top: 0.5rem;
}

.skao-task-content {
    flex: 1;
}

.skao-task-title {
    font-weight: 600;
    color: var(--pst-color-text-base);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.skao-task-desc {
    color: var(--pst-color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =========================================================
   SKAO Tools Grid
   ========================================================= */
.skao-tools-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (max-width: 900px) {
    .skao-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .skao-tools-grid {
        grid-template-columns: 1fr;
    }
}

.skao-tool-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.skao-tool-card:hover {
    border-color: var(--pst-color-accent);
    transform: translateY(-2px);
    box-shadow: var(--pst-color-shadow) 0 8px 24px;
}

.skao-tool-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: var(--pst-color-accent);
    color: white;
}

/* Tool variant colors */
.skao-tool-card--gitlab .skao-tool-icon {
    background: linear-gradient(135deg, #fc6d26 0%, #e24329 100%);
}

.skao-tool-card--jira .skao-tool-icon,
.skao-tool-card--confluence .skao-tool-icon {
    background: linear-gradient(135deg, #2684ff 0%, #0052cc 100%);
}

.skao-tool-card--slack .skao-tool-icon {
    background: linear-gradient(135deg, #4a154b 0%, #611f69 100%);
}

.skao-tool-card--monitoring .skao-tool-icon {
    background: var(--pst-color-success);
}

.skao-tool-card--artefact .skao-tool-icon {
    background: var(--pst-color-secondary);
}

.skao-tool-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pst-color-text-base);
    margin: 0 0 0.25rem 0;
}

.skao-tool-content p {
    font-size: 0.85rem;
    color: var(--pst-color-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* External-link indicator: always visible (hover-only cues never reach
   touch or keyboard users), highlighted on hover. Cards that carry it
   are position: relative. */
.skao-external-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.85rem;
    color: var(--pst-color-text-muted);
    opacity: 0.65;
    transition: opacity 0.2s, color 0.2s;
}

.skao-tool-card:hover .skao-external-icon,
.skao-feature-card:hover .skao-external-icon,
.skao-role-card:hover .skao-external-icon,
.skao-compact-card:hover .skao-external-icon {
    opacity: 1;
    color: var(--pst-color-accent);
}

/* =========================================================
   SKAO Feature Cards (rounded-box gradient icons)
   ========================================================= */
.skao-tools-grid--feature {
    gap: 1.25rem;
}

.skao-feature-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.skao-feature-card:hover {
    border-color: var(--pst-color-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.skao-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.skao-feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pst-color-text-base);
    margin: 0 0 0.5rem 0;
}

.skao-feature-desc {
    font-size: 0.9rem;
    color: var(--pst-color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* =========================================================
   SKAO Compact Cards (inline emoji)
   ========================================================= */
.skao-tools-grid--compact {
    gap: 1rem;
}

.skao-compact-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.skao-compact-card:hover {
    border-color: var(--pst-color-accent);
    background: var(--pst-color-surface);
    transform: translateY(-2px);
}

/* Compact cards are single-row chips - the indicator sits in the row
   flow instead of a floating corner */
.skao-compact-card .skao-external-icon {
    position: static;
    margin-left: auto;
}

.skao-compact-icon {
    font-size: 1.25rem;
}

.skao-compact-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--pst-color-text-base);
}

/* =========================================================
   SKAO Role Cards (emoji with description)
   ========================================================= */
.skao-tools-grid--role {
    gap: 1rem;
}

.skao-role-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.skao-role-card:hover {
    border-color: var(--pst-color-accent);
    transform: translateY(-2px);
}

/* =========================================================
   SKAO Plain Icon Variant (:icon-style: plain)
   Icons render without the coloured badge boxes; must come after the
   per-tool variant rules so equal-specificity selectors win by order
   ========================================================= */
.skao-tools-grid--plain .skao-tool-icon,
.skao-tools-grid--plain .skao-feature-icon {
    background: none;
    color: inherit;
    text-shadow: none;
    width: auto;
    height: auto;
    border-radius: 0;
}

.skao-role-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.skao-role-icon {
    font-size: 1.1rem;
}

.skao-role-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pst-color-text-base);
}

.skao-role-desc {
    font-size: 0.875rem;
    color: var(--pst-color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* =========================================================
   SKAO Download Box
   ========================================================= */
/* Neutral chrome - the earlier info-bg fill with a 2px info border
   read as an alert rather than a quiet file attachment */
.skao-download-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    margin: 1.5rem 0;
}

.skao-download-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.skao-download-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.skao-download-text strong {
    display: block;
    font-size: 1rem;
    color: var(--pst-color-text-base);
    margin-bottom: 0.25rem;
}

.skao-download-text p {
    font-size: 0.875rem;
    color: var(--pst-color-text-muted);
    margin: 0;
}

.skao-download-meta {
    font-size: 0.8rem;
}

.skao-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--pst-color-accent);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.skao-download-btn:hover {
    filter: brightness(1.1);
    color: white;
}

/* Dark text on the light-blue dark-mode accent for contrast */
html[data-theme="dark"] .skao-download-btn {
    color: #14181e;
}

/* =========================================================
   SKAO Feedback Widget
   ========================================================= */
.skao-feedback {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 2rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pst-color-border-muted);
}

.skao-feedback-question {
    font-size: 0.95rem;
    color: var(--pst-color-text-muted);
}

.skao-feedback-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.skao-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--pst-color-text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.skao-feedback-btn:hover {
    background: var(--pst-color-surface);
    color: var(--pst-color-text-base);
}

.skao-feedback-btn--yes:hover {
    color: var(--pst-color-success);
}

.skao-feedback-btn--no:hover {
    color: var(--pst-color-danger);
}

.skao-feedback-btn.selected {
    background: var(--pst-color-surface);
}

.skao-feedback-btn--yes.selected {
    color: var(--pst-color-success);
}

.skao-feedback-btn--no.selected {
    color: var(--pst-color-danger);
}

.skao-feedback-emoji {
    font-size: 1rem;
}

.skao-feedback-separator {
    color: var(--pst-color-border);
}

.skao-feedback-thanks {
    font-size: 0.9rem;
    color: var(--pst-color-success);
    font-weight: 500;
}

.skao-feedback[data-submitted="true"] .skao-feedback-buttons {
    display: none;
}

.skao-feedback[data-submitted="true"] .skao-feedback-thanks {
    display: block;
}

/* =========================================================
   SKAO Sidebar Navigation
   Styles the skao-sidebar-nav.html component driven by
   html_theme_options["sidebar_nav"]
   ========================================================= */
.sidebar-nav {
    padding: 1rem 0;
}

.sidebar-sections {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-section {
    margin-bottom: 0.25rem;
}

.sidebar-section-title {
    display: block;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--pst-color-text-base);
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.sidebar-section-title:hover {
    background: rgba(100, 181, 246, 0.05);
}

.sidebar-section-title.active {
    color: var(--pst-color-primary);
}

.sidebar-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.sidebar-items.show {
    display: block;
}

.sidebar-items li a {
    display: block;
    padding: 0.35rem 1.5rem 0.35rem 2.25rem;
    font-size: 0.85rem;
    color: var(--pst-color-text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.sidebar-items li a:hover {
    color: var(--pst-color-text-base);
    background: rgba(100, 181, 246, 0.05);
}

.sidebar-items li a.current {
    color: var(--pst-color-primary);
    border-left-color: var(--pst-color-primary);
    font-weight: 500;
}

.expanded .sidebar-items {
    display: block;
}

/* Tool sub-navigation */
.sidebar-tool {
    margin-left: 0;
}

.sidebar-tool-title {
    display: block;
    padding: 0.35rem 1.5rem 0.35rem 2.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pst-color-text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.sidebar-tool-title:hover {
    color: var(--pst-color-text-base);
    background: rgba(100, 181, 246, 0.05);
}

.sidebar-tool-title.current {
    color: var(--pst-color-primary);
}

.sidebar-subitems {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.sidebar-subitems.show {
    display: block;
}

.sidebar-subitems li a {
    display: block;
    padding: 0.3rem 1.5rem 0.3rem 3rem;
    font-size: 0.8rem;
    color: var(--pst-color-text-muted);
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-subitems li a:hover {
    color: var(--pst-color-text-base);
}

.sidebar-subitems li a.current {
    color: var(--pst-color-primary);
    font-weight: 500;
}

/* Sub-section groups: an optional heading tier between a section and its
   tools (sidebar_nav entries with kind: "group"). The .sidebar-nav prefix
   lifts these above the generic ".sidebar-items li a" rule, which would
   otherwise win on specificity and undo the heading treatment. */
.sidebar-nav .sidebar-subsection-title {
    display: block;
    padding: 0.35rem 1.5rem 0.35rem 1.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pst-color-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.sidebar-nav .sidebar-subsection-title:hover,
.sidebar-nav .sidebar-subsection-title.active {
    color: var(--pst-color-primary);
}

.sidebar-subgroup-items {
    list-style: none;
    padding: 0;
    margin: 0 0 0.25rem 0;
    display: none;
}

.sidebar-subsection.expanded > .sidebar-subgroup-items {
    display: block;
}

/* Sidebar links carry the external-link indicator inline after the label,
   rather than in the floating corner the cards use */
.sidebar-nav .skao-external-icon {
    position: static;
    margin-left: 0.35rem;
    font-size: 0.75em;
}

/* =========================================================
   SKAO GitLab Widgets
   Loading and output styles for the skao-gitlab-projects and
   skao-kyverno-policies directives
   ========================================================= */
.skao-gitlab-loader {
    width: 50px;
    height: 50px;
    border: 5px solid var(--pst-color-border);
    border-top-color: var(--pst-color-primary);
    border-radius: 50%;
    animation: skao-spin 2s linear infinite;
    margin: 1rem auto;
}

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

.skao-gitlab-error,
.skao-gitlab-empty {
    color: var(--pst-color-text-muted);
    font-style: italic;
}

.skao-gitlab-subgroup {
    margin-bottom: 0.75rem;
}

.skao-policy-title {
    display: block;
    margin-top: 1.25rem;
}

/* The policy YAML is a real code block (div.highlight > pre, built by
   makeCodeBlock in skao-gitlab.js), so the monospace font, padding and
   whitespace handling all come from the shared code-block styles. Only the
   vertical rhythm needs overriding, to pull each block up against the
   "Policy: <name>" heading it belongs to. */
.skao-policy-yaml {
    margin: 0.5rem 0 1.25rem;
}

/* =========================================================
   SKAO "Copy for AI" button
   A source-action in the secondary sidebar (copy-for-ai.html),
   styled to sit alongside pydata's "Show Source" / "Edit this
   page" links: a plain text+icon control, not a chrome button.
   ========================================================= */
.skao-copy-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: inherit;
    /* Match the sibling "Show Source" / "Edit this page" links so the three
       read as one group of page source-actions */
    color: var(--pst-color-link);
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

/* Underline the label only (not the icon), as pydata does for the sibling
   source links */
.skao-copy-ai .skao-copy-ai-label {
    text-decoration: underline;
}

.skao-copy-ai:hover {
    color: var(--pst-color-link-hover);
}

.skao-copy-ai:focus-visible {
    outline: 2px solid var(--pst-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* pydata gives .sidebar-secondary-item i a right pad; spacing here comes from
   the flex gap instead, so the icon and label stay evenly spaced in all states */
.skao-copy-ai i {
    padding-right: 0;
}

.skao-copy-ai.is-copied {
    color: var(--pst-color-success);
}

.skao-copy-ai.is-error {
    color: var(--pst-color-danger);
}

/* Visually-hidden live region: announces "Copied!" to screen readers without
   duplicating the visible label */
.skao-copy-ai-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .skao-copy-ai {
        transition: none;
    }
}

/* =========================================================
   Content Utilities
   ========================================================= */

/* Keep scaled images in proportion. docutils turns :scale: (and sized
   :width:/:height: options) into an inline style carrying both a width and a
   fixed height. pydata then clamps the width with max-width: 100%, but the
   height stays as written, so on any viewport narrower than the image the
   picture is stretched. Overriding an inline style needs !important, which
   does mean an explicit :height: no longer takes effect - worth it, since a
   distorted image is the worse outcome and :height: alone is rare. Size
   images with :scale: or :width:. */
.bd-content img {
    height: auto !important;
}

/* Extra breathing room above an element, for the occasional place where the
   document flow needs a break that markup alone cannot express:
       .. rst-class:: skao-spacer */
.skao-spacer {
    margin-top: 1.5rem;
}