:root {
    /* =========================================================================
       COLOR SYSTEM
       ========================================================================= */

    /* Base colors */
    --text-color: #111;
    --border-color: #eee;
    --background-light: #eee;

    /* Tag contrast tuning: outer pill (host) vs inner pill (label) and the left edge */
    --tag-outer-bg: var(--background-light);
    /* Make inner pill a touch closer to the control surface so it reads as a separate layer
       but still adapts to light/dark themes via --card-bg and --control-border. */
    --tag-inner-bg: color-mix(in oklab, var(--card-bg) 88%, var(--control-border) 12%);
    /* Strong left edge color for the inner pill (used as border-left) */
    --tag-inner-edge: color-mix(in oklab, var(--control-border) 75%, black 5%);

    /* Centralized orange variables (edit these to change orange across themes) */
    --orange-base: rgba(204, 74, 0, 0.8);      /* slightly darker orange base for contrast */
    --orange-light-base: rgba(204, 74, 0, 0.4);
    --orange-solid-base: #cc4a00; /* darker than #e05500 (light-theme solid) */
    /* Two-tone orange border stops (top, bottom) derived from the active solid by default */
    --orange-top: color-mix(in oklab, var(--orange-solid) 20%, white);
    --orange-bottom: color-mix(in oklab, var(--orange-solid) 85%, black 10%);

    /* Dark-theme orange variants (used when dark visuals are active) */
    --orange-base-dark: rgba(184, 134, 0, 0.35); /* darker warm amber for dark theme */
    --orange-light-base-dark: rgba(184, 134, 0, 0.25);
    --orange-solid-dark: #b88600; /* darker than #e09b00 (dark-theme solid) */

    /* Active variables used throughout the stylesheet - these reference the chosen variant */
    --orange: var(--orange-base);
    --orange-light: var(--orange-light-base);
    --orange-solid: var(--orange-solid-base);
    /* Active state palette: default to the dark-mode orange variants so
       light-mode uses the same visual for active pills as dark mode. */
    --orange-active: var(--orange-base-dark);
    --orange-active-light: var(--orange-light-base-dark);
    --orange-active-solid: var(--orange-solid-dark);
    /* Two-tone stops for the active border (derived from active-solid) */
    --orange-top-active: color-mix(in oklab, var(--orange-active-solid) 20%, white);
    --orange-bottom-active: color-mix(in oklab, var(--orange-active-solid) 85%, black 10%);
    --white: white;
    --transparent: transparent;

    /* Role color palette: base solids + lighter glow variants */
    --author-solid: #dc2626; /* red */
    --author-color: color-mix(in oklab, var(--author-solid) 90%, white);

    --maintainer-solid: #16a34a; /* green */
    --maintainer-color: color-mix(in oklab, var(--maintainer-solid) 90%, white);

    --contributor-solid: #8b5cf6; /* purple */
    --contributor-color: color-mix(in oklab, var(--contributor-solid) 90%, white);

    /* Theme surfaces (light default) */
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --muted-bg: #f6f7f9;
    --control-bg: #f1f5f9;
    --control-hover-bg: #e2e8f0;
    --control-border: #cbd5e1;
    --control-text: #0f172a;

    /* =========================================================================
       TYPOGRAPHY
       ========================================================================= */

    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --font-size-xs: 0.75rem;        /* 12px - tags, counts, small text */
    --font-size-sm: 0.875rem;       /* 14px - link icons, secondary text */
    --font-size-base: 0.9rem;       /* 14.4px - role banner, theme toggle */
    --font-size-corner-banner: 14px; /* corner banners (fork/clone) */
    --font-weight-normal: 600;      /* default weight for tags and controls */
    --font-weight-bold: 700;        /* corner banners */
    --line-height-tight: 1;         /* compact elements */

    /* =========================================================================
       SPACING & LAYOUT
       ========================================================================= */

    /* Page layout */
    --page-max-width: 48rem;        /* 768px - main content column width */
    --page-margin-y: 2rem;          /* top/bottom margin for body */
    --page-padding-x: 1rem;         /* left/right padding for body */

    /* Component spacing */
    --header-margin-bottom: 1rem;
    --h1-padding-bottom: 0.25rem;
    --h1-column-gap: 1rem;          /* space between title text and first pill */
    --h1-row-gap: 0.5rem;           /* vertical gap when pills wrap */
    --h2-margin-top: 0.2rem;
    --h2-margin-bottom: 0.1rem;

    /* Card system */
    --card-width: 450px;
    --card-padding: 1rem;
    --card-border-width: 1px;
    --card-border-radius: 4px;
    /* Define column gap explicitly for calculations while keeping shorthand for layout */
    --card-gap-col: 1rem;      /* horizontal gap between cards */
    --card-gap: 0.7rem var(--card-gap-col);        /* row-gap column-gap for project-list */

    /* =========================================================================
       BORDER & RADIUS
       ========================================================================= */

    --border-width-thin: 1px;
    --border-width-tag: 2px;
    --border-width-tag-edge: 3px;   /* left edge of inner pill */
    --border-radius-sm: 4px;
    --border-radius-pill: 9999px;
    --border-radius-panel: 8px;
    --border-radius-accent: 3px;    /* banner role accent stripe */

    /* =========================================================================
       SHADOWS & GLOWS
       ========================================================================= */

    --shadow-glow-sm: 0 0 8px;      /* subtle inner shadow */
    --shadow-glow-md: 0 0 5px;     /* standard glow for tags/controls (reduced by 50%) */
    --shadow-corner-banner: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-panel: 0 10px 30px rgba(0,0,0,0.12); /* filter dropdown panels */
    --shadow-inner-role: inset 0 -6px 12px -8px; /* role banner inner glow */

    /* =========================================================================
       TRANSITIONS & ANIMATIONS
       ========================================================================= */

    --transition-fast: 150ms linear;
    --transition-medium: 0.3s ease;
    --transition-caret: 0.18s ease;
    --transition-tag-margin: margin-left 0.3s ease;
    --transition-tag-colors: background-color 150ms linear, border-color 150ms linear;

    /* =========================================================================
       TAG SYSTEM
       ========================================================================= */

    /* Tag padding (inner pills) */
    --tag-padding-card: 0.3rem 0.75rem;  /* tags inside cards */
    --tag-padding-filter: 0.3rem 0.8rem 0.3rem 0.8rem; /* tags in filter lists - symmetric padding */

    /* Tag margins for slide animation - these physically move the pill position */
    --tag-margin-inactive-left: 1.5rem;  /* push pill to the right when inactive */
    --tag-margin-inactive-right: 0;  /* no right margin when inactive */
    --tag-margin-active-left: 0;    /* pill on left when active */
    --tag-margin-active-right: 1.5rem;   /* matching right margin when active to keep total width same */

    /* Outer pill padding for count badge area */
    --pill-padding-inactive: 0.5rem;  /* reserve space on right when inactive */
    --pill-padding-active: 0.5rem;    /* reserve space on right when active */

    /* Summary / caret spacing tuning for filter details */
    --summary-control-pad-right: 0.35rem; /* padding on summary-control to avoid caret overlapping count */
    --summary-caret-gap: 0.5rem; /* gap between caret and preceding content */

    /* Tag negative margin for card tags */
    --tag-card-margin: -0.1rem 0.5rem 0 0;
    --summary-count-nudge: -0.85rem; /* negative moves the right count left; tuned to sit between inner pill and caret */
    /* Reserve small equal space on right - balances with 1.5rem inner pill margin to create equal gaps on both sides */
    --count-reserve: 0.2rem; /* small padding creates equal gap on left (inactive) and right (active) */

    /* =========================================================================
       TAG-LIST & FILTERS
       ========================================================================= */

    --tag-list-gap: 1.1rem 0.8rem;  /* row-gap column-gap */
    --tag-list-summary-gap: 0.6rem 0.9rem; /* inside summary controls */
    --tag-list-scroll-padding: 0.75rem 0.9rem; /* vertical horizontal */
    --filters-gap: 0.75rem;
    --filters-margin-bottom: 0.75rem;
    --filter-panel-offset: 0.6rem;  /* gap between summary and dropdown */
    --filter-panel-padding: 0.6rem;
    --filter-panel-gap: 0.7rem 1rem; /* row-gap column-gap inside panels */
    --filter-panel-max-height: 60vh;
    --filter-panel-col-min: 9rem;   /* min column width in grid */
    --filter-panel-col-min-mobile: 7.5rem; /* smaller on mobile */
    --filter-panel-width: 44vw;     /* default width for floating panels (viewport relative) */

    /* =========================================================================
       COUNT BADGES
       ========================================================================= */

    --count-top: 0.5rem;
    --count-padding: 0 0.5rem;
    --count-z-visible: 1;
    --count-z-hidden: -1;
    --count-opacity-visible: 1;
    --count-opacity-hidden: 0;

    /* =========================================================================
       ICON SIZING
       ========================================================================= */

    --icon-size-md: 20px;           /* link icons */
    --icon-size-sm: 14px;           /* language icons */
    --icon-size-project-lang: 24px; /* project name language icons */
    --icon-padding-md: 0.3rem 0.5rem; /* link icons */
    --icon-padding-sm: 0.1rem 0.1rem; /* language icons */
    --icon-margin-right: 0.5rem;
    --icon-margin-right-sm: 0.1rem;
    --icon-margin-bottom-sm: -0.2rem;

    /* =========================================================================
       CARET INDICATOR (summary controls)
       ========================================================================= */

    --caret-size: 6px;
    --caret-gap: 0.5rem;
    --caret-margin: 0.25rem;

    /* =========================================================================
       THEME TOGGLE BUTTON
       ========================================================================= */

    --toggle-padding: 0.375rem 0.625rem;

    /* =========================================================================
       BANNER RIBBONS (corner & role bars)
       ========================================================================= */

    /* text padding along the ribbon's right edge;
       does affect position, and probably should not be used */
    --corner-gap: 0px;

    /* base geometry for the corner ribbon */
    --ribbon-width: 720px;      /* length of each ribbon */
    --ribbon-top: 12px;         /* distance from top edge for the first ribbon */
    --ribbon-right: -332px;     /* negative to anchor along the diagonal */
    --ribbon-padding: 9px 0;    /* vertical padding for corner banners */

    /* Offsets to move the corner ribbon away from the corner (position only) */
    --ribbon-corner-offset: 12px;                 /* equal movement on both axes */
    --ribbon-top-offset: var(--ribbon-corner-offset);   /* vertical-only override */
    --ribbon-right-offset: var(--ribbon-corner-offset); /* horizontal-only override */

    /* Role bar (horizontal banner at top of card) */
    --rolebar-height: 2.25rem; /* controls the height of the horizontal role bar */
    --rolebar-padding-x: 0.75rem; /* left/right padding */
    --fork-notch: 3.5rem;      /* space reserved on the right under fork ribbon */

    /* Role bar accent stripe */
    --role-accent-left: 0.25rem;
    --role-accent-top: 0.375rem;
    --role-accent-bottom: 0.375rem;
    --role-accent-width: 6px;
    --role-accent-opacity: 0.12;
    --role-accent-z: 11;

    /* Role color mixing percentages */
    --role-bg-mix: 8%;          /* how much role color to mix with card bg */

    /* =========================================================================
       Z-INDEX LAYERS
       ========================================================================= */

    --z-corner-banner: 10;
    --z-fork-banner: 11;
    --z-role-banner: 10;
    --z-filter-panel: 500; /* Must be higher than family card hover z-index (200) */

    /* =========================================================================
       THEME SYSTEM - Project Card Themes
       ========================================================================= */

    /* Adopt Me theme */
    --adopt-gradient-start: #8b5cf6;
    --adopt-gradient-end: #a78bfa;
    --adopt-hover: #6d28d9;

    /* Update Me theme - darkened for better contrast with white text */
    --update-gradient-start: #d97706;
    --update-gradient-end: #f59e0b;
    --update-hover: #b45309;

    /* Avoid Me theme */
    --avoid-stripe-yellow: #fbbf24;
    --avoid-stripe-black: #000000;
    --avoid-hover: #dc2626;
    --avoid-stripe-width: 20px;
    --avoid-card-opacity: 0.6;
    --avoid-tape-opacity: 0.25;
    --avoid-tape-width: 60px;

    /* Family theme - stacked cards */
    --family-overlap: 0.15;              /* 15% overlap for horizontal stacking */
    --family-overlap-mobile: 0.25;       /* 25% overlap for vertical stacking on mobile */
    --family-mobile-horizontal-offset: 40px; /* horizontal offset between cards in mobile vertical stack */
    --family-mobile-touch-spacing: 60px; /* vertical spacing for easy touch targets on mobile */
    --family-transition: 0.3s ease-out;  /* smooth transition for hover effects */
    --family-z-base: 20;                 /* base z-index for family cards */
    --card-min-height: 400px;            /* minimum height for family cards */
    --card-spacing: 1rem;                /* spacing around family stacks */

    /* Holiday decorations */
    --holiday-garland-height: 8px;
    --holiday-popout-size: 2rem;
    --holiday-animation-duration: 5s;
}

