/* @import url("/Styles/Library/vars.css"); */
/* This file contains CSS variables for the AccountingCompleted website.
    It defines colors, fonts, and other design tokens used throughout the site.
    I'm setting up data-bs-theme attributes for light and dark modes in common.js. */

@import url("https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/* -- Catppuccin Latte (light palette) ------------------------------------- */
/* Hex fallback declared first; oklch override wins in all modern browsers   */
:root {
    --cat-l-rosewater: #dc8a78;
    --cat-l-rosewater: oklch(0.714 0.105 33.097);
    --cat-l-flamingo: #dd7878;
    --cat-l-flamingo: oklch(0.686 0.126 20.867);
    --cat-l-pink: #ea76cb;
    --cat-l-pink: oklch(0.726 0.174 338.433);
    --cat-l-mauve: #8839ef;
    --cat-l-mauve: oklch(0.555 0.25 297.016);
    --cat-l-red: #d20f39;
    --cat-l-red: oklch(0.55 0.216 19.809);
    --cat-l-maroon: #e64553;
    --cat-l-maroon: oklch(0.625 0.197 20.272);
    --cat-l-peach: #fe640b;
    --cat-l-peach: oklch(0.692 0.204 42.429);
    --cat-l-yellow: #df8e1d;
    --cat-l-yellow: oklch(0.714 0.149 67.777);
    --cat-l-green: #40a02b;
    --cat-l-green: oklch(0.625 0.177 140.445);
    --cat-l-teal: #179299;
    --cat-l-teal: oklch(0.602 0.098 201.105);
    --cat-l-sky: #04a5e5;
    --cat-l-sky: oklch(0.682 0.145 235.382);
    --cat-l-sapphire: #209fb5;
    --cat-l-sapphire: oklch(0.648 0.107 212.889);
    --cat-l-blue: #1e66f5;
    --cat-l-blue: oklch(0.559 0.226 262.087);
    --cat-l-lavender: #7287fd;
    --cat-l-lavender: oklch(0.664 0.175 273.135);
    --cat-l-text: #4c4f69;
    --cat-l-text: oklch(0.435 0.043 279.325);
    --cat-l-subtext1: #5c5f77;
    --cat-l-subtext1: oklch(0.492 0.038 279.299);
    --cat-l-subtext0: #6c6f85;
    --cat-l-subtext0: oklch(0.547 0.034 279.084);
    --cat-l-overlay2: #7c7f93;
    --cat-l-overlay2: oklch(0.601 0.03 278.694);
    --cat-l-overlay1: #8c8fa1;
    --cat-l-overlay1: oklch(0.654 0.027 278.121);
    --cat-l-overlay0: #9ca0b0;
    --cat-l-overlay0: oklch(0.708 0.024 274.601);
    --cat-l-surface2: #acb0be;
    --cat-l-surface2: oklch(0.758 0.02 273.154);
    --cat-l-surface1: #bcc0cc;
    --cat-l-surface1: oklch(0.808 0.017 271.198);
    --cat-l-surface0: #ccd0da;
    --cat-l-surface0: oklch(0.857 0.014 268.476);
    --cat-l-base: #eff1f5;
    --cat-l-base: oklch(0.958 0.006 264.532);
    --cat-l-mantle: #e6e9ef;
    --cat-l-mantle: oklch(0.933 0.009 264.521);
    --cat-l-crust: #dce0e8;
    --cat-l-crust: oklch(0.906 0.012 264.507);
    /* -- Catppuccin Mocha (dark palette) --------------------------------- */
    --cat-m-rosewater: #f5e0dc;
    --cat-m-rosewater: oklch(0.923 0.024 30.492);
    --cat-m-flamingo: #f2cdcd;
    --cat-m-flamingo: oklch(0.88 0.042 17.975);
    --cat-m-pink: #f5c2e7;
    --cat-m-pink: oklch(0.87 0.075 336.304);
    --cat-m-mauve: #cba6f7;
    --cat-m-mauve: oklch(0.787 0.119 304.769);
    --cat-m-red: #f38ba8;
    --cat-m-red: oklch(0.756 0.13 2.764);
    --cat-m-maroon: #eba0ac;
    --cat-m-maroon: oklch(0.782 0.09 8.848);
    --cat-m-peach: #fab387;
    --cat-m-peach: oklch(0.824 0.101 52.629);
    --cat-m-yellow: #f9e2af;
    --cat-m-yellow: oklch(0.919 0.07 86.528);
    --cat-m-green: #a6e3a1;
    --cat-m-green: oklch(0.858 0.109 142.715);
    --cat-m-teal: #94e2d5;
    --cat-m-teal: oklch(0.858 0.079 182.75);
    --cat-m-sky: #89dceb;
    --cat-m-sky: oklch(0.847 0.083 210.255);
    --cat-m-sapphire: #74c7ec;
    --cat-m-sapphire: oklch(0.791 0.096 228.653);
    --cat-m-blue: #89b4fa;
    --cat-m-blue: oklch(0.766 0.111 259.885);
    --cat-m-lavender: #b4befe;
    --cat-m-lavender: oklch(0.817 0.091 277.309);
    --cat-m-text: #cdd6f4;
    --cat-m-text: oklch(0.879 0.043 272.277);
    --cat-m-subtext1: #bac2de;
    --cat-m-subtext1: oklch(0.817 0.04 272.862);
    --cat-m-subtext0: #a6adc8;
    --cat-m-subtext0: oklch(0.751 0.04 273.932);
    --cat-m-overlay2: #9399b2;
    --cat-m-overlay2: oklch(0.687 0.037 274.725);
    --cat-m-overlay1: #7f849c;
    --cat-m-overlay1: oklch(0.618 0.037 276.005);
    --cat-m-overlay0: #6c7086;
    --cat-m-overlay0: oklch(0.55 0.034 277.095);
    --cat-m-surface2: #585b70;
    --cat-m-surface2: oklch(0.477 0.034 278.643);
    --cat-m-surface1: #45475a;
    --cat-m-surface1: oklch(0.404 0.032 280.152);
    --cat-m-surface0: #313244;
    --cat-m-surface0: oklch(0.324 0.032 281.978);
    --cat-m-base: #1e1e2e;
    --cat-m-base: oklch(0.243 0.03 283.911);
    --cat-m-mantle: #181825;
    --cat-m-mantle: oklch(0.216 0.025 284.065);
    --cat-m-crust: #11111b;
    --cat-m-crust: oklch(0.183 0.02 284.204);
    /* -- Current Cat --*/
    --cat-rosewater: var(--cat-l-rosewater);
    --cat-flamingo: var(--cat-l-flamingo);
    --cat-pink: var(--cat-l-pink);
    --cat-mauve: var(--cat-l-mauve);
    --cat-red: var(--cat-l-red);
    --cat-maroon: var(--cat-l-maroon);
    --cat-peach: var(--cat-l-peach);
    --cat-yellow: var(--cat-l-yellow);
    --cat-green: var(--cat-l-green);
    --cat-teal: var(--cat-l-teal);
    --cat-sky: var(--cat-l-sky);
    --cat-sapphire: var(--cat-l-sapphire);
    --cat-blue: var(--cat-l-blue);
    --cat-lavender: var(--cat-l-lavender);
    --cat-text: var(--cat-l-text);
    --cat-subtext1: var(--cat-l-subtext1);
    --cat-subtext0: var(--cat-l-subtext0);
    --cat-overlay2: var(--cat-l-overlay2);
    --cat-overlay1: var(--cat-l-overlay1);
    --cat-overlay0: var(--cat-l-overlay0);
    --cat-surface2: var(--cat-l-surface2);
    --cat-surface1: var(--cat-l-surface1);
    --cat-surface0: var(--cat-l-surface0);
    --cat-base: var(--cat-l-base);
    --cat-mantle: var(--cat-l-mantle);
    --cat-crust: var(--cat-l-crust);
    /* -- Brand colours ---------------------------------------------------- */
    --color-primary: #5ba8d4;
    --color-primary: oklch(0.7 0.1 235.693);
    --color-secondary: #083b78;
    --color-secondary: oklch(0.359 0.116 256.502);
    --color-accent: #f5960e;
    --color-accent: oklch(0.755 0.166 65.638);
    /* -- Semantic tokens — light mode (Latte) ----------------------------- */
    color-scheme: light dark;
    font-size: 16px;
    --color-surface-1: #363a4f;
    --color-surface-1-soft: color-mix(in oklab, var(--color-surface-1), white 14%);
    --color-text: var(--cat-text);
    --color-text-light: var(--cat-m-text); /* always light — for text on dark surfaces */
    --color-text-muted: var(--cat-subtext1);
    --color-text-subtle: var(--cat-subtext0);
    --color-text-strong: var(--cat-text);
    --color-text-muted-strong: var(--cat-subtext1);
    --color-bg-light: var(--cat-mantle);
    --color-bg-light-trans: color-mix(in oklch, var(--cat-mantle) 75%, transparent);
    --color-bg-dark: var(--cat-base);
    --color-bg-dark-trans: color-mix(in oklch, var(--cat-base) 75%, transparent);
    --color-border-subtle: var(--cat-surface1);
    --color-border-muted: var(--cat-surface2);
    --color-border: var(--cat-overlay0);
    --color-border-strong: var(--cat-overlay2);
    --color-border-header: var(--cat-subtext1);
    --color-border-dashed-muted: var(--cat-overlay0);
    --color-panel-bg: var(--cat-mantle);
    --color-link-strong: var(--cat-blue);
    --color-table-fullspan-link: var(--cat-sky);
    --color-primary-soft: color-mix(in oklch, var(--color-primary) 53%, transparent);
    --color-secondary-soft: color-mix(in oklch, var(--color-secondary) 53%, transparent);
    --color-modal-overlay: #000000;
    --color-modal-overlay-dark: var(--cat-m-mantle);
    --color-btn-disabled-bg: color-mix(in oklch, var(--color-primary), var(--cat-overlay0) 40%);
    --color-btn-disabled-text: var(--cat-overlay1);
    /* warning → Latte Yellow */
    --color-warning: var(--cat-yellow);
    --color-warning-focus: color-mix(in oklch, var(--cat-yellow), black 22%);
    --color-warning-glow: color-mix(in oklch, var(--cat-yellow), white 52%);
    --color-warning-bg: color-mix(in oklch, var(--cat-yellow), var(--cat-base) 88%);
    /* error → Latte Maroon (softer than Red for UI alerts) */
    --color-error: var(--cat-maroon);
    --color-error-focus: color-mix(in oklch, var(--cat-maroon), black 22%);
    --color-error-glow: color-mix(in oklch, var(--cat-maroon), white 48%);
    --color-error-bg: color-mix(in oklch, var(--cat-maroon), var(--cat-base) 88%);
    /* success → Latte Green */
    --color-success: var(--cat-green);
    --color-success-focus: color-mix(in oklch, var(--cat-green), black 22%);
    --color-success-glow: color-mix(in oklch, var(--cat-green), white 48%);
    --color-success-bg: color-mix(in oklch, var(--cat-green), var(--cat-base) 88%);
    /* info → Latte Sapphire */
    --color-info: var(--cat-sapphire);
    --color-info-focus: color-mix(in oklch, var(--cat-sapphire), black 22%);
    --color-info-glow: color-mix(in oklch, var(--cat-sapphire), white 48%);
    --color-info-bg: color-mix(in oklch, var(--cat-sapphire), var(--cat-base) 88%);
    --color-checkbox-checked-bg: color-mix(in oklch, var(--cat-green), white 50%);
    --color-checkbox-checked-border: var(--cat-green);
    --color-midtone: var(--cat-overlay0);
    --color-pink: var(--cat-rosewater);
    /* -- Typography / Bootstrap wiring ----------------------------------- */
    --font-base: 'Karla', Arial, sans-serif;
    --font-mono: 'Cousine', monospace;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --bs-body-font-family: var(--font-base);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-line-height: var(--line-height-base);
    --bs-body-bg: var(--color-bg-dark);
    --bs-body-color: var(--color-text);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 84, 163, 212;
    --bs-link-hover-color: color-mix(in oklch, var(--color-primary), black 20%);
    --bs-link-hover-color-rgb: 4, 68, 124;
    --bs-border-color: var(--color-border-muted);
    --bs-accordion-border-color: var(--color-border-muted);
    --bs-card-border-color: var(--bs-border-color);
    --bs-navbar-bg: var(--color-bg-light-trans);
    --bs-primary: var(--color-primary);
    --bs-secondary: var(--color-secondary);
    --bs-warning: var(--color-accent);
    --belowdate: 8px;
    --sm3font: 12pt;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) {
        color-scheme: dark;
        --cat-rosewater: var(--cat-m-rosewater);
        --cat-flamingo: var(--cat-m-flamingo);
        --cat-pink: var(--cat-m-pink);
        --cat-mauve: var(--cat-m-mauve);
        --cat-red: var(--cat-m-red);
        --cat-maroon: var(--cat-m-maroon);
        --cat-peach: var(--cat-m-peach);
        --cat-yellow: var(--cat-m-yellow);
        --cat-green: var(--cat-m-green);
        --cat-teal: var(--cat-m-teal);
        --cat-sky: var(--cat-m-sky);
        --cat-sapphire: var(--cat-m-sapphire);
        --cat-blue: var(--cat-m-blue);
        --cat-lavender: var(--cat-m-lavender);
        --cat-text: var(--cat-m-text);
        --cat-subtext1: var(--cat-m-subtext1);
        --cat-subtext0: var(--cat-m-subtext0);
        --cat-overlay2: var(--cat-m-overlay2);
        --cat-overlay1: var(--cat-m-overlay1);
        --cat-overlay0: var(--cat-m-overlay0);
        --cat-surface2: var(--cat-m-surface2);
        --cat-surface1: var(--cat-m-surface1);
        --cat-surface0: var(--cat-m-surface0);
        --cat-base: var(--cat-m-base);
        --cat-mantle: var(--cat-m-mantle);
        --cat-crust: var(--cat-m-crust);
        --color-accent: var(--cat-mauve);
        --color-surface-1-soft: color-mix(in oklab, var(--color-surface-1), black 10%);
        --color-text: var(--cat-text);
        --color-text-muted: var(--cat-subtext1);
        --color-text-subtle: var(--cat-subtext0);
        --color-text-strong: var(--cat-text);
        --color-text-muted-strong: var(--cat-subtext0);
        --color-bg-light: var(--cat-surface0);
        --color-bg-light-trans: color-mix(in oklch, var(--cat-surface0) 50%, transparent);
        --color-bg-dark: var(--cat-base);
        --color-bg-dark-trans: color-mix(in oklch, var(--cat-base) 75%, transparent);
        --color-border-subtle: var(--cat-surface2);
        --color-border-muted: var(--cat-overlay0);
        --color-border: var(--cat-overlay1);
        --color-border-strong: var(--cat-overlay2);
        --color-border-header: var(--cat-surface2);
        --color-border-dashed-muted: var(--cat-overlay1);
        --color-panel-bg: var(--cat-surface0);
        --color-link-strong: var(--cat-blue);
        --color-btn-disabled-text: var(--cat-subtext0);
        --color-warning: var(--cat-yellow);
        --color-warning-focus: color-mix(in oklch, var(--cat-yellow), black 22%);
        --color-warning-glow: color-mix(in oklch, var(--cat-yellow), var(--cat-surface0) 60%);
        --color-warning-bg: color-mix(in oklch, var(--cat-yellow), var(--cat-base) 88%);
        --color-error: var(--cat-maroon);
        --color-error-focus: color-mix(in oklch, var(--cat-maroon), black 22%);
        --color-error-glow: color-mix(in oklch, var(--cat-maroon), var(--cat-surface0) 60%);
        --color-error-bg: color-mix(in oklch, var(--cat-maroon), var(--cat-base) 88%);
        --color-success: var(--cat-green);
        --color-success-focus: color-mix(in oklch, var(--cat-green), black 22%);
        --color-success-glow: color-mix(in oklch, var(--cat-green), var(--cat-surface0) 60%);
        --color-success-bg: color-mix(in oklch, var(--cat-green), var(--cat-base) 88%);
        --color-info: var(--cat-sapphire);
        --color-info-focus: color-mix(in oklch, var(--cat-sapphire), black 22%);
        --color-info-glow: color-mix(in oklch, var(--cat-sapphire), var(--cat-surface0) 60%);
        --color-info-bg: color-mix(in oklch, var(--cat-sapphire), var(--cat-base) 88%);
        --color-checkbox-checked-bg: color-mix(in oklch, var(--cat-green), var(--cat-surface0) 50%);
        --color-checkbox-checked-border: var(--cat-green);
        --color-midtone: var(--cat-overlay0);
        --color-pink: var(--cat-rosewater);
        --bs-link-hover-color: var(--cat-lavender);
        --bs-link-hover-color-rgb: 160, 208, 238;
    }
}

