/* Team portal: fit OS workspace to narrow Android WebViews. */
.modal-bg { grid-template-columns: minmax(0, 1fr); }
.modal.order-workspace { min-width: 0; max-width: 920px; justify-self: center; overflow-wrap: anywhere; }
.order-workspace .order-edit-fields { min-inline-size: 0; width: 100%; margin: 0; padding: 0; border: 0; }
.order-workspace .order-edit-fields > *, .order-workspace .material-form, .order-workspace .material-entries { min-width: 0; max-width: 100%; }
.order-workspace textarea, .order-workspace input, .order-workspace select { max-width: 100%; }
.order-workspace img, .order-workspace video { max-width: 100%; }
@media (max-width: 800px) {
 .modal-bg { padding: 0; align-items: end; }
 .modal.order-workspace { width: 100%; max-width: 100%; max-height: 94vh; max-height: 94dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; font-size: 16px; line-height: 1.45; }
 .order-workspace > .eyebrow { display: block; padding-right: 48px; }
 .modal.order-workspace h2 { font-size: 24px; line-height: 1.2; margin: 10px 0 14px; padding-right: 40px; }
 .modal.order-workspace h3 { font-size: 18px; line-height: 1.35; margin-top: 12px; }
 .order-workspace .close { right: 8px; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; line-height: 1; }
 .order-workspace > p { margin: 10px 0; }
 .order-workspace .description { padding: 12px; margin: 14px 0; }
 .order-workspace .description p { margin: 8px 0 0; }
 .order-workspace .material-section { margin-top: 16px; padding-top: 16px; }
 .order-workspace .workflow { gap: 8px; margin: 14px 0; grid-template-columns: minmax(0, 1fr); }
 .order-workspace .workflow button, .order-workspace .photo-upload { min-width: 0; min-height: 44px; white-space: normal; }
 .order-workspace .material-section > textarea { min-height: 110px; padding: 10px; font-size: 16px; }
 .hero { padding: 18px; gap: 12px; }
 .hero > div { min-width: 0; }
 .hero h1 { font-size: 28px; line-height: 1.1; }
 .hero .score { padding: 10px; gap: 8px; flex-shrink: 0; }
 .hero .score b { font-size: 22px; }
}


@media (max-width: 800px) {
 .top { flex-wrap: wrap; gap: 8px; }
 .top .brand, .top .user { min-width: 0; max-width: 100%; }
 .top .user { flex-wrap: wrap; gap: 8px; }
 .top .brand b { overflow-wrap: anywhere; }
 .hero h1, .order-main { min-width: 0; overflow-wrap: anywhere; }
 .content { min-width: 0; }
}