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

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

@font-feature-values InterVariable {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1;
        /* Alternate one */
        alt-3: 9;
        /* Flat-top three */
        open-4: 2;
        /* Open four */
        open-6: 3;
        /* Open six */
        open-9: 4;
        /* Open nine */
        lc-l-with-tail: 5;
        /* Lower-case L with tail */
        simplified-u: 6;
        /* Simplified u */
        alt-double-s: 7;
        /* Alternate German double s */
        uc-i-with-serif: 8;
        /* Upper-case i with serif */
        uc-g-with-spur: 10;
        /* Capital G with spur */
        single-story-a: 11;
        /* Single-story a */
        compact-lc-f: 12;
        /* Compact f */
        compact-lc-t: 13;
        /* Compact t */
    }

    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1;
        /* Open digits */
        disambiguation: 2;
        /* Disambiguation (with zero) */
        disambiguation-except-zero: 4;
        /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;
        /* Round quotes & commas */
        square-punctuation: 7;
        /* Square punctuation */
        square-quotes: 8;
        /* Square quotes */
        circled-characters: 5;
        /* Circled characters */
        squared-characters: 6;
        /* Squared characters */
    }
}

/* ------------------------------------------------------------------------- */
/* Base typography                                                           */
/* ------------------------------------------------------------------------- */

body {
    margin: 0;
    min-height: 100vh;

    font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    /* “Regular” in the variable range */
    font-style: normal;

    /* Center the auth frame with spacing from top and sides */
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* Top spacing: never zero, scales with viewport height */
    padding-block: clamp(1.5rem, 8vh, 3.5rem);
    /* Side spacing: prevents frame from touching edges on small screens */
    padding-inline: clamp(1rem, 4vw, 2.5rem);

    background-color: #f9fafb;
    color: #111827;
    box-sizing: border-box;
}

p {
    font-weight: 400;
}

h1 {
    font-weight: 800;
    /* Very bold */
}

h2 {
    font-weight: 700;
    /* Bold */
}

h3 {
    font-weight: 600;
    /* Semi-bold */
}

h4,
h5,
h6 {
    font-weight: 600;
}

em,
i {
    font-style: italic;
}

/* ------------------------------------------------------------------------- */
/* Auth frame + logo shell                                                   */
/* ------------------------------------------------------------------------- */

.hl-auth-page {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* The main branded frame around all Kratos content */
.hl-auth-frame {
    /* Frame width:
       - min 32ch so content never collapses
       - preferred 70vw for fluid behavior
       - max 60ch for good line length & form width
    */
    width: clamp(32ch, 70vw, 60ch);

    /* Thin but visible black border */
    border: 0.06rem solid #000000;

    /* Corner radius approximating macOS window rounding (≈ 12px) */
    border-radius: clamp(0.75rem, 1.5vw, 1rem);

    background-color: #ffffff;

    /* Internal padding scales modestly with viewport */
    padding: clamp(1.75rem, 3vh, 2.5rem);
    box-sizing: border-box;

    /* Light shadow so the frame reads as a “window” on the page */
    box-shadow:
        0 0.25rem 0.75rem rgba(15, 23, 42, 0.08),
        0 1rem 2.25rem rgba(15, 23, 42, 0.12);
}

/* Logo area at the top of the frame */
.hl-auth-brand {
    display: flex;
    justify-content: center;
}

/* Logo scales with frame size and viewport */
.hl-auth-logo {
    display: block;

    /* Size tied to text metrics, not viewport.
       - 1ch = width of "0" in the current font.
       - With frame max-width at 60ch, this keeps the logo at a tasteful fraction
         of the frame width but always proportional to font size.
    */
    width: clamp(16ch, 20ch, 24ch);
    max-width: 100%;
    height: auto;

    /* Spacing between logo and Kratos content (no divider line) */
    margin-bottom: clamp(1.2rem, 3vh, 2rem);
}

/* Container for whatever Kratos renders (flows, errors, etc.) */
.hl-auth-main {
    width: 100%;
}

/* The div we render flow content into */
.hl-auth-screen {
    width: 100%;
}

/* ------------------------------------------------------------------------- */
/* Basic styling for Kratos-rendered content (optional but helpful)          */
/* ------------------------------------------------------------------------- */

.hl-flow-title {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 700;
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
    color: #111827;
}

.hl-messages {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    font-size: 0.9rem;
    color: #b91c1c;
}

.hl-messages li {
    margin-bottom: 0.4rem;
}

/* Generic field wrapper for Kratos nodes */
.hl-field {
    margin-bottom: 1rem;
}

/* Labels for inputs */
.hl-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

/* Inputs rendered by Kratos (<input> nodes) */
.hl-field input[type="text"],
.hl-field input[type="email"],
.hl-field input[type="password"],
.hl-field input[type="tel"],
.hl-field input[type="search"],
.hl-field input[type="number"] {
    width: 100%;
    padding: 0.7rem 0.75rem;
    font: inherit;
    font-size: 0.95rem;
    color: #111827;

    border-radius: 0.55rem;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    box-sizing: border-box;
    outline: none;

    transition:
        border-color 120ms ease-out,
        box-shadow 120ms ease-out,
        background-color 120ms ease-out;
}

.hl-field input[type="text"]:focus,
.hl-field input[type="email"]:focus,
.hl-field input[type="password"]:focus,
.hl-field input[type="tel"]:focus,
.hl-field input[type="search"]:focus,
.hl-field input[type="number"]:focus {
    border-color: #2563eb;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #2563eb1a, 0 0 0 4px #2563eb1a;
}

/* Primary submit buttons rendered from Kratos submit nodes */
.hl-button,
.hl-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.8rem 1.1rem;
    border-radius: 999px;
    border: none;

    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    cursor: pointer;

    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);

    transition:
        transform 80ms ease-out,
        box-shadow 80ms ease-out,
        filter 80ms ease-out;
}

