@font-face {
    font-family: universalSans;
    src: url(/fonts/UniversalSans_Text_400.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "universalSans Fallback";
    src: local(Arial);
    ascent-override: 89.92%;
    descent-override: 22.73%;
    line-gap-override: 0%;
    size-adjust: 105.67%;
}

:root {
    --color-jet: 0 0% 4%;
    --color-ivory: 40 18% 97%;
    --primary: var(--color-jet);
    --card: var(--color-ivory);
    --font-universal-sans: universalSans, "universalSans Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --color-sunset: 22 100% 51.6%;
    --category-sidebar-min-height: calc(100vh + 900px);
    /*
     * Uniform filter rail — same width for every button (dashboard style).
     * Wide enough for longest one-line label (Managerial Accounting).
     * Column is wider than the buttons so they sit centered between the
     * left margin rail and the filter/video vertical guide.
     */
    --filter-button-width: 13rem;
    --library-filter-gutter-x: 0.75rem;
    --category-sidebar-width: calc(var(--filter-button-width) + 2 * var(--library-filter-gutter-x));
    --video-library-gap: 1rem;
    /* YouTube search ytd-video-renderer density — ~16px between lockups */
    --video-card-gap: 16px;
    --video-card-pad-y: 0px;
    --video-card-pad-x: 0px;
    --video-library-divider-color: rgba(66, 71, 112, 0.09);
    --video-library-guide-solid: rgba(66, 71, 112, 0.06);
    --video-library-guide-dashed: rgba(66, 71, 112, 0.09);
    --video-directory-max-width: none;

    /*
     * x.ai docs sidebar tokens (docs.x.ai)
     * --fg-muted: neutral50 · --primary: neutral2 · --bg-base: 0 0% 96%
     * hover: foreground/3% · h-8 · rounded-[10px] · text-[13px] font-medium
     */
    --filter-item-padding-x: 0.5rem;   /* px-2 */
    --filter-item-padding-y: 0.375rem; /* py-1.5 */
    --filter-icon-slot: 16px;          /* [&_svg]:size-4 */
    --filter-item-gap: 0.5rem;         /* gap-2 */
    --filter-item-radius: 10px;        /* rounded-[10px] */
    --filter-item-height: 2rem;        /* h-8 */
    --filter-text: hsl(0 0% 47%);      /* --fg-muted */
    --filter-text-active: hsl(0 0% 3%); /* --primary / near-black */
    --filter-icon: hsl(0 0% 3%);
    --filter-bg: transparent;
    --filter-bg-hover: hsl(222.2 0% 4.9% / 3%); /* overlay-hover */
    --filter-bg-active: hsl(0 0% 96%); /* --bg-base */
}

.video-library-sticky-zone {
    position: sticky;
    top: var(--library-sticky-top, 0px);
    z-index: 85;
    background: transparent;
}

.sticky-filter-bar {
    position: relative;
    top: auto;
    z-index: auto;
    margin-bottom: 0.75rem;
}

.video-library--spaced {
    margin-top: 1.5rem;
}

@media screen and (min-width: 901px) {
    .video-library--spaced {
        margin-top: 3rem;
    }
}

.video-library {
    box-sizing: border-box;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

.video-library--landing {
    margin-top: 0;
}

.video-library-hero-section {
    padding: 0.5rem 0 0.75rem;
    text-align: left;
}

@media screen and (min-width: 901px) {
    .video-library-hero-section {
        padding-top: 0.75rem;
        padding-bottom: 1rem;
    }
}

.video-library-hero-title {
    margin: 0;
    color: #000;
    font-family: var(--font-universal-sans);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.06em;
    line-height: 1.1;
    font-weight: 400;
    font-size: 42.5px;
    text-align: left;
}

@media screen and (min-width: 901px) {
    .video-library-hero-title { font-size: 49.5px; }
}

@media screen and (min-width: 1400px) {
    .video-library-hero-title { font-size: 48px; }
}

@media screen and (min-width: 1920px) {
    .video-library-hero-title { font-size: 72px; }
}

.video-library-inner {
    position: relative;
    overflow: visible;
}

.video-library-top-rule {
    display: none;
}

.stripe-payments-library .sticky-filter-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--video-library-guide-dashed), var(--video-library-guide-dashed) 50%, transparent 0, transparent);
    background-size: 8px 1px;
    pointer-events: none;
}

