/* Login screen (#ui-polish) — themed sign-in with a CSS-only animated ocean.
   No JS beyond a one-line form onsubmit class toggle (loading state); the
   waves are mask-image layers so they re-colour with the active theme.
   Everything respects prefers-reduced-motion. RTL-safe: logical properties
   only, and the wave bands are horizontally symmetric. */

.ms-login-screen {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 50% -10%,
            color-mix(in srgb, var(--ms-accent) 9%, transparent), transparent 65%),
        var(--ms-bg);
    color: var(--ms-text);
    font-family: var(--ms-font-ui);
}

/* ── Animated waves ─────────────────────────────────────────────────────────
   Three stacked bands at the bottom of the viewport. Each band is a plain
   div whose colour comes from the theme tokens; the wave silhouette is a
   repeating SVG mask, animated by sliding the 200%-wide element one wave
   period to the side and snapping back (seamless because the mask repeats). */
.ms-login-waves {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 38vh;
    min-height: 180px;
    pointer-events: none;
}
.ms-login-wave {
    position: absolute;
    inset-block-end: 0;
    /* Physical left + translateX on purpose: the band is a repeating,
       horizontally symmetric texture, so RTL mirroring is a visual no-op —
       and the keyframe transform must match the pinned edge. */
    left: 0;
    width: 200%;
    height: 100%;
    background: color-mix(in srgb, var(--ms-accent) 14%, var(--ms-bg2));
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'><path d='M0,80 C150,140 300,20 450,70 C600,120 750,30 900,80 C1050,130 1150,50 1200,80 L1200,320 L0,320 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'><path d='M0,80 C150,140 300,20 450,70 C600,120 750,30 900,80 C1050,130 1150,50 1200,80 L1200,320 L0,320 Z' fill='black'/></svg>");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 50% 100%;
    mask-size: 50% 100%;
    animation: ms-wave-drift 26s linear infinite;
}
.ms-login-wave:nth-child(2) {
    height: 78%;
    background: color-mix(in srgb, var(--ms-accent) 9%, var(--ms-bg2));
    animation-duration: 38s;
    animation-direction: reverse;
}
.ms-login-wave:nth-child(3) {
    height: 56%;
    background: color-mix(in srgb, var(--ms-accent2) 10%, var(--ms-bg));
    animation-duration: 52s;
}
@keyframes ms-wave-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ms-login-wave { animation: none; }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ms-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 320px;
    max-width: 390px;
    padding: 32px 28px 28px;
    background: color-mix(in srgb, var(--ms-panel) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ms-panel-border);
    border-radius: 12px;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px color-mix(in srgb, var(--ms-accent) 10%, transparent),
        0 0 28px color-mix(in srgb, var(--ms-accent) 7%, transparent);
    animation: ms-login-card-in 380ms ease-out;
}
@keyframes ms-login-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ms-login-card { animation: none; }
}

/* Brand wordmark — gradient-clipped text that shimmers once on hover. The
   gradient resolves to plain text colour at rest, so Arabic shaping stays
   crisp and the wordmark is identical when no pointer is around (touch). */
.ms-login-brand {
    margin: 0 0 6px;
    font-family: var(--ms-font-brand);
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(100deg,
        var(--ms-text) 42%, var(--ms-accent) 50%, var(--ms-text) 58%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ms-login-brand:hover { animation: ms-brand-shimmer 1.1s ease-out; }
@keyframes ms-brand-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-login-brand:hover { animation: none; }
}

.ms-login-sub {
    margin-bottom: 18px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ms-text-mute);
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
.ms-login-field { margin-bottom: 14px; }
.ms-login-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-family: var(--ms-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ms-text-dim);
}
.ms-login-field input {
    width: 100%;
    padding: 10px 12px;
    background: var(--ms-bg2);
    color: var(--ms-text);
    border: 1px solid var(--ms-panel-border);
    border-radius: 8px;
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ms-login-field input:focus {
    outline: none;
    border-color: var(--ms-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-accent) 22%, transparent);
}

.ms-login-error {
    margin-bottom: 14px;
    padding: 8px 10px;
    border: 1px solid var(--ms-alert);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ms-alert) 12%, transparent);
    color: var(--ms-alert);
    font-size: 12px;
}

/* ── Submit ───────────────────────────────────────────────────────────────── */
.ms-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ms-text);
    background: color-mix(in srgb, var(--ms-accent) 20%, var(--ms-panel));
    border: 1.5px solid var(--ms-accent);
    border-radius: 8px;
    cursor: var(--ms-cursor-pointer);
    transition: background 160ms ease, box-shadow 160ms ease, transform 110ms ease;
}
.ms-login-btn:hover {
    background: color-mix(in srgb, var(--ms-accent) 30%, var(--ms-panel));
    box-shadow: 0 0 14px color-mix(in srgb, var(--ms-accent) 30%, transparent);
}
.ms-login-btn:active { transform: scale(0.985); }
.ms-login-btn:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 2px;
}

/* Radar-sweep spinner — hidden until the form gets .busy on submit (one-line
   inline onsubmit, no module). A conic sweep over a faint ring reads as the
   Coast-Shield radar motif rather than a generic border-spinner. */
.ms-login-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, transparent 54%, color-mix(in srgb, currentColor 35%, transparent) 56%),
        conic-gradient(from 0deg, transparent 72%, currentColor 100%);
    animation: ms-login-sweep 0.9s linear infinite;
}
@keyframes ms-login-sweep { to { transform: rotate(360deg); } }
.ms-login-form.busy .ms-login-spinner { display: inline-block; }
.ms-login-form.busy .ms-login-btn {
    pointer-events: none;
    opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
    .ms-login-spinner { animation-duration: 2s; }
}