/* ======================================================================
   SIGN-IN — a blueprint of the payroll pipeline behind one card
   ======================================================================
   Self-contained: it needs only the theme tokens (_ThemeTokens) - no
   UBold, no Bootstrap. Colours follow Settings › Appearance:
     ground     the sidebar's dark accent gradient   --op-menu-gradient
     drawings   white lines, accent-light highlights --op-brown-light
     card       the accent on the button, links, focus ring  --op-brown
   Green, amber and red keep their meaning (paid / rules / deductions).

   One screen, no page scroll. The drawing plays once - nothing loops.
   ====================================================================== */

:root {
    --bp-ink: #17232d;
    --bp-ink-2: #4a5864;
    --bp-ink-3: #7a8793;
    --bp-rule: #dde3e9;
    --bp-err: #b43e2e;
    --bp-amber: #e0a93a;
    --bp-green: #4caf7a;
    --bp-red: #e06a57;
    --bp-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body.bp {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px 44px;
    overflow: hidden;
    position: relative;
    font: var(--op-font-size, 14px)/1.45 var(--op-font, system-ui, sans-serif);
    color: #fff;
    /* the grid covers the whole screen; the drawing (below) is scaled to fit
       inside it, so on a wide or a short screen nothing is cut off */
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(ellipse 38% 48% at 50% 50%, rgba(var(--op-brown-rgb, 37, 99, 235), .22), transparent 70%),
        var(--op-menu-gradient, linear-gradient(170deg, #1d2d3a, #0f171d));
}

/* ---------------------------------------------------------------- blueprint */
/* one panel each side of the 400px card, with a 32px gap to it */
.bp-art {
    position: absolute; top: 5vh; height: 84vh; width: calc(50% - 232px);
    pointer-events: none;
}
.bp-left  { left: 0; }
.bp-right { right: 0; }

.bp-art .p {
    fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: bpDraw 1.8s ease forwards;
    animation-delay: var(--d, 0s);
}
.bp-art .b { stroke: var(--op-brown-light, #8ab4f8); }
.bp-art .a { stroke: var(--bp-amber); }
.bp-art .g { stroke: var(--bp-green); }
.bp-art .r { stroke: var(--bp-red); }

.bp-art text {
    font-family: var(--bp-mono); font-size: 11px; letter-spacing: .3px;
    fill: rgba(255, 255, 255, .58); opacity: 0;
    animation: bpPop .6s ease forwards;
}
.bp-art text.h { font-family: var(--op-font, sans-serif); font-weight: 700; font-size: 13px; letter-spacing: .6px; fill: rgba(255, 255, 255, .82); }
.bp-art text.dim { fill: rgba(255, 255, 255, .38); }
.bp-art text.w { fill: #fff; }
.bp-art text.t-a { fill: var(--bp-amber); }
.bp-art text.t-g { fill: var(--bp-green); }
.bp-art text.t-r { fill: var(--bp-red); }

/* played once, after the drawing: the punch is read, the money moves, the slip is paid */
.bp-art .scan { stroke: var(--op-brown-light, #8ab4f8); stroke-width: 2; opacity: 0; animation: bpScan 1.6s ease-in-out 1 5s; }
.bp-art .flow { stroke: var(--bp-amber); stroke-width: 2; fill: none; stroke-dasharray: 6 10; opacity: 0; animation: bpFlow 1.4s linear 1 5s; }
.bp-art .ring { stroke: var(--bp-green); fill: none; stroke-width: 2; opacity: 0; transform-origin: center; transform-box: fill-box; animation: bpRing 1.6s ease-out 1 5.4s; }
.bp-art .dot-g { fill: var(--bp-green); }

@keyframes bpDraw { to { stroke-dashoffset: 0; } }
@keyframes bpPop  { to { opacity: 1; } }
@keyframes bpScan { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
@keyframes bpFlow { 0% { stroke-dashoffset: 48; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes bpRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------------------------------------------------------------- card */
.bp-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 400px;
    max-height: calc(100dvh - 72px); overflow-y: auto;
    background: #fff; color: var(--bp-ink);
    border: 1px solid var(--bp-rule); border-radius: 12px;
    padding: 28px 28px 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    animation: bpUp .6s ease .25s both;
}
@keyframes bpUp { from { opacity: 0; transform: translateY(14px); } }

.bp-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.bp-mono {
    width: 38px; height: 38px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    background: var(--op-brown, #2563eb); color: #fff;
    font-weight: 800; font-size: 17px;
    box-shadow: 0 6px 14px -6px rgba(var(--op-brown-rgb, 37, 99, 235), .7);
}
.bp-brand > div > b { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: .2px; }
.bp-brand > div > span { display: block; font-size: 12px; color: var(--bp-ink-3); margin-top: 2px; }

.bp-card h1 { font-size: 24px; font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.bp-sub { color: var(--bp-ink-3); font-size: 13px; margin: 4px 0 20px; }

.bp-f {
    display: flex; flex-direction: column; gap: 5px; position: relative;
    font-size: 12.5px; font-weight: 600; color: var(--bp-ink-2); margin-bottom: 14px;
}
.bp-f > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-f input {
    height: 42px; padding: 0 42px 0 12px;
    border: 1px solid var(--bp-rule); border-radius: 8px;
    background: #fff; color: var(--bp-ink);
    font: 400 14px var(--op-font, sans-serif);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.bp-f input::placeholder { color: #a9b3bc; }
.bp-f input:focus {
    outline: 0; border-color: var(--op-brown, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--op-brown-rgb, 37, 99, 235), .18);
}
.bp-f input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #fff inset !important; -webkit-text-fill-color: var(--bp-ink) !important; }
/* login.js marks a field it rejected */
.bp-f input.is-invalid, .bp-f.is-bad input { border-color: var(--bp-err); box-shadow: 0 0 0 3px rgba(180, 62, 46, .14); }

.bp-caps {
    font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: #b26a00; background: rgba(247, 184, 75, .2); padding: 1px 7px; border-radius: 5px;
}
.bp-eye {
    position: absolute; right: 6px; bottom: 5px; width: 32px; height: 32px;
    display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 6px; background: none; color: var(--bp-ink-3); cursor: pointer;
}
.bp-eye svg { width: 18px; height: 18px; }
.bp-eye:hover { color: var(--op-brown, #2563eb); }
.bp-eye:focus-visible { outline: 2px solid var(--op-brown, #2563eb); }

.bp-meta {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--bp-ink-3); margin: 2px 0 18px;
}
.bp-meta label { display: flex; align-items: center; gap: 7px; color: var(--bp-ink-2); cursor: pointer; }
.bp-meta input { accent-color: var(--op-brown, #2563eb); width: 15px; height: 15px; margin: 0; }

.bp-btn {
    width: 100%; height: 44px; border: 0; border-radius: 8px;
    background: var(--op-brown, #2563eb); color: #fff;
    font: 700 14.5px var(--op-font, sans-serif); letter-spacing: .01em; cursor: pointer;
    box-shadow: 0 10px 22px -12px rgba(var(--op-brown-rgb, 37, 99, 235), .9);
    transition: background-color .14s ease, transform .14s ease;
}
.bp-btn:hover { background: var(--op-brown-dark, #1d4ed8); }
.bp-btn:active { transform: scale(.985); }
.bp-btn:focus-visible { outline: 2px solid var(--op-brown, #2563eb); outline-offset: 2px; }
.bp-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bp-btn svg { width: 18px; height: 18px; transition: transform .14s ease; }
.bp-btn:hover svg { transform: translateX(2px); }
.bp-btn:disabled { cursor: default; }
.bp-btn.is-busy { background: var(--op-brown-dark, #1d4ed8); }
.bp-btn.is-ok { background: #2e7a4e; box-shadow: 0 10px 22px -12px rgba(46, 122, 78, .9); animation: bpPop2 .32s cubic-bezier(.34, 1.56, .64, 1); }
/* the one thing allowed to repeat: it spins only while the sign-in is in flight */
.bp-spin { width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: bpRot .7s linear infinite; }
@keyframes bpRot { to { transform: rotate(360deg); } }
@keyframes bpPop2 { from { transform: scale(.96); } }

/* what happened, in the card */
.bp-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 12px; padding: 10px 12px; border-radius: 9px;
    font-size: 12.5px; line-height: 1.45; border: 1px solid transparent;
    animation: bpNote .22s ease-out both;
}
.bp-note[hidden] { display: none; }
.bp-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.bp-note b { display: block; font-size: 13px; font-weight: 700; }
.bp-note.is-warn { background: #fff8e8; color: #7a5200; border-color: #f5dc9b; }
.bp-note.is-err  { background: #fdf1ef; color: #97301f; border-color: #f2c4bb; }
.bp-note.is-ok   { background: #eef8f2; color: #22603c; border-color: #bfe2cc; }
@keyframes bpNote { from { opacity: 0; transform: translateY(-4px); } }

/* a failed attempt: one small shake of the card */
.bp-card.is-shake { animation: bpShake .38s ease; }
@keyframes bpShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.bp-foot {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--bp-rule);
    font-size: 12px; color: var(--bp-ink-3); text-align: center;
}
.bp-foot svg { width: 15px; height: 15px; flex: none; color: var(--op-brown, #2563eb); }

.bp-copy {
    position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1;
    text-align: center; padding: 0 16px;
    font: 11.5px var(--bp-mono); color: rgba(255, 255, 255, .45);
}


/* ---------------------------------------------------------------- fit */
/* a narrow screen: the drawing would sit behind the card - keep the grid only */
@media (max-width: 999.98px) {
    .bp-art { display: none; }
}
/* a short screen: a tighter card, still no page scroll */
@media (max-height: 640px) {
    body.bp { padding-top: 14px; padding-bottom: 34px; }
    .bp-card { padding: 20px 24px 14px; }
    .bp-brand { margin-bottom: 12px; }
    .bp-sub { margin-bottom: 12px; }
    .bp-f { margin-bottom: 10px; }
    .bp-foot { margin-top: 12px; padding-top: 8px; }
    .bp-copy { bottom: 8px; }
    /* a message takes the security line's place, so the card still fits */
    .bp-card:has(.bp-note:not([hidden])) .bp-foot { display: none; }
}
@media (max-height: 580px) {
    .bp-sub { display: none; }
    .bp-card h1 { margin-bottom: 10px; }
}

/* motion off: show the finished drawing at once */
@media (prefers-reduced-motion: reduce) {
    .bp-art .p { stroke-dashoffset: 0; animation: none; }
    .bp-art text { opacity: 1; animation: none; }
    .bp-art .scan, .bp-art .flow, .bp-art .ring { animation: none; }
    .bp-card, .bp-card.is-shake, .bp-note, .bp-btn.is-ok { animation: none; }
}