@font-face {
    font-family: 'Inter';
    src: url("{% static 'fonts/Inter-VariableFont_opsz,wght.ttf' %}") format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url("{% static 'fonts/Inter-Italic-VariableFont_opsz,wght.ttf' %}") format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: 'Inter', sans-serif;
}

main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--pill-gap);
}

h1, p {
    padding:0;
    margin: 0;
}

h2 {
    padding: 0;
    margin: 0;
    margin-bottom: var(--medium-gap);
}

label {
    padding: 0;
    margin: 0;
    margin-top: var(--medium-gap);
}

/* Register the gradient's bottom color stop as a typed custom property so
   browsers can interpolate it.*/
@property --outer-border-end {
    syntax: '<color>';
    initial-value: transparent;
    inherits: false;
}

.setup-outer-border {
    --outer-border-end: var(--text-color);
    background: linear-gradient(180deg, var(--text-color) 25%, var(--outer-border-end) 50%);
    padding: 1px;
    /* Animate the custom property; the gradient re-evaluates it each frame. */
    transition: --outer-border-end 700ms ease;
}

    .setup-outer-border.collapsed {
        --outer-border-end: var(--gray-bg);
    }

.setup-inner-container {
    max-width: 90vw;
    width: min(90vw, 1000px);
    display: flex;
    flex-direction: column;
    background-color: var(--gray-bg);
}

.setup-browser-preview {
    display: flex;
    justify-content: space-between;
    gap: var(--d-large-gap);
    padding: var(--pill-gap);
    border-bottom: 1px solid var(--text-color);
}

.setup-browser-url-preview{
    display:flex;
    gap: var(--pill-gap);
    /* Claim remaining space in .setup-browser-preview AND allow this
       row to shrink below its intrinsic content width. Without `min-width:0`
       the row keeps growing to fit its children and the ellipsis never
       triggers. */
    flex: 1;
    min-width: 0;
}

    .setup-browser-url-preview span {
        height: var(--medium-gap);
        padding: 0 var(--pill-gap);
        box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
        border-radius: var(--pill-gap);
        background-color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
    }

    #preview-url-slug {
        flex-shrink: 1;
        min-width: 0;
    }

.setup-browser-logo-preview {
    aspect-ratio: 1;
    height: var(--medium-gap);
    width: var(--medium-gap);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
}

.setup-header-preview {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    margin: var(--pill-gap) var(--pill-gap) 0 var(--pill-gap);
    border-radius: var(--pill-gap);
    padding: var(--pill-gap) var(--medium-gap);
    display: flex;
    flex-direction: column;
    gap: var(--pill-gap);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);

    transition: 
        margin 300ms ease-in-out, 
        padding 300ms ease-in-out, 
        border-radius 500ms ease-in-out, 
        min-width 300ms ease-in-out, 
        max-width 300ms ease-in-out,
        height 300ms ease-in-out;
}

    .setup-header-preview.detached {
        background-image: none;
        border-radius: var(--large-gap);
        padding: 0;
        margin: var(--large-gap) auto 0 auto;
        min-width: 50%;
        max-width: 80%;
        width: max(500px, 60%);
    }

.setup-header-preview-upper {
    display: flex;
    gap: var(--pill-gap);
}

.setup-header-preview.detached .setup-header-preview-upper {
    width: 100%;
    border-radius: var(--large-gap);
    padding: 0;
}

.setup-header-preview-lower {
    max-height: 6rem;
    max-width: none;
    opacity: 1;
    transition: max-height 300ms ease-in-out, opacity 500ms ease-in-out;
}

    .setup-header-preview-lower.collapsed {
        overflow: hidden;
        max-height: 0;
        max-width: 0;
        opacity: 0;
    }

.setup-header-preview.detached .setup-header-preview-lower {
    /* The parent .setup-header-preview-upper uses `gap: var(--pill-gap)`,
           which still allocates space *between* a zero-width item and its
           neighbour. Pulling the left margin negative by that gap cancels it,
           so a collapsed/hidden circle takes no visible room. */
    margin-top: calc(var(--pill-gap) * -1);
}

.setup-header-logo-preview {
    aspect-ratio: 1;
    height: 4rem;
    width: 4rem;
    transition: height 500ms ease-in-out, width 500ms ease-in-out
}

.setup-header-preview.detached .setup-header-logo-preview {
    height: calc(var(--d-large-gap) - var(--medium-gap));
    width: calc(var(--d-large-gap) - var(--medium-gap));
}

