/* Sign-in pages: login, signup, invite, password reset. One card, one Google
   button, one set of field cues, so the four pages cannot drift apart.
   Loaded by authPageAssets() (src/functions.inc.php). Paired with auth.js.
   /mfa keeps its own styles: it is a single code box, not a form. */

.au-card { box-sizing: border-box; background: white; border: 1px solid var(--grey5); border-radius: 10px;
	padding: 28px 28px 22px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.au-card.au-solo { max-width: 420px; margin: 30px auto 50px; }
.au-card h1 { font-size: 1.6em; margin: 0 0 6px; text-align: center; }
.au-card h2 { margin: 0 0 4px; font-size: 1.35em; }
.au-sub { color: var(--grey2); margin: 0 0 20px; line-height: 1.5; }
.au-card h1 + .au-sub { text-align: center; }
.au-sub strong { color: var(--content); overflow-wrap: anywhere; }
.au-badge { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-light); color: var(--brand-text);
	display: flex; align-items: center; justify-content: center; font-size: 1.4em; margin: 0 auto 12px; }

.au-google { width: 100%; justify-content: center; background: #1a73e8; color: white; padding: 11px 20px; border: none;
	border-radius: 5px; cursor: pointer; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.au-google:hover { background: #1765cc; }
.au-divider { display: flex; align-items: center; gap: 12px; color: var(--grey2); font-size: 0.9em; margin: 18px 0 14px; }
.au-divider:before, .au-divider:after { content: ""; flex: 1; height: 1px; background: var(--grey5); }

/* Fields: label above, leading icon, trailing tick/cross, one-line message. */
.au-card .simpleform .formrow { margin: 0 0 12px; }
.au-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.au-label label { font-weight: 600; font-size: 0.92em; }
.au-label a { font-size: 0.85em; }
.au-input { position: relative; }
.au-card .simpleform .au-input input { width: 100%; box-sizing: border-box; padding: 9px 36px; font-size: 1em;
	transition: border-color .15s, box-shadow .15s; }
.au-card .simpleform .au-input input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(25,118,210,0.14); }
/* z-index: the icon precedes the input in the markup, so it would paint under it. */
.au-icon { position: absolute; z-index: 1; left: 12px; top: 50%; transform: translateY(-50%); color: var(--grey3);
	font-size: 0.9em; pointer-events: none; transition: color .15s; }
.au-input:focus-within .au-icon { color: var(--brand-text); }
.au-state { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.9em; }
.au-field.is-valid .au-state:before { content: "\f00c"; color: var(--success); }
.au-field.is-invalid .au-state:before { content: "\f00d"; color: var(--danger); }
.au-card .simpleform .au-field.is-valid input { border-color: var(--success); }
.au-card .simpleform .au-field.is-invalid input { border-color: var(--danger); }
.au-msg { display: block; font-size: 0.82em; color: var(--grey2); margin-top: 4px; min-height: 1.2em; }
.au-field.is-invalid .au-msg { color: var(--danger); }
.au-field.is-valid .au-msg { color: var(--success); }

.au-reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
	padding: 6px 8px; cursor: pointer; color: var(--grey2); }
.au-reveal:hover, .au-reveal[aria-pressed="true"] { color: var(--brand-text); }
/* The global button hover fill reads as a pressed state on a bare icon. */
.au-reveal:hover, .au-reveal:focus, .au-reveal:active { background: none !important; }

/* Password strength: four bars, coloured by score. */
.au-meter { display: flex; gap: 4px; margin-top: 6px; }
.au-meter span { flex: 1; height: 4px; border-radius: 2px; background: var(--grey5); transition: background .2s; }
.au-meter[data-score="1"] span:nth-child(-n+1) { background: var(--danger); }
.au-meter[data-score="2"] span:nth-child(-n+2) { background: #d3a51d; }
.au-meter[data-score="3"] span:nth-child(-n+3) { background: #6aa84f; }
.au-meter[data-score="4"] span { background: var(--success); }

.au-agree { font-size: 0.9em; color: var(--grey1); }
.au-card .au-submit { width: 100%; padding: 12px; font-size: 1.05em; font-weight: 600; margin-top: 4px; }
.au-foot { text-align: center; margin: 16px 0 0; color: var(--grey1); font-size: 0.95em; }
.au-done { text-align: center; }
.au-done p { color: var(--grey1); line-height: 1.55; }

@media (max-width: 460px) {
	.au-card { padding: 22px 18px 20px; }
	.au-card.au-solo { margin-top: 16px; }
}