/*
 * Email sign-in link pages and the button on the sign-in forms: colours only, scoped to
 * the plugin's own classes.
 *
 * Which colours: the plugin option Colour scheme, and in Automatic the page's DECLARED
 * scheme, never the visitor's operating-system setting. A template may have no dark mode at
 * all (Cassiopeia), so prefers-color-scheme says nothing about the page this sits on;
 * following it turned the sign-in-form button light blue on a page that stayed white
 * (#7ab3ff on #ffffff, 2.16:1, its edge all but gone).
 *   Light / Dark: the server writes data-emaillogin-scheme="light|dark" on the panel and
 *     the button.
 *   Automatic: js/scheme.js writes the same attribute from the NEAREST ancestor that
 *     declares a scheme: data-bs-theme (Bootstrap 5.3), data-color-scheme (Atum), class
 *     uk-light (a dark YOOtheme/UIkit section) or uk-dark (a light one), and keeps it up
 *     to date if the page's theme changes after loading. Without
 *     JavaScript the ancestor rules below apply instead (they cannot tell which ancestor is
 *     nearer, so a conflict resolves to light).
 * YOOtheme Pro sets a section's dark background in compiled CSS with no markup signal
 * unless the section's text colour is set to light (uk-light); there, only the person
 * configuring the site can say, which is what Light and Dark are for.
 *
 * The panel sets its own background, so its text meets 7:1 (WCAG AAA) whatever surrounds it:
 *   light: text #1a1a2e on #ffffff = 17.06:1; link #16568e = 7.62:1; error #8b0000 = 10.0:1
 *   dark:  text #ffffff on #0f151d = 18.34:1; link #7ab3ff = 8.49:1; error #ffb3b3 = 10.8:1
 *
 * The sign-in-form button sits on the template's own background, which the plugin cannot
 * know. Its text is on its own fill (#ffffff on #16568e = 7.62:1; declared dark #0f151d on
 * #7ab3ff = 8.49:1). Its edge is two colours inside its own box (WCAG technique C40), so
 * no margin or overflow:hidden on the template's side can clip it: a 2px #1a1a2e border
 * with a 2px #ffffff ring inside it. Whatever the page, one of the two meets it at 3:1 or
 * more: on #ffffff the border is 17.06:1; on #0f151d the border merges into the page and
 * the white ring is 18.34:1 against it; the worst case, a mid grey, is 4.13:1.
 * Focus adds a 3px #1a1a2e outline with #ffffff either side of it, outside the button. The
 * outline is a real outline, so forced-colours mode still shows focus.
 * The buttons on the plugin's own pages sit on the panel, whose background the plugin sets,
 * so their fill alone is their edge (7.62:1 light, 8.49:1 dark).
 * The button's colour rules cover Bootstrap's .btn and UIkit's .uk-button (YOOtheme's
 * mod_login override renders extra buttons as uk-button uk-button-secondary, with no .btn).
 * They are written :is(.btn, .uk-button) plus the plugin's class three times, 0,4,0 (0,5,0
 * with a state), which outranks Bootstrap's state rules (0,3,0) and UIkit/YOOtheme's inverse
 * section rules (up to 0,4,0 with a state) whichever stylesheet loads first, with no
 * !important. They set only colour, border and inner ring: size, spacing and type stay the
 * template's.
 * Layout comes from the template's and Bootstrap's own classes.
 */
.plg-emaillogin-page,
.plg_system_emaillogin_button {
    --emaillogin-bg: #ffffff;
    --emaillogin-text: #1a1a2e;
    --emaillogin-link: #16568e;
    --emaillogin-button-bg: #16568e;
    --emaillogin-button-text: #ffffff;
    --emaillogin-error: #8b0000;
}

/* Automatic without JavaScript: follow a declaring ancestor. */
:is([data-bs-theme="dark"], [data-color-scheme="dark"], .uk-light) :is(.plg-emaillogin-page, .plg_system_emaillogin_button) {
    --emaillogin-bg: #0f151d;
    --emaillogin-text: #ffffff;
    --emaillogin-link: #7ab3ff;
    --emaillogin-button-bg: #7ab3ff;
    --emaillogin-button-text: #0f151d;
    --emaillogin-error: #ffb3b3;
}

:is([data-bs-theme="light"], [data-color-scheme="light"], .uk-dark) :is(.plg-emaillogin-page, .plg_system_emaillogin_button) {
    --emaillogin-bg: #ffffff;
    --emaillogin-text: #1a1a2e;
    --emaillogin-link: #16568e;
    --emaillogin-button-bg: #16568e;
    --emaillogin-button-text: #ffffff;
    --emaillogin-error: #8b0000;
}

/* The element's own scheme (the option, or scheme.js in Automatic): later, so it wins. */
:is(.plg-emaillogin-page, .plg_system_emaillogin_button)[data-emaillogin-scheme="dark"] {
    --emaillogin-bg: #0f151d;
    --emaillogin-text: #ffffff;
    --emaillogin-link: #7ab3ff;
    --emaillogin-button-bg: #7ab3ff;
    --emaillogin-button-text: #0f151d;
    --emaillogin-error: #ffb3b3;
}

:is(.plg-emaillogin-page, .plg_system_emaillogin_button)[data-emaillogin-scheme="light"] {
    --emaillogin-bg: #ffffff;
    --emaillogin-text: #1a1a2e;
    --emaillogin-link: #16568e;
    --emaillogin-button-bg: #16568e;
    --emaillogin-button-text: #ffffff;
    --emaillogin-error: #8b0000;
}

