/* DeWayne's Rewards — public signup flow. Sibling of the kiosk stylesheet:
   same brand blue, white field, fluid clamp() type, friendly large-type voice. */
:root {
    --blue: #3051AB;
    --blue-050: #EEF2FB;
    --blue-100: #D9E2F5;
    --ink: #1A2233;
    --muted: #6B7280;
    --line: #E5E7EB;
    --alert: #B42334;
    --alert-050: #FBEAEC;
    --radius: 14px;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink); background: #fff;
    min-height: 100dvh; display: flex; flex-direction: column;
}

.brand { display: flex; justify-content: center; padding: clamp(.9rem, 4vw, 1.4rem) 1rem .2rem; }
.brand__logo { height: clamp(2.2rem, 9vw, 3rem); width: auto; }

.shell { flex: 1; width: 100%; max-width: 28rem; margin: 0 auto; padding: .6rem 1.25rem 2rem; }

.dots { display: flex; gap: .45rem; justify-content: center; padding: .5rem 0 1rem; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--blue-100); }
.dot--done { background: var(--blue); opacity: .45; }
.dot--now { background: var(--blue); transform: scale(1.25); }

.screen { display: flex; flex-direction: column; gap: 1rem; padding-top: .4rem; }
.screen--center { align-items: center; text-align: center; padding-top: 12vh; }

.big { font-size: clamp(1.7rem, 7.5vw, 2.3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
.big__sub { color: var(--muted); font-size: clamp(1rem, 4vw, 1.1rem); line-height: 1.45; }

.burst { font-size: clamp(2.6rem, 12vw, 3.6rem); animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .burst { animation: none; } }

form { display: flex; flex-direction: column; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field__label { font-weight: 700; font-size: .92rem; }
.field__label small { color: var(--muted); font-weight: 500; }
.field__input {
    font: inherit; font-size: 1.05rem; color: var(--ink);
    padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius);
    background: #fff; width: 100%; min-height: 3.2rem;
}
.field__input:focus-visible { outline: 3px solid var(--blue-100); border-color: var(--blue); }
.field__input--code { font-size: 1.6rem; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
.field__input[disabled] { background: var(--blue-050); color: var(--muted); }
.field__pair { display: flex; gap: .7rem; }
.field__err { color: var(--alert); font-size: .82rem; }

.check {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.check input { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .1rem; accent-color: var(--blue); }
.check small { color: var(--muted); }

/* Signature element: department tap-cards (multi-select) */
.deptGrid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.dept input { position: absolute; opacity: 0; pointer-events: none; }
.dept__card {
    display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center;
    min-height: 4.6rem; padding: .8rem .6rem; font-weight: 700; font-size: .98rem; line-height: 1.2;
    border: 2px solid var(--blue-100); border-radius: var(--radius); color: var(--blue);
    background: #fff; cursor: pointer; user-select: none;
    transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.dept__check { display: none; font-size: 1.05rem; }
.dept input:checked + .dept__card { background: var(--blue); border-color: var(--blue); color: #fff; }
.dept input:checked + .dept__card .dept__check { display: inline; }
.dept input:focus-visible + .dept__card { outline: 3px solid var(--blue-100); }
.dept__card:active { transform: scale(.97); }
.deptGrid .dept:last-child:nth-child(odd) { grid-column: 1 / -1; } /* odd count: last card spans full width */

.cta {
    font: inherit; font-size: 1.15rem; font-weight: 800; color: #fff;
    background: var(--blue); border: 0; border-radius: 999px;
    padding: 1rem 1.5rem; min-height: 3.4rem; cursor: pointer; width: 100%;
    box-shadow: 0 6px 18px rgba(48, 81, 171, .25);
}
.cta:active { transform: translateY(2px); box-shadow: 0 3px 10px rgba(48, 81, 171, .3); }
.cta:focus-visible { outline: 3px solid var(--blue-100); }

.linkbtn { font: inherit; font-size: .95rem; font-weight: 600; color: var(--blue); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: .4rem; }
.resend { margin-top: .2rem; align-items: center; }

.card { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.card--info { background: var(--blue-050); border-color: var(--blue-100); }
.card--legal { font-size: .85rem; color: var(--muted); line-height: 1.5; max-height: 14rem; overflow-y: auto; }

.alert { background: var(--alert-050); color: var(--alert); border-radius: var(--radius); padding: .8rem 1rem; font-size: .95rem; font-weight: 600; }
.alert:empty { display: none; }

.finePrint { color: var(--muted); font-size: .8rem; text-align: center; line-height: 1.4; }

.foot { text-align: center; color: var(--muted); font-size: .72rem; padding: 1rem; }