/* ===========================================================================
   Yumee hub — the front door: sign in, sign up, and getting back in.

   No Yumee project is usable without a Yumee account, so this is the first
   thing anyone sees, and it is the same door the desktop apps show
   (`lib/yumee_login.html`). `.yu-auth` in design/yumee.components.css IS the
   layout: full height, one centred column, the wordmark above, the character
   half-overlapping the card, one primary action (the ink pill). This file only
   adds what the component does not cover: field hints, the "you are already
   signed in" note, the pair of identifier fields, and the panel that replaces
   a form once it has done its job.

   The pages carry no site header and no tab bar. Chrome around a door is
   furniture, and every link in it is a way to not sign in.
   =========================================================================== */

.auth { display: flex; flex-direction: column; }

.auth .site-brand yumee-logo { --yu-logo-size: clamp(2.6rem, 2rem + 2vw, 3.2rem); }
.auth .site-brand__mark { height: clamp(2.8rem, 2.15rem + 2.1vw, 3.45rem); }
.auth__kicker { margin: 0; }

.yu-auth__mascot { margin-bottom: -34px; }
/* Mascot switched off in admin: no slot, no overlap, the card sits under the
   wordmark as it does on the pages that never had one. */
.yu-auth__mascot:has(> yumee-mascot[hidden]) { display: none; }
.yu-auth__mascot:has(> yumee-mascot[hidden]) + .yu-auth__card { margin-top: 10px; }
.yu-auth__mascot:has(> yumee-mascot[hidden]) + .yu-auth__card .yu-auth__title { margin-top: 0; }
.yu-auth__card { padding: clamp(28px, 5vw, 38px) clamp(22px, 5vw, 36px) clamp(24px, 5vw, 36px); }
.auth__card--bare { margin-top: 10px; }
.auth__card--bare .yu-auth__title { margin-top: 0; }

/* ---------------------------------------------------------------- fields -- */

.yu-field .yu-label { margin-bottom: 6px; }

.field-hint {
    margin: 6px 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

/* A real <fieldset>, stripped of its browser chrome. "One of these two" is a
   rule about the pair of identifier fields, and a <legend> is where a screen
   reader reads it as belonging to both. */
.auth-group {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    min-inline-size: 0;   /* fieldsets refuse to shrink below their content */
}
.auth-group__legend {
    padding: 0;
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ink);
}
.auth-group__hint { margin: 0 0 14px; }

/* -------------------------------------------------------------- notices --- */
/* .yu-auth__error  what the API said went wrong (role="alert")
   .yu-auth__reason something true you need before you commit
   .auth-note       something about the state you are already in
   The character is never beside any of them. */

.auth-alert:empty { display: none; }
.auth-alert:focus { outline: none; }

.auth-note {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--mist);
    color: var(--ink-soft);
    font-size: .875rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------- actions ---- */

.auth-submit { margin-top: 4px; }

/* In flight: pressed down and quieter, legible without colour or spinner. */
.auth-submit[disabled],
.auth-submit[disabled]:hover {
    opacity: .55;
    transform: translateY(1px);
    cursor: progress;
}

.auth-aside {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 18px;
    margin: 18px 0 0;
    font-size: .875rem;
}

.auth-noscript {
    margin: 14px 0 0;
    font-size: .8125rem;
    color: var(--ink-soft);
}

/* Under the card, on the paper: about the page, not the form. */
.yu-auth__foot { max-width: 46ch; margin-inline: auto; }
.auth-meta { color: var(--ink-faint); font-size: .8125rem; }

/* ----------------------------------------------------------- done panel --- */
/* What replaces the form once it has done its job. Focus lands here so the
   answer is read out rather than left for somebody to find. */

.auth-done:focus { outline: none; }

.auth-done__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
}
.auth-done__actions .yu-btn { flex: 1 1 12rem; }

/* --------------------------------------------------- sign-in, 040 ------ */
/* "Continue with Google": Google's branding rules win over the house style
   for this one button (the --google-* tokens in site.css): white, a grey
   hairline, the four-colour G on white, dark text. A pill is allowed. */

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--google-line);
    border-radius: var(--r-pill);
    background: var(--google-bg);
    color: var(--google-ink);
    font-family: var(--google-font);
    font-weight: 500;
    font-size: .9375rem;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}
.google-btn:hover { background: var(--google-hover); color: var(--google-ink); }
.google-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.google-btn__g { width: 20px; height: 20px; flex: none; }
.google-btn__label { min-width: 0; overflow-wrap: anywhere; }

/* The "or" between the Google button and the form. */
.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--ink-faint);
    font-size: .8125rem;
}
.auth-or::before,
.auth-or::after { content: ''; flex: 1 1 0; min-width: 0; border-top: var(--outline-soft); }

/* "Remember this device": the box and its sentence, the hint under the text. */
.auth-remember .yu-check { position: relative; align-items: flex-start; }
.auth-remember .field-hint { padding-left: 30px; }

/* A quiet text button beside the "use a different account" link. */
.auth-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--purple-ink);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.auth-linkbtn[disabled] { opacity: .55; cursor: progress; }
.auth-status:empty { display: none; }
.auth-status { margin: 0 0 12px; }

@media (max-width: 520px) {
    .auth-aside { flex-direction: column; align-items: flex-start; }
    .auth-done__actions .yu-btn { flex-basis: 100%; }
}