/* CCSA Natal Midlands v55.12.122
   Global mobile visual polish for MEMBER-FACING / NON-ADMIN screens only.
   Presentation only: no data, backend, pricing, submission or navigation mechanics.
   Admin Centre is deliberately excluded because its mobile layout was approved in v55.12.119.
*/

@media (max-width: 720px) {
  html, body { overflow-x: hidden !important; }

  .screen:not(#screen-admin) :where(
    .rally-card,
    .newsletter-card,
    .notice-card,
    .resource-card,
    .recipe-card,
    .classified-card,
    .gallery-album-card,
    .committee-card,
    .park-detail-panel,
    .park-map-directory-card,
    .park-map-detail-panel,
    .park-rating-card,
    .weather-card,
    .weather-summary,
    .settings-card,
    .settings-hero,
    .photo-submit-card,
    .photo-admin-card,
    .game-card,
    .game-panel,
    .games-intro,
    .notice-detail-panel,
    .notice-document,
    .newsletter-reader-panel,
    .calendar-viewer,
    .calendar-help,
    .resource-email-panel,
    .notification-setup-panel,
    .modal-panel
  ) { min-width: 0 !important; }

  .screen:not(#screen-admin) :where(
    .rally-card h3,
    .newsletter-card h4,
    .notice-card h3,
    .resource-card h3,
    .recipe-card h3,
    .classified-card-copy strong,
    .gallery-album-copy strong,
    .committee-card h3,
    .park-mobile-hero h3,
    .settings-card h3,
    .settings-hero h3,
    .game-card h3,
    .game-panel h3
  ) { overflow-wrap: anywhere; }

  .screen:not(#screen-admin) :where(
    .gallery-controls,
    .gallery-control-actions,
    .settings-app-actions,
    .settings-actions,
    .resource-actions,
    .newsletter-card-actions,
    .notice-document-actions,
    .calendar-viewer-footer,
    .notification-setup-actions
  ) {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .screen:not(#screen-admin) :where(
    .gallery-control-actions > *,
    .settings-app-actions > *,
    .settings-actions > *,
    .resource-actions > *,
    .newsletter-card-actions > *,
    .notice-document-actions > *,
    .calendar-viewer-footer > *,
    .notification-setup-actions > *
  ) { width: 100% !important; }

  .screen:not(#screen-admin) :where(.gallery-album-grid,.classifieds-grid,.merch-grid) {
    grid-template-columns: 1fr !important;
  }

  .screen:not(#screen-admin) .gallery-album-grid {
    gap: 10px !important;
    padding-inline: 12px !important;
  }
  .screen:not(#screen-admin) .gallery-album-card { border-radius: 20px !important; }
  .screen:not(#screen-admin) .gallery-album-cover { height: 136px !important; }
  .screen:not(#screen-admin) .gallery-album-copy {
    min-height: 0 !important;
    padding: 13px 35px 13px 13px !important;
  }

  .screen:not(#screen-admin) :where(.newsletter-list,.notice-list,.resource-list,.faq-list) {
    margin-inline: 12px !important;
  }

  .screen:not(#screen-admin) .newsletter-card {
    grid-template-columns: 80px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .screen:not(#screen-admin) .newsletter-cover { min-height: 112px !important; }
  .screen:not(#screen-admin) .newsletter-card-actions { padding-top: 10px !important; gap: 7px !important; }

  .screen:not(#screen-admin) .resource-card { padding: 16px !important; }
  .screen:not(#screen-admin) .resource-card-top {
    flex-direction: column !important;
    gap: 12px !important;
    padding-right: 0 !important;
  }
  .screen:not(#screen-admin) .resource-file-icon { width: 72px !important; height: 84px !important; }
  .screen:not(#screen-admin) .resource-meta { gap: 6px 10px !important; }

  .screen:not(#screen-admin) .view-feed .notice-card:not(:first-child) .notice-card-button,
  .screen:not(#screen-admin) .view-cards .notice-card-button { grid-template-columns: 1fr !important; }
  .screen:not(#screen-admin) .view-feed .notice-card:not(:first-child) .notice-card-image,
  .screen:not(#screen-admin) .view-cards .notice-card-image {
    order: 0 !important;
    width: 100% !important;
    min-height: 142px !important;
  }
  .screen:not(#screen-admin) .view-feed .notice-card:not(:first-child) .notice-card-content,
  .screen:not(#screen-admin) .view-cards .notice-card-content { order: 1 !important; }
  .screen:not(#screen-admin) .notice-card-content { padding: 16px !important; }
  .screen:not(#screen-admin) .notice-card-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .screen:not(#screen-admin) .rally-card,
  .screen:not(#screen-admin) .rally-card.has-park-logo {
    grid-template-columns: 58px minmax(0,1fr) 22px !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .screen:not(#screen-admin) .rally-date-block { width: 56px !important; min-width: 56px !important; }
  .screen:not(#screen-admin) .rally-card-topline { flex-wrap: wrap !important; align-items: flex-start !important; }
  .screen:not(#screen-admin) .rally-card-logo { width: 44px !important; height: 44px !important; }

  .screen:not(#screen-admin) .calendar-viewer-header { align-items: flex-start !important; gap: 10px !important; }
  .screen:not(#screen-admin) :where(.calendar-viewer,.calendar-help) { margin-inline: 12px !important; }

  .screen:not(#screen-admin) :where(.settings-card,.settings-hero) { margin-left: 12px !important; margin-right: 12px !important; }
  .screen:not(#screen-admin) :where(.settings-status-grid,.settings-form-grid,.settings-segment,.settings-theme-options,.faq-scope-switch) {
    grid-template-columns: 1fr !important;
  }
  .screen:not(#screen-admin) .settings-toggle { align-items: flex-start !important; }

  .screen:not(#screen-admin) .classified-card {
    grid-template-columns: 118px minmax(0,1fr) !important;
    grid-template-rows: auto !important;
    min-height: 126px !important;
  }
  .screen:not(#screen-admin) .classified-card-image { min-height: 126px !important; }
  .screen:not(#screen-admin) .classified-card-copy { padding: 12px !important; }

  .screen:not(#screen-admin) :where(.committee-list,.committee-grid) { grid-template-columns: 1fr !important; }

  .screen:not(#screen-admin) :where(input,select,textarea) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
}

@media (max-width: 420px) {
  .screen:not(#screen-admin) .newsletter-card { grid-template-columns: 1fr !important; }
  .screen:not(#screen-admin) .newsletter-cover { min-height: 148px !important; }
  .screen:not(#screen-admin) .classified-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: 148px auto !important;
  }
  .screen:not(#screen-admin) .classified-card-image { min-height: 148px !important; }
}

/* v55.12.122 — complete phone-first visual pass across all non-Admin screens.
   CSS only. No data, navigation, submission, pricing, finance, raffle or backend mechanics. */
@media (max-width: 720px) {
  /* Shared page headers: long titles must wrap inside the phone rather than clip. */
  .screen:not(#screen-admin) > .screen-header {
    grid-template-columns: 44px minmax(0,1fr) !important;
    gap: 11px !important;
    padding: 14px 12px 16px !important;
  }
  .screen:not(#screen-admin) > .screen-header::before {
    left: 66px !important;
    right: 12px !important;
  }
  .screen:not(#screen-admin) > .screen-header .back-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
  }
  .screen:not(#screen-admin) > .screen-header > div {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .screen:not(#screen-admin) > .screen-header .screen-kicker {
    font-size: .62rem !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;
    white-space: normal !important;
  }
  .screen:not(#screen-admin) > .screen-header h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.45rem, 7vw, 1.88rem) !important;
    line-height: 1.03 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Shared feature cards: smaller visual footprint and less scrolling. */
  .screen:not(#screen-admin) .mobile-unified-hero {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 15px !important;
    border-radius: 20px !important;
  }
  .screen:not(#screen-admin) .mobile-unified-hero .mobile-unified-icon,
  .screen:not(#screen-admin) .mobile-unified-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    margin: 0 auto 10px !important;
  }
  .screen:not(#screen-admin) .mobile-unified-icon :is(img,.premium-registry-image,svg),
  .screen:not(#screen-admin) img.mobile-unified-icon {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
  .screen:not(#screen-admin) .mobile-unified-hero h3 {
    margin: 3px 0 6px !important;
    font-size: clamp(1.42rem, 6.5vw, 1.78rem) !important;
    line-height: 1.06 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .screen:not(#screen-admin) .mobile-unified-hero p,
  .screen:not(#screen-admin) .mobile-unified-hero .milestone-intro {
    font-size: .82rem !important;
    line-height: 1.46 !important;
  }
  .screen:not(#screen-admin) .mobile-unified-hero :is(
    .spotlight-type,.calendar-overline,.milestone-overline,.notice-overline,.gallery-overline,
    .newsletter-overline,.recipe-overline,.settings-overline,.park-intel-overline,
    .classifieds-overline,.resource-overline,.faq-overline,.merch-overline,.section-kicker
  ) {
    font-size: .58rem !important;
    line-height: 1.2 !important;
    letter-spacing: .11em !important;
  }

  /* Committee: show the complete source photo instead of cropping people away. */
  .screen:not(#screen-admin)#screen-committee .committee-hero {
    display: grid !important;
    min-height: 0 !important;
    margin: 14px 12px 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero::after,
  .screen:not(#screen-admin)#screen-committee .committee-hero-shade {
    display: none !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero-picture {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1399 / 655 !important;
    overflow: hidden !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 20px !important;
    background: var(--surface-raised) !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero-picture img,
  .screen:not(#screen-admin)#screen-committee .committee-hero > img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero-count {
    top: 9px !important;
    right: 9px !important;
    padding: 6px 9px !important;
    font-size: .62rem !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero-count strong {
    font-size: .78rem !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero-copy {
    position: static !important;
    inset: auto !important;
    margin-top: 8px !important;
    padding: 11px 13px !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    background: var(--surface-raised) !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero-copy h3 {
    margin: 2px 0 3px !important;
    font-size: 1.35rem !important;
    line-height: 1.08 !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-hero-copy p {
    max-width: none !important;
    font-size: .75rem !important;
    line-height: 1.4 !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-intro,
  .screen:not(#screen-admin)#screen-committee .committee-payment,
  .screen:not(#screen-admin)#screen-committee .committee-update-note {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-intro {
    padding: 13px !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-intro strong {
    font-size: 1.12rem !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-intro p {
    font-size: .78rem !important;
    line-height: 1.4 !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-list {
    gap: 10px !important;
    padding: 0 12px 106px !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-card {
    grid-template-columns: 68px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 11px !important;
    border-radius: 17px !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-photo {
    width: 68px !important;
    height: 68px !important;
    border-radius: 14px !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-role {
    font-size: .58rem !important;
    line-height: 1.25 !important;
    letter-spacing: .06em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-card h3 {
    margin: 3px 0 5px !important;
    font-size: 1.18rem !important;
    line-height: 1.06 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-contact-lines {
    gap: 4px !important;
    font-size: .72rem !important;
    line-height: 1.3 !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-contact-lines a {
    overflow-wrap: anywhere !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-actions {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-actions a {
    min-height: 40px !important;
    padding: 5px 3px !important;
    border-radius: 10px !important;
    font-size: .7rem !important;
  }

  /* Merchandise: compact hero and guaranteed title fit. */
  .screen:not(#screen-admin)#screen-merch .merch-page-header h2 {
    font-size: clamp(1.32rem, 6.4vw, 1.7rem) !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-hero {
    display: grid !important;
    grid-template-columns: 62px minmax(0,1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 12px !important;
    padding: 13px !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-hero-icon {
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 3px !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-hero-icon .premium-registry-image {
    width: 52px !important;
    height: 52px !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-hero-copy {
    order: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-hero h3 {
    margin: 2px 0 4px !important;
    font-size: 1.32rem !important;
    line-height: 1.04 !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-hero p {
    font-size: .72rem !important;
    line-height: 1.38 !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-cart-launch {
    order: 0 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 2px !important;
    padding: 8px 11px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-controls,
  .screen:not(#screen-admin)#screen-merch .merch-section-heading,
  .screen:not(#screen-admin)#screen-merch .merch-grid {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .screen:not(#screen-admin)#screen-merch .merch-product-card {
    min-height: 0 !important;
  }

  /* Finance: rows remain readable and money stays aligned instead of forcing labels vertical. */
  .screen:not(#screen-admin)#screen-finance .finance-hero {
    margin: 12px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-controls {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 0 12px 10px !important;
    padding: 12px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-report-tabs {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-report-tabs button,
  .screen:not(#screen-admin)#screen-finance .finance-controls button,
  .screen:not(#screen-admin)#screen-finance .finance-controls select {
    min-height: 42px !important;
    padding: 7px 8px !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-source-note {
    margin: 0 12px 10px !important;
    font-size: .68rem !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-content {
    gap: 11px !important;
    padding: 0 12px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-summary-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-summary-card {
    min-height: 106px !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-summary-card span {
    font-size: .61rem !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-summary-card strong {
    margin-top: 8px !important;
    font-size: 1.2rem !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-summary-card small {
    margin-top: 6px !important;
    font-size: .65rem !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-chart-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .screen:not(#screen-admin)#screen-finance :where(.finance-chart-card,.finance-detail-card) {
    padding: 13px !important;
    border-radius: 16px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-period-control {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-detail-group summary {
    padding: 10px 11px !important;
    font-size: .76rem !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-detail-group p {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 9px 11px !important;
    font-size: .72rem !important;
    line-height: 1.34 !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-detail-group p span {
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-detail-group p strong {
    font-size: .76rem !important;
    white-space: nowrap !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .screen:not(#screen-admin)#screen-finance :where(.finance-comparison-table,.finance-full-data table) {
    min-width: 680px !important;
    table-layout: auto !important;
  }
  .screen:not(#screen-admin)#screen-finance :where(.finance-comparison-table th,.finance-comparison-table td,.finance-full-data th,.finance-full-data td) {
    padding: 8px 9px !important;
    font-size: .69rem !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Raffles: stack image and text so neither is squeezed into a narrow column. */
  .screen:not(#screen-admin)#screen-raffles .raffles-page {
    gap: 11px !important;
    padding: 12px 12px 100px !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-intro,
  .screen:not(#screen-admin)#screen-raffles .raffles-intro.compact {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 13px !important;
    text-align: center !important;
    border-radius: 18px !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-intro img {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 2px !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-intro h3 {
    margin: 3px 0 4px !important;
    font-size: 1.45rem !important;
    line-height: 1.06 !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-intro p {
    max-width: 34ch !important;
    margin-inline: auto !important;
    font-size: .8rem !important;
    line-height: 1.42 !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-view-tabs {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
    padding: 5px !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-view-tabs button {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 5px 4px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffle-card-image {
    height: 190px !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffle-detail-image {
    height: 220px !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffle-detail-stats {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  /* Calendar: compact intro, non-overlapping filters and a phone-sized month grid. */
  .screen:not(#screen-admin)#screen-calendars .native-calendar-hero {
    margin: 12px !important;
    padding: 14px !important;
    gap: 8px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-hero-icon {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    margin: 0 auto 7px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-hero-icon img {
    width: 52px !important;
    height: 52px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-hero-copy h3 {
    margin: 3px 0 5px !important;
    font-size: 1.48rem !important;
    line-height: 1.06 !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-hero-copy p {
    font-size: .78rem !important;
    line-height: 1.42 !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-stats {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-stats div {
    padding: 9px 7px !important;
    border-radius: 13px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-stats strong {
    font-size: 1.25rem !important;
  }
  .screen:not(#screen-admin)#screen-calendars .native-calendar-stats span {
    margin-top: 3px !important;
    font-size: .55rem !important;
    line-height: 1.2 !important;
    letter-spacing: .05em !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-shell {
    margin: 0 8px 18px !important;
    border-radius: 18px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-toolbar {
    padding: 10px !important;
    gap: 7px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-month-nav {
    gap: 7px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-month-nav > button {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.25rem !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-month-nav h3 {
    font-size: 1.32rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-toolbar-actions button,
  .screen:not(#screen-admin)#screen-calendars .club-calendar-view-toggle button {
    min-height: 38px !important;
    padding: 5px 7px !important;
    font-size: .68rem !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-filter {
    flex: 0 0 auto !important;
    min-width: auto !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    gap: 4px !important;
    font-size: .62rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-filter span {
    font-size: .72rem !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-weekdays {
    gap: 2px !important;
    padding: 8px 5px 5px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-weekdays span {
    font-size: .48rem !important;
    letter-spacing: .03em !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-grid {
    gap: 3px !important;
    padding: 0 5px 8px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-day {
    min-height: 48px !important;
    padding: 4px 2px !important;
    border-radius: 9px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-day-number {
    width: 23px !important;
    height: 23px !important;
    font-size: .72rem !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-mobile-dots {
    gap: 2px !important;
    margin-top: 3px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-mobile-dots i {
    width: 6px !important;
    height: 6px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-legend {
    gap: 7px 11px !important;
    padding: 9px 10px !important;
    font-size: .62rem !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-day-panel {
    padding: 11px !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-day-panel-head h4 {
    font-size: 1.15rem !important;
  }
  .screen:not(#screen-admin)#screen-calendars .club-calendar-day-panel-head > strong {
    padding: 5px 7px !important;
    font-size: .58rem !important;
  }

  /* Rallies and other dense list screens: keep filters and controls on one usable line. */
  .screen:not(#screen-admin) :where(.rally-toolbar,.merch-filters,.recipe-course-filters,.notice-filter-row,.resource-filter-row,.newsletter-year-filters) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  .screen:not(#screen-admin) :where(.rally-toolbar,.merch-filters,.recipe-course-filters,.notice-filter-row,.resource-filter-row,.newsletter-year-filters) > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Modals and detail sheets should use almost the full phone width without oversized padding. */
  .screen:not(#screen-admin) :where(
    .newsletter-reader-panel,.notice-detail-panel,.notice-document,.resource-email-panel,
    .merch-modal-panel,.merch-cart-panel,.merch-checkout-panel,.recipe-detail-panel,
    .photo-submit-panel,.park-detail-panel,.park-map-detail-panel,.settings-card
  ) {
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 390px) {
  .screen:not(#screen-admin) > .screen-header h2 {
    font-size: clamp(1.3rem, 6.8vw, 1.62rem) !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-card {
    grid-template-columns: 60px minmax(0,1fr) !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-photo {
    width: 60px !important;
    height: 60px !important;
  }
  .screen:not(#screen-admin)#screen-committee .committee-card h3 {
    font-size: 1.08rem !important;
  }
  .screen:not(#screen-admin)#screen-finance .finance-report-tabs {
    grid-template-columns: 1fr !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-view-tabs {
    grid-template-columns: 1fr 1fr !important;
  }
  .screen:not(#screen-admin)#screen-raffles .raffles-view-tabs button:last-child {
    grid-column: 1 / -1 !important;
  }
}