/* cosmoCSS v1.0.0
 * Created by Pablo Enoc (https://enocc.com)
 * Copyright (c) 2025
 * MIT License
 *
 * with signficant code from:
 *
 * Modern Classless CSS Framework v1.0
 * Created by Luke Heyburn
 * Digitally Tailored (https://digitallytailored.com)
 * MIT License
 *
*/

* {
    box-sizing: border-box;
}

:root {
    /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --fs--2: clamp(0.6944rem, 0.6643rem + 0.151vw, 0.7813rem);
    --fs--1: clamp(0.8333rem, 0.7971rem + 0.1812vw, 0.9375rem);
    --fs-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
    --fs-1: clamp(1.2rem, 1.1478rem + 0.2609vw, 1.35rem);
    --fs-2: clamp(1.44rem, 1.3774rem + 0.313vw, 1.62rem);
    --fs-3: clamp(1.728rem, 1.6529rem + 0.3757vw, 1.944rem);
    --fs-4: clamp(2.0736rem, 1.9834rem + 0.4508vw, 2.3328rem);
    --fs-5: clamp(2.4883rem, 2.3801rem + 0.5409vw, 2.7994rem);

    /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
    --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
    --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
    --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);

    /* One-up pairs */
    --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);

    /* Custom pairs */
    --space-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem);

    /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --grid-max-width: 920px;
    --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
    --grid-columns: 12;

    --font-family-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    /* Colors */
    --color-bg: #fff;
    --color-bg-secondary: #f3f3f3;
    --color-text-primary: #334159;
    --color-text-secondary: #64748b;
    --color-text-secondary-light: #94a3b8;
    --color-primary: #353739;
    --color-primary-light: #495766;
    --color-primary-contrast: #6b7990;
    --color-primary-invert: #364153;
    --color-secondary: #505968;
    --color-secondary-light: #808794;
    --color-code-bg: #f9f2f4;
    --color-link: #0071e3;
    --color-link-hover: #0b65ff;
    --color-border: #e2e8f0;
    --color-progress: #339a48;
    --color-notice: aliceblue;
    --success: #10b981;
    --success-light: #34d399;
    --danger: #ef4444;
    --danger-light: #f87171;
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --info: #0ea5e9;
    --info-light: #38bdf8;

    /* Animation */
    --transition-base: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;

    /* Gradients */
    --gradient-link: linear-gradient(
        135deg,
        var(--color-link) 0%,
        var(--color-link-hover) 100%
    );

    /* Used in primary buttons */
    --gradient-primary: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-contrast) 100%
    );

    /* Used in disabled buttons */
    --gradient-secondary: linear-gradient(
        135deg,
        var(--color-secondary) 0%,
        var(--color-secondary-light) 100%
    );

    --gradient-success: linear-gradient(
        135deg,
        var(--success) 0%,
        var(--success-light) 100%
    );
    --gradient-danger: linear-gradient(
        135deg,
        var(--danger) 0%,
        var(--danger-light) 100%
    );
    --gradient-warning: linear-gradient(
        135deg,
        var(--warning) 0%,
        var(--warning-light) 100%
    );
    --gradient-info: linear-gradient(
        135deg,
        var(--info) 0%,
        var(--info-light) 100%
    );

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);

    /* Border radius */
    --border-radius: var(--space-3xs);
}

/* Dark mode */

@media (prefers-color-scheme: dark) {
    :root {
        /* Colors */
        --color-bg: rgb(17 18 20);
        --color-bg-secondary: rgb(35 35 41);

        --color-text-primary: #e9eaed;
        --color-text-secondary: #94a3b8;
        --color-text-secondary-light: #64748b;

        --color-primary: #353739;
        --color-primary-light: #495766;
        --color-primary-contrast: #3e4349;
        --color-primary-invert: #e9eaed;

        --color-secondary: #2c3647;
        --color-secondary-light: #808794;

        --color-code-bg: #301a20;

        --color-link: #2e89e5;
        --color-link-hover: #429efb;
        --color-border: #565d6a;
        --color-progress: #339a48;
        --color-notice: #053157;

        --success: #1f8c68;
        --success-light: #32d398;
        --danger: #c52020;
        --danger-light: #ff4646;
        --warning: #e89b1a;
        --warning-light: #fbbf24;
        --info: #117fb0;
        --info-light: #38bdf8;
    }
}

.u-container,
body {
    max-width: var(--grid-max-width);
    padding-inline: var(--grid-gutter);
    margin-inline: auto;
}

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