#videoDirectory {
    display: flex;
    flex-direction: column;
    /* Gaps live on .category-section > div + section margins (no double gap) */
    gap: 0;
    width: 100%;
    max-width: var(--video-directory-max-width);
    scroll-margin-top: calc(var(--site-header-height, 48px) + 12px);
}

/*
 * Gap only between consecutive *visible* sections.
 * Using plain "+" still matched after a display:none sibling, so filtered
 * categories (3rd filter onward) got an extra top margin vs All/Foundational.
 */
#videoDirectory > .category-section:not(.hidden) + .category-section:not(.hidden) {
    margin-top: var(--video-card-gap);
}

.category-section,
.category-section > div,
.video-card {
    width: 100%;
}

.category-section > div {
    display: flex;
    flex-direction: column;
    gap: var(--video-card-gap);
}

/* First card sits at the same top offset for every filter */
#videoDirectory > .category-section:first-child > div,
#videoDirectory.single-active > .category-section:not(.hidden) > div {
    padding-top: 0;
}

#videoDirectory.single-active > .category-section {
    margin-top: 0;
}

/*
 * Video cards — premium materials (Stripe cool hairlines + x.ai quiet restraint)
 *
 * Why earlier versions felt off:
 * - Warm jet-tinted borders/shadows read "flat gray UI", not Stripe's cool blue-gray depth
 * - Ivory surface on white page fought the Stripe layout chrome
 * - Title weight 700 + 21px felt loud vs Stripe/x.ai medium light type
 * - Loud whole-card hover competed with the Stripe corner-arrow delight
 */
.video-title {
    font-family: var(--font-universal-sans) !important;
    font-weight: 500 !important;
    font-size: 1.0625rem !important; /* 17px — list-card scale, not hero */
    line-height: 1.35 !important;
    letter-spacing: -0.015em;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.video-card {
    --video-card-thumb-width: 14.5rem;
    --video-card-thumb-radius: 0.75rem; /* YouTube search thumbs ~12px radius */
    --video-card-row-min-height: 0;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: 0;
    /* No outer card chrome — spacing is only the list gap (YouTube-like) */
    padding: var(--video-card-pad-y) var(--video-card-pad-x) !important;
    margin: 0;
    box-shadow: none;
    background-color: transparent !important;
}

.video-card:hover {
    box-shadow: none;
    background-color: transparent !important;
}

@media screen and (min-width: 768px) {
    :root {
        --video-card-gap: 16px;
        --video-card-pad-y: 0px;
        --video-card-pad-x: 0px;
    }

    .video-card {
        --video-card-thumb-width: 20rem; /* ~320px, near YT large search thumb */
        --video-card-row-min-height: 0;
    }

    .video-title {
        font-size: 1.125rem !important; /* 18px */
    }
}

@media screen and (min-width: 1100px) {
    .video-card {
        --video-card-thumb-width: 22.5rem;
        --video-card-row-min-height: 0;
    }
}

.video-card > .flex.justify-between.items-center {
    display: grid;
    grid-template-columns: var(--video-card-thumb-width) minmax(0, 1fr);
    /* YouTube search: ~16px between thumb and text column */
    column-gap: 1rem;
    align-items: center; /* title block vertically centered with thumb / card */
    position: relative;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
}

/* Placeholder for cards without a real thumb (soft surface, not dark blue) */
.video-card > .flex.justify-between.items-center::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    align-self: center;
    background: #e8eef5;
    border-radius: var(--video-card-thumb-radius);
    box-shadow: inset 0 0 0 1px rgba(66, 71, 112, 0.08);
    pointer-events: none;
}

.video-card > .flex.justify-between.items-center:has(.video-card-thumb)::before {
    display: none;
}

.video-card > .flex.justify-between.items-center > .video-card-thumb {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    align-self: center;
    overflow: hidden;
    border-radius: var(--video-card-thumb-radius);
    /* Neutral while poster loads — no black/blue flash */
    background-color: #e8eef5;
    box-shadow: inset 0 0 0 1px rgba(66, 71, 112, 0.08);
    isolation: isolate;
}

/* YouTube-style: poster stays opaque until first video frame is painted */
.video-card-thumb__poster,
.video-card-thumb__preview {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
}

.video-card-thumb__poster {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-color: transparent;
}

.video-card-thumb__poster.is-loaded {
    opacity: 1;
}

.video-card-thumb__preview {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.22s ease;
    background-color: transparent;
}