.hl-button:hover,
.hl-button-primary:hover {
    filter: brightness(1.04);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4);
}

.hl-button:active,
.hl-button-primary:active {
    transform: translateY(1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32);
}

/* Links Kratos might render (e.g., "Use a different method") */
.hl-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
}

.hl-link:hover {
    text-decoration: underline;
}

/* Panels used in generic/success/error views in auth.js */
.hl-error-panel,
.hl-success-panel,
.hl-info-panel {
    border-radius: 0.75rem;
    padding: 1.25rem 1.3rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

.hl-error-panel h2,
.hl-success-panel h2,
.hl-info-panel h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

/* Smallest screens: slightly tighter padding */
@media (max-width: 360px) {
    body {
        padding-inline: 0.75rem;
        padding-block: 1.25rem;
    }

    .hl-auth-frame {
        padding: 1.5rem;
    }
}

/* Content Loading Spinner */
:root {
    /* Heroic Light spinner icon (inline SVG as data URI). */
    --hl-1: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MjUgNzI1Ij4KICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgMzYyLjUgMzYyLjUpIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI3MjUiIGhlaWdodD0iNzI1IiBmaWxsPSIjMDAwMDAwIiAvPgogICAgPHBhdGggZD0iTTU2OS41MTQxNjAyLDcyNS4wMjcwMzg2bC0zNzkuNzAwMzE3NCwzNzkuNzAwMjU2M2MtMTMuNDc2OTg5NywxMy40NzY5Mjg3LTM1LjI2MzEyMjYsMTMuNDc1ODMwMS00OC43Mzg4OTE2LDBMLjAyNDk2MzQsOTYzLjY3NzMwNzFsMjM4LjY0OTEwODktMjM4LjY0OTEwODlMLS4wMjM4MDM3LDQ4Ni4zNzc4OTkybDE0MS4wOTg3NTQ5LTE0MS4wOTg3ODU0YzEzLjQ1MTk2NTMtMTMuNDUxOTY1MywzNS4yODU3MDU2LTEzLjQ1MzE1NTUsNDguNzM4ODkxNiwwbDM3OS43MDAzMTc0LDM3OS43NDc4NjM4di4wMDAwNjFaIiBmaWxsPSIjZjlmYWZiIiAvPgogIDwvZz4KPC9zdmc+");
    --hl-2: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYiIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MjUgNzI1Ij4KICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODAgMzYyLjUgMzYyLjUpIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI3MjUiIGhlaWdodD0iNzI1IiBmaWxsPSIjMDAwMDAwIiAvPgogICAgPHBhdGggZD0iTTU2OS41Mzc5NjM5LjAxNDkwMjFMMTg5LjgzNzY0NjUsMzc5LjcxNTE1ODVjLTEzLjQ3Njk4OTcsMTMuNDc2OTI4Ny0zNS4yNjMxMjI2LDEzLjQ3NTgzMDEtNDguNzM4ODkxNiwwTC4wNDg3NjcxLDIzOC42NjUxNzA3LDIzOC42OTc4NzYuMDE2MDYxOCwwLTIzOC42MzQyMzczbDE0MS4wOTg3NTQ5LTE0MS4wOTg3ODU0YzEzLjQ1MTk2NTMtMTMuNDUxOTY1MywzNS4yODU3MDU2LTEzLjQ1MzE1NTUsNDguNzM4ODkxNiwwTDU2OS41Mzc5NjM5LjAxNDg0MTF2LjAwMDA2MVoiIGZpbGw9IiNmOWZhZmIiIC8+CiAgPC9nPgo8L3N2Zz4=");
    --hl-3: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZCIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MjUgNzI1Ij4KICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDM2Mi41IDM2Mi41KSI+CiAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNzI1IiBoZWlnaHQ9IjcyNSIgZmlsbD0iIzAwMDAwMCIgLz4KICAgIDxwYXRoIGQ9Ik03MjUsNDg2LjM3NzkyOTdsLTE1Ny45MTM0NTIxLDE1Ny45MTM0NTIxYy01MS40MTk3Mzg4LDUxLjQxOTczODgtMTIxLjA5Mjc3MzQsODAuNDQyOTMyMS0xOTMuODEwNzkxLDgwLjczNTY1NjctLjM5MDI4OTMsMC0uNzMxODExNS4wMDExNTk3LTEuMTIwOTEwNiwwaC0yMTYuNjQ1MjE3OWwzNzkuNzAwMjcxNi0zNzkuNzAwMjg2OWMxMy40NTE5NjUzLTEzLjQ1MTk2NTMsMzUuMjg2ODY1Mi0xMy40NTE5NjUzLDQ4LjczODg5MTYsMGwxNDEuMDUxMjA4NSwxNDEuMDUxMTc4WiIgZmlsbD0iI2Y5ZmFmYiIgLz4KICA8L2c+Cjwvc3ZnPg==");
    --hl-4: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYyIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MjUgNzI1Ij4KICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzNjIuNSAzNjIuNSkiPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjcyNSIgaGVpZ2h0PSI3MjUiIGZpbGw9IiMwMDAwMDAiIC8+CiAgICA8cGF0aCBkPSJNNzI1LjA0ODc1MTgsMjM4LjY1MDI2ODZsLTE0MS4wNzQ5NTEyLDE0MS4wNzUwMTIyYy0xMy40NzU3NjksMTMuNDc1ODMwMS0zNS4yODY4NjUyLDEzLjQ1MjAyNjQtNDguNzM4ODkxNiwwTDE1NS41MDk2MjgzLDBoMjE2LjY0NTIwMjZjLjM4OTA5OTEuMDAxMTU5Ny43MzA2MjEzLDAsMS4xMjA5MTA2LDAsNzIuNzE4MDE3Ni4yOTI3MjQ2LDE0Mi4zODk4MzE1LDI5LjMxNzA3NzYsMTkzLjgwOTU3MDMsODAuNzM2ODE2NGwxNTcuOTYzNDM5OSwxNTcuOTEzNDUyMVoiIGZpbGw9IiNmOWZhZmIiIC8+CiAgPC9nPgo8L3N2Zz4=");
}

/* Allow overlaying spinner on flow content */
.hl-auth-screen {
    position: relative;
    min-height: 12rem;
}

/* Full-screen overlay for the spinner inside hl-auth-screen */
.hl-spinner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* clicks still go “through” if needed */
}