/* System default: dark mode variables */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e5e7eb;
        --border-color: #2a2f3a;
        --background-light: #1f2730;

        /* Wire dark visual system to the centralized dark orange variants */
        --orange: var(--orange-base-dark);
        --orange-light: var(--orange-light-base-dark);
        --orange-solid: var(--orange-solid-dark);
        /* In dark mode the active palette should follow the dark orange values */
        --orange-active: var(--orange);
        --orange-active-light: var(--orange-light);
        --orange-active-solid: var(--orange-solid);
        --orange-top-active: color-mix(in oklab, var(--orange-active-solid) 20%, white);
        --orange-bottom-active: color-mix(in oklab, var(--orange-active-solid) 85%, black 10%);

        --page-bg: #0b0f14;
        --card-bg: #111827;
        --muted-bg: #111827;
        --control-bg: #1f2937;
        --control-hover-bg: #374151;
        --control-border: #334155;
        --control-text: #e5e7eb;
    }
}

/* Forced overrides via attribute on <html> */
:root[data-theme="light"] {
    --text-color: #111;
    --border-color: #eee;
    --background-light: #eee;

    /* Explicit light theme maps back to the centralized light base values */
    --orange: var(--orange-base);
    --orange-light: var(--orange-light-base);
    --orange-solid: var(--orange-solid-base);
    /* Make active pills in light mode use the dark-mode active colors */
    --orange-active: var(--orange-base-dark);
    --orange-active-light: var(--orange-light-base-dark);
    --orange-active-solid: var(--orange-solid-dark);
    --orange-top-active: color-mix(in oklab, var(--orange-active-solid) 20%, white);
    --orange-bottom-active: color-mix(in oklab, var(--orange-active-solid) 85%, black 10%);

    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --muted-bg: #f6f7f9;
    --control-bg: #f1f5f9;
    --control-hover-bg: #e2e8f0;
    --control-border: #cbd5e1;
    --control-text: #0f172a;
}

