/*
 * components/notify-popup-mobile.css
 *
 * What:  Phone-only layout for the in-page notification card.
 * Why:   Separate file, loaded with media="(max-width: 767px)", per the
 *        project's separate mobile/desktop CSS rule — a phone parses only
 *        what it can use and a phone fix can never leak into desktop.
 * Used:  Linked from views/_layout.ejs.
 */

.notify-pop {
    /* "Top-right corner" means nothing on a 390px screen — it becomes a
     * full-width strip under the header, like the toast stack does. */
    top: 68px;
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
}

.notify-pop__title { font-size: 0.92rem; }
.notify-pop__body  { font-size: 0.82rem; }