/* A separate phone presentation, not a scaled desktop page.
   Same DOM data/API; desktop is unchanged above 767px. Fixed light brand palette. */
.mobile-only, .mobile-admin-tools-toggle, .mobile-settings-tabs, .mobile-registration-reminders > summary { display: none; }
@media (max-width: 767px) {
  :root { --mobile-dock: calc(76px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-top: 84px; }
  body.mobile-app { margin: 0; background: #f6f7f6; padding-bottom: var(--mobile-dock); }
  .mobile-app .mobile-only { display: block; }
  .mobile-app .site-header { position: fixed; top: 0; left: 0; right: 0; height: calc(72px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 0 0; border-radius: 0; border-bottom: 1px solid var(--border); background: #fff; }
  .mobile-app:has(> .site-header) { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
  .mobile-app .site-header > .container { height: 72px; padding: 0 20px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
  .mobile-app .site-header .brand { gap: 10px; }
  .mobile-app .site-header .brand-logo { width: 36px; height: 36px; }
  .mobile-app .site-header .brand-name { font-size: 16px; }
  .mobile-app .site-header .brand-sub, .mobile-app .nav-toggle, .mobile-app .site-nav, .mobile-app .mobile-nav { display: none !important; }
  .mobile-header-caption { font-size: 14px; line-height: 1.4; color: var(--muted); }
  .mobile-app .mobile-header-action { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); }
  .mobile-header-action .icon { width: 22px; height: 22px; }
  .mobile-app .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 85; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #d6dbde; }
  .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; min-width: 0; border: 0; border-radius: 8px; background: #fff; color: #60676d; text-decoration: none; font: 500 14px/1.3 var(--font); padding: 4px 2px; }
  .mobile-tab .icon { width: 22px; height: 22px; flex: 0 0 auto; }
  .mobile-tab[aria-current="page"] { color: var(--text); background: var(--primary-soft); font-weight: 700; }
  .mobile-register-tab .icon { box-sizing: content-box; padding: 5px 16px; border-radius: 8px; background: var(--primary); color: #fff; }
  .mobile-tab:focus-visible { outline: 3px solid #326c95; outline-offset: -3px; }
  .mobile-app .sanctuary-footer { display: none; }
  .mobile-app .mobile-care { padding: 24px 20px; font-size: 14px; color: var(--muted); line-height: 1.5; }
  .mobile-care p { margin: 0 0 12px; }
  .mobile-care a { color: var(--text); display: inline-flex; align-items: center; min-height: 44px; }
  .mobile-home main { min-height: calc(100dvh - 72px - var(--mobile-dock)); background: #f6f7f6; }
  .mobile-home main > .mobile-screen { display: none; }
  .mobile-home main > .mobile-screen.is-mobile-active { display: block; }
  .mobile-home .container { width: 100%; padding-left: 20px; padding-right: 20px; }
  /* Home keeps the original website identity; other tabs retain their app screens. */
  .mobile-home .hero.hero-photo { padding: 32px 0 0; background: radial-gradient(ellipse at 12% 35%,#e8f6fa 0%,transparent 58%),radial-gradient(ellipse at 90% 45%,#fff8e3 0%,transparent 52%),#fff; }
  .mobile-home .hero-grid { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "eyebrow" "title" "photo" "lead" "status" "lookup"; gap: 0; }
  .mobile-home .hero-copy { display: contents; }
  .mobile-home .hero-copy > .eyebrow { grid-area: eyebrow; display: inline-flex; justify-self: center; text-align: center; font-size: 14px; line-height: 1.5; letter-spacing: .04em; margin: 0 0 16px; }
  .mobile-home .hero-copy > h1 { grid-area: title; display: block; text-align: center; font-size: clamp(36px,10.5vw,44px); line-height: 1.08; font-weight: 500; margin: 0 0 24px; }
  .mobile-home .hero-picture-holder { grid-area: photo; display: block; width: min(100%,280px); aspect-ratio: 4 / 5; margin: 0 auto 24px; }
  .mobile-home .hero-copy > .lead { grid-area: lead; display: block; text-align: center; font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
  .mobile-home .hero-copy > .status-card { grid-area: status; width: 100%; }
  .mobile-home .hero-lookup-link { grid-area: lookup; display: inline-flex; justify-self: center; text-align: center; margin: 0 0 24px; }
  .mobile-home .hero-details { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: 0; padding-top: 24px; padding-bottom: 24px; }
  .mobile-kicker { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--muted); letter-spacing: .04em; margin: 0 0 8px; }
  .mobile-home .mobile-home-intro h1 { font-size: 32px; font-weight: 600; line-height: 1.12; letter-spacing: -.045em; margin: 0 0 12px; }
  .mobile-home-intro > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0 0 24px; }
  .mobile-home .hero-copy .status-card { padding: 20px; background: #fff; border: 1px solid #d6dbde; margin: 0 0 20px; text-align: left; box-shadow: none; }
  .mobile-home .status-details { gap: 20px; }
  .mobile-home .status-register { border-radius: 8px; min-height: 52px; }
  .mobile-home .status-msg { margin: 0 0 8px; }
  .mobile-home .mobile-quick-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .mobile-quick-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid #d6dbde; border-radius: 12px; background: #fff; color: var(--text); text-decoration: none; }
  .mobile-quick-card > .icon { width: 24px; height: 24px; margin-bottom: 4px; color: #326c95; }
  .mobile-quick-card strong { font-size: 16px; }
  .mobile-quick-card span { font-size: 14px; color: var(--muted); }
  .mobile-home .mobile-arrival-note { display: flex; align-items: flex-start; gap: 12px; padding: 20px 0 0; font-size: 14px; color: var(--muted); }
  .mobile-arrival-note .icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
  .mobile-arrival-note p { margin: 0; }
  .mobile-home .section { padding: 28px 0; background: #f6f7f6; }
  .mobile-home .section-head { margin: 0 0 24px; text-align: left; }
  .mobile-home .section-head h2, .mobile-home #mobile-more-title { font-size: 28px; line-height: 1.2; font-weight: 600; margin-bottom: 12px; }
  .mobile-home .section-head .section-kicker { margin-bottom: 8px; letter-spacing: .04em; }
  .mobile-home .lookup-panel { padding: 20px; }
  .mobile-home .lookup-registration { padding: 16px; }
  .mobile-home .lookup-registration-label { font-size: 14px; letter-spacing: 0; }
  .mobile-home .lookup-registration-name { font-size: 18px; }
  .mobile-home .lookup-registration-actions { gap: 8px; }
  .mobile-home .lookup-number-preview { min-width: 64px; }
  .mobile-home .events-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .mobile-home .premium-announcement { display: grid; grid-template-columns: 100px minmax(0,1fr); grid-template-rows: auto; height: auto; padding: 0; gap: 0; overflow: hidden; }
  .mobile-home .announcement-image { min-height: 180px; aspect-ratio: auto; }
  .mobile-home .announcement-date { top: 8px; left: 8px; padding: 6px 8px; }
  .mobile-home .announcement-art { padding: 12px; }
  .mobile-home .announcement-art-title, .mobile-home .announcement-art-small { display: none; }
  .mobile-home .announcement-content { padding: 16px; }
  .mobile-home .announcement-content h3 { font-size: 18px; min-height: 0; }
  .mobile-home .announcement-category, .mobile-home .event-desc { display: none; }
  .mobile-home .event-meta { font-size: 14px; margin: 8px 0; }
  .mobile-home .announcement-read { font-size: 14px; min-height: 44px; }
  .mobile-home .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .mobile-home .community-gallery-card { min-width: 0; }
  .mobile-home .community-gallery-caption { padding: 12px; font-size: 14px; }
  .mobile-home .gallery-index { display: none; }
  .mobile-home .contact-grid, .mobile-home .steps { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .mobile-home .steps li, .mobile-home .contact-card { padding: 20px; }
  .mobile-more-list { margin-top: 24px; border: 1px solid #d6dbde; border-radius: 12px; background: #fff; overflow: hidden; }
  .mobile-more-row { display: flex; align-items: center; gap: 16px; padding: 20px 16px; min-height: 80px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); }
  .mobile-more-row:last-child { border-bottom: 0; }
  .mobile-more-row > .icon { width: 22px; height: 22px; flex: 0 0 22px; }
  .mobile-more-row > .icon:last-child { width: 18px; height: 18px; flex-basis: 18px; margin-left: auto; color: var(--muted); }
  .mobile-more-row > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mobile-more-row strong { font-size: 16px; }
  .mobile-more-row span span { font-size: 14px; color: var(--muted); }
  .mobile-register #main { padding: 28px 20px 0; width: 100%; margin: 0; }
  .mobile-register .page-title { font-size: 28px; line-height: 1.2; margin: 0 0 12px; }
  .mobile-register .page-lead { font-size: 16px; line-height: 1.5; }
  .mobile-register .mobile-reg-steps { display: flex; gap: 16px; padding: 0; margin: 24px 0; list-style: none; }
  .mobile-reg-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
  .mobile-reg-steps li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e7ebed; }
  .mobile-reg-steps li[aria-current="step"] { color: var(--text); }
  .mobile-reg-steps li[aria-current="step"] span { background: var(--primary); color: #fff; }
  .mobile-register #view-form > .notice { font-size: 14px; padding: 16px; }
  .mobile-registration-reminders { margin: 20px 0; border: 1px solid #d6dbde; border-radius: 8px; background: #fff; }
  .mobile-registration-reminders > summary { display: flex; align-items: center; gap: 8px; padding: 12px; min-height: 48px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; }
  .mobile-registration-reminders > summary::-webkit-details-marker { display: none; }
  .mobile-registration-reminders > summary > .icon { width: 18px; height: 18px; flex: 0 0 18px; }
  .mobile-registration-reminders > summary > .icon:last-child { margin-left: auto; }
  .mobile-registration-reminders .notice { border: 0; border-top: 1px solid var(--border); border-radius: 0; margin: 0; padding: 16px; font-size: 14px; }
  .mobile-register .is-reviewing > .mobile-registration-reminders { display: none; }
  .mobile-app.mobile-editing .mobile-bottom-nav { display: none; }
  .mobile-home .social-mark { display: none; }

  .mobile-register .reg-form { padding: 20px 16px; margin-top: 24px; }
  .mobile-register .participant-entry { border: 0; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--border); border-radius: 0; }
  .mobile-register .participant-entry legend { font-size: 16px; padding: 0; margin-bottom: 20px; font-weight: 600; }
  .mobile-register .field input, .mobile-register .field textarea, .mobile-home .input { font-size: 16px; }
  .mobile-register .is-reviewing > .notice { display: none; }
  .mobile-review-schedule { font-size: 16px; line-height: 1.5; background: var(--primary-soft); border-radius: 8px; padding: 16px; }
  .mobile-review-person { border-bottom: 1px solid var(--border); padding: 16px 0; overflow-wrap: anywhere; }
  .mobile-review-person h3 { font-size: 18px; margin: 0 0 8px; }
  .mobile-review-person p:last-child { font-size: 16px; margin: 0; }
  .mobile-register #registration-review h2 { font-size: 24px; }
  .mobile-register #submit-btn { margin-top: 20px; min-height: 52px; }
  .mobile-register #view-success { padding: 20px 16px; }
  .mobile-register #ok-title { font-size: 28px; }
  .mobile-app dialog.modal { width: calc(100vw - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); border-radius: 16px; }
  .mobile-app .toast-region { bottom: calc(var(--mobile-dock) + 12px); }
  /* Staff: action-first screens with a role-aware dock. */
  .admin-body.mobile-app .mobile-bottom-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .admin-body.mobile-app .mobile-bottom-nav[data-role="SYSTEM_ADMIN"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-body.mobile-app .admin-topbar { position: sticky; height: calc(64px + env(safe-area-inset-top,0px)); padding: env(safe-area-inset-top,0px) 20px 0; }
  .admin-body.mobile-app .sidebar { top: calc(64px + env(safe-area-inset-top,0px)); bottom: 0; z-index: 110; padding-bottom: env(safe-area-inset-bottom,0px); }
  .admin-body.mobile-app .sidebar-backdrop { top: calc(64px + env(safe-area-inset-top,0px)); z-index: 105; }
  .admin-body.mobile-app .main { padding: 24px 20px 32px; }
  .admin-body.mobile-app .page-header h1 { font-size: 28px; line-height: 1.2; }
  .admin-body.mobile-app .page-header { margin-bottom: 24px; }
  .admin-body.mobile-app .page-header .sub { font-size: 14px; }
  .admin-body.mobile-app .stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .admin-body.mobile-app .stat { padding: 16px; min-width: 0; }
  .admin-body.mobile-app .stat-head { gap: 8px; font-size: 14px; }
  .admin-body.mobile-app .stat-value { font-size: 32px; }
  .admin-body.mobile-app .stat-sub { font-size: 14px; }
  .admin-body.mobile-app .sys-status { padding: 20px; }
  .admin-body.mobile-app .panel-head, .admin-body.mobile-app .panel-body, .admin-body.mobile-app .panel-foot { padding: 20px 16px; }
  .admin-body.mobile-app .rec-card { padding: 16px; }
  .admin-body.mobile-app .rec-top { flex-wrap: wrap; gap: 8px; }
  .admin-body.mobile-app .rec-name { font-size: 18px; margin-top: 16px; }
  .admin-body.mobile-app .rec-card > .btn-group { margin-top: 16px; }
  .admin-body.mobile-app .registration-list { display: block; list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
  .registration-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 44px; gap: 12px; align-items: center; padding: 12px; min-height: 80px; border-bottom: 1px solid var(--border); }
  .registration-row:last-child { border-bottom: 0; }
  .registration-row-number { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); overflow-wrap: anywhere; }
  .registration-row-person { min-width: 0; }
  .registration-row-name { font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; margin: 0 0 4px; }
  .registration-row-address { font-size: 14px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; margin: 0; }
  .registration-row-actions { position: relative; }
  .registration-row-actions .registration-more { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; }
  .registration-more:hover, .registration-more[aria-expanded="true"] { background: var(--primary-soft); }
  .registration-action-menu { position: absolute; z-index: 95; right: 0; top: calc(100% + 4px); width: 204px; padding: 4px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
  .registration-action-menu[hidden] { display: none; }
  .registration-row-actions.opens-up .registration-action-menu { top: auto; bottom: calc(100% + 4px); }
  .registration-action-menu .btn { display: flex; justify-content: flex-start; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 4px; font-size: 14px; }
  .admin-body.mobile-app .mobile-admin-tools-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px; padding: 12px 16px; background: #fff; border: 1px solid #838c93; border-radius: 8px; margin-bottom: 20px; font: 600 14px/1.4 var(--font); color: var(--text); }
  .mobile-admin-tools-toggle .icon { width: 20px; height: 20px; }
  .admin-body.mobile-app .registration-tools { display: none; }
  .admin-body.mobile-app .registration-tools.is-open { display: grid; margin-bottom: 24px; }
  .admin-body.mobile-app .mobile-settings-tabs { display: flex; background: #e9edef; padding: 4px; gap: 4px; border-radius: 10px; margin: 20px 0; }
  .mobile-settings-tabs button { flex: 1; padding: 12px 8px; min-height: 48px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 600 14px/1.4 var(--font); }
  .mobile-settings-tabs button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(23,27,33,.06); }
  .settings-wrap[data-mobile-pane="calendar"] > form { display: none; }
  .settings-wrap[data-mobile-pane="controls"] > .closure-calendar { display: none; }
  .admin-body.mobile-app [data-page="settings"] > .page-header .sub { display: none; }
  .admin-body.mobile-app .settings-availability { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 16px; }
  .admin-body.mobile-app .settings-availability > .card-label { display: none; }
  .admin-body.mobile-app .settings-availability > .hint { margin: 0; }
  .admin-body.mobile-app .closure-calendar > .card-label { display: none; }
  .admin-body.mobile-app .closure-calendar h2 { font-size: 20px; }
  .admin-body.mobile-app .closure-calendar.card { padding: 20px 12px; }
  .admin-body.mobile-app .closure-day { min-height: 64px; }
  .admin-body.mobile-app .closure-layout { gap: 20px; }
  .admin-body.mobile-app .settings-wrap > form { padding: 20px 16px; }
  .admin-body.mobile-app input, .admin-body.mobile-app select, .admin-body.mobile-app textarea { font-size: 16px; }
  .admin-body.mobile-app .settings-wrap > form .form-actions { padding: 12px 0; background: #fff; }
  .admin-body.mobile-app .settings-wrap > form .form-actions .btn { width: 100%; }
  /* Staff sign-in is a phone screen, not a centered floating desktop card. */
  .login-body { background: #f6f7f6; }
  .login-body .center-page { display: block; padding: calc(32px + env(safe-area-inset-top,0px)) 20px 32px; min-height: 100dvh; }
  .login-body .auth-card { padding: 24px 20px; margin: 0 auto; box-shadow: none; }
  .login-body .auth-card h1 { font-size: 32px; }
  .login-body .auth-card input { font-size: 16px; }
}
@media print {
  .mobile-only, .mobile-bottom-nav, .mobile-reg-steps, .mobile-admin-tools-toggle, .mobile-settings-tabs { display: none !important; }
}