:root[data-bs-theme="light"] {
    color-scheme: light;
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 84, 163, 212;
    --bs-link-hover-color: color-mix(in oklch, var(--color-primary), black 20%);
    --bs-link-hover-color-rgb: 4, 68, 124;
}

@media not print {
    :root[data-bs-theme="dark"] {
        color-scheme: dark;
        --cat-rosewater: var(--cat-m-rosewater);
        --cat-flamingo: var(--cat-m-flamingo);
        --cat-pink: var(--cat-m-pink);
        --cat-mauve: var(--cat-m-mauve);
        --cat-red: var(--cat-m-red);
        --cat-maroon: var(--cat-m-maroon);
        --cat-peach: var(--cat-m-peach);
        --cat-yellow: var(--cat-m-yellow);
        --cat-green: var(--cat-m-green);
        --cat-teal: var(--cat-m-teal);
        --cat-sky: var(--cat-m-sky);
        --cat-sapphire: var(--cat-m-sapphire);
        --cat-blue: var(--cat-m-blue);
        --cat-lavender: var(--cat-m-lavender);
        --cat-text: var(--cat-m-text);
        --cat-subtext1: var(--cat-m-subtext1);
        --cat-subtext0: var(--cat-m-subtext0);
        --cat-overlay2: var(--cat-m-overlay2);
        --cat-overlay1: var(--cat-m-overlay1);
        --cat-overlay0: var(--cat-m-overlay0);
        --cat-surface2: var(--cat-m-surface2);
        --cat-surface1: var(--cat-m-surface1);
        --cat-surface0: var(--cat-m-surface0);
        --cat-base: var(--cat-m-base);
        --cat-mantle: var(--cat-m-mantle);
        --cat-crust: var(--cat-m-crust);
        --color-accent: var(--cat-mauve);
        --color-surface-1-soft: color-mix(in oklab, var(--color-surface-1), black 10%);
        --color-text: var(--cat-text);
        --color-text-muted: var(--cat-subtext1);
        --color-text-subtle: var(--cat-subtext0);
        --color-text-strong: var(--cat-text);
        --color-text-muted-strong: var(--cat-subtext0);
        --color-bg-light: var(--cat-surface0);
        --color-bg-light-trans: color-mix(in oklch, var(--cat-surface0) 50%, transparent);
        --color-bg-dark: var(--cat-base);
        --color-bg-dark-trans: color-mix(in oklch, var(--cat-base) 75%, transparent);
        --color-border-subtle: var(--cat-surface2);
        --color-border-muted: var(--cat-overlay0);
        --color-border: var(--cat-overlay1);
        --color-border-strong: var(--cat-overlay2);
        --color-border-header: var(--cat-surface2);
        --color-border-dashed-muted: var(--cat-overlay1);
        --color-panel-bg: var(--cat-surface0);
        --color-link-strong: var(--cat-blue);
        --color-btn-disabled-text: var(--cat-subtext0);
        --color-warning: var(--cat-yellow);
        --color-warning-focus: color-mix(in oklch, var(--cat-yellow), black 22%);
        --color-warning-glow: color-mix(in oklch, var(--cat-yellow), var(--cat-surface0) 60%);
        --color-warning-bg: color-mix(in oklch, var(--cat-yellow), var(--cat-base) 88%);
        --color-error: var(--cat-maroon);
        --color-error-focus: color-mix(in oklch, var(--cat-maroon), black 22%);
        --color-error-glow: color-mix(in oklch, var(--cat-maroon), var(--cat-surface0) 60%);
        --color-error-bg: color-mix(in oklch, var(--cat-maroon), var(--cat-base) 88%);
        --color-success: var(--cat-green);
        --color-success-focus: color-mix(in oklch, var(--cat-green), black 22%);
        --color-success-glow: color-mix(in oklch, var(--cat-green), var(--cat-surface0) 60%);
        --color-success-bg: color-mix(in oklch, var(--cat-green), var(--cat-base) 88%);
        --color-info: var(--cat-sapphire);
        --color-info-focus: color-mix(in oklch, var(--cat-sapphire), black 22%);
        --color-info-glow: color-mix(in oklch, var(--cat-sapphire), var(--cat-surface0) 60%);
        --color-info-bg: color-mix(in oklch, var(--cat-sapphire), var(--cat-base) 88%);
        --color-checkbox-checked-bg: color-mix(in oklch, var(--cat-green), var(--cat-surface0) 50%);
        --color-checkbox-checked-border: var(--cat-green);
        --color-midtone: var(--cat-overlay0);
        --color-pink: var(--cat-rosewater);
        --bs-body-bg: var(--color-bg-dark);
        --bs-body-color: var(--color-text);
        --bs-link-color: var(--color-primary);
        --bs-link-color-rgb: 84, 163, 212;
        --bs-link-hover-color: var(--cat-lavender);
        --bs-link-hover-color-rgb: 160, 208, 238;
        --bs-border-color: var(--color-border-muted);
        --bs-accordion-border-color: var(--color-border-muted);
        --bs-card-border-color: var(--bs-border-color);
        --bs-navbar-bg: var(--color-bg-light-trans);
        --bs-primary: var(--color-primary);
        --bs-secondary: var(--color-secondary);
        --bs-warning: var(--color-accent);
    }

    :root[data-font-size="small"] {
        font-size: 9pt;
    }

    body {
        color: var(--color-text);
        background-color: var(--color-bg-dark);
    }
}

