/* Wahloon SiteSafe: screens 26 (Session Expired) and 28 (All Caught Up).

   The design board (docs/design-board-v3.html) has its own .modal-scrim,
   .modal-card, .m-*, .empty-state and .em-* rules, but those live in the
   board's own mock stylesheet only, app.css does not define them. This file
   is the real, shipped version of that vocabulary, sized to match the app's
   actual type scale (compare .pass-screen/.big-stamp/.pass-title in app.css,
   the closest existing "centred icon, heading, body copy" pattern) rather
   than the board's scaled-down mock numbers. */

/* ---------- screen 28: All Caught Up ----------
   .content is a flex item of #app (so it fills the real space between header
   and nav) but is not itself a flex container, so a plain child cannot use
   flex:1 to fill it the way the design board's own .content does. This
   wrapper gives the caught-up body that missing flex context, the same
   min-height:100% approach app.css already uses for .pass-screen. */
.caughtup-shell{ min-height:100%; display:flex; flex-direction:column; }

.empty-state{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 34px 40px; text-align:center;
}
.empty-state .em-icon{
  width:64px; height:64px; border-radius:50%;
  background:var(--green-tint); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; margin-bottom:18px;
}
.empty-state .em-title{ font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); margin-bottom:8px; }
.empty-state .em-body{ font-size:14px; color:var(--steel-dark); line-height:1.55; max-width:280px; }

/* ---------- screen 26: Session Expired ----------
   Appended straight onto #app by states.js rather than painted inside
   .content, so it sits over whatever screen was showing when the session
   timed out. #app already has position:relative, so inset:0 here covers
   exactly the app viewport. */
.modal-scrim{
  position:absolute; inset:0;
  background:rgba(16,16,18,.72);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
/* The overlay is appended after the toast element, which app.css gives
   z-index:40. Without this it could end up behind an active toast. */
.session-expired-scrim{ z-index:50; }

.modal-card{
  background:#fff; border-radius:16px; padding:30px 24px;
  width:100%; max-width:320px; text-align:center;
  box-shadow:0 20px 44px rgba(0,0,0,.35);
}
.modal-card .m-icon{
  width:56px; height:56px; border-radius:50%;
  background:var(--crimson-tint); color:var(--crimson);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin:0 auto 16px;
}
.modal-card .m-title{ font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink); margin-bottom:8px; }
.modal-card .m-body{ font-size:14px; color:var(--steel-dark); line-height:1.55; margin-bottom:22px; }