/* ============================================================
   LAYER ORDER — must be declared before any @layer blocks.
   Priority (high → low): utilities > components > reset
   ============================================================ */
@layer reset, components, utilities;

@layer reset {

    /* 1. Intuitive box-sizing */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* 2. Remove default margin */
    * {
        margin: 0;
    }

    /* 3. Keyword animations */
    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }

    /* 4. Base document */
    html {
        font-size: var(--text-font-size-3);
        /* 16px */
        line-height: var(--text-line-height-3);
        /* 24px = 1.5 ratio — unitless-equivalent */
        letter-spacing: var(--text-letter-spacing-3);
        color: var(--color-black);
        font-weight: var(--text-font-weight-regular);
        font-family: var(--text-font-sans);
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        min-height: 100vh;
        overscroll-behavior: none;
        line-height: inherit;
    }

    /* 5. Headings — unitless line-heights prevent overlap on wrapping */
    h1 {
        font-size: var(--text-font-size-9);
        letter-spacing: var(--text-letter-spacing-9);
        line-height: 1.05;
        font-weight: var(--text-font-weight-bold);
    }

    h2 {
        font-size: var(--text-font-size-8);
        letter-spacing: var(--text-letter-spacing-8);
        line-height: 1.1;
        font-weight: var(--text-font-weight-bold);
    }

    h3 {
        font-size: var(--text-font-size-7);
        letter-spacing: var(--text-letter-spacing-7);
        line-height: 1.2;
        font-weight: var(--text-font-weight-bold);
    }

    h4 {
        font-size: var(--text-font-size-6);
        letter-spacing: var(--text-letter-spacing-6);
        line-height: 1.25;
        font-weight: var(--text-font-weight-bold);
    }

    h5 {
        font-size: var(--text-font-size-5);
        letter-spacing: var(--text-letter-spacing-5);
        line-height: 1.3;
        font-weight: var(--text-font-weight-bold);
    }

    h6 {
        font-size: var(--text-font-size-4);
        letter-spacing: var(--text-letter-spacing-4);
        line-height: 1.4;
        font-weight: var(--text-font-weight-bold);
    }

    /* 6. Readable prose */
    p {
        text-wrap: pretty;
        font-optical-sizing: auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
        overflow-wrap: break-word;
    }

    /* 7. Media defaults */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    img {
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    /* 8. Form controls inherit font */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* 9. Lists */
    ul {
        list-style: none;
        padding: 0;
    }

    li {
        margin: 0;
    }

    /* 10. Links */
    a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    /* 11. Root stacking context */
    #root,
    #__next {
        isolation: isolate;
    }

}

/* end @layer reset */
/* ============================================================
   DESIGN TOKENS
   All CSS custom properties live here. Import this before
   utilities and components so they can reference the tokens.
   @font-face and :root are intentionally outside @layer —
   custom properties and font registrations cascade independently.
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2") tech(variations);
}

@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2") tech(variations);
}

@font-face {
    font-family: PlayfairDisplay;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/PlayfairDisplayVariable.ttf") format("truetype") tech(variations);
}

/* --- Root tokens ------------------------------------------- */
:root {
    /* TYPOGRAPHY — font families */
    --text-font-sans:
        InterVariable, "Noto Sans", Helvetica, system-ui, sans-serif;
    --text-font-serif: PlayfairDisplay, Georgia, "Times New Roman", serif;
    --text-font-mono: "JetBrains Mono", "Fira Code", monospace;

    /* TYPOGRAPHY — sizes (px for predictability at root level) */
    --text-font-size-1: 12px;
    --text-font-size-2: 14px;
    --text-font-size-3: 16px;
    /* base */
    --text-font-size-4: 18px;
    --text-font-size-5: 20px;
    --text-font-size-6: 24px;
    --text-font-size-7: 28px;
    --text-font-size-8: 35px;
    --text-font-size-9: 60px;
    --text-font-size-10: 72px;
    --text-font-size-11: 96px;

    /* TYPOGRAPHY — letter-spacing (tighter for larger text) */
    --text-letter-spacing-1: 0.0025em;
    --text-letter-spacing-2: 0em;
    --text-letter-spacing-3: 0em;
    --text-letter-spacing-4: -0.0025em;
    --text-letter-spacing-5: -0.005em;
    --text-letter-spacing-6: -0.00625em;
    --text-letter-spacing-7: -0.0075em;
    --text-letter-spacing-8: -0.01em;
    --text-letter-spacing-9: -0.025em;

    /* TYPOGRAPHY — line-heights (paired with matching size) */
    --text-line-height-1: 16px;
    --text-line-height-2: 20px;
    --text-line-height-3: 24px;
    --text-line-height-4: 26px;
    --text-line-height-5: 28px;
    --text-line-height-6: 32px;
    --text-line-height-7: 36px;
    --text-line-height-8: 44px;
    --text-line-height-9: 64px;

    /* TYPOGRAPHY — font weights */
    --text-font-weight-thin: 100;
    --text-font-weight-extralight: 200;
    --text-font-weight-light: 300;
    --text-font-weight-regular: 400;
    --text-font-weight-medium: 500;
    --text-font-weight-semibold: 600;
    --text-font-weight-bold: 700;
    --text-font-weight-extrabold: 800;
    --text-font-weight-black: 900;

    /* SPACING — used for gap, padding, margin */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;
    --space-10: 72px;
    --space-11: 80px;
    --space-12: 88px;
    --space-13: 96px;

    /* BORDER RADIUS */
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-4: 16px;
    --radius-5: 20px;
    --radius-6: 24px;
    --radius-full: 9999px;

    /* LENGTHS — named sizes for width/height utilities */
    --length-1: 16px;
    --length-2: 24px;
    --length-3: 32px;
    --length-4: 48px;
    --length-5: 64px;
    --length-6: 128px;
    --length-7: 256px;
    --length-8: 384px;
    --length-9: 512px;
    --length-10: 640px;
    --length-11: 768px;
    --length-12: 896px;
    --length-13: 1024px;
    --length-14: 1152px;

    /* VIEWPORT helpers */
    --viewport-width: 100vw;
    --viewport-height: 100vh;

    /* BREAKPOINTS (reference only — use in @media queries) */
    --breakpoint-xs: 520px;
    /* phones landscape */
    --breakpoint-sm: 768px;
    /* tablets portrait */
    --breakpoint-md: 1024px;
    /* tablets landscape */
    --breakpoint-lg: 1280px;
    /* laptops */
    --breakpoint-xl: 1640px;
    /* desktops */

    /* COLORS — neutrals */
    --color-black: #191918;
    --color-dark-gray: #37352f;
    --color-gray: #787774;
    --color-light-gray: #f5f5f7;
    --color-lighter-gray: #f2f2f2;
    --color-light-gray-transparent: #e5e5e580;

    /* COLORS — semantic */
    --color-red: #d44c47;
    --color-red-dark: #dd2731;
    --color-brown: #9f6b53;
    --color-orange: #d9730d;
    --color-yellow: #cb912f;
    --color-green: #448361;
    --color-blue: #0057de;
    --color-cyan: #337ea9;
    --color-purple: #9065b0;
    --color-pink: #c14c8a;

    /* COLORS — tints (background for colored labels/tags) */
    --color-gray-tint: #f1f1ef;
    --color-red-tint: #fdebec;
    --color-brown-tint: #f4eeee;
    --color-orange-tint: #faebdd;
    --color-yellow-tint: #fbf3db;
    --color-green-tint: #edf3ec;
    --color-cyan-tint: #e7f8f8;
    --color-purple-tint: #f6f3f9;
    --color-pink-tint: #faf1f5;

    /* NAVBAR height — set dynamically via JS (set_navbar_height_var.js) */
    --navbar-height: 0px;
}

