/* Welynx logo: mascot + Outfit Black wordmark; the "x" shows its cap by clipping a two-colour fill to the glyph. */
.wl { --wl-ink: #1F2A44; --wl-cap: #FF8A1F; display: inline-flex; align-items: flex-start; gap: .24em; line-height: 1; text-decoration: none; color: var(--wl-ink); white-space: nowrap; }
.wl--dark { --wl-ink: #ffffff; --wl-cap: #FF8A1F; }
.wl--white { --wl-ink: #ffffff; --wl-cap: #FFCF3A; }
.wl-mark { height: 1.14em; width: auto; flex: none; display: block; transform: translateY(-.083em); }
.wl-text { display: inline-flex; flex-direction: column; }
.wl-word { font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-weight: 900; letter-spacing: -.01em; line-height: 1; color: var(--wl-ink); }
.wl-x { display: inline-block; line-height: 1; margin-left: -.012em; background: linear-gradient(to bottom, var(--wl-cap) 0 47.7%, var(--wl-ink) 47.7% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wl-sub { font: 500 .42em/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; margin-top: .25em; opacity: .72; color: var(--wl-ink); }

/* Password strength bar (partials/password-strength.php): four segments fill and change colour as the person types */
.pw-meter { --pw-0: #e5484d; --pw-1: #ef6a3a; --pw-2: #f5a524; --pw-3: #84b82b; --pw-4: #1fa855; --pw-c: var(--pw-0); --pw-fill: 1; margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
.pw-meter[hidden] { display: none; }
.pw-meter[data-level="1"] { --pw-c: var(--pw-1); --pw-fill: 1; }
.pw-meter[data-level="2"] { --pw-c: var(--pw-2); --pw-fill: 2; }
.pw-meter[data-level="3"] { --pw-c: var(--pw-3); --pw-fill: 3; }
.pw-meter[data-level="4"] { --pw-c: var(--pw-4); --pw-fill: 4; }
.pw-meter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pw-meter-bar i { position: relative; height: 6px; border-radius: 99px; background: rgba(127,127,140,.22); overflow: hidden; }
.pw-meter-bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pw-c); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s; }
.pw-meter-bar i:nth-child(1)::after { transform: scaleX(1); }
.pw-meter[data-level="2"] .pw-meter-bar i:nth-child(-n+2)::after,
.pw-meter[data-level="3"] .pw-meter-bar i:nth-child(-n+3)::after,
.pw-meter[data-level="4"] .pw-meter-bar i::after { transform: scaleX(1); }
.pw-meter[data-level="0"] .pw-meter-bar i:nth-child(1)::after { transform: scaleX(.45); }
.pw-meter-bar i:nth-child(2)::after { transition-delay: .04s; }
.pw-meter-bar i:nth-child(3)::after { transition-delay: .08s; }
.pw-meter-bar i:nth-child(4)::after { transition-delay: .12s; }
.pw-meter-text { margin-top: 6px; opacity: .85; }
.pw-meter-label { color: var(--pw-c); font-weight: 700; transition: color .35s; }
@media (prefers-reduced-motion: reduce) { .pw-meter-bar i::after, .pw-meter-label { transition: none; } }

/* Show/hide eye inside every password box (added by password-strength.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 46px !important; }
.pw-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; opacity: .55; cursor: pointer; transition: opacity .2s, background-color .2s; }
.pw-eye:hover, .pw-eye:focus-visible { opacity: 1; background: rgba(127,127,140,.12); }
.pw-eye[aria-pressed="true"] { opacity: .9; }

/* "Your password should have" checklist: each line ticks green when met */
.pw-guide { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
.pw-guide-title { font-weight: 600; opacity: .8; margin-bottom: 4px; }
.pw-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 3px 14px; }
.pw-rules li { display: flex; align-items: center; gap: 7px; opacity: .72; transition: opacity .25s, color .25s; }
.pw-tick { flex: none; position: relative; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(127,127,140,.55); transition: background-color .25s, border-color .25s; }
.pw-tick::after { content: ""; position: absolute; left: 4.2px; top: 1.6px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.pw-rules li.ok { opacity: 1; color: #178a45; }
.pw-rules li.ok .pw-tick { background: #1fa855; border-color: #1fa855; }
.pw-rules li.ok .pw-tick::after { transform: rotate(45deg) scale(1); }
.pw-guide-tip { margin-top: 6px; opacity: .65; font-style: italic; }
@media (prefers-color-scheme: dark) { .pw-rules li.ok { color: #4cd685; } }

/* "Passwords match" line under the confirm box */
.pw-match { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #d93b3f; display: flex; align-items: center; gap: 6px; }
.pw-match::before { content: "\2715"; font-size: 11px; }
.pw-match.ok { color: #178a45; }
.pw-match.ok::before { content: "\2713"; }
.pw-match[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .pw-match.ok { color: #4cd685; } .pw-match { color: #ff7a7d; } }
@media (prefers-reduced-motion: reduce) { .pw-tick, .pw-tick::after, .pw-rules li { transition: none; } }