/* D38: exact mileage modes. Photo remains a reminder image; numeric entry is a separate compact block below it. */
.banner-zone {flex-shrink:0; max-height:min(48dvh,440px); overflow-y:auto;}
.work-banner.d38-mileage-entry-banner {
  height:auto!important; min-height:0!important; max-height:none!important;
  padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important;
}
.work-banner.d38-mileage-entry-banner .mileage-entry {
  position:static!important; left:auto!important; right:auto!important; bottom:auto!important; transform:none!important; z-index:auto!important;
  box-sizing:border-box; display:flex; align-items:center; gap:8px;
  width:min(430px,calc(100% - 28px)); margin:14px auto 10px; padding:8px;
  border:1px solid var(--border); border-radius:14px; background:var(--panel,#171a1d);
}
.work-banner.d38-mileage-entry-banner .mileage-entry input {flex:1 1 0; min-width:0; height:44px; margin:0; font-size:16px;}
.work-banner.d38-mileage-entry-banner .mileage-entry .primary {flex:0 0 auto; height:44px; margin:0; font-size:16px; padding:0 14px; white-space:nowrap;}
.d38-mileage-confirm .status-line {margin-bottom:8px;}
.d38-mileage-confirm-actions {margin-top:12px;}
.d38-mileage-confirm-actions button {flex:1 1 0; min-height:44px; margin:0;}
@media(max-width:800px) {
  .work-banner.d38-mileage-entry-banner .mileage-entry {width:min(390px,calc(100% - 20px)); margin-top:12px; gap:6px; padding:7px;}
  .work-banner.d38-mileage-entry-banner .mileage-entry .primary {padding-inline:12px;}
}