.plg-emaillogin-page {
    background: var(--emaillogin-bg);
    color: var(--emaillogin-text);
    border: 2px solid var(--emaillogin-link);
    border-radius: .5rem;
    padding: 1.5rem;
    max-width: 40rem;
}

/*
 * The panel sets its own background, so its own text colours must win over a template's
 * "inverse" rules, which recolour headings, text and links inside a section the theme
 * marks as dark (YOOtheme/UIkit: .uk-section-default:not(.uk-preserve-color) h1 is 0,2,1,
 * and a:hover inside it 0,3,1). Measured on YOOtheme Pro with a dark default section, a
 * light panel's heading and link were white on white (1:1) before this. The panel's class
 * is repeated three times, so: block text 0,3,1; inline text 0,3,1 (it inherits, so it
 * keeps the colour of the link, error or button it sits in); links 0,4,1, and 0,5,1 with
 * a state; the error 0,4,0; the panel's buttons 0,5,0, and 0,6,0 with a state. (The
 * sign-in-form button, outside the panel, is 0,4,0, and 0,5,0 with a state.) These win
 * whichever stylesheet loads first, with no !important. A site restyling the panel does
 * it through the --emaillogin-* variables on [data-emaillogin-scheme] (0,2,0 or more).
 */
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page :is(h1, h2, h3, h4, h5, h6, p, label, li, legend, dt, dd, th, td, caption, blockquote, figcaption, small, div) {
    color: var(--emaillogin-text);
}

.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page :is(span, strong, em, b, i, code) {
    color: inherit;
}

.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page a:not(.btn),
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page a:not(.btn):hover,
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page a:not(.btn):focus {
    color: var(--emaillogin-link);
    text-decoration: underline;
}

/* Hover thickens the underline; keyboard focus gets an outline in the panel's text colour. */
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page a:not(.btn):hover {
    text-decoration-thickness: 3px;
}

.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page a:not(.btn):focus-visible {
    outline: 3px solid var(--emaillogin-text);
    outline-offset: 2px;
}

.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .plg-emaillogin-error {
    color: var(--emaillogin-error);
    font-weight: 700;
}

.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .btn.plg-emaillogin-button,
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .btn.plg-emaillogin-button:hover,
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .btn.plg-emaillogin-button:focus,
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .btn.plg-emaillogin-button:active {
    background: var(--emaillogin-button-bg);
    border-color: var(--emaillogin-button-bg);
    color: var(--emaillogin-button-text);
}

/*
 * The email field keeps its own white fill and dark text, with a 2px edge in the link
 * colour, so it shows on the panel whatever the template does to form fields (measured on
 * YOOtheme Pro in a dark section: the field was white on the white panel with no visible
 * border). Edge: #16568e on the light panel 7.62:1; #7ab3ff on the dark panel 8.49:1.
 * Text #1a1a2e on #ffffff 17.06:1.
 */
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .form-control {
    background-color: #ffffff;
    color: #1a1a2e;
    border: 2px solid var(--emaillogin-link);
    /* Keeps the browser's own autofill colours light, to match the white fill and dark text,
       on a template that declares color-scheme: dark. */
    color-scheme: light;
}

/* An address that was refused: the edge takes the error colour (#8b0000 on the light panel
   10.0:1; #ffb3b3 on the dark panel 10.8:1), alongside the error message above the field. */
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .form-control[aria-invalid="true"] {
    border-color: var(--emaillogin-error);
}

/* A gap between the form's button and the Back to sign in link below it. */
.plg-emaillogin-page.plg-emaillogin-page.plg-emaillogin-page .plg-emaillogin-back {
    margin-top: 1rem;
}

.plg-emaillogin-page .btn.plg-emaillogin-button:focus-visible,
.plg-emaillogin-page .form-control:focus-visible {
    outline: 3px solid var(--emaillogin-text);
    outline-offset: 3px;
}

/* The sign-in-form button: Bootstrap .btn or UIkit .uk-button (see the note above). */
:is(.btn, .uk-button).plg_system_emaillogin_button.plg_system_emaillogin_button.plg_system_emaillogin_button,
:is(.btn, .uk-button).plg_system_emaillogin_button.plg_system_emaillogin_button.plg_system_emaillogin_button:hover,
:is(.btn, .uk-button).plg_system_emaillogin_button.plg_system_emaillogin_button.plg_system_emaillogin_button:focus,
:is(.btn, .uk-button).plg_system_emaillogin_button.plg_system_emaillogin_button.plg_system_emaillogin_button:active,
:is(.btn, .uk-button).plg_system_emaillogin_button.plg_system_emaillogin_button.plg_system_emaillogin_button.active,
:is(.btn, .uk-button).plg_system_emaillogin_button.plg_system_emaillogin_button.plg_system_emaillogin_button.show {
    background: var(--emaillogin-button-bg);
    color: var(--emaillogin-button-text);
    border: 2px solid #1a1a2e;
    box-shadow: inset 0 0 0 2px #ffffff;
}

:is(.btn, .uk-button).plg_system_emaillogin_button.plg_system_emaillogin_button.plg_system_emaillogin_button:focus-visible {
    outline: 3px solid #1a1a2e;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 7px #ffffff;
}