/**
 * Spruce Login module — structure only.
 *
 * Colours, fonts and spacing belong to the Divi typography and decoration
 * controls on the module, so this file sets almost no text styling. What is here
 * is the handful of rules the module cannot work without:
 *
 *   - hiding the steps the visitor has not reached yet;
 *   - making six single-character inputs read as one code field;
 *   - keeping a logo inside its column.
 *
 * The two exceptions are the link-shaped button and the status tones, and both
 * are explained where they appear.
 */

/* -----------------------------------------------------------------------------
 * Steps
 *
 * Every step is in the DOM from the start so it can be styled in the builder;
 * the script reveals one by clearing its `hidden` attribute. Browsers already
 * hide [hidden] elements, but a theme rule as ordinary as `.spruce-login div
 * { display: block }` outranks the UA stylesheet, which would leave all three
 * steps stacked on the page at once. This restates it at author level.
 * -------------------------------------------------------------------------- */

.spruce-login [hidden] {
    display: none;
}

/* -----------------------------------------------------------------------------
 * Branding
 * -------------------------------------------------------------------------- */

.spruce-login__logo {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
 * Field labels
 *
 * A <label> is inline by default, which would sit it beside its input rather
 * than above it — and, once the module centres its contents, produce a centred
 * line reading "Email Address [box]". The gap beneath is the Field Label Spacing
 * control's business, not this file's.
 * -------------------------------------------------------------------------- */

.spruce-login__label {
    display: block;
}

/* -----------------------------------------------------------------------------
 * Stay logged in
 *
 * A checkbox drawn as a switch. The native control is clipped so the slider
 * can take the clicks while remaining a real checkbox for assistive tech.
 * -------------------------------------------------------------------------- */

.spruce-login__remember {
    margin: 0 0 18px;
}

.spruce-login__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.spruce-login__toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.spruce-login__toggle-slider {
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--gcid-secondary-color, #e5e7eb);
    border-radius: 24px;
    transition: background-color 0.2s ease;
}

.spruce-login__toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.spruce-login__toggle-input:checked + .spruce-login__toggle-slider {
    background-color: var(--gcid-primary-color, #0ea5e9);
}

.spruce-login__toggle-input:checked + .spruce-login__toggle-slider::before {
    transform: translateX(20px);
}

.spruce-login__toggle-input:focus-visible + .spruce-login__toggle-slider {
    outline: 2px solid var(--gcid-primary-color, #0ea5e9);
    outline-offset: 2px;
}

.spruce-login__toggle-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
}

/* -----------------------------------------------------------------------------
 * The six-digit code
 *
 * One input per digit. The fixed width and centred text are what turn six text
 * fields into something a visitor recognises as a code; the Code Boxes size and
 * border controls in the builder override them.
 * -------------------------------------------------------------------------- */

.spruce-login__code {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
}

.spruce-login__code-input {
    width: 2.5em;
    padding-left: 0;
    padding-right: 0;
    text-align: center;

    /* Digits line up in their boxes only if each one occupies the same width. */
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * The alternate-login control
 *
 * The brief calls for a *link*, and this is a <button> — because it acts on this
 * page rather than navigating, and a link to nowhere strands keyboard and
 * screen-reader users. Stripping the button chrome is what reconciles the two:
 * it reads as a link and behaves as a button.
 * -------------------------------------------------------------------------- */

.spruce-login__alt-link {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.spruce-login__alt-link:disabled {
    cursor: default;
    text-decoration: none;
    opacity: 0.65;
}

/* -----------------------------------------------------------------------------
 * Status line
 *
 * Colour here is meaning rather than decoration — working, failed, signed in —
 * so it is set from the tone the script reports instead of being left to the
 * Status Text control, which can only hold one colour for all three. The values
 * are WordPress's own admin palette; a site that wants its own overrides these
 * three selectors.
 * -------------------------------------------------------------------------- */

.spruce-login__status:empty {
    display: none;
}

.spruce-login__status[data-tone="info"] {
    color: #2271b1;
}

.spruce-login__status[data-tone="error"] {
    color: #d63638;
}

.spruce-login__status[data-tone="success"] {
    color: #00a32a;
}

/* -----------------------------------------------------------------------------
 * Visual Builder
 *
 * On the canvas the three steps are shown at once — an editor cannot style what
 * they cannot see — so they get a light separation to make clear they are
 * alternatives rather than one long form.
 * -------------------------------------------------------------------------- */

.et-fb .spruce-login__step {
    border-top: 1px dashed currentColor;
    margin-top: 1em;
    padding-top: 1em;
    opacity: 0.9;
}