/* ============================================================
   UTILITIES
   Wrapped in @layer utilities — wins over @layer components
   without needing !important anywhere.

   Naming convention: {property}-{value}
   e.g.  gap-4, padding-2-left, font-size-3, flex-row
   ============================================================ */

@layer utilities {

    /* ── Display ─────────────────────────────────────────────── */
    .hide {
        display: none;
    }

    .block {
        display: block;
    }

    .inline {
        display: inline;
    }

    .inline-block {
        display: inline-block;
    }

    /* ── Flex helpers ────────────────────────────────────────── */
    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-col {
        display: flex;
        flex-direction: column;
    }

    /* Same as grid > * — flex items default to min-height: auto which
   prevents height-full and scroll-y from working in nested columns */
    .flex-col>* {
        min-height: 0;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-nowrap {
        flex-wrap: nowrap;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-shrink-0 {
        flex-shrink: 0;
    }

    .align-items-center {
        align-items: center;
    }

    .align-items-start {
        align-items: flex-start;
    }

    .align-items-end {
        align-items: flex-end;
    }

    .align-items-stretch {
        align-items: stretch;
    }

    .justify-content-center {
        justify-content: center;
    }

    .justify-content-start {
        justify-content: flex-start;
    }

    .justify-content-end {
        justify-content: flex-end;
    }

    .justify-content-between {
        justify-content: space-between;
    }

    .justify-items-center {
        justify-items: center;
    }

    /* ── Grid helpers ────────────────────────────────────────── */
    /* Pure column structure — add gap-* and padding-* separately.
   > * { min-height: 0 } prevents grid items from growing beyond their
   row height, which is required for height-full and scroll-y to work
   correctly inside grid children. */
    .grid-1 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid-4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .grid-1>*,
    .grid-2>*,
    .grid-3>*,
    .grid-4>* {
        min-height: 0;
    }

    /* Auto-fit to content width (useful for toolbars) */
    .grid-2-auto {
        display: grid;
        grid-template-columns: repeat(2, fit-content(0));
    }

    .grid-3-auto {
        display: grid;
        grid-template-columns: repeat(3, fit-content(0));
    }

    .grid-4-auto {
        display: grid;
        grid-template-columns: repeat(4, fit-content(0));
    }

    /* Column ratio modifiers */
    .columns-ratio-1-2 {
        grid-template-columns: 1fr 2fr;
    }

    .columns-ratio-1-3 {
        grid-template-columns: 1fr 3fr;
    }

    .columns-ratio-2-1 {
        grid-template-columns: 2fr 1fr;
    }

    .columns-ratio-3-1 {
        grid-template-columns: 3fr 1fr;
    }

    /* Grid placement */
    .place-items-center {
        place-items: center;
    }

    .place-items-start {
        place-items: start;
    }

    .place-items-end {
        place-items: end;
    }

    .place-items-end-start {
        place-items: end start;
    }

    .place-items-start-end {
        place-items: start end;
    }

    .place-items-start-start {
        place-items: start start;
    }

    .place-items-end-end {
        place-items: end end;
    }

    /* ── Gap ─────────────────────────────────────────────────── */
    .no-gap {
        gap: 0;
    }

    .gap-1 {
        gap: var(--space-1);
    }

    .gap-2 {
        gap: var(--space-2);
    }

    .gap-3 {
        gap: var(--space-3);
    }

    .gap-4 {
        gap: var(--space-4);
    }

    .gap-5 {
        gap: var(--space-5);
    }

    .gap-6 {
        gap: var(--space-6);
    }

    .gap-7 {
        gap: var(--space-7);
    }

    .gap-8 {
        gap: var(--space-8);
    }

    .gap-9 {
        gap: var(--space-9);
    }

    .gap-10 {
        gap: var(--space-10);
    }

    .gap-11 {
        gap: var(--space-11);
    }

    .gap-12 {
        gap: var(--space-12);
    }

    .gap-13 {
        gap: var(--space-13);
    }

    /* ── Padding ─────────────────────────────────────────────── */
    .no-padding {
        padding: 0;
    }

    .padding-1 {
        padding: var(--space-1);
    }

    .padding-2 {
        padding: var(--space-2);
    }

    .padding-3 {
        padding: var(--space-3);
    }

    .padding-4 {
        padding: var(--space-4);
    }

    .padding-5 {
        padding: var(--space-5);
    }

    .padding-6 {
        padding: var(--space-6);
    }

    .padding-7 {
        padding: var(--space-7);
    }

    .padding-8 {
        padding: var(--space-8);
    }

    .padding-9 {
        padding: var(--space-9);
    }

    .padding-10 {
        padding: var(--space-10);
    }

    .padding-11 {
        padding: var(--space-11);
    }

    .padding-12 {
        padding: var(--space-12);
    }

    .padding-13 {
        padding: var(--space-13);
    }

    .padding-1-top {
        padding-top: var(--space-1);
    }

    .padding-2-top {
        padding-top: var(--space-2);
    }

    .padding-3-top {
        padding-top: var(--space-3);
    }

    .padding-4-top {
        padding-top: var(--space-4);
    }

    .padding-5-top {
        padding-top: var(--space-5);
    }

    .padding-6-top {
        padding-top: var(--space-6);
    }

    .padding-7-top {
        padding-top: var(--space-7);
    }

    .padding-8-top {
        padding-top: var(--space-8);
    }

    .padding-9-top {
        padding-top: var(--space-9);
    }

    .padding-10-top {
        padding-top: var(--space-10);
    }

    .padding-11-top {
        padding-top: var(--space-11);
    }

    .padding-12-top {
        padding-top: var(--space-12);
    }

    .padding-13-top {
        padding-top: var(--space-13);
    }

    .padding-1-bottom {
        padding-bottom: var(--space-1);
    }

    .padding-2-bottom {
        padding-bottom: var(--space-2);
    }

    .padding-3-bottom {
        padding-bottom: var(--space-3);
    }

    .padding-4-bottom {
        padding-bottom: var(--space-4);
    }

    .padding-5-bottom {
        padding-bottom: var(--space-5);
    }

    .padding-6-bottom {
        padding-bottom: var(--space-6);
    }

    .padding-7-bottom {
        padding-bottom: var(--space-7);
    }

    .padding-8-bottom {
        padding-bottom: var(--space-8);
    }

    .padding-9-bottom {
        padding-bottom: var(--space-9);
    }

    .padding-10-bottom {
        padding-bottom: var(--space-10);
    }

    .padding-11-bottom {
        padding-bottom: var(--space-11);
    }

    .padding-12-bottom {
        padding-bottom: var(--space-12);
    }

    .padding-13-bottom {
        padding-bottom: var(--space-13);
    }

    .padding-1-left {
        padding-left: var(--space-1);
    }

    .padding-2-left {
        padding-left: var(--space-2);
    }

    .padding-3-left {
        padding-left: var(--space-3);
    }

    .padding-4-left {
        padding-left: var(--space-4);
    }

    .padding-5-left {
        padding-left: var(--space-5);
    }

    .padding-6-left {
        padding-left: var(--space-6);
    }

    .padding-7-left {
        padding-left: var(--space-7);
    }

    .padding-8-left {
        padding-left: var(--space-8);
    }

    .padding-9-left {
        padding-left: var(--space-9);
    }

    .padding-10-left {
        padding-left: var(--space-10);
    }

    .padding-11-left {
        padding-left: var(--space-11);
    }

    .padding-12-left {
        padding-left: var(--space-12);
    }

    .padding-13-left {
        padding-left: var(--space-13);
    }

    .padding-1-right {
        padding-right: var(--space-1);
    }

    .padding-2-right {
        padding-right: var(--space-2);
    }

    .padding-3-right {
        padding-right: var(--space-3);
    }

    .padding-4-right {
        padding-right: var(--space-4);
    }

    .padding-5-right {
        padding-right: var(--space-5);
    }

    .padding-6-right {
        padding-right: var(--space-6);
    }

    .padding-7-right {
        padding-right: var(--space-7);
    }

    .padding-8-right {
        padding-right: var(--space-8);
    }

    .padding-9-right {
        padding-right: var(--space-9);
    }

    .padding-10-right {
        padding-right: var(--space-10);
    }

    .padding-11-right {
        padding-right: var(--space-11);
    }

    .padding-12-right {
        padding-right: var(--space-12);
    }

    .padding-13-right {
        padding-right: var(--space-13);
    }

    /* ── Margin ──────────────────────────────────────────────── */
    .no-margin {
        margin: 0;
    }

    .margin-1 {
        margin: var(--space-1);
    }

    .margin-2 {
        margin: var(--space-2);
    }

    .margin-3 {
        margin: var(--space-3);
    }

    .margin-4 {
        margin: var(--space-4);
    }

    .margin-5 {
        margin: var(--space-5);
    }

    .margin-6 {
        margin: var(--space-6);
    }

    .margin-7 {
        margin: var(--space-7);
    }

    .margin-8 {
        margin: var(--space-8);
    }

    .margin-9 {
        margin: var(--space-9);
    }

    .margin-10 {
        margin: var(--space-10);
    }

    .margin-11 {
        margin: var(--space-11);
    }

    .margin-12 {
        margin: var(--space-12);
    }

    .margin-13 {
        margin: var(--space-13);
    }

    .margin-1-top {
        margin-top: var(--space-1);
    }

    .margin-2-top {
        margin-top: var(--space-2);
    }

    .margin-3-top {
        margin-top: var(--space-3);
    }

    .margin-4-top {
        margin-top: var(--space-4);
    }

    .margin-5-top {
        margin-top: var(--space-5);
    }

    .margin-6-top {
        margin-top: var(--space-6);
    }

    .margin-7-top {
        margin-top: var(--space-7);
    }

    .margin-8-top {
        margin-top: var(--space-8);
    }

    .margin-9-top {
        margin-top: var(--space-9);
    }

    .margin-10-top {
        margin-top: var(--space-10);
    }

    .margin-11-top {
        margin-top: var(--space-11);
    }

    .margin-12-top {
        margin-top: var(--space-12);
    }

    .margin-13-top {
        margin-top: var(--space-13);
    }

    .margin-1-bottom {
        margin-bottom: var(--space-1);
    }

    .margin-2-bottom {
        margin-bottom: var(--space-2);
    }

    .margin-3-bottom {
        margin-bottom: var(--space-3);
    }

    .margin-4-bottom {
        margin-bottom: var(--space-4);
    }

    .margin-5-bottom {
        margin-bottom: var(--space-5);
    }

    .margin-6-bottom {
        margin-bottom: var(--space-6);
    }

    .margin-7-bottom {
        margin-bottom: var(--space-7);
    }

    .margin-8-bottom {
        margin-bottom: var(--space-8);
    }

    .margin-9-bottom {
        margin-bottom: var(--space-9);
    }

    .margin-10-bottom-top {
        margin-bottom-top: var(--space-10);
    }

    .margin-11-bottom-top {
        margin-bottom-top: var(--space-11);
    }

    .margin-12-bottom-top {
        margin-bottom-top: var(--space-12);
    }

    .margin-13-bottom-top {
        margin-bottom-top: var(--space-13);
    }

    .margin-1-left {
        margin-left: var(--space-1);
    }

    .margin-2-left {
        margin-left: var(--space-2);
    }

    .margin-3-left {
        margin-left: var(--space-3);
    }

    .margin-4-left {
        margin-left: var(--space-4);
    }

    .margin-5-left {
        margin-left: var(--space-5);
    }

    .margin-6-left {
        margin-left: var(--space-6);
    }

    .margin-7-left {
        margin-left: var(--space-7);
    }

    .margin-8-left {
        margin-left: var(--space-8);
    }

    .margin-9-left {
        margin-left: var(--space-9);
    }

    .margin-10-left {
        margin-left: var(--space-10);
    }

    .margin-11-left {
        margin-left: var(--space-11);
    }

    .margin-12-left {
        margin-left: var(--space-12);
    }

    .margin-13-left {
        margin-left: var(--space-13);
    }

    .margin-1-right {
        margin-right: var(--space-1);
    }

    .margin-2-right {
        margin-right: var(--space-2);
    }

    .margin-3-right {
        margin-right: var(--space-3);
    }

    .margin-4-right {
        margin-right: var(--space-4);
    }

    .margin-5-right {
        margin-right: var(--space-5);
    }

    .margin-6-right {
        margin-right: var(--space-6);
    }

    .margin-7-right {
        margin-right: var(--space-7);
    }

    .margin-8-right {
        margin-right: var(--space-8);
    }

    .margin-9-right {
        margin-right: var(--space-9);
    }

    .margin-10-right {
        margin-right: var(--space-10);
    }

    .margin-11-right {
        margin-right: var(--space-11);
    }

    .margin-12-right {
        margin-right: var(--space-12);
    }

    .margin-13-right {
        margin-right: var(--space-13);
    }

    /* ── Width ───────────────────────────────────────────────── */
    .width-full {
        width: 100%;
    }

    .width-viewport {
        width: 100vw;
    }

    /* was: 100vh — bug fixed */
    .min-width-full {
        min-width: 100%;
    }

    .width-fit {
        width: fit-content;
    }

    .width-1 {
        width: var(--length-1);
    }

    .width-2 {
        width: var(--length-2);
    }

    .width-3 {
        width: var(--length-3);
    }

    .width-4 {
        width: var(--length-4);
    }

    .width-5 {
        width: var(--length-5);
    }

    .width-6 {
        width: var(--length-6);
    }

    .width-7 {
        width: var(--length-7);
    }

    .width-8 {
        width: var(--length-8);
    }

    .width-9 {
        width: var(--length-9);
    }

    .width-10 {
        width: var(--length-10);
    }

    .width-11 {
        width: var(--length-11);
    }

    .width-12 {
        width: var(--length-12);
    }

    .width-13 {
        width: var(--length-13);
    }

    .width-14 {
        width: var(--length-14);
    }

    /* ── Height ──────────────────────────────────────────────── */
    .height-full {
        height: 100%;
    }

    .height-viewport {
        height: 100vh;
    }

    .min-height-full {
        min-height: 100%;
    }

    .height-fit {
        height: fit-content;
    }

    /* Height below a sticky navbar — requires --navbar-height via JS */
    .height-below-navbar {
        height: calc(100vh - var(--navbar-height));
    }

    .height-1 {
        height: var(--length-1);
    }

    .height-2 {
        height: var(--length-2);
    }

    .height-3 {
        height: var(--length-3);
    }

    .height-4 {
        height: var(--length-4);
    }

    .height-5 {
        height: var(--length-5);
    }

    .height-6 {
        height: var(--length-6);
    }

    .height-7 {
        height: var(--length-7);
    }

    .height-8 {
        height: var(--length-8);
    }

    .height-9 {
        height: var(--length-9);
    }

    .height-10 {
        height: var(--length-10);
    }

    .height-11 {
        height: var(--length-11);
    }

    .height-12 {
        height: var(--length-12);
    }

    .height-13 {
        height: var(--length-13);
    }

    .height-14 {
        height: var(--length-14);
    }

    /* ── Aspect ratio ────────────────────────────────────────── */
    .aspect-square {
        aspect-ratio: 1;
    }

    .aspect-43 {
        aspect-ratio: 4 / 3;
    }

    .aspect-169 {
        aspect-ratio: 16 / 9;
    }

    .aspect-21 {
        aspect-ratio: 2 / 1;
    }

    .aspect-916 {
        aspect-ratio: 9 / 16;
    }

    .aspect-12 {
        aspect-ratio: 1 / 2;
    }

    /* ── Overflow ────────────────────────────────────────────── */
    .no-overflow {
        overflow: hidden;
    }

    .overflow-clip {
        overflow: clip;
    }

    .scroll-y {
        overflow-y: auto;
        min-height: 0;
        flex: 1;
    }

    .scroll-x {
        overflow-x: auto;
        min-width: 0;
        flex-shrink: 1;
        flex-wrap: nowrap;
    }

    /* Scrollbar — hidden but functional on all browsers */
    .scroll-y::-webkit-scrollbar,
    .scroll-x::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge */
    }

    .scroll-y,
    .scroll-x {
        scrollbar-width: none;
        /* Firefox */
    }

    /* ── Position ────────────────────────────────────────────── */
    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .sticky {
        position: sticky;
    }

    .fixed {
        position: fixed;
    }

    .position-top {
        top: 0;
    }

    .position-bottom {
        bottom: 0;
    }

    .position-left {
        left: 0;
    }

    .position-right {
        right: 0;
    }

    .inset-0 {
        inset: 0;
    }

    /* ── Z-index ─────────────────────────────────────────────── */
    .z-index-front {
        z-index: 9999;
    }

    .z-1 {
        z-index: 1;
    }

    .z-2 {
        z-index: 2;
    }

    .z-10 {
        z-index: 10;
    }

    .z-100 {
        z-index: 100;
    }

    /* ── Overlay helpers ─────────────────────────────────────── */
    /*
  .overlay-wrapper: wraps a media element with an overlay on top.
  Position relative is on the wrapper, NOT on every div globally.
*/
    .overlay-wrapper {
        position: relative;
    }

    .overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: flex;
    }

    .overlay-on-hover {
        display: none;
    }

    .overlay-wrapper:hover .overlay-on-hover {
        display: flex;
    }

    /* ── Object fit ──────────────────────────────────────────── */
    .object-fit-cover {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* ── Typography ──────────────────────────────────────────── */
    .font-sans {
        font-family: var(--text-font-sans);
    }

    .font-serif {
        font-family: var(--text-font-serif);
    }

    .font-mono {
        font-family: var(--text-font-mono);
    }

    .font-style-italic {
        font-style: italic;
    }

    .font-style-normal {
        font-style: normal;
    }

    /* Font sizes — line-height uses matching --text-line-height-* token */
    .font-size-1 {
        font-size: var(--text-font-size-1);
        letter-spacing: var(--text-letter-spacing-1);
        line-height: var(--text-line-height-1);
    }

    .font-size-2 {
        font-size: var(--text-font-size-2);
        letter-spacing: var(--text-letter-spacing-2);
        line-height: var(--text-line-height-2);
    }

    .font-size-3 {
        font-size: var(--text-font-size-3);
        letter-spacing: var(--text-letter-spacing-3);
        line-height: var(--text-line-height-3);
    }

    .font-size-4 {
        font-size: var(--text-font-size-4);
        letter-spacing: var(--text-letter-spacing-4);
        line-height: var(--text-line-height-4);
    }

    .font-size-5 {
        font-size: var(--text-font-size-5);
        letter-spacing: var(--text-letter-spacing-5);
        line-height: var(--text-line-height-5);
    }

    .font-size-6 {
        font-size: var(--text-font-size-6);
        letter-spacing: var(--text-letter-spacing-6);
        line-height: var(--text-line-height-6);
    }

    .font-size-7 {
        font-size: var(--text-font-size-7);
        letter-spacing: var(--text-letter-spacing-7);
        line-height: var(--text-line-height-7);
    }

    .font-size-8 {
        font-size: var(--text-font-size-8);
        letter-spacing: var(--text-letter-spacing-8);
        line-height: var(--text-line-height-8);
    }

    .font-size-9 {
        font-size: var(--text-font-size-9);
        letter-spacing: var(--text-letter-spacing-9);
        line-height: var(--text-line-height-9);
    }

    /* ── Fluid typography ────────────────────────────────────────
   Use these instead of fixed font-size-* on headings and hero
   text that should scale smoothly with the viewport.
   Formula: clamp(min, preferred-vw, max)
   The preferred value is a viewport-relative unit so the size
   slides between min and max as the window resizes.
   ─────────────────────────────────────────────────────────── */
    .font-size-fluid-1 {
        font-size: clamp(var(--text-font-size-1), 1.5vw, var(--text-font-size-2));
        line-height: 1.5;
    }

    .font-size-fluid-2 {
        font-size: clamp(var(--text-font-size-2), 2vw, var(--text-font-size-3));
        line-height: 1.5;
    }

    .font-size-fluid-3 {
        font-size: clamp(var(--text-font-size-3), 2.5vw, var(--text-font-size-4));
        line-height: 1.4;
    }

    .font-size-fluid-4 {
        font-size: clamp(var(--text-font-size-3), 3vw, var(--text-font-size-5));
        line-height: 1.4;
    }

    .font-size-fluid-5 {
        font-size: clamp(var(--text-font-size-4), 3.5vw, var(--text-font-size-6));
        line-height: 1.3;
    }

    .font-size-fluid-6 {
        font-size: clamp(var(--text-font-size-5), 4vw, var(--text-font-size-7));
        line-height: 1.25;
    }

    .font-size-fluid-7 {
        font-size: clamp(var(--text-font-size-6), 5vw, var(--text-font-size-8));
        line-height: 1.2;
    }

    /* Hero / display sizes — largest jump, most benefit from fluid scaling */
    .font-size-fluid-8 {
        font-size: clamp(var(--text-font-size-6), 6vw, var(--text-font-size-9));
        line-height: 1.1;
        letter-spacing: var(--text-letter-spacing-8);
    }

    .font-size-fluid-9 {
        font-size: clamp(var(--text-font-size-7), 8vw, var(--text-font-size-9));
        line-height: 1.05;
        letter-spacing: var(--text-letter-spacing-9);
    }

    /* Font weights */
    .font-weight-thin {
        font-weight: var(--text-font-weight-thin);
    }

    .font-weight-extralight {
        font-weight: var(--text-font-weight-extralight);
    }

    .font-weight-light {
        font-weight: var(--text-font-weight-light);
    }

    .font-weight-regular {
        font-weight: var(--text-font-weight-regular);
    }

    .font-weight-medium {
        font-weight: var(--text-font-weight-medium);
    }

    .font-weight-semibold {
        font-weight: var(--text-font-weight-semibold);
    }

    .font-weight-bold {
        font-weight: var(--text-font-weight-bold);
    }

    .font-weight-extrabold {
        font-weight: var(--text-font-weight-extrabold);
    }

    .font-weight-black {
        font-weight: var(--text-font-weight-black);
    }

    /* Font colors — only sets color, never background */
    .font-color-white {
        color: white;
    }

    .font-color-black {
        color: var(--color-black);
    }

    .font-color-gray {
        color: var(--color-gray);
    }

    .font-color-light-gray {
        color: var(--color-light-gray);
    }

    /* ── Border ──────────────────────────────────────────────── */
    .no-border {
        border-color: transparent;
    }

    .border {
        border: 1px solid var(--color-light-gray);
    }

    .border-radius-1 {
        border-radius: var(--radius-1);
    }

    .border-radius-2 {
        border-radius: var(--radius-2);
    }

    .border-radius-3 {
        border-radius: var(--radius-3);
    }

    .border-radius-4 {
        border-radius: var(--radius-4);
    }

    .border-radius-5 {
        border-radius: var(--radius-5);
    }

    .border-radius-6 {
        border-radius: var(--radius-6);
    }

    .border-radius-full {
        border-radius: var(--radius-full);
    }

    .no-border-radius {
        border-radius: 0;
    }

    /* ── Background colors — only sets background, not text color ── */
    /* Use .font-color-white alongside if white text is needed        */
    .bg-white {
        background-color: white;
    }

    .bg-black {
        background-color: var(--color-black);
    }

    .bg-gray {
        background-color: var(--color-gray);
    }

    .bg-light-gray {
        background-color: var(--color-light-gray);
    }

    .bg-dark-gray {
        background-color: var(--color-dark-gray);
    }

    .bg-red {
        background-color: var(--color-red);
    }

    .bg-brown {
        background-color: var(--color-brown);
    }

    .bg-orange {
        background-color: var(--color-orange);
    }

    .bg-yellow {
        background-color: var(--color-yellow);
    }

    .bg-green {
        background-color: var(--color-green);
    }

    .bg-blue {
        background-color: var(--color-blue);
    }

    .bg-cyan {
        background-color: var(--color-cyan);
    }

    .bg-purple {
        background-color: var(--color-purple);
    }

    .bg-pink {
        background-color: var(--color-pink);
    }

    /* ── Color tints — sets background + matching text color together ── */
    /* These are intentionally opinionated: the tint palette always     */
    /* uses the paired foreground color.                                 */
    .tint-gray {
        color: var(--color-gray);
        background-color: var(--color-gray-tint);
        border-color: var(--color-gray-tint);
    }

    .tint-red {
        color: var(--color-red);
        background-color: var(--color-red-tint);
        border-color: var(--color-red-tint);
    }

    .tint-brown {
        color: var(--color-brown);
        background-color: var(--color-brown-tint);
        border-color: var(--color-brown-tint);
    }

    .tint-orange {
        color: var(--color-orange);
        background-color: var(--color-orange-tint);
        border-color: var(--color-orange-tint);
    }

    .tint-yellow {
        color: var(--color-yellow);
        background-color: var(--color-yellow-tint);
        border-color: var(--color-yellow-tint);
    }

    .tint-green {
        color: var(--color-green);
        background-color: var(--color-green-tint);
        border-color: var(--color-green-tint);
    }

    .tint-cyan {
        color: var(--color-cyan);
        background-color: var(--color-cyan-tint);
        border-color: var(--color-cyan-tint);
    }

    .tint-purple {
        color: var(--color-purple);
        background-color: var(--color-purple-tint);
        border-color: var(--color-purple-tint);
    }

    .tint-pink {
        color: var(--color-pink);
        background-color: var(--color-pink-tint);
        border-color: var(--color-pink-tint);
    }

    /* ── Shadows ─────────────────────────────────────────────── */
    .shadow-1 {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 20px 0px;
    }

    .shadow-2 {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px 0px;
    }

    /* ── Materials (frosted glass) ───────────────────────────── */
    .material-frosted-glass {
        background: #f2f2f280;
        -webkit-backdrop-filter: blur(50px) saturate(150%);
        backdrop-filter: blur(50px) saturate(150%);
        border-color: transparent;
    }

    .material-frosted-glass-whiter {
        background: #ffffff80;
        -webkit-backdrop-filter: blur(50px) saturate(150%);
        backdrop-filter: blur(50px) saturate(150%);
        border-color: transparent;
    }

    .material-frosted-glass-black {
        background-color: #00000080;
        -webkit-backdrop-filter: blur(5px) saturate(150%);
        backdrop-filter: blur(5px) saturate(150%);
    }

    .material-frosted-glass-gray {
        background-color: #ececec80;
        -webkit-backdrop-filter: blur(5px) saturate(150%);
        backdrop-filter: blur(5px) saturate(150%);
    }
}

/* end @layer utilities */
@layer components {

    /* ── Badge ───────────────────────────────────────────────── */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        white-space: nowrap;
        min-width: fit-content;

        font-size: var(--text-font-size-1);
        letter-spacing: var(--text-letter-spacing-1);
        line-height: var(--text-line-height-1);
        font-weight: var(--text-font-weight-regular);

        border-radius: var(--radius-full);
        border: 1px solid var(--color-black);
        padding: var(--space-1) var(--space-2);

        color: white;
        background-color: var(--color-black);
    }

    .badge>img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* Outlined / empty variant */
    .badge-outline {
        color: var(--color-black);
        background-color: white;
        border-color: var(--color-light-gray);
    }

    /* Invert icon only on filled badges */
    .badge:not(.badge-outline)>img {
        filter: invert(100%);
    }

    /* ── Badge filter (toggleable) ───────────────────────────── */
    .badge-filter {
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
        user-select: none;
        appearance: none;
        outline: none;
    }

    .badge-filter:hover {
        opacity: 0.8;
        background-color: var(--color-lighter-gray);
        border-color: var(--color-light-gray);
        color: var(--color-black);
    }

    .badge-filter:active {
        transform: scale(0.95);
    }

    /* Selected state */
    .badge-filter.selected,
    .badge-filter:has(.badge-filter-checkbox:checked) {
        background-color: var(--color-blue);
        border-color: var(--color-blue);
        color: white;
    }

    .badge-filter.selected>img,
    .badge-filter:has(.badge-filter-checkbox:checked)>img {
        filter: invert(100%);
    }

    /* Hidden native checkbox inside badge-filter */
    .badge-filter-checkbox {
        appearance: none;
        -webkit-appearance: none;
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        pointer-events: none;
    }


    /* ── Filter badge wrapper ── */
    .filter-badge-wrapper {
        position: relative;
        display: inline-block;
    }

    .filter-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: white;
        border: 1px solid var(--color-light-gray);
        border-radius: var(--radius-3);
        padding: var(--space-2);
        min-width: 190px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px;
        display: none;
        flex-direction: column;
        gap: 2px;
    }

    .filter-dropdown.open {
        display: flex;
    }

    .filter-dropdown-title {
        font-size: var(--text-font-size-1);
        font-weight: var(--text-font-weight-medium);
        color: var(--color-gray);
        padding: var(--space-1) var(--space-2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .filter-dropdown-options {
        overflow-y: auto;
        max-height: 200px;
    }

    .filter-option {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        border-radius: var(--radius-2);
        cursor: pointer;
        font-size: var(--text-font-size-2);
        font-weight: var(--text-font-weight-regular);
        color: var(--color-black);
    }

    .filter-option:hover {
        background-color: var(--color-lighter-gray);
    }

    .filter-option input[type="checkbox"] {
        accent-color: var(--color-blue);
        margin: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

    .filter-dropdown-footer {
        display: flex;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-2) var(--space-1);
        margin-top: var(--space-1);
        border-top: 1px solid var(--color-light-gray);
    }

    /* ── Tag ─────────────────────────────────────────────────── */
    .tag {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        white-space: nowrap;

        font-size: var(--text-font-size-1);
        letter-spacing: var(--text-letter-spacing-1);
        line-height: var(--text-line-height-1);
        font-weight: var(--text-font-weight-regular);

        border-radius: var(--radius-1);
        border: 1px solid var(--color-gray-tint);
        padding: 0 var(--space-1);

        color: var(--color-gray);
        background-color: var(--color-gray-tint);
    }

    .tag>img {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

}

/* end @layer components */
@layer components {

    button {
        width: fit-content;
        height: fit-content;
        color: white;
        background-color: var(--color-black);
        border: 1px solid var(--color-black);
        border-radius: var(--radius-2);
        font-size: var(--text-font-size-2);
        font-weight: var(--text-font-weight-medium);
        padding: var(--space-2) var(--space-4);
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s;
        display: flex;
        gap: var(--space-2);
        align-items: center;
        justify-content: center;
        user-select: none;
    }

    button>img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    button:hover {
        background-color: var(--color-dark-gray);
        border-color: var(--color-dark-gray);
    }

    button:active {
        opacity: 0.6;
    }

    button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Variants */
    .button-white {
        color: var(--color-black);
        background-color: white;
        border-color: white;
    }

    .button-outline {
        color: var(--color-black);
        background-color: white;
        border-color: var(--color-light-gray);
    }

    .button-outline:hover,
    .button-white:hover {
        background-color: var(--color-lighter-gray);
        border-color: var(--color-light-gray);
    }

    .button-secondary {
        color: var(--color-black);
        background-color: var(--color-lighter-gray);
        border-color: var(--color-lighter-gray);
    }

    .button-secondary:hover {
        background-color: var(--color-light-gray);
        border-color: var(--color-light-gray);
    }

    .button-destructive {
        color: white;
        background-color: var(--color-red);
        border-color: var(--color-red);
    }

    .button-destructive:hover {
        background-color: var(--color-red-dark);
        border-color: var(--color-red-dark);
    }

    .button-link {
        color: var(--color-black);
        background-color: transparent;
        border-color: transparent;
        padding-left: 0;
        padding-right: 0;
    }

    .button-link:hover {
        text-decoration: underline;
        text-underline-offset: var(--space-1);
        background-color: transparent;
        border-color: transparent;
    }

}

/* end @layer components */
@layer components {
    /*
  .card and .card-big define appearance + internal structure only.
  External sizing (width, height, how many per row) is handled by
  the grid/flex utilities in the parent container.
*/

    /* ── Base card ───────────────────────────────────────────── */
    .card {
        position: relative;
        container-type: inline-size;
        display: flex;
        gap: var(--space-3);
        cursor: pointer;
    }

    .card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--space-2);
        background: transparent;
        transition: inset 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        z-index: -1;
    }

    .card:hover::before {
        inset: -10px;
        background: #efefef;
        /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); */
    }

    .card:hover .card-img img {
        transform: scale(1.05);
    }

    .card:hover .card-img-overlay.hide {
        display: flex;
    }

    /* ── Big card (vertical layout) ─────────────────────────── */
    .card-big {
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        cursor: pointer;
    }

    /* ── Image container ─────────────────────────────────────── */
    .card-img {
        position: relative;
        border-radius: var(--radius-2);
        overflow: hidden;
        flex-shrink: 0;
        /* Width-driven sizing: aspect-ratio maintains square shape.
       clamp keeps the image proportional to the card container width. */
        width: clamp(80px, 25cqw, 130px);
        aspect-ratio: 1;
    }

    .card-big .card-img {
        aspect-ratio: 4 / 3;
        width: 100%;
    }

    .card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius-2);
        transition: transform 0.15s ease-in-out;
    }

    /* ── Content area ────────────────────────────────────────── */
    .card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .card-title {
        margin-bottom: var(--space-1);
    }

    .card-title p {
        font-size: clamp(11px, 4cqw, 16px);
        font-weight: var(--text-font-weight-semibold);
        line-height: 1.3;
    }

    .card-subtitle p {
        font-size: clamp(9px, 2.8cqw, 12px);
        font-weight: var(--text-font-weight-regular);
        line-height: 1.4;
        color: var(--color-gray);
    }

    .card-big .card-title p {
        font-size: clamp(12px, 5.2cqw, 17px);
        font-weight: var(--text-font-weight-semibold);
        line-height: 1.3;
    }

    .card-big .card-subtitle p {
        font-size: clamp(10px, 4cqw, 13px);
        font-weight: var(--text-font-weight-regular);
        line-height: 1.4;
        color: var(--color-gray);
    }

    /* ── Image overlay ───────────────────────────────────────── */
    .card-img-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: var(--space-1);
    }

    .card-big .card-img-overlay {
        padding: var(--space-3);
    }

    .card-img-overlay.hide {
        display: none;
    }

    .card-img-overlay .rating {
        align-self: flex-end;
        -webkit-backdrop-filter: blur(5px) saturate(150%);
        backdrop-filter: blur(5px) saturate(150%);
    }

    .card-img-overlay .description {
        color: white;
        font-weight: var(--text-font-weight-medium);
        flex: 1;
    }

    .card-img-overlay button {
        align-self: flex-end;
    }

    /* Standalone rating element — fixed square so all scores look identical */
    .rating {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        /* never squish inside flex parents */
        border-radius: var(--radius-2);
        color: white;
        font-size: var(--text-font-size-2);
        font-weight: var(--text-font-weight-semibold);
        line-height: 1;
        /* background-color set inline by JS, or use modifier classes below */
    }

    .card:not(.card-big) .rating {
        width: 24px;
        height: 24px;
        font-size: var(--text-font-size-1);
        border-radius: var(--radius-2);
    }

    /* CSS-only color variants — no JS needed */

    .rating-very-low {
        background-color: rgba(200, 50, 0, 0.8);
    }

    /* 0–19   */
    .rating-low {
        background-color: rgba(210, 100, 0, 0.8);
    }

    /* 20–39  */
    .rating-mid {
        background-color: rgba(200, 150, 0, 0.8);
    }

    /* 40–59  */
    .rating-high-mid {
        background-color: rgba(120, 200, 0, 0.8);
    }

    /* 60–79  */
    .rating-high {
        background-color: rgba(38, 217, 0, 0.8);
    }

    /* 80–94  */
    .rating-very-high {
        background-color: rgba(0, 180, 80, 0.8);
    }

    /* 95+    */
}

