/* area-main.css: MAIN area pages (/about, /help-and-support, /donate, /keep-up-to-date, /login, /sponsors, /contact,
   /root-and-genes, /receipt-check, 404). Every rule is scoped to a .pm-* class so it can never collide with other areas.
   Colours come only from tokens.css. */

/* Core message band (/about) */
.pm-message .h2 { line-height: 1; }
.pm-message__sub { font-size: 19px; font-weight: 600; max-width: 44ch; color: var(--on-dark); }

/* Route cards: icon + title + text + one link (help, keep up to date, contact) */
.pm-route { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pm-route .body-text { flex: 0 1 auto; }
.pm-route__link { margin-top: auto; display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; padding-left: 0; padding-right: 0; }
.pm-contact-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pm-contact-mini a { display: inline-flex; align-items: center; min-height: var(--target); word-break: break-word; }

/* Sign-in / sign-up card (/login, /keep-up-to-date) */
.pm-auth-card { padding: 32px; }
.pm-auth-card__title { font-size: 26px; }
@media (max-width: 640px) { .pm-auth-card { padding: 24px 18px; } }

/* Channel list (/keep-up-to-date, SPEC §12) */
.pm-channels { display: flex; flex-direction: column; gap: 4px; padding: 22px; }
.pm-channels__list { list-style: none; margin: 4px 0 0; padding: 0; }
.pm-channels__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.pm-channels__name { font-weight: 700; font-size: 15px; line-height: 1.35; }
.pm-channels__desc { font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.pm-channels .badge { flex: none; }
.pm-badge-off { background: var(--tint-cream); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* Sponsorship packages (/sponsors) */
.pm-package { padding: 22px; border-radius: 18px; }
.pm-package__amount { font-weight: 700; }

/* Contact cards (/contact) */
.pm-contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pm-contact__label { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
.pm-contact__value { font-weight: 700; font-size: 18px; color: var(--ink); overflow-wrap: anywhere; min-height: var(--target); display: inline-flex; align-items: center; }
a.pm-contact__value { color: var(--magenta-text); }
.pm-contact__value--text { white-space: pre-line; font-weight: 500; min-height: 0; }

/* Receipt check (/receipt-check) */
.pm-ref-input { text-transform: uppercase; letter-spacing: .06em; }
.pm-ref-input::placeholder { text-transform: none; }

/* 404 */
.pm-404 { min-height: 60vh; display: flex; align-items: center; }
.pm-404__code { font-family: var(--font-display); font-size: clamp(96px, 16vw, 180px); line-height: .9; color: var(--brand-magenta); }

/* Standalone text links get the 44px target (inline links in sentences are exempt). */
.pm-link { display: inline-flex; align-items: center; min-height: var(--target); }
.pm-link[hidden] { display: none; }
/* base .photo-card__link has no 44px target; fixed here for /about only (reported as a shared issue). */
.page-about .photo-card__link { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--target); }