/* CosmoCSS */

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--fs-0);
    line-height: var(--space-m);
    transition: var(--transition-slow);
    animation: fadeIn 0.5s ease-out;
}

main {
    flex-grow: 1;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-weight: bold;
    scroll-margin-top: var(--space-l);
}

h1 {
    font-size: var(--fs-5);
    line-height: var(--fs-4);
    margin-block: var(--space-l) var(--space-s-m);
}

h2 {
    font-size: var(--fs-4);
    line-height: var(--fs-3);
    margin-block: var(--space-l) var(--space-s-m);
}

h3 {
    font-size: var(--fs-3);
    line-height: var(--fs-2);
    margin-block: var(--space-l) var(--space-s-m);
}

h4 {
    font-size: var(--fs-2);
    line-height: var(--fs-1);
    margin-block: var(--space-m) var(--space-s);
}

h5 {
    font-size: var(--fs-1);
    line-height: var(--fs-0);
    margin-block: var(--space-m) var(--space-s);
}

h6 {
    font-size: var(--fs-0);
    line-height: var(--fs--1);
    margin-block: var(--space-m) var(--space-s);
}

p {
    font-size: var(--fs-0);
    margin-block: var(--space-s-m) var(--space-s);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--transition-base);
    position: relative;
    width: fit-content;
}

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

a:before {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background: var(--gradient-link);
    transform-origin: bottom left;
    transition: transform 0.3s ease-out;
}

a:hover:before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

a[target="_blank"]:after {
    content: "[↗]";
    display: inline-block;
    margin-left: 0.25em;
    font-size: 0.6em;
    font-weight: bold;
    text-decoration: none;
    vertical-align: super;
}

small {
    font-size: 80%;
}

code {
    font-family: var(--font-family-mono);
    background-color: var(--color-code-bg);
    border-radius: 4px;
    color: #c7254e;
    font-size: 85%;
    padding: 2px 4px;
}

pre {
    font-family: var(--font-family-mono);
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius);
    padding: var(--space-xs);
    font-size: 85%;
    overflow: auto;
}

pre > code {
    background-color: transparent;
    color: var(--color-text-primary);
    font-size: 100%;
}

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: #333;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-border),
        transparent
    );
    margin: var(--space-l) 0;
}

blockquote {
    border-left: 4px solid var(--color-text-primary);
    padding: var(--space-xs);
    margin-inline: 0;
    margin-block: var(--space-l);
    font-style: italic;
    background-color: var(--color-bg-secondary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;

    & p:first-of-type {
        margin-top: 0;
    }

    & p:last-of-type {
        margin-bottom: 0;
    }
}

blockquote cite {
    font-style: italic;
}

/* Lists */
ul,
ol {
    margin-bottom: var(--space-xs);
    padding-left: var(--space-m); /* 1.5rem */
}

li {
    margin-block: var(--space-3xs);
}

li:last-child {
    margin-bottom: 0;
}

/* Details and Summary */
details summary {
    cursor: pointer;
    position: relative;
    padding-bottom: var(--space-2xs); /* 0.5rem */
}

details summary:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--color-border), transparent);
}

details > *:not(summary) {
    cursor: auto;
    margin-top: var(--space-2xs);
}

/* Tables */
table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--space-s);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    width: 100%;
    display: block;
    overflow-x: auto;
}

@media screen and (min-width: 480px) {
    table {
        display: table;
    }
}

caption {
    margin-block: var(--space-s);
    text-transform: uppercase;
    font-weight: bold;
}