/* end @layer components */
@layer components {

    label {
        color: var(--color-black);
        font-size: var(--text-font-size-2);
        font-weight: var(--text-font-weight-medium);
        line-height: var(--text-line-height-2);
    }

    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    input[type="number"] {
        border: 1px solid var(--color-light-gray);
        border-radius: var(--radius-2);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-font-size-2);
        line-height: var(--text-line-height-2);
        background-color: white;
        color: var(--color-black);
        transition: border-color 0.15s, outline-color 0.15s;
        width: 100%;
    }

    input[type="text"]:disabled,
    input[type="email"]:disabled,
    input[type="search"]:disabled,
    input[type="password"]:disabled,
    input[type="number"]:disabled {
        opacity: 0.5;
        border-color: var(--color-lighter-gray);
        cursor: not-allowed;
    }

    input[type="text"]:focus-visible,
    input[type="email"]:focus-visible,
    input[type="search"]:focus-visible,
    input[type="password"]:focus-visible,
    input[type="number"]:focus-visible {
        outline: 2px solid var(--color-light-gray);
        outline-offset: 1px;
    }

    /* ── Checkbox & Radio ────────────────────────────────────── */
    input[type="radio"],
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: relative;
        border: 1px solid var(--color-light-gray);
        border-radius: var(--radius-1);
        background-color: white;
        flex-shrink: 0;
        transition: background-color 0.15s, border-color 0.15s;
    }

    input[type="radio"] {
        border-radius: var(--radius-full);
    }

    input[type="radio"]:checked,
    input[type="checkbox"]:checked {
        background-color: var(--color-black);
        border-color: var(--color-black);
    }

    input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 11px;
        border: 2px solid white;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
    }

    input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: var(--radius-full);
        background-color: white;
    }

}

