@layer citrine {
    /* @LAYERS property to set sections of CSS in certain order. */
    @layer reset, elements, layouts, components, stylings, style-glassy, typography, utilities, accessibility;

    /* DEFAULT THEMING VARIABLES */
    :root {
        /*Color vars*/
        /* Base colors */
        --primary: #F1921D;
        --secondary: #3f0c46;
        --tertiary: #E07C00;
        --quaternary: #F6A1A1;
        --accent: #631886;

        /* Colour Scheme palette */
        /* very light, page background */
        --neutral-100: #FFF8EF;
        --neutral-200: #FFE4C1;
        /* light cards/sections */
        --neutral-300: #FFD1A0;
        --neutral-400: #FFB972;
        /* primary accent */
        --neutral-500: #F1921D;
        --neutral-600: #D17919;
        /* subtle borders or text */
        --neutral-700: #A66114;
        --neutral-800: #70410E;
        /* primary text */
        --neutral-900: #302e2c;

        /* Gray palette */
        --gray-100: #f8f9fa;
        --gray-200: #e9ecef;
        --gray-300: #dee2e6;
        --gray-400: #ced4da;
        --gray-500: #adb5bd;
        --gray-600: #6c757d;
        --gray-700: #495057;
        --gray-800: #343a40;
        --gray-900: #212529;

        /* Text */
        --text-primary: var(--neutral-100);
        --text-secondary: var(--gray-400);
        --text-inverse: var(--neutral-100);
        --text-link: #149EAD;
        --text-link-visited: #9E4412;
        --text-placeholder: #999999;

        /* Feedback states */
        --error: #E53935;
        --warn: #FF9800;
        --success: #4CAF50;
        --focus: #42BCD1;
        --highlight: #FFE585;
        --selection: #4c19a0;

        /* Buttons */
        --button-text: #FFFFFF;
        --button-text-alt: var(--button-bg);
        --button-bg: #4B78CA;
        --button-confirm: #4CAF50;
        --button-cancel: #C62828;

        /* Forms */
        --input-bg: #FFFFFF;
        --input-success: #E9FFE9;
        --input-error: #FFD6D6;
        --input-readonly: #DADADA;

        /* Specific Elements */
        --bg-page: url('/assets/images/home/home_bg.webp');
        --bg-code: #2D2F33;
        --bg-section: rgba(0, 0, 0, 0.7);
        --bg-panel: var(--primary);
        --bg-panel-sub: var(--tertiary);
        --bg-modal: var(--neutral-100);
        --bg-overlay: rgba(0, 0, 0, 0.7);
        --bg-progress-shell: var(--neutral-100);
        --bg-progress-bar: var(--neutral-600);
        --skeleton-gradient: linear-gradient(90deg, var(--gray-500) 25%, var(--gray-600) 50%, var(--gray-500) 75%);

        /* Others */
        --border-primary: #CCCCCC;
        --border-secondary: var(--accent);
        --focus-ring: #42BCD1;

        /* Typography */
        --font-family-base: 'main_font', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
        --line-height-base: 1.5;

        /* Design */
        --max-content-width: 1300px;
        --border-radius-base: 10px;
        --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        --trans-duration: 300ms;
        --trans-type: ease;
        --interaction-strength: 1;
        --hr-size: 2px;

        /* Design - Grid */
        --grid-max-column-count: 3;
        --grid-min-item-width: 150px;
        --grid-max-item-width: 100%;
        /* Also affects flex gap */
        --grid-gap: 1rem;

        /* Unit Sizing */
        /* Base unit */
        --unit: 8px;

        /* Spacing (for margins, padding, gaps) */
        --space-xs: calc(var(--unit) * 0.5);
        /* 4px */
        --space-sm: var(--unit);
        /* 8px */
        --space-md: calc(var(--unit) * 2);
        /* 16px */
        --space-lg: calc(var(--unit) * 3);
        /* 24px */
        --space-xl: calc(var(--unit) * 4);
        /* 32px */

        /* Sizes (for width, height, icons) */
        --size-xs: calc(var(--unit) * 2);
        /* 16px */
        --size-sm: calc(var(--unit) * 3);
        /* 24px */
        --size-md: calc(var(--unit) * 4);
        /* 32px */
        --size-lg: calc(var(--unit) * 6);
        /* 48px */
        --size-xl: calc(var(--unit) * 8);
        /* 64px */

        /* Typography scale */
        --text-xs: 0.75rem;
        /* 12px */
        --text-sm: 0.875rem;
        /* 14px */
        --text-base: 1rem;
        /* 16px */
        --text-lg: 1.125rem;
        /* 18px */
        --text-xl: 1.5rem;
        /* 20px */

        /* Glassy Stylings */
        --glassy-bg-primary: radial-gradient(circle at 50% 100%,
                var(--secondary),
                var(--tertiary)) padding-box,
            linear-gradient(var(--secondary), var(--primary));
        --glassy-bg-secondary: radial-gradient(circle at 50% 100%,
                rgb(80, 80, 80),
                rgb(129, 129, 129)) padding-box,
            linear-gradient(rgb(161, 161, 161), rgb(212, 212, 212));
    }

    @font-face {
        font-family: 'main_font';
        src: url('/assets/fonts/roboto/Roboto-Light.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'main_font';
        src: url('/assets/fonts/roboto/Roboto-Regular.ttf') format('truetype');
        font-style: normal;
        font-weight: bold;
        font-display: swap;
    }

    @font-face {
        font-family: 'main_font';
        src: url('/assets/fonts/roboto/Roboto-Italic.ttf') format('truetype');
        font-style: italic;
        font-weight: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'main_font';
        src: url('/assets/fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
        font-style: italic;
        font-weight: bold;
        font-display: swap;
    }

    /* //// CSS RESET STYLING */
    @layer reset {

        /* resetting CSS margin: remove default margin on text tags */
        * {
            margin: 0;
            padding: 0;
        }

        /*Use a more-intuitive box-sizing model.*/
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        /* remove built-in form typography
        margin: remove default margin on text tags
        */
        input,
        button,
        textarea,
        select {
            font: inherit;
            color: inherit;
        }

        /*Avoid text overflows*/
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        code {
            overflow-wrap: break-word;
            text-wrap: balance;
        }

        header,
        footer,
        main,
        section,
        article {
            container-type: inline-size;
        }

        /* //// SEMANTIC SAFETY WARNINGS */

        body h1:not(:first-of-type) {
            color: var(--error);
            text-decoration: underline;
        }

        html {
            font-size: 1rem;
            /* 16px by Default */
            /*16px is the minimum size for IOS devices without auto-zooming on the page.*/
            font-family: var(--font-family-base);
            background: var(--neutral-200);
            color: var(--text-primary);

            /* scroll-behavior: smooth; Moved to within Prefers-reduced-motion: no-preference media query. */

            /* Mobile specific features */
            /* Highlight color when interactive elements are clicked on Apple devices*/
            -webkit-tap-highlight-color: var(--focused);
            /* Prevent text size adjustment on orientation change */
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            /* Better text rendering on mobile */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            /* Allows text to stay aligned even when starting with punctuation. */
            hanging-punctuation: first last;
            /* Prevents a hidden scrollbar from changing the flow of elements on the page */
            scrollbar-gutter: stable;

            color-scheme: dark light;

            /*Allows properties to be animated/ transitioned too, even if they are words like 'auto'.*/
            interpolate-size: allow-keywords;
        }

        body {
            margin: 0;
            padding: 0;
            /* padding-inline: min(1rem, 5vw); */
            /* acts as min margin */
            background: var(--bg-page);
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        /* Used as the wrapper for all page content */
        main {
            margin: 0;
            padding: 0;
        }
    }

    /* BASE/ UTILITY CLASSES */
    @layer utilities {

        /* //// SPACING UTILITIES */
        /* PADDING UTILITIES */
        .padding-xs {
            padding: var(--space-xs);
        }

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

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

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

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

        /* MARGIN UTILITIES */
        .margin-xs {
            margin: var(--space-xs);
        }

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

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

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

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

        /* GAP UTILITIES (for flexbox/grid) */
        .gap-xs {
            gap: var(--space-xs);
        }

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

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

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

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

        /* TYPOGRAPHY UTILITIES */
        .text-xs {
            font-size: var(--text-xs);
        }

        .text-sm {
            font-size: var(--text-sm);
        }

        .text-base {
            font-size: var(--text-base);
        }

        .text-lg {
            font-size: var(--text-lg);
        }

        .text-xl {
            font-size: var(--text-xl);
        }

        /* ZERO/RESET UTILITIES */
        .padding-0 {
            padding: 0;
        }

        .margin-0 {
            margin: 0;
        }

        .gap-0 {
            gap: 0;
        }


        ::selection {
            background: var(--selection);
        }

        .input-expandable {
            field-sizing: content;
            max-width: 100%;
            max-height: var(--max-content-height, fit-content);
        }

        .no-select {
            user-select: none;
        }

        .no-pointer {
            pointer-events: none;
        }

        input:hover,
        button:hover,
        .button:hover,
        .nav-buttons a:hover {
            filter: brightness(1.1);
        }

        :focus {
            box-sizing: border-box;
            outline: none;
            box-shadow: none;
        }

        :focus-visible {
            box-sizing: border-box;
            outline: none;
            border: 2px solid var(--focused);
        }

        .text-truncate {
            --truncate-lines: 5 -webkit-line-clamp: var(var(--truncate-lines));
            line-clamp: var(var(--truncate-lines));
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        ::-webkit-scrollbar-button {
            display: none;
            height: 13px;
            border-radius: 0px;
            background-color: #AAA;
        }

        ::-webkit-scrollbar-button:hover {
            background-color: #AAA;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #676767;
            border-radius: 100px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #353036;
            border-radius: 100px;
        }

        ::-webkit-scrollbar-track {
            background-color: #a9a1aa;
            border-radius: 100px;
        }

        ::-webkit-scrollbar-track:hover {
            background-color: #CCC;
            border-radius: 100px;
        }

        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }

        .scroll-hide {
            scrollbar-width: none;
        }

        :disabled {
            filter: saturate(0);
            cursor: not-allowed;
            user-select: none;
            opacity: 0.8;
        }

    }

    @layer layouts {

        .spacer-width {
            display: inline-block;
            min-width: var(--width, 100px);
            max-width: var(--width, 100px);
        }

        .spacer-height {
            display: inline-block;
            min-height: var(--height, 100px);
            max-height: var(--height, 100px);
        }

        .center {
            align-content: center;
        }

        .safe-area-padding {
            padding-top: env(safe-area-inset-top, 0);
            padding-right: env(safe-area-inset-right, 0);
            padding-bottom: env(safe-area-inset-bottom, 0);
            padding-left: env(safe-area-inset-left, 0);
        }

        .safe-area-fill {
            height: 100vh;
            min-height: 100dvh;
            padding-top: env(safe-area-inset-top, 0);
            padding-right: env(safe-area-inset-right, 0);
            padding-bottom: env(safe-area-inset-bottom, 0);
            padding-left: env(safe-area-inset-left, 0);
            box-sizing: border-box;
        }

        .fullscreen {
            height: 100vh;
            height: 100dvh;
            width: 100vw;
            width: 100dvw;
        }

        .fullscreen-overlay {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            height: 100dvh;
            width: 100vw;
            width: 100dvw;
            background-color: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(3px);
            z-index: 2000;
        }

        img.float-left {
            float: left;
            max-width: 50%;
            margin: 0px 10px 10px 0px;
        }

        img.float-right {
            float: right;
            max-width: 50%;
            margin: 0px 0px 10px 10px;
        }

        .flex-wrapper,
        .split-section {
            display: flex;
            flex-wrap: wrap;
            gap: var(--grid-gap);
        }

        .grid-content,
        .full-width {
            --breakout-width: minmax(0, calc((85ch - var(--max-content-width)) / 2));
            -ontent-width: min(100% - (var(--space-sm) * 2), var(--max-content-width));

            display: grid;
            grid-template-columns:
                [full-width-start] minmax(var(--space-sm), 1fr) [breakout-start] var(--breakout-width) [content-start] var(-ontent-width) [content-end] var(--breakout-width) [breakout-end] minmax(var(--space-sm), 1fr) [full-width-end];
        }

        .grid-content>*,
        .full-width {
            grid-column: content;
            width: 100%;
        }

        .grid-content>.breakout {
            display: block;
            width: 100%;
            grid-column: breakout;
        }

        .grid-content>.full-width {
            display: block;
            width: 100%;
            grid-column: full-width;
        }

        /* Split container allows you to have two div sections that appear next to each other and dynamically scale to fit the container.
        Change -on-width to set the max size of the first container, which in turn allows the 2nd container to fill the remaining width. */
        .split-section>div:first-child {
            -on-width: 400px;
            width: 100%;
            max-width: calc(100% - var(-on-width));
        }

        .wrapper {
            max-inline-size: min(var(--max-content-width), 100% - (var(--space-sm) * 2));
            margin-inline: auto;
        }

        .panel {
            background-color: var(--bg-panel);
            padding: 10px 20px;
            border-radius: var(--border-radius-base);
            box-shadow: var(--shadow);
            margin: auto;
            margin-top: var(--space-lg);
        }

        .panel-sub {
            background-color: var(--bg-panel-sub);
            padding: 10px 20px;
            border-radius: var(--border-radius-base);
            box-shadow: var(--shadow);
            margin: auto;
            margin-top: var(--space-md);
        }

        .flex-center {
            display: flex;
            align-content: center;
            text-align: center;
        }

        .flex-center-shrink,
        .flex-center-shrink>* {
            margin: auto;
        }

        .flex-column {
            display: flex;
            flex-direction: column;
            gap: var(--grid-gap);
            width: 100%;
            max-width: 100%;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--grid-gap);
            max-width: 100%;
        }

        .flex-row>.flex-grow {
            flex: 1;
        }

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

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

        .flex-right {
            display: block;
            width: max-content;
            max-width: 100%;
            margin-right: auto;
        }

        .flex-left {
            display: block;
            width: max-content;
            max-width: 100%;
            margin-left: auto;
        }

        /* Auto-fit grids that work with any number of items */
        .auto-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-item-width), 100%), 1fr));
            gap: var(--grid-gap);
        }


        .auto-grid-max-columns {
            --grid-max-col-calc: minmax(min(max(180px, calc((100% - var(--space-sm) * var(--grid-max-column-count) - var(--space-sm)) / var(--grid-max-column-count))), 100%), 1fr);
            display: grid;
            gap: var(--grid-gap);
            grid-template-columns: repeat(auto-fit,
                    var(--grid-max-col-calc));
        }

        .grid {
            display: grid;
            gap: var(--grid-gap);
        }

        .grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .grid-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-item-width), var(--grid-max-item-width)), 1fr));
            gap: var(--grid-gap);
        }

        .image-gallery img {
            width: 100%;
            border-radius: var(--border-radius-base);
            aspect-ratio: 1;
            object-fit: cover;
            background: var(--glassy-bg-secondary);
        }


        .focus-gallery-opacity img {
            opacity: 1;
            transition: opacity var(--trans-duration) var(--trans-type);
        }

        .focus-gallery-opacity:hover img {
            opacity: 0.5;
        }

        .focus-gallery-opacity img:hover {
            opacity: 1;
        }

        .focus-gallery-bw img {
            filter: saturate(0);
            transition: filter var(--trans-duration) var(--trans-type);
        }

        .focus-gallery-bw img:hover {
            filter: saturate(1);
        }

        /* To be used as a container for images. This allows the child image to expand without overflowing the bounds. */
        .mask-square {
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: var(--border-radius-base);
        }

        /*Parent container must have position: relative; */
        /*
        <div style="position: relative">
            <div class="hover-overlay">Overlay Text</div>
        </div>
        */
        .hover-overlay {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            color: var(--text-inverse);
            padding: 0px;
            opacity: 0;
            user-select: none;
            border-radius: inherit;
            transition:
                background-color var(--trans-duration) var(--trans-type),
                opacity var(--trans-duration) var(--trans-type);
        }

        .hover-overlay:hover {
            background-color: rgba(0, 0, 0, 0.7);
            opacity: 1;
        }
    }

    /* //// NATIVE ELEMENTS */
    @layer elements {


        /* Headers */
        h1 {
            font-size: 2rem;
            margin: 10px auto 5px;
        }

        h2 {
            font-size: 1.7rem;
            margin: 10px auto 5px;
        }

        h3 {
            font-size: 1.5rem;
            margin: 10px auto 5px;
        }

        h4 {
            font-size: 1.4rem;
            margin: 10px auto 5px;
        }

        h5 {
            font-size: 1.3rem;
            margin: 10px auto 5px;
        }

        h6 {
            font-size: 1.2rem;
            margin: 10px auto 5px;
        }

        p {
            font-size: clamp(16px, 1rem, 1em);
            margin: 10px auto 5px;
            text-wrap: pretty;
            text-wrap-style: pretty;
            line-height: var(--line-height-base);
        }

        hr {
            border: none;
            height: var(--hr-size, 1px);
            background: var(--text-primary);
        }

        /* Text Stylings */
        mark {
            background-color: var(--highlight);
            padding: 0px 2px;
        }

        a {
            color: var(--link);
        }

        a:visited:not(.button) {
            color: var(--link-visited);
        }

        blockquote {
            color: var(--text-secondary);
            font-style: italic;
        }

        .quote {
            position: relative;
            font-style: italic;
            padding: 0.5rem 0.8rem;
            display: inline-block;
        }

        .quote::before,
        .quote::after {
            font-size: 2rem;
            font-family: serif;
            color: var(--text-secondary);
            position: absolute;
            top: 0;
        }

        .quote::before {
            content: '"';
            left: -0.1rem;
        }

        .quote::after {
            content: '"';
            right: -0.1rem;
        }

        code {
            max-width: 100%;
            display: inline-block;
            font-family: var(--font-family-mono);
            background-color: var(--bg-code);
            font-size: 1em;
            color: white;
            padding: var(--space-xs) var(--space-sm);
            border-radius: calc(var(--border-radius-base) *0.5);
            text-wrap-mode: wrap;
            margin-top: var(--space-xs);
        }

        kbd:not(:has(kbd, samp)) {
            display: inline-block;
            font-family: var(--font-family-mono);
            color: midnightblue;
            background: aliceblue;
            border-radius: 4px;
            padding-inline: 4px;
            box-shadow: 0px 2px 0 2px lightsteelblue;
            margin-inline-end: 0.25ch;
            user-select: none;
        }

        samp {
            display: inline-block;
            font-family: var(--font-family-mono);
            padding: var(--space-sm);
            border: 2px solid white;
            background-color: var(--bg-code);
            color: var(--text-inverse);
            border-radius: 0px;
        }

        kbd>samp {
            background-color: aliceblue;
            color: var(--text-primary);
            border-radius: 0.25rem;
            padding: 0.25em;
        }

        var {
            font-family: var(--font-family-mono);
            font-style: italic;
        }

        /* Image Stylings */

        figure {
            width: 100%;
            max-width: 400px;
            margin: 10px auto;
            border: 5px var(--tertiary) solid;
            background-color: var(--tertiary);
            border-radius: calc(var(--border-radius-base) * 0.5);
        }

        figure>figCaption {
            font-style: italic;
            background-color: var(--tertiary);
            margin: 0px;
            padding: 5px 10px;
            display: flex;
            flex-direction: column;
            border-radius: 0px 0px calc(var(--border-radius-base) * 0.25) calc(var(--border-radius-base) * 0.25);
            font-size: clamp(16px, 1rem, 1em);
            color: var(--text-secondary);
        }

        figure>img {
            border-radius: calc(var(--border-radius-base) * 0.25) calc(var(--border-radius-base) * 0.25) 0px 0px;
            margin: 0px;
        }

        figCaption {
            display: block;
            max-width: 100%;
            text-align: center;
            margin: auto;
            font-size: clamp(16px, 1rem, 1em);
            color: var(--text-secondary);
            font-style: italic;
            text-wrap-style: pretty;
        }

        caption {
            max-width: 100%;
            text-align: center;
            margin: auto;
            color: var(--text-secondary);
            font-style: italic;
        }

        img {
            vertical-align: middle;
            max-inline-size: 100%;
            height: auto;
            border-radius: calc(var(--border-radius-base) * 0.5);
            object-fit: cover;
            font-style: italic;

            /* The below is to be used when setting a lower-res version of an image as the background image, to allow a sort of progressive loading of the main image.
            To use, you need to set the low-res image as the background image, and the higher-res image as the actual image. */
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* Video Stylings */

        video {
            max-width: 100%;
        }

        /* Audio Stylings */

        audio {
            max-width: 100%;
        }

        /* Button Stylings */

        button,
        .button {
            display: inline-block;
            padding: 5px 10px;
            border-radius: calc(var(--border-radius-base) * 0.5);
            background-color: var(--button-base);
            color: var(--button-text);
            cursor: pointer;
            text-decoration: none;
            line-height: normal;
            text-align: center;
            vertical-align: middle;
            border: none;
            margin-top: 5px;
            user-select: none;
            box-shadow: var(--shadow);
            min-width: fit-content;
        }

        /* List Stylings */

        ul {
            list-style: disc;
            padding-left: 1.5em;
            margin: 0.5em 0;
        }

        .list-accent li::marker {
            color: var(--font-accent);
        }

        ol {
            padding-left: 1.5em;
            margin: 0.5em 0;
        }

        li {
            margin: 0.25em 0;
        }

        li ul {
            list-style: circle;
            padding-left: 1.5em;
        }

        /* Description Stylings */

        dl {
            margin: 1em 0;
        }

        dt {
            font-weight: bold;
            margin-top: 0.5em;
        }

        dd {
            margin-left: 1em;
            margin-bottom: 0.5em;
        }

        /* Time Tag */
        time {
            font-weight: 500;
            color: var(--text-secondary, #666);
            font-size: 0.875rem;
            letter-spacing: 0.02em;
            /* Forces numbers to be like mono fonts in a table cell */
            font-variant-numeric: tabular-nums;
        }

        /* Abbreviation Tag */
        /* Requires a title attribute on the abbr tag */
        abbr[title] {
            letter-spacing: 0.15cap;
            text-underline-position: under;
        }


        section {
            margin: 10px 0px;
            padding: 5px;
        }

        /* Aside Stylings */

        aside {
            margin: 10px 0px;
            background-color: rgb(83, 83, 83);
            padding: 0px 0px 10px 0px;
            border-radius: calc(var(--border-radius-base) * 0.5);
            color: white;
            box-shadow: var(--shadow);
        }

        aside>h6 {
            color: rgb(214, 214, 214);
            font-size: clamp(16px, 1rem, 1em);
            font-weight: bold;
            background-color: rgb(46, 46, 46);
            margin: 0px;
            padding: 5px 10px;
            border-radius: calc(var(--border-radius-base) * 0.5) calc(var(--border-radius-base) * 0.5) 0px 0px;
            box-shadow: var(--shadow);
            user-select: none;
        }

        aside>p {
            margin: 5px 10px 0px 10px;
            padding: 0px;
        }

        /* Dialog Modal */

        dialog,
        .modal {
            margin: auto;
            border: none;
            box-shadow: var(--shadow);
            width: calc(100% - 80px);
            max-width: calc(var(--max-content-width) - 80px);
            padding: 20px;
            overflow: hidden;
            -webkit-user-select: none;
            user-select: none;
            background-color: var(--bg-modal);
            z-index: 5;
            border-radius: calc(var(--border-radius-base, 20px) / 1.5);
            overscroll-behavior: contain;
        }

        dialog :is(h1, h2, h3, h4, h5, h6):first-of-type,
        .modal :is(h1, h2, h3, h4, h5, h6):first-of-type {
            margin: 0px auto;
        }

        dialog::backdrop {
            background: rgba(0, 0, 0, 0.5);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            overscroll-behavior: contain;
        }

        /* Table Styling */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            /* Forces numbers to be like mono fonts in a table cell */
            font-variant-numeric: tabular-nums;
        }

        th,
        td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid var(--text-secondary);
        }

        th {
            background-color: var(--tertiary);
            font-weight: bold;
        }

        tr:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.1);
        }

        tfoot {
            background-color: var(--quaternary);
            font-weight: bold;
        }


        /* Details - Accordian Styling */
        /* TEMPLATE:
            <section class="accordian-wrapper" style="-ontent-height: 200px;">
                <details name="accordian-name">
                    <summary>Title Text</summary>
                    <div class="details-content">
                        <p>Some more lorum ipsum</p>
                    </div>
                </details>
            </section>
        */
        ::details-content {
            transition: all var(--trans-duration) var(--trans-type), content-visibility var(--trans-duration);
            height: 0;
            overflow: clip;
        }

        [open]::details-content {
            height: auto;
            padding-bottom: 0.5rem;
            max-height: var(-ontent-height, auto);
        }

        details[name] {
            width: 100%;
            background-color: var(--quaternary);
            color: var(--text-primary);
            overflow-y: auto;
        }

        summary {
            user-select: none;
        }

        details[name]>summary {
            background-color: var(--tertiary);
            padding: 10px;
            font-weight: bold;
            cursor: pointer;
        }

        details[name]>summary~* {
            margin: 0;
            padding: 0px 3ch;
        }

        .details-content {
            max-height: var(-ontent-height, 100px);
            overflow-y: auto;
            height: auto;
        }

        .accordian-wrapper {
            margin: 10px auto;
        }

        .accordian-wrapper>details[name] {
            border-bottom: 1px solid var(--text-inverse);
        }

        .accordian-wrapper>details[name]:first-of-type,
        .accordian-wrapper>details[name]:first-of-type>summary {
            border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
        }

        .accordian-wrapper>details[name]:last-of-type,
        .accordian-wrapper>details[name]:last-of-type>summary {
            border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
            border: none;
        }



        /* Forms & Inputs */
        form {
            padding: 10px;
            border-radius: var(--border-radius-base);
        }

        .form-grid {
            display: grid;
            gap: var(--grid-gap);

            @media (width > 720px) {
                grid-template-columns: 1fr 1fr;
            }
        }

        .form-grid>.form-group:not(.input-con-h) {
            display: grid;
        }

        fieldset {
            margin-top: 10px;
            padding: 5px;
            border: none;
            border-top: solid 1px var(--text-secondary);
        }

        legend {
            font-weight: bold;
            font-size: 1.1rem;
            padding: 3px 10px;
            border: solid 1px var(--text-secondary);
            border-radius: var(--border-radius-base);
            color: var(--text-secondary);
            user-select: none;
            background-color: var(--tertiary);
        }

        fieldset>fieldset>legend {
            margin-left: 1.4em;
            background: var(--quaternary);
        }

        label {
            font-weight: bold;
            margin: 5px;

            text-box-trim: trim-both;
        }

        input:not([type="submit"]),
        select,
        textarea {
            min-width: 0;
            max-width: 100%;
            padding: 5px;
            border: solid 2px var(--tertiary);
            border-radius: var(--border-radius-base);
            margin: 0px;
            transition: all var(--trans-duration) var(--trans-type);
            background-color: var(--input-bg);

            accent-color: var(--accent);
        }

        textarea {
            transition: border var(--trans-duration) var(--trans-type);
        }

        input:read-only:not([type="file"], [type="button"], [type="submit"]) {
            color: var(--text-secondary);
            background-color: var(--input-readonly);
        }

        input:user-valid:not([type="file"], [type="button"], [type="submit"]),
        input:not(:placeholder-shown):user-valid:not([type="file"], [type="button"], [type="submit"]) {
            background-color: var(--input-success);
        }

        input:user-invalid:not([type="file"], [type="button"], [type="submit"]),
        input:not(:placeholder-shown):user-invalid:not([type="file"], [type="button"], [type="submit"]) {
            background-color: var(--input-error);
        }

        input:focus:invalid {
            background-color: var(--input-bg);
        }

        /*Input Container template
<div class="input-con">
    <label>Name</label>
    <input type="text"/>
</div>
*/

        .input-con-h {
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            border-radius: var(--border-radius-base);
            width: 100%;
        }

        .input-con-h>label {
            margin: 0px;
            background-color: var(--tertiary);
            padding: 5px;
            border-radius: var(--border-radius-base) 0px 0px var(--border-radius-base);
            border: solid 2px var(--tertiary);
            height: 100%;
            display: flex;
            align-items: center;
            /* Centers text vertically within the label */
        }

        .input-con-h>input {
            margin: 0px;
            border-radius: 0px var(--border-radius-base) var(--border-radius-base) 0px;
            width: 100%;
        }

        .input-con-v {
            display: flex;
            flex-direction: column;
            gap: 0px;
            border-radius: var(--border-radius-base);
            width: 100%;
        }

        .input-con-v>label {
            margin: 0px;
            padding: 1px 5px;
            background-color: var(--tertiary);
            border-radius:
                var(--border-radius-base) var(--border-radius-base) 0px 0px;
            border: solid 2px var(--tertiary);
            font-size: 0.9em;
            filter: saturate(1);
            transform: filter var(--trans-duration) var(--trans-type);
        }

        .input-con-v>input {
            margin: 0px;
            border-radius: 0px 0px var(--border-radius-base) var(--border-radius-base);
            filter: saturate(1);
            transform: filter var(--trans-duration) var(--trans-type);
        }

        .input-responsive {}

        .input-con-h:has(input:disabled)>label,
        .input-con-v:has(input:disabled)>label {
            filter: saturate(0);
            opacity: 0.8;
        }

        .input-con-h:has(input:disabled)>input,
        .input-con-v:has(input:disabled)>input {
            filter: saturate(0);
            opacity: 0.8;
        }

    }

    /* //// CUSTOM COMPONENTS */
    @layer components {

        /* CLEAN STYLINGS */
        .button-clean {
            display: flex;
            min-height: 30px;
            min-width: 30px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: none;
            background-color: transparent;
            padding: 0;
            margin: 0;
            font: inherit;
            outline: none;
            text-decoration: none;
            user-select: none;
            color: white;
            align-items: center;
            cursor: pointer;
            box-shadow: none;
        }

        .list-clean li {
            list-style: none;
        }

        /* Aside Stylings */
        aside.warning {
            background-color: #7f1d1c;
        }

        aside.warning>h6 {
            color: #ff9292;
            background-color: #b81c1d;
        }

        aside.warning>h6::before {
            content: "🛑";
            margin-right: 5px;
            color: #ff9292;
        }


        aside.caution {
            background-color: #733f12;
        }

        aside.caution>h6 {
            color: #ffc36e;
            background-color: #a16107;
        }

        aside.caution>h6::before {
            content: "⚠️";
            margin-right: 5px;
            color: #ffc36e;
        }

        aside.info {
            background-color: #1e3b8a;
        }

        aside.info>h6 {
            color: #a9c0ff;
            background-color: #1d4ed6;
        }

        aside.info>h6::before {
            content: "ⓘ";
            margin-right: 5px;
            color: #a9c0ff;
        }

        aside.tip {
            background-color: #15532f;
        }

        aside.tip>h6 {
            color: #56dd8a;
            background-color: #157f3d;
        }

        aside.tip>h6::before {
            content: "💡";
            margin-right: 5px;
            color: #56dd8a;
        }



        dialog .button-close,
        .modal .button-close {
            position: absolute;
            top: 5px;
            right: 10px;
            width: 30px;
            height: 30px;
            background-color: var(--error);
            color: white;
            border: none;
            padding: 0px;
            border-radius: calc(var(--border-radius-base, 20px));
            font-size: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            transition: background-color var(--trans-duration) var(--trans-type);
            pointer-events: all;
            aspect-ratio: 1/1;
        }


        a.link-no-decor,
        .link-no-decor a {
            color: var(--text-primary);
            text-decoration: none;
        }

        a.link-no-decor:visited,
        .link-no-decor a:visited {
            color: var(--text-primary);
        }

        button#back-to-top {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            bottom: 20px;
            left: 10px;
            z-index: 99;
        }


        /* Icon button that expands to show text when hovered. */
        /* TEMPLATE:
            <button class="image-expand-right">
                <img src="">
                Click Here!
            </button> */
        .image-expand-right {
            display: grid;
            grid-template-columns: calc(var(--button-size, 20px) + 10px) auto;
            gap: 10px;
            align-items: center;
            text-decoration: none;
            padding: 5px;
            white-space: nowrap;
            width: var(--button-size, 40px);
            height: var(--button-size, 40px);
            overflow-x: clip;
            transition: width var(--trans-duration) var(--trans-type);
            min-width: 0;
            user-select: none;
        }

        .image-expand-right:hover,
        .image-expand-right:focus-visible {
            width: max-content;
        }

        .image-expand-right>img {
            object-fit: contain;
            height: 100%;
            width: 100%;
            /*height: 3cap;
            width: 3cap;
            margin-top: calc(1ex - 1cap);*/
        }

        badge,
        .badge {
            display: inline-block;
            height: auto;
            padding: 5px 10px;
            user-select: none;
            cursor: pointer;
            background-color: var(--accent);
            border-radius: calc(var(--border-radius-base) * 0.5);
            box-shadow: var(--shadow);
            align-content: center;
        }

        /* Sidebar - Sidebar Toggle Button */

        nav.sidebar {
            width: 250px;
            color: var(--text-primary);
            background-color: var(--tertiary);
            box-shadow: var(--shadow);
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 1;
            overflow-x: hidden;
            padding: 60px 20px;
            transform: translateX(-100%);
            transition: transform var(--trans-duration) var(--trans-type);
        }

        nav.sidebar[open] {
            transform: translateX(0);
        }

        /* Sidebar Toggle Button HTML structure:
<button class="sidebar-toggle">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
</button>
*/
        .sidebar-toggle {
            position: fixed;
            left: 10px;
            top: 2px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            background-color: transparent;
            border: none;
            padding: 0;
            z-index: 1000;
            box-shadow: none;
            transition: background-color var(--trans-duration) var(--trans-type);
        }

        .sidebar-toggle .bar {

            position: absolute;
            width: 30px;
            height: 3px;
            background-color: var(--text-primary);
            transition: all var(--trans-duration) var(--trans-type);
        }

        .sidebar-toggle .bar1 {
            top: 9px;
            left: 5px;
        }

        .sidebar-toggle .bar2 {
            top: 19px;
            left: 5px;
        }

        .sidebar-toggle .bar3 {
            top: 29px;
            left: 5px;
        }

        .sidebar-toggle[open] .bar1 {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .sidebar-toggle[open] .bar2 {
            opacity: 0;
        }

        .sidebar-toggle[open] .bar3 {
            transform: rotate(-45deg) translate(8px, -8px);
        }


        .sidebar-toggle:hover {
            filter: brightness(1.5);
            background-color: var(--accent);
        }





        /* Popover Menus - Browser Support currently limited! */
        .popover-button {
            anchor-name: --popover;
        }

        .popover {
            position: absolute;
            margin: 0;
            inset: auto;

            border: 0;
            padding: 0;
            border-radius: var(--border-radius-base);
            font-size: 1rem;

            position-anchor: --popover;

            opacity: 0;
            transition: display var(--trans-duration), opacity var(--trans-duration);
            transition-behavior: allow-discrete;

        }

        .popover:popover-open {
            display: grid;
            opacity: 1;

            @starting-style {
                opacity: 0;
            }
        }
    }

    /* //// VISUAL STYLINGS */
    @layer stylings {

        .header-styled-basic {
            padding: var(--space-sm);
            background-color: var(--secondary);
            z-index: 1;
            align-content: center;
        }

        .header-fixed {
            padding-top: env(safe-area-inset-top, 0);
            position: fixed;
            width: 100%;
            top: 0px;
            left: 0px;
            box-shadow: var(--shadow);
            z-index: 1;
            /* Min height is set to allow the Sidebar button to properly align in the header if used. */
            min-height: 53px;
        }

        /*Creates a large title*/
        .title-styled {
            display: block;
            font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
            font-weight: 900;
            line-height: 1.1;
            text-wrap: balance;
        }

        .title-center {
            text-align: center;
            border-bottom: 10px double var(--text-inverse);
            margin-top: 30px;
        }

        /* Will limit the text to only 65 characters long. And due to margin: auto; The text will be centered as well. */
        p.text-clamp,
        li.text-clamp,
        figcaption.text-clamp {
            text-wrap: pretty;
            max-width: 65ch;
        }

        .list-dash li::marker {
            content: "– ";
            font-weight: bold;
        }

        hr.hr-round {
            border: none;
            height: calc(var(--hr-size, 1px) * 2);
            background: var(--text-primary);
            border-radius: 100vw;
        }

        hr.hr-light {
            border: none;
            height: clamp(1px, var(--hr-size, 1px) * 0.5, 10px);
            background: var(--text-secondary);
        }

        nav.nav-styled {
            flex-direction: row;
            display: flex;
            align-items: center;
            padding: 3px 1rem 3px 1rem;
            overflow-x: auto;
        }

        nav.nav-styled>.nav-buttons {
            display: flex;
            flex-direction: row;
            gap: var(--grid-gap);
            padding: 0;
        }

        .nav-buttons a {
            background-color: var(--secondary);
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 2px solid var(--text-primary);
            padding: 5px;
            transition: all var(--trans-duration) var(--trans-type);
            text-wrap-mode: nowrap;
            border-radius: calc(var(--border-radius-base) * 0.5);
        }

        .nav-buttons a:visited {
            color: var(--text-primary);
        }

        .button-hollow {
            color: var(--text-primary);
            background-color: transparent;
            border: 2px solid var(--tertiary);
        }

        button.button-confirm,
        .button.button-confirm {
            background-color: var(--button-confirm);
            font-weight: bold;
            color: var(--button-text);
        }

        button.button-cancel,
        .button.button-cancel {
            background-color: var(--button-cancel);
            color: var(--button-text);
        }

        /* Styled Details/ Summary */

        .details-styled {
            width: 100%;
            margin: 10px 0px;
        }

        .details-styled>summary {
            padding: 10px;
            background-color: var(--bg-section);
            color: var(--text-inverse);
            font-weight: bold;
            border-radius: calc(var(--border-radius-base) * 0.5);
            user-select: none;
            cursor: pointer;
        }

        .details-styled>section {
            transition: max-height var(--trans-duration) var(--trans-type);
            background-color: var(--secondary);
            margin: 0px auto 5px auto;
            max-width: calc(100% - 1em);
            padding: 10px;
            border-radius: 0px 0px calc(var(--border-radius-base) * 0.5) calc(var(--border-radius-base) * 0.5);
        }

        /* Meters and Progress Bars */

        .progress-styled,
        .meter-styled {
            display: inline-block;
            width: 100%;
            height: 10px;
            border-radius: 1rem;
            overflow: hidden;
            margin: 0px;
        }

        /* Outer track */
        .progress-styled::-webkit-progress-bar,
        .meter-styled::-webkit-progress-bar {
            background-color: var(--bg-progress-shell);
            border-radius: 1rem;
        }

        /* Inner fill */
        .progress-styled::-webkit-progress-value,
        .meter-styled::-webkit-progress-value {
            background: var(--bg-progress-bar);
            border-radius: 1rem;
            transition: width var(--trans-duration) var(--trans-type);
        }


        /* Basic Styled Popover */
        .popover-styled {
            background-color: var(--bg-modal);
            color: var(--text-primary);
            box-shadow: var(--shadow);
            min-width: 150px;
        }

        .popover-styled>button,
        .popover-styled>a {
            background: none;
            box-shadow: none;
            margin: 0;
            padding: 5px 10px;
            color: var(--text-primary);
            border-radius: 0px;
            text-align: left;
            text-decoration: none;
            display: block;
        }

        .popover-styled>button:not(:last-child),
        .popover-styled>a:not(:last-child) {
            border-bottom: gray 1px solid;
        }

        .popover-styled>button:first-child,
        .popover-styled>a:first-child {
            border-radius: 10px 10px 0 0;
        }

        .popover-styled>button:last-child,
        .popover-styled>a:last-child {
            border-radius: 0 0 10px 10px;
        }

        .popover-styled>button:hover,
        .popover-styled>a:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .anchor-top {
            margin-block-end: 5px;
            bottom: anchor(top);
            left: anchor(center);
        }

        .anchor-bot {
            margin-block-start: 5px;
            top: anchor(bottom);
            left: anchor(center);
        }

        .anchor-right {
            margin-inline-start: 5px;
            top: anchor(start);
            left: anchor(right);
        }

        .anchor-top-left {
            margin-block-end: 5px;
            bottom: anchor(center);
            right: anchor(left);
        }

        .anchor-top-right {
            margin-block-end: 5px;
            bottom: anchor(top);
            left: anchor(right);
        }

        .anchor-bot-left {
            margin-block-start: 5px;
            top: anchor(bottom);
            right: anchor(left);
        }

        .anchor-bot-right {
            margin-block-start: 5px;
            top: anchor(bottom);
            left: anchor(right);
        }




        @position-try --bottom {
            inset: unset;
            margin: 0;
            margin-right: 5px;
        }

        /* General custom stylings */
        .section-bg {
            background-color: var(--bg-section, rgba(0, 0, 0, 0.7));
            border-radius: var(--border-radius-base);
            padding: var(--space-sm) var(--space-md);
            color: var(--text-inverse);
        }


    }

    @layer typeography {

        /* To be used to insert icons/ images inline with text and stay at the same size as the font. */
        .icon-inline {
            display: inline-block;
            width: 1.1cap;
            height: 1.1cap;
            background-color: currentColor;
            object-fit: contain;
            vertical-align: middle;
            margin-top: calc(1ex - 1cap);
            margin-inline: 0.5ex;
            border-radius: 0;
        }

        .icon-inline-2x {
            display: inline-block;
            width: 2.1cap;
            height: 2.1cap;
            background-color: currentColor;
            object-fit: contain;
            vertical-align: middle;
            margin-top: calc(1ex - 1cap);
            margin-inline: 0.5ex;
            border-radius: 0;
        }

        .dropcap::first-letter {
            float: left;
            font-size: 3.5cap;
            line-height: 1;
            margin-right: 0.3rem;
            font-weight: bold;
        }

        .lowercase {
            text-transform: lowercase;
        }

        .uppercase {
            text-transform: uppercase;
        }

        .small-caps {
            font-variant-caps: all-small-caps;
        }

        .num-mono {
            /* Forces numbers to be like mono fonts.*/
            font-variant-numeric: tabular-nums;
        }

        .num-oldstyle {
            font-variant-numeric: oldstyle-nums;
        }

        .num-fraction {
            /* Changes the apperance of numbers written as a fraction like 1/3 to display more like a fraction without additional spans or classes needed & maintaining simple selectability. */
            font-variant-numeric: diagonal-fractions;
        }

        .notation-chemical {
            /* For supported fonts, the text will use proper chemical notation instead of the default visuals. */
            font-feature-settings: "sinf";
        }

        .marker-colored ::marker {
            color: var(--accent);
        }

        .underline-accent {
            text-decoration: underline;
            text-decoration-color: var(--accent);
            text-decoration-thickness: 3px;
        }

        .text-sub {
            color: var(--text-secondary);
            font-weight: 600;
            font-style: italic;
            opacity: 0.7;
        }

        .tiled-bg {
            background-size: 150px;
            background-repeat: round;
            background-image: var(--bg-image, linear-gradient(blue, red));
        }

        .text-shadow-3d {
            text-shadow: 2px 2px 0 var(--font-accent);
        }

        /*Will make the text mask the background image set. Recommended for use on bold weighted titles only.*/
        .text-image {
            --text-image: linear-gradient(90deg, red, blue);
            background-image: var(--text-image);
            background-size: cover;
            -webkit-background-clip: text;
            background-clip: text;
            color: rgba(131, 131, 131, 0.3);
        }
    }

    /* //// DESIGN CLASSES - GLASSY */
    @layer style-glassy {
        .glassy-bg {
            background-color: var(--tertiary);
            border-radius: var(--border-radius-base);
            border: transparent 1px solid;
            background: var(--glassy-bg-primary);
            opacity: 0.8;
        }
    }


    @layer accessibility {

        /* Should be placed on the most senior parent container for all children to be affected */
        .debug * {
            outline: 1px solid red;
        }

        /*The .sr-only class works by visually hiding content while keeping it accessible to screen readers. Here's how:*/
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .sr-only-focusable:focus {
            position: static;
            width: auto;
            height: auto;
            padding: inherit;
            margin: inherit;
            overflow: visible;
            clip: auto;
            white-space: normal;
        }

        /* A button/ anchor that will only appear when using keyboard navigation.
        This should be the first interactable element on a page. */
        .skip-navigation {
            position: absolute;
            transform: translateY(-120%);
            background-color: var(--button-base);
            color: var(--button-text);
            border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
            padding: var(--space-sm);
            top: 0px;
            left: 0.5rem;
            transition: transform var(--trans-duration) var(--trans-type);
            z-index: 1001;
        }

        .skip-navigation:focus {
            transform: translateY(0);
        }
    }
}













