# Check-in confirmation modal and toast brief

## Objective
Upgrade the existing public member check-in page so finding a record never immediately records attendance. The page must present a polished identity-confirmation modal and show all eventual status messages as floating toast notifications, not inline content.

## Audience
Church members of mixed ages and technical confidence using phones most often, plus desktop kiosk users. The interaction must be unmistakable, calm, accessible, and require one explicit confirmation before attendance is recorded.

## Existing application and output
- Real PHP application in `C:\xampp\htdocs\jsowbkm`.
- Modify only `checkin.php`, `assets/portal/css/user-portal.css`, and `assets/portal/js/portal.js`.
- Preserve existing PHP conventions, routes, CSRF helpers, auto-location behavior, live clock/date, background photo, asymmetric dark-left overlay, header, and bottom navigation.
- Backend work will provide `$pendingCheckin` (or null) and `$result` (or null) in `checkin.php`.
- `$pendingCheckin` fields: `token`, `member_name`, `member_username`, `member_type`, `member_image_url`, `service_name`, `expires_at`.
- `$result` fields retain `success`, `code`, `message`, optional `service_name`, and `attendance_time`.

## Aesthetic direction
Premium editorial church welcome desk: warm ivory paper, deep forest ink, restrained brass, soft depth, photography-led. Avoid generic SaaS cards, neon gradients, glassmorphism, excessive pills, or emoji-like decoration. The modal should feel like a dignified digital membership card presented by an usher.

## Structure and interaction
1. Remove the current inline result alert from the paper form.
2. Render a fixed toast region, top-right on desktop and safely inset/full-width near the top on mobile. A result creates one visually rich toast with semantic icon, concise title, message, optional service/time line, progress/dismiss affordance. It must not shift page layout. Use appropriate live-region semantics and a real close button. Auto-dismiss after about 7 seconds, while allowing hover/focus pause if practical.
3. When `$pendingCheckin` exists, render an auto-opening accessible dialog over a darkened, lightly blurred scrim. Include a visible close button and Escape support.
4. Modal hierarchy: small “Confirm your identity” eyebrow; large circular/square member photograph with tasteful fallback handling; verified marker; member full name; labeled member ID; member type; today’s service; a short human sentence asking whether this is their profile.
5. Primary action “Yes, check me in” posts to `confirm_checkin.php` with CSRF field and hidden pending token. Secondary “Not me” posts to `cancel_checkin.php` with the same. Closing via X/Escape should use the non-recording cancellation path or otherwise close safely without ever confirming.
6. Modal needs focus management: initial focus, focus trap, restore focus where possible, body scroll lock, Escape close. Do not use native `alert()` or `confirm()`.
7. Keep the original identifier form available behind the modal, unchanged except its submit label may remain “Find my record”.

## Typography
Stay with the project’s native Apple/system sans stack. Use editorial scale and weight contrast; no new external font requests.

## Color and responsiveness
Reuse CSS variables in `user-portal.css`: forest `--ink`, ivory `--paper`/`--cream`, brass `--brass`, and semantic status colors. Modal and toast must remain readable at 375px, 768px, and 1440px, respect mobile safe areas and the bottom nav, and avoid horizontal overflow.

## Memorable detail
The member portrait and verified identity lockup should become the emotional center: it should feel like the church recognized the person before asking for their consent to record attendance.

## Image needs
Use the member photo URL provided by the backend. Do not generate or fetch imagery. Provide an elegant initials or church-logo fallback if the photo cannot load.

## Quality constraints
- Escape all dynamic PHP output with `appEscape`.
- Do not weaken CSRF handling.
- Progressive enhancement: forms must remain real POST forms.
- No external dependencies.
- Honor `prefers-reduced-motion`.
- Keep touch targets at least 44px.
