/*
 * components/notification-mobile.css
 *
 * What:  Phone-only adjustments for the notifications page.
 * Why:   Kept in its own file (loaded with media="(max-width: 767px)") rather
 *        than as media queries inside notification.css — the project keeps
 *        mobile styling separate so a phone never downloads or parses rules
 *        it cannot use, and so a mobile-only fix is never one stray brace away
 *        from changing the desktop layout.
 *
 *        Everything here is a spacing / touch-target change. No colours and no
 *        new components: the page is the same page, sized for a thumb.
 *
 * Used:  linked from views/_layout.ejs under the mobile media query.
 */

.ntf {
    padding: var(--space-4) var(--space-3) var(--space-20);
}

.ntf__title { font-size: 1.25rem; }

/* The banner stacks: at ~360px a side-by-side button squeezes the copy down
   to two words a line. */
.ntf-optin {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}

.ntf-optin__btn {
    width: 100%;
    padding: var(--space-3);
}

/* Bleed the tab strip to the screen edges so it reads as scrollable —
   a strip that stops short of the edge looks like it has simply ended. */
.ntf-tabs {
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

/* Taller rows: a 38px icon plus tight padding is under the 44px minimum
   touch target, which makes an unread notification easy to mis-tap. */
.ntf-row__link {
    padding: var(--space-4) var(--space-2);
    gap: var(--space-3);
    min-height: 64px;
}

.ntf-row__ic {
    width: 34px;
    height: 34px;
}

.ntf-row__title { font-size: 0.9375rem; }
.ntf-row__body  { font-size: 0.8125rem; }

/* Hover states never fire on touch and leave a stuck highlight after a tap;
   the active state is what a thumb actually sees. */
.ntf-row__link:hover  { background: none; }
.ntf-row__link:active { background: var(--color-bg-alt); }

.ntf__more { padding: var(--space-4); }

.ntf-empty { padding: var(--space-12) var(--space-4); }