:root[data-theme="dark"] {
    --text-color: #e5e7eb;
    --border-color: #2a2f3a;
    --background-light: #1f2730;

    /* Explicit dark theme maps to the centralized dark base values */
    --orange: var(--orange-base-dark);
    --orange-light: var(--orange-light-base-dark);
    --orange-solid: var(--orange-solid-dark);
    /* Ensure active palette follows dark values as well */
    --orange-active: var(--orange);
    --orange-active-light: var(--orange-light);
    --orange-active-solid: var(--orange-solid);
    --orange-top-active: color-mix(in oklab, var(--orange-active-solid) 20%, white);
    --orange-bottom-active: color-mix(in oklab, var(--orange-active-solid) 85%, black 10%);

    --page-bg: #0b0f14;
    --card-bg: #111827;
    --muted-bg: #111827;
    --control-bg: #1f2937;
    --control-hover-bg: #374151;
    --control-border: #334155;
    --control-text: #e5e7eb;
}

/* =========================================================================
   ROLE COLOR SYSTEM - Scoped Variables
   Define role-specific colors once, then reference generically
   ========================================================================= */

.author {
    --current-role-solid: var(--author-solid);
    --current-role-color: var(--author-color);
}

.maintainer {
    --current-role-solid: var(--maintainer-solid);
    --current-role-color: var(--maintainer-color);
}

.contributor {
    --current-role-solid: var(--contributor-solid);
    --current-role-color: var(--contributor-color);
}

/* =========================================================================
   BASE STYLES
   ========================================================================= */

body {
    font-family: var(--font-family-base), sans-serif;
    max-width: var(--page-max-width);
    margin: var(--page-margin-y) auto;
    padding: 0 var(--page-padding-x);
    color: var(--text-color);
    background: var(--page-bg);
}

header {
    display: flex;
    align-items: center;
    /* Center header content (nav) while keeping the theme toggle visually at the right.
       Use position:relative as a positioning context for the absolutely positioned
       .theme-toggle so it remains accessible and visually aligned. */
    justify-content: center;
    position: relative;
    margin-bottom: var(--header-margin-bottom);
}

.theme-toggle {
    /* Keep the toggle visually at the right edge of the header while the nav
       is centered. Use absolute positioning and vertical centering. */
    position: absolute;
    right: var(--page-padding-x);
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    background: var(--control-bg);
    color: var(--control-text);
    border: var(--border-width-thin) solid var(--control-border);
    border-radius: var(--border-radius-pill);
    padding: var(--toggle-padding);
    font-size: var(--font-size-base);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-glow-md) var(--orange-light);
}
.theme-toggle:hover {
    background: var(--control-hover-bg);
}

/* Responsive: on small viewports keep original flow so the absolute toggle doesn't overlap centered content */
@media (max-width: 36rem) {
    header {
        justify-content: space-between;
    }
    .theme-toggle {
        position: static;
        right: auto;
        top: auto;
        transform: none;
        margin-left: 0.5rem;
    }
}

h1 {
    border-bottom: var(--border-width-thin) solid var(--border-color);
    padding-bottom: var(--h1-padding-bottom);
    display: flex;
    align-items: center;   /* center filters and action buttons vertically */
    justify-content: center; /* center the title row and its pills */
    column-gap: var(--h1-column-gap);        /* space between title text and first pill */
    row-gap: var(--h1-row-gap);         /* vertical gap when pills wrap to the next line */
    flex-wrap: wrap;         /* allow pills to drop below the title when needed */
}

/* Keep the visual baseline alignment for the title text while allowing
   other h1 children (filters, buttons) to center vertically. */
.title-text {
    align-self: baseline;
    display: inline-block; /* ensure align-self behaves predictably */
}

h2 {
    margin-top: var(--h2-margin-top);
    margin-bottom: var(--h2-margin-bottom);
}

