/* Button and Input adapted from beUI (beui.dev/components/motion/button, .../input).
   The originals are React + Motion; this app is plain HTML, so the motion values are
   ported rather than the components: press scale 0.93, hover lift 1.02, pill sizing,
   the 0.45 s error shake, the 0.35 s success check draw and the 1.6 s ripple.
   Colours come from the host page through the --be-* variables below. */
:root{
 --be-primary:#1f6bff; --be-primary-ink:#fff;
 --be-ink:#12161f; --be-muted:#5b6575; --be-line:#e6ebf3; --be-surface:#fff;
 --be-danger:#c0392b; --be-success:#12925a;
 --be-press:.93;
 /* Spring-pressed in the original; a slight overshoot is the closest CSS equivalent. */
 --be-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.be-btn{
 display:inline-flex;align-items:center;justify-content:center;
 font:inherit;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;
 border:1px solid transparent;border-radius:999px;cursor:pointer;user-select:none;
 transition:background-color .2s,border-color .2s,color .2s,transform .18s var(--be-spring);
}
.be-btn:disabled,.be-btn[aria-disabled="true"]{pointer-events:none;opacity:.5}
.be-btn:active{transform:scale(var(--be-press))}
@media (hover:hover){
 .be-btn:hover{transform:scale(1.02)}
 .be-btn:hover:active{transform:scale(var(--be-press))}
}

.be-btn--sm{height:32px;padding:0 12px;font-size:12px;gap:6px}
.be-btn--md{height:40px;padding:0 20px;font-size:14px;gap:8px}
.be-btn--lg{height:48px;padding:0 24px;font-size:16px;gap:8px}
.be-btn--icon{height:32px;width:32px;padding:0;border-radius:10px}

.be-btn--primary{background:var(--be-primary);color:var(--be-primary-ink)}
.be-btn--primary:hover{background:color-mix(in srgb,var(--be-primary) 90%,transparent)}
.be-btn--secondary{border-color:var(--be-line);background:var(--be-surface);color:var(--be-ink)}
.be-btn--secondary:hover{border-color:color-mix(in srgb,var(--be-ink) 22%,transparent)}
.be-btn--outline{border-color:var(--be-line);background:transparent;color:var(--be-ink)}
.be-btn--outline:hover{background:color-mix(in srgb,var(--be-primary) 5%,transparent)}
.be-btn--ghost{background:transparent;color:var(--be-muted)}
.be-btn--ghost:hover{color:var(--be-ink);background:color-mix(in srgb,var(--be-primary) 5%,transparent)}

/* Material-style ripple from the press point; opt in with data-ripple. */
.be-btn[data-ripple]{position:relative;overflow:hidden}
.be-ripple{
 position:absolute;border-radius:50%;background:currentColor;pointer-events:none;
 translate:-50% -50%;animation:be-ripple 1.6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes be-ripple{from{scale:.05;opacity:.3}to{scale:1;opacity:0}}

/* ── Input ────────────────────────────────────────────────────────────────── */
.be-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.be-field__label{padding-inline:4px;font-size:14px;font-weight:500;color:var(--be-ink)}
.be-field__box{
 position:relative;height:44px;overflow:hidden;background:var(--be-surface);
 border:1px solid var(--be-line);border-radius:999px;
 transition:border-color .2s,box-shadow .2s;
}
.be-field__box:focus-within{
 border-color:color-mix(in srgb,var(--be-ink) 40%,transparent);
 box-shadow:0 0 0 2px color-mix(in srgb,var(--be-primary) 28%,transparent);
}
.be-field__input{
 width:100%;height:100%;padding:0 14px;border:0;background:transparent;
 font:inherit;font-size:16px;line-height:24px;color:var(--be-ink);outline:none;
}
.be-field__input::placeholder{color:color-mix(in srgb,var(--be-muted) 60%,transparent)}
.be-field__input:disabled{cursor:not-allowed}
.be-field__box:has(.be-field__icon) .be-field__input{padding-left:40px}
.be-field__box:has(.be-field__check) .be-field__input{padding-right:40px}
.be-field__icon{
 position:absolute;left:12px;top:50%;translate:0 -50%;display:flex;align-items:center;
 pointer-events:none;color:var(--be-muted);
}
.be-field__icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round;stroke-linejoin:round}

/* Error: red border, one shake, message fading in from above. */
.be-field[data-state="error"] .be-field__box{
 border-color:var(--be-danger);
 box-shadow:0 0 0 2px color-mix(in srgb,var(--be-danger) 25%,transparent);
 animation:be-shake .45s both;
}
@keyframes be-shake{
 0%{translate:0}15%{translate:-6px}30%{translate:6px}
 45%{translate:-4px}60%{translate:4px}80%{translate:-2px}100%{translate:0}
}
.be-field__error{padding-inline:4px;font-size:12px;color:var(--be-danger);margin:0}
.be-field__error:not(:empty){animation:be-error-in .2s ease-out both}
@keyframes be-error-in{from{opacity:0;translate:0 -4px;filter:blur(4px)}to{opacity:1;translate:0;filter:blur(0)}}
/* Reserve the message line so validation never nudges the rest of the form. */
.be-field--reserve .be-field__error{min-height:16px}

/* Success check, drawn on rather than popped in. */
.be-field__check{
 position:absolute;right:14px;top:50%;translate:0 -50%;width:20px;height:20px;
 color:var(--be-success);fill:none;
}
.be-field__check path{
 stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
 stroke-dasharray:24;stroke-dashoffset:24;animation:be-draw .35s ease-out forwards;
}
@keyframes be-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
 .be-btn{transition:background-color .2s,border-color .2s,color .2s}
 .be-btn:active,.be-btn:hover{transform:none}
 .be-ripple{display:none}
 .be-field[data-state="error"] .be-field__box{animation:none}
 .be-field__error:not(:empty){animation:none}
 .be-field__check path{animation:none;stroke-dashoffset:0}
}