/* end @layer components */
/* Hide badge filters, outside of layer components for it to work*/
.bottom-sheet.active.peek #filter_container {
    display: none;
}

@layer components {

    /* ── Overlay backdrop ────────────────────────────────────── */
    .bottom-sheet-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 800;
    }

    .bottom-sheet-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Bottom sheet ────────────────────────────────────────── */
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        background: white;
        transform: translateY(100%);
        transition:
            transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
            bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1),
            left 0.3s cubic-bezier(0.32, 0.72, 0, 1),
            right 0.3s cubic-bezier(0.32, 0.72, 0, 1),
            border-radius 0.2s ease,
            height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        touch-action: none;
        border-radius: var(--radius-6);
        padding: 0 var(--space-3) var(--space-3);
        overflow: hidden;
    }

    /* States */
    .bottom-sheet.active {
        transform: translateY(0);
        left: 0;
        right: 0;
        bottom: 0;
        height: 90vh;
        border-radius: var(--radius-5) var(--radius-5) 0 0;
    }

    /* peek: no translateY — bottom + fit-content height does the work */
    .bottom-sheet.active.peek {
        transform: translateY(0);
        left: var(--space-5);
        right: var(--space-5);
        bottom: var(--space-3);
        border-radius: var(--radius-6);
        height: fit-content;
    }

    .bottom-sheet.active.half {
        transform: translateY(0);
        left: var(--space-2);
        right: var(--space-2);
        bottom: var(--space-2);
        border-radius: var(--radius-5);
        height: 50vh;
    }

    /* ── Sheet content area ──────────────────────────────────── */
    /* Must be a component class (not a utility) so that the peek
   hide rule below — also in @layer components — can set
   display:none and actually win. Utility classes like .flex-col
   live in @layer utilities which always beats @layer components,
   so display:none in a component rule would never fire against them. */
    .sheet-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        overflow-y: auto;
        min-height: 0;
        flex: 1;
        margin-top: var(--space-5);
    }

    /* When peeking, hide everything except the searchbox and handle */
    .bottom-sheet.active.peek>*:not(.sheet-searchbox, .handle-zone) {
        display: none;
    }

    .bottom-sheet #filter_container {
        margin-top: var(--space-2);
    }


    /* ── Drag handle ─────────────────────────────────────────── */
    .handle-zone {
        width: 100%;
        height: 20px;
        cursor: grab;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .handle-zone:active {
        cursor: grabbing;
    }

    .handle {
        width: 40px;
        height: 5px;
        background: rgba(0, 0, 0, 0.18);
        border-radius: var(--radius-full);
    }

    /* Deprecated — kept for backwards compatibility */
    .sheet-handle {
        width: 40px;
        height: 5px;
        background: var(--color-light-gray);
        border-radius: var(--radius-full);
        margin: var(--space-1) auto;
        cursor: grab;
        flex-shrink: 0;
    }

    /* ── Sheet searchbox ─────────────────────────────────────── */
    .sheet-searchbox {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        padding: 0;
    }

    .sheet-searchbox>input[type="text"] {
        flex: 1;
        min-width: 0;
        border-radius: var(--radius-full);
        font-size: 1rem;
    }

    .sheet-searchbox>.profile {
        flex-shrink: 0;
    }

    /* ── Positioned action buttons inside sheet header ───────── */
    .sheet-action-button-left {
        position: absolute;
        top: var(--space-2);
        left: var(--space-2);
    }

    .sheet-action-button-right {
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
    }

    /* ── Close button ────────────────────────────────────────── */
    .close-btn {
        background: var(--color-lighter-gray);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: var(--radius-full);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-font-size-5);
        color: var(--color-gray);
        transition: background-color 0.2s, color 0.2s;
        flex-shrink: 0;
    }

    .close-btn:hover {
        background: var(--color-light-gray);
        color: var(--color-black);
    }

    /* ── Floating action button ──────────────────────────────── */
    .floating-action-button {
        position: fixed;
        bottom: calc(100px + var(--space-3));
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 950;
        transition:
            bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1),
            right 0.3s cubic-bezier(0.32, 0.72, 0, 1),
            transform 0.2s;
    }

    .floating-action-button-style {
        color: var(--color-black);
        padding: var(--space-1) var(--space-2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .floating-action-button:hover {
        transform: scale(1.05);
    }

    .floating-action-button:active {
        transform: scale(0.95);
    }

}

/* end @layer components */
@layer components {

    /* ── Mosaic / photo gallery grid ─────────────────────────── */
    .gallery-row {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
    }

    .gallery-column {
        flex: 25%;
        max-width: 25%;
        padding: 0 4px;
    }

    .img-wrapper {
        position: relative;
        /* explicit — not relying on any global div rule */
        margin-top: 8px;
    }

    .img-wrapper img {
        width: 100%;
        display: block;
        border-radius: var(--radius-1);
    }

    /* Caption text at image bottom — hidden when empty */
    .img-desc {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-font-size-1);
        color: white;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
        border-radius: 0 0 var(--radius-1) var(--radius-1);
        display: none;
    }

    .img-desc:not(:empty) {
        display: block;
    }

    /* Responsive breakpoints */
    @media screen and (max-width: 800px) {
        .gallery-column {
            flex: 50%;
            max-width: 50%;
        }
    }

    @media screen and (max-width: 600px) {
        .gallery-column {
            flex: 100%;
            max-width: 100%;
        }
    }

}