li {
    margin: 0;
}

a.text-link {
    display: inline-block;
    text-decoration: underline;
    color: var(--orange-solid);
}

.link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    box-shadow: var(--shadow-glow-md) var(--orange);
    background-color: var(--orange);
    padding: var(--icon-padding-md);
    margin-right: var(--icon-margin-right);
}

.min-language {
    display: inline-flex;
    align-items: center;
    padding-top: 0.15rem;

    .language {
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
        padding: var(--icon-padding-sm);
        margin-right: var(--icon-margin-right-sm);
        margin-bottom: var(--icon-margin-bottom-sm);
        box-shadow: none;
        background-color: var(--transparent);
    }
}

a {
    text-decoration: none;
    color: inherit;
}

/* Prevent wrapping inside all buttons and button-like elements */
button,
.tag-link {
    white-space: nowrap;
}

.project-list {
    display: flex;
    place-content: center;
    flex-wrap: wrap;
    gap: var(--card-gap);
    list-style: none;
    padding: 0;
}

.card {
    width: var(--card-width);
    box-sizing: border-box;
    border: var(--border-width-thin) solid var(--border-color);
    padding: var(--card-padding);
    /* Ensure content clears the horizontal role bar at the top */
    padding-top: calc(var(--card-padding) + var(--rolebar-height));
    /* Ensure content clears the horizontal stats bar at the bottom (when present) */
    padding-bottom: calc(var(--card-padding) + var(--rolebar-height));
    border-radius: var(--border-radius-sm);
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    /* Prevent cards from stretching to match taller items in the same flex row */
    align-self: flex-start;

    .tag {
        display: inline-block;
        /* inner pill sits visually above the host pill */
        background-color: var(--tag-inner-bg);
        border-radius: var(--border-radius-pill);
        padding: var(--tag-padding-card);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-normal);
        margin: var(--tag-card-margin);
        /* subtle glow and a thin left edge to separate from the outer pill */
        box-shadow: var(--shadow-glow-md) rgba(0,0,0,0.04), 0 0 5px var(--orange-light);
        border-left: var(--border-width-tag-edge) solid var(--tag-inner-edge);
    }

    /* Consolidated: role-colored tags using scoped variables */
    .tag:is(.author, .maintainer, .contributor) {
        box-shadow: 0 0 5px var(--current-role-color);
    }
}

/* Full-width card variant for aspect="wide" projects */
.card.card-wide {
    /* Span up to three normal card columns including the two internal column gaps */
    width: min(100%, calc((var(--card-width) * 3) + (var(--card-gap-col, 1rem) * 2)));
    flex: 0 0 auto; /* don't let flexbox stretch or shrink beyond the set width */
}

/* Project card positioning for corner banners */
.card {
    position: relative;
    overflow: hidden;
}

/* Absolute + rotate recipe anchored to the card */
.card .corner-banner {
    position: absolute;
    width: var(--ribbon-width);
    padding: var(--ribbon-padding);
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-corner-banner);
    color: #fff;
    text-decoration: none;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    white-space: nowrap;
    box-shadow: var(--shadow-corner-banner);
    z-index: var(--z-corner-banner);
    /* Center content precisely */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Fork/Clone (closest to corner) */
.card .banner-fork {
    /* Dedicated positional offsets (inward movement with positive values) */
    top: calc(var(--ribbon-top) + var(--ribbon-top-offset));
    right: calc(var(--ribbon-right) + var(--ribbon-right-offset));

    /* Text padding along the ribbon length (does not change position) */
    padding-left: var(--corner-gap);
    padding-right: var(--corner-gap);

    background: linear-gradient(135deg, #1e5799 0%, #2989d8 50%, #207cca 100%);
    z-index: var(--z-fork-banner);
    color: var(--white); /* ensure readable by default */
    transition: background var(--transition-medium), color var(--transition-medium);
}

/* Default: show the word "Me" and hide the emoji; small spacing for emoji when shown */
.card .banner-fork .fork-me-emoji {
    display: none;
    margin-left: 0.25rem;
}
.card .banner-fork .fork-me-text {
    display: inline;
}

/* Hover & keyboard-focus: switch visual style and swap text->emoji */
.card .banner-fork:hover,
.card .banner-fork:focus,
.card .banner-fork:focus-visible {
    background: #000 !important; /* black background on hover/focus */
    color: #ffd600 !important;    /* yellow text on hover/focus */
    text-decoration: none;
}
.card .banner-fork:hover .fork-me-text,
.card .banner-fork:focus .fork-me-text,
.card .banner-fork:focus-visible .fork-me-text {
    display: none;
}
.card .banner-fork:hover .fork-me-emoji,
.card .banner-fork:focus .fork-me-emoji,
.card .banner-fork:focus-visible .fork-me-emoji {
    display: inline;
}

/* =========================================================================
   HORIZONTAL BANNERS - Shared base styles for top (role) and bottom (stats)
   ========================================================================= */

/* Base styles for all horizontal banners */
.card .horizontal-banner {
    /* Positioning and size */
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--rolebar-height);

    /* NO TRANSFORMS - keep it flat and horizontal */
    transform: none;
    transform-origin: initial;
    white-space: normal;

    /* Typography */
    font-size: 0.9rem;
    line-height: var(--rolebar-height);

    /* Display */
    display: flex;
    align-items: center;

    /* Layering */
    z-index: var(--z-role-banner);
}

/* Content label styles (used by both role-label and stats-label) */
.card .horizontal-banner .role-label,
.card .horizontal-banner .stats-label,
.card .horizontal-banner .role-start {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Link styles */
.card .horizontal-banner a {
    color: inherit;
    text-decoration: none;
}

.card .horizontal-banner a:hover {
    text-decoration: underline;
}

/* Role-specific background and shadow for all horizontal banners */
.card:is(.author, .maintainer, .contributor) .horizontal-banner {
    background: color-mix(in oklab, var(--current-role-solid) 8%, var(--card-bg));
    color: var(--text-color);
}

/* Left accent stripe for all horizontal banners */
.card .horizontal-banner::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 6px;
    border-radius: 3px;
    background: transparent;
    z-index: 11;
}

.card:is(.author, .maintainer, .contributor) .horizontal-banner::before {
    background: var(--current-role-solid);
    opacity: 0.12;
}