/* Crossfade only after JS adds is-previewing (first frame ready) */
.video-card-thumb.is-previewing .video-card-thumb__poster {
    opacity: 0;
}

.video-card-thumb.is-previewing .video-card-thumb__preview {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .video-card-thumb__poster,
    .video-card-thumb__preview {
        transition: none;
    }
}

.video-card > .flex.justify-between.items-center > .video-card-thumb video,
.video-card > .flex.justify-between.items-center > .video-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.video-card > .flex.justify-between.items-center > div:has(.video-title) {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.125rem;
}

.video-card-meta,
.ame-hero__video-meta.video-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--font-universal-sans);
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.video-card-meta {
    margin-top: 0;
}

/* Duration alone (before JS wraps meta) still sits with title spacing via parent gap */
.video-card > .flex.justify-between.items-center > div:has(.video-title) > .video-card-duration-badge {
    align-self: flex-start;
}

/* Quiet meta chips — cool hairline, muted type (not loud black pills) */
.video-card-duration-badge,
.video-card-category {
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(66, 71, 112, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 9999px;
    padding: 0.1875rem 0.5625rem;
    font-family: var(--font-universal-sans) !important;
    font-size: 0.6875rem;
    font-weight: 500 !important;
    font-style: normal;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-synthesis: none;
    line-height: 1rem;
    letter-spacing: 0.01em;
    color: rgba(15, 23, 42, 0.55);
    background-color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.video-card-category {
    min-width: 0;
}

.video-card-category .filter-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    /* Match filter-button icons: solid slate, not the muted pill text color */
    color: #1e2937;
}

.video-card-category .filter-icon-circle svg {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    color: #1e2937;
}

/* Do not rewrite SVG fill/stroke — keep the same hard-coded colors as filter icons */

.video-card-category[data-category="managerial-accounting"] .filter-icon-circle {
    overflow: hidden;
}

.video-card-category-label {
    font: inherit;
    color: inherit;
}

/* Lock / mobile actions — vertically centered on the right */
.video-card > .flex.justify-between.items-center > .flex.items-center.gap-3,
.video-card > .flex.justify-between.items-center > .right-side {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    grid-column: unset;
    grid-row: unset;
    margin: 0;
    pointer-events: none;
}

.video-card .w-8.h-6 {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 640px) {
    .video-card {
        --video-card-thumb-width: 11rem;
        --video-card-pad-y: 0.125rem;
        --video-card-pad-x: 0.375rem;
        --video-card-row-min-height: 3.5rem;
        --video-card-thumb-radius: 0.5rem;
    }

    .video-card > .flex.justify-between.items-center {
        column-gap: 0.875rem;
    }

    .video-title {
        font-size: 0.9375rem !important; /* 15px */
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-card {
        transition: none;
    }
}



.main-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--video-library-gap);
    position: relative;
    overflow: visible;
}

#categoryFilters.category-sidebar {
    flex-shrink: 0;
    width: var(--category-sidebar-width);
    background-color: #ffffff;
    padding: 0 0 8rem;
}

.stripe-payments-library #categoryFilters.category-sidebar {
    background-color: transparent;
}

.stripe-payments-library .main-content-wrapper {
    --library-guide-dashed: var(--guideDashedColor, rgba(66, 71, 112, 0.09));
}

.stripe-payments-library {
    --library-sidebar-pad: 0;
    --library-sidebar-gutter: var(--stripe-content-margin, 16px);
    /* Column = gutters + button width; vertical guide sits on the right edge */
    --library-sidebar-total: calc(var(--filter-button-width) + 2 * var(--library-filter-gutter-x, 0.75rem));
    --library-video-inset: 0.5rem;
}

.stripe-payments-library .category-sidebar-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-top: 0;
    padding-inline: var(--library-filter-gutter-x, 0.75rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.stripe-payments-library .sticky-filter-bar {
    margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
    .stripe-payments-library .sticky-filter-bar {
        padding-block: 0.5rem;
    }
}

.stripe-payments-library #videoDirectory > .category-section:first-child > div,
.stripe-payments-library #videoDirectory.single-active > .category-section:not(.hidden) > div {
    padding-top: 0;
}

