/*
==============================================================================
CONFIDENTIAL - NON-DISCLOSURE NOTICE
------------------------------------------------------------------------------
This file contains proprietary and confidential information belonging to
The University of Sydney. It is provided under the terms of a Non-Disclosure
Agreement (NDA) and/or Licence Agreement. Any unauthorized copying, sharing, 
or distribution of this code or any part thereof is strictly prohibited.

For the full details of your confidentiality obligations, please refer to
the NDA and/or Licence Agreement under which you have received this code.

© 2023-2025 The University of Sydney. All rights reserved.
==============================================================================
*/


.login-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Discovery-results animation: rows fade and rise into view as they're added by
   login.js. Driven by CSS classes (per the no-inline-styles convention) and
   disabled entirely under prefers-reduced-motion. The `both` fill-mode keeps
   the initial (transparent, offset) state painted before the animation starts,
   so we never see a flash of the final position. */
@keyframes discovery-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.discovery-card {
    animation: discovery-enter 280ms ease-out both;
}

/* Stagger entry so the alert appears first, then provider/realm cards cascade.
   Five steps is enough — login flows never present more than a few options. */
.discovery-card:nth-child(1) { animation-delay: 0ms; }
.discovery-card:nth-child(2) { animation-delay: 60ms; }
.discovery-card:nth-child(3) { animation-delay: 120ms; }
.discovery-card:nth-child(4) { animation-delay: 180ms; }
.discovery-card:nth-child(n+5) { animation-delay: 240ms; }

/* Section element wrapping the discovery results uses display:contents so its
   children become direct flex-column siblings of the email card row. Without
   this the section's own block box subtly mis-aligns its inner .row from the
   email .row: the email row's negative gutters reach back into the flex column,
   while the inner row's negative gutters reach back only into the section
   box, leaving a few pixels of left offset. ARIA role="region" and aria-label
   still apply in the accessibility tree under display:contents in all
   modern browsers (Chrome 90+, Firefox 89+, Safari 13+). */
#login-discovery-results {
    display: contents;
}

/* Subtle "loading" treatment while the AJAX request is in flight. Pairs with
   the aria-live status line so users get both a visual and announced signal.
   The opacity is applied to children, not the section itself, because
   display:contents means the section has no box of its own to fade. */
#login-discovery-results > .discovery-card {
    transition: opacity 200ms ease-out;
}

#login-discovery-results[aria-busy="true"] > .discovery-card {
    opacity: 0.5;
    transition: opacity 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .discovery-card {
        animation: none;
    }
    #login-discovery-results > .discovery-card,
    #login-discovery-results[aria-busy="true"] > .discovery-card {
        transition: none;
    }
}

/* Auto-continue affordance: the provider card itself is the primary action,
   with a thin progress bar filling along its bottom edge over the countdown
   duration. Clicking the card at any point goes immediately; letting the bar
   fill auto-navigates. A secondary info line below the card carries the
   counting digit and the explicit "Stay here to choose" cancel button. */
.login-auto-target {
    position: relative;
    overflow: hidden;
}

.login-auto-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background-color: var(--bs-primary, #0d6efd);
    /* `forwards` keeps the bar at 100% if the setTimeout fires slightly after
       the animation completes, so we never see it snap back to 0. */
    animation: login-auto-progress-fill 3s linear forwards;
}

@keyframes login-auto-progress-fill {
    from { width: 0; }
    to { width: 100%; }
}

.login-auto-secondary {
    /* Sits directly under the provider card; pulls up slightly so it reads
       as belonging to the card rather than as a separate row. */
    margin-top: -0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.login-auto-countdown {
    font-weight: 700;
    /* Tabular-nums keeps the digit width stable as it counts 3 -> 2 -> 1, so
       the text around it doesn't reflow each second. */
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1ch;
    color: var(--bs-primary, #0d6efd);
}

@media (prefers-reduced-motion: reduce) {
    .login-auto-progress {
        animation: none;
        /* Still show something: a static full bar communicates "auto-action
           pending" without the animation. */
        width: 100%;
    }
}