/* =========================================================================
   ROLE BANNER - Top banner specific styles
   ========================================================================= */

.top-anchor.role {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-role-banner);
}

.card .banner-role {
    /* Position at top */
    top: 0;

    /* Extra right padding to avoid fork ribbon overlap */
    padding: 0 calc(0.75rem + var(--fork-notch)) 0 0.75rem;

    /* Layout: label left, since-year right */
    justify-content: space-between;

    /* Shape: rounded top corners */
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);

    /* Bold text */
    font-weight: 600;
}

/* Role banner specific shadow (from top) */
.card:is(.author, .maintainer, .contributor) .banner-role {
    box-shadow: inset 0 -6px 12px -8px var(--current-role-color);
}

/* =========================================================================
   STATS BANNER - Bottom banner specific styles
   ========================================================================= */

.bottom-anchor.stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-role-banner);
}

.card .banner-stats {
    /* Position at bottom */
    bottom: 0;

    /* Padding */
    padding: 0 0.75rem;

    /* Layout: centered */
    justify-content: center;

    /* Shape: rounded bottom corners */
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}

/* Stats banner specific shadow (from bottom) */
.card:is(.author, .maintainer, .contributor) .banner-stats {
    box-shadow: inset 0 6px 12px -8px var(--current-role-color);
}

/* Stats banner inline items */
.card .banner-stats .stat-item {
    display: inline;
}

/* =========================================================================
   THEME: ADOPT ME
   Banner replacement theme for projects available for adoption
   ========================================================================= */

.card .banner-adopt {
    /* Dedicated positional offsets (inward movement with positive values) */
    top: calc(var(--ribbon-top) + var(--ribbon-top-offset));
    right: calc(var(--ribbon-right) + var(--ribbon-right-offset));

    /* Text padding along the ribbon length (does not change position) */
    padding-left: var(--corner-gap);
    padding-right: var(--corner-gap);

    background: linear-gradient(135deg, var(--adopt-gradient-start) 0%, var(--adopt-gradient-end) 100%);
    z-index: var(--z-fork-banner);
    color: var(--white); /* ensure readable by default */
    transition: background var(--transition-medium), color var(--transition-medium);
}

/* Default: show "Me" text, hide emoji */
.card .banner-adopt .adopt-emoji {
    display: none;
    margin-left: 0.25rem;
}

.card .banner-adopt .adopt-text {
    display: inline;
}

/* Hover & focus: darker purple background with white text, swap to emoji */
.card .banner-adopt:hover,
.card .banner-adopt:focus,
.card .banner-adopt:focus-visible {
    background: var(--adopt-hover) !important;
    color: var(--white) !important;
    text-decoration: none;
}

.card .banner-adopt:hover .adopt-text,
.card .banner-adopt:focus .adopt-text,
.card .banner-adopt:focus-visible .adopt-text {
    display: none;
}

.card .banner-adopt:hover .adopt-emoji,
.card .banner-adopt:focus .adopt-emoji,
.card .banner-adopt:focus-visible .adopt-emoji {
    display: inline;
}

/* =========================================================================
   THEME: UPDATE ME
   Banner replacement theme for stale projects that need updates
   ========================================================================= */

.card .banner-update {
    /* Dedicated positional offsets (inward movement with positive values) */
    top: calc(var(--ribbon-top) + var(--ribbon-top-offset));
    right: calc(var(--ribbon-right) + var(--ribbon-right-offset));

    /* Text padding along the ribbon length (does not change position) */
    padding-left: var(--corner-gap);
    padding-right: var(--corner-gap);

    background: linear-gradient(135deg, var(--update-gradient-start) 0%, var(--update-gradient-end) 100%);
    z-index: var(--z-fork-banner);
    color: var(--white); /* ensure readable by default */
    transition: background var(--transition-medium), color var(--transition-medium);

    /* Subtle pulse animation to draw attention */
    animation: subtle-pulse 2s ease-in-out infinite;
}

/* Pulse animation - subtle opacity shift */
@keyframes subtle-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Default: show "Me" text, hide emoji */
.card .banner-update .update-emoji {
    display: none;
    margin-left: 0.25rem;
}

.card .banner-update .update-text {
    display: inline;
}

/* Hover & focus: darker amber background with white text, swap to emoji, stop animation */
.card .banner-update:hover,
.card .banner-update:focus,
.card .banner-update:focus-visible {
    background: var(--update-hover) !important;
    color: var(--white) !important;
    text-decoration: none;
    animation: none; /* Stop pulse on interaction */
}

.card .banner-update:hover .update-text,
.card .banner-update:focus .update-text,
.card .banner-update:focus-visible .update-text {
    display: none;
}

.card .banner-update:hover .update-emoji,
.card .banner-update:focus .update-emoji,
.card .banner-update:focus-visible .update-emoji {
    display: inline;
}

/* Respect reduced motion preference - disable pulse animation */
@media (prefers-reduced-motion: reduce) {
    .card .banner-update {
        animation: none;
    }
}

/* =========================================================================
   ARCHIVED PROJECTS - Caution Tape X Overlay
   Applies to any project marked as archived, regardless of theme
   Can be used with family stacks and any other theme
   ========================================================================= */

/* Darken archived cards to indicate deprecated status (without transparency) */
.card.archived {
    filter: brightness(0.75);
    position: relative;
}

/* Caution tape X overlay - diagonal stripes from corners */
.card.archived::before,
.card.archived::after {
    content: '';
    position: absolute;
    width: var(--avoid-tape-width);
    height: 141.4%; /* sqrt(2) * 100% to cover diagonal */
    top: 50%;
    left: 50%;
    opacity: var(--avoid-tape-opacity);
    pointer-events: none;

    /* Caution tape pattern - diagonal yellow/black stripes perpendicular to tape direction */
    background: repeating-linear-gradient(
            -45deg,
            var(--avoid-stripe-yellow),
            var(--avoid-stripe-yellow) var(--avoid-stripe-width),
            var(--avoid-stripe-black) var(--avoid-stripe-width),
            var(--avoid-stripe-black) calc(var(--avoid-stripe-width) * 2)
    );
}

/* Top-left to bottom-right diagonal */
.card.archived::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Top-right to bottom-left diagonal */
.card.archived::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================================================================
   PHASE 4: FAMILY THEME - Stacked Cards Layout
   ========================================================================= */