/* Mobile: dashed rule below filter pill */
.stripe-payments-library .video-library-sticky-zone::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--library-guide-dashed), var(--library-guide-dashed) 50%, transparent 0, transparent);
    background-size: 8px 1px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .stripe-payments-library .video-library-sticky-zone::after {
        display: none;
    }

    .stripe-payments-library .main-content-wrapper {
        /* Filter column ends on the continuous dashed guide */
        grid-template-columns: var(--library-sidebar-total) minmax(0, 1fr);
    }

    .stripe-payments-library .main-content-wrapper::before {
        width: var(--library-sidebar-total);
    }

    /* Desktop: dashed rule across video column only, meets the vertical guide.
     * Hidden when flush with the sticky nav so it does not sit 1px under
     * .site-header__border as a second underline. */
    .stripe-payments-library .main-content-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: var(--library-sidebar-total);
        height: 1px;
        background: linear-gradient(90deg, var(--library-guide-dashed), var(--library-guide-dashed) 50%, transparent 0, transparent);
        background-size: 8px 1px;
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.12s ease;
    }

    .stripe-payments-library.is-content-under-nav .main-content-wrapper::after {
        opacity: 0;
    }

    /* Filter column: full track width; buttons centered via equal inline gutters */
    .stripe-payments-library #categoryFilters.category-sidebar {
        width: 100%;
        margin-left: 0;
        padding-inline: 0;
        box-sizing: border-box;
    }

    /* Small inset only — thumbnails sit closer to the filter column */
    .stripe-payments-library .main-content-wrapper .video-content {
        padding-left: var(--library-video-inset, 0.5rem);
        border-inline-start: none;
    }

    /* Buttons fill the guttered content box (= --filter-button-width), not the guide */
    .stripe-payments-library .filter-all-btn,
    .stripe-payments-library #categoryFilters .filter-link {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

.stripe-payments-library .video-card {
    position: relative;
    z-index: 1;
}

.stripe-payments-library .video-card:hover {
    z-index: 2;
}

/* Cards are self-outlined; no dashed dividers between them */
.stripe-payments-library .category-section > div > .video-card:not(.hidden):has(~ .video-card:not(.hidden))::after {
    content: none;
    display: none;
}

/* Category sections share the same list gap as cards (no double spacing) */
.stripe-payments-library #videoDirectory > .category-section:not(:last-child)::after {
    content: none;
    display: none;
}

#categoryFilters.category-sidebar::-webkit-scrollbar {
    display: none;
}

.category-sidebar-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem; /* gap-0.5 — x.ai sidebar-menu */
    width: var(--filter-button-width);
    max-width: 100%;
    padding: 0.25rem 0 0; /* py-1 */
}

#categoryFilters .category-filters-list > li {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ── Collapsible category filters (x.ai docs.x.ai/overview exact) ───── */
#categoryFilters .filter-collapsible {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

#categoryFilters .filter-item-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--filter-button-width);
    height: var(--filter-item-height);
    min-height: var(--filter-item-height);
    border-radius: var(--filter-item-radius);
    box-sizing: border-box;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

/* Label button fills the shell; chevron sits flush right (ml-auto) */
#categoryFilters .filter-item-shell .filter-link {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding-right: 0.25rem;
    background-color: transparent;
}

#categoryFilters .filter-item-shell .filter-link:hover {
    background-color: transparent;
}

#categoryFilters .filter-item-shell:hover {
    background-color: var(--filter-bg-hover);
    color: var(--filter-text-active);
}

#categoryFilters .filter-item-shell:hover .filter-link,
#categoryFilters .filter-item-shell:hover .filter-chevron-btn {
    color: var(--filter-text-active);
}

#categoryFilters .filter-item-shell:has(.filter-link.active),
#categoryFilters .filter-item-shell:has(.filter-link.active):hover {
    background-color: transparent;
}

#categoryFilters .filter-link-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Free badge sits before chevron; chevron owns the trailing edge */
#categoryFilters .filter-item-shell .filter-free-badge {
    margin-left: 0.375rem; /* ml-1.5 — x.ai menu-badge */
    margin-right: 0;
    flex-shrink: 0;
}

#categoryFilters .filter-chevron-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-left: auto; /* ml-auto */
    margin-right: 0.375rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--filter-text);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

#categoryFilters .filter-chevron-btn:hover {
    color: var(--filter-text-active);
    background-color: transparent;
}

#categoryFilters .filter-chevron-btn:focus-visible {
    outline: 2px solid hsl(0 0% 3% / 28%);
    outline-offset: 1px;
    border-radius: 4px;
}

