/* Welynx palette, taken from the logo files in /assets/img. Every other stylesheet reads these; company themes
   override app.css's --brand/--accent/... tokens, never these. The wordmark rules below keep their own literal colours. */
:root {
  --brand-navy: #1F2A44;          /* ink: text, sidebar, dark backgrounds */
  --brand-navy-deep: #0E131F;     /* navy darkened, for the landing page's space */
  --brand-primary: #FF6A3D;       /* coral: buttons, active states */
  --brand-primary-hover: #E2552C;
  --brand-primary-text: #B34A2B;  /* coral dark enough for small text and links on white (5.3:1) */
  --brand-on-primary: #1F2A44;    /* text on coral or orange: white fails, navy is 5:1 */
  --brand-accent: #FF8A1F;        /* orange from the x cap: highlights, badges, charts */
  --brand-yellow: #FFCF3A;        /* on dark backgrounds only */
  --brand-success: #3FB34F;       /* fills: paid, profit, switches */
  --brand-success-text: #297433;  /* green for text on white or pale green */
  --brand-danger: #D92D20;        /* errors, losses, overdue, delete: a red, never the coral */
  --brand-danger-text: #B42318;
  --brand-brown: #7a3b1c;
}

/* 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: var(--brand-danger); --pw-1: #e8590c; --pw-2: #f5a524; --pw-3: #84b82b; --pw-4: var(--brand-success); --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: color-mix(in srgb, var(--pw-c) 62%, #000); font-weight: 700; transition: color .35s; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pw-meter-label { color: color-mix(in srgb, var(--pw-c) 70%, #fff); } }
:root[data-theme="dark"] .pw-meter-label { color: color-mix(in srgb, var(--pw-c) 70%, #fff); }
@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: var(--brand-success-text); }
.pw-rules li.ok .pw-tick { background: var(--brand-success); border-color: var(--brand-success); }
.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) { :root:not([data-theme="light"]) .pw-rules li.ok { color: #4cd685; } }
:root[data-theme="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: var(--brand-danger-text); display: flex; align-items: center; gap: 6px; }
.pw-match::before { content: "\2715"; font-size: 11px; }
.pw-match.ok { color: var(--brand-success-text); }
.pw-match.ok::before { content: "\2713"; }
.pw-match[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pw-match.ok { color: #4cd685; } :root:not([data-theme="light"]) .pw-match { color: #ff7a7d; } }
:root[data-theme="dark"] .pw-match.ok { color: #4cd685; } :root[data-theme="dark"] .pw-match { color: #ff7a7d; }
@media (prefers-reduced-motion: reduce) { .pw-tick, .pw-tick::after, .pw-rules li { transition: none; } }