/* Phone refinements use the existing palette and leave desktop layouts intact. */
@media (max-width: 680px) {
  .m-volunteer-section .m-roles { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .m-volunteer-section .m-role { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border); align-content: start; }
  .m-volunteer-section .m-role:last-child { border-bottom: 0; }
  .m-volunteer-section .m-role-head { gap: 8px; }
  .m-volunteer-section .m-role-icon { width: 28px; height: 28px; border-radius: 8px; }
  .m-volunteer-section .m-role-icon .icon { width: 17px; height: 17px; }
  .m-volunteer-section .m-role-head p { display: none; }
  .m-volunteer-section .m-role-time { grid-column: 1; padding-left: 36px; font-size: 12px; }
  .m-volunteer-section .m-role-foot { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .m-volunteer-section .m-role-count { display: none; }
  .m-volunteer-section .m-role-foot button { min-height: 44px; max-width: 145px; padding: 8px 12px; font-size: 12px; }
  .m-volunteer-section .m-role-badges, .m-volunteer-section .m-role-note { grid-column: 1 / -1; }
  .topbar { min-height: 58px; padding-inline: max(14px, env(safe-area-inset-left)); gap: 8px; }
  .top-actions .icon-btn, .back-btn { min-width: 44px; min-height: 44px; }
  #view-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .column, .feed-column, .column:not(.feed-column) { padding-inline: 16px; }
  .home-hero.has-daily-quote { padding: 20px; border-radius: 20px; margin-bottom: 18px; }
  .home-hero-text h1 { font-size: clamp(26px, 7vw, 32px); letter-spacing: -.04em; text-wrap: balance; }
  .home-hero.has-daily-quote .daily-quote-inline blockquote { font-size: 15px; line-height: 1.65; font-weight: 500; }
  .compose-card { padding: 14px; border-radius: 18px; }
  .compose-input { min-height: 48px; font-size: 14px; text-align: left; }
  .compose-chips { gap: 6px; }
  .compose-chips button { min-height: 48px; font-size: 11px; border-radius: 10px; }
  .feed-heading { align-items: baseline; gap: 12px; padding-block: 18px 14px; }
  .feed-heading h2 { font-size: 23px; text-wrap: balance; }
  .feed-heading > span { display: none; }
  .post-list { gap: 18px; }
  .post { border-radius: 18px; }
  .post-desc { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
  .post-actions button { min-width: 44px; min-height: 44px; }
  .post .comment-cloud { filter: none; transform: none; margin-left: 0; }
  .post .comment-cloud > .comment-text { mask: none; -webkit-mask: none; background-image: none; padding: 12px 14px; border-radius: 4px 16px 16px; font-size: 14px; line-height: 1.6; }
  .post .comment-cloud::before, .post .comment-cloud::after { display: none; }
  .post .comments .comment-item .comment-cloud { animation: none; transform: none; }
  .post .comment-form { border: 1px solid var(--border); border-radius: 16px; box-shadow: none; padding: 4px; }
  .post .comment-form:focus-within { box-shadow: none; outline: 2px solid var(--sage-main); outline-offset: 2px; }
  input:not([type=checkbox]):not([type=radio]), textarea, select { font-size: max(16px, 1em); }
  .tabbar { padding-inline: max(6px, env(safe-area-inset-left)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .tabbar button { min-width: 44px; min-height: 58px; }
  .tabbar .tab-label { font-size: 11px; }
  button, a, input, textarea, select { touch-action: manipulation; }
  :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--sage-main); outline-offset: 3px; }
  :is(.compose-chips button, .post-actions button):active { background: var(--mint); }
  .mobile-feed-top { position: absolute; bottom: calc(88px + env(safe-area-inset-bottom)); right: 16px; z-index: 5; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 10%, transparent); }
}
@media (min-width: 681px) { .mobile-feed-top { display: none; } }


/* Mission: SaaS typography and flexible layout, using the app's existing tokens. */
@media (max-width: 680px) {
  #mission-body { --mission-gap: .75rem; --mission-radius: .875rem; }
  #mission-body .m-content { gap: var(--mission-gap); }
  #mission-body .g-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-top: .75rem; margin-bottom: 0; }
  #mission-body .g-section-head h2 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
  #mission-body .g-section-head > button { min-height: 44px; font-size: .875rem; padding-block: .5rem; }
  #mission-body .m-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: var(--mission-radius); background: var(--panel); }
  #mission-body .m-tabs button { min-width: 0; min-height: 44px; padding: .5rem .25rem; font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; border-radius: .625rem; }
  #mission-body .m-campaign-invite { padding: 1rem; border-radius: var(--mission-radius); border-left: 0; gap: .625rem .75rem; }
  #mission-body .m-invite-copy h3 { font-size: 1.125rem; font-weight: 600; }
  #mission-body .m-invite-copy p { font-size: .875rem; line-height: 1.5; }
  #mission-body .m-campaign-proposals { margin-top: 0; border: 0; background: var(--panel); border-radius: var(--mission-radius); }
  #mission-body .m-campaign-proposals > span { min-width: 0; }
  #mission-body .m-volunteer-section { margin-block: .25rem; }
  #mission-body .m-volunteer-section > summary { padding: .875rem .25rem; font-size: 1rem; line-height: 1.5; }
  #mission-body .m-volunteer-section > summary > span { display: inline-block; font-size: .75rem; }
  #mission-body .m-role { grid-template-columns: minmax(0, 1fr); gap: .375rem; }
  #mission-body .m-role-head { min-width: 0; align-items: center; }
  #mission-body .m-role-head > div { min-width: 0; }
  #mission-body .m-role-head strong { font-size: .875rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
  #mission-body .m-role-foot { grid-column: 1; grid-row: auto; justify-content: flex-start; padding-left: 36px; }
  #mission-body .m-role-foot button { max-width: 100%; font-size: .875rem; }
  #mission-body .m-leader { border-radius: var(--mission-radius); gap: .75rem; }
  #mission-body .m-leader-name { font-size: .875rem; line-height: 1.5; }
  #mission-body :is(button, summary):focus-visible { outline: 2px solid var(--sage-main); outline-offset: 3px; }
}
@media (min-width: 420px) and (max-width: 680px) {
  #mission-body .m-role { grid-template-columns: minmax(0, 1fr) auto; }
  #mission-body .m-role-foot { grid-column: 2; grid-row: 1 / 3; padding-left: 0; }
}
@media (max-width: 359px) {
  #mission-body .m-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}