/* size-3 — x.ai collapsible chevron */
#categoryFilters .filter-chevron-icon {
    width: 0.75rem;
    height: 0.75rem;
    display: block;
    transition: transform 0.2s ease;
    transform-origin: center;
}

/* group-data-[state=open]/collapsible:rotate-90 */
#categoryFilters .filter-collapsible[data-state="open"] .filter-chevron-icon {
    transform: rotate(90deg);
}

#categoryFilters .filter-link.active ~ .filter-chevron-btn,
#categoryFilters .filter-item-shell:has(.filter-link.active) .filter-chevron-btn {
    color: var(--filter-text-active);
}

/* Animated expand/collapse panel */
#categoryFilters .filter-submenu-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
    overflow: hidden;
}

#categoryFilters .filter-collapsible[data-state="open"] .filter-submenu-wrap {
    grid-template-rows: 1fr;
}

#categoryFilters .filter-submenu-wrap > .filter-submenu {
    min-height: 0;
    overflow: hidden;
}

/*
 * Nested dropdown — slightly indented (shadcn/x.ai menu-sub pattern):
 * border-l + translate-x + extra left padding so children read nested.
 */
#categoryFilters .filter-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem; /* gap-0.5 */
    margin: 0.125rem 0 0.125rem 0.75rem; /* slight indent under parent */
    padding: 0.125rem 0 0.125rem 0.625rem;
    border-left: 1px solid hsl(0 0% 90%); /* --border-muted */
    list-style: none;
    width: calc(100% - 0.75rem);
    max-width: calc(var(--filter-button-width) - 0.75rem);
    box-sizing: border-box;
}

#categoryFilters .filter-submenu-item {
    margin: 0;
    padding: 0;
    width: 100%;
}

#categoryFilters .filter-submenu-item--empty {
    padding: 0.375rem 0.5rem;
    font-family: var(--font-universal-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    color: hsl(0 0% 62%);
}

#categoryFilters .filter-sub-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--filter-item-height);
    min-height: var(--filter-item-height);
    margin: 0;
    padding: var(--filter-item-padding-y) var(--filter-item-padding-x);
    border: none;
    border-radius: var(--filter-item-radius);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-universal-sans);
    font-size: 13px;
    font-weight: 500;
    font-synthesis: none;
    letter-spacing: normal;
    line-height: 1.25;
    color: var(--filter-text);
    -webkit-font-smoothing: antialiased;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

#categoryFilters .filter-sub-link:hover {
    color: var(--filter-text-active);
    background-color: var(--filter-bg-hover);
}

#categoryFilters .filter-sub-link.is-active {
    color: var(--filter-text-active);
    font-weight: 500;
    background-color: var(--filter-bg-active);
}

#categoryFilters .filter-sub-link:focus-visible {
    outline: 2px solid hsl(0 0% 3% / 28%);
    outline-offset: 1px;
}

#categoryFilters .filter-sub-link-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#categoryFilters .filter-sub-link--locked {
    opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
    #categoryFilters .filter-chevron-icon,
    #categoryFilters .filter-submenu-wrap {
        transition: none;
    }
}

/* Original per-category icons — preserve intrinsic SVG colors/strokes */
.filter-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--filter-icon-slot);
    height: var(--filter-icon-slot);
    color: var(--filter-icon);
}

/* Tags / cards keep a compact icon */
.filter-icon-circle svg {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
    color: var(--filter-icon);
}

/* Filter sidebar: [&_svg]:size-4 — x.ai menu button icon scale */
#categoryFilters .filter-icon-circle {
    width: 16px;
    height: 16px;
}

#categoryFilters .filter-icon-circle svg {
    width: 16px;
    height: 16px;
}

#categoryFilters .filter-link[data-category="foundational"] .filter-icon-circle svg,
.concept-card__tag-item--foundational .filter-icon-circle svg {
    width: 16px;
    height: 16px;
}

#categoryFilters .filter-link[data-category="foundational"] .filter-icon-circle svg {
    width: 16px;
    height: 16px;
}

#categoryFilters .filter-link[data-category="managerial-accounting"] .filter-icon-circle {
    overflow: hidden;
}

#categoryFilters .filter-link[data-category="managerial-accounting"] .filter-icon-circle svg {
    width: 15px;
    height: 15px;
}

/*
 * Menu buttons — docs.x.ai sidebar-menu-button exact:
 * h-8 rounded-[10px] px-2 py-1.5 text-[13px] font-medium text-fg-muted
 * hover:text-primary hover:bg-overlay-hover
 * data-active:bg-base data-active:text-primary
 */
