/* mobile.css -- phone adjustments, and nothing else.
 *
 * Every rule here lives inside a media query, and this file loads AFTER each
 * page's own <style>, so it wins the cascade where it needs to and is inert
 * everywhere else. The desktop layout is untouched by design: if a rule would
 * apply above 760px, it does not belong in this file.
 */

@media (max-width: 760px){

  /* iOS Safari zooms the whole page when a text field under 16px takes focus,
     which throws the layout off and is the single most jarring thing about
     using any of this on a phone. */
  input[type=text], input[type=search], select, textarea{ font-size:16px }

  .wrap{ padding-left:13px; padding-right:13px }

  /* thumbs, not pointers: 44px is the size a finger actually hits */
  button{ padding:12px 15px; font-size:14px; min-height:44px }
  .tool{ padding:11px 13px; min-height:44px }
  .jump button, .hours button, .ranks button{ min-height:38px; padding:9px 12px }

  .bar{ gap:8px; padding:11px 12px }
  .bar label{ font-size:9.5px; letter-spacing:.1em }
  input[type=range]{ width:96px; height:26px }
  input[type=text]{ width:10ch }
  input[type=text].wide{ width:12ch }

  /* these push themselves to the right edge on desktop; on a phone that just
     makes a lonely row */
  .jump, .hours, .spacer{ margin-left:0 }
  .spacer{ flex-basis:100% }

  .mast{ padding-top:34px }
  .lede{ font-size:1rem }
  .cols, .two{ grid-template-columns:1fr }
  .card{ padding:16px 17px }

  .meter, .legend, .clock, .check, .readout, .striprow{
    gap:11px 14px; font-size:10.5px; padding:10px 13px;
  }
}

@media (max-width: 520px){

  /* A phone screen is mostly canvas otherwise, and you cannot see the numbers
     underneath without scrolling past the thing they describe. */
  #scene, #world, #basin, #pic, #plot{ height:320px }
  #edge{ height:210px }
  #comb{ height:54px }
  #ahead{ height:58px }
  #ramp{ height:180px }
  .strip{ height:86px }
  a.tile canvas, a.card2 canvas{ height:148px }

  h1{ font-size:clamp(2rem,12vw,2.7rem) }
  h2.named{ font-size:clamp(1.5rem,8vw,2rem) }
  .ask input{ font-size:1.6rem }

  .facts{ grid-template-columns:1fr }
  .fact b{ font-size:1.6rem }
  .grid{ grid-template-columns:1fr }

  a.start{ padding:14px 16px }
  a.start .go2{ display:none }

  /* the horizontal drag on a canvas must not eat a vertical page scroll */
  canvas{ touch-action:pan-y }
}