/* Family stack container - holds multiple cards that overlap horizontally */
.card-family-stack {
    position: relative;
    display: inline-block;
    list-style: none;
    margin: var(--card-spacing);
    /* Width calculation: first card + (n-1 cards × overlap amount) */
    /* This will be set dynamically by JavaScript based on family size */
    min-width: var(--card-width);
    min-height: var(--card-min-height);
    /* Prevent family stacks from forcing other cards in the same flex row to stretch */
    align-self: flex-start;
}

/* Hide adoptable-family and archived-family by default */
.card-family-stack[data-family-id="adoptable-family"],
.card-family-stack[data-family-id="archived-family"] {
    display: none;
}

/* Cards within a family stack */
.card-family-stack .card-in-family {
    position: absolute;
    top: 0;
    left: 0; /* Left-to-right stacking */
    right: auto;
    width: var(--card-width);
    min-height: var(--card-min-height);
    transition: transform var(--family-transition);
    cursor: pointer;
    /* Create a new stacking context to contain corner banners */
    isolation: isolate;
    /* Ensure consistent box model */
    box-sizing: border-box;
    /* Prevent any vertical baseline shifting */
    vertical-align: top;
    /* Position and z-index will be set dynamically by JavaScript */
    /* Stack orientation: left to right (top card on left) */
}

/* Subtle visual depth for cards in the stack */
.card-family-stack .card-in-family[data-family-index="3"],
.card-family-stack .card-in-family[data-family-index="4"] {
    opacity: 0.95;
}

/* For families with 6+ cards, JavaScript will set opacity dynamically */

/* Hover state - no movement, handled by JavaScript overlay */
.card-family-stack .card-in-family:hover {
    cursor: pointer;
}

/* Focus state for keyboard navigation - no movement */
.card-family-stack .card-in-family:focus-within {
    cursor: pointer;
}

/* Hover overlay - darkens the visible area of the card */
.card-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card-family-stack .card-in-family:hover .card-hover-overlay {
    opacity: 1;
}

/* Active card should not show hover overlay */
.card-family-stack .card-in-family.active-card:hover .card-hover-overlay {
    opacity: 0;
}

/* "Click to View" message - appears on hover */
.card-click-message {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 11;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;

    /* Styling similar to family-badge */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(168, 85, 247, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Active card should not show "Click to View" message */
.card-family-stack .card-in-family.active-card:hover .card-click-message {
    opacity: 0;
}


.card-family-stack .card-in-family:hover .card-click-message {
    opacity: 1;
}

/* Active card indicator - no visual change except possibly a subtle highlight */
.card-family-stack .card-in-family.active-card {
    /* The active card is the one currently on top of the stack */
}

/* Family badge - displayed on each card in the family */
.family-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
    border-left: 3px solid rgba(139, 92, 246, 0.5);
    border-radius: 4px;
    font-size: 0.875rem;
}

.family-badge .family-icon {
    font-size: 1.2rem;
}

.family-badge .family-label {
    font-weight: 600;
    color: var(--text-color);
}

.family-badge .family-count {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 0.8rem;
}

/* Mobile responsive - switch to vertical stacking on small screens */
@media (max-width: 768px) {
    .card-family-stack {
        position: relative;
        width: 100% !important; /* Override JS-set width */
        min-width: auto;
        /* Height will be calculated by JavaScript for vertical stacking */
        min-height: auto;
    }

    .card-family-stack .card-in-family {
        position: absolute !important;
        /* Width adjusted for mobile - leave room for horizontal offset */
        width: calc(100% - var(--family-mobile-horizontal-offset)) !important;
        max-width: var(--card-width);
        /* Left position and top position will be set by JavaScript */
        /* to create vertical stack with horizontal offsets */
    }

    /* Hover effects adjusted for mobile - no movement */
    .card-family-stack .card-in-family:hover,
    .card-family-stack .card-in-family:focus-within {
        cursor: pointer;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .card-family-stack .card-in-family {
        transition: none;
    }

    .card-family-stack .card-in-family:hover,
    .card-family-stack .card-in-family:focus-within {
        transform: none;
    }
}

/* Hide cartain tags inside project cards but keep them in the DOM for filtering.
   This uses an "sr-only" / visually-hidden pattern so JS and assistive tech can
   still access the text if needed. Can be added to any tag to hide it visually while
   keeping it available to scripts. Use on .tag elements: <span class="tag foo filter-hidden"> */
.tag.filter-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */

/* Consolidated: standalone role classes with scoped variables
   These provide glows for elements that have role classes but aren't nested */
:is(.author, .maintainer, .contributor) {
    box-shadow: 0 0 5px var(--current-role-color);
}

/* Projects container */
.projects {
    max-width: none;
}

/* Center the footer content and constrain to the same main-column width
   so it aligns with the header and main content blocks. */
footer {
    max-width: var(--page-max-width);
    margin: var(--page-margin-y) auto 0; /* top/bottom margin: match body spacing, center horizontally */
    padding: 0 var(--page-padding-x);
    text-align: center;
}

/* Ensure pills don't use any upward shift by default (helps small viewports) */
h1 .tag-list {
    /* Slight upward nudge to visually align the filter pills with the
       title baseline. Use a very small translation so touch targets
       and layout don't change. */
    transform: translateY(-0.12rem);
    margin-left: 0;
    align-self: center; /* keep vertically centered in the h1 row */
}

/* =========================================================================
   TAG-LIST SYSTEM (Filter Pills)
   ========================================================================= */

.tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--tag-list-gap);
    list-style: none;
    padding: 0;

    > * {
        margin: 0;
    }

    .tag {
        display: inline-block;
        background-color: var(--tag-inner-bg);
        border-radius: var(--border-radius-pill);
        padding: var(--tag-padding-filter);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-normal);
        margin-left: var(--tag-margin-inactive-left);
        margin-right: var(--tag-margin-inactive-right);
        border: var(--border-width-tag) solid var(--transparent);
        /* keep the outer orange glow but make inner subtle to distinguish layers */
        box-shadow: var(--shadow-glow-md) rgba(0,0,0,0.04), 0 0 5px var(--orange-light);
        transition: margin-left 0.3s ease, margin-right 0.3s ease;
    }

    /* Consolidated: role-colored tags in tag-list using scoped variables */
    .tag:is(.author, .maintainer, .contributor) {
        box-shadow: 0 0 5px var(--current-role-color);
    }

    .tag-link {
        /* Extend the shared pill-outer class styles */
        /* (all base pill styling now comes from .pill-outer above) */

        /* Let the browser handle vertical panning natively: improves
           touch gesture detection and prevents accidental taps during
           vertical scroll. This is intentionally set on the source CSS
           only; do not modify generated files. */
        touch-action: pan-y;
    }

    /* Remove duplicate active styles - now handled by .pill-outer.active */
}