/* Folding-cube spinner */

.sk-folding-cube {
    width: clamp(6ch, 8ch, 10ch);
    height: clamp(6ch, 8ch, 10ch);
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
}

.sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cube-bg);
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/* Assign each cube its own arrow quadrant.
           The quadrants are pre-rotated -90deg so the container's +45deg tilt renders the icon at -45deg. */
.sk-folding-cube .sk-cube1 {
    --cube-bg: var(--hl-1);
}

/* Cube 2 (top-right) uses sprite bottom-right after the pre-rotation */
.sk-folding-cube .sk-cube2 {
    --cube-bg: var(--hl-2);
    -webkit-transform: scale(1.01) rotateZ(90deg);
    transform: scale(1.01) rotateZ(90deg);
}

/* Cube 4 (bottom-left) uses sprite top-left after the pre-rotation */
.sk-folding-cube .sk-cube3 {
    --cube-bg: var(--hl-3);
    -webkit-transform: scale(1.01) rotateZ(270deg);
    transform: scale(1.01) rotateZ(270deg);
}

/* Cube 3 (bottom-right) uses sprite bottom-left after the pre-rotation */
.sk-folding-cube .sk-cube4 {
    --cube-bg: var(--hl-4);
    -webkit-transform: scale(1.01) rotateZ(180deg);
    transform: scale(1.01) rotateZ(180deg);
}

/* Delays stay the same */
.sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

/* Keyframes restored to baseline folding behavior */
@-webkit-keyframes sk-foldCubeAngle {

    0%,
    10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%,
    75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%,
    100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {

    0%,
    10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%,
    75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%,
    100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}