@import "./login-controls.css";
/* The sign-in dialog follows the same saved palette as the page behind it. */
.sf-login-modal {
    --sf-dialog-surface: var(--sf-theme-surface);
    --sf-dialog-soft: var(--sf-theme-raised);
    --sf-dialog-text: var(--sf-theme-text);
    --sf-dialog-muted: var(--sf-theme-muted);
    --sf-dialog-border: var(--sf-theme-border);
    --sf-dialog-radius: 1.35rem;
    --sf-dialog-shadow: 0 28px 90px #0003;
    --sf-login-accent: var(--sf-theme-accent);
    --sf-ui-radius: .7rem;
    padding: 1.25rem;
}
.sf-login-modal .sf-login-modal-panel { width: min(100%,62rem); height: min(38rem,calc(100dvh - 2.5rem)); max-height: calc(100dvh - 2.5rem); grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); overflow: hidden; }
.sf-login-modal .sf-login-modal-art { display: block; min-width: 0; }
html[data-theme] body .sf-login-modal .sf-login-modal-form { min-width: 0; padding: 1.8rem 2.6rem 1.5rem; color: var(--sf-dialog-text); background: var(--sf-dialog-surface) !important; }
.sf-login-modal .sf-login-modal-eyebrow { display: flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; color: var(--sf-dialog-muted); font-size: .58rem; letter-spacing: .13em; font-weight: 650; }
.sf-login-modal-eyebrow>span { width: .35rem; height: .35rem; border-radius: 50%; background: var(--sf-login-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--sf-login-accent) 10%,transparent); }
html[data-theme] .sf-login-modal #sf-login-modal-title { color: var(--sf-dialog-text); margin: 0; font-size: clamp(1.9rem,2.8vw,2.25rem) !important; font-weight: 750; line-height: 1.15; letter-spacing: -.055em; }
.sf-login-modal-title>span { color: var(--sf-login-accent); }
html[data-theme] .sf-login-modal .sf-login-modal-lead { color: var(--sf-dialog-muted); font-size: .82rem; line-height: 1.6; margin: .5rem 0 1.1rem; }
.sf-login-modal .auth-social-buttons { gap: .6rem; }
.sf-login-modal .sf-login-modal-social { margin-top: 0; }
.sf-login-modal .auth-social-prefix { display: none; }
.sf-login-modal .auth-social-button>svg { width: 1.05rem; height: 1.05rem; flex: none; }
.sf-login-modal-form>.my-6 { margin: .9rem 0; font-size: .6rem; }
html[data-theme] .sf-login-modal-form>.my-6>div { background: var(--sf-dialog-border); }
.sf-login-modal .sf-login-form { gap: .75rem; }
html[data-theme] .sf-login-modal .sf-login-field { color: var(--sf-dialog-text); font-size: .75rem; font-weight: 600; }
html[data-theme] body .sf-login-modal .sf-login-input { --sf-ui-surface: var(--sf-dialog-soft); min-height: 2.9rem; padding: .75rem .9rem; color: var(--sf-dialog-text); border-radius: .7rem !important; font-size: .8rem !important; transition: border-color .2s,box-shadow .2s; }
html[data-theme] body .sf-login-modal .sf-login-input::placeholder { color: var(--sf-theme-subtle); opacity: 1; }
html[data-theme] body .sf-login-modal .sf-login-input:focus { outline: none; border-color: var(--sf-login-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--sf-login-accent) 12%,transparent) !important; }
.sf-login-modal .sf-login-password-field .sf-login-input { padding-right: 3rem; }
html[data-theme] body .sf-login-modal .sf-login-password-toggle { color: var(--sf-dialog-muted); width: 2.6rem; right: .15rem; }
html[data-theme] body .sf-login-modal .sf-login-password-toggle:focus-visible { outline-color: var(--sf-login-accent); }
html[data-theme] .sf-login-modal a[href*=forgot-password] { color: var(--sf-login-accent); margin-top: .6rem; font-size: .7rem; text-decoration: none; }
html[data-theme] .sf-login-modal a[href*=forgot-password]:hover { text-decoration: underline; }
.sf-login-modal .sf-login-submit { margin-top: .2rem; }
.sf-login-modal .sf-login-progress { margin: -.2rem 0 0; color: var(--sf-dialog-muted); text-align: center; font-size: .7rem; line-height: 1.5; }
.sf-login-modal .sf-login-progress[hidden] { display: none; }
.sf-login-modal .sf-login-create { margin-top: .9rem; font-size: .75rem; color: var(--sf-dialog-muted); }
html[data-theme] .sf-login-modal .sf-login-create a { color: var(--sf-dialog-text); text-decoration-color: var(--sf-login-accent); text-underline-offset: 3px; }
.sf-login-modal .sf-login-modal-close { top: .7rem; right: .7rem; width: 2rem; min-height: 2rem; }