.setup-header-preview-pill {
    height: var(--pill-h);
    background-color: var(--gray-bg);
    border-radius: calc(var(--pill-h) / 2);
    display: flex;
    gap: var(--medium-gap);
    padding: var(--small-gap) var(--medium-gap);
    align-items: center;
    flex-shrink: 1;
    flex-grow: 2;
    /* Required so the h1 inside can clip */
    min-width: 0;
    transition: height 500ms ease-in-out, padding 500ms ease-in-out, border-radius 500ms ease-in-out;
}

.setup-header-preview.detached .setup-header-preview-pill {
    height: calc(var(--d-large-gap));
    border-radius: calc(var(--large-gap));
    padding: var(--pill-gap) var(--large-gap);
}

/* Default header: club name stays on a single line and
   clips with an ellipsis if it overflows to the right. */
#preview-header-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Detached header: allow up to 3 lines, then clamp with an ellipsis. */
.setup-header-preview.detached #preview-header-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.setup-header-preview-circle {
    height: var(--pill-h);
    width: var(--pill-h);
    background-color: var(--gray-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: width 400ms ease-in-out, margin-left 500ms ease-in-out, opacity 300ms ease-in-out;
}

    .setup-header-preview-circle.collapsed {
        /* Clip the icon while we animate width from 0 → pill-h so the SVG
       inside doesn't visually overflow during the transition. */
        overflow: hidden;
        /* Re-assert the author display so the UA `[hidden] { display: none }`
           rule can't snap the element out of the layout tree mid-transition. */
        display: flex;
        width: 0;
        opacity: 0;
        /* The parent .setup-header-preview-upper uses `gap: var(--pill-gap)`,
           which still allocates space *between* a zero-width item and its
           neighbour. Pulling the left margin negative by that gap cancels it,
           so a collapsed/hidden circle takes no visible room. */
        margin-left: calc(var(--pill-gap) * -1);
    }

.header-icon {
    aspect-ratio: 1;
    height: var(--medium-gap);
    width: var(--medium-gap);
}

.setup-header-preview-feature {
    display: flex;
    align-items: center;
    gap: var(--pill-gap);
    font-size: 1.6rem;
    font-family: inherit;
    max-width: 50rem;
    white-space: nowrap;
    transition: max-width 400ms ease-in-out, margin-left 400ms ease-in-out, opacity 300ms ease-in-out;
}

    .setup-header-preview-feature.collapsed {
        overflow: hidden;
        /* Explicit `display: flex` re-asserts the author display in case the UA
       `[hidden] { display: none }` ever wins the cascade — without it the
       element would snap to display:none and the transition would never run. */
        display: flex;
        max-width: 0;
        opacity: 0;
        /* Parent .setup-header-preview-pill uses `gap: var(--medium-gap)`, so
       cancel that gap-slot when this pill is hidden. */
        margin-left: calc(var(--medium-gap) * -1);
    }

.setup-feature-checkbox{
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    align-items: center;
    gap: var(--medium-gap);
}

.setup-feature-checkbox label{
    margin: 0;
    padding: 0;
}

.setup-dialog-container {
    border-radius: var(--pill-gap);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
    padding: var(--pill-gap) var(--medium-gap) var(--medium-gap) var(--medium-gap);
    margin: var(--pill-gap);
    margin-top: calc(var(--pill-gap) * -1);
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    /*width: calc(100% - 2 * var(--pill-gap));*/

    transition:
        margin 500ms ease-in-out,
        padding 300ms ease-in-out,
        border-radius 800ms ease-in-out,
        min-width 300ms ease-in-out,
        max-width 300ms ease-in-out,
        min-height 300ms ease-in-out, 
        width 300ms ease-in-out;

}

    .setup-dialog-container.detached {
        border-radius: var(--large-gap);
        padding: var(--medium-gap);
        margin: var(--large-gap) auto;
        min-height: 10vh;
        min-width: 50%;
        max-width: 80%;
        width: max(500px, 60%);
    }

.setup-dialog-buttons {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: var(--pill-gap);
    margin-top: auto;
    padding-top: var(--medium-gap);
}

@media (max-height: 1000px) {
    main {
        justify-content: start;
    }
}

@media (max-width: 850px) {
    .setup-inner-container {
        max-width: 98vw;
        width: calc(100vw - 2 * var(--pill-gap));
    }

    .setup-browser-preview {
        gap: var(--pill-gap);
    }

    .setup-header-preview.detached {
        margin: var(--medium-gap) auto 0 auto;
        min-width: 50%;
        max-width: 100%;
        width: calc(100% - 2* var(--pill-gap));
    }

    .setup-dialog-container.detached {
        margin: var(--medium-gap) auto 0 auto;
        min-width: 50%;
        max-width: 100%;
        width: calc(100% - 2* var(--pill-gap));
    }

    .setup-header-preview-feature span{
        display: none;
    }
}