/* Shared pill outer container styles - applies to both .tag-link and .summary-control */
.pill-outer {
    display: inline-flex;
    align-items: center;
    background-color: var(--tag-outer-bg);
    border-radius: var(--border-radius-pill);
    box-shadow: 0 0 5px var(--orange-light);
    text-decoration: none;
    color: inherit;
    position: relative;
    box-sizing: border-box;
    /* Always reserve space for count to prevent size jump - NO TRANSITION */
    padding-right: var(--count-reserve);

    /* two-tone border using layered backgrounds and background-clip */
    border: var(--border-width-tag) solid transparent;
    background-image: linear-gradient(var(--tag-outer-bg), var(--tag-outer-bg)), linear-gradient(to bottom, var(--orange-top), var(--orange-bottom));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Shared active pill outer container styles */
.pill-outer.active {
    background-image: linear-gradient(var(--orange-active), var(--orange-active)), linear-gradient(to bottom, var(--orange-top-active), var(--orange-bottom-active));
    color: var(--white);
    /* Maintain same padding-right (already set on base .pill-outer) */
}

/* Role-colored pill outer containers */
.pill-outer:is(.author, .maintainer, .contributor) {
    box-shadow: 0 0 5px var(--current-role-color);
}

/* Role-colored active pills */
.pill-outer:is(.author, .maintainer, .contributor).active {
    background-color: var(--current-role-color);
}

/* Shared inner tag styles when parent pill is active */
.pill-outer.active .tag {
    background-color: var(--orange-active);
    color: var(--white);
    border: var(--border-width-tag) solid var(--orange-active-solid);
    margin-left: var(--tag-margin-active-left);
    margin-right: var(--tag-margin-active-right);
}

/* Role-colored active inner tags */
.pill-outer:is(.author, .maintainer, .contributor).active .tag:is(.author, .maintainer, .contributor) {
    background-color: var(--current-role-color);
    color: var(--white);
    border: var(--border-width-tag) solid var(--current-role-solid);
}

/* Shared count badge positioning and transitions */
.pill-outer .count {
    position: absolute;
    top: var(--count-top);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    padding: var(--count-padding);
    color: var(--text-color);
    /* Do NOT include transform here — only summary controls use the horizontal nudge. */
    transition: opacity var(--transition-fast), z-index 0s var(--transition-fast);
}

.pill-outer .count.left {
    left: 0;
    opacity: 1;
    z-index: 1;
}

.pill-outer .count.right {
    right: 0;
    opacity: 0;
    z-index: -1;
    /* No transform nudge here — kept scoped to summary controls only. */
}

/* Note: padding-right is now applied to ALL .pill-outer elements to prevent layout shift.
   The padding-right rule below is no longer needed but kept for documentation. */
/* .pill-outer:not(.summary-control).active {
    padding-right: var(--count-reserve);
    transition: padding-right var(--transition-fast);
} */

/* Scoped nudge for right count only inside filter details' summary controls */
.filters > details > summary .summary-control .count.right {
    /* maintain the same baseline coordinates but nudge visually so the
       number sits between the inner pill and the caret without moving the caret */
    right: 0;
    opacity: 0;
    z-index: -1;
    transform: translateX(var(--summary-count-nudge));
    transition: opacity var(--transition-fast), transform var(--transition-fast), z-index 0s var(--transition-fast);
}

/* Swap counts when active */
.pill-outer.active .count.left {
    opacity: 0;
    z-index: -1;
}

.pill-outer.active .count.right {
    opacity: 1;
    color: var(--white);
    z-index: 1;
}

/* =========================================================================
   FILTERS CONTAINER & PANELS
   ========================================================================= */

/* Filters container: lay out the details summaries in a single horizontal row */
.filters {
    position: relative; /* positioning context for absolute panels */
    display: flex;
    gap: var(--filters-gap);
    align-items: flex-start;
    justify-content: center; /* center filter details/menus */
    /* keep filters visually grouped from surrounding content */
    margin-bottom: var(--filters-margin-bottom);
    overflow: visible; /* ensure overlays and shadows are visible */
    /* Allow the filters row to wrap to multiple lines on narrow viewports so it
       doesn't push the page horizontally. This mirrors the behavior used in the
       h1 role filters and improves mobile UX. */
    flex-wrap: wrap;
}

/* Each <details> becomes a compact flex item so its <summary> sits inline in the row */
.filters > details {
    /* size to content, allow shrinking so long summaries won't force overflow */
    flex: 0 1 auto;
    min-width: 0; /* enable flex children to shrink properly */
    position: static;
}

/* Hide the default disclosure marker for filter details and keep summary inline */
.filters > details > summary {
    list-style: none;
    display: inline-flex;       /* keep summary controls inline horizontally */
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.filters > details > summary::-webkit-details-marker,
.filters > details > summary::marker {
    display: none;
}

/* The dropdown panel: a tag-list inside the details becomes an overlay when open.
   By default it's hidden; when the details is open, CSS makes it visible. */
.filters > details > .tag-list {
    display: none; /* hidden by default */
    position: absolute; /* position against the nearest positioned ancestor (.filters) */
    top: calc(100% + var(--filter-panel-offset));
    left: 0; /* align to the left edge of the .filters container */
    z-index: var(--z-filter-panel);
    background: var(--card-bg);
    border: var(--border-width-thin) solid var(--border-color);
    border-radius: var(--border-radius-panel);
    padding: var(--filter-panel-padding);
    box-shadow: var(--shadow-panel);
    /* Pane sizing: use viewport percentage so panels size consistently across the row */
    width: var(--filter-panel-width);
    max-width: 90vw;            /* ensure it never overflows the viewport */
    min-width: max-content;     /* preserve natural minimum for the tag grid */

    /* Grid layout for the filter tags inside the panel */
    grid-template-columns: repeat(auto-fit, minmax(var(--filter-panel-col-min), 1fr));
    gap: var(--filter-panel-gap);
    max-height: var(--filter-panel-max-height);
    overflow-y: auto;
}

/* Right-aligned variant: used when JS decides panel would overflow the right edge */
.filters > details.align-right > .tag-list {
    left: auto;
    right: 0;
}

/* Show overlay when the details element is open */
.filters > details[open] > .tag-list {
    display: grid;
}

/* On very small viewports, reduce the min column width so at least two columns can fit */
@media (max-width: 36rem) {
    .filters > details > .tag-list {
        grid-template-columns: repeat(auto-fit, minmax(var(--filter-panel-col-min-mobile), 1fr));
        width: 90vw; /* use most of viewport on small screens for usability */
    }
}

/* Ensure the decorative summary-control caret and spacing remain as before */
.filters > details > summary .summary-control {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Reserve a small amount of space on the right side so the caret doesn't overlap the right count badge. */
    padding-right: var(--summary-control-pad-right);
}

/* Add caret indicator after the summary-control content */
.filters > details > summary .summary-control::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: var(--caret-size) solid transparent;
    border-right: var(--caret-size) solid transparent;
    border-top: var(--caret-size) solid currentColor;
    transition: transform var(--transition-caret);
    /* gap between the caret and preceding content (tunable) */
    margin-left: var(--summary-caret-gap);
}

/* Rotate caret when open */
.filters > details[open] > summary .summary-control::after {
    transform: rotate(180deg);
}

/* When any tag inside a details is active, the summary-control inherits the
   active pill styling via the shared .pill-outer.active classes. The JS adds
   .active to .summary-control when has-active-filter is set on <details>. */

/* Ensure caret color follows the summary-control color (white when active) */
.filters > details.has-active-filter > summary .summary-control::after {
    border-top-color: currentColor;
}

/* Remove focus treatment on summary controls to avoid square/cornered rings that
   can be clipped by scrollers. This intentionally clears both outline and box-shadow
   for focused summary elements (active and non-active). */
.filters > details > summary:focus,
.filters > details > summary:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Also ensure any focus rules targeting the active summary-control don't add a
   glow — keep active visuals but remove focus-generated box-shadow. */
.filters > details.has-active-filter > summary:focus-visible .summary-control,
.filters > details.has-active-filter > summary:focus .summary-control {
    outline: none;
    box-shadow: none;
}

/* Fine-tune count badge positioning for minimum language version buttons.
   The inline-flex container with padding-top shifts the baseline, so we need
   to compensate by moving the counts down to align with the text. */
.pill-outer.min_lang-link .count,
.pill-outer.min_lang_link .count {
    top: 0.65rem;
}

/* Increase the nav title and intro paragraph size as requested */
header nav,
header nav a {
    /* Use percentage to double whatever the inherited size is */
    font-size: 150%;
    line-height: 1;
}

/* Layout & spacing for nav anchors: make nav an inline-flex row and add gap
   so multiple anchors have consistent spacing between them. */
header nav {
    display: inline-flex;
    align-items: center;
    gap: 1rem; /* spacing between anchors */
}

/* Ensure any image inside the nav matches the link line-height (1 * font-size).
   Using 1em ties the image height to the current font-size, which in combination
   with line-height:1 makes the image visually match the link height. */
header nav img,
header nav a img {
    height: 1em;
    width: auto;
    vertical-align: middle; /* keep baseline alignment with text */
}

.intro {
    /* Double the intro paragraph text size */
    font-size: 150%;
    line-height: 1.25;
}

/* Prevent the doubled sizes from overwhelming very small screens */
@media (max-width: 36rem) {
    header nav,
    header nav a,
    .intro {
        font-size: 120%;
    }
    /* Ensure nav images remain proportional on small screens */
    header nav img,
    header nav a img {
        height: 1em; /* still tied to the (reduced) font-size */
    }
    /* Slightly reduce the gap on small viewports so it fits better */
    header nav {
        gap: 0.6rem;
    }
}

/* =========================================================================
   LANGUAGE-SPECIFIC STYLES
   ========================================================================= */

/* Project language icons in card h2 */
.project-language .language {
    height: var(--icon-size-project-lang);
}

/* Bash icon: add diffuse glow behind the icon for visibility on dark backgrounds
   Using filter: drop-shadow creates a glow that follows the SVG shape and appears
   behind it. Multiple drop-shadows with increasing blur create a diffuse effect. */
.language.bash {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.1));
}