/* end @layer components */
@layer components {

    /* ── Popover card container ──────────────────────────────── */
    .popover-card {
        background-color: white;
        border: 1px solid var(--color-light-gray);
        border-radius: var(--radius-6);
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    /* ── Header variants ─────────────────────────────────────── */
    .popover-card-header {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        padding: var(--space-4);
        height: fit-content;
        width: 100%;
    }

    .popover-card-header-1-column {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        gap: var(--space-1);
        padding: var(--space-4);
    }

    .popover-card-header-2-columns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: fit-content;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .popover-card-header-3-columns {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        justify-items: center;
        width: 100%;
        height: fit-content;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    /* ── Footer variants ─────────────────────────────────────── */
    .popover-card-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        height: fit-content;
        width: 100%;
    }

    .popover-card-footer>button {
        width: 100%;
    }

    .popover-card-footer-left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        height: fit-content;
        width: 100%;
    }

    .popover-card-footer-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-4);
        padding: var(--space-4);
        height: fit-content;
        width: 100%;
    }

    /* Deprecated aliases — kept for backwards compatibility */
    .popover-card-footer-left-aligned {
        composes: popover-card-footer-left;
    }

    .popover-card-footer-right-aligned {
        composes: popover-card-footer-right;
    }

}

/* end @layer components */
@layer components {

    .profile {
        border-radius: var(--radius-full);
        width: var(--space-6);
        height: var(--space-6);
        border: 2px solid white;
        display: flex;
        overflow: hidden;
        flex-shrink: 0;
    }

    /* Fallback avatar when no <img> is present */
    .profile:not(:has(img)) {
        background-image: url("assets/user.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-color: var(--color-lighter-gray);
        border-color: var(--color-light-gray);
    }

    .profile>img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Size variants */
    .profile-m {
        width: var(--space-6);
        height: var(--space-6);
    }

    .profile-l {
        width: var(--space-8);
        height: var(--space-8);
    }

    .profile-xl {
        width: var(--space-9);
        height: var(--space-9);
    }

}

/* end @layer components */