.filter-all-btn,
#categoryFilters .filter-link {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--filter-button-width);
    height: var(--filter-item-height);
    min-height: var(--filter-item-height);
    display: flex;
    align-items: center;
    gap: var(--filter-item-gap);
    margin: 0;
    padding: var(--filter-item-padding-y) var(--filter-item-padding-x);
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    font-family: var(--font-universal-sans);
    font-size: 13px;
    font-weight: 500;
    font-synthesis: none;
    letter-spacing: normal;
    line-height: 1.25;
    color: var(--filter-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    border-radius: var(--filter-item-radius);
    background-color: var(--filter-bg);
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

/* Dashboard / shared: pad the rail so chips center in the sidebar track */
.category-sidebar-inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-inline: var(--library-filter-gutter-x, 0.75rem);
}

/* Sliding selected fill — x.ai data-active:bg-base (no inset chrome) */
.filter-active-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    width: 0;
    height: 0;
    border-radius: var(--filter-item-radius);
    background-color: var(--filter-bg-active);
    box-shadow: none;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition:
        transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
        width 0.32s cubic-bezier(0.32, 0.72, 0, 1),
        height 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, width, height;
}

.filter-active-pill.filter-active-pill--no-motion {
    transition: none;
}

.filter-all-btn,
#categoryFilters .filter-link {
    position: relative;
    z-index: 1;
}

.filter-all-btn:hover,
#categoryFilters .filter-link:hover {
    background-color: var(--filter-bg-hover);
    color: var(--filter-text-active);
}

/* Selected: text state only — fill comes from .filter-active-pill (bg-base) */
.filter-all-btn.active,
#categoryFilters .filter-link.active {
    background-color: transparent;
    color: var(--filter-text-active);
    font-weight: 500;
    box-shadow: none;
}

.filter-all-btn.active:hover,
#categoryFilters .filter-link.active:hover {
    background-color: transparent;
    color: var(--filter-text-active);
}

@media (prefers-reduced-motion: reduce) {
    .filter-active-pill {
        transition: none;
    }
}

.filter-all-btn:focus-visible,
#categoryFilters .filter-link:focus-visible {
    outline: 2px solid hsl(0 0% 3% / 28%);
    outline-offset: 1px;
}

/* x.ai menu-badge: text-[10px] h-[18px] px-1.5 border-solar/25 rounded-full */
.filter-free-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    margin-left: auto;
    height: 18px;
    min-width: 0;
    padding: 0 0.375rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--color-sunset) / 0.25);
    background-color: transparent;
    color: hsl(var(--color-sunset));
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

#categoryFilters .category-filters-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem; /* gap-0.5 */
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.mobile-filter-pill {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    color: #18181b;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: #f4f4f5;
    border: none;
    border-radius: 0.5rem;
    transition: transform 0.2s ease;
}

.mobile-filter-pill:active {
    transform: scale(0.97);
}

@media (max-width: 767px) {
    .sticky-filter-bar {
        position: relative;
        padding: 1rem 0;
        background: transparent;
        border-bottom: none;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .main-content-wrapper {
        display: grid;
        grid-template-columns: var(--category-sidebar-width) minmax(0, 1fr);
        gap: 0;
        align-items: start;
    }

    .main-content-wrapper::before {
        content: '';
        grid-column: 1;
        grid-row: 1;
        min-height: var(--category-sidebar-min-height);
        width: var(--category-sidebar-width);
        pointer-events: none;
    }

    #categoryFilters.category-sidebar {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: var(--library-filters-top, calc(var(--library-sticky-top, 0px) + 1px));
        align-self: start;
        width: var(--category-sidebar-width);
        overflow: visible;
        pointer-events: none;
        z-index: 20;
    }

    #categoryFilters.category-sidebar .filter-all-btn,
    #categoryFilters.category-sidebar .filter-link,
    #categoryFilters.category-sidebar .filter-chevron-btn,
    #categoryFilters.category-sidebar .filter-sub-link,
    #categoryFilters.category-sidebar .filter-item-shell {
        pointer-events: auto;
    }

    .main-content-wrapper::after {
        display: none;
    }

    .main-content-wrapper .video-content {
        grid-column: 2;
        min-width: 0;
        padding-left: var(--video-library-gap);
    }

    .main-content-wrapper .video-content #videoDirectory {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Library search removed — video list starts at the filter column top seam */