th,
td {
    padding: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

thead {
    background: var(--color-secondary);
}

th {
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background-color: rgba(0, 0, 0, 0.02);
}

tfoot {
    background: var(--color-secondary-light);
}

/* Forms */
form {
    margin-bottom: var(--space-s);
}

form > div {
    margin-bottom: var(--space-s);
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="color"],
input[type="file"],
input[type="range"],
input[type="checkbox"],
input[type="radio"],
select,
textarea {
    display: block;
    width: 100%;
    margin-bottom: var(--space-s);
    padding: var(--space-2xs);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-bottom: 0;
    display: inline-block;
    margin-right: 0.5rem;
}

input[type="color"] {
    padding: 0;
    height: 40px;
    border-radius: unset;
}

input[type="range"] {
    padding: 0;
    box-shadow: none;
}

/* Input styling with icons */
input[type="url"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"] {
    padding-left: 2.5rem;
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
    position: relative;
}

input[type="url"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z'/%3E%3C/svg%3E");
}

input[type="email"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E");
}

input[type="password"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath transform='rotate(-45 8 8)' d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

input[type="tel"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke='%23989fab' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 5.5C3 14.06 9.94 21 18.5 21c.386 0 .77-.014 1.148-.042.435-.032.653-.048.851-.162a1.06 1.06 0 0 0 .42-.432c.11-.2.121-.418.145-.853l.17-3.072a1.517 1.517 0 0 0-.828-1.536l-2.546-1.273a1.517 1.517 0 0 0-1.784.307l-.89 1.04c-.34.398-.873.54-1.342.353a10.49 10.49 0 0 1-3.27-2.27 10.49 10.49 0 0 1-2.27-3.27 1.25 1.25 0 0 1 .353-1.342l1.04-.89a1.517 1.517 0 0 0 .307-1.784L8.68 3.67A1.517 1.517 0 0 0 7.144 2.84l-3.072.17c-.435.024-.653.036-.853.145a1.06 1.06 0 0 0-.432.42c-.114.198-.13.416-.162.851C3.014 4.73 3 5.114 3 5.5Z'/%3E%3C/svg%3E");
}

input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
}

/* Ensure text is visible */
input[type="url"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"] {
    color: var(--color-text-primary);
}

input[type="url"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder {
    color: var(--color-text-primary);
    opacity: 0.7;
}

input[type="search"] {
    border-radius: var(--space-xl);
}

/* Select styling with icon */
select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23364153' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 2rem;
}

:root[color-scheme="dark"] select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23e2e8f0' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-border);
    box-shadow: 0 0 0px 3px var(--color-primary-light);
}

input[type="range"]:focus {
    box-shadow: none;
}

textarea {
    min-height: 9rem;
    resize: vertical;
}

label {
    display: block;
    margin-bottom: var(--space-3xs);
    font-weight: 500;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    vertical-align: middle;
    min-height: 3.1rem;
    min-width: 6.5rem;
    display: inline-block;
    padding: var(--space-2xs) var(--space-s);
    /* margin: 0.125rem 0.125rem 0.125rem 0; */
    margin-block: var(--space-s);
    margin-inline: 0;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

/* Create the loading spinner using ::after pseudo-element */
button:empty::after {
    content: "";
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    width: 16px;
    height: 16px;
    border: 3px solid rgb(255, 255, 255);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

button:after,
input[type="button"]:after,
input[type="reset"]:after,
input[type="submit"]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition: var(--transition-base);
}

button:hover:after,
input[type="button"]:hover:after,
input[type="reset"]:hover:after,
input[type="submit"]:hover:after {
    background-color: rgba(255, 255, 255, 0.1);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    box-shadow: var(--shadow-sm);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    transform: translateY(2px);
    box-shadow: var(--shadow-sm);
    filter: saturate(0.9) brightness(1.1);
}

button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled {
    background: var(--gradient-secondary);
    cursor: not-allowed;
    opacity: 0.14;
    transform: none;
}

/* Button Variants */
button.success,
input[type="button"].success,
input[type="submit"].success {
    background: var(--gradient-success);
}

button.danger,
input[type="button"].danger,
input[type="submit"].danger {
    background: var(--gradient-danger);
}

button.warning,
input[type="button"].warning,
input[type="submit"].warning {
    background: var(--gradient-warning);
}

button.info,
input[type="button"].info,
input[type="submit"].info {
    background: var(--gradient-info);
}

button.outline,
input[type="button"].outline,
input[type="submit"].outline {
    background: transparent;
    border: 1px solid var(--color-primary-invert);
    color: var(--color-primary-invert);
}

button.outline:hover,
input[type="button"].outline:hover,
input[type="submit"].outline:hover {
    background-color: var(--color-primary);
    color: white;
}

/* Progress Bar */

progress {
    height: 2rem;
    width: 100%;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--space-2xs);
    transition: var(--transition-base);
}

img:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-sm);
}

figure {
    text-align: center;
    margin-bottom: var(--space-s);
    width: 100%;
    margin-inline: auto;
}

figcaption {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--space-2xs);
}

/* Footer */

footer {
    margin-block: var(--space-s);
}

/* Transitions */
body,
a,
button,
input,
select,
textarea,
th,
td,
code,
pre,
blockquote,
article,
section,
aside {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Utilities */

.notice {
    background-color: var(--color-notice);
    padding: var(--space-xs);
    border-radius: var(--border-radius);
    margin-inline: auto;
}

.notice::before {
    content: "ℹ️";
    display: inline-block;
    margin-right: var(--space-2xs);
}