.navbar, .navbar-nav, .btn, .card {
    --bs-navbar-color: var(--color-text);
    --bs-navbar-hover-color: var(--color-primary) !important;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-card-bg: var(--color-bg-light);
}

.tncagree {
    padding-top: 2%;
}

:is(.tncagree, .chxbox) {
    user-select: none;
    display: flex;
    flex-direction: column;
}

    :is(.tncagree, .chxbox) label {
        display: block;
        width: 30ch;
        margin: 0 auto;
        background: var(--color-bg-light-trans);
        border-radius: 0.5em;
        border: 1px dashed var(--color-border-dashed-muted, #aaa);
        padding: 1em;
        transition: background 0.5s, border 0.5s;
        cursor: pointer;
        opacity: 1;
        box-sizing: border-box;
    }

        :is(.tncagree, .chxbox) label:has(input[type="checkbox"]) {
            display: grid;
            grid-template-columns: 1.5em minmax(0, 1fr);
            column-gap: 0.5em;
            align-items: center;
        }

        :is(.tncagree, .chxbox) label#theme-switch {
            display: block;
            padding-left: 3em;
        }

            :is(.tncagree, .chxbox) label#theme-switch:before {
                content: "\f185";
                display: inline-block;
                position: relative;
                width: 0;
                top: 0;
                left: -2em;
                font: normal normal normal 14px / 1 FontAwesome;
            }

        :is(.tncagree, .chxbox) label:hover {
            background: var(--color-bg-light);
        }

        :is(.tncagree, .chxbox) label:active {
            background: var(--color-border-dashed-muted, #aaa);
            border-style: solid;
        }

        :is(.tncagree, .chxbox) label:has(input[type="checkbox"]) > input[type="checkbox"] {
            grid-column: 1;
            align-self: center;
            justify-self: center;
            margin: 0;
            width: 1rem !important;
            height: 1rem;
        }

@media not print {
    :root[data-bs-theme="dark"][data-font-size="small"] :is(.tncagree, .chxbox) label#font-switch {
        background: var(--color-secondary, lightgreen);
        border: 1px solid var(--color-primary, darkgreen);
    }

    :root[data-bs-theme="dark"] :is(.tncagree, .chxbox) label#theme-switch:before {
        content: "\f186";
    }
}