/* Lightweight workspace illustrations, with no image downloads or layout shifts. */
.sf-login-scene { display: flex; flex-direction: column; position: relative; isolation: isolate; height: 100%; min-height: 0; padding: 1.8rem 2.35rem 1.3rem; overflow: hidden; color: var(--sf-theme-text); background: var(--sf-theme-raised); border-right: 1px solid var(--sf-theme-border); touch-action: pan-y; }
.sf-login-scene:focus { outline: none; }
.sf-login-scene:focus-visible { outline: 2px solid var(--sf-login-accent); outline-offset: -5px; }
.sf-login-scene::before,.sf-login-scene::after { content: ""; position: absolute; z-index: -1; width: 34rem; height: 34rem; border: 1px solid color-mix(in srgb,var(--sf-theme-accent) 9%,transparent); border-radius: 50%; pointer-events: none; }
.sf-login-scene::before { top: 6rem; left: 10rem; }
.sf-login-scene::after { top: 13rem; left: 7rem; }
.sf-login-scene-glow { position: absolute; z-index: -2; inset: -20%; background: radial-gradient(ellipse at 90% 45%,color-mix(in srgb,var(--sf-theme-color) 15%,transparent),transparent 60%),radial-gradient(ellipse at 5% 5%,var(--sf-theme-surface),transparent 65%); animation: sf-login-aurora 14s ease-in-out infinite alternate; }
.sf-login-scene-brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; font-size: .98rem; letter-spacing: -.035em; font-weight: 700; }
.sf-login-scene-brand>span { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; }
.sf-login-slides { display: grid; flex: 1; min-height: 0; margin-top: 1.65rem; }
.sf-login-slide { grid-area: 1/1; min-width: 0; min-height: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; }
.sf-login-slide.is-active { z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; }
.sf-login-slide.is-exiting { z-index: 0; opacity: 1; visibility: visible; }
/* Flights are transient Web Animations; their resting styles stay untouched. */
.sf-login-flight-trail { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; color: var(--sf-login-accent); opacity: 0; overflow: visible; pointer-events: none; }
.sf-login-flight-trail path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-dasharray: .18 .82; stroke-dashoffset: 1; }
.sf-login-flight-trail path:first-child { stroke-width: 1.5; opacity: .38; }
.sf-login-flight-trail path:nth-child(2) { stroke-width: 4; opacity: .12; filter: blur(2px); }
.sf-login-flight-trail path:last-child { stroke-width: 2.5; stroke-dasharray: .004 .996; opacity: .7; }
.sf-login-scene-kicker { color: var(--sf-theme-muted); font-size: .56rem; font-weight: 650; letter-spacing: .16em; margin: 0 0 .7rem; }
.sf-login-scene-copy { position: relative; z-index: 2; flex-shrink: 0; }
.sf-login-scene-copy h2 { margin: 0; color: var(--sf-theme-text); font-size: clamp(1.9rem,2.8vw,2.4rem); font-weight: 730; letter-spacing: -.06em; line-height: 1.1; }
.sf-login-scene-copy h2>span { color: var(--sf-login-accent); }
.sf-login-scene-lead { max-width: 20rem; color: var(--sf-theme-muted); margin: .85rem 0 0; font-size: .78rem; line-height: 1.65; }
.sf-login-visual { position: relative; flex: 1; min-height: 0; margin: .5rem -.1rem .3rem; display: grid; place-items: center; perspective: 900px; }
.sf-login-preview { width: 89%; border: 1px solid color-mix(in srgb,var(--sf-theme-accent) 12%,var(--sf-theme-surface)); border-radius: .85rem; background: var(--sf-theme-surface); box-shadow: 0 16px 38px color-mix(in srgb,var(--sf-theme-color) 9%,transparent),0 2px 5px #00000006; transform: rotateY(-7deg) rotateX(4deg) rotate(-3deg); animation: sf-login-preview-float 7s ease-in-out infinite; }
.sf-login-preview-top { display: flex; justify-content: space-between; align-items: center; padding: .45rem .8rem; border-bottom: 1px solid var(--sf-theme-border); color: var(--sf-theme-muted); font-size: .5rem; }
.sf-login-preview-top>span:first-child { display: flex; align-items: center; gap: .35rem; }
.sf-login-preview-body { padding: .75rem; }
.sf-login-preview-heading { display: flex; align-items: center; justify-content: space-between; color: var(--sf-theme-text); font-size: .9rem; font-weight: 650; letter-spacing: -.035em; }
.sf-login-preview-heading>span { color: var(--sf-login-accent); }
.sf-login-preview svg { width: 1rem; height: 1rem; }
.sf-login-preview-body>p { margin: .2rem 0 .6rem; font-size: .55rem; color: var(--sf-theme-muted); }
.sf-login-preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sf-login-preview-stats>span { display: grid; gap: .25rem; padding: .45rem; background: var(--sf-theme-raised); border-radius: .5rem; }
.sf-login-preview-stats small { color: var(--sf-theme-muted); font-size: .48rem; }
.sf-login-preview-stats b { display: flex; align-items: center; justify-content: space-between; color: var(--sf-theme-text); font-size: .55rem; font-weight: 600; }
.sf-login-preview-stats svg { width: .7rem; height: .7rem; color: var(--sf-login-accent); }
.sf-login-preview-chart { margin-top: .55rem; color: var(--sf-login-accent); }
.sf-login-preview-chart>span { display: flex; justify-content: space-between; align-items: center; font-size: .48rem; color: var(--sf-theme-muted); }
.sf-login-preview-chart b { display: flex; align-items: center; gap: .25rem; font-weight: 500; }
.sf-login-preview-chart b>svg { width: .6rem; height: .6rem; }
.sf-login-preview-chart>svg { display: block; width: 100%; height: 2.25rem; margin-top: .25rem; overflow: visible; }
.sf-login-chart-area { fill: color-mix(in srgb,var(--sf-theme-accent) 7%,transparent); }
.sf-login-preview-task { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--sf-theme-border); }
.sf-login-preview-task>i { display: grid; place-items: center; flex: none; width: 1.65rem; height: 1.65rem; border-radius: .5rem; background: var(--sf-theme-raised); color: var(--sf-login-accent); font-size: .5rem; font-style: normal; }
.sf-login-preview-task>i>svg { width: .9rem; height: .9rem; }
.sf-login-preview-task>span { color: var(--sf-theme-text); font-size: .6rem; font-weight: 550; }
.sf-login-preview-task small { display: block; margin-top: .18rem; color: var(--sf-theme-muted); font-size: .48rem; font-weight: 400; }
.sf-login-preview-task>em { margin-left: auto; color: var(--sf-login-accent); }
.sf-login-preview-task>em>svg { width: .75rem; height: .75rem; }
.sf-login-float { position: absolute; bottom: .8rem; right: -.3rem; display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border: 1px solid var(--sf-theme-border); border-radius: .75rem; background: var(--sf-theme-surface); box-shadow: 0 10px 28px #0000000d; transform: rotate(3deg); animation: sf-login-card-float 6s ease-in-out -2s infinite; }
.sf-login-float>span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .55rem; color: var(--sf-login-accent); background: var(--sf-theme-raised); }
.sf-login-float svg { width: .95rem; height: .95rem; }
.sf-login-float strong { display: block; color: var(--sf-theme-text); font-size: .63rem; font-weight: 600; }
.sf-login-float small { display: block; color: var(--sf-theme-muted); font-size: .5rem; margin-top: .15rem; }
.sf-login-float>i { display: flex; color: var(--sf-login-accent); margin-left: .35rem; }
.sf-login-float>i>svg { width: .8rem; height: .8rem; }
.sf-login-feature { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; margin: .3rem 0 .6rem; }
.sf-login-feature>span { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--sf-theme-border); border-radius: .6rem; background: var(--sf-theme-surface); color: var(--sf-login-accent); }
.sf-login-feature>span>svg { width: 1rem; height: 1rem; }
.sf-login-feature>p { margin: 0; }
.sf-login-feature strong { display: block; font-size: .65rem; font-weight: 600; }
.sf-login-feature small { display: block; margin-top: .25rem; font-size: .57rem; color: var(--sf-theme-muted); }
.sf-login-slider-controls { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 1rem; margin-top: .6rem; }
.sf-login-slider-controls[hidden] { display: none; }
.sf-login-slider-dots,.sf-login-slider-actions { display: flex; align-items: center; gap: .2rem; }
.sf-login-slider-dots>button { display: grid; place-items: center; width: 1.5rem; height: 2rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sf-login-slider-dots>button>span { width: .9rem; height: .22rem; border-radius: 1rem; background: color-mix(in srgb,var(--sf-login-accent) 20%,transparent); transition: width .3s,background .3s; }
.sf-login-slider-dots>button[aria-current=true]>span { width: 1.5rem; background: var(--sf-login-accent); }
.sf-login-slider-actions>button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: 50%; color: var(--sf-theme-muted); background: transparent; cursor: pointer; transition: background .2s,color .2s; }
.sf-login-slider-actions>button:hover { color: var(--sf-theme-text); background: var(--sf-theme-hover); }
.sf-login-slider-actions svg { width: .85rem; height: .85rem; }
.sf-login-slider-actions [hidden] { display: none; }
.sf-login-slider-actions [data-login-slide-prev]>svg { rotate: 180deg; }
.sf-login-slider-controls button:focus-visible { outline: 2px solid var(--sf-login-accent); outline-offset: 2px; border-radius: .4rem; }
.sf-login-modal:not(.is-open) .sf-login-scene *,.sf-login-modal.is-motion-paused .sf-login-scene *,.sf-login-scene.is-interacting * { animation-play-state: paused; }
.sf-login-slide:not(.is-active) * { animation-play-state: paused; }
@keyframes sf-login-aurora { to { transform: translate(4%,3%) scale(1.08); } }
@keyframes sf-login-preview-float { 50% { translate: 0 -5px; rotate: 1deg; } }
@keyframes sf-login-card-float { 50% { translate: 0 -7px; } }
@media(max-width:60rem) {
    .sf-login-scene { padding-inline: 1.65rem; }
    html[data-theme] body .sf-login-modal .sf-login-modal-form { padding-inline: 1.8rem; }
    .sf-login-scene-copy h2 { font-size: 2.1rem; }
    .sf-login-feature small { font-size: .53rem; }
}
@media(max-height:43rem) and (min-width:48rem) {
    .sf-login-scene { padding-top: 1.65rem; }
    .sf-login-slides { margin-top: 1.5rem; }
    .sf-login-feature { display: none; }
    html[data-theme] body .sf-login-modal .sf-login-modal-form { padding-block: 1.65rem 1.25rem; }
    .sf-login-modal .sf-login-modal-eyebrow { margin-bottom: .6rem; }
    html[data-theme] .sf-login-modal .sf-login-modal-lead { margin-bottom: .85rem; }
    .sf-login-modal-form>.my-6 { margin-block: .65rem; }
    .sf-login-modal .sf-login-form { gap: .65rem; }
}
@media(max-width:47.999rem) {
    .sf-login-modal { padding: .8rem; }
    .sf-login-modal .sf-login-modal-panel { grid-template-columns: 1fr; width: min(100%,27rem); height: auto; max-height: calc(100dvh - 1.6rem); }
    .sf-login-modal .sf-login-modal-art { display: none; }
    html[data-theme] body .sf-login-modal .sf-login-modal-form { padding: 3.1rem 1.6rem 1.6rem; }
    .sf-login-modal .auth-social-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
    html[data-theme] .sf-login-modal #sf-login-modal-title { font-size: 2rem !important; }
}
/* Short viewports also cover desktop browsers at larger zoom settings. */
@media(max-height:36rem) {
    .sf-login-modal .sf-login-modal-eyebrow { display: none; }
    html[data-theme] .sf-login-modal #sf-login-modal-title { font-size: 1.85rem !important; }
    html[data-theme] .sf-login-modal .sf-login-modal-lead { margin: .4rem 0 .7rem; font-size: .78rem; }
    .sf-login-modal-form>.my-6 { margin-block: .55rem; }
    .sf-login-modal .sf-login-form { gap: .6rem; }
    html[data-theme] body .sf-login-modal .sf-login-input { min-height: 2.75rem; padding-block: .6rem; }
    .sf-login-modal .sf-login-create { margin-top: .7rem; }
    .sf-login-scene { padding-block: 1.2rem; }
    .sf-login-slides { margin-top: 1rem; }
    .sf-login-scene-copy h2 { font-size: 1.85rem; }
    .sf-login-scene-lead { margin-top: .6rem; font-size: .7rem; }
    .sf-login-preview { width: 80%; }
    .sf-login-float { padding: .5rem .65rem; bottom: .2rem; }
}
@media(max-height:30rem) {
    html[data-theme] .sf-login-modal .sf-login-modal-lead { display: none; }
    .sf-login-modal .sf-login-modal-social { margin-top: .8rem; }
    html[data-theme] body .sf-login-modal .sf-login-modal-form { padding-block: 1.3rem 1rem; }
    .sf-login-modal .sf-login-create { margin-top: .6rem; }
}
@media(max-height:28rem) and (max-width:47.999rem) and (min-width:34rem) {
    .sf-login-modal .sf-login-modal-panel { width: min(100%,36rem); }
    html[data-theme] body .sf-login-modal .sf-login-modal-form { padding: 1rem 2.5rem; }
    html[data-theme] .sf-login-modal #sf-login-modal-title { font-size: 1.6rem !important; }
    .sf-login-modal .sf-login-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
    .sf-login-modal .sf-login-submit,.sf-login-modal .sf-login-progress { grid-column: 1/-1; }
    html[data-theme] .sf-login-modal a[href*=forgot-password] { margin-top: .35rem; }
    .sf-login-modal .sf-login-modal-social { margin-top: .6rem; }
    .sf-login-modal-form>.my-6 { margin-block: .4rem; }
    .sf-login-modal .sf-login-create { margin-top: .4rem; }
}
@media(prefers-reduced-motion:reduce) {
    .sf-login-modal *,.sf-login-modal *::before,.sf-login-modal *::after { animation: none !important; transition: none !important; }
    .sf-login-motion-toggle { display: none !important; }
}
html[data-motion=off] .sf-login-modal * { animation: none !important; transition: none !important; }
html[data-motion=off] .sf-login-motion-toggle { display: none; }