/* =========================================================================
   BADGE / SHIELD (img.shields.io) DARK-MODE TREATMENT
   ========================================================================= */

:root {
    /* Tunable filter stack for dark-mode rendering of external shields
       Primary knob: --shield-darkness (used for brightness())
       Optional knobs: --shield-contrast and --shield-saturate
       Tip: Increase --shield-darkness slightly (>1) to lighten near-black backgrounds
            or reduce contrast to better match a dark-but-not-black page background. */
    --shield-darkness: 1.05;   /* brightness multiplier (lower = darker, higher = lighter) */
    --shield-contrast: 0.75;   /* overall contrast; lower can soften harsh blacks */
    --shield-saturate: 1.15;   /* color saturation adjustment */

    /* Compose the full filter from the knobs above. Keep the invert+rotate base to adapt
       light-only shields to dark contexts, then fine-tune via variables. */
    --shield-filter-dark: invert(1)
    hue-rotate(180deg)
    saturate(var(--shield-saturate))
    contrast(var(--shield-contrast))
    brightness(var(--shield-darkness));
}

/* Smoothly animate when the theme toggles */
img[src*="img.shields.io"] {
    transition: filter 600ms ease, opacity 600ms ease;
}

/* System dark mode */
@media (prefers-color-scheme: dark) {
    img[src*="img.shields.io"] {
        filter: var(--shield-filter-dark);
    }
}

/* Explicit dark theme override via data-theme */
:root[data-theme="dark"] img[src*="img.shields.io"] {
    filter: var(--shield-filter-dark);
}

/* Explicit light theme override clears any filter */
:root[data-theme="light"] img[src*="img.shields.io"] {
    filter: none;
}

/* Opt-out: add class="no-dark-filter" to skip adjustments for specific shields */
img[src*="img.shields.io"].no-dark-filter {
    filter: none !important;
}