/* Mobile typography baseline based on field use at normal iPhone viewing size.
   The dense calendar keeps its separately approved type scale. */
@media(max-width:800px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body:not([data-mobile-route="schedule"]){font-size:16px;line-height:1.55}
  body:not([data-mobile-route="schedule"]) #shell main :is(p,li,dt,dd,td,th,label),
  body:not([data-mobile-route="schedule"]) dialog :is(p,li,dt,dd,td,th,label){font-size:14px!important;line-height:1.55}
  body:not([data-mobile-route="schedule"]) #shell main :is(small,em),
  body:not([data-mobile-route="schedule"]) dialog :is(small,em){font-size:12px!important;line-height:1.45}
  body:not([data-mobile-route="schedule"]) #shell main :is(input,select,textarea),
  body:not([data-mobile-route="schedule"]) dialog :is(input,select,textarea){min-height:48px;font-size:16px!important;line-height:1.45}
  body:not([data-mobile-route="schedule"]) #shell main textarea,
  body:not([data-mobile-route="schedule"]) dialog textarea{min-height:96px}
  body:not([data-mobile-route="schedule"]) #shell main button,
  body:not([data-mobile-route="schedule"]) dialog button{min-height:44px;font-size:14px;line-height:1.3}
  body:not([data-mobile-route="schedule"]) #shell main h1{font-size:22px;line-height:1.35}
  body:not([data-mobile-route="schedule"]) #shell main h2,
  body:not([data-mobile-route="schedule"]) dialog h2{font-size:20px;line-height:1.35}
  body:not([data-mobile-route="schedule"]) #shell main h3,
  body:not([data-mobile-route="schedule"]) dialog h3{font-size:18px;line-height:1.4}
  body:not([data-mobile-route="schedule"]) #shell main h4,
  body:not([data-mobile-route="schedule"]) dialog h4{font-size:16px;line-height:1.4}
  body:not([data-mobile-route="schedule"]) #shell main :is(.badge,[class*="-mini"],[class*="-chip"]){font-size:12px}

  /* The fixed five-item field navigation stays compact. */
  .mobile-bottom-nav button{font-size:11px!important;line-height:1.15!important}
  .mobile-bottom-nav button>span{font-size:22px!important}
  .mobile-field-header small{font-size:12px!important}
  .mobile-field-header h1{font-size:23px!important}

  /* Mail needs a comfortable reading size even in the two-stage list/detail view. */
  .mail-hero p{font-size:13px!important;line-height:1.45}
  .mail-account b{font-size:16px}.mail-account p{font-size:13px!important}.mail-account em{font-size:12px!important}
  .mail-account>strong{font-size:12px}.mail-folders button>b{font-size:13px}.mail-folders button>i{font-size:12px}
  .mail-main>header small{font-size:12px!important}.mail-row-party{font-size:12px}.mail-row>b{font-size:14px}.mail-row>p{font-size:13px!important}.mail-row>small{font-size:12px!important}
  .mail-message-detail dl>div{font-size:13px}.mail-message-detail>pre{font-size:15px;line-height:1.75}.mail-owner-only{font-size:12px}
  .mail-compose-dialog footer p{font-size:12px!important}.mail-compose-files span{font-size:13px}

  /* Common cards and forms should read like the supplied reference, not desktop miniatures. */
  .project-card h3,.reference-card-main h3,.approval-card h3{font-size:17px!important}
  .project-card p,.reference-card-main p,.approval-card p{font-size:14px!important}
  .info small,.metric small,.command-kpis small{font-size:12px!important}
  .info b,.metric b{font-size:16px}
  .tabs button,.link-row a,.quick-form button{font-size:14px!important}
}