:is(.tncagree, .chxbox) label:has(input[type="checkbox"]) > .toggle-copy {
    grid-column: 2;
    min-width: 0;
}

:is(.tncagree, .chxbox) label#theme-switch > input[type="checkbox"] {
    display: none;
}

:root[data-font-size="small"] :is(.tncagree, .chxbox) label#font-switch {
    background: var(--color-checkbox-checked-bg, lightgreen);
    border: 1px solid var(--color-checkbox-checked-border, darkgreen);
}

:is(.tncagree, .chxbox) input + h4 {
    display: block;
}

:is(.tncagree, .chxbox) input[type="checkbox"] {
    width: auto !important;
}

#theme-switch {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    line-height: 2rem;
    border-radius: 1em;
    align-self: center;
    flex-direction: row;

    :is(.bi, .fa) {
        color: var(--color-text);
        font-size: 1.25rem;
        display: none;
    }

    :is(.bi-sun, .fa-sun-o) {
        display: inline-block;
    }
}

#theme-switch, #lblSmolFont {
    cursor: pointer;

    .fa-fw {
        width: 1em;
    }
}

:root[data-bs-theme="dark"] #theme-switch {
    :is(.bi-sun, .fa-sun-o) {
        display: none;
    }

    :is(.bi-moon, .fa-moon-o) {
        display: inline-block;
    }
}

@media (forced-colors: active) {
    * {
        forced-color-adjust: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}