dialog:has(.to-left),
.modal:has(.to-left) {
    padding-top: 40px;
}

dialog .to-left,
.modal .to-left {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 0px;
}










/* //// DESIGN - VISUALS */



/* //// SPECIFIC ELEMENT STATES */







.loading {
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
    position: relative;
    will-change: transform;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--text-secondary);
    border-top-color: var(--link);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}



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

.skeleton {
    display: flex;
    justify-self: left;
    background: var(--skeleton-gradient);
    background-size: 200% 100%;
    animation: skeleton-loading 2s infinite;
    position: relative;
    overflow: hidden;
}

.skeleton * {
    visibility: hidden;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* //// ACCESSIBILTY CLASSES */



/* //// INTERACTION TRANSFORMS

/* Micro-interactions */
.int-jump-up {
    transform-origin: center;
    transition:
        transform var(--trans-duration) var(--trans-type),
        box-shadow var(--trans-duration) var(--trans-type);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.int-jump-up:hover:not(:disabled) {
    transform: translateY(calc(-3px * var(--interaction-strength, 1)));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.int-jump-up:active:not(:disabled) {
    transform: translateY(0) scale(calc(1.02 * var(--interaction-strength, 1)));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


.int-pop-out {
    transform-origin: center;
    transition:
        transform var(--trans-duration) var(--trans-type),
        box-shadow var(--trans-duration) var(--trans-type);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.int-pop-out:hover:not(:disabled) {
    transform: scale(calc(1.02 * var(--interaction-strength, 1)));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.int-pop-out:active:not(:disabled) {
    transform: scale(calc(0.98 * var(--interaction-strength, 1)));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}


.int-brighten {
    transition:
        filter var(--trans-duration) var(--trans-type);
    filter: brightness(1);
}

.int-brighten:hover:not(:disabled) {
    filter: brightness(1.15);
}

.int-ghost-hover {
    opacity: 0.5;
    transition: opacity var(--trans-duration) var(--trans-type);
}

.int-ghost-hover:hover {
    opacity: 1.0;
}

/* This interaction must be used within a container with the class .mask-square attached */
/*
<div class="mask-square">
    <img class="int-zoom-in">
</div>
*/
.int-zoom-in {
    transform: scale(1);
    transition: transform var(--trans-duration) var(--trans-type);
}

.int-zoom-in:hover {
    transform: scale(1.1);
}

/* //// MEDIA QUERIES */

@media (max-width: 768px) {

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}


/* Only apply on touch devices */
@media (hover: none) and (pointer: coarse) {

    /* Mobile-specific touch optimizations */
    button,
    .button,
    input,
    select,
    textarea,
    [tabindex],
    [role="button"],
    [role="link"],
    [onclick] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: var(--tap-highlight-color);
        /* Slightly larger touch targets on mobile */
        min-height: 44px;
        /* Apple's recommended minimum */
        min-width: 44px;
    }

    /* Prevent zoom on input focus */
    input,
    textarea,
    select {
        font-size: max(16px, 1rem);
        /* 16px minimum prevents iOS zoom */
    }

    /* Better mobile keyboard handling */
    input[type="email"] {
        text-transform: none;
    }

    input[type="url"] {
        text-transform: none;
    }

    input[type="tel"] {
        text-transform: none;
    }

    /* Optimize input types for mobile keyboards */
    input[inputmode="numeric"] {
        font-variant-numeric: tabular-nums;
    }
}



@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 3rem;
    }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {

    :root {
        --trans-duration: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


@media print {

    /* Smart print styles most libraries ignore */
    .no-print {
        display: none !important;
    }

    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: var(--text-secondary);
    }

    /* Prevent awkward page breaks */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Optimize colors for print */
    :root {
        --primary: white;
        --secondary: white;
        --text-primary: black;
        --text-inverse: black;
        --shadow: none;
    }
}