/* Shared touch controls. Load after the component and mobile shell styles.
   Map pins and full-surface video play buttons keep their authored geometry. */
@media(max-width:1023px),(pointer:coarse){
  button.small,.button.small,
  .actions>button,.actions>.button,.form-actions>button,.story-actions>button,
  .map-context button,.map-toolbar button,.map-add-fact,.map-add-memory,
  .today-mobile-tabs button,.today-tools button,.today-walk button,
  .today-actions button,.today-actions a,
  .today-video-layout:has(.portrait-video) .today-actions button,
  .today-video-deck .today-video-copy .today-actions button,
  .feed-feature-order button,.feed-feature-search .admin-user-suggestions .feed-search-preview,
  .my-map-actions button,.my-map-retained-files button,
  .itinerary-stop-controls button,.itinerary-add-row button,.itinerary-share button,
  .location-directions button,.map-route-actions button,
  .contribution-form button[data-contribution-new],
  dialog>.contribution-form .form-actions button,
  .contribution-file-chip button,
  .creator-photo-editor [data-photo-remove],.creator-social-title button,
  .mta-route-actions button,.today-area-results button,
  #today-preferences-form .today-actions button,
  .tile-notice button,.nyfe-boost-preview-banner button{
    min-height:44px;
    min-width:44px;
    padding:10px 12px;
    font-size:14px;
    line-height:1.3;
  }

  /* Navigation typography belongs to the shell; its hit targets still match. */
  .site-nav button,.site-footer a,body:has(> #main > .map-layout) > .site-footer a{min-height:44px}
  .dialog-close,.video-feed-controls button{
    width:44px;
    min-width:44px;
    min-height:44px;
  }
  .today-customize-title{width:auto;min-width:44px;min-height:44px}
  @container(max-width:480px){.today-customize-title{width:44px}}
  .dialog-close{font-size:24px}
  .video-feed-controls{gap:8px}
  .video-feed-controls button{font-size:16px}
  .today-title-row .today-weather-value{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px}
  .today-area-chip button{width:44px;min-width:44px;min-height:44px;font-size:20px}
  .today-area-chip{padding-right:2px}

  /* Keep pinch zoom available and use readable type in editable controls. */
  :is(#main,dialog) input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),
  :is(#main,dialog) select{
    font-size:16px;
    min-height:44px;
    line-height:1.4;
  }
  :is(#main,dialog) textarea{font-size:16px;line-height:1.5}
  :is(#main,dialog) input[type=file]{max-width:100%;min-height:44px;font-size:14px}
  :is(#main,dialog) input[type=file]::file-selector-button{min-height:44px;padding:10px 12px;font-size:14px}
  .my-map-friends input[type=color]{min-height:44px}

  .today-choices label,#today-preferences-form .today-choices label,
  .mta-route-options label,.contribution-form .contribution-original,
  .email-choice,.my-map-photo-choices label,.private-intro>label{
    min-height:44px;
    font-size:14px;
    line-height:1.5;
    cursor:pointer;
  }
  .private-intro>label{display:flex;align-items:flex-start;gap:10px;padding-block:10px}
  .private-intro>label input[type=checkbox]{width:18px;height:18px;flex:none;margin:2px 0 0}
  .contribution-form .contribution-original{align-items:center;padding-block:8px}
  .contribution-form .contribution-original input{width:18px;height:18px;flex-basis:18px;margin:0}
  .contribution-form .contribution-types span,
  dialog>.contribution-form .contribution-types span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 14px;
    font-size:14px;
  }
  .contribution-form .contribution-types,dialog>.contribution-form .contribution-types{gap:8px}
  .contribution-form .contribution-location small,.contribution-form .field small{font-size:12px;line-height:1.5}
  .route-leg summary,.today-alert summary{min-height:44px;padding-block:10px;font-size:14px}

  .creator-social-row{grid-template-columns:100px minmax(0,1fr) 44px;gap:8px}
  .creator-social-row button{width:44px;min-width:44px;min-height:44px;padding:6px;font-size:20px}
  .creator-social-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;font-size:14px}

  /* Zoom controls grow independently of marker anchors and thumbnail pins. */
  .map-zoom,.itinerary-map .map-zoom{gap:6px}
  .map-zoom button,.itinerary-map .map-zoom button{width:44px;min-width:44px;min-height:44px;font-size:18px}
  .map-zoom button:last-child,.public-map .map-zoom button:last-child{font-size:12px}

  /* Give ticker controls actual space instead of overlapping the moving text. */
  .mta-ticker{height:48px;gap:6px}
  .mta-ticker button.mta-ticker-pause,.mta-ticker button.mta-ticker-speed,.mta-tracker summary{
    min-width:44px;
    min-height:44px;
    padding:8px;
    font-size:14px;
  }
  .mta-ticker button.mta-ticker-pause{width:44px}
  .mta-ticker-label{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-left:0}
  .mta-ticker-window{padding-block:0}
  .mta-ticker .mta-ticker-group a,.mta-ticker-fallback{display:inline-flex;align-items:center;min-height:44px}
  .mta-route-menu{top:calc(100% + 6px)}

  /* The player allocates room for its larger format button, preserving video
     aspect ratios and the existing paging/playback behavior. */
  .player-layout-toggle,.location-video-feed .player-layout-toggle{min-height:44px;font-size:14px;padding-block:10px;line-height:1.3}
  .location-video-feed .video-card{
    width:min(100cqw,calc((100cqh - 52px)*16/9));
    height:min(calc(100cqh - 52px),calc(100cqw*9/16));
  }
  .location-video-feed .video-card.portrait-video{
    width:min(100cqw,calc((100cqh - 52px)*9/16));
    height:min(calc(100cqh - 52px),calc(100cqw*16/9));
  }

  dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:16px}
}

@media(max-width:1023px){
  #main :is(input,select,textarea,summary){
    scroll-margin-top:calc(var(--mobile-header-height,64px) + env(safe-area-inset-top,0px) + 16px);
    scroll-margin-bottom:calc(var(--mobile-nav-height,64px) + env(safe-area-inset-bottom,0px) + 20px);
  }
}
@media(max-width:520px){
  /* Headlines use the entire first row after the MTA label. A second row is
     created only by controls that are actually present. */
  .mta-ticker:has(>.mta-ticker-window){display:grid;grid-template-columns:44px 44px minmax(0,1fr);height:auto;gap:4px 6px;padding:2px 0 6px}
  .mta-ticker>.mta-ticker-label{grid-column:1;grid-row:1;align-self:start}
  .mta-ticker>.mta-ticker-window{grid-column:2/-1;grid-row:1;min-width:0}
  .mta-ticker>.mta-ticker-pause{grid-column:1;grid-row:2}
  .mta-ticker>.mta-ticker-speed{grid-column:2;grid-row:2}
  .mta-ticker>.mta-tracker{grid-column:3;grid-row:2;justify-self:end;margin-right:0}
  /* Reserve the shell plus the Today heading/ticker above this dropdown.
     Shrink the route list first; very short screens can scroll the whole menu. */
  .mta-ticker .mta-route-menu{right:0;left:auto;width:min(330px,100%);max-width:calc(100vw - 40px);display:flex;flex-direction:column;max-height:min(430px,calc(100dvh - var(--mobile-header-height,64px) - var(--explore-tabs-height,61px) - var(--mobile-bottom-inset,64px) - env(safe-area-inset-top,0px) - 280px));overflow-y:auto;overscroll-behavior:contain}
  .mta-route-menu>*{flex-shrink:0}
  .mta-route-menu>.mta-route-options{flex:1 1 auto;min-height:44px;max-height:220px}
  .mta-ticker[data-motion="false"] .mta-ticker-fallback{white-space:normal;line-height:1.4;padding-block:6px}
  #today-preferences-form .today-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
  #today-preferences-form .today-actions{grid-template-columns:1fr 1fr;gap:8px}
  #today-preferences-form .today-actions button[type=submit]{grid-column:1/-1}
}
@media(max-width:380px){
  .creator-social-row{grid-template-columns:88px minmax(0,